@tinybigui/react 0.11.2 → 0.13.0

package/dist/index.js

@@ -5,7 +5,7 @@ export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import React, { forwardRef, useRef, createContext, useState, useCallback, useId, useMemo, useEffect, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
+import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState, useListState, useSearchFieldState, useMenuTriggerState, useSliderState, useDatePickerState, useDateFieldState, useRangeCalendarState, useCalendarState, useTooltipTriggerState } from 'react-stately';
 import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
@@ -4713,13 +4713,21 @@ var HeadlessDrawerItem = forwardRef(
 );
 HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
 var DividerHeadless = forwardRef(
-  ({ orientation = "horizontal", className }, ref) => {
+  ({ orientation = "horizontal", className, style }, ref) => {
     const { separatorProps } = useSeparator({
       orientation,
       elementType: orientation === "vertical" ? "div" : "hr"
     });
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsx("div", { ...separatorProps, ref, className });
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...separatorProps,
+          ref,
+          className,
+          style
+        }
+      );
     }
     return /* @__PURE__ */ jsx(
       "hr",
@@ -4727,32 +4735,46 @@ var DividerHeadless = forwardRef(
         ...separatorProps,
         "aria-orientation": "horizontal",
         ref,
-        className
+        className,
+        style
       }
     );
   }
 );
 DividerHeadless.displayName = "DividerHeadless";
 var dividerVariants = 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: {
@@ -4762,44 +4784,15 @@ var dividerVariants = cva(
   }
 );
 var Divider = forwardRef(
-  ({ orientation = "horizontal", inset = "none", label, className }, ref) => {
-    if (label) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          role: "group",
-          "aria-label": label,
-          className: cn("flex items-center gap-4", className),
-          children: [
-            /* @__PURE__ */ jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-on-surface-variant text-label-large whitespace-nowrap", children: label }),
-            /* @__PURE__ */ jsx(
-              DividerHeadless,
-              {
-                orientation: "horizontal",
-                className: cn(dividerVariants({ orientation: "horizontal", inset: "none" }), "flex-1")
-              }
-            )
-          ]
-        }
-      );
+  ({ orientation = "horizontal", inset = "none", className, style }, ref) => /* @__PURE__ */ jsx(
+    DividerHeadless,
+    {
+      ref,
+      orientation,
+      className: cn(dividerVariants({ orientation, inset }), className),
+      ...style !== void 0 && { style }
     }
-    return /* @__PURE__ */ jsx(
-      DividerHeadless,
-      {
-        ref,
-        orientation,
-        className: cn(dividerVariants({ orientation, inset }), className)
-      }
-    );
-  }
+  )
 );
 Divider.displayName = "Divider";
 var drawerVariants = cva(
@@ -13206,10 +13199,17 @@ function mapToInputProps(props) {
   const { orientation: _orientation, minuteStep: _minuteStep, ...inputProps } = props;
   return inputProps;
 }
-function CalendarCell({ date, state }) {
+function CalendarCell({
+  date,
+  state,
+  className,
+  children
+}) {
   const ref = useRef(null);
   const { cellProps, buttonProps, isSelected, isDisabled, isUnavailable, formattedDate } = useCalendarCell({ date }, state, ref);
-  const { focusProps, isFocusVisible, isFocused } = useFocusRing();
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const { hoverProps, isHovered } = useHover({ isDisabled: isDisabled || isUnavailable });
+  const { pressProps, isPressed } = usePress({ isDisabled: isDisabled || isUnavailable });
   const isCurrentDay = isSameDay(date, today(getLocalTimeZone()));
   const isOutsideMonth = date.month !== state.visibleRange.start.month || date.year !== state.visibleRange.start.year;
   let isRangeStart = false;
@@ -13221,28 +13221,38 @@ function CalendarCell({ date, state }) {
     isRangeEnd = isSameDay(date, range.end);
     isRangeMiddle = date.compare(range.start) > 0 && date.compare(range.end) < 0;
   }
-  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("td", { ...cellProps, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      ...mergeProps$1(buttonProps, focusProps),
+      ...mergeProps$1(buttonProps, focusProps, hoverProps, pressProps),
       ref,
+      className,
       "aria-current": isCurrentDay ? "date" : void 0,
-      "data-selected": isSelected || void 0,
-      "data-today": isCurrentDay || void 0,
-      "data-outside-month": isOutsideMonth || void 0,
-      "data-range-start": isRangeStart || void 0,
-      "data-range-end": isRangeEnd || void 0,
-      "data-range-middle": isRangeMiddle || void 0,
-      "data-disabled": isDisabled || void 0,
-      "data-unavailable": isUnavailable || void 0,
-      "data-focused": isFocused || void 0,
-      "data-focus-visible": isFocusVisible || void 0,
-      children: formattedDate
+      "data-selected": isSelected ? "" : void 0,
+      "data-today": isCurrentDay ? "" : void 0,
+      "data-outside-month": isOutsideMonth ? "" : void 0,
+      "data-range-start": isRangeStart ? "" : void 0,
+      "data-range-end": isRangeEnd ? "" : void 0,
+      "data-range-middle": isRangeMiddle ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-unavailable": isUnavailable ? "" : void 0,
+      "data-focus-visible": isFocusVisible ? "" : void 0,
+      "data-hovered": isHovered ? "" : void 0,
+      "data-pressed": isPressed ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10", children: formattedDate }),
+        children
+      ]
     }
   ) });
 }
 CalendarCell.displayName = "CalendarCell";
-function CalendarGrid({ state, firstDayOfWeek }) {
+function CalendarGrid({
+  state,
+  firstDayOfWeek,
+  CellComponent = CalendarCell,
+  WeekdayComponent
+}) {
   const { locale } = useLocale();
   const gridOptions = firstDayOfWeek ? { firstDayOfWeek } : {};
   const { gridProps, headerProps, weekDays } = useCalendarGrid(gridOptions, state);
@@ -13252,9 +13262,11 @@ function CalendarGrid({ state, firstDayOfWeek }) {
     firstDayOfWeek ?? void 0
   );
   return /* @__PURE__ */ jsxs("table", { ...gridProps, children: [
-    /* @__PURE__ */ jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx("th", { role: "columnheader", children: day }, index)) }) }),
+    /* @__PURE__ */ jsx("thead", { ...headerProps, "aria-hidden": void 0, children: /* @__PURE__ */ jsx("tr", { children: weekDays.map(
+      (day, index) => WeekdayComponent ? /* @__PURE__ */ jsx("th", { role: "columnheader", children: /* @__PURE__ */ jsx(WeekdayComponent, { label: day }) }, index) : /* @__PURE__ */ jsx("th", { role: "columnheader", children: day }, index)
+    ) }) }),
     /* @__PURE__ */ jsx("tbody", { children: [...new Array(weeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
+      (date, i) => date ? /* @__PURE__ */ jsx(CellComponent, { state, date }, i) : /* @__PURE__ */ jsx("td", {}, i)
     ) }, weekIndex)) })
   ] });
 }
@@ -13285,12 +13297,32 @@ function ChevronRightIcon() {
 function DropdownArrowIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5z" }) });
 }
+function DefaultTitle({ title, onClick, showDropdownIndicator }) {
+  if (onClick) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "data-calendar-title": true,
+        "aria-label": `${title}, click to select year`,
+        children: [
+          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsx(DropdownArrowIcon, {})
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }) });
+}
 function CalendarHeader({
   title,
   prevButtonProps,
   nextButtonProps,
   onTitleClick,
-  showDropdownIndicator = false
+  showDropdownIndicator = false,
+  NavButtonComponent = NavigationButton,
+  TitleComponent = DefaultTitle
 }) {
   const enhancedPrevProps = {
     ...prevButtonProps,
@@ -13301,22 +13333,17 @@ function CalendarHeader({
     "aria-label": "Next month"
   };
   return /* @__PURE__ */ jsxs("div", { "data-calendar-header": true, children: [
-    onTitleClick ? /* @__PURE__ */ jsxs(
-      "button",
+    /* @__PURE__ */ jsx(
+      TitleComponent,
       {
-        type: "button",
+        title,
         onClick: onTitleClick,
-        "data-calendar-title": true,
-        "aria-label": `${title}, click to select year`,
-        children: [
-          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }),
-          showDropdownIndicator && /* @__PURE__ */ jsx(DropdownArrowIcon, {})
-        ]
+        showDropdownIndicator
       }
-    ) : /* @__PURE__ */ jsx("div", { "data-calendar-title": true, children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", children: title }) }),
+    ),
     /* @__PURE__ */ jsxs("div", { "data-calendar-nav": true, children: [
-      /* @__PURE__ */ jsx(NavigationButton, { ...enhancedPrevProps, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
-      /* @__PURE__ */ jsx(NavigationButton, { ...enhancedNextProps, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
+      /* @__PURE__ */ jsx(NavButtonComponent, { ...enhancedPrevProps, children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }),
+      /* @__PURE__ */ jsx(NavButtonComponent, { ...enhancedNextProps, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
     ] })
   ] });
 }
@@ -13335,7 +13362,8 @@ function YearGrid({
   selectedYear,
   onYearSelect,
   minYear,
-  maxYear
+  maxYear,
+  YearItemComponent
 }) {
   const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
   const startYear = minYear ?? currentYear - YEAR_RANGE_OFFSET;
@@ -13361,6 +13389,17 @@ function YearGrid({
       },
       children: years.map((year) => {
         const isSelected = year === selectedYear;
+        if (YearItemComponent) {
+          return /* @__PURE__ */ jsx(
+            YearItemComponent,
+            {
+              year,
+              isSelected,
+              onSelect: onYearSelect
+            },
+            year
+          );
+        }
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -13368,7 +13407,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
@@ -13424,6 +13463,7 @@ function SingleCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsx(
       CalendarHeader,
@@ -13432,14 +13472,25 @@ function SingleCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsx(
+    currentView === "day" ? /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13499,6 +13550,7 @@ function RangeCalendarInner({ calendarRef, ...props }) {
     setCurrentView("day");
     props.onViewChange?.("day");
   };
+  const slots = props.slots ?? {};
   return /* @__PURE__ */ jsxs("div", { ...calendarProps, ref: calendarRef, className: props.className, "data-view": currentView, children: [
     /* @__PURE__ */ jsx(
       CalendarHeader,
@@ -13507,14 +13559,25 @@ function RangeCalendarInner({ calendarRef, ...props }) {
         prevButtonProps: currentView === "day" ? prevButtonProps : { isDisabled: true },
         nextButtonProps: currentView === "day" ? nextButtonProps : { isDisabled: true },
         onTitleClick: handleTitleClick,
-        showDropdownIndicator: true
+        showDropdownIndicator: true,
+        ...slots.NavButtonComponent ? { NavButtonComponent: slots.NavButtonComponent } : {},
+        ...slots.TitleComponent ? { TitleComponent: slots.TitleComponent } : {}
       }
     ),
-    currentView === "day" ? /* @__PURE__ */ jsx(CalendarGrid, { state, firstDayOfWeek: firstDay }) : /* @__PURE__ */ jsx(
+    currentView === "day" ? /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        state,
+        firstDayOfWeek: firstDay,
+        ...slots.CellComponent ? { CellComponent: slots.CellComponent } : {},
+        ...slots.WeekdayComponent ? { WeekdayComponent: slots.WeekdayComponent } : {}
+      }
+    ) : /* @__PURE__ */ jsx(
       YearGrid,
       {
         selectedYear: state.focusedDate.year,
         onYearSelect: handleYearSelect,
+        ...slots.YearItemComponent ? { YearItemComponent: slots.YearItemComponent } : {},
         ...props.minValue ? { minYear: props.minValue.year } : {},
         ...props.maxValue ? { maxYear: props.maxValue.year } : {}
       }
@@ -13532,6 +13595,24 @@ var CalendarCore = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(SingleCalendarInner, { ...rest, calendarRef: ref }, "single");
 });
 CalendarCore.displayName = "CalendarCore";
+function HeadlessActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  return /* @__PURE__ */ jsx("button", { ...buttonProps, ref, type: "button", "data-action": dataAction, children: label });
+}
 function DatePickerActions({
   cancelLabel = "Cancel",
   confirmLabel = "OK",
@@ -13541,37 +13622,38 @@ function DatePickerActions({
   onCancel,
   onConfirm,
   onClear,
-  className
+  className,
+  ButtonComponent = HeadlessActionButton
 }) {
-  const clearRef = useRef(null);
-  const cancelRef = useRef(null);
-  const confirmRef = useRef(null);
-  const { buttonProps: clearButtonProps } = useButton(
-    {
-      "aria-label": clearLabel,
-      ...onClear ? { onPress: onClear } : {}
-    },
-    clearRef
-  );
-  const { buttonProps: cancelButtonProps } = useButton(
-    {
-      "aria-label": cancelLabel,
-      ...onCancel ? { onPress: onCancel } : {}
-    },
-    cancelRef
-  );
-  const { buttonProps: confirmButtonProps } = useButton(
-    {
-      "aria-label": confirmLabel,
-      isDisabled: isConfirmDisabled,
-      ...onConfirm ? { onPress: onConfirm } : {}
-    },
-    confirmRef
-  );
   return /* @__PURE__ */ jsxs("div", { className, "data-actions": true, children: [
-    showClear && /* @__PURE__ */ jsx("button", { ...clearButtonProps, ref: clearRef, type: "button", "data-action": "clear", children: clearLabel }),
-    /* @__PURE__ */ jsx("button", { ...cancelButtonProps, ref: cancelRef, type: "button", "data-action": "cancel", children: cancelLabel }),
-    /* @__PURE__ */ jsx("button", { ...confirmButtonProps, ref: confirmRef, type: "button", "data-action": "confirm", children: confirmLabel })
+    showClear && /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: clearLabel,
+        "aria-label": clearLabel,
+        onPress: onClear,
+        "data-action": "clear"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: cancelLabel,
+        "aria-label": cancelLabel,
+        onPress: onCancel,
+        "data-action": "cancel"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ButtonComponent,
+      {
+        label: confirmLabel,
+        "aria-label": confirmLabel,
+        onPress: onConfirm,
+        isDisabled: isConfirmDisabled,
+        "data-action": "confirm"
+      }
+    )
   ] });
 }
 DatePickerActions.displayName = "DatePickerActions";
@@ -13610,21 +13692,26 @@ function CalendarTriggerIcon() {
 }
 function PopoverContent({
   popoverRef,
-  triggerRef,
+  anchorRef,
   state,
   dialogProps,
   calendarProps,
   cancelLabel,
   confirmLabel,
   onCancel,
-  onConfirm
+  onConfirm,
+  slots,
+  ActionButtonComponent,
+  popoverClassName
 }) {
   const { popoverProps } = usePopover(
     {
       popoverRef,
-      triggerRef,
+      triggerRef: anchorRef,
       placement: "bottom start",
-      offset: 4
+      offset: 4,
+      shouldFlip: true,
+      containerPadding: 12
     },
     state
   );
@@ -13638,7 +13725,10 @@ function PopoverContent({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [state]);
-  return /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, children: [
+  if (typeof document === "undefined") {
+    return null;
+  }
+  const content = /* @__PURE__ */ jsxs("div", { ...popoverProps, ref: popoverRef, "data-popover": true, className: cn(popoverClassName), children: [
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() }),
     /* @__PURE__ */ jsxs("div", { ...dialogProps, role: "dialog", children: [
       /* @__PURE__ */ jsx(
@@ -13653,7 +13743,8 @@ function PopoverContent({
             ...calendarProps.isReadOnly ? { isReadOnly: calendarProps.isReadOnly } : {},
             ...calendarProps.isDateUnavailable ? { isDateUnavailable: calendarProps.isDateUnavailable } : {}
           },
-          "aria-label": calendarProps["aria-label"] ?? "Calendar"
+          "aria-label": calendarProps["aria-label"] ?? "Calendar",
+          ...slots ? { slots } : {}
         }
       ),
       /* @__PURE__ */ jsx(
@@ -13662,12 +13753,14 @@ function PopoverContent({
           cancelLabel,
           confirmLabel,
           onCancel,
-          onConfirm
+          onConfirm,
+          ...ActionButtonComponent !== void 0 ? { ButtonComponent: ActionButtonComponent } : {}
         }
       )
     ] }),
     /* @__PURE__ */ jsx(DismissButton, { onDismiss: () => state.close() })
   ] });
+  return createPortal(content, document.body);
 }
 var DatePickerDocked = forwardRef(
   (props, forwardedRef) => {
@@ -13677,11 +13770,15 @@ var DatePickerDocked = forwardRef(
       onCancel,
       onConfirm,
       className,
+      popoverClassName,
+      slots,
+      ActionButtonComponent,
       ...datePickerProps
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
     const triggerRef = useRef(null);
+    const groupRef = useRef(null);
     const popoverRef = useRef(null);
     const stateProps = {
       ...datePickerProps.value !== void 0 ? { value: datePickerProps.value } : {},
@@ -13712,7 +13809,14 @@ var DatePickerDocked = forwardRef(
       dialogProps,
       calendarProps
     } = useDatePicker(stateProps, state, ref);
-    const { buttonProps: iconButtonProps } = useButton(triggerButtonAriaProps, triggerRef);
+    const { buttonProps: iconButtonProps, isPressed: isTriggerPressed } = useButton(
+      triggerButtonAriaProps,
+      triggerRef
+    );
+    const { isFocusVisible: isTriggerFocusVisible, focusProps: triggerFocusProps } = useFocusRing();
+    const { isHovered: isTriggerHovered, hoverProps: triggerHoverProps } = useHover({
+      isDisabled: datePickerProps.isDisabled ?? false
+    });
     const valueBeforeOpenRef = useRef(null);
     useEffect(() => {
       if (state.isOpen) {
@@ -13741,26 +13845,44 @@ var DatePickerDocked = forwardRef(
         ref,
         className,
         "data-variant": "docked",
-        "data-open": state.isOpen ?? void 0,
-        "data-disabled": datePickerProps.isDisabled ?? void 0,
+        "data-open": state.isOpen ? "" : void 0,
+        "data-disabled": datePickerProps.isDisabled ? "" : void 0,
         children: [
           datePickerProps.label && /* @__PURE__ */ jsx("label", { ...labelProps, "data-label": true, children: datePickerProps.label }),
-          /* @__PURE__ */ jsxs("div", { ...groupProps, "data-field-group": true, children: [
+          /* @__PURE__ */ jsxs("div", { ...groupProps, ref: groupRef, "data-field-group": true, children: [
             /* @__PURE__ */ jsx(PickerDateField, { fieldProps }),
-            /* @__PURE__ */ jsx("button", { ...iconButtonProps, ref: triggerRef, type: "button", "data-trigger": true, children: /* @__PURE__ */ jsx(CalendarTriggerIcon, {}) })
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ...mergeProps$1(iconButtonProps, triggerFocusProps, triggerHoverProps),
+                ref: triggerRef,
+                type: "button",
+                "data-trigger": true,
+                ...getInteractionDataAttributes({
+                  isHovered: isTriggerHovered,
+                  isFocusVisible: isTriggerFocusVisible,
+                  isPressed: isTriggerPressed,
+                  isDisabled: datePickerProps.isDisabled ?? false
+                }),
+                children: /* @__PURE__ */ jsx(CalendarTriggerIcon, {})
+              }
+            )
           ] }),
           state.isOpen && /* @__PURE__ */ jsx(
             PopoverContent,
             {
               popoverRef,
-              triggerRef,
+              anchorRef: groupRef,
               state,
               dialogProps,
               calendarProps,
               cancelLabel,
               confirmLabel,
               onCancel: handleCancel,
-              onConfirm: handleConfirm
+              onConfirm: handleConfirm,
+              ...slots !== void 0 ? { slots } : {},
+              ...ActionButtonComponent !== void 0 ? { ActionButtonComponent } : {},
+              ...popoverClassName !== void 0 ? { popoverClassName } : {}
             }
           )
         ]
@@ -13769,298 +13891,570 @@ var DatePickerDocked = forwardRef(
   }
 );
 DatePickerDocked.displayName = "DatePickerDocked";
-var datePickerContainerVariants = cva(
+var datePickerContainerVariants = cva("", {
+  variants: {
+    variant: {
+      docked: "w-[360px]",
+      // NOTE: measurement-derived (360dp fixed width); permitted exception
+      modal: [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[360px]"
+        // NOTE: measurement-derived (360dp fixed width); permitted exception
+      ],
+      "modal-input": [
+        "bg-surface-container-high",
+        "rounded-3xl",
+        "overflow-hidden",
+        "w-[328px]"
+        // NOTE: measurement-derived (328dp); permitted exception
+      ]
+    }
+  },
+  defaultVariants: {
+    variant: "docked"
+  }
+});
+var calendarCellVariants = cva([
+  // Layout — 48dp circle touch target
+  "relative flex items-center justify-center",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived (48dp touch target); permitted exception
+  "rounded-full",
+  "select-none cursor-pointer",
+  "overflow-hidden",
+  // clips state layer to circle
+  // Typography
+  "text-body-large",
+  // Base text color
+  "text-on-surface",
+  // Effects transition for color changes (not spatial — no overshoot)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Remove default focus outline — handled via calendarCellFocusRingVariants
+  "focus-visible:outline-none",
+  // Carries group scope for child slots
+  "group/calendar-cell",
+  // ── Today (unselected) ────────────────────────────────────────────────────
+  "data-[today]:not([data-selected]):text-primary",
+  "data-[today]:not([data-selected]):border data-[today]:not([data-selected]):border-primary",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Range start/end: half-pill shape (right-flat for start, left-flat for end) ──
+  "data-[range-start]:rounded-r-none",
+  "data-[range-end]:rounded-l-none",
+  // ── Range middle ──────────────────────────────────────────────────────────
+  "data-[range-middle]:bg-secondary-container",
+  "data-[range-middle]:text-on-secondary-container",
+  "data-[range-middle]:rounded-none",
+  // ── Outside month ─────────────────────────────────────────────────────────
+  "data-[outside-month]:not([data-selected]):text-on-surface-variant",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed",
+  // ── Unavailable ───────────────────────────────────────────────────────────
+  "data-[unavailable]:text-on-surface/38 data-[unavailable]:line-through"
+]);
+var calendarCellStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit] opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition — spring standard fast (no spatial overshoot)
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer color switches to on-primary
+  "group-data-[selected]/calendar-cell:bg-on-primary",
+  // Range middle → state layer color switches to on-secondary-container
+  "group-data-[range-middle]/calendar-cell:bg-on-secondary-container",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/calendar-cell:opacity-8",
+  "group-data-[focus-visible]/calendar-cell:opacity-10",
+  "group-data-[pressed]/calendar-cell:opacity-10",
+  // No state layer for disabled/unavailable
+  "group-data-[disabled]/calendar-cell:hidden",
+  "group-data-[unavailable]/calendar-cell:hidden"
+]);
+var calendarCellFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/calendar-cell:opacity-100"
+]);
+var calendarHeaderVariants = cva([
+  "flex items-center justify-between",
+  "px-3 py-2"
+  // NOTE: measurement-derived padding; permitted exception
+]);
+var navButtonVariants = cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  // Typography
+  "text-on-surface-variant",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  // Focus outline removed — ring handled by navButtonFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Disabled — self-targeting
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  // Carries group scope
+  "group/nav-button"
+]);
+var navButtonStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/nav-button:opacity-8",
+  "group-data-[focus-visible]/nav-button:opacity-10",
+  "group-data-[pressed]/nav-button:opacity-10",
+  "group-data-[disabled]/nav-button:hidden"
+]);
+var navButtonFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/nav-button:opacity-100"
+]);
+var calendarTitleVariants = cva([
+  "relative flex items-center gap-0.5",
+  "bg-transparent border-none cursor-pointer",
+  "rounded-full px-2 py-1",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/calendar-title"
+]);
+var calendarTitleTextVariants = cva([
+  "text-label-large text-on-surface-variant m-0 pointer-events-none"
+]);
+var calendarTitleIconVariants = cva(["text-on-surface-variant pointer-events-none"]);
+var calendarTitleStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/calendar-title:opacity-8",
+  "group-data-[focus-visible]/calendar-title:opacity-10",
+  "group-data-[pressed]/calendar-title:opacity-10"
+]);
+var yearGridVariants = cva([
+  "grid grid-cols-3 gap-2",
+  "px-3 py-2",
+  "max-h-[280px] overflow-y-auto",
+  // NOTE: measurement-derived max height; permitted exception
+  "place-items-center"
+]);
+var yearItemVariants = cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "w-[88px] h-[52px]",
+  // NOTE: measurement-derived (88dp×52dp); permitted exception
+  "rounded-full",
+  "cursor-pointer select-none",
+  "overflow-hidden",
+  // Typography
+  "text-body-large",
+  // Reset
+  "bg-transparent border-none",
+  // Focus outline removed — ring handled by yearItemFocusRingVariants
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/year-item",
+  // ── Unselected (base) ─────────────────────────────────────────────────────
+  "text-on-surface-variant",
+  // ── Selected ──────────────────────────────────────────────────────────────
+  "data-[selected]:bg-primary data-[selected]:text-on-primary",
+  // ── Disabled ──────────────────────────────────────────────────────────────
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var yearItemStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected → state layer switches color
+  "group-data-[selected]/year-item:bg-on-primary",
+  // Interaction opacities
+  "group-data-[hovered]/year-item:opacity-8",
+  "group-data-[focus-visible]/year-item:opacity-10",
+  "group-data-[pressed]/year-item:opacity-10",
+  "group-data-[disabled]/year-item:hidden"
+]);
+var yearItemFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/year-item:opacity-100"
+]);
+var weekdayVariants = cva([
+  "text-body-small text-on-surface-variant font-normal",
+  "w-[48px] h-[48px]",
+  // NOTE: measurement-derived; permitted exception
+  "flex items-center justify-center",
+  "select-none"
+]);
+var calendarDividerVariants = cva(["border-t border-outline-variant w-full"]);
+var actionRowVariants = cva([
+  "flex items-center justify-end gap-2",
+  "px-3 py-2",
+  "h-12"
+  // NOTE: measurement-derived (48dp action row height); permitted exception
+]);
+var actionButtonVariants = cva([
+  // Layout
+  "relative flex items-center justify-center",
+  "rounded-full px-3 py-2 min-h-[48px]",
+  // NOTE: 48dp min touch; permitted exception
+  // Typography + color
+  "text-label-large text-primary",
+  // Reset
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  // Effects transition
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Group scope
+  "group/action-button",
+  // Disabled
+  "data-[disabled]:text-on-surface/38 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
+]);
+var actionButtonStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/action-button:opacity-8",
+  "group-data-[focus-visible]/action-button:opacity-10",
+  "group-data-[pressed]/action-button:opacity-10",
+  "group-data-[disabled]/action-button:hidden"
+]);
+var actionButtonFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-0 outline-primary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/action-button:opacity-100"
+]);
+var modalDialogVariants = cva(
   [
-    "bg-surface-container-high",
-    "rounded-3xl",
-    // NOTE: shape.extra-large = 28dp; mapped via @theme token
-    "overflow-hidden"
+    "bg-surface-container-high rounded-3xl overflow-hidden",
+    "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+    "z-50",
+    "max-h-[90vh] overflow-y-auto"
   ],
   {
     variants: {
       variant: {
-        docked: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
         modal: "w-[360px]",
-        // NOTE: measurement-derived value from MD3 spec (360dp fixed width); permitted exception
+        // NOTE: measurement-derived; permitted exception
         "modal-input": "w-[328px]"
-        // NOTE: measurement-derived value from MD3 spec (328dp); permitted exception
+        // NOTE: measurement-derived; permitted exception
       }
     },
     defaultVariants: {
-      variant: "docked"
+      variant: "modal"
     }
   }
 );
-var calendarCellVariants = cva(
-  [
-    "w-[48px]",
-    // NOTE: measurement-derived (48dp touch target); permitted exception
-    "h-[48px]",
-    // NOTE: measurement-derived (48dp); permitted exception
-    "rounded-full",
-    // shape.full = circle
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "relative",
-    "cursor-pointer",
-    "select-none",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      cellType: {
-        default: "text-on-surface",
-        today: "text-primary border border-primary",
-        selected: "bg-primary text-on-primary",
-        "selected-range-middle": "bg-secondary-container text-on-secondary-container rounded-none",
-        "outside-month": "text-on-surface-variant",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: ""
-      }
-    },
-    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 = cva(
-  ["px-6", "pt-4", "pb-3"],
+var modalHeaderVariants = cva([
+  "flex items-start justify-between",
+  "px-6 pt-4 pb-3"
   // NOTE: measurement-derived padding; permitted exception
-  {
-    variants: {
-      variant: {
-        docked: "h-[56px] px-3 flex items-center",
-        // NOTE: measurement-derived (56dp header); permitted exception
-        modal: "h-auto",
-        "modal-input": "h-auto"
-      }
-    },
-    defaultVariants: {
-      variant: "docked"
-    }
-  }
-);
-var datePickerNavVariants = cva(
-  ["text-on-surface-variant", "flex", "items-center", "gap-1"],
-  {
-    variants: {
-      state: {
-        enabled: "",
-        hovered: "bg-on-surface-variant/8",
-        focused: "bg-on-surface-variant/10",
-        pressed: "bg-on-surface-variant/10",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
-    },
-    defaultVariants: {
-      state: "enabled"
-    }
-  }
-);
-var yearItemVariants = cva(
-  [
-    "w-[88px]",
-    // NOTE: measurement-derived (88dp); permitted exception
-    "h-[52px]",
-    // NOTE: measurement-derived (52dp); permitted exception
-    "rounded-full",
-    // pill shape
-    "flex",
-    "items-center",
-    "justify-center",
-    "text-body-large",
-    "cursor-pointer",
-    "transition-colors",
-    "duration-spring-standard-fast-effects",
-    "ease-spring-standard-fast-effects"
-  ],
-  {
-    variants: {
-      selected: {
-        true: "bg-primary text-on-primary",
-        false: "text-on-surface-variant"
-      },
-      state: {
-        enabled: "",
-        hovered: "",
-        focused: "",
-        pressed: "",
-        disabled: "text-on-surface/38 cursor-not-allowed"
-      }
-    },
-    compoundVariants: [
-      {
-        selected: false,
-        state: "hovered",
-        className: "bg-on-surface-variant/8"
-      },
-      {
-        selected: false,
-        state: "focused",
-        className: "bg-on-surface-variant/10"
-      },
-      {
-        selected: true,
-        state: "hovered",
-        className: "bg-primary/90"
-      },
-      {
-        selected: true,
-        state: "focused",
-        className: "bg-primary/90"
-      }
-    ],
-    defaultVariants: {
-      selected: false,
-      state: "enabled"
-    }
-  }
-);
-var datePickerDividerVariants = cva(["border-outline-variant", "border-t", "w-full"]);
-var datePickerActionVariants = cva([
-  "flex",
-  "items-center",
-  "justify-end",
-  "gap-2",
-  "px-3",
-  "py-2",
-  "h-12"
-  // NOTE: measurement-derived (48dp action row height); permitted exception
 ]);
-var datePickerActionButtonVariants = cva([
-  "text-primary",
-  "text-label-large",
-  "rounded-full",
-  "px-3",
-  "py-2",
-  "transition-colors",
-  "duration-spring-standard-fast-effects",
-  "ease-spring-standard-fast-effects",
-  "hover:bg-primary/8",
-  "focus-visible:bg-primary/10",
-  "active:bg-primary/10"
+var headlineVariants = cva(["text-label-large text-on-surface-variant m-0"]);
+var supportingTextVariants = cva([
+  "text-headline-large text-on-surface mt-9 m-0"
+  // NOTE: measurement-derived mt; permitted exception
 ]);
-var datePickerWeekdayVariants = cva([
-  "text-body-small",
-  "text-on-surface",
-  "font-normal",
-  "w-[48px]",
-  // NOTE: measurement-derived (48dp column width); permitted exception
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp row height); permitted exception
-  "text-center"
+var modeToggleVariants = cva([
+  "relative flex items-center justify-center",
+  "w-12 h-12 rounded-full",
+  // NOTE: 48dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer self-end",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/mode-toggle"
 ]);
-var datePickerRangeIndicatorVariants = cva([
-  "bg-secondary-container",
-  "h-[48px]",
-  // NOTE: measurement-derived (48dp range indicator height); permitted exception
-  "rounded-none"
+var modeToggleStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/mode-toggle:opacity-8",
+  "group-data-[focus-visible]/mode-toggle:opacity-10",
+  "group-data-[pressed]/mode-toggle:opacity-10"
 ]);
-var datePickerHeadlineVariants = cva([], {
-  variants: {
-    variant: {
-      docked: "",
-      modal: ["text-headline-small", "text-on-surface"],
-      "modal-input": ["text-headline-small", "text-on-surface"]
-    }
-  },
-  defaultVariants: {
-    variant: "modal"
-  }
-});
-var datePickerSupportingTextVariants = cva([
-  "text-label-large",
-  "text-on-surface-variant"
+var scrimVariants2 = cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
 ]);
-var datePickerScrimVariants = cva([
-  "fixed",
-  "inset-0",
-  "z-40",
-  "bg-scrim",
-  "opacity-32",
-  "transition-opacity",
-  "duration-medium2",
-  "ease-standard"
+var dateInputFieldVariants = cva(["px-6 py-2"]);
+var dateInputFieldGroupVariants = cva([
+  "flex items-center",
+  "border border-outline rounded-sm",
+  "px-4 py-3",
+  // NOTE: measurement-derived; permitted exception
+  "text-body-large text-on-surface",
+  // Focus state (data-focused on parent wrapper)
+  "peer-data-[focused]:border-2 peer-data-[focused]:border-primary",
+  // Invalid state
+  "peer-data-[invalid]:border-error peer-data-[invalid]:border-2"
+]);
+var dateInputLabelVariants = cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateInputErrorVariants = cva(["text-body-small text-error mt-1"]);
+var dockedFieldGroupVariants = cva([
+  "flex items-center",
+  "border border-outline rounded",
+  "h-14",
+  // NOTE: measurement-derived (56dp); permitted exception
+  "px-3 gap-2",
+  "bg-transparent",
+  // Focus-within: promote to primary 2dp border
+  "focus-within:border-primary focus-within:border-2"
+]);
+var dockedTriggerVariants = cva([
+  "relative flex items-center justify-center",
+  "w-10 h-10 rounded-full",
+  // NOTE: 40dp; permitted exception
+  "text-on-surface-variant",
+  "bg-transparent border-none cursor-pointer",
+  "overflow-hidden",
+  "focus-visible:outline-none",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group/docked-trigger"
+]);
+var dockedTriggerStateLayerVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-full opacity-0",
+  "bg-on-surface-variant",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "group-data-[hovered]/docked-trigger:opacity-8",
+  "group-data-[focus-visible]/docked-trigger:opacity-10",
+  "group-data-[pressed]/docked-trigger:opacity-10"
+]);
+var popoverVariants = cva([
+  "bg-surface-container-high rounded-3xl",
+  "shadow-elevation-2 overflow-hidden",
+  "z-50 w-[360px]"
 ]);
-var CALENDAR_STYLES = [
-  // ── Label ─────────────────────────────────────────────────────────────────
+var dockedLabelVariants = cva(["text-body-small text-on-surface-variant block mb-1"]);
+var dateFieldVariants = cva([
+  "flex items-center flex-1",
+  "text-body-large text-on-surface"
+]);
+var dateSegmentPlaceholderVariants = cva(["text-on-surface-variant"]);
+function StyledCalendarCell({ date, state }) {
+  return /* @__PURE__ */ jsxs(CalendarCell, { date, state, className: cn(calendarCellVariants()), children: [
+    /* @__PURE__ */ jsx("span", { className: cn(calendarCellStateLayerVariants()), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: cn(calendarCellFocusRingVariants()), "aria-hidden": "true" })
+  ] });
+}
+StyledCalendarCell.displayName = "StyledCalendarCell";
+function StyledNavButton({
+  children,
+  isDisabled,
+  onPress,
+  "aria-label": ariaLabel
+}) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {},
+      ...ariaLabel ? { "aria-label": ariaLabel } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      className: cn(navButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(navButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(navButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10 flex items-center justify-center", children })
+      ]
+    }
+  );
+}
+StyledNavButton.displayName = "StyledNavButton";
+function StyledCalendarTitle({
+  title,
+  onClick,
+  showDropdownIndicator
+}) {
+  const ref = useRef(null);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({});
+  const { pressProps, isPressed } = usePress({});
+  if (onClick) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...mergeProps$1(focusProps, hoverProps, pressProps),
+        ref,
+        type: "button",
+        className: cn(calendarTitleVariants()),
+        "aria-label": `${title}, click to select year`,
+        onClick,
+        ...getInteractionDataAttributes({ isHovered, isFocusVisible, isPressed }),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn(calendarTitleStateLayerVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }),
+          showDropdownIndicator && /* @__PURE__ */ jsx("span", { className: cn(calendarTitleIconVariants()), children: /* @__PURE__ */ jsx(DropdownArrowIcon, {}) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(calendarTitleVariants(), "cursor-default"), children: /* @__PURE__ */ jsx("h2", { "aria-live": "polite", className: cn(calendarTitleTextVariants()), children: title }) });
+}
+StyledCalendarTitle.displayName = "StyledCalendarTitle";
+calendarHeaderVariants();
+function StyledYearItem({
+  year,
+  isSelected,
+  onSelect
+}) {
+  const ref = useRef(null);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({});
+  const { pressProps, isPressed } = usePress({});
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(focusProps, hoverProps, pressProps),
+      ref,
+      type: "button",
+      role: "gridcell",
+      "aria-selected": isSelected,
+      className: cn(yearItemVariants()),
+      onClick: () => onSelect(year),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isSelected
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(yearItemStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(yearItemFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10", children: year })
+      ]
+    }
+  );
+}
+StyledYearItem.displayName = "StyledYearItem";
+function StyledWeekday({ label }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(weekdayVariants()), children: label });
+}
+StyledWeekday.displayName = "StyledWeekday";
+function StyledActionButton({
+  label,
+  "aria-label": ariaLabel,
+  onPress,
+  isDisabled,
+  "data-action": dataAction
+}) {
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(
+    {
+      "aria-label": ariaLabel ?? label,
+      isDisabled: isDisabled ?? false,
+      ...onPress ? { onPress } : {}
+    },
+    ref
+  );
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const { isHovered, hoverProps } = useHover({ isDisabled: isDisabled ?? false });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...mergeProps$1(buttonProps, focusProps, hoverProps),
+      ref,
+      type: "button",
+      "data-action": dataAction,
+      className: cn(actionButtonVariants()),
+      ...getInteractionDataAttributes({
+        isHovered,
+        isFocusVisible,
+        isPressed,
+        isDisabled: isDisabled ?? false
+      }),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn(actionButtonStateLayerVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: cn(actionButtonFocusRingVariants()), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none relative z-10", children: label })
+      ]
+    }
+  );
+}
+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",
@@ -14072,15 +14466,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",
@@ -14088,178 +14483,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 = forwardRef(
   (props, ref) => {
@@ -14272,10 +14598,22 @@ var DatePickerDockedStyled = forwardRef(
         ...rest,
         className: cn(
           datePickerContainerVariants({ variant: "docked" }),
-          CALENDAR_STYLES,
-          !reducedMotion && DOCKED_MOTION_STYLES,
+          DOCKED_ROOT_STRUCTURAL,
           className
-        )
+        ),
+        popoverClassName: cn(
+          popoverVariants(),
+          DOCKED_POPOVER_PANEL_STRUCTURAL,
+          !reducedMotion && DOCKED_POPOVER_MOTION
+        ),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14348,7 +14686,10 @@ var DatePickerModal = forwardRef(
       onCancel,
       onConfirm,
       onClear,
-      className
+      className,
+      scrimClassName,
+      slots,
+      ActionButtonComponent
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -14472,6 +14813,7 @@ var DatePickerModal = forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsx(
@@ -14493,7 +14835,8 @@ var DatePickerModal = forwardRef(
               onChange: handleSingleChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ) : /* @__PURE__ */ jsx(
             CalendarCore,
@@ -14505,7 +14848,8 @@ var DatePickerModal = forwardRef(
               onRangeChange: handleRangeChange,
               ...minValue ? { minValue } : {},
               ...maxValue ? { maxValue } : {},
-              ...isDateUnavailable ? { isDateUnavailable } : {}
+              ...isDateUnavailable ? { isDateUnavailable } : {},
+              ...slots ? { slots } : {}
             }
           ),
           /* @__PURE__ */ jsx(
@@ -14517,7 +14861,8 @@ var DatePickerModal = forwardRef(
               showClear,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              onClear: handleClear
+              onClear: handleClear,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -14535,6 +14880,7 @@ function ModalOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -14555,7 +14901,7 @@ function ModalOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -14573,210 +14919,6 @@ function ModalOverlay({
   ] });
 }
 ModalOverlay.displayName = "ModalOverlay";
-var MODAL_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[360px]",
-  "[&_[data-modal-dialog]]:max-h-[90vh]",
-  "[&_[data-modal-dialog]]:overflow-y-auto",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-9",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Calendar header ───────────────────────────────────────────────────────
-  "[&_[data-calendar-header]]:flex",
-  "[&_[data-calendar-header]]:items-center",
-  "[&_[data-calendar-header]]:justify-between",
-  "[&_[data-calendar-header]]:px-3",
-  "[&_[data-calendar-header]]:py-2",
-  "[&_[data-calendar-title]]:flex",
-  "[&_[data-calendar-title]]:items-center",
-  "[&_[data-calendar-title]]:gap-0.5",
-  "[&_[data-calendar-title]]:bg-transparent",
-  "[&_[data-calendar-title]]:border-none",
-  "[&_[data-calendar-title]]:cursor-pointer",
-  "[&_[data-calendar-title]]:rounded-full",
-  "[&_[data-calendar-title]]:px-2",
-  "[&_[data-calendar-title]]:py-1",
-  "[&_[data-calendar-title]]:transition-colors",
-  "[&_[data-calendar-title]]:duration-spring-standard-fast-effects",
-  "[&_[data-calendar-title]]:ease-spring-standard-fast-effects",
-  "[&_[data-calendar-title]:hover]:bg-on-surface/8",
-  "[&_[data-calendar-title]_h2]:text-label-large",
-  "[&_[data-calendar-title]_h2]:text-on-surface-variant",
-  "[&_[data-calendar-title]_h2]:m-0",
-  "[&_[data-calendar-title]_svg]:text-on-surface-variant",
-  "[&_[data-calendar-nav]]:flex",
-  "[&_[data-calendar-nav]]:items-center",
-  "[&_[data-calendar-nav]]:gap-1",
-  "[&_[data-nav-button]]:w-10",
-  "[&_[data-nav-button]]:h-10",
-  "[&_[data-nav-button]]:rounded-full",
-  "[&_[data-nav-button]]:flex",
-  "[&_[data-nav-button]]:items-center",
-  "[&_[data-nav-button]]:justify-center",
-  "[&_[data-nav-button]]:text-on-surface-variant",
-  "[&_[data-nav-button]]:bg-transparent",
-  "[&_[data-nav-button]]:border-none",
-  "[&_[data-nav-button]]:transition-colors",
-  "[&_[data-nav-button]]:duration-spring-standard-fast-effects",
-  "[&_[data-nav-button]]:ease-spring-standard-fast-effects",
-  "[&_[data-nav-button]:hover]:bg-on-surface/8",
-  "[&_[data-nav-button]:focus-visible]:bg-on-surface/10",
-  "[&_[data-nav-button]:disabled]:text-on-surface/38",
-  "[&_[data-nav-button]:disabled]:cursor-not-allowed",
-  // ── Calendar cells ────────────────────────────────────────────────────────
-  "[&_td>div]:w-[48px]",
-  "[&_td>div]:h-[48px]",
-  "[&_td>div]:rounded-full",
-  "[&_td>div]:flex",
-  "[&_td>div]:items-center",
-  "[&_td>div]:justify-center",
-  "[&_td>div]:text-body-large",
-  "[&_td>div]:text-on-surface",
-  "[&_td>div]:relative",
-  "[&_td>div]:cursor-pointer",
-  "[&_td>div]:select-none",
-  "[&_td>div]:transition-colors",
-  "[&_td>div]:duration-spring-standard-fast-effects",
-  "[&_td>div]:ease-spring-standard-fast-effects",
-  "[&_td>div[data-today]:not([data-selected])]:text-primary",
-  "[&_td>div[data-today]:not([data-selected])]:border",
-  "[&_td>div[data-today]:not([data-selected])]:border-primary",
-  "[&_td>div[data-selected]]:bg-primary",
-  "[&_td>div[data-selected]]:text-on-primary",
-  "[&_td>div[data-range-middle]]:bg-secondary-container",
-  "[&_td>div[data-range-middle]]:text-on-secondary-container",
-  "[&_td>div[data-range-middle]]:rounded-none",
-  "[&_td>div[data-outside-month]:not([data-selected])]:text-on-surface-variant",
-  "[&_td>div[data-disabled]]:text-on-surface/38",
-  "[&_td>div[data-disabled]]:cursor-not-allowed",
-  "[&_td>div:not([data-selected]):not([data-today]):not([data-disabled]):hover]:bg-on-surface/8",
-  "[&_td>div[data-today]:not([data-selected]):hover]:bg-primary/8",
-  "[&_td>div[data-selected]:hover]:shadow-sm",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-2",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:ring-on-surface",
-  "[&_td>div[data-focus-visible]:not([data-selected]):not([data-today])]:bg-on-surface/10",
-  "[&_td>div[data-today][data-focus-visible]:not([data-selected])]:bg-primary/10",
-  // ── Weekday labels ────────────────────────────────────────────────────────
-  "[&_th]:text-body-small",
-  "[&_th]:text-on-surface",
-  "[&_th]:font-normal",
-  "[&_th]:w-[48px]",
-  "[&_th]:h-[48px]",
-  // ── Year grid ─────────────────────────────────────────────────────────────
-  "[&_[data-year-grid]]:grid",
-  "[&_[data-year-grid]]:grid-cols-3",
-  "[&_[data-year-grid]]:gap-2",
-  "[&_[data-year-grid]]:px-3",
-  "[&_[data-year-grid]]:py-2",
-  "[&_[data-year-grid]]:max-h-[280px]",
-  "[&_[data-year-grid]]:overflow-y-auto",
-  "[&_[data-year-grid]]:place-items-center",
-  "[&_[data-year-item]]:w-[88px]",
-  "[&_[data-year-item]]:h-[52px]",
-  "[&_[data-year-item]]:rounded-full",
-  "[&_[data-year-item]]:flex",
-  "[&_[data-year-item]]:items-center",
-  "[&_[data-year-item]]:justify-center",
-  "[&_[data-year-item]]:text-body-large",
-  "[&_[data-year-item]]:text-on-surface-variant",
-  "[&_[data-year-item]]:bg-transparent",
-  "[&_[data-year-item]]:border-none",
-  "[&_[data-year-item]]:cursor-pointer",
-  "[&_[data-year-item]]:transition-colors",
-  "[&_[data-year-item]]:duration-spring-standard-fast-effects",
-  "[&_[data-year-item]]:ease-spring-standard-fast-effects",
-  "[&_[data-year-item]:hover]:bg-on-surface/8",
-  "[&_[data-year-item][data-selected]]:bg-primary",
-  "[&_[data-year-item][data-selected]]:text-on-primary",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:min-h-12",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8",
-  "[&_[data-action]:focus-visible]:ring-2",
-  "[&_[data-action]:focus-visible]:ring-primary",
-  "[&_[data-action]:focus-visible]:bg-primary/10"
-].join(" ");
-var MODAL_MOTION_STYLES = [
-  // ── Modal container enter ──────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:transition-[transform,opacity]",
-  "[&_[data-modal-dialog]]:duration-medium2",
-  "[&_[data-modal-dialog]]:ease-standard-decelerate",
-  // ── Modal container exit ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog][data-exiting]]:duration-medium1",
-  "[&_[data-modal-dialog][data-exiting]]:ease-standard-accelerate",
-  // ── Calendar month slide ───────────────────────────────────────────────────
-  "[&_table]:transition-transform",
-  "[&_table]:duration-medium1",
-  "[&_table]:ease-emphasized-decelerate",
-  // ── Cell selection animation (scale + background) ──────────────────────────
-  "[&_td>div[data-selected]]:transition-[background-color,transform]",
-  "[&_td>div[data-selected]]:duration-short2",
-  "[&_td>div[data-selected]]:ease-standard",
-  // ── State layer opacity ────────────────────────────────────────────────────
-  "[&_td>div::after]:transition-opacity",
-  "[&_td>div::after]:duration-short1",
-  "[&_td>div::after]:ease-standard"
-].join(" ");
 var DatePickerModalStyled = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -14787,11 +14929,20 @@ var DatePickerModalStyled = forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal" }),
-          MODAL_STYLES,
-          !reducedMotion && MODAL_MOTION_STYLES,
+          modalDialogVariants({ variant: "modal" }),
+          MODAL_CONTENT_STRUCTURAL,
+          !reducedMotion && MODAL_DIALOG_MOTION,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        slots: {
+          CellComponent: StyledCalendarCell,
+          NavButtonComponent: StyledNavButton,
+          TitleComponent: StyledCalendarTitle,
+          YearItemComponent: StyledYearItem,
+          WeekdayComponent: StyledWeekday
+        },
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -14938,7 +15089,9 @@ var DatePickerModalInput = forwardRef(
       onCancel,
       onConfirm,
       onModeToggle,
-      className
+      className,
+      scrimClassName,
+      ActionButtonComponent
     } = props;
     const internalRef = useRef(null);
     const ref = forwardedRef ?? internalRef;
@@ -15097,6 +15250,7 @@ var DatePickerModalInput = forwardRef(
         headlineId,
         onClose: handleClose,
         ...className ? { className } : {},
+        ...scrimClassName ? { scrimClassName } : {},
         isOpen: state.isOpen,
         children: [
           /* @__PURE__ */ jsx(
@@ -15159,7 +15313,8 @@ var DatePickerModalInput = forwardRef(
               confirmLabel,
               onCancel: handleCancel,
               onConfirm: handleConfirm,
-              isConfirmDisabled: !isFormValid
+              isConfirmDisabled: !isFormValid,
+              ...ActionButtonComponent ? { ButtonComponent: ActionButtonComponent } : {}
             }
           )
         ]
@@ -15177,6 +15332,7 @@ function ModalInputOverlay({
   headlineId,
   onClose,
   className,
+  scrimClassName,
   isOpen,
   children
 }) {
@@ -15197,7 +15353,7 @@ function ModalInputOverlay({
     dialogRef
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { "data-scrim": true, "aria-hidden": "true", onClick: onClose, className: scrimClassName }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -15215,98 +15371,6 @@ function ModalInputOverlay({
   ] });
 }
 ModalInputOverlay.displayName = "ModalInputOverlay";
-var MODAL_INPUT_STYLES = [
-  // ── Container structure ───────────────────────────────────────────────────
-  "[&_[data-modal-dialog]]:bg-surface-container-high",
-  "[&_[data-modal-dialog]]:rounded-3xl",
-  "[&_[data-modal-dialog]]:overflow-hidden",
-  "[&_[data-modal-dialog]]:fixed",
-  "[&_[data-modal-dialog]]:top-1/2",
-  "[&_[data-modal-dialog]]:left-1/2",
-  "[&_[data-modal-dialog]]:-translate-x-1/2",
-  "[&_[data-modal-dialog]]:-translate-y-1/2",
-  "[&_[data-modal-dialog]]:z-50",
-  "[&_[data-modal-dialog]]:w-[328px]",
-  // ── Header ────────────────────────────────────────────────────────────────
-  "[&_[data-modal-header]]:px-6",
-  "[&_[data-modal-header]]:pt-4",
-  "[&_[data-modal-header]]:pb-3",
-  "[&_[data-modal-header]]:flex",
-  "[&_[data-modal-header]]:items-start",
-  "[&_[data-modal-header]]:justify-between",
-  "[&_[data-headline]]:text-label-large",
-  "[&_[data-headline]]:text-on-surface-variant",
-  "[&_[data-headline]]:m-0",
-  "[&_[data-supporting-text]]:text-headline-large",
-  "[&_[data-supporting-text]]:text-on-surface",
-  "[&_[data-supporting-text]]:mt-4",
-  "[&_[data-supporting-text]]:m-0",
-  "[&_[data-mode-toggle]]:w-12",
-  "[&_[data-mode-toggle]]:h-12",
-  "[&_[data-mode-toggle]]:rounded-full",
-  "[&_[data-mode-toggle]]:flex",
-  "[&_[data-mode-toggle]]:items-center",
-  "[&_[data-mode-toggle]]:justify-center",
-  "[&_[data-mode-toggle]]:text-on-surface-variant",
-  "[&_[data-mode-toggle]]:bg-transparent",
-  "[&_[data-mode-toggle]]:border-none",
-  "[&_[data-mode-toggle]]:self-end",
-  "[&_[data-mode-toggle]]:transition-colors",
-  "[&_[data-mode-toggle]]:duration-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]]:ease-spring-standard-fast-effects",
-  "[&_[data-mode-toggle]:hover]:bg-on-surface-variant/8",
-  // ── Divider ───────────────────────────────────────────────────────────────
-  "[&_hr[data-divider]]:border-outline-variant",
-  // ── Date input fields ─────────────────────────────────────────────────────
-  "[&_[data-date-input-field]]:px-6",
-  "[&_[data-date-input-field]]:py-2",
-  "[&_[data-date-input-field]_[data-field]]:flex",
-  "[&_[data-date-input-field]_[data-field]]:items-center",
-  "[&_[data-date-input-field]_[data-field]]:border",
-  "[&_[data-date-input-field]_[data-field]]:border-outline",
-  "[&_[data-date-input-field]_[data-field]]:rounded-sm",
-  "[&_[data-date-input-field]_[data-field]]:px-4",
-  "[&_[data-date-input-field]_[data-field]]:py-3",
-  "[&_[data-date-input-field]_[data-field]]:text-body-large",
-  "[&_[data-date-input-field]_[data-field]]:text-on-surface",
-  "[&_[data-date-input-field]_[data-segment]]:outline-none",
-  "[&_[data-date-input-field]_[data-segment][data-placeholder]]:text-on-surface-variant",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-primary",
-  "[&_[data-date-input-field][data-focused]_[data-field]]:border-2",
-  "[&_[data-date-input-field][data-invalid]_[data-field]]:border-error",
-  "[&_[data-date-input-field]_[data-label]]:text-body-small",
-  "[&_[data-date-input-field]_[data-label]]:text-on-surface-variant",
-  "[&_[data-date-input-field]_[data-error-message]]:text-body-small",
-  "[&_[data-date-input-field]_[data-error-message]]:text-error",
-  "[&_[data-date-input-field]_[data-error-message]]:mt-1",
-  // ── Scrim ─────────────────────────────────────────────────────────────────
-  "[&_[data-scrim]]:fixed",
-  "[&_[data-scrim]]:inset-0",
-  "[&_[data-scrim]]:z-40",
-  "[&_[data-scrim]]:bg-scrim",
-  "[&_[data-scrim]]:opacity-32",
-  "[&_[data-scrim]]:transition-opacity",
-  "[&_[data-scrim]]:duration-medium2",
-  "[&_[data-scrim]]:ease-standard",
-  // ── Action buttons ────────────────────────────────────────────────────────
-  "[&_[data-actions]]:flex",
-  "[&_[data-actions]]:items-center",
-  "[&_[data-actions]]:justify-end",
-  "[&_[data-actions]]:gap-2",
-  "[&_[data-actions]]:px-3",
-  "[&_[data-actions]]:py-2",
-  "[&_[data-action]]:text-primary",
-  "[&_[data-action]]:text-label-large",
-  "[&_[data-action]]:rounded-full",
-  "[&_[data-action]]:px-3",
-  "[&_[data-action]]:py-2",
-  "[&_[data-action]]:bg-transparent",
-  "[&_[data-action]]:border-none",
-  "[&_[data-action]]:transition-colors",
-  "[&_[data-action]]:duration-spring-standard-fast-effects",
-  "[&_[data-action]]:ease-spring-standard-fast-effects",
-  "[&_[data-action]:hover]:bg-primary/8"
-].join(" ");
 var DatePickerModalInputStyled = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
@@ -15316,10 +15380,12 @@ var DatePickerModalInputStyled = forwardRef(
         ref,
         ...rest,
         className: cn(
-          datePickerContainerVariants({ variant: "modal-input" }),
-          MODAL_INPUT_STYLES,
+          modalDialogVariants({ variant: "modal-input" }),
+          MODAL_INPUT_CONTENT_STRUCTURAL,
           className
-        )
+        ),
+        scrimClassName: cn(scrimVariants2()),
+        ActionButtonComponent: StyledActionButton
       }
     );
   }
@@ -15430,6 +15496,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map