@strapi/design-system 1.8.0 → 1.8.2

package/dist/Button/Button.cjs

@@ -8,7 +8,7 @@
 `,w=g.default(v.Loader)`
   animation: ${R} 2s infinite linear;
   will-change: transform;
-`,h=g.default(j.BaseButton)`
+`,y=g.default(j.BaseButton)`
   height: ${({theme:e,size:n})=>e.sizes.button[n]};
 
   svg {
@@ -33,4 +33,4 @@
   }
 
   ${r.getVariantStyle}
-`,y=D.default.forwardRef(({variant:e=l.DEFAULT,startIcon:n,endIcon:s,disabled:b=!1,children:p,onClick:d,size:u=l.BUTTON_SIZES[0],loading:a=!1,fullWidth:i=!1,...m},B)=>{const o=b||a,x=q=>{!o&&d&&d(q)};return t.jsxs(h,{ref:B,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:x,fullWidth:i,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:i,justifyContent:i?"center":void 0,paddingLeft:4,paddingRight:4,width:i?"100%":void 0,...m,children:[(n||a)&&t.jsx(_.Box,{"aria-hidden":!0,children:a?t.jsx(w,{}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",lineHeight:0,textColor:"buttonNeutral0",children:p}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});y.displayName="Button";exports.Button=y;exports.ButtonWrapper=h;
+`,h=D.default.forwardRef(({variant:e=l.DEFAULT,startIcon:n,endIcon:s,disabled:b=!1,children:p,onClick:d,size:u=l.BUTTON_SIZES[0],loading:i=!1,fullWidth:a=!1,...m},B)=>{const o=b||i,x=q=>{!o&&d&&d(q)};return t.jsxs(y,{ref:B,"aria-disabled":o,disabled:o,size:u,variant:e,onClick:x,fullWidth:a,alignItems:"center",background:"buttonPrimary600",borderColor:"buttonPrimary600",gap:2,inline:a,justifyContent:a?"center":void 0,paddingLeft:4,paddingRight:4,width:a?"100%":void 0,...m,children:[(n||i)&&t.jsx(_.Box,{"aria-hidden":!0,children:i?t.jsx(w,{}):n}),t.jsx($.Typography,{variant:u==="S"?"pi":void 0,fontWeight:"bold",textColor:"buttonNeutral0",children:p}),s&&t.jsx(T.Flex,{"aria-hidden":!0,children:s})]})});h.displayName="Button";exports.Button=h;exports.ButtonWrapper=y;

package/dist/Button/Button.js

@@ -43,11 +43,11 @@ const j = v`
   }
 
   ${C}
-`, N = b.forwardRef(({ variant: i = $, startIcon: t, endIcon: n, disabled: l = !1, children: p, onClick: d, size: m = B[0], loading: o = !1, fullWidth: e = !1, ...c }, h) => {
+`, N = b.forwardRef(({ variant: i = $, startIcon: t, endIcon: n, disabled: l = !1, children: p, onClick: d, size: m = B[0], loading: o = !1, fullWidth: e = !1, ...c }, u) => {
   const a = l || o;
-  return g(D, { ref: h, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (u) => {
-    !a && d && d(u);
-  }, fullWidth: e, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: e, justifyContent: e ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: e ? "100%" : void 0, ...c, children: [(t || o) && r(w, { "aria-hidden": !0, children: o ? r(A, {}) : t }), r(L, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", lineHeight: 0, textColor: "buttonNeutral0", children: p }), n && r(T, { "aria-hidden": !0, children: n })] });
+  return g(D, { ref: u, "aria-disabled": a, disabled: a, size: m, variant: i, onClick: (h) => {
+    !a && d && d(h);
+  }, fullWidth: e, alignItems: "center", background: "buttonPrimary600", borderColor: "buttonPrimary600", gap: 2, inline: e, justifyContent: e ? "center" : void 0, paddingLeft: 4, paddingRight: 4, width: e ? "100%" : void 0, ...c, children: [(t || o) && r(w, { "aria-hidden": !0, children: o ? r(A, {}) : t }), r(L, { variant: m === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children: p }), n && r(T, { "aria-hidden": !0, children: n })] });
 });
 N.displayName = "Button";
 export {

package/dist/Combobox/Combobox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),me=require("react"),M=require("@strapi/icons"),n=require("@strapi/ui-primitives"),Ce=require("styled-components"),$e=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),je=require("../hooks/useIntersection.cjs"),N=require("../themes/utils.cjs"),Ie=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),ye=require("../Field/Field.cjs"),we=require("../Field/FieldLabel.cjs"),qe=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Te=e=>e&&e.__esModule?e:{default:e};function ve(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const p=ve(me),a=Te(Ce),H=({allowCustomValue:e,autocomplete:r,children:s,className:i,clearLabel:d="clear",creatable:l=!1,createMessage:g=$=>`Create "${$}"`,defaultFilterValue:h,defaultTextValue:w,defaultOpen:W=!1,open:U,onOpenChange:A,disabled:f=!1,error:q,filterValue:G,hasMoreItems:J=!1,id:F,isPrintableCharacter:K,loading:m=!1,loadingMessage:Q="Loading content...",noOptionsMessage:X=()=>"No results found",onChange:T,onClear:C,onCreateOption:v,onFilterValueChange:Y,onInputChange:R,onTextValueChange:Z,onLoadMore:k,placeholder:ee="Select or enter a value",required:oe=!1,size:re="M",startIcon:O,textValue:te,value:V,...ne})=>{const[$,se]=j.useControllableState({prop:U,defaultProp:W,onChange:A}),[c,S]=j.useControllableState({prop:te,defaultProp:e&&!w?V:w,onChange:Z}),[le,B]=j.useControllableState({prop:G,defaultProp:h,onChange:Y}),P=p.useRef(null),_=p.useRef(null),ie=p.useRef(null),ae=t=>{C&&!f&&(S(""),B(""),C(t),_.current.focus())},de=t=>{se(t)},ce=t=>{S(t)},ue=t=>{B(t)},he=t=>{R&&R(t)},be=t=>{T&&T(t)},pe=t=>{k&&J&&!m&&k(t)},z=()=>{v&&c&&v(c)},E=I.useId(F),xe=I.useId(),D=`intersection-${$e.stripReactIdOfColon(xe)}`;je.useIntersection(P,pe,{selectorToWatch:`#${D}`,skipWhen:!$});const ge=`${E}-hint`,fe=`${E}-error`;return o.jsxs(n.Combobox.Root,{autocomplete:r||(l?"list":"both"),onOpenChange:de,onTextValueChange:ce,textValue:c,allowCustomValue:l||e,disabled:f,required:oe,value:V,onValueChange:be,filterValue:le,onFilterValueChange:ue,isPrintableCharacter:K,children:[o.jsxs(Oe,{$hasError:!!q,$size:re,className:i,children:[o.jsxs(b.Flex,{flex:"1",as:"span",gap:3,children:[O?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:O}):null,o.jsx(Ve,{placeholder:ee,id:F,"aria-invalid":!!q,"aria-describedby":`${ge} ${fe}`,onChange:he,ref:_,...ne})]}),o.jsxs(b.Flex,{as:"span",gap:3,children:[c&&C?o.jsx(ke,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:ae,"aria-disabled":f,"aria-label":d,title:d,ref:ie,children:o.jsx(M.Cross,{})}):null,o.jsx(Se,{children:o.jsx(M.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Be,{sideOffset:4,children:o.jsxs(Pe,{ref:P,children:[s,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:z,onClick:z,asChild:!0,children:o.jsx(x,{children:o.jsx(u.Typography,{children:g(c??"")})})}):null,!l&&!m?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(x,{$hasHover:!1,children:o.jsx(u.Typography,{children:X(c??"")})})}):null,m?o.jsx(b.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(Ie.Loader,{small:!0,children:Q})}):null,o.jsx(y.Box,{id:D,width:"100%",height:"1px"})]})})})]})},L=({error:e,hint:r,id:s,label:i,labelAction:d,required:l=!1,...g})=>{const h=I.useId(s);return o.jsx(ye.Field,{hint:r,error:e,id:h,required:l,children:o.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(we.FieldLabel,{action:d,children:i}),o.jsx(H,{id:h,error:e,required:l,...g}),o.jsx(qe.FieldHint,{}),o.jsx(Fe.FieldError,{})]})})},Re=e=>o.jsx(L,{...e,creatable:!0}),ke=a.default(y.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),me=require("react"),M=require("@strapi/icons"),n=require("@strapi/ui-primitives"),Ce=require("styled-components"),$e=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),je=require("../hooks/useIntersection.cjs"),N=require("../themes/utils.cjs"),Ie=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),ye=require("../Field/Field.cjs"),we=require("../Field/FieldLabel.cjs"),qe=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Te=e=>e&&e.__esModule?e:{default:e};function ve(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const l=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,l.get?l:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const x=ve(me),a=Te(Ce),H=({allowCustomValue:e,autocomplete:r,children:s,className:l,clearLabel:d="clear",creatable:i=!1,createMessage:f=p=>`Create "${p}"`,defaultFilterValue:h,defaultTextValue:w,defaultOpen:W=!1,open:U,onOpenChange:A,disabled:m=!1,error:q,filterValue:G,hasMoreItems:J=!1,id:F,isPrintableCharacter:K,loading:C=!1,loadingMessage:Q="Loading content...",noOptionsMessage:X=()=>"No results found",onChange:T,onClear:$,onCreateOption:v,onFilterValueChange:Y,onInputChange:R,onTextValueChange:Z,onLoadMore:k,placeholder:ee="Select or enter a value",required:oe=!1,size:re="M",startIcon:O,textValue:te,value:V,...ne})=>{const[p,se]=j.useControllableState({prop:U,defaultProp:W,onChange:A}),[c,S]=j.useControllableState({prop:te,defaultProp:e&&!w?V:w,onChange:Z}),[le,B]=j.useControllableState({prop:G,defaultProp:h,onChange:Y}),P=x.useRef(null),_=x.useRef(null),ie=x.useRef(null),ae=t=>{$&&!m&&(S(""),B(""),$(t),_.current.focus())},de=t=>{se(t)},ce=t=>{S(t)},ue=t=>{B(t)},he=t=>{R&&R(t)},pe=t=>{T&&T(t)},be=t=>{k&&J&&!C&&k(t)},z=()=>{v&&c&&v(c)},E=I.useId(F),xe=I.useId(),D=`intersection-${$e.stripReactIdOfColon(xe)}`;je.useIntersection(P,be,{selectorToWatch:`#${D}`,skipWhen:!p});const ge=`${E}-hint`,fe=`${E}-error`;return o.jsxs(n.Combobox.Root,{autocomplete:r||(i?"list":"both"),onOpenChange:de,open:p,onTextValueChange:ce,textValue:c,allowCustomValue:i||e,disabled:m,required:oe,value:V,onValueChange:pe,filterValue:le,onFilterValueChange:ue,isPrintableCharacter:K,children:[o.jsxs(Oe,{$hasError:!!q,$size:re,className:l,children:[o.jsxs(b.Flex,{flex:"1",as:"span",gap:3,children:[O?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:O}):null,o.jsx(Ve,{placeholder:ee,id:F,"aria-invalid":!!q,"aria-describedby":`${ge} ${fe}`,onChange:he,ref:_,...ne})]}),o.jsxs(b.Flex,{as:"span",gap:3,children:[c&&$?o.jsx(ke,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:ae,"aria-disabled":m,"aria-label":d,title:d,ref:ie,children:o.jsx(M.Cross,{})}):null,o.jsx(Se,{children:o.jsx(M.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Be,{sideOffset:4,children:o.jsxs(Pe,{ref:P,children:[s,i?o.jsx(n.Combobox.CreateItem,{onPointerUp:z,onClick:z,asChild:!0,children:o.jsx(g,{children:o.jsx(u.Typography,{children:f(c??"")})})}):null,!i&&!C?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(g,{$hasHover:!1,children:o.jsx(u.Typography,{children:X(c??"")})})}):null,C?o.jsx(b.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(Ie.Loader,{small:!0,children:Q})}):null,o.jsx(y.Box,{id:D,width:"100%",height:"1px"})]})})})]})},L=({error:e,hint:r,id:s,label:l,labelAction:d,required:i=!1,...f})=>{const h=I.useId(s);return o.jsx(ye.Field,{hint:r,error:e,id:h,required:i,children:o.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[l?o.jsx(we.FieldLabel,{action:d,children:l}):null,o.jsx(H,{id:h,error:e,required:i,...f}),o.jsx(qe.FieldHint,{}),o.jsx(Fe.FieldError,{})]})})},Re=e=>o.jsx(L,{...e,creatable:!0}),ke=a.default(y.Box)`
   border: none;
 
   svg {
@@ -73,7 +73,7 @@
   z-index: ${({theme:e})=>e.zIndices[1]};
 `,Pe=a.default(n.Combobox.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,_e=p.forwardRef(({children:e,value:r,disabled:s,textValue:i,...d},l)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:i,children:o.jsx(x,{ref:l,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(u.Typography,{children:e})})})})),x=a.default.div`
+`,_e=x.forwardRef(({children:e,value:r,disabled:s,textValue:l,...d},i)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:l,children:o.jsx(g,{ref:i,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(u.Typography,{children:e})})})})),g=a.default.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -104,4 +104,4 @@
       font-weight: bold;
     }
   }
-`;exports.Combobox=L;exports.ComboboxInput=H;exports.CreatableCombobox=Re;exports.Option=_e;exports.OptionBox=x;
+`;exports.Combobox=L;exports.ComboboxInput=H;exports.CreatableCombobox=Re;exports.Option=_e;exports.OptionBox=g;

package/dist/Combobox/Combobox.js

@@ -1,5 +1,5 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import * as f from "react";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as m 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";
@@ -11,17 +11,17 @@ 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 { Flex as g } 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({
+const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, clearLabel: s = "clear", creatable: i = !1, createMessage: b = (f) => `Create "${f}"`, defaultFilterValue: p, defaultTextValue: y, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: $ = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: V, isPrintableCharacter: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: T, onClear: x, 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 [f, oe] = I({
     prop: L,
     defaultProp: W,
     onChange: U
-  }), [s, S] = I({
+  }), [d, S] = I({
     prop: ee,
     defaultProp: e && !y ? P : y,
     onChange: X
@@ -29,8 +29,8 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
     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());
+  }), E = m.useRef(null), q = m.useRef(null), ne = m.useRef(null), ie = (t) => {
+    x && !$ && (S(""), j(""), x(t), q.current.focus());
   }, le = (t) => {
     oe(t);
   }, ae = (t) => {
@@ -42,9 +42,9 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
   }, ce = (t) => {
     T && T(t);
   }, ue = (t) => {
-    z && G && !$ && z(t);
+    z && G && !C && z(t);
   }, N = () => {
-    F && s && F(s);
+    F && d && F(d);
   }, D = w(V), he = w(), H = `intersection-${be(he)}`;
   $e(E, ue, {
     selectorToWatch: `#${H}`,
@@ -52,13 +52,13 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
      * 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: !x
+    skipWhen: !f
   });
   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, {})] }) });
+  return c(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: le, open: f, onTextValueChange: ae, textValue: d, allowCustomValue: i || e, disabled: $, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [c(Fe, { $hasError: !!k, $size: _, className: a, children: [c(g, { 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 })] }), c(g, { as: "span", gap: 3, children: [d && x ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": $, "aria-label": s, title: s, ref: ne, children: r(me, {}) }) : null, r(ze, { children: r(ge, {}) })] })] }), r(n.Portal, { children: r(Be, { sideOffset: 4, children: c(Pe, { ref: E, children: [u, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(v, { children: r(h, { children: b(d ?? "") }) }) }) : null, !i && !C ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(d ?? "") }) }) }) : null, C ? r(g, { 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: u, label: a, labelAction: s, required: i = !1, ...b }) => {
+  const p = w(u);
+  return r(we, { hint: o, error: e, id: p, required: i, children: c(g, { direction: "column", alignItems: "stretch", gap: 1, children: [a ? r(Re, { action: s, children: a }) : null, r(ke, { id: p, error: e, required: i, ...b }), r(ve, {}), r(ye, {})] }) });
 }, Ye = (e) => r(Ve, { ...e, creatable: !0 }), Te = l(R)`
   border: none;
 
@@ -134,7 +134,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
   z-index: ${({ theme: e }) => e.zIndices[1]};
 `, Pe = l(n.Viewport)`
   padding: ${({ theme: e }) => e.spaces[1]};
-`, 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`
+`, Ze = m.forwardRef(({ children: e, value: o, disabled: u, textValue: a, ...s }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: u, textValue: a, children: r(v, { ref: i, ...s, children: r(n.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), v = l.div`
   width: 100%;
   border: none;
   text-align: left;

package/dist/DatePicker/DatePicker.cjs

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