@strapi/design-system 1.8.0 → 1.8.2

package/dist/DatePicker/DatePicker.js

@@ -1,32 +1,33 @@
-import { jsxs as A, jsx as l } from "react/jsx-runtime";
-import * as d from "react";
-import { useFloating as be, offset as xe, shift as we, flip as ke, autoUpdate as Te } from "@floating-ui/react-dom";
-import { today as j, minDate as U, maxDate as W, startOfMonth as Ee, startOfWeek as re, getDayOfWeek as Ie, isSameDay as ne, endOfMonth as Pe, parseAbsoluteToLocal as Se, toCalendarDate as Ae } from "@internationalized/date";
-import { useFocusGuards as Re } from "@radix-ui/react-focus-guards";
-import { FocusScope as Me } from "@radix-ui/react-focus-scope";
-import { Cross as ve, Calendar as $e } from "@strapi/icons";
-import { composeEventHandlers as R } from "@strapi/ui-primitives";
-import { createPortal as Le } from "react-dom";
-import { RemoveScroll as Fe } from "react-remove-scroll";
-import E from "styled-components";
-import { useDesignSystem as Ne } from "../DesignSystemProvider.js";
+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 Oe } from "../helpers/context.js";
-import { useComposedRefs as B } from "../hooks/useComposeRefs.js";
-import { useControllableState as Ve } from "../hooks/useControllableState.js";
-import { useDateFormatter as _ } from "../hooks/useDateFormatter.js";
-import { useId as ae } from "../hooks/useId.js";
-import { SingleSelectInput as J, SingleSelectOption as Q } from "../Select/SingleSelect.js";
-import { Portal as Ye } from "../Portal/Portal.js";
-import { Flex as V } from "../Flex/Flex.js";
-import { getThemeSize as ze, inputFocusStyle as Ue } from "../themes/utils.js";
-import { Box as Y } from "../Box/Box.js";
-import { Typography as z } from "../Typography/Typography.js";
-import { Field as We } from "../Field/Field.js";
-import { FieldLabel as je } from "../Field/FieldLabel.js";
-import { FieldHint as Be } from "../Field/FieldHint.js";
-import { FieldError as qe } from "../Field/FieldError.js";
-const Ke = 200, ee = 15, [Ge, M] = Oe("DatePicker"), Ze = d.forwardRef(({
+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
    */
@@ -34,101 +35,100 @@ const Ke = 200, ee = 15, [Ge, M] = Oe("DatePicker"), Ze = d.forwardRef(({
   className: r,
   initialDate: n,
   locale: t,
-  maxDate: o,
-  minDate: c,
-  monthSelectLabel: h = "Month",
+  maxDate: a,
+  minDate: s,
+  monthSelectLabel: g = "Month",
   onChange: u,
-  selectedDate: i,
-  yearSelectLabel: p = "Year",
+  selectedDate: l,
+  yearSelectLabel: b = "Year",
   /**
    * Combobox props
    */
-  error: y,
-  id: C,
-  disabled: a = !1,
-  placeholder: f,
-  required: b = !1,
-  onClear: D,
-  clearLabel: k = "Clear",
-  size: x,
+  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: T,
+  ariaLabel: h,
   /**
    * @preserve
    * @deprecated This is no longer used.
    */
-  selectedDateLabel: s,
+  selectedDateLabel: o,
   ...m
-}, w) => {
-  const v = Ne("DatePicker"), P = t ?? v.locale, q = _(P, {
-    dateStyle: "short"
-  }), $ = d.useMemo(() => {
-    const g = q.formatToParts(/* @__PURE__ */ new Date()), { value: S } = g.find((N) => N.type === "literal");
-    return S;
-  }, [q]), [le, se] = d.useState(!1), [ie, ce] = d.useState(null), [K, de] = d.useState(null), [ue, fe] = d.useState(null), [O, L] = d.useState(), [F, G] = Ve({
-    defaultProp: n ? I(n) : void 0,
-    prop: i && I(i),
-    onChange(g) {
-      u && u(g?.toDate("UTC"));
+}, 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));
     }
-  }), [Z, H] = d.useMemo(() => {
-    const g = n ? I(n) : j("UTC"), S = c ? I(c) : g.set({ day: 1, month: 1, year: g.year - Ke });
-    let N = o ? I(o) : g.set({ day: 31, month: 12, year: g.year + ee });
-    return N.compare(S) < 0 && (N = S.set({ day: 31, month: 12, year: S.year + ee })), [S, N];
-  }, [c, o, n]), [me, X] = d.useState(He({
-    currentValue: F,
-    minDate: Z,
-    maxDate: H
-  })), he = ae(), pe = d.useRef(null), ge = (g) => {
-    D && !a && (L(""), G(void 0), D(g), K?.focus());
-  }, De = d.useCallback((g) => {
-    g && F && X(F), se(g);
-  }, [F]);
-  d.useLayoutEffect(() => {
-    if (i) {
-      const g = I(i);
-      L(g.toString().split("-").reverse().join($));
+  }), [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("");
-  }, [$, i]), d.useLayoutEffect(() => {
-    if (n && O === void 0) {
-      const g = I(n);
-      L(g.toString().split("-").reverse().join($));
+      _("");
+  }, [l, $, T]), c.useLayoutEffect(() => {
+    if (n && Y === void 0) {
+      const D = R(n);
+      _($.format(D.toDate(T)));
     }
-  }, [$, n, O]);
-  const Ce = `${C}-hint`, ye = `${C}-error`;
-  return A(Ge, { calendarDate: me, content: ue, contentId: he, disabled: a, locale: P, minDate: Z, maxDate: H, open: le, onCalendarDateChange: X, onContentChange: fe, onOpenChange: De, onTextInputChange: de, onTextValueChange: L, onTriggerChange: ce, onValueChange: G, required: b, separator: $, textInput: K, textValue: O, timeZone: "UTC", trigger: ie, value: F, children: [A(Je, { className: r, size: x, hasError: !!y, children: [l(tt, { "aria-hidden": !0 }), l(nt, { ref: w, placeholder: f, "aria-describedby": `${Ce} ${ye}`, id: C, ...m }), O && D ? l(et, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": a, "aria-label": k, title: k, ref: pe, children: l(ve, {}) }) : null] }), l(Ye, { children: l(st, { label: e, children: l(ft, { monthSelectLabel: h, yearSelectLabel: p }) }) })] });
-}), te = (e) => !!e.match(/^[^a-zA-Z]*$/), He = ({ currentValue: e, minDate: r, maxDate: n }) => {
-  const t = j("UTC");
-  return e || (U(r, t) === r && W(n, t) === n ? t : U(r, t) === t ? r : W(n, t) === t ? n : t);
-}, Xe = "DatePickerTrigger", Je = d.forwardRef(({ hasError: e, size: r = "M", ...n }, t) => {
-  const o = M(Xe), c = B(t, (u) => o.onTriggerChange(u)), h = () => {
-    o.disabled || o.onOpenChange(!0);
+  }, [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 l(Me, {
+  return i(ve, {
     asChild: !0,
     // we make sure we're not trapping once it's been closed
     // (closed !== unmounted when animating out)
-    trapped: o.open,
+    trapped: a.open,
     onMountAutoFocus: (u) => {
       u.preventDefault();
     },
     onUnmountAutoFocus: (u) => {
       document.getSelection()?.empty(), u.preventDefault();
     },
-    children: l(Qe, { ref: c, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: o.disabled ? "neutral150" : "neutral0", onClick: R(n.onClick, () => {
-      o.textInput?.focus();
-    }), onPointerDown: R(n.onPointerDown, (u) => {
-      const i = u.target;
-      i.hasPointerCapture(u.pointerId) && i.releasePointerCapture(u.pointerId), (i.closest("button") ?? i.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (h(), o.textInput?.focus());
+    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());
     }) })
   });
-}), Qe = E(V)`
+}), tt = I(U)`
   border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
-  min-height: ${({ theme: e, $size: r }) => ze("input")({ theme: e, size: r })};
+  min-height: ${({ theme: e, $size: r }) => We("input")({ theme: e, size: r })};
 
   &[data-disabled] {
     color: ${({ theme: e }) => e.colors.neutral600};
@@ -141,8 +141,8 @@ const Ke = 200, ee = 15, [Ge, M] = Oe("DatePicker"), Ze = d.forwardRef(({
     outline: none;
   }
 
-  ${({ theme: e, $hasError: r }) => Ue()({ theme: e, hasError: r })};
-`, et = E(Y)`
+  ${({ theme: e, $hasError: r }) => Be()({ theme: e, hasError: r })};
+`, rt = I(W)`
   border: none;
 
   svg {
@@ -153,81 +153,105 @@ const Ke = 200, ee = 15, [Ge, M] = Oe("DatePicker"), Ze = d.forwardRef(({
   svg path {
     fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, tt = E($e)`
+`, nt = I(Fe)`
   & > path {
     fill: ${({ theme: e }) => e.colors.neutral500};
   }
-`, rt = "DatePickerTextInput", nt = d.forwardRef(({ placeholder: e, ...r }, n) => {
-  const t = M(rt), { onTextValueChange: o, textValue: c, onTextInputChange: h, onOpenChange: u, disabled: i, separator: p } = t, y = B(n, (a) => h(a)), C = () => {
-    i || u(!0);
-  };
-  return l(ot, { role: "combobox", type: "text", inputMode: "numeric", ref: y, "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: i, "data-disabled": i ? "" : void 0, pattern: `\\d{2}${p}\\d{2}${p}\\d{4}`, placeholder: e ?? `DD${p}MM${p}YYYY`, ...r, value: c ?? "", onBlur: R(r.onBlur, () => {
+`, 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(t.calendarDate.toString().split("-").reverse().join(p)), t.onValueChange(t.calendarDate);
-  }), onChange: R(r.onChange, (a) => {
-    if (te(a.target.value)) {
-      const [f, b, D] = a.target.value.split(p), k = t.calendarDate.year;
-      let x = t.calendarDate.year;
-      if (D) {
-        let P = D.length === 1 ? `0${D}` : D;
-        x = D.length < 3 ? Number(`${k}`.slice(0, 4 - P.length) + P) : Number(P);
+    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);
       }
-      D && D.length < 3 && x > t.maxDate.year && (x -= 100);
-      const T = t.calendarDate.set({ year: x }), s = T.calendar.getMonthsInYear(T), m = T.set({
-        month: b && Number(b) <= s ? Number(b) : void 0
-      }), w = m.calendar.getDaysInMonth(m), v = m.set({
-        day: f && Number(f) <= w ? Number(f) : void 0
+      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(at(v, t.minDate, t.maxDate)), t.onTextValueChange(a.target.value);
+      t.onCalendarDateChange(it(q, t.minDate, t.maxDate)), t.onTextValueChange(d.target.value);
     }
-  }), onKeyDown: R(r.onKeyDown, (a) => {
-    if (!t.open && (te(a.key) || ["ArrowDown", "Backspace"].includes(a.key)))
-      C();
-    else if (["Tab"].includes(a.key) && t.open)
-      a.preventDefault();
-    else if (["Escape"].includes(a.key))
-      t.open ? t.onOpenChange(!1) : (t.onValueChange(void 0), t.onTextValueChange("")), a.preventDefault();
-    else if (t.open && ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(a.key))
-      switch (a.preventDefault(), a.key) {
+  }), 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 f = t.calendarDate.add({ weeks: 1 });
-          if (t.maxDate && f.compare(t.maxDate) > 0)
+          const h = t.calendarDate.add({ weeks: 1 });
+          if (t.maxDate && h.compare(t.maxDate) > 0)
             return;
-          t.onCalendarDateChange(f);
+          t.onCalendarDateChange(h);
           return;
         }
         case "ArrowRight": {
-          const f = t.calendarDate.add({ days: 1 });
-          if (t.maxDate && f.compare(t.maxDate) > 0)
+          const h = t.calendarDate.add({ days: 1 });
+          if (t.maxDate && h.compare(t.maxDate) > 0)
             return;
-          t.onCalendarDateChange(f);
+          t.onCalendarDateChange(h);
           return;
         }
         case "ArrowUp": {
-          const f = t.calendarDate.subtract({ weeks: 1 });
-          if (t.minDate && f.compare(t.minDate) < 0)
+          const h = t.calendarDate.subtract({ weeks: 1 });
+          if (t.minDate && h.compare(t.minDate) < 0)
             return;
-          t.onCalendarDateChange(f);
+          t.onCalendarDateChange(h);
           return;
         }
         case "ArrowLeft": {
-          const f = t.calendarDate.subtract({ days: 1 });
-          if (t.minDate && f.compare(t.minDate) < 0)
+          const h = t.calendarDate.subtract({ days: 1 });
+          if (t.minDate && h.compare(t.minDate) < 0)
             return;
-          t.onCalendarDateChange(f);
+          t.onCalendarDateChange(h);
         }
       }
     else
-      t.open && ["Enter"].includes(a.key) && (a.preventDefault(), o(t.calendarDate.toString().split("-").reverse().join(p)), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
+      t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
   }) });
 });
-function at(e, r, n) {
-  return r && (e = W(e, r)), n && (e = U(e, n)), e;
+function it(e, r, n) {
+  return r && (e = X(e, r)), n && (e = H(e, n)), e;
 }
-const ot = E.input`
+const lt = I.input`
   width: 100%;
   font-size: ${14 / 16}rem;
   color: ${({ theme: e }) => e.colors.neutral800};
@@ -242,104 +266,105 @@ const ot = E.input`
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, lt = "DatePickerContent", st = d.forwardRef((e, r) => {
-  const [n, t] = d.useState(), o = M(lt);
-  if (d.useLayoutEffect(() => {
+`, st = "DatePickerContent", ct = c.forwardRef((e, r) => {
+  const [n, t] = c.useState(), a = L(st);
+  if (c.useLayoutEffect(() => {
     t(new DocumentFragment());
-  }, []), !o.open) {
-    const c = n;
-    return c ? Le(l("div", { children: e.children }), c) : null;
+  }, []), !a.open) {
+    const s = n;
+    return s ? Ne(i("div", { children: e.children }), s) : null;
   }
-  return l(ct, { ...e, ref: r });
-}), it = "DatePickerContent", ct = d.forwardRef((e, r) => {
-  const { label: n = "Choose date", ...t } = e, { onOpenChange: o, ...c } = M(it), { x: h, y: u, reference: i, floating: p, strategy: y } = be({
+  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: [
-      xe({
+      we({
         mainAxis: 4
       }),
-      we(),
+      xe(),
       ke()
     ],
+    elements: {
+      reference: s.trigger
+    },
     whileElementsMounted: Te
   });
-  d.useEffect(() => {
-    const a = () => {
-      o(!1);
+  c.useEffect(() => {
+    const f = () => {
+      a(!1);
     };
-    return window.addEventListener("blur", a), window.addEventListener("resize", a), () => {
-      window.removeEventListener("blur", a), window.removeEventListener("resize", a);
+    return window.addEventListener("blur", f), window.addEventListener("resize", f), () => {
+      window.removeEventListener("blur", f), window.removeEventListener("resize", f);
     };
-  }, [o]), d.useLayoutEffect(() => {
-    i(c.trigger);
-  }, [i, c.trigger]);
-  const C = B(r, (a) => c.onContentChange(a), p);
-  return Re(), l(Fe, { allowPinchZoom: !0, children: l(_e, {
+  }, [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: (a) => {
-      a.preventDefault();
+    onFocusOutside: (f) => {
+      f.preventDefault();
     },
     onDismiss: () => {
-      o(!1);
+      a(!1);
     },
-    children: l(dt, { ref: C, "data-state": c.open ? "open" : "closed", onContextMenu: (a) => a.preventDefault(), id: c.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
-      left: h,
+    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: y
+      position: b
     }, hasRadius: !0, background: "neutral0", padding: 1, ...t })
   }) });
-}), dt = E(Y)`
+}), 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};
-`, ut = "DatePickerCalendar", ft = d.forwardRef(({ monthSelectLabel: e, yearSelectLabel: r, ...n }, t) => {
-  const { locale: o, timeZone: c, minDate: h, maxDate: u, calendarDate: i, onCalendarDateChange: p } = M(ut), y = Ee(i), C = d.useMemo(() => {
-    const s = h.year, m = u.year;
-    return [...Array(m - s + 1).keys()].map((w) => (s + w).toString());
-  }, [h, u]), a = _(o, { month: "long" }), f = d.useMemo(() => [...Array(i.calendar.getMonthsInYear(i)).keys()].map((s) => a.format(i.set({ month: s + 1 }).toDate(c))), [i, a, c]), b = _(o, { weekday: "short" }), D = d.useMemo(() => {
-    let s = re(j(c), o);
+`, 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 v = s.add({ days: m }).toDate(c);
-      return b.format(v);
+      let T = o.add({ days: m }).toDate(s);
+      return w.format(T);
     });
-  }, [c, o, b]), k = (s) => {
-    if (typeof s == "number")
+  }, [s, a, w]), E = (o) => {
+    if (typeof o == "number")
       return;
-    const m = i.set({ month: f.indexOf(s) + 1 });
-    p(m);
-  }, x = (s) => {
-    if (typeof s == "number")
+    const m = l.set({ month: k.indexOf(o) + 1 });
+    b(m);
+  }, d = (o) => {
+    if (typeof o == "number")
       return;
-    const m = i.set({ year: parseInt(s, 10) });
-    p(m);
-  }, T = mt(y, o);
-  return A(V, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [A(ht, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [l(J, { label: e, size: "S", value: f[i.month - 1], onChange: k, children: f.map((s) => l(Q, { value: s, children: s }, s)) }), l(J, { size: "S", value: i.year.toString(), label: r, onChange: x, children: C.map((s) => l(Q, { value: s, children: s }, s)) })] }), A("table", { role: "grid", children: [l("thead", { "aria-hidden": !0, children: l("tr", { "aria-rowindex": 0, children: D.map((s, m) => l(pt, { "aria-colindex": m, children: s }, s)) }) }), l("tbody", { children: [...new Array(6).keys()].map((s) => l("tr", { "aria-rowindex": s + 2, children: T(s).map((m, w) => m ? l(Ct, { "aria-colindex": w + 1, date: m, startDate: y }, m.toString()) : l(oe, { "aria-colindex": w + 1 })) }, s)) })] })] });
-}), mt = (e, r) => (n) => {
-  let t = e.add({ weeks: n }), o = [];
-  t = re(t, r);
-  let c = Ie(t, r);
-  for (let h = 0; h < c; h++)
-    o.push(null);
-  for (; o.length < 7; ) {
-    o.push(t);
-    let h = t.add({ days: 1 });
-    if (ne(t, h))
+    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 = h;
+    t = g;
   }
-  for (; o.length < 7; )
-    o.push(null);
-  return o;
-}, ht = E(V)`
+  for (; a.length < 7; )
+    a.push(null);
+  return a;
+}, gt = I(U)`
   div[role='combobox'] {
     border: 1px solid transparent;
     background: transparent;
     font-weight: ${(e) => e.theme.fontWeights.bold};
 
-    ${z} {
+    ${B} {
       color: ${({ theme: e }) => e.colors.neutral800};
     }
 
@@ -354,24 +379,28 @@ const ot = E.input`
       background-color: ${({ theme: e }) => e.colors.neutral100};
     }
   }
-`, pt = d.forwardRef(({ children: e, ...r }, n) => l(gt, { as: "th", role: "gridcell", ref: n, ...r, height: `${24 / 16}rem`, width: `${32 / 16}rem`, children: l(z, { variant: "pi", fontWeight: "bold", color: "neutral800", children: e.slice(0, 2) }) })), gt = E(Y)`
+`, 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};
   text-transform: capitalize;
-`, Dt = "DatePickerCalendarCell", Ct = d.forwardRef(({ date: e, startDate: r, ...n }, t) => {
-  const { timeZone: o, locale: c, calendarDate: h, onValueChange: u, onOpenChange: i, onTextValueChange: p, separator: y, onCalendarDateChange: C } = M(Dt), a = ne(h, e), f = _(c, {
+`, 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"
-  }), b = d.useMemo(() => f.format(e.toDate(o)), [f, e, o]), D = _(c, {
+  }), k = c.useMemo(() => y.format(e.toDate(a)), [y, e, a]), w = S(s, {
     day: "numeric",
     calendar: e.calendar.identifier
-  }), k = d.useMemo(() => D.formatToParts(e.toDate(o)).find((m) => m.type === "day").value, [D, e, o]), x = Pe(r), T = e.compare(r) < 0 || e.compare(x) > 0;
-  let s = "neutral900";
-  return a ? s = "primary600" : T && (s = "neutral600"), l(oe, { as: "td", role: "gridcell", ref: t, "aria-selected": a, ...n, hasRadius: !0, "aria-label": b, tabIndex: a ? 0 : -1, background: a ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: R(n.onPointerDown, (m) => {
-    m.preventDefault(), C(e), u(e), p(e.toString().split("-").reverse().join(y)), i(!1);
-  }), children: l(z, { variant: "pi", textColor: s, children: k }) });
-}), oe = E(Y)`
+  }), 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)`
   text-align: center;
   padding: ${7 / 16}rem;
   // Trick to prevent the outline from overflowing because of the general outline-offset
@@ -380,18 +409,23 @@ const ot = E.input`
   &:hover {
     background: ${({ theme: e }) => e.colors.primary100};
 
-    & > ${z} {
+    & > ${B} {
       color: ${({ theme: e }) => e.colors.primary600};
     }
   }
-`, yt = d.forwardRef((e, r) => {
-  const { error: n, hint: t, id: o, required: c, label: h, ...u } = e, i = ae(o);
-  return l(We, { error: n, hint: t, required: c, ref: r, id: i, children: A(V, { direction: "column", alignItems: "stretch", gap: 1, children: [l(je, { children: h }), l(Ze, { id: i, error: n, required: c, ...u }), l(Be, {}), l(qe, {})] }) });
-}), I = (e) => {
-  const r = e.toISOString(), n = Se(r);
-  return Ae(n);
-}, Kt = yt;
+`, 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, ref: r, id: l, children: F(U, { direction: "column", alignItems: "stretch", gap: 1, children: [i(qe, { children: g }), i(Xe, { 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 {
-  Kt as DatePicker,
-  Ze as DatePickerInput
+  Xt as DatePicker,
+  Xe as DatePickerInput
 };