@strapi/design-system 1.7.0 → 1.7.1

package/dist/Select/Select.js

@@ -1,11 +1,19 @@
 import { jsx as e } from "react/jsx-runtime";
-import { MultiSelect as i } from "./MultiSelect.js";
-import { SingleSelect as m } from "./SingleSelect.js";
-const r = (t) => t.multi || t.withTags ? e(i, {
-  ...t
-}) : e(m, {
-  ...t
-});
+import * as l from "react";
+import { MultiSelect as m } from "./MultiSelect.js";
+import { SingleSelect as c } from "./SingleSelect.js";
+const i = l.createContext({ multi: !1 }), r = () => 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 x = (t) => {
+  const o = l.useMemo(() => ({ multi: !!(t.multi || t.withTags) }), [t.multi, t.withTags]);
+  return e(i.Provider, { value: o, children: t.multi || t.withTags ? e(m, { ...t }) : e(c, { ...t }) });
+};
 export {
-  r as Select
+  x as Select,
+  r as useSelectContext
 };

package/dist/Select/SelectList.cjs

@@ -1 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("react/jsx-runtime"),m=require("react"),v=require("compute-scroll-into-view"),A=require("../Flex/Flex.cjs"),a=require("../helpers/keyboardKeys.cjs"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function j(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,c.get?c:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const b=j(m),k=h(v),g={Keyboard:"down:keyboard",Mouse:"down:mouse"},K={Keyboard:"up:keyboard",Mouse:"up:mouse"},q=({labelledBy:e,onSelectItem:t,children:n,multi:c=!1,onEscape:r,expanded:d})=>{const o=D(d),S=i=>{switch(i.key){case a.KeyboardKeys.ESCAPE:{i.stopPropagation(),r();break}case a.KeyboardKeys.DOWN:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.nextSibling;if(u)l(o.current,u);else{const p=o.current.querySelectorAll('[role="option"]')[0];l(o.current,p)}break}case a.KeyboardKeys.UP:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.previousSibling;if(u)l(o.current,u);else{const f=o.current.querySelectorAll('[role="option"]'),p=f[f.length-1];l(o.current,p)}break}case a.KeyboardKeys.SPACE:case a.KeyboardKeys.ENTER:{i.preventDefault();const s=y(o.current);s.getAttribute("data-opt-group")?t(s.getAttribute("data-opt-group-children").split(","),s.getAttribute("data-opt-group")):t(s.getAttribute("data-strapi-value")),c||r();break}}};return O.jsx(A.Flex,{as:"ul",gap:1,direction:"column",alignItems:"stretch",role:"listbox","aria-labelledby":e,tabIndex:-1,ref:o,onKeyDown:S,onBlur:r,children:n})},l=(e,t)=>{e.setAttribute("aria-activedescendant",t.getAttribute("id")),e.querySelectorAll('[role="option"]').forEach(r=>r.classList.remove("is-focused")),t.classList.add("is-focused"),k.default(t,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:r,top:d,left:o})=>{r.scrollTop=d,r.scrollLeft=o})},D=e=>{const t=b.useRef(null);return b.useEffect(()=>{t.current.focus()},[]),b.useEffect(()=>{if(!t.current)return;const n=t.current.querySelector('[aria-selected="true"]'),c=t.current.querySelectorAll('[role="option"]');let r;n?r=n:e===K.Keyboard?r=c[c.length-1]:e===g.Keyboard&&(r=c[0]),r&&(e===K.Keyboard||e===g.Keyboard)&&l(t.current,r)},[]),t},y=e=>{const t=e.getAttribute("aria-activedescendant");return e.querySelector(`#${t}`)};exports.SelectList=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react/jsx-runtime"),A=require("react"),m=require("compute-scroll-into-view"),a=require("../helpers/keyboardKeys.cjs"),v=require("../Flex/Flex.cjs");function q(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,c.get?c:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const p=q(A),g={Keyboard:"down:keyboard",Mouse:"down:mouse"},K={Keyboard:"up:keyboard",Mouse:"up:mouse"};/**
+ * @preserve
+ * @deprecated This component will be removed in the next major release.
+ * If you need a custom listbox I would recommend opening a new issue.
+ */const D=({labelledBy:t,onSelectItem:e,children:n,multi:c=!1,onEscape:r,expanded:d})=>{const o=h(d),S=i=>{switch(i.key){case a.KeyboardKeys.ESCAPE:{i.stopPropagation(),r();break}case a.KeyboardKeys.DOWN:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.nextSibling;if(u)l(o.current,u);else{const b=o.current.querySelectorAll('[role="option"]')[0];l(o.current,b)}break}case a.KeyboardKeys.UP:{i.preventDefault();const s=y(o.current);if(!s)return;const u=s.previousSibling;if(u)l(o.current,u);else{const f=o.current.querySelectorAll('[role="option"]'),b=f[f.length-1];l(o.current,b)}break}case a.KeyboardKeys.SPACE:case a.KeyboardKeys.ENTER:{i.preventDefault();const s=y(o.current);s.getAttribute("data-opt-group")?e(s.getAttribute("data-opt-group-children").split(","),s.getAttribute("data-opt-group")):e(s.getAttribute("data-strapi-value")),c||r();break}}};return O.jsx(v.Flex,{as:"ul",gap:1,direction:"column",alignItems:"stretch",role:"listbox","aria-labelledby":t,tabIndex:-1,ref:o,onKeyDown:S,onBlur:r,children:n})},l=(t,e)=>{t.setAttribute("aria-activedescendant",e.getAttribute("id")),t.querySelectorAll('[role="option"]').forEach(r=>r.classList.remove("is-focused")),e.classList.add("is-focused"),m.compute(e,{scrollMode:"if-needed",block:"nearest",inline:"nearest"}).forEach(({el:r,top:d,left:o})=>{r.scrollTop=d,r.scrollLeft=o})},h=t=>{const e=p.useRef(null);return p.useEffect(()=>{e.current.focus()},[]),p.useEffect(()=>{if(!e.current)return;const n=e.current.querySelector('[aria-selected="true"]'),c=e.current.querySelectorAll('[role="option"]');let r;n?r=n:t===K.Keyboard?r=c[c.length-1]:t===g.Keyboard&&(r=c[0]),r&&(t===K.Keyboard||t===g.Keyboard)&&l(e.current,r)},[]),e},y=t=>{const e=t.getAttribute("aria-activedescendant");return t.querySelector(`#${e}`)};exports.SelectList=D;

package/dist/Select/SelectList.js

@@ -1,88 +1,68 @@
 import { jsx as A } from "react/jsx-runtime";
 import * as b from "react";
-import S from "compute-scroll-into-view";
+import { compute as S } from "compute-scroll-into-view";
+import { KeyboardKeys as u } from "../helpers/keyboardKeys.js";
 import { Flex as h } from "../Flex/Flex.js";
-import { KeyboardKeys as l } from "../helpers/keyboardKeys.js";
 const g = {
   Keyboard: "down:keyboard",
   Mouse: "down:mouse"
-}, m = {
-  Keyboard: "up:keyboard",
-  Mouse: "up:mouse"
-}, E = ({
-  labelledBy: r,
-  onSelectItem: e,
-  children: c,
-  multi: s = !1,
-  onEscape: t,
-  expanded: f
-}) => {
+}, m = { Keyboard: "up:keyboard", Mouse: "up:mouse" };
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major release.
+ * If you need a custom listbox I would recommend opening a new issue.
+ */
+const E = ({ labelledBy: r, onSelectItem: e, children: c, multi: s = !1, onEscape: t, expanded: f }) => {
   const o = K(f);
-  return A(h, {
-    as: "ul",
-    gap: 1,
-    direction: "column",
-    alignItems: "stretch",
-    role: "listbox",
-    "aria-labelledby": r,
-    tabIndex: -1,
-    ref: o,
-    onKeyDown: (i) => {
-      switch (i.key) {
-        case l.ESCAPE: {
-          i.stopPropagation(), t();
-          break;
-        }
-        case l.DOWN: {
-          i.preventDefault();
-          const n = y(o.current);
-          if (!n)
-            return;
-          const a = n.nextSibling;
-          if (a)
-            u(o.current, a);
-          else {
-            const d = o.current.querySelectorAll('[role="option"]')[0];
-            u(o.current, d);
-          }
-          break;
-        }
-        case l.UP: {
-          i.preventDefault();
-          const n = y(o.current);
-          if (!n)
-            return;
-          const a = n.previousSibling;
-          if (a)
-            u(o.current, a);
-          else {
-            const p = o.current.querySelectorAll('[role="option"]'), d = p[p.length - 1];
-            u(o.current, d);
-          }
-          break;
+  return A(h, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": r, tabIndex: -1, ref: o, onKeyDown: (i) => {
+    switch (i.key) {
+      case u.ESCAPE: {
+        i.stopPropagation(), t();
+        break;
+      }
+      case u.DOWN: {
+        i.preventDefault();
+        const n = y(o.current);
+        if (!n)
+          return;
+        const a = n.nextSibling;
+        if (a)
+          l(o.current, a);
+        else {
+          const d = o.current.querySelectorAll('[role="option"]')[0];
+          l(o.current, d);
         }
-        case l.SPACE:
-        case l.ENTER: {
-          i.preventDefault();
-          const n = y(o.current);
-          n.getAttribute("data-opt-group") ? e(n.getAttribute("data-opt-group-children").split(","), n.getAttribute("data-opt-group")) : e(n.getAttribute("data-strapi-value")), s || t();
-          break;
+        break;
+      }
+      case u.UP: {
+        i.preventDefault();
+        const n = y(o.current);
+        if (!n)
+          return;
+        const a = n.previousSibling;
+        if (a)
+          l(o.current, a);
+        else {
+          const p = o.current.querySelectorAll('[role="option"]'), d = p[p.length - 1];
+          l(o.current, d);
         }
+        break;
       }
-    },
-    onBlur: t,
-    children: c
-  });
-}, u = (r, e) => {
+      case u.SPACE:
+      case u.ENTER: {
+        i.preventDefault();
+        const n = y(o.current);
+        n.getAttribute("data-opt-group") ? e(n.getAttribute("data-opt-group-children").split(","), n.getAttribute("data-opt-group")) : e(n.getAttribute("data-strapi-value")), s || t();
+        break;
+      }
+    }
+  }, onBlur: t, children: c });
+}, l = (r, e) => {
   r.setAttribute("aria-activedescendant", e.getAttribute("id")), r.querySelectorAll('[role="option"]').forEach((t) => t.classList.remove("is-focused")), e.classList.add("is-focused"), S(e, {
     scrollMode: "if-needed",
     block: "nearest",
     inline: "nearest"
-  }).forEach(({
-    el: t,
-    top: f,
-    left: o
-  }) => {
+  }).forEach(({ el: t, top: f, left: o }) => {
     t.scrollTop = f, t.scrollLeft = o;
   });
 }, K = (r) => {
@@ -94,7 +74,7 @@ const g = {
       return;
     const c = e.current.querySelector('[aria-selected="true"]'), s = e.current.querySelectorAll('[role="option"]');
     let t;
-    c ? t = c : r === m.Keyboard ? t = s[s.length - 1] : r === g.Keyboard && (t = s[0]), t && (r === m.Keyboard || r === g.Keyboard) && u(e.current, t);
+    c ? t = c : r === m.Keyboard ? t = s[s.length - 1] : r === g.Keyboard && (t = s[0]), t && (r === m.Keyboard || r === g.Keyboard) && l(e.current, t);
   }, []), e;
 }, y = (r) => {
   const e = r.getAttribute("aria-activedescendant");

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"),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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),c=require("styled-components"),R=require("../hooks/useComposeRefs.cjs"),u=require("../themes/utils.cjs"),l=require("../Flex/Flex.cjs"),p=require("../Box/Box.cjs"),g=require("../Typography/Typography.cjs");function j(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 i=j(y),I=i.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:f="M",children:m,...x},b)=>{const a=i.useRef(null),$=w=>{e&&!n&&(e(w),a.current.focus())},S=R.useComposedRefs(a,b);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(v,{"aria-disabled":n,$hasError:h,$size:f,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",...x,children:[r.jsxs(l.Flex,{as:"span",gap:4,children:[s&&r.jsx(p.Box,{as:"span","aria-hidden":!0,children:s}),m]}),r.jsxs(l.Flex,{as:"span",gap:3,children:[e?r.jsx(T,{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(C,{children:r.jsx(d.CarretDown,{})})]})]})})}),T=c(p.Box)`
   border: none;
 
   svg {
@@ -9,9 +9,9 @@
   svg path {
     fill: ${({theme:e})=>e.colors.neutral600};
   }
-`,C=i.default(l.Flex)`
+`,v=c(l.Flex)`
   border: 1px solid ${({theme:e,$hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
-  min-height: ${({theme:e,$size:t})=>d.getThemeSize("input")({theme:e,size:t})};
+  min-height: ${({theme:e,$size:t})=>u.getThemeSize("input")({theme:e,size:t})};
 
   &[aria-disabled='true'] {
     color: ${e=>e.theme.colors.neutral600};
@@ -22,8 +22,8 @@
     outline: none;
   }
 
-  ${({theme:e,$hasError:t})=>d.inputFocusStyle()({theme:e,hasError:t})};
-`,k=i.default(o.Select.Icon)`
+  ${({theme:e,$hasError:t})=>u.inputFocusStyle()({theme:e,hasError:t})};
+`,C=c(o.Select.Icon)`
   & > svg {
     width: ${6/16}rem;
 
@@ -31,11 +31,11 @@
       fill: ${({theme:e})=>e.colors.neutral600};
     }
   }
-`,_=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)`
+`,q=i.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(g.Typography,{ref:n,ellipsis:!0,...s,children:r.jsx(k,{placeholder:t,children:e})})),k=c(o.Select.Value)`
   display: flex;
   gap: ${({theme:e})=>e.spaces[1]};
   flex-wrap: wrap;
-`,F=i.default(o.Select.Content)`
+`,V=c(o.Select.Content)`
   background: ${({theme:e})=>e.colors.neutral0};
   box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
@@ -44,9 +44,9 @@
   /* This is from the design-system figma file. */
   max-height: 15rem;
   z-index: ${({theme:e})=>e.zIndices[1]};
-`,P=i.default(o.Select.Viewport)`
+`,P=c(o.Select.Viewport)`
   padding: ${({theme:e})=>e.spaces[1]};
-`,z=c.forwardRef((e,t)=>r.jsx(O,{ref:t,...e})),B=p.css`
+`,z=i.forwardRef((e,t)=>r.jsx(O,{ref:t,...e})),F=c.css`
   width: 100%;
   border: none;
   text-align: left;
@@ -65,17 +65,17 @@
     outline: none;
     background-color: ${({theme:e})=>e.colors.primary100};
   }
-`,O=i.default(o.Select.Item)`
-  ${B}
+`,O=c(o.Select.Item)`
+  ${F}
 
   &:hover {
     background-color: ${({theme:e})=>e.colors.primary100};
   }
 
   &[data-state='checked'] {
-    ${f.Typography} {
+    ${g.Typography} {
       font-weight: bold;
       color: ${({theme:e})=>e.colors.primary600};
     }
   }
-`,M=o.Select.Root,D=q,G=_,E=o.Select.Portal,L=F,N=P,A=z,H=o.Select.ItemIndicator,J=o.Select.ItemText,K=o.Select.Group;exports.Content=L;exports.Group=K;exports.Item=A;exports.ItemIndicator=H;exports.ItemText=J;exports.Portal=E;exports.Root=M;exports.Trigger=D;exports.Value=G;exports.Viewport=N;
+`,B=o.Select.Root,D=I,G=q,M=o.Select.Portal,_=V,E=P,N=z,A=o.Select.ItemIndicator,H=o.Select.ItemText,J=o.Select.Group;exports.Content=_;exports.Group=J;exports.Item=N;exports.ItemIndicator=A;exports.ItemText=H;exports.Portal=M;exports.Root=B;exports.Trigger=D;exports.Value=G;exports.Viewport=E;

package/dist/Select/SelectParts.js

@@ -3,74 +3,16 @@ import * as a from "react";
 import { Cross as y, CarretDown as R } from "@strapi/icons";
 import { Select as o } from "@strapi/ui-primitives";
 import s, { css as I } from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as c } from "../Flex/Flex.js";
 import { useComposedRefs as S } from "../hooks/useComposeRefs.js";
-import "../themes/lightTheme/index.js";
-import "../themes/darkTheme/index.js";
-import "lodash";
 import { getThemeSize as C, inputFocusStyle as k } from "../themes/utils.js";
+import { Flex as c } from "../Flex/Flex.js";
+import { Box as p } from "../Box/Box.js";
 import { Typography as u } from "../Typography/Typography.js";
-const v = a.forwardRef(({
-  onClear: e,
-  clearLabel: r = "Clear",
-  startIcon: i,
-  disabled: n,
-  hasError: m,
-  size: h = "M",
-  children: f,
-  ...g
-}, $) => {
+const v = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
   const d = a.useRef(null), w = (x) => {
     e && !n && (e(x), d.current.focus());
   }, b = S(d, $);
-  return t(o.Trigger, {
-    asChild: !0,
-    children: l(V, {
-      "aria-disabled": n,
-      $hasError: m,
-      $size: h,
-      ref: b,
-      alignItems: "center",
-      justifyContent: "space-between",
-      position: "relative",
-      overflow: "hidden",
-      hasRadius: !0,
-      background: n ? "neutral150" : "neutral0",
-      paddingLeft: 3,
-      paddingRight: 3,
-      gap: 4,
-      cursor: "default",
-      ...g,
-      children: [l(c, {
-        as: "span",
-        gap: 4,
-        children: [i && t(p, {
-          as: "span",
-          "aria-hidden": !0,
-          children: i
-        }), f]
-      }), l(c, {
-        as: "span",
-        gap: 3,
-        children: [e ? t(T, {
-          as: "button",
-          hasRadius: !0,
-          background: "transparent",
-          role: "button",
-          tabIndex: 0,
-          onClick: w,
-          "aria-disabled": n,
-          "aria-label": r,
-          title: r,
-          cursor: "pointer",
-          children: t(y, {})
-        }) : null, t(z, {
-          children: t(R, {})
-        })]
-      })]
-    })
-  });
+  return t(o.Trigger, { asChild: !0, children: l(V, { "aria-disabled": n, $hasError: m, $size: h, ref: b, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: !0, background: n ? "neutral150" : "neutral0", paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", ...g, children: [l(c, { as: "span", gap: 4, children: [i && t(p, { as: "span", "aria-hidden": !0, children: i }), f] }), l(c, { as: "span", gap: 3, children: [e ? t(T, { as: "button", hasRadius: !0, background: "transparent", role: "button", tabIndex: 0, onClick: w, "aria-disabled": n, "aria-label": r, title: r, cursor: "pointer", children: t(y, {}) }) : null, t(z, { children: t(R, {}) })] })] }) });
 }), T = s(p)`
   border: none;
 
@@ -80,22 +22,11 @@ const v = a.forwardRef(({
   }
 
   svg path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral600};
+    fill: ${({ theme: e }) => e.colors.neutral600};
   }
 `, V = s(c)`
-  border: 1px solid ${({
-  theme: e,
-  $hasError: r
-}) => r ? e.colors.danger600 : e.colors.neutral200};
-  min-height: ${({
-  theme: e,
-  $size: r
-}) => C("input")({
-  theme: e,
-  size: r
-})};
+  border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
+  min-height: ${({ theme: e, $size: r }) => C("input")({ theme: e, size: r })};
 
   &[aria-disabled='true'] {
     color: ${(e) => e.theme.colors.neutral600};
@@ -106,121 +37,72 @@ const v = a.forwardRef(({
     outline: none;
   }
 
-  ${({
-  theme: e,
-  $hasError: r
-}) => k()({
-  theme: e,
-  hasError: r
-})};
+  ${({ theme: e, $hasError: r }) => k()({ theme: e, hasError: r })};
 `, z = s(o.Icon)`
   & > svg {
     width: ${6 / 16}rem;
 
     & > path {
-      fill: ${({
-  theme: e
-}) => e.colors.neutral600};
+      fill: ${({ theme: e }) => e.colors.neutral600};
     }
   }
-`, j = a.forwardRef(({
-  children: e,
-  placeholder: r,
-  ...i
-}, n) => t(u, {
-  ref: n,
-  ellipsis: !0,
-  ...i,
-  children: t(F, {
-    placeholder: r,
-    children: e
-  })
-})), F = s(o.Value)`
+`, j = a.forwardRef(({ children: e, placeholder: r, ...i }, n) => t(u, { ref: n, ellipsis: !0, ...i, children: t(F, { placeholder: r, children: e }) })), F = s(o.Value)`
   display: flex;
-  gap: ${({
-  theme: e
-}) => e.spaces[1]};
+  gap: ${({ theme: e }) => e.spaces[1]};
   flex-wrap: wrap;
 `, B = s(o.Content)`
-  background: ${({
-  theme: e
-}) => e.colors.neutral0};
-  box-shadow: ${({
-  theme: e
-}) => e.shadows.filterShadow};
-  border: 1px solid ${({
-  theme: e
-}) => e.colors.neutral150};
-  border-radius: ${({
-  theme: e
-}) => e.borderRadius};
+  background: ${({ theme: e }) => e.colors.neutral0};
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+  border-radius: ${({ theme: e }) => e.borderRadius};
   min-width: var(--radix-select-trigger-width);
   /* This is from the design-system figma file. */
   max-height: 15rem;
-  z-index: ${({
-  theme: e
-}) => e.zIndices[1]};
+  z-index: ${({ theme: e }) => e.zIndices[1]};
 `, D = s(o.Viewport)`
-  padding: ${({
-  theme: e
-}) => e.spaces[1]};
-`, E = a.forwardRef((e, r) => t(P, {
-  ref: r,
-  ...e
-})), G = I`
+  padding: ${({ theme: e }) => e.spaces[1]};
+`, E = a.forwardRef((e, r) => t(P, { ref: r, ...e })), G = I`
   width: 100%;
   border: none;
   text-align: left;
   outline-offset: -3px;
   border-radius: ${(e) => e.theme.borderRadius};
   padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({
-  theme: e
-}) => e.spaces[4]};
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
+  padding-left: ${({ theme: e }) => e.spaces[4]};
+  background-color: ${({ theme: e }) => e.colors.neutral0};
   display: flex;
   align-items: center;
-  gap: ${({
-  theme: e
-}) => e.spaces[2]};
+  gap: ${({ theme: e }) => e.spaces[2]};
   white-space: nowrap;
   user-select: none;
 
   &:focus-visible {
     outline: none;
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
+    background-color: ${({ theme: e }) => e.colors.primary100};
   }
 `, P = s(o.Item)`
   ${G}
 
   &:hover {
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
+    background-color: ${({ theme: e }) => e.colors.primary100};
   }
 
   &[data-state='checked'] {
     ${u} {
       font-weight: bold;
-      color: ${({
-  theme: e
-}) => e.colors.primary600};
+      color: ${({ theme: e }) => e.colors.primary600};
     }
   }
-`, X = o.Root, Y = v, Z = j, _ = o.Portal, ee = B, re = D, oe = E, te = o.ItemIndicator, se = o.ItemText, ne = o.Group;
+`, Q = o.Root, U = v, W = j, X = o.Portal, Y = B, Z = D, _ = E, ee = o.ItemIndicator, re = o.ItemText, oe = o.Group;
 export {
-  ee as Content,
-  ne as Group,
-  oe as Item,
-  te as ItemIndicator,
-  se as ItemText,
-  _ as Portal,
-  X as Root,
-  Y as Trigger,
-  Z as Value,
-  re as Viewport
+  Y as Content,
+  oe as Group,
+  _ as Item,
+  ee as ItemIndicator,
+  re as ItemText,
+  X as Portal,
+  Q as Root,
+  U as Trigger,
+  W as Value,
+  Z as Viewport
 };

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