@strapi/design-system 1.8.2 → 1.9.0

package/dist/BaseCheckbox/BaseCheckbox.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),b=require("react"),p=require("styled-components"),f=require("./assets/checkmark-black.svg.cjs"),k=require("./assets/checkmark.svg.cjs"),l=require("./utils.cjs"),h=require("../Box/Box.cjs"),g=e=>e&&e.__esModule?e:{default:e};function x(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const s=x(b),m=g(p),$=m.default.input`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),k=require("styled-components"),h=require("./assets/checkmark-black.svg.cjs"),g=require("./assets/checkmark.svg.cjs"),l=require("./utils.cjs"),m=require("../hooks/useComposeRefs.cjs"),x=require("../Box/Box.cjs"),$=e=>e&&e.__esModule?e:{default:e};function y(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const n=y(f),R=$(k),_=R.default.input`
   height: ${l.getCheckboxSize};
   min-width: ${l.getCheckboxSize};
   margin: 0;
@@ -16,7 +16,7 @@
       content: '';
       display: block;
       position: relative;
-      background: url(${k}) no-repeat no-repeat center center;
+      background: url(${g}) no-repeat no-repeat center center;
       width: 10px;
       height: 10px;
       left: 50%;
@@ -25,7 +25,7 @@
     }
 
     &:disabled:after {
-      background: url(${f}) no-repeat no-repeat center center;
+      background: url(${h}) no-repeat no-repeat center center;
     }
   }
 
@@ -59,4 +59,4 @@
       }
     }
   }
-`,i=({indeterminate:e=!1,size:o="M",name:r,value:t=!1,onValueChange:n,...u})=>{const c=s.useRef(null);s.useEffect(()=>{c.current&&e?c.current.indeterminate=e:c.current.indeterminate=!1},[e]);const d=()=>{n&&n(!t)};return a.jsx(h.Box,{children:a.jsx($,{size:o,checked:t,onChange:d,type:"checkbox",ref:c,name:r,...u})})};i.displayName="BaseCheckbox";exports.BaseCheckbox=i;
+`,i=n.forwardRef(({indeterminate:e=!1,size:o="M",name:r,value:t=!1,onValueChange:a,...u},d)=>{const c=n.useRef(null),p=m.useComposedRefs(c,d);n.useEffect(()=>{c.current&&e?c.current.indeterminate=e:c.current.indeterminate=!1},[e]);const b=()=>{a&&a(!t)};return s.jsx(x.Box,{children:s.jsx(_,{size:o,checked:t,onChange:b,type:"checkbox",ref:p,name:r,...u})})});i.displayName="BaseCheckbox";exports.BaseCheckbox=i;

package/dist/BaseCheckbox/BaseCheckbox.js

@@ -1,11 +1,12 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as c from "react";
-import d from "styled-components";
-import p from "./assets/checkmark-black.svg.js";
-import u from "./assets/checkmark.svg.js";
+import { jsx as c } from "react/jsx-runtime";
+import * as e from "react";
+import u from "styled-components";
+import m from "./assets/checkmark-black.svg.js";
+import f from "./assets/checkmark.svg.js";
 import { getCheckboxSize as n } from "./utils.js";
-import { Box as b } from "../Box/Box.js";
-const m = d.input`
+import { useComposedRefs as b } from "../hooks/useComposeRefs.js";
+import { Box as h } from "../Box/Box.js";
+const k = u.input`
   height: ${n};
   min-width: ${n};
   margin: 0;
@@ -23,7 +24,7 @@ const m = d.input`
       content: '';
       display: block;
       position: relative;
-      background: url(${u}) no-repeat no-repeat center center;
+      background: url(${f}) no-repeat no-repeat center center;
       width: 10px;
       height: 10px;
       left: 50%;
@@ -32,7 +33,7 @@ const m = d.input`
     }
 
     &:disabled:after {
-      background: url(${p}) no-repeat no-repeat center center;
+      background: url(${m}) no-repeat no-repeat center center;
     }
   }
 
@@ -66,15 +67,15 @@ const m = d.input`
       }
     }
   }
-`, f = ({ indeterminate: r = !1, size: l = "M", name: s, value: e = !1, onValueChange: t, ...i }) => {
-  const o = c.useRef(null);
-  return c.useEffect(() => {
+`, x = e.forwardRef(({ indeterminate: r = !1, size: l = "M", name: s, value: t = !1, onValueChange: a, ...i }, d) => {
+  const o = e.useRef(null), p = b(o, d);
+  return e.useEffect(() => {
     o.current && r ? o.current.indeterminate = r : o.current.indeterminate = !1;
-  }, [r]), a(b, { children: a(m, { size: l, checked: e, onChange: () => {
-    t && t(!e);
-  }, type: "checkbox", ref: o, name: s, ...i }) });
-};
-f.displayName = "BaseCheckbox";
+  }, [r]), c(h, { children: c(k, { size: l, checked: t, onChange: () => {
+    a && a(!t);
+  }, type: "checkbox", ref: p, name: s, ...i }) });
+});
+x.displayName = "BaseCheckbox";
 export {
-  f as BaseCheckbox
+  x as BaseCheckbox
 };

package/dist/CarouselInput/Carousel.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),_=require("react"),g=require("@strapi/icons"),T=require("styled-components"),x=require("../helpers/keyboardKeys.cjs"),k=require("../Tooltip/Tooltip.cjs"),i=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Icon/Icon.cjs"),w=require("../Typography/Typography.cjs"),A=e=>e&&e.__esModule?e:{default:e};function K(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const s=K(_),p=A(T),B=p.default(i.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("react"),g=require("@strapi/icons"),T=require("styled-components"),x=require("../helpers/keyboardKeys.cjs"),k=require("../Tooltip/Tooltip.cjs"),a=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Icon/Icon.cjs"),A=require("../Typography/Typography.cjs"),K=e=>e&&e.__esModule?e:{default:e};function B(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const i=B(w),p=K(T),D=p.default(a.Box)`
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
-`,D=p.default(j.Flex)`
+`,O=p.default(j.Flex)`
   grid-area: slides;
-`,b=p.default(i.Box)`
+`,b=p.default(a.Box)`
   grid-area: ${({area:e})=>e};
 
   &:focus svg path,
   &:hover svg path {
     fill: ${({theme:e})=>e.colors.neutral900};
   }
-`,O=({actions:e,children:n,label:r,nextLabel:a,onNext:h,onPrevious:f,previousLabel:C,secondaryLabel:l,selectedSlide:m,...R})=>{const c=s.useRef(null),u=s.useRef(null),d=s.Children.map(n,(o,q)=>s.cloneElement(o,{selected:q===m})),v=o=>{switch(o.key){case x.KeyboardKeys.RIGHT:{o.preventDefault(),u?.current&&u.current.focus(),h();break}case x.KeyboardKeys.LEFT:{o.preventDefault(),c?.current&&c.current.focus(),f();break}}};return t.jsx(i.Box,{...R,onKeyDown:v,children:t.jsxs(i.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100",children:[t.jsxs(B,{as:"section","aria-roledescription":"carousel","aria-label":r,display:"grid",position:"relative",children:[d&&d.length>1&&t.jsxs(t.Fragment,{children:[t.jsx(b,{as:"button",onClick:f,area:"startAction",ref:c,"aria-label":C,type:"button",children:t.jsx(y.Icon,{as:g.ChevronLeft,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})}),t.jsx(b,{as:"button",onClick:h,area:"endAction",ref:u,"aria-label":a,type:"button",children:t.jsx(y.Icon,{as:g.ChevronRight,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})})]}),t.jsx(D,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden",children:d}),e]}),l&&t.jsx(i.Box,{paddingTop:2,paddingLeft:4,paddingRight:4,children:t.jsx(k.Tooltip,{label:l,children:t.jsx(j.Flex,{justifyContent:"center",children:t.jsx(w.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0,children:l})})})})]})})};exports.Carousel=O;
+`,F=i.forwardRef(({actions:e,children:n,label:r,nextLabel:s,onNext:f,onPrevious:h,previousLabel:C,secondaryLabel:l,selectedSlide:R,...m},v)=>{const c=i.useRef(null),u=i.useRef(null),d=i.Children.map(n,(o,_)=>i.cloneElement(o,{selected:_===R})),q=o=>{switch(o.key){case x.KeyboardKeys.RIGHT:{o.preventDefault(),u?.current&&u.current.focus(),f();break}case x.KeyboardKeys.LEFT:{o.preventDefault(),c?.current&&c.current.focus(),h();break}}};return t.jsx(a.Box,{ref:v,...m,onKeyDown:q,children:t.jsxs(a.Box,{padding:2,borderColor:"neutral200",hasRadius:!0,background:"neutral100",children:[t.jsxs(D,{as:"section","aria-roledescription":"carousel","aria-label":r,display:"grid",position:"relative",children:[d&&d.length>1&&t.jsxs(t.Fragment,{children:[t.jsx(b,{as:"button",onClick:h,area:"startAction",ref:c,"aria-label":C,type:"button",children:t.jsx(y.Icon,{as:g.ChevronLeft,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})}),t.jsx(b,{as:"button",onClick:f,area:"endAction",ref:u,"aria-label":s,type:"button",children:t.jsx(y.Icon,{as:g.ChevronRight,"aria-hidden":!0,width:"6px",height:"10px",color:"neutral600"})})]}),t.jsx(O,{"aria-live":"polite",paddingLeft:2,paddingRight:2,width:"100%",overflow:"hidden",children:d}),e]}),l&&t.jsx(a.Box,{paddingTop:2,paddingLeft:4,paddingRight:4,children:t.jsx(k.Tooltip,{label:l,children:t.jsx(j.Flex,{justifyContent:"center",children:t.jsx(A.Typography,{variant:"pi",textColor:"neutral600",ellipsis:!0,children:l})})})})]})})});exports.Carousel=F;

package/dist/CarouselInput/Carousel.js

@@ -1,17 +1,17 @@
-import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
+import { jsx as e, jsxs as s, Fragment as k } from "react/jsx-runtime";
 import * as o from "react";
-import { ChevronLeft as k, ChevronRight as D } from "@strapi/icons";
+import { ChevronLeft as D, ChevronRight as K } from "@strapi/icons";
 import c from "styled-components";
 import { KeyboardKeys as h } from "../helpers/keyboardKeys.js";
-import { Tooltip as K } from "../Tooltip/Tooltip.js";
+import { Tooltip as T } from "../Tooltip/Tooltip.js";
 import { Box as i } from "../Box/Box.js";
 import { Flex as g } from "../Flex/Flex.js";
 import { Icon as f } from "../Icon/Icon.js";
-import { Typography as T } from "../Typography/Typography.js";
-const j = c(i)`
+import { Typography as j } from "../Typography/Typography.js";
+const F = c(i)`
   grid-template-columns: auto 1fr auto;
   grid-template-areas: 'startAction slides endAction';
-`, F = c(g)`
+`, E = c(g)`
   grid-area: slides;
 `, m = c(i)`
   grid-area: ${({ area: r }) => r};
@@ -20,21 +20,21 @@ const j = c(i)`
   &:hover svg path {
     fill: ${({ theme: r }) => r.colors.neutral900};
   }
-`, J = ({ actions: r, children: y, label: C, nextLabel: b, onNext: p, onPrevious: u, previousLabel: x, secondaryLabel: n, selectedSlide: R, ...v }) => {
-  const a = o.useRef(null), l = o.useRef(null), d = o.Children.map(y, (t, w) => o.cloneElement(t, { selected: w === R }));
-  return e(i, { ...v, onKeyDown: (t) => {
+`, M = o.forwardRef(({ actions: r, children: y, label: C, nextLabel: b, onNext: p, onPrevious: u, previousLabel: R, secondaryLabel: a, selectedSlide: x, ...v }, w) => {
+  const n = o.useRef(null), l = o.useRef(null), d = o.Children.map(y, (t, A) => o.cloneElement(t, { selected: A === x }));
+  return e(i, { ref: w, ...v, onKeyDown: (t) => {
     switch (t.key) {
       case h.RIGHT: {
         t.preventDefault(), l?.current && l.current.focus(), p();
         break;
       }
       case h.LEFT: {
-        t.preventDefault(), a?.current && a.current.focus(), u();
+        t.preventDefault(), n?.current && n.current.focus(), u();
         break;
       }
     }
-  }, children: s(i, { padding: 2, borderColor: "neutral200", hasRadius: !0, background: "neutral100", children: [s(j, { as: "section", "aria-roledescription": "carousel", "aria-label": C, display: "grid", position: "relative", children: [d && d.length > 1 && s(A, { children: [e(m, { as: "button", onClick: u, area: "startAction", ref: a, "aria-label": x, type: "button", children: e(f, { as: k, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) }), e(m, { as: "button", onClick: p, area: "endAction", ref: l, "aria-label": b, type: "button", children: e(f, { as: D, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) })] }), e(F, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: d }), r] }), n && e(i, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: e(K, { label: n, children: e(g, { justifyContent: "center", children: e(T, { variant: "pi", textColor: "neutral600", ellipsis: !0, children: n }) }) }) })] }) });
-};
+  }, children: s(i, { padding: 2, borderColor: "neutral200", hasRadius: !0, background: "neutral100", children: [s(F, { as: "section", "aria-roledescription": "carousel", "aria-label": C, display: "grid", position: "relative", children: [d && d.length > 1 && s(k, { children: [e(m, { as: "button", onClick: u, area: "startAction", ref: n, "aria-label": R, type: "button", children: e(f, { as: D, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) }), e(m, { as: "button", onClick: p, area: "endAction", ref: l, "aria-label": b, type: "button", children: e(f, { as: K, "aria-hidden": !0, width: "6px", height: "10px", color: "neutral600" }) })] }), e(E, { "aria-live": "polite", paddingLeft: 2, paddingRight: 2, width: "100%", overflow: "hidden", children: d }), r] }), a && e(i, { paddingTop: 2, paddingLeft: 4, paddingRight: 4, children: e(T, { label: a, children: e(g, { justifyContent: "center", children: e(j, { variant: "pi", textColor: "neutral600", ellipsis: !0, children: a }) }) }) })] }) });
+});
 export {
-  J as Carousel
+  M as Carousel
 };

package/dist/CarouselInput/CarouselInput.cjs

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

package/dist/CarouselInput/CarouselInput.js

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

package/dist/Checkbox/Checkbox.cjs

@@ -1,7 +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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("react"),f=require("styled-components"),x=require("../hooks/useId.cjs"),b=require("../Field/FieldContext.cjs"),p=require("../Typography/Typography.cjs"),g=require("../BaseCheckbox/BaseCheckbox.cjs"),h=require("../Field/Field.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Box/Box.cjs"),q=require("../Field/FieldHint.cjs"),F=require("../Field/FieldError.cjs"),_=e=>e&&e.__esModule?e:{default:e};function m(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,i.get?i:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const l=m(u),k=_(f),C=k.default(p.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;
+`,O=l.forwardRef((e,r)=>{const{id:t}=b.useField();return o.jsx(g.BaseCheckbox,{ref:r,id:t,...e})}),R=l.forwardRef(({children:e,disabled:r=!1,id:t,hint:i,error:c,...d},a)=>{const n=x.useId(t);let s;return c?s=`${n}-error`:i&&(s=`${n}-hint`),o.jsx(h.Field,{id:n,hint:i,error:c,children:o.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsxs(C,{as:"label",textColor:"neutral800",disabled:r,children:[o.jsx(O,{ref:a,disabled:r,"aria-describedby":s,...d}),o.jsx(y.Box,{paddingLeft:2,children:e})]}),o.jsx(q.FieldHint,{}),o.jsx(F.FieldError,{})]})})});exports.Checkbox=R;

package/dist/Checkbox/Checkbox.js

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

package/dist/Combobox/Combobox.cjs

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

package/dist/Combobox/Combobox.js

@@ -1,65 +1,66 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as m from "react";
-import { Cross as me, CarretDown as ge } from "@strapi/icons";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import * as u from "react";
+import { Cross as be, CarretDown as $e } 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 { stripReactIdOfColon as Ce } from "../helpers/strings.js";
+import { useComposedRefs as xe } from "../hooks/useComposeRefs.js";
+import { useControllableState as w } from "../hooks/useControllableState.js";
+import { useId as R } from "../hooks/useId.js";
+import { useIntersection as Ie } from "../hooks/useIntersection.js";
+import { Loader as we } from "../Loader/Loader.js";
+import { getThemeSize as Re, inputFocusStyle as ve } from "../themes/utils.js";
 import { Flex as g } from "../Flex/Flex.js";
-import { Field as we } from "../Field/Field.js";
-import { FieldLabel as Re } from "../Field/FieldLabel.js";
-import { FieldHint as ve } from "../Field/FieldHint.js";
-import { FieldError as ye } from "../Field/FieldError.js";
-const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, clearLabel: s = "clear", creatable: i = !1, createMessage: b = (f) => `Create "${f}"`, defaultFilterValue: p, defaultTextValue: y, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: $ = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: V, isPrintableCharacter: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: T, onClear: x, onCreateOption: F, onFilterValueChange: Q, onInputChange: O, onTextValueChange: X, onLoadMore: z, placeholder: Y = "Select or enter a value", required: Z = !1, size: _ = "M", startIcon: B, textValue: ee, value: P, ...re }) => {
-  const [f, oe] = I({
+import { Box as v } from "../Box/Box.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { Field as ye } from "../Field/Field.js";
+import { FieldLabel as ke } from "../Field/FieldLabel.js";
+import { FieldHint as Te } from "../Field/FieldHint.js";
+import { FieldError as Ve } from "../Field/FieldError.js";
+const Fe = u.forwardRef(({ allowCustomValue: e, autocomplete: o, children: h, className: a, clearLabel: s = "clear", creatable: i = !1, createMessage: b = (m) => `Create "${m}"`, defaultFilterValue: $, defaultTextValue: p, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: C = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: T, isPrintableCharacter: J, loading: x = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: V, onClear: I, 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 }, oe) => {
+  const [m, te] = w({
     prop: L,
     defaultProp: W,
     onChange: U
-  }), [d, S] = I({
+  }), [d, S] = w({
     prop: ee,
-    defaultProp: e && !y ? P : y,
+    defaultProp: e && !p ? P : p,
     onChange: X
-  }), [te, j] = I({
+  }), [ne, j] = w({
     prop: A,
-    defaultProp: p,
+    defaultProp: $,
     onChange: Q
-  }), E = m.useRef(null), q = m.useRef(null), ne = m.useRef(null), ie = (t) => {
-    x && !$ && (S(""), j(""), x(t), q.current.focus());
-  }, le = (t) => {
-    oe(t);
-  }, ae = (t) => {
-    S(t);
+  }), E = u.useRef(null), q = u.useRef(null), ie = xe(q, oe), le = u.useRef(null), ae = (t) => {
+    I && !C && (S(""), j(""), I(t), q.current.focus());
   }, se = (t) => {
-    j(t);
+    te(t);
   }, de = (t) => {
-    O && O(t);
+    S(t);
   }, ce = (t) => {
-    T && T(t);
+    j(t);
   }, ue = (t) => {
-    z && G && !C && z(t);
+    O && O(t);
+  }, he = (t) => {
+    V && V(t);
+  }, pe = (t) => {
+    z && G && !x && z(t);
   }, N = () => {
     F && d && F(d);
-  }, D = w(V), he = w(), H = `intersection-${be(he)}`;
-  $e(E, ue, {
+  }, D = R(T), fe = R(), H = `intersection-${Ce(fe)}`;
+  Ie(E, pe, {
     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: !f
+    skipWhen: !m
   });
-  const pe = `${D}-hint`, fe = `${D}-error`;
-  return c(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: le, open: f, onTextValueChange: ae, textValue: d, allowCustomValue: i || e, disabled: $, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [c(Fe, { $hasError: !!k, $size: _, className: a, children: [c(g, { flex: "1", as: "span", gap: 3, children: [B ? r(R, { as: "span", "aria-hidden": !0, children: B }) : null, r(Oe, { placeholder: Y, id: V, "aria-invalid": !!k, "aria-describedby": `${pe} ${fe}`, onChange: de, ref: q, ...re })] }), c(g, { as: "span", gap: 3, children: [d && x ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": $, "aria-label": s, title: s, ref: ne, children: r(me, {}) }) : null, r(ze, { children: r(ge, {}) })] })] }), r(n.Portal, { children: r(Be, { sideOffset: 4, children: c(Pe, { ref: E, children: [u, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(v, { children: r(h, { children: b(d ?? "") }) }) }) : null, !i && !C ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(d ?? "") }) }) }) : null, C ? r(g, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(Ie, { small: !0, children: K }) }) : null, r(R, { id: H, width: "100%", height: "1px" })] }) }) })] });
-}, Ve = ({ error: e, hint: o, id: u, label: a, labelAction: s, required: i = !1, ...b }) => {
-  const p = w(u);
-  return r(we, { hint: o, error: e, id: p, required: i, children: c(g, { direction: "column", alignItems: "stretch", gap: 1, children: [a ? r(Re, { action: s, children: a }) : null, r(ke, { id: p, error: e, required: i, ...b }), r(ve, {}), r(ye, {})] }) });
-}, Ye = (e) => r(Ve, { ...e, creatable: !0 }), Te = l(R)`
+  const me = `${D}-hint`, ge = `${D}-error`;
+  return c(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: se, open: m, onTextValueChange: de, textValue: d, allowCustomValue: i || e, disabled: C, required: Z, value: P, onValueChange: he, filterValue: ne, onFilterValueChange: ce, isPrintableCharacter: J, children: [c(Be, { $hasError: !!k, $size: _, className: a, children: [c(g, { flex: "1", as: "span", gap: 3, children: [B ? r(v, { as: "span", "aria-hidden": !0, children: B }) : null, r(Pe, { placeholder: Y, id: T, "aria-invalid": !!k, "aria-describedby": `${me} ${ge}`, onChange: ue, ref: ie, ...re })] }), c(g, { as: "span", gap: 3, children: [d && I ? r(ze, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ae, "aria-disabled": C, "aria-label": s, title: s, ref: le, children: r(be, {}) }) : null, r(Se, { children: r($e, {}) })] })] }), r(n.Portal, { children: r(je, { sideOffset: 4, children: c(Ee, { ref: E, children: [h, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(y, { children: r(f, { children: b(d ?? "") }) }) }) : null, !i && !x ? r(n.NoValueFound, { asChild: !0, children: r(y, { $hasHover: !1, children: r(f, { children: M(d ?? "") }) }) }) : null, x ? r(g, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(we, { small: !0, children: K }) }) : null, r(v, { id: H, width: "100%", height: "1px" })] }) }) })] });
+}), Oe = u.forwardRef(({ error: e, hint: o, id: h, label: a, labelAction: s, required: i = !1, ...b }, $) => {
+  const p = R(h);
+  return r(ye, { hint: o, error: e, id: p, required: i, children: c(g, { direction: "column", alignItems: "stretch", gap: 1, children: [a ? r(ke, { action: s, children: a }) : null, r(Fe, { ref: $, id: p, error: e, required: i, ...b }), r(Te, {}), r(Ve, {})] }) });
+}), rr = (e) => r(Oe, { ...e, creatable: !0 }), ze = l(v)`
   border: none;
 
   svg {
@@ -70,7 +71,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   svg path {
     fill: ${({ theme: e }) => e.colors.neutral600};
   }
-`, Fe = l(n.Trigger)`
+`, Be = 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]};
@@ -82,7 +83,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   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 })};
+  min-height: ${({ theme: e, $size: o }) => Re("input")({ theme: e, size: o })};
 
   &[data-disabled] {
     color: ${({ theme: e }) => e.colors.neutral600};
@@ -95,8 +96,8 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
     outline: none;
   }
 
-  ${({ theme: e, $hasError: o }) => xe()({ theme: e, hasError: o })};
-`, Oe = l(n.TextInput)`
+  ${({ theme: e, $hasError: o }) => ve()({ theme: e, hasError: o })};
+`, Pe = l(n.TextInput)`
   width: 100%;
   font-size: ${14 / 16}rem;
   color: ${({ theme: e }) => e.colors.neutral800};
@@ -111,7 +112,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, ze = l(n.Icon)`
+`, Se = l(n.Icon)`
   & > svg {
     width: ${6 / 16}rem;
 
@@ -123,7 +124,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   &[aria-disabled='true'] {
     cursor: inherit;
   }
-`, Be = l(n.Content)`
+`, je = l(n.Content)`
   background: ${({ theme: e }) => e.colors.neutral0};
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
@@ -132,9 +133,9 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({ theme: e }) => e.zIndices[1]};
-`, Pe = l(n.Viewport)`
+`, Ee = l(n.Viewport)`
   padding: ${({ theme: e }) => e.spaces[1]};
-`, Ze = m.forwardRef(({ children: e, value: o, disabled: u, textValue: a, ...s }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: u, textValue: a, children: r(v, { ref: i, ...s, children: r(n.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), v = l.div`
+`, or = u.forwardRef(({ children: e, value: o, disabled: h, textValue: a, ...s }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: h, textValue: a, children: r(y, { ref: i, ...s, children: r(n.ItemText, { asChild: !0, children: r(f, { children: e }) }) }) })), y = l.div`
   width: 100%;
   border: none;
   text-align: left;
@@ -147,7 +148,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   &[data-state='checked'] {
     background-color: ${({ theme: e }) => e.colors.primary100};
 
-    ${h} {
+    ${f} {
       color: ${({ theme: e }) => e.colors.primary600};
       font-weight: bold;
     }
@@ -160,16 +161,16 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, c
   }
 
   &[data-highlighted] {
-    ${h} {
+    ${f} {
       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
+  Oe as Combobox,
+  Fe as ComboboxInput,
+  rr as CreatableCombobox,
+  or as Option,
+  y as OptionBox
 };