@strapi/design-system 1.9.0 → 1.10.0

package/dist/DatePicker/DatePicker.js

@@ -1,138 +1,245 @@
-import { jsxs as F, jsx as i } from "react/jsx-runtime";
-import * as c from "react";
-import { useFloating as be, offset as we, shift as xe, flip as ke, autoUpdate as Te } from "@floating-ui/react-dom";
-import { getLocalTimeZone as Pe, today as J, minDate as H, maxDate as X, startOfMonth as Ee, startOfWeek as le, getDayOfWeek as Ie, isSameDay as se, endOfMonth as Ae, parseAbsolute as Re, toCalendarDate as Se } from "@internationalized/date";
-import { useFocusGuards as Me } from "@radix-ui/react-focus-guards";
-import { FocusScope as ve } from "@radix-ui/react-focus-scope";
-import { Cross as $e, Calendar as Fe } from "@strapi/icons";
-import { composeEventHandlers as N } from "@strapi/ui-primitives";
-import { createPortal as Ne } from "react-dom";
-import { RemoveScroll as Le } from "react-remove-scroll";
-import I from "styled-components";
-import { useDesignSystem as Oe } from "../DesignSystemProvider.js";
-import { DismissibleLayer as _e } from "../DismissibleLayer/index.js";
-import { createContext as Ve } from "../helpers/context.js";
-import { once as Ye } from "../helpers/deprecations.js";
-import { useComposedRefs as Q } from "../hooks/useComposeRefs.js";
-import { useControllableState as ze } from "../hooks/useControllableState.js";
-import { useDateFormatter as S } from "../hooks/useDateFormatter.js";
-import { useId as ce } from "../hooks/useId.js";
-import { SingleSelectInput as ne, SingleSelectOption as ae } from "../Select/SingleSelect.js";
-import { Portal as Ue } from "../Portal/Portal.js";
-import { Flex as U } from "../Flex/Flex.js";
-import { getThemeSize as We, inputFocusStyle as Be } from "../themes/utils.js";
-import { Box as W } from "../Box/Box.js";
-import { Typography as B } from "../Typography/Typography.js";
-import { Field as Ze } from "../Field/Field.js";
-import { FieldLabel as qe } from "../Field/FieldLabel.js";
-import { FieldHint as Ke } from "../Field/FieldHint.js";
-import { FieldError as Ge } from "../Field/FieldError.js";
-const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
-  /**
-   * DatePickerCalendar props
-   */
-  calendarLabel: e,
-  className: r,
-  initialDate: n,
-  locale: t,
-  maxDate: a,
-  minDate: s,
-  monthSelectLabel: g = "Month",
-  onChange: u,
-  selectedDate: l,
-  yearSelectLabel: b = "Year",
-  /**
-   * Combobox props
-   */
-  error: x,
-  id: f,
-  disabled: y = !1,
-  placeholder: k,
-  required: w = !1,
-  onClear: P,
-  clearLabel: E = "Clear",
-  size: d,
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  ariaLabel: h,
-  /**
-   * @preserve
-   * @deprecated This is no longer used.
-   */
-  selectedDateLabel: o,
-  ...m
-}, p) => {
-  const T = Pe(), M = Oe("DatePicker"), v = t ?? M.locale, $ = S(v, {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric"
-  }), [O, Z] = c.useState(!1), [q, C] = c.useState(null), [A, K] = c.useState(null), [ue, me] = c.useState(null), [Y, _] = c.useState(), [V, ee] = ze({
-    defaultProp: n ? R(n) : void 0,
-    prop: l ? R(l) : void 0,
-    onChange(D) {
-      u && u(D?.toDate(T));
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactDom$1 = require('@floating-ui/react-dom');
+const date = require('@internationalized/date');
+const reactFocusGuards = require('@radix-ui/react-focus-guards');
+const reactFocusScope = require('@radix-ui/react-focus-scope');
+const icons = require('@strapi/icons');
+const uiPrimitives = require('@strapi/ui-primitives');
+const reactDom = require('react-dom');
+const reactRemoveScroll = require('react-remove-scroll');
+const styled = require('styled-components');
+const DesignSystemProvider = require('../DesignSystemProvider.js');
+const index = require('../DismissibleLayer/index.js');
+const context = require('../helpers/context.js');
+const deprecations = require('../helpers/deprecations.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const useControllableState = require('../hooks/useControllableState.js');
+const useDateFormatter = require('../hooks/useDateFormatter.js');
+const useId = require('../hooks/useId.js');
+const SingleSelect = require('../Select/SingleSelect.js');
+const Portal = require('../Portal/Portal.js');
+const Flex = require('../Flex/Flex.js');
+const utils = require('../themes/utils.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+const Field = require('../Field/Field.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespace(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const DEFAULT_PAST_RANGE = 200;
+const DEFAULT_FUTURE_RANGE = 15;
+const [DatePickerProvider, useDatePickerContext] = context.createContext('DatePicker');
+const DatePickerInput = React__namespace.forwardRef(({ 
+/**
+ * DatePickerCalendar props
+ */
+calendarLabel, className, initialDate, locale: defaultLocale, maxDate, minDate, monthSelectLabel = 'Month', onChange, selectedDate, yearSelectLabel = 'Year', 
+/**
+ * Combobox props
+ */
+error, id, disabled = false, placeholder, required = false, onClear, clearLabel = 'Clear', size, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+ariaLabel: _ariaLabel, 
+/**
+ * @preserve
+ * @deprecated This is no longer used.
+ */
+selectedDateLabel: _selectedDateLabel, ...restProps }, ref) => {
+    const timeZone = date.getLocalTimeZone();
+    const designContext = DesignSystemProvider.useDesignSystem('DatePicker');
+    const locale = defaultLocale ?? designContext.locale;
+    const formatter = useDateFormatter.useDateFormatter(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    });
+    const [open, setOpen] = React__namespace.useState(false);
+    const [trigger, setTrigger] = React__namespace.useState(null);
+    const [textInput, setTextInput] = React__namespace.useState(null);
+    const [content, setContent] = React__namespace.useState(null);
+    const [textValue, setTextValue] = React__namespace.useState();
+    const [value, setValue] = useControllableState.useControllableState({
+        defaultProp: initialDate ? convertUTCDateToCalendarDate(initialDate) : undefined,
+        prop: selectedDate ? convertUTCDateToCalendarDate(selectedDate) : undefined,
+        onChange(date) {
+            if (onChange) {
+                onChange(date?.toDate(timeZone));
+            }
+        },
+    });
+    const [actualMinDate, actualMaxDate] = React__namespace.useMemo(() => {
+        const now = initialDate ? convertUTCDateToCalendarDate(initialDate) : date.today('UTC');
+        const actualMinDate = minDate
+            ? convertUTCDateToCalendarDate(minDate)
+            : now.set({ day: 1, month: 1, year: now.year - DEFAULT_PAST_RANGE });
+        let actualMaxDate = maxDate
+            ? convertUTCDateToCalendarDate(maxDate)
+            : now.set({ day: 31, month: 12, year: now.year + DEFAULT_FUTURE_RANGE });
+        if (actualMaxDate.compare(actualMinDate) < 0) {
+            actualMaxDate = actualMinDate.set({ day: 31, month: 12, year: actualMinDate.year + DEFAULT_FUTURE_RANGE });
+        }
+        return [actualMinDate, actualMaxDate];
+    }, [minDate, maxDate, initialDate]);
+    /**
+     * Setting the initial calendar state based on priority.
+     */
+    const [calendarDate, setCalendarDate] = React__namespace.useState(makeInitialCalendarDate({
+        currentValue: value,
+        minDate: actualMinDate,
+        maxDate: actualMaxDate,
+    }));
+    const contentId = useId.useId();
+    const clearRef = React__namespace.useRef(null);
+    const handleClearClick = (e) => {
+        if (onClear && !disabled) {
+            setTextValue('');
+            setValue(undefined);
+            onClear(e);
+            textInput?.focus();
+        }
+    };
+    const handleOpenChange = React__namespace.useCallback((nextOpen) => {
+        if (nextOpen && value) {
+            setCalendarDate(value);
+        }
+        setOpen(nextOpen);
+    }, [value]);
+    React__namespace.useLayoutEffect(() => {
+        if (selectedDate) {
+            const date = convertUTCDateToCalendarDate(selectedDate);
+            setTextValue(formatter.format(date.toDate(timeZone)));
+            setCalendarDate(date);
+        }
+        else {
+            setTextValue('');
+        }
+    }, [selectedDate, formatter, timeZone]);
+    React__namespace.useLayoutEffect(() => {
+        if (initialDate && textValue === undefined) {
+            const date = convertUTCDateToCalendarDate(initialDate);
+            setTextValue(formatter.format(date.toDate(timeZone)));
+        }
+    }, [initialDate, textValue, formatter, timeZone]);
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    return (jsxRuntime.jsxs(DatePickerProvider, { calendarDate: calendarDate, content: content, contentId: contentId, disabled: disabled, locale: locale, minDate: actualMinDate, maxDate: actualMaxDate, open: open, onCalendarDateChange: setCalendarDate, onContentChange: setContent, onOpenChange: handleOpenChange, onTextInputChange: setTextInput, onTextValueChange: setTextValue, onTriggerChange: setTrigger, onValueChange: setValue, required: required, textInput: textInput, textValue: textValue, timeZone: timeZone, trigger: trigger, value: value, children: [jsxRuntime.jsxs(DatePickerTrigger, { className: className, size: size, hasError: Boolean(error), children: [jsxRuntime.jsx(StyledCalendarIcon, { "aria-hidden": true }), jsxRuntime.jsx(DatePickerTextInput, { ref: ref, placeholder: placeholder, "aria-describedby": `${hintId} ${errorId}`, id: id, ...restProps }), textValue && onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", type: "button", onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, ref: clearRef, children: jsxRuntime.jsx(icons.Cross, {}) })) : null] }), jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DatePickerContent, { label: calendarLabel, children: jsxRuntime.jsx(DatePickerCalendar, { monthSelectLabel: monthSelectLabel, yearSelectLabel: yearSelectLabel }) }) })] }));
+});
+const isPrintableCharacter = (str) => {
+    return Boolean(str.match(/^[^a-zA-Z]*$/));
+};
+const makeInitialCalendarDate = ({ currentValue, minDate, maxDate }) => {
+    const now = date.today('UTC');
+    if (currentValue) {
+        return currentValue;
+    }
+    if (date.minDate(minDate, now) === minDate && date.maxDate(maxDate, now) === maxDate) {
+        return now;
     }
-  }), [te, re] = c.useMemo(() => {
-    const D = n ? R(n) : J("UTC"), z = s ? R(s) : D.set({ day: 1, month: 1, year: D.year - je });
-    let j = a ? R(a) : D.set({ day: 31, month: 12, year: D.year + oe });
-    return j.compare(z) < 0 && (j = z.set({ day: 31, month: 12, year: z.year + oe })), [z, j];
-  }, [s, a, n]), [fe, G] = c.useState(Je({
-    currentValue: V,
-    minDate: te,
-    maxDate: re
-  })), pe = ce(), he = c.useRef(null), ge = (D) => {
-    P && !y && (_(""), ee(void 0), P(D), A?.focus());
-  }, De = c.useCallback((D) => {
-    D && V && G(V), Z(D);
-  }, [V]);
-  c.useLayoutEffect(() => {
-    if (l) {
-      const D = R(l);
-      _($.format(D.toDate(T))), G(D);
-    } else
-      _("");
-  }, [l, $, T]), c.useLayoutEffect(() => {
-    if (n && Y === void 0) {
-      const D = R(n);
-      _($.format(D.toDate(T)));
+    if (date.minDate(minDate, now) === now) {
+        return minDate;
     }
-  }, [n, Y, $, T]);
-  const ye = `${f}-hint`, Ce = `${f}-error`;
-  return F(He, { calendarDate: fe, content: ue, contentId: pe, disabled: y, locale: v, minDate: te, maxDate: re, open: O, onCalendarDateChange: G, onContentChange: me, onOpenChange: De, onTextInputChange: K, onTextValueChange: _, onTriggerChange: C, onValueChange: ee, required: w, textInput: A, textValue: Y, timeZone: T, trigger: q, value: V, children: [F(et, { className: r, size: d, hasError: !!x, children: [i(nt, { "aria-hidden": !0 }), i(ot, { ref: p, placeholder: k, "aria-describedby": `${ye} ${Ce}`, id: f, ...m }), Y && P ? i(rt, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": y, "aria-label": E, title: E, ref: he, children: i($e, {}) }) : null] }), i(Ue, { children: i(ct, { label: e, children: i(pt, { monthSelectLabel: g, yearSelectLabel: b }) }) })] });
-}), ie = (e) => !!e.match(/^[^a-zA-Z]*$/), Je = ({ currentValue: e, minDate: r, maxDate: n }) => {
-  const t = J("UTC");
-  return e || (H(r, t) === r && X(n, t) === n ? t : H(r, t) === t ? r : X(n, t) === t ? n : t);
-}, Qe = "DatePickerTrigger", et = c.forwardRef(({ hasError: e, size: r = "M", ...n }, t) => {
-  const a = L(Qe), s = Q(t, (u) => a.onTriggerChange(u)), g = () => {
-    a.disabled || a.onOpenChange(!0);
-  };
-  return i(ve, {
-    asChild: !0,
-    // we make sure we're not trapping once it's been closed
-    // (closed !== unmounted when animating out)
-    trapped: a.open,
-    onMountAutoFocus: (u) => {
-      u.preventDefault();
-    },
-    onUnmountAutoFocus: (u) => {
-      document.getSelection()?.empty(), u.preventDefault();
-    },
-    children: i(tt, { ref: s, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick: N(n.onClick, () => {
-      a.textInput?.focus();
-    }), onPointerDown: N(n.onPointerDown, (u) => {
-      const l = u.target;
-      l.hasPointerCapture(u.pointerId) && l.releasePointerCapture(u.pointerId), (l.closest("button") ?? l.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (g(), a.textInput?.focus());
-    }) })
-  });
-}), tt = I(U)`
-  border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
-  min-height: ${({ theme: e, $size: r }) => We("input")({ theme: e, size: r })};
+    if (date.maxDate(maxDate, now) === now) {
+        return maxDate;
+    }
+    return now;
+};
+/* -------------------------------------------------------------------------------------------------
+ * DatePickerTrigger
+ * -----------------------------------------------------------------------------------------------*/
+const DATE_PICKER_TRIGGER_NAME = 'DatePickerTrigger';
+const DatePickerTrigger = React__namespace.forwardRef(({ hasError, size = 'M', ...restProps }, forwardedRef) => {
+    const context = useDatePickerContext(DATE_PICKER_TRIGGER_NAME);
+    const composedRefs = useComposeRefs.useComposedRefs(forwardedRef, (node) => context.onTriggerChange(node));
+    const handleOpenChange = () => {
+        if (!context.disabled) {
+            context.onOpenChange(true);
+        }
+    };
+    return (jsxRuntime.jsx(reactFocusScope.FocusScope, { asChild: true, 
+        // we make sure we're not trapping once it's been closed
+        // (closed !== unmounted when animating out)
+        trapped: context.open, onMountAutoFocus: (event) => {
+            // we prevent open autofocus because we manually focus the selected item
+            event.preventDefault();
+        }, onUnmountAutoFocus: (event) => {
+            /**
+             * In firefox there's a some kind of selection happening after
+             * unmounting all of this, so we make sure we clear that.
+             */
+            document.getSelection()?.empty();
+            event.preventDefault();
+        }, children: jsxRuntime.jsx(TriggerElement, { ref: composedRefs, "$hasError": hasError, "$size": size, ...restProps, paddingLeft: 3, paddingRight: 3, hasRadius: true, gap: 3, overflow: "hidden", background: context.disabled ? 'neutral150' : 'neutral0', onClick: uiPrimitives.composeEventHandlers(restProps.onClick, () => {
+                // Whilst browsers generally have no issue focusing the trigger when clicking
+                // on a label, Safari seems to struggle with the fact that there's no `onClick`.
+                // We force `focus` in this case. Note: this doesn't create any other side-effect
+                // because we are preventing default in `onPointerDown` so effectively
+                // this only runs for a label "click"
+                context.textInput?.focus();
+            }), onPointerDown: uiPrimitives.composeEventHandlers(restProps.onPointerDown, (event) => {
+                // prevent implicit pointer capture
+                // https://www.w3.org/TR/pointerevents3/#implicit-pointer-capture
+                const target = event.target;
+                if (target.hasPointerCapture(event.pointerId)) {
+                    target.releasePointerCapture(event.pointerId);
+                }
+                /**
+                 * This has been added to allow events inside the trigger to be easily fired
+                 * e.g. the clear button or removing a tag
+                 */
+                const buttonTarg = target.closest('button') ?? target.closest('div');
+                if (buttonTarg !== event.currentTarget) {
+                    return;
+                }
+                // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+                // but not when the control key is pressed (avoiding MacOS right click)
+                if (event.button === 0 && event.ctrlKey === false) {
+                    handleOpenChange();
+                    /**
+                     * Firefox had issues focussing the input correctly.
+                     */
+                    context.textInput?.focus();
+                }
+            }) }) }));
+});
+const TriggerElement = styled__default.default(Flex.Flex) `
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  min-height: ${({ theme, $size }) => utils.getThemeSize('input')({ theme, size: $size })};
 
   &[data-disabled] {
-    color: ${({ theme: e }) => e.colors.neutral600};
-    background: ${({ theme: e }) => e.colors.neutral150};
+    color: ${({ theme }) => theme.colors.neutral600};
+    background: ${({ theme }) => theme.colors.neutral150};
     cursor: not-allowed;
   }
 
@@ -141,8 +248,9 @@ const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
     outline: none;
   }
 
-  ${({ theme: e, $hasError: r }) => Be()({ theme: e, hasError: r })};
-`, rt = I(W)`
+  ${({ theme, $hasError }) => utils.inputFocusStyle()({ theme, hasError: $hasError })};
+`;
+const IconBox = styled__default.default(Box.Box) `
   border: none;
 
   svg {
@@ -151,110 +259,213 @@ const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
   }
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
-`, nt = I(Fe)`
+`;
+const StyledCalendarIcon = styled__default.default(icons.Calendar) `
   & > path {
-    fill: ${({ theme: e }) => e.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
-`, at = "DatePickerTextInput", ot = c.forwardRef(({ placeholder: e, ...r }, n) => {
-  const t = L(at), { onTextValueChange: a, textValue: s, onTextInputChange: g, onOpenChange: u, disabled: l, locale: b } = t, x = Q(n, (d) => g(d)), f = () => {
-    l || u(!0);
-  }, y = S(b, {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit"
-  }), [k, w, P] = c.useMemo(() => {
-    const d = y.formatToParts(/* @__PURE__ */ new Date()), h = d.filter((p) => p.type === "year" || p.type === "month" || p.type === "day"), o = h.map((p) => {
-      switch (p.type) {
-        case "day":
-          return "DD";
-        case "month":
-          return "MM";
-        case "year":
-          return "YYYY";
-        default:
-          return "";
-      }
-    }), m = d.find((p) => p.type === "literal")?.value ?? "";
-    return [o, m, h];
-  }, [y]), E = k.map((d) => `\\d{${d.length}}`).join(`\\${w}`);
-  return i(lt, { role: "combobox", type: "text", inputMode: "numeric", ref: x, "aria-autocomplete": "none", "aria-controls": t.contentId, "aria-disabled": t.disabled, "aria-expanded": t.open, "aria-required": t.required, "aria-haspopup": "dialog", "data-state": t.open ? "open" : "closed", disabled: l, "data-disabled": l ? "" : void 0, pattern: E, placeholder: e ?? k.join(w), ...r, value: s ?? "", onBlur: N(r.onBlur, () => {
-    if (!t.textValue) {
-      t.onValueChange(void 0);
-      return;
-    }
-    t.onTextValueChange(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate);
-  }), onChange: N(r.onChange, (d) => {
-    if (ie(d.target.value)) {
-      const h = d.target.value.split(w), [o, m, p] = P.map((C, A) => {
-        const K = h[A];
-        return {
-          ...C,
-          value: K
-        };
-      }).sort((C, A) => C.type === "year" ? 1 : A.type === "year" ? -1 : C.type === "month" ? 1 : A.type === "month" ? -1 : 0).map((C) => C.value), T = t.calendarDate.year;
-      let M = t.calendarDate.year;
-      if (p) {
-        let C = p.length === 1 ? `0${p}` : p;
-        M = p.length < 3 ? Number(`${T}`.slice(0, 4 - C.length) + C) : Number(C);
-      }
-      p && p.length < 3 && M > t.maxDate.year && (M -= 100);
-      const v = t.calendarDate.set({ year: M }), $ = v.calendar.getMonthsInYear(v), O = v.set({
-        month: m && Number(m) <= $ ? Number(m) : void 0
-      }), Z = O.calendar.getDaysInMonth(O), q = O.set({
-        day: o && Number(o) <= Z ? Number(o) : void 0
-      });
-      t.onCalendarDateChange(it(q, t.minDate, t.maxDate)), t.onTextValueChange(d.target.value);
-    }
-  }), onKeyDown: N(r.onKeyDown, (d) => {
-    if (!t.open && (ie(d.key) || ["ArrowDown", "Backspace"].includes(d.key)))
-      f();
-    else if (["Tab"].includes(d.key) && t.open)
-      d.preventDefault();
-    else if (["Escape"].includes(d.key))
-      t.open ? t.onOpenChange(!1) : (t.onValueChange(void 0), t.onTextValueChange("")), d.preventDefault();
-    else if (t.open && ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(d.key))
-      switch (d.preventDefault(), d.key) {
-        case "ArrowDown": {
-          const h = t.calendarDate.add({ weeks: 1 });
-          if (t.maxDate && h.compare(t.maxDate) > 0)
-            return;
-          t.onCalendarDateChange(h);
-          return;
-        }
-        case "ArrowRight": {
-          const h = t.calendarDate.add({ days: 1 });
-          if (t.maxDate && h.compare(t.maxDate) > 0)
-            return;
-          t.onCalendarDateChange(h);
-          return;
-        }
-        case "ArrowUp": {
-          const h = t.calendarDate.subtract({ weeks: 1 });
-          if (t.minDate && h.compare(t.minDate) < 0)
-            return;
-          t.onCalendarDateChange(h);
-          return;
-        }
-        case "ArrowLeft": {
-          const h = t.calendarDate.subtract({ days: 1 });
-          if (t.minDate && h.compare(t.minDate) < 0)
-            return;
-          t.onCalendarDateChange(h);
+`;
+/* -------------------------------------------------------------------------------------------------
+ *  DatePickerTextInput
+ * -----------------------------------------------------------------------------------------------*/
+const DATE_PICKER_TEXT_INPUT_NAME = 'DatePickerTextInput';
+const DatePickerTextInput = React__namespace.forwardRef(({ placeholder, ...props }, forwardedRef) => {
+    const context = useDatePickerContext(DATE_PICKER_TEXT_INPUT_NAME);
+    const { onTextValueChange, textValue, onTextInputChange, onOpenChange, disabled, locale } = context;
+    const composedRefs = useComposeRefs.useComposedRefs(forwardedRef, (node) => onTextInputChange(node));
+    const handleOpenChange = () => {
+        if (!disabled) {
+            onOpenChange(true);
         }
-      }
-    else
-      t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
-  }) });
+    };
+    const formatter = useDateFormatter.useDateFormatter(locale, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+    });
+    const [dateFormatPlaceholder, separator, dateStructure] = React__namespace.useMemo(() => {
+        const parts = formatter.formatToParts(new Date());
+        const dateStructure = parts.filter((part) => part.type === 'year' || part.type === 'month' || part.type === 'day');
+        const placeholder = dateStructure.map((part) => {
+            switch (part.type) {
+                case 'day':
+                    return 'DD';
+                case 'month':
+                    return 'MM';
+                case 'year':
+                    return 'YYYY';
+                default:
+                    return '';
+            }
+        });
+        const separator = parts.find((part) => part.type === 'literal')?.value ?? '';
+        return [placeholder, separator, dateStructure];
+    }, [formatter]);
+    /**
+     * the `pattern` prop of an input cannot be a regex it must be a string without the `/` delimiters.
+     * Therefore, we manually escape the separator and `d` character.
+     */
+    const inputPattern = dateFormatPlaceholder.map((part) => `\\d{${part.length}}`).join(`\\${separator}`);
+    return (jsxRuntime.jsx(Input, { role: "combobox", type: "text", inputMode: "numeric", ref: composedRefs, "aria-autocomplete": "none", "aria-controls": context.contentId, "aria-disabled": context.disabled, "aria-expanded": context.open, "aria-required": context.required, "aria-haspopup": "dialog", "data-state": context.open ? 'open' : 'closed', disabled: disabled, "data-disabled": disabled ? '' : undefined, pattern: inputPattern, placeholder: placeholder ?? dateFormatPlaceholder.join(separator), ...props, value: textValue ?? '', onBlur: uiPrimitives.composeEventHandlers(props.onBlur, () => {
+            if (!context.textValue) {
+                context.onValueChange(undefined);
+                return;
+            }
+            context.onTextValueChange(formatter.format(context.calendarDate.toDate(context.timeZone)));
+            context.onValueChange(context.calendarDate);
+        }), onChange: uiPrimitives.composeEventHandlers(props.onChange, (event) => {
+            if (isPrintableCharacter(event.target.value)) {
+                const inputByPart = event.target.value.split(separator);
+                /**
+                 * by using the dateStructure to understand the localised order we split and organise the event.target.value
+                 * to DD MM YYYY and return as an array.
+                 */
+                const [day, month, year] = dateStructure
+                    .map((part, index) => {
+                    const value = inputByPart[index];
+                    return {
+                        ...part,
+                        value,
+                    };
+                })
+                    /**
+                     * TODO: This could probably be better done?
+                     */
+                    .sort((a, b) => {
+                    if (a.type === 'year') {
+                        return 1;
+                    }
+                    if (b.type === 'year') {
+                        return -1;
+                    }
+                    if (a.type === 'month') {
+                        return 1;
+                    }
+                    if (b.type === 'month') {
+                        return -1;
+                    }
+                    return 0;
+                })
+                    .map((part) => part.value);
+                const currentYear = context.calendarDate.year;
+                /**
+                 * If a user types 2 for the year then the year should be the current year with the last number as what they typed.
+                 * This applies for if they've typed two numbers but not three or four numbers.
+                 */
+                let newYear = context.calendarDate.year;
+                if (year) {
+                    /**
+                     * ensure the year is _at least_ 2 digits long so if the year
+                     * is 2023 and you type 9 the year becomes 2009 instead of 2029,
+                     * this is much similar to how other DatePickers work and makes more sense.
+                     */
+                    let normalizedYear = year.length === 1 ? `0${year}` : year;
+                    /**
+                     * The year we set to _must_ be 4 digits long.
+                     */
+                    newYear =
+                        year.length < 3
+                            ? Number(`${currentYear}`.slice(0, 4 - normalizedYear.length) + normalizedYear)
+                            : Number(normalizedYear);
+                }
+                /**
+                 * If you type a value like `94` and that's above the maxDate e.g. 2040 then
+                 * we assume you would have meant 1994 and correct the date. Again, this is
+                 * similar to how other DatePickers work.
+                 *
+                 * Note we only do this if the typed value is less than 3 digits long.
+                 */
+                if (year && year.length < 3 && newYear > context.maxDate.year) {
+                    newYear -= 100;
+                }
+                const newDateWithYear = context.calendarDate.set({ year: newYear });
+                const maxMonthNumber = newDateWithYear.calendar.getMonthsInYear(newDateWithYear);
+                const newDateWithMonthAndYear = newDateWithYear.set({
+                    month: month && Number(month) <= maxMonthNumber ? Number(month) : undefined,
+                });
+                const maxDayNumber = newDateWithMonthAndYear.calendar.getDaysInMonth(newDateWithMonthAndYear);
+                const newDateWithDayMonthAndYear = newDateWithMonthAndYear.set({
+                    day: day && Number(day) <= maxDayNumber ? Number(day) : undefined,
+                });
+                context.onCalendarDateChange(constrainValue(newDateWithDayMonthAndYear, context.minDate, context.maxDate));
+                context.onTextValueChange(event.target.value);
+            }
+        }), onKeyDown: uiPrimitives.composeEventHandlers(props.onKeyDown, (event) => {
+            if (!context.open && (isPrintableCharacter(event.key) || ['ArrowDown', 'Backspace'].includes(event.key))) {
+                handleOpenChange();
+            }
+            else if (['Tab'].includes(event.key) && context.open) {
+                event.preventDefault();
+            }
+            else if (['Escape'].includes(event.key)) {
+                if (context.open) {
+                    context.onOpenChange(false);
+                }
+                else {
+                    context.onValueChange(undefined);
+                    context.onTextValueChange('');
+                }
+                event.preventDefault();
+            }
+            else if (context.open && ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+                event.preventDefault();
+                switch (event.key) {
+                    case 'ArrowDown': {
+                        const nextDate = context.calendarDate.add({ weeks: 1 });
+                        if (context.maxDate && nextDate.compare(context.maxDate) > 0) {
+                            return;
+                        }
+                        context.onCalendarDateChange(nextDate);
+                        return;
+                    }
+                    case 'ArrowRight': {
+                        const nextDate = context.calendarDate.add({ days: 1 });
+                        if (context.maxDate && nextDate.compare(context.maxDate) > 0) {
+                            return;
+                        }
+                        context.onCalendarDateChange(nextDate);
+                        return;
+                    }
+                    case 'ArrowUp': {
+                        const nextDate = context.calendarDate.subtract({ weeks: 1 });
+                        if (context.minDate && nextDate.compare(context.minDate) < 0) {
+                            return;
+                        }
+                        context.onCalendarDateChange(nextDate);
+                        return;
+                    }
+                    case 'ArrowLeft': {
+                        const nextDate = context.calendarDate.subtract({ days: 1 });
+                        if (context.minDate && nextDate.compare(context.minDate) < 0) {
+                            return;
+                        }
+                        context.onCalendarDateChange(nextDate);
+                    }
+                }
+            }
+            else if (context.open && ['Enter'].includes(event.key)) {
+                event.preventDefault();
+                onTextValueChange(formatter.format(context.calendarDate.toDate(context.timeZone)));
+                context.onValueChange(context.calendarDate);
+                context.onOpenChange(false);
+            }
+        }) }));
 });
-function it(e, r, n) {
-  return r && (e = X(e, r)), n && (e = H(e, n)), e;
+function constrainValue(date$1, minValue, maxValue) {
+    if (minValue) {
+        date$1 = date.maxDate(date$1, minValue);
+    }
+    if (maxValue) {
+        date$1 = date.minDate(date$1, maxValue);
+    }
+    return date$1;
 }
-const lt = I.input`
+const Input = styled__default.default.input `
   width: 100%;
   font-size: ${14 / 16}rem;
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({ theme }) => theme.colors.neutral800};
   height: 100%;
   border: none;
   background-color: transparent;
@@ -266,166 +477,273 @@ const lt = I.input`
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, st = "DatePickerContent", ct = c.forwardRef((e, r) => {
-  const [n, t] = c.useState(), a = L(st);
-  if (c.useLayoutEffect(() => {
-    t(new DocumentFragment());
-  }, []), !a.open) {
-    const s = n;
-    return s ? Ne(i("div", { children: e.children }), s) : null;
-  }
-  return i(ut, { ...e, ref: r });
-}), dt = "DatePickerContent", ut = c.forwardRef((e, r) => {
-  const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...s } = L(dt), { x: g, y: u, refs: l, strategy: b } = be({
-    strategy: "fixed",
-    placement: "bottom-start",
-    middleware: [
-      we({
-        mainAxis: 4
-      }),
-      xe(),
-      ke()
-    ],
-    elements: {
-      reference: s.trigger
-    },
-    whileElementsMounted: Te
-  });
-  c.useEffect(() => {
-    const f = () => {
-      a(!1);
+`;
+/* -------------------------------------------------------------------------------------------------
+ *  DatePickerContent
+ * -----------------------------------------------------------------------------------------------*/
+const CONTENT_NAME = 'DatePickerContent';
+const DatePickerContent = React__namespace.forwardRef((props, forwardedRef) => {
+    const [fragment, setFragment] = React__namespace.useState();
+    const context = useDatePickerContext(CONTENT_NAME);
+    // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
+    React__namespace.useLayoutEffect(() => {
+        setFragment(new DocumentFragment());
+    }, []);
+    if (!context.open) {
+        const frag = fragment;
+        return frag ? reactDom.createPortal(jsxRuntime.jsx("div", { children: props.children }), frag) : null;
+    }
+    return jsxRuntime.jsx(DatePickerContentImpl, { ...props, ref: forwardedRef });
+});
+/* -------------------------------------------------------------------------------------------------
+ *  DatePickerContentImpl
+ * -----------------------------------------------------------------------------------------------*/
+const CONTENT_IMPL_NAME = 'DatePickerContent';
+const DatePickerContentImpl = React__namespace.forwardRef((props, forwardedRef) => {
+    const { label = 'Choose date', ...restProps } = props;
+    const { onOpenChange, ...context } = useDatePickerContext(CONTENT_IMPL_NAME);
+    const { x, y, refs, strategy } = reactDom$1.useFloating({
+        strategy: 'fixed',
+        placement: 'bottom-start',
+        middleware: [
+            reactDom$1.offset({
+                mainAxis: 4,
+            }),
+            reactDom$1.shift(),
+            reactDom$1.flip(),
+        ],
+        elements: {
+            reference: context.trigger,
+        },
+        whileElementsMounted: reactDom$1.autoUpdate,
+    });
+    React__namespace.useEffect(() => {
+        const close = () => {
+            onOpenChange(false);
+        };
+        window.addEventListener('blur', close);
+        window.addEventListener('resize', close);
+        return () => {
+            window.removeEventListener('blur', close);
+            window.removeEventListener('resize', close);
+        };
+    }, [onOpenChange]);
+    const composedRefs = useComposeRefs.useComposedRefs(forwardedRef, (node) => context.onContentChange(node), refs.setFloating);
+    reactFocusGuards.useFocusGuards();
+    return (jsxRuntime.jsx(reactRemoveScroll.RemoveScroll, { allowPinchZoom: true, children: jsxRuntime.jsx(index.DismissibleLayer, { asChild: true, 
+            // When focus is trapped, a focusout event may still happen.
+            // We make sure we don't trigger our `onDismiss` in such case.
+            onFocusOutside: (event) => {
+                event.preventDefault();
+            }, onDismiss: () => {
+                onOpenChange(false);
+            }, children: jsxRuntime.jsx(ContentElement, { ref: composedRefs, "data-state": context.open ? 'open' : 'closed', onContextMenu: (event) => event.preventDefault(), id: context.contentId, role: "dialog", "aria-modal": "true", "aria-label": label, style: {
+                    left: x,
+                    top: y,
+                    position: strategy,
+                }, hasRadius: true, background: "neutral0", padding: 1, ...restProps }) }) }));
+});
+const ContentElement = styled__default.default(Box.Box) `
+  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  z-index: ${({ theme }) => theme.zIndices[0]};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+/* -------------------------------------------------------------------------------------------------
+ *  DatePickerCalendar
+ * -----------------------------------------------------------------------------------------------*/
+const DATE_PICKER_CALENDAR_NAME = 'DatePickerCalendar';
+const DatePickerCalendar = React__namespace.forwardRef(({ monthSelectLabel, yearSelectLabel, ...restProps }, ref) => {
+    const { locale, timeZone, minDate, maxDate, calendarDate, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALENDAR_NAME);
+    const startDate = date.startOfMonth(calendarDate);
+    const years = React__namespace.useMemo(() => {
+        const minYear = minDate.year;
+        const maxYear = maxDate.year;
+        return [...Array(maxYear - minYear + 1).keys()].map((y) => (minYear + y).toString());
+    }, [minDate, maxDate]);
+    const monthFormatter = useDateFormatter.useDateFormatter(locale, { month: 'long' });
+    const months = React__namespace.useMemo(() => [...Array(calendarDate.calendar.getMonthsInYear(calendarDate)).keys()].map((m) => monthFormatter.format(calendarDate.set({ month: m + 1 }).toDate(timeZone))), [calendarDate, monthFormatter, timeZone]);
+    const dayFormatter = useDateFormatter.useDateFormatter(locale, { weekday: 'short' });
+    /**
+     * These are the strings of our days of the week
+     * e.g. `Mon`, `Tue`, `Wed`, etc.
+     */
+    const weekDays = React__namespace.useMemo(() => {
+        let weekStart = date.startOfWeek(date.today(timeZone), locale);
+        return [...new Array(7).keys()].map((index) => {
+            let date = weekStart.add({ days: index });
+            let dateDay = date.toDate(timeZone);
+            return dayFormatter.format(dateDay);
+        });
+    }, [timeZone, locale, dayFormatter]);
+    const handleMonthChange = (month) => {
+        if (typeof month === 'number') {
+            /**
+             * This just to make TS happy, we're not going to get a
+             * number because we only use strings as options
+             */
+            return;
+        }
+        const updatedDate = calendarDate.set({ month: months.indexOf(month) + 1 });
+        onCalendarDateChange(updatedDate);
     };
-    return window.addEventListener("blur", f), window.addEventListener("resize", f), () => {
-      window.removeEventListener("blur", f), window.removeEventListener("resize", f);
+    const handleYearChange = (year) => {
+        if (typeof year === 'number') {
+            /**
+             * This just to make TS happy, we're not going to get a
+             * number because we only use strings as options
+             */
+            return;
+        }
+        const updatedDate = calendarDate.set({ year: parseInt(year, 10) });
+        onCalendarDateChange(updatedDate);
     };
-  }, [a]);
-  const x = Q(r, (f) => s.onContentChange(f), l.setFloating);
-  return Me(), i(Le, { allowPinchZoom: !0, children: i(_e, {
-    asChild: !0,
-    // When focus is trapped, a focusout event may still happen.
-    // We make sure we don't trigger our `onDismiss` in such case.
-    onFocusOutside: (f) => {
-      f.preventDefault();
-    },
-    onDismiss: () => {
-      a(!1);
-    },
-    children: i(mt, { ref: x, "data-state": s.open ? "open" : "closed", onContextMenu: (f) => f.preventDefault(), id: s.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
-      left: g,
-      top: u,
-      position: b
-    }, hasRadius: !0, background: "neutral0", padding: 1, ...t })
-  }) });
-}), mt = I(W)`
-  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
-  z-index: ${({ theme: e }) => e.zIndices[0]};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, ft = "DatePickerCalendar", pt = c.forwardRef(({ monthSelectLabel: e, yearSelectLabel: r, ...n }, t) => {
-  const { locale: a, timeZone: s, minDate: g, maxDate: u, calendarDate: l, onCalendarDateChange: b } = L(ft), x = Ee(l), f = c.useMemo(() => {
-    const o = g.year, m = u.year;
-    return [...Array(m - o + 1).keys()].map((p) => (o + p).toString());
-  }, [g, u]), y = S(a, { month: "long" }), k = c.useMemo(() => [...Array(l.calendar.getMonthsInYear(l)).keys()].map((o) => y.format(l.set({ month: o + 1 }).toDate(s))), [l, y, s]), w = S(a, { weekday: "short" }), P = c.useMemo(() => {
-    let o = le(J(s), a);
-    return [...new Array(7).keys()].map((m) => {
-      let T = o.add({ days: m }).toDate(s);
-      return w.format(T);
-    });
-  }, [s, a, w]), E = (o) => {
-    if (typeof o == "number")
-      return;
-    const m = l.set({ month: k.indexOf(o) + 1 });
-    b(m);
-  }, d = (o) => {
-    if (typeof o == "number")
-      return;
-    const m = l.set({ year: parseInt(o, 10) });
-    b(m);
-  }, h = ht(x, a);
-  return F(U, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [F(gt, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [i(ne, { label: e, size: "S", value: k[l.month - 1], onChange: E, children: k.map((o) => i(ae, { value: o, children: o }, o)) }), i(ne, { size: "S", value: l.year.toString(), label: r, onChange: d, children: f.map((o) => i(ae, { value: o, children: o }, o)) })] }), F("table", { role: "grid", children: [i("thead", { "aria-hidden": !0, children: i("tr", { "aria-rowindex": 0, children: P.map((o, m) => i(Dt, { "aria-colindex": m, children: o }, o)) }) }), i("tbody", { children: [...new Array(6).keys()].map((o) => i("tr", { "aria-rowindex": o + 2, children: h(o).map((m, p) => m ? i(bt, { "aria-colindex": p + 1, date: m, startDate: x }, m.toString()) : i(de, { "aria-colindex": p + 1 })) }, o)) })] })] });
-}), ht = (e, r) => (n) => {
-  let t = e.add({ weeks: n }), a = [];
-  t = le(t, r);
-  let s = Ie(t, r);
-  for (let g = 0; g < s; g++)
-    a.push(null);
-  for (; a.length < 7; ) {
-    a.push(t);
-    let g = t.add({ days: 1 });
-    if (se(t, g))
-      break;
-    t = g;
-  }
-  for (; a.length < 7; )
-    a.push(null);
-  return a;
-}, gt = I(U)`
+    const getDatesInWeek = makeGetDatesInWeek(startDate, locale);
+    return (jsxRuntime.jsxs(Flex.Flex, { ref: ref, direction: "column", alignItems: "stretch", padding: 4, ...restProps, children: [jsxRuntime.jsxs(ToolbarFlex, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [jsxRuntime.jsx(SingleSelect.SingleSelectInput, { label: monthSelectLabel, size: "S", value: months[calendarDate.month - 1], onChange: handleMonthChange, children: months.map((month) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: month, children: month }, month))) }), jsxRuntime.jsx(SingleSelect.SingleSelectInput, { size: "S", value: calendarDate.year.toString(), label: yearSelectLabel, onChange: handleYearChange, children: years.map((year) => (jsxRuntime.jsx(SingleSelect.SingleSelectOption, { value: year, children: year }, year))) })] }), jsxRuntime.jsxs("table", { role: "grid", children: [jsxRuntime.jsx("thead", { "aria-hidden": true, children: jsxRuntime.jsx("tr", { "aria-rowindex": 0, children: weekDays.map((day, index) => (jsxRuntime.jsx(DatePickerHeaderCell, { "aria-colindex": index, children: day }, day))) }) }), jsxRuntime.jsx("tbody", { children: [...new Array(6).keys()].map((weekIndex) => (jsxRuntime.jsx("tr", { "aria-rowindex": weekIndex + 2, children: getDatesInWeek(weekIndex).map((date, index) => date ? (jsxRuntime.jsx(DatePickerCalendarCell, { "aria-colindex": index + 1, date: date, startDate: startDate }, date.toString())) : (jsxRuntime.jsx(Cell, { "aria-colindex": index + 1 }))) }, weekIndex))) })] })] }));
+});
+const makeGetDatesInWeek = (from, locale) => (weekIndex) => {
+    let date$1 = from.add({ weeks: weekIndex });
+    let dates = [];
+    date$1 = date.startOfWeek(date$1, locale);
+    /**
+     * startOfWeek will clamp dates within the calendar system's valid range, which may
+     * start in the middle of a week. In this case, add null placeholders.
+     */
+    let dayOfWeek = date.getDayOfWeek(date$1, locale);
+    for (let i = 0; i < dayOfWeek; i++) {
+        dates.push(null);
+    }
+    while (dates.length < 7) {
+        dates.push(date$1);
+        let nextDate = date$1.add({ days: 1 });
+        if (date.isSameDay(date$1, nextDate)) {
+            /**
+             * If the next day is the same, we have hit the end of the calendar system.
+             */
+            break;
+        }
+        date$1 = nextDate;
+    }
+    /**
+     * Add null placeholders if at the end of the calendar system.
+     */
+    while (dates.length < 7) {
+        dates.push(null);
+    }
+    return dates;
+};
+const ToolbarFlex = styled__default.default(Flex.Flex) `
   div[role='combobox'] {
     border: 1px solid transparent;
     background: transparent;
-    font-weight: ${(e) => e.theme.fontWeights.bold};
+    font-weight: ${(props) => props.theme.fontWeights.bold};
 
-    ${B} {
-      color: ${({ theme: e }) => e.colors.neutral800};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.neutral800};
     }
 
     svg {
       > g,
       path {
-        fill: ${({ theme: e }) => e.colors.neutral500};
+        fill: ${({ theme }) => theme.colors.neutral500};
       }
     }
 
     &:hover {
-      background-color: ${({ theme: e }) => e.colors.neutral100};
+      background-color: ${({ theme }) => theme.colors.neutral100};
     }
   }
-`, Dt = c.forwardRef(({ children: e, ...r }, n) => i(yt, { as: "th", role: "gridcell", ref: n, ...r, height: `${24 / 16}rem`, width: `${32 / 16}rem`, children: i(B, { variant: "pi", fontWeight: "bold", color: "neutral800", children: e.slice(0, 2) }) })), yt = I(W)`
-  border-radius: ${({ theme: e }) => e.borderRadius};
+`;
+const DatePickerHeaderCell = React__namespace.forwardRef(({ children, ...props }, forwardedRef) => {
+    return (jsxRuntime.jsx(Th, { as: "th", role: "gridcell", ref: forwardedRef, ...props, height: `${24 / 16}rem`, width: `${32 / 16}rem`, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", fontWeight: "bold", color: "neutral800", children: children.slice(0, 2) }) }));
+});
+const Th = styled__default.default(Box.Box) `
+  border-radius: ${({ theme }) => theme.borderRadius};
   text-transform: capitalize;
-`, Ct = "DatePickerCalendarCell", bt = c.forwardRef(({ date: e, startDate: r, ...n }, t) => {
-  const { timeZone: a, locale: s, calendarDate: g, onValueChange: u, onOpenChange: l, onTextValueChange: b, onCalendarDateChange: x } = L(Ct), f = se(g, e), y = S(s, {
-    weekday: "long",
-    day: "numeric",
-    month: "long",
-    year: "numeric"
-  }), k = c.useMemo(() => y.format(e.toDate(a)), [y, e, a]), w = S(s, {
-    day: "numeric",
-    calendar: e.calendar.identifier
-  }), P = c.useMemo(() => w.formatToParts(e.toDate(a)).find((m) => m.type === "day").value, [w, e, a]), E = S(s, {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric"
-  }), d = Ae(r), h = e.compare(r) < 0 || e.compare(d) > 0;
-  let o = "neutral900";
-  return f ? o = "primary600" : h && (o = "neutral600"), i(de, { as: "td", role: "gridcell", ref: t, "aria-selected": f, ...n, hasRadius: !0, "aria-label": k, tabIndex: f ? 0 : -1, background: f ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: N(n.onPointerDown, (m) => {
-    m.preventDefault(), x(e), u(e), b(E.format(e.toDate(a))), l(!1);
-  }), children: i(B, { variant: "pi", textColor: o, children: P }) });
-}), de = I(W)`
+`;
+/* -------------------------------------------------------------------------------------------------
+ *  DatePickerCalendarCell
+ * -----------------------------------------------------------------------------------------------*/
+const DATE_PICKER_CALEDNAR_CELL_NAME = 'DatePickerCalendarCell';
+const DatePickerCalendarCell = React__namespace.forwardRef(({ date: date$1, startDate, ...props }, forwardedRef) => {
+    const { timeZone, locale, calendarDate, onValueChange, onOpenChange, onTextValueChange, onCalendarDateChange } = useDatePickerContext(DATE_PICKER_CALEDNAR_CELL_NAME);
+    const isSelected = date.isSameDay(calendarDate, date$1);
+    const dateFormatter = useDateFormatter.useDateFormatter(locale, {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+    const label = React__namespace.useMemo(() => dateFormatter.format(date$1.toDate(timeZone)), [dateFormatter, date$1, timeZone]);
+    const cellDateFormatter = useDateFormatter.useDateFormatter(locale, {
+        day: 'numeric',
+        calendar: date$1.calendar.identifier,
+    });
+    const formattedDate = React__namespace.useMemo(() => cellDateFormatter.formatToParts(date$1.toDate(timeZone)).find((part) => part.type === 'day').value, [cellDateFormatter, date$1, timeZone]);
+    const textValueFormatter = useDateFormatter.useDateFormatter(locale, {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    });
+    const endDate = date.endOfMonth(startDate);
+    const isOutsideVisibleRange = date$1.compare(startDate) < 0 || date$1.compare(endDate) > 0;
+    let textColor = 'neutral900';
+    if (isSelected) {
+        textColor = 'primary600';
+    }
+    else if (isOutsideVisibleRange) {
+        textColor = 'neutral600';
+    }
+    return (jsxRuntime.jsx(Cell, { as: "td", role: "gridcell", ref: forwardedRef, "aria-selected": isSelected, ...props, hasRadius: true, "aria-label": label, tabIndex: isSelected ? 0 : -1, background: isSelected ? 'primary100' : 'neutral0', cursor: "pointer", onPointerDown: uiPrimitives.composeEventHandlers(props.onPointerDown, (event) => {
+            event.preventDefault();
+            onCalendarDateChange(date$1);
+            onValueChange(date$1);
+            onTextValueChange(textValueFormatter.format(date$1.toDate(timeZone)));
+            onOpenChange(false);
+        }), children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: textColor, children: formattedDate }) }));
+});
+const Cell = styled__default.default(Box.Box) `
   text-align: center;
   padding: ${7 / 16}rem;
   // Trick to prevent the outline from overflowing because of the general outline-offset
   outline-offset: -2px !important;
 
   &:hover {
-    background: ${({ theme: e }) => e.colors.primary100};
+    background: ${({ theme }) => theme.colors.primary100};
 
-    & > ${B} {
-      color: ${({ theme: e }) => e.colors.primary600};
+    & > ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
     }
   }
-`, wt = c.forwardRef((e, r) => {
-  const { error: n, hint: t, id: a, required: s, label: g, ...u } = e, l = ce(a);
-  return i(Ze, { error: n, hint: t, required: s, id: l, children: F(U, { direction: "column", alignItems: "stretch", gap: 1, children: [i(qe, { children: g }), i(Xe, { ref: r, id: l, error: n, required: s, ...u }), i(Ke, {}), i(Ge, {})] }) });
-}), xt = Ye(console.warn), R = (e) => {
-  if (typeof e == "string") {
-    xt("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
-    const t = Date.parse(e);
-    Number.isNaN(t) ? e = /* @__PURE__ */ new Date() : e = new Date(t);
-  }
-  const r = e.toISOString(), n = Re(r, "UTC");
-  return Se(n);
-}, Xt = wt;
-export {
-  Xt as DatePicker,
-  Xe as DatePickerInput
+`;
+const DatePickerField = React__namespace.forwardRef((props, ref) => {
+    const { error, hint, id, required, label, ...restProps } = props;
+    const generatedId = useId.useId(id);
+    return (jsxRuntime.jsx(Field.Field, { error: error, hint: hint, required: required, id: generatedId, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(FieldLabel.FieldLabel, { children: label }), jsxRuntime.jsx(DatePickerInput, { ref: ref, id: generatedId, error: error, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+const warnOnce = deprecations.once(console.warn);
+const convertUTCDateToCalendarDate = (date$1) => {
+    /**
+     * TODO: remove this in V2, it's a deprecated API
+     */
+    if (typeof date$1 === 'string') {
+        warnOnce("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");
+        const timestamp = Date.parse(date$1);
+        if (!Number.isNaN(timestamp)) {
+            date$1 = new Date(timestamp);
+        }
+        else {
+            date$1 = new Date();
+        }
+    }
+    const utcDateString = date$1.toISOString();
+    const zonedDateTime = date.parseAbsolute(utcDateString, 'UTC');
+    /**
+     * ZonedDateTime can't have weeks added,
+     * see – https://github.com/adobe/react-spectrum/issues/3667
+     */
+    return date.toCalendarDate(zonedDateTime);
 };
+const DatePicker = DatePickerField;
+
+exports.DatePicker = DatePicker;
+exports.DatePickerInput = DatePickerInput;