@strapi/design-system 1.6.5 → 1.7.0-alpha.0

package/dist/IconButton/IconButton.js

@@ -1,45 +1,47 @@
-import { jsxs as $, jsx as e } from "react/jsx-runtime";
-import * as a from "react";
-import n from "styled-components";
-import { BaseButton as b } from "../BaseButton/BaseButton.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
-const I = a.forwardRef(({
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import * as e from "react";
+import s from "styled-components";
+import { BaseButton as g } from "../BaseButton/BaseButton.js";
+import { Flex as v } from "../Flex/Flex.js";
+import { Tooltip as R } from "../Tooltip/Tooltip.js";
+import { VisuallyHidden as k } from "../VisuallyHidden/VisuallyHidden.js";
+const W = e.forwardRef(({
   label: r,
-  noBorder: i = !1,
-  children: d,
-  icon: c,
+  background: i,
+  borderWidth: c,
+  noBorder: d = !1,
+  children: u,
+  icon: f,
   disabled: o = !1,
   onClick: l,
-  "aria-label": u,
-  ...f
-}, p) => {
-  const t = $(s, {
+  "aria-label": p,
+  ...h
+}, $) => {
+  const t = m(n, {
     "aria-disabled": o,
-    background: o ? "neutral150" : void 0,
-    borderWidth: i ? 0 : void 0,
+    background: o ? "neutral150" : i,
+    borderWidth: d ? 0 : c,
     justifyContent: "center",
     height: `${2}rem`,
     width: `${2}rem`,
-    ...f,
-    ref: p,
-    onClick: (h) => {
-      !o && l && l(h);
+    ...h,
+    ref: $,
+    onClick: (b) => {
+      !o && l && l(b);
     },
-    children: [e(v, {
+    children: [a(k, {
       as: "span",
-      children: r ?? u
-    }), a.cloneElement(c || d, {
+      children: r ?? p
+    }), e.cloneElement(f || u, {
       "aria-hidden": !0,
       focusable: !1
     })]
   });
-  return r ? e(g, {
+  return r ? a(R, {
     label: r,
     children: t
   }) : t;
-}), s = n(b)`
+}), n = s(g)`
   svg {
     > g,
     path {
@@ -80,7 +82,7 @@ const I = a.forwardRef(({
       }
     }
   }
-`, w = n(m)`
+`, E = s(v)`
   & span:first-child button {
     border-left: 1px solid ${({
   theme: r
@@ -96,7 +98,7 @@ const I = a.forwardRef(({
 }) => `0 ${r.borderRadius} ${r.borderRadius} 0`};
   }
 
-  & ${s} {
+  & ${n} {
     border-radius: 0;
     border-left: none;
 
@@ -147,6 +149,6 @@ const I = a.forwardRef(({
   }
 `;
 export {
-  I as IconButton,
-  w as IconButtonGroup
+  W as IconButton,
+  E as IconButtonGroup
 };

package/dist/NumberInput/NumberInput.cjs

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

package/dist/NumberInput/NumberInput.js

@@ -1,4 +1,4 @@
-import t, { useRef as g } from "react";
+import t, { useRef as N } from "react";
 import { NumberParser as S, NumberFormatter as T } from "@internationalized/number";
 import { CarretDown as v } from "@strapi/icons";
 import r from "prop-types";
@@ -12,12 +12,12 @@ import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
 import { Flex as M } from "../Flex/Flex.js";
 import { getDefaultLocale as W } from "../helpers/getDefaultLocale.js";
-import { KeyboardKeys as N } from "../helpers/keyboardKeys.js";
+import { KeyboardKeys as y } from "../helpers/keyboardKeys.js";
 import { useControllableState as X } from "../hooks/useControllableState.js";
 import { useId as Y } from "../hooks/useId.js";
-import { Icon as y } from "../Icon/Icon.js";
+import { Icon as h } from "../Icon/Icon.js";
 import { sizes as G } from "../themes/sizes.js";
-const h = z.button`
+const w = z.button`
   display: flex;
   height: 1rem;
   align-items: ${({ reverse: n }) => n ? "flex-end" : "flex-start"};
@@ -31,43 +31,43 @@ const h = z.button`
 `, J = "", u = t.forwardRef(
   ({
     size: n,
-    startAction: w,
-    name: E,
-    hint: I,
-    error: x,
+    startAction: E,
+    name: I,
+    hint: x,
+    error: A,
     label: d,
-    labelAction: A,
-    locale: V,
-    id: F,
-    onValueChange: D,
-    value: C,
+    labelAction: V,
+    locale: F,
+    id: D,
+    onValueChange: C,
+    value: p,
     step: i,
     required: k,
     disabled: s,
     ...P
   }, R) => {
-    const O = Y(F), p = V || W(), m = g(new S(p, { style: "decimal" })), c = g(new T(p, { maximumFractionDigits: 20 })), [a, $] = X({
+    const O = Y(D), f = F || W(), m = N(new S(f, { style: "decimal" })), c = N(new T(f, { maximumFractionDigits: 20 })), [a, $] = X({
       prop(e) {
-        const o = String(C);
-        return isNaN(o) || o !== e && e !== "" ? e : o;
+        const o = String(p);
+        return isNaN(o) || o !== e && e !== "" ? e : c.current.format(p);
       },
       defaultProp: J,
       onChange(e) {
         const o = m.current.parse(e);
-        D(isNaN(o) ? void 0 : o);
+        C(isNaN(o) ? void 0 : o);
       }
     }), l = (e) => {
       $(String(e));
     }, q = ({ target: { value: e } }) => {
       m.current.isValidPartialNumber(e) && l(e);
-    }, f = () => {
+    }, b = () => {
       if (!a) {
         l(i);
         return;
       }
       const e = m.current.parse(a), o = isNaN(e) ? i : e + i;
       l(c.current.format(o));
-    }, b = () => {
+    }, g = () => {
       if (!a) {
         l(-i);
         return;
@@ -77,12 +77,12 @@ const h = z.button`
     }, K = (e) => {
       if (!s)
         switch (e.key) {
-          case N.DOWN: {
-            e.preventDefault(), b();
+          case y.DOWN: {
+            e.preventDefault(), g();
             break;
           }
-          case N.UP: {
-            e.preventDefault(), f();
+          case y.UP: {
+            e.preventDefault(), b();
             break;
           }
         }
@@ -92,11 +92,11 @@ const h = z.button`
         l(o);
       }
     };
-    return /* @__PURE__ */ t.createElement(B, { name: E, hint: I, error: x, id: O, required: k }, /* @__PURE__ */ t.createElement(M, { direction: "column", alignItems: "stretch", gap: 1 }, d && /* @__PURE__ */ t.createElement(U, { action: A }, d), /* @__PURE__ */ t.createElement(
+    return /* @__PURE__ */ t.createElement(B, { name: I, hint: x, error: A, id: O, required: k }, /* @__PURE__ */ t.createElement(M, { direction: "column", alignItems: "stretch", gap: 1 }, d && /* @__PURE__ */ t.createElement(U, { action: V }, d), /* @__PURE__ */ t.createElement(
       _,
       {
         ref: R,
-        startAction: w,
+        startAction: E,
         disabled: s,
         type: "text",
         inputmode: "decimal",
@@ -106,28 +106,28 @@ const h = z.button`
         value: a,
         size: n,
         endAction: /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-          h,
+          w,
           {
             disabled: s,
             "aria-hidden": !0,
             reverse: !0,
-            onClick: f,
+            onClick: b,
             tabIndex: -1,
             type: "button",
             "data-testid": "ArrowUp"
           },
-          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
+          /* @__PURE__ */ t.createElement(h, { as: v, color: "neutral500" })
         ), /* @__PURE__ */ t.createElement(
-          h,
+          w,
           {
             disabled: s,
             "aria-hidden": !0,
-            onClick: b,
+            onClick: g,
             tabIndex: -1,
             type: "button",
             "data-testid": "ArrowDown"
           },
-          /* @__PURE__ */ t.createElement(y, { as: v, color: "neutral500" })
+          /* @__PURE__ */ t.createElement(h, { as: v, color: "neutral500" })
         )),
         ...P
       }

package/dist/RawTable/RawCell.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),l=require("react"),F=require("./RawTableContext.cjs"),v=require("../Box/Box.cjs"),s=require("../helpers/getFocusableNodes.cjs"),d=require("../helpers/keyboardKeys.cjs"),m=n=>g.jsx(y,{...n,as:"th"}),y=({coords:n,as:h="td",...x})=>{const a=l.useRef(null),{rowIndex:T,colIndex:E,setTableValues:N}=F.useTable(),[c,i]=l.useState(!1),K=e=>{const t=s.getFocusableNodes(a.current,!0);if(t.length===0||t.length===1&&s.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(u=>u.tagName!=="BUTTON")){e.preventDefault();const u=t.findIndex(r=>r===document.activeElement);if(e.key===d.KeyboardKeys.RIGHT){const r=t[u+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===d.KeyboardKeys.LEFT){const r=t[u-1];r&&(e.stopPropagation(),r.focus())}return}const o=e.key===d.KeyboardKeys.ENTER;if(o&&!c)i(!0);else if((e.key===d.KeyboardKeys.ESCAPE||o)&&c){if(o&&document.activeElement?.tagName==="A")return;i(!1),a.current.focus()}else c&&e.stopPropagation()},f=T===n.row-1&&E===n.col-1;l.useLayoutEffect(()=>{const e=s.getFocusableNodes(a.current,!0);e.length===0||e.length===1&&s.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(a.current.setAttribute("tabIndex",!c&&f?"0":"-1"),e.forEach((t,o)=>{t.setAttribute("tabIndex",c?"0":"-1"),c&&o===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",f?"0":"-1")})},[c,f]);const b=l.useCallback(()=>{const e=s.getFocusableNodes(a.current,!0);e.length>=1&&(s.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&i(!0),N({rowIndex:n.row-1,colIndex:n.col-1})},[n,N]);return l.useLayoutEffect(()=>{const e=a.current;return s.getFocusableNodes(e,!0).forEach(o=>{o.addEventListener("focus",b)}),()=>{s.getFocusableNodes(e,!0).forEach(u=>{u.removeEventListener("focus",b)})}},[b]),g.jsx(v.Box,{role:"gridcell",as:h,ref:a,onKeyDown:K,...x})};exports.RawTd=y;exports.RawTh=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react/jsx-runtime"),l=require("react"),F=require("./RawTableContext.cjs"),v=require("../Box/Box.cjs"),s=require("../helpers/getFocusableNodes.cjs"),d=require("../helpers/keyboardKeys.cjs"),w=n=>g.jsx(y,{...n,as:"th"}),y=({coords:n={col:0,row:0},as:h="td",...x})=>{const a=l.useRef(null),{rowIndex:T,colIndex:E,setTableValues:N}=F.useTable(),[c,i]=l.useState(!1),K=e=>{const t=s.getFocusableNodes(a.current,!0);if(t.length===0||t.length===1&&s.getFocusableNodesWithKeyboardNav(t).length===0)return;if(t.length>1&&!t.find(u=>u.tagName!=="BUTTON")){e.preventDefault();const u=t.findIndex(r=>r===document.activeElement);if(e.key===d.KeyboardKeys.RIGHT){const r=t[u+1];r&&(e.stopPropagation(),r.focus())}else if(e.key===d.KeyboardKeys.LEFT){const r=t[u-1];r&&(e.stopPropagation(),r.focus())}return}const o=e.key===d.KeyboardKeys.ENTER;if(o&&!c)i(!0);else if((e.key===d.KeyboardKeys.ESCAPE||o)&&c){if(o&&document.activeElement?.tagName==="A")return;i(!1),a.current.focus()}else c&&e.stopPropagation()},f=T===n.row-1&&E===n.col-1;l.useLayoutEffect(()=>{const e=s.getFocusableNodes(a.current,!0);e.length===0||e.length===1&&s.getFocusableNodesWithKeyboardNav(e).length!==0||e.length>1&&Boolean(e.find(t=>t.tagName!=="BUTTON"))?(a.current.setAttribute("tabIndex",!c&&f?"0":"-1"),e.forEach((t,o)=>{t.setAttribute("tabIndex",c?"0":"-1"),c&&o===0&&t.focus()})):e.forEach(t=>{t.setAttribute("tabIndex",f?"0":"-1")})},[c,f]);const b=l.useCallback(()=>{const e=s.getFocusableNodes(a.current,!0);e.length>=1&&(s.getFocusableNodesWithKeyboardNav(e).length!==0||!e.find(t=>t.tagName!=="BUTTON"))&&i(!0),N({rowIndex:n.row-1,colIndex:n.col-1})},[n,N]);return l.useLayoutEffect(()=>{const e=a.current;return s.getFocusableNodes(e,!0).forEach(o=>{o.addEventListener("focus",b)}),()=>{s.getFocusableNodes(e,!0).forEach(u=>{u.removeEventListener("focus",b)})}},[b]),g.jsx(v.Box,{role:"gridcell",as:h,ref:a,onKeyDown:K,...x})};exports.RawTd=y;exports.RawTh=w;

package/dist/RawTable/RawCell.js

@@ -8,7 +8,10 @@ const D = (n) => g(B, {
   ...n,
   as: "th"
 }), B = ({
-  coords: n,
+  coords: n = {
+    col: 0,
+    row: 0
+  },
   as: h = "td",
   ...E
 }) => {

package/dist/Select/MultiSelect.cjs

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

package/dist/Select/MultiSelect.js

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

package/dist/Select/MultiSelectNested.cjs

@@ -1 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),f=require("prop-types"),d=require("./OptGroup.cjs"),c=require("./Option.cjs"),y=require("./Select.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(i),p=l(f),s=({options:e,...n})=>t.default.createElement(y.Select,{multi:!0,...n},e.map(({label:r,value:o,children:a})=>a?t.default.createElement(d.OptGroup,{key:r,label:r},a?.map(u=>t.default.createElement(c.Option,{key:u.value,value:u.value},u.label))):t.default.createElement(c.Option,{key:o,value:o},r)));s.propTypes={options:p.default.arrayOf(p.default.object).isRequired};exports.MultiSelectNested=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react/jsx-runtime"),r=require("styled-components"),i=require("./MultiSelect.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=a(r),s=({options:e,...n})=>u.jsx(i.MultiSelect,{...n,children:e.map(l=>"children"in l?u.jsx(i.MultiSelectGroup,{label:l.label,values:l.children.map(t=>t.value.toString()),children:l.children.map(t=>u.jsx(d,{value:t.value,children:t.label},t.value))},l.label):u.jsx(i.MultiSelectOption,{value:l.value,children:l.label},l.value))}),d=c.default(i.MultiSelectOption)`
+  padding-left: ${({theme:e})=>e.spaces[7]};
+`;exports.MultiSelectNested=s;

package/dist/Select/MultiSelectNested.js

@@ -1,14 +1,27 @@
-import e from "react";
-import p from "prop-types";
-import { OptGroup as f } from "./OptGroup.js";
-import { Option as a } from "./Option.js";
-import { Select as n } from "./Select.js";
-const c = ({ options: u, ...i }) => /* @__PURE__ */ e.createElement(n, { multi: !0, ...i }, u.map(
-  ({ label: t, value: o, children: m }) => m ? /* @__PURE__ */ e.createElement(f, { key: t, label: t }, m?.map((r) => /* @__PURE__ */ e.createElement(a, { key: r.value, value: r.value }, r.label))) : /* @__PURE__ */ e.createElement(a, { key: o, value: o }, t)
-));
-c.propTypes = {
-  options: p.arrayOf(p.object).isRequired
-};
+import { jsx as r } from "react/jsx-runtime";
+import n from "styled-components";
+import { MultiSelectOption as i, MultiSelect as u, MultiSelectGroup as c } from "./MultiSelect.js";
+const o = ({
+  options: a,
+  ...t
+}) => r(u, {
+  ...t,
+  children: a.map((e) => "children" in e ? r(c, {
+    label: e.label,
+    values: e.children.map((l) => l.value.toString()),
+    children: e.children.map((l) => r(d, {
+      value: l.value,
+      children: l.label
+    }, l.value))
+  }, e.label) : r(i, {
+    value: e.value,
+    children: e.label
+  }, e.value))
+}), d = n(i)`
+  padding-left: ${({
+  theme: a
+}) => a.spaces[7]};
+`;
 export {
-  c as MultiSelectNested
+  o as MultiSelectNested
 };

package/dist/Select/OptGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("prop-types"),d=require("./Option.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=u(s),r=u(i),a=({children:e,label:o,...p})=>{const l=e.map(n=>n.props.value);return t.default.createElement(t.default.Fragment,null,t.default.createElement(d.Option,{"data-opt-group":!0,"data-opt-group-children":l,"aria-label":`${o}, ${e.length} items`,...p},o),e)};a.propTypes={children:r.default.arrayOf(r.default.node).isRequired,label:r.default.string.isRequired};a.displayName="OptGroup";exports.OptGroup=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./MultiSelect.cjs"),t=e.MultiSelectGroup;exports.OptGroup=t;

package/dist/Select/OptGroup.js

@@ -1,24 +1,5 @@
-import r from "react";
-import t from "prop-types";
-import { Option as m } from "./Option.js";
-const o = ({ children: e, label: p, ...a }) => {
-  const i = e.map((l) => l.props.value);
-  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
-    m,
-    {
-      "data-opt-group": !0,
-      "data-opt-group-children": i,
-      "aria-label": `${p}, ${e.length} items`,
-      ...a
-    },
-    p
-  ), e);
-};
-o.propTypes = {
-  children: t.arrayOf(t.node).isRequired,
-  label: t.string.isRequired
-};
-o.displayName = "OptGroup";
+import { MultiSelectGroup as o } from "./MultiSelect.js";
+const p = o;
 export {
-  o as OptGroup
+  p as OptGroup
 };