@tinybigui/react 0.12.0 → 0.14.0

package/dist/index.js

@@ -5,7 +5,7 @@ export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import React, { forwardRef, useRef, createContext, useState, useCallback, useId, useMemo, useEffect, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
+import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState, useListState, useSearchFieldState, useMenuTriggerState, useSliderState, useDatePickerState, useDateFieldState, useRangeCalendarState, useCalendarState, useTooltipTriggerState } from 'react-stately';
 import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
@@ -2113,277 +2113,332 @@ var FAB = forwardRef(
   }
 );
 FAB.displayName = "FAB";
-var textFieldContainerVariants = cva(
+var textFieldRootVariants = cva(["relative inline-flex flex-col"], {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "w-auto"
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+var textFieldFieldVariants = 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 = cva(
+var textFieldStateLayerVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva(
+var textFieldIconVariants = 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 = cva(
+var textFieldAffixVariants = 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 = cva(
+var textFieldSupportingRowVariants = cva([
+  "flex items-start justify-between w-full gap-4 px-4 pt-1"
+]);
+var textFieldSupportingTextVariants = 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 = cva(
+var textFieldCounterVariants = 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
     }
   }
 );
@@ -2495,12 +2550,13 @@ TextFieldHeadless.displayName = "TextFieldHeadless";
 var TextField = forwardRef(
   ({
     variant = "filled",
-    size = "medium",
     label,
     description,
     errorMessage,
     leadingIcon,
     trailingIcon,
+    prefix,
+    suffix,
     characterCount = false,
     maxLength,
     fullWidth = false,
@@ -2520,6 +2576,7 @@ var TextField = forwardRef(
     ...props
   }, ref) => {
     const spellCheckProp = spellCheck === void 0 ? void 0 : typeof spellCheck === "string" ? spellCheck === "true" : spellCheck;
+    const { isHovered, hoverProps } = useHover({ isDisabled });
     const headlessProps = {
       ...label !== void 0 ? { label } : {},
       ...description !== void 0 ? { description } : {},
@@ -2546,149 +2603,131 @@ var TextField = 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__ */ jsxs("div", { className: cn(textFieldContainerVariants({ fullWidth }), className), children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { ...hoverProps, className: cn(textFieldFieldVariants({ variant })), children: [
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldStateLayerVariants()), "aria-hidden": "true" }),
               leadingIcon && /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: textFieldIconVariants({
-                    position: "leading",
-                    size,
-                    disabled: isDisabled
-                  }),
+                  className: cn(textFieldIconVariants({ position: "leading" })),
+                  "aria-hidden": "true",
                   children: leadingIcon
                 }
               ),
-              label && /* @__PURE__ */ jsxs(
-                "label",
+              /* @__PURE__ */ jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [
+                label && /* @__PURE__ */ jsxs("label", { ...labelProps, className: cn(textFieldLabelVariants({ variant })), children: [
+                  label,
+                  isRequired && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2009*" })
+                ] }),
+                prefix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "prefix" })), children: prefix }),
+                multiline ? /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: true })),
+                    rows,
+                    spellCheck: spellCheckProp
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...inputProps,
+                    ref: inputRef,
+                    className: cn(textFieldInputVariants({ variant, multiline: false })),
+                    spellCheck: spellCheckProp
+                  }
+                ),
+                suffix && /* @__PURE__ */ jsx("span", { className: cn(textFieldAffixVariants({ variant, position: "suffix" })), children: suffix })
+              ] }),
+              trailingIcon && /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                "input",
+              variant === "filled" && /* @__PURE__ */ jsx("span", { className: cn(textFieldActiveIndicatorVariants()), "aria-hidden": "true" }),
+              variant === "outlined" && /* @__PURE__ */ jsx("fieldset", { "aria-hidden": "true", className: cn(textFieldOutlineVariants()), children: /* @__PURE__ */ jsx("legend", { className: cn(textFieldNotchVariants()), children: label && /* @__PURE__ */ jsxs("span", { children: [
+                label,
+                isRequired && "\u2009*"
+              ] }) }) })
+            ] }),
+            showSupportingRow && /* @__PURE__ */ jsxs("div", { className: cn(textFieldSupportingRowVariants()), children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                showDescription && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...descriptionProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "description" })),
+                    children: description
+                  }
+                ),
+                showError && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    ...errorMessageProps,
+                    className: cn(textFieldSupportingTextVariants({ type: "error" })),
+                    children: errorMessage
+                  }
+                )
+              ] }),
+              showCounter && /* @__PURE__ */ 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__ */ jsx(
-                "span",
-                {
-                  className: textFieldIconVariants({
-                    position: "trailing",
-                    size,
-                    disabled: isDisabled
-                  }),
-                  children: trailingIcon
+                  "aria-live": "polite",
+                  children: [
+                    characterLength,
+                    "\u2009/\u2009",
+                    maxLength
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        description && !fieldIsInvalid && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...descriptionProps,
-            className: textFieldHelperTextVariants({
-              type: "description",
-              disabled: isDisabled
-            }),
-            children: description
-          }
-        ),
-        fieldIsInvalid && errorMessage && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ...errorMessageProps,
-            className: textFieldHelperTextVariants({
-              type: "error",
-              disabled: isDisabled
-            }),
-            children: errorMessage
-          }
-        ),
-        characterCount && maxLength && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: textFieldCharacterCountVariants({
-              exceeded: isCharacterLimitExceeded,
-              disabled: isDisabled
-            }),
-            children: [
-              characterLength,
-              " / ",
-              maxLength
-            ]
-          }
-        )
-      ] });
+            ] })
+          ]
+        }
+      );
     } });
   }
 );
@@ -13199,10 +13238,17 @@ function mapToInputProps(props) {
   const { orientation: _orientation, minuteStep: _minuteStep, ...inputProps } = props;
   return inputProps;
 }
-function CalendarCell({ date, state }) {
+function CalendarCell({
+  date,
+  state,
+  className,
+  children
+}) {
   const ref = useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable, formattedDate } = useCalendarCell({ date }, state, ref);
-  const { focusProps, isFocusVisible, isFocused } = useFocusRing();
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { hoverProps, isHovered } = useHover({ isDisabled: isDisabled || isUnavailable });
+  const { pressProps, isPressed } = usePress({ isDisabled: isDisabled || isUnavailable });
   const isCurrentDay = isSameDay(date, today(getLocalTimeZone()));
   const isOutsideMonth = date.month !== state.visibleRange.start.month || date.year !== state.visibleRange.start.year;
   let isRangeStart = false;
@@ -13214,28 +13260,38 @@ function CalendarCell({ date, state }) {
     isRangeEnd = isSameDay(date, range.end);
     isRangeMiddle = date.compare(range.start) > 0 && date.compare(range.end) < 0;
   }
-  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      ...mergeProps$1(buttonProps, focusProps),
+      ...mergeProps$1(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__ */ 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 } = useLocale();
   const gridOptions = firstDayOfWeek ? { firstDayOfWeek } : {};
   const { gridProps, headerProps, weekDays } = useCalendarGrid(gridOptions, state);
@@ -13245,9 +13301,11 @@ function CalendarGrid({ state, firstDayOfWeek }) {
     firstDayOfWeek ?? void 0
   );
   return /* @__PURE__ */ jsxs("table", { ...gridProps, children: [
-    /* @__PURE__ */ jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { role: "columnheader", children: day }, index)) }) }),
+    /* @__PURE__ */ jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map(
+      (day, index) => WeekdayComponent ? /* @__PURE__ */ jsx("th", { role: "columnheader", children: /* @__PURE__ */ jsx(WeekdayComponent, { label: day }) }, index) : /* @__PURE__ */ jsx("th", { role: "columnheader", children: day }, index)
+    ) }) }),
     /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+      (date, i) => date ? /* @__PURE__ */ jsx(CellComponent, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
     ) }, weekIndex)) })
   ] });
 }
@@ -13278,12 +13336,32 @@ function ChevronRightIcon() {
 function DropdownArrowIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5z" }) });
 }
-function CalendarHeader({
-  title,
-  prevButtonProps,
-  nextButtonProps,
+function DefaultTitle({ title, onClick, showDropdownIndicator }) {
+  if (onClick) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "data-calendar-title": true,
+        "aria-label": `${title}, click to select year`,
+        children: [
+          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsx(DropdownArrowIcon, {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }) });
+}
+function CalendarHeader({
+  title,
+  prevButtonProps,
+  nextButtonProps,
   onTitleClick,
-  showDropdownIndicator = false
+  showDropdownIndicator = false,
+  NavButtonComponent = NavigationButton,
+  TitleComponent = DefaultTitle
 }) {
   const enhancedPrevProps = {
     ...prevButtonProps,
@@ -13294,22 +13372,17 @@ function CalendarHeader({
     "aria-label": "Next month"
   };
   return /* @__PURE__ */ jsxs("div", { "data-calendar-header": true, children: [
-    onTitleClick ? /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      TitleComponent,
       {
-        type: "button",
+        title,
         onClick: onTitleClick,
-        "data-calendar-title": true,
-        "aria-label": `${title}, click to select year`,
-        children: [
-          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }),
-          showDropdownIndicator && /* @__PURE__ */ jsx(DropdownArrowIcon, {})
-        ]
+        showDropdownIndicator
       }
-    ) : /* @__PURE__ */ jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }) }),
+    ),
     /* @__PURE__ */ jsxs("div", { "data-calendar-nav": true, children: [
-      /* @__PURE__ */ jsx(NavigationButton, { ...enhancedPrevProps, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ jsx(NavigationButton, { ...enhancedNextProps, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsx(NavButtonComponent, { ...enhancedPrevProps, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsx(NavButtonComponent, { ...enhancedNextProps, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -13328,7 +13401,8 @@ function YearGrid({
   selectedYear,
   onYearSelect,
   minYear,
-  maxYear
+  maxYear,
+  YearItemComponent
 }) {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const startYear = minYear ?? currentYear - YEAR_RANGE_OFFSET;
@@ -13354,6 +13428,17 @@ function YearGrid({
       },
       children: years.map((year) => {
         const isSelected = year === selectedYear;
+        if (YearItemComponent) {
+          return /* @__PURE__ */ jsx(
+            YearItemComponent,
+            {
+              year,
+              isSelected,
+              onSelect: onYearSelect
+            },
+            year
+          );
+        }
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -13361,7 +13446,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
@@ -13417,6 +13502,7 @@ function SingleCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsx(
       CalendarHeader,
@@ -13425,14 +13511,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__ */ jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsx(
+    currentView === "day" ? /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ 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 } : {}
       }
@@ -13492,6 +13589,7 @@ function RangeCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsx(
       CalendarHeader,
@@ -13500,14 +13598,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__ */ jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsx(
+    currentView === "day" ? /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ 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 } : {}
       }
@@ -13525,6 +13634,24 @@ var CalendarCore = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(SingleCalendarInner, { ...rest, calendarRef: ref }, "single");
 });
 CalendarCore.displayName = "CalendarCore";
+function HeadlessActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx("button", { ...buttonProps, ref, type: "button", "data-action": dataAction, children: label });
+}
 function DatePickerActions({
   cancelLabel = "Cancel",
   confirmLabel = "OK",
@@ -13534,37 +13661,38 @@ function DatePickerActions({
   onCancel,
   onConfirm,
   onClear,
-  className
+  className,
+  ButtonComponent = HeadlessActionButton
 }) {
-  const clearRef = useRef(null);
-  const cancelRef = useRef(null);
-  const confirmRef = useRef(null);
-  const { buttonProps: clearButtonProps } = useButton(
-    {
-      "aria-label": clearLabel,
-      ...onClear ? { onPress: onClear } : {}
-    },
-    clearRef
-  );
-  const { buttonProps: cancelButtonProps } = useButton(
-    {
-      "aria-label": cancelLabel,
-      ...onCancel ? { onPress: onCancel } : {}
-    },
-    cancelRef
-  );
-  const { buttonProps: confirmButtonProps } = useButton(
-    {
-      "aria-label": confirmLabel,
-      isDisabled: isConfirmDisabled,
-      ...onConfirm ? { onPress: onConfirm } : {}
-    },
-    confirmRef
-  );
   return /* @__PURE__ */ jsxs("div", { className, "data-actions": true, children: [
-    showClear && /* @__PURE__ */ jsx("button", { ...clearButtonProps, ref: clearRef, type: "button", "data-action": "clear", children: clearLabel }),
-    /* @__PURE__ */ jsx("button", { ...cancelButtonProps, ref: cancelRef, type: "button", "data-action": "cancel", children: cancelLabel }),
-    /* @__PURE__ */ jsx("button", { ...confirmButtonProps, ref: confirmRef, type: "button", "data-action": "confirm", children: confirmLabel })
+    showClear && /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: clearLabel,
+        "aria-label": clearLabel,
+        onPress: onClear,
+        "data-action": "clear"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: cancelLabel,
+        "aria-label": cancelLabel,
+        onPress: onCancel,
+        "data-action": "cancel"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: confirmLabel,
+        "aria-label": confirmLabel,
+        onPress: onConfirm,
+        isDisabled: isConfirmDisabled,
+        "data-action": "confirm"
+      }
+    )
   ] });
 }
 DatePickerActions.displayName = "DatePickerActions";
@@ -13603,21 +13731,26 @@ function CalendarTriggerIcon() {
 }
 function PopoverContent({
   popoverRef,
-  triggerRef,
+  anchorRef,
   state,
   dialogProps,
   calendarProps,
   cancelLabel,
   confirmLabel,
   onCancel,
-  onConfirm
+  onConfirm,
+  slots,
+  ActionButtonComponent,
+  popoverClassName
 }) {
   const { popoverProps } = usePopover(
     {
       popoverRef,
-      triggerRef,
+      triggerRef: anchorRef,
       placement: "bottom start",
-      offset: 4
+      offset: 4,
+      shouldFlip: true,
+      containerPadding: 12
     },
     state
   );
@@ -13631,7 +13764,10 @@ function PopoverContent({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [state]);
-  return /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, children: [
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, className: cn(popoverClassName), children: [
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
     /* @__PURE__ */ jsxs("div", { ...dialogProps, role: "dialog", children: [
       /* @__PURE__ */ jsx(
@@ -13646,7 +13782,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__ */ jsx(
@@ -13655,12 +13792,14 @@ function PopoverContent({
           cancelLabel,
           confirmLabel,
           onCancel,
-          onConfirm
+          onConfirm,
+          ...ActionButtonComponent !== void 0 ? { ButtonComponent: ActionButtonComponent } : {}
         }
       )
     ] }),
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() })
   ] });
+  return createPortal(content, document.body);
 }
 var DatePickerDocked = forwardRef(
   (props, forwardedRef) => {
@@ -13670,11 +13809,15 @@ var DatePickerDocked = forwardRef(
       onCancel,
       onConfirm,
       className,
+      popoverClassName,
+      slots,
+      ActionButtonComponent,
       ...datePickerProps
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const triggerRef = useRef(null);
+    const groupRef = useRef(null);
     const popoverRef = useRef(null);
     const stateProps = {
       ...datePickerProps.value !== void 0 ? { value: datePickerProps.value } : {},
@@ -13705,7 +13848,14 @@ var DatePickerDocked = forwardRef(
       dialogProps,
       calendarProps
     } = useDatePicker(stateProps, state, ref);
-    const { buttonProps: iconButtonProps } = useButton(triggerButtonAriaProps, triggerRef);
+    const { buttonProps: iconButtonProps, isPressed: isTriggerPressed } = useButton(
+      triggerButtonAriaProps,
+      triggerRef
+    );
+    const { isFocusVisible: isTriggerFocusVisible, focusProps: triggerFocusProps } = useFocusRing();
+    const { isHovered: isTriggerHovered, hoverProps: triggerHoverProps } = useHover({
+      isDisabled: datePickerProps.isDisabled ?? false
+    });
     const valueBeforeOpenRef = useRef(null);
     useEffect(() => {
       if (state.isOpen) {
@@ -13734,26 +13884,44 @@ var DatePickerDocked = 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__ */ jsx("label", { ...labelProps, "data-label": true, children: datePickerProps.label }),
-          /* @__PURE__ */ jsxs("div", { ...groupProps, "data-field-group": true, children: [
+          /* @__PURE__ */ jsxs("div", { ...groupProps, ref: groupRef, "data-field-group": true, children: [
             /* @__PURE__ */ jsx(PickerDateField, { fieldProps }),
-            /* @__PURE__ */ jsx("button", { ...iconButtonProps, ref: triggerRef, type: "button", "data-trigger": true, children: /* @__PURE__ */ jsx(CalendarTriggerIcon, {}) })
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ...mergeProps$1(iconButtonProps, triggerFocusProps, triggerHoverProps),
+                ref: triggerRef,
+                type: "button",
+                "data-trigger": true,
+                ...getInteractionDataAttributes({
+                  isHovered: isTriggerHovered,
+                  isFocusVisible: isTriggerFocusVisible,
+                  isPressed: isTriggerPressed,
+                  isDisabled: datePickerProps.isDisabled ?? false
+                }),
+                children: /* @__PURE__ */ jsx(CalendarTriggerIcon, {})
+              }
+            )
           ] }),
           state.isOpen && /* @__PURE__ */ 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 } : {}
             }
           )
         ]
@@ -13762,298 +13930,570 @@ var DatePickerDocked = forwardRef(
   }
 );
 DatePickerDocked.displayName = "DatePickerDocked";
-var datePickerContainerVariants = cva(
+var datePickerContainerVariants = 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 = 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 = 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 = 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 = cva([
+  "flex items-center justify-between",
+  "px-3 py-2"
+  // NOTE: measurement-derived padding; permitted exception
+]);
+var navButtonVariants = 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 = 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 = 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 = 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 = cva([
+  "text-label-large text-on-surface-variant m-0 pointer-events-none"
+]);
+var calendarTitleIconVariants = cva(["text-on-surface-variant pointer-events-none"]);
+var calendarTitleStateLayerVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva(["border-t border-outline-variant w-full"]);
+var actionRowVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva(
-  ["px-6", "pt-4", "pb-3"],
+var modalHeaderVariants = 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 = 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 = cva(["text-label-large text-on-surface-variant m-0"]);
+var supportingTextVariants = cva([
+  "text-headline-large text-on-surface mt-9 m-0"
+  // NOTE: measurement-derived mt; permitted exception
+]);
+var modeToggleVariants = 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 = 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 = cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
+]);
+var dateInputFieldVariants = cva(["px-6 py-2"]);
+var dateInputFieldGroupVariants = 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 = cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateInputErrorVariants = cva(["text-body-small text-error mt-1"]);
+var dockedFieldGroupVariants = 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 = 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 = 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 = cva([
+  "bg-surface-container-high rounded-3xl",
+  "shadow-elevation-2 overflow-hidden",
+  "z-50 w-[360px]"
+]);
+var dockedLabelVariants = cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateFieldVariants = cva([
+  "flex items-center flex-1",
+  "text-body-large text-on-surface"
+]);
+var dateSegmentPlaceholderVariants = cva(["text-on-surface-variant"]);
+function StyledCalendarCell({ date, state }) {
+  return /* @__PURE__ */ jsxs(CalendarCell, { date, state, className: cn(calendarCellVariants()), children: [
+    /* @__PURE__ */ jsx("span", { className: cn(calendarCellStateLayerVariants()), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: cn(calendarCellFocusRingVariants()), "aria-hidden": "true" })
+  ] });
+}
+StyledCalendarCell.displayName = "StyledCalendarCell";
+function StyledNavButton({
+  children,
+  isDisabled,
+  onPress,
+  "aria-label": ariaLabel
+}) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {}
     },
-    defaultVariants: {
-      state: "enabled"
+    ref
+  );
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      className: cn(navButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(navButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(navButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10 flex items-center justify-center", children })
+      ]
     }
-  }
-);
-var yearItemVariants = 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 = useRef(null);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({});
+  const { pressProps, isPressed } = usePress({});
+  if (onClick) {
+    return /* @__PURE__ */ jsxs(
+      "button",
       {
-        selected: true,
-        state: "focused",
-        className: "bg-primary/90"
+        ...mergeProps$1(focusProps, hoverProps, pressProps),
+        ref,
+        type: "button",
+        className: cn(calendarTitleVariants()),
+        "aria-label": `${title}, click to select year`,
+        onClick,
+        ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn(calendarTitleStateLayerVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsx("span", { className: cn(calendarTitleIconVariants()), children: /* @__PURE__ */ jsx(DropdownArrowIcon, {}) })
+        ]
       }
-    ],
-    defaultVariants: {
-      selected: false,
-      state: "enabled"
-    }
+    );
   }
-);
-var datePickerDividerVariants = cva(["border-outline-variant", "border-t", "w-full"]);
-var datePickerActionVariants = 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 = 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 = 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 = cva([
-  "bg-secondary-container",
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp range indicator height); permitted exception
-  "rounded-none"
-]);
-var datePickerHeadlineVariants = cva([], {
-  variants: {
-    variant: {
-      docked: "",
-      modal: ["text-headline-small", "text-on-surface"],
-      "modal-input": ["text-headline-small", "text-on-surface"]
+  return /* @__PURE__ */ jsx("div", { className: cn(calendarTitleVariants(), "cursor-default"), children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }) });
+}
+StyledCalendarTitle.displayName = "StyledCalendarTitle";
+calendarHeaderVariants();
+function StyledYearItem({
+  year,
+  isSelected,
+  onSelect
+}) {
+  const ref = useRef(null);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({});
+  const { pressProps, isPressed } = usePress({});
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(focusProps, hoverProps, pressProps),
+      ref,
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isSelected,
+      className: cn(yearItemVariants()),
+      onClick: () => onSelect(year),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(yearItemStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(yearItemFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10", children: year })
+      ]
+    }
+  );
+}
+StyledYearItem.displayName = "StyledYearItem";
+function StyledWeekday({ label }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(weekdayVariants()), children: label });
+}
+StyledWeekday.displayName = "StyledWeekday";
+function StyledActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      "data-action": dataAction,
+      className: cn(actionButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(actionButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(actionButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10", children: label })
+      ]
     }
-  },
-  defaultVariants: {
-    variant: "modal"
-  }
-});
-var datePickerSupportingTextVariants = cva([
-  "text-label-large",
-  "text-on-surface-variant"
-]);
-var datePickerScrimVariants = 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",
@@ -14065,15 +14505,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",
@@ -14081,178 +14522,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 = forwardRef(
   (props, ref) => {
@@ -14265,10 +14637,22 @@ var DatePickerDockedStyled = 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
       }
     );
   }
@@ -14341,7 +14725,10 @@ var DatePickerModal = forwardRef(
       onCancel,
       onConfirm,
       onClear,
-      className
+      className,
+      scrimClassName,
+      slots,
+      ActionButtonComponent
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -14465,6 +14852,7 @@ var DatePickerModal = forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsx(
@@ -14486,7 +14874,8 @@ var DatePickerModal = forwardRef(
               onChange: handleSingleChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ) : /* @__PURE__ */ jsx(
             CalendarCore,
@@ -14498,7 +14887,8 @@ var DatePickerModal = forwardRef(
               onRangeChange: handleRangeChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ),
           /* @__PURE__ */ jsx(
@@ -14510,7 +14900,8 @@ var DatePickerModal = forwardRef(
               showClear,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              onClear: handleClear
+              onClear: handleClear,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -14528,6 +14919,7 @@ function ModalOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -14548,7 +14940,7 @@ function ModalOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -14566,210 +14958,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 = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -14780,11 +14968,20 @@ var DatePickerModalStyled = 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
       }
     );
   }
@@ -14931,7 +15128,9 @@ var DatePickerModalInput = forwardRef(
       onCancel,
       onConfirm,
       onModeToggle,
-      className
+      className,
+      scrimClassName,
+      ActionButtonComponent
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -15090,6 +15289,7 @@ var DatePickerModalInput = forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsx(
@@ -15152,7 +15352,8 @@ var DatePickerModalInput = forwardRef(
               confirmLabel,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              isConfirmDisabled: !isFormValid
+              isConfirmDisabled: !isFormValid,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -15170,6 +15371,7 @@ function ModalInputOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -15190,7 +15392,7 @@ function ModalInputOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -15208,98 +15410,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 = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -15309,10 +15419,12 @@ var DatePickerModalInputStyled = 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
       }
     );
   }
@@ -15423,6 +15535,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map