@strapi/design-system 1.7.0 → 1.7.1

package/dist/Searchbar/Searchbar.cjs

@@ -1,29 +1,29 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),d=require("@strapi/icons"),E=require("prop-types"),S=require("styled-components"),x=require("../Field/Field.cjs"),_=require("../Field/FieldLabel.cjs"),a=require("../Field/FieldInput.cjs");require("react/jsx-runtime");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const v=require("../Field/FieldAction.cjs"),o=require("../Flex/Flex.cjs"),$=require("../themes/sizes.cjs"),z=require("../themes/utils.cjs"),C=require("../VisuallyHidden/VisuallyHidden.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(s),l=i(E),n=i(S),I=n.default(o.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),a=require("@strapi/icons"),s=require("prop-types"),t=require("styled-components"),g=require("../themes/sizes.cjs"),S=require("../themes/utils.cjs"),n=require("../Field/FieldInput.cjs"),u=require("../Flex/Flex.cjs"),m=require("../Field/Field.cjs"),$=require("../VisuallyHidden/VisuallyHidden.cjs"),v=require("../Field/FieldLabel.cjs"),z=require("../Field/FieldAction.cjs"),C=t(u.Flex)`
   font-size: 0.5rem;
   svg path {
     fill: ${({theme:e})=>e.colors.neutral400};
   }
-`,p=n.default(o.Flex)`
+`,d=t(u.Flex)`
   font-size: 0.8rem;
 
   svg path {
     fill: ${({theme:e})=>e.colors.neutral800};
   }
-`,T=n.default.div`
+`,I=t.div`
   border-radius: ${({theme:e})=>e.borderRadius};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
 
   &:focus-within {
-    ${p} {
+    ${d} {
       svg path {
         fill: ${({theme:e})=>e.colors.primary600};
       }
     }
   }
 
-  ${a.InputWrapper} {
+  ${n.InputWrapper} {
     border: 1px solid transparent;
   }
 
-  ${z.inputFocusStyle(a.InputWrapper)}
-`,r=s.forwardRef(({name:e,size:f,children:F,value:u,onClear:y,clearLabel:h,...m},q)=>{const c=s.useRef(null),b=u.length>0,j=R=>{y(R),c.current.focus()},g=q||c;return t.default.createElement(T,null,t.default.createElement(x.Field,{name:e},t.default.createElement(C.VisuallyHidden,null,t.default.createElement(_.FieldLabel,null,F)),t.default.createElement(a.FieldInput,{ref:g,value:u,startAction:t.default.createElement(p,null,t.default.createElement(d.Search,{"aria-hidden":!0})),size:f,endAction:b?t.default.createElement(v.FieldAction,{label:h,onClick:j},t.default.createElement(I,null,t.default.createElement(d.Cross,null))):void 0,...m})))});r.displayName="Searchbar";r.defaultProps={value:"",size:"M"};r.propTypes={children:l.default.node.isRequired,clearLabel:l.default.string.isRequired,name:l.default.string.isRequired,onClear:l.default.func.isRequired,size:l.default.oneOf(Object.keys($.sizes.input)),value:l.default.string};exports.Searchbar=r;
+  ${S.inputFocusStyle(n.InputWrapper)}
+`,i=c.forwardRef(({name:e,size:p,children:h,value:o,onClear:f,clearLabel:q,...x},b)=>{const l=c.useRef(null),j=o.length>0,F=R=>{f(R),l.current.focus()},y=b||l;return r.jsx(I,{children:r.jsxs(m.Field,{name:e,children:[r.jsx($.VisuallyHidden,{children:r.jsx(v.FieldLabel,{children:h})}),r.jsx(n.FieldInput,{ref:y,value:o,startAction:r.jsx(d,{children:r.jsx(a.Search,{"aria-hidden":!0})}),size:p,endAction:j?r.jsx(z.FieldAction,{label:q,onClick:F,children:r.jsx(C,{children:r.jsx(a.Cross,{})})}):void 0,...x})]})})});i.displayName="Searchbar";i.defaultProps={value:"",size:"M"};i.propTypes={children:s.node.isRequired,clearLabel:s.string.isRequired,name:s.string.isRequired,onClear:s.func.isRequired,size:s.oneOf(Object.keys(g.sizes.input)),value:s.string};exports.Searchbar=i;

package/dist/Searchbar/Searchbar.js

@@ -1,75 +1,76 @@
-import r, { forwardRef as y, useRef as $ } from "react";
-import { Search as S, Cross as v } from "@strapi/icons";
-import t from "prop-types";
-import o from "styled-components";
-import { Field as C } from "../Field/Field.js";
-import { FieldLabel as F } from "../Field/FieldLabel.js";
-import { InputWrapper as a, FieldInput as w } from "../Field/FieldInput.js";
-import "react/jsx-runtime";
-import "../Field/FieldContext.js";
-import "../Typography/Typography.js";
-import { FieldAction as z } from "../Field/FieldAction.js";
-import { Flex as s } from "../Flex/Flex.js";
-import { sizes as q } from "../themes/sizes.js";
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as y, useRef as $ } from "react";
+import { Search as C, Cross as S } from "@strapi/icons";
+import o from "prop-types";
+import i from "styled-components";
+import { sizes as v } from "../themes/sizes.js";
 import { inputFocusStyle as x } from "../themes/utils.js";
-import { VisuallyHidden as I } from "../VisuallyHidden/VisuallyHidden.js";
-const W = o(s)`
+import { InputWrapper as l, FieldInput as F } from "../Field/FieldInput.js";
+import { Flex as a } from "../Flex/Flex.js";
+import { Field as w } from "../Field/Field.js";
+import { VisuallyHidden as z } from "../VisuallyHidden/VisuallyHidden.js";
+import { FieldLabel as q } from "../Field/FieldLabel.js";
+import { FieldAction as I } from "../Field/FieldAction.js";
+const W = i(a)`
   font-size: 0.5rem;
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral400};
+    fill: ${({ theme: r }) => r.colors.neutral400};
   }
-`, m = o(s)`
+`, p = i(a)`
   font-size: 0.8rem;
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral800};
+    fill: ${({ theme: r }) => r.colors.neutral800};
   }
-`, A = o.div`
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+`, j = i.div`
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  box-shadow: ${({ theme: r }) => r.shadows.filterShadow};
 
   &:focus-within {
-    ${m} {
+    ${p} {
       svg path {
-        fill: ${({ theme: e }) => e.colors.primary600};
+        fill: ${({ theme: r }) => r.colors.primary600};
       }
     }
   }
 
-  ${a} {
+  ${l} {
     border: 1px solid transparent;
   }
 
-  ${x(a)}
-`, l = y(({ name: e, size: p, children: c, value: i, onClear: u, clearLabel: d, ...f }, h) => {
-  const n = $(null), b = i.length > 0, E = (g) => {
-    u(g), n.current.focus();
-  }, R = h || n;
-  return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(C, { name: e }, /* @__PURE__ */ r.createElement(I, null, /* @__PURE__ */ r.createElement(F, null, c)), /* @__PURE__ */ r.createElement(
-    w,
-    {
-      ref: R,
-      value: i,
-      startAction: /* @__PURE__ */ r.createElement(m, null, /* @__PURE__ */ r.createElement(S, { "aria-hidden": !0 })),
-      size: p,
-      endAction: b ? /* @__PURE__ */ r.createElement(z, { label: d, onClick: E }, /* @__PURE__ */ r.createElement(W, null, /* @__PURE__ */ r.createElement(v, null))) : void 0,
-      ...f
-    }
-  )));
+  ${x(l)}
+`, t = y(({ name: r, size: c, children: d, value: s, onClear: m, clearLabel: f, ...u }, h) => {
+  const n = $(null), b = s.length > 0;
+  return /* @__PURE__ */ e(j, { children: /* @__PURE__ */ g(w, { name: r, children: [
+    /* @__PURE__ */ e(z, { children: /* @__PURE__ */ e(q, { children: d }) }),
+    /* @__PURE__ */ e(
+      F,
+      {
+        ref: h || n,
+        value: s,
+        startAction: /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(C, { "aria-hidden": !0 }) }),
+        size: c,
+        endAction: b ? /* @__PURE__ */ e(I, { label: f, onClick: (R) => {
+          m(R), n.current.focus();
+        }, children: /* @__PURE__ */ e(W, { children: /* @__PURE__ */ e(S, {}) }) }) : void 0,
+        ...u
+      }
+    )
+  ] }) });
 });
-l.displayName = "Searchbar";
-l.defaultProps = {
+t.displayName = "Searchbar";
+t.defaultProps = {
   value: "",
   size: "M"
 };
-l.propTypes = {
-  children: t.node.isRequired,
-  clearLabel: t.string.isRequired,
-  name: t.string.isRequired,
-  onClear: t.func.isRequired,
-  size: t.oneOf(Object.keys(q.input)),
-  value: t.string
+t.propTypes = {
+  children: o.node.isRequired,
+  clearLabel: o.string.isRequired,
+  name: o.string.isRequired,
+  onClear: o.func.isRequired,
+  size: o.oneOf(Object.keys(v.input)),
+  value: o.string
 };
 export {
-  l as Searchbar
+  t as Searchbar
 };

package/dist/Searchbar/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./Searchbar.cjs"),e=require("./SearchForm.cjs");exports.Searchbar=r.Searchbar;exports.SearchForm=e.SearchForm;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Searchbar.cjs"),e=require("./SearchForm.cjs");exports.Searchbar=r.Searchbar;exports.SearchForm=e.SearchForm;

package/dist/Select/MultiSelect.cjs

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

package/dist/Select/MultiSelect.js

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

package/dist/Select/MultiSelectNested.cjs

@@ -1,3 +1,3 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("styled-components"),i=require("./MultiSelect.cjs"),a=({options:u,...r})=>t.jsx(i.MultiSelect,{...r,children:u.map(e=>"children"in e?t.jsx(i.MultiSelectGroup,{label:e.label,values:e.children.map(l=>l.value.toString()),children:e.children.map(l=>t.jsx(c,{value:l.value,children:l.label},l.value))},e.label):t.jsx(i.MultiSelectOption,{value:e.value,children:e.label},e.value))}),c=n(i.MultiSelectOption)`
+  padding-left: ${({theme:u})=>u.spaces[7]};
+`;exports.MultiSelectNested=a;

package/dist/Select/MultiSelectNested.js

@@ -1,26 +1,8 @@
 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]};
+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 {
   o as MultiSelectNested

package/dist/Select/OptGroup.cjs

@@ -1 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./MultiSelect.cjs"),t=e.MultiSelectGroup;exports.OptGroup=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./MultiSelect.cjs");/**
+ * @preserve
+ * @deprecated This component is only fit for the MultiSelect component.
+ * Therefore, you should import the MultiSelectGroup component instead.
+ */const e=t.MultiSelectGroup;exports.OptGroup=e;

package/dist/Select/OptGroup.js

@@ -1,4 +1,9 @@
 import { MultiSelectGroup as o } from "./MultiSelect.js";
+/**
+ * @preserve
+ * @deprecated This component is only fit for the MultiSelect component.
+ * Therefore, you should import the MultiSelectGroup component instead.
+ */
 const p = o;
 export {
   p as OptGroup

package/dist/Select/Option.cjs

@@ -1 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),l=require("./MultiSelect.cjs"),c=require("./SingleSelect.cjs"),n=({multi:i,...e})=>i?t.jsx(l.MultiSelectOption,{...e}):t.jsx(c.SingleSelectOption,{...e});exports.Option=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("./MultiSelect.cjs"),o=require("./Select.cjs"),l=require("./SingleSelect.cjs");/**
+ * @preserve
+ * @deprecated You should import the specific type of option you want to render,
+ * e.g. `import { MultiSelectOption } from '@strapi/design-system';`
+ */const u=({multi:n,...e})=>{const i=o.useSelectContext();return n||i.multi?t.jsx(c.MultiSelectOption,{...e}):t.jsx(l.SingleSelectOption,{...e})};exports.Option=u;

package/dist/Select/Option.js

@@ -1,14 +1,16 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { MultiSelectOption as m } from "./MultiSelect.js";
-import { SingleSelectOption as p } from "./SingleSelect.js";
-const l = ({
-  multi: i,
-  ...o
-}) => i ? t(m, {
-  ...o
-}) : t(p, {
-  ...o
-});
+import { useSelectContext as n } from "./Select.js";
+import { SingleSelectOption as r } from "./SingleSelect.js";
+/**
+ * @preserve
+ * @deprecated You should import the specific type of option you want to render,
+ * e.g. `import { MultiSelectOption } from '@strapi/design-system';`
+ */
+const u = ({ multi: e, ...t }) => {
+  const i = n();
+  return e || i.multi ? o(m, { ...t }) : o(r, { ...t });
+};
 export {
-  l as Option
+  u as Option
 };

package/dist/Select/Select.cjs

@@ -1 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),l=require("./MultiSelect.cjs"),c=require("./SingleSelect.cjs"),i=e=>e.multi||e.withTags?t.jsx(l.MultiSelect,{...e}):t.jsx(c.SingleSelect,{...e});exports.Select=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),o=require("react"),r=require("./MultiSelect.cjs"),a=require("./SingleSelect.cjs");function s(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const u=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,u.get?u:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const l=s(o),i=l.createContext({multi:!1}),S=()=>l.useContext(i);/**
+ * @preserve
+ * @deprecated You should import the specific type of select you want to render
+ *
+ * e.g. `import { MultiSelect } from '@strapi/design-system';`
+ */const g=e=>{const t=l.useMemo(()=>({multi:!!(e.multi||e.withTags)}),[e.multi,e.withTags]);return c.jsx(i.Provider,{value:t,children:e.multi||e.withTags?c.jsx(r.MultiSelect,{...e}):c.jsx(a.SingleSelect,{...e})})};exports.Select=g;exports.useSelectContext=S;