From 34da29e41e36cada957d6bf47b4935fa0887c20c Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 15:42:44 -0700
Subject: [PATCH 1/8] feat: add DateField component and integrate into
 DateInput

---
 .../__snapshots__/ChipGroup.spec.tsx.snap     |   8 +-
 .../Table/__snapshots__/Table.spec.tsx.snap   | 584 +++++++--------
 .../__snapshots__/Combobox.spec.tsx.snap      |   6 +-
 .../__snapshots__/CustomSelect.spec.tsx.snap  |  10 +-
 .../__snapshots__/ListBox.spec.tsx.snap       |   8 +-
 .../__snapshots__/MultiSelect.spec.tsx.snap   |   6 +-
 .../ChipGroupField.spec.tsx.snap              |  16 +-
 .../Fields/DateField/DateField.component.tsx  | 117 +++
 .../Fields/DateField/DateField.spec.tsx       |  84 +++
 .../Fields/DateField/DateField.stories.tsx    | 177 +++++
 .../Fields/DateField/DateField.styles.ts      |  11 +
 .../Fields/DateField/DateFieldSegment.tsx     |  39 +
 .../Fields/DateField/DateFieldSegments.tsx    |  37 +
 .../__snapshots__/DateField.spec.tsx.snap     | 667 ++++++++++++++++++
 .../src/components/Fields/DateField/index.tsx |  13 +
 .../MultiSelectField.spec.tsx.snap            |   4 +-
 .../__snapshots__/SelectField.spec.tsx.snap   |   8 +-
 .../src/components/Fields/index.ts            |   2 +
 .../__snapshots__/CheckBox.spec.tsx.snap      |   6 +-
 .../DateInput/DateInput.component.tsx         | 108 ++-
 .../DateInput/DateInput.styles.ts             |  16 -
 .../Inputs/DateAndTimes/DateInput/index.tsx   |   2 +-
 .../DatePicker/DatePicker.component.tsx       |   7 +-
 .../TimeInput/TimeInput.component.tsx         |  30 +-
 .../TimeInput/TimeInput.styles.ts             |   4 +
 .../__snapshots__/RadioGroup.spec.tsx.snap    |   6 +-
 .../__snapshots__/TextAreaInput.spec.tsx.snap |   2 +-
 .../__snapshots__/TextInput.spec.tsx.snap     |   6 +-
 playground/src/Playground.tsx                 |   6 +
 playground/src/tabs/DateAndTime.tsx           |  75 ++
 30 files changed, 1640 insertions(+), 425 deletions(-)
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateField.component.tsx
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateField.styles.ts
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateFieldSegment.tsx
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
 create mode 100644 packages/atomic-elements/src/components/Fields/DateField/index.tsx
 delete mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.styles.ts
 create mode 100644 playground/src/tabs/DateAndTime.tsx

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..470d6877d
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import { describe, test, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { parseDate } from "@internationalized/date";
+import { DateField } from ".";
+import { Label, Message, ErrorMessage } from "../";
+
+describe("DateField", () => {
+  describe("matches snapshots", () => {
+    test("basic composition", () => {
+      const result = render(
+        <DateField>
+          <Label>Date</Label>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with value", () => {
+      const result = render(
+        <DateField value={parseDate("2023-01-15")}>
+          <Label>Date</Label>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with message and error", () => {
+      const result = render(
+        <DateField isInvalid>
+          <Label>Date</Label>
+          <Message>Enter your birth date</Message>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+          <ErrorMessage>Please enter a valid date</ErrorMessage>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("disabled state", () => {
+      const result = render(
+        <DateField isDisabled>
+          <Label>Date</Label>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("required state", () => {
+      const result = render(
+        <DateField isRequired>
+          <Label>Date</Label>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+        </DateField>
+      );
+      expect(result.asFragment()).toMatchSnapshot();
+    });
+
+    test("with granularity hour", () => {
+      const result = render(
+        <DateField granularity="hour">
+          <Label>Date and Time</Label>
+          <DateField.Segments>
+            {(_, index) => <DateField.Segment key={index} index={index} />}
+          </DateField.Segments>
+        </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..ac8ce9e4b
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
@@ -0,0 +1,177 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { now, getLocalTimeZone } from "@internationalized/date";
+import { DateField } from ".";
+import { FieldLabel } from "../Field/FieldLabel";
+import { FieldMessage } from "../Field/FieldMessage";
+import { FieldErrorMessage } from "../Field/FieldError";
+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: [
+      <FieldLabel key="label">Date</FieldLabel>,
+      <FieldMessage key="message">Select a date</FieldMessage>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+      <FieldErrorMessage key="error">
+        Please enter a valid date
+      </FieldErrorMessage>,
+    ],
+  },
+};
+
+export const DayGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "day",
+    children: [
+      <FieldLabel key="label">Birth Date</FieldLabel>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+    ],
+  },
+};
+
+export const HourGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "hour",
+    children: [
+      <FieldLabel key="label">Meeting Date & Time</FieldLabel>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+    ],
+  },
+};
+
+export const MinuteGranularity: Story = {
+  args: {
+    ...Primary.args,
+    granularity: "minute",
+    children: [
+      <FieldLabel key="label">Appointment Time</FieldLabel>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+    ],
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...Primary.args,
+    isInvalid: true,
+    children: [
+      <FieldLabel key="label">Event Date</FieldLabel>,
+      <FieldMessage key="message">
+        Choose when your event will happen
+      </FieldMessage>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+      <FieldErrorMessage key="error">
+        Please select a future date
+      </FieldErrorMessage>,
+    ],
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Primary.args,
+    isDisabled: true,
+    children: [
+      <FieldLabel key="label">System Date</FieldLabel>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+    ],
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Primary.args,
+    isRequired: true,
+    children: [
+      <FieldLabel key="label">Due Date</FieldLabel>,
+      <FieldMessage key="message">This field is required</FieldMessage>,
+      <DateField.Segments key="segments">
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>,
+    ],
+  },
+};
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..af9d350b6
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { DateSegment as ReactStatelyDateSegment } from "react-stately";
+import { DateFieldContext } from "./DateField.component";
+import { ComboInput } from "../ComboInput";
+
+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 (
+    <ComboInput
+      className="aje-input__date-segments"
+      padding="both"
+      {...fieldProps}
+      style={{
+        // @ts-expect-error CSS variable
+        "--input-gap": "0px",
+        ...fieldProps.style,
+      }}
+    >
+      {segments.map((segment, index) => children(segment, index))}
+    </ComboInput>
+  );
+}
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..3fed202f9
--- /dev/null
+++ b/packages/atomic-elements/src/components/Fields/DateField/__snapshots__/DateField.spec.tsx.snap
@@ -0,0 +1,667 @@
+// 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
+      aria-labelledby="react-aria-:r1:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:r0:"
+      role="group"
+      style="--input-gap: 0px; unicode-bidi: isolate;"
+    >
+      <div
+        aria-label="month, "
+        aria-labelledby="react-aria-:r5: react-aria-:r1:"
+        aria-valuemax="12"
+        aria-valuemin="1"
+        aria-valuenow="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-disabled="true"
+      aria-labelledby="react-aria-:r1e:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:r1d:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-labelledby="react-aria-:r1t:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:r1s:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-labelledby="react-aria-:r2c:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:r2b:"
+      role="group"
+      style="--input-gap: 0px; unicode-bidi: isolate;"
+    >
+      <div
+        aria-label="month, "
+        aria-labelledby="react-aria-:r2g: react-aria-:r2c:"
+        aria-valuemax="12"
+        aria-valuemin="1"
+        aria-valuenow="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r11: react-aria-:r12:"
+      aria-labelledby="react-aria-:rv:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:ru:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+    <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
+      aria-describedby="react-aria-description-0"
+      aria-labelledby="react-aria-:rg:"
+      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
+      id="react-aria-:rf:"
+      role="group"
+      style="--input-gap: 0px; 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>
+</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..cf3f8f340 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,9 @@
-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 { Granularity } from "@react-types/datepicker";
 
 import { AriaProps, FieldInputProps } from "../../../../types";
-import { DateInputWrapper, StyledDateSegment } from "./DateInput.styles";
-import { Label, Message, ComboInput, ErrorMessage } from "../../../Fields";
+import { DateField } from "../../../Fields/DateField";
+import { Label, Message, ErrorMessage } from "../../../Fields";
 import { useRenderProps, fieldStatusSelectors } from "@hooks/useRenderProps";
 
 export interface DateInputProps<T extends DateValue>
@@ -25,18 +12,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 +22,43 @@ 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} />
-        ))}
-      </ComboInput>
-      <ErrorMessage {...errorMessageProps} isInvalid={isInvalid}>
-        {error}
-      </ErrorMessage>
-    </DateInputWrapper>
+    <DateField
+      {...renderProps}
+      {...dateFieldProps}
+      style={{
+        ...sizes[dateFieldProps.granularity || "day"],
+        ...renderProps.style,
+      }}
+    >
+      {label && <Label>{label}</Label>}
+      {message && <Message>{message}</Message>}
+      <DateField.Segments>
+        {(_, index) => <DateField.Segment key={index} index={index} />}
+      </DateField.Segments>
+      <ErrorMessage>{error}</ErrorMessage>
+    </DateField>
   );
 }
 
-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>
-  );
-}
+const sizes: Record<Granularity, Record<string, string>> = {
+  day: {
+    "--size-sm-x": "125px",
+    "--size-md-x": "200px",
+    "--size-lg-x": "300px",
+  },
+  hour: {
+    "--size-sm-x": "185px",
+    "--size-md-x": "200px",
+    "--size-lg-x": "300px",
+  },
+  minute: {
+    "--size-sm-x": "215px",
+    "--size-md-x": "230px",
+    "--size-lg-x": "300px",
+  },
+  second: {
+    "--size-sm-x": "240px",
+    "--size-md-x": "240px",
+    "--size-lg-x": "300px",
+  },
+};
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/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..6debd12fb 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
@@ -58,19 +58,20 @@ export function DatePicker<T extends DateValue>(props: DatePickerProps<T>) {
       {label && <Label {...labelProps}>{label}</Label>}
       {message && <Message {...descriptionProps}>{message}</Message>}
 
-      <DatePickerComboInput
+      <DateInput {...fieldProps} size="full" isRequired={isRequired} />
+
+      {/* <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>
+      </ErrorMessage> */}
 
       <OverlayTriggerStateContext.Provider value={state}>
         <Popover triggerRef={ref} placement="bottom start" variant="datepicker">
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..63ed641fe
--- /dev/null
+++ b/playground/src/tabs/DateAndTime.tsx
@@ -0,0 +1,75 @@
+import { useState } from "react";
+import {
+  Calendar,
+  CustomSelect,
+  DateInput,
+  DatePicker,
+  Flex,
+  IconButton,
+  Item,
+  TextInput,
+} from "../elements";
+import { DateValue } from "@internationalized/date";
+
+interface DateAndTimeProps {}
+
+export function DateAndTime(props: DateAndTimeProps) {
+  const [selectedDate, setSelectedDate] = useState<DateValue | null>(null);
+  const [size, setSize] = useState<"small" | "medium" | "large">("medium");
+  const [granularity, setGranularity] = useState<
+    "day" | "hour" | "minute" | "second"
+  >("day");
+
+  console.log("Selected date:", selectedDate);
+
+  return (
+    <Flex $gap="4">
+      <CustomSelect label="Size" selectedKey={size} onSelectionChange={setSize}>
+        <Item id="small">Small</Item>
+        <Item id="medium">Medium</Item>
+        <Item id="large">Large</Item>
+      </CustomSelect>
+      <CustomSelect
+        label="Granularity"
+        selectedKey={granularity}
+        onSelectionChange={setGranularity}
+      >
+        <Item id="day">Day</Item>
+        <Item id="hour">Hour</Item>
+        <Item id="minute">Minute</Item>
+        <Item id="second">Second</Item>
+      </CustomSelect>
+      {/* <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">
+        <DateInput
+          value={selectedDate}
+          onChange={setSelectedDate}
+          label="Date Input"
+          size={size}
+          granularity={granularity}
+        />
+        <TextInput label="Text Input" size={size} />
+        <DatePicker
+          value={selectedDate}
+          onChange={setSelectedDate}
+          label="Date Picker"
+          size={size}
+          granularity={granularity}
+        />
+      </Flex>
+    </Flex>
+  );
+}

From afc1efe6a70e6d1648bfa2ce4b4f1814bd818dab Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 15:54:10 -0700
Subject: [PATCH 2/8] feat: enhance DateInput styling and add new story
 variations

---
 .../DateInput/DateInput.component.tsx         | 29 +-----
 .../DateInput/DateInput.stories.tsx           | 92 +++++++++++++++++++
 playground/src/tabs/DateAndTime.tsx           |  2 +-
 3 files changed, 98 insertions(+), 25 deletions(-)

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 cf3f8f340..7fafd107f 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
@@ -26,7 +26,11 @@ export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
       {...renderProps}
       {...dateFieldProps}
       style={{
-        ...sizes[dateFieldProps.granularity || "day"],
+        // 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)",
+        // ...sizes[dateFieldProps.granularity || "day"],
         ...renderProps.style,
       }}
     >
@@ -39,26 +43,3 @@ export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
     </DateField>
   );
 }
-
-const sizes: Record<Granularity, Record<string, string>> = {
-  day: {
-    "--size-sm-x": "125px",
-    "--size-md-x": "200px",
-    "--size-lg-x": "300px",
-  },
-  hour: {
-    "--size-sm-x": "185px",
-    "--size-md-x": "200px",
-    "--size-lg-x": "300px",
-  },
-  minute: {
-    "--size-sm-x": "215px",
-    "--size-md-x": "230px",
-    "--size-lg-x": "300px",
-  },
-  second: {
-    "--size-sm-x": "240px",
-    "--size-md-x": "240px",
-    "--size-lg-x": "300px",
-  },
-};
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/playground/src/tabs/DateAndTime.tsx b/playground/src/tabs/DateAndTime.tsx
index 63ed641fe..f9959a728 100644
--- a/playground/src/tabs/DateAndTime.tsx
+++ b/playground/src/tabs/DateAndTime.tsx
@@ -53,7 +53,7 @@ export function DateAndTime(props: DateAndTimeProps) {
         <Calendar.Grid>{(date) => <Calendar.Cell date={date} />}</Calendar.Grid>
       </Calendar> */}
 
-      <Flex $direction="column" $gap="1">
+      <Flex $direction="column" $gap="1" $align="flex-start">
         <DateInput
           value={selectedDate}
           onChange={setSelectedDate}

From c2633f3ce3c0b5fd82ec5b92f3967c668fbca9f9 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 15:57:10 -0700
Subject: [PATCH 3/8] Refactor code structure for improved readability and
 maintainability

---
 .gitignore                                    |    4 +-
 .../Fields/DateField/DateField.spec.tsx       |    1 -
 .../Fields/DateField/DateField.stories.tsx    |    1 -
 .../DateInput/DateInput.component.tsx         |    5 +-
 .../DateAndTimes/DateInput/DateInput.spec.tsx |  138 +
 .../__snapshots__/DateInput.spec.tsx.snap     | 2531 +++++++++++++++++
 6 files changed, 2673 insertions(+), 7 deletions(-)
 create mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/DateInput.spec.tsx
 create mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap

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/Fields/DateField/DateField.spec.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
index 470d6877d..7c25497cb 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
 import { parseDate } from "@internationalized/date";
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
index ac8ce9e4b..28fa63cf8 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 import { now, getLocalTimeZone } from "@internationalized/date";
 import { DateField } from ".";
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 7fafd107f..a872ec0b6 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,9 +1,7 @@
 import { AriaDateFieldProps, DateValue } from "@react-aria/datepicker";
-import { Granularity } from "@react-types/datepicker";
 
 import { AriaProps, FieldInputProps } from "../../../../types";
-import { DateField } from "../../../Fields/DateField";
-import { Label, Message, ErrorMessage } from "../../../Fields";
+import { Label, Message, ErrorMessage, DateField } from "../../../Fields";
 import { useRenderProps, fieldStatusSelectors } from "@hooks/useRenderProps";
 
 export interface DateInputProps<T extends DateValue>
@@ -30,7 +28,6 @@ export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
         // so we allow it grow larger than the default width constraints.
         width: "unset",
         minWidth: "var(--size-x)",
-        // ...sizes[dateFieldProps.granularity || "day"],
         ...renderProps.style,
       }}
     >
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/__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..0aa02d918
--- /dev/null
+++ b/packages/atomic-elements/src/components/Inputs/DateAndTimes/DateInput/__snapshots__/DateInput.spec.tsx.snap
@@ -0,0 +1,2531 @@
+// 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
+      aria-describedby="react-aria-:r77:"
+      aria-labelledby="react-aria-:r75:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r74:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r1g:"
+      aria-labelledby="react-aria-:r1e:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r1d:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r3:"
+      aria-labelledby="react-aria-:r1:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r0:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r4s:"
+      aria-disabled="true"
+      aria-labelledby="react-aria-:r4q:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      data-disabled="true"
+      id="react-aria-:r4p:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r1v:"
+      aria-labelledby="react-aria-:r1t:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r1s:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r69: react-aria-:r6a:"
+      aria-labelledby="react-aria-:r67:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      data-invalid="true"
+      id="react-aria-:r66:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+    <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
+      aria-describedby="react-aria-:r8s:"
+      aria-labelledby="react-aria-:r8q:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r8p:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r8d:"
+      aria-labelledby="react-aria-:r8b:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r8a:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-labelledby="react-aria-:rb5:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:rb4:"
+      role="group"
+      style="--input-gap: 0px; unicode-bidi: isolate;"
+    >
+      <div
+        aria-label="month, "
+        aria-labelledby="react-aria-:rb9: react-aria-:rb5:"
+        aria-valuemax="12"
+        aria-valuemin="1"
+        aria-valuenow="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r2q:"
+      aria-labelledby="react-aria-:r2o:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r2n:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r5q:"
+      aria-labelledby="react-aria-:r5o:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      data-readonly="true"
+      id="react-aria-:r5n:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r5b:"
+      aria-labelledby="react-aria-:r59:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      data-required="true"
+      id="react-aria-:r58:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r3p:"
+      aria-labelledby="react-aria-:r3n:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r3m:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r7u:"
+      aria-labelledby="react-aria-:r7s:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r7r:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-description-1 react-aria-:r11:"
+      aria-labelledby="react-aria-:rv:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:ru:"
+      role="group"
+      style="--input-gap: 0px; 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>
+</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
+      aria-describedby="react-aria-:r6o:"
+      aria-labelledby="react-aria-:r6m:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r6l:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r9b:"
+      aria-labelledby="react-aria-:r99:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r98:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-description-0 react-aria-:ri:"
+      aria-labelledby="react-aria-:rg:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:rf:"
+      role="group"
+      style="--input-gap: 0px; 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>
+</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
+      aria-describedby="react-aria-:rao:"
+      aria-labelledby="react-aria-:ram:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:ral:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-describedby="react-aria-:r9q:"
+      aria-labelledby="react-aria-:r9o:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:r9n:"
+      role="group"
+      style="--input-gap: 0px; 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="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</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
+      aria-labelledby="react-aria-:ra7:"
+      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
+      id="react-aria-:ra6:"
+      role="group"
+      style="--input-gap: 0px; unicode-bidi: isolate;"
+    >
+      <div
+        aria-label="month, "
+        aria-labelledby="react-aria-:rab: react-aria-:ra7:"
+        aria-valuemax="12"
+        aria-valuemin="1"
+        aria-valuenow="12"
+        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="31"
+        aria-valuemin="1"
+        aria-valuenow="19"
+        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="2025"
+        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>
+</DocumentFragment>
+`;

From 4d0cc2a8826726410c9242b4c41e136d02db809c Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 16:32:47 -0700
Subject: [PATCH 4/8] test: add DatePicker tests and stories

---
 .../Fields/DateField/DateField.spec.tsx       |   50 +-
 .../Fields/DateField/DateField.stories.tsx    |   57 +-
 .../Fields/DateField/DateFieldSegments.tsx    |   14 +-
 .../__snapshots__/DateField.spec.tsx.snap     | 1080 ++---
 .../DateInput/DateInput.component.tsx         |   16 +-
 .../__snapshots__/DateInput.spec.tsx.snap     | 3998 +++++++++--------
 .../DatePicker/DatePicker.component.tsx       |   85 +-
 .../DatePicker/DatePicker.spec.tsx            |  153 +
 .../DatePicker/DatePicker.stories.ts          |  102 +-
 .../DatePicker/DatePicker.styles.ts           |   24 -
 .../__snapshots__/DatePicker.spec.tsx.snap    | 3507 +++++++++++++++
 playground/src/tabs/DateAndTime.tsx           |   89 +-
 12 files changed, 6542 insertions(+), 2633 deletions(-)
 create mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.spec.tsx
 delete mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/DatePicker.styles.ts
 create mode 100644 packages/atomic-elements/src/components/Inputs/DateAndTimes/DatePicker/__snapshots__/DatePicker.spec.tsx.snap

diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
index 7c25497cb..cf1500dbb 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.spec.tsx
@@ -2,7 +2,7 @@ import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
 import { parseDate } from "@internationalized/date";
 import { DateField } from ".";
-import { Label, Message, ErrorMessage } from "../";
+import { Label, Message, ErrorMessage, ComboInput } from "../";
 
 describe("DateField", () => {
   describe("matches snapshots", () => {
@@ -10,9 +10,11 @@ describe("DateField", () => {
       const result = render(
         <DateField>
           <Label>Date</Label>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
         </DateField>
       );
       expect(result.asFragment()).toMatchSnapshot();
@@ -22,9 +24,11 @@ describe("DateField", () => {
       const result = render(
         <DateField value={parseDate("2023-01-15")}>
           <Label>Date</Label>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
         </DateField>
       );
       expect(result.asFragment()).toMatchSnapshot();
@@ -35,9 +39,11 @@ describe("DateField", () => {
         <DateField isInvalid>
           <Label>Date</Label>
           <Message>Enter your birth date</Message>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
           <ErrorMessage>Please enter a valid date</ErrorMessage>
         </DateField>
       );
@@ -48,9 +54,11 @@ describe("DateField", () => {
       const result = render(
         <DateField isDisabled>
           <Label>Date</Label>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
         </DateField>
       );
       expect(result.asFragment()).toMatchSnapshot();
@@ -60,9 +68,11 @@ describe("DateField", () => {
       const result = render(
         <DateField isRequired>
           <Label>Date</Label>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <ComboInput>
+            <DateField.Segments>
+              {(_, index) => <DateField.Segment key={index} index={index} />}
+            </DateField.Segments>
+          </ComboInput>
         </DateField>
       );
       expect(result.asFragment()).toMatchSnapshot();
@@ -72,9 +82,11 @@ describe("DateField", () => {
       const result = render(
         <DateField granularity="hour">
           <Label>Date and Time</Label>
-          <DateField.Segments>
-            {(_, index) => <DateField.Segment key={index} index={index} />}
-          </DateField.Segments>
+          <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
index 28fa63cf8..3ff58a681 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
@@ -4,6 +4,7 @@ import { DateField } from ".";
 import { FieldLabel } from "../Field/FieldLabel";
 import { FieldMessage } from "../Field/FieldMessage";
 import { FieldErrorMessage } from "../Field/FieldError";
+import { ComboInput } from "../ComboInput";
 import { FieldStateControls } from "@sb/helpers";
 
 export default {
@@ -80,9 +81,11 @@ export const Primary: Story = {
     children: [
       <FieldLabel key="label">Date</FieldLabel>,
       <FieldMessage key="message">Select a date</FieldMessage>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
       <FieldErrorMessage key="error">
         Please enter a valid date
       </FieldErrorMessage>,
@@ -96,9 +99,11 @@ export const DayGranularity: Story = {
     granularity: "day",
     children: [
       <FieldLabel key="label">Birth Date</FieldLabel>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
     ],
   },
 };
@@ -109,9 +114,11 @@ export const HourGranularity: Story = {
     granularity: "hour",
     children: [
       <FieldLabel key="label">Meeting Date & Time</FieldLabel>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
     ],
   },
 };
@@ -122,9 +129,11 @@ export const MinuteGranularity: Story = {
     granularity: "minute",
     children: [
       <FieldLabel key="label">Appointment Time</FieldLabel>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
     ],
   },
 };
@@ -138,9 +147,11 @@ export const WithError: Story = {
       <FieldMessage key="message">
         Choose when your event will happen
       </FieldMessage>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
       <FieldErrorMessage key="error">
         Please select a future date
       </FieldErrorMessage>,
@@ -154,9 +165,11 @@ export const Disabled: Story = {
     isDisabled: true,
     children: [
       <FieldLabel key="label">System Date</FieldLabel>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
     ],
   },
 };
@@ -168,9 +181,11 @@ export const Required: Story = {
     children: [
       <FieldLabel key="label">Due Date</FieldLabel>,
       <FieldMessage key="message">This field is required</FieldMessage>,
-      <DateField.Segments key="segments">
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>,
+      <ComboInput key="input">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>,
     ],
   },
 };
diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
index af9d350b6..28d6a4a99 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateFieldSegments.tsx
@@ -2,6 +2,7 @@ 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: (
@@ -21,17 +22,8 @@ export function DateFieldSegments(props: DateFieldSegmentsProps) {
   const { segments, fieldProps } = context;
 
   return (
-    <ComboInput
-      className="aje-input__date-segments"
-      padding="both"
-      {...fieldProps}
-      style={{
-        // @ts-expect-error CSS variable
-        "--input-gap": "0px",
-        ...fieldProps.style,
-      }}
-    >
+    <StyledDateSegments className="aje-input__date-segments" {...fieldProps}>
       {segments.map((segment, index) => children(segment, index))}
-    </ComboInput>
+    </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
index 3fed202f9..a5203f419 100644
--- 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
@@ -12,86 +12,90 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
       Date
     </label>
     <div
-      aria-labelledby="react-aria-:r1:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:r0:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <div
-        aria-label="month, "
-        aria-labelledby="react-aria-:r5: react-aria-:r1:"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -111,75 +115,79 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
       Date
     </label>
     <div
-      aria-disabled="true"
-      aria-labelledby="react-aria-:r1e:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:r1d:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <div
         aria-disabled="true"
-        aria-label="month, "
-        aria-labelledby="react-aria-:r1i: react-aria-:r1e:"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -199,89 +207,93 @@ exports[`DateField > matches snapshots > required state 1`] = `
       Date
     </label>
     <div
-      aria-labelledby="react-aria-:r1t:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:r1s:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <div
-        aria-label="month, "
-        aria-labelledby="react-aria-:r21: react-aria-:r1t:"
-        aria-required="true"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -300,151 +312,155 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
       Date and Time
     </label>
     <div
-      aria-labelledby="react-aria-:r2c:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:r2b:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <div
-        aria-label="month, "
-        aria-labelledby="react-aria-:r2g: react-aria-:r2c:"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -470,93 +486,97 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
       Enter your birth date
     </p>
     <div
-      aria-describedby="react-aria-:r11: react-aria-:r12:"
-      aria-labelledby="react-aria-:rv:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:ru:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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
@@ -581,85 +601,89 @@ exports[`DateField > matches snapshots > with value 1`] = `
       Date
     </label>
     <div
-      aria-describedby="react-aria-description-0"
-      aria-labelledby="react-aria-:rg:"
-      class="sc-hRDKVd kwooZw aje-combo-input aje-input__date-segments"
-      id="react-aria-:rf:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-hRDKVd jFxrzF aje-combo-input"
     >
       <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
+        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>
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 a872ec0b6..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,7 +1,13 @@
 import { AriaDateFieldProps, DateValue } from "@react-aria/datepicker";
 
 import { AriaProps, FieldInputProps } from "../../../../types";
-import { Label, Message, ErrorMessage, DateField } from "../../../Fields";
+import {
+  Label,
+  Message,
+  ErrorMessage,
+  DateField,
+  ComboInput,
+} from "../../../Fields";
 import { useRenderProps, fieldStatusSelectors } from "@hooks/useRenderProps";
 
 export interface DateInputProps<T extends DateValue>
@@ -33,9 +39,11 @@ export function DateInput<T extends DateValue>(props: DateInputProps<T>) {
     >
       {label && <Label>{label}</Label>}
       {message && <Message>{message}</Message>}
-      <DateField.Segments>
-        {(_, index) => <DateField.Segment key={index} index={index} />}
-      </DateField.Segments>
+      <ComboInput padding="both">
+        <DateField.Segments>
+          {(_, index) => <DateField.Segment key={index} index={index} />}
+        </DateField.Segments>
+      </ComboInput>
       <ErrorMessage>{error}</ErrorMessage>
     </DateField>
   );
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
index 0aa02d918..b20ee8ddf 100644
--- 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
@@ -19,127 +19,131 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r77:"
-      aria-labelledby="react-aria-:r75:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r74:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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"
-      >
-        ⁩
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -165,88 +169,92 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r1g:"
-      aria-labelledby="react-aria-:r1e:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r1d:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -272,88 +280,92 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r3:"
-      aria-labelledby="react-aria-:r1:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r0:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -380,78 +392,82 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r4s:"
-      aria-disabled="true"
-      aria-labelledby="react-aria-:r4q:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      data-disabled="true"
-      id="react-aria-:r4p:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -477,153 +493,157 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r1v:"
-      aria-labelledby="react-aria-:r1t:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r1s:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -650,94 +670,98 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r69: react-aria-:r6a:"
-      aria-labelledby="react-aria-:r67:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      data-invalid="true"
-      id="react-aria-:r66:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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
@@ -769,88 +793,92 @@ exports[`DateInput > matches snapshots > large size 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r8s:"
-      aria-labelledby="react-aria-:r8q:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r8p:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -876,88 +904,92 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r8d:"
-      aria-labelledby="react-aria-:r8b:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r8a:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -971,86 +1003,90 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
     style="min-width: var(--size-x);"
   >
     <div
-      aria-labelledby="react-aria-:rb5:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:rb4:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <div
-        aria-label="month, "
-        aria-labelledby="react-aria-:rb9: react-aria-:rb5:"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1076,180 +1112,184 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r2q:"
-      aria-labelledby="react-aria-:r2o:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r2n:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1276,80 +1316,84 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r5q:"
-      aria-labelledby="react-aria-:r5o:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      data-readonly="true"
-      id="react-aria-:r5n:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1376,92 +1420,96 @@ exports[`DateInput > matches snapshots > required state 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r5b:"
-      aria-labelledby="react-aria-:r59:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      data-required="true"
-      id="react-aria-:r58:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1487,207 +1535,211 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r3p:"
-      aria-labelledby="react-aria-:r3n:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r3m:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1713,88 +1765,92 @@ exports[`DateInput > matches snapshots > small size 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r7u:"
-      aria-labelledby="react-aria-:r7s:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r7r:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -1820,85 +1876,89 @@ exports[`DateInput > matches snapshots > with default value 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-description-1 react-aria-:r11:"
-      aria-labelledby="react-aria-:rv:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:ru:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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
+        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>
@@ -1924,88 +1984,92 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r6o:"
-      aria-labelledby="react-aria-:r6m:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r6l:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -2031,88 +2095,92 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r9b:"
-      aria-labelledby="react-aria-:r99:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r98:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -2138,85 +2206,89 @@ exports[`DateInput > matches snapshots > with value 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-description-0 react-aria-:ri:"
-      aria-labelledby="react-aria-:rg:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:rf:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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
+        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>
@@ -2242,88 +2314,92 @@ exports[`DateInput > matches snapshots > without error 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:rao:"
-      aria-labelledby="react-aria-:ram:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:ral:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -2343,88 +2419,92 @@ exports[`DateInput > matches snapshots > without label 1`] = `
       Select a date
     </p>
     <div
-      aria-describedby="react-aria-:r9q:"
-      aria-labelledby="react-aria-:r9o:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:r9n:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <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="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
@@ -2444,86 +2524,90 @@ exports[`DateInput > matches snapshots > without message 1`] = `
       Date Input
     </label>
     <div
-      aria-labelledby="react-aria-:ra7:"
-      class="sc-dycHyt kIeuYg aje-combo-input aje-input__date-segments"
-      id="react-aria-:ra6:"
-      role="group"
-      style="--input-gap: 0px; unicode-bidi: isolate;"
+      class="sc-dycHyt kIeuYg aje-combo-input"
     >
       <div
-        aria-label="month, "
-        aria-labelledby="react-aria-:rab: react-aria-:ra7:"
-        aria-valuemax="12"
-        aria-valuemin="1"
-        aria-valuenow="12"
-        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="31"
-        aria-valuemin="1"
-        aria-valuenow="19"
-        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="2025"
-        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
+        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="12"
+          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="31"
+          aria-valuemin="1"
+          aria-valuenow="19"
+          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="2025"
+          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>
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 6debd12fb..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,27 +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>}
-
-      <DateInput {...fieldProps} size="full" isRequired={isRequired} />
-
-      {/* <DatePickerComboInput
-        {...groupProps}
-        ref={ref}
-        className="aje-input__date-segments"
-        padding="both"
-      >
-        <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
@@ -95,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..ab34c0e5f
--- /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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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="12"
+            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="31"
+            aria-valuemin="1"
+            aria-valuenow="19"
+            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="2025"
+            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/playground/src/tabs/DateAndTime.tsx b/playground/src/tabs/DateAndTime.tsx
index f9959a728..890914833 100644
--- a/playground/src/tabs/DateAndTime.tsx
+++ b/playground/src/tabs/DateAndTime.tsx
@@ -8,23 +8,29 @@ import {
   IconButton,
   Item,
   TextInput,
-} from "../elements";
-import { DateValue } from "@internationalized/date";
+} from "@atomicjolt/atomic-elements";
+import { DateValue, getLocalTimeZone, now } from "@internationalized/date";
 
 interface DateAndTimeProps {}
 
 export function DateAndTime(props: DateAndTimeProps) {
-  const [selectedDate, setSelectedDate] = useState<DateValue | null>(null);
+  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");
 
-  console.log("Selected date:", selectedDate);
-
   return (
-    <Flex $gap="4">
-      <CustomSelect label="Size" selectedKey={size} onSelectionChange={setSize}>
+    <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>
@@ -32,43 +38,54 @@ export function DateAndTime(props: DateAndTimeProps) {
       <CustomSelect
         label="Granularity"
         selectedKey={granularity}
-        onSelectionChange={setGranularity}
+        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>
-      {/* <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>
+      <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> */}
+          <Calendar.Grid>
+            {(date) => <Calendar.Cell date={date} />}
+          </Calendar.Grid>
+        </Calendar>
 
-      <Flex $direction="column" $gap="1" $align="flex-start">
-        <DateInput
-          value={selectedDate}
-          onChange={setSelectedDate}
-          label="Date Input"
-          size={size}
-          granularity={granularity}
-        />
-        <TextInput label="Text Input" size={size} />
-        <DatePicker
-          value={selectedDate}
-          onChange={setSelectedDate}
-          label="Date Picker"
-          size={size}
-          granularity={granularity}
-        />
+        <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>
   );

From eba74fed52b08eabc1d13d0d19967a0387e4f99a Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 16:37:10 -0700
Subject: [PATCH 5/8] feat: export ButtonProps and ButtonVariants types from
 BaseButton

---
 .../src/components/Buttons/Button/Button.component.tsx       | 5 +++++
 1 file changed, 5 insertions(+)

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>

From bb7ba89d93127f786ba09ce485d8b63928639634 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Fri, 19 Dec 2025 16:38:38 -0700
Subject: [PATCH 6/8] chore: add changeset

---
 .changeset/hip-dots-exist.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hip-dots-exist.md

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

From a460c75aa63ebe14dadd496db34c606b272870ef Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Thu, 26 Feb 2026 12:46:10 -0700
Subject: [PATCH 7/8] fix: remove usage of Field* subcomponentts

---
 .../Fields/DateField/DateField.stories.tsx    | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
index 3ff58a681..2531a130d 100644
--- a/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
+++ b/packages/atomic-elements/src/components/Fields/DateField/DateField.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { now, getLocalTimeZone } from "@internationalized/date";
 import { DateField } from ".";
-import { FieldLabel } from "../Field/FieldLabel";
-import { FieldMessage } from "../Field/FieldMessage";
-import { FieldErrorMessage } from "../Field/FieldError";
+import { Label } from "../Atoms/Label";
+import { Message } from "../Atoms/Message";
+import { ErrorMessage } from "../Atoms/ErrorMessage";
 import { ComboInput } from "../ComboInput";
 import { FieldStateControls } from "@sb/helpers";
 
@@ -79,16 +79,14 @@ export const Primary: Story = {
     granularity: "day",
     hideTimeZone: true,
     children: [
-      <FieldLabel key="label">Date</FieldLabel>,
-      <FieldMessage key="message">Select a date</FieldMessage>,
-      <ComboInput key="input">
+      <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>,
-      <FieldErrorMessage key="error">
-        Please enter a valid date
-      </FieldErrorMessage>,
+      <ErrorMessage key="error">Please enter a valid date</ErrorMessage>,
     ],
   },
 };
@@ -98,8 +96,8 @@ export const DayGranularity: Story = {
     ...Primary.args,
     granularity: "day",
     children: [
-      <FieldLabel key="label">Birth Date</FieldLabel>,
-      <ComboInput key="input">
+      <Label key="label">Birth Date</Label>,
+      <ComboInput key="input" padding="both">
         <DateField.Segments>
           {(_, index) => <DateField.Segment key={index} index={index} />}
         </DateField.Segments>
@@ -113,8 +111,8 @@ export const HourGranularity: Story = {
     ...Primary.args,
     granularity: "hour",
     children: [
-      <FieldLabel key="label">Meeting Date & Time</FieldLabel>,
-      <ComboInput key="input">
+      <Label key="label">Meeting Date & Time</Label>,
+      <ComboInput key="input" padding="both">
         <DateField.Segments>
           {(_, index) => <DateField.Segment key={index} index={index} />}
         </DateField.Segments>
@@ -128,8 +126,8 @@ export const MinuteGranularity: Story = {
     ...Primary.args,
     granularity: "minute",
     children: [
-      <FieldLabel key="label">Appointment Time</FieldLabel>,
-      <ComboInput key="input">
+      <Label key="label">Appointment Time</Label>,
+      <ComboInput key="input" padding="both">
         <DateField.Segments>
           {(_, index) => <DateField.Segment key={index} index={index} />}
         </DateField.Segments>
@@ -143,18 +141,14 @@ export const WithError: Story = {
     ...Primary.args,
     isInvalid: true,
     children: [
-      <FieldLabel key="label">Event Date</FieldLabel>,
-      <FieldMessage key="message">
-        Choose when your event will happen
-      </FieldMessage>,
-      <ComboInput key="input">
+      <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>,
-      <FieldErrorMessage key="error">
-        Please select a future date
-      </FieldErrorMessage>,
+      <ErrorMessage key="error">Please select a future date</ErrorMessage>,
     ],
   },
 };
@@ -164,8 +158,8 @@ export const Disabled: Story = {
     ...Primary.args,
     isDisabled: true,
     children: [
-      <FieldLabel key="label">System Date</FieldLabel>,
-      <ComboInput key="input">
+      <Label key="label">System Date</Label>,
+      <ComboInput key="input" padding="both">
         <DateField.Segments>
           {(_, index) => <DateField.Segment key={index} index={index} />}
         </DateField.Segments>
@@ -179,9 +173,9 @@ export const Required: Story = {
     ...Primary.args,
     isRequired: true,
     children: [
-      <FieldLabel key="label">Due Date</FieldLabel>,
-      <FieldMessage key="message">This field is required</FieldMessage>,
-      <ComboInput key="input">
+      <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>

From a3a4e08ccc87a1f79fab62e6be0aedd21b243f52 Mon Sep 17 00:00:00 2001
From: Sean Collings <sean.collings@atomicjolt.com>
Date: Thu, 26 Feb 2026 12:52:39 -0700
Subject: [PATCH 8/8] test: update snapshots

---
 .../__snapshots__/DateField.spec.tsx.snap     |  40 ++--
 .../__snapshots__/DateInput.spec.tsx.snap     | 152 +++++++--------
 .../__snapshots__/DatePicker.spec.tsx.snap    | 176 +++++++++---------
 3 files changed, 184 insertions(+), 184 deletions(-)

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
index a5203f419..f677d2421 100644
--- 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
@@ -26,7 +26,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
           aria-labelledby="react-aria-:r5: react-aria-:r1:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -51,9 +51,9 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r9: react-aria-:r1:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -80,7 +80,7 @@ exports[`DateField > matches snapshots > basic composition 1`] = `
           aria-labelledby="react-aria-:rd: react-aria-:r1:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -131,7 +131,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-labelledby="react-aria-:r1i: react-aria-:r1e:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
           contenteditable="false"
@@ -152,9 +152,9 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-disabled="true"
           aria-label="day, "
           aria-labelledby="react-aria-:r1m: react-aria-:r1e:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
           contenteditable="false"
@@ -177,7 +177,7 @@ exports[`DateField > matches snapshots > disabled state 1`] = `
           aria-labelledby="react-aria-:r1q: react-aria-:r1e:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
           contenteditable="false"
@@ -222,7 +222,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-required="true"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -248,9 +248,9 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-label="day, "
           aria-labelledby="react-aria-:r25: react-aria-:r1t:"
           aria-required="true"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -278,7 +278,7 @@ exports[`DateField > matches snapshots > required state 1`] = `
           aria-required="true"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -326,7 +326,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-labelledby="react-aria-:r2g: react-aria-:r2c:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -351,9 +351,9 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r2k: react-aria-:r2c:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -380,7 +380,7 @@ exports[`DateField > matches snapshots > with granularity hour 1`] = `
           aria-labelledby="react-aria-:r2o: react-aria-:r2c:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -503,7 +503,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-labelledby="react-aria-:r13: react-aria-:rv:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -530,9 +530,9 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-invalid="true"
           aria-label="day, "
           aria-labelledby="react-aria-:r17: react-aria-:rv:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
@@ -561,7 +561,7 @@ exports[`DateField > matches snapshots > with message and error 1`] = `
           aria-labelledby="react-aria-:r1b: react-aria-:rv:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-kfeOyU flRcvM aje-input__segment placeholder"
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
index b20ee8ddf..12b8ad56b 100644
--- 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
@@ -35,7 +35,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-labelledby="react-aria-:r79: react-aria-:r75:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -60,9 +60,9 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r7d: react-aria-:r75:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -89,7 +89,7 @@ exports[`DateInput > matches snapshots > 24 hour cycle 1`] = `
           aria-labelledby="react-aria-:r7h: react-aria-:r75:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -185,7 +185,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
           aria-labelledby="react-aria-:r1i: react-aria-:r1e:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -210,9 +210,9 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r1m: react-aria-:r1e:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -239,7 +239,7 @@ exports[`DateInput > matches snapshots > day granularity 1`] = `
           aria-labelledby="react-aria-:r1q: react-aria-:r1e:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -296,7 +296,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
           aria-labelledby="react-aria-:r5: react-aria-:r1:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -321,9 +321,9 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r9: react-aria-:r1:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -350,7 +350,7 @@ exports[`DateInput > matches snapshots > default variant 1`] = `
           aria-labelledby="react-aria-:rd: react-aria-:r1:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -411,7 +411,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-labelledby="react-aria-:r4u: react-aria-:r4q:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -432,9 +432,9 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-disabled="true"
           aria-label="day, "
           aria-labelledby="react-aria-:r52: react-aria-:r4q:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -457,7 +457,7 @@ exports[`DateInput > matches snapshots > disabled state 1`] = `
           aria-labelledby="react-aria-:r56: react-aria-:r4q:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -509,7 +509,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-labelledby="react-aria-:r21: react-aria-:r1t:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -534,9 +534,9 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r25: react-aria-:r1t:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -563,7 +563,7 @@ exports[`DateInput > matches snapshots > hour granularity 1`] = `
           aria-labelledby="react-aria-:r29: react-aria-:r1t:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -688,7 +688,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-labelledby="react-aria-:r6b: react-aria-:r67:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -715,9 +715,9 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-invalid="true"
           aria-label="day, "
           aria-labelledby="react-aria-:r6f: react-aria-:r67:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -746,7 +746,7 @@ exports[`DateInput > matches snapshots > invalid state 1`] = `
           aria-labelledby="react-aria-:r6j: react-aria-:r67:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -809,7 +809,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
           aria-labelledby="react-aria-:r8u: react-aria-:r8q:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -834,9 +834,9 @@ exports[`DateInput > matches snapshots > large size 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r92: react-aria-:r8q:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -863,7 +863,7 @@ exports[`DateInput > matches snapshots > large size 1`] = `
           aria-labelledby="react-aria-:r96: react-aria-:r8q:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -920,7 +920,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
           aria-labelledby="react-aria-:r8f: react-aria-:r8b:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -945,9 +945,9 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r8j: react-aria-:r8b:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -974,7 +974,7 @@ exports[`DateInput > matches snapshots > medium size 1`] = `
           aria-labelledby="react-aria-:r8n: react-aria-:r8b:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1017,7 +1017,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
           aria-labelledby="react-aria-:rb9: react-aria-:rb5:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1042,9 +1042,9 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:rbd: react-aria-:rb5:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1071,7 +1071,7 @@ exports[`DateInput > matches snapshots > minimal props 1`] = `
           aria-labelledby="react-aria-:rbh: react-aria-:rb5:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1128,7 +1128,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-labelledby="react-aria-:r2s: react-aria-:r2o:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1153,9 +1153,9 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r30: react-aria-:r2o:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1182,7 +1182,7 @@ exports[`DateInput > matches snapshots > minute granularity 1`] = `
           aria-labelledby="react-aria-:r34: react-aria-:r2o:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1334,7 +1334,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-readonly="true"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -1356,9 +1356,9 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-label="day, "
           aria-labelledby="react-aria-:r60: react-aria-:r5o:"
           aria-readonly="true"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -1382,7 +1382,7 @@ exports[`DateInput > matches snapshots > readonly state 1`] = `
           aria-readonly="true"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
           contenteditable="false"
@@ -1438,7 +1438,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-required="true"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1464,9 +1464,9 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-label="day, "
           aria-labelledby="react-aria-:r5h: react-aria-:r59:"
           aria-required="true"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1494,7 +1494,7 @@ exports[`DateInput > matches snapshots > required state 1`] = `
           aria-required="true"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1551,7 +1551,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-labelledby="react-aria-:r3r: react-aria-:r3n:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1576,9 +1576,9 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r3v: react-aria-:r3n:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1605,7 +1605,7 @@ exports[`DateInput > matches snapshots > second granularity 1`] = `
           aria-labelledby="react-aria-:r43: react-aria-:r3n:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1781,7 +1781,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
           aria-labelledby="react-aria-:r80: react-aria-:r7s:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1806,9 +1806,9 @@ exports[`DateInput > matches snapshots > small size 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r84: react-aria-:r7s:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -1835,7 +1835,7 @@ exports[`DateInput > matches snapshots > small size 1`] = `
           aria-labelledby="react-aria-:r88: react-aria-:r7s:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2000,7 +2000,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
           aria-labelledby="react-aria-:r6q: react-aria-:r6m:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2025,9 +2025,9 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r6u: react-aria-:r6m:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2054,7 +2054,7 @@ exports[`DateInput > matches snapshots > with leading zeros 1`] = `
           aria-labelledby="react-aria-:r72: react-aria-:r6m:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2111,7 +2111,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
           aria-labelledby="react-aria-:r9d: react-aria-:r99:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2136,9 +2136,9 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:r9h: react-aria-:r99:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2165,7 +2165,7 @@ exports[`DateInput > matches snapshots > with min and max values 1`] = `
           aria-labelledby="react-aria-:r9l: react-aria-:r99:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2330,7 +2330,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
           aria-labelledby="react-aria-:raq: react-aria-:ram:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2355,9 +2355,9 @@ exports[`DateInput > matches snapshots > without error 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:rau: react-aria-:ram:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2384,7 +2384,7 @@ exports[`DateInput > matches snapshots > without error 1`] = `
           aria-labelledby="react-aria-:rb2: react-aria-:ram:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2435,7 +2435,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
           aria-labelledby="react-aria-:r9s: react-aria-:r9o:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2460,9 +2460,9 @@ exports[`DateInput > matches snapshots > without label 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:ra0: react-aria-:r9o:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2489,7 +2489,7 @@ exports[`DateInput > matches snapshots > without label 1`] = `
           aria-labelledby="react-aria-:ra4: react-aria-:r9o:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2538,7 +2538,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
           aria-labelledby="react-aria-:rab: react-aria-:ra7:"
           aria-valuemax="12"
           aria-valuemin="1"
-          aria-valuenow="12"
+          aria-valuenow="2"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2563,9 +2563,9 @@ exports[`DateInput > matches snapshots > without message 1`] = `
         <div
           aria-label="day, "
           aria-labelledby="react-aria-:raf: react-aria-:ra7:"
-          aria-valuemax="31"
+          aria-valuemax="28"
           aria-valuemin="1"
-          aria-valuenow="19"
+          aria-valuenow="26"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
@@ -2592,7 +2592,7 @@ exports[`DateInput > matches snapshots > without message 1`] = `
           aria-labelledby="react-aria-:raj: react-aria-:ra7:"
           aria-valuemax="9999"
           aria-valuemin="1"
-          aria-valuenow="2025"
+          aria-valuenow="2026"
           aria-valuetext="Empty"
           autocorrect="off"
           class="sc-dPKAra iULmFG aje-input__segment placeholder"
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
index ab34c0e5f..f9e9a43c4 100644
--- 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
@@ -37,7 +37,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-labelledby="react-aria-:rah: react-aria-:ra8:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -62,9 +62,9 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:ral: react-aria-:ra8:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -91,7 +91,7 @@ exports[`DatePicker > matches snapshots > 24 hour cycle 1`] = `
             aria-labelledby="react-aria-:rap: react-aria-:ra8:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -210,7 +210,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
             aria-labelledby="react-aria-:r2i: react-aria-:r29:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -235,9 +235,9 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:r2m: react-aria-:r29:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -264,7 +264,7 @@ exports[`DatePicker > matches snapshots > day granularity 1`] = `
             aria-labelledby="react-aria-:r2q: react-aria-:r29:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -344,7 +344,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
             aria-labelledby="react-aria-:rd: react-aria-:r4:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -369,9 +369,9 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rh: react-aria-:r4:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -398,7 +398,7 @@ exports[`DatePicker > matches snapshots > default variant 1`] = `
             aria-labelledby="react-aria-:rl: react-aria-:r4:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -481,7 +481,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-labelledby="react-aria-:r6u: react-aria-:r6l:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -502,9 +502,9 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-disabled="true"
             aria-label="day, "
             aria-labelledby="react-aria-:r72: react-aria-:r6l:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -527,7 +527,7 @@ exports[`DatePicker > matches snapshots > disabled state 1`] = `
             aria-labelledby="react-aria-:r76: react-aria-:r6l:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -602,7 +602,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-labelledby="react-aria-:r39: react-aria-:r30:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -627,9 +627,9 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:r3d: react-aria-:r30:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -656,7 +656,7 @@ exports[`DatePicker > matches snapshots > hour granularity 1`] = `
             aria-labelledby="react-aria-:r3h: react-aria-:r30:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -804,7 +804,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-labelledby="react-aria-:r93: react-aria-:r8q:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -831,9 +831,9 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-invalid="true"
             aria-label="day, "
             aria-labelledby="react-aria-:r97: react-aria-:r8q:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -862,7 +862,7 @@ exports[`DatePicker > matches snapshots > invalid state 1`] = `
             aria-labelledby="react-aria-:r9b: react-aria-:r8q:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -948,7 +948,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
             aria-labelledby="react-aria-:rf3: react-aria-:req:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -973,9 +973,9 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rf7: react-aria-:req:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1002,7 +1002,7 @@ exports[`DatePicker > matches snapshots > large calendar size 1`] = `
             aria-labelledby="react-aria-:rfb: react-aria-:req:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1082,7 +1082,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
             aria-labelledby="react-aria-:rcu: react-aria-:rcl:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1107,9 +1107,9 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rd2: react-aria-:rcl:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1136,7 +1136,7 @@ exports[`DatePicker > matches snapshots > large size 1`] = `
             aria-labelledby="react-aria-:rd6: react-aria-:rcl:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1216,7 +1216,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
             aria-labelledby="react-aria-:rec: react-aria-:re3:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1241,9 +1241,9 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:reg: react-aria-:re3:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1270,7 +1270,7 @@ exports[`DatePicker > matches snapshots > medium calendar size 1`] = `
             aria-labelledby="react-aria-:rek: react-aria-:re3:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1350,7 +1350,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
             aria-labelledby="react-aria-:rc7: react-aria-:rbu:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1375,9 +1375,9 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rcb: react-aria-:rbu:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1404,7 +1404,7 @@ exports[`DatePicker > matches snapshots > medium size 1`] = `
             aria-labelledby="react-aria-:rcf: react-aria-:rbu:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1475,7 +1475,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
             aria-labelledby="react-aria-:rim: react-aria-:rii:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1500,9 +1500,9 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:riq: react-aria-:rii:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1529,7 +1529,7 @@ exports[`DatePicker > matches snapshots > minimal props 1`] = `
             aria-labelledby="react-aria-:riu: react-aria-:rii:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1608,7 +1608,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-labelledby="react-aria-:r4c: react-aria-:r43:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1633,9 +1633,9 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:r4g: react-aria-:r43:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1662,7 +1662,7 @@ exports[`DatePicker > matches snapshots > minute granularity 1`] = `
             aria-labelledby="react-aria-:r4k: react-aria-:r43:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1837,7 +1837,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-readonly="true"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -1859,9 +1859,9 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-label="day, "
             aria-labelledby="react-aria-:r8g: react-aria-:r83:"
             aria-readonly="true"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -1885,7 +1885,7 @@ exports[`DatePicker > matches snapshots > readonly state 1`] = `
             aria-readonly="true"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
             contenteditable="false"
@@ -1964,7 +1964,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-required="true"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -1990,9 +1990,9 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-label="day, "
             aria-labelledby="react-aria-:r7p: react-aria-:r7c:"
             aria-required="true"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2020,7 +2020,7 @@ exports[`DatePicker > matches snapshots > required state 1`] = `
             aria-required="true"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2100,7 +2100,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-labelledby="react-aria-:r5j: react-aria-:r5a:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2125,9 +2125,9 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:r5n: react-aria-:r5a:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2154,7 +2154,7 @@ exports[`DatePicker > matches snapshots > second granularity 1`] = `
             aria-labelledby="react-aria-:r5r: react-aria-:r5a:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2353,7 +2353,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
             aria-labelledby="react-aria-:rdl: react-aria-:rdc:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2378,9 +2378,9 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rdp: react-aria-:rdc:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2407,7 +2407,7 @@ exports[`DatePicker > matches snapshots > small calendar size 1`] = `
             aria-labelledby="react-aria-:rdt: react-aria-:rdc:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2487,7 +2487,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
             aria-labelledby="react-aria-:rbg: react-aria-:rb7:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2512,9 +2512,9 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rbk: react-aria-:rb7:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2541,7 +2541,7 @@ exports[`DatePicker > matches snapshots > small size 1`] = `
             aria-labelledby="react-aria-:rbo: react-aria-:rb7:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2752,7 +2752,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
             aria-labelledby="react-aria-:r9q: react-aria-:r9h:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2777,9 +2777,9 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:r9u: react-aria-:r9h:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2806,7 +2806,7 @@ exports[`DatePicker > matches snapshots > with leading zeros 1`] = `
             aria-labelledby="react-aria-:ra2: react-aria-:r9h:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2886,7 +2886,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
             aria-labelledby="react-aria-:rfq: react-aria-:rfh:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2911,9 +2911,9 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rfu: react-aria-:rfh:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -2940,7 +2940,7 @@ exports[`DatePicker > matches snapshots > with min and max values 1`] = `
             aria-labelledby="react-aria-:rg2: react-aria-:rfh:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3151,7 +3151,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
             aria-labelledby="react-aria-:rhv: react-aria-:rhm:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3176,9 +3176,9 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:ri3: react-aria-:rhm:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3205,7 +3205,7 @@ exports[`DatePicker > matches snapshots > without error 1`] = `
             aria-labelledby="react-aria-:ri7: react-aria-:rhm:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3283,7 +3283,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
             aria-labelledby="react-aria-:rgh: react-aria-:rgd:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3308,9 +3308,9 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rgl: react-aria-:rgd:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3337,7 +3337,7 @@ exports[`DatePicker > matches snapshots > without label 1`] = `
             aria-labelledby="react-aria-:rgp: react-aria-:rgd:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3410,7 +3410,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
             aria-labelledby="react-aria-:rh8: react-aria-:rgv:"
             aria-valuemax="12"
             aria-valuemin="1"
-            aria-valuenow="12"
+            aria-valuenow="2"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3435,9 +3435,9 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
           <div
             aria-label="day, "
             aria-labelledby="react-aria-:rhc: react-aria-:rgv:"
-            aria-valuemax="31"
+            aria-valuemax="28"
             aria-valuemin="1"
-            aria-valuenow="19"
+            aria-valuenow="26"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"
@@ -3464,7 +3464,7 @@ exports[`DatePicker > matches snapshots > without message 1`] = `
             aria-labelledby="react-aria-:rhg: react-aria-:rgv:"
             aria-valuemax="9999"
             aria-valuemin="1"
-            aria-valuenow="2025"
+            aria-valuenow="2026"
             aria-valuetext="Empty"
             autocorrect="off"
             class="sc-flQbIK tWhTg aje-input__segment placeholder"