@strapi/design-system 0.0.0-3cf3ff39

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,397 @@
+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 { 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(({
+  /**
+   * DatePickerCalendar props
+   */
+  calendarLabel: e,
+  className: r,
+  initialDate: n,
+  locale: t,
+  maxDate: a,
+  minDate: c,
+  monthSelectLabel: h = "Month",
+  onChange: u,
+  selectedDate: i,
+  yearSelectLabel: p = "Year",
+  /**
+   * Combobox props
+   */
+  error: y,
+  id: C,
+  disabled: o = !1,
+  placeholder: f,
+  required: b = !1,
+  onClear: D,
+  clearLabel: k = "Clear",
+  size: x,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  ariaLabel: T,
+  /**
+   * @preserve
+   * @deprecated This is no longer used.
+   */
+  selectedDateLabel: s,
+  ...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"));
+    }
+  }), [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 = a ? I(a) : 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, a, n]), [me, X] = d.useState(He({
+    currentValue: F,
+    minDate: Z,
+    maxDate: H
+  })), he = ae(), pe = d.useRef(null), ge = (g) => {
+    D && !o && (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($));
+    } else
+      L("");
+  }, [$, i]), d.useLayoutEffect(() => {
+    if (n && O === void 0) {
+      const g = I(n);
+      L(g.toString().split("-").reverse().join($));
+    }
+  }, [$, n, O]);
+  const Ce = `${C}-hint`, ye = `${C}-error`;
+  return A(Ge, { calendarDate: me, content: ue, contentId: he, disabled: o, 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": o, "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 a = M(Xe), c = B(t, (u) => a.onTriggerChange(u)), h = () => {
+    a.disabled || a.onOpenChange(!0);
+  };
+  return l(Me, {
+    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: l(Qe, { ref: c, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick: R(n.onClick, () => {
+      a.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(), a.textInput?.focus());
+    }) })
+  });
+}), Qe = E(V)`
+  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 })};
+
+  &[data-disabled] {
+    color: ${({ theme: e }) => e.colors.neutral600};
+    background: ${({ theme: e }) => e.colors.neutral150};
+    cursor: not-allowed;
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({ theme: e, $hasError: r }) => Ue()({ theme: e, hasError: r })};
+`, et = E(Y)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme: e }) => e.colors.neutral600};
+  }
+`, tt = E($e)`
+  & > path {
+    fill: ${({ theme: e }) => e.colors.neutral500};
+  }
+`, rt = "DatePickerTextInput", nt = d.forwardRef(({ placeholder: e, ...r }, n) => {
+  const t = M(rt), { onTextValueChange: a, textValue: c, onTextInputChange: h, onOpenChange: u, disabled: i, separator: p } = t, y = B(n, (o) => h(o)), 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, () => {
+    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, (o) => {
+    if (te(o.target.value)) {
+      const [f, b, D] = o.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);
+      }
+      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
+      });
+      t.onCalendarDateChange(at(v, t.minDate, t.maxDate)), t.onTextValueChange(o.target.value);
+    }
+  }), onKeyDown: R(r.onKeyDown, (o) => {
+    if (!t.open && (te(o.key) || ["ArrowDown", "Backspace"].includes(o.key)))
+      C();
+    else if (["Tab"].includes(o.key) && t.open)
+      o.preventDefault();
+    else if (["Escape"].includes(o.key))
+      t.open ? t.onOpenChange(!1) : (t.onValueChange(void 0), t.onTextValueChange("")), o.preventDefault();
+    else if (t.open && ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"].includes(o.key))
+      switch (o.preventDefault(), o.key) {
+        case "ArrowDown": {
+          const f = t.calendarDate.add({ weeks: 1 });
+          if (t.maxDate && f.compare(t.maxDate) > 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowRight": {
+          const f = t.calendarDate.add({ days: 1 });
+          if (t.maxDate && f.compare(t.maxDate) > 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowUp": {
+          const f = t.calendarDate.subtract({ weeks: 1 });
+          if (t.minDate && f.compare(t.minDate) < 0)
+            return;
+          t.onCalendarDateChange(f);
+          return;
+        }
+        case "ArrowLeft": {
+          const f = t.calendarDate.subtract({ days: 1 });
+          if (t.minDate && f.compare(t.minDate) < 0)
+            return;
+          t.onCalendarDateChange(f);
+        }
+      }
+    else
+      t.open && ["Enter"].includes(o.key) && (a(t.calendarDate.toString().split("-").reverse().join(p)), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
+  }) });
+});
+function at(e, r, n) {
+  return r && (e = W(e, r)), n && (e = U(e, n)), e;
+}
+const ot = E.input`
+  width: 100%;
+  font-size: ${14 / 16}rem;
+  color: ${({ theme: e }) => e.colors.neutral800};
+  height: 100%;
+  border: none;
+  background-color: transparent;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: inherit;
+  }
+`, lt = "DatePickerContent", st = d.forwardRef((e, r) => {
+  const [n, t] = d.useState(), a = M(lt);
+  if (d.useLayoutEffect(() => {
+    t(new DocumentFragment());
+  }, []), !a.open) {
+    const c = n;
+    return c ? Le(l("div", { children: e.children }), c) : null;
+  }
+  return l(ct, { ...e, ref: r });
+}), it = "DatePickerContent", ct = d.forwardRef((e, r) => {
+  const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...c } = M(it), { x: h, y: u, reference: i, floating: p, strategy: y } = be({
+    strategy: "fixed",
+    placement: "bottom-start",
+    middleware: [
+      xe({
+        mainAxis: 4
+      }),
+      we(),
+      ke()
+    ],
+    whileElementsMounted: Te
+  });
+  d.useEffect(() => {
+    const o = () => {
+      a(!1);
+    };
+    return window.addEventListener("blur", o), window.addEventListener("resize", o), () => {
+      window.removeEventListener("blur", o), window.removeEventListener("resize", o);
+    };
+  }, [a]), d.useLayoutEffect(() => {
+    i(c.trigger);
+  }, [i, c.trigger]);
+  const C = B(r, (o) => c.onContentChange(o), p);
+  return Re(), l(Fe, { allowPinchZoom: !0, children: l(_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: (o) => {
+      o.preventDefault();
+    },
+    onDismiss: () => {
+      a(!1);
+    },
+    children: l(dt, { ref: C, "data-state": c.open ? "open" : "closed", onContextMenu: (o) => o.preventDefault(), id: c.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
+      left: h,
+      top: u,
+      position: y
+    }, hasRadius: !0, background: "neutral0", padding: 1, ...t })
+  }) });
+}), dt = E(Y)`
+  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: a, 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]), o = _(a, { month: "long" }), f = d.useMemo(() => [...Array(i.calendar.getMonthsInYear(i)).keys()].map((s) => o.format(i.set({ month: s + 1 }).toDate(c))), [i, o, c]), b = _(a, { weekday: "short" }), D = d.useMemo(() => {
+    let s = re(j(c), a);
+    return [...new Array(7).keys()].map((m) => {
+      let v = s.add({ days: m }).toDate(c);
+      return b.format(v);
+    });
+  }, [c, a, b]), k = (s) => {
+    if (typeof s == "number")
+      return;
+    const m = i.set({ month: f.indexOf(s) + 1 });
+    p(m);
+  }, x = (s) => {
+    if (typeof s == "number")
+      return;
+    const m = i.set({ year: parseInt(s, 10) });
+    p(m);
+  }, T = mt(y, a);
+  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 }), a = [];
+  t = re(t, r);
+  let c = Ie(t, r);
+  for (let h = 0; h < c; h++)
+    a.push(null);
+  for (; a.length < 7; ) {
+    a.push(t);
+    let h = t.add({ days: 1 });
+    if (ne(t, h))
+      break;
+    t = h;
+  }
+  for (; a.length < 7; )
+    a.push(null);
+  return a;
+}, ht = E(V)`
+  div[role='combobox'] {
+    border: 1px solid transparent;
+    background: transparent;
+    font-weight: ${(e) => e.theme.fontWeights.bold};
+
+    ${z} {
+      color: ${({ theme: e }) => e.colors.neutral800};
+    }
+
+    svg {
+      > g,
+      path {
+        fill: ${({ theme: e }) => e.colors.neutral500};
+      }
+    }
+
+    &:hover {
+      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)`
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  text-transform: capitalize;
+`, Dt = "DatePickerCalendarCell", Ct = d.forwardRef(({ date: e, startDate: r, ...n }, t) => {
+  const { timeZone: a, locale: c, calendarDate: h, onValueChange: u, onOpenChange: i, onTextValueChange: p, separator: y, onCalendarDateChange: C } = M(Dt), o = ne(h, e), f = _(c, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  }), b = d.useMemo(() => f.format(e.toDate(a)), [f, e, a]), D = _(c, {
+    day: "numeric",
+    calendar: e.calendar.identifier
+  }), k = d.useMemo(() => D.formatToParts(e.toDate(a)).find((m) => m.type === "day").value, [D, e, a]), x = Pe(r), T = e.compare(r) < 0 || e.compare(x) > 0;
+  let s = "neutral900";
+  return o ? s = "primary600" : T && (s = "neutral600"), l(oe, { as: "td", role: "gridcell", ref: t, "aria-selected": o, ...n, hasRadius: !0, "aria-label": b, tabIndex: o ? 0 : -1, background: o ? "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)`
+  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};
+
+    & > ${z} {
+      color: ${({ theme: e }) => e.colors.primary600};
+    }
+  }
+`, yt = d.forwardRef((e, r) => {
+  const { error: n, hint: t, id: a, required: c, label: h, ...u } = e, i = ae(a);
+  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;
+export {
+  Kt as DatePicker,
+  Ze as DatePickerInput
+};

package/dist/DatePicker/DatePickerCalendar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("./components.cjs"),W=require("./DatePickerTd.cjs"),n=require("./DatePickerTh.cjs"),$=require("../helpers/getDefaultLocale.cjs"),E=require("./utils/generateWeeks.cjs"),H=require("./utils/getDayOfWeek.cjs"),I=require("./utils/getMonths.cjs"),V=require("./utils/getYears.cjs"),s=require("../SimpleMenu/SimpleMenu.cjs"),z=require("../RawTable/RawTable.cjs"),A=require("../RawTable/RawThead.cjs"),D=require("../RawTable/RawTr.cjs"),G=require("../RawTable/RawTbody.cjs"),J=require("./utils/formatDate.cjs"),K=require("../FocusTrap/FocusTrap.cjs"),h=require("../Box/Box.cjs"),N=require("../Flex/Flex.cjs"),Q=require("../VisuallyHidden/VisuallyHidden.cjs"),U=({onEscape:i,popoverSource:o,...l})=>e.jsx(O.DatePickerPopover,{source:o,role:"dialog","aria-modal":"true",spacing:4,children:e.jsx(K.FocusTrap,{onEscape:i,children:e.jsx(p,{...l})})}),p=({selectedDate:i,initialDate:o=new Date,locale:l,onChange:x,minDate:k,maxDate:T})=>{const[c,d]=j.useState(o),[g,q,w]=E.generateWeeks(c,i),{sun:P,mon:m,tue:f,wed:R,thu:C,fri:M,sat:y}=H.getDayOfWeek(),u=I.getMonths(),S=V.getYears(k,T),b=l||$.getDefaultLocale();j.useEffect(()=>{i&&d(i)},[i]);const F=r=>{const t=new Date(c);t.setMonth(u.indexOf(r)),d(t)},Y=r=>{const t=new Date(c);t.setFullYear(r),d(t)},B=r=>()=>{x&&x(r)};return e.jsxs(h.Box,{padding:4,children:[e.jsx(h.Box,{paddingBottom:4,paddingLeft:2,paddingRight:2,children:e.jsxs(N.Flex,{children:[e.jsx(s.SimpleMenu,{label:u[c.getMonth()],children:u.map(r=>e.jsx(s.MenuItem,{onClick:()=>F(r),children:r},r))}),e.jsx(h.Box,{paddingLeft:2,children:e.jsx(s.SimpleMenu,{label:c.getFullYear(),children:S.map(r=>e.jsx(s.MenuItem,{onClick:()=>Y(r),children:r},r))})})]})}),e.jsxs(z.RawTable,{colCount:7,rowCount:g.length+1,initialCol:w,initialRow:q,role:"grid",children:[e.jsx(A.RawThead,{children:e.jsxs(D.RawTr,{"aria-rowindex":1,children:[e.jsx(n.DatePickerTh,{children:P}),e.jsx(n.DatePickerTh,{children:m}),e.jsx(n.DatePickerTh,{children:f}),e.jsx(n.DatePickerTh,{children:R}),e.jsx(n.DatePickerTh,{children:C}),e.jsx(n.DatePickerTh,{children:M}),e.jsx(n.DatePickerTh,{children:y})]})}),e.jsx(G.RawTbody,{children:g.map((r,t)=>e.jsx(D.RawTr,{children:r.map(({date:a,outsideMonth:v,isSelected:L})=>e.jsxs(W.DatePickerTd,{outsideMonth:v,onSelectDay:B(a),isSelected:L,children:[e.jsx("span",{"aria-hidden":!0,children:a.getDate()}),e.jsx(Q.VisuallyHidden,{children:e.jsx("span",{children:J.formatDate(a,b)})})]},`${a.getFullYear()}-${a.getMonth()+1}-${a.getDate()}`))},t))})]})]})};exports.DatePickerCalendar=U;exports.DatePickerCalendarContent=p;

package/dist/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as E, useEffect as O } from "react";
+import { DatePickerPopover as W } from "./components.js";
+import { DatePickerTd as H } from "./DatePickerTd.js";
+import { DatePickerTh as t } from "./DatePickerTh.js";
+import { getDefaultLocale as I } from "../helpers/getDefaultLocale.js";
+import { generateWeeks as V } from "./utils/generateWeeks.js";
+import { getDayOfWeek as q } from "./utils/getDayOfWeek.js";
+import { getMonths as z } from "./utils/getMonths.js";
+import { getYears as A } from "./utils/getYears.js";
+import { SimpleMenu as u, MenuItem as g } from "../SimpleMenu/SimpleMenu.js";
+import { RawTable as G } from "../RawTable/RawTable.js";
+import { RawThead as J } from "../RawTable/RawThead.js";
+import { RawTr as D } from "../RawTable/RawTr.js";
+import { RawTbody as K } from "../RawTable/RawTbody.js";
+import { formatDate as N } from "./utils/formatDate.js";
+import { FocusTrap as Q } from "../FocusTrap/FocusTrap.js";
+import { Box as p } from "../Box/Box.js";
+import { Flex as U } from "../Flex/Flex.js";
+import { VisuallyHidden as X } from "../VisuallyHidden/VisuallyHidden.js";
+const ke = ({ onEscape: i, popoverSource: c, ...d }) => e(W, { source: c, role: "dialog", "aria-modal": "true", spacing: 4, children: e(Q, { onEscape: i, children: e(Z, { ...d }) }) }), Z = ({ selectedDate: i, initialDate: c = /* @__PURE__ */ new Date(), locale: d, onChange: s, minDate: w, maxDate: k }) => {
+  const [a, m] = E(c), [f, C, M] = V(a, i), { sun: x, mon: R, tue: T, wed: P, thu: F, fri: S, sat: Y } = q(), h = z(), b = A(w, k), y = d || I();
+  O(() => {
+    i && m(i);
+  }, [i]);
+  const v = (r) => {
+    const o = new Date(a);
+    o.setMonth(h.indexOf(r)), m(o);
+  }, L = (r) => {
+    const o = new Date(a);
+    o.setFullYear(r), m(o);
+  }, $ = (r) => () => {
+    s && s(r);
+  };
+  return l(p, { padding: 4, children: [e(p, { paddingBottom: 4, paddingLeft: 2, paddingRight: 2, children: l(U, { children: [e(u, { label: h[a.getMonth()], children: h.map((r) => e(g, { onClick: () => v(r), children: r }, r)) }), e(p, { paddingLeft: 2, children: e(u, { label: a.getFullYear(), children: b.map((r) => e(g, { onClick: () => L(r), children: r }, r)) }) })] }) }), l(G, { colCount: 7, rowCount: f.length + 1, initialCol: M, initialRow: C, role: "grid", children: [e(J, { children: l(D, { "aria-rowindex": 1, children: [e(t, { children: x }), e(t, { children: R }), e(t, { children: T }), e(t, { children: P }), e(t, { children: F }), e(t, { children: S }), e(t, { children: Y })] }) }), e(K, { children: f.map((r, o) => (
+    // eslint-disable-next-line react/no-array-index-key
+    e(D, { children: r.map(({ date: n, outsideMonth: j, isSelected: B }) => l(H, { outsideMonth: j, onSelectDay: $(n), isSelected: B, children: [e("span", { "aria-hidden": !0, children: n.getDate() }), e(X, { children: e("span", { children: N(n, y) }) })] }, `${n.getFullYear()}-${n.getMonth() + 1}-${n.getDate()}`)) }, o)
+  )) })] })] });
+};
+export {
+  ke as DatePickerCalendar,
+  Z as DatePickerCalendarContent
+};

package/dist/DatePicker/DatePickerTd.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("styled-components"),s=require("../RawTable/RawCell.cjs"),l=require("../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},d=c(u),f=d.default.button`
+  border: none;
+  background: ${({theme:e,$isSelected:r})=>r?e.colors.primary100:e.colors.neutral0};
+  height: ${32/16}rem;
+  text-align: center;
+  width: ${32/16}rem;
+  border-radius: ${({theme:e})=>e.borderRadius};
+
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+
+  &:hover {
+    background: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &:hover > ${l.Typography} {
+    color: ${({theme:e})=>e.colors.primary600};
+  }
+`,p=({children:e,outsideMonth:r=!1,onSelectDay:i,isSelected:t=!1,...a})=>{let o="neutral900";return t?o="primary600":r&&(o="neutral600"),n.jsx(s.RawTd,{...a,children:n.jsx(f,{tabIndex:-1,onClick:i,$isSelected:t,type:"button",children:n.jsx(l.Typography,{variant:"pi",textColor:o,fontWeight:t?"bold":void 0,children:e})})})};exports.DatePickerTd=p;

package/dist/DatePicker/DatePickerTd.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import c from "styled-components";
+import { RawTd as d } from "../RawTable/RawCell.js";
+import { Typography as i } from "../Typography/Typography.js";
+const f = c.button`
+  border: none;
+  background: ${({ theme: r, $isSelected: o }) => o ? r.colors.primary100 : r.colors.neutral0};
+  height: ${32 / 16}rem;
+  text-align: center;
+  width: ${32 / 16}rem;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+
+  &:hover {
+    background: ${({ theme: r }) => r.colors.primary100};
+  }
+
+  &:hover > ${i} {
+    color: ${({ theme: r }) => r.colors.primary600};
+  }
+`, h = ({ children: r, outsideMonth: o = !1, onSelectDay: l, isSelected: e = !1, ...a }) => {
+  let t = "neutral900";
+  return e ? t = "primary600" : o && (t = "neutral600"), n(d, { ...a, children: n(f, { tabIndex: -1, onClick: l, $isSelected: e, type: "button", children: n(i, { variant: "pi", textColor: t, fontWeight: e ? "bold" : void 0, children: r }) }) });
+};
+export {
+  h as DatePickerTd
+};

package/dist/DatePicker/DatePickerTh.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("styled-components"),n=require("../RawTable/RawCell.cjs"),s=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),a=require("../VisuallyHidden/VisuallyHidden.cjs"),u=e=>e&&e.__esModule?e:{default:e},r=u(o),c=r.default(n.RawTh)`
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  text-transform: capitalize;
+`,d=r.default(s.Flex)`
+  height: ${24/16}rem;
+  width: ${32/16}rem;
+`,h=({children:e,...i})=>t.jsx(c,{...i,children:t.jsxs(d,{justifyContent:"center",children:[t.jsx(l.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800","aria-hidden":!0,children:e.substr(0,2)}),t.jsx(a.VisuallyHidden,{children:t.jsx("span",{children:e})})]})});exports.DatePickerTh=h;

package/dist/DatePicker/DatePickerTh.js

@@ -0,0 +1,18 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import t from "styled-components";
+import { RawTh as n } from "../RawTable/RawCell.js";
+import { Flex as a } from "../Flex/Flex.js";
+import { Typography as s } from "../Typography/Typography.js";
+import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
+const f = t(n)`
+  // Trick to prevent the outline from overflowing because of the general outline-offset
+  outline-offset: -2px;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  text-transform: capitalize;
+`, h = t(a)`
+  height: ${24 / 16}rem;
+  width: ${32 / 16}rem;
+`, T = ({ children: r, ...o }) => e(f, { ...o, children: i(h, { justifyContent: "center", children: [e(s, { variant: "pi", fontWeight: "bold", color: "neutral800", "aria-hidden": !0, children: r.substr(0, 2) }), e(l, { children: e("span", { children: r }) })] }) });
+export {
+  T as DatePickerTh
+};

package/dist/DatePicker/compareDates.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(e,t)=>!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate();exports.isDateEqual=l;

package/dist/DatePicker/compareDates.js

@@ -0,0 +1,4 @@
+const r = (e, t) => !e || !t ? !1 : e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+export {
+  r as isDateEqual
+};

package/dist/DatePicker/components.cjs

@@ -0,0 +1,39 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),n=require("../Field/FieldInput.cjs"),a=require("../Popover/Popover.cjs"),i=require("../Box/Box.cjs"),d=e=>e&&e.__esModule?e:{default:e},r=d(o),s=r.default(a.Popover)`
+  max-height: ${3*6}rem;
+  overflow: hidden;
+`;/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */const l=r.default.button`
+  border: none;
+  background: transparent;
+  border-radius: ${({theme:e})=>e.borderRadius};
+  cursor: ${e=>e["aria-disabled"]?"not-allowed":void 0};
+
+  & svg path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`,u=r.default.div`
+  ${({bold:e,theme:t})=>e?o.css`
+          & ${n.InputWrapper} {
+            border: 1px solid ${t.colors.primary600};
+          }
+        `:""}
+`;/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */const c=r.default(i.Box)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`;exports.DatePickerButton=l;exports.DatePickerPopover=s;exports.DatePickerWrapper=u;exports.IconBox=c;

package/dist/DatePicker/components.js

@@ -0,0 +1,53 @@
+import o, { css as t } from "styled-components";
+import { InputWrapper as n } from "../Field/FieldInput.js";
+import { Popover as i } from "../Popover/Popover.js";
+import { Box as a } from "../Box/Box.js";
+const c = o(i)`
+  max-height: ${3 * 6}rem;
+  overflow: hidden;
+`;
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */
+const m = o.button`
+  border: none;
+  background: transparent;
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  cursor: ${(r) => r["aria-disabled"] ? "not-allowed" : void 0};
+
+  & svg path {
+    fill: ${({ theme: r }) => r.colors.neutral500};
+  }
+`, u = o.div`
+  ${({ bold: r, theme: e }) => r ? t`
+          & ${n} {
+            border: 1px solid ${e.colors.primary600};
+          }
+        ` : ""}
+`;
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major version
+ */
+const $ = o(a)`
+  background: transparent;
+  border: none;
+  position: relative;
+  z-index: 1;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme: r }) => r.colors.neutral600};
+  }
+`;
+export {
+  m as DatePickerButton,
+  c as DatePickerPopover,
+  u as DatePickerWrapper,
+  $ as IconBox
+};

package/dist/DatePicker/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DatePicker.cjs");exports.DatePicker=e.DatePicker;

package/dist/DatePicker/index.js

@@ -0,0 +1,4 @@
+import { DatePicker as o } from "./DatePicker.js";
+export {
+  o as DatePicker
+};

package/dist/DatePicker/utils/formatDate.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=(t,e)=>new Intl.DateTimeFormat(e).format(t);exports.formatDate=r;

package/dist/DatePicker/utils/formatDate.js

@@ -0,0 +1,4 @@
+const e = (t, r) => new Intl.DateTimeFormat(r).format(t);
+export {
+  e as formatDate
+};

package/dist/DatePicker/utils/generateWeeks.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../compareDates.cjs"),D=7*6,M=(e,g)=>{const i=new Date(e.getFullYear(),e.getMonth(),1),l=new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),c=new Date(e.getFullYear(),e.getMonth(),0).getDate(),r=i.getDay(),h=l+r,s=[];let a=0,u=0,n=0,o;for(let t=0;t<D;t++)t>6&&t%7===0&&n++,s[n]||(s[n]=[]),t<r?o={date:new Date(e.getFullYear(),e.getMonth()-1,c-r+t+1),outsideMonth:!0}:t<h?o={date:new Date(e.getFullYear(),e.getMonth(),t-r+1)}:o={date:new Date(e.getFullYear(),e.getMonth()+1,t-r-l+1),outsideMonth:!0},f.isDateEqual(g,o.date)&&(a=n+1,u=s[n].length,o.isSelected=!0),s[n].push(o);return[s,a,u]};exports.generateWeeks=M;