@strapi/design-system 1.7.3 → 1.7.4

package/dist/Combobox/Combobox.cjs

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

package/dist/Combobox/Combobox.js

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

package/dist/Divider/Divider.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("react");const s=require("prop-types"),u=require("styled-components"),a=require("../Box/Box.cjs"),n=e=>e&&e.__esModule?e:{default:e},r=n(s),d=n(u),l=d.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("styled-components"),i=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},s=o(n),u=s.default(i.Box)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
   ${({unsetMargin:e})=>e?"margin: 0;":""}
-`,t=({unsetMargin:e,...o})=>i.jsx(l,{...o,as:"hr",unsetMargin:e});t.defaultProps={background:"neutral150",unsetMargin:!0};t.propTypes={background:r.default.string,unsetMargin:r.default.bool};exports.Divider=t;
+`,a=({unsetMargin:e=!0,...t})=>r.jsx(u,{...t,background:"neutral150",as:"hr",unsetMargin:e});exports.Divider=a;

package/dist/Divider/Divider.js

@@ -1,23 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-import o from "prop-types";
-import i from "styled-components";
-import { Box as p } from "../Box/Box.js";
-const a = i(p)`
+import { jsx as t } from "react/jsx-runtime";
+import n from "styled-components";
+import { Box as i } from "../Box/Box.js";
+const o = n(i)`
   height: 1px;
   border: none;
   /* If contained in a Flex parent we want to prevent the Divider to shink */
   flex-shrink: 0;
   ${({ unsetMargin: r }) => r ? "margin: 0;" : ""}
-`, e = ({ unsetMargin: r, ...t }) => /* @__PURE__ */ n(a, { ...t, as: "hr", unsetMargin: r });
-e.defaultProps = {
-  background: "neutral150",
-  unsetMargin: !0
-};
-e.propTypes = {
-  background: o.string,
-  unsetMargin: o.bool
-};
+`, d = ({ unsetMargin: r = !0, ...e }) => t(o, { ...e, background: "neutral150", as: "hr", unsetMargin: r });
 export {
-  e as Divider
+  d as Divider
 };

package/dist/EmptyStateLayout/EmptyStateLayout.cjs

@@ -1,10 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime");require("react");const p=require("prop-types"),c=require("styled-components"),o=require("../Box/Box.cjs"),y=require("../Typography/Typography.cjs"),n=e=>e&&e.__esModule?e:{default:e},t=n(p),d=n(c),f=d.default(o.Box)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-`,g=d.default(o.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),r=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),u=t=>t&&t.__esModule?t:{default:t},c=u(i),p=c.default(r.Box)`
   svg {
     height: ${88/16}rem;
   }
-`,r=({icon:e,content:i,action:s,hasRadius:u,shadow:l})=>a.jsxs(f,{padding:11,background:"neutral0",hasRadius:u,shadow:l,children:[a.jsx(g,{paddingBottom:6,"aria-hidden":!0,children:e}),a.jsx(o.Box,{paddingBottom:4,children:a.jsx(y.Typography,{variant:"delta",as:"p",textColor:"neutral600",children:i})}),s]});r.defaultProps={action:void 0,hasRadius:!0,shadow:"tableShadow"};r.propTypes={action:t.default.node,content:t.default.string.isRequired,hasRadius:t.default.bool,icon:t.default.node.isRequired,shadow:t.default.string};exports.EmptyStateLayout=r;
+`,y=({icon:t,content:o,action:n,hasRadius:a=!0,shadow:d="tableShadow"})=>e.jsxs(s.Flex,{alignItems:"center",direction:"column",padding:11,background:"neutral0",hasRadius:a,shadow:d,children:[e.jsx(p,{paddingBottom:6,"aria-hidden":!0,children:t}),e.jsx(r.Box,{paddingBottom:4,children:e.jsx(l.Typography,{variant:"delta",as:"p",textAlign:"center",textColor:"neutral600",children:o})}),n]});exports.EmptyStateLayout=y;

package/dist/EmptyStateLayout/EmptyStateLayout.js

@@ -1,35 +1,13 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import "react";
-import t from "prop-types";
-import r from "styled-components";
-import { Box as o } from "../Box/Box.js";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import m from "styled-components";
+import { Box as r } from "../Box/Box.js";
+import { Flex as p } from "../Flex/Flex.js";
 import { Typography as l } from "../Typography/Typography.js";
-const c = r(o)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-`, h = r(o)`
+const c = m(r)`
   svg {
     height: ${88 / 16}rem;
   }
-`, i = ({ icon: a, content: n, action: d, hasRadius: p, shadow: s }) => /* @__PURE__ */ m(c, { padding: 11, background: "neutral0", hasRadius: p, shadow: s, children: [
-  /* @__PURE__ */ e(h, { paddingBottom: 6, "aria-hidden": !0, children: a }),
-  /* @__PURE__ */ e(o, { paddingBottom: 4, children: /* @__PURE__ */ e(l, { variant: "delta", as: "p", textColor: "neutral600", children: n }) }),
-  d
-] });
-i.defaultProps = {
-  action: void 0,
-  hasRadius: !0,
-  shadow: "tableShadow"
-};
-i.propTypes = {
-  action: t.node,
-  content: t.string.isRequired,
-  hasRadius: t.bool,
-  icon: t.node.isRequired,
-  shadow: t.string
-};
+`, y = ({ icon: e, content: o, action: a, hasRadius: n = !0, shadow: i = "tableShadow" }) => d(p, { alignItems: "center", direction: "column", padding: 11, background: "neutral0", hasRadius: n, shadow: i, children: [t(c, { paddingBottom: 6, "aria-hidden": !0, children: e }), t(r, { paddingBottom: 4, children: t(l, { variant: "delta", as: "p", textAlign: "center", textColor: "neutral600", children: o }) }), a] });
 export {
-  i as EmptyStateLayout
+  y as EmptyStateLayout
 };

package/dist/Main/Main.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("react");const a=require("prop-types"),s=require("styled-components"),n=e=>e&&e.__esModule?e:{default:e},r=n(a),u=n(s),d=u.default.main`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("styled-components"),i=require("../Box/Box.cjs"),a=e=>e&&e.__esModule?e:{default:e},l=a(o),s=l.default(i.Box)`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
     outline: none;
   }
-`,t=({labelledBy:e,...o})=>{const l=e||"main-content-title";return i.jsx(d,{"aria-labelledby":l,id:"main-content",tabIndex:-1,...o})};t.defaultProps={labelledBy:void 0};t.propTypes={labelledBy:r.default.string};exports.Main=t;
+`,u=({labelledBy:e="main-content-title",...t})=>n.jsx(s,{"aria-labelledby":e,as:"main",id:"main-content",tabIndex:-1,...t});exports.Main=u;

package/dist/Main/Main.js

@@ -1,19 +1,12 @@
-import { jsx as n } from "react/jsx-runtime";
-import "react";
-import t from "prop-types";
-import l from "styled-components";
-const a = l.main`
+import { jsx as e } from "react/jsx-runtime";
+import i from "styled-components";
+import { Box as t } from "../Box/Box.js";
+const a = i(t)`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
     outline: none;
   }
-`, e = ({ labelledBy: o, ...i }) => /* @__PURE__ */ n(a, { "aria-labelledby": o || "main-content-title", id: "main-content", tabIndex: -1, ...i });
-e.defaultProps = {
-  labelledBy: void 0
-};
-e.propTypes = {
-  labelledBy: t.string
-};
+`, m = ({ labelledBy: o = "main-content-title", ...n }) => e(a, { "aria-labelledby": o, as: "main", id: "main-content", tabIndex: -1, ...n });
 export {
-  e as Main
+  m as Main
 };

package/dist/Main/SkipToContent.cjs

@@ -1,11 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const r=require("prop-types"),s=require("styled-components"),u=require("../Box/Box.cjs"),t=e=>e&&e.__esModule?e:{default:e},i=t(r),a=t(s),c=a.default(u.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("styled-components"),n=require("../Box/Box.cjs"),s=t=>t&&t.__esModule?t:{default:t},r=s(o),a=r.default(n.Box)`
   text-decoration: none;
-  z-index: 9999;
-  left: -100%;
-  top: -100%;
 
   &:focus {
-    left: ${({theme:e})=>e.spaces[3]};
-    top: ${({theme:e})=>e.spaces[3]};
+    left: ${({theme:t})=>t.spaces[3]};
+    top: ${({theme:t})=>t.spaces[3]};
   }
-`,o=({children:e})=>n.jsx(c,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0,children:e});o.propTypes={children:i.default.node.isRequired};exports.SkipToContent=o;
+`,u=({children:t})=>e.jsx(a,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",left:"-100%",padding:3,position:"absolute",top:"-100%",hasRadius:!0,zIndex:9999,children:t});exports.SkipToContent=u;

package/dist/Main/SkipToContent.js

@@ -1,34 +1,14 @@
-import { jsx as r } from "react/jsx-runtime";
-import "react";
-import t from "prop-types";
-import e from "styled-components";
-import { Box as n } from "../Box/Box.js";
-const p = e(n)`
+import { jsx as t } from "react/jsx-runtime";
+import r from "styled-components";
+import { Box as e } from "../Box/Box.js";
+const n = r(e)`
   text-decoration: none;
-  z-index: 9999;
-  left: -100%;
-  top: -100%;
 
   &:focus {
     left: ${({ theme: o }) => o.spaces[3]};
     top: ${({ theme: o }) => o.spaces[3]};
   }
-`, i = ({ children: o }) => /* @__PURE__ */ r(
-  p,
-  {
-    as: "a",
-    href: "#main-content",
-    background: "primary600",
-    color: "neutral0",
-    padding: 3,
-    position: "absolute",
-    hasRadius: !0,
-    children: o
-  }
-);
-i.propTypes = {
-  children: t.node.isRequired
-};
+`, p = ({ children: o }) => t(n, { as: "a", href: "#main-content", background: "primary600", color: "neutral0", left: "-100%", padding: 3, position: "absolute", top: "-100%", hasRadius: !0, zIndex: 9999, children: o });
 export {
-  i as SkipToContent
+  p as SkipToContent
 };

package/dist/Popover/Popover.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),S=require("react"),a=require("@floating-ui/react-dom"),y=require("styled-components"),j=require("../hooks/useIntersection.cjs"),u=require("../Box/Box.cjs"),_=require("../Portal/Portal.cjs"),k=e=>e&&e.__esModule?e:{default:e};function v(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=v(S),f=k(y),O=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],$=f.default(u.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),j=require("react"),a=require("@floating-ui/react-dom"),O=require("styled-components"),f=require("../helpers/strings.cjs"),_=require("../hooks/useId.cjs"),k=require("../hooks/useIntersection.cjs"),d=require("../Box/Box.cjs"),S=require("../Portal/Portal.cjs"),v=e=>e&&e.__esModule?e:{default:e};function q(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 o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const l=q(j),p=v(O),R=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],$=p.default(d.Box)`
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   z-index: ${({theme:e})=>e.zIndices[0]};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   background: ${({theme:e})=>e.colors.neutral0};
-`,p=({source:e,children:t,spacing:r=0,fullWidth:o=!1,placement:n="bottom-start",centered:l=!1,...c})=>{const[h,g]=i.useState(void 0),{x:m,y:x,reference:d,floating:w,strategy:P}=a.useFloating({strategy:"fixed",placement:l?"bottom":n,middleware:[a.offset({mainAxis:r}),a.shift(),a.flip()],whileElementsMounted:a.autoUpdate});return i.useLayoutEffect(()=>{d(e.current)},[e,d]),i.useLayoutEffect(()=>{o&&g(e.current.offsetWidth)},[o,e]),s.jsx($,{ref:w,style:{left:m,top:x,position:P,width:h||void 0},hasRadius:!0,background:"neutral0",padding:1,...c,children:t})},b=({children:e,intersectionId:t,onReachEnd:r,...o})=>{const n=i.useRef(null);return j.useIntersection(n,r??(()=>{}),{selectorToWatch:`#${CSS.escape(t??"")}`,skipWhen:!t||!r}),s.jsxs(q,{ref:n,...o,children:[e,t&&r&&s.jsx(u.Box,{id:CSS.escape(t),width:"100%",height:"1px"})]})},q=f.default(u.Box)`
+`,b=({source:e,children:r,spacing:t=0,fullWidth:o=!1,placement:n="bottom-start",centered:s=!1,...c})=>{const[g,m]=l.useState(void 0),{x,y:w,reference:u,floating:P,strategy:y}=a.useFloating({strategy:"fixed",placement:s?"bottom":n,middleware:[a.offset({mainAxis:t}),a.shift(),a.flip()],whileElementsMounted:a.autoUpdate});return l.useLayoutEffect(()=>{u(e.current)},[e,u]),l.useLayoutEffect(()=>{o&&m(e.current.offsetWidth)},[o,e]),i.jsx($,{ref:P,style:{left:x,top:w,position:y,width:g||void 0},hasRadius:!0,background:"neutral0",padding:1,...c,children:r})},h=({children:e,intersectionId:r,onReachEnd:t,...o})=>{const n=l.useRef(null),s=_.useId();return k.useIntersection(n,t??(()=>{}),{selectorToWatch:`#${f.stripReactIdOfColon(s)}`,skipWhen:!r||!t}),i.jsxs(I,{ref:n,...o,children:[e,r&&t&&i.jsx(d.Box,{id:f.stripReactIdOfColon(s),width:"100%",height:"1px"})]})},I=p.default(d.Box)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3*5}rem;
   overflow-y: auto;
@@ -23,4 +23,4 @@
     border-radius: ${({theme:e})=>e.borderRadius};
     margin-right: 10px;
   }
-`,E=({children:e,source:t,spacing:r,fullWidth:o,placement:n,centered:l,...c})=>s.jsx(_.Portal,{children:s.jsx(p,{source:t,spacing:r,fullWidth:o,placement:n,centered:l,children:s.jsx(b,{...c,children:e})})});exports.Content=p;exports.POPOVER_PLACEMENTS=O;exports.Popover=E;exports.Scrolling=b;
+`,E=({children:e,source:r,spacing:t,fullWidth:o,placement:n,centered:s,...c})=>i.jsx(S.Portal,{children:i.jsx(b,{source:r,spacing:t,fullWidth:o,placement:n,centered:s,children:i.jsx(h,{...c,children:e})})});exports.Content=b;exports.POPOVER_PLACEMENTS=R;exports.Popover=E;exports.Scrolling=h;

package/dist/Popover/Popover.js

@@ -1,11 +1,13 @@
-import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import { jsx as n, jsxs as w } from "react/jsx-runtime";
 import * as a from "react";
-import { useFloating as w, offset as k, shift as S, flip as $, autoUpdate as y } from "@floating-ui/react-dom";
-import f from "styled-components";
-import { useIntersection as v } from "../hooks/useIntersection.js";
+import { useFloating as k, offset as $, shift as y, flip as v, autoUpdate as P } from "@floating-ui/react-dom";
+import p from "styled-components";
+import { stripReactIdOfColon as f } from "../helpers/strings.js";
+import { useId as I } from "../hooks/useId.js";
+import { useIntersection as R } from "../hooks/useIntersection.js";
 import { Box as d } from "../Box/Box.js";
-import { Portal as P } from "../Portal/Portal.js";
-const T = [
+import { Portal as S } from "../Portal/Portal.js";
+const N = [
   "top",
   "top-start",
   "top-end",
@@ -18,42 +20,42 @@ const T = [
   "left",
   "left-start",
   "left-end"
-], W = f(d)`
+], W = p(d)`
   box-shadow: ${({ theme: t }) => t.shadows.filterShadow};
   z-index: ${({ theme: t }) => t.zIndices[0]};
   border: 1px solid ${({ theme: t }) => t.colors.neutral150};
   background: ${({ theme: t }) => t.colors.neutral0};
-`, C = ({ source: t, children: e, spacing: o = 0, fullWidth: r = !1, placement: s = "bottom-start", centered: n = !1, ...l }) => {
-  const [p, u] = a.useState(void 0), { x: h, y: m, reference: c, floating: b, strategy: g } = w({
+`, E = ({ source: t, children: o, spacing: e = 0, fullWidth: r = !1, placement: s = "bottom-start", centered: i = !1, ...l }) => {
+  const [m, u] = a.useState(void 0), { x: h, y: b, reference: c, floating: g, strategy: x } = k({
     strategy: "fixed",
-    placement: n ? "bottom" : s,
+    placement: i ? "bottom" : s,
     middleware: [
-      k({
-        mainAxis: o
+      $({
+        mainAxis: e
       }),
-      S(),
-      $()
+      y(),
+      v()
     ],
-    whileElementsMounted: y
+    whileElementsMounted: P
   });
   return a.useLayoutEffect(() => {
     c(t.current);
   }, [t, c]), a.useLayoutEffect(() => {
     r && u(t.current.offsetWidth);
-  }, [r, t]), i(W, { ref: b, style: {
+  }, [r, t]), n(W, { ref: g, style: {
     left: h,
-    top: m,
-    position: g,
-    width: p || void 0
-  }, hasRadius: !0, background: "neutral0", padding: 1, ...l, children: e });
-}, E = ({ children: t, intersectionId: e, onReachEnd: o, ...r }) => {
-  const s = a.useRef(null);
-  return v(s, o ?? (() => {
+    top: b,
+    position: x,
+    width: m || void 0
+  }, hasRadius: !0, background: "neutral0", padding: 1, ...l, children: o });
+}, z = ({ children: t, intersectionId: o, onReachEnd: e, ...r }) => {
+  const s = a.useRef(null), i = I();
+  return R(s, e ?? (() => {
   }), {
-    selectorToWatch: `#${CSS.escape(e ?? "")}`,
-    skipWhen: !e || !o
-  }), x(R, { ref: s, ...r, children: [t, e && o && i(d, { id: CSS.escape(e), width: "100%", height: "1px" })] });
-}, R = f(d)`
+    selectorToWatch: `#${f(i)}`,
+    skipWhen: !o || !e
+  }), w(C, { ref: s, ...r, children: [t, o && e && n(d, { id: f(i), width: "100%", height: "1px" })] });
+}, C = p(d)`
   // 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;
@@ -73,10 +75,10 @@ const T = [
     border-radius: ${({ theme: t }) => t.borderRadius};
     margin-right: 10px;
   }
-`, B = ({ children: t, source: e, spacing: o, fullWidth: r, placement: s, centered: n, ...l }) => i(P, { children: i(C, { source: e, spacing: o, fullWidth: r, placement: s, centered: n, children: i(E, { ...l, children: t }) }) });
+`, U = ({ children: t, source: o, spacing: e, fullWidth: r, placement: s, centered: i, ...l }) => n(S, { children: n(E, { source: o, spacing: e, fullWidth: r, placement: s, centered: i, children: n(z, { ...l, children: t }) }) });
 export {
-  C as Content,
-  T as POPOVER_PLACEMENTS,
-  B as Popover,
-  E as Scrolling
+  E as Content,
+  N as POPOVER_PLACEMENTS,
+  U as Popover,
+  z 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"),N=require("react"),X=require("@strapi/icons"),b=require("styled-components"),o=require("./SelectParts.cjs"),Y=require("../BaseCheckbox/assets/checkmark.svg.cjs"),J=require("../hooks/useId.cjs"),K=require("../hooks/useIntersection.cjs"),Q=require("../Tag/Tag.cjs"),j=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),U=require("../Field/Field.cjs"),Z=require("../Flex/Flex.cjs"),ee=require("../Field/FieldLabel.cjs"),te=require("../Field/FieldHint.cjs"),re=require("../Field/FieldError.cjs"),ne=e=>e&&e.__esModule?e:{default:e};function ie(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=ie(N),oe=ne(b),le=({children:e,clearLabel:i="Clear",customizeContent:r,disabled:l,error:s,hint:d,id:u,label:p,labelAction:T,onChange:x,onClear:M,onReachEnd:I,placeholder:R,required:y,selectButtonTitle:ae,startIcon:F,size:_="M",value:f,withTags:m,...B})=>{const q=a.useRef(null),[S,$]=a.useState(),[L,P]=a.useState(!1),h=J.useId(u),V=`${h}-hint`,z=`${h}-error`,E=n=>{x?x(n):$(n)},G=n=>()=>{const w=Array.isArray(f)?f.filter(g=>g!==n):(S??[]).filter(g=>g!==n);x?x(w):$(w)},A=n=>{P(n)},k=a.useRef(null),D=()=>{k.current.focus()},v=`intersection-${CSS.escape(h)}`,H=n=>{I&&I(n)};K.useIntersection(q,H,{selectorToWatch:`#${v}`,skipWhen:!L});const c=typeof f<"u"?f:S,W=n=>n&&typeof n=="object"&&n.value?t.jsx(Q.Tag,{tabIndex:-1,disabled:l,icon:t.jsx(X.Cross,{}),onClick:G(n.value),children:n.textValue},n.value):null;return t.jsx(U.Field,{hint:d,error:s,id:h,required:y,children:t.jsxs(Z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(ee.FieldLabel,{onClick:D,action:T,children:p}),t.jsxs(o.Root,{onOpenChange:A,disabled:l,required:y,onValueChange:E,value:c,...B,multi:!0,children:[t.jsx(o.Trigger,{ref:k,"aria-label":p,"aria-describedby":`${V} ${z}`,id:h,startIcon:F,size:_,hasError:!!s,disabled:l,clearLabel:i,onClear:c?.length?M:void 0,paddingLeft:m&&c?.length?1:3,children:t.jsx(o.Value,{placeholder:R,textColor:c?.length?"neutral800":"neutral600",children:c?.length?m?W: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:q,children:[e,t.jsx(j.Box,{id:v,width:"100%",height:"1px"})]})})})]}),t.jsx(te.FieldHint,{}),t.jsx(re.FieldError,{})]})})},se=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(O,{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})})]})),O=oe.default(j.Box)`
+"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)`
   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&&b.css`
+  ${({theme:e,$indeterminate:i})=>i&&I.css`
       &::after {
         content: '';
         display: block;
@@ -18,13 +18,13 @@
       }
     `}
 
-  ${({$selected:e})=>e&&b.css`
+  ${({$selected:e})=>e&&I.css`
       &::after {
         content: '';
-        background: url(${Y}) no-repeat no-repeat center center;
+        background: url(${K}) no-repeat no-repeat center center;
         width: 100%;
         height: 100%;
         position: absolute;
       }
     `}
-`,ce=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(O,{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=le;exports.MultiSelectGroup=ce;exports.MultiSelectOption=se;
+`,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;

package/dist/Select/MultiSelect.js

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

package/dist/Select/SingleSelect.cjs

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

package/dist/Select/SingleSelect.js

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

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),M=require("@radix-ui/react-use-callback-ref"),U=require("@strapi/icons"),H=require("prop-types"),G=require("react-router-dom"),J=require("styled-components"),P=require("./utils.cjs"),u=require("../helpers/keyboardKeys.cjs"),Q=require("../hooks/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Button/Button.cjs"),_=require("../Popover/Popover.cjs"),E=require("../Box/Box.cjs"),q=require("../Typography/Typography.cjs"),Y=require("../Flex/Flex.cjs"),O=e=>e&&e.__esModule?e:{default:e},B=O(r),n=O(H),h=O(J),Z=h.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),H=require("@strapi/icons"),M=require("@strapi/ui-primitives"),U=require("prop-types"),G=require("react-router-dom"),J=require("styled-components"),C=require("./utils.cjs"),i=require("../helpers/keyboardKeys.cjs"),Q=require("../hooks/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Button/Button.cjs"),_=require("../Popover/Popover.cjs"),b=require("../Box/Box.cjs"),q=require("../Typography/Typography.cjs"),Y=require("../Flex/Flex.cjs"),O=e=>e&&e.__esModule?e:{default:e},B=O(r),n=O(U),h=O(J),Z=h.default.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${P.getOptionStyle}
+  ${C.getOptionStyle}
 `,ee=h.default(G.NavLink)`
   text-decoration: none;
-  ${P.getOptionStyle}
+  ${C.getOptionStyle}
 `,ne=h.default(X.Link)`
   /* Removing Link hover effect */
   &:hover {
@@ -22,7 +22,7 @@
     }
   }
 
-  ${P.getOptionStyle}
+  ${C.getOptionStyle}
 `,te=h.default.span`
   display: flex;
   align-items: center;
@@ -32,4 +32,4 @@
   }
 `,oe=h.default(w.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,S=({children:e,onClick:g,to:i,isFocused:a,href:l,...R})=>{const d=r.useRef();r.useEffect(()=>{a&&d.current&&d.current.focus()},[a]);const c={tabIndex:a?0:-1,ref:d,role:"menuitem",...R},f=v=>{(v.key===u.KeyboardKeys.SPACE||v.key===u.KeyboardKeys.ENTER)&&g()};return i&&!l?o.jsx(ee,{to:i,...c,children:o.jsx(E.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):l&&!i?o.jsx(ne,{isExternal:!0,href:l,...c,children:o.jsx(E.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):o.jsx(Z,{onKeyDown:f,onMouseDown:g,type:"button",...c,children:o.jsx(E.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})})};S.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};S.propTypes={as:n.default.elementType,children:n.default.node.isRequired,href:n.default.string,isFocused:n.default.bool,onClick:n.default.func,to:n.default.string};const x=({label:e,children:g,id:i,as:a,onOpen:l=()=>{},onClose:R=()=>{},size:d,popoverPlacement:c,onReachEnd:f,...v})=>{const p=r.useRef(),k=Q.useId(i),K=r.useRef(!1),[y,m]=r.useState(!1),[C,j]=r.useState(0),b=r.Children.toArray(g),L=d==="S"?oe:w.Button,$=a||L,T=!!f&&typeof f=="function";r.useEffect(()=>{if(["string","number"].includes(typeof e)){const t=b.findIndex(s=>s.props.children===e);t!==-1&&j(t)}},[e]);const I=M.useCallbackRef(l),D=M.useCallbackRef(R);r.useEffect(()=>{K?.current?y?I():D():K.current=!0},[K,D,I,y]),r.useEffect(()=>{B.default.isValidElement(e)&&C===-1&&p.current.focus()},[e,C]);const A=t=>{y&&(t.key===u.KeyboardKeys.ESCAPE&&(t.stopPropagation(),m(!1),p.current.focus()),t.key===u.KeyboardKeys.DOWN&&j(s=>s===b.length-1?0:s+1),t.key===u.KeyboardKeys.UP&&j(s=>s===0?b.length-1:s-1))},N=t=>{(t.key===u.KeyboardKeys.ENTER||t.key===u.KeyboardKeys.SPACE)&&m(s=>!s)},F=t=>{t.preventDefault(),t.currentTarget.contains(t.relatedTarget)||m(!1)},V=t=>{t.preventDefault(),m(s=>!s)},W=()=>{T&&f()},z=b.map((t,s)=>o.jsx(Y.Flex,{as:"li",justifyContent:"center",role:"menuitem",children:r.cloneElement(t,{onClick(){t.props.onClick(),m(!1),p.current.focus()},isFocused:C===s})},s));return o.jsxs("div",{onKeyDown:A,children:[o.jsx($,{label:B.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":k,onKeyDown:N,onMouseDown:V,ref:p,type:"button",variant:"ghost",endIcon:o.jsx(te,{children:o.jsx(U.CarretDown,{"aria-hidden":!0})}),...v,children:e}),y&&o.jsx(_.Popover,{onBlur:F,placement:c,source:p,onReachEnd:W,intersectionId:T?`popover-${k}`:void 0,spacing:4,children:o.jsx(E.Box,{role:"menu",as:"ul",padding:1,id:k,children:z})})]})};x.defaultProps={as:void 0};x.displayName="SimpleMenu";x.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};x.propTypes={as:n.default.any,children:n.default.oneOfType([n.default.arrayOf(n.default.node),n.default.node]).isRequired,id:n.default.string,label:n.default.oneOfType([n.default.string,n.default.number,n.default.element]).isRequired,onClose:n.default.func,onOpen:n.default.func,onReachEnd:n.default.func,popoverPlacement:n.default.oneOf(_.POPOVER_PLACEMENTS),size:n.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=x;
+`,S=({children:e,onClick:g,to:u,isFocused:a,href:d,...R})=>{const l=r.useRef();r.useEffect(()=>{a&&l.current&&l.current.focus()},[a]);const c={tabIndex:a?0:-1,ref:l,role:"menuitem",...R},f=v=>{(v.key===i.KeyboardKeys.SPACE||v.key===i.KeyboardKeys.ENTER)&&g()};return u&&!d?o.jsx(ee,{to:u,...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):d&&!u?o.jsx(ne,{isExternal:!0,href:d,...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):o.jsx(Z,{onKeyDown:f,onMouseDown:g,type:"button",...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})})};S.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};S.propTypes={as:n.default.elementType,children:n.default.node.isRequired,href:n.default.string,isFocused:n.default.bool,onClick:n.default.func,to:n.default.string};const x=({label:e,children:g,id:u,as:a,onOpen:d=()=>{},onClose:R=()=>{},size:l,popoverPlacement:c,onReachEnd:f,...v})=>{const p=r.useRef(),k=Q.useId(u),K=r.useRef(!1),[y,m]=r.useState(!1),[P,j]=r.useState(0),E=r.Children.toArray(g),L=l==="S"?oe:w.Button,$=a||L,T=!!f&&typeof f=="function";r.useEffect(()=>{if(["string","number"].includes(typeof e)){const t=E.findIndex(s=>s.props.children===e);t!==-1&&j(t)}},[e]);const I=M.useCallbackRef(d),D=M.useCallbackRef(R);r.useEffect(()=>{K?.current?y?I():D():K.current=!0},[K,D,I,y]),r.useEffect(()=>{B.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const A=t=>{y&&(t.key===i.KeyboardKeys.ESCAPE&&(t.stopPropagation(),m(!1),p.current.focus()),t.key===i.KeyboardKeys.DOWN&&j(s=>s===E.length-1?0:s+1),t.key===i.KeyboardKeys.UP&&j(s=>s===0?E.length-1:s-1))},N=t=>{(t.key===i.KeyboardKeys.ENTER||t.key===i.KeyboardKeys.SPACE)&&m(s=>!s)},F=t=>{t.preventDefault(),t.currentTarget.contains(t.relatedTarget)||m(!1)},V=t=>{t.preventDefault(),m(s=>!s)},W=()=>{T&&f()},z=E.map((t,s)=>o.jsx(Y.Flex,{as:"li",justifyContent:"center",role:"menuitem",children:r.cloneElement(t,{onClick(){t.props.onClick(),m(!1),p.current.focus()},isFocused:P===s})},s));return o.jsxs("div",{onKeyDown:A,children:[o.jsx($,{label:B.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":k,onKeyDown:N,onMouseDown:V,ref:p,type:"button",variant:"ghost",endIcon:o.jsx(te,{children:o.jsx(H.CarretDown,{"aria-hidden":!0})}),...v,children:e}),y&&o.jsx(_.Popover,{onBlur:F,placement:c,source:p,onReachEnd:W,intersectionId:T?`popover-${k}`:void 0,spacing:4,children:o.jsx(b.Box,{role:"menu",as:"ul",padding:1,id:k,children:z})})]})};x.defaultProps={as:void 0};x.displayName="SimpleMenu";x.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};x.propTypes={as:n.default.any,children:n.default.oneOfType([n.default.arrayOf(n.default.node),n.default.node]).isRequired,id:n.default.string,label:n.default.oneOfType([n.default.string,n.default.number,n.default.element]).isRequired,onClose:n.default.func,onOpen:n.default.func,onReachEnd:n.default.func,popoverPlacement:n.default.oneOf(_.POPOVER_PLACEMENTS),size:n.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=x;

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as z } from "react/jsx-runtime";
 import B, { useRef as T, useEffect as E, useState as K, Children as H, cloneElement as U } from "react";
-import { useCallbackRef as $ } from "@radix-ui/react-use-callback-ref";
 import { CarretDown as G } from "@strapi/icons";
+import { useCallbackRef as $ } from "@strapi/ui-primitives";
 import e from "prop-types";
 import { NavLink as J } from "react-router-dom";
 import y from "styled-components";

package/dist/Tabs/useTabsFocus.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@radix-ui/react-use-callback-ref"),a=(r,s)=>{const e=u.useRef(null),t=u.useRef(null),c=o.useCallbackRef(s);return u.useEffect(()=>{if(e.current){if(t.current){const n=e.current.querySelector('[tabindex="0"]');n&&(n.focus(),c(r))}t.current||(t.current=!0)}},[r,c]),e};exports.useTabsFocus=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@strapi/ui-primitives"),i=(r,c)=>{const e=u.useRef(null),t=u.useRef(null),n=o.useCallbackRef(c);return u.useEffect(()=>{if(e.current){if(t.current){const s=e.current.querySelector('[tabindex="0"]');s&&(s.focus(),n(r))}t.current||(t.current=!0)}},[r,n]),e};exports.useTabsFocus=i;

package/dist/Tabs/useTabsFocus.js

@@ -1,5 +1,5 @@
 import { useRef as c, useEffect as f } from "react";
-import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef as s } from "@strapi/ui-primitives";
 const i = (t, o) => {
   const e = c(null), r = c(null), u = s(o);
   return f(() => {

package/dist/helpers/strings.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e.replaceAll(":","");exports.stripReactIdOfColon=t;

package/dist/helpers/strings.js

@@ -0,0 +1,4 @@
+const l = (e) => e.replaceAll(":", "");
+export {
+  l as stripReactIdOfColon
+};

package/dist/hooks/useControllableState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),i=require("@radix-ui/react-use-callback-ref");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=C({defaultProp:o,onChange:n}),r=e!==void 0,s=typeof e=="function"?e(t):e,d=r?s:t,a=i.useCallbackRef(n),b=u.useCallback(l=>{if(r){const f=typeof l=="function"?l(s):l;f!==s&&(a(f),c(l))}else c(l)},[r,s,c,a]);return[d,b]}function C({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=i.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=typeof e=="function"?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;

package/dist/hooks/useControllableState.js

@@ -1,5 +1,5 @@
 import * as r from "react";
-import { useCallbackRef as i } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef as i } from "@strapi/ui-primitives";
 function R({ prop: n, defaultProp: u, onChange: c = () => {
 } }) {
   const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {

package/dist/hooks/useIntersection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(t,s,{selectorToWatch:e,skipWhen:n=!1})=>{const r=d.useCallbackRef(s);I.useEffect(()=>{if(n||!t.current)return;const u={root:t.current,rootMargin:"0px"},g=f=>{f.forEach(i=>{i.isIntersecting&&t.current&&t.current.scrollHeight>t.current.clientHeight&&r(i)})},c=new IntersectionObserver(g,u),o=t.current.querySelector(e);return o&&c.observe(o),()=>{c.disconnect()}},[n,r,e,t])};exports.useIntersection=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),d=require("@strapi/ui-primitives"),f=(t,s,{selectorToWatch:n,skipWhen:e=!1})=>{const r=d.useCallbackRef(s);I.useEffect(()=>{if(e||!t.current)return;const u={root:t.current,rootMargin:"0px"},g=v=>{v.forEach(o=>{o.isIntersecting&&t.current&&t.current.scrollHeight>t.current.clientHeight&&r(o)})},i=new IntersectionObserver(g,u),c=t.current.querySelector(n);return c&&i.observe(c),()=>{i.disconnect()}},[e,r,n,t])};exports.useIntersection=f;

package/dist/hooks/useIntersection.js

@@ -1,5 +1,5 @@
 import { useEffect as m } from "react";
-import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef as p } from "@strapi/ui-primitives";
 const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
   const o = p(s);
   m(() => {

package/dist/hooks/useResizeObserver.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),c=require("@radix-ui/react-use-callback-ref"),a=(e,n)=>{const t=c.useCallbackRef(n);i.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(s=>{s.current&&r.observe(s.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("@strapi/ui-primitives"),u=(e,s)=>{const t=c.useCallbackRef(s);n.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(i=>{i.current&&r.observe(i.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=u;

package/dist/hooks/useResizeObserver.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect as f } from "react";
-import { useCallbackRef as s } from "@radix-ui/react-use-callback-ref";
+import { useCallbackRef as s } from "@strapi/ui-primitives";
 const c = (e, i) => {
   const t = s(i);
   f(() => {

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),M=require("../../hooks/useId.cjs"),S=require("../../hooks/useIntersection.cjs"),j=({children:l,id:a,onOpen:s,onClose:c,popoverPlacement:d,onReachEnd:o,...r})=>{const I=u.useRef(null),[f,h]=u.useState(!1),m=e=>{o&&o(e)},p=e=>{e&&typeof s=="function"?s():!e&&typeof c=="function"&&c(),h(e)},g=M.useId(a),i=`intersection-${CSS.escape(g)}`;return S.useIntersection(I,m,{selectorToWatch:`#${i}`,skipWhen:!f}),t.jsxs(n.Root,{onOpenChange:p,children:[t.jsx(n.Trigger,{...r,children:r.label}),t.jsx(n.Content,{intersectionId:i,popoverPlacement:d,children:l})]})},q=n.Item;exports.Menu=n;exports.MenuItem=q;exports.SimpleMenu=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),p=require("../../helpers/strings.cjs"),M=require("../../hooks/useId.cjs"),q=require("../../hooks/useIntersection.cjs"),R=({children:l,onOpen:s,onClose:r,popoverPlacement:a,onReachEnd:o,...c})=>{const d=u.useRef(null),[I,f]=u.useState(!1),h=e=>{o&&o(e)},g=e=>{e&&typeof s=="function"?s():!e&&typeof r=="function"&&r(),f(e)},m=M.useId(),i=`intersection-${p.stripReactIdOfColon(m)}`;return q.useIntersection(d,h,{selectorToWatch:`#${i}`,skipWhen:!I}),t.jsxs(n.Root,{onOpenChange:g,children:[t.jsx(n.Trigger,{...c,children:c.label}),t.jsx(n.Content,{intersectionId:i,popoverPlacement:a,children:l})]})},j=n.Item;exports.Menu=n;exports.MenuItem=j;exports.SimpleMenu=R;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,26 +1,27 @@
-import { jsxs as h, jsx as i } from "react/jsx-runtime";
-import { useRef as g, useState as x } from "react";
-import { Root as S, Trigger as C, Content as M, Item as R } from "./Menu.js";
-import * as b from "./Menu.js";
-import { useId as j } from "../../hooks/useId.js";
-import { useIntersection as y } from "../../hooks/useIntersection.js";
-const O = ({ children: c, id: f, onOpen: t, onClose: n, popoverPlacement: m, onReachEnd: o, ...r }) => {
-  const l = g(null), [a, p] = x(!1), u = (e) => {
+import { jsxs as I, jsx as s } from "react/jsx-runtime";
+import { useRef as h, useState as g } from "react";
+import { Root as x, Trigger as R, Content as C, Item as M } from "./Menu.js";
+import * as $ from "./Menu.js";
+import { stripReactIdOfColon as j } from "../../helpers/strings.js";
+import { useId as y } from "../../hooks/useId.js";
+import { useIntersection as O } from "../../hooks/useIntersection.js";
+const P = ({ children: c, onOpen: t, onClose: n, popoverPlacement: f, onReachEnd: o, ...r }) => {
+  const m = h(null), [l, p] = g(!1), a = (e) => {
     o && o(e);
   }, d = (e) => {
     e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
-  }, I = j(f), s = `intersection-${CSS.escape(I)}`;
-  return y(l, u, {
-    selectorToWatch: `#${s}`,
+  }, u = y(), i = `intersection-${j(u)}`;
+  return O(m, a, {
+    selectorToWatch: `#${i}`,
     /**
      * 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: !a
-  }), h(S, { onOpenChange: d, children: [i(C, { ...r, children: r.label }), i(M, { intersectionId: s, popoverPlacement: m, children: c })] });
-}, P = R;
+    skipWhen: !l
+  }), I(x, { onOpenChange: d, children: [s(R, { ...r, children: r.label }), s(C, { intersectionId: i, popoverPlacement: f, children: c })] });
+}, q = M;
 export {
-  b as Menu,
-  P as MenuItem,
-  O as SimpleMenu
+  $ as Menu,
+  q as MenuItem,
+  P as SimpleMenu
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -23,15 +23,14 @@
     "@internationalized/number": "^3.2.0",
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@strapi/ui-primitives": "^1.7.3",
+    "@strapi/ui-primitives": "^1.7.4",
     "@uiw/react-codemirror": "^4.19.16",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.3",
+    "@strapi/icons": "^1.7.4",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -62,5 +61,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "5c0de191ef278ea93a0cddadbd9b5ffbda83054f"
+  "gitHead": "bd4615f8f25e7b1c4ff931569cdc1b7c78b51a1d"
 }

package/dist/helpers/escapeSelector.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e.replace(":","-");exports.escapeSelector=t;

package/dist/helpers/escapeSelector.js

@@ -1,4 +0,0 @@
-const c = (e) => e.replace(":", "-");
-export {
-  c as escapeSelector
-};