@strapi/design-system 1.7.10 → 1.8.0

package/dist/DesignSystemProvider.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as i } from "./helpers/context.js";
+import { ThemeProvider as a } from "./ThemeProvider/ThemeProvider.js";
+const r = "en-EN", t = () => typeof navigator > "u" ? r : navigator.language ? navigator.language : r, [s, l] = i("StrapiDesignSystem", {
+  locale: t()
+}), u = ({ locale: o = t(), ...n }) => e(s, { locale: o, children: e(a, { ...n }) });
+export {
+  u as DesignSystemProvider,
+  l as useDesignSystem
+};

package/dist/NumberInput/NumberInput.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),x=require("@internationalized/number"),g=require("@strapi/icons"),v=require("styled-components"),M=require("../helpers/getDefaultLocale.cjs"),h=require("../helpers/keyboardKeys.cjs"),B=require("../hooks/useControllableState.cjs"),E=require("../hooks/useId.cjs"),U=require("../Field/Field.cjs"),H=require("../Flex/Flex.cjs"),O=require("../Field/FieldLabel.cjs"),T=require("../Field/FieldInput.cjs"),N=require("../Icon/Icon.cjs"),z=require("../Field/FieldHint.cjs"),W=require("../Field/FieldError.cjs"),q=r=>r&&r.__esModule?r:{default:r},X=q(l),Y=q(v),y=Y.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),x=require("@internationalized/number"),g=require("@strapi/icons"),M=require("styled-components"),B=require("../DesignSystemProvider.cjs"),h=require("../helpers/keyboardKeys.cjs"),E=require("../hooks/useControllableState.cjs"),U=require("../hooks/useId.cjs"),H=require("../Field/FieldInput.cjs"),O=require("../Field/Field.cjs"),T=require("../Flex/Flex.cjs"),z=require("../Field/FieldLabel.cjs"),y=require("../Icon/Icon.cjs"),W=require("../Field/FieldHint.cjs"),X=require("../Field/FieldError.cjs"),I=r=>r&&r.__esModule?r:{default:r},Y=I(l),G=I(M),N=G.default.button`
   display: flex;
   height: 1rem;
   align-items: ${({reverse:r})=>r?"flex-end":"flex-start"};
@@ -9,4 +9,4 @@
     height: ${4/16}rem;
     transform: ${({reverse:r})=>r?"rotateX(180deg)":void 0};
   }
-`,G="",J=X.default.forwardRef(({size:r="M",startAction:I,name:F,hint:w,error:j,label:d,labelAction:D,locale:V,id:C,onValueChange:A,value:f,step:a=1,required:R=!1,disabled:u=!1,..._},k)=>{const K=E.useId(C),m=V||M.getDefaultLocale(),i=l.useRef(new x.NumberParser(m,{style:"decimal"})),c=l.useRef(new x.NumberFormatter(m,{maximumFractionDigits:20})),[o,S]=B.useControllableState({prop(e){const n=String(f);return isNaN(Number(n))||n!==e&&e!==""?e:c.current.format(Number(f))},defaultProp:G,onChange(e){const n=i.current.parse(e??"");A(isNaN(n)?void 0:n)}}),s=e=>{S(String(e))},L=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&s(e)},b=()=>{if(!o){s(a);return}const e=i.current.parse(o),n=isNaN(e)?a:e+a;s(c.current.format(n))},p=()=>{if(!o){s(-a);return}const e=i.current.parse(o),n=isNaN(e)?-a:e-a;s(c.current.format(n))},P=e=>{if(!u)switch(e.key){case h.KeyboardKeys.DOWN:{e.preventDefault(),p();break}case h.KeyboardKeys.UP:{e.preventDefault(),b();break}}},$=()=>{if(o){const e=i.current.parse(o),n=isNaN(e)?"":c.current.format(e);s(n)}};return t.jsx(U.Field,{name:F,hint:w,error:j,id:K,required:R,children:t.jsxs(H.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[d&&t.jsx(O.FieldLabel,{action:D,children:d}),t.jsx(T.FieldInput,{ref:k,startAction:I,disabled:u,type:"text",inputMode:"decimal",onChange:L,onKeyDown:P,onBlur:$,value:o,size:r,endAction:t.jsxs(t.Fragment,{children:[t.jsx(y,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:b,tabIndex:-1,type:"button","data-testid":"ArrowUp",children:t.jsx(N.Icon,{as:g.CarretDown,color:"neutral500"})}),t.jsx(y,{disabled:u,"aria-hidden":!0,onClick:p,tabIndex:-1,type:"button","data-testid":"ArrowDown",children:t.jsx(N.Icon,{as:g.CarretDown,color:"neutral500"})})]}),..._}),t.jsx(z.FieldHint,{}),t.jsx(W.FieldError,{})]})})});exports.NumberInput=J;
+`,J="",Q=Y.default.forwardRef(({size:r="M",startAction:q,name:F,hint:w,error:j,label:d,labelAction:D,locale:C,id:V,onValueChange:S,value:m,step:o=1,required:A=!1,disabled:u=!1,...R},_)=>{const k=U.useId(V),K=B.useDesignSystem("NumberInput"),f=C||K.locale,i=l.useRef(new x.NumberParser(f,{style:"decimal"})),c=l.useRef(new x.NumberFormatter(f,{maximumFractionDigits:20})),[s,P]=E.useControllableState({prop(e){const n=String(m);return isNaN(Number(n))||n!==e&&e!==""?e:c.current.format(Number(m))},defaultProp:J,onChange(e){const n=i.current.parse(e??"");S(isNaN(n)?void 0:n)}}),a=e=>{P(String(e))},v=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&a(e)},b=()=>{if(!s){a(o);return}const e=i.current.parse(s),n=isNaN(e)?o:e+o;a(c.current.format(n))},p=()=>{if(!s){a(-o);return}const e=i.current.parse(s),n=isNaN(e)?-o:e-o;a(c.current.format(n))},$=e=>{if(!u)switch(e.key){case h.KeyboardKeys.DOWN:{e.preventDefault(),p();break}case h.KeyboardKeys.UP:{e.preventDefault(),b();break}}},L=()=>{if(s){const e=i.current.parse(s),n=isNaN(e)?"":c.current.format(e);a(n)}};return t.jsx(O.Field,{name:F,hint:w,error:j,id:k,required:A,children:t.jsxs(T.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[d&&t.jsx(z.FieldLabel,{action:D,children:d}),t.jsx(H.FieldInput,{ref:_,startAction:q,disabled:u,type:"text",inputMode:"decimal",onChange:v,onKeyDown:$,onBlur:L,value:s,size:r,endAction:t.jsxs(t.Fragment,{children:[t.jsx(N,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:b,tabIndex:-1,type:"button","data-testid":"ArrowUp",children:t.jsx(y.Icon,{as:g.CarretDown,color:"neutral500"})}),t.jsx(N,{disabled:u,"aria-hidden":!0,onClick:p,tabIndex:-1,type:"button","data-testid":"ArrowDown",children:t.jsx(y.Icon,{as:g.CarretDown,color:"neutral500"})})]}),...R}),t.jsx(W.FieldHint,{}),t.jsx(X.FieldError,{})]})})});exports.NumberInput=Q;

package/dist/NumberInput/NumberInput.js

@@ -1,20 +1,20 @@
-import { jsx as n, jsxs as h, Fragment as U } from "react/jsx-runtime";
-import _, { useRef as b } from "react";
-import { NumberParser as j, NumberFormatter as E } from "@internationalized/number";
+import { jsx as n, jsxs as h, Fragment as _ } from "react/jsx-runtime";
+import j, { useRef as b } from "react";
+import { NumberParser as E, NumberFormatter as M } from "@internationalized/number";
 import { CarretDown as N } from "@strapi/icons";
-import M from "styled-components";
-import { getDefaultLocale as q } from "../helpers/getDefaultLocale.js";
+import q from "styled-components";
+import { useDesignSystem as z } from "../DesignSystemProvider.js";
 import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
-import { useControllableState as z } from "../hooks/useControllableState.js";
-import { useId as H } from "../hooks/useId.js";
-import { Field as O } from "../Field/Field.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { FieldLabel as W } from "../Field/FieldLabel.js";
-import { FieldInput as X } from "../Field/FieldInput.js";
+import { useControllableState as H } from "../hooks/useControllableState.js";
+import { useId as O } from "../hooks/useId.js";
+import { FieldInput as T } from "../Field/FieldInput.js";
+import { Field as W } from "../Field/Field.js";
+import { Flex as X } from "../Flex/Flex.js";
+import { FieldLabel as Y } from "../Field/FieldLabel.js";
 import { Icon as w } from "../Icon/Icon.js";
-import { FieldHint as Y } from "../Field/FieldHint.js";
-import { FieldError as G } from "../Field/FieldError.js";
-const x = M.button`
+import { FieldHint as G } from "../Field/FieldHint.js";
+import { FieldError as J } from "../Field/FieldError.js";
+const x = q.button`
   display: flex;
   height: 1rem;
   align-items: ${({ reverse: t }) => t ? "flex-end" : "flex-start"};
@@ -25,55 +25,55 @@ const x = M.button`
     height: ${4 / 16}rem;
     transform: ${({ reverse: t }) => t ? "rotateX(180deg)" : void 0};
   }
-`, J = "", pr = _.forwardRef(({ size: t = "M", startAction: y, name: I, hint: F, error: V, label: c, labelAction: D, locale: A, id: C, onValueChange: k, value: d, step: a = 1, required: P = !1, disabled: m = !1, ...R }, $) => {
-  const K = H(C), u = A || q(), s = b(new j(u, { style: "decimal" })), l = b(new E(u, { maximumFractionDigits: 20 })), [o, L] = z({
-    prop(r) {
-      const e = String(d);
-      return isNaN(Number(e)) || e !== r && r !== "" ? r : l.current.format(Number(d));
+`, Q = "", he = j.forwardRef(({ size: t = "M", startAction: y, name: I, hint: F, error: V, label: c, labelAction: D, locale: A, id: C, onValueChange: k, value: u, step: a = 1, required: P = !1, disabled: m = !1, ...R }, S) => {
+  const $ = O(C), K = z("NumberInput"), d = A || K.locale, s = b(new E(d, { style: "decimal" })), l = b(new M(d, { maximumFractionDigits: 20 })), [o, v] = H({
+    prop(e) {
+      const r = String(u);
+      return isNaN(Number(r)) || r !== e && e !== "" ? e : l.current.format(Number(u));
     },
-    defaultProp: J,
-    onChange(r) {
-      const e = s.current.parse(r ?? "");
-      k(isNaN(e) ? void 0 : e);
+    defaultProp: Q,
+    onChange(e) {
+      const r = s.current.parse(e ?? "");
+      k(isNaN(r) ? void 0 : r);
     }
-  }), i = (r) => {
-    L(String(r));
-  }, S = ({ target: { value: r } }) => {
-    s.current.isValidPartialNumber(r) && i(r);
+  }), i = (e) => {
+    v(String(e));
+  }, B = ({ target: { value: e } }) => {
+    s.current.isValidPartialNumber(e) && i(e);
   }, f = () => {
     if (!o) {
       i(a);
       return;
     }
-    const r = s.current.parse(o), e = isNaN(r) ? a : r + a;
-    i(l.current.format(e));
+    const e = s.current.parse(o), r = isNaN(e) ? a : e + a;
+    i(l.current.format(r));
   }, p = () => {
     if (!o) {
       i(-a);
       return;
     }
-    const r = s.current.parse(o), e = isNaN(r) ? -a : r - a;
-    i(l.current.format(e));
-  }, v = (r) => {
+    const e = s.current.parse(o), r = isNaN(e) ? -a : e - a;
+    i(l.current.format(r));
+  }, L = (e) => {
     if (!m)
-      switch (r.key) {
+      switch (e.key) {
         case g.DOWN: {
-          r.preventDefault(), p();
+          e.preventDefault(), p();
           break;
         }
         case g.UP: {
-          r.preventDefault(), f();
+          e.preventDefault(), f();
           break;
         }
       }
-  }, B = () => {
+  }, U = () => {
     if (o) {
-      const r = s.current.parse(o), e = isNaN(r) ? "" : l.current.format(r);
-      i(e);
+      const e = s.current.parse(o), r = isNaN(e) ? "" : l.current.format(e);
+      i(r);
     }
   };
-  return n(O, { name: I, hint: F, error: V, id: K, required: P, children: h(T, { direction: "column", alignItems: "stretch", gap: 1, children: [c && n(W, { action: D, children: c }), n(X, { ref: $, startAction: y, disabled: m, type: "text", inputMode: "decimal", onChange: S, onKeyDown: v, onBlur: B, value: o, size: t, endAction: h(U, { children: [n(x, { disabled: m, "aria-hidden": !0, reverse: !0, onClick: f, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: n(w, { as: N, color: "neutral500" }) }), n(x, { disabled: m, "aria-hidden": !0, onClick: p, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: n(w, { as: N, color: "neutral500" }) })] }), ...R }), n(Y, {}), n(G, {})] }) });
+  return n(W, { name: I, hint: F, error: V, id: $, required: P, children: h(X, { direction: "column", alignItems: "stretch", gap: 1, children: [c && n(Y, { action: D, children: c }), n(T, { ref: S, startAction: y, disabled: m, type: "text", inputMode: "decimal", onChange: B, onKeyDown: L, onBlur: U, value: o, size: t, endAction: h(_, { children: [n(x, { disabled: m, "aria-hidden": !0, reverse: !0, onClick: f, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: n(w, { as: N, color: "neutral500" }) }), n(x, { disabled: m, "aria-hidden": !0, onClick: p, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: n(w, { as: N, color: "neutral500" }) })] }), ...R }), n(G, {}), n(J, {})] }) });
 });
 export {
-  pr as NumberInput
+  he as NumberInput
 };

package/dist/Popover/Popover.cjs

@@ -1,9 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),F=require("react"),u=require("@floating-ui/react-dom"),M=require("@radix-ui/react-focus-scope"),m=require("@strapi/ui-primitives"),z=require("aria-hidden"),T=require("react-remove-scroll"),W=require("styled-components"),A=require("../DismissibleLayer/index.cjs"),P=require("../helpers/strings.cjs"),B=require("../hooks/useComposeRefs.cjs"),H=require("../hooks/useId.cjs"),K=require("../hooks/useIntersection.cjs"),g=require("../Box/Box.cjs"),N=require("../Portal/Portal.cjs"),U=e=>e&&e.__esModule?e:{default:e};function V(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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const i=V(F),E=U(W),Z=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],G=E.default(g.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),M=require("react"),u=require("@floating-ui/react-dom"),z=require("@radix-ui/react-focus-scope"),m=require("@strapi/ui-primitives"),T=require("aria-hidden"),W=require("react-remove-scroll"),A=require("styled-components"),B=require("../DismissibleLayer/index.cjs"),P=require("../helpers/strings.cjs"),H=require("../hooks/useComposeRefs.cjs"),K=require("../hooks/useId.cjs"),N=require("../hooks/useIntersection.cjs"),g=require("../Box/Box.cjs"),U=require("../Portal/Portal.cjs"),V=e=>e&&e.__esModule?e:{default:e};function Z(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 n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=Z(M),R=V(A),G=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],J=R.default(g.Box)`
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   z-index: ${({theme:e})=>e.zIndices[0]};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
-  background: ${({theme:e})=>e.colors.neutral0};
-`,R=({source:e,children:r,spacing:t=0,fullWidth:n=!1,placement:c="bottom-start",centered:l=!1,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,onFocusOutside:p,...O})=>{const[h,k]=i.useState(null),v=i.useRef(!1),[S,j]=i.useState(void 0),{x:q,y:C,reference:w,floating:D,strategy:_}=u.useFloating({strategy:"fixed",placement:l?"bottom":c,middleware:[u.offset({mainAxis:t}),u.shift(),u.flip()],whileElementsMounted:u.autoUpdate});i.useLayoutEffect(()=>{w(e.current)},[e,w]),i.useLayoutEffect(()=>{n&&j(e.current.offsetWidth)},[n,e]),i.useEffect(()=>{if(h)return z.hideOthers(h)},[h]);const x=m.useCallbackRef(a);i.useEffect(()=>{const o=()=>{x()};return window.addEventListener("blur",o),window.addEventListener("resize",o),()=>{window.removeEventListener("blur",o),window.removeEventListener("resize",o)}},[x]);const L=B.useComposedRefs(o=>k(o),D);return s.jsx(T.RemoveScroll,{allowPinchZoom:!0,children:s.jsx(M.FocusScope,{asChild:!0,loop:!0,trapped:!0,onUnmountAutoFocus:o=>{o.preventDefault(),v.current||e.current?.focus({preventScroll:!0})},children:s.jsx(A.DismissibleLayer,{asChild:!0,disableOutsidePointerEvents:!0,onEscapeKeyDown:d,onPointerDownOutside:m.composeEventHandlers(f,o=>{const b=o.detail.originalEvent,$=b.button===0&&b.ctrlKey===!0,I=b.button===2||$;v.current=I},{checkForDefaultPrevented:!1}),onFocusOutside:m.composeEventHandlers(p,o=>o.preventDefault(),{checkForDefaultPrevented:!1}),onDismiss:a,children:s.jsx(G,{ref:L,style:{left:q,top:C,position:_,width:S||void 0},hasRadius:!0,background:"neutral0",padding:1,...O,children:r})})})})},y=({children:e,intersectionId:r,onReachEnd:t,...n})=>{const c=i.useRef(null),l=H.useId();return K.useIntersection(c,t??(()=>{}),{selectorToWatch:`#${P.stripReactIdOfColon(l)}`,skipWhen:!r||!t}),s.jsxs(J,{ref:c,...n,children:[e,r&&t&&s.jsx(g.Box,{id:P.stripReactIdOfColon(l),width:"100%",height:"1px"})]})},J=E.default(g.Box)`
+`,E=s.forwardRef(({source:e,children:r,spacing:t=0,fullWidth:n=!1,placement:c="bottom-start",centered:l=!1,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,onFocusOutside:p,...O},S)=>{const[h,k]=s.useState(null),[j,q]=s.useState(void 0),w=s.useRef(!1),{x:C,y:D,reference:v,floating:_,strategy:L}=u.useFloating({strategy:"fixed",placement:l?"bottom":c,middleware:[u.offset({mainAxis:t}),u.shift(),u.flip()],whileElementsMounted:u.autoUpdate});s.useLayoutEffect(()=>{v(e.current)},[e,v]),s.useLayoutEffect(()=>{n&&q(e.current.offsetWidth)},[n,e]),s.useEffect(()=>{if(h)return T.hideOthers(h)},[h]);const x=m.useCallbackRef(a);s.useEffect(()=>{const o=()=>{x()};return window.addEventListener("blur",o),window.addEventListener("resize",o),()=>{window.removeEventListener("blur",o),window.removeEventListener("resize",o)}},[x]);const I=H.useComposedRefs(S,o=>k(o),_);return i.jsx(W.RemoveScroll,{allowPinchZoom:!0,children:i.jsx(z.FocusScope,{asChild:!0,loop:!0,trapped:!0,onUnmountAutoFocus:o=>{o.preventDefault(),w.current||e.current?.focus({preventScroll:!0})},children:i.jsx(B.DismissibleLayer,{asChild:!0,onEscapeKeyDown:d,onPointerDownOutside:m.composeEventHandlers(f,o=>{const b=o.detail.originalEvent,$=b.button===0&&b.ctrlKey===!0,F=b.button===2||$;w.current=F},{checkForDefaultPrevented:!1}),onFocusOutside:m.composeEventHandlers(p,o=>o.preventDefault(),{checkForDefaultPrevented:!1}),onDismiss:a,children:i.jsx(J,{ref:I,style:{left:C,top:D,position:L,width:j||void 0},hasRadius:!0,background:"neutral0",padding:1,...O,children:r})})})})}),y=({children:e,intersectionId:r,onReachEnd:t,...n})=>{const c=s.useRef(null),l=K.useId();return N.useIntersection(c,t??(()=>{}),{selectorToWatch:`#${P.stripReactIdOfColon(l)}`,skipWhen:!r||!t}),i.jsxs(Q,{ref:c,...n,children:[e,r&&t&&i.jsx(g.Box,{id:P.stripReactIdOfColon(l),width:"100%",height:"1px"})]})},Q=R.default(g.Box)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3*5}rem;
   overflow-y: auto;
@@ -23,4 +22,4 @@
     border-radius: ${({theme:e})=>e.borderRadius};
     margin-right: 10px;
   }
-`,Q=({children:e,source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,...p})=>s.jsx(N.Portal,{children:s.jsx(R,{source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,children:s.jsx(y,{...p,children:e})})});exports.Content=R;exports.POPOVER_PLACEMENTS=Z;exports.Popover=Q;exports.Scrolling=y;
+`,X=({children:e,source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,...p})=>i.jsx(U.Portal,{children:i.jsx(E,{source:r,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,children:i.jsx(y,{...p,children:e})})});exports.Content=E;exports.POPOVER_PLACEMENTS=G;exports.Popover=X;exports.Scrolling=y;

package/dist/Popover/Popover.js

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
 import * as o from "react";
-import { useFloating as I, offset as W, shift as A, flip as K, autoUpdate as j } from "@floating-ui/react-dom";
-import { FocusScope as M } from "@radix-ui/react-focus-scope";
-import { useCallbackRef as T, composeEventHandlers as v } from "@strapi/ui-primitives";
-import { hideOthers as U } from "aria-hidden";
-import { RemoveScroll as B } from "react-remove-scroll";
-import x from "styled-components";
-import { DismissibleLayer as H } from "../DismissibleLayer/index.js";
-import { stripReactIdOfColon as k } from "../helpers/strings.js";
-import { useComposedRefs as N } from "../hooks/useComposeRefs.js";
-import { useId as V } from "../hooks/useId.js";
-import { useIntersection as Z } from "../hooks/useIntersection.js";
+import { useFloating as W, offset as A, shift as K, flip as j, autoUpdate as M } from "@floating-ui/react-dom";
+import { FocusScope as T } from "@radix-ui/react-focus-scope";
+import { useCallbackRef as U, composeEventHandlers as v } from "@strapi/ui-primitives";
+import { hideOthers as B } from "aria-hidden";
+import { RemoveScroll as H } from "react-remove-scroll";
+import k from "styled-components";
+import { DismissibleLayer as N } from "../DismissibleLayer/index.js";
+import { stripReactIdOfColon as x } from "../helpers/strings.js";
+import { useComposedRefs as V } from "../hooks/useComposeRefs.js";
+import { useId as Z } from "../hooks/useId.js";
+import { useIntersection as _ } from "../hooks/useIntersection.js";
 import { Box as h } from "../Box/Box.js";
-import { Portal as _ } from "../Portal/Portal.js";
-const fe = [
+import { Portal as q } from "../Portal/Portal.js";
+const me = [
   "top",
   "top-start",
   "top-end",
@@ -26,33 +26,32 @@ const fe = [
   "left",
   "left-start",
   "left-end"
-], q = x(h)`
+], G = k(h)`
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   z-index: ${({ theme: e }) => e.zIndices[0]};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  background: ${({ theme: e }) => e.colors.neutral0};
-`, G = ({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, onFocusOutside: f, ...E }) => {
-  const [m, P] = o.useState(null), b = o.useRef(!1), [R, y] = o.useState(void 0), { x: C, y: D, reference: w, floating: L, strategy: O } = I({
+`, J = o.forwardRef(({ source: e, children: s, spacing: n = 0, fullWidth: i = !1, placement: l = "bottom-start", centered: a = !1, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, onFocusOutside: u, ...E }, R) => {
+  const [m, y] = o.useState(null), [P, C] = o.useState(void 0), b = o.useRef(!1), { x: D, y: L, reference: w, floating: S, strategy: O } = W({
     strategy: "fixed",
     placement: a ? "bottom" : l,
     middleware: [
-      W({
+      A({
         mainAxis: n
       }),
-      A(),
-      K()
+      K(),
+      j()
     ],
-    whileElementsMounted: j
+    whileElementsMounted: M
   });
   o.useLayoutEffect(() => {
     w(e.current);
   }, [e, w]), o.useLayoutEffect(() => {
-    i && y(e.current.offsetWidth);
+    i && C(e.current.offsetWidth);
   }, [i, e]), o.useEffect(() => {
     if (m)
-      return U(m);
+      return B(m);
   }, [m]);
-  const g = T(c);
+  const g = U(c);
   o.useEffect(() => {
     const t = () => {
       g();
@@ -61,8 +60,8 @@ const fe = [
       window.removeEventListener("blur", t), window.removeEventListener("resize", t);
     };
   }, [g]);
-  const S = N((t) => P(t), L);
-  return r(B, { allowPinchZoom: !0, children: r(M, {
+  const $ = V(R, (t) => y(t), S);
+  return r(H, { allowPinchZoom: !0, children: r(T, {
     asChild: !0,
     loop: !0,
     // we make sure we're not trapping once it's been closed
@@ -71,36 +70,35 @@ const fe = [
     onUnmountAutoFocus: (t) => {
       t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
     },
-    children: r(H, {
+    children: r(N, {
       asChild: !0,
-      disableOutsidePointerEvents: !0,
       onEscapeKeyDown: d,
-      onPointerDownOutside: v(u, (t) => {
-        const p = t.detail.originalEvent, $ = p.button === 0 && p.ctrlKey === !0, F = p.button === 2 || $;
-        b.current = F;
+      onPointerDownOutside: v(f, (t) => {
+        const p = t.detail.originalEvent, F = p.button === 0 && p.ctrlKey === !0, z = p.button === 2 || F;
+        b.current = z;
       }, { checkForDefaultPrevented: !1 }),
       // When focus is trapped, a `focusout` event may still happen.
       // We make sure we don't trigger our `onDismiss` in such case.
-      onFocusOutside: v(f, (t) => t.preventDefault(), {
+      onFocusOutside: v(u, (t) => t.preventDefault(), {
         checkForDefaultPrevented: !1
       }),
       onDismiss: c,
-      children: r(q, { ref: S, style: {
-        left: C,
-        top: D,
+      children: r(G, { ref: $, style: {
+        left: D,
+        top: L,
         position: O,
-        width: R || void 0
+        width: P || void 0
       }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
     })
   }) });
-}, J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
-  const l = o.useRef(null), a = V();
-  return Z(l, n ?? (() => {
+}), Q = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = Z();
+  return _(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${k(a)}`,
+    selectorToWatch: `#${x(a)}`,
     skipWhen: !s || !n
-  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: k(a), width: "100%", height: "1px" })] });
-}, Q = x(h)`
+  }), I(X, { ref: l, ...i, children: [e, s && n && r(h, { id: x(a), width: "100%", height: "1px" })] });
+}, X = k(h)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3 * 5}rem;
   overflow-y: auto;
@@ -120,10 +118,10 @@ const fe = [
     border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, ...f }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: u, onDismiss: c, children: r(J, { ...f, children: e }) }) });
+`, pe = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(q, { children: r(J, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(Q, { ...u, children: e }) }) });
 export {
-  G as Content,
-  fe as POPOVER_PLACEMENTS,
-  me as Popover,
-  J as Scrolling
+  J as Content,
+  me as POPOVER_PLACEMENTS,
+  pe as Popover,
+  Q as Scrolling
 };

package/dist/Popover/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Popover.cjs"),e={Content:o.Content,Scrolling:o.Scrolling};exports.POPOVER_PLACEMENTS=o.POPOVER_PLACEMENTS;exports.Popover=o.Popover;exports.PopoverPrimitives=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover.cjs"),o=require("./primitives.cjs");exports.POPOVER_PLACEMENTS=e.POPOVER_PLACEMENTS;exports.Popover=e.Popover;exports.PopoverPrimitives=o;

package/dist/Popover/index.js

@@ -1,11 +1,7 @@
-import { Content as o, Scrolling as r } from "./Popover.js";
-import { POPOVER_PLACEMENTS as p, Popover as m } from "./Popover.js";
-const e = {
-  Content: o,
-  Scrolling: r
-};
+import { POPOVER_PLACEMENTS as e, Popover as p } from "./Popover.js";
+import * as o from "./primitives.js";
 export {
-  p as POPOVER_PLACEMENTS,
-  m as Popover,
-  e as PopoverPrimitives
+  e as POPOVER_PLACEMENTS,
+  p as Popover,
+  o as PopoverPrimitives
 };

package/dist/Popover/primitives.cjs

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

package/dist/Popover/primitives.js

@@ -0,0 +1,5 @@
+import { Content as r, Scrolling as t } from "./Popover.js";
+export {
+  r as Content,
+  t as Scrolling
+};

package/dist/Searchbar/Searchbar.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("@strapi/icons"),m=require("styled-components"),F=require("../hooks/useComposeRefs.cjs"),R=require("../themes/utils.cjs"),t=require("../Field/FieldInput.cjs"),S=require("../Field/Field.cjs"),y=require("../VisuallyHidden/VisuallyHidden.cjs"),$=require("../Field/FieldLabel.cjs"),C=require("../Field/FieldAction.cjs"),I=e=>e&&e.__esModule?e:{default:e},s=I(m),w=s.default(l.Cross)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),l=require("@strapi/icons"),m=require("styled-components"),F=require("../hooks/useComposeRefs.cjs"),R=require("../themes/utils.cjs"),t=require("../Field/FieldInput.cjs"),S=require("../Field/FieldAction.cjs"),y=require("../Field/Field.cjs"),$=require("../VisuallyHidden/VisuallyHidden.cjs"),C=require("../Field/FieldLabel.cjs"),I=e=>e&&e.__esModule?e:{default:e},s=I(m),w=s.default(l.Cross)`
   font-size: 0.5rem;
   path {
     fill: ${({theme:e})=>e.colors.neutral400};
@@ -25,4 +25,4 @@
   }
 
   ${R.inputFocusStyle(t.InputWrapper)}
-`,g=i.forwardRef(({name:e,size:a="M",children:u,value:n="",onClear:d,clearLabel:f,...p},h)=>{const o=i.useRef(null),b=n.length>0,q=j=>{d(j),o.current.focus()},x=F.composeRefs(h,o);return r.jsx(_,{children:r.jsxs(S.Field,{name:e,children:[r.jsx(y.VisuallyHidden,{children:r.jsx($.FieldLabel,{children:u})}),r.jsx(t.FieldInput,{ref:x,value:n,startAction:r.jsx(c,{"aria-hidden":!0}),size:a,endAction:b?r.jsx(C.FieldAction,{label:f,onClick:q,children:r.jsx(w,{})}):void 0,...p})]})})});exports.Searchbar=g;
+`,g=i.forwardRef(({name:e,size:a="M",children:u,value:n="",onClear:d,clearLabel:f,...p},h)=>{const o=i.useRef(null),b=n.length>0,q=j=>{d(j),o.current.focus()},x=F.composeRefs(h,o);return r.jsx(_,{children:r.jsxs(y.Field,{name:e,children:[r.jsx($.VisuallyHidden,{children:r.jsx(C.FieldLabel,{children:u})}),r.jsx(t.FieldInput,{ref:x,value:n,startAction:r.jsx(c,{"aria-hidden":!0}),size:a,endAction:b?r.jsx(S.FieldAction,{label:f,onClick:q,children:r.jsx(w,{})}):void 0,...p})]})})});exports.Searchbar=g;

package/dist/Searchbar/Searchbar.js

@@ -5,10 +5,10 @@ import e from "styled-components";
 import { composeRefs as C } from "../hooks/useComposeRefs.js";
 import { inputFocusStyle as F } from "../themes/utils.js";
 import { InputWrapper as n, FieldInput as y } from "../Field/FieldInput.js";
-import { Field as I } from "../Field/Field.js";
-import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
-import { FieldLabel as A } from "../Field/FieldLabel.js";
-import { FieldAction as g } from "../Field/FieldAction.js";
+import { FieldAction as I } from "../Field/FieldAction.js";
+import { Field as z } from "../Field/Field.js";
+import { VisuallyHidden as A } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldLabel as g } from "../Field/FieldLabel.js";
 const j = e(w)`
   font-size: 0.5rem;
   path {
@@ -40,7 +40,7 @@ const j = e(w)`
   const i = S(null), f = t.length > 0, h = (b) => {
     c(b), i.current.focus();
   }, u = C(p, i);
-  return o(W, { children: $(I, { name: r, children: [o(z, { children: o(A, { children: a }) }), o(y, { ref: u, value: t, startAction: o(l, { "aria-hidden": !0 }), size: s, endAction: f ? o(g, { label: d, onClick: h, children: o(j, {}) }) : void 0, ...m })] }) });
+  return o(W, { children: $(z, { name: r, children: [o(A, { children: o(g, { children: a }) }), o(y, { ref: u, value: t, startAction: o(l, { "aria-hidden": !0 }), size: s, endAction: f ? o(I, { label: d, onClick: h, children: o(j, {}) }) : void 0, ...m })] }) });
 });
 export {
   J as Searchbar

package/dist/Select/SelectParts.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),u=require("../themes/utils.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",width:"100%",...b,children:[r.jsxs(c.Flex,{flex:"1",as:"span",gap:3,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:S,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),u=require("../themes/utils.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",width:"100%",...b,children:[r.jsxs(c.Flex,{flex:"1",as:"span",gap:3,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:S,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
   border: none;
 
   svg {

package/dist/Select/SelectParts.js

@@ -4,9 +4,9 @@ import { Cross as y, CarretDown as R } from "@strapi/icons";
 import { Select as o } from "@strapi/ui-primitives";
 import s, { css as I } from "styled-components";
 import { useComposedRefs as S } from "../hooks/useComposeRefs.js";
-import { getThemeSize as C, inputFocusStyle as T } from "../themes/utils.js";
 import { Flex as c } from "../Flex/Flex.js";
 import { Box as p } from "../Box/Box.js";
+import { getThemeSize as C, inputFocusStyle as T } from "../themes/utils.js";
 import { Typography as u } from "../Typography/Typography.js";
 const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
   const d = a.useRef(null), w = (x) => {

package/dist/Select/SingleSelect.cjs

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

package/dist/Select/SingleSelect.js

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

package/dist/TextInput/TextInput.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("../hooks/useId.cjs"),I=require("../Field/FieldInput.cjs"),q=require("../Field/Field.cjs"),j=require("../Flex/Flex.cjs"),h=require("../Field/FieldLabel.cjs"),m=require("../Field/FieldHint.cjs"),f=require("../Field/FieldError.cjs"),s=t.forwardRef(({name:l,hint:d,error:o,label:r,labelAction:u,id:c,required:a,...i},p)=>{const x=F.useId(c),n=t.useRef(null);if(!r&&!i["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return t.useImperativeHandle(p,()=>({inputWrapperRef:n})),e.jsx("div",{ref:n,children:e.jsx(q.Field,{name:l,hint:d,error:o,id:x,required:a,children:e.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(h.FieldLabel,{action:u,children:r}),e.jsx(I.FieldInput,{...i}),e.jsx(m.FieldHint,{}),e.jsx(f.FieldError,{})]})})})});s.displayName="TextInput";exports.TextInput=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),F=require("../hooks/useId.cjs"),I=require("../Field/Field.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Field/FieldLabel.cjs"),h=require("../Field/FieldInput.cjs"),m=require("../Field/FieldHint.cjs"),f=require("../Field/FieldError.cjs"),s=t.forwardRef(({name:l,hint:d,error:o,label:r,labelAction:u,id:c,required:a,...i},p)=>{const x=F.useId(c),n=t.useRef(null);if(!r&&!i["aria-label"])throw new Error('The TextInput component needs a "label" or an "aria-label" props');return t.useImperativeHandle(p,()=>({inputWrapperRef:n})),e.jsx("div",{ref:n,children:e.jsx(I.Field,{name:l,hint:d,error:o,id:x,required:a,children:e.jsxs(q.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[r&&e.jsx(j.FieldLabel,{action:u,children:r}),e.jsx(h.FieldInput,{...i}),e.jsx(m.FieldHint,{}),e.jsx(f.FieldError,{})]})})})});s.displayName="TextInput";exports.TextInput=s;

package/dist/TextInput/TextInput.js

@@ -1,10 +1,10 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as c, useRef as u, useImperativeHandle as h } from "react";
 import { useId as I } from "../hooks/useId.js";
-import { FieldInput as x } from "../Field/FieldInput.js";
-import { Field as F } from "../Field/Field.js";
-import { Flex as T } from "../Flex/Flex.js";
-import { FieldLabel as g } from "../Field/FieldLabel.js";
+import { Field as x } from "../Field/Field.js";
+import { Flex as F } from "../Flex/Flex.js";
+import { FieldLabel as T } from "../Field/FieldLabel.js";
+import { FieldInput as g } from "../Field/FieldInput.js";
 import { FieldHint as w } from "../Field/FieldHint.js";
 import { FieldError as R } from "../Field/FieldError.js";
 const b = c(({ name: t, hint: n, error: m, label: e, labelAction: p, id: d, required: a, ...i }, l) => {
@@ -13,7 +13,7 @@ const b = c(({ name: t, hint: n, error: m, label: e, labelAction: p, id: d, requ
     throw new Error('The TextInput component needs a "label" or an "aria-label" props');
   return h(l, () => ({
     inputWrapperRef: o
-  })), r("div", { ref: o, children: r(F, { name: t, hint: n, error: m, id: f, required: a, children: s(T, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(g, { action: p, children: e }), r(x, { ...i }), r(w, {}), r(R, {})] }) }) });
+  })), r("div", { ref: o, children: r(x, { name: t, hint: n, error: m, id: f, required: a, children: s(F, { direction: "column", alignItems: "stretch", gap: 1, children: [e && r(T, { action: p, children: e }), r(g, { ...i }), r(w, {}), r(R, {})] }) }) });
 });
 b.displayName = "TextInput";
 export {