@strapi/design-system 1.7.0-alpha.4 → 1.7.0

package/README.md

@@ -18,7 +18,7 @@ plugins more efficiently.
 
 ## Installation
 
-Install Strapi Design System and itdesign-system dependencies:
+Install Strapi Design System and its peer dependencies:
 
 ```sh
 $ yarn add react react-dom @strapi/design-system @strapi/icons styled-components react-router-dom

package/dist/Combobox/Combobox.cjs

@@ -80,6 +80,7 @@
   padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
   background-color: ${({theme:e})=>e.colors.neutral0};
   border-radius: ${({theme:e})=>e.borderRadius};
+  user-select: none;
 
   &[data-selected] {
     background-color: ${({theme:e})=>e.colors.primary100};

package/dist/Combobox/Combobox.js

@@ -320,6 +320,7 @@ const he = ({
   border-radius: ${({
   theme: e
 }) => e.borderRadius};
+  user-select: none;
 
   &[data-selected] {
     background-color: ${({

package/dist/Layout/HeaderLayout.cjs

@@ -1,3 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("prop-types"),v=require("styled-components"),d=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),B=require("../hooks/useElementOnScreen.cjs"),b=require("../hooks/useResizeObserver.cjs"),s=require("../Typography/Typography.cjs"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(c),a=p(E),R=p(v),T=()=>{const t=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{t.current&&r(t.current.getBoundingClientRect())},[t]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:t,headerSize:l}},f=t=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return e.default.createElement(e.default.Fragment,null,e.default.createElement("div",{style:{height:o?.height},ref:l},r&&e.default.createElement(u,{ref:n,...t})),!r&&e.default.createElement(u,{...t,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
-  width: ${t=>t.width}px;
-`,u=e.default.forwardRef(({navigationAction:t,primaryAction:l,secondaryAction:r,subtitle:n,title:o,sticky:m,width:h,...y},x)=>{const g=typeof n=="string";return m?e.default.createElement(L,{paddingLeft:6,paddingRight:6,paddingTop:3,paddingBottom:3,position:"fixed",top:0,right:0,background:"neutral0",shadow:"tableShadow",width:h,zIndex:4,"data-strapi-header-sticky":!0},e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,null,t&&e.default.createElement(d.Box,{paddingRight:3},t),e.default.createElement(d.Box,null,e.default.createElement(s.Typography,{variant:"beta",as:"h1",...y},o),g?e.default.createElement(s.Typography,{variant:"pi",textColor:"neutral600"},n):n),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),e.default.createElement(i.Flex,null,l?e.default.createElement(d.Box,{paddingLeft:2},l):void 0))):e.default.createElement(d.Box,{ref:x,paddingLeft:10,paddingRight:10,paddingBottom:8,paddingTop:t?6:8,background:"neutral100","data-strapi-header":!0},t?e.default.createElement(d.Box,{paddingBottom:2},t):null,e.default.createElement(i.Flex,{justifyContent:"space-between"},e.default.createElement(i.Flex,{minWidth:0},e.default.createElement(s.Typography,{as:"h1",variant:"alpha",...y},o),r?e.default.createElement(d.Box,{paddingLeft:4},r):null),l),g?e.default.createElement(s.Typography,{variant:"epsilon",textColor:"neutral600",as:"p"},n):n)});u.displayName="BaseHeaderLayout";u.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0,sticky:!1,width:void 0};u.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,sticky:a.default.bool,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired,width:a.default.number};f.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0};f.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired};exports.BaseHeaderLayout=u;exports.HeaderLayout=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),E=require("prop-types"),v=require("styled-components"),d=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),B=require("../hooks/useElementOnScreen.cjs"),b=require("../hooks/useResizeObserver.cjs"),s=require("../Typography/Typography.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=p(c),a=p(E),R=p(v),T=()=>{const e=c.useRef(null),[l,r]=c.useState(null),[n,o]=B.useElementOnScreen({root:null,rootMargin:"0px",threshold:0});return b.useResizeObserver(n,()=>{n.current&&r(n.current.getBoundingClientRect())}),c.useEffect(()=>{e.current&&r(e.current.getBoundingClientRect())},[e]),{containerRef:n,isVisible:o,baseHeaderLayoutRef:e,headerSize:l}},f=e=>{const{containerRef:l,isVisible:r,baseHeaderLayoutRef:n,headerSize:o}=T();return t.default.createElement(t.default.Fragment,null,t.default.createElement("div",{style:{height:o?.height},ref:l},r&&t.default.createElement(i,{ref:n,...e})),!r&&t.default.createElement(i,{...e,sticky:!0,width:o?.width}))};f.displayName="HeaderLayout";const L=R.default(d.Box)`
+  width: ${e=>e.width}px;
+  z-index: ${({theme:e})=>e.zIndices[1]};
+`,i=t.default.forwardRef(({navigationAction:e,primaryAction:l,secondaryAction:r,subtitle:n,title:o,sticky:m,width:h,...y},x)=>{const g=typeof n=="string";return m?t.default.createElement(L,{paddingLeft:6,paddingRight:6,paddingTop:3,paddingBottom:3,position:"fixed",top:0,right:0,background:"neutral0",shadow:"tableShadow",width:h,"data-strapi-header-sticky":!0},t.default.createElement(u.Flex,{justifyContent:"space-between"},t.default.createElement(u.Flex,null,e&&t.default.createElement(d.Box,{paddingRight:3},e),t.default.createElement(d.Box,null,t.default.createElement(s.Typography,{variant:"beta",as:"h1",...y},o),g?t.default.createElement(s.Typography,{variant:"pi",textColor:"neutral600"},n):n),r?t.default.createElement(d.Box,{paddingLeft:4},r):null),t.default.createElement(u.Flex,null,l?t.default.createElement(d.Box,{paddingLeft:2},l):void 0))):t.default.createElement(d.Box,{ref:x,paddingLeft:10,paddingRight:10,paddingBottom:8,paddingTop:e?6:8,background:"neutral100","data-strapi-header":!0},e?t.default.createElement(d.Box,{paddingBottom:2},e):null,t.default.createElement(u.Flex,{justifyContent:"space-between"},t.default.createElement(u.Flex,{minWidth:0},t.default.createElement(s.Typography,{as:"h1",variant:"alpha",...y},o),r?t.default.createElement(d.Box,{paddingLeft:4},r):null),l),g?t.default.createElement(s.Typography,{variant:"epsilon",textColor:"neutral600",as:"p"},n):n)});i.displayName="BaseHeaderLayout";i.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0,sticky:!1,width:void 0};i.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,sticky:a.default.bool,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired,width:a.default.number};f.defaultProps={navigationAction:void 0,primaryAction:void 0,secondaryAction:void 0,subtitle:void 0};f.propTypes={navigationAction:a.default.node,primaryAction:a.default.node,secondaryAction:a.default.node,subtitle:a.default.oneOfType([a.default.string,a.default.node]),title:a.default.string.isRequired};exports.BaseHeaderLayout=i;exports.HeaderLayout=f;

package/dist/Layout/HeaderLayout.js

@@ -1,36 +1,37 @@
 import e, { useRef as h, useState as E, useEffect as v } from "react";
-import t from "prop-types";
+import n from "prop-types";
 import R from "styled-components";
-import { Box as i } from "../Box/Box.js";
+import { Box as a } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
 import { useElementOnScreen as b } from "../hooks/useElementOnScreen.js";
 import { useResizeObserver as w } from "../hooks/useResizeObserver.js";
 import { Typography as c } from "../Typography/Typography.js";
 const L = () => {
-  const n = h(null), [o, a] = E(null), [r, d] = b({
+  const t = h(null), [o, i] = E(null), [r, d] = b({
     root: null,
     rootMargin: "0px",
     threshold: 0
   });
   return w(r, () => {
-    r.current && a(r.current.getBoundingClientRect());
+    r.current && i(r.current.getBoundingClientRect());
   }), v(() => {
-    n.current && a(n.current.getBoundingClientRect());
-  }, [n]), {
+    t.current && i(t.current.getBoundingClientRect());
+  }, [t]), {
     containerRef: r,
     isVisible: d,
-    baseHeaderLayoutRef: n,
+    baseHeaderLayoutRef: t,
     headerSize: o
   };
-}, p = (n) => {
-  const { containerRef: o, isVisible: a, baseHeaderLayoutRef: r, headerSize: d } = L();
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { height: d?.height }, ref: o }, a && /* @__PURE__ */ e.createElement(s, { ref: r, ...n })), !a && /* @__PURE__ */ e.createElement(s, { ...n, sticky: !0, width: d?.width }));
+}, p = (t) => {
+  const { containerRef: o, isVisible: i, baseHeaderLayoutRef: r, headerSize: d } = L();
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { style: { height: d?.height }, ref: o }, i && /* @__PURE__ */ e.createElement(s, { ref: r, ...t })), !i && /* @__PURE__ */ e.createElement(s, { ...t, sticky: !0, width: d?.width }));
 };
 p.displayName = "HeaderLayout";
-const x = R(i)`
-  width: ${(n) => n.width}px;
+const x = R(a)`
+  width: ${(t) => t.width}px;
+  z-index: ${({ theme: t }) => t.zIndices[1]};
 `, s = e.forwardRef(
-  ({ navigationAction: n, primaryAction: o, secondaryAction: a, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
+  ({ navigationAction: t, primaryAction: o, secondaryAction: i, subtitle: r, title: d, sticky: f, width: g, ...u }, y) => {
     const m = typeof r == "string";
     return f ? /* @__PURE__ */ e.createElement(
       x,
@@ -45,23 +46,22 @@ const x = R(i)`
         background: "neutral0",
         shadow: "tableShadow",
         width: g,
-        zIndex: 4,
         "data-strapi-header-sticky": !0
       },
-      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, null, n && /* @__PURE__ */ e.createElement(i, { paddingRight: 3 }, n), /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(c, { variant: "beta", as: "h1", ...u }, d), m ? /* @__PURE__ */ e.createElement(c, { variant: "pi", textColor: "neutral600" }, r) : r), a ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 4 }, a) : null), /* @__PURE__ */ e.createElement(l, null, o ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 2 }, o) : void 0))
+      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, null, t && /* @__PURE__ */ e.createElement(a, { paddingRight: 3 }, t), /* @__PURE__ */ e.createElement(a, null, /* @__PURE__ */ e.createElement(c, { variant: "beta", as: "h1", ...u }, d), m ? /* @__PURE__ */ e.createElement(c, { variant: "pi", textColor: "neutral600" }, r) : r), i ? /* @__PURE__ */ e.createElement(a, { paddingLeft: 4 }, i) : null), /* @__PURE__ */ e.createElement(l, null, o ? /* @__PURE__ */ e.createElement(a, { paddingLeft: 2 }, o) : void 0))
     ) : /* @__PURE__ */ e.createElement(
-      i,
+      a,
       {
         ref: y,
         paddingLeft: 10,
         paddingRight: 10,
         paddingBottom: 8,
-        paddingTop: n ? 6 : 8,
+        paddingTop: t ? 6 : 8,
         background: "neutral100",
         "data-strapi-header": !0
       },
-      n ? /* @__PURE__ */ e.createElement(i, { paddingBottom: 2 }, n) : null,
-      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, { minWidth: 0 }, /* @__PURE__ */ e.createElement(c, { as: "h1", variant: "alpha", ...u }, d), a ? /* @__PURE__ */ e.createElement(i, { paddingLeft: 4 }, a) : null), o),
+      t ? /* @__PURE__ */ e.createElement(a, { paddingBottom: 2 }, t) : null,
+      /* @__PURE__ */ e.createElement(l, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(l, { minWidth: 0 }, /* @__PURE__ */ e.createElement(c, { as: "h1", variant: "alpha", ...u }, d), i ? /* @__PURE__ */ e.createElement(a, { paddingLeft: 4 }, i) : null), o),
       m ? /* @__PURE__ */ e.createElement(c, { variant: "epsilon", textColor: "neutral600", as: "p" }, r) : r
     );
   }
@@ -76,13 +76,13 @@ s.defaultProps = {
   width: void 0
 };
 s.propTypes = {
-  navigationAction: t.node,
-  primaryAction: t.node,
-  secondaryAction: t.node,
-  sticky: t.bool,
-  subtitle: t.oneOfType([t.string, t.node]),
-  title: t.string.isRequired,
-  width: t.number
+  navigationAction: n.node,
+  primaryAction: n.node,
+  secondaryAction: n.node,
+  sticky: n.bool,
+  subtitle: n.oneOfType([n.string, n.node]),
+  title: n.string.isRequired,
+  width: n.number
 };
 p.defaultProps = {
   navigationAction: void 0,
@@ -91,11 +91,11 @@ p.defaultProps = {
   subtitle: void 0
 };
 p.propTypes = {
-  navigationAction: t.node,
-  primaryAction: t.node,
-  secondaryAction: t.node,
-  subtitle: t.oneOfType([t.string, t.node]),
-  title: t.string.isRequired
+  navigationAction: n.node,
+  primaryAction: n.node,
+  secondaryAction: n.node,
+  subtitle: n.oneOfType([n.string, n.node]),
+  title: n.string.isRequired
 };
 export {
   s as BaseHeaderLayout,

package/dist/Popover/Popover.cjs

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

package/dist/Popover/Popover.js

@@ -1,15 +1,17 @@
 import { jsx as i, jsxs as x } from "react/jsx-runtime";
 import * as a from "react";
-import { useFloating as w, offset as k, shift as y, flip as $, autoUpdate as v } from "@floating-ui/react-dom";
-import c from "styled-components";
+import { useFloating as w, offset as k, shift as $, flip as y, autoUpdate as v } from "@floating-ui/react-dom";
+import f from "styled-components";
 import { Box as d } from "../Box/Box.js";
 import { useIntersection as P } from "../hooks/useIntersection.js";
 import { Portal as S } from "../Portal/Portal.js";
-const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], W = c(d)`
+const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"], W = f(d)`
   box-shadow: ${({
   theme: t
 }) => t.shadows.filterShadow};
-  z-index: 4;
+  z-index: ${({
+  theme: t
+}) => t.zIndices[0]};
   border: 1px solid ${({
   theme: t
 }) => t.colors.neutral150};
@@ -28,7 +30,7 @@ const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "
   const [p, u] = a.useState(void 0), {
     x: h,
     y: m,
-    reference: f,
+    reference: c,
     floating: b,
     strategy: g
   } = w({
@@ -36,12 +38,12 @@ const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "
     placement: n ? "bottom" : s,
     middleware: [k({
       mainAxis: o
-    }), y(), $()],
+    }), $(), y()],
     whileElementsMounted: v
   });
   return a.useLayoutEffect(() => {
-    f(t.current);
-  }, [t, f]), a.useLayoutEffect(() => {
+    c(t.current);
+  }, [t, c]), a.useLayoutEffect(() => {
     r && u(t.current.offsetWidth);
   }, [r, t]), i(W, {
     ref: b,
@@ -68,7 +70,7 @@ const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "
   }), {
     selectorToWatch: `#${e}`,
     skipWhen: !e || !o
-  }), x(L, {
+  }), x(z, {
     ref: s,
     ...r,
     children: [t, e && o && i(d, {
@@ -77,7 +79,7 @@ const T = ["top", "top-start", "top-end", "right", "right-start", "right-end", "
       height: "1px"
     })]
   });
-}, L = c(d)`
+}, z = f(d)`
   // 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
   max-height: ${3 * 5}rem;
   overflow-y: auto;

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"),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)`
+"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)`
   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`
+  ${({theme:e,$indeterminate:n})=>n&&y.css`
       &::after {
         content: '';
         display: block;
@@ -18,7 +18,7 @@
       }
     `}
 
-  ${({$selected:e})=>e&&I.css`
+  ${({$selected:e})=>e&&y.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: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;
+`,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;

package/dist/Select/MultiSelect.js

@@ -1,10 +1,10 @@
-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 { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as d 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 { Box as I } from "../Box/Box.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";
@@ -12,104 +12,104 @@ 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 { 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 M } from "../Typography/Typography.js";
+import { Typography as O } from "../Typography/Typography.js";
 const Be = ({
   children: r,
-  clearLabel: n = "Clear",
-  customizeContent: o = (g) => g?.join(",") ?? "",
+  clearLabel: o = "Clear",
+  customizeContent: t,
   disabled: i,
   error: l,
   hint: s,
   id: h,
   label: u,
-  labelAction: L,
+  labelAction: B,
   onChange: f,
-  onClear: V,
-  onReachEnd: b,
-  placeholder: j,
-  required: k,
+  onClear: L,
+  onReachEnd: $,
+  placeholder: V,
+  required: b,
   selectButtonTitle: pe,
-  startIcon: z,
-  size: E = "M",
+  startIcon: E,
+  size: j = "M",
   value: m,
-  withTags: C,
-  ...A
+  withTags: k,
+  ...z
 }) => {
-  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), _ = () => {
+  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(g, (t) => {
-    b && b(t);
+  se(w, (n) => {
+    $ && $(n);
   }, {
     selectorToWatch: `#${v}`,
-    skipWhen: !G
+    skipWhen: !A
   });
-  const a = typeof m < "u" ? m : w, D = ({
-    value: t,
-    textValue: x
+  const a = typeof m < "u" ? m : C, _ = ({
+    value: n,
+    textValue: g
   }) => e(he, {
     tabIndex: -1,
     disabled: i,
-    icon: e(J, {}),
-    onClick: X(t),
-    children: x
-  }, t);
+    icon: e(D, {}),
+    onClick: P(n),
+    children: g
+  }, n);
   return e(oe, {
     hint: s,
     error: l,
     id: p,
-    required: k,
-    children: d(ce, {
+    required: b,
+    children: c(de, {
       direction: "column",
       alignItems: "stretch",
       gap: 1,
       children: [e(ie, {
-        onClick: _,
-        action: L,
+        onClick: Y,
+        action: B,
         children: u
-      }), d(Q, {
-        onOpenChange: Y,
+      }), c(Q, {
+        onOpenChange: X,
         disabled: i,
-        required: k,
-        onValueChange: P,
+        required: b,
+        onValueChange: H,
         value: a,
-        ...A,
+        ...z,
         multi: !0,
         children: [e(U, {
           ref: y,
           "aria-label": u,
-          "aria-describedby": `${q} ${H}`,
+          "aria-describedby": `${W} ${q}`,
           id: p,
-          startIcon: z,
-          size: E,
+          startIcon: E,
+          size: j,
           hasError: Boolean(l),
           disabled: i,
-          clearLabel: n,
-          onClear: a?.length ? V : void 0,
-          paddingLeft: C && a?.length ? 1 : 3,
+          clearLabel: o,
+          onClear: a?.length ? L : void 0,
+          paddingLeft: k && a?.length ? 1 : 3,
           children: e(Z, {
-            placeholder: j,
+            placeholder: V,
             textColor: a?.length ? "neutral800" : "neutral600",
-            children: a?.length ? C ? D : o(a) : null
+            children: a?.length ? k ? _ : t ? t(a) : void 0 : void 0
           })
         }), e(ee, {
           children: e(re, {
             position: "popper",
             sideOffset: 4,
-            children: d(te, {
-              ref: g,
-              children: [r, e(I, {
+            children: c(te, {
+              ref: w,
+              children: [r, e(x, {
                 id: v,
                 width: "100%",
                 height: "1px"
@@ -120,24 +120,24 @@ const Be = ({
       }), e(le, {}), e(ae, {})]
     })
   });
-}, Le = c.forwardRef(({
+}, Le = d.forwardRef(({
   value: r,
-  children: n,
-  startIcon: o,
+  children: o,
+  startIcon: t,
   ...i
-}, l) => d(S, {
+}, l) => c(S, {
   ref: l,
   value: r.toString(),
   ...i,
-  children: [o && e(I, {
+  children: [t && e(x, {
     as: "span",
     "aria-hidden": !0,
-    children: o
+    children: t
   }), e(F, {
     children: ({
       isSelected: s,
       isIntermediate: h
-    }) => e(B, {
+    }) => e(M, {
       hasRadius: !0,
       overflow: "hidden",
       position: "relative",
@@ -147,29 +147,29 @@ const Be = ({
       height: "18px",
       width: "18px"
     })
-  }), e(M, {
+  }), e(O, {
     textColor: "neutral800",
-    children: e(O, {
-      children: n
+    children: e(K, {
+      children: o
     })
   })]
-})), B = K(I)`
+})), M = J(x)`
   border: 1px solid
     ${({
   theme: r,
-  $selected: n,
-  $indeterminate: o
-}) => n || o ? r.colors.primary600 : r.colors.neutral300};
+  $selected: o,
+  $indeterminate: t
+}) => o || t ? r.colors.primary600 : r.colors.neutral300};
   background-color: ${({
   theme: r,
-  $selected: n,
-  $indeterminate: o
-}) => n || o ? r.colors.primary600 : r.colors.neutral0};
+  $selected: o,
+  $indeterminate: t
+}) => o || t ? r.colors.primary600 : r.colors.neutral0};
 
   ${({
   theme: r,
-  $indeterminate: n
-}) => n && T`
+  $indeterminate: o
+}) => o && T`
       &::after {
         content: '';
         display: block;
@@ -195,26 +195,26 @@ const Be = ({
         position: absolute;
       }
     `}
-`, Ve = c.forwardRef(({
+`, Ve = d.forwardRef(({
   children: r,
-  label: n,
-  startIcon: o,
+  label: o,
+  startIcon: t,
   values: i = [],
   ...l
-}, s) => d(N, {
+}, s) => c(N, {
   ref: s,
-  children: [d(S, {
+  children: [c(S, {
     value: i,
     ...l,
-    children: [o && e(I, {
+    children: [t && e(x, {
       as: "span",
       "aria-hidden": !0,
-      children: o
+      children: t
     }), e(F, {
       children: ({
         isSelected: h,
         isIntermediate: u
-      }) => e(B, {
+      }) => e(M, {
         hasRadius: !0,
         overflow: "hidden",
         position: "relative",
@@ -224,11 +224,9 @@ const Be = ({
         height: "18px",
         width: "18px"
       })
-    }), e(M, {
+    }), e(O, {
       textColor: "neutral800",
-      children: e(O, {
-        children: n
-      })
+      children: o
     })]
   }), r]
 }));

package/dist/Select/SelectParts.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),w=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),h=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),R=require("../hooks/useComposeRefs.cjs");require("../themes/lightTheme/index.cjs");require("../themes/darkTheme/index.cjs");require("lodash");const u=require("../themes/utils.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const c=T(w),i=I(p),q=c.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:f,size:m="M",children:x,...b},y)=>{const a=c.useRef(null),$=j=>{e&&!n&&(e(j),a.current.focus())},S=R.useComposedRefs(a,y);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(C,{"aria-disabled":n,$hasError:f,$size:m,ref:S,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,...b,children:[r.jsxs(l.Flex,{as:"span",gap:4,children:[s&&r.jsx(h.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(l.Flex,{as:"span",gap:3,children:[e?r.jsx(v,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:$,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),v=i.default(h.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),w=require("react"),u=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),h=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),R=require("../hooks/useComposeRefs.cjs");require("../themes/lightTheme/index.cjs");require("../themes/darkTheme/index.cjs");require("lodash");const d=require("../themes/utils.cjs"),f=require("../Typography/Typography.cjs"),I=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const c=T(w),i=I(p),q=c.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:g,size:m="M",children:x,...b},y)=>{const a=c.useRef(null),$=j=>{e&&!n&&(e(j),a.current.focus())},S=R.useComposedRefs(a,y);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(C,{"aria-disabled":n,$hasError:g,$size:m,ref:S,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",...b,children:[r.jsxs(l.Flex,{as:"span",gap:4,children:[s&&r.jsx(h.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(l.Flex,{as:"span",gap:3,children:[e?r.jsx(v,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:$,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(u.Cross,{})}):null,r.jsx(k,{children:r.jsx(u.CarretDown,{})})]})]})})}),v=i.default(h.Box)`
   border: none;
 
   svg {
@@ -11,7 +11,7 @@
   }
 `,C=i.default(l.Flex)`
   border: 1px solid ${({theme:e,$hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
-  min-height: ${({theme:e,$size:t})=>u.getThemeSize("input")({theme:e,size:t})};
+  min-height: ${({theme:e,$size:t})=>d.getThemeSize("input")({theme:e,size:t})};
 
   &[aria-disabled='true'] {
     color: ${e=>e.theme.colors.neutral600};
@@ -22,7 +22,7 @@
     outline: none;
   }
 
-  ${({theme:e,$hasError:t})=>u.inputFocusStyle()({theme:e,hasError:t})};
+  ${({theme:e,$hasError:t})=>d.inputFocusStyle()({theme:e,hasError:t})};
 `,k=i.default(o.Select.Icon)`
   & > svg {
     width: ${6/16}rem;
@@ -31,7 +31,7 @@
       fill: ${({theme:e})=>e.colors.neutral600};
     }
   }
-`,_=c.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(g.Typography,{ref:n,ellipsis:!0,...s,children:r.jsx(V,{placeholder:t,children:e})})),V=i.default(o.Select.Value)`
+`,_=c.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(f.Typography,{ref:n,ellipsis:!0,...s,children:r.jsx(V,{placeholder:t,children:e})})),V=i.default(o.Select.Value)`
   display: flex;
   gap: ${({theme:e})=>e.spaces[1]};
   flex-wrap: wrap;
@@ -59,6 +59,7 @@
   align-items: center;
   gap: ${({theme:e})=>e.spaces[2]};
   white-space: nowrap;
+  user-select: none;
 
   &:focus-visible {
     outline: none;
@@ -72,7 +73,7 @@
   }
 
   &[data-state='checked'] {
-    ${g.Typography} {
+    ${f.Typography} {
       font-weight: bold;
       color: ${({theme:e})=>e.colors.primary600};
     }

package/dist/Select/SelectParts.js

@@ -14,20 +14,20 @@ import { Typography as u } from "../Typography/Typography.js";
 const v = a.forwardRef(({
   onClear: e,
   clearLabel: r = "Clear",
-  startIcon: n,
-  disabled: i,
+  startIcon: i,
+  disabled: n,
   hasError: m,
   size: h = "M",
   children: f,
   ...g
 }, $) => {
   const d = a.useRef(null), w = (x) => {
-    e && !i && (e(x), d.current.focus());
+    e && !n && (e(x), d.current.focus());
   }, b = S(d, $);
   return t(o.Trigger, {
     asChild: !0,
     children: l(V, {
-      "aria-disabled": i,
+      "aria-disabled": n,
       $hasError: m,
       $size: h,
       ref: b,
@@ -36,18 +36,19 @@ const v = a.forwardRef(({
       position: "relative",
       overflow: "hidden",
       hasRadius: !0,
-      background: i ? "neutral150" : "neutral0",
+      background: n ? "neutral150" : "neutral0",
       paddingLeft: 3,
       paddingRight: 3,
       gap: 4,
+      cursor: "default",
       ...g,
       children: [l(c, {
         as: "span",
         gap: 4,
-        children: [n && t(p, {
+        children: [i && t(p, {
           as: "span",
           "aria-hidden": !0,
-          children: n
+          children: i
         }), f]
       }), l(c, {
         as: "span",
@@ -59,7 +60,7 @@ const v = a.forwardRef(({
           role: "button",
           tabIndex: 0,
           onClick: w,
-          "aria-disabled": i,
+          "aria-disabled": n,
           "aria-label": r,
           title: r,
           cursor: "pointer",
@@ -125,11 +126,11 @@ const v = a.forwardRef(({
 `, j = a.forwardRef(({
   children: e,
   placeholder: r,
-  ...n
-}, i) => t(u, {
-  ref: i,
+  ...i
+}, n) => t(u, {
+  ref: n,
   ellipsis: !0,
-  ...n,
+  ...i,
   children: t(F, {
     placeholder: r,
     children: e
@@ -185,6 +186,7 @@ const v = a.forwardRef(({
   theme: e
 }) => e.spaces[2]};
   white-space: nowrap;
+  user-select: none;
 
   &:focus-visible {
     outline: none;
@@ -209,10 +211,10 @@ const v = a.forwardRef(({
 }) => e.colors.primary600};
     }
   }
-`, X = o.Root, Y = v, Z = j, _ = o.Portal, ee = B, re = D, oe = E, te = o.ItemIndicator, se = o.ItemText, ie = o.Group;
+`, X = o.Root, Y = v, Z = j, _ = o.Portal, ee = B, re = D, oe = E, te = o.ItemIndicator, se = o.ItemText, ne = o.Group;
 export {
   ee as Content,
-  ie as Group,
+  ne as Group,
   oe as Item,
   te as ItemIndicator,
   se as ItemText,

package/dist/Select/SingleSelect.cjs

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

package/dist/Select/SingleSelect.js

@@ -1,6 +1,6 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as o from "react";
-import { Item as q, ItemText as z, Root as H, Trigger as M, Value as P, Portal as _, Content as A, Viewport as D } from "./SelectParts.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { Item as q, ItemText as H, Root as M, Trigger as P, Value as _, Portal as z, Content as A, Viewport as D } from "./SelectParts.js";
 import { Box as R } from "../Box/Box.js";
 import { Field as G } from "../Field/Field.js";
 import { FieldLabel as J } from "../Field/FieldLabel.js";
@@ -14,86 +14,86 @@ import { useId as X } from "../hooks/useId.js";
 import { useIntersection as Y } from "../hooks/useIntersection.js";
 import { Typography as Z } from "../Typography/Typography.js";
 const Ie = ({
-  children: a,
-  clearLabel: i = "Clear",
-  customizeContent: s = (u) => u?.toString() ?? "",
-  disabled: l,
+  children: s,
+  clearLabel: o = "Clear",
+  customizeContent: l,
+  disabled: d,
   error: c,
-  hint: O,
-  id: B,
-  label: f,
-  labelAction: F,
+  hint: C,
+  id: O,
+  label: m,
+  labelAction: B,
   onChange: h,
-  onClear: m,
-  onReachEnd: g,
-  placeholder: T,
-  required: I,
+  onClear: p,
+  onReachEnd: u,
+  placeholder: F,
+  required: g,
   selectButtonTitle: ee,
-  startIcon: $,
-  size: y = "M",
-  value: p,
-  ...w
+  startIcon: T,
+  size: $ = "M",
+  value: f,
+  ...y
 }) => {
-  const [u, b] = o.useState(), [V, k] = o.useState(!1), t = X(B), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
-    h ? h(typeof p == "number" ? Number(r) : r) : b(r);
+  const [w, I] = i.useState(), [V, k] = i.useState(!1), t = X(O), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
+    h ? h(typeof f == "number" ? Number(r) : r) : I(r);
   }, N = (r) => {
     k(r);
   }, j = (r) => {
-    m && m(r), h || b("");
-  }, S = o.useRef(null), W = () => {
-    S.current.focus();
-  }, x = o.useRef(null), C = `intersection-${t}`;
+    p && p(r), h || I("");
+  }, b = i.useRef(null), W = () => {
+    b.current.focus();
+  }, x = i.useRef(null), S = `intersection-${t}`;
   Y(x, (r) => {
-    g && g(r);
+    u && u(r);
   }, {
-    selectorToWatch: `#${C}`,
+    selectorToWatch: `#${S}`,
     skipWhen: !V
   });
-  const n = (typeof p < "u" ? p.toString() : u) ?? "";
+  const n = (typeof f < "u" ? f.toString() : w) ?? "";
   return e(G, {
-    hint: O,
+    hint: C,
     error: c,
     id: t,
-    required: I,
-    children: d(U, {
+    required: g,
+    children: a(U, {
       direction: "column",
       alignItems: "stretch",
       gap: 1,
       children: [e(J, {
         onClick: W,
-        action: F,
-        children: f
-      }), d(H, {
+        action: B,
+        children: m
+      }), a(M, {
         onOpenChange: N,
-        disabled: l,
-        required: I,
+        disabled: d,
+        required: g,
         onValueChange: L,
         value: n,
-        ...w,
-        children: [e(M, {
-          ref: S,
-          "aria-label": f,
+        ...y,
+        children: [e(P, {
+          ref: b,
+          "aria-label": m,
           "aria-describedby": `${v} ${E}`,
           id: t,
-          startIcon: $,
-          size: y,
+          startIcon: T,
+          size: $,
           hasError: Boolean(c),
-          disabled: l,
-          clearLabel: i,
-          onClear: n && m ? j : void 0,
-          children: e(P, {
-            placeholder: T,
+          disabled: d,
+          clearLabel: o,
+          onClear: n && p ? j : void 0,
+          children: e(_, {
+            placeholder: F,
             textColor: n ? "neutral800" : "neutral600",
-            children: n ? s(n) : null
+            children: n && l ? l(n) : void 0
           })
-        }), e(_, {
+        }), e(z, {
           children: e(A, {
             position: "popper",
             sideOffset: 4,
-            children: d(D, {
+            children: a(D, {
               ref: x,
-              children: [a, e(R, {
-                id: C,
+              children: [s, e(R, {
+                id: S,
                 width: "100%",
                 height: "1px"
               })]
@@ -103,23 +103,23 @@ const Ie = ({
       }), e(K, {}), e(Q, {})]
     })
   });
-}, be = o.forwardRef(({
-  value: a,
-  startIcon: i,
-  children: s,
-  ...l
-}, c) => d(q, {
+}, be = i.forwardRef(({
+  value: s,
+  startIcon: o,
+  children: l,
+  ...d
+}, c) => a(q, {
   ref: c,
-  value: a.toString(),
-  ...l,
-  children: [i && e(R, {
+  value: s.toString(),
+  ...d,
+  children: [o && e(R, {
     as: "span",
     "aria-hidden": !0,
-    children: i
+    children: o
   }), e(Z, {
     textColor: "neutral800",
-    children: e(z, {
-      children: s
+    children: e(H, {
+      children: l
     })
   })]
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.0-alpha.4",
+  "version": "1.7.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -23,14 +23,14 @@
     "@internationalized/number": "^3.2.0",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@strapi/ui-primitives": "^1.7.0-alpha.4",
+    "@strapi/ui-primitives": "^1.7.0",
     "@uiw/react-codemirror": "^4.19.7",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.7.0-alpha.4",
+    "@strapi/icons": "^1.7.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.1.11",
@@ -65,5 +65,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "1b57b2310cec4cc64f7a92a2e73eac6dfe1ab352"
+  "gitHead": "396ee39dddaa1a56571251403f0e87d03e08fd27"
 }