@strapi/design-system 1.8.1 → 1.9.0

package/dist/DatePicker/DatePicker.cjs

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

@@ -1,13 +1,13 @@
 import { jsxs as F, jsx as i } from "react/jsx-runtime";
 import * as c from "react";
 import { useFloating as be, offset as we, shift as xe, flip as ke, autoUpdate as Te } from "@floating-ui/react-dom";
-import { getLocalTimeZone as Ee, today as J, minDate as H, maxDate as X, startOfMonth as Pe, startOfWeek as le, getDayOfWeek as Ie, isSameDay as se, endOfMonth as Ae, parseAbsolute as Re, toCalendarDate as Se } from "@internationalized/date";
+import { getLocalTimeZone as Pe, today as J, minDate as H, maxDate as X, startOfMonth as Ee, startOfWeek as le, getDayOfWeek as Ie, isSameDay as se, endOfMonth as Ae, parseAbsolute as Re, toCalendarDate as Se } from "@internationalized/date";
 import { useFocusGuards as Me } from "@radix-ui/react-focus-guards";
 import { FocusScope as ve } from "@radix-ui/react-focus-scope";
 import { Cross as $e, Calendar as Fe } from "@strapi/icons";
-import { composeEventHandlers as L } from "@strapi/ui-primitives";
-import { createPortal as Le } from "react-dom";
-import { RemoveScroll as Ne } from "react-remove-scroll";
+import { composeEventHandlers as N } from "@strapi/ui-primitives";
+import { createPortal as Ne } from "react-dom";
+import { RemoveScroll as Le } from "react-remove-scroll";
 import I from "styled-components";
 import { useDesignSystem as Oe } from "../DesignSystemProvider.js";
 import { DismissibleLayer as _e } from "../DismissibleLayer/index.js";
@@ -27,7 +27,7 @@ import { Field as Ze } from "../Field/Field.js";
 import { FieldLabel as qe } from "../Field/FieldLabel.js";
 import { FieldHint as Ke } from "../Field/FieldHint.js";
 import { FieldError as Ge } from "../Field/FieldError.js";
-const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
+const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
   /**
    * DatePickerCalendar props
    */
@@ -45,12 +45,12 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
    * Combobox props
    */
   error: x,
-  id: y,
-  disabled: m = !1,
+  id: f,
+  disabled: y = !1,
   placeholder: k,
   required: w = !1,
-  onClear: E,
-  clearLabel: P = "Clear",
+  onClear: P,
+  clearLabel: E = "Clear",
   size: d,
   /**
    * @preserve
@@ -62,9 +62,9 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
    * @deprecated This is no longer used.
    */
   selectedDateLabel: o,
-  ...f
+  ...m
 }, p) => {
-  const T = Ee(), M = Oe("DatePicker"), v = t ?? M.locale, $ = S(v, {
+  const T = Pe(), M = Oe("DatePicker"), v = t ?? M.locale, $ = S(v, {
     day: "2-digit",
     month: "2-digit",
     year: "numeric"
@@ -83,7 +83,7 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
     minDate: te,
     maxDate: re
   })), pe = ce(), he = c.useRef(null), ge = (D) => {
-    E && !m && (_(""), ee(void 0), E(D), A?.focus());
+    P && !y && (_(""), ee(void 0), P(D), A?.focus());
   }, De = c.useCallback((D) => {
     D && V && G(V), Z(D);
   }, [V]);
@@ -99,13 +99,13 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
       _($.format(D.toDate(T)));
     }
   }, [n, Y, $, T]);
-  const ye = `${y}-hint`, Ce = `${y}-error`;
-  return F(He, { calendarDate: fe, content: ue, contentId: pe, disabled: m, locale: v, minDate: te, maxDate: re, open: O, onCalendarDateChange: G, onContentChange: me, onOpenChange: De, onTextInputChange: K, onTextValueChange: _, onTriggerChange: C, onValueChange: ee, required: w, textInput: A, textValue: Y, timeZone: T, trigger: q, value: V, children: [F(et, { className: r, size: d, hasError: !!x, children: [i(nt, { "aria-hidden": !0 }), i(ot, { ref: p, placeholder: k, "aria-describedby": `${ye} ${Ce}`, id: y, ...f }), Y && E ? i(rt, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": m, "aria-label": P, title: P, ref: he, children: i($e, {}) }) : null] }), i(Ue, { children: i(ct, { label: e, children: i(pt, { monthSelectLabel: g, yearSelectLabel: b }) }) })] });
+  const ye = `${f}-hint`, Ce = `${f}-error`;
+  return F(He, { calendarDate: fe, content: ue, contentId: pe, disabled: y, locale: v, minDate: te, maxDate: re, open: O, onCalendarDateChange: G, onContentChange: me, onOpenChange: De, onTextInputChange: K, onTextValueChange: _, onTriggerChange: C, onValueChange: ee, required: w, textInput: A, textValue: Y, timeZone: T, trigger: q, value: V, children: [F(et, { className: r, size: d, hasError: !!x, children: [i(nt, { "aria-hidden": !0 }), i(ot, { ref: p, placeholder: k, "aria-describedby": `${ye} ${Ce}`, id: f, ...m }), Y && P ? i(rt, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": y, "aria-label": E, title: E, ref: he, children: i($e, {}) }) : null] }), i(Ue, { children: i(ct, { label: e, children: i(pt, { monthSelectLabel: g, yearSelectLabel: b }) }) })] });
 }), ie = (e) => !!e.match(/^[^a-zA-Z]*$/), Je = ({ currentValue: e, minDate: r, maxDate: n }) => {
   const t = J("UTC");
   return e || (H(r, t) === r && X(n, t) === n ? t : H(r, t) === t ? r : X(n, t) === t ? n : t);
 }, Qe = "DatePickerTrigger", et = c.forwardRef(({ hasError: e, size: r = "M", ...n }, t) => {
-  const a = N(Qe), s = Q(t, (u) => a.onTriggerChange(u)), g = () => {
+  const a = L(Qe), s = Q(t, (u) => a.onTriggerChange(u)), g = () => {
     a.disabled || a.onOpenChange(!0);
   };
   return i(ve, {
@@ -119,9 +119,9 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
     onUnmountAutoFocus: (u) => {
       document.getSelection()?.empty(), u.preventDefault();
     },
-    children: i(tt, { ref: s, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick: L(n.onClick, () => {
+    children: i(tt, { ref: s, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick: N(n.onClick, () => {
       a.textInput?.focus();
-    }), onPointerDown: L(n.onPointerDown, (u) => {
+    }), onPointerDown: N(n.onPointerDown, (u) => {
       const l = u.target;
       l.hasPointerCapture(u.pointerId) && l.releasePointerCapture(u.pointerId), (l.closest("button") ?? l.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (g(), a.textInput?.focus());
     }) })
@@ -158,14 +158,14 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
     fill: ${({ theme: e }) => e.colors.neutral500};
   }
 `, at = "DatePickerTextInput", ot = c.forwardRef(({ placeholder: e, ...r }, n) => {
-  const t = N(at), { onTextValueChange: a, textValue: s, onTextInputChange: g, onOpenChange: u, disabled: l, locale: b } = t, x = Q(n, (d) => g(d)), y = () => {
+  const t = L(at), { onTextValueChange: a, textValue: s, onTextInputChange: g, onOpenChange: u, disabled: l, locale: b } = t, x = Q(n, (d) => g(d)), f = () => {
     l || u(!0);
-  }, m = S(b, {
+  }, y = S(b, {
     year: "numeric",
     month: "2-digit",
     day: "2-digit"
-  }), [k, w, E] = c.useMemo(() => {
-    const d = m.formatToParts(/* @__PURE__ */ new Date()), h = d.filter((p) => p.type === "year" || p.type === "month" || p.type === "day"), o = h.map((p) => {
+  }), [k, w, P] = c.useMemo(() => {
+    const d = y.formatToParts(/* @__PURE__ */ new Date()), h = d.filter((p) => p.type === "year" || p.type === "month" || p.type === "day"), o = h.map((p) => {
       switch (p.type) {
         case "day":
           return "DD";
@@ -176,18 +176,18 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
         default:
           return "";
       }
-    }), f = d.find((p) => p.type === "literal")?.value ?? "";
-    return [o, f, h];
-  }, [m]), P = 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: P, placeholder: e ?? k.join(w), ...r, value: s ?? "", onBlur: L(r.onBlur, () => {
+    }), m = d.find((p) => p.type === "literal")?.value ?? "";
+    return [o, m, h];
+  }, [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);
       return;
     }
-    t.onTextValueChange(m.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate);
-  }), onChange: L(r.onChange, (d) => {
+    t.onTextValueChange(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate);
+  }), onChange: N(r.onChange, (d) => {
     if (ie(d.target.value)) {
-      const h = d.target.value.split(w), [o, f, p] = E.map((C, A) => {
+      const h = d.target.value.split(w), [o, m, p] = P.map((C, A) => {
         const K = h[A];
         return {
           ...C,
@@ -201,15 +201,15 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
       }
       p && p.length < 3 && M > t.maxDate.year && (M -= 100);
       const v = t.calendarDate.set({ year: M }), $ = v.calendar.getMonthsInYear(v), O = v.set({
-        month: f && Number(f) <= $ ? Number(f) : void 0
+        month: m && Number(m) <= $ ? Number(m) : void 0
       }), Z = O.calendar.getDaysInMonth(O), q = O.set({
         day: o && Number(o) <= Z ? Number(o) : void 0
       });
       t.onCalendarDateChange(it(q, t.minDate, t.maxDate)), t.onTextValueChange(d.target.value);
     }
-  }), onKeyDown: L(r.onKeyDown, (d) => {
+  }), onKeyDown: N(r.onKeyDown, (d) => {
     if (!t.open && (ie(d.key) || ["ArrowDown", "Backspace"].includes(d.key)))
-      y();
+      f();
     else if (["Tab"].includes(d.key) && t.open)
       d.preventDefault();
     else if (["Escape"].includes(d.key))
@@ -245,7 +245,7 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
         }
       }
     else
-      t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(m.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
+      t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
   }) });
 });
 function it(e, r, n) {
@@ -267,16 +267,16 @@ const lt = I.input`
     cursor: inherit;
   }
 `, st = "DatePickerContent", ct = c.forwardRef((e, r) => {
-  const [n, t] = c.useState(), a = N(st);
+  const [n, t] = c.useState(), a = L(st);
   if (c.useLayoutEffect(() => {
     t(new DocumentFragment());
   }, []), !a.open) {
     const s = n;
-    return s ? Le(i("div", { children: e.children }), s) : null;
+    return s ? Ne(i("div", { children: e.children }), s) : null;
   }
   return i(ut, { ...e, ref: r });
 }), dt = "DatePickerContent", ut = c.forwardRef((e, r) => {
-  const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...s } = N(dt), { x: g, y: u, reference: l, floating: b, strategy: x } = be({
+  const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...s } = L(dt), { x: g, y: u, refs: l, strategy: b } = be({
     strategy: "fixed",
     placement: "bottom-start",
     middleware: [
@@ -286,33 +286,34 @@ const lt = I.input`
       xe(),
       ke()
     ],
+    elements: {
+      reference: s.trigger
+    },
     whileElementsMounted: Te
   });
   c.useEffect(() => {
-    const m = () => {
+    const f = () => {
       a(!1);
     };
-    return window.addEventListener("blur", m), window.addEventListener("resize", m), () => {
-      window.removeEventListener("blur", m), window.removeEventListener("resize", m);
+    return window.addEventListener("blur", f), window.addEventListener("resize", f), () => {
+      window.removeEventListener("blur", f), window.removeEventListener("resize", f);
     };
-  }, [a]), c.useLayoutEffect(() => {
-    l(s.trigger);
-  }, [l, s.trigger]);
-  const y = Q(r, (m) => s.onContentChange(m), b);
-  return Me(), i(Ne, { allowPinchZoom: !0, children: i(_e, {
+  }, [a]);
+  const x = Q(r, (f) => s.onContentChange(f), l.setFloating);
+  return Me(), i(Le, { allowPinchZoom: !0, children: i(_e, {
     asChild: !0,
     // When focus is trapped, a focusout event may still happen.
     // We make sure we don't trigger our `onDismiss` in such case.
-    onFocusOutside: (m) => {
-      m.preventDefault();
+    onFocusOutside: (f) => {
+      f.preventDefault();
     },
     onDismiss: () => {
       a(!1);
     },
-    children: i(mt, { ref: y, "data-state": s.open ? "open" : "closed", onContextMenu: (m) => m.preventDefault(), id: s.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
+    children: i(mt, { ref: x, "data-state": s.open ? "open" : "closed", onContextMenu: (f) => f.preventDefault(), id: s.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
       left: g,
       top: u,
-      position: x
+      position: b
     }, hasRadius: !0, background: "neutral0", padding: 1, ...t })
   }) });
 }), mt = I(W)`
@@ -320,27 +321,27 @@ const lt = I.input`
   z-index: ${({ theme: e }) => e.zIndices[0]};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
 `, ft = "DatePickerCalendar", pt = c.forwardRef(({ monthSelectLabel: e, yearSelectLabel: r, ...n }, t) => {
-  const { locale: a, timeZone: s, minDate: g, maxDate: u, calendarDate: l, onCalendarDateChange: b } = N(ft), x = Pe(l), y = c.useMemo(() => {
-    const o = g.year, f = u.year;
-    return [...Array(f - o + 1).keys()].map((p) => (o + p).toString());
-  }, [g, u]), m = S(a, { month: "long" }), k = c.useMemo(() => [...Array(l.calendar.getMonthsInYear(l)).keys()].map((o) => m.format(l.set({ month: o + 1 }).toDate(s))), [l, m, s]), w = S(a, { weekday: "short" }), E = c.useMemo(() => {
+  const { locale: a, timeZone: s, minDate: g, maxDate: u, calendarDate: l, onCalendarDateChange: b } = L(ft), x = Ee(l), f = c.useMemo(() => {
+    const o = g.year, m = u.year;
+    return [...Array(m - o + 1).keys()].map((p) => (o + p).toString());
+  }, [g, u]), y = S(a, { month: "long" }), k = c.useMemo(() => [...Array(l.calendar.getMonthsInYear(l)).keys()].map((o) => y.format(l.set({ month: o + 1 }).toDate(s))), [l, y, s]), w = S(a, { weekday: "short" }), P = c.useMemo(() => {
     let o = le(J(s), a);
-    return [...new Array(7).keys()].map((f) => {
-      let T = o.add({ days: f }).toDate(s);
+    return [...new Array(7).keys()].map((m) => {
+      let T = o.add({ days: m }).toDate(s);
       return w.format(T);
     });
-  }, [s, a, w]), P = (o) => {
+  }, [s, a, w]), E = (o) => {
     if (typeof o == "number")
       return;
-    const f = l.set({ month: k.indexOf(o) + 1 });
-    b(f);
+    const m = l.set({ month: k.indexOf(o) + 1 });
+    b(m);
   }, d = (o) => {
     if (typeof o == "number")
       return;
-    const f = l.set({ year: parseInt(o, 10) });
-    b(f);
+    const m = l.set({ year: parseInt(o, 10) });
+    b(m);
   }, h = ht(x, a);
-  return F(U, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [F(gt, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [i(ne, { label: e, size: "S", value: k[l.month - 1], onChange: P, children: k.map((o) => i(ae, { value: o, children: o }, o)) }), i(ne, { size: "S", value: l.year.toString(), label: r, onChange: d, children: y.map((o) => i(ae, { value: o, children: o }, o)) })] }), F("table", { role: "grid", children: [i("thead", { "aria-hidden": !0, children: i("tr", { "aria-rowindex": 0, children: E.map((o, f) => i(Dt, { "aria-colindex": f, children: o }, o)) }) }), i("tbody", { children: [...new Array(6).keys()].map((o) => i("tr", { "aria-rowindex": o + 2, children: h(o).map((f, p) => f ? i(bt, { "aria-colindex": p + 1, date: f, startDate: x }, f.toString()) : i(de, { "aria-colindex": p + 1 })) }, o)) })] })] });
+  return F(U, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [F(gt, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [i(ne, { label: e, size: "S", value: k[l.month - 1], onChange: E, children: k.map((o) => i(ae, { value: o, children: o }, o)) }), i(ne, { size: "S", value: l.year.toString(), label: r, onChange: d, children: f.map((o) => i(ae, { value: o, children: o }, o)) })] }), F("table", { role: "grid", children: [i("thead", { "aria-hidden": !0, children: i("tr", { "aria-rowindex": 0, children: P.map((o, m) => i(Dt, { "aria-colindex": m, children: o }, o)) }) }), i("tbody", { children: [...new Array(6).keys()].map((o) => i("tr", { "aria-rowindex": o + 2, children: h(o).map((m, p) => m ? i(bt, { "aria-colindex": p + 1, date: m, startDate: x }, m.toString()) : i(de, { "aria-colindex": p + 1 })) }, o)) })] })] });
 }), ht = (e, r) => (n) => {
   let t = e.add({ weeks: n }), a = [];
   t = le(t, r);
@@ -382,23 +383,23 @@ const lt = I.input`
   border-radius: ${({ theme: e }) => e.borderRadius};
   text-transform: capitalize;
 `, Ct = "DatePickerCalendarCell", bt = c.forwardRef(({ date: e, startDate: r, ...n }, t) => {
-  const { timeZone: a, locale: s, calendarDate: g, onValueChange: u, onOpenChange: l, onTextValueChange: b, onCalendarDateChange: x } = N(Ct), y = se(g, e), m = S(s, {
+  const { timeZone: a, locale: s, calendarDate: g, onValueChange: u, onOpenChange: l, onTextValueChange: b, onCalendarDateChange: x } = L(Ct), f = se(g, e), y = S(s, {
     weekday: "long",
     day: "numeric",
     month: "long",
     year: "numeric"
-  }), k = c.useMemo(() => m.format(e.toDate(a)), [m, e, a]), w = S(s, {
+  }), k = c.useMemo(() => y.format(e.toDate(a)), [y, e, a]), w = S(s, {
     day: "numeric",
     calendar: e.calendar.identifier
-  }), E = c.useMemo(() => w.formatToParts(e.toDate(a)).find((f) => f.type === "day").value, [w, e, a]), P = S(s, {
+  }), P = c.useMemo(() => w.formatToParts(e.toDate(a)).find((m) => m.type === "day").value, [w, e, a]), E = S(s, {
     day: "2-digit",
     month: "2-digit",
     year: "numeric"
   }), d = Ae(r), h = e.compare(r) < 0 || e.compare(d) > 0;
   let o = "neutral900";
-  return y ? o = "primary600" : h && (o = "neutral600"), i(de, { as: "td", role: "gridcell", ref: t, "aria-selected": y, ...n, hasRadius: !0, "aria-label": k, tabIndex: y ? 0 : -1, background: y ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: L(n.onPointerDown, (f) => {
-    f.preventDefault(), x(e), u(e), b(P.format(e.toDate(a))), l(!1);
-  }), children: i(B, { variant: "pi", textColor: o, children: E }) });
+  return f ? o = "primary600" : h && (o = "neutral600"), i(de, { as: "td", role: "gridcell", ref: t, "aria-selected": f, ...n, hasRadius: !0, "aria-label": k, tabIndex: f ? 0 : -1, background: f ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: N(n.onPointerDown, (m) => {
+    m.preventDefault(), x(e), u(e), b(E.format(e.toDate(a))), l(!1);
+  }), children: i(B, { variant: "pi", textColor: o, children: P }) });
 }), de = I(W)`
   text-align: center;
   padding: ${7 / 16}rem;
@@ -414,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
 };