@tinybigui/react 0.12.0 → 0.14.0

package/dist/index.cjs

@@ -2118,277 +2118,332 @@ var FAB = React.forwardRef(
   }
 );
 FAB.displayName = "FAB";
-var textFieldContainerVariants = classVarianceAuthority.cva(
+var textFieldRootVariants = classVarianceAuthority.cva(["relative inline-flex flex-col"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-auto"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+var textFieldFieldVariants = classVarianceAuthority.cva(
   [
-    // Base container styles
-    "relative inline-flex flex-col"
+    "relative flex items-center w-full min-h-14",
+    // Cursor — disabled via group-data
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    "group-data-[disabled]/text-field:pointer-events-none"
   ],
   {
     variants: {
-      fullWidth: {
-        true: "w-full",
-        false: "w-auto"
+      variant: {
+        filled: [
+          "rounded-t-xs bg-surface-container-highest",
+          // Disabled: background fades to on-surface/4
+          "group-data-[disabled]/text-field:bg-on-surface/4"
+        ],
+        outlined: ["rounded-xs bg-transparent"]
       }
     },
     defaultVariants: {
-      fullWidth: false
+      variant: "filled"
     }
   }
 );
-var textFieldWrapperVariants = classVarianceAuthority.cva(
+var textFieldStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-t-xs pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition — no spatial overshoot on opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/text-field:opacity-8",
+  // Focus: 10% (focus wins over hover via cascade order — placed after)
+  "group-data-[focused]/text-field:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldActiveIndicatorVariants = classVarianceAuthority.cva([
+  "absolute bottom-0 left-0 right-0 pointer-events-none",
+  // Spatial transition: height is a spatial property
+  "transition-[height,background-color]",
+  "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base
+  "h-px bg-on-surface-variant",
+  // Hover
+  "group-data-[hovered]/text-field:bg-on-surface",
+  // Focused — 2px + primary color (focused placed after hovered to win cascade)
+  "group-data-[focused]/text-field:h-0.5 group-data-[focused]/text-field:bg-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:bg-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:bg-error",
+  // Disabled: hidden
+  "group-data-[disabled]/text-field:hidden"
+]);
+var textFieldOutlineVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-xs m-0 px-2 pointer-events-none",
+  "border border-outline",
+  // Effects transition for color; spatial for border-width
+  "transition-[border-color,border-width]",
+  "duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover
+  "group-data-[hovered]/text-field:border-on-surface",
+  // Focused — 2px + primary color
+  "group-data-[focused]/text-field:border-2 group-data-[focused]/text-field:border-primary",
+  // Invalid
+  "group-data-[invalid]/text-field:border-error",
+  // Invalid + focused
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-2",
+  "group-data-[invalid]/text-field:group-data-[focused]/text-field:border-error",
+  // Disabled
+  "group-data-[disabled]/text-field:border-on-surface/12"
+]);
+var textFieldNotchVariants = classVarianceAuthority.cva([
+  "invisible whitespace-nowrap text-body-small px-1",
+  // 0 width when not floating (no gap)
+  "max-w-0 overflow-hidden",
+  // Full width when floating (gap opens)
+  "group-data-[float]/text-field:max-w-full",
+  // Spatial transition for max-width change
+  "transition-[max-width] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial"
+]);
+var textFieldLabelVariants = classVarianceAuthority.cva(
   [
-    // Base wrapper styles
-    "relative inline-flex items-center w-full",
-    "transition-all duration-200",
-    "rounded-t"
+    "absolute pointer-events-none origin-top-left select-none",
+    "text-body-large text-on-surface-variant",
+    // Spatial + effects both use standard fast — no overshoot on font/color
+    "transition-[transform,font-size,color,line-height]",
+    "duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    // Invalid (placed after default, before focused so focused invalid wins)
+    "group-data-[invalid]/text-field:text-error",
+    // Focused (singly-chained wins by cascade order)
+    "group-data-[focused]/text-field:text-primary",
+    // Invalid + focused — doubly-chained, wins over single-chained focused
+    "group-data-[invalid]/text-field:group-data-[focused]/text-field:text-error"
   ],
   {
     variants: {
       variant: {
-        filled: ["bg-surface-container-highest", "border-b-2 border-on-surface-variant"],
-        outlined: ["bg-transparent", "border border-outline", "rounded-b"]
-      },
-      size: {
-        small: "min-h-10",
-        medium: "min-h-12",
-        large: "min-h-14"
-      },
-      disabled: {
-        true: ["cursor-not-allowed", "opacity-38"],
-        false: ""
-      },
-      error: {
-        true: "",
-        false: ""
-      },
-      focused: {
-        true: "",
-        false: ""
+        /**
+         * Filled: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to top-2 (8dp) with body-small size.
+         */
+        filled: [
+          "top-1/2 -translate-y-1/2 left-4",
+          // Floated position — sits in the top 8dp zone
+          "group-data-[float]/text-field:top-2 group-data-[float]/text-field:-translate-y-0",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ],
+        /**
+         * Outlined: label rests at center (top-1/2 -translate-y-1/2).
+         * When floating: moves up to sit on the top border (-translate-y-1/2 from top-0).
+         */
+        outlined: [
+          "top-1/2 -translate-y-1/2 left-3",
+          // bg-surface ensures label text punches through the border
+          "bg-surface px-1",
+          // Floated: sits on the top border
+          "group-data-[float]/text-field:top-0 group-data-[float]/text-field:-translate-y-1/2",
+          "group-data-[float]/text-field:text-body-small",
+          // Leading-icon offset
+          "group-data-[with-leading-icon]/text-field:left-[52px]"
+        ]
       }
     },
-    compoundVariants: [
-      // FILLED VARIANT - Focused state
-      {
-        variant: "filled",
-        focused: true,
-        error: false,
-        className: "border-primary"
-      },
-      // FILLED VARIANT - Error state
-      {
-        variant: "filled",
-        error: true,
-        className: "border-error"
-      },
-      // FILLED VARIANT - Hover state (handled via group-hover in parent)
-      {
-        variant: "filled",
-        disabled: false,
-        className: "hover:bg-on-surface/[0.08]"
-      },
-      // OUTLINED VARIANT - Focused state
-      {
-        variant: "outlined",
-        focused: true,
-        error: false,
-        className: "border-2 border-primary"
-      },
-      // OUTLINED VARIANT - Error state
-      {
-        variant: "outlined",
-        error: true,
-        className: "border-2 border-error"
-      },
-      // OUTLINED VARIANT - Hover state
-      {
-        variant: "outlined",
-        disabled: false,
-        className: "hover:border-on-surface"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      disabled: false,
-      error: false,
-      focused: false
+      variant: "filled"
     }
   }
 );
 var textFieldInputVariants = classVarianceAuthority.cva(
   [
-    // Base input styles
-    "w-full bg-transparent outline-none",
-    "text-on-surface text-base",
-    "placeholder:text-on-surface-variant placeholder:opacity-60",
-    "transition-colors duration-200"
+    "relative z-10 w-full bg-transparent outline-none border-none",
+    "text-body-large text-on-surface",
+    "placeholder:text-on-surface-variant",
+    // Placeholder hidden unless field is floating (avoids overlap with label)
+    "placeholder:opacity-0",
+    "group-data-[float]/text-field:placeholder:opacity-100",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38",
+    "group-data-[disabled]/text-field:cursor-not-allowed",
+    // Readonly
+    "group-data-[readonly]/text-field:cursor-default",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       variant: {
-        filled: "px-4",
-        outlined: "px-4"
-      },
-      size: {
-        small: "h-10 py-2 text-sm",
-        medium: "h-12 py-3 text-base",
-        large: "h-14 py-4 text-lg"
-      },
-      disabled: {
-        true: "cursor-not-allowed",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "pl-12",
-        false: ""
-      },
-      hasTrailingIcon: {
-        true: "pr-12",
-        false: ""
+        /**
+         * Filled: top padding creates room for floating label (label rests at 8dp).
+         * Horizontal padding: 16dp left / 16dp right — but yielded to prefix/suffix
+         * when they are present so the affix handles the edge spacing instead.
+         */
+        filled: [
+          "pt-6 pb-2 px-4",
+          // No label present: vertically center
+          "group-data-[no-label]/text-field:py-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge — remove input's left padding
+          "group-data-[with-prefix]/text-field:pl-0",
+          // Leading icon + prefix together: compound wins over both singles
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge — remove input's right padding
+          "group-data-[with-suffix]/text-field:pr-0",
+          // Trailing icon + suffix together: compound wins over both singles
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ],
+        /**
+         * Outlined: label sits on the border, no extra top padding needed.
+         * Horizontal padding: 16dp — yielded to prefix/suffix when present.
+         */
+        outlined: [
+          "py-4 px-4",
+          // Leading icon horizontal offset
+          "group-data-[with-leading-icon]/text-field:pl-[52px]",
+          // Trailing icon horizontal offset
+          "group-data-[with-trailing-icon]/text-field:pr-[52px]",
+          // Prefix present: prefix handles left edge
+          "group-data-[with-prefix]/text-field:pl-0",
+          "group-data-[with-leading-icon]/text-field:group-data-[with-prefix]/text-field:pl-0",
+          // Suffix present: suffix handles right edge
+          "group-data-[with-suffix]/text-field:pr-0",
+          "group-data-[with-trailing-icon]/text-field:group-data-[with-suffix]/text-field:pr-0"
+        ]
       },
       multiline: {
-        true: "resize-y",
-        false: ""
+        true: "resize-y min-h-[1.5rem]",
+        false: "h-full"
       }
     },
     defaultVariants: {
       variant: "filled",
-      size: "medium",
-      disabled: false,
-      hasLeadingIcon: false,
-      hasTrailingIcon: false,
       multiline: false
     }
   }
 );
-var textFieldLabelVariants = classVarianceAuthority.cva(
+var textFieldIconVariants = classVarianceAuthority.cva(
   [
-    // Base label styles
-    "absolute left-4 transition-all duration-200 pointer-events-none",
-    "text-on-surface-variant origin-top-left"
+    "absolute z-10 flex items-center justify-center size-6 pointer-events-none",
+    "text-on-surface-variant",
+    // Effects transition
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      variant: {
-        filled: "top-2.5",
-        outlined: "top-2.5 bg-surface px-1"
-      },
-      size: {
-        small: "text-sm",
-        medium: "text-base",
-        large: "text-lg"
-      },
-      floating: {
-        true: "-translate-y-5 scale-75",
-        false: "scale-100"
-      },
-      focused: {
-        true: "text-primary",
-        false: ""
-      },
-      error: {
-        true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "text-on-surface/38",
-        false: ""
-      },
-      hasLeadingIcon: {
-        true: "left-12",
-        false: ""
+      position: {
+        leading: "left-3",
+        trailing: [
+          "right-3",
+          // Trailing → error color when invalid
+          "group-data-[invalid]/text-field:text-error"
+        ]
       }
     },
-    compoundVariants: [
-      // Outlined variant floating label positioning
-      {
-        variant: "outlined",
-        floating: true,
-        className: "top-2.5"
-      }
-    ],
     defaultVariants: {
-      variant: "filled",
-      size: "medium",
-      floating: false,
-      focused: false,
-      error: false,
-      disabled: false,
-      hasLeadingIcon: false
+      position: "leading"
     }
   }
 );
-var textFieldIconVariants = classVarianceAuthority.cva(
+var textFieldAffixVariants = classVarianceAuthority.cva(
   [
-    // Base icon styles
-    "absolute flex items-center justify-center",
-    "text-on-surface-variant transition-colors duration-200",
-    "pointer-events-none"
+    "relative z-10 text-body-large text-on-surface-variant select-none shrink-0",
+    "opacity-0 pointer-events-none",
+    // Visible once label is floated
+    "group-data-[float]/text-field:opacity-100 group-data-[float]/text-field:pointer-events-auto",
+    // Effects transition
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Disabled
+    "group-data-[disabled]/text-field:text-on-surface/38"
   ],
   {
     variants: {
-      position: {
-        leading: "left-3",
-        trailing: "right-3"
-      },
-      size: {
-        small: "w-5 h-5",
-        medium: "w-6 h-6",
-        large: "w-7 h-7"
+      variant: {
+        /**
+         * Filled: mirror the input's pt-6 pb-2 so the text sits in the same
+         * vertical zone. When no label is present, the input uses py-4 — match
+         * that too so the affix stays centred with the input text.
+         */
+        filled: [
+          "pt-6 pb-2",
+          "group-data-[no-label]/text-field:pt-4 group-data-[no-label]/text-field:pb-4"
+        ],
+        /**
+         * Outlined: input uses py-4 and h-full; items-center on the content
+         * column already centres the naturally-sized affix at the same 28px
+         * midpoint as the input text. No extra vertical padding needed.
+         */
+        outlined: []
       },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+      position: {
+        /**
+         * Prefix: sits before the input in the flex row.
+         * pl-4 aligns the left text edge to the 16dp field margin.
+         * With a leading icon that shifts to 52dp to clear the icon.
+         * pr-0.5 is a small gap between prefix text and the input cursor.
+         */
+        prefix: ["pl-4", "group-data-[with-leading-icon]/text-field:pl-[52px]", "pr-0.5"],
+        /**
+         * Suffix: sits after the input in the flex row.
+         * pl-0.5 is a small gap between the input text and the suffix.
+         * pr-4 keeps 16dp from the right field edge.
+         * With a trailing icon that shifts to 52dp to avoid overlap.
+         */
+        suffix: ["pl-0.5", "pr-4", "group-data-[with-trailing-icon]/text-field:pr-[52px]"]
       }
     },
     defaultVariants: {
-      position: "leading",
-      size: "medium",
-      disabled: false
+      variant: "filled",
+      position: "prefix"
     }
   }
 );
-var textFieldHelperTextVariants = classVarianceAuthority.cva(
+var textFieldSupportingRowVariants = classVarianceAuthority.cva([
+  "flex items-start justify-between w-full gap-4 px-4 pt-1"
+]);
+var textFieldSupportingTextVariants = classVarianceAuthority.cva(
   [
-    // Base helper text styles
-    "text-xs mt-1 px-4 transition-colors duration-200"
+    "text-body-small",
+    // Effects transition for color
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       type: {
         description: "text-on-surface-variant",
         error: "text-error"
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
       }
     },
     defaultVariants: {
-      type: "description",
-      disabled: false
+      type: "description"
     }
   }
 );
-var textFieldCharacterCountVariants = classVarianceAuthority.cva(
+var textFieldCounterVariants = classVarianceAuthority.cva(
   [
-    // Base character counter styles
-    "text-xs mt-1 px-4 text-right text-on-surface-variant transition-colors duration-200"
+    "text-body-small shrink-0 text-right",
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
   ],
   {
     variants: {
       exceeded: {
         true: "text-error",
-        false: ""
-      },
-      disabled: {
-        true: "opacity-38",
-        false: ""
+        false: "text-on-surface-variant"
       }
     },
     defaultVariants: {
-      exceeded: false,
-      disabled: false
+      exceeded: false
     }
   }
 );
@@ -2500,12 +2555,13 @@ TextFieldHeadless.displayName = "TextFieldHeadless";
 var TextField = React.forwardRef(
   ({
     variant = "filled",
-    size = "medium",
     label,
     description,
     errorMessage,
     leadingIcon,
     trailingIcon,
+    prefix,
+    suffix,
     characterCount = false,
     maxLength,
     fullWidth = false,
@@ -2525,6 +2581,7 @@ var TextField = React.forwardRef(
     ...props
   }, ref) => {
     const spellCheckProp = spellCheck === void 0 ? void 0 : typeof spellCheck === "string" ? spellCheck === "true" : spellCheck;
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
     const headlessProps = {
       ...label !== void 0 ? { label } : {},
       ...description !== void 0 ? { description } : {},
@@ -2551,149 +2608,131 @@ var TextField = React.forwardRef(
       errorMessageProps,
       isInvalid: fieldIsInvalid,
       isFocused,
+      isFocusVisible,
       currentValue,
       inputRef
     }) => {
       const hasValue = currentValue.length > 0;
-      const shouldFloatLabel = isFocused || hasValue;
+      const hasPlaceholder = !!props.placeholder;
+      const hasPrefix = !!prefix;
+      const hasSuffix = !!suffix;
+      const shouldFloat = isFocused || hasValue || hasPlaceholder || hasPrefix;
       const characterLength = currentValue.length;
       const isCharacterLimitExceeded = maxLength ? characterLength > maxLength : false;
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(textFieldContainerVariants({ fullWidth }), className), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cn(
-              textFieldWrapperVariants({
-                variant,
-                size,
-                disabled: isDisabled,
-                error: fieldIsInvalid,
-                focused: isFocused
-              })
-            ),
-            children: [
+      const hasLeadingIcon = !!leadingIcon;
+      const hasTrailingIcon = !!trailingIcon;
+      const hasLabel = !!label;
+      const showDescription = !!description && !fieldIsInvalid;
+      const showError = fieldIsInvalid && !!errorMessage;
+      const showCounter = characterCount && maxLength !== void 0;
+      const showSupportingRow = showDescription || showError || showCounter;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(textFieldRootVariants({ fullWidth }), "group/text-field", className),
+          ...getInteractionDataAttributes({
+            isHovered,
+            isFocusVisible,
+            isDisabled,
+            isReadOnly,
+            isInvalid: fieldIsInvalid
+          }),
+          "data-focused": isFocused ? "" : void 0,
+          "data-float": shouldFloat ? "" : void 0,
+          "data-with-leading-icon": hasLeadingIcon ? "" : void 0,
+          "data-with-trailing-icon": hasTrailingIcon ? "" : void 0,
+          "data-with-prefix": hasPrefix ? "" : void 0,
+          "data-with-suffix": hasSuffix ? "" : void 0,
+          "data-no-label": !hasLabel ? "" : void 0,
+          "data-multiline": multiline ? "" : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { ...hoverProps, className: cn(textFieldFieldVariants({ variant })), children: [
+              variant === "filled" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(textFieldStateLayerVariants()), "aria-hidden": "true" }),
               leadingIcon && /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
-                  className: textFieldIconVariants({
-                    position: "leading",
-                    size,
-                    disabled: isDisabled
-                  }),
+                  className: cn(textFieldIconVariants({ position: "leading" })),
+                  "aria-hidden": "true",
                   children: leadingIcon
                 }
               ),
-              label && /* @__PURE__ */ jsxRuntime.jsxs(
-                "label",
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [
+                label && /* @__PURE__ */ jsxRuntime.jsxs("label", { ...labelProps, className: cn(textFieldLabelVariants({ variant })), children: [
+                  label,
+                  isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2009*" })
+                ] }),
+                prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "prefix" })), children: prefix }),
+                multiline ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: true })),
+                    rows,
+                    spellCheck: spellCheckProp
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: false })),
+                    spellCheck: spellCheckProp
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "suffix" })), children: suffix })
+              ] }),
+              trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
                 {
-                  ...labelProps,
-                  className: cn(
-                    textFieldLabelVariants({
-                      variant,
-                      size,
-                      floating: shouldFloatLabel,
-                      focused: isFocused,
-                      error: fieldIsInvalid,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon
-                    })
-                  ),
-                  children: [
-                    label,
-                    isRequired && " *"
-                  ]
+                  className: cn(textFieldIconVariants({ position: "trailing" })),
+                  "aria-hidden": "true",
+                  children: trailingIcon
                 }
               ),
-              multiline ? /* @__PURE__ */ jsxRuntime.jsx(
-                "textarea",
-                {
-                  ...inputProps,
-                  ref: inputRef,
-                  className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: true
-                    }),
-                    label && "placeholder:opacity-0"
-                  ),
-                  rows,
-                  spellCheck: spellCheckProp
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
+              variant === "filled" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(textFieldActiveIndicatorVariants()), "aria-hidden": "true" }),
+              variant === "outlined" && /* @__PURE__ */ jsxRuntime.jsx("fieldset", { "aria-hidden": "true", className: cn(textFieldOutlineVariants()), children: /* @__PURE__ */ jsxRuntime.jsx("legend", { className: cn(textFieldNotchVariants()), children: label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                label,
+                isRequired && "\u2009*"
+              ] }) }) })
+            ] }),
+            showSupportingRow && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(textFieldSupportingRowVariants()), children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                showDescription && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    ...descriptionProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "description" })),
+                    children: description
+                  }
+                ),
+                showError && /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    ...errorMessageProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "error" })),
+                    children: errorMessage
+                  }
+                )
+              ] }),
+              showCounter && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
                 {
-                  ...inputProps,
-                  ref: inputRef,
                   className: cn(
-                    textFieldInputVariants({
-                      variant,
-                      size,
-                      disabled: isDisabled,
-                      hasLeadingIcon: !!leadingIcon,
-                      hasTrailingIcon: !!trailingIcon,
-                      multiline: false
-                    }),
-                    label && "placeholder:opacity-0"
-                    // Hide placeholder when there's a value to prevent overlap with floating label
+                    textFieldCounterVariants({ exceeded: isCharacterLimitExceeded })
                   ),
-                  spellCheck: spellCheckProp
-                }
-              ),
-              trailingIcon && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: textFieldIconVariants({
-                    position: "trailing",
-                    size,
-                    disabled: isDisabled
-                  }),
-                  children: trailingIcon
+                  "aria-live": "polite",
+                  children: [
+                    characterLength,
+                    "\u2009/\u2009",
+                    maxLength
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        description && !fieldIsInvalid && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ...descriptionProps,
-            className: textFieldHelperTextVariants({
-              type: "description",
-              disabled: isDisabled
-            }),
-            children: description
-          }
-        ),
-        fieldIsInvalid && errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ...errorMessageProps,
-            className: textFieldHelperTextVariants({
-              type: "error",
-              disabled: isDisabled
-            }),
-            children: errorMessage
-          }
-        ),
-        characterCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: textFieldCharacterCountVariants({
-              exceeded: isCharacterLimitExceeded,
-              disabled: isDisabled
-            }),
-            children: [
-              characterLength,
-              " / ",
-              maxLength
-            ]
-          }
-        )
-      ] });
+            ] })
+          ]
+        }
+      );
     } });
   }
 );
@@ -13204,10 +13243,17 @@ function mapToInputProps(props) {
   const { orientation: _orientation, minuteStep: _minuteStep, ...inputProps } = props;
   return inputProps;
 }
-function CalendarCell({ date: date$1, state }) {
+function CalendarCell({
+  date: date$1,
+  state,
+  className,
+  children
+}) {
   const ref = React.useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
-  const { focusProps, isFocusVisible, isFocused } = reactAria.useFocusRing();
+  const { focusProps, isFocusVisible } = reactAria.useFocusRing();
+  const { hoverProps, isHovered } = reactAria.useHover({ isDisabled: isDisabled || isUnavailable });
+  const { pressProps, isPressed } = reactAria.usePress({ isDisabled: isDisabled || isUnavailable });
   const isCurrentDay = date.isSameDay(date$1, date.today(date.getLocalTimeZone()));
   const isOutsideMonth = date$1.month !== state.visibleRange.start.month || date$1.year !== state.visibleRange.start.year;
   let isRangeStart = false;
@@ -13219,28 +13265,38 @@ function CalendarCell({ date: date$1, state }) {
     isRangeEnd = date.isSameDay(date$1, range.end);
     isRangeMiddle = date$1.compare(range.start) > 0 && date$1.compare(range.end) < 0;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...reactAria.mergeProps(buttonProps, focusProps),
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps, pressProps),
       ref,
+      className,
       "aria-current": isCurrentDay ? "date" : void 0,
-      "data-selected": isSelected || void 0,
-      "data-today": isCurrentDay || void 0,
-      "data-outside-month": isOutsideMonth || void 0,
-      "data-range-start": isRangeStart || void 0,
-      "data-range-end": isRangeEnd || void 0,
-      "data-range-middle": isRangeMiddle || void 0,
-      "data-disabled": isDisabled || void 0,
-      "data-unavailable": isUnavailable || void 0,
-      "data-focused": isFocused || void 0,
-      "data-focus-visible": isFocusVisible || void 0,
-      children: formattedDate
+      "data-selected": isSelected ? "" : void 0,
+      "data-today": isCurrentDay ? "" : void 0,
+      "data-outside-month": isOutsideMonth ? "" : void 0,
+      "data-range-start": isRangeStart ? "" : void 0,
+      "data-range-end": isRangeEnd ? "" : void 0,
+      "data-range-middle": isRangeMiddle ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-unavailable": isUnavailable ? "" : void 0,
+      "data-focus-visible": isFocusVisible ? "" : void 0,
+      "data-hovered": isHovered ? "" : void 0,
+      "data-pressed": isPressed ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: formattedDate }),
+        children
+      ]
     }
   ) });
 }
 CalendarCell.displayName = "CalendarCell";
-function CalendarGrid({ state, firstDayOfWeek }) {
+function CalendarGrid({
+  state,
+  firstDayOfWeek,
+  CellComponent = CalendarCell,
+  WeekdayComponent
+}) {
   const { locale } = reactAria.useLocale();
   const gridOptions = firstDayOfWeek ? { firstDayOfWeek } : {};
   const { gridProps, headerProps, weekDays } = reactAria.useCalendarGrid(gridOptions, state);
@@ -13250,9 +13306,11 @@ function CalendarGrid({ state, firstDayOfWeek }) {
     firstDayOfWeek ?? void 0
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: day }, index)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays.map(
+      (day, index) => WeekdayComponent ? /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: /* @__PURE__ */ jsxRuntime.jsx(WeekdayComponent, { label: day }) }, index) : /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: day }, index)
+    ) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
+      (date, i) => date ? /* @__PURE__ */ jsxRuntime.jsx(CellComponent, { state, date }, i) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
     ) }, weekIndex)) })
   ] });
 }
@@ -13283,12 +13341,32 @@ function ChevronRightIcon() {
 function DropdownArrowIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5z" }) });
 }
-function CalendarHeader({
-  title,
-  prevButtonProps,
-  nextButtonProps,
+function DefaultTitle({ title, onClick, showDropdownIndicator }) {
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "data-calendar-title": true,
+        "aria-label": `${title}, click to select year`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }) });
+}
+function CalendarHeader({
+  title,
+  prevButtonProps,
+  nextButtonProps,
   onTitleClick,
-  showDropdownIndicator = false
+  showDropdownIndicator = false,
+  NavButtonComponent = NavigationButton,
+  TitleComponent = DefaultTitle
 }) {
   const enhancedPrevProps = {
     ...prevButtonProps,
@@ -13299,22 +13377,17 @@ function CalendarHeader({
     "aria-label": "Next month"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-calendar-header": true, children: [
-    onTitleClick ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TitleComponent,
       {
-        type: "button",
+        title,
         onClick: onTitleClick,
-        "data-calendar-title": true,
-        "aria-label": `${title}, click to select year`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }),
-          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {})
-        ]
+        showDropdownIndicator
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-calendar-nav": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, { ...enhancedPrevProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, { ...enhancedNextProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(NavButtonComponent, { ...enhancedPrevProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(NavButtonComponent, { ...enhancedNextProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -13333,7 +13406,8 @@ function YearGrid({
   selectedYear,
   onYearSelect,
   minYear,
-  maxYear
+  maxYear,
+  YearItemComponent
 }) {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const startYear = minYear ?? currentYear - YEAR_RANGE_OFFSET;
@@ -13359,6 +13433,17 @@ function YearGrid({
       },
       children: years.map((year) => {
         const isSelected = year === selectedYear;
+        if (YearItemComponent) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            YearItemComponent,
+            {
+              year,
+              isSelected,
+              onSelect: onYearSelect
+            },
+            year
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -13366,7 +13451,7 @@ function YearGrid({
             role: "gridcell",
             "aria-selected": isSelected,
             "data-year-item": true,
-            "data-selected": isSelected || void 0,
+            "data-selected": isSelected ? "" : void 0,
             ref: isSelected ? selectedRef : void 0,
             onClick: () => onYearSelect(year),
             children: year
@@ -13422,6 +13507,7 @@ function SingleCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader,
@@ -13430,14 +13516,25 @@ function SingleCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsxRuntime.jsx(
+    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13497,6 +13594,7 @@ function RangeCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader,
@@ -13505,14 +13603,25 @@ function RangeCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsxRuntime.jsx(
+    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13530,6 +13639,24 @@ var CalendarCore = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SingleCalendarInner, { ...rest, calendarRef: ref }, "single");
 });
 CalendarCore.displayName = "CalendarCore";
+function HeadlessActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps } = reactAria.useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...buttonProps, ref, type: "button", "data-action": dataAction, children: label });
+}
 function DatePickerActions({
   cancelLabel = "Cancel",
   confirmLabel = "OK",
@@ -13539,37 +13666,38 @@ function DatePickerActions({
   onCancel,
   onConfirm,
   onClear,
-  className
+  className,
+  ButtonComponent = HeadlessActionButton
 }) {
-  const clearRef = React.useRef(null);
-  const cancelRef = React.useRef(null);
-  const confirmRef = React.useRef(null);
-  const { buttonProps: clearButtonProps } = reactAria.useButton(
-    {
-      "aria-label": clearLabel,
-      ...onClear ? { onPress: onClear } : {}
-    },
-    clearRef
-  );
-  const { buttonProps: cancelButtonProps } = reactAria.useButton(
-    {
-      "aria-label": cancelLabel,
-      ...onCancel ? { onPress: onCancel } : {}
-    },
-    cancelRef
-  );
-  const { buttonProps: confirmButtonProps } = reactAria.useButton(
-    {
-      "aria-label": confirmLabel,
-      isDisabled: isConfirmDisabled,
-      ...onConfirm ? { onPress: onConfirm } : {}
-    },
-    confirmRef
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-actions": true, children: [
-    showClear && /* @__PURE__ */ jsxRuntime.jsx("button", { ...clearButtonProps, ref: clearRef, type: "button", "data-action": "clear", children: clearLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { ...cancelButtonProps, ref: cancelRef, type: "button", "data-action": "cancel", children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { ...confirmButtonProps, ref: confirmRef, type: "button", "data-action": "confirm", children: confirmLabel })
+    showClear && /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: clearLabel,
+        "aria-label": clearLabel,
+        onPress: onClear,
+        "data-action": "clear"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: cancelLabel,
+        "aria-label": cancelLabel,
+        onPress: onCancel,
+        "data-action": "cancel"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: confirmLabel,
+        "aria-label": confirmLabel,
+        onPress: onConfirm,
+        isDisabled: isConfirmDisabled,
+        "data-action": "confirm"
+      }
+    )
   ] });
 }
 DatePickerActions.displayName = "DatePickerActions";
@@ -13608,21 +13736,26 @@ function CalendarTriggerIcon() {
 }
 function PopoverContent({
   popoverRef,
-  triggerRef,
+  anchorRef,
   state,
   dialogProps,
   calendarProps,
   cancelLabel,
   confirmLabel,
   onCancel,
-  onConfirm
+  onConfirm,
+  slots,
+  ActionButtonComponent,
+  popoverClassName
 }) {
   const { popoverProps } = reactAria.usePopover(
     {
       popoverRef,
-      triggerRef,
+      triggerRef: anchorRef,
       placement: "bottom start",
-      offset: 4
+      offset: 4,
+      shouldFlip: true,
+      containerPadding: 12
     },
     state
   );
@@ -13636,7 +13769,10 @@ function PopoverContent({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [state]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, children: [
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, className: cn(popoverClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: () => state.close() }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dialogProps, role: "dialog", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13651,7 +13787,8 @@ function PopoverContent({
             ...calendarProps.isReadOnly ? { isReadOnly: calendarProps.isReadOnly } : {},
             ...calendarProps.isDateUnavailable ? { isDateUnavailable: calendarProps.isDateUnavailable } : {}
           },
-          "aria-label": calendarProps["aria-label"] ?? "Calendar"
+          "aria-label": calendarProps["aria-label"] ?? "Calendar",
+          ...slots ? { slots } : {}
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13660,12 +13797,14 @@ function PopoverContent({
           cancelLabel,
           confirmLabel,
           onCancel,
-          onConfirm
+          onConfirm,
+          ...ActionButtonComponent !== void 0 ? { ButtonComponent: ActionButtonComponent } : {}
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: () => state.close() })
   ] });
+  return reactDom.createPortal(content, document.body);
 }
 var DatePickerDocked = React.forwardRef(
   (props, forwardedRef) => {
@@ -13675,11 +13814,15 @@ var DatePickerDocked = React.forwardRef(
       onCancel,
       onConfirm,
       className,
+      popoverClassName,
+      slots,
+      ActionButtonComponent,
       ...datePickerProps
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
     const triggerRef = React.useRef(null);
+    const groupRef = React.useRef(null);
     const popoverRef = React.useRef(null);
     const stateProps = {
       ...datePickerProps.value !== void 0 ? { value: datePickerProps.value } : {},
@@ -13710,7 +13853,14 @@ var DatePickerDocked = React.forwardRef(
       dialogProps,
       calendarProps
     } = reactAria.useDatePicker(stateProps, state, ref);
-    const { buttonProps: iconButtonProps } = reactAria.useButton(triggerButtonAriaProps, triggerRef);
+    const { buttonProps: iconButtonProps, isPressed: isTriggerPressed } = reactAria.useButton(
+      triggerButtonAriaProps,
+      triggerRef
+    );
+    const { isFocusVisible: isTriggerFocusVisible, focusProps: triggerFocusProps } = reactAria.useFocusRing();
+    const { isHovered: isTriggerHovered, hoverProps: triggerHoverProps } = reactAria.useHover({
+      isDisabled: datePickerProps.isDisabled ?? false
+    });
     const valueBeforeOpenRef = React.useRef(null);
     React.useEffect(() => {
       if (state.isOpen) {
@@ -13739,26 +13889,44 @@ var DatePickerDocked = React.forwardRef(
         ref,
         className,
         "data-variant": "docked",
-        "data-open": state.isOpen ?? void 0,
-        "data-disabled": datePickerProps.isDisabled ?? void 0,
+        "data-open": state.isOpen ? "" : void 0,
+        "data-disabled": datePickerProps.isDisabled ? "" : void 0,
         children: [
           datePickerProps.label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, "data-label": true, children: datePickerProps.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, "data-field-group": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, ref: groupRef, "data-field-group": true, children: [
             /* @__PURE__ */ jsxRuntime.jsx(PickerDateField, { fieldProps }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { ...iconButtonProps, ref: triggerRef, type: "button", "data-trigger": true, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTriggerIcon, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ...reactAria.mergeProps(iconButtonProps, triggerFocusProps, triggerHoverProps),
+                ref: triggerRef,
+                type: "button",
+                "data-trigger": true,
+                ...getInteractionDataAttributes({
+                  isHovered: isTriggerHovered,
+                  isFocusVisible: isTriggerFocusVisible,
+                  isPressed: isTriggerPressed,
+                  isDisabled: datePickerProps.isDisabled ?? false
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTriggerIcon, {})
+              }
+            )
           ] }),
           state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(
             PopoverContent,
             {
               popoverRef,
-              triggerRef,
+              anchorRef: groupRef,
               state,
               dialogProps,
               calendarProps,
               cancelLabel,
               confirmLabel,
               onCancel: handleCancel,
-              onConfirm: handleConfirm
+              onConfirm: handleConfirm,
+              ...slots !== void 0 ? { slots } : {},
+              ...ActionButtonComponent !== void 0 ? { ActionButtonComponent } : {},
+              ...popoverClassName !== void 0 ? { popoverClassName } : {}
             }
           )
         ]
@@ -13767,298 +13935,570 @@ var DatePickerDocked = React.forwardRef(
   }
 );
 DatePickerDocked.displayName = "DatePickerDocked";
-var datePickerContainerVariants = classVarianceAuthority.cva(
+var datePickerContainerVariants = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      docked: "w-[360px]",
+      // NOTE: measurement-derived (360dp fixed width); permitted exception
+      modal: [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[360px]"
+        // NOTE: measurement-derived (360dp fixed width); permitted exception
+      ],
+      "modal-input": [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[328px]"
+        // NOTE: measurement-derived (328dp); permitted exception
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "docked"
+  }
+});
+var calendarCellVariants = classVarianceAuthority.cva([
+  // Layout — 48dp circle touch target
+  "relative flex items-center justify-center",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived (48dp touch target); permitted exception
+  "rounded-full",
+  "select-none cursor-pointer",
+  "overflow-hidden",
+  // clips state layer to circle
+  // Typography
+  "text-body-large",
+  // Base text color
+  "text-on-surface",
+  // Effects transition for color changes (not spatial — no overshoot)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Remove default focus outline — handled via calendarCellFocusRingVariants
+  "focus-visible:outline-none",
+  // Carries group scope for child slots
+  "group/calendar-cell",
+  // ── Today (unselected) ────────────────────────────────────────────────────
+  "data-[today]:not([data-selected]):text-primary",
+  "data-[today]:not([data-selected]):border data-[today]:not([data-selected]):border-primary",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Range start/end: half-pill shape (right-flat for start, left-flat for end) ──
+  "data-[range-start]:rounded-r-none",
+  "data-[range-end]:rounded-l-none",
+  // ── Range middle ──────────────────────────────────────────────────────────
+  "data-[range-middle]:bg-secondary-container",
+  "data-[range-middle]:text-on-secondary-container",
+  "data-[range-middle]:rounded-none",
+  // ── Outside month ─────────────────────────────────────────────────────────
+  "data-[outside-month]:not([data-selected]):text-on-surface-variant",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed",
+  // ── Unavailable ───────────────────────────────────────────────────────────
+  "data-[unavailable]:text-on-surface/38 data-[unavailable]:line-through"
+]);
+var calendarCellStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition — spring standard fast (no spatial overshoot)
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer color switches to on-primary
+  "group-data-[selected]/calendar-cell:bg-on-primary",
+  // Range middle → state layer color switches to on-secondary-container
+  "group-data-[range-middle]/calendar-cell:bg-on-secondary-container",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/calendar-cell:opacity-8",
+  "group-data-[focus-visible]/calendar-cell:opacity-10",
+  "group-data-[pressed]/calendar-cell:opacity-10",
+  // No state layer for disabled/unavailable
+  "group-data-[disabled]/calendar-cell:hidden",
+  "group-data-[unavailable]/calendar-cell:hidden"
+]);
+var calendarCellFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/calendar-cell:opacity-100"
+]);
+var calendarHeaderVariants = classVarianceAuthority.cva([
+  "flex items-center justify-between",
+  "px-3 py-2"
+  // NOTE: measurement-derived padding; permitted exception
+]);
+var navButtonVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  // Typography
+  "text-on-surface-variant",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  // Focus outline removed — ring handled by navButtonFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled — self-targeting
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  // Carries group scope
+  "group/nav-button"
+]);
+var navButtonStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/nav-button:opacity-8",
+  "group-data-[focus-visible]/nav-button:opacity-10",
+  "group-data-[pressed]/nav-button:opacity-10",
+  "group-data-[disabled]/nav-button:hidden"
+]);
+var navButtonFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/nav-button:opacity-100"
+]);
+var calendarTitleVariants = classVarianceAuthority.cva([
+  "relative flex items-center gap-0.5",
+  "bg-transparent border-none cursor-pointer",
+  "rounded-full px-2 py-1",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/calendar-title"
+]);
+var calendarTitleTextVariants = classVarianceAuthority.cva([
+  "text-label-large text-on-surface-variant m-0 pointer-events-none"
+]);
+var calendarTitleIconVariants = classVarianceAuthority.cva(["text-on-surface-variant pointer-events-none"]);
+var calendarTitleStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/calendar-title:opacity-8",
+  "group-data-[focus-visible]/calendar-title:opacity-10",
+  "group-data-[pressed]/calendar-title:opacity-10"
+]);
+var yearGridVariants = classVarianceAuthority.cva([
+  "grid grid-cols-3 gap-2",
+  "px-3 py-2",
+  "max-h-[280px] overflow-y-auto",
+  // NOTE: measurement-derived max height; permitted exception
+  "place-items-center"
+]);
+var yearItemVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-[88px] h-[52px]",
+  // NOTE: measurement-derived (88dp×52dp); permitted exception
+  "rounded-full",
+  "cursor-pointer select-none",
+  "overflow-hidden",
+  // Typography
+  "text-body-large",
+  // Reset
+  "bg-transparent border-none",
+  // Focus outline removed — ring handled by yearItemFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/year-item",
+  // ── Unselected (base) ─────────────────────────────────────────────────────
+  "text-on-surface-variant",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var yearItemStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer switches color
+  "group-data-[selected]/year-item:bg-on-primary",
+  // Interaction opacities
+  "group-data-[hovered]/year-item:opacity-8",
+  "group-data-[focus-visible]/year-item:opacity-10",
+  "group-data-[pressed]/year-item:opacity-10",
+  "group-data-[disabled]/year-item:hidden"
+]);
+var yearItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/year-item:opacity-100"
+]);
+var weekdayVariants = classVarianceAuthority.cva([
+  "text-body-small text-on-surface-variant font-normal",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived; permitted exception
+  "flex items-center justify-center",
+  "select-none"
+]);
+var calendarDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant w-full"]);
+var actionRowVariants = classVarianceAuthority.cva([
+  "flex items-center justify-end gap-2",
+  "px-3 py-2",
+  "h-12"
+  // NOTE: measurement-derived (48dp action row height); permitted exception
+]);
+var actionButtonVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "rounded-full px-3 py-2 min-h-[48px]",
+  // NOTE: 48dp min touch; permitted exception
+  // Typography + color
+  "text-label-large text-primary",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/action-button",
+  // Disabled
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var actionButtonStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/action-button:opacity-8",
+  "group-data-[focus-visible]/action-button:opacity-10",
+  "group-data-[pressed]/action-button:opacity-10",
+  "group-data-[disabled]/action-button:hidden"
+]);
+var actionButtonFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/action-button:opacity-100"
+]);
+var modalDialogVariants = classVarianceAuthority.cva(
   [
-    "bg-surface-container-high",
-    "rounded-3xl",
-    // NOTE: shape.extra-large = 28dp; mapped via @theme token
-    "overflow-hidden"
+    "bg-surface-container-high rounded-3xl overflow-hidden",
+    "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "z-50",
+    "max-h-[90vh] overflow-y-auto"
   ],
   {
     variants: {
       variant: {
-        docked: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
         modal: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
+        // NOTE: measurement-derived; permitted exception
         "modal-input": "w-[328px]"
-        // NOTE: measurement-derived value from MD3 spec (328dp); permitted exception
-      }
-    },
-    defaultVariants: {
-      variant: "docked"
-    }
-  }
-);
-var calendarCellVariants = classVarianceAuthority.cva(
-  [
-    "w-[48px]",
-    // NOTE: measurement-derived (48dp touch target); permitted exception
-    "h-[48px]",
-    // NOTE: measurement-derived (48dp); permitted exception
-    "rounded-full",
-    // shape.full = circle
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "relative",
-    "cursor-pointer",
-    "select-none",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      cellType: {
-        default: "text-on-surface",
-        today: "text-primary border border-primary",
-        selected: "bg-primary text-on-primary",
-        "selected-range-middle": "bg-secondary-container text-on-secondary-container rounded-none",
-        "outside-month": "text-on-surface-variant",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: ""
+        // NOTE: measurement-derived; permitted exception
       }
     },
-    compoundVariants: [
-      // Default cell states
-      {
-        cellType: "default",
-        state: "hovered",
-        className: "bg-on-surface/8"
-      },
-      {
-        cellType: "default",
-        state: "focused",
-        className: "bg-on-surface/10 ring-2 ring-on-surface"
-      },
-      {
-        cellType: "default",
-        state: "pressed",
-        className: "bg-on-surface/10"
-      },
-      // Today cell states
-      {
-        cellType: "today",
-        state: "hovered",
-        className: "bg-primary/8"
-      },
-      {
-        cellType: "today",
-        state: "focused",
-        className: "bg-primary/10"
-      },
-      {
-        cellType: "today",
-        state: "pressed",
-        className: "bg-primary/10"
-      },
-      // Selected cell states
-      {
-        cellType: "selected",
-        state: "hovered",
-        className: "bg-primary shadow-sm"
-      },
-      {
-        cellType: "selected",
-        state: "focused",
-        className: "bg-primary shadow-sm"
-      },
-      {
-        cellType: "selected",
-        state: "pressed",
-        className: "bg-primary shadow-sm"
-      },
-      // Range middle states
-      {
-        cellType: "selected-range-middle",
-        state: "hovered",
-        className: "bg-secondary-container/80"
-      },
-      {
-        cellType: "selected-range-middle",
-        state: "focused",
-        className: "bg-secondary-container/80"
-      }
-    ],
     defaultVariants: {
-      cellType: "default",
-      state: "enabled"
+      variant: "modal"
     }
   }
 );
-var datePickerHeaderVariants = classVarianceAuthority.cva(
-  ["px-6", "pt-4", "pb-3"],
+var modalHeaderVariants = classVarianceAuthority.cva([
+  "flex items-start justify-between",
+  "px-6 pt-4 pb-3"
   // NOTE: measurement-derived padding; permitted exception
-  {
-    variants: {
-      variant: {
-        docked: "h-[56px] px-3 flex items-center",
-        // NOTE: measurement-derived (56dp header); permitted exception
-        modal: "h-auto",
-        "modal-input": "h-auto"
-      }
-    },
-    defaultVariants: {
-      variant: "docked"
-    }
-  }
-);
-var datePickerNavVariants = classVarianceAuthority.cva(
-  ["text-on-surface-variant", "flex", "items-center", "gap-1"],
-  {
-    variants: {
-      state: {
-        enabled: "",
-        hovered: "bg-on-surface-variant/8",
-        focused: "bg-on-surface-variant/10",
-        pressed: "bg-on-surface-variant/10",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
+]);
+var headlineVariants = classVarianceAuthority.cva(["text-label-large text-on-surface-variant m-0"]);
+var supportingTextVariants = classVarianceAuthority.cva([
+  "text-headline-large text-on-surface mt-9 m-0"
+  // NOTE: measurement-derived mt; permitted exception
+]);
+var modeToggleVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center",
+  "w-12 h-12 rounded-full",
+  // NOTE: 48dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer self-end",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/mode-toggle"
+]);
+var modeToggleStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/mode-toggle:opacity-8",
+  "group-data-[focus-visible]/mode-toggle:opacity-10",
+  "group-data-[pressed]/mode-toggle:opacity-10"
+]);
+var scrimVariants2 = classVarianceAuthority.cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
+]);
+var dateInputFieldVariants = classVarianceAuthority.cva(["px-6 py-2"]);
+var dateInputFieldGroupVariants = classVarianceAuthority.cva([
+  "flex items-center",
+  "border border-outline rounded-sm",
+  "px-4 py-3",
+  // NOTE: measurement-derived; permitted exception
+  "text-body-large text-on-surface",
+  // Focus state (data-focused on parent wrapper)
+  "peer-data-[focused]:border-2 peer-data-[focused]:border-primary",
+  // Invalid state
+  "peer-data-[invalid]:border-error peer-data-[invalid]:border-2"
+]);
+var dateInputLabelVariants = classVarianceAuthority.cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateInputErrorVariants = classVarianceAuthority.cva(["text-body-small text-error mt-1"]);
+var dockedFieldGroupVariants = classVarianceAuthority.cva([
+  "flex items-center",
+  "border border-outline rounded",
+  "h-14",
+  // NOTE: measurement-derived (56dp); permitted exception
+  "px-3 gap-2",
+  "bg-transparent",
+  // Focus-within: promote to primary 2dp border
+  "focus-within:border-primary focus-within:border-2"
+]);
+var dockedTriggerVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/docked-trigger"
+]);
+var dockedTriggerStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/docked-trigger:opacity-8",
+  "group-data-[focus-visible]/docked-trigger:opacity-10",
+  "group-data-[pressed]/docked-trigger:opacity-10"
+]);
+var popoverVariants = classVarianceAuthority.cva([
+  "bg-surface-container-high rounded-3xl",
+  "shadow-elevation-2 overflow-hidden",
+  "z-50 w-[360px]"
+]);
+var dockedLabelVariants = classVarianceAuthority.cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateFieldVariants = classVarianceAuthority.cva([
+  "flex items-center flex-1",
+  "text-body-large text-on-surface"
+]);
+var dateSegmentPlaceholderVariants = classVarianceAuthority.cva(["text-on-surface-variant"]);
+function StyledCalendarCell({ date, state }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CalendarCell, { date, state, className: cn(calendarCellVariants()), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarCellStateLayerVariants()), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarCellFocusRingVariants()), "aria-hidden": "true" })
+  ] });
+}
+StyledCalendarCell.displayName = "StyledCalendarCell";
+function StyledNavButton({
+  children,
+  isDisabled,
+  onPress,
+  "aria-label": ariaLabel
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton(
+    {
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {}
     },
-    defaultVariants: {
-      state: "enabled"
+    ref
+  );
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      className: cn(navButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(navButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(navButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 flex items-center justify-center", children })
+      ]
     }
-  }
-);
-var yearItemVariants = classVarianceAuthority.cva(
-  [
-    "w-[88px]",
-    // NOTE: measurement-derived (88dp); permitted exception
-    "h-[52px]",
-    // NOTE: measurement-derived (52dp); permitted exception
-    "rounded-full",
-    // pill shape
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "cursor-pointer",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      selected: {
-        true: "bg-primary text-on-primary",
-        false: "text-on-surface-variant"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: "",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
-    },
-    compoundVariants: [
-      {
-        selected: false,
-        state: "hovered",
-        className: "bg-on-surface-variant/8"
-      },
-      {
-        selected: false,
-        state: "focused",
-        className: "bg-on-surface-variant/10"
-      },
-      {
-        selected: true,
-        state: "hovered",
-        className: "bg-primary/90"
-      },
+  );
+}
+StyledNavButton.displayName = "StyledNavButton";
+function StyledCalendarTitle({
+  title,
+  onClick,
+  showDropdownIndicator
+}) {
+  const ref = React.useRef(null);
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { pressProps, isPressed } = reactAria.usePress({});
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        selected: true,
-        state: "focused",
-        className: "bg-primary/90"
+        ...reactAria.mergeProps(focusProps, hoverProps, pressProps),
+        ref,
+        type: "button",
+        className: cn(calendarTitleVariants()),
+        "aria-label": `${title}, click to select year`,
+        onClick,
+        ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarTitleStateLayerVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarTitleIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {}) })
+        ]
       }
-    ],
-    defaultVariants: {
-      selected: false,
-      state: "enabled"
-    }
+    );
   }
-);
-var datePickerDividerVariants = classVarianceAuthority.cva(["border-outline-variant", "border-t", "w-full"]);
-var datePickerActionVariants = classVarianceAuthority.cva([
-  "flex",
-  "items-center",
-  "justify-end",
-  "gap-2",
-  "px-3",
-  "py-2",
-  "h-12"
-  // NOTE: measurement-derived (48dp action row height); permitted exception
-]);
-var datePickerActionButtonVariants = classVarianceAuthority.cva([
-  "text-primary",
-  "text-label-large",
-  "rounded-full",
-  "px-3",
-  "py-2",
-  "transition-colors",
-  "duration-spring-standard-fast-effects",
-  "ease-spring-standard-fast-effects",
-  "hover:bg-primary/8",
-  "focus-visible:bg-primary/10",
-  "active:bg-primary/10"
-]);
-var datePickerWeekdayVariants = classVarianceAuthority.cva([
-  "text-body-small",
-  "text-on-surface",
-  "font-normal",
-  "w-[48px]",
-  // NOTE: measurement-derived (48dp column width); permitted exception
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp row height); permitted exception
-  "text-center"
-]);
-var datePickerRangeIndicatorVariants = classVarianceAuthority.cva([
-  "bg-secondary-container",
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp range indicator height); permitted exception
-  "rounded-none"
-]);
-var datePickerHeadlineVariants = classVarianceAuthority.cva([], {
-  variants: {
-    variant: {
-      docked: "",
-      modal: ["text-headline-small", "text-on-surface"],
-      "modal-input": ["text-headline-small", "text-on-surface"]
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(calendarTitleVariants(), "cursor-default"), children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }) });
+}
+StyledCalendarTitle.displayName = "StyledCalendarTitle";
+calendarHeaderVariants();
+function StyledYearItem({
+  year,
+  isSelected,
+  onSelect
+}) {
+  const ref = React.useRef(null);
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { pressProps, isPressed } = reactAria.usePress({});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(focusProps, hoverProps, pressProps),
+      ref,
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isSelected,
+      className: cn(yearItemVariants()),
+      onClick: () => onSelect(year),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(yearItemStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(yearItemFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: year })
+      ]
+    }
+  );
+}
+StyledYearItem.displayName = "StyledYearItem";
+function StyledWeekday({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(weekdayVariants()), children: label });
+}
+StyledWeekday.displayName = "StyledWeekday";
+function StyledActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      "data-action": dataAction,
+      className: cn(actionButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(actionButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(actionButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: label })
+      ]
     }
-  },
-  defaultVariants: {
-    variant: "modal"
-  }
-});
-var datePickerSupportingTextVariants = classVarianceAuthority.cva([
-  "text-label-large",
-  "text-on-surface-variant"
-]);
-var datePickerScrimVariants = classVarianceAuthority.cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-medium2",
-  "ease-standard"
-]);
-var CALENDAR_STYLES = [
-  // ── Label ─────────────────────────────────────────────────────────────────
+  );
+}
+StyledActionButton.displayName = "StyledActionButton";
+
+// src/components/DatePicker/datePickerStructuralStyles.ts
+var CALENDAR_HEADER_STRUCTURAL = [
+  "[&_[data-calendar-header]]:flex",
+  "[&_[data-calendar-header]]:items-center",
+  "[&_[data-calendar-header]]:justify-between",
+  "[&_[data-calendar-header]]:px-3",
+  "[&_[data-calendar-header]]:py-2",
+  // Nav group
+  "[&_[data-calendar-nav]]:flex",
+  "[&_[data-calendar-nav]]:items-center",
+  "[&_[data-calendar-nav]]:gap-1"
+];
+var CALENDAR_GRID_STRUCTURAL = [
+  // Table resets
+  "[&_table]:border-collapse",
+  // Center the fixed-width table so 7×48px = 336px is equally inset within 360px
+  "[&_table]:mx-auto",
+  "[&_th]:p-0",
+  "[&_td]:p-0"
+];
+var YEAR_GRID_STRUCTURAL = [
+  "[&_[data-year-grid]]:grid",
+  "[&_[data-year-grid]]:grid-cols-3",
+  "[&_[data-year-grid]]:gap-2",
+  "[&_[data-year-grid]]:px-3",
+  "[&_[data-year-grid]]:py-2",
+  "[&_[data-year-grid]]:max-h-[280px]",
+  "[&_[data-year-grid]]:overflow-y-auto",
+  "[&_[data-year-grid]]:place-items-center"
+];
+var DIVIDER_STRUCTURAL = ["[&_hr[data-divider]]:border-outline-variant"];
+var ACTION_ROW_STRUCTURAL = [
+  "[&_[data-actions]]:flex",
+  "[&_[data-actions]]:items-center",
+  "[&_[data-actions]]:justify-end",
+  "[&_[data-actions]]:gap-2",
+  "[&_[data-actions]]:px-3",
+  "[&_[data-actions]]:py-2",
+  "[&_[data-actions]]:h-12"
+];
+var DOCKED_LABEL_STRUCTURAL = [
   "[&_[data-label]]:text-body-small",
   "[&_[data-label]]:text-on-surface-variant",
   "[&_[data-label]]:mb-1",
-  "[&_[data-label]]:block",
-  // ── Field group (outlined text field container) ───────────────────────────
+  "[&_[data-label]]:block"
+];
+var DOCKED_FIELD_STRUCTURAL = [
   "[&_[data-field-group]]:flex",
   "[&_[data-field-group]]:items-center",
   "[&_[data-field-group]]:border",
@@ -14070,15 +14510,16 @@ var CALENDAR_STYLES = [
   "[&_[data-field-group]]:bg-transparent",
   "[&_[data-field-group]:focus-within]:border-primary",
   "[&_[data-field-group]:focus-within]:border-2",
-  // ── Date field segments (inline rendering) ────────────────────────────────
   "[&_[data-field]]:flex",
   "[&_[data-field]]:items-center",
   "[&_[data-field]]:flex-1",
   "[&_[data-field]]:text-body-large",
   "[&_[data-field]]:text-on-surface",
   "[&_[data-segment]]:outline-none",
-  "[&_[data-segment][data-placeholder]]:text-on-surface-variant",
-  // ── Trigger button (calendar icon) ────────────────────────────────────────
+  "[&_[data-segment][data-placeholder]]:text-on-surface-variant"
+];
+var DOCKED_TRIGGER_STRUCTURAL = [
+  "[&_[data-trigger]]:relative",
   "[&_[data-trigger]]:flex",
   "[&_[data-trigger]]:items-center",
   "[&_[data-trigger]]:justify-center",
@@ -14086,178 +14527,109 @@ var CALENDAR_STYLES = [
   "[&_[data-trigger]]:h-10",
   "[&_[data-trigger]]:rounded-full",
   "[&_[data-trigger]]:text-on-surface-variant",
+  "[&_[data-trigger]]:bg-transparent",
+  "[&_[data-trigger]]:border-none",
+  "[&_[data-trigger]]:cursor-pointer",
   "[&_[data-trigger]]:transition-colors",
   "[&_[data-trigger]]:duration-spring-standard-fast-effects",
   "[&_[data-trigger]]:ease-spring-standard-fast-effects",
-  "[&_[data-trigger]:hover]:bg-on-surface/8",
-  // ── Popover ───────────────────────────────────────────────────────────────
-  "[&_[data-popover]]:bg-surface-container-high",
-  "[&_[data-popover]]:rounded-3xl",
-  "[&_[data-popover]]:mt-1",
-  "[&_[data-popover]]:shadow-elevation-2",
-  "[&_[data-popover]]:overflow-hidden",
-  "[&_[data-popover]]:z-50",
-  // ── Calendar header ───────────────────────────────────────────────────────
-  "[&_[data-calendar-header]]:flex",
-  "[&_[data-calendar-header]]:items-center",
-  "[&_[data-calendar-header]]:justify-between",
-  "[&_[data-calendar-header]]:px-3",
-  "[&_[data-calendar-header]]:py-2",
-  // ── Calendar title (month/year label) ─────────────────────────────────────
-  "[&_[data-calendar-title]]:flex",
-  "[&_[data-calendar-title]]:items-center",
-  "[&_[data-calendar-title]]:gap-0.5",
-  "[&_[data-calendar-title]]:bg-transparent",
-  "[&_[data-calendar-title]]:border-none",
-  "[&_[data-calendar-title]]:cursor-pointer",
-  "[&_[data-calendar-title]]:rounded-full",
-  "[&_[data-calendar-title]]:px-2",
-  "[&_[data-calendar-title]]:py-1",
-  "[&_[data-calendar-title]]:transition-colors",
-  "[&_[data-calendar-title]]:duration-spring-standard-fast-effects",
-  "[&_[data-calendar-title]]:ease-spring-standard-fast-effects",
-  "[&_[data-calendar-title]:hover]:bg-on-surface/8",
-  "[&_[data-calendar-title]_h2]:text-label-large",
-  "[&_[data-calendar-title]_h2]:text-on-surface-variant",
-  "[&_[data-calendar-title]_h2]:m-0",
-  "[&_[data-calendar-title]_svg]:text-on-surface-variant",
-  // ── Calendar navigation buttons ───────────────────────────────────────────
-  "[&_[data-calendar-nav]]:flex",
-  "[&_[data-calendar-nav]]:items-center",
-  "[&_[data-calendar-nav]]:gap-1",
-  "[&_[data-nav-button]]:w-10",
-  "[&_[data-nav-button]]:h-10",
-  "[&_[data-nav-button]]:rounded-full",
-  "[&_[data-nav-button]]:flex",
-  "[&_[data-nav-button]]:items-center",
-  "[&_[data-nav-button]]:justify-center",
-  "[&_[data-nav-button]]:text-on-surface-variant",
-  "[&_[data-nav-button]]:bg-transparent",
-  "[&_[data-nav-button]]:border-none",
-  "[&_[data-nav-button]]:transition-colors",
-  "[&_[data-nav-button]]:duration-spring-standard-fast-effects",
-  "[&_[data-nav-button]]:ease-spring-standard-fast-effects",
-  "[&_[data-nav-button]:hover]:bg-on-surface/8",
-  "[&_[data-nav-button]:focus-visible]:bg-on-surface/10",
-  "[&_[data-nav-button]:disabled]:text-on-surface/38",
-  "[&_[data-nav-button]:disabled]:cursor-not-allowed",
-  // ── Cell base ─────────────────────────────────────────────────────────────
-  "[&_td>div]:w-[48px]",
-  "[&_td>div]:h-[48px]",
-  "[&_td>div]:rounded-full",
-  "[&_td>div]:flex",
-  "[&_td>div]:items-center",
-  "[&_td>div]:justify-center",
-  "[&_td>div]:text-body-large",
-  "[&_td>div]:text-on-surface",
-  "[&_td>div]:relative",
-  "[&_td>div]:cursor-pointer",
-  "[&_td>div]:select-none",
-  "[&_td>div]:transition-colors",
-  "[&_td>div]:duration-spring-standard-fast-effects",
-  "[&_td>div]:ease-spring-standard-fast-effects",
-  // ── Today (not selected) ──────────────────────────────────────────────────
-  "[&_td>div[data-today]:not([data-selected])]:text-primary",
-  "[&_td>div[data-today]:not([data-selected])]:border",
-  "[&_td>div[data-today]:not([data-selected])]:border-primary",
-  // ── Selected ──────────────────────────────────────────────────────────────
-  "[&_td>div[data-selected]]:bg-primary",
-  "[&_td>div[data-selected]]:text-on-primary",
-  // ── Range middle ──────────────────────────────────────────────────────────
-  "[&_td>div[data-range-middle]]:bg-secondary-container",
-  "[&_td>div[data-range-middle]]:text-on-secondary-container",
-  "[&_td>div[data-range-middle]]:rounded-none",
-  // ── Outside month ─────────────────────────────────────────────────────────
-  "[&_td>div[data-outside-month]:not([data-selected])]:text-on-surface-variant",
-  // ── Disabled ──────────────────────────────────────────────────────────────
-  "[&_td>div[data-disabled]]:text-on-surface/38",
-  "[&_td>div[data-disabled]]:cursor-not-allowed",
-  // ── Cell hover states ─────────────────────────────────────────────────────
-  "[&_td>div:not([data-selected]):not([data-today]):not([data-disabled]):hover]:bg-on-surface/8",
-  "[&_td>div[data-today]:not([data-selected]):hover]:bg-primary/8",
-  "[&_td>div[data-selected]:hover]:shadow-sm",
-  // ── Cell focus-visible states ─────────────────────────────────────────────
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-2",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-on-surface",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:bg-on-surface/10",
-  "[&_td>div[data-today][data-focus-visible]:not([data-selected])]:bg-primary/10",
-  // ── Weekday labels ────────────────────────────────────────────────────────
-  "[&_th]:text-body-small",
-  "[&_th]:text-on-surface",
-  "[&_th]:font-normal",
-  "[&_th]:w-[48px]",
-  "[&_th]:h-[48px]",
-  // ── Year grid ─────────────────────────────────────────────────────────────
-  "[&_[data-year-grid]]:grid",
-  "[&_[data-year-grid]]:grid-cols-3",
-  "[&_[data-year-grid]]:gap-2",
-  "[&_[data-year-grid]]:px-3",
-  "[&_[data-year-grid]]:py-2",
-  "[&_[data-year-grid]]:max-h-[280px]",
-  "[&_[data-year-grid]]:overflow-y-auto",
-  "[&_[data-year-grid]]:place-items-center",
-  "[&_[data-year-item]]:w-[88px]",
-  "[&_[data-year-item]]:h-[52px]",
-  "[&_[data-year-item]]:rounded-full",
-  "[&_[data-year-item]]:flex",
-  "[&_[data-year-item]]:items-center",
-  "[&_[data-year-item]]:justify-center",
-  "[&_[data-year-item]]:text-body-large",
-  "[&_[data-year-item]]:text-on-surface-variant",
-  "[&_[data-year-item]]:bg-transparent",
-  "[&_[data-year-item]]:border-none",
-  "[&_[data-year-item]]:cursor-pointer",
-  "[&_[data-year-item]]:transition-colors",
-  "[&_[data-year-item]]:duration-spring-standard-fast-effects",
-  "[&_[data-year-item]]:ease-spring-standard-fast-effects",
-  "[&_[data-year-item]:hover]:bg-on-surface/8",
-  "[&_[data-year-item][data-selected]]:bg-primary",
-  "[&_[data-year-item][data-selected]]:text-on-primary",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:min-h-12",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8",
-  "[&_[data-action]:focus-visible]:ring-2",
-  "[&_[data-action]:focus-visible]:ring-primary",
-  "[&_[data-action]:focus-visible]:bg-primary/10"
+  // Hover: 8% overlay via bg tint (acceptable for structural trigger)
+  "[&_[data-trigger][data-hovered]]:bg-on-surface-variant/8",
+  "[&_[data-trigger][data-focus-visible]]:bg-on-surface-variant/10",
+  "[&_[data-trigger][data-focus-visible]]:outline",
+  "[&_[data-trigger][data-focus-visible]]:outline-2",
+  "[&_[data-trigger][data-focus-visible]]:outline-secondary",
+  "[&_[data-trigger][data-disabled]]:text-on-surface/38",
+  "[&_[data-trigger][data-disabled]]:cursor-not-allowed"
+];
+var MODAL_HEADER_STRUCTURAL = [
+  "[&_[data-modal-header]]:px-6",
+  "[&_[data-modal-header]]:pt-4",
+  "[&_[data-modal-header]]:pb-3",
+  "[&_[data-modal-header]]:flex",
+  "[&_[data-modal-header]]:items-start",
+  "[&_[data-modal-header]]:justify-between",
+  "[&_[data-headline]]:text-label-large",
+  "[&_[data-headline]]:text-on-surface-variant",
+  "[&_[data-headline]]:m-0",
+  "[&_[data-supporting-text]]:text-headline-large",
+  "[&_[data-supporting-text]]:text-on-surface",
+  "[&_[data-supporting-text]]:mt-9",
+  "[&_[data-supporting-text]]:m-0"
+];
+var MODAL_INPUT_SUPPORTING_TEXT_STRUCTURAL = [
+  "[&_[data-supporting-text]]:text-headline-large",
+  "[&_[data-supporting-text]]:text-on-surface",
+  "[&_[data-supporting-text]]:mt-4",
+  "[&_[data-supporting-text]]:m-0"
+];
+var MODAL_INPUT_FIELD_STRUCTURAL = [
+  "[&_[data-date-input-field]]:px-6",
+  "[&_[data-date-input-field]]:py-2",
+  "[&_[data-date-input-field]_[data-field]]:flex",
+  "[&_[data-date-input-field]_[data-field]]:items-center",
+  "[&_[data-date-input-field]_[data-field]]:border",
+  "[&_[data-date-input-field]_[data-field]]:border-outline",
+  "[&_[data-date-input-field]_[data-field]]:rounded-sm",
+  "[&_[data-date-input-field]_[data-field]]:px-4",
+  "[&_[data-date-input-field]_[data-field]]:py-3",
+  "[&_[data-date-input-field]_[data-field]]:text-body-large",
+  "[&_[data-date-input-field]_[data-field]]:text-on-surface",
+  "[&_[data-date-input-field]_[data-segment]]:outline-none",
+  "[&_[data-date-input-field]_[data-segment][data-placeholder]]:text-on-surface-variant",
+  "[&_[data-date-input-field][data-focused]_[data-field]]:border-primary",
+  "[&_[data-date-input-field][data-focused]_[data-field]]:border-2",
+  "[&_[data-date-input-field][data-invalid]_[data-field]]:border-error",
+  "[&_[data-date-input-field][data-invalid]_[data-field]]:border-2",
+  "[&_[data-date-input-field]_[data-label]]:text-body-small",
+  "[&_[data-date-input-field]_[data-label]]:text-on-surface-variant",
+  "[&_[data-date-input-field]_[data-label]]:block",
+  "[&_[data-date-input-field]_[data-label]]:mb-1",
+  "[&_[data-date-input-field]_[data-error-message]]:text-body-small",
+  "[&_[data-date-input-field]_[data-error-message]]:text-error",
+  "[&_[data-date-input-field]_[data-error-message]]:mt-1"
+];
+var SHARED_CALENDAR_STRUCTURAL = [
+  ...CALENDAR_HEADER_STRUCTURAL,
+  ...CALENDAR_GRID_STRUCTURAL,
+  ...YEAR_GRID_STRUCTURAL,
+  ...DIVIDER_STRUCTURAL,
+  ...ACTION_ROW_STRUCTURAL
+].join(" ");
+var MODAL_CONTENT_STRUCTURAL = [
+  ...MODAL_HEADER_STRUCTURAL,
+  ...CALENDAR_HEADER_STRUCTURAL,
+  ...CALENDAR_GRID_STRUCTURAL,
+  ...YEAR_GRID_STRUCTURAL,
+  ...DIVIDER_STRUCTURAL,
+  ...ACTION_ROW_STRUCTURAL
 ].join(" ");
-var DOCKED_MOTION_STYLES = [
-  // ── Popover container enter ────────────────────────────────────────────────
-  "[&_[data-popover]]:transition-[transform,opacity]",
-  "[&_[data-popover]]:duration-short3",
-  "[&_[data-popover]]:ease-standard-decelerate",
-  // ── Popover container exit ─────────────────────────────────────────────────
-  "[&_[data-popover][data-exiting]]:duration-short2",
-  "[&_[data-popover][data-exiting]]:ease-standard-accelerate",
-  // ── Calendar month slide ───────────────────────────────────────────────────
-  "[&_table]:transition-transform",
-  "[&_table]:duration-medium1",
-  "[&_table]:ease-emphasized-decelerate",
-  // ── Cell selection animation (scale + background) ──────────────────────────
-  "[&_td>div[data-selected]]:transition-[background-color,transform]",
-  "[&_td>div[data-selected]]:duration-short2",
-  "[&_td>div[data-selected]]:ease-standard",
-  // ── State layer opacity ────────────────────────────────────────────────────
-  "[&_td>div::after]:transition-opacity",
-  "[&_td>div::after]:duration-short1",
-  "[&_td>div::after]:ease-standard"
+var MODAL_INPUT_CONTENT_STRUCTURAL = [
+  ...MODAL_HEADER_STRUCTURAL,
+  ...MODAL_INPUT_SUPPORTING_TEXT_STRUCTURAL,
+  ...MODAL_INPUT_FIELD_STRUCTURAL,
+  ...DIVIDER_STRUCTURAL,
+  ...ACTION_ROW_STRUCTURAL
+].join(" ");
+var DOCKED_ROOT_STRUCTURAL = [
+  ...DOCKED_LABEL_STRUCTURAL,
+  ...DOCKED_FIELD_STRUCTURAL,
+  ...DOCKED_TRIGGER_STRUCTURAL
+].join(" ");
+var DOCKED_POPOVER_PANEL_STRUCTURAL = SHARED_CALENDAR_STRUCTURAL;
+var DOCKED_POPOVER_MOTION = [
+  "transition-[transform,opacity]",
+  "duration-short3",
+  "ease-standard-decelerate",
+  "data-[exiting]:duration-short2",
+  "data-[exiting]:ease-standard-accelerate"
+].join(" ");
+var MODAL_DIALOG_MOTION = [
+  "transition-[transform,opacity]",
+  "duration-medium2",
+  "ease-standard-decelerate",
+  "data-[exiting]:duration-medium1",
+  "data-[exiting]:ease-standard-accelerate"
 ].join(" ");
 var DatePickerDockedStyled = React.forwardRef(
   (props, ref) => {
@@ -14270,10 +14642,22 @@ var DatePickerDockedStyled = React.forwardRef(
         ...rest,
         className: cn(
           datePickerContainerVariants({ variant: "docked" }),
-          CALENDAR_STYLES,
-          !reducedMotion && DOCKED_MOTION_STYLES,
+          DOCKED_ROOT_STRUCTURAL,
           className
-        )
+        ),
+        popoverClassName: cn(
+          popoverVariants(),
+          DOCKED_POPOVER_PANEL_STRUCTURAL,
+          !reducedMotion && DOCKED_POPOVER_MOTION
+        ),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14346,7 +14730,10 @@ var DatePickerModal = React.forwardRef(
       onCancel,
       onConfirm,
       onClear,
-      className
+      className,
+      scrimClassName,
+      slots,
+      ActionButtonComponent
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -14470,6 +14857,7 @@ var DatePickerModal = React.forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14491,7 +14879,8 @@ var DatePickerModal = React.forwardRef(
               onChange: handleSingleChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(
             CalendarCore,
@@ -14503,7 +14892,8 @@ var DatePickerModal = React.forwardRef(
               onRangeChange: handleRangeChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14515,7 +14905,8 @@ var DatePickerModal = React.forwardRef(
               showClear,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              onClear: handleClear
+              onClear: handleClear,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -14533,6 +14924,7 @@ function ModalOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -14553,7 +14945,7 @@ function ModalOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -14571,210 +14963,6 @@ function ModalOverlay({
   ] });
 }
 ModalOverlay.displayName = "ModalOverlay";
-var MODAL_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[360px]",
-  "[&_[data-modal-dialog]]:max-h-[90vh]",
-  "[&_[data-modal-dialog]]:overflow-y-auto",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-9",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Calendar header ───────────────────────────────────────────────────────
-  "[&_[data-calendar-header]]:flex",
-  "[&_[data-calendar-header]]:items-center",
-  "[&_[data-calendar-header]]:justify-between",
-  "[&_[data-calendar-header]]:px-3",
-  "[&_[data-calendar-header]]:py-2",
-  "[&_[data-calendar-title]]:flex",
-  "[&_[data-calendar-title]]:items-center",
-  "[&_[data-calendar-title]]:gap-0.5",
-  "[&_[data-calendar-title]]:bg-transparent",
-  "[&_[data-calendar-title]]:border-none",
-  "[&_[data-calendar-title]]:cursor-pointer",
-  "[&_[data-calendar-title]]:rounded-full",
-  "[&_[data-calendar-title]]:px-2",
-  "[&_[data-calendar-title]]:py-1",
-  "[&_[data-calendar-title]]:transition-colors",
-  "[&_[data-calendar-title]]:duration-spring-standard-fast-effects",
-  "[&_[data-calendar-title]]:ease-spring-standard-fast-effects",
-  "[&_[data-calendar-title]:hover]:bg-on-surface/8",
-  "[&_[data-calendar-title]_h2]:text-label-large",
-  "[&_[data-calendar-title]_h2]:text-on-surface-variant",
-  "[&_[data-calendar-title]_h2]:m-0",
-  "[&_[data-calendar-title]_svg]:text-on-surface-variant",
-  "[&_[data-calendar-nav]]:flex",
-  "[&_[data-calendar-nav]]:items-center",
-  "[&_[data-calendar-nav]]:gap-1",
-  "[&_[data-nav-button]]:w-10",
-  "[&_[data-nav-button]]:h-10",
-  "[&_[data-nav-button]]:rounded-full",
-  "[&_[data-nav-button]]:flex",
-  "[&_[data-nav-button]]:items-center",
-  "[&_[data-nav-button]]:justify-center",
-  "[&_[data-nav-button]]:text-on-surface-variant",
-  "[&_[data-nav-button]]:bg-transparent",
-  "[&_[data-nav-button]]:border-none",
-  "[&_[data-nav-button]]:transition-colors",
-  "[&_[data-nav-button]]:duration-spring-standard-fast-effects",
-  "[&_[data-nav-button]]:ease-spring-standard-fast-effects",
-  "[&_[data-nav-button]:hover]:bg-on-surface/8",
-  "[&_[data-nav-button]:focus-visible]:bg-on-surface/10",
-  "[&_[data-nav-button]:disabled]:text-on-surface/38",
-  "[&_[data-nav-button]:disabled]:cursor-not-allowed",
-  // ── Calendar cells ────────────────────────────────────────────────────────
-  "[&_td>div]:w-[48px]",
-  "[&_td>div]:h-[48px]",
-  "[&_td>div]:rounded-full",
-  "[&_td>div]:flex",
-  "[&_td>div]:items-center",
-  "[&_td>div]:justify-center",
-  "[&_td>div]:text-body-large",
-  "[&_td>div]:text-on-surface",
-  "[&_td>div]:relative",
-  "[&_td>div]:cursor-pointer",
-  "[&_td>div]:select-none",
-  "[&_td>div]:transition-colors",
-  "[&_td>div]:duration-spring-standard-fast-effects",
-  "[&_td>div]:ease-spring-standard-fast-effects",
-  "[&_td>div[data-today]:not([data-selected])]:text-primary",
-  "[&_td>div[data-today]:not([data-selected])]:border",
-  "[&_td>div[data-today]:not([data-selected])]:border-primary",
-  "[&_td>div[data-selected]]:bg-primary",
-  "[&_td>div[data-selected]]:text-on-primary",
-  "[&_td>div[data-range-middle]]:bg-secondary-container",
-  "[&_td>div[data-range-middle]]:text-on-secondary-container",
-  "[&_td>div[data-range-middle]]:rounded-none",
-  "[&_td>div[data-outside-month]:not([data-selected])]:text-on-surface-variant",
-  "[&_td>div[data-disabled]]:text-on-surface/38",
-  "[&_td>div[data-disabled]]:cursor-not-allowed",
-  "[&_td>div:not([data-selected]):not([data-today]):not([data-disabled]):hover]:bg-on-surface/8",
-  "[&_td>div[data-today]:not([data-selected]):hover]:bg-primary/8",
-  "[&_td>div[data-selected]:hover]:shadow-sm",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-2",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-on-surface",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:bg-on-surface/10",
-  "[&_td>div[data-today][data-focus-visible]:not([data-selected])]:bg-primary/10",
-  // ── Weekday labels ────────────────────────────────────────────────────────
-  "[&_th]:text-body-small",
-  "[&_th]:text-on-surface",
-  "[&_th]:font-normal",
-  "[&_th]:w-[48px]",
-  "[&_th]:h-[48px]",
-  // ── Year grid ─────────────────────────────────────────────────────────────
-  "[&_[data-year-grid]]:grid",
-  "[&_[data-year-grid]]:grid-cols-3",
-  "[&_[data-year-grid]]:gap-2",
-  "[&_[data-year-grid]]:px-3",
-  "[&_[data-year-grid]]:py-2",
-  "[&_[data-year-grid]]:max-h-[280px]",
-  "[&_[data-year-grid]]:overflow-y-auto",
-  "[&_[data-year-grid]]:place-items-center",
-  "[&_[data-year-item]]:w-[88px]",
-  "[&_[data-year-item]]:h-[52px]",
-  "[&_[data-year-item]]:rounded-full",
-  "[&_[data-year-item]]:flex",
-  "[&_[data-year-item]]:items-center",
-  "[&_[data-year-item]]:justify-center",
-  "[&_[data-year-item]]:text-body-large",
-  "[&_[data-year-item]]:text-on-surface-variant",
-  "[&_[data-year-item]]:bg-transparent",
-  "[&_[data-year-item]]:border-none",
-  "[&_[data-year-item]]:cursor-pointer",
-  "[&_[data-year-item]]:transition-colors",
-  "[&_[data-year-item]]:duration-spring-standard-fast-effects",
-  "[&_[data-year-item]]:ease-spring-standard-fast-effects",
-  "[&_[data-year-item]:hover]:bg-on-surface/8",
-  "[&_[data-year-item][data-selected]]:bg-primary",
-  "[&_[data-year-item][data-selected]]:text-on-primary",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:min-h-12",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8",
-  "[&_[data-action]:focus-visible]:ring-2",
-  "[&_[data-action]:focus-visible]:ring-primary",
-  "[&_[data-action]:focus-visible]:bg-primary/10"
-].join(" ");
-var MODAL_MOTION_STYLES = [
-  // ── Modal container enter ──────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:transition-[transform,opacity]",
-  "[&_[data-modal-dialog]]:duration-medium2",
-  "[&_[data-modal-dialog]]:ease-standard-decelerate",
-  // ── Modal container exit ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog][data-exiting]]:duration-medium1",
-  "[&_[data-modal-dialog][data-exiting]]:ease-standard-accelerate",
-  // ── Calendar month slide ───────────────────────────────────────────────────
-  "[&_table]:transition-transform",
-  "[&_table]:duration-medium1",
-  "[&_table]:ease-emphasized-decelerate",
-  // ── Cell selection animation (scale + background) ──────────────────────────
-  "[&_td>div[data-selected]]:transition-[background-color,transform]",
-  "[&_td>div[data-selected]]:duration-short2",
-  "[&_td>div[data-selected]]:ease-standard",
-  // ── State layer opacity ────────────────────────────────────────────────────
-  "[&_td>div::after]:transition-opacity",
-  "[&_td>div::after]:duration-short1",
-  "[&_td>div::after]:ease-standard"
-].join(" ");
 var DatePickerModalStyled = React.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -14785,11 +14973,20 @@ var DatePickerModalStyled = React.forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal" }),
-          MODAL_STYLES,
-          !reducedMotion && MODAL_MOTION_STYLES,
+          modalDialogVariants({ variant: "modal" }),
+          MODAL_CONTENT_STRUCTURAL,
+          !reducedMotion && MODAL_DIALOG_MOTION,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14936,7 +15133,9 @@ var DatePickerModalInput = React.forwardRef(
       onCancel,
       onConfirm,
       onModeToggle,
-      className
+      className,
+      scrimClassName,
+      ActionButtonComponent
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -15095,6 +15294,7 @@ var DatePickerModalInput = React.forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -15157,7 +15357,8 @@ var DatePickerModalInput = React.forwardRef(
               confirmLabel,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              isConfirmDisabled: !isFormValid
+              isConfirmDisabled: !isFormValid,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -15175,6 +15376,7 @@ function ModalInputOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -15195,7 +15397,7 @@ function ModalInputOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -15213,98 +15415,6 @@ function ModalInputOverlay({
   ] });
 }
 ModalInputOverlay.displayName = "ModalInputOverlay";
-var MODAL_INPUT_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[328px]",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-4",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Date input fields ─────────────────────────────────────────────────────
-  "[&_[data-date-input-field]]:px-6",
-  "[&_[data-date-input-field]]:py-2",
-  "[&_[data-date-input-field]_[data-field]]:flex",
-  "[&_[data-date-input-field]_[data-field]]:items-center",
-  "[&_[data-date-input-field]_[data-field]]:border",
-  "[&_[data-date-input-field]_[data-field]]:border-outline",
-  "[&_[data-date-input-field]_[data-field]]:rounded-sm",
-  "[&_[data-date-input-field]_[data-field]]:px-4",
-  "[&_[data-date-input-field]_[data-field]]:py-3",
-  "[&_[data-date-input-field]_[data-field]]:text-body-large",
-  "[&_[data-date-input-field]_[data-field]]:text-on-surface",
-  "[&_[data-date-input-field]_[data-segment]]:outline-none",
-  "[&_[data-date-input-field]_[data-segment][data-placeholder]]:text-on-surface-variant",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-primary",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-2",
-  "[&_[data-date-input-field][data-invalid]_[data-field]]:border-error",
-  "[&_[data-date-input-field]_[data-label]]:text-body-small",
-  "[&_[data-date-input-field]_[data-label]]:text-on-surface-variant",
-  "[&_[data-date-input-field]_[data-error-message]]:text-body-small",
-  "[&_[data-date-input-field]_[data-error-message]]:text-error",
-  "[&_[data-date-input-field]_[data-error-message]]:mt-1",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8"
-].join(" ");
 var DatePickerModalInputStyled = React.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -15314,10 +15424,12 @@ var DatePickerModalInputStyled = React.forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal-input" }),
-          MODAL_INPUT_STYLES,
+          modalDialogVariants({ variant: "modal-input" }),
+          MODAL_INPUT_CONTENT_STRUCTURAL,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -15533,6 +15645,12 @@ exports.SnackbarHeadless = SnackbarHeadless;
 exports.SnackbarProvider = SnackbarProvider;
 exports.SplitButton = SplitButton;
 exports.SplitButtonHeadless = SplitButtonHeadless;
+exports.StyledActionButton = StyledActionButton;
+exports.StyledCalendarCell = StyledCalendarCell;
+exports.StyledCalendarTitle = StyledCalendarTitle;
+exports.StyledNavButton = StyledNavButton;
+exports.StyledWeekday = StyledWeekday;
+exports.StyledYearItem = StyledYearItem;
 exports.Switch = Switch;
 exports.TYPOGRAPHY_ELEMENT_MAP = TYPOGRAPHY_ELEMENT_MAP;
 exports.TYPOGRAPHY_USAGE = TYPOGRAPHY_USAGE;
@@ -15548,6 +15666,10 @@ exports.Tooltip = Tooltip;
 exports.TooltipOverlayHeadless = TooltipOverlayHeadless;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TooltipTriggerHeadless = TooltipTriggerHeadless;
+exports.actionButtonFocusRingVariants = actionButtonFocusRingVariants;
+exports.actionButtonStateLayerVariants = actionButtonStateLayerVariants;
+exports.actionButtonVariants = actionButtonVariants;
+exports.actionRowVariants = actionRowVariants;
 exports.applyStateLayer = applyStateLayer;
 exports.badgeVariants = badgeVariants2;
 exports.bottomSheetAnimationVariants = bottomSheetAnimationVariants;
@@ -15558,7 +15680,15 @@ exports.bottomSheetVariants = bottomSheetVariants;
 exports.buttonGroupFocusRingVariants = buttonGroupFocusRingVariants;
 exports.buttonGroupRootVariants = buttonGroupRootVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
+exports.calendarCellFocusRingVariants = calendarCellFocusRingVariants;
+exports.calendarCellStateLayerVariants = calendarCellStateLayerVariants;
 exports.calendarCellVariants = calendarCellVariants;
+exports.calendarDividerVariants = calendarDividerVariants;
+exports.calendarHeaderVariants = calendarHeaderVariants;
+exports.calendarTitleIconVariants = calendarTitleIconVariants;
+exports.calendarTitleStateLayerVariants = calendarTitleStateLayerVariants;
+exports.calendarTitleTextVariants = calendarTitleTextVariants;
+exports.calendarTitleVariants = calendarTitleVariants;
 exports.cardVariants = cardVariants;
 exports.chipVariants = chipVariants;
 exports.clockDialContainerVariants = clockDialContainerVariants;
@@ -15567,18 +15697,18 @@ exports.clockHandCenterVariants = clockHandCenterVariants;
 exports.clockHandHandleVariants = clockHandHandleVariants;
 exports.clockHandTrackVariants = clockHandTrackVariants;
 exports.cn = cn;
-exports.datePickerActionButtonVariants = datePickerActionButtonVariants;
-exports.datePickerActionVariants = datePickerActionVariants;
+exports.dateFieldVariants = dateFieldVariants;
+exports.dateInputErrorVariants = dateInputErrorVariants;
+exports.dateInputFieldGroupVariants = dateInputFieldGroupVariants;
+exports.dateInputFieldVariants = dateInputFieldVariants;
+exports.dateInputLabelVariants = dateInputLabelVariants;
 exports.datePickerContainerVariants = datePickerContainerVariants;
-exports.datePickerDividerVariants = datePickerDividerVariants;
-exports.datePickerHeaderVariants = datePickerHeaderVariants;
-exports.datePickerHeadlineVariants = datePickerHeadlineVariants;
-exports.datePickerNavVariants = datePickerNavVariants;
-exports.datePickerRangeIndicatorVariants = datePickerRangeIndicatorVariants;
-exports.datePickerScrimVariants = datePickerScrimVariants;
-exports.datePickerSupportingTextVariants = datePickerSupportingTextVariants;
-exports.datePickerWeekdayVariants = datePickerWeekdayVariants;
+exports.dateSegmentPlaceholderVariants = dateSegmentPlaceholderVariants;
 exports.dividerVariants = dividerVariants;
+exports.dockedFieldGroupVariants = dockedFieldGroupVariants;
+exports.dockedLabelVariants = dockedLabelVariants;
+exports.dockedTriggerStateLayerVariants = dockedTriggerStateLayerVariants;
+exports.dockedTriggerVariants = dockedTriggerVariants;
 exports.fabMenuItemFocusRingVariants = fabMenuItemFocusRingVariants;
 exports.fabMenuItemIconVariants = fabMenuItemIconVariants;
 exports.fabMenuItemLabelVariants = fabMenuItemLabelVariants;
@@ -15596,15 +15726,25 @@ exports.getTypographyClassName = getTypographyClassName;
 exports.getTypographyForElement = getTypographyForElement;
 exports.getTypographyStyle = getTypographyStyle;
 exports.getTypographyToken = getTypographyToken;
+exports.headlineVariants = headlineVariants;
 exports.hexToRgb = hexToRgb;
 exports.listItemVariants = listItemVariants;
 exports.listVariants = listVariants;
+exports.modalDialogVariants = modalDialogVariants;
+exports.modalHeaderVariants = modalHeaderVariants;
+exports.modeToggleStateLayerVariants = modeToggleStateLayerVariants;
+exports.modeToggleVariants = modeToggleVariants;
+exports.navButtonFocusRingVariants = navButtonFocusRingVariants;
+exports.navButtonStateLayerVariants = navButtonStateLayerVariants;
+exports.navButtonVariants = navButtonVariants;
 exports.periodSelectorContainerVariants = periodSelectorContainerVariants;
 exports.periodSelectorItemVariants = periodSelectorItemVariants;
+exports.popoverVariants = popoverVariants;
 exports.pxToRem = pxToRem;
 exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
 exports.richTooltipVariants = richTooltipVariants;
+exports.scrimVariants = scrimVariants2;
 exports.searchBarVariants = searchBarVariants;
 exports.searchViewHeaderVariants = searchViewHeaderVariants;
 exports.searchViewVariants = searchViewVariants;
@@ -15618,6 +15758,7 @@ exports.splitButtonContainerVariants = splitButtonContainerVariants;
 exports.splitButtonDropdownVariants = splitButtonDropdownVariants;
 exports.splitButtonPrimaryVariants = splitButtonPrimaryVariants;
 exports.splitButtonVariants = splitButtonVariants;
+exports.supportingTextVariants = supportingTextVariants;
 exports.timeInputFieldVariants = timeInputFieldVariants;
 exports.timePickerActionButtonVariants = timePickerActionButtonVariants;
 exports.timePickerActionRowVariants = timePickerActionRowVariants;
@@ -15636,7 +15777,11 @@ exports.useFABMenuContext = useFABMenuContext;
 exports.useMenuContext = useMenuContext;
 exports.useOptionalButtonGroup = useOptionalButtonGroup;
 exports.useSnackbar = useSnackbar;
+exports.weekdayVariants = weekdayVariants;
 exports.withOpacity = withOpacity;
+exports.yearGridVariants = yearGridVariants;
+exports.yearItemFocusRingVariants = yearItemFocusRingVariants;
+exports.yearItemStateLayerVariants = yearItemStateLayerVariants;
 exports.yearItemVariants = yearItemVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map