@tinybigui/react 0.11.2 → 0.13.0

package/dist/index.cjs

@@ -4718,13 +4718,21 @@ var HeadlessDrawerItem = React.forwardRef(
 );
 HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
 var DividerHeadless = React.forwardRef(
-  ({ orientation = "horizontal", className }, ref) => {
+  ({ orientation = "horizontal", className, style }, ref) => {
     const { separatorProps } = reactAria.useSeparator({
       orientation,
       elementType: orientation === "vertical" ? "div" : "hr"
     });
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...separatorProps, ref, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ...separatorProps,
+          ref,
+          className,
+          style
+        }
+      );
     }
     return /* @__PURE__ */ jsxRuntime.jsx(
       "hr",
@@ -4732,32 +4740,46 @@ var DividerHeadless = React.forwardRef(
         ...separatorProps,
         "aria-orientation": "horizontal",
         ref,
-        className
+        className,
+        style
       }
     );
   }
 );
 DividerHeadless.displayName = "DividerHeadless";
 var dividerVariants = classVarianceAuthority.cva(
-  // Base: always apply the MD3 outline-variant color to the border
-  "border-outline-variant",
+  [
+    // Zero border — color comes from background fill (matches md-web strategy)
+    "shrink-0 border-0",
+    // MD3 outline-variant color token
+    "bg-outline-variant",
+    // Default thickness — consumers override via the CSS custom property
+    "[--md-divider-thickness:1px]"
+  ],
   {
     variants: {
       /**
        * Controls the axis of the visual rule.
+       *
+       * horizontal — stretches to full inline width; block size is --md-divider-thickness
+       * vertical   — self-stretches to the block axis of the flex/grid parent;
+       *              inline size is --md-divider-thickness
        */
       orientation: {
-        horizontal: "border-t",
-        vertical: "border-l h-auto self-stretch"
+        horizontal: "w-full h-[var(--md-divider-thickness)]",
+        vertical: "self-stretch h-auto w-[var(--md-divider-thickness)]"
       },
       /**
-       * Inset — which end(s) are offset by 16dp per MD3 spec.
+       * Inset — logical inline offset per MD3 spec (16dp = 1rem = Tailwind spacing-4).
+       *
+       * Uses logical properties (ms-N / me-N) for correct behaviour under RTL
+       * writing modes (Arabic, Hebrew, etc.).
        */
       inset: {
         none: "",
-        start: "ml-4",
-        end: "mr-4",
-        both: "ml-4 mr-4"
+        start: "ms-4",
+        end: "me-4",
+        both: "ms-4 me-4"
       }
     },
     defaultVariants: {
@@ -4767,44 +4789,15 @@ var dividerVariants = classVarianceAuthority.cva(
   }
 );
 var Divider = React.forwardRef(
-  ({ orientation = "horizontal", inset = "none", label, className }, ref) => {
-    if (label) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref,
-          role: "group",
-          "aria-label": label,
-          className: cn("flex items-center gap-4", className),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface-variant text-label-large whitespace-nowrap", children: label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            )
-          ]
-        }
-      );
+  ({ orientation = "horizontal", inset = "none", className, style }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    DividerHeadless,
+    {
+      ref,
+      orientation,
+      className: cn(dividerVariants({ orientation, inset }), className),
+      ...style !== void 0 && { style }
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      DividerHeadless,
-      {
-        ref,
-        orientation,
-        className: cn(dividerVariants({ orientation, inset }), className)
-      }
-    );
-  }
+  )
 );
 Divider.displayName = "Divider";
 var drawerVariants = classVarianceAuthority.cva(
@@ -13211,10 +13204,17 @@ function mapToInputProps(props) {
   const { orientation: _orientation, minuteStep: _minuteStep, ...inputProps } = props;
   return inputProps;
 }
-function CalendarCell({ date: date$1, state }) {
+function CalendarCell({
+  date: date$1,
+  state,
+  className,
+  children
+}) {
   const ref = React.useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable, formattedDate } = reactAria.useCalendarCell({ date: date$1 }, state, ref);
-  const { focusProps, isFocusVisible, isFocused } = reactAria.useFocusRing();
+  const { focusProps, isFocusVisible } = reactAria.useFocusRing();
+  const { hoverProps, isHovered } = reactAria.useHover({ isDisabled: isDisabled || isUnavailable });
+  const { pressProps, isPressed } = reactAria.usePress({ isDisabled: isDisabled || isUnavailable });
   const isCurrentDay = date.isSameDay(date$1, date.today(date.getLocalTimeZone()));
   const isOutsideMonth = date$1.month !== state.visibleRange.start.month || date$1.year !== state.visibleRange.start.year;
   let isRangeStart = false;
@@ -13226,28 +13226,38 @@ function CalendarCell({ date: date$1, state }) {
     isRangeEnd = date.isSameDay(date$1, range.end);
     isRangeMiddle = date$1.compare(range.start) > 0 && date$1.compare(range.end) < 0;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ...reactAria.mergeProps(buttonProps, focusProps),
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps, pressProps),
       ref,
+      className,
       "aria-current": isCurrentDay ? "date" : void 0,
-      "data-selected": isSelected || void 0,
-      "data-today": isCurrentDay || void 0,
-      "data-outside-month": isOutsideMonth || void 0,
-      "data-range-start": isRangeStart || void 0,
-      "data-range-end": isRangeEnd || void 0,
-      "data-range-middle": isRangeMiddle || void 0,
-      "data-disabled": isDisabled || void 0,
-      "data-unavailable": isUnavailable || void 0,
-      "data-focused": isFocused || void 0,
-      "data-focus-visible": isFocusVisible || void 0,
-      children: formattedDate
+      "data-selected": isSelected ? "" : void 0,
+      "data-today": isCurrentDay ? "" : void 0,
+      "data-outside-month": isOutsideMonth ? "" : void 0,
+      "data-range-start": isRangeStart ? "" : void 0,
+      "data-range-end": isRangeEnd ? "" : void 0,
+      "data-range-middle": isRangeMiddle ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-unavailable": isUnavailable ? "" : void 0,
+      "data-focus-visible": isFocusVisible ? "" : void 0,
+      "data-hovered": isHovered ? "" : void 0,
+      "data-pressed": isPressed ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: formattedDate }),
+        children
+      ]
     }
   ) });
 }
 CalendarCell.displayName = "CalendarCell";
-function CalendarGrid({ state, firstDayOfWeek }) {
+function CalendarGrid({
+  state,
+  firstDayOfWeek,
+  CellComponent = CalendarCell,
+  WeekdayComponent
+}) {
   const { locale } = reactAria.useLocale();
   const gridOptions = firstDayOfWeek ? { firstDayOfWeek } : {};
   const { gridProps, headerProps, weekDays } = reactAria.useCalendarGrid(gridOptions, state);
@@ -13257,9 +13267,11 @@ function CalendarGrid({ state, firstDayOfWeek }) {
     firstDayOfWeek ?? void 0
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("table", { ...gridProps, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: day }, index)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: weekDays.map(
+      (day, index) => WeekdayComponent ? /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: /* @__PURE__ */ jsxRuntime.jsx(WeekdayComponent, { label: day }) }, index) : /* @__PURE__ */ jsxRuntime.jsx("th", { role: "columnheader", children: day }, index)
+    ) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ jsxRuntime.jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
+      (date, i) => date ? /* @__PURE__ */ jsxRuntime.jsx(CellComponent, { state, date }, i) : /* @__PURE__ */ jsxRuntime.jsx("td", {}, i)
     ) }, weekIndex)) })
   ] });
 }
@@ -13290,12 +13302,32 @@ function ChevronRightIcon() {
 function DropdownArrowIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5z" }) });
 }
+function DefaultTitle({ title, onClick, showDropdownIndicator }) {
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "data-calendar-title": true,
+        "aria-label": `${title}, click to select year`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }) });
+}
 function CalendarHeader({
   title,
   prevButtonProps,
   nextButtonProps,
   onTitleClick,
-  showDropdownIndicator = false
+  showDropdownIndicator = false,
+  NavButtonComponent = NavigationButton,
+  TitleComponent = DefaultTitle
 }) {
   const enhancedPrevProps = {
     ...prevButtonProps,
@@ -13306,22 +13338,17 @@ function CalendarHeader({
     "aria-label": "Next month"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-calendar-header": true, children: [
-    onTitleClick ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TitleComponent,
       {
-        type: "button",
+        title,
         onClick: onTitleClick,
-        "data-calendar-title": true,
-        "aria-label": `${title}, click to select year`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }),
-          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {})
-        ]
+        showDropdownIndicator
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", children: title }) }),
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-calendar-nav": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, { ...enhancedPrevProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationButton, { ...enhancedNextProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsxRuntime.jsx(NavButtonComponent, { ...enhancedPrevProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx(NavButtonComponent, { ...enhancedNextProps, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -13340,7 +13367,8 @@ function YearGrid({
   selectedYear,
   onYearSelect,
   minYear,
-  maxYear
+  maxYear,
+  YearItemComponent
 }) {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const startYear = minYear ?? currentYear - YEAR_RANGE_OFFSET;
@@ -13366,6 +13394,17 @@ function YearGrid({
       },
       children: years.map((year) => {
         const isSelected = year === selectedYear;
+        if (YearItemComponent) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            YearItemComponent,
+            {
+              year,
+              isSelected,
+              onSelect: onYearSelect
+            },
+            year
+          );
+        }
         return /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -13373,7 +13412,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
@@ -13429,6 +13468,7 @@ function SingleCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader,
@@ -13437,14 +13477,25 @@ function SingleCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsxRuntime.jsx(
+    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13504,6 +13555,7 @@ function RangeCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CalendarHeader,
@@ -13512,14 +13564,25 @@ function RangeCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsxRuntime.jsx(
+    currentView === "day" ? /* @__PURE__ */ jsxRuntime.jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13537,6 +13600,24 @@ var CalendarCore = React.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(SingleCalendarInner, { ...rest, calendarRef: ref }, "single");
 });
 CalendarCore.displayName = "CalendarCore";
+function HeadlessActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps } = reactAria.useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...buttonProps, ref, type: "button", "data-action": dataAction, children: label });
+}
 function DatePickerActions({
   cancelLabel = "Cancel",
   confirmLabel = "OK",
@@ -13546,37 +13627,38 @@ function DatePickerActions({
   onCancel,
   onConfirm,
   onClear,
-  className
+  className,
+  ButtonComponent = HeadlessActionButton
 }) {
-  const clearRef = React.useRef(null);
-  const cancelRef = React.useRef(null);
-  const confirmRef = React.useRef(null);
-  const { buttonProps: clearButtonProps } = reactAria.useButton(
-    {
-      "aria-label": clearLabel,
-      ...onClear ? { onPress: onClear } : {}
-    },
-    clearRef
-  );
-  const { buttonProps: cancelButtonProps } = reactAria.useButton(
-    {
-      "aria-label": cancelLabel,
-      ...onCancel ? { onPress: onCancel } : {}
-    },
-    cancelRef
-  );
-  const { buttonProps: confirmButtonProps } = reactAria.useButton(
-    {
-      "aria-label": confirmLabel,
-      isDisabled: isConfirmDisabled,
-      ...onConfirm ? { onPress: onConfirm } : {}
-    },
-    confirmRef
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-actions": true, children: [
-    showClear && /* @__PURE__ */ jsxRuntime.jsx("button", { ...clearButtonProps, ref: clearRef, type: "button", "data-action": "clear", children: clearLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { ...cancelButtonProps, ref: cancelRef, type: "button", "data-action": "cancel", children: cancelLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { ...confirmButtonProps, ref: confirmRef, type: "button", "data-action": "confirm", children: confirmLabel })
+    showClear && /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: clearLabel,
+        "aria-label": clearLabel,
+        onPress: onClear,
+        "data-action": "clear"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: cancelLabel,
+        "aria-label": cancelLabel,
+        onPress: onCancel,
+        "data-action": "cancel"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ButtonComponent,
+      {
+        label: confirmLabel,
+        "aria-label": confirmLabel,
+        onPress: onConfirm,
+        isDisabled: isConfirmDisabled,
+        "data-action": "confirm"
+      }
+    )
   ] });
 }
 DatePickerActions.displayName = "DatePickerActions";
@@ -13615,21 +13697,26 @@ function CalendarTriggerIcon() {
 }
 function PopoverContent({
   popoverRef,
-  triggerRef,
+  anchorRef,
   state,
   dialogProps,
   calendarProps,
   cancelLabel,
   confirmLabel,
   onCancel,
-  onConfirm
+  onConfirm,
+  slots,
+  ActionButtonComponent,
+  popoverClassName
 }) {
   const { popoverProps } = reactAria.usePopover(
     {
       popoverRef,
-      triggerRef,
+      triggerRef: anchorRef,
       placement: "bottom start",
-      offset: 4
+      offset: 4,
+      shouldFlip: true,
+      containerPadding: 12
     },
     state
   );
@@ -13643,7 +13730,10 @@ function PopoverContent({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [state]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, children: [
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsxRuntime.jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, className: cn(popoverClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: () => state.close() }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { ...dialogProps, role: "dialog", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13658,7 +13748,8 @@ function PopoverContent({
             ...calendarProps.isReadOnly ? { isReadOnly: calendarProps.isReadOnly } : {},
             ...calendarProps.isDateUnavailable ? { isDateUnavailable: calendarProps.isDateUnavailable } : {}
           },
-          "aria-label": calendarProps["aria-label"] ?? "Calendar"
+          "aria-label": calendarProps["aria-label"] ?? "Calendar",
+          ...slots ? { slots } : {}
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -13667,12 +13758,14 @@ function PopoverContent({
           cancelLabel,
           confirmLabel,
           onCancel,
-          onConfirm
+          onConfirm,
+          ...ActionButtonComponent !== void 0 ? { ButtonComponent: ActionButtonComponent } : {}
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: () => state.close() })
   ] });
+  return reactDom.createPortal(content, document.body);
 }
 var DatePickerDocked = React.forwardRef(
   (props, forwardedRef) => {
@@ -13682,11 +13775,15 @@ var DatePickerDocked = React.forwardRef(
       onCancel,
       onConfirm,
       className,
+      popoverClassName,
+      slots,
+      ActionButtonComponent,
       ...datePickerProps
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
     const triggerRef = React.useRef(null);
+    const groupRef = React.useRef(null);
     const popoverRef = React.useRef(null);
     const stateProps = {
       ...datePickerProps.value !== void 0 ? { value: datePickerProps.value } : {},
@@ -13717,7 +13814,14 @@ var DatePickerDocked = React.forwardRef(
       dialogProps,
       calendarProps
     } = reactAria.useDatePicker(stateProps, state, ref);
-    const { buttonProps: iconButtonProps } = reactAria.useButton(triggerButtonAriaProps, triggerRef);
+    const { buttonProps: iconButtonProps, isPressed: isTriggerPressed } = reactAria.useButton(
+      triggerButtonAriaProps,
+      triggerRef
+    );
+    const { isFocusVisible: isTriggerFocusVisible, focusProps: triggerFocusProps } = reactAria.useFocusRing();
+    const { isHovered: isTriggerHovered, hoverProps: triggerHoverProps } = reactAria.useHover({
+      isDisabled: datePickerProps.isDisabled ?? false
+    });
     const valueBeforeOpenRef = React.useRef(null);
     React.useEffect(() => {
       if (state.isOpen) {
@@ -13746,26 +13850,44 @@ var DatePickerDocked = React.forwardRef(
         ref,
         className,
         "data-variant": "docked",
-        "data-open": state.isOpen ?? void 0,
-        "data-disabled": datePickerProps.isDisabled ?? void 0,
+        "data-open": state.isOpen ? "" : void 0,
+        "data-disabled": datePickerProps.isDisabled ? "" : void 0,
         children: [
           datePickerProps.label && /* @__PURE__ */ jsxRuntime.jsx("label", { ...labelProps, "data-label": true, children: datePickerProps.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, "data-field-group": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, ref: groupRef, "data-field-group": true, children: [
             /* @__PURE__ */ jsxRuntime.jsx(PickerDateField, { fieldProps }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { ...iconButtonProps, ref: triggerRef, type: "button", "data-trigger": true, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTriggerIcon, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ...reactAria.mergeProps(iconButtonProps, triggerFocusProps, triggerHoverProps),
+                ref: triggerRef,
+                type: "button",
+                "data-trigger": true,
+                ...getInteractionDataAttributes({
+                  isHovered: isTriggerHovered,
+                  isFocusVisible: isTriggerFocusVisible,
+                  isPressed: isTriggerPressed,
+                  isDisabled: datePickerProps.isDisabled ?? false
+                }),
+                children: /* @__PURE__ */ jsxRuntime.jsx(CalendarTriggerIcon, {})
+              }
+            )
           ] }),
           state.isOpen && /* @__PURE__ */ jsxRuntime.jsx(
             PopoverContent,
             {
               popoverRef,
-              triggerRef,
+              anchorRef: groupRef,
               state,
               dialogProps,
               calendarProps,
               cancelLabel,
               confirmLabel,
               onCancel: handleCancel,
-              onConfirm: handleConfirm
+              onConfirm: handleConfirm,
+              ...slots !== void 0 ? { slots } : {},
+              ...ActionButtonComponent !== void 0 ? { ActionButtonComponent } : {},
+              ...popoverClassName !== void 0 ? { popoverClassName } : {}
             }
           )
         ]
@@ -13774,298 +13896,570 @@ var DatePickerDocked = React.forwardRef(
   }
 );
 DatePickerDocked.displayName = "DatePickerDocked";
-var datePickerContainerVariants = classVarianceAuthority.cva(
+var datePickerContainerVariants = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      docked: "w-[360px]",
+      // NOTE: measurement-derived (360dp fixed width); permitted exception
+      modal: [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[360px]"
+        // NOTE: measurement-derived (360dp fixed width); permitted exception
+      ],
+      "modal-input": [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[328px]"
+        // NOTE: measurement-derived (328dp); permitted exception
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "docked"
+  }
+});
+var calendarCellVariants = classVarianceAuthority.cva([
+  // Layout — 48dp circle touch target
+  "relative flex items-center justify-center",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived (48dp touch target); permitted exception
+  "rounded-full",
+  "select-none cursor-pointer",
+  "overflow-hidden",
+  // clips state layer to circle
+  // Typography
+  "text-body-large",
+  // Base text color
+  "text-on-surface",
+  // Effects transition for color changes (not spatial — no overshoot)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Remove default focus outline — handled via calendarCellFocusRingVariants
+  "focus-visible:outline-none",
+  // Carries group scope for child slots
+  "group/calendar-cell",
+  // ── Today (unselected) ────────────────────────────────────────────────────
+  "data-[today]:not([data-selected]):text-primary",
+  "data-[today]:not([data-selected]):border data-[today]:not([data-selected]):border-primary",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Range start/end: half-pill shape (right-flat for start, left-flat for end) ──
+  "data-[range-start]:rounded-r-none",
+  "data-[range-end]:rounded-l-none",
+  // ── Range middle ──────────────────────────────────────────────────────────
+  "data-[range-middle]:bg-secondary-container",
+  "data-[range-middle]:text-on-secondary-container",
+  "data-[range-middle]:rounded-none",
+  // ── Outside month ─────────────────────────────────────────────────────────
+  "data-[outside-month]:not([data-selected]):text-on-surface-variant",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed",
+  // ── Unavailable ───────────────────────────────────────────────────────────
+  "data-[unavailable]:text-on-surface/38 data-[unavailable]:line-through"
+]);
+var calendarCellStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition — spring standard fast (no spatial overshoot)
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer color switches to on-primary
+  "group-data-[selected]/calendar-cell:bg-on-primary",
+  // Range middle → state layer color switches to on-secondary-container
+  "group-data-[range-middle]/calendar-cell:bg-on-secondary-container",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/calendar-cell:opacity-8",
+  "group-data-[focus-visible]/calendar-cell:opacity-10",
+  "group-data-[pressed]/calendar-cell:opacity-10",
+  // No state layer for disabled/unavailable
+  "group-data-[disabled]/calendar-cell:hidden",
+  "group-data-[unavailable]/calendar-cell:hidden"
+]);
+var calendarCellFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/calendar-cell:opacity-100"
+]);
+var calendarHeaderVariants = classVarianceAuthority.cva([
+  "flex items-center justify-between",
+  "px-3 py-2"
+  // NOTE: measurement-derived padding; permitted exception
+]);
+var navButtonVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  // Typography
+  "text-on-surface-variant",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  // Focus outline removed — ring handled by navButtonFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled — self-targeting
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  // Carries group scope
+  "group/nav-button"
+]);
+var navButtonStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/nav-button:opacity-8",
+  "group-data-[focus-visible]/nav-button:opacity-10",
+  "group-data-[pressed]/nav-button:opacity-10",
+  "group-data-[disabled]/nav-button:hidden"
+]);
+var navButtonFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/nav-button:opacity-100"
+]);
+var calendarTitleVariants = classVarianceAuthority.cva([
+  "relative flex items-center gap-0.5",
+  "bg-transparent border-none cursor-pointer",
+  "rounded-full px-2 py-1",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/calendar-title"
+]);
+var calendarTitleTextVariants = classVarianceAuthority.cva([
+  "text-label-large text-on-surface-variant m-0 pointer-events-none"
+]);
+var calendarTitleIconVariants = classVarianceAuthority.cva(["text-on-surface-variant pointer-events-none"]);
+var calendarTitleStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/calendar-title:opacity-8",
+  "group-data-[focus-visible]/calendar-title:opacity-10",
+  "group-data-[pressed]/calendar-title:opacity-10"
+]);
+var yearGridVariants = classVarianceAuthority.cva([
+  "grid grid-cols-3 gap-2",
+  "px-3 py-2",
+  "max-h-[280px] overflow-y-auto",
+  // NOTE: measurement-derived max height; permitted exception
+  "place-items-center"
+]);
+var yearItemVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-[88px] h-[52px]",
+  // NOTE: measurement-derived (88dp×52dp); permitted exception
+  "rounded-full",
+  "cursor-pointer select-none",
+  "overflow-hidden",
+  // Typography
+  "text-body-large",
+  // Reset
+  "bg-transparent border-none",
+  // Focus outline removed — ring handled by yearItemFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/year-item",
+  // ── Unselected (base) ─────────────────────────────────────────────────────
+  "text-on-surface-variant",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var yearItemStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer switches color
+  "group-data-[selected]/year-item:bg-on-primary",
+  // Interaction opacities
+  "group-data-[hovered]/year-item:opacity-8",
+  "group-data-[focus-visible]/year-item:opacity-10",
+  "group-data-[pressed]/year-item:opacity-10",
+  "group-data-[disabled]/year-item:hidden"
+]);
+var yearItemFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/year-item:opacity-100"
+]);
+var weekdayVariants = classVarianceAuthority.cva([
+  "text-body-small text-on-surface-variant font-normal",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived; permitted exception
+  "flex items-center justify-center",
+  "select-none"
+]);
+var calendarDividerVariants = classVarianceAuthority.cva(["border-t border-outline-variant w-full"]);
+var actionRowVariants = classVarianceAuthority.cva([
+  "flex items-center justify-end gap-2",
+  "px-3 py-2",
+  "h-12"
+  // NOTE: measurement-derived (48dp action row height); permitted exception
+]);
+var actionButtonVariants = classVarianceAuthority.cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "rounded-full px-3 py-2 min-h-[48px]",
+  // NOTE: 48dp min touch; permitted exception
+  // Typography + color
+  "text-label-large text-primary",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/action-button",
+  // Disabled
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var actionButtonStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/action-button:opacity-8",
+  "group-data-[focus-visible]/action-button:opacity-10",
+  "group-data-[pressed]/action-button:opacity-10",
+  "group-data-[disabled]/action-button:hidden"
+]);
+var actionButtonFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/action-button:opacity-100"
+]);
+var modalDialogVariants = classVarianceAuthority.cva(
   [
-    "bg-surface-container-high",
-    "rounded-3xl",
-    // NOTE: shape.extra-large = 28dp; mapped via @theme token
-    "overflow-hidden"
+    "bg-surface-container-high rounded-3xl overflow-hidden",
+    "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "z-50",
+    "max-h-[90vh] overflow-y-auto"
   ],
   {
     variants: {
       variant: {
-        docked: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
         modal: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
+        // NOTE: measurement-derived; permitted exception
         "modal-input": "w-[328px]"
-        // NOTE: measurement-derived value from MD3 spec (328dp); permitted exception
+        // NOTE: measurement-derived; permitted exception
       }
     },
     defaultVariants: {
-      variant: "docked"
+      variant: "modal"
     }
   }
 );
-var calendarCellVariants = classVarianceAuthority.cva(
-  [
-    "w-[48px]",
-    // NOTE: measurement-derived (48dp touch target); permitted exception
-    "h-[48px]",
-    // NOTE: measurement-derived (48dp); permitted exception
-    "rounded-full",
-    // shape.full = circle
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "relative",
-    "cursor-pointer",
-    "select-none",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      cellType: {
-        default: "text-on-surface",
-        today: "text-primary border border-primary",
-        selected: "bg-primary text-on-primary",
-        "selected-range-middle": "bg-secondary-container text-on-secondary-container rounded-none",
-        "outside-month": "text-on-surface-variant",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: ""
-      }
-    },
-    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"
-    }
-  }
-);
-var datePickerHeaderVariants = classVarianceAuthority.cva(
-  ["px-6", "pt-4", "pb-3"],
+var modalHeaderVariants = classVarianceAuthority.cva([
+  "flex items-start justify-between",
+  "px-6 pt-4 pb-3"
   // NOTE: measurement-derived padding; permitted exception
-  {
-    variants: {
-      variant: {
-        docked: "h-[56px] px-3 flex items-center",
-        // NOTE: measurement-derived (56dp header); permitted exception
-        modal: "h-auto",
-        "modal-input": "h-auto"
-      }
-    },
-    defaultVariants: {
-      variant: "docked"
-    }
-  }
-);
-var datePickerNavVariants = classVarianceAuthority.cva(
-  ["text-on-surface-variant", "flex", "items-center", "gap-1"],
-  {
-    variants: {
-      state: {
-        enabled: "",
-        hovered: "bg-on-surface-variant/8",
-        focused: "bg-on-surface-variant/10",
-        pressed: "bg-on-surface-variant/10",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
-    },
-    defaultVariants: {
-      state: "enabled"
-    }
-  }
-);
-var yearItemVariants = classVarianceAuthority.cva(
-  [
-    "w-[88px]",
-    // NOTE: measurement-derived (88dp); permitted exception
-    "h-[52px]",
-    // NOTE: measurement-derived (52dp); permitted exception
-    "rounded-full",
-    // pill shape
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "cursor-pointer",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      selected: {
-        true: "bg-primary text-on-primary",
-        false: "text-on-surface-variant"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: "",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
-    },
-    compoundVariants: [
-      {
-        selected: false,
-        state: "hovered",
-        className: "bg-on-surface-variant/8"
-      },
-      {
-        selected: false,
-        state: "focused",
-        className: "bg-on-surface-variant/10"
-      },
-      {
-        selected: true,
-        state: "hovered",
-        className: "bg-primary/90"
-      },
-      {
-        selected: true,
-        state: "focused",
-        className: "bg-primary/90"
-      }
-    ],
-    defaultVariants: {
-      selected: false,
-      state: "enabled"
-    }
-  }
-);
-var datePickerDividerVariants = classVarianceAuthority.cva(["border-outline-variant", "border-t", "w-full"]);
-var datePickerActionVariants = classVarianceAuthority.cva([
-  "flex",
-  "items-center",
-  "justify-end",
-  "gap-2",
-  "px-3",
-  "py-2",
-  "h-12"
-  // NOTE: measurement-derived (48dp action row height); permitted exception
 ]);
-var datePickerActionButtonVariants = classVarianceAuthority.cva([
-  "text-primary",
-  "text-label-large",
-  "rounded-full",
-  "px-3",
-  "py-2",
-  "transition-colors",
-  "duration-spring-standard-fast-effects",
-  "ease-spring-standard-fast-effects",
-  "hover:bg-primary/8",
-  "focus-visible:bg-primary/10",
-  "active:bg-primary/10"
+var headlineVariants = classVarianceAuthority.cva(["text-label-large text-on-surface-variant m-0"]);
+var supportingTextVariants = classVarianceAuthority.cva([
+  "text-headline-large text-on-surface mt-9 m-0"
+  // NOTE: measurement-derived mt; permitted exception
 ]);
-var datePickerWeekdayVariants = classVarianceAuthority.cva([
-  "text-body-small",
-  "text-on-surface",
-  "font-normal",
-  "w-[48px]",
-  // NOTE: measurement-derived (48dp column width); permitted exception
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp row height); permitted exception
-  "text-center"
+var modeToggleVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center",
+  "w-12 h-12 rounded-full",
+  // NOTE: 48dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer self-end",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/mode-toggle"
 ]);
-var datePickerRangeIndicatorVariants = classVarianceAuthority.cva([
-  "bg-secondary-container",
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp range indicator height); permitted exception
-  "rounded-none"
+var modeToggleStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/mode-toggle:opacity-8",
+  "group-data-[focus-visible]/mode-toggle:opacity-10",
+  "group-data-[pressed]/mode-toggle:opacity-10"
 ]);
-var datePickerHeadlineVariants = classVarianceAuthority.cva([], {
-  variants: {
-    variant: {
-      docked: "",
-      modal: ["text-headline-small", "text-on-surface"],
-      "modal-input": ["text-headline-small", "text-on-surface"]
-    }
-  },
-  defaultVariants: {
-    variant: "modal"
-  }
-});
-var datePickerSupportingTextVariants = classVarianceAuthority.cva([
-  "text-label-large",
-  "text-on-surface-variant"
+var scrimVariants2 = classVarianceAuthority.cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
 ]);
-var datePickerScrimVariants = classVarianceAuthority.cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-medium2",
-  "ease-standard"
+var dateInputFieldVariants = classVarianceAuthority.cva(["px-6 py-2"]);
+var dateInputFieldGroupVariants = classVarianceAuthority.cva([
+  "flex items-center",
+  "border border-outline rounded-sm",
+  "px-4 py-3",
+  // NOTE: measurement-derived; permitted exception
+  "text-body-large text-on-surface",
+  // Focus state (data-focused on parent wrapper)
+  "peer-data-[focused]:border-2 peer-data-[focused]:border-primary",
+  // Invalid state
+  "peer-data-[invalid]:border-error peer-data-[invalid]:border-2"
+]);
+var dateInputLabelVariants = classVarianceAuthority.cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateInputErrorVariants = classVarianceAuthority.cva(["text-body-small text-error mt-1"]);
+var dockedFieldGroupVariants = classVarianceAuthority.cva([
+  "flex items-center",
+  "border border-outline rounded",
+  "h-14",
+  // NOTE: measurement-derived (56dp); permitted exception
+  "px-3 gap-2",
+  "bg-transparent",
+  // Focus-within: promote to primary 2dp border
+  "focus-within:border-primary focus-within:border-2"
+]);
+var dockedTriggerVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/docked-trigger"
+]);
+var dockedTriggerStateLayerVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/docked-trigger:opacity-8",
+  "group-data-[focus-visible]/docked-trigger:opacity-10",
+  "group-data-[pressed]/docked-trigger:opacity-10"
+]);
+var popoverVariants = classVarianceAuthority.cva([
+  "bg-surface-container-high rounded-3xl",
+  "shadow-elevation-2 overflow-hidden",
+  "z-50 w-[360px]"
 ]);
-var CALENDAR_STYLES = [
-  // ── Label ─────────────────────────────────────────────────────────────────
+var dockedLabelVariants = classVarianceAuthority.cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateFieldVariants = classVarianceAuthority.cva([
+  "flex items-center flex-1",
+  "text-body-large text-on-surface"
+]);
+var dateSegmentPlaceholderVariants = classVarianceAuthority.cva(["text-on-surface-variant"]);
+function StyledCalendarCell({ date, state }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(CalendarCell, { date, state, className: cn(calendarCellVariants()), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarCellStateLayerVariants()), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarCellFocusRingVariants()), "aria-hidden": "true" })
+  ] });
+}
+StyledCalendarCell.displayName = "StyledCalendarCell";
+function StyledNavButton({
+  children,
+  isDisabled,
+  onPress,
+  "aria-label": ariaLabel
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton(
+    {
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      className: cn(navButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(navButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(navButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10 flex items-center justify-center", children })
+      ]
+    }
+  );
+}
+StyledNavButton.displayName = "StyledNavButton";
+function StyledCalendarTitle({
+  title,
+  onClick,
+  showDropdownIndicator
+}) {
+  const ref = React.useRef(null);
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { pressProps, isPressed } = reactAria.usePress({});
+  if (onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ...reactAria.mergeProps(focusProps, hoverProps, pressProps),
+        ref,
+        type: "button",
+        className: cn(calendarTitleVariants()),
+        "aria-label": `${title}, click to select year`,
+        onClick,
+        ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarTitleStateLayerVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(calendarTitleIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx(DropdownArrowIcon, {}) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(calendarTitleVariants(), "cursor-default"), children: /* @__PURE__ */ jsxRuntime.jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }) });
+}
+StyledCalendarTitle.displayName = "StyledCalendarTitle";
+calendarHeaderVariants();
+function StyledYearItem({
+  year,
+  isSelected,
+  onSelect
+}) {
+  const ref = React.useRef(null);
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({});
+  const { pressProps, isPressed } = reactAria.usePress({});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(focusProps, hoverProps, pressProps),
+      ref,
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isSelected,
+      className: cn(yearItemVariants()),
+      onClick: () => onSelect(year),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(yearItemStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(yearItemFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: year })
+      ]
+    }
+  );
+}
+StyledYearItem.displayName = "StyledYearItem";
+function StyledWeekday({ label }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(weekdayVariants()), children: label });
+}
+StyledWeekday.displayName = "StyledWeekday";
+function StyledActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = React.useRef(null);
+  const { buttonProps, isPressed } = reactAria.useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = reactAria.useFocusRing();
+  const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...reactAria.mergeProps(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      "data-action": dataAction,
+      className: cn(actionButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(actionButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(actionButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pointer-events-none relative z-10", children: label })
+      ]
+    }
+  );
+}
+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",
@@ -14077,15 +14471,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",
@@ -14093,178 +14488,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 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_CONTENT_STRUCTURAL = [
+  ...MODAL_HEADER_STRUCTURAL,
+  ...CALENDAR_HEADER_STRUCTURAL,
+  ...CALENDAR_GRID_STRUCTURAL,
+  ...YEAR_GRID_STRUCTURAL,
+  ...DIVIDER_STRUCTURAL,
+  ...ACTION_ROW_STRUCTURAL
+].join(" ");
+var MODAL_INPUT_CONTENT_STRUCTURAL = [
+  ...MODAL_HEADER_STRUCTURAL,
+  ...MODAL_INPUT_SUPPORTING_TEXT_STRUCTURAL,
+  ...MODAL_INPUT_FIELD_STRUCTURAL,
+  ...DIVIDER_STRUCTURAL,
+  ...ACTION_ROW_STRUCTURAL
+].join(" ");
+var DOCKED_ROOT_STRUCTURAL = [
+  ...DOCKED_LABEL_STRUCTURAL,
+  ...DOCKED_FIELD_STRUCTURAL,
+  ...DOCKED_TRIGGER_STRUCTURAL
+].join(" ");
+var DOCKED_POPOVER_PANEL_STRUCTURAL = SHARED_CALENDAR_STRUCTURAL;
+var DOCKED_POPOVER_MOTION = [
+  "transition-[transform,opacity]",
+  "duration-short3",
+  "ease-standard-decelerate",
+  "data-[exiting]:duration-short2",
+  "data-[exiting]:ease-standard-accelerate"
+].join(" ");
+var MODAL_DIALOG_MOTION = [
+  "transition-[transform,opacity]",
+  "duration-medium2",
+  "ease-standard-decelerate",
+  "data-[exiting]:duration-medium1",
+  "data-[exiting]:ease-standard-accelerate"
 ].join(" ");
 var DatePickerDockedStyled = React.forwardRef(
   (props, ref) => {
@@ -14277,10 +14603,22 @@ var DatePickerDockedStyled = React.forwardRef(
         ...rest,
         className: cn(
           datePickerContainerVariants({ variant: "docked" }),
-          CALENDAR_STYLES,
-          !reducedMotion && DOCKED_MOTION_STYLES,
+          DOCKED_ROOT_STRUCTURAL,
           className
-        )
+        ),
+        popoverClassName: cn(
+          popoverVariants(),
+          DOCKED_POPOVER_PANEL_STRUCTURAL,
+          !reducedMotion && DOCKED_POPOVER_MOTION
+        ),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14353,7 +14691,10 @@ var DatePickerModal = React.forwardRef(
       onCancel,
       onConfirm,
       onClear,
-      className
+      className,
+      scrimClassName,
+      slots,
+      ActionButtonComponent
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -14477,6 +14818,7 @@ var DatePickerModal = React.forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14498,7 +14840,8 @@ var DatePickerModal = React.forwardRef(
               onChange: handleSingleChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx(
             CalendarCore,
@@ -14510,7 +14853,8 @@ var DatePickerModal = React.forwardRef(
               onRangeChange: handleRangeChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -14522,7 +14866,8 @@ var DatePickerModal = React.forwardRef(
               showClear,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              onClear: handleClear
+              onClear: handleClear,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -14540,6 +14885,7 @@ function ModalOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -14560,7 +14906,7 @@ function ModalOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -14578,210 +14924,6 @@ function ModalOverlay({
   ] });
 }
 ModalOverlay.displayName = "ModalOverlay";
-var MODAL_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[360px]",
-  "[&_[data-modal-dialog]]:max-h-[90vh]",
-  "[&_[data-modal-dialog]]:overflow-y-auto",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-9",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Calendar header ───────────────────────────────────────────────────────
-  "[&_[data-calendar-header]]:flex",
-  "[&_[data-calendar-header]]:items-center",
-  "[&_[data-calendar-header]]:justify-between",
-  "[&_[data-calendar-header]]:px-3",
-  "[&_[data-calendar-header]]:py-2",
-  "[&_[data-calendar-title]]:flex",
-  "[&_[data-calendar-title]]:items-center",
-  "[&_[data-calendar-title]]:gap-0.5",
-  "[&_[data-calendar-title]]:bg-transparent",
-  "[&_[data-calendar-title]]:border-none",
-  "[&_[data-calendar-title]]:cursor-pointer",
-  "[&_[data-calendar-title]]:rounded-full",
-  "[&_[data-calendar-title]]:px-2",
-  "[&_[data-calendar-title]]:py-1",
-  "[&_[data-calendar-title]]:transition-colors",
-  "[&_[data-calendar-title]]:duration-spring-standard-fast-effects",
-  "[&_[data-calendar-title]]:ease-spring-standard-fast-effects",
-  "[&_[data-calendar-title]:hover]:bg-on-surface/8",
-  "[&_[data-calendar-title]_h2]:text-label-large",
-  "[&_[data-calendar-title]_h2]:text-on-surface-variant",
-  "[&_[data-calendar-title]_h2]:m-0",
-  "[&_[data-calendar-title]_svg]:text-on-surface-variant",
-  "[&_[data-calendar-nav]]:flex",
-  "[&_[data-calendar-nav]]:items-center",
-  "[&_[data-calendar-nav]]:gap-1",
-  "[&_[data-nav-button]]:w-10",
-  "[&_[data-nav-button]]:h-10",
-  "[&_[data-nav-button]]:rounded-full",
-  "[&_[data-nav-button]]:flex",
-  "[&_[data-nav-button]]:items-center",
-  "[&_[data-nav-button]]:justify-center",
-  "[&_[data-nav-button]]:text-on-surface-variant",
-  "[&_[data-nav-button]]:bg-transparent",
-  "[&_[data-nav-button]]:border-none",
-  "[&_[data-nav-button]]:transition-colors",
-  "[&_[data-nav-button]]:duration-spring-standard-fast-effects",
-  "[&_[data-nav-button]]:ease-spring-standard-fast-effects",
-  "[&_[data-nav-button]:hover]:bg-on-surface/8",
-  "[&_[data-nav-button]:focus-visible]:bg-on-surface/10",
-  "[&_[data-nav-button]:disabled]:text-on-surface/38",
-  "[&_[data-nav-button]:disabled]:cursor-not-allowed",
-  // ── Calendar cells ────────────────────────────────────────────────────────
-  "[&_td>div]:w-[48px]",
-  "[&_td>div]:h-[48px]",
-  "[&_td>div]:rounded-full",
-  "[&_td>div]:flex",
-  "[&_td>div]:items-center",
-  "[&_td>div]:justify-center",
-  "[&_td>div]:text-body-large",
-  "[&_td>div]:text-on-surface",
-  "[&_td>div]:relative",
-  "[&_td>div]:cursor-pointer",
-  "[&_td>div]:select-none",
-  "[&_td>div]:transition-colors",
-  "[&_td>div]:duration-spring-standard-fast-effects",
-  "[&_td>div]:ease-spring-standard-fast-effects",
-  "[&_td>div[data-today]:not([data-selected])]:text-primary",
-  "[&_td>div[data-today]:not([data-selected])]:border",
-  "[&_td>div[data-today]:not([data-selected])]:border-primary",
-  "[&_td>div[data-selected]]:bg-primary",
-  "[&_td>div[data-selected]]:text-on-primary",
-  "[&_td>div[data-range-middle]]:bg-secondary-container",
-  "[&_td>div[data-range-middle]]:text-on-secondary-container",
-  "[&_td>div[data-range-middle]]:rounded-none",
-  "[&_td>div[data-outside-month]:not([data-selected])]:text-on-surface-variant",
-  "[&_td>div[data-disabled]]:text-on-surface/38",
-  "[&_td>div[data-disabled]]:cursor-not-allowed",
-  "[&_td>div:not([data-selected]):not([data-today]):not([data-disabled]):hover]:bg-on-surface/8",
-  "[&_td>div[data-today]:not([data-selected]):hover]:bg-primary/8",
-  "[&_td>div[data-selected]:hover]:shadow-sm",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-2",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-on-surface",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:bg-on-surface/10",
-  "[&_td>div[data-today][data-focus-visible]:not([data-selected])]:bg-primary/10",
-  // ── Weekday labels ────────────────────────────────────────────────────────
-  "[&_th]:text-body-small",
-  "[&_th]:text-on-surface",
-  "[&_th]:font-normal",
-  "[&_th]:w-[48px]",
-  "[&_th]:h-[48px]",
-  // ── Year grid ─────────────────────────────────────────────────────────────
-  "[&_[data-year-grid]]:grid",
-  "[&_[data-year-grid]]:grid-cols-3",
-  "[&_[data-year-grid]]:gap-2",
-  "[&_[data-year-grid]]:px-3",
-  "[&_[data-year-grid]]:py-2",
-  "[&_[data-year-grid]]:max-h-[280px]",
-  "[&_[data-year-grid]]:overflow-y-auto",
-  "[&_[data-year-grid]]:place-items-center",
-  "[&_[data-year-item]]:w-[88px]",
-  "[&_[data-year-item]]:h-[52px]",
-  "[&_[data-year-item]]:rounded-full",
-  "[&_[data-year-item]]:flex",
-  "[&_[data-year-item]]:items-center",
-  "[&_[data-year-item]]:justify-center",
-  "[&_[data-year-item]]:text-body-large",
-  "[&_[data-year-item]]:text-on-surface-variant",
-  "[&_[data-year-item]]:bg-transparent",
-  "[&_[data-year-item]]:border-none",
-  "[&_[data-year-item]]:cursor-pointer",
-  "[&_[data-year-item]]:transition-colors",
-  "[&_[data-year-item]]:duration-spring-standard-fast-effects",
-  "[&_[data-year-item]]:ease-spring-standard-fast-effects",
-  "[&_[data-year-item]:hover]:bg-on-surface/8",
-  "[&_[data-year-item][data-selected]]:bg-primary",
-  "[&_[data-year-item][data-selected]]:text-on-primary",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:min-h-12",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8",
-  "[&_[data-action]:focus-visible]:ring-2",
-  "[&_[data-action]:focus-visible]:ring-primary",
-  "[&_[data-action]:focus-visible]:bg-primary/10"
-].join(" ");
-var MODAL_MOTION_STYLES = [
-  // ── Modal container enter ──────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:transition-[transform,opacity]",
-  "[&_[data-modal-dialog]]:duration-medium2",
-  "[&_[data-modal-dialog]]:ease-standard-decelerate",
-  // ── Modal container exit ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog][data-exiting]]:duration-medium1",
-  "[&_[data-modal-dialog][data-exiting]]:ease-standard-accelerate",
-  // ── Calendar month slide ───────────────────────────────────────────────────
-  "[&_table]:transition-transform",
-  "[&_table]:duration-medium1",
-  "[&_table]:ease-emphasized-decelerate",
-  // ── Cell selection animation (scale + background) ──────────────────────────
-  "[&_td>div[data-selected]]:transition-[background-color,transform]",
-  "[&_td>div[data-selected]]:duration-short2",
-  "[&_td>div[data-selected]]:ease-standard",
-  // ── State layer opacity ────────────────────────────────────────────────────
-  "[&_td>div::after]:transition-opacity",
-  "[&_td>div::after]:duration-short1",
-  "[&_td>div::after]:ease-standard"
-].join(" ");
 var DatePickerModalStyled = React.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -14792,11 +14934,20 @@ var DatePickerModalStyled = React.forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal" }),
-          MODAL_STYLES,
-          !reducedMotion && MODAL_MOTION_STYLES,
+          modalDialogVariants({ variant: "modal" }),
+          MODAL_CONTENT_STRUCTURAL,
+          !reducedMotion && MODAL_DIALOG_MOTION,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14943,7 +15094,9 @@ var DatePickerModalInput = React.forwardRef(
       onCancel,
       onConfirm,
       onModeToggle,
-      className
+      className,
+      scrimClassName,
+      ActionButtonComponent
     } = props;
     const internalRef = React.useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -15102,6 +15255,7 @@ var DatePickerModalInput = React.forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -15164,7 +15318,8 @@ var DatePickerModalInput = React.forwardRef(
               confirmLabel,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              isConfirmDisabled: !isFormValid
+              isConfirmDisabled: !isFormValid,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -15182,6 +15337,7 @@ function ModalInputOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -15202,7 +15358,7 @@ function ModalInputOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -15220,98 +15376,6 @@ function ModalInputOverlay({
   ] });
 }
 ModalInputOverlay.displayName = "ModalInputOverlay";
-var MODAL_INPUT_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[328px]",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-4",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Date input fields ─────────────────────────────────────────────────────
-  "[&_[data-date-input-field]]:px-6",
-  "[&_[data-date-input-field]]:py-2",
-  "[&_[data-date-input-field]_[data-field]]:flex",
-  "[&_[data-date-input-field]_[data-field]]:items-center",
-  "[&_[data-date-input-field]_[data-field]]:border",
-  "[&_[data-date-input-field]_[data-field]]:border-outline",
-  "[&_[data-date-input-field]_[data-field]]:rounded-sm",
-  "[&_[data-date-input-field]_[data-field]]:px-4",
-  "[&_[data-date-input-field]_[data-field]]:py-3",
-  "[&_[data-date-input-field]_[data-field]]:text-body-large",
-  "[&_[data-date-input-field]_[data-field]]:text-on-surface",
-  "[&_[data-date-input-field]_[data-segment]]:outline-none",
-  "[&_[data-date-input-field]_[data-segment][data-placeholder]]:text-on-surface-variant",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-primary",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-2",
-  "[&_[data-date-input-field][data-invalid]_[data-field]]:border-error",
-  "[&_[data-date-input-field]_[data-label]]:text-body-small",
-  "[&_[data-date-input-field]_[data-label]]:text-on-surface-variant",
-  "[&_[data-date-input-field]_[data-error-message]]:text-body-small",
-  "[&_[data-date-input-field]_[data-error-message]]:text-error",
-  "[&_[data-date-input-field]_[data-error-message]]:mt-1",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8"
-].join(" ");
 var DatePickerModalInputStyled = React.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -15321,10 +15385,12 @@ var DatePickerModalInputStyled = React.forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal-input" }),
-          MODAL_INPUT_STYLES,
+          modalDialogVariants({ variant: "modal-input" }),
+          MODAL_INPUT_CONTENT_STRUCTURAL,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -15540,6 +15606,12 @@ exports.SnackbarHeadless = SnackbarHeadless;
 exports.SnackbarProvider = SnackbarProvider;
 exports.SplitButton = SplitButton;
 exports.SplitButtonHeadless = SplitButtonHeadless;
+exports.StyledActionButton = StyledActionButton;
+exports.StyledCalendarCell = StyledCalendarCell;
+exports.StyledCalendarTitle = StyledCalendarTitle;
+exports.StyledNavButton = StyledNavButton;
+exports.StyledWeekday = StyledWeekday;
+exports.StyledYearItem = StyledYearItem;
 exports.Switch = Switch;
 exports.TYPOGRAPHY_ELEMENT_MAP = TYPOGRAPHY_ELEMENT_MAP;
 exports.TYPOGRAPHY_USAGE = TYPOGRAPHY_USAGE;
@@ -15555,6 +15627,10 @@ exports.Tooltip = Tooltip;
 exports.TooltipOverlayHeadless = TooltipOverlayHeadless;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TooltipTriggerHeadless = TooltipTriggerHeadless;
+exports.actionButtonFocusRingVariants = actionButtonFocusRingVariants;
+exports.actionButtonStateLayerVariants = actionButtonStateLayerVariants;
+exports.actionButtonVariants = actionButtonVariants;
+exports.actionRowVariants = actionRowVariants;
 exports.applyStateLayer = applyStateLayer;
 exports.badgeVariants = badgeVariants2;
 exports.bottomSheetAnimationVariants = bottomSheetAnimationVariants;
@@ -15565,7 +15641,15 @@ exports.bottomSheetVariants = bottomSheetVariants;
 exports.buttonGroupFocusRingVariants = buttonGroupFocusRingVariants;
 exports.buttonGroupRootVariants = buttonGroupRootVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
+exports.calendarCellFocusRingVariants = calendarCellFocusRingVariants;
+exports.calendarCellStateLayerVariants = calendarCellStateLayerVariants;
 exports.calendarCellVariants = calendarCellVariants;
+exports.calendarDividerVariants = calendarDividerVariants;
+exports.calendarHeaderVariants = calendarHeaderVariants;
+exports.calendarTitleIconVariants = calendarTitleIconVariants;
+exports.calendarTitleStateLayerVariants = calendarTitleStateLayerVariants;
+exports.calendarTitleTextVariants = calendarTitleTextVariants;
+exports.calendarTitleVariants = calendarTitleVariants;
 exports.cardVariants = cardVariants;
 exports.chipVariants = chipVariants;
 exports.clockDialContainerVariants = clockDialContainerVariants;
@@ -15574,18 +15658,18 @@ exports.clockHandCenterVariants = clockHandCenterVariants;
 exports.clockHandHandleVariants = clockHandHandleVariants;
 exports.clockHandTrackVariants = clockHandTrackVariants;
 exports.cn = cn;
-exports.datePickerActionButtonVariants = datePickerActionButtonVariants;
-exports.datePickerActionVariants = datePickerActionVariants;
+exports.dateFieldVariants = dateFieldVariants;
+exports.dateInputErrorVariants = dateInputErrorVariants;
+exports.dateInputFieldGroupVariants = dateInputFieldGroupVariants;
+exports.dateInputFieldVariants = dateInputFieldVariants;
+exports.dateInputLabelVariants = dateInputLabelVariants;
 exports.datePickerContainerVariants = datePickerContainerVariants;
-exports.datePickerDividerVariants = datePickerDividerVariants;
-exports.datePickerHeaderVariants = datePickerHeaderVariants;
-exports.datePickerHeadlineVariants = datePickerHeadlineVariants;
-exports.datePickerNavVariants = datePickerNavVariants;
-exports.datePickerRangeIndicatorVariants = datePickerRangeIndicatorVariants;
-exports.datePickerScrimVariants = datePickerScrimVariants;
-exports.datePickerSupportingTextVariants = datePickerSupportingTextVariants;
-exports.datePickerWeekdayVariants = datePickerWeekdayVariants;
+exports.dateSegmentPlaceholderVariants = dateSegmentPlaceholderVariants;
 exports.dividerVariants = dividerVariants;
+exports.dockedFieldGroupVariants = dockedFieldGroupVariants;
+exports.dockedLabelVariants = dockedLabelVariants;
+exports.dockedTriggerStateLayerVariants = dockedTriggerStateLayerVariants;
+exports.dockedTriggerVariants = dockedTriggerVariants;
 exports.fabMenuItemFocusRingVariants = fabMenuItemFocusRingVariants;
 exports.fabMenuItemIconVariants = fabMenuItemIconVariants;
 exports.fabMenuItemLabelVariants = fabMenuItemLabelVariants;
@@ -15603,15 +15687,25 @@ exports.getTypographyClassName = getTypographyClassName;
 exports.getTypographyForElement = getTypographyForElement;
 exports.getTypographyStyle = getTypographyStyle;
 exports.getTypographyToken = getTypographyToken;
+exports.headlineVariants = headlineVariants;
 exports.hexToRgb = hexToRgb;
 exports.listItemVariants = listItemVariants;
 exports.listVariants = listVariants;
+exports.modalDialogVariants = modalDialogVariants;
+exports.modalHeaderVariants = modalHeaderVariants;
+exports.modeToggleStateLayerVariants = modeToggleStateLayerVariants;
+exports.modeToggleVariants = modeToggleVariants;
+exports.navButtonFocusRingVariants = navButtonFocusRingVariants;
+exports.navButtonStateLayerVariants = navButtonStateLayerVariants;
+exports.navButtonVariants = navButtonVariants;
 exports.periodSelectorContainerVariants = periodSelectorContainerVariants;
 exports.periodSelectorItemVariants = periodSelectorItemVariants;
+exports.popoverVariants = popoverVariants;
 exports.pxToRem = pxToRem;
 exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
 exports.richTooltipVariants = richTooltipVariants;
+exports.scrimVariants = scrimVariants2;
 exports.searchBarVariants = searchBarVariants;
 exports.searchViewHeaderVariants = searchViewHeaderVariants;
 exports.searchViewVariants = searchViewVariants;
@@ -15625,6 +15719,7 @@ exports.splitButtonContainerVariants = splitButtonContainerVariants;
 exports.splitButtonDropdownVariants = splitButtonDropdownVariants;
 exports.splitButtonPrimaryVariants = splitButtonPrimaryVariants;
 exports.splitButtonVariants = splitButtonVariants;
+exports.supportingTextVariants = supportingTextVariants;
 exports.timeInputFieldVariants = timeInputFieldVariants;
 exports.timePickerActionButtonVariants = timePickerActionButtonVariants;
 exports.timePickerActionRowVariants = timePickerActionRowVariants;
@@ -15643,7 +15738,11 @@ exports.useFABMenuContext = useFABMenuContext;
 exports.useMenuContext = useMenuContext;
 exports.useOptionalButtonGroup = useOptionalButtonGroup;
 exports.useSnackbar = useSnackbar;
+exports.weekdayVariants = weekdayVariants;
 exports.withOpacity = withOpacity;
+exports.yearGridVariants = yearGridVariants;
+exports.yearItemFocusRingVariants = yearItemFocusRingVariants;
+exports.yearItemStateLayerVariants = yearItemStateLayerVariants;
 exports.yearItemVariants = yearItemVariants;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map