@strapi/design-system 1.6.6 → 1.7.0-alpha.1

package/dist/Combobox/ComboboxOption.js

@@ -1,31 +1,5 @@
-import t, { forwardRef as a } from "react";
-import o from "prop-types";
-import { OptionBox as d } from "./components.js";
-import { Typography as m } from "../Typography/Typography.js";
-const r = a(({ isSelected: e, children: p, ...i }, n) => /* @__PURE__ */ t.createElement(
-  d,
-  {
-    hasRadius: !0,
-    paddingLeft: 4,
-    paddingRight: 4,
-    paddingTop: 2,
-    paddingBottom: 2,
-    role: "option",
-    background: "neutral0",
-    isSelected: e,
-    ref: n,
-    ...i
-  },
-  /* @__PURE__ */ t.createElement(m, { textColor: e ? "primary600" : "neutral800", fontWeight: e ? "bold" : null }, p)
-));
-r.defaultProps = {
-  isSelected: !1
-};
-r.propTypes = {
-  children: o.oneOfType([o.string, o.number]).isRequired,
-  isSelected: o.bool
-};
-r.displayName = "ComboboxOption";
+import { Option as o } from "./Combobox.js";
+const p = o;
 export {
-  r as ComboboxOption
+  p as ComboboxOption
 };

package/dist/DatePicker/DatePicker.cjs

@@ -1,8 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("react"),f=require("@strapi/icons"),b=require("styled-components"),k=require("./components.cjs"),P=require("./DatePickerCalendar.cjs"),R=require("./utils/formatDate.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const T=require("../Field/FieldAction.cjs"),v=require("../helpers/getDefaultLocale.cjs"),A=require("../TextInput/TextInput.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},L=I(b),S=({ariaLabel:e,onClear:i,clearLabel:j="Clear",initialDate:D,locale:h,maxDate:m,minDate:q,onChange:l,selectedDate:a,disabled:n=!1,...x})=>{const[o,c]=p.useState(!1),r=p.useRef(null),u=h||v.getDefaultLocale(),d=a?R.formatDate(a,u):"",g=()=>{n||c(s=>!s)},y=()=>{n||i&&(i(),r.current.inputWrapperRef.current.focus())},F=s=>{l&&l(s),c(!1)},C=()=>{c(!1)};return t.jsxs(k.DatePickerWrapper,{bold:o,children:[t.jsx(A.TextInput,{ref:r,onClick:g,onChange:()=>{},value:d,startAction:t.jsx(f.Calendar,{"aria-hidden":!0}),endAction:i&&d?t.jsx(T.FieldAction,{label:j,onClick:y,"aria-disabled":n||void 0,children:t.jsx(_,{})}):void 0,"aria-autocomplete":"none","aria-label":e,disabled:n,type:"text",...x}),r.current&&r.current.inputWrapperRef&&o&&t.jsx(P.DatePickerCalendar,{selectedDate:a,initialDate:D,onChange:F,onEscape:C,locale:u,popoverSource:r.current.inputWrapperRef,minDate:q,maxDate:m})]})},_=L.default(f.Cross)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),p=require("react"),f=require("@strapi/icons"),k=require("styled-components"),P=require("./components.cjs"),R=require("./DatePickerCalendar.cjs"),T=require("./utils/formatDate.cjs");require("../Field/Field.cjs");require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const I=require("../Field/FieldAction.cjs"),S=require("../helpers/getDefaultLocale.cjs"),v=require("../TextInput/TextInput.cjs"),A=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=A(k),L=({ariaLabel:e,onClear:a,clearLabel:h="Clear",initialDate:D,locale:m,maxDate:q,minDate:x,onChange:s,selectedDate:i,disabled:n=!1,...y})=>{const[o,c]=p.useState(!1),r=p.useRef(null),u=m||S.getDefaultLocale(),d=i?T.formatDate(i,u):"",g=()=>{n||c(l=>!l)},C=()=>{n||a&&(a(),r.current.inputWrapperRef.current.focus())},F=l=>{s&&s(l),c(!1)},b=()=>{c(!1)};return t.jsxs(P.DatePickerWrapper,{bold:o,children:[t.jsx(v.TextInput,{ref:r,onClick:g,onChange:()=>{},value:d,startAction:t.jsx(W,{"aria-hidden":!0}),endAction:a&&d?t.jsx(I.FieldAction,{label:h,onClick:C,"aria-disabled":n||void 0,children:t.jsx(_,{})}):void 0,"aria-autocomplete":"none","aria-label":e,disabled:n,type:"text",...y}),r.current&&r.current.inputWrapperRef&&o&&t.jsx(R.DatePickerCalendar,{selectedDate:i,initialDate:D,onChange:F,onEscape:b,locale:u,popoverSource:r.current.inputWrapperRef,minDate:x,maxDate:q})]})},_=j.default(f.Cross)`
   height: ${11/16}rem;
   width: ${11/16}rem;
 
   path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`;exports.DatePicker=S;
+`,W=j.default(f.Calendar)`
+  & > path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`;exports.DatePicker=L;

package/dist/DatePicker/DatePicker.js

@@ -1,9 +1,9 @@
 import { jsxs as R, jsx as r } from "react/jsx-runtime";
-import { useState as y, useRef as W } from "react";
-import { Cross as v, Calendar as A } from "@strapi/icons";
-import P from "styled-components";
-import { DatePickerWrapper as S } from "./components.js";
-import { DatePickerCalendar as $ } from "./DatePickerCalendar.js";
+import { useState as S, useRef as W } from "react";
+import { Cross as $, Calendar as v } from "@strapi/icons";
+import m from "styled-components";
+import { DatePickerWrapper as A } from "./components.js";
+import { DatePickerCalendar as P } from "./DatePickerCalendar.js";
 import { formatDate as j } from "./utils/formatDate.js";
 import "../Field/Field.js";
 import "../Field/FieldLabel.js";
@@ -11,73 +11,79 @@ import "../Field/FieldInput.js";
 import "../Field/FieldContext.js";
 import "../Typography/Typography.js";
 import { FieldAction as E } from "../Field/FieldAction.js";
-import { getDefaultLocale as V } from "../helpers/getDefaultLocale.js";
-import { TextInput as w } from "../TextInput/TextInput.js";
-const X = ({
-  ariaLabel: o,
+import { getDefaultLocale as I } from "../helpers/getDefaultLocale.js";
+import { TextInput as V } from "../TextInput/TextInput.js";
+const Y = ({
+  ariaLabel: e,
   onClear: i,
-  clearLabel: s = "Clear",
-  initialDate: u,
-  locale: d,
-  maxDate: h,
-  minDate: C,
-  onChange: p,
+  clearLabel: u = "Clear",
+  initialDate: d,
+  locale: h,
+  maxDate: C,
+  minDate: D,
+  onChange: c,
   selectedDate: a,
-  disabled: t = !1,
-  ...D
+  disabled: o = !1,
+  ...g
 }) => {
-  const [c, n] = y(!1), e = W(null), m = d || V(), f = a ? j(a, m) : "", g = () => {
-    t || n((l) => !l);
-  }, x = () => {
-    t || i && (i(), e.current.inputWrapperRef.current.focus());
-  }, b = (l) => {
-    p && p(l), n(!1);
-  }, k = () => {
+  const [p, n] = S(!1), t = W(null), s = h || I(), f = a ? j(a, s) : "", x = () => {
+    o || n((l) => !l);
+  }, b = () => {
+    o || i && (i(), t.current.inputWrapperRef.current.focus());
+  }, k = (l) => {
+    c && c(l), n(!1);
+  }, y = () => {
     n(!1);
   };
-  return R(S, {
-    bold: c,
-    children: [r(w, {
-      ref: e,
-      onClick: g,
+  return R(A, {
+    bold: p,
+    children: [r(V, {
+      ref: t,
+      onClick: x,
       onChange: () => {
       },
       value: f,
-      startAction: r(A, {
+      startAction: r(F, {
         "aria-hidden": !0
       }),
       endAction: i && f ? r(E, {
-        label: s,
-        onClick: x,
-        "aria-disabled": t || void 0,
-        children: r(F, {})
+        label: u,
+        onClick: b,
+        "aria-disabled": o || void 0,
+        children: r(w, {})
       }) : void 0,
       "aria-autocomplete": "none",
-      "aria-label": o,
-      disabled: t,
+      "aria-label": e,
+      disabled: o,
       type: "text",
-      ...D
-    }), e.current && e.current.inputWrapperRef && c && r($, {
+      ...g
+    }), t.current && t.current.inputWrapperRef && p && r(P, {
       selectedDate: a,
-      initialDate: u,
-      onChange: b,
-      onEscape: k,
-      locale: m,
-      popoverSource: e.current.inputWrapperRef,
-      minDate: C,
-      maxDate: h
+      initialDate: d,
+      onChange: k,
+      onEscape: y,
+      locale: s,
+      popoverSource: t.current.inputWrapperRef,
+      minDate: D,
+      maxDate: C
     })]
   });
-}, F = P(v)`
+}, w = m($)`
   height: ${11 / 16}rem;
   width: ${11 / 16}rem;
 
   path {
     fill: ${({
-  theme: o
-}) => o.colors.neutral600};
+  theme: e
+}) => e.colors.neutral600};
+  }
+`, F = m(v)`
+  & > path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral500};
   }
 `;
 export {
-  X as DatePicker
+  Y as DatePicker
 };

package/dist/DateTimePicker/parseDate.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=t=>{const e=Date.parse(t);if(!Number.isNaN(e))return new Date(e)};exports.parseDate=r;

package/dist/DateTimePicker/parseDate.js

@@ -0,0 +1,8 @@
+const r = (t) => {
+  const e = Date.parse(t);
+  if (!Number.isNaN(e))
+    return new Date(e);
+};
+export {
+  r as parseDate
+};

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/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
+};