diff --git a/.changeset/hip-dots-exist.md b/.changeset/hip-dots-exist.md
new file mode 100644
index 000000000..9df768d50
--- /dev/null
+++ b/.changeset/hip-dots-exist.md
@@ -0,0 +1,5 @@
+---
+"@atomicjolt/atomic-elements": minor
+---
+
+Add DateField as a generalization of DateInput. Refactor DateInput to use DateField internally
diff --git a/.gitignore b/.gitignore
index 94a467593..9e7d9e3e1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,4 +19,6 @@ packages/atomic-fuel/libs
 .vscode
 
 
-*.map
\ No newline at end of file
+*.map
+
+.claude
diff --git a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
index 9644acbb4..a8e929bc3 100644
--- a/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
+++ b/packages/atomic-elements/src/components/Buttons/Button/Button.component.tsx
@@ -4,6 +4,11 @@ import { BaseButton, ButtonProps } from "@components/Internal/BaseButton";
 import { StyledButton } from "./Button.styles";
 import { ButtonContext } from "./Button.context";
 
+export type {
+  ButtonProps,
+  ButtonVariants,
+} from "@components/Internal/BaseButton";
+
 /** A button component that can be used to trigger actions or events
  *
  * @example <Button onPress={() => alert("Hello, world!")}>Click me</Button>
diff --git a/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap b/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
index eb09940d9..0147f34ce 100644
--- a/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Chips/ChipGroup/__snapshots__/ChipGroup.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-eiwqOE kTkbYA aje-chip-group"
+    class="sc-fuExOL iflJZZ aje-chip-group"
   >
     <label
       class="sc-FEMpB ipRIbq"
@@ -19,7 +19,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
       aria-labelledby="react-aria-:r1:"
       aria-live="off"
       aria-relevant="additions"
-      class="sc-dPKAra EVgkD"
+      class="sc-gjXmFk fSQRSD"
       data-collection="react-aria-:r5:"
       id="react-aria-:r0:"
       role="grid"
@@ -27,7 +27,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
     >
       <div
         aria-label="Item"
-        class="sc-gjXmFk eErvzQ aje-chip"
+        class="sc-dVupuq fdlSjA aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-1"
         id="react-aria-:r0:-react-aria-1"
@@ -36,7 +36,7 @@ exports[`ChipGroup > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-fuExOL iXcEFL"
+          class="sc-hORkcV cOPNJR"
           role="gridcell"
         >
           Item
diff --git a/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap b/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
index ef05e5709..f6ba7d097 100644
--- a/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Content/Table/__snapshots__/Table.spec.tsx.snap
@@ -11,13 +11,13 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-hUAZgl jvwFqK aje-table"
+        class="sc-gQJZgv WsrJI aje-table"
         data-collection="react-aria-:re:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-iXqmyu elljUK aje-table__header"
+          class="sc-lertIE eooshI aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -26,7 +26,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           >
             <th
               aria-colindex="1"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:re:"
               data-key="a"
               data-searchable="true"
@@ -37,12 +37,12 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 1
                 <div
                   aria-expanded="true"
-                  class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                  class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
                 >
                   <input
                     aria-label="Search a"
@@ -69,7 +69,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             </th>
             <th
               aria-colindex="2"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:re:"
               data-key="b"
               data-sort-visibility="selected"
@@ -78,7 +78,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 2
               </div>
@@ -86,19 +86,19 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </tr>
         </thead>
         <tbody
-          class="sc-lkbiLU aje-table__body"
+          class="sc-ktvNQe aje-table__body"
           role="rowgroup"
         >
           <tr
             aria-labelledby="react-aria-:rd:-react-aria-6-a"
-            class="sc-flQbIK eSugfs aje-table__row"
+            class="sc-bCjwNj jKmMFP aje-table__row"
             data-collection="react-aria-:re:"
             data-key="react-aria-6"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-cYoYeT jruNXQ aje-table__cell"
+              class="sc-dslWvo kSwlk aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-4"
               id="react-aria-:rd:-react-aria-6-a"
@@ -108,7 +108,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               Row 1, Cell 1
             </th>
             <td
-              class="sc-ktvNQe pczWz aje-table__cell"
+              class="sc-eXfTSZ gTLtcK aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-5"
               id="react-aria-:rl:"
@@ -120,14 +120,14 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </tr>
           <tr
             aria-labelledby="react-aria-:rd:-react-aria-9-a"
-            class="sc-flQbIK eSugfs aje-table__row"
+            class="sc-bCjwNj jKmMFP aje-table__row"
             data-collection="react-aria-:re:"
             data-key="react-aria-9"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-cYoYeT jruNXQ aje-table__cell"
+              class="sc-dslWvo kSwlk aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-7"
               id="react-aria-:rd:-react-aria-9-a"
@@ -137,7 +137,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
               Row 2, Cell 1
             </th>
             <td
-              class="sc-ktvNQe pczWz aje-table__cell"
+              class="sc-eXfTSZ gTLtcK aje-table__cell"
               data-collection="react-aria-:re:"
               data-key="react-aria-8"
               id="react-aria-:rp:"
@@ -158,13 +158,13 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-hUAZgl jvwFqK aje-table"
+      class="sc-gQJZgv WsrJI aje-table"
       data-collection="react-aria-:re:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-iXqmyu elljUK aje-table__header"
+        class="sc-lertIE eooshI aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -173,7 +173,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         >
           <th
             aria-colindex="1"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:re:"
             data-key="a"
             data-searchable="true"
@@ -184,12 +184,12 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 1
               <div
                 aria-expanded="true"
-                class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
               >
                 <input
                   aria-label="Search a"
@@ -216,7 +216,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
           </th>
           <th
             aria-colindex="2"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:re:"
             data-key="b"
             data-sort-visibility="selected"
@@ -225,7 +225,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 2
             </div>
@@ -233,19 +233,19 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-lkbiLU aje-table__body"
+        class="sc-ktvNQe aje-table__body"
         role="rowgroup"
       >
         <tr
           aria-labelledby="react-aria-:rd:-react-aria-6-a"
-          class="sc-flQbIK eSugfs aje-table__row"
+          class="sc-bCjwNj jKmMFP aje-table__row"
           data-collection="react-aria-:re:"
           data-key="react-aria-6"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-cYoYeT jruNXQ aje-table__cell"
+            class="sc-dslWvo kSwlk aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-4"
             id="react-aria-:rd:-react-aria-6-a"
@@ -255,7 +255,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             Row 1, Cell 1
           </th>
           <td
-            class="sc-ktvNQe pczWz aje-table__cell"
+            class="sc-eXfTSZ gTLtcK aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-5"
             id="react-aria-:rl:"
@@ -267,14 +267,14 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
         </tr>
         <tr
           aria-labelledby="react-aria-:rd:-react-aria-9-a"
-          class="sc-flQbIK eSugfs aje-table__row"
+          class="sc-bCjwNj jKmMFP aje-table__row"
           data-collection="react-aria-:re:"
           data-key="react-aria-9"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-cYoYeT jruNXQ aje-table__cell"
+            class="sc-dslWvo kSwlk aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-7"
             id="react-aria-:rd:-react-aria-9-a"
@@ -284,7 +284,7 @@ exports[`Table > Snapshots > Should match the snapshot when searchable 1`] = `
             Row 2, Cell 1
           </th>
           <td
-            class="sc-ktvNQe pczWz aje-table__cell"
+            class="sc-eXfTSZ gTLtcK aje-table__cell"
             data-collection="react-aria-:re:"
             data-key="react-aria-8"
             id="react-aria-:rp:"
@@ -362,13 +362,13 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-hUAZgl jvwFqK aje-table"
+        class="sc-gQJZgv WsrJI aje-table"
         data-collection="react-aria-:r1:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-iXqmyu elljUK aje-table__header"
+          class="sc-lertIE eooshI aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -377,7 +377,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           >
             <th
               aria-colindex="1"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:r1:"
               data-key="a"
               data-searchable="true"
@@ -387,12 +387,12 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 1
                 <div
                   aria-expanded="false"
-                  class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                  class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
                 >
                   <input
                     aria-label="Search a"
@@ -433,7 +433,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             </th>
             <th
               aria-colindex="2"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:r1:"
               data-key="b"
               data-sort-visibility="selected"
@@ -442,7 +442,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 2
               </div>
@@ -450,19 +450,19 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </tr>
         </thead>
         <tbody
-          class="sc-lkbiLU aje-table__body"
+          class="sc-ktvNQe aje-table__body"
           role="rowgroup"
         >
           <tr
             aria-labelledby="react-aria-:r0:-react-aria-6-a"
-            class="sc-flQbIK eSugfs aje-table__row"
+            class="sc-bCjwNj jKmMFP aje-table__row"
             data-collection="react-aria-:r1:"
             data-key="react-aria-6"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-cYoYeT jruNXQ aje-table__cell"
+              class="sc-dslWvo kSwlk aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-4"
               id="react-aria-:r0:-react-aria-6-a"
@@ -472,7 +472,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               Row 1, Cell 1
             </th>
             <td
-              class="sc-ktvNQe pczWz aje-table__cell"
+              class="sc-eXfTSZ gTLtcK aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-5"
               id="react-aria-:r8:"
@@ -484,14 +484,14 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </tr>
           <tr
             aria-labelledby="react-aria-:r0:-react-aria-9-a"
-            class="sc-flQbIK eSugfs aje-table__row"
+            class="sc-bCjwNj jKmMFP aje-table__row"
             data-collection="react-aria-:r1:"
             data-key="react-aria-9"
             role="row"
             tabindex="-1"
           >
             <th
-              class="sc-cYoYeT jruNXQ aje-table__cell"
+              class="sc-dslWvo kSwlk aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-7"
               id="react-aria-:r0:-react-aria-9-a"
@@ -501,7 +501,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
               Row 2, Cell 1
             </th>
             <td
-              class="sc-ktvNQe pczWz aje-table__cell"
+              class="sc-eXfTSZ gTLtcK aje-table__cell"
               data-collection="react-aria-:r1:"
               data-key="react-aria-8"
               id="react-aria-:rc:"
@@ -522,13 +522,13 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-hUAZgl jvwFqK aje-table"
+      class="sc-gQJZgv WsrJI aje-table"
       data-collection="react-aria-:r1:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-iXqmyu elljUK aje-table__header"
+        class="sc-lertIE eooshI aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -537,7 +537,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         >
           <th
             aria-colindex="1"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:r1:"
             data-key="a"
             data-searchable="true"
@@ -547,12 +547,12 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 1
               <div
                 aria-expanded="false"
-                class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
               >
                 <input
                   aria-label="Search a"
@@ -593,7 +593,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
           </th>
           <th
             aria-colindex="2"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:r1:"
             data-key="b"
             data-sort-visibility="selected"
@@ -602,7 +602,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 2
             </div>
@@ -610,19 +610,19 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         </tr>
       </thead>
       <tbody
-        class="sc-lkbiLU aje-table__body"
+        class="sc-ktvNQe aje-table__body"
         role="rowgroup"
       >
         <tr
           aria-labelledby="react-aria-:r0:-react-aria-6-a"
-          class="sc-flQbIK eSugfs aje-table__row"
+          class="sc-bCjwNj jKmMFP aje-table__row"
           data-collection="react-aria-:r1:"
           data-key="react-aria-6"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-cYoYeT jruNXQ aje-table__cell"
+            class="sc-dslWvo kSwlk aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-4"
             id="react-aria-:r0:-react-aria-6-a"
@@ -632,7 +632,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             Row 1, Cell 1
           </th>
           <td
-            class="sc-ktvNQe pczWz aje-table__cell"
+            class="sc-eXfTSZ gTLtcK aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-5"
             id="react-aria-:r8:"
@@ -644,14 +644,14 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
         </tr>
         <tr
           aria-labelledby="react-aria-:r0:-react-aria-9-a"
-          class="sc-flQbIK eSugfs aje-table__row"
+          class="sc-bCjwNj jKmMFP aje-table__row"
           data-collection="react-aria-:r1:"
           data-key="react-aria-9"
           role="row"
           tabindex="-1"
         >
           <th
-            class="sc-cYoYeT jruNXQ aje-table__cell"
+            class="sc-dslWvo kSwlk aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-7"
             id="react-aria-:r0:-react-aria-9-a"
@@ -661,7 +661,7 @@ exports[`Table > Snapshots > should match the snapshot 1`] = `
             Row 2, Cell 1
           </th>
           <td
-            class="sc-ktvNQe pczWz aje-table__cell"
+            class="sc-eXfTSZ gTLtcK aje-table__cell"
             data-collection="react-aria-:r1:"
             data-key="react-aria-8"
             id="react-aria-:rc:"
@@ -739,13 +739,13 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
       <table
         aria-describedby=""
         aria-label="table"
-        class="sc-hUAZgl jvwFqK aje-table"
+        class="sc-gQJZgv WsrJI aje-table"
         data-collection="react-aria-:rr:"
         role="grid"
         tabindex="0"
       >
         <thead
-          class="sc-iXqmyu elljUK aje-table__header"
+          class="sc-lertIE eooshI aje-table__header"
           role="rowgroup"
         >
           <tr
@@ -754,7 +754,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           >
             <th
               aria-colindex="1"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:rr:"
               data-key="a"
               data-searchable="true"
@@ -764,12 +764,12 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 1
                 <div
                   aria-expanded="false"
-                  class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                  class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
                 >
                   <input
                     aria-label="Search a"
@@ -810,7 +810,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </th>
             <th
               aria-colindex="2"
-              class="sc-lertIE ljXApe aje-table__column"
+              class="sc-jdabBK hvMaHp aje-table__column"
               data-collection="react-aria-:rr:"
               data-key="b"
               data-sort-visibility="selected"
@@ -819,7 +819,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               tabindex="-1"
             >
               <div
-                class="sc-dJkDXt hLTkTv"
+                class="sc-bHTlQz cLtBVr"
               >
                 Column 2
               </div>
@@ -827,19 +827,19 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </tr>
         </thead>
         <tbody
-          class="sc-lkbiLU aje-table__body"
+          class="sc-ktvNQe aje-table__body"
           data-loading="true"
           role="rowgroup"
         >
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":rv:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -869,15 +869,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":rv:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -892,11 +892,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r10:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -926,15 +926,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r10:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -950,14 +950,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r11:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -987,15 +987,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r11:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1010,11 +1010,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r12:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1044,15 +1044,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r12:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1068,14 +1068,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r13:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1105,15 +1105,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r13:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1128,11 +1128,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r14:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1162,15 +1162,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r14:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1186,14 +1186,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r15:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1223,15 +1223,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r15:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1246,11 +1246,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r16:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1280,15 +1280,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r16:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1304,14 +1304,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r17:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1341,15 +1341,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r17:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1364,11 +1364,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r18:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1398,15 +1398,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r18:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1422,14 +1422,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r19:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1459,15 +1459,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r19:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1482,11 +1482,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1a:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1516,15 +1516,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1a:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1540,14 +1540,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1b:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1577,15 +1577,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1b:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1600,11 +1600,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1c:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1634,15 +1634,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1c:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1658,14 +1658,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1d:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1695,15 +1695,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1d:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1718,11 +1718,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1e:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1752,15 +1752,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1e:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1776,14 +1776,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1f:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1813,15 +1813,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1f:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1836,11 +1836,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1g:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1870,15 +1870,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1g:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1894,14 +1894,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </td>
           </tr>
           <tr
-            class="sc-flQbIK eSugfs"
+            class="sc-bCjwNj jKmMFP"
           >
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1h:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1931,15 +1931,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1h:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -1954,11 +1954,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
               </svg>
             </td>
             <td
-              class="sc-ktvNQe pczWz"
+              class="sc-eXfTSZ gTLtcK"
             >
               <svg
                 aria-labelledby=":r1i:-aria"
-                class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+                class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
                 role="img"
               >
                 <rect
@@ -1988,15 +1988,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                     id=":r1i:-animated-diff"
                   >
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="0%"
                     />
                     <stop
-                      class="sc-gpHbIA jmTruK"
+                      class="sc-flQbIK hgoKLg"
                       offset="50%"
                     />
                     <stop
-                      class="sc-fAomSb kogvQT"
+                      class="sc-hUAZgl bfQeaC"
                       offset="100%"
                     />
                     <animatetransform
@@ -2022,13 +2022,13 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
     <table
       aria-describedby=""
       aria-label="table"
-      class="sc-hUAZgl jvwFqK aje-table"
+      class="sc-gQJZgv WsrJI aje-table"
       data-collection="react-aria-:rr:"
       role="grid"
       tabindex="0"
     >
       <thead
-        class="sc-iXqmyu elljUK aje-table__header"
+        class="sc-lertIE eooshI aje-table__header"
         role="rowgroup"
       >
         <tr
@@ -2037,7 +2037,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
         >
           <th
             aria-colindex="1"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:rr:"
             data-key="a"
             data-searchable="true"
@@ -2047,12 +2047,12 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 1
               <div
                 aria-expanded="false"
-                class="sc-dycHyt kIeuYg aje-combo-input sc-jdabBK gYmKCD"
+                class="sc-dycHyt kIeuYg aje-combo-input sc-lkbiLU lbnwHi"
               >
                 <input
                   aria-label="Search a"
@@ -2093,7 +2093,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </th>
           <th
             aria-colindex="2"
-            class="sc-lertIE ljXApe aje-table__column"
+            class="sc-jdabBK hvMaHp aje-table__column"
             data-collection="react-aria-:rr:"
             data-key="b"
             data-sort-visibility="selected"
@@ -2102,7 +2102,7 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             tabindex="-1"
           >
             <div
-              class="sc-dJkDXt hLTkTv"
+              class="sc-bHTlQz cLtBVr"
             >
               Column 2
             </div>
@@ -2110,19 +2110,19 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
         </tr>
       </thead>
       <tbody
-        class="sc-lkbiLU aje-table__body"
+        class="sc-ktvNQe aje-table__body"
         data-loading="true"
         role="rowgroup"
       >
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":rv:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2152,15 +2152,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":rv:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2175,11 +2175,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r10:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2209,15 +2209,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r10:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2233,14 +2233,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r11:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2270,15 +2270,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r11:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2293,11 +2293,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r12:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2327,15 +2327,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r12:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2351,14 +2351,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r13:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2388,15 +2388,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r13:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2411,11 +2411,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r14:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2445,15 +2445,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r14:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2469,14 +2469,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r15:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2506,15 +2506,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r15:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2529,11 +2529,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r16:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2563,15 +2563,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r16:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2587,14 +2587,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r17:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2624,15 +2624,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r17:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2647,11 +2647,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r18:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2681,15 +2681,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r18:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2705,14 +2705,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r19:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2742,15 +2742,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r19:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2765,11 +2765,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1a:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2799,15 +2799,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1a:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2823,14 +2823,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1b:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2860,15 +2860,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1b:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2883,11 +2883,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1c:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2917,15 +2917,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1c:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -2941,14 +2941,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1d:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -2978,15 +2978,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1d:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -3001,11 +3001,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1e:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -3035,15 +3035,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1e:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -3059,14 +3059,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1f:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -3096,15 +3096,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1f:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -3119,11 +3119,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1g:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -3153,15 +3153,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1g:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -3177,14 +3177,14 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
           </td>
         </tr>
         <tr
-          class="sc-flQbIK eSugfs"
+          class="sc-bCjwNj jKmMFP"
         >
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1h:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -3214,15 +3214,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1h:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
@@ -3237,11 +3237,11 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
             </svg>
           </td>
           <td
-            class="sc-ktvNQe pczWz"
+            class="sc-eXfTSZ gTLtcK"
           >
             <svg
               aria-labelledby=":r1i:-aria"
-              class="sc-dVupuq gwjsjL aje-skeleton-loader sc-dslWvo flvyTG"
+              class="sc-gpHbIA giimzl aje-skeleton-loader sc-dXYVqG kgOQee"
               role="img"
             >
               <rect
@@ -3271,15 +3271,15 @@ exports[`Table > Snapshots > should match the snapshot when in a loading state 1
                   id=":r1i:-animated-diff"
                 >
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="0%"
                   />
                   <stop
-                    class="sc-gpHbIA jmTruK"
+                    class="sc-flQbIK hgoKLg"
                     offset="50%"
                   />
                   <stop
-                    class="sc-fAomSb kogvQT"
+                    class="sc-hUAZgl bfQeaC"
                     offset="100%"
                   />
                   <animatetransform
diff --git a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
index 90d31c312..d29f3e908 100644
--- a/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/Combobox/__snapshots__/Combobox.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`matches snapshots > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-hUAZgl itcLkM aje-combobox sc-flQbIK egMzxw is-medium"
+    class="sc-gQJZgv hPjVTq aje-combobox sc-bCjwNj dgLlxv is-medium"
   >
     <label
       class="sc-jHswkR dFmjfU"
@@ -68,10 +68,10 @@ exports[`matches snapshots > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-hUAZgl itcLkM aje-combobox sc-flQbIK egMzxw aje-combobox--floating is-medium"
+    class="sc-gQJZgv hPjVTq aje-combobox sc-bCjwNj dgLlxv aje-combobox--floating is-medium"
   >
     <div
-      class="sc-gpHbIA eEUGqc"
+      class="sc-flQbIK llRNxW"
     >
       <div
         class="sc-kXOizl cQNTLc aje-combo-input"
diff --git a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
index 450e7130e..acedf13de 100644
--- a/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/CustomSelect/__snapshots__/CustomSelect.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`matches snapshots > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-select sc-gQJZgv fvvEjB aje-select aje-select--default"
+    class="sc-flQbIK cjxgDK aje-select sc-iXqmyu gMHWSj aje-select aje-select--default"
   >
     <div
       aria-hidden="true"
@@ -49,7 +49,7 @@ exports[`matches snapshots > matches default variant 1`] = `
       type="button"
     >
       <span
-        class="sc-hUAZgl copoPc"
+        class="sc-gQJZgv dlYfMK"
         id="react-aria-:r7:"
       >
         Select an option
@@ -72,7 +72,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-select sc-gQJZgv fvvEjB aje-select aje-select--floating aje-select--floating"
+    class="sc-flQbIK cjxgDK aje-select sc-iXqmyu gMHWSj aje-select aje-select--floating aje-select--floating"
   >
     <div
       aria-hidden="true"
@@ -100,7 +100,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
       </label>
     </div>
     <div
-      class="sc-flQbIK llRNxW"
+      class="sc-bCjwNj cJjdMN"
     >
       <button
         aria-expanded="false"
@@ -112,7 +112,7 @@ exports[`matches snapshots > matches floating variant 1`] = `
         type="button"
       >
         <span
-          class="sc-hUAZgl copoPc"
+          class="sc-gQJZgv dlYfMK"
           id="react-aria-:rf:"
         />
         <i
diff --git a/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
index 0abef7833..03453b5ff 100644
--- a/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/ListBox/__snapshots__/ListBox.spec.tsx.snap
@@ -6,14 +6,14 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <ul
-    class="sc-dPKAra hoNxNR aje-listbox is-medium"
+    class="sc-gjXmFk jdVLQN aje-listbox is-medium"
     data-collection="react-aria-:r0:"
     id="react-aria-:r1:"
     role="listbox"
     tabindex="0"
   >
     <li
-      class="sc-hORkcV cJcdeD aje-listbox__item"
+      class="sc-fAomSb eHIZpg aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="1"
       id="react-aria-:r1:-option-1"
@@ -23,7 +23,7 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
       Item 1
     </li>
     <li
-      class="sc-hORkcV cJcdeD aje-listbox__item"
+      class="sc-fAomSb eHIZpg aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="2"
       id="react-aria-:r1:-option-2"
@@ -33,7 +33,7 @@ exports[`ListBox > matches snapshots > when closed 1`] = `
       Item 2
     </li>
     <li
-      class="sc-hORkcV cJcdeD aje-listbox__item"
+      class="sc-fAomSb eHIZpg aje-listbox__item"
       data-collection="react-aria-:r0:"
       data-key="3"
       id="react-aria-:r1:-option-3"
diff --git a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
index 86ba75667..0af1a1b5e 100644
--- a/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Dropdowns/MultiSelect/__snapshots__/MultiSelect.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`MultiSelect > matches default variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-hUAZgl itcLkM aje-multiselect sc-flQbIK gKNZcY aje-multiselect aje-multiselect--default"
+    class="sc-gQJZgv hPjVTq aje-multiselect sc-bCjwNj jnfLbf aje-multiselect aje-multiselect--default"
   >
     <label
       class="sc-dVBluf eSKkgA"
@@ -43,10 +43,10 @@ exports[`MultiSelect > matches floating variant 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-hUAZgl itcLkM aje-multiselect sc-flQbIK gKNZcY aje-multiselect aje-multiselect--floating aje-multiselect--floating"
+    class="sc-gQJZgv hPjVTq aje-multiselect sc-bCjwNj jnfLbf aje-multiselect aje-multiselect--floating aje-multiselect--floating"
   >
     <div
-      class="sc-gpHbIA eEUGqc"
+      class="sc-flQbIK llRNxW"
     >
       <button
         aria-expanded="false"
diff --git a/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
index 72ce395da..7bfc1e931 100644
--- a/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/ChipGroupField/__snapshots__/ChipGroupField.spec.tsx.snap
@@ -6,14 +6,14 @@ exports[`ChipGroupField > matches snapshot 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-eiwqOE kTkbYA aje-chip-group"
+    class="sc-fuExOL iflJZZ aje-chip-group"
   >
     <div
       aria-atomic="false"
       aria-labelledby="react-aria-:r1:"
       aria-live="off"
       aria-relevant="additions"
-      class="sc-dPKAra EVgkD"
+      class="sc-gjXmFk fSQRSD"
       data-collection="react-aria-:r5:"
       id="react-aria-:r0:"
       role="grid"
@@ -21,7 +21,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
     >
       <div
         aria-label="Item 1"
-        class="sc-gjXmFk eErvzQ aje-chip"
+        class="sc-dVupuq fdlSjA aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-1"
         id="react-aria-:r0:-react-aria-1"
@@ -30,7 +30,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-fuExOL iXcEFL"
+          class="sc-hORkcV cOPNJR"
           role="gridcell"
         >
           Item 1
@@ -38,7 +38,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       </div>
       <div
         aria-label="Item 2"
-        class="sc-gjXmFk eErvzQ aje-chip"
+        class="sc-dVupuq fdlSjA aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-2"
         id="react-aria-:r0:-react-aria-2"
@@ -47,7 +47,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-fuExOL iXcEFL"
+          class="sc-hORkcV cOPNJR"
           role="gridcell"
         >
           Item 2
@@ -55,7 +55,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       </div>
       <div
         aria-label="Item 3"
-        class="sc-gjXmFk eErvzQ aje-chip"
+        class="sc-dVupuq fdlSjA aje-chip"
         data-collection="react-aria-:r5:"
         data-key="react-aria-3"
         id="react-aria-:r0:-react-aria-3"
@@ -64,7 +64,7 @@ exports[`ChipGroupField > matches snapshot 1`] = `
       >
         <div
           aria-colindex="1"
-          class="sc-fuExOL iXcEFL"
+          class="sc-hORkcV cOPNJR"
           role="gridcell"
         >
           Item 3
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.component.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.component.tsx
new file mode 100644
index 000000000..030dad992
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.component.tsx
@@ -0,0 +1,117 @@
+import { useRef } from "react";
+import {
+  DateFieldState,
+  DateSegment as ReactStatelyDateSegment,
+  useDateFieldState,
+} from "react-stately";
+import { filterDOMProps } from "@react-aria/utils";
+import { createContext } from "react";
+import { DOMAttributes } from "@react-types/shared";
+import {
+  AriaDateFieldProps,
+  DateValue,
+  useDateField,
+} from "@react-aria/datepicker";
+import { useLocale } from "@react-aria/i18n";
+import { createCalendar } from "@internationalized/date";
+
+import { AriaProps } from "../../../types";
+import { FieldProps } from "../Field";
+import { StyledField } from "../Field.styles";
+import { Provider } from "../../Internal/Provider";
+import {
+  FieldErrorContext,
+  FieldLabelContext,
+  FieldMessageContext,
+} from "../contexts";
+import { useRenderProps } from "@hooks";
+
+export interface DateFieldContextType {
+  state: DateFieldState;
+  segments: ReactStatelyDateSegment[];
+  fieldProps: DOMAttributes;
+}
+
+export const DateFieldContext = createContext<DateFieldContextType | null>(
+  null
+);
+
+export interface DateFieldProps<T extends DateValue>
+  extends FieldProps,
+    Omit<AriaProps<AriaDateFieldProps<T>>, "label"> {}
+
+/** Provides the accessbility implementation for a
+ * date field and its associated label, error message, and description.
+ * */
+export function DateField<T extends DateValue>(props: DateFieldProps<T>) {
+  const {
+    isDisabled,
+    isRequired,
+    isReadOnly,
+    isInvalid: propIsInvalid,
+  } = props;
+
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const ref = useRef<HTMLDivElement>(null);
+  const {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+  } = useDateField(
+    {
+      ...props,
+      label: true,
+    },
+    state,
+    ref
+  );
+
+  const renderProps = useRenderProps({
+    ...props,
+    componentClassName: "aje-datefield",
+    values: {
+      isInvalid: isInvalid || propIsInvalid,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+    },
+    selectors: {
+      "data-invalid": isInvalid || propIsInvalid,
+      "data-disabled": isDisabled,
+      "data-readonly": isReadOnly,
+      "data-required": isRequired,
+    },
+  });
+
+  const dateFieldContext: DateFieldContextType = {
+    state,
+    segments: state.segments,
+    fieldProps,
+  };
+
+  return (
+    <StyledField {...renderProps} {...filterDOMProps(props)} ref={ref}>
+      <Provider
+        values={[
+          [FieldLabelContext.Provider, labelProps],
+          [FieldMessageContext.Provider, descriptionProps],
+          [
+            FieldErrorContext.Provider,
+            { ...errorMessageProps, isInvalid: isInvalid || propIsInvalid },
+          ],
+          [DateFieldContext.Provider, dateFieldContext],
+        ]}
+      >
+        {renderProps.children}
+      </Provider>
+    </StyledField>
+  );
+}
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
new file mode 100644
index 000000000..cf1500dbb
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
@@ -0,0 +1,95 @@
+import { describe, test, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { parseDate } from "@internationalized/date";
+import { DateField } from ".";
+import { Label, Message, ErrorMessage, ComboInput } from "../";
+
+describe("DateField", () => {
+  describe("matches snapshots", () => {
+    test("basic composition", () => {
+      const result = render(
+        <DateField>
+          <Label>Date</Label>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with value", () => {
+      const result = render(
+        <DateField value={parseDate("2023-01-15")}>
+          <Label>Date</Label>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with message and error", () => {
+      const result = render(
+        <DateField isInvalid>
+          <Label>Date</Label>
+          <Message>Enter your birth date</Message>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+          <ErrorMessage>Please enter a valid date</ErrorMessage>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("disabled state", () => {
+      const result = render(
+        <DateField isDisabled>
+          <Label>Date</Label>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("required state", () => {
+      const result = render(
+        <DateField isRequired>
+          <Label>Date</Label>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with granularity hour", () => {
+      const result = render(
+        <DateField granularity="hour">
+          <Label>Date and Time</Label>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
new file mode 100644
index 000000000..2531a130d
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
@@ -0,0 +1,185 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { now, getLocalTimeZone } from "@internationalized/date";
+import { DateField } from ".";
+import { Label } from "../Atoms/Label";
+import { Message } from "../Atoms/Message";
+import { ErrorMessage } from "../Atoms/ErrorMessage";
+import { ComboInput } from "../ComboInput";
+import { FieldStateControls } from "@sb/helpers";
+
+export default {
+  title: "Fields/DateField",
+  component: DateField,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    ...FieldStateControls,
+    value: {
+      control: false,
+      description:
+        "The value of the date field. Accepts a value from `@internationalized/date` library",
+    },
+    defaultValue: {
+      control: false,
+      description:
+        "The default value of the date field. Accepts a value from `@internationalized/date` library",
+    },
+    granularity: {
+      control: "select",
+      options: ["day", "hour", "minute", "second"],
+      description: "The granularity of the date field",
+    },
+    hideTimeZone: {
+      control: "boolean",
+      description: "Hides the timezone",
+    },
+    shouldForceLeadingZeros: {
+      control: "boolean",
+      description:
+        "Forces leading zeros on the date field. If this is not set it is determined by the user's locale",
+    },
+    maxValue: {
+      control: false,
+      description:
+        "The maximum value of the date field. Accepts a value from `@internationalized/date` library",
+    },
+    minValue: {
+      control: false,
+      description:
+        "The minimum value of the date field. Accepts a value from `@internationalized/date` library",
+    },
+    hourCycle: {
+      control: "select",
+      options: [12, 24],
+      description: "Use a 12 or 24 hour cycle",
+    },
+    isDateUnavailable: {
+      control: false,
+      description:
+        "A function that is called for every date. If it returns true, the date is disabled",
+    },
+    onChange: {
+      action: "onChange",
+      description: "Handler that is called when the date value changes",
+      table: {
+        category: "Events",
+      },
+    },
+  },
+} as Meta<typeof DateField>;
+
+type Story = StoryObj<typeof DateField>;
+
+const date = now(getLocalTimeZone());
+
+export const Primary: Story = {
+  args: {
+    defaultValue: date,
+    granularity: "day",
+    hideTimeZone: true,
+    children: [
+      <Label key="label">Date</Label>,
+      <Message key="message">Select a date</Message>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+      <ErrorMessage key="error">Please enter a valid date</ErrorMessage>,
+    ],
+  },
+};
+
+export const DayGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "day",
+    children: [
+      <Label key="label">Birth Date</Label>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+    ],
+  },
+};
+
+export const HourGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "hour",
+    children: [
+      <Label key="label">Meeting Date & Time</Label>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+    ],
+  },
+};
+
+export const MinuteGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "minute",
+    children: [
+      <Label key="label">Appointment Time</Label>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+    ],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...Primary.args,
+    isInvalid: true,
+    children: [
+      <Label key="label">Event Date</Label>,
+      <Message key="message">Choose when your event will happen</Message>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+      <ErrorMessage key="error">Please select a future date</ErrorMessage>,
+    ],
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    isDisabled: true,
+    children: [
+      <Label key="label">System Date</Label>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+    ],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Primary.args,
+    isRequired: true,
+    children: [
+      <Label key="label">Due Date</Label>,
+      <Message key="message">This field is required</Message>,
+      <ComboInput key="input" padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
+    ],
+  },
+};
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.styles.ts b/packages/atomic-elements/src/components/Fields/DateField/DateField.styles.ts
new file mode 100644
index 000000000..aaaa7d620
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.styles.ts
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const StyledDateSegments = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const StyledDateSegment = styled.div`
+  margin: 0 0.1rem;
+`;
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegment.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegment.tsx
new file mode 100644
index 000000000..a70be3ee9
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegment.tsx
@@ -0,0 +1,39 @@
+import { useRef, useContext } from "react";
+import cn from "classnames";
+import { useDateSegment } from "@react-aria/datepicker";
+import { DateFieldContext } from "./DateField.component";
+import { StyledDateSegment } from "./DateField.styles";
+
+export interface DateFieldSegmentProps {
+  readonly index: number;
+  readonly className?: string;
+}
+
+export function DateFieldSegment(props: DateFieldSegmentProps) {
+  const { index, className } = props;
+  const context = useContext(DateFieldContext);
+
+  if (!context) {
+    throw new Error("DateField.Segment must be used within a DateField");
+  }
+
+  const { state, segments } = context;
+  const segment = segments[index];
+
+  if (!segment) {
+    return null;
+  }
+
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const segmentClassName = cn("aje-input__segment", className, {
+    placeholder: segment.isPlaceholder,
+  });
+
+  return (
+    <StyledDateSegment {...segmentProps} ref={ref} className={segmentClassName}>
+      {segment.text}
+    </StyledDateSegment>
+  );
+}
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
new file mode 100644
index 000000000..28d6a4a99
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { DateSegment as ReactStatelyDateSegment } from "react-stately";
+import { DateFieldContext } from "./DateField.component";
+import { ComboInput } from "../ComboInput";
+import { StyledDateSegments } from "./DateField.styles";
+
+export interface DateFieldSegmentsProps {
+  children: (
+    segment: ReactStatelyDateSegment,
+    index: number
+  ) => React.ReactNode;
+}
+
+export function DateFieldSegments(props: DateFieldSegmentsProps) {
+  const { children } = props;
+  const context = useContext(DateFieldContext);
+
+  if (!context) {
+    throw new Error("DateField.Segments must be used within a DateField");
+  }
+
+  const { segments, fieldProps } = context;
+
+  return (
+    <StyledDateSegments className="aje-input__date-segments" {...fieldProps}>
+      {segments.map((segment, index) => children(segment, index))}
+    </StyledDateSegments>
+  );
+}
diff --git a/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
new file mode 100644
index 000000000..f677d2421
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
@@ -0,0 +1,691 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DateField > matches snapshots > basic composition 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:r1:"
+    >
+      Date
+    </label>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-labelledby="react-aria-:r1:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:r0:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-label="month, "
+          aria-labelledby="react-aria-:r5: react-aria-:r1:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r5:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r9: react-aria-:r1:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rd: react-aria-:r1:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rd:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateField > matches snapshots > disabled state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+    data-disabled="true"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:r1e:"
+    >
+      Date
+    </label>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-disabled="true"
+        aria-labelledby="react-aria-:r1e:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:r1d:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-disabled="true"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r1i: react-aria-:r1e:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r1i:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-disabled="true"
+          aria-label="day, "
+          aria-labelledby="react-aria-:r1m: react-aria-:r1e:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r1m:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-disabled="true"
+          aria-label="year, "
+          aria-labelledby="react-aria-:r1q: react-aria-:r1e:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r1q:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateField > matches snapshots > required state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+    data-required="true"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:r1t:"
+    >
+      Date
+    </label>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-labelledby="react-aria-:r1t:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:r1s:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-label="month, "
+          aria-labelledby="react-aria-:r21: react-aria-:r1t:"
+          aria-required="true"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r21:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r25: react-aria-:r1t:"
+          aria-required="true"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r25:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r29: react-aria-:r1t:"
+          aria-required="true"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r29:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateField > matches snapshots > with granularity hour 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:r2c:"
+    >
+      Date and Time
+    </label>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-labelledby="react-aria-:r2c:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:r2b:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-label="month, "
+          aria-labelledby="react-aria-:r2g: react-aria-:r2c:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2g:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r2k: react-aria-:r2c:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2k:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r2o: react-aria-:r2c:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2o:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          , 
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          ⁦
+        </div>
+        <div
+          aria-label="hour, "
+          aria-labelledby="react-aria-:r2u: react-aria-:r2c:"
+          aria-valuemax="11"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2u:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          ⁩
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+           
+        </div>
+        <div
+          aria-label="AM/PM, "
+          aria-labelledby="react-aria-:r34: react-aria-:r2c:"
+          aria-valuemax="12"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r34:"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          AM
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateField > matches snapshots > with message and error 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+    data-invalid="true"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:rv:"
+    >
+      Date
+    </label>
+    <p
+      class="sc-jbAkgO eCpzul is-auto"
+      id="react-aria-:r11:"
+    >
+      Enter your birth date
+    </p>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r11: react-aria-:r12:"
+        aria-labelledby="react-aria-:rv:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:ru:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r11: react-aria-:r12:"
+          aria-invalid="true"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r13: react-aria-:rv:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r13:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-describedby="react-aria-:r11: react-aria-:r12:"
+          aria-invalid="true"
+          aria-label="day, "
+          aria-labelledby="react-aria-:r17: react-aria-:rv:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r17:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-describedby="react-aria-:r11: react-aria-:r12:"
+          aria-invalid="true"
+          aria-label="year, "
+          aria-labelledby="react-aria-:r1b: react-aria-:rv:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r1b:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+    <p
+      class="sc-dycHyt bhJLqG is-medium"
+      id="react-aria-:r12:"
+    >
+      Please enter a valid date
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateField > matches snapshots > with value 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-FEMpB kZvrAs aje-datefield"
+  >
+    <label
+      class="sc-fLDLck ljYgPJ"
+      id="react-aria-:rg:"
+    >
+      Date
+    </label>
+    <div
+      class="sc-hRDKVd jFxrzF aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-description-0"
+        aria-labelledby="react-aria-:rg:"
+        class="sc-gNZgCX gtJSAS aje-input__date-segments"
+        id="react-aria-:rf:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-description-0"
+          aria-label="month, "
+          aria-labelledby="react-aria-:rk: react-aria-:rg:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="1"
+          aria-valuetext="1 – January"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:rk:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:ro: react-aria-:rg:"
+          aria-valuemax="31"
+          aria-valuemin="1"
+          aria-valuenow="15"
+          aria-valuetext="15"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:ro:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          15
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rs: react-aria-:rg:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2023"
+          aria-valuetext="2023"
+          autocorrect="off"
+          class="sc-kfeOyU flRcvM aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:rs:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          2023
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/atomic-elements/src/components/Fields/DateField/index.tsx b/packages/atomic-elements/src/components/Fields/DateField/index.tsx
new file mode 100644
index 000000000..b0787a1f9
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/index.tsx
@@ -0,0 +1,13 @@
+import { DateField as DateFieldComponent } from "./DateField.component";
+import { DateFieldSegment } from "./DateFieldSegment";
+import { DateFieldSegments } from "./DateFieldSegments";
+
+export const DateField = Object.assign(DateFieldComponent, {
+  Segment: DateFieldSegment,
+  Segments: DateFieldSegments,
+});
+
+export type { DateFieldProps, DateFieldContextType } from "./DateField.component";
+export type { DateFieldSegmentProps } from "./DateFieldSegment";
+export type { DateFieldSegmentsProps } from "./DateFieldSegments";
+export { DateFieldContext } from "./DateField.component";
\ No newline at end of file
diff --git a/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
index 52d37fbe5..1a8f9ccce 100644
--- a/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/MultiSelectField/__snapshots__/MultiSelectField.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`MultiSelectField > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-multiselect"
+    class="sc-flQbIK cjxgDK aje-multiselect"
   >
     <button
       aria-expanded="false"
@@ -29,7 +29,7 @@ exports[`MultiSelectField > matches snapshots > when open 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-multiselect"
+    class="sc-flQbIK cjxgDK aje-multiselect"
   >
     <button
       aria-controls="react-aria-:r9:"
diff --git a/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap b/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
index df403fa82..ebd89a4ce 100644
--- a/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Fields/SelectField/__snapshots__/SelectField.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-select"
+    class="sc-flQbIK cjxgDK aje-select"
   >
     <div
       aria-hidden="true"
@@ -48,7 +48,7 @@ exports[`SelectField > matches snapshots > when closed 1`] = `
       type="button"
     >
       <span
-        class="sc-hUAZgl copoPc"
+        class="sc-gQJZgv dlYfMK"
         id="react-aria-:r7:"
       />
     </button>
@@ -62,7 +62,7 @@ exports[`SelectField > matches snapshots > when open 1`] = `
     data-react-aria-hidden="true"
   />
   <div
-    class="sc-gpHbIA bhSUCw aje-select"
+    class="sc-flQbIK cjxgDK aje-select"
   >
     <div
       aria-hidden="true"
@@ -106,7 +106,7 @@ exports[`SelectField > matches snapshots > when open 1`] = `
       type="button"
     >
       <span
-        class="sc-hUAZgl copoPc"
+        class="sc-gQJZgv dlYfMK"
         id="react-aria-:rf:"
       />
     </button>
diff --git a/packages/atomic-elements/src/components/Fields/index.ts b/packages/atomic-elements/src/components/Fields/index.ts
index ca9206760..c1305170d 100644
--- a/packages/atomic-elements/src/components/Fields/index.ts
+++ b/packages/atomic-elements/src/components/Fields/index.ts
@@ -15,6 +15,7 @@ export { Field } from "./Field";
 export { TextField } from "./TextField";
 export { NumberField } from "./NumberField";
 export { SearchField } from "./SearchField";
+export { DateField } from "./DateField";
 
 export * from "./contexts";
 
@@ -35,3 +36,4 @@ export type { FieldProps } from "./Field";
 export type { TextFieldProps } from "./TextField";
 export type { NumberFieldProps } from "./NumberField";
 export type { SearchFieldProps } from "./SearchField";
+export type { DateFieldProps } from "./DateField";
diff --git a/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
index cbdb2b41b..a772ad0f5 100644
--- a/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/Checkbox/__snapshots__/CheckBox.spec.tsx.snap
@@ -3,15 +3,15 @@
 exports[`CheckBox > Snapshots > should match snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="sc-hORkcV kCvEOs aje-checkbox"
+    class="sc-fAomSb csdZfx aje-checkbox"
   >
     <input
-      class="sc-fuExOL gCzqgp"
+      class="sc-hORkcV ipHIGb"
       tabindex="0"
       type="checkbox"
     />
     <span
-      class="sc-gjXmFk dVVlKg"
+      class="sc-dVupuq rOOtK"
     />
   </div>
 </DocumentFragment>
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.component.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.component.tsx
index c12e97adc..3a9b5ec86 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.component.tsx
@@ -1,22 +1,13 @@
-import { useRef } from "react";
-import cn from "classnames";
-import {
-  DateFieldState,
-  DateSegment as ReactStatelyDateSegment,
-  useDateFieldState,
-} from "react-stately";
-import {
-  AriaDateFieldProps,
-  DateValue,
-  useDateField,
-  useDateSegment,
-} from "@react-aria/datepicker";
-import { useLocale } from "@react-aria/i18n";
-import { createCalendar } from "@internationalized/date";
+import { AriaDateFieldProps, DateValue } from "@react-aria/datepicker";
 
 import { AriaProps, FieldInputProps } from "../../../../types";
-import { DateInputWrapper, StyledDateSegment } from "./DateInput.styles";
-import { Label, Message, ComboInput, ErrorMessage } from "../../../Fields";
+import {
+  Label,
+  Message,
+  ErrorMessage,
+  DateField,
+  ComboInput,
+} from "../../../Fields";
 import { useRenderProps, fieldStatusSelectors } from "@hooks/useRenderProps";
 
 export interface DateInputProps<T extends DateValue>
@@ -25,18 +16,7 @@ export interface DateInputProps<T extends DateValue>
 
 /** DateInput Component */
 export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
-  const { locale } = useLocale();
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar,
-  });
-
-  const ref = useRef(null);
-  const { labelProps, fieldProps, descriptionProps, errorMessageProps } =
-    useDateField(props, state, ref);
-
-  const { label, size = "medium", error, message, isInvalid } = props;
+  const { label, size = "medium", error, message, ...dateFieldProps } = props;
 
   const renderProps = useRenderProps({
     componentClassName: "aje-input__date",
@@ -46,43 +26,25 @@ export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
   });
 
   return (
-    <DateInputWrapper {...renderProps}>
-      {label && <Label {...labelProps}>{label}</Label>}
-      {message && <Message {...descriptionProps}>{message}</Message>}
-      <ComboInput
-        {...fieldProps}
-        ref={ref}
-        className="aje-input__date-segments"
-        padding="both"
-      >
-        {state.segments.map((segment, i) => (
-          <DateSegment key={i} segment={segment} state={state} />
-        ))}
+    <DateField
+      {...renderProps}
+      {...dateFieldProps}
+      style={{
+        // The props of DateInput can affect the width due to number of segments shown
+        // so we allow it grow larger than the default width constraints.
+        width: "unset",
+        minWidth: "var(--size-x)",
+        ...renderProps.style,
+      }}
+    >
+      {label && <Label>{label}</Label>}
+      {message && <Message>{message}</Message>}
+      <ComboInput padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
       </ComboInput>
-      <ErrorMessage {...errorMessageProps} isInvalid={isInvalid}>
-        {error}
-      </ErrorMessage>
-    </DateInputWrapper>
-  );
-}
-
-interface DateSegmentProps {
-  readonly segment: ReactStatelyDateSegment;
-  readonly state: DateFieldState;
-}
-
-export function DateSegment(props: DateSegmentProps) {
-  const { segment, state } = props;
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-
-  const className = cn("aje-input__segment", {
-    placeholder: segment.isPlaceholder,
-  });
-
-  return (
-    <StyledDateSegment {...segmentProps} ref={ref} className={className}>
-      {segment.text}
-    </StyledDateSegment>
+      <ErrorMessage>{error}</ErrorMessage>
+    </DateField>
   );
 }
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx
new file mode 100644
index 000000000..9bdbbe0f3
--- /dev/null
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx
@@ -0,0 +1,138 @@
+import { describe, test, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { parseDate, now, getLocalTimeZone } from "@internationalized/date";
+import { DateInput } from ".";
+
+describe("DateInput", () => {
+  describe("matches snapshots", () => {
+    const shared = {
+      label: "Date Input",
+      message: "Select a date",
+      error: "Invalid date",
+      onChange: () => {},
+    };
+
+    test("default variant", () => {
+      const result = render(<DateInput {...shared} />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with value", () => {
+      const result = render(
+        <DateInput {...shared} value={parseDate("2023-01-15")} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with default value", () => {
+      const result = render(
+        <DateInput {...shared} defaultValue={parseDate("2023-12-25")} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("day granularity", () => {
+      const result = render(<DateInput {...shared} granularity="day" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("hour granularity", () => {
+      const result = render(<DateInput {...shared} granularity="hour" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("minute granularity", () => {
+      const result = render(<DateInput {...shared} granularity="minute" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("second granularity", () => {
+      const result = render(<DateInput {...shared} granularity="second" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("disabled state", () => {
+      const result = render(<DateInput {...shared} isDisabled />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("required state", () => {
+      const result = render(<DateInput {...shared} isRequired />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("readonly state", () => {
+      const result = render(<DateInput {...shared} isReadOnly />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("invalid state", () => {
+      const result = render(<DateInput {...shared} isInvalid />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with leading zeros", () => {
+      const result = render(<DateInput {...shared} shouldForceLeadingZeros />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("24 hour cycle", () => {
+      const result = render(
+        <DateInput {...shared} granularity="hour" hourCycle={24} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("small size", () => {
+      const result = render(<DateInput {...shared} size="small" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("medium size", () => {
+      const result = render(<DateInput {...shared} size="medium" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("large size", () => {
+      const result = render(<DateInput {...shared} size="large" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with min and max values", () => {
+      const today = now(getLocalTimeZone());
+      const minValue = today.subtract({ days: 30 });
+      const maxValue = today.add({ days: 30 });
+
+      const result = render(
+        <DateInput {...shared} minValue={minValue} maxValue={maxValue} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("without label", () => {
+      const result = render(
+        <DateInput message="Select a date" error="Invalid date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("without message", () => {
+      const result = render(
+        <DateInput label="Date Input" error="Invalid date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("without error", () => {
+      const result = render(
+        <DateInput label="Date Input" message="Select a date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("minimal props", () => {
+      const result = render(<DateInput />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.stories.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.stories.tsx
index 586ed2ce4..91ba87f5f 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.stories.tsx
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.stories.tsx
@@ -6,6 +6,9 @@ import { DateInput } from ".";
 export default {
   title: "Inputs/Date & Time/DateInput",
   component: DateInput,
+  parameters: {
+    layout: "centered",
+  },
   argTypes: {
     ...TextInputControls,
     value: {
@@ -68,6 +71,95 @@ export const Primary: Story = {
 export const DayGranularity: Story = {
   args: {
     ...Primary.args,
+    label: "Birth Date",
     granularity: "day",
+    message: "Select your date of birth",
+  },
+};
+
+export const HourGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Meeting Date & Time",
+    granularity: "hour",
+    hideTimeZone: false,
+    message: "Choose a date and hour",
+  },
+};
+
+export const MinuteGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Appointment Time",
+    granularity: "minute",
+    hideTimeZone: false,
+    message: "Select date and time to the minute",
+  },
+};
+
+export const SecondGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Exact Timestamp",
+    granularity: "second",
+    hideTimeZone: false,
+    message: "Precise time with seconds",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...Primary.args,
+    label: "Event Date",
+    isInvalid: true,
+    error: "Please enter a valid date",
+    message: "Choose when your event will happen",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    label: "System Date",
+    isDisabled: true,
+    message: "This date cannot be changed",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Primary.args,
+    label: "Due Date",
+    isRequired: true,
+    message: "This field is required",
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Primary.args,
+    label: "Created Date",
+    isReadOnly: true,
+    message: "This date is read-only",
+  },
+};
+
+export const WithLeadingZeros: Story = {
+  args: {
+    ...Primary.args,
+    label: "Formatted Date",
+    shouldForceLeadingZeros: true,
+    message: "Date with leading zeros (01/05/2024)",
+  },
+};
+
+export const HourCycle24: Story = {
+  args: {
+    ...Primary.args,
+    label: "24-Hour Format",
+    granularity: "minute",
+    hourCycle: 24,
+    hideTimeZone: false,
+    message: "Time in 24-hour format",
   },
 };
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.styles.ts b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.styles.ts
deleted file mode 100644
index ea5f776dc..000000000
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.styles.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from "styled-components";
-import mixins from "../../../../styles/mixins";
-
-export const DateInputWrapper = styled.div`
-  ${mixins.Regular}
-  ${mixins.FieldStatus}
-  ${mixins.SizingX}
-  --size-sm-x: 230px;
-  --size-md-x: 230px;
-  --size-lg-x: 400px;
-  --input-gap: 0;
-`;
-
-export const StyledDateSegment = styled.div`
-  margin: 0 0.1rem;
-`;
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
new file mode 100644
index 000000000..12b8ad56b
--- /dev/null
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
@@ -0,0 +1,2615 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r75:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r77:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r77:"
+        aria-labelledby="react-aria-:r75:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r74:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r77:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r79: react-aria-:r75:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r79:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r7d: react-aria-:r75:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r7d:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r7h: react-aria-:r75:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r7h:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          , 
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁦
+        </div>
+        <div
+          aria-label="hour, "
+          aria-labelledby="react-aria-:r7n: react-aria-:r75:"
+          aria-valuemax="23"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r7n:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁩
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > day granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r1e:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r1g:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r1g:"
+        aria-labelledby="react-aria-:r1e:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r1d:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r1g:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r1i: react-aria-:r1e:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r1i:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r1m: react-aria-:r1e:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r1m:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r1q: react-aria-:r1e:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r1q:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > default variant 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r1:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r3:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r3:"
+        aria-labelledby="react-aria-:r1:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r0:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r3:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r5: react-aria-:r1:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r5:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r9: react-aria-:r1:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rd: react-aria-:r1:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rd:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > disabled state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    data-disabled="true"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r4q:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r4s:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r4s:"
+        aria-disabled="true"
+        aria-labelledby="react-aria-:r4q:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        data-disabled="true"
+        id="react-aria-:r4p:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r4s:"
+          aria-disabled="true"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r4u: react-aria-:r4q:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r4u:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-disabled="true"
+          aria-label="day, "
+          aria-labelledby="react-aria-:r52: react-aria-:r4q:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r52:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-disabled="true"
+          aria-label="year, "
+          aria-labelledby="react-aria-:r56: react-aria-:r4q:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r56:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > hour granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r1t:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r1v:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r1v:"
+        aria-labelledby="react-aria-:r1t:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r1s:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r1v:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r21: react-aria-:r1t:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r21:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r25: react-aria-:r1t:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r25:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r29: react-aria-:r1t:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r29:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          , 
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁦
+        </div>
+        <div
+          aria-label="hour, "
+          aria-labelledby="react-aria-:r2f: react-aria-:r1t:"
+          aria-valuemax="11"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2f:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁩
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+           
+        </div>
+        <div
+          aria-label="AM/PM, "
+          aria-labelledby="react-aria-:r2l: react-aria-:r1t:"
+          aria-valuemax="12"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2l:"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          AM
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > invalid state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    data-invalid="true"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r67:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r69:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r69: react-aria-:r6a:"
+        aria-labelledby="react-aria-:r67:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        data-invalid="true"
+        id="react-aria-:r66:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r69: react-aria-:r6a:"
+          aria-invalid="true"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r6b: react-aria-:r67:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r6b:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-describedby="react-aria-:r69: react-aria-:r6a:"
+          aria-invalid="true"
+          aria-label="day, "
+          aria-labelledby="react-aria-:r6f: react-aria-:r67:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r6f:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-describedby="react-aria-:r69: react-aria-:r6a:"
+          aria-invalid="true"
+          aria-label="year, "
+          aria-labelledby="react-aria-:r6j: react-aria-:r67:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r6j:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+    <p
+      class="sc-dVBluf RdMcC is-medium"
+      id="react-aria-:r6a:"
+    >
+      Invalid date
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > large size 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-large"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r8q:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r8s:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r8s:"
+        aria-labelledby="react-aria-:r8q:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r8p:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r8s:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r8u: react-aria-:r8q:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r8u:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r92: react-aria-:r8q:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r92:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r96: react-aria-:r8q:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r96:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > medium size 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r8b:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r8d:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r8d:"
+        aria-labelledby="react-aria-:r8b:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r8a:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r8d:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r8f: react-aria-:r8b:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r8f:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r8j: react-aria-:r8b:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r8j:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r8n: react-aria-:r8b:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r8n:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > minimal props 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-labelledby="react-aria-:rb5:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:rb4:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-label="month, "
+          aria-labelledby="react-aria-:rb9: react-aria-:rb5:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rb9:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:rbd: react-aria-:rb5:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rbd:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rbh: react-aria-:rb5:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rbh:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > minute granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r2o:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r2q:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r2q:"
+        aria-labelledby="react-aria-:r2o:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r2n:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r2q:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r2s: react-aria-:r2o:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r2s:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r30: react-aria-:r2o:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r30:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r34: react-aria-:r2o:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r34:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          , 
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁦
+        </div>
+        <div
+          aria-label="hour, "
+          aria-labelledby="react-aria-:r3a: react-aria-:r2o:"
+          aria-valuemax="11"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r3a:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          :
+        </div>
+        <div
+          aria-label="minute, "
+          aria-labelledby="react-aria-:r3e: react-aria-:r2o:"
+          aria-valuemax="59"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r3e:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁩
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+           
+        </div>
+        <div
+          aria-label="AM/PM, "
+          aria-labelledby="react-aria-:r3k: react-aria-:r2o:"
+          aria-valuemax="12"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r3k:"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          AM
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > readonly state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    data-readonly="true"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r5o:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r5q:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r5q:"
+        aria-labelledby="react-aria-:r5o:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        data-readonly="true"
+        id="react-aria-:r5n:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r5q:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r5s: react-aria-:r5o:"
+          aria-readonly="true"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r5s:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r60: react-aria-:r5o:"
+          aria-readonly="true"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r60:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r64: react-aria-:r5o:"
+          aria-readonly="true"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="false"
+          data-placeholder="true"
+          id="react-aria-:r64:"
+          role="spinbutton"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > required state 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    data-required="true"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r59:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r5b:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r5b:"
+        aria-labelledby="react-aria-:r59:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        data-required="true"
+        id="react-aria-:r58:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r5b:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r5d: react-aria-:r59:"
+          aria-required="true"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r5d:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r5h: react-aria-:r59:"
+          aria-required="true"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r5h:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r5l: react-aria-:r59:"
+          aria-required="true"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r5l:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > second granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r3n:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r3p:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r3p:"
+        aria-labelledby="react-aria-:r3n:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r3m:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r3p:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r3r: react-aria-:r3n:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r3r:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r3v: react-aria-:r3n:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r3v:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r43: react-aria-:r3n:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r43:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          , 
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁦
+        </div>
+        <div
+          aria-label="hour, "
+          aria-labelledby="react-aria-:r49: react-aria-:r3n:"
+          aria-valuemax="11"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r49:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          :
+        </div>
+        <div
+          aria-label="minute, "
+          aria-labelledby="react-aria-:r4d: react-aria-:r3n:"
+          aria-valuemax="59"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r4d:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          :
+        </div>
+        <div
+          aria-label="second, "
+          aria-labelledby="react-aria-:r4h: react-aria-:r3n:"
+          aria-valuemax="59"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r4h:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          ––
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          ⁩
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+           
+        </div>
+        <div
+          aria-label="AM/PM, "
+          aria-labelledby="react-aria-:r4n: react-aria-:r3n:"
+          aria-valuemax="12"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r4n:"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          AM
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > small size 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-small"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r7s:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r7u:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r7u:"
+        aria-labelledby="react-aria-:r7s:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r7r:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r7u:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r80: react-aria-:r7s:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r80:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r84: react-aria-:r7s:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r84:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r88: react-aria-:r7s:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r88:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > with default value 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:rv:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r11:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-description-1 react-aria-:r11:"
+        aria-labelledby="react-aria-:rv:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:ru:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-description-1 react-aria-:r11:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r13: react-aria-:rv:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="12"
+          aria-valuetext="12 – December"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:r13:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          12
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r17: react-aria-:rv:"
+          aria-valuemax="31"
+          aria-valuemin="1"
+          aria-valuenow="25"
+          aria-valuetext="25"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:r17:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          25
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r1b: react-aria-:rv:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2023"
+          aria-valuetext="2023"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:r1b:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          2023
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > with leading zeros 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r6m:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r6o:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r6o:"
+        aria-labelledby="react-aria-:r6m:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r6l:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r6o:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r6q: react-aria-:r6m:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r6q:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r6u: react-aria-:r6m:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r6u:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r72: react-aria-:r6m:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r72:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > with min and max values 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:r99:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r9b:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r9b:"
+        aria-labelledby="react-aria-:r99:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r98:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r9b:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r9d: react-aria-:r99:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9d:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:r9h: react-aria-:r99:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9h:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:r9l: react-aria-:r99:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9l:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > with value 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:rg:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:ri:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-description-0 react-aria-:ri:"
+        aria-labelledby="react-aria-:rg:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:rf:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-description-0 react-aria-:ri:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:rk: react-aria-:rg:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="1"
+          aria-valuetext="1 – January"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:rk:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          1
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:ro: react-aria-:rg:"
+          aria-valuemax="31"
+          aria-valuemin="1"
+          aria-valuenow="15"
+          aria-valuetext="15"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:ro:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          15
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rs: react-aria-:rg:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2023"
+          aria-valuetext="2023"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment"
+          contenteditable="true"
+          enterkeyhint="next"
+          id="react-aria-:rs:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          2023
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > without error 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:ram:"
+    >
+      Date Input
+    </label>
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:rao:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:rao:"
+        aria-labelledby="react-aria-:ram:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:ral:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:rao:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:raq: react-aria-:ram:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:raq:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:rau: react-aria-:ram:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rau:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:rb2: react-aria-:ram:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rb2:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > without label 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <p
+      class="sc-gjcoXW dLoCuF is-auto"
+      id="react-aria-:r9q:"
+    >
+      Select a date
+    </p>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-describedby="react-aria-:r9q:"
+        aria-labelledby="react-aria-:r9o:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:r9n:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-describedby="react-aria-:r9q:"
+          aria-label="month, "
+          aria-labelledby="react-aria-:r9s: react-aria-:r9o:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:r9s:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:ra0: react-aria-:r9o:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:ra0:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:ra4: react-aria-:r9o:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:ra4:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DateInput > matches snapshots > without message 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-gNZgCX bAVTuz aje-datefield aje-input__date is-medium"
+    style="min-width: var(--size-x);"
+  >
+    <label
+      class="sc-FEMpB encIGH"
+      id="react-aria-:ra7:"
+    >
+      Date Input
+    </label>
+    <div
+      class="sc-dycHyt kIeuYg aje-combo-input"
+    >
+      <div
+        aria-labelledby="react-aria-:ra7:"
+        class="sc-eiwqOE ikpPXx aje-input__date-segments"
+        id="react-aria-:ra6:"
+        role="group"
+        style="unicode-bidi: isolate;"
+      >
+        <div
+          aria-label="month, "
+          aria-labelledby="react-aria-:rab: react-aria-:ra7:"
+          aria-valuemax="12"
+          aria-valuemin="1"
+          aria-valuenow="2"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:rab:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          mm
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="day, "
+          aria-labelledby="react-aria-:raf: react-aria-:ra7:"
+          aria-valuemax="28"
+          aria-valuemin="1"
+          aria-valuenow="26"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:raf:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          dd
+        </div>
+        <div
+          aria-hidden="true"
+          class="sc-dPKAra iULmFG aje-input__segment"
+        >
+          /
+        </div>
+        <div
+          aria-label="year, "
+          aria-labelledby="react-aria-:raj: react-aria-:ra7:"
+          aria-valuemax="9999"
+          aria-valuemin="1"
+          aria-valuenow="2026"
+          aria-valuetext="Empty"
+          autocorrect="off"
+          class="sc-dPKAra iULmFG aje-input__segment placeholder"
+          contenteditable="true"
+          data-placeholder="true"
+          enterkeyhint="next"
+          id="react-aria-:raj:"
+          inputmode="numeric"
+          role="spinbutton"
+          spellcheck="false"
+          style="caret-color: transparent;"
+          tabindex="0"
+        >
+          yyyy
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/index.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/index.tsx
index 27364f6d8..8260d19b7 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/index.tsx
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/index.tsx
@@ -1,2 +1,2 @@
-export { DateInput, DateSegment } from "./DateInput.component";
+export { DateInput } from "./DateInput.component";
 export type { DateInputProps } from "./DateInput.component";
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.component.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.component.tsx
index a6ba7ade4..b8a534dca 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.component.tsx
@@ -6,28 +6,33 @@ import {
 } from "@react-aria/datepicker";
 import { filterDOMProps } from "@react-aria/utils";
 import { useDatePickerState } from "react-stately";
-import { AriaProps, FieldInputProps } from "../../../../types";
-import { DatePickerComboInput, DatePickerWrapper } from "./DatePicker.styles";
-import { DateInput } from "../DateInput";
+import { useRenderProps } from "@hooks";
+import { fieldStatusSelectors } from "@hooks/useRenderProps";
+import { AriaProps, FieldInputProps, Size } from "../../../../types";
 import { IconButton } from "../../../Buttons/IconButton";
 import { Popover } from "../../../Overlays/Popover";
 import { Calendar } from "../Calendar";
-import { ErrorMessage, Label, Message } from "../../../Fields";
+import {
+  DateField,
+  ErrorMessage,
+  Label,
+  Message,
+  ComboInput,
+} from "../../../Fields";
 import { OverlayTriggerStateContext } from "@components/Overlays/OverlayTrigger/context";
-import { useRenderProps } from "@hooks";
 import { Flex } from "@components/Layout/Flex";
-import { fieldStatusSelectors } from "@hooks/useRenderProps";
 
 export interface DatePickerProps<T extends DateValue>
   extends AriaProps<AriaDatePickerProps<T>>,
-    FieldInputProps {}
+    FieldInputProps {
+  calendarSize?: Size;
+}
 
 /** DatePicker is a combination of a `<DateInput/>` component and a dropdown `<Calendar />` component. */
 export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   const state = useDatePickerState(props);
   const ref = useRef(null);
   const {
-    groupProps,
     labelProps,
     fieldProps,
     buttonProps,
@@ -38,15 +43,13 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
 
   const {
     size = "medium",
+    calendarSize = "small",
     error,
-    isRequired,
     isInvalid,
     label,
     message,
   } = props;
 
-  const calendarSize = ["auto", "full"].includes(size) ? "medium" : size;
-
   const renderProps = useRenderProps({
     componentClassName: "aje-date-picker",
     ...props,
@@ -54,26 +57,45 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
   });
 
   return (
-    <DatePickerWrapper {...filterDOMProps(props)} {...renderProps}>
-      {label && <Label {...labelProps}>{label}</Label>}
-      {message && <Message {...descriptionProps}>{message}</Message>}
-
-      <DatePickerComboInput
-        {...groupProps}
-        ref={ref}
-        className="aje-input__date-segments"
-        padding="both"
-      >
-        <DateInput {...fieldProps} size="full" isRequired={isRequired} />
-        <IconButton icon="today" variant="content" {...buttonProps} />
-      </DatePickerComboInput>
-
-      <ErrorMessage {...errorMessageProps} isInvalid={isInvalid}>
-        {error}
-      </ErrorMessage>
-
+    <>
+      <div {...filterDOMProps(props)} {...renderProps}>
+        <DateField
+          {...fieldProps}
+          size={size}
+          style={{
+            // The props of DateInput can affect the width due to number of segments shown
+            // so we allow it grow larger than the default width constraints.
+            width: "unset",
+            minWidth: "var(--size-x)",
+            ...renderProps.style,
+          }}
+        >
+          <Label {...labelProps}>{label}</Label>
+          {message && <Message {...descriptionProps}>{message}</Message>}
+          <ComboInput padding="both">
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+            <IconButton
+              icon="today"
+              variant="content"
+              style={{ marginLeft: "auto" }}
+              ref={ref}
+              {...buttonProps}
+            />
+          </ComboInput>
+          <ErrorMessage {...errorMessageProps} isInvalid={isInvalid}>
+            {error}
+          </ErrorMessage>
+        </DateField>
+      </div>
       <OverlayTriggerStateContext.Provider value={state}>
-        <Popover triggerRef={ref} placement="bottom start" variant="datepicker">
+        <Popover
+          triggerRef={ref}
+          placement="bottom end"
+          variant="datepicker"
+          offset={15}
+        >
           <Calendar {...calendarProps} size={calendarSize}>
             <Flex $justify="space-between" $align="center">
               <IconButton
@@ -94,6 +116,6 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
           </Calendar>
         </Popover>
       </OverlayTriggerStateContext.Provider>
-    </DatePickerWrapper>
+    </>
   );
 }
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx
new file mode 100644
index 000000000..e6a987278
--- /dev/null
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx
@@ -0,0 +1,153 @@
+import { describe, test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { parseDate, now, getLocalTimeZone } from '@internationalized/date';
+import { DatePicker } from '.';
+
+describe('DatePicker', () => {
+  describe('matches snapshots', () => {
+    const shared = {
+      label: 'Date Picker',
+      message: 'Select a date',
+      error: 'Invalid date',
+      onChange: () => {},
+    };
+
+    test('default variant', () => {
+      const result = render(<DatePicker {...shared} />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('with value', () => {
+      const result = render(
+        <DatePicker {...shared} value={parseDate('2023-01-15')} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('with default value', () => {
+      const result = render(
+        <DatePicker {...shared} defaultValue={parseDate('2023-12-25')} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('day granularity', () => {
+      const result = render(<DatePicker {...shared} granularity="day" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('hour granularity', () => {
+      const result = render(<DatePicker {...shared} granularity="hour" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('minute granularity', () => {
+      const result = render(<DatePicker {...shared} granularity="minute" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('second granularity', () => {
+      const result = render(<DatePicker {...shared} granularity="second" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('disabled state', () => {
+      const result = render(<DatePicker {...shared} isDisabled />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('required state', () => {
+      const result = render(<DatePicker {...shared} isRequired />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('readonly state', () => {
+      const result = render(<DatePicker {...shared} isReadOnly />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('invalid state', () => {
+      const result = render(<DatePicker {...shared} isInvalid />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('with leading zeros', () => {
+      const result = render(<DatePicker {...shared} shouldForceLeadingZeros />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('24 hour cycle', () => {
+      const result = render(
+        <DatePicker {...shared} granularity="hour" hourCycle={24} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('small size', () => {
+      const result = render(<DatePicker {...shared} size="small" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('medium size', () => {
+      const result = render(<DatePicker {...shared} size="medium" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('large size', () => {
+      const result = render(<DatePicker {...shared} size="large" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('small calendar size', () => {
+      const result = render(<DatePicker {...shared} calendarSize="small" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('medium calendar size', () => {
+      const result = render(<DatePicker {...shared} calendarSize="medium" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('large calendar size', () => {
+      const result = render(<DatePicker {...shared} calendarSize="large" />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('with min and max values', () => {
+      const today = now(getLocalTimeZone());
+      const minValue = today.subtract({ days: 30 });
+      const maxValue = today.add({ days: 30 });
+
+      const result = render(
+        <DatePicker {...shared} minValue={minValue} maxValue={maxValue} />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('without label', () => {
+      const result = render(
+        <DatePicker message="Select a date" error="Invalid date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('without message', () => {
+      const result = render(
+        <DatePicker label="Date Picker" error="Invalid date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('without error', () => {
+      const result = render(
+        <DatePicker label="Date Picker" message="Select a date" />
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test('minimal props', () => {
+      const result = render(<DatePicker />);
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+  });
+});
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.stories.ts b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.stories.ts
index 655040fd3..aa4ffc12b 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.stories.ts
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.stories.ts
@@ -6,8 +6,17 @@ import { TextInputControls } from "@sb/helpers";
 export default {
   title: "Inputs/Date & Time/DatePicker",
   component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
   argTypes: {
     ...TextInputControls,
+    calendarSize: {
+      control: "select",
+      options: ["small", "medium", "large"],
+      defaultValue: "small",
+      description: "The size of the calendar popup",
+    },
     value: {
       control: false,
       description:
@@ -57,15 +66,106 @@ const date = now(getLocalTimeZone());
 export const Primary: Story = {
   args: {
     defaultValue: date,
-    label: "Date Picker",
+    label: "Date picker",
     size: "medium",
     hideTimeZone: true,
+    shouldForceLeadingZeros: false,
+    isInvalid: false,
   },
 };
 
 export const DayGranularity: Story = {
   args: {
     ...Primary.args,
+    label: "Birth Date",
     granularity: "day",
+    message: "Select your date of birth",
+  },
+};
+
+export const HourGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Meeting Date & Time",
+    granularity: "hour",
+    hideTimeZone: false,
+    message: "Choose a date and hour",
+  },
+};
+
+export const MinuteGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Appointment Time",
+    granularity: "minute",
+    hideTimeZone: false,
+    message: "Select date and time to the minute",
+  },
+};
+
+export const SecondGranularity: Story = {
+  args: {
+    ...Primary.args,
+    label: "Exact Timestamp",
+    granularity: "second",
+    hideTimeZone: false,
+    message: "Precise time with seconds",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...Primary.args,
+    label: "Event Date",
+    isInvalid: true,
+    error: "Please enter a valid date",
+    message: "Choose when your event will happen",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    label: "System Date",
+    isDisabled: true,
+    message: "This date cannot be changed",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Primary.args,
+    label: "Due Date",
+    isRequired: true,
+    message: "This field is required",
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Primary.args,
+    label: "Created Date",
+    isReadOnly: true,
+    message: "This date is read-only",
+  },
+};
+
+export const WithLeadingZeros: Story = {
+  args: {
+    ...Primary.args,
+    label: "Formatted Date",
+    shouldForceLeadingZeros: true,
+    message: "Date with leading zeros (01/05/2024)",
+  },
+};
+
+export const HourCycle24: Story = {
+  args: {
+    ...Primary.args,
+    label: "24-Hour Format",
+    granularity: "minute",
+    hourCycle: 24,
+    hideTimeZone: false,
+    message: "Time in 24-hour format",
   },
 };
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.styles.ts b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.styles.ts
deleted file mode 100644
index fb782821b..000000000
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import styled from "styled-components";
-import mixins from "../../../../styles/mixins";
-import { ComboInput } from "../../../Fields";
-import { StyledComboInput } from "../../../Fields/ComboInput";
-
-export const DatePickerWrapper = styled.div`
-  ${mixins.FieldStatus}
-  ${mixins.SizingX}
-
-  --size-sm-x: 265px;
-  --size-md-x: 265px;
-  --size-lg-x: 400px;
-`;
-
-export const DatePickerComboInput = styled(ComboInput)`
-  ${StyledComboInput} {
-    border: none;
-    padding: 0px;
-
-    &:focus-within {
-      outline: none;
-    }
-  }
-`;
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap
new file mode 100644
index 000000000..f9e9a43c4
--- /dev/null
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap
@@ -0,0 +1,3507 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:ra6:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:ra8:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:raa:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:ra6:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:raa: react-aria-:raa:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rah: react-aria-:ra8:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rah:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:ral: react-aria-:ra8:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:ral:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rap: react-aria-:ra8:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rap:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            , 
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁦
+          </div>
+          <div
+            aria-label="hour, "
+            aria-labelledby="react-aria-:rav: react-aria-:ra8:"
+            aria-valuemax="23"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rav:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁩
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:raa:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:ra4: react-aria-:ra8:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:ra4:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > day granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r27:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r29:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r2b:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r27:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r2b: react-aria-:r2b:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r2i: react-aria-:r29:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r2i:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r2m: react-aria-:r29:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r2m:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r2q: react-aria-:r29:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r2q:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r2b:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r25: react-aria-:r29:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r25:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > default variant 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r2:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r4:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r6:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r2:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r6: react-aria-:r6:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rd: react-aria-:r4:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rd:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rh: react-aria-:r4:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rh:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rl: react-aria-:r4:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rl:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r6:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r0: react-aria-:r4:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r0:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > disabled state 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+    data-disabled="true"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      data-disabled="true"
+      id="react-aria-:r6j:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r6l:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r6n:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r6j:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r6n: react-aria-:r6n:"
+            aria-disabled="true"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r6u: react-aria-:r6l:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r6u:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-disabled="true"
+            aria-label="day, "
+            aria-labelledby="react-aria-:r72: react-aria-:r6l:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r72:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-disabled="true"
+            aria-label="year, "
+            aria-labelledby="react-aria-:r76: react-aria-:r6l:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r76:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r6n:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r6h: react-aria-:r6l:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          disabled=""
+          id="react-aria-:r6h:"
+          style="margin-left: auto;"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > hour granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r2u:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r30:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r32:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r2u:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r32: react-aria-:r32:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r39: react-aria-:r30:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r39:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r3d: react-aria-:r30:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r3d:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r3h: react-aria-:r30:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r3h:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            , 
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁦
+          </div>
+          <div
+            aria-label="hour, "
+            aria-labelledby="react-aria-:r3n: react-aria-:r30:"
+            aria-valuemax="11"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r3n:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁩
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+             
+          </div>
+          <div
+            aria-label="AM/PM, "
+            aria-labelledby="react-aria-:r3t: react-aria-:r30:"
+            aria-valuemax="12"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r3t:"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            AM
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r32:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r2s: react-aria-:r30:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r2s:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > invalid state 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+    data-invalid="true"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      data-invalid="true"
+      id="react-aria-:r8o:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r8q:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r8s:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r8o:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r8s: react-aria-:r8t: react-aria-:r8s: react-aria-:r8t:"
+            aria-invalid="true"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r93: react-aria-:r8q:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r93:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-describedby="react-aria-:r8s: react-aria-:r8t: react-aria-:r8s: react-aria-:r8t:"
+            aria-invalid="true"
+            aria-label="day, "
+            aria-labelledby="react-aria-:r97: react-aria-:r8q:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r97:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-describedby="react-aria-:r8s: react-aria-:r8t: react-aria-:r8s: react-aria-:r8t:"
+            aria-invalid="true"
+            aria-label="year, "
+            aria-labelledby="react-aria-:r9b: react-aria-:r8q:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r9b:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r8s: react-aria-:r8t:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r8m: react-aria-:r8q:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r8m:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+      <p
+        class="sc-jHswkR fYceRy is-medium"
+        id="react-aria-:r8t:"
+      >
+        Invalid date
+      </p>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > large calendar size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:reo:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:req:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:res:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:reo:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:res: react-aria-:res:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rf3: react-aria-:req:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rf3:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rf7: react-aria-:req:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rf7:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rfb: react-aria-:req:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rfb:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:res:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rem: react-aria-:req:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rem:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > large size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker is-large"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-large"
+      id="react-aria-:rcj:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rcl:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rcn:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rcj:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rcn: react-aria-:rcn:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rcu: react-aria-:rcl:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rcu:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rd2: react-aria-:rcl:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rd2:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rd6: react-aria-:rcl:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rd6:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rcn:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rch: react-aria-:rcl:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rch:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:re1:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:re3:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:re5:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:re1:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:re5: react-aria-:re5:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rec: react-aria-:re3:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rec:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:reg: react-aria-:re3:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:reg:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rek: react-aria-:re3:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rek:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:re5:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rdv: react-aria-:re3:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rdv:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > medium size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker is-medium"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rbs:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rbu:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rc0:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rbs:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rc0: react-aria-:rc0:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rc7: react-aria-:rbu:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rc7:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rcb: react-aria-:rbu:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rcb:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rcf: react-aria-:rbu:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rcf:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rc0:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rbq: react-aria-:rbu:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rbq:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > minimal props 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rib:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rii:"
+      />
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rib:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-label="month, "
+            aria-labelledby="react-aria-:rim: react-aria-:rii:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rim:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:riq: react-aria-:rii:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:riq:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:riu: react-aria-:rii:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:riu:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:ri9: react-aria-:ric:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:ri9:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > minute granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r41:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r43:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r45:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r41:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r45: react-aria-:r45:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r4c: react-aria-:r43:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r4c:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r4g: react-aria-:r43:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r4g:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r4k: react-aria-:r43:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r4k:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            , 
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁦
+          </div>
+          <div
+            aria-label="hour, "
+            aria-labelledby="react-aria-:r4q: react-aria-:r43:"
+            aria-valuemax="11"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r4q:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            :
+          </div>
+          <div
+            aria-label="minute, "
+            aria-labelledby="react-aria-:r4u: react-aria-:r43:"
+            aria-valuemax="59"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r4u:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁩
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+             
+          </div>
+          <div
+            aria-label="AM/PM, "
+            aria-labelledby="react-aria-:r54: react-aria-:r43:"
+            aria-valuemax="12"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r54:"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            AM
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r45:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r3v: react-aria-:r43:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r3v:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > readonly state 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+    data-readonly="true"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      data-readonly="true"
+      id="react-aria-:r81:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r83:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r85:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r81:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r85: react-aria-:r85:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r8c: react-aria-:r83:"
+            aria-readonly="true"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r8c:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r8g: react-aria-:r83:"
+            aria-readonly="true"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r8g:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r8k: react-aria-:r83:"
+            aria-readonly="true"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="false"
+            data-placeholder="true"
+            id="react-aria-:r8k:"
+            role="spinbutton"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r85:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r7v: react-aria-:r83:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          disabled=""
+          id="react-aria-:r7v:"
+          style="margin-left: auto;"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > required state 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+    data-required="true"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      data-required="true"
+      id="react-aria-:r7a:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r7c:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r7e:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r7a:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r7e: react-aria-:r7e:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r7l: react-aria-:r7c:"
+            aria-required="true"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r7l:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r7p: react-aria-:r7c:"
+            aria-required="true"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r7p:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r7t: react-aria-:r7c:"
+            aria-required="true"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r7t:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r7e:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r78: react-aria-:r7c:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r78:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > second granularity 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r58:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r5a:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r5c:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r58:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r5c: react-aria-:r5c:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r5j: react-aria-:r5a:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r5j:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r5n: react-aria-:r5a:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r5n:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r5r: react-aria-:r5a:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r5r:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            , 
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁦
+          </div>
+          <div
+            aria-label="hour, "
+            aria-labelledby="react-aria-:r61: react-aria-:r5a:"
+            aria-valuemax="11"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r61:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            :
+          </div>
+          <div
+            aria-label="minute, "
+            aria-labelledby="react-aria-:r65: react-aria-:r5a:"
+            aria-valuemax="59"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r65:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            :
+          </div>
+          <div
+            aria-label="second, "
+            aria-labelledby="react-aria-:r69: react-aria-:r5a:"
+            aria-valuemax="59"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r69:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            ––
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            ⁩
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+             
+          </div>
+          <div
+            aria-label="AM/PM, "
+            aria-labelledby="react-aria-:r6f: react-aria-:r5a:"
+            aria-valuemax="12"
+            aria-valuemin="0"
+            aria-valuenow="0"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r6f:"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            AM
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r5c:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r56: react-aria-:r5a:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r56:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > small calendar size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rda:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rdc:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rde:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rda:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rde: react-aria-:rde:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rdl: react-aria-:rdc:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rdl:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rdp: react-aria-:rdc:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rdp:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rdt: react-aria-:rdc:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rdt:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rde:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rd8: react-aria-:rdc:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rd8:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > small size 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker is-small"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-small"
+      id="react-aria-:rb5:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rb7:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rb9:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rb5:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rb9: react-aria-:rb9:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rbg: react-aria-:rb7:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rbg:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rbk: react-aria-:rb7:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rbk:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rbo: react-aria-:rb7:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rbo:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rb9:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rb3: react-aria-:rb7:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rb3:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > with default value 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r1g:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r1i:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r1k:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r1g:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r1k: react-aria-description-1 react-aria-:r1k:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r1r: react-aria-:r1i:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="12"
+            aria-valuetext="12 – December"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r1r:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            12
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r1v: react-aria-:r1i:"
+            aria-valuemax="31"
+            aria-valuemin="1"
+            aria-valuenow="25"
+            aria-valuetext="25"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r1v:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            25
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r23: react-aria-:r1i:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2023"
+            aria-valuetext="2023"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r23:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            2023
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-description-1 react-aria-:r1k:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r1e: react-aria-:r1i:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r1e:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:r9f:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:r9h:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:r9j:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:r9f:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:r9j: react-aria-:r9j:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r9q: react-aria-:r9h:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r9q:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r9u: react-aria-:r9h:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:r9u:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:ra2: react-aria-:r9h:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:ra2:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:r9j:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:r9d: react-aria-:r9h:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:r9d:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > with min and max values 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rff:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rfh:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rfj:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rff:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rfj: react-aria-:rfj:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rfq: react-aria-:rfh:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rfq:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rfu: react-aria-:rfh:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rfu:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rg2: react-aria-:rfh:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rg2:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rfj:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rfd: react-aria-:rfh:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rfd:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > with value 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rp:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rr:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rt:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rp:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rt: react-aria-description-0 react-aria-:rt:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:r14: react-aria-:rr:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="1"
+            aria-valuetext="1 – January"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r14:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            1
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:r18: react-aria-:rr:"
+            aria-valuemax="31"
+            aria-valuemin="1"
+            aria-valuenow="15"
+            aria-valuetext="15"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r18:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            15
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:r1c: react-aria-:rr:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2023"
+            aria-valuetext="2023"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment"
+            contenteditable="true"
+            enterkeyhint="next"
+            id="react-aria-:r1c:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            2023
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-description-0 react-aria-:rt:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rn: react-aria-:rr:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rn:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > without error 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rhk:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rhm:"
+      >
+        Date Picker
+      </label>
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rho:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rhk:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rho: react-aria-:rho:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rhv: react-aria-:rhm:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rhv:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:ri3: react-aria-:rhm:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:ri3:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:ri7: react-aria-:rhm:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:ri7:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rho:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rhi: react-aria-:rhm:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rhi:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > without label 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rg6:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rgd:"
+      />
+      <p
+        class="sc-gjXmFk doacEC is-auto"
+        id="react-aria-:rga:"
+      >
+        Select a date
+      </p>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rg6:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-describedby="react-aria-:rga: react-aria-:rga:"
+            aria-label="month, "
+            aria-labelledby="react-aria-:rgh: react-aria-:rgd:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rgh:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rgl: react-aria-:rgd:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rgl:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rgp: react-aria-:rgd:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rgp:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-describedby="react-aria-:rga:"
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rg4: react-aria-:rg7:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rg4:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`DatePicker > matches snapshots > without message 1`] = `
+<DocumentFragment>
+  <div
+    class="aje-date-picker"
+  >
+    <div
+      class="sc-gpHbIA krEiXp aje-datefield is-medium"
+      id="react-aria-:rgt:"
+      style="min-width: var(--size-x);"
+    >
+      <label
+        class="sc-fuExOL eaPa-Dm"
+        id="react-aria-:rgv:"
+      >
+        Date Picker
+      </label>
+      <div
+        class="sc-dVupuq fSYjxQ aje-combo-input"
+      >
+        <div
+          class="sc-hUAZgl hKJzsE aje-input__date-segments"
+          id="react-aria-:rgt:"
+          role="presentation"
+          style="unicode-bidi: isolate;"
+        >
+          <div
+            aria-label="month, "
+            aria-labelledby="react-aria-:rh8: react-aria-:rgv:"
+            aria-valuemax="12"
+            aria-valuemin="1"
+            aria-valuenow="2"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rh8:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            mm
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="day, "
+            aria-labelledby="react-aria-:rhc: react-aria-:rgv:"
+            aria-valuemax="28"
+            aria-valuemin="1"
+            aria-valuenow="26"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rhc:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            dd
+          </div>
+          <div
+            aria-hidden="true"
+            class="sc-flQbIK tWhTg aje-input__segment"
+          >
+            /
+          </div>
+          <div
+            aria-label="year, "
+            aria-labelledby="react-aria-:rhg: react-aria-:rgv:"
+            aria-valuemax="9999"
+            aria-valuemin="1"
+            aria-valuenow="2026"
+            aria-valuetext="Empty"
+            autocorrect="off"
+            class="sc-flQbIK tWhTg aje-input__segment placeholder"
+            contenteditable="true"
+            data-placeholder="true"
+            enterkeyhint="next"
+            id="react-aria-:rhg:"
+            inputmode="numeric"
+            role="spinbutton"
+            spellcheck="false"
+            style="caret-color: transparent;"
+            tabindex="0"
+          >
+            yyyy
+          </div>
+        </div>
+        <button
+          aria-expanded="false"
+          aria-haspopup="dialog"
+          aria-label="Calendar"
+          aria-labelledby="react-aria-:rgr: react-aria-:rgv:"
+          class="sc-gjcoXW sc-dVBluf fWtrmi dWLcGs aje-btn aje-icon-btn aje-btn--content is-medium"
+          data-icon-button="true"
+          id="react-aria-:rgr:"
+          style="margin-left: auto;"
+          tabindex="0"
+          type="button"
+        >
+          <i
+            aria-hidden="true"
+            class="sc-FEMpB jyuubH aje-icon material-icons is-medium"
+          >
+            today
+          </i>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.component.tsx b/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.component.tsx
index 9b3f6b3a7..b1be2bb78 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.component.tsx
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.component.tsx
@@ -2,16 +2,17 @@ import { useRef } from "react";
 import {
   AriaTimeFieldProps,
   TimeValue,
+  useDateSegment,
   useTimeField,
 } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
-import { useTimeFieldState } from "react-stately";
+import { DateFieldState, DateSegment, useTimeFieldState } from "react-stately";
 
-import { DateSegment } from "../DateInput";
-import { TimeInputWrapper } from "./TimeInput.styles";
+import { StyledTimeSegment, TimeInputWrapper } from "./TimeInput.styles";
 import { AriaProps, FieldInputProps } from "../../../../types";
 import { ErrorMessage, Label, Message, ComboInput } from "../../../Fields";
 import { useRenderProps, fieldStatusSelectors } from "@hooks/useRenderProps";
+import classNames from "classnames";
 
 export interface TimeInputProps<T extends TimeValue>
   extends AriaProps<AriaTimeFieldProps<T>>,
@@ -49,7 +50,7 @@ export function TimeInput<T extends TimeValue>(props: TimeInputProps<T>) {
         padding="both"
       >
         {state.segments.map((segment, i) => (
-          <DateSegment key={i} segment={segment} state={state} />
+          <TimeSegment key={i} segment={segment} state={state} />
         ))}
       </ComboInput>
 
@@ -59,3 +60,24 @@ export function TimeInput<T extends TimeValue>(props: TimeInputProps<T>) {
     </TimeInputWrapper>
   );
 }
+
+interface TimeSegmentProps {
+  readonly segment: DateSegment;
+  readonly state: DateFieldState;
+}
+
+export function TimeSegment(props: TimeSegmentProps) {
+  const { segment, state } = props;
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+
+  const className = classNames("aje-input__segment", {
+    placeholder: segment.isPlaceholder,
+  });
+
+  return (
+    <StyledTimeSegment {...segmentProps} ref={ref} className={className}>
+      {segment.text}
+    </StyledTimeSegment>
+  );
+}
diff --git a/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.styles.ts b/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.styles.ts
index f37a89cd9..0f041a293 100644
--- a/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.styles.ts
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/TimeInput/TimeInput.styles.ts
@@ -10,3 +10,7 @@ export const TimeInputWrapper = styled.div`
   --size-lg-x: 400px;
   --input-gap: 0px;
 `;
+
+export const StyledTimeSegment = styled.div`
+  margin: 0 0.1rem;
+`;
diff --git a/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
index d1cd2ee8e..8894c9982 100644
--- a/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/RadioGroup/__snapshots__/RadioGroup.spec.tsx.snap
@@ -22,7 +22,7 @@ exports[`matches snapshot 1`] = `
     >
       <input
         checked=""
-        class="sc-dVupuq hSgGsX"
+        class="sc-gpHbIA cKXLWp"
         name="radiogroup"
         tabindex="0"
         type="radio"
@@ -38,7 +38,7 @@ exports[`matches snapshot 1`] = `
       class="sc-gjcoXW iNRxbX aje-radio"
     >
       <input
-        class="sc-dVupuq hSgGsX"
+        class="sc-gpHbIA cKXLWp"
         name="radiogroup"
         tabindex="-1"
         type="radio"
@@ -54,7 +54,7 @@ exports[`matches snapshot 1`] = `
       class="sc-gjcoXW iNRxbX aje-radio"
     >
       <input
-        class="sc-dVupuq hSgGsX"
+        class="sc-gpHbIA cKXLWp"
         name="radiogroup"
         tabindex="-1"
         type="radio"
diff --git a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
index 900ce44f1..63b6c4f77 100644
--- a/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextAreaInput/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`TextAreaInput > matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gNZgCX bAVTuz aje-input__text sc-eiwqOE buTlLi aje-input__textarea is-medium"
+    class="sc-gNZgCX bAVTuz aje-input__text sc-fuExOL ePgQJv aje-input__textarea is-medium"
     data-resize="both"
   >
     <label
diff --git a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
index e1f348efb..2b8d50f7e 100644
--- a/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
+++ b/packages/atomic-elements/src/components/Inputs/TextInput/__snapshots__/TextInput.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`matches snapshot > default variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gNZgCX bAVTuz aje-input__text sc-eiwqOE jsjjJD aje-input--default is-medium"
+    class="sc-gNZgCX bAVTuz aje-input__text sc-fuExOL cdPhfq aje-input--default is-medium"
   >
     <label
       class="sc-FEMpB encIGH"
@@ -35,11 +35,11 @@ exports[`matches snapshot > default variant 1`] = `
 exports[`matches snapshot > floating variant 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gNZgCX bAVTuz aje-input__text sc-eiwqOE jsjjJD aje-input--floating is-medium"
+    class="sc-gNZgCX bAVTuz aje-input__text sc-fuExOL cdPhfq aje-input--floating is-medium"
     data-float="true"
   >
     <div
-      class="sc-gjXmFk eNqHck"
+      class="sc-dVupuq hznsUm"
     >
       <input
         aria-describedby="react-aria-:r8:"
diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
index 40799571f..11dfa280a 100644
--- a/playground/src/Playground.tsx
+++ b/playground/src/Playground.tsx
@@ -11,6 +11,7 @@ import Overlays from "./tabs/Overlays";
 import Fields from "./tabs/Fields";
 import Loading from "./tabs/Loading";
 import Links from "./tabs/Links";
+import { DateAndTime } from "./tabs/DateAndTime";
 import { Home } from "./tabs/Home";
 
 function Playground() {
@@ -27,6 +28,7 @@ function Playground() {
           <Tabs.Tab id="localization">Localization</Tabs.Tab>
           <Tabs.Tab id="overlays">Overlays</Tabs.Tab>
           <Tabs.Tab id="fields">Fields</Tabs.Tab>
+          <Tabs.Tab id="dateandtime">Date and Time</Tabs.Tab>
           <Tabs.Tab id="loading">Loading</Tabs.Tab>
           <Tabs.Tab id="links">Links</Tabs.Tab>
           <Tabs.Tab id="aria">Aria</Tabs.Tab>
@@ -60,6 +62,10 @@ function Playground() {
           <Fields />
         </Tabs.Panel>
 
+        <Tabs.Panel id="dateandtime">
+          <DateAndTime />
+        </Tabs.Panel>
+
         <Tabs.Panel id="loading">
           <Loading />
         </Tabs.Panel>
diff --git a/playground/src/tabs/DateAndTime.tsx b/playground/src/tabs/DateAndTime.tsx
new file mode 100644
index 000000000..890914833
--- /dev/null
+++ b/playground/src/tabs/DateAndTime.tsx
@@ -0,0 +1,92 @@
+import { useState } from "react";
+import {
+  Calendar,
+  CustomSelect,
+  DateInput,
+  DatePicker,
+  Flex,
+  IconButton,
+  Item,
+  TextInput,
+} from "@atomicjolt/atomic-elements";
+import { DateValue, getLocalTimeZone, now } from "@internationalized/date";
+
+interface DateAndTimeProps {}
+
+export function DateAndTime(props: DateAndTimeProps) {
+  const [selectedDate, setSelectedDate] = useState<DateValue | null>(() =>
+    now(getLocalTimeZone())
+  );
+  const [size, setSize] = useState<"small" | "medium" | "large">("medium");
+  const [granularity, setGranularity] = useState<
+    "day" | "hour" | "minute" | "second"
+  >("day");
+
+  return (
+    <Flex $gap="4" $direction="column">
+      <CustomSelect
+        label="Size"
+        selectedKey={size}
+        onSelectionChange={(key) =>
+          setSize(key as "small" | "medium" | "large")
+        }
+      >
+        <Item id="small">Small</Item>
+        <Item id="medium">Medium</Item>
+        <Item id="large">Large</Item>
+      </CustomSelect>
+      <CustomSelect
+        label="Granularity"
+        selectedKey={granularity}
+        onSelectionChange={(key) =>
+          setGranularity(key as "day" | "hour" | "minute" | "second")
+        }
+      >
+        <Item id="day">Day</Item>
+        <Item id="hour">Hour</Item>
+        <Item id="minute">Minute</Item>
+        <Item id="second">Second</Item>
+      </CustomSelect>
+      <Flex $gap="4" $align="start">
+        <Calendar value={selectedDate} onChange={setSelectedDate} size={size}>
+          <Flex $gap="20px" $align="center" $justify="space-between">
+            <IconButton
+              slot="previous-month"
+              icon="chevron_left"
+              variant="ghost"
+            />
+            <Calendar.Title />
+            <IconButton
+              slot="next-month"
+              icon="chevron_right"
+              variant="ghost"
+            />
+          </Flex>
+
+          <Calendar.Grid>
+            {(date) => <Calendar.Cell date={date} />}
+          </Calendar.Grid>
+        </Calendar>
+
+        <Flex $direction="column" $gap="1" $align="start">
+          <DateInput
+            value={selectedDate}
+            onChange={setSelectedDate}
+            label="Date Input"
+            size={size}
+            granularity={granularity}
+          />
+          <DatePicker
+            value={selectedDate}
+            onChange={setSelectedDate}
+            label="Date Picker"
+            size={size}
+            calendarSize="small"
+            granularity={granularity}
+          />
+          <TextInput label="Text Input" size={size} />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}