@strapi/design-system 1.8.0 → 1.8.2

package/dist/MainNav/NavSection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),x=require("prop-types"),g=require("./MainNavContext.cjs"),h=require("../Divider/Divider.cjs"),i=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("../Typography/Typography.cjs"),q=n=>n&&n.__esModule?n:{default:n},u=q(x),p=({label:n,children:d,spacing:a=2,horizontal:r=!1,...c})=>g.useMainNav()?e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(h.Divider,{}),e.jsx(m.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]}):e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(j.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]});p.propTypes={children:u.default.node.isRequired,label:u.default.string.isRequired};exports.NavSection=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),x=require("./MainNavContext.cjs"),g=require("../Divider/Divider.cjs"),r=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),p=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),m=n=>n&&n.__esModule?n:{default:n},o=m(u),j=({label:n,children:a,spacing:d=2,horizontal:t=!1,...c})=>x.useMainNav()?e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(g.Divider,{}),e.jsx(p.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]}):e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(h.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]});exports.NavSection=j;

package/dist/MainNav/NavSection.js

@@ -1,46 +1,12 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { Children as m } from "react";
-import p from "prop-types";
-import { useMainNav as u } from "./MainNavContext.js";
-import { Divider as g } from "../Divider/Divider.js";
-import { Flex as i } from "../Flex/Flex.js";
-import { Box as l } from "../Box/Box.js";
-import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as f } from "../Typography/Typography.js";
-const x = ({ label: o, children: a, spacing: s = 2, horizontal: e = !1, ...c }) => u() ? /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
-  /* @__PURE__ */ d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [
-    /* @__PURE__ */ r(g, {}),
-    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r("span", { children: o }) })
-  ] }),
-  /* @__PURE__ */ r(
-    i,
-    {
-      as: "ul",
-      gap: s,
-      direction: e ? "row" : "column",
-      alignItems: e ? "center" : "stretch",
-      ...c,
-      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
-    }
-  )
-] }) : /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
-  /* @__PURE__ */ r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: /* @__PURE__ */ r(f, { variant: "sigma", textColor: "neutral600", children: o }) }),
-  /* @__PURE__ */ r(
-    i,
-    {
-      as: "ul",
-      gap: s,
-      direction: e ? "row" : "column",
-      alignItems: e ? "center" : "stretch",
-      ...c,
-      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
-    }
-  )
-] });
-x.propTypes = {
-  children: p.node.isRequired,
-  label: p.string.isRequired
-};
+import l from "react";
+import { useMainNav as p } from "./MainNavContext.js";
+import { Divider as u } from "../Divider/Divider.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { Box as s } from "../Box/Box.js";
+import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../Typography/Typography.js";
+const j = ({ label: a, children: o, spacing: c = 2, horizontal: e = !1, ...m }) => p() ? d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [d(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [r(u, {}), r(g, { children: r("span", { children: a }) })] }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] }) : d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [r(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: r(h, { variant: "sigma", textColor: "neutral600", children: a }) }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] });
 export {
-  x as NavSection
+  j as NavSection
 };

package/dist/MainNav/NavSections.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),u=require("prop-types"),a=require("styled-components"),p=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),o=e=>e&&e.__esModule?e:{default:e},g=o(u),x=o(a),y=x.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),d=require("styled-components"),a=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},f=n(c),g=n(d),x=g.default(a.Box)`
   flex-grow: 1;
   overflow-y: auto;
-`,n=({children:e,spacing:s=4,horizontal:r=!1,...i})=>t.jsx(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(f.Flex,{as:"ul",gap:s,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:c.Children.map(e,(d,l)=>t.jsx("li",{children:d},l))})});n.propTypes={children:g.default.node.isRequired};exports.NavSections=n;
+`,p=({children:e,spacing:r=4,horizontal:o=!1,...s})=>t.jsx(x,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(u.Flex,{as:"ul",gap:r,direction:o?"row":"column",alignItems:o?"center":"stretch",...s,children:f.default.Children.map(e,(i,l)=>t.jsx("li",{children:i},l))})});exports.NavSections=p;

package/dist/MainNav/NavSections.js

@@ -1,26 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Children as d } from "react";
-import m from "prop-types";
+import { jsx as o } from "react/jsx-runtime";
+import m from "react";
 import l from "styled-components";
-import { Box as s } from "../Box/Box.js";
-import { Flex as c } from "../Flex/Flex.js";
-const a = l(s)`
+import { Box as p } from "../Box/Box.js";
+import { Flex as a } from "../Flex/Flex.js";
+const c = l(p)`
   flex-grow: 1;
   overflow-y: auto;
-`, f = ({ children: e, spacing: i = 4, horizontal: o = !1, ...t }) => /* @__PURE__ */ r(a, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: /* @__PURE__ */ r(
-  c,
-  {
-    as: "ul",
-    gap: i,
-    direction: o ? "row" : "column",
-    alignItems: o ? "center" : "stretch",
-    ...t,
-    children: d.map(e, (p, n) => /* @__PURE__ */ r("li", { children: p }, n))
-  }
-) });
-f.propTypes = {
-  children: m.node.isRequired
-};
+`, h = ({ children: t, spacing: e = 4, horizontal: r = !1, ...i }) => o(c, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: o(a, { as: "ul", gap: e, direction: r ? "row" : "column", alignItems: r ? "center" : "stretch", ...i, children: m.Children.map(t, (n, d) => o("li", { children: n }, d)) }) });
 export {
-  f as NavSections
+  h as NavSections
 };

package/dist/MainNav/NavUser.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),x=require("prop-types"),f=require("styled-components"),y=require("./MainNavContext.cjs"),a=require("../Avatar/Avatar.cjs"),d=require("../Box/Box.cjs"),v=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},q=i(p),s=i(x),h=i(f),_=h.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),c=require("styled-components"),x=require("./MainNavContext.cjs"),s=require("../Avatar/Avatar.cjs"),i=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),f=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),o=e=>e&&e.__esModule?e:{default:e},j=o(u),y=o(c),g=y.default(i.Box)`
   border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,r=q.default.forwardRef(({src:e,children:n,initials:l,...u},c)=>{const o=y.useMainNav();return t.jsx(_,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...u,children:t.jsxs(v.Flex,{as:"button",justifyContent:o?"center":void 0,ref:c,children:[e?t.jsx(a.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(a.Initials,{children:l}),o?t.jsx(g.VisuallyHidden,{children:t.jsx("span",{children:n})}):t.jsx(d.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(j.Typography,{ellipsis:!0,textColor:"neutral600",children:n})})]})})});r.displayName="NavUser";r.defaultProps={src:void 0,initials:void 0};r.propTypes={children:s.default.node.isRequired,initials:s.default.node,src:s.default.string};exports.NavUser=r;
+`,q=j.default.forwardRef(({src:e,children:r,initials:a,...d},l)=>{const n=x.useMainNav();return t.jsx(g,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...d,children:t.jsxs(p.Flex,{as:"button",justifyContent:n?"center":void 0,ref:l,children:[e?t.jsx(s.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(s.Initials,{children:a}),n?t.jsx(f.VisuallyHidden,{children:t.jsx("span",{children:r})}):t.jsx(i.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(h.Typography,{ellipsis:!0,textColor:"neutral600",children:r})})]})})});exports.NavUser=q;

package/dist/MainNav/NavUser.js

@@ -1,32 +1,18 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import m from "react";
-import i from "prop-types";
-import f from "styled-components";
-import { useMainNav as c } from "./MainNavContext.js";
-import { Avatar as u, Initials as h } from "../Avatar/Avatar.js";
-import { Box as n } from "../Box/Box.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import s from "react";
+import l from "styled-components";
+import { useMainNav as m } from "./MainNavContext.js";
+import { Avatar as f, Initials as c } from "../Avatar/Avatar.js";
+import { Box as i } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
 import { Typography as x } from "../Typography/Typography.js";
-const y = f(n)`
+const g = l(i)`
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, t = m.forwardRef(({ src: o, children: e, initials: a, ...s }, p) => {
-  const d = c();
-  return /* @__PURE__ */ r(y, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...s, children: /* @__PURE__ */ l(g, { as: "button", justifyContent: d ? "center" : void 0, ref: p, children: [
-    o ? /* @__PURE__ */ r(u, { src: o, alt: "", "aria-hidden": !0 }) : /* @__PURE__ */ r(h, { children: a }),
-    d ? /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r("span", { children: e }) }) : /* @__PURE__ */ r(n, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: /* @__PURE__ */ r(x, { ellipsis: !0, textColor: "neutral600", children: e }) })
-  ] }) });
+`, L = s.forwardRef(({ src: o, children: t, initials: n, ...d }, a) => {
+  const e = m();
+  return r(g, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...d, children: p(u, { as: "button", justifyContent: e ? "center" : void 0, ref: a, children: [o ? r(f, { src: o, alt: "", "aria-hidden": !0 }) : r(c, { children: n }), e ? r(h, { children: r("span", { children: t }) }) : r(i, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: r(x, { ellipsis: !0, textColor: "neutral600", children: t }) })] }) });
 });
-t.displayName = "NavUser";
-t.defaultProps = {
-  src: void 0,
-  initials: void 0
-};
-t.propTypes = {
-  children: i.node.isRequired,
-  initials: i.node,
-  src: i.string
-};
 export {
-  t as NavUser
+  L as NavUser
 };

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

package/dist/Select/MultiSelect.js

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