@strapi/design-system 1.7.10 → 1.8.1

package/README.md

@@ -1,25 +1,13 @@
-<p align="center">
-  <a href="https://strapi.io">
-    <img src="./assets/logo.svg" width="318px" alt="Strapi logo" />
-  </a>
-</p>
-<p align="center">
-<a style='margin-right:10px' href="https://design-system.strapi.io/">Documentation</a>|<a style='margin-left:10px' href="https://design-system-git-main-strapijs.vercel.app/">Try components</a></p>
-<br />
+# Strapi Design System
 
 [![Version](https://img.shields.io/npm/v/@strapi/design-system?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
 [![Downloads](https://img.shields.io/npm/dt/@strapi/design-system.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/design-system)
 [![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi)
 
-# Welcome! 👋👋👋
-
-Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build
-plugins more efficiently.
+<b>A UI component library for creating amazing Strapi extensions.</b>
 
 ## Installation
 
-Install Strapi Design System and its peer dependencies:
-
 ```sh
 $ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom
 
@@ -30,13 +18,17 @@ $ npm i react react-dom @strapi/design-system @strapi/icons styled-components re
 
 ## Getting Started
 
-Wrap your application with the `ThemeProvider` and pass the default `lightTheme` or `darkTheme` provided by `@strapi/design-system`.
+Wrap your application with the `DesignSystemProvider`. You can additionally pass a theme and/or locale, although you don't have to as we have default values for both.
 
 ```jsx
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { DesignSystemProvider, lightTheme } from '@strapi/design-system';
 
 function MyApp({ children }) {
-  return <ThemeProvider theme={lightTheme}>{children}</ThemeProvider>;
+  return (
+    <DesignSystemProvider locale="en-GB" theme={lightTheme}>
+      {children}
+    </DesignSystemProvider>
+  );
 }
 
 export default App;

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"),pe=require("react"),P=require("@strapi/icons"),n=require("@strapi/ui-primitives"),be=require("styled-components"),xe=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),E=require("../hooks/useId.cjs"),fe=require("../hooks/useIntersection.cjs"),ge=require("../themes/utils.cjs"),me=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),d=require("../Typography/Typography.cjs"),Ce=require("../Field/Field.cjs"),h=require("../Flex/Flex.cjs"),$e=require("../Field/FieldLabel.cjs"),je=require("../Field/FieldHint.cjs"),ye=require("../Field/FieldError.cjs"),Ie=e=>e&&e.__esModule?e:{default:e};function we(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,a.get?a:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const p=we(pe),s=Ie(be),z=({children:e,clearLabel:r="clear",creatable:l=!1,createMessage:a=c=>`Create "${c}"`,defaultFilterValue:x,defaultTextValue:f,defaultOpen:D=!1,open:H,onOpenChange:L,disabled:g=!1,error:m,filterValue:M,hasMoreItems:N=!1,hint:W,id:U,label:A,labelAction:G,loading:C=!1,loadingMessage:J="Loading content...",noOptionsMessage:K=()=>"No results found",onChange:I,onClear:$,onCreateOption:w,onFilterValueChange:Q,onInputChange:q,onTextValueChange:X,onLoadMore:F,placeholder:Y="Select or enter a value",required:T=!1,startIcon:v,textValue:Z,value:R})=>{const[c,ee]=j.useControllableState({prop:H,defaultProp:D,onChange:L}),[i,V]=j.useControllableState({prop:Z,defaultProp:f,onChange:X}),[oe,O]=j.useControllableState({prop:M,defaultProp:x,onChange:Q}),k=p.useRef(null),S=p.useRef(null),re=p.useRef(null),u=E.useId(U),te=t=>{$&&!g&&(V(""),O(""),$(t),S.current.focus())},ne=t=>{ee(t)},le=t=>{V(t)},se=t=>{O(t)},ae=t=>{q&&q(t)},ie=t=>{I&&I(t)},de=E.useId(),B=`intersection-${xe.stripReactIdOfColon(de)}`,ce=t=>{F&&N&&!C&&F(t)},_=()=>{w&&i&&w(i)};fe.useIntersection(k,ce,{selectorToWatch:`#${B}`,skipWhen:!c});const ue=`${u}-hint`,he=`${u}-error`;return o.jsx(Ce.Field,{hint:W,error:m,id:u,required:T,children:o.jsxs(h.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($e.FieldLabel,{action:G,children:A}),o.jsxs(n.Combobox.Root,{autocomplete:l?"list":"both",open:c,onOpenChange:ne,onTextValueChange:le,textValue:i,allowCustomValue:!0,disabled:g,required:T,value:R===null?void 0:R,onValueChange:ie,filterValue:oe,onFilterValueChange:se,children:[o.jsxs(Te,{$hasError:!!m,children:[o.jsxs(h.Flex,{flex:"1",as:"span",gap:3,children:[v?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:v}):null,o.jsx(ve,{placeholder:Y,id:u,"aria-invalid":!!m,"aria-labelledby":`${ue} ${he}`,onChange:ae,ref:S})]}),o.jsxs(h.Flex,{as:"span",gap:3,children:[i&&$?o.jsx(Fe,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:te,"aria-disabled":g,"aria-label":r,title:r,ref:re,children:o.jsx(P.Cross,{})}):null,o.jsx(Re,{children:o.jsx(P.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ve,{sideOffset:4,children:o.jsxs(Oe,{ref:k,children:[e,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:_,onClick:_,asChild:!0,children:o.jsx(b,{children:o.jsx(d.Typography,{children:a(i??"")})})}):null,!l&&!C?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(b,{$hasHover:!1,children:o.jsx(d.Typography,{children:K(i??"")})})}):null,C?o.jsx(h.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(me.Loader,{small:!0,children:J})}):null,o.jsx(y.Box,{id:B,width:"100%",height:"1px"})]})})})]}),o.jsx(je.FieldHint,{}),o.jsx(ye.FieldError,{})]})})},qe=e=>o.jsx(z,{...e,creatable:!0}),Fe=s.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 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 x=ve(me),a=Te(Ce),H=({allowCustomValue:e,autocomplete:r,children:s,className:i,clearLabel:d="clear",creatable:l=!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||(l?"list":"both"),onOpenChange:de,open:p,onTextValueChange:ce,textValue:c,allowCustomValue:l||e,disabled:m,required:oe,value:V,onValueChange:pe,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&&$?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,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:z,onClick:z,asChild:!0,children:o.jsx(g,{children:o.jsx(u.Typography,{children:f(c??"")})})}):null,!l&&!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:i,labelAction:d,required:l=!1,...f})=>{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,...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 {
@@ -9,7 +9,7 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`,Te=s.default(n.Combobox.Trigger)`
+`,Oe=a.default(n.Combobox.Trigger)`
   position: relative;
   border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
   padding-right: ${({theme:e})=>e.spaces[3]};
@@ -21,6 +21,7 @@
   align-items: center;
   justify-content: space-between;
   gap: ${({theme:e})=>e.spaces[4]};
+  min-height: ${({theme:e,$size:r})=>N.getThemeSize("input")({theme:e,size:r})};
 
   &[data-disabled] {
     color: ${({theme:e})=>e.colors.neutral600};
@@ -33,12 +34,12 @@
     outline: none;
   }
 
-  ${({theme:e,$hasError:r})=>ge.inputFocusStyle()({theme:e,hasError:r})};
-`,ve=s.default(n.Combobox.TextInput)`
+  ${({theme:e,$hasError:r})=>N.inputFocusStyle()({theme:e,hasError:r})};
+`,Ve=a.default(n.Combobox.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;
 
@@ -49,7 +50,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Re=s.default(n.Combobox.Icon)`
+`,Se=a.default(n.Combobox.Icon)`
   & > svg {
     width: ${6/16}rem;
 
@@ -61,7 +62,7 @@
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`,Ve=s.default(n.Combobox.Content)`
+`,Be=a.default(n.Combobox.Content)`
   background: ${({theme:e})=>e.colors.neutral0};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
@@ -70,9 +71,9 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,Oe=s.default(n.Combobox.Viewport)`
+`,Pe=a.default(n.Combobox.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,ke=p.forwardRef(({children:e,value:r,disabled:l,textValue:a,...x},f)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:l,textValue:a,children:o.jsx(b,{ref:f,...x,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(d.Typography,{children:e})})})})),b=s.default.div`
+`,_e=x.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(g,{ref:l,...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;
@@ -82,10 +83,10 @@
   border-radius: ${({theme:e})=>e.borderRadius};
   user-select: none;
 
-  &[data-selected] {
+  &[data-state='checked'] {
     background-color: ${({theme:e})=>e.colors.primary100};
 
-    ${d.Typography} {
+    ${u.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
@@ -98,9 +99,9 @@
   }
 
   &[data-highlighted] {
-    ${d.Typography} {
+    ${u.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: bold;
     }
   }
-`;exports.Combobox=z;exports.CreatableCombobox=qe;exports.Option=ke;exports.OptionBox=b;
+`;exports.Combobox=L;exports.ComboboxInput=H;exports.CreatableCombobox=Re;exports.Option=_e;exports.OptionBox=g;

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 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";
-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 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: 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({
+    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 = 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) => {
+    S(t);
+  }, se = (t) => {
+    j(t);
+  }, de = (t) => {
+    O && O(t);
+  }, ce = (t) => {
+    T && T(t);
+  }, ue = (t) => {
+    z && G && !C && 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: !f
   });
-  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, open: f, onTextValueChange: ae, textValue: s, allowCustomValue: i || e, disabled: $, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [d(Fe, { $hasError: !!k, $size: _, className: u, children: [d(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 })] }), d(g, { as: "span", gap: 3, children: [s && x ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": $, "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: b(s ?? "") }) }) }) : null, !i && !C ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(s ?? "") }) }) }) : 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: c, label: u, labelAction: a, required: i = !1, ...b }) => {
+  const p = w(c);
+  return r(we, { hint: o, error: e, id: p, required: i, children: d(g, { direction: "column", alignItems: "stretch", gap: 1, children: [r(Re, { action: a, children: u }), 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;
 
   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 = m.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"),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"),Ee=require("../helpers/deprecations.cjs"),J=require("../hooks/useComposeRefs.cjs"),je=require("../hooks/useControllableState.cjs"),F=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"),Re=require("../Field/Field.cjs"),Fe=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),j=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:x,disabled:f=!1,placeholder:T,required:w=!1,onClear:S,clearLabel:E="Clear",size:u,ariaLabel:p,selectedDateLabel:s,...h},m)=>{const P=D.getLocalTimeZone(),v=Te.useDesignSystem("DatePicker"),A=t??v.locale,M=F.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,L]=c.useState(),[N,Q]=je.useControllableState({defaultProp:n?R(n):void 0,prop:l?R(l):void 0,onChange(y){d&&d(y?.toDate(P))}}),[ee,te]=c.useMemo(()=>{const y=n?R(n):D.today("UTC"),z=i?R(i):y.set({day:1,month:1,year:y.year-_e});let X=o?R(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(Le({currentValue:N,minDate:ee,maxDate:te})),fe=se.useId(),he=c.useRef(null),me=y=>{S&&!f&&(L(""),Q(void 0),S(y),I?.focus())},pe=c.useCallback(y=>{y&&N&&K(N),H(y)},[N]);c.useLayoutEffect(()=>{if(l){const y=R(l);L(M.format(y.toDate(P))),K(y)}else L("")},[l,M,P]),c.useLayoutEffect(()=>{if(n&&V===void 0){const y=R(n);L(M.format(y.toDate(P)))}},[n,V,M,P]);const ge=`${x}-hint`,De=`${x}-error`;return a.jsxs(Oe,{calendarDate:de,content:ce,contentId:fe,disabled:f,locale:A,minDate:ee,maxDate:te,open:O,onCalendarDateChange:K,onContentChange:ue,onOpenChange:pe,onTextInputChange:G,onTextValueChange:L,onTriggerChange:C,onValueChange:Q,required:w,textInput:I,textValue:V,timeZone:P,trigger:Z,value:N,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:x,...h}),V&&S?a.jsx(ze,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:me,"aria-disabled":f,"aria-label":E,title:E,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]*$/),Le=({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)},Ne="DatePickerTrigger",$e=c.forwardRef(({hasError:e,size:r="M",...n},t)=>{const o=_(Ne),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=j.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})};
 
-  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:r})=>ne.inputFocusStyle()({theme:e,hasError:r})};
+`,ze=j.default(U.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)`
+`,Ye=j.default(oe.Calendar)`
   & > path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`;exports.DatePicker=I;
+`,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)),x=()=>{l||d(!0)},f=F.useDateFormatter(b,{year:"numeric",month:"2-digit",day:"2-digit"}),[T,w,S]=c.useMemo(()=>{const u=f.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""}}),h=u.find(m=>m.type==="literal")?.value??"";return[s,h,p]},[f]),E=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:E,placeholder:e??T.join(w),...r,value:i??"",onBlur:q.composeEventHandlers(r.onBlur,()=>{if(!t.textValue){t.onValueChange(void 0);return}t.onTextValueChange(f.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,h,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:h&&Number(h)<=M?Number(h):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)))x();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(f.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=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;
+  }
+`,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,reference:l,floating:b,strategy:k}=$.useFloating({strategy:"fixed",placement:"bottom-start",middleware:[$.offset({mainAxis:4}),$.shift(),$.flip()],whileElementsMounted:$.autoUpdate});c.useEffect(()=>{const f=()=>{o(!1)};return window.addEventListener("blur",f),window.addEventListener("resize",f),()=>{window.removeEventListener("blur",f),window.removeEventListener("resize",f)}},[o]),c.useLayoutEffect(()=>{l(i.trigger)},[l,i.trigger]);const x=J.useComposedRefs(r,f=>i.onContentChange(f),b);return xe.useFocusGuards(),a.jsx(we.RemoveScroll,{allowPinchZoom:!0,children:a.jsx(Pe.DismissibleLayer,{asChild:!0,onFocusOutside:f=>{f.preventDefault()},onDismiss:()=>{o(!1)},children:a.jsx(Je,{ref:x,"data-state":i.open?"open":"closed",onContextMenu:f=>f.preventDefault(),id:i.contentId,role:"dialog","aria-modal":"true","aria-label":n,style:{left:g,top:d,position:k},hasRadius:!0,background:"neutral0",padding:1,...t})})})}),Je=j.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};
+`,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),x=c.useMemo(()=>{const s=g.year,h=d.year;return[...Array(h-s+1).keys()].map(m=>(s+m).toString())},[g,d]),f=F.useDateFormatter(o,{month:"long"}),T=c.useMemo(()=>[...Array(l.calendar.getMonthsInYear(l)).keys()].map(s=>f.format(l.set({month:s+1}).toDate(i))),[l,f,i]),w=F.useDateFormatter(o,{weekday:"short"}),S=c.useMemo(()=>{let s=D.startOfWeek(D.today(i),o);return[...new Array(7).keys()].map(h=>{let P=s.add({days:h}).toDate(i);return w.format(P)})},[i,o,w]),E=s=>{if(typeof s=="number")return;const h=l.set({month:T.indexOf(s)+1});b(h)},u=s=>{if(typeof s=="number")return;const h=l.set({year:parseInt(s,10)});b(h)},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:E,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:x.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,h)=>a.jsx(rt,{"aria-colindex":h,children:s},s))})}),a.jsx("tbody",{children:[...new Array(6).keys()].map(s=>a.jsx("tr",{"aria-rowindex":s+2,children:p(s).map((h,m)=>h?a.jsx(st,{"aria-colindex":m+1,date:h,startDate:k},h.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=j.default(B.Flex)`
+  div[role='combobox'] {
+    border: 1px solid transparent;
+    background: transparent;
+    font-weight: ${e=>e.theme.fontWeights.bold};
+
+    ${W.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=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=j.default(U.Box)`
+  border-radius: ${({theme:e})=>e.borderRadius};
+  text-transform: capitalize;
+`,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),x=D.isSameDay(g,e),f=F.useDateFormatter(i,{weekday:"long",day:"numeric",month:"long",year:"numeric"}),T=c.useMemo(()=>f.format(e.toDate(o)),[f,e,o]),w=F.useDateFormatter(i,{day:"numeric",calendar:e.calendar.identifier}),S=c.useMemo(()=>w.formatToParts(e.toDate(o)).find(h=>h.type==="day").value,[w,e,o]),E=F.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 x?s="primary600":p&&(s="neutral600"),a.jsx(ie,{as:"td",role:"gridcell",ref:t,"aria-selected":x,...n,hasRadius:!0,"aria-label":T,tabIndex:x?0:-1,background:x?"primary100":"neutral0",cursor:"pointer",onPointerDown:q.composeEventHandlers(n.onPointerDown,h=>{h.preventDefault(),k(e),d(e),b(E.format(e.toDate(o))),l(!1)}),children:a.jsx(W.Typography,{variant:"pi",textColor:s,children:S})})}),ie=j.default(U.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};
+
+    & > ${W.Typography} {
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+  }
+`,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(Re.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(Fe.FieldLabel,{children:g}),a.jsx(le,{id:l,error:n,required:i,...d}),a.jsx(ve.FieldHint,{}),a.jsx(Ae.FieldError,{})]})})}),it=Ee.once(console.warn),R=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;