@strapi/design-system 1.8.1 → 1.9.0

package/dist/JSONInput/JSONInput.cjs

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

package/dist/JSONInput/JSONInput.js

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

package/dist/Popover/Popover.cjs

@@ -1,8 +1,8 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),$=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"),x=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 o=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(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const i=V($),P=U(W),Z=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],G=P.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};
-`,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)`
+`,R=i.forwardRef(({source:e,children:o,spacing:t=0,fullWidth:n=!1,placement:c="bottom-start",centered:l=!1,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,onFocusOutside:p,...y},O)=>{const[h,S]=i.useState(null),[k,j]=i.useState(void 0),w=i.useRef(!1),{x:q,y:C,refs:D,strategy:_}=u.useFloating({strategy:"fixed",placement:l?"bottom":c,middleware:[u.offset({mainAxis:t}),u.shift(),u.flip()],elements:{reference:e.current},whileElementsMounted:u.autoUpdate});i.useLayoutEffect(()=>{n&&j(e.current.offsetWidth)},[n,e]),i.useEffect(()=>{if(h)return z.hideOthers(h)},[h]);const v=m.useCallbackRef(a);i.useEffect(()=>{const r=()=>{v()};return window.addEventListener("blur",r),window.addEventListener("resize",r),()=>{window.removeEventListener("blur",r),window.removeEventListener("resize",r)}},[v]);const L=B.useComposedRefs(O,r=>S(r),D.setFloating);return s.jsx(T.RemoveScroll,{allowPinchZoom:!0,children:s.jsx(M.FocusScope,{asChild:!0,loop:!0,trapped:!0,onUnmountAutoFocus:r=>{r.preventDefault(),w.current||e.current?.focus({preventScroll:!0})},children:s.jsx(A.DismissibleLayer,{asChild:!0,onEscapeKeyDown:d,onPointerDownOutside:m.composeEventHandlers(f,r=>{const b=r.detail.originalEvent,F=b.button===0&&b.ctrlKey===!0,I=b.button===2||F;w.current=I},{checkForDefaultPrevented:!1}),onFocusOutside:m.composeEventHandlers(p,r=>r.preventDefault(),{checkForDefaultPrevented:!1}),onDismiss:a,children:s.jsx(G,{ref:L,style:{left:q,top:C,position:_,width:k||void 0},hasRadius:!0,background:"neutral0",padding:1,...y,children:o})})})})}),E=({children:e,intersectionId:o,onReachEnd:t,...n})=>{const c=i.useRef(null),l=H.useId();return K.useIntersection(c,t??(()=>{}),{selectorToWatch:`#${x.stripReactIdOfColon(l)}`,skipWhen:!o||!t}),s.jsxs(J,{ref:c,...n,children:[e,o&&t&&s.jsx(g.Box,{id:x.stripReactIdOfColon(l),width:"100%",height:"1px"})]})},J=P.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;
@@ -22,4 +22,4 @@
     border-radius: ${({theme:e})=>e.borderRadius};
     margin-right: 10px;
   }
-`,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;
+`,Q=({children:e,source:o,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,...p})=>s.jsx(N.Portal,{children:s.jsx(R,{source:o,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,children:s.jsx(E,{...p,children:e})})});exports.Content=R;exports.POPOVER_PLACEMENTS=Z;exports.Popover=Q;exports.Scrolling=E;

package/dist/Popover/Popover.js

@@ -1,19 +1,19 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
 import * as o from "react";
-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 { 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 g } 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 v } 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 { Box as h } from "../Box/Box.js";
-import { Portal as q } from "../Portal/Portal.js";
-const me = [
+import { Portal as _ } from "../Portal/Portal.js";
+const ue = [
   "top",
   "top-start",
   "top-end",
@@ -26,42 +26,43 @@ const me = [
   "left",
   "left-start",
   "left-end"
-], G = k(h)`
+], q = x(h)`
   box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   z-index: ${({ theme: e }) => e.zIndices[0]};
   border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, 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({
+`, G = 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, ...k }, E) => {
+  const [m, R] = o.useState(null), [P, y] = o.useState(void 0), b = o.useRef(!1), { x: C, y: D, refs: S, strategy: L } = I({
     strategy: "fixed",
     placement: a ? "bottom" : l,
     middleware: [
-      A({
+      W({
         mainAxis: n
       }),
-      K(),
-      j()
+      A(),
+      K()
     ],
-    whileElementsMounted: M
+    elements: {
+      reference: e.current
+    },
+    whileElementsMounted: j
   });
   o.useLayoutEffect(() => {
-    w(e.current);
-  }, [e, w]), o.useLayoutEffect(() => {
-    i && C(e.current.offsetWidth);
+    i && y(e.current.offsetWidth);
   }, [i, e]), o.useEffect(() => {
     if (m)
-      return B(m);
+      return U(m);
   }, [m]);
-  const g = U(c);
+  const w = T(c);
   o.useEffect(() => {
     const t = () => {
-      g();
+      w();
     };
     return window.addEventListener("blur", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("blur", t), window.removeEventListener("resize", t);
     };
-  }, [g]);
-  const $ = V(R, (t) => y(t), S);
-  return r(H, { allowPinchZoom: !0, children: r(T, {
+  }, [w]);
+  const O = N(E, (t) => R(t), S.setFloating);
+  return r(B, { allowPinchZoom: !0, children: r(M, {
     asChild: !0,
     loop: !0,
     // we make sure we're not trapping once it's been closed
@@ -70,35 +71,35 @@ const me = [
     onUnmountAutoFocus: (t) => {
       t.preventDefault(), b.current || e.current?.focus({ preventScroll: !0 });
     },
-    children: r(N, {
+    children: r(H, {
       asChild: !0,
       onEscapeKeyDown: d,
-      onPointerDownOutside: v(f, (t) => {
-        const p = t.detail.originalEvent, F = p.button === 0 && p.ctrlKey === !0, z = p.button === 2 || F;
-        b.current = z;
+      onPointerDownOutside: g(f, (t) => {
+        const p = t.detail.originalEvent, $ = p.button === 0 && p.ctrlKey === !0, F = p.button === 2 || $;
+        b.current = F;
       }, { 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(u, (t) => t.preventDefault(), {
+      onFocusOutside: g(u, (t) => t.preventDefault(), {
         checkForDefaultPrevented: !1
       }),
       onDismiss: c,
-      children: r(G, { ref: $, style: {
-        left: D,
-        top: L,
-        position: O,
+      children: r(q, { ref: O, style: {
+        left: C,
+        top: D,
+        position: L,
         width: P || void 0
-      }, hasRadius: !0, background: "neutral0", padding: 1, ...E, children: s })
+      }, hasRadius: !0, background: "neutral0", padding: 1, ...k, children: s })
     })
   }) });
-}), Q = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
-  const l = o.useRef(null), a = Z();
-  return _(l, n ?? (() => {
+}), J = ({ children: e, intersectionId: s, onReachEnd: n, ...i }) => {
+  const l = o.useRef(null), a = V();
+  return Z(l, n ?? (() => {
   }), {
-    selectorToWatch: `#${x(a)}`,
+    selectorToWatch: `#${v(a)}`,
     skipWhen: !s || !n
-  }), I(X, { ref: l, ...i, children: [e, s && n && r(h, { id: x(a), width: "100%", height: "1px" })] });
-}, X = k(h)`
+  }), z(Q, { ref: l, ...i, children: [e, s && n && r(h, { id: v(a), width: "100%", height: "1px" })] });
+}, Q = x(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;
@@ -118,10 +119,10 @@ const me = [
     border-radius: ${({ theme: e }) => e.borderRadius};
     margin-right: 10px;
   }
-`, 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 }) }) });
+`, me = ({ children: e, source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, ...u }) => r(_, { children: r(G, { source: s, spacing: n, fullWidth: i, placement: l, centered: a, onEscapeKeyDown: d, onPointerDownOutside: f, onDismiss: c, children: r(J, { ...u, children: e }) }) });
 export {
-  J as Content,
-  me as POPOVER_PLACEMENTS,
-  pe as Popover,
-  Q as Scrolling
+  G as Content,
+  ue as POPOVER_PLACEMENTS,
+  me as Popover,
+  J as Scrolling
 };

package/dist/Select/MultiSelect.cjs

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

package/dist/Select/MultiSelect.js

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

package/dist/Select/SingleSelect.cjs

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