@strapi/design-system 1.7.9 → 1.8.0

package/dist/Combobox/Combobox.js

@@ -1,62 +1,65 @@
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import * as p from "react";
-import { Cross as he, CarretDown as pe } from "@strapi/icons";
-import { Combobox as t } from "@strapi/ui-primitives";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import * as f from "react";
+import { Cross as me, CarretDown as ge } from "@strapi/icons";
+import { Combobox as n } from "@strapi/ui-primitives";
 import l from "styled-components";
-import { stripReactIdOfColon as fe } from "../helpers/strings.js";
+import { stripReactIdOfColon as be } from "../helpers/strings.js";
 import { useControllableState as I } from "../hooks/useControllableState.js";
-import { useId as q } from "../hooks/useId.js";
-import { useIntersection as me } from "../hooks/useIntersection.js";
-import { inputFocusStyle as ge } from "../themes/utils.js";
-import { Loader as be } from "../Loader/Loader.js";
-import { Box as w } from "../Box/Box.js";
-import { Typography as d } from "../Typography/Typography.js";
-import { Field as $e } from "../Field/Field.js";
-import { Flex as h } from "../Flex/Flex.js";
-import { FieldLabel as Ce } from "../Field/FieldLabel.js";
-import { FieldHint as xe } from "../Field/FieldHint.js";
-import { FieldError as Ie } from "../Field/FieldError.js";
-const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMessage: f = (c) => `Create "${c}"`, defaultFilterValue: m, defaultTextValue: g, defaultOpen: D = !1, open: H, onOpenChange: N, disabled: b = !1, error: $, filterValue: W, hasMoreItems: L = !1, hint: U, id: A, label: G, labelAction: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: Q = () => "No results found", onChange: V, onClear: x, onCreateOption: v, onFilterValueChange: X, onInputChange: y, onTextValueChange: Y, onLoadMore: k, placeholder: Z = "Select or enter a value", required: T = !1, startIcon: F, textValue: _, value: O }) => {
-  const [c, M] = I({
-    prop: H,
-    defaultProp: D,
-    onChange: N
-  }), [i, B] = I({
-    prop: _,
-    defaultProp: g,
-    onChange: Y
-  }), [ee, P] = I({
-    prop: W,
-    defaultProp: m,
+import { useId as w } from "../hooks/useId.js";
+import { useIntersection as $e } from "../hooks/useIntersection.js";
+import { getThemeSize as Ce, inputFocusStyle as xe } from "../themes/utils.js";
+import { Loader as Ie } from "../Loader/Loader.js";
+import { Box as R } from "../Box/Box.js";
+import { Typography as h } from "../Typography/Typography.js";
+import { Flex as m } from "../Flex/Flex.js";
+import { Field as we } from "../Field/Field.js";
+import { FieldLabel as Re } from "../Field/FieldLabel.js";
+import { FieldHint as ve } from "../Field/FieldHint.js";
+import { FieldError as ye } from "../Field/FieldError.js";
+const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, clearLabel: a = "clear", creatable: i = !1, createMessage: g = (x) => `Create "${x}"`, defaultFilterValue: p, defaultTextValue: y, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: b = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: V, isPrintableCharacter: J, loading: $ = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: T, onClear: C, onCreateOption: F, onFilterValueChange: Q, onInputChange: O, onTextValueChange: X, onLoadMore: z, placeholder: Y = "Select or enter a value", required: Z = !1, size: _ = "M", startIcon: B, textValue: ee, value: P, ...re }) => {
+  const [x, oe] = I({
+    prop: L,
+    defaultProp: W,
+    onChange: U
+  }), [s, S] = I({
+    prop: ee,
+    defaultProp: e && !y ? P : y,
     onChange: X
-  }), S = p.useRef(null), j = p.useRef(null), re = p.useRef(null), u = q(A), oe = (o) => {
-    x && !b && (B(""), P(""), x(o), j.current.focus());
-  }, te = (o) => {
-    M(o);
-  }, ne = (o) => {
-    B(o);
-  }, le = (o) => {
-    P(o);
-  }, ie = (o) => {
-    y && y(o);
-  }, ae = (o) => {
-    V && V(o);
-  }, se = q(), E = `intersection-${fe(se)}`, de = (o) => {
-    k && L && !C && k(o);
-  }, z = () => {
-    v && i && v(i);
-  };
-  me(S, de, {
-    selectorToWatch: `#${E}`,
+  }), [te, j] = I({
+    prop: A,
+    defaultProp: p,
+    onChange: Q
+  }), E = f.useRef(null), q = f.useRef(null), ne = f.useRef(null), ie = (t) => {
+    C && !b && (S(""), j(""), C(t), q.current.focus());
+  }, le = (t) => {
+    oe(t);
+  }, ae = (t) => {
+    S(t);
+  }, se = (t) => {
+    j(t);
+  }, de = (t) => {
+    O && O(t);
+  }, ce = (t) => {
+    T && T(t);
+  }, ue = (t) => {
+    z && G && !$ && z(t);
+  }, N = () => {
+    F && s && F(s);
+  }, D = w(V), he = w(), H = `intersection-${be(he)}`;
+  $e(E, ue, {
+    selectorToWatch: `#${H}`,
     /**
      * We need to know when the select is open because only then will viewportRef
      * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
      */
-    skipWhen: !c
+    skipWhen: !x
   });
-  const ce = `${u}-hint`, ue = `${u}-error`;
-  return r($e, { hint: U, error: $, id: u, required: T, children: a(h, { direction: "column", alignItems: "stretch", gap: 1, children: [r(Ce, { action: J, children: G }), a(t.Root, { autocomplete: s ? "list" : "both", open: c, onOpenChange: te, onTextValueChange: ne, textValue: i, allowCustomValue: !0, disabled: b, required: T, value: O === null ? void 0 : O, onValueChange: ae, filterValue: ee, onFilterValueChange: le, children: [a(Ve, { $hasError: !!$, children: [a(h, { flex: "1", as: "span", gap: 3, children: [F ? r(w, { as: "span", "aria-hidden": !0, children: F }) : null, r(ve, { placeholder: Z, id: u, "aria-invalid": !!$, "aria-labelledby": `${ce} ${ue}`, onChange: ie, ref: j })] }), a(h, { as: "span", gap: 3, children: [i && x ? r(Re, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: oe, "aria-disabled": b, "aria-label": n, title: n, ref: re, children: r(he, {}) }) : null, r(ye, { children: r(pe, {}) })] })] }), r(t.Portal, { children: r(ke, { sideOffset: 4, children: a(Te, { ref: S, children: [e, s ? r(t.CreateItem, { onPointerUp: z, onClick: z, asChild: !0, children: r(R, { children: r(d, { children: f(i ?? "") }) }) }) : null, !s && !C ? r(t.NoValueFound, { asChild: !0, children: r(R, { $hasHover: !1, children: r(d, { children: Q(i ?? "") }) }) }) : null, C ? r(h, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(be, { small: !0, children: K }) }) : null, r(w, { id: E, width: "100%", height: "1px" })] }) }) })] }), r(xe, {}), r(Ie, {})] }) });
-}, Je = (e) => r(we, { ...e, creatable: !0 }), Re = l(w)`
+  const pe = `${D}-hint`, fe = `${D}-error`;
+  return d(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: le, onTextValueChange: ae, textValue: s, allowCustomValue: i || e, disabled: b, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [d(Fe, { $hasError: !!k, $size: _, className: u, children: [d(m, { flex: "1", as: "span", gap: 3, children: [B ? r(R, { as: "span", "aria-hidden": !0, children: B }) : null, r(Oe, { placeholder: Y, id: V, "aria-invalid": !!k, "aria-describedby": `${pe} ${fe}`, onChange: de, ref: q, ...re })] }), d(m, { as: "span", gap: 3, children: [s && C ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": b, "aria-label": a, title: a, ref: ne, children: r(me, {}) }) : null, r(ze, { children: r(ge, {}) })] })] }), r(n.Portal, { children: r(Be, { sideOffset: 4, children: d(Pe, { ref: E, children: [c, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(v, { children: r(h, { children: g(s ?? "") }) }) }) : null, !i && !$ ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(s ?? "") }) }) }) : null, $ ? r(m, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(Ie, { small: !0, children: K }) }) : null, r(R, { id: H, width: "100%", height: "1px" })] }) }) })] });
+}, Ve = ({ error: e, hint: o, id: c, label: u, labelAction: a, required: i = !1, ...g }) => {
+  const p = w(c);
+  return r(we, { hint: o, error: e, id: p, required: i, children: d(m, { direction: "column", alignItems: "stretch", gap: 1, children: [r(Re, { action: a, children: u }), r(ke, { id: p, error: e, required: i, ...g }), r(ve, {}), r(ye, {})] }) });
+}, Ye = (e) => r(Ve, { ...e, creatable: !0 }), Te = l(R)`
   border: none;
 
   svg {
@@ -67,9 +70,9 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   svg path {
     fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, Ve = l(t.Trigger)`
+`, Fe = l(n.Trigger)`
   position: relative;
-  border: 1px solid ${({ theme: e, $hasError: n }) => n ? e.colors.danger600 : e.colors.neutral200};
+  border: 1px solid ${({ theme: e, $hasError: o }) => o ? e.colors.danger600 : e.colors.neutral200};
   padding-right: ${({ theme: e }) => e.spaces[3]};
   padding-left: ${({ theme: e }) => e.spaces[3]};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -79,6 +82,7 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   align-items: center;
   justify-content: space-between;
   gap: ${({ theme: e }) => e.spaces[4]};
+  min-height: ${({ theme: e, $size: o }) => Ce("input")({ theme: e, size: o })};
 
   &[data-disabled] {
     color: ${({ theme: e }) => e.colors.neutral600};
@@ -91,12 +95,12 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
     outline: none;
   }
 
-  ${({ theme: e, $hasError: n }) => ge()({ theme: e, hasError: n })};
-`, ve = l(t.TextInput)`
+  ${({ theme: e, $hasError: o }) => xe()({ theme: e, hasError: o })};
+`, Oe = l(n.TextInput)`
   width: 100%;
   font-size: ${14 / 16}rem;
   color: ${({ theme: e }) => e.colors.neutral800};
-  min-height: ${40 / 16}rem;
+  padding: 0;
   border: none;
   background-color: transparent;
 
@@ -107,7 +111,7 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, ye = l(t.Icon)`
+`, ze = l(n.Icon)`
   & > svg {
     width: ${6 / 16}rem;
 
@@ -119,7 +123,7 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, ke = l(t.Content)`
+`, Be = l(n.Content)`
   background: ${({ theme: e }) => e.colors.neutral0};
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
@@ -128,9 +132,9 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme: e }) => e.zIndices[1]};
-`, Te = l(t.Viewport)`
+`, Pe = l(n.Viewport)`
   padding: ${({ theme: e }) => e.spaces[1]};
-`, Ke = p.forwardRef(({ children: e, value: n, disabled: s, textValue: f, ...m }, g) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: s, textValue: f, children: r(R, { ref: g, ...m, children: r(t.ItemText, { asChild: !0, children: r(d, { children: e }) }) }) })), R = l.div`
+`, Ze = f.forwardRef(({ children: e, value: o, disabled: c, textValue: u, ...a }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: c, textValue: u, children: r(v, { ref: i, ...a, children: r(n.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), v = l.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -140,10 +144,10 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   border-radius: ${({ theme: e }) => e.borderRadius};
   user-select: none;
 
-  &[data-selected] {
+  &[data-state='checked'] {
     background-color: ${({ theme: e }) => e.colors.primary100};
 
-    ${d} {
+    ${h} {
       color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
@@ -152,19 +156,20 @@ const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
   &:hover,
   &[data-highlighted] {
     outline: none;
-    background-color: ${({ theme: e, $hasHover: n = !0 }) => n ? e.colors.primary100 : e.colors.neutral0};
+    background-color: ${({ theme: e, $hasHover: o = !0 }) => o ? e.colors.primary100 : e.colors.neutral0};
   }
 
   &[data-highlighted] {
-    ${d} {
+    ${h} {
       color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
   }
 `;
 export {
-  we as Combobox,
-  Je as CreatableCombobox,
-  Ke as Option,
-  R as OptionBox
+  Ve as Combobox,
+  ke as ComboboxInput,
+  Ye as CreatableCombobox,
+  Ze as Option,
+  v as OptionBox
 };

package/dist/DatePicker/DatePicker.cjs

@@ -1,12 +1,88 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),p=require("@strapi/icons"),R=require("styled-components"),P=require("./components.cjs"),S=require("./DatePickerCalendar.cjs"),_=require("./utils/formatDate.cjs"),v=require("../helpers/getDefaultLocale.cjs"),A=require("../TextInput/TextInput.cjs"),W=require("../Field/FieldAction.cjs"),$=e=>e&&e.__esModule?e:{default:e},h=$(R),I=({ariaLabel:e,onClear:a,clearLabel:D="Clear",initialDate:m,locale:x,maxDate:q,minDate:C,onChange:c,selectedDate:o,disabled:n=!1,...g})=>{const[s,i]=d.useState(!1),r=d.useRef(null),u=x||v.getDefaultLocale(),f=o?_.formatDate(o,u):"",j=()=>{n||i(l=>!l)},y=()=>{n||a&&(a(),r.current.inputWrapperRef.current.focus())},b=l=>{c&&c(l),i(!1)},k=()=>{i(!1)};return t.jsxs(P.DatePickerWrapper,{bold:s,children:[t.jsx(A.TextInput,{ref:r,onClick:j,onChange:()=>{},value:f,startAction:t.jsx(E,{"aria-hidden":!0}),endAction:a&&f?t.jsx(W.FieldAction,{label:D,onClick:y,"aria-disabled":n||void 0,children:t.jsx(T,{})}):void 0,"aria-autocomplete":"none","aria-label":e,disabled:n,type:"text",...g}),r.current&&r.current.inputWrapperRef&&s&&t.jsx(S.DatePickerCalendar,{selectedDate:o,initialDate:m,onChange:b,onEscape:k,locale:u,popoverSource:r.current.inputWrapperRef,minDate:C,maxDate:q})]})},T=h.default(p.Cross)`
-  height: ${11/16}rem;
-  width: ${11/16}rem;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),xe=require("react"),O=require("@floating-ui/react-dom"),g=require("@internationalized/date"),Ce=require("@radix-ui/react-focus-guards"),ye=require("@radix-ui/react-focus-scope"),ee=require("@strapi/icons"),R=require("@strapi/ui-primitives"),be=require("react-dom"),we=require("react-remove-scroll"),ke=require("styled-components"),Te=require("../DesignSystemProvider.cjs"),Se=require("../DismissibleLayer/index.cjs"),je=require("../helpers/context.cjs"),U=require("../hooks/useComposeRefs.cjs"),Ee=require("../hooks/useControllableState.cjs"),L=require("../hooks/useDateFormatter.cjs"),te=require("../hooks/useId.cjs"),N=require("../Select/SingleSelect.cjs"),Pe=require("../Portal/Portal.cjs"),V=require("../Flex/Flex.cjs"),X=require("../themes/utils.cjs"),z=require("../Box/Box.cjs"),Y=require("../Typography/Typography.cjs"),Ie=require("../Field/Field.cjs"),Re=require("../Field/FieldLabel.cjs"),ve=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Ae=e=>e&&e.__esModule?e:{default:e};function Me(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const u=Me(xe),j=Ae(ke),qe=200,J=15,[_e,v]=je.createContext("DatePicker"),re=u.forwardRef(({calendarLabel:e,className:n,initialDate:r,locale:t,maxDate:s,minDate:c,monthSelectLabel:p="Month",onChange:d,selectedDate:i,yearSelectLabel:m="Year",error:y,id:C,disabled:o=!1,placeholder:f,required:b=!1,onClear:x,clearLabel:T="Clear",size:w,ariaLabel:S,selectedDateLabel:l,...h},k)=>{const F=Te.useDesignSystem("DatePicker"),P=t??F.locale,B=L.useDateFormatter(P,{dateStyle:"short"}),A=u.useMemo(()=>{const D=B.formatToParts(new Date),{value:I}=D.find(_=>_.type==="literal");return I},[B]),[ae,oe]=u.useState(!1),[se,le]=u.useState(null),[W,ie]=u.useState(null),[ce,ue]=u.useState(null),[$,M]=u.useState(),[q,H]=Ee.useControllableState({defaultProp:r?E(r):void 0,prop:i&&E(i),onChange(D){d&&d(D?.toDate("UTC"))}}),[G,K]=u.useMemo(()=>{const D=r?E(r):g.today("UTC"),I=c?E(c):D.set({day:1,month:1,year:D.year-qe});let _=s?E(s):D.set({day:31,month:12,year:D.year+J});return _.compare(I)<0&&(_=I.set({day:31,month:12,year:I.year+J})),[I,_]},[c,s,r]),[de,Z]=u.useState(Oe({currentValue:q,minDate:G,maxDate:K})),fe=te.useId(),he=u.useRef(null),pe=D=>{x&&!o&&(M(""),H(void 0),x(D),W?.focus())},ge=u.useCallback(D=>{D&&q&&Z(q),oe(D)},[q]);u.useLayoutEffect(()=>{if(i){const D=E(i);M(D.toString().split("-").reverse().join(A))}else M("")},[A,i]),u.useLayoutEffect(()=>{if(r&&$===void 0){const D=E(r);M(D.toString().split("-").reverse().join(A))}},[A,r,$]);const me=`${C}-hint`,De=`${C}-error`;return a.jsxs(_e,{calendarDate:de,content:ce,contentId:fe,disabled:o,locale:P,minDate:G,maxDate:K,open:ae,onCalendarDateChange:Z,onContentChange:ue,onOpenChange:ge,onTextInputChange:ie,onTextValueChange:M,onTriggerChange:le,onValueChange:H,required:b,separator:A,textInput:W,textValue:$,timeZone:"UTC",trigger:se,value:q,children:[a.jsxs($e,{className:n,size:w,hasError:!!y,children:[a.jsx(ze,{"aria-hidden":!0}),a.jsx(Ue,{ref:k,placeholder:f,"aria-describedby":`${me} ${De}`,id:C,...h}),$&&x?a.jsx(Ve,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:pe,"aria-disabled":o,"aria-label":T,title:T,ref:he,children:a.jsx(ee.Cross,{})}):null]}),a.jsx(Pe.Portal,{children:a.jsx(Ge,{label:e,children:a.jsx(Qe,{monthSelectLabel:p,yearSelectLabel:m})})})]})}),Q=e=>!!e.match(/^[^a-zA-Z]*$/),Oe=({currentValue:e,minDate:n,maxDate:r})=>{const t=g.today("UTC");return e||(g.minDate(n,t)===n&&g.maxDate(r,t)===r?t:g.minDate(n,t)===t?n:g.maxDate(r,t)===t?r:t)},Le="DatePickerTrigger",$e=u.forwardRef(({hasError:e,size:n="M",...r},t)=>{const s=v(Le),c=U.useComposedRefs(t,d=>s.onTriggerChange(d)),p=()=>{s.disabled||s.onOpenChange(!0)};return a.jsx(ye.FocusScope,{asChild:!0,trapped:s.open,onMountAutoFocus:d=>{d.preventDefault()},onUnmountAutoFocus:d=>{document.getSelection()?.empty(),d.preventDefault()},children:a.jsx(Ne,{ref:c,$hasError:e,$size:n,...r,paddingLeft:3,paddingRight:3,hasRadius:!0,gap:3,overflow:"hidden",background:s.disabled?"neutral150":"neutral0",onClick:R.composeEventHandlers(r.onClick,()=>{s.textInput?.focus()}),onPointerDown:R.composeEventHandlers(r.onPointerDown,d=>{const i=d.target;i.hasPointerCapture(d.pointerId)&&i.releasePointerCapture(d.pointerId),(i.closest("button")??i.closest("div"))===d.currentTarget&&d.button===0&&d.ctrlKey===!1&&(p(),s.textInput?.focus())})})})}),Ne=j.default(V.Flex)`
+  border: 1px solid ${({theme:e,$hasError:n})=>n?e.colors.danger600:e.colors.neutral200};
+  min-height: ${({theme:e,$size:n})=>X.getThemeSize("input")({theme:e,size:n})};
 
-  path {
+  &[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:n})=>X.inputFocusStyle()({theme:e,hasError:n})};
+`,Ve=j.default(z.Box)`
+  border: none;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`,E=h.default(p.Calendar)`
+`,ze=j.default(ee.Calendar)`
   & > path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`;exports.DatePicker=I;
+`,Ye="DatePickerTextInput",Ue=u.forwardRef(({placeholder:e,...n},r)=>{const t=v(Ye),{onTextValueChange:s,textValue:c,onTextInputChange:p,onOpenChange:d,disabled:i,separator:m}=t,y=U.useComposedRefs(r,o=>p(o)),C=()=>{i||d(!0)};return a.jsx(We,{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}${m}\\d{2}${m}\\d{4}`,placeholder:e??`DD${m}MM${m}YYYY`,...n,value:c??"",onBlur:R.composeEventHandlers(n.onBlur,()=>{if(!t.textValue){t.onValueChange(void 0);return}t.onTextValueChange(t.calendarDate.toString().split("-").reverse().join(m)),t.onValueChange(t.calendarDate)}),onChange:R.composeEventHandlers(n.onChange,o=>{if(Q(o.target.value)){const[f,b,x]=o.target.value.split(m),T=t.calendarDate.year;let w=t.calendarDate.year;if(x){let P=x.length===1?`0${x}`:x;w=x.length<3?Number(`${T}`.slice(0,4-P.length)+P):Number(P)}x&&x.length<3&&w>t.maxDate.year&&(w-=100);const S=t.calendarDate.set({year:w}),l=S.calendar.getMonthsInYear(S),h=S.set({month:b&&Number(b)<=l?Number(b):void 0}),k=h.calendar.getDaysInMonth(h),F=h.set({day:f&&Number(f)<=k?Number(f):void 0});t.onCalendarDateChange(Be(F,t.minDate,t.maxDate)),t.onTextValueChange(o.target.value)}}),onKeyDown:R.composeEventHandlers(n.onKeyDown,o=>{if(!t.open&&(Q(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)&&(o.preventDefault(),s(t.calendarDate.toString().split("-").reverse().join(m)),t.onValueChange(t.calendarDate),t.onOpenChange(!1))})})});function Be(e,n,r){return n&&(e=g.maxDate(e,n)),r&&(e=g.minDate(e,r)),e}const We=j.default.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;
+  }
+`,He="DatePickerContent",Ge=u.forwardRef((e,n)=>{const[r,t]=u.useState(),s=v(He);if(u.useLayoutEffect(()=>{t(new DocumentFragment)},[]),!s.open){const c=r;return c?be.createPortal(a.jsx("div",{children:e.children}),c):null}return a.jsx(Ze,{...e,ref:n})}),Ke="DatePickerContent",Ze=u.forwardRef((e,n)=>{const{label:r="Choose date",...t}=e,{onOpenChange:s,...c}=v(Ke),{x:p,y:d,reference:i,floating:m,strategy:y}=O.useFloating({strategy:"fixed",placement:"bottom-start",middleware:[O.offset({mainAxis:4}),O.shift(),O.flip()],whileElementsMounted:O.autoUpdate});u.useEffect(()=>{const o=()=>{s(!1)};return window.addEventListener("blur",o),window.addEventListener("resize",o),()=>{window.removeEventListener("blur",o),window.removeEventListener("resize",o)}},[s]),u.useLayoutEffect(()=>{i(c.trigger)},[i,c.trigger]);const C=U.useComposedRefs(n,o=>c.onContentChange(o),m);return Ce.useFocusGuards(),a.jsx(we.RemoveScroll,{allowPinchZoom:!0,children:a.jsx(Se.DismissibleLayer,{asChild:!0,onFocusOutside:o=>{o.preventDefault()},onDismiss:()=>{s(!1)},children:a.jsx(Xe,{ref:C,"data-state":c.open?"open":"closed",onContextMenu:o=>o.preventDefault(),id:c.contentId,role:"dialog","aria-modal":"true","aria-label":r,style:{left:p,top:d,position:y},hasRadius:!0,background:"neutral0",padding:1,...t})})})}),Xe=j.default(z.Box)`
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  z-index: ${({theme:e})=>e.zIndices[0]};
+  border: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,Je="DatePickerCalendar",Qe=u.forwardRef(({monthSelectLabel:e,yearSelectLabel:n,...r},t)=>{const{locale:s,timeZone:c,minDate:p,maxDate:d,calendarDate:i,onCalendarDateChange:m}=v(Je),y=g.startOfMonth(i),C=u.useMemo(()=>{const l=p.year,h=d.year;return[...Array(h-l+1).keys()].map(k=>(l+k).toString())},[p,d]),o=L.useDateFormatter(s,{month:"long"}),f=u.useMemo(()=>[...Array(i.calendar.getMonthsInYear(i)).keys()].map(l=>o.format(i.set({month:l+1}).toDate(c))),[i,o,c]),b=L.useDateFormatter(s,{weekday:"short"}),x=u.useMemo(()=>{let l=g.startOfWeek(g.today(c),s);return[...new Array(7).keys()].map(h=>{let F=l.add({days:h}).toDate(c);return b.format(F)})},[c,s,b]),T=l=>{if(typeof l=="number")return;const h=i.set({month:f.indexOf(l)+1});m(h)},w=l=>{if(typeof l=="number")return;const h=i.set({year:parseInt(l,10)});m(h)},S=et(y,s);return a.jsxs(V.Flex,{ref:t,direction:"column",alignItems:"stretch",padding:4,...r,children:[a.jsxs(tt,{justifyContent:"flex-start",paddingBottom:4,paddingLeft:2,paddingRight:2,gap:2,children:[a.jsx(N.SingleSelectInput,{label:e,size:"S",value:f[i.month-1],onChange:T,children:f.map(l=>a.jsx(N.SingleSelectOption,{value:l,children:l},l))}),a.jsx(N.SingleSelectInput,{size:"S",value:i.year.toString(),label:n,onChange:w,children:C.map(l=>a.jsx(N.SingleSelectOption,{value:l,children:l},l))})]}),a.jsxs("table",{role:"grid",children:[a.jsx("thead",{"aria-hidden":!0,children:a.jsx("tr",{"aria-rowindex":0,children:x.map((l,h)=>a.jsx(rt,{"aria-colindex":h,children:l},l))})}),a.jsx("tbody",{children:[...new Array(6).keys()].map(l=>a.jsx("tr",{"aria-rowindex":l+2,children:S(l).map((h,k)=>h?a.jsx(ot,{"aria-colindex":k+1,date:h,startDate:y},h.toString()):a.jsx(ne,{"aria-colindex":k+1}))},l))})]})]})}),et=(e,n)=>r=>{let t=e.add({weeks:r}),s=[];t=g.startOfWeek(t,n);let c=g.getDayOfWeek(t,n);for(let p=0;p<c;p++)s.push(null);for(;s.length<7;){s.push(t);let p=t.add({days:1});if(g.isSameDay(t,p))break;t=p}for(;s.length<7;)s.push(null);return s},tt=j.default(V.Flex)`
+  div[role='combobox'] {
+    border: 1px solid transparent;
+    background: transparent;
+    font-weight: ${e=>e.theme.fontWeights.bold};
+
+    ${Y.Typography} {
+      color: ${({theme:e})=>e.colors.neutral800};
+    }
+
+    svg {
+      > g,
+      path {
+        fill: ${({theme:e})=>e.colors.neutral500};
+      }
+    }
+
+    &:hover {
+      background-color: ${({theme:e})=>e.colors.neutral100};
+    }
+  }
+`,rt=u.forwardRef(({children:e,...n},r)=>a.jsx(nt,{as:"th",role:"gridcell",ref:r,...n,height:`${24/16}rem`,width:`${32/16}rem`,children:a.jsx(Y.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800",children:e.slice(0,2)})})),nt=j.default(z.Box)`
+  border-radius: ${({theme:e})=>e.borderRadius};
+  text-transform: capitalize;
+`,at="DatePickerCalendarCell",ot=u.forwardRef(({date:e,startDate:n,...r},t)=>{const{timeZone:s,locale:c,calendarDate:p,onValueChange:d,onOpenChange:i,onTextValueChange:m,separator:y,onCalendarDateChange:C}=v(at),o=g.isSameDay(p,e),f=L.useDateFormatter(c,{weekday:"long",day:"numeric",month:"long",year:"numeric"}),b=u.useMemo(()=>f.format(e.toDate(s)),[f,e,s]),x=L.useDateFormatter(c,{day:"numeric",calendar:e.calendar.identifier}),T=u.useMemo(()=>x.formatToParts(e.toDate(s)).find(h=>h.type==="day").value,[x,e,s]),w=g.endOfMonth(n),S=e.compare(n)<0||e.compare(w)>0;let l="neutral900";return o?l="primary600":S&&(l="neutral600"),a.jsx(ne,{as:"td",role:"gridcell",ref:t,"aria-selected":o,...r,hasRadius:!0,"aria-label":b,tabIndex:o?0:-1,background:o?"primary100":"neutral0",cursor:"pointer",onPointerDown:R.composeEventHandlers(r.onPointerDown,h=>{h.preventDefault(),C(e),d(e),m(e.toString().split("-").reverse().join(y)),i(!1)}),children:a.jsx(Y.Typography,{variant:"pi",textColor:l,children:T})})}),ne=j.default(z.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};
+
+    & > ${Y.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+  }
+`,st=u.forwardRef((e,n)=>{const{error:r,hint:t,id:s,required:c,label:p,...d}=e,i=te.useId(s);return a.jsx(Ie.Field,{error:r,hint:t,required:c,ref:n,id:i,children:a.jsxs(V.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a.jsx(Re.FieldLabel,{children:p}),a.jsx(re,{id:i,error:r,required:c,...d}),a.jsx(ve.FieldHint,{}),a.jsx(Fe.FieldError,{})]})})}),E=e=>{const n=e.toISOString(),r=g.parseAbsoluteToLocal(n);return g.toCalendarDate(r)},lt=st;exports.DatePicker=lt;exports.DatePickerInput=re;