@strapi/design-system 1.8.2 → 1.9.0

package/dist/DatePicker/DatePicker.cjs

@@ -29,7 +29,7 @@
   & > path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,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`
+`,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};
@@ -85,4 +85,4 @@
       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(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;
+`,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,id:l,children:a.jsxs(B.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a.jsx(Re.FieldLabel,{children:g}),a.jsx(le,{ref:r,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;

package/dist/DatePicker/DatePicker.js

@@ -178,7 +178,7 @@ const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
       }
     }), m = d.find((p) => p.type === "literal")?.value ?? "";
     return [o, m, h];
-  }, [y]), E = k.map((d) => `\\d${d.length}`).join(w);
+  }, [y]), E = k.map((d) => `\\d{${d.length}}`).join(`\\${w}`);
   return i(lt, { role: "combobox", type: "text", inputMode: "numeric", ref: x, "aria-autocomplete": "none", "aria-controls": t.contentId, "aria-disabled": t.disabled, "aria-expanded": t.open, "aria-required": t.required, "aria-haspopup": "dialog", "data-state": t.open ? "open" : "closed", disabled: l, "data-disabled": l ? "" : void 0, pattern: E, placeholder: e ?? k.join(w), ...r, value: s ?? "", onBlur: N(r.onBlur, () => {
     if (!t.textValue) {
       t.onValueChange(void 0);
@@ -415,7 +415,7 @@ const lt = I.input`
   }
 `, wt = c.forwardRef((e, r) => {
   const { error: n, hint: t, id: a, required: s, label: g, ...u } = e, l = ce(a);
-  return i(Ze, { error: n, hint: t, required: s, ref: r, id: l, children: F(U, { direction: "column", alignItems: "stretch", gap: 1, children: [i(qe, { children: g }), i(Xe, { id: l, error: n, required: s, ...u }), i(Ke, {}), i(Ge, {})] }) });
+  return i(Ze, { error: n, hint: t, required: s, id: l, children: F(U, { direction: "column", alignItems: "stretch", gap: 1, children: [i(qe, { children: g }), i(Xe, { ref: r, id: l, error: n, required: s, ...u }), i(Ke, {}), i(Ge, {})] }) });
 }), xt = Ye(console.warn), R = (e) => {
   if (typeof e == "string") {
     xt("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");

package/dist/DateTimePicker/DateTimePicker.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("react"),d=require("@internationalized/date"),U=require("styled-components"),A=require("../DatePicker/DatePicker.cjs"),G=require("../DesignSystemProvider.cjs"),J=require("../helpers/deprecations.cjs"),K=require("../hooks/useControllableState.cjs"),Q=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),W=require("../TimePicker/TimePicker.cjs"),X=require("../Field/Field.cjs"),P=require("../Flex/Flex.cjs"),Y=require("../Field/FieldLabel.cjs"),j=require("../VisuallyHidden/VisuallyHidden.cjs"),ee=require("../Field/FieldHint.cjs"),te=require("../Field/FieldError.cjs"),w=e=>e&&e.__esModule?e:{default:e},ne=w(E),S=w(U),re=({ariaLabel:e,clearLabel:u="clear",dateLabel:D="Choose date",timeLabel:o="Choose time",disabled:l=!1,error:p,hint:L,id:_,label:V,labelAction:H,onChange:q,onClear:m,name:R,required:g=!1,selectButtonTitle:oe,size:I="M",step:$,value:T,initialDate:y,...v})=>{const F=ne.default.useRef(null),[r,f]=K.useControllableState({defaultProp:y?a(y,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(t){q&&q(t?.toDate(d.getLocalTimeZone()))}}),M=G.useDesignSystem("DateTimePicker"),N=Q.useDateFormatter(M.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),c=r?N.format(r.toDate(d.getLocalTimeZone())):"",O=t=>{let i=t?a(t):void 0;if(!(i&&r&&i.compare(r)===0)){if(c&&i){const[h,b]=c.split(":");i=i.set({hour:parseInt(h,10),minute:parseInt(b,10)})}f(i)}},Z=t=>{if(!t)return;const[i,h]=t.split(":"),b=r?r.set({hour:parseInt(i,10),minute:parseInt(h,10)}):a(new Date).set({hour:parseInt(i,10),minute:parseInt(h,10)});f(b)},z=t=>{f(void 0),m&&m(t)},B=()=>{const t=r?r.set({hour:0,minute:0}):a(new Date);f(t)},s=x.useId(_),k=x.useId(),C=x.useId();return n.jsx(X.Field,{name:R,as:"fieldset",id:s,"aria-labelledby":s,hint:L,error:p,required:g,children:n.jsxs(P.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(Y.FieldLabel,{onClick:()=>{F.current.focus()},as:"legend",id:s,action:H,children:V}),n.jsxs(P.Flex,{flex:"1",gap:1,children:[n.jsx(j.VisuallyHidden,{as:"label",htmlFor:C,children:D}),n.jsx(se,{...v,selectedDate:r?.toDate(d.getLocalTimeZone()),onChange:O,error:typeof p=="string",required:g,size:I,onClear:m?z:void 0,clearLabel:`${u} date`,disabled:l,id:C,ref:F,"aria-describedby":`${s}-hint ${s}-error`}),n.jsx(j.VisuallyHidden,{as:"label",htmlFor:k,children:o}),n.jsx(ae,{size:I,error:typeof p=="string",value:c,onChange:Z,onClear:m&&c!==void 0&&c!=="00:00"?B:void 0,clearLabel:`${u} time`,required:g,disabled:l,step:$,id:k,"aria-describedby":`${s}-hint ${s}-error`})]}),n.jsx(ee.FieldHint,{}),n.jsx(te.FieldError,{})]})})},ie=J.once(console.warn),a=(e,u=!0)=>{if(typeof e=="string"){ie("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 l=Date.parse(e);Number.isNaN(l)?e=new Date:e=new Date(l)}const D=e.toISOString();let o=d.parseAbsoluteToLocal(D);return u&&(o=o.set({hour:0,minute:0})),d.toCalendarDateTime(o)},se=S.default(A.DatePickerInput)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),w=require("react"),p=require("@internationalized/date"),G=require("styled-components"),J=require("../DatePicker/DatePicker.cjs"),K=require("../DesignSystemProvider.cjs"),Q=require("../helpers/deprecations.cjs"),W=require("../hooks/useComposeRefs.cjs"),X=require("../hooks/useControllableState.cjs"),Y=require("../hooks/useDateFormatter.cjs"),x=require("../hooks/useId.cjs"),ee=require("../TimePicker/TimePicker.cjs"),te=require("../Field/Field.cjs"),P=require("../Flex/Flex.cjs"),ne=require("../Field/FieldLabel.cjs"),j=require("../VisuallyHidden/VisuallyHidden.cjs"),re=require("../Field/FieldHint.cjs"),se=require("../Field/FieldError.cjs"),S=e=>e&&e.__esModule?e:{default:e},ie=S(w),_=S(G),ae=w.forwardRef(({ariaLabel:e,clearLabel:d="clear",dateLabel:h="Choose date",timeLabel:o="Choose time",disabled:l=!1,error:D,hint:L,id:R,label:V,labelAction:H,onChange:q,onClear:u,name:$,required:g=!1,selectButtonTitle:de,size:C="M",step:v,value:T,initialDate:I,...E},M)=>{const y=ie.default.useRef(null),[r,m]=X.useControllableState({defaultProp:I?a(I,!1):void 0,prop:T?a(T,!1):T??void 0,onChange(t){q&&q(t?.toDate(p.getLocalTimeZone()))}}),N=K.useDesignSystem("DateTimePicker"),O=Y.useDateFormatter(N.locale,{hour:"2-digit",minute:"2-digit",hour12:!1}),c=r?O.format(r.toDate(p.getLocalTimeZone())):"",U=t=>{let s=t?a(t):void 0;if(!(s&&r&&s.compare(r)===0)){if(c&&s){const[f,b]=c.split(":");s=s.set({hour:parseInt(f,10),minute:parseInt(b,10)})}m(s)}},z=t=>{if(!t)return;const[s,f]=t.split(":"),b=r?r.set({hour:parseInt(s,10),minute:parseInt(f,10)}):a(new Date).set({hour:parseInt(s,10),minute:parseInt(f,10)});m(b)},B=t=>{m(void 0),u&&u(t)},Z=()=>{const t=r?r.set({hour:0,minute:0}):a(new Date);m(t)},i=x.useId(R),F=x.useId(),k=x.useId(),A=W.useComposedRefs(y,M);return n.jsx(te.Field,{name:$,as:"fieldset",id:i,"aria-labelledby":i,hint:L,error:D,required:g,children:n.jsxs(P.Flex,{as:"span",direction:"column",alignItems:"stretch",gap:1,children:[n.jsx(ne.FieldLabel,{onClick:()=>{y.current.focus()},as:"legend",id:i,action:H,children:V}),n.jsxs(P.Flex,{flex:"1",gap:1,children:[n.jsx(j.VisuallyHidden,{as:"label",htmlFor:k,children:h}),n.jsx(le,{...E,selectedDate:r?.toDate("UTC"),onChange:U,error:typeof D=="string",required:g,size:C,onClear:u?B:void 0,clearLabel:`${d} date`,disabled:l,id:k,ref:A,"aria-describedby":`${i}-hint ${i}-error`}),n.jsx(j.VisuallyHidden,{as:"label",htmlFor:F,children:o}),n.jsx(ce,{size:C,error:typeof D=="string",value:c,onChange:z,onClear:u&&c!==void 0&&c!=="00:00"?Z:void 0,clearLabel:`${d} time`,required:g,disabled:l,step:v,id:F,"aria-describedby":`${i}-hint ${i}-error`})]}),n.jsx(re.FieldHint,{}),n.jsx(se.FieldError,{})]})})}),oe=Q.once(console.warn),a=(e,d=!0)=>{if(typeof e=="string"){oe("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 l=Date.parse(e);Number.isNaN(l)?e=new Date:e=new Date(l)}const h=e.toISOString();let o=p.parseAbsoluteToLocal(h);return d&&(o=o.set({hour:0,minute:0})),p.toCalendarDateTime(o)},le=_.default(J.DatePickerInput)`
   flex: 1 1 70%;
   min-width: 120px;
-`,ae=S.default(W.TimePickerInput)`
+`,ce=_.default(ee.TimePickerInput)`
   flex: 1 1 30%;
   min-width: 120px;
-`;exports.DateTimePicker=re;exports.convertUTCDateToCalendarDateTime=a;
+`;exports.DateTimePicker=ae;exports.convertUTCDateToCalendarDateTime=a;

package/dist/DateTimePicker/DateTimePicker.js

@@ -1,21 +1,22 @@
-import { jsx as o, jsxs as P } from "react/jsx-runtime";
-import U from "react";
-import { getLocalTimeZone as b, parseAbsoluteToLocal as Z, toCalendarDateTime as v } from "@internationalized/date";
+import { jsx as o, jsxs as F } from "react/jsx-runtime";
+import v, { forwardRef as G } from "react";
+import { getLocalTimeZone as P, parseAbsoluteToLocal as J, toCalendarDateTime as K } from "@internationalized/date";
 import $ from "styled-components";
-import { DatePickerInput as G } from "../DatePicker/DatePicker.js";
-import { useDesignSystem as J } from "../DesignSystemProvider.js";
-import { once as K } from "../helpers/deprecations.js";
-import { useControllableState as Q } from "../hooks/useControllableState.js";
-import { useDateFormatter as W } from "../hooks/useDateFormatter.js";
-import { useId as I } from "../hooks/useId.js";
-import { TimePickerInput as X } from "../TimePicker/TimePicker.js";
-import { Field as Y } from "../Field/Field.js";
+import { DatePickerInput as Q } from "../DatePicker/DatePicker.js";
+import { useDesignSystem as W } from "../DesignSystemProvider.js";
+import { once as X } from "../helpers/deprecations.js";
+import { useComposedRefs as Y } from "../hooks/useComposeRefs.js";
+import { useControllableState as ee } from "../hooks/useControllableState.js";
+import { useDateFormatter as te } from "../hooks/useDateFormatter.js";
+import { useId as b } from "../hooks/useId.js";
+import { TimePickerInput as re } from "../TimePicker/TimePicker.js";
+import { Field as oe } from "../Field/Field.js";
 import { Flex as L } from "../Flex/Flex.js";
-import { FieldLabel as ee } from "../Field/FieldLabel.js";
+import { FieldLabel as ie } from "../Field/FieldLabel.js";
 import { VisuallyHidden as S } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldHint as te } from "../Field/FieldHint.js";
-import { FieldError as re } from "../Field/FieldError.js";
-const xe = ({
+import { FieldHint as ne } from "../Field/FieldHint.js";
+import { FieldError as ae } from "../Field/FieldError.js";
+const Se = G(({
   /**
    * @preserve
    * @deprecated This is no longer used.
@@ -26,11 +27,11 @@ const xe = ({
   timeLabel: a = "Choose time",
   disabled: s = !1,
   error: h,
-  hint: V,
-  id: _,
-  label: N,
-  labelAction: R,
-  onChange: k,
+  hint: R,
+  id: V,
+  label: _,
+  labelAction: N,
+  onChange: I,
   onClear: c,
   name: j,
   required: D = !1,
@@ -38,24 +39,24 @@ const xe = ({
    * @preserve
    * @deprecated This is no longer used.
    */
-  selectButtonTitle: ae,
+  selectButtonTitle: de,
   size: C = "M",
   step: z,
   value: g,
-  initialDate: w,
+  initialDate: k,
   ...B
-}) => {
-  const x = U.useRef(null), [t, f] = Q({
-    defaultProp: w ? m(w, !1) : void 0,
+}, E) => {
+  const w = v.useRef(null), [t, f] = ee({
+    defaultProp: k ? m(k, !1) : void 0,
     prop: g ? m(g, !1) : g ?? void 0,
     onChange(e) {
-      k && k(e?.toDate(b()));
+      I && I(e?.toDate(P()));
     }
-  }), H = J("DateTimePicker"), O = W(H.locale, {
+  }), H = W("DateTimePicker"), O = te(H.locale, {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !1
-  }), l = t ? O.format(t.toDate(b())) : "", q = (e) => {
+  }), l = t ? O.format(t.toDate(P())) : "", U = (e) => {
     let r = e ? m(e) : void 0;
     if (!(r && t && r.compare(t) === 0)) {
       if (l && r) {
@@ -64,37 +65,40 @@ const xe = ({
       }
       f(r);
     }
-  }, A = (e) => {
+  }, q = (e) => {
     if (!e)
       return;
-    const [r, u] = e.split(":"), T = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(u, 10) }) : m(/* @__PURE__ */ new Date()).set({ hour: parseInt(r, 10), minute: parseInt(u, 10) });
+    const [r, u] = e.split(":"), T = t ? t.set({ hour: parseInt(r, 10), minute: parseInt(u, 10) }) : m(/* @__PURE__ */ new Date()).set({
+      hour: parseInt(r, 10),
+      minute: parseInt(u, 10)
+    });
     f(T);
-  }, E = (e) => {
+  }, A = (e) => {
     f(void 0), c && c(e);
   }, M = () => {
     const e = t ? t.set({ hour: 0, minute: 0 }) : m(/* @__PURE__ */ new Date());
     f(e);
-  }, i = I(_), y = I(), F = I();
-  return o(Y, { name: j, as: "fieldset", id: i, "aria-labelledby": i, hint: V, error: h, required: D, children: P(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [o(ee, { onClick: () => {
-    x.current.focus();
-  }, as: "legend", id: i, action: R, children: N }), P(L, { flex: "1", gap: 1, children: [o(S, { as: "label", htmlFor: F, children: p }), o(ie, { ...B, selectedDate: t?.toDate(b()), onChange: q, error: typeof h == "string", required: D, size: C, onClear: c ? E : void 0, clearLabel: `${d} date`, disabled: s, id: F, ref: x, "aria-describedby": `${i}-hint ${i}-error` }), o(S, { as: "label", htmlFor: y, children: a }), o(ne, { size: C, error: typeof h == "string", value: l, onChange: A, onClear: c && l !== void 0 && l !== "00:00" ? M : void 0, clearLabel: `${d} time`, required: D, disabled: s, step: z, id: y, "aria-describedby": `${i}-hint ${i}-error` })] }), o(te, {}), o(re, {})] }) });
-}, oe = K(console.warn), m = (n, d = !0) => {
+  }, i = b(V), x = b(), y = b(), Z = Y(w, E);
+  return o(oe, { name: j, as: "fieldset", id: i, "aria-labelledby": i, hint: R, error: h, required: D, children: F(L, { as: "span", direction: "column", alignItems: "stretch", gap: 1, children: [o(ie, { onClick: () => {
+    w.current.focus();
+  }, as: "legend", id: i, action: N, children: _ }), F(L, { flex: "1", gap: 1, children: [o(S, { as: "label", htmlFor: y, children: p }), o(le, { ...B, selectedDate: t?.toDate("UTC"), onChange: U, error: typeof h == "string", required: D, size: C, onClear: c ? A : void 0, clearLabel: `${d} date`, disabled: s, id: y, ref: Z, "aria-describedby": `${i}-hint ${i}-error` }), o(S, { as: "label", htmlFor: x, children: a }), o(me, { size: C, error: typeof h == "string", value: l, onChange: q, onClear: c && l !== void 0 && l !== "00:00" ? M : void 0, clearLabel: `${d} time`, required: D, disabled: s, step: z, id: x, "aria-describedby": `${i}-hint ${i}-error` })] }), o(ne, {}), o(ae, {})] }) });
+}), se = X(console.warn), m = (n, d = !0) => {
   if (typeof n == "string") {
-    oe("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.");
+    se("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 s = Date.parse(n);
     Number.isNaN(s) ? n = /* @__PURE__ */ new Date() : n = new Date(s);
   }
   const p = n.toISOString();
-  let a = Z(p);
-  return d && (a = a.set({ hour: 0, minute: 0 })), v(a);
-}, ie = $(G)`
+  let a = J(p);
+  return d && (a = a.set({ hour: 0, minute: 0 })), K(a);
+}, le = $(Q)`
   flex: 1 1 70%;
   min-width: 120px;
-`, ne = $(X)`
+`, me = $(re)`
   flex: 1 1 30%;
   min-width: 120px;
 `;
 export {
-  xe as DateTimePicker,
+  Se as DateTimePicker,
   m as convertUTCDateToCalendarDateTime
 };

package/dist/JSONInput/JSONInput.cjs

@@ -1 +1,33 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),u=require("react"),S=require("@codemirror/lang-json"),M=require("@uiw/react-codemirror"),N=require("./JSONInputContainer.cjs"),l=require("./utils/decorationExtension.cjs"),R=require("../Field/Field.cjs"),H=require("../Flex/Flex.cjs"),L=require("../Field/FieldLabel.cjs"),y=require("../Field/FieldError.cjs"),z=require("../Field/FieldHint.cjs"),A=({label:a,error:d,hint:x,labelAction:F,value:m="",required:q=!1,disabled:h=!1,onChange:p=()=>null,...b})=>{const i=u.useRef(),o=u.useRef(),c=u.useRef(),j=!!d,C=e=>{const r=o.current?.doc;if(r){const{text:s,to:t}=r.line(e),E=t-s.trimStart().length;t>E&&c.current?.dispatch({effects:l.addMarks.of([l.lineHighlightMark.range(E,t)])})}},O=()=>{const e=o.current?.doc;if(e){const r=e.length||0;c.current?.dispatch({effects:l.filterMarks.of((s,t)=>t<=0||s>=r)})}},f=({state:e,view:r})=>{c.current=r,o.current=e,O();const t=S.jsonParseLinter()(r);t.length&&C(e.doc.lineAt(t[0].from).number)},k=(e,r)=>{f(r),p(e)},I=(e,r)=>{c.current=e,o.current=r,f({view:e,state:r})},{setContainer:g}=M.useCodeMirror({value:m,onCreateEditor:I,container:i.current,editable:!h,extensions:[S.json(),l.markField],onChange:k,theme:"dark",basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2}}),J=()=>{h||i.current?.children[0].children[1].children[1]?.focus()};return u.useEffect(()=>{const e=i.current;e&&g(e)},[g]),n.jsx(R.Field,{error:d,hint:x,required:q,children:n.jsxs(H.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a&&n.jsx(L.FieldLabel,{onClick:J,action:F,children:a}),n.jsx(N.JSONInputContainer,{ref:i,hasError:j,alignItems:"stretch",fontSize:2,hasRadius:!0,...b}),n.jsx(y.FieldError,{}),n.jsx(z.FieldHint,{})]})})};exports.JSONInput=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("react"),p=require("@codemirror/lang-json"),J=require("@uiw/react-codemirror"),N=require("styled-components"),d=require("./utils/decorationExtension.cjs"),L=require("../hooks/useComposeRefs.cjs"),_=require("../Field/Field.cjs"),b=require("../Flex/Flex.cjs"),$=require("../Field/FieldLabel.cjs"),v=require("../Field/FieldError.cjs"),V=require("../Field/FieldHint.cjs"),z=require("../themes/utils.cjs"),A=e=>e&&e.__esModule?e:{default:e},B=A(N),P=i.forwardRef(({label:e,error:c,hint:S,labelAction:F,value:x="",required:q=!1,disabled:h=!1,onChange:E=()=>null,...C},R)=>{const f=i.useRef(),l=i.useRef(),u=i.useRef(),j=!!c,k=r=>{const t=l.current?.doc;if(t){const{text:a,to:n}=t.line(r),m=n-a.trimStart().length;n>m&&u.current?.dispatch({effects:d.addMarks.of([d.lineHighlightMark.range(m,n)])})}},I=()=>{const r=l.current?.doc;if(r){const t=r.length||0;u.current?.dispatch({effects:d.filterMarks.of((a,n)=>n<=0||a>=t)})}},g=({state:r,view:t})=>{u.current=t,l.current=r,I();const n=p.jsonParseLinter()(t);n.length&&k(r.doc.lineAt(n[0].from).number)},w=(r,t)=>{g(t),E(r)},H=(r,t)=>{u.current=r,l.current=t,g({view:r,state:t})},{setContainer:M,view:o}=J.useCodeMirror({value:x,onCreateEditor:H,container:f.current,editable:!h,extensions:[p.json(),d.markField],onChange:w,theme:"dark",basicSetup:{lineNumbers:!0,bracketMatching:!0,closeBrackets:!0,indentOnInput:!0,syntaxHighlighting:!0,highlightSelectionMatches:!0,tabSize:2}}),O=()=>{!h&&o&&o.focus()},y=L.useComposedRefs(f,M);return i.useImperativeHandle(R,()=>({...o?.dom,focus(){o&&o.focus()},scrollIntoView(r){o&&o.dom.scrollIntoView(r)}}),[o]),s.jsx(_.Field,{error:c,hint:S,required:q,children:s.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e&&s.jsx($.FieldLabel,{onClick:O,action:F,children:e}),s.jsx(D,{ref:y,hasError:j,alignItems:"stretch",fontSize:2,hasRadius:!0,...C}),s.jsx(v.FieldError,{}),s.jsx(V.FieldHint,{})]})})}),D=B.default(b.Flex)`
+  line-height: ${({theme:e})=>e.lineHeights[2]};
+
+  .cm-editor {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({theme:e,hasError:c})=>c?e.colors.danger600:e.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${z.inputFocusStyle()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({theme:e})=>e.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
+    background-color: #4a4a6a;
+  }
+`;exports.JSONInput=P;

package/dist/JSONInput/JSONInput.js

@@ -1,46 +1,48 @@
-import { jsx as n, jsxs as O } from "react/jsx-runtime";
-import { useRef as l, useEffect as J } from "react";
-import { json as j, jsonParseLinter as H } from "@codemirror/lang-json";
-import { useCodeMirror as L } from "@uiw/react-codemirror";
-import { JSONInputContainer as z } from "./JSONInputContainer.js";
-import { markField as A, addMarks as B, lineHighlightMark as R, filterMarks as q } from "./utils/decorationExtension.js";
-import { Field as y } from "../Field/Field.js";
-import { Flex as P } from "../Flex/Flex.js";
-import { FieldLabel as V } from "../Field/FieldLabel.js";
-import { FieldError as D } from "../Field/FieldError.js";
-import { FieldHint as G } from "../Field/FieldHint.js";
-const v = ({ label: a, error: d, hint: g, labelAction: p, value: E = "", required: S = !1, disabled: u = !1, onChange: k = () => null, ...C }) => {
-  const o = l(), i = l(), c = l(), F = !!d, b = (r) => {
-    const t = i.current?.doc;
-    if (t) {
-      const { text: s, to: e } = t.line(r), m = e - s.trimStart().length;
-      e > m && c.current?.dispatch({
-        effects: B.of([R.range(m, e)])
+import { jsx as i, jsxs as J } from "react/jsx-runtime";
+import { forwardRef as j, useRef as d, useImperativeHandle as y } from "react";
+import { json as L, jsonParseLinter as $ } from "@codemirror/lang-json";
+import { useCodeMirror as V } from "@uiw/react-codemirror";
+import v from "styled-components";
+import { markField as z, addMarks as A, lineHighlightMark as B, filterMarks as q } from "./utils/decorationExtension.js";
+import { useComposedRefs as G } from "../hooks/useComposeRefs.js";
+import { Field as P } from "../Field/Field.js";
+import { Flex as g } from "../Flex/Flex.js";
+import { FieldLabel as D } from "../Field/FieldLabel.js";
+import { FieldError as K } from "../Field/FieldError.js";
+import { FieldHint as Q } from "../Field/FieldHint.js";
+import { inputFocusStyle as T } from "../themes/utils.js";
+const lr = j(({ label: t, error: c, hint: p, labelAction: b, value: S = "", required: E = !1, disabled: m = !1, onChange: k = () => null, ...F }, w) => {
+  const u = d(), s = d(), l = d(), C = !!c, I = (r) => {
+    const e = s.current?.doc;
+    if (e) {
+      const { text: a, to: n } = e.line(r), f = n - a.trimStart().length;
+      n > f && l.current?.dispatch({
+        effects: A.of([B.range(f, n)])
       });
     }
   }, x = () => {
-    const r = i.current?.doc;
+    const r = s.current?.doc;
     if (r) {
-      const t = r.length || 0;
-      c.current?.dispatch({
-        effects: q.of((s, e) => e <= 0 || s >= t)
+      const e = r.length || 0;
+      l.current?.dispatch({
+        effects: q.of((a, n) => n <= 0 || a >= e)
       });
     }
-  }, f = ({ state: r, view: t }) => {
-    c.current = t, i.current = r, x();
-    const e = H()(t);
-    e.length && b(r.doc.lineAt(e[0].from).number);
-  }, M = (r, t) => {
-    f(t), k(r);
-  }, I = (r, t) => {
-    c.current = r, i.current = t, f({ view: r, state: t });
-  }, { setContainer: h } = L({
-    value: E,
-    onCreateEditor: I,
-    container: o.current,
-    editable: !u,
-    extensions: [j(), A],
-    onChange: M,
+  }, h = ({ state: r, view: e }) => {
+    l.current = e, s.current = r, x();
+    const n = $()(e);
+    n.length && I(r.doc.lineAt(n[0].from).number);
+  }, H = (r, e) => {
+    h(e), k(r);
+  }, M = (r, e) => {
+    l.current = r, s.current = e, h({ view: r, state: e });
+  }, { setContainer: N, view: o } = V({
+    value: S,
+    onCreateEditor: M,
+    container: u.current,
+    editable: !m,
+    extensions: [L(), z],
+    onChange: H,
     theme: "dark",
     basicSetup: {
       lineNumbers: !0,
@@ -51,14 +53,51 @@ const v = ({ label: a, error: d, hint: g, labelAction: p, value: E = "", require
       highlightSelectionMatches: !0,
       tabSize: 2
     }
-  }), N = () => {
-    u || o.current?.children[0].children[1].children[1]?.focus();
-  };
-  return J(() => {
-    const r = o.current;
-    r && h(r);
-  }, [h]), n(y, { error: d, hint: g, required: S, children: O(P, { direction: "column", alignItems: "stretch", gap: 1, children: [a && n(V, { onClick: N, action: p, children: a }), n(z, { ref: o, hasError: F, alignItems: "stretch", fontSize: 2, hasRadius: !0, ...C }), n(D, {}), n(G, {})] }) });
-};
+  }), O = () => {
+    !m && o && o.focus();
+  }, R = G(u, N);
+  return y(w, () => ({
+    ...o?.dom,
+    focus() {
+      o && o.focus();
+    },
+    scrollIntoView(r) {
+      o && o.dom.scrollIntoView(r);
+    }
+  }), [o]), i(P, { error: c, hint: p, required: E, children: J(g, { direction: "column", alignItems: "stretch", gap: 1, children: [t && i(D, { onClick: O, action: b, children: t }), i(U, { ref: R, hasError: C, alignItems: "stretch", fontSize: 2, hasRadius: !0, ...F }), i(K, {}), i(Q, {})] }) });
+}), U = v(g)`
+  line-height: ${({ theme: t }) => t.lineHeights[2]};
+
+  .cm-editor {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral800 changes between themes 
+     */
+    background-color: #32324d;
+    width: 100%;
+    outline: none;
+  }
+
+  .cm-scroller {
+    border: 1px solid ${({ theme: t, hasError: c }) => c ? t.colors.danger600 : t.colors.neutral200};
+    /* inputFocusStyle will receive hasError prop */
+    ${T()}
+  }
+
+  .cm-editor,
+  .cm-scroller {
+    border-radius: ${({ theme: t }) => t.borderRadius};
+  }
+
+  .cm-gutters,
+  .cm-activeLineGutter {
+    /** 
+     * Hard coded since the color is the same between themes,
+     * theme.colors.neutral700 changes between themes 
+     */
+    background-color: #4a4a6a;
+  }
+`;
 export {
-  v as JSONInput
+  lr as JSONInput
 };

package/dist/Select/MultiSelect.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),J=require("react"),K=require("@strapi/icons"),b=require("styled-components"),o=require("./SelectParts.cjs"),Q=require("../BaseCheckbox/assets/checkmark.svg.cjs"),U=require("../helpers/strings.cjs"),C=require("../hooks/useId.cjs"),Z=require("../hooks/useIntersection.cjs"),ee=require("../Tag/Tag.cjs"),x=require("../Box/Box.cjs"),R=require("../Typography/Typography.cjs"),te=require("../Field/Field.cjs"),re=require("../Flex/Flex.cjs"),ne=require("../Field/FieldLabel.cjs"),ie=require("../Field/FieldHint.cjs"),oe=require("../Field/FieldError.cjs"),le=e=>e&&e.__esModule?e:{default:e};function se(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const d=se(J),ce=le(b),ae=({"aria-label":e,children:i,clearLabel:r="Clear",customizeContent:l,disabled:s,error:c,hint:u,id:j,label:g,labelAction:M,onChange:p,onClear:F,onReachEnd:y,placeholder:_,required:q,selectButtonTitle:he,startIcon:B,size:L="M",value:h,withTags:m,...P})=>{const $=d.useRef(null),[S,k]=d.useState(),[V,z]=d.useState(!1),f=C.useId(j),E=`${f}-hint`,G=`${f}-error`,A=n=>{p?p(n):k(n)},D=n=>()=>{const w=Array.isArray(h)?h.filter(I=>I!==n):(S??[]).filter(I=>I!==n);p?p(w):k(w)},H=n=>{z(n)},v=d.useRef(null),W=()=>{v.current.focus()},N=C.useId(),O=`intersection-${U.stripReactIdOfColon(N)}`,X=n=>{y&&y(n)};Z.useIntersection($,X,{selectorToWatch:`#${O}`,skipWhen:!V});const a=typeof h<"u"&&h!==null?h:S,Y=n=>n&&typeof n=="object"&&n.value?t.jsx(ee.Tag,{tabIndex:-1,disabled:s,icon:t.jsx(K.Cross,{}),onClick:D(n.value),children:n.textValue},n.value):null;return t.jsx(te.Field,{hint:u,error:c,id:f,required:q,children:t.jsxs(re.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[g?t.jsx(ne.FieldLabel,{onClick:W,action:M,children:g}):null,t.jsxs(o.Root,{onOpenChange:H,disabled:s,required:q,onValueChange:A,value:a,...P,multi:!0,children:[t.jsx(o.Trigger,{ref:v,"aria-label":g??e,"aria-describedby":`${E} ${G}`,id:f,startIcon:B,size:L,hasError:!!c,disabled:s,clearLabel:r,onClear:a?.length?F:void 0,paddingLeft:m&&a?.length?1:3,children:t.jsx(o.Value,{placeholder:_,textColor:a?.length?"neutral800":"neutral600",children:a?.length?m?Y:l?l(a):void 0:void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:$,children:[i,t.jsx(x.Box,{id:O,width:"100%",height:"1px"})]})})})]}),t.jsx(ie.FieldHint,{}),t.jsx(oe.FieldError,{})]})})},de=d.forwardRef(({value:e,children:i,startIcon:r,...l},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:c,isIntermediate:u})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:c,zIndex:1,height:"18px",width:"18px"})}),t.jsx(R.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:i})})]})),T=ce.default(x.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),Q=require("react"),U=require("@strapi/icons"),b=require("styled-components"),i=require("./SelectParts.cjs"),Z=require("../BaseCheckbox/assets/checkmark.svg.cjs"),ee=require("../helpers/strings.cjs"),te=require("../hooks/useComposeRefs.cjs"),w=require("../hooks/useId.cjs"),re=require("../hooks/useIntersection.cjs"),ne=require("../Tag/Tag.cjs"),oe=require("../Field/Field.cjs"),ie=require("../Flex/Flex.cjs"),le=require("../Field/FieldLabel.cjs"),x=require("../Box/Box.cjs"),se=require("../Field/FieldHint.cjs"),ce=require("../Field/FieldError.cjs"),O=require("../Typography/Typography.cjs"),ae=e=>e&&e.__esModule?e:{default:e};function de(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const c=de(Q),ue=ae(b),he=c.forwardRef(({"aria-label":e,children:o,clearLabel:r="Clear",customizeContent:l,disabled:s,error:a,hint:u,id:g,label:j,labelAction:M,onChange:p,onClear:F,onReachEnd:y,placeholder:_,required:m,selectButtonTitle:xe,startIcon:B,size:L="M",value:h,withTags:q,...P},V)=>{const R=c.useRef(null),[$,C]=c.useState(),[z,E]=c.useState(!1),f=w.useId(g),G=`${f}-hint`,A=`${f}-error`,D=n=>{p?p(n):C(n)},H=n=>()=>{const v=Array.isArray(h)?h.filter(I=>I!==n):($??[]).filter(I=>I!==n);p?p(v):C(v)},W=n=>{E(n)},S=c.useRef(null),N=()=>{S.current.focus()},X=w.useId(),k=`intersection-${ee.stripReactIdOfColon(X)}`,Y=n=>{y&&y(n)};re.useIntersection(R,Y,{selectorToWatch:`#${k}`,skipWhen:!z});const d=typeof h<"u"&&h!==null?h:$,J=n=>n&&typeof n=="object"&&n.value?t.jsx(ne.Tag,{tabIndex:-1,disabled:s,icon:t.jsx(U.Cross,{}),onClick:H(n.value),children:n.textValue},n.value):null,K=te.useComposedRefs(S,V);return t.jsx(oe.Field,{hint:u,error:a,id:f,required:m,children:t.jsxs(ie.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[j?t.jsx(le.FieldLabel,{onClick:N,action:M,children:j}):null,t.jsxs(i.Root,{onOpenChange:W,disabled:s,required:m,onValueChange:D,value:d,...P,multi:!0,children:[t.jsx(i.Trigger,{ref:K,"aria-label":j??e,"aria-describedby":`${G} ${A}`,id:f,startIcon:B,size:L,hasError:!!a,disabled:s,clearLabel:r,onClear:d?.length?F:void 0,paddingLeft:q&&d?.length?1:3,children:t.jsx(i.Value,{placeholder:_,textColor:d?.length?"neutral800":"neutral600",children:d?.length?q?J:l?l(d):void 0:void 0})}),t.jsx(i.Portal,{children:t.jsx(i.Content,{position:"popper",sideOffset:4,children:t.jsxs(i.Viewport,{ref:R,children:[o,t.jsx(x.Box,{id:k,width:"100%",height:"1px"})]})})})]}),t.jsx(se.FieldHint,{}),t.jsx(ce.FieldError,{})]})})}),pe=c.forwardRef(({value:e,children:o,startIcon:r,...l},s)=>t.jsxs(i.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:a,isIntermediate:u})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:a,zIndex:1,height:"18px",width:"18px"})}),t.jsx(O.Typography,{textColor:"neutral800",children:t.jsx(i.ItemText,{children:o})})]})),T=ue.default(x.Box)`
   border: 1px solid
-    ${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral300};
-  background-color: ${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral0};
+    ${({theme:e,$selected:o,$indeterminate:r})=>o||r?e.colors.primary600:e.colors.neutral300};
+  background-color: ${({theme:e,$selected:o,$indeterminate:r})=>o||r?e.colors.primary600:e.colors.neutral0};
 
-  ${({theme:e,$indeterminate:i})=>i&&b.css`
+  ${({theme:e,$indeterminate:o})=>o&&b.css`
       &::after {
         content: '';
         display: block;
@@ -21,10 +21,10 @@
   ${({$selected:e})=>e&&b.css`
       &::after {
         content: '';
-        background: url(${Q}) no-repeat no-repeat center center;
+        background: url(${Z}) no-repeat no-repeat center center;
         width: 100%;
         height: 100%;
         position: absolute;
       }
     `}
-`,ue=d.forwardRef(({children:e,label:i,startIcon:r,values:l=[],...s},c)=>t.jsxs(o.Group,{ref:c,children:[t.jsxs(o.Item,{value:l,...s,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:u,isIntermediate:j})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:j,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(R.Typography,{textColor:"neutral800",children:i})]}),e]}));exports.MultiSelect=ae;exports.MultiSelectGroup=ue;exports.MultiSelectOption=de;
+`,fe=c.forwardRef(({children:e,label:o,startIcon:r,values:l=[],...s},a)=>t.jsxs(i.Group,{ref:a,children:[t.jsxs(i.Item,{value:l,...s,children:[r&&t.jsx(x.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:u,isIntermediate:g})=>t.jsx(T,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:g,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(O.Typography,{textColor:"neutral800",children:o})]}),e]}));exports.MultiSelect=he;exports.MultiSelectGroup=fe;exports.MultiSelectOption=pe;

package/dist/Select/MultiSelect.js

@@ -1,32 +1,33 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
-import { Cross as N } from "@strapi/icons";
-import Q, { css as O } from "styled-components";
-import { Item as F, ItemIndicator as M, ItemText as U, Group as Z, Root as ee, Trigger as re, Value as te, Portal as ne, Content as oe, Viewport as ie } from "./SelectParts.js";
-import le from "../BaseCheckbox/assets/checkmark.svg.js";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as l from "react";
+import { Cross as U } from "@strapi/icons";
+import Z, { css as O } from "styled-components";
+import { Root as ee, Trigger as re, Value as te, Portal as ne, Content as oe, Viewport as ie, Item as F, ItemIndicator as M, ItemText as le, Group as de } from "./SelectParts.js";
+import ce from "../BaseCheckbox/assets/checkmark.svg.js";
 import { stripReactIdOfColon as ae } from "../helpers/strings.js";
+import { useComposedRefs as se } from "../hooks/useComposeRefs.js";
 import { useId as S } from "../hooks/useId.js";
-import { useIntersection as ce } from "../hooks/useIntersection.js";
-import { Tag as de } from "../Tag/Tag.js";
+import { useIntersection as he } from "../hooks/useIntersection.js";
+import { Tag as pe } from "../Tag/Tag.js";
+import { Field as ue } from "../Field/Field.js";
+import { Flex as fe } from "../Flex/Flex.js";
+import { FieldLabel as me } from "../Field/FieldLabel.js";
 import { Box as m } from "../Box/Box.js";
+import { FieldHint as ge } from "../Field/FieldHint.js";
+import { FieldError as xe } from "../Field/FieldError.js";
 import { Typography as B } from "../Typography/Typography.js";
-import { Field as se } from "../Field/Field.js";
-import { Flex as he } from "../Flex/Flex.js";
-import { FieldLabel as ue } from "../Field/FieldLabel.js";
-import { FieldHint as pe } from "../Field/FieldHint.js";
-import { FieldError as fe } from "../Field/FieldError.js";
-const Le = ({ "aria-label": t, children: n, clearLabel: o = "Clear", customizeContent: l, disabled: i, error: a, hint: h, id: g, label: x, labelAction: V, onChange: p, onClear: j, onReachEnd: $, placeholder: E, required: b, selectButtonTitle: me, startIcon: z, size: A = "M", value: u, withTags: k, ...G }) => {
-  const C = d.useRef(null), [v, w] = d.useState(), [W, q] = d.useState(!1), f = S(g), H = `${f}-hint`, P = `${f}-error`, X = (r) => {
-    p ? p(r) : w(r);
-  }, Y = (r) => () => {
-    const T = Array.isArray(u) ? u.filter((I) => I !== r) : (v ?? []).filter((I) => I !== r);
-    p ? p(T) : w(T);
-  }, _ = (r) => {
-    q(r);
-  }, R = d.useRef(null), D = () => {
-    R.current.focus();
-  }, J = S(), y = `intersection-${ae(J)}`;
-  ce(C, (r) => {
+const ze = l.forwardRef(({ "aria-label": t, children: n, clearLabel: o = "Clear", customizeContent: d, disabled: i, error: c, hint: h, id: g, label: x, labelAction: V, onChange: u, onClear: j, onReachEnd: $, placeholder: E, required: R, selectButtonTitle: Ie, startIcon: z, size: A = "M", value: p, withTags: b, ...G }, W) => {
+  const C = l.useRef(null), [k, w] = l.useState(), [q, H] = l.useState(!1), f = S(g), P = `${f}-hint`, X = `${f}-error`, Y = (r) => {
+    u ? u(r) : w(r);
+  }, _ = (r) => () => {
+    const T = Array.isArray(p) ? p.filter((I) => I !== r) : (k ?? []).filter((I) => I !== r);
+    u ? u(T) : w(T);
+  }, D = (r) => {
+    H(r);
+  }, v = l.useRef(null), J = () => {
+    v.current.focus();
+  }, K = S(), y = `intersection-${ae(K)}`;
+  he(C, (r) => {
     $ && $(r);
   }, {
     selectorToWatch: `#${y}`,
@@ -34,11 +35,11 @@ const Le = ({ "aria-label": t, children: n, clearLabel: o = "Clear", customizeCo
      * 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: !W
+    skipWhen: !q
   });
-  const c = typeof u < "u" && u !== null ? u : v, K = (r) => r && typeof r == "object" && r.value ? e(de, { tabIndex: -1, disabled: i, icon: e(N, {}), onClick: Y(r.value), children: r.textValue }, r.value) : null;
-  return e(se, { hint: h, error: a, id: f, required: b, children: s(he, { direction: "column", alignItems: "stretch", gap: 1, children: [x ? e(ue, { onClick: D, action: V, children: x }) : null, s(ee, { onOpenChange: _, disabled: i, required: b, onValueChange: X, value: c, ...G, multi: !0, children: [e(re, { ref: R, "aria-label": x ?? t, "aria-describedby": `${H} ${P}`, id: f, startIcon: z, size: A, hasError: !!a, disabled: i, clearLabel: o, onClear: c?.length ? j : void 0, paddingLeft: k && c?.length ? 1 : 3, children: e(te, { placeholder: E, textColor: c?.length ? "neutral800" : "neutral600", children: c?.length ? k ? K : l ? l(c) : void 0 : void 0 }) }), e(ne, { children: e(oe, { position: "popper", sideOffset: 4, children: s(ie, { ref: C, children: [n, e(m, { id: y, width: "100%", height: "1px" })] }) }) })] }), e(pe, {}), e(fe, {})] }) });
-}, Ve = d.forwardRef(({ value: t, children: n, startIcon: o, ...l }, i) => s(F, { ref: i, value: t.toString(), ...l, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: a, isIntermediate: h }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: a, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: e(U, { children: n }) })] })), L = Q(m)`
+  const a = typeof p < "u" && p !== null ? p : k, N = (r) => r && typeof r == "object" && r.value ? e(pe, { tabIndex: -1, disabled: i, icon: e(U, {}), onClick: _(r.value), children: r.textValue }, r.value) : null, Q = se(v, W);
+  return e(ue, { hint: h, error: c, id: f, required: R, children: s(fe, { direction: "column", alignItems: "stretch", gap: 1, children: [x ? e(me, { onClick: J, action: V, children: x }) : null, s(ee, { onOpenChange: D, disabled: i, required: R, onValueChange: Y, value: a, ...G, multi: !0, children: [e(re, { ref: Q, "aria-label": x ?? t, "aria-describedby": `${P} ${X}`, id: f, startIcon: z, size: A, hasError: !!c, disabled: i, clearLabel: o, onClear: a?.length ? j : void 0, paddingLeft: b && a?.length ? 1 : 3, children: e(te, { placeholder: E, textColor: a?.length ? "neutral800" : "neutral600", children: a?.length ? b ? N : d ? d(a) : void 0 : void 0 }) }), e(ne, { children: e(oe, { position: "popper", sideOffset: 4, children: s(ie, { ref: C, children: [n, e(m, { id: y, width: "100%", height: "1px" })] }) }) })] }), e(ge, {}), e(xe, {})] }) });
+}), Ae = l.forwardRef(({ value: t, children: n, startIcon: o, ...d }, i) => s(F, { ref: i, value: t.toString(), ...d, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: c, isIntermediate: h }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: c, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: e(le, { children: n }) })] })), L = Z(m)`
   border: 1px solid
     ${({ theme: t, $selected: n, $indeterminate: o }) => n || o ? t.colors.primary600 : t.colors.neutral300};
   background-color: ${({ theme: t, $selected: n, $indeterminate: o }) => n || o ? t.colors.primary600 : t.colors.neutral0};
@@ -61,15 +62,15 @@ const Le = ({ "aria-label": t, children: n, clearLabel: o = "Clear", customizeCo
   ${({ $selected: t }) => t && O`
       &::after {
         content: '';
-        background: url(${le}) no-repeat no-repeat center center;
+        background: url(${ce}) no-repeat no-repeat center center;
         width: 100%;
         height: 100%;
         position: absolute;
       }
     `}
-`, je = d.forwardRef(({ children: t, label: n, startIcon: o, values: l = [], ...i }, a) => s(Z, { ref: a, children: [s(F, { value: l, ...i, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: h, isIntermediate: g }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: g, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: n })] }), t] }));
+`, Ge = l.forwardRef(({ children: t, label: n, startIcon: o, values: d = [], ...i }, c) => s(de, { ref: c, children: [s(F, { value: d, ...i, children: [o && e(m, { as: "span", "aria-hidden": !0, children: o }), e(M, { children: ({ isSelected: h, isIntermediate: g }) => e(L, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: g, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(B, { textColor: "neutral800", children: n })] }), t] }));
 export {
-  Le as MultiSelect,
-  je as MultiSelectGroup,
-  Ve as MultiSelectOption
+  ze as MultiSelect,
+  Ge as MultiSelectGroup,
+  Ae as MultiSelectOption
 };

package/dist/Select/SingleSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),o=require("./SelectParts.cjs"),V=require("../helpers/strings.cjs"),b=require("../hooks/useId.cjs"),H=require("../hooks/useIntersection.cjs"),q=require("../Box/Box.cjs"),W=require("../Typography/Typography.cjs"),z=require("../Field/Field.cjs"),D=require("../Flex/Flex.cjs"),A=require("../Field/FieldLabel.cjs"),G=require("../Field/FieldHint.cjs"),J=require("../Field/FieldError.cjs");function K(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(n,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return n.default=t,Object.freeze(n)}const h=K(E),Q=({error:t,hint:n,id:r,label:i,labelAction:s,required:d,selectButtonTitle:x,...g})=>{const c=b.useId(r),u=h.useRef(null),f=()=>{u.current.focus()};return e.jsx(z.Field,{hint:n,error:t,id:c,required:d,children:e.jsxs(D.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i?e.jsx(A.FieldLabel,{onClick:f,action:s,children:i}):null,e.jsx(O,{label:i,id:c,triggerRef:u,required:d,...g}),e.jsx(G.FieldHint,{}),e.jsx(J.FieldError,{})]})})},O=({"aria-label":t,id:n,children:r,clearLabel:i="Clear",customizeContent:s,disabled:d,error:x,label:g,onChange:c,onClear:u,onReachEnd:f,placeholder:m,required:y,selectButtonTitle:X,startIcon:F,size:R="M",value:p,triggerRef:T,...B})=>{const[C,j]=h.useState(),[_,$]=h.useState(!1),v=l=>{$(l)},w=l=>{u&&u(l),c||j("")},P=`${n}-hint`,k=`${n}-error`,L=l=>{c?c(typeof p=="number"?Number(l):l):j(l)},S=h.useRef(null),M=b.useId(),I=`intersection-${V.stripReactIdOfColon(M)}`,N=l=>{f&&f(l)};H.useIntersection(S,N,{selectorToWatch:`#${I}`,skipWhen:!_});const a=(typeof p<"u"&&p!==null?p.toString():C)??"";return e.jsxs(o.Root,{onOpenChange:v,disabled:d,required:y,onValueChange:L,value:a,...B,children:[e.jsx(o.Trigger,{ref:T,"aria-label":g??t,"aria-describedby":n?`${P} ${k}`:void 0,id:n,startIcon:F,size:R,hasError:!!x,disabled:d,clearLabel:i,onClear:a&&u?w:void 0,children:e.jsx(o.Value,{placeholder:m,textColor:a?"neutral800":"neutral600",children:a&&s?s(a):void 0})}),e.jsx(o.Portal,{children:e.jsx(o.Content,{position:"popper",sideOffset:4,children:e.jsxs(o.Viewport,{ref:S,children:[r,e.jsx(q.Box,{id:I,width:"100%",height:"1px"})]})})})]})},U=h.forwardRef(({value:t,startIcon:n,children:r,...i},s)=>e.jsxs(o.Item,{ref:s,value:t.toString(),...i,children:[n&&e.jsx(q.Box,{as:"span","aria-hidden":!0,children:n}),e.jsx(W.Typography,{textColor:"neutral800",children:e.jsx(o.ItemText,{children:r})})]}));exports.SingleSelect=Q;exports.SingleSelectInput=O;exports.SingleSelectOption=U;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),s=require("./SelectParts.cjs"),V=require("../helpers/strings.cjs"),H=require("../hooks/useComposeRefs.cjs"),q=require("../hooks/useId.cjs"),W=require("../hooks/useIntersection.cjs"),z=require("../Field/Field.cjs"),D=require("../Flex/Flex.cjs"),A=require("../Field/FieldLabel.cjs"),G=require("../Field/FieldHint.cjs"),J=require("../Field/FieldError.cjs"),O=require("../Box/Box.cjs"),K=require("../Typography/Typography.cjs");function Q(t){if(t&&t.__esModule)return t;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const l=Q(E),U=l.forwardRef(({error:t,hint:r,id:n,label:i,labelAction:c,required:u,selectButtonTitle:S,...g},a)=>{const d=q.useId(n),f=l.useRef(null),x=()=>{f.current.focus()},j=H.useComposedRefs(a,f);return e.jsx(z.Field,{hint:r,error:t,id:d,required:u,children:e.jsxs(D.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[i?e.jsx(A.FieldLabel,{onClick:x,action:c,children:i}):null,e.jsx(R,{label:i,id:d,ref:j,required:u,...g}),e.jsx(G.FieldHint,{}),e.jsx(J.FieldError,{})]})})}),R=l.forwardRef(({"aria-label":t,id:r,children:n,clearLabel:i="Clear",customizeContent:c,disabled:u,error:S,label:g,onChange:a,onClear:d,onReachEnd:f,placeholder:x,required:j,selectButtonTitle:Y,startIcon:y,size:T="M",value:p,...F},B)=>{const[C,I]=l.useState(),[w,_]=l.useState(!1),$=o=>{_(o)},v=o=>{d&&d(o),a||I("")},P=`${r}-hint`,k=`${r}-error`,L=o=>{a?a(typeof p=="number"?Number(o):o):I(o)},b=l.useRef(null),M=q.useId(),m=`intersection-${V.stripReactIdOfColon(M)}`,N=o=>{f&&f(o)};W.useIntersection(b,N,{selectorToWatch:`#${m}`,skipWhen:!w});const h=(typeof p<"u"&&p!==null?p.toString():C)??"";return e.jsxs(s.Root,{onOpenChange:$,disabled:u,required:j,onValueChange:L,value:h,...F,children:[e.jsx(s.Trigger,{ref:B,"aria-label":g??t,"aria-describedby":r?`${P} ${k}`:void 0,id:r,startIcon:y,size:T,hasError:!!S,disabled:u,clearLabel:i,onClear:h&&d?v:void 0,children:e.jsx(s.Value,{placeholder:x,textColor:h?"neutral800":"neutral600",children:h&&c?c(h):void 0})}),e.jsx(s.Portal,{children:e.jsx(s.Content,{position:"popper",sideOffset:4,children:e.jsxs(s.Viewport,{ref:b,children:[n,e.jsx(O.Box,{id:m,width:"100%",height:"1px"})]})})})]})}),X=l.forwardRef(({value:t,startIcon:r,children:n,...i},c)=>e.jsxs(s.Item,{ref:c,value:t.toString(),...i,children:[r&&e.jsx(O.Box,{as:"span","aria-hidden":!0,children:r}),e.jsx(K.Typography,{textColor:"neutral800",children:e.jsx(s.ItemText,{children:n})})]}));exports.SingleSelect=U;exports.SingleSelectInput=R;exports.SingleSelectOption=X;