@strapi/design-system 0.0.0-3cf3ff39

package/dist/CarouselInput/CarouselImage.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),u=require("styled-components"),n=require("../Typography/utils.cjs"),a=require("../Box/Box.cjs"),c=require("../Tooltip/Tooltip.cjs"),d=e=>e&&e.__esModule?e:{default:e},g=d(u),r=g.default(a.Box)`
+  ${n.ellipsisStyle({ellipsis:!0})}
+`,m=e=>{const[s,o]=l.useState(!1),i=()=>{o(!0)};return s?t.jsx(c.Tooltip,{description:e.alt??"",children:t.jsx(r,{as:"img",height:"100%",...e})}):t.jsx(r,{as:"img",height:"100%",...e,onError:i})};exports.CarouselImage=m;

package/dist/CarouselInput/CarouselImage.js

@@ -0,0 +1,17 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as s } from "react";
+import l from "styled-components";
+import { ellipsisStyle as a } from "../Typography/utils.js";
+import { Box as n } from "../Box/Box.js";
+import { Tooltip as f } from "../Tooltip/Tooltip.js";
+const o = l(n)`
+  ${a({ ellipsis: !0 })}
+`, E = (r) => {
+  const [e, i] = s(!1), m = () => {
+    i(!0);
+  };
+  return e ? t(f, { description: r.alt ?? "", children: t(o, { as: "img", height: "100%", ...r }) }) : t(o, { as: "img", height: "100%", ...r, onError: m });
+};
+export {
+  E as CarouselImage
+};

package/dist/CarouselInput/CarouselInput.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("./Carousel.cjs"),I=require("../hooks/useId.cjs"),g=require("../Field/Field.cjs"),p=require("../Field/FieldLabel.cjs"),L=require("../Field/FieldHint.cjs"),m=require("../Field/FieldError.cjs"),C=require("../Flex/Flex.cjs"),v=({actions:n,children:s,error:t,hint:o,label:r,labelAction:l,nextLabel:d,onNext:u,onPrevious:c,previousLabel:a,required:x,secondaryLabel:F,selectedSlide:q,id:j,...b})=>{const i=I.useId(j);return e.jsx(g.Field,{hint:o,error:t,id:i,required:x,children:e.jsxs(C.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(p.FieldLabel,{action:l,children:r}),e.jsx(h.Carousel,{actions:n,label:r,nextLabel:d,onNext:u,onPrevious:c,previousLabel:a,secondaryLabel:F,selectedSlide:q,id:i,...b,children:s}),e.jsx(L.FieldHint,{}),e.jsx(m.FieldError,{})]})})};exports.CarouselInput=v;

package/dist/CarouselInput/CarouselInput.js

@@ -0,0 +1,15 @@
+import { jsx as r, jsxs as F } from "react/jsx-runtime";
+import { Carousel as I } from "./Carousel.js";
+import { useId as L } from "../hooks/useId.js";
+import { Field as b } from "../Field/Field.js";
+import { FieldLabel as g } from "../Field/FieldLabel.js";
+import { FieldHint as j } from "../Field/FieldHint.js";
+import { FieldError as v } from "../Field/FieldError.js";
+import { Flex as C } from "../Flex/Flex.js";
+const w = ({ actions: i, children: t, error: n, hint: d, label: e, labelAction: m, nextLabel: l, onNext: s, onPrevious: c, previousLabel: p, required: a, secondaryLabel: u, selectedSlide: f, id: h, ...x }) => {
+  const o = L(h);
+  return r(b, { hint: d, error: n, id: o, required: a, children: F(C, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(g, { action: m, children: e }), r(I, { actions: i, label: e, nextLabel: l, onNext: s, onPrevious: c, previousLabel: p, secondaryLabel: u, selectedSlide: f, id: o, ...x, children: t }), r(j, {}), r(v, {})] }) });
+};
+export {
+  w as CarouselInput
+};

package/dist/CarouselInput/CarouselSlide.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../Flex/Flex.cjs"),s=({label:e,children:l,selected:r=!1,...i})=>t.jsx(o.Flex,{display:r?"flex":"none",role:"group","aria-roledescription":"slide","aria-label":e,justifyContent:"center",height:"124px",...i,children:l});exports.CarouselSlide=s;

package/dist/CarouselInput/CarouselSlide.js

@@ -0,0 +1,6 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Flex as t } from "../Flex/Flex.js";
+const s = ({ label: e, children: r, selected: o = !1, ...i }) => l(t, { display: o ? "flex" : "none", role: "group", "aria-roledescription": "slide", "aria-label": e, justifyContent: "center", height: "124px", ...i, children: r });
+export {
+  s as CarouselSlide
+};

package/dist/CarouselInput/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Carousel.cjs"),r=require("./CarouselInput.cjs"),o=require("./CarouselActions.cjs"),u=require("./CarouselImage.cjs"),s=require("./CarouselSlide.cjs");exports.Carousel=e.Carousel;exports.CarouselInput=r.CarouselInput;exports.CarouselActions=o.CarouselActions;exports.CarouselImage=u.CarouselImage;exports.CarouselSlide=s.CarouselSlide;

package/dist/CarouselInput/index.js

@@ -0,0 +1,12 @@
+import { Carousel as e } from "./Carousel.js";
+import { CarouselInput as a } from "./CarouselInput.js";
+import { CarouselActions as m } from "./CarouselActions.js";
+import { CarouselImage as s } from "./CarouselImage.js";
+import { CarouselSlide as f } from "./CarouselSlide.js";
+export {
+  e as Carousel,
+  m as CarouselActions,
+  s as CarouselImage,
+  a as CarouselInput,
+  f as CarouselSlide
+};

package/dist/Checkbox/Checkbox.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("styled-components"),a=require("../hooks/useId.cjs"),u=require("../Field/FieldContext.cjs"),x=require("../Typography/Typography.cjs"),h=require("../Field/Field.cjs"),b=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),p=require("../Field/FieldHint.cjs"),q=require("../Field/FieldError.cjs"),j=require("../BaseCheckbox/BaseCheckbox.cjs"),y=e=>e&&e.__esModule?e:{default:e},F=y(d),g=F.default(x.Typography)`
+  display: flex;
+  align-items: flex-start;
+  * {
+    cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
+  }
+`,C=e=>{const{id:t}=u.useField();return r.jsx(j.BaseCheckbox,{id:t,...e})},k=({children:e,disabled:t=!1,id:l,hint:o,error:n,...c})=>{const i=a.useId(l);let s;return n?s=`${i}-error`:o&&(s=`${i}-hint`),r.jsx(h.Field,{id:i,hint:o,error:n,children:r.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r.jsxs(g,{as:"label",textColor:"neutral800",disabled:t,children:[r.jsx(C,{disabled:t,"aria-describedby":s,...c}),r.jsx(f.Box,{paddingLeft:2,children:e})]}),r.jsx(p.FieldHint,{}),r.jsx(q.FieldError,{})]})})};exports.Checkbox=k;

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import a from "styled-components";
+import { useId as c } from "../hooks/useId.js";
+import { useField as p } from "../Field/FieldContext.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { Field as x } from "../Field/Field.js";
+import { Flex as h } from "../Flex/Flex.js";
+import { Box as b } from "../Box/Box.js";
+import { FieldHint as u } from "../Field/FieldHint.js";
+import { FieldError as g } from "../Field/FieldError.js";
+import { BaseCheckbox as k } from "../BaseCheckbox/BaseCheckbox.js";
+const y = a(f)`
+  display: flex;
+  align-items: flex-start;
+  * {
+    cursor: ${({ disabled: e }) => e ? "not-allowed" : "pointer"};
+  }
+`, C = (e) => {
+  const { id: o } = p();
+  return r(k, { id: o, ...e });
+}, q = ({ children: e, disabled: o = !1, id: s, hint: l, error: m, ...n }) => {
+  const i = c(s);
+  let t;
+  return m ? t = `${i}-error` : l && (t = `${i}-hint`), r(x, { id: i, hint: l, error: m, children: d(h, { direction: "column", alignItems: "stretch", gap: 1, children: [d(y, { as: "label", textColor: "neutral800", disabled: o, children: [r(C, { disabled: o, "aria-describedby": t, ...n }), r(b, { paddingLeft: 2, children: e })] }), r(u, {}), r(g, {})] }) });
+};
+export {
+  q as Checkbox
+};

package/dist/Checkbox/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Checkbox.cjs");exports.Checkbox=e.Checkbox;

package/dist/Checkbox/index.js

@@ -0,0 +1,4 @@
+import { Checkbox as r } from "./Checkbox.js";
+export {
+  r as Checkbox
+};

package/dist/Combobox/Combobox.cjs

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

package/dist/Combobox/Combobox.js

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

package/dist/Combobox/ComboboxList.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");/**
+ * @preserve
+ * @deprecated
+ * This component was deprecated in 1.6.2. It will be removed in the next major release 2.0.0.
+ */const o=({options:t})=>e.jsx(e.Fragment,{children:t});exports.ComboboxList=o;

package/dist/Combobox/ComboboxList.js

@@ -0,0 +1,10 @@
+import { jsx as r, Fragment as t } from "react/jsx-runtime";
+/**
+ * @preserve
+ * @deprecated
+ * This component was deprecated in 1.6.2. It will be removed in the next major release 2.0.0.
+ */
+const m = ({ options: o }) => r(t, { children: o });
+export {
+  m as ComboboxList
+};

package/dist/Combobox/ComboboxOption.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Combobox.cjs"),t=o.Option;exports.ComboboxOption=t;

package/dist/Combobox/ComboboxOption.js

@@ -0,0 +1,5 @@
+import { Option as o } from "./Combobox.js";
+const p = o;
+export {
+  p as ComboboxOption
+};

package/dist/Combobox/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Combobox.cjs"),b=require("./ComboboxOption.cjs");exports.Combobox=o.Combobox;exports.CreatableCombobox=o.CreatableCombobox;exports.ComboboxOption=b.ComboboxOption;

package/dist/Combobox/index.js

@@ -0,0 +1,7 @@
+import { Combobox as m, CreatableCombobox as r } from "./Combobox.js";
+import { ComboboxOption as e } from "./ComboboxOption.js";
+export {
+  m as Combobox,
+  e as ComboboxOption,
+  r as CreatableCombobox
+};

package/dist/DatePicker/DatePicker.cjs

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