@strapi/design-system 1.6.1 → 1.6.3

package/dist/Select/SingleSelect.cjs

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),W=require("react"),U=require("@radix-ui/react-select"),w=require("@strapi/icons"),Y=require("styled-components"),G=require("../Field/Field.cjs"),J=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),X=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Stack/Stack.cjs"),g=require("../Box/Box.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Typography/Typography.cjs"),ee=require("../helpers/useId.cjs"),te=require("../hooks/useIntersection.cjs"),I=require("../themes/utils.cjs"),re=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function v(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const h=v(W),o=v(U),c=re(Y),ne=[" ","Enter","ArrowUp","ArrowDown"],oe=({children:e,clearLabel:n="Clear",customizeContent:s=p=>p.toString(),disabled:i,error:b,hint:k,id:R,label:T,labelAction:O,onChange:$,onClear:a,onReachEnd:m,placeholder:_,required:y,selectButtonTitle:he,startIcon:S,size:B="M",value:f})=>{const p=h.useRef(null),x=h.useRef(null),d=h.useRef(null),[D,C]=h.useState(""),[E,P]=h.useState(!1),u=ee.useId(R),V=`${u}-hint`,M=`${u}-error`,N=r=>{$?$(typeof f=="number"?Number(r):r):C(r)},z=r=>{a&&!i&&(a(r),x.current.focus())},A=r=>{P(r)},H=r=>{d.current&&d.current===r.target.closest("div")&&r.preventDefault()},K=r=>{ne.includes(r.key)&&d.current&&d.current===r.target.closest("div")&&!i&&a&&(r.preventDefault(),a(r),x.current.focus())},F=`intersection-${u}`,L=r=>{m&&m(r)};te.useIntersection(p,L,{selectorToWatch:`#${F}`,skipWhen:!E});const l=typeof f<"u"?f.toString():D;return t.jsx(G.Field,{hint:k,error:b,id:u,required:y,children:t.jsxs(Z.Stack,{spacing:1,children:[t.jsx(J.FieldLabel,{action:O,children:T}),t.jsxs(o.Root,{onOpenChange:A,disabled:i,required:y,onValueChange:N,value:l,children:[t.jsxs(ie,{id:u,"aria-labelledby":`${V} ${M}`,"aria-disabled":i,$hasError:Boolean(b),$size:B,onPointerDown:H,onKeyDown:K,ref:x,children:[t.jsxs(q.Flex,{as:"span",gap:4,children:[S&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:S}),t.jsx(j.Typography,{ellipsis:!0,textColor:l?"neutral800":"neutral600",children:t.jsx(o.Value,{"aria-label":l,children:l?s(l):_})})]}),t.jsxs(q.Flex,{as:"span",gap:3,children:[l&&a?t.jsx(se,{hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:z,"aria-disabled":i,"aria-label":n,title:n,ref:d,children:t.jsx(w.Cross,{})}):null,t.jsx(le,{children:t.jsx(w.CarretDown,{})})]})]}),t.jsx(o.Portal,{children:t.jsx(ce,{position:"popper",sideOffset:4,children:t.jsxs(ae,{ref:p,children:[e,t.jsx(g.Box,{id:F,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(X.FieldError,{})]})})},se=c.default(g.Box)`
+  border: none;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,ie=c.default(o.Trigger)`
+  position: relative;
+  border: 1px solid ${({theme:e,$hasError:n})=>n?e.colors.danger600:e.colors.neutral200};
+  padding-right: ${({theme:e})=>e.spaces[3]};
+  padding-left: ${({theme:e})=>e.spaces[3]};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  background: ${({theme:e})=>e.colors.neutral0};
+  overflow: hidden;
+  min-height: ${({theme:e,$size:n})=>I.getThemeSize("input")({theme:e,size:n})};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({theme:e})=>e.spaces[4]};
+
+  &[aria-disabled='true'] {
+    color: ${e=>e.theme.colors.neutral600};
+    background: ${e=>e.theme.colors.neutral150};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({theme:e,$hasError:n})=>I.inputFocusStyle()({theme:e,hasError:n})};
+`,le=c.default(o.Icon)`
+  & > svg {
+    width: ${6/16}rem;
+
+    & > path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+`,ce=c.default(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};
+  width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`,ae=c.default(o.Viewport)`
+  padding: ${({theme:e})=>e.spaces[1]};
+`,de=({children:e,startIcon:n,value:s})=>t.jsxs(ue,{textValue:e.toString(),value:s.toString(),children:[n&&t.jsx(g.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:n}),t.jsx(j.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:e})})]}),ue=c.default(o.Item)`
+  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};
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &:hover {
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${j.Typography} {
+      font-weight: bold;
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+  }
+`;exports.SingleSelect=oe;exports.SingleSelectOption=de;

package/dist/Select/SingleSelect.js

@@ -0,0 +1,285 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import * as h from "react";
+import * as n from "@radix-ui/react-select";
+import { Cross as H, CarretDown as M } from "@strapi/icons";
+import s from "styled-components";
+import { Field as U } from "../Field/Field.js";
+import { FieldLabel as Y } from "../Field/FieldLabel.js";
+import "../Field/FieldInput.js";
+import { FieldHint as _ } from "../Field/FieldHint.js";
+import { FieldError as G } from "../Field/FieldError.js";
+import "../Field/FieldContext.js";
+import "../Field/FieldAction.js";
+import { Stack as J } from "../Stack/Stack.js";
+import { Box as m } from "../Box/Box.js";
+import { Flex as I } from "../Flex/Flex.js";
+import { Typography as b } from "../Typography/Typography.js";
+import { useId as L } from "../helpers/useId.js";
+import { useIntersection as Q } from "../hooks/useIntersection.js";
+import { getThemeSize as X, inputFocusStyle as Z } from "../themes/utils.js";
+const ee = [" ", "Enter", "ArrowUp", "ArrowDown"], Te = ({
+  children: e,
+  clearLabel: o = "Clear",
+  customizeContent: g = (p) => p.toString(),
+  disabled: a,
+  error: w,
+  hint: k,
+  id: T,
+  label: C,
+  labelAction: D,
+  onChange: x,
+  onClear: c,
+  onReachEnd: y,
+  placeholder: E,
+  required: S,
+  selectButtonTitle: se,
+  startIcon: v,
+  size: F = "M",
+  value: f
+}) => {
+  const p = h.useRef(null), $ = h.useRef(null), d = h.useRef(null), [O, B] = h.useState(""), [V, N] = h.useState(!1), u = L(T), P = `${u}-hint`, j = `${u}-error`, z = (r) => {
+    x ? x(typeof f == "number" ? Number(r) : r) : B(r);
+  }, K = (r) => {
+    c && !a && (c(r), $.current.focus());
+  }, q = (r) => {
+    N(r);
+  }, A = (r) => {
+    d.current && d.current === r.target.closest("div") && r.preventDefault();
+  }, W = (r) => {
+    ee.includes(r.key) && d.current && d.current === r.target.closest("div") && !a && c && (r.preventDefault(), c(r), $.current.focus());
+  }, R = `intersection-${u}`;
+  Q(p, (r) => {
+    y && y(r);
+  }, {
+    selectorToWatch: `#${R}`,
+    skipWhen: !V
+  });
+  const l = typeof f < "u" ? f.toString() : O;
+  return t(U, {
+    hint: k,
+    error: w,
+    id: u,
+    required: S,
+    children: i(J, {
+      spacing: 1,
+      children: [t(Y, {
+        action: D,
+        children: C
+      }), i(n.Root, {
+        onOpenChange: q,
+        disabled: a,
+        required: S,
+        onValueChange: z,
+        value: l,
+        children: [i(te, {
+          id: u,
+          "aria-labelledby": `${P} ${j}`,
+          "aria-disabled": a,
+          $hasError: Boolean(w),
+          $size: F,
+          onPointerDown: A,
+          onKeyDown: W,
+          ref: $,
+          children: [i(I, {
+            as: "span",
+            gap: 4,
+            children: [v && t(m, {
+              as: "span",
+              "aria-hidden": !0,
+              children: v
+            }), t(b, {
+              ellipsis: !0,
+              textColor: l ? "neutral800" : "neutral600",
+              children: t(n.Value, {
+                "aria-label": l,
+                children: l ? g(l) : E
+              })
+            })]
+          }), i(I, {
+            as: "span",
+            gap: 3,
+            children: [l && c ? t(re, {
+              hasRadius: !0,
+              background: "transparent",
+              role: "button",
+              tabIndex: 0,
+              onClick: K,
+              "aria-disabled": a,
+              "aria-label": o,
+              title: o,
+              ref: d,
+              children: t(H, {})
+            }) : null, t(oe, {
+              children: t(M, {})
+            })]
+          })]
+        }), t(n.Portal, {
+          children: t(ne, {
+            position: "popper",
+            sideOffset: 4,
+            children: i(ie, {
+              ref: p,
+              children: [e, t(m, {
+                id: R,
+                width: "100%",
+                height: "1px"
+              })]
+            })
+          })
+        })]
+      }), t(_, {}), t(G, {})]
+    })
+  });
+}, re = s(m)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+  }
+`, te = s(n.Trigger)`
+  position: relative;
+  border: 1px solid ${({
+  theme: e,
+  $hasError: o
+}) => o ? e.colors.danger600 : e.colors.neutral200};
+  padding-right: ${({
+  theme: e
+}) => e.spaces[3]};
+  padding-left: ${({
+  theme: e
+}) => e.spaces[3]};
+  border-radius: ${({
+  theme: e
+}) => e.borderRadius};
+  background: ${({
+  theme: e
+}) => e.colors.neutral0};
+  overflow: hidden;
+  min-height: ${({
+  theme: e,
+  $size: o
+}) => X("input")({
+  theme: e,
+  size: o
+})};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${({
+  theme: e
+}) => e.spaces[4]};
+
+  &[aria-disabled='true'] {
+    color: ${(e) => e.theme.colors.neutral600};
+    background: ${(e) => e.theme.colors.neutral150};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({
+  theme: e,
+  $hasError: o
+}) => Z()({
+  theme: e,
+  hasError: o
+})};
+`, oe = s(n.Icon)`
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({
+  theme: e
+}) => e.colors.neutral600};
+    }
+  }
+`, ne = s(n.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};
+  width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+`, ie = s(n.Viewport)`
+  padding: ${({
+  theme: e
+}) => e.spaces[1]};
+`, Ce = ({
+  children: e,
+  startIcon: o,
+  value: g
+}) => i(le, {
+  textValue: e.toString(),
+  value: g.toString(),
+  children: [o && t(m, {
+    as: "span",
+    paddingRight: 2,
+    "aria-hidden": !0,
+    children: o
+  }), t(b, {
+    textColor: "neutral800",
+    children: t(n.ItemText, {
+      children: e
+    })
+  })]
+}), le = s(n.Item)`
+  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};
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({
+  theme: e
+}) => e.colors.primary100};
+  }
+
+  &:hover {
+    background-color: ${({
+  theme: e
+}) => e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${b} {
+      font-weight: bold;
+      color: ${({
+  theme: e
+}) => e.colors.primary600};
+    }
+  }
+`;
+export {
+  Te as SingleSelect,
+  Ce as SingleSelectOption
+};

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -32,4 +32,4 @@
   }
 `,ne=E.default(j.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,I=({children:e,onClick:h,to:u,isFocused:l,href:c,...x})=>{const i=a.useRef();a.useEffect(()=>{l&&i.current&&i.current.focus()},[l]);const d={tabIndex:l?0:-1,ref:i,role:"menuitem",...x},f=v=>{(v.key===s.KeyboardKeys.SPACE||v.key===s.KeyboardKeys.ENTER)&&h()};return u&&!c?o.default.createElement(Z,{to:u,...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):c&&!u?o.default.createElement(ee,{isExternal:!0,href:c,...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):o.default.createElement(Y,{onKeyDown:f,onMouseDown:h,type:"button",...d},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e)))};I.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,href:t.default.string,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const g=({label:e,children:h,id:u,as:l,onOpen:c=()=>{},onClose:x=()=>{},size:i,popoverPlacement:d,onReachEnd:f,...v})=>{const p=a.useRef(),K=X.useId("simplemenu",u),R=a.useRef(!1),[y,m]=a.useState(!1),[P,C]=a.useState(0),k=a.Children.toArray(h),L=i==="S"?ne:j.Button,_=l||L,O=!!f&&typeof f=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(r=>r.props.children===e);n!==-1&&C(n)}},[e]);const S=M.useCallbackRef(c),D=M.useCallbackRef(x);a.useEffect(()=>{R?.current?y?S():D():R.current=!0},[R,D,S,y]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const $=n=>{y&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),m(!1),p.current.focus()),n.key===s.KeyboardKeys.DOWN&&C(r=>r===k.length-1?0:r+1),n.key===s.KeyboardKeys.UP&&C(r=>r===0?k.length-1:r-1))},F=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&m(r=>!r)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||m(!1)},N=n=>{n.preventDefault(),m(r=>!r)},V=()=>{O&&f()},W=k.map((n,r)=>o.default.createElement(Q.Flex,{as:"li",key:r,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),m(!1),p.current.focus()},isFocused:P===r})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":K,onKeyDown:F,onMouseDown:N,ref:p,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(G.CarretDown,{"aria-hidden":!0})),...v},e),y&&o.default.createElement(w.Popover,{onBlur:A,placement:d,source:p,onReachEnd:V,intersectionId:O?`popover-${K}`:void 0,spacing:4},o.default.createElement(b.Box,{role:"menu",as:"ul",padding:1,id:K},W)))};g.defaultProps={as:void 0};g.displayName="SimpleMenu";g.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};g.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(w.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=g;
+`,I=({children:e,onClick:h,to:u,isFocused:l,href:c,...x})=>{const d=a.useRef();a.useEffect(()=>{l&&d.current&&d.current.focus()},[l]);const i={tabIndex:l?0:-1,ref:d,role:"menuitem",...x},f=v=>{(v.key===s.KeyboardKeys.SPACE||v.key===s.KeyboardKeys.ENTER)&&h()};return u&&!c?o.default.createElement(Z,{to:u,...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):c&&!u?o.default.createElement(ee,{isExternal:!0,href:c,...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e))):o.default.createElement(Y,{onKeyDown:f,onMouseDown:h,type:"button",...i},o.default.createElement(b.Box,{padding:2},o.default.createElement(T.Typography,null,e)))};I.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,href:t.default.string,isFocused:t.default.bool,onClick:t.default.func,to:t.default.string};const g=({label:e,children:h,id:u,as:l,onOpen:c=()=>{},onClose:x=()=>{},size:d,popoverPlacement:i,onReachEnd:f,...v})=>{const p=a.useRef(),K=X.useId(u),R=a.useRef(!1),[y,m]=a.useState(!1),[P,C]=a.useState(0),k=a.Children.toArray(h),L=d==="S"?ne:j.Button,_=l||L,O=!!f&&typeof f=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(r=>r.props.children===e);n!==-1&&C(n)}},[e]);const S=M.useCallbackRef(c),D=M.useCallbackRef(x);a.useEffect(()=>{R?.current?y?S():D():R.current=!0},[R,D,S,y]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const $=n=>{y&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),m(!1),p.current.focus()),n.key===s.KeyboardKeys.DOWN&&C(r=>r===k.length-1?0:r+1),n.key===s.KeyboardKeys.UP&&C(r=>r===0?k.length-1:r-1))},F=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&m(r=>!r)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||m(!1)},N=n=>{n.preventDefault(),m(r=>!r)},V=()=>{O&&f()},W=k.map((n,r)=>o.default.createElement(Q.Flex,{as:"li",key:r,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),m(!1),p.current.focus()},isFocused:P===r})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":K,onKeyDown:F,onMouseDown:N,ref:p,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(G.CarretDown,{"aria-hidden":!0})),...v},e),y&&o.default.createElement(w.Popover,{onBlur:A,placement:i,source:p,onReachEnd:V,intersectionId:O?`popover-${K}`:void 0,spacing:4},o.default.createElement(b.Box,{role:"menu",as:"ul",padding:1,id:K},W)))};g.defaultProps={as:void 0};g.displayName="SimpleMenu";g.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};g.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(w.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=g;

package/dist/SimpleMenu/SimpleMenu.js

@@ -110,7 +110,7 @@ const C = ({
   onReachEnd: u,
   ...g
 }) => {
-  const m = T(), R = Y("simplemenu", s), x = T(!1), [d, f] = B(!1), [D, I] = B(0), h = z.toArray(E), A = a || (c === "S" ? oe : $), S = !!u && typeof u == "function";
+  const d = T(), R = Y(s), x = T(!1), [m, f] = B(!1), [D, I] = B(0), h = z.toArray(E), A = a || (c === "S" ? oe : $), S = !!u && typeof u == "function";
   v(() => {
     if (["string", "number"].includes(typeof o)) {
       const n = h.findIndex((r) => r.props.children === o);
@@ -119,12 +119,12 @@ const C = ({
   }, [o]);
   const w = K(l), M = K(P);
   v(() => {
-    x?.current ? d ? w() : M() : x.current = !0;
-  }, [x, M, w, d]), v(() => {
-    t.isValidElement(o) && D === -1 && m.current.focus();
+    x?.current ? m ? w() : M() : x.current = !0;
+  }, [x, M, w, m]), v(() => {
+    t.isValidElement(o) && D === -1 && d.current.focus();
   }, [o, D]);
   const N = (n) => {
-    d && (n.key === i.ESCAPE && (n.stopPropagation(), f(!1), m.current.focus()), n.key === i.DOWN && I((r) => r === h.length - 1 ? 0 : r + 1), n.key === i.UP && I((r) => r === 0 ? h.length - 1 : r - 1));
+    m && (n.key === i.ESCAPE && (n.stopPropagation(), f(!1), d.current.focus()), n.key === i.DOWN && I((r) => r === h.length - 1 ? 0 : r + 1), n.key === i.UP && I((r) => r === 0 ? h.length - 1 : r - 1));
   }, F = (n) => {
     (n.key === i.ENTER || n.key === i.SPACE) && f((r) => !r);
   }, V = (n) => {
@@ -140,7 +140,7 @@ const C = ({
     role: "menuitem"
   }, j(n, {
     onClick() {
-      n.props.onClick(), f(!1), m.current.focus();
+      n.props.onClick(), f(!1), d.current.focus();
     },
     isFocused: D === r
   })));
@@ -149,21 +149,21 @@ const C = ({
   }, /* @__PURE__ */ t.createElement(A, {
     label: t.isValidElement(o) ? null : o,
     "aria-haspopup": !0,
-    "aria-expanded": d,
+    "aria-expanded": m,
     "aria-controls": R,
     onKeyDown: F,
     onMouseDown: q,
-    ref: m,
+    ref: d,
     type: "button",
     variant: "ghost",
     endIcon: /* @__PURE__ */ t.createElement(te, null, /* @__PURE__ */ t.createElement(U, {
       "aria-hidden": !0
     })),
     ...g
-  }, o), d && /* @__PURE__ */ t.createElement(X, {
+  }, o), m && /* @__PURE__ */ t.createElement(X, {
     onBlur: V,
     placement: p,
-    source: m,
+    source: d,
     onReachEnd: W,
     intersectionId: S ? `popover-${R}` : void 0,
     spacing: 4

package/dist/Stack/Stack.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),u=require("react"),m=require("styled-components"),o=require("../Flex/Flex.cjs"),i=require("../helpers/theme.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=f(m),l={size:!0},g=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("react"),m=require("styled-components"),i=require("../Flex/Flex.cjs"),o=require("../helpers/theme.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=f(m),l={size:!0,spacing:!0},g=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
 
   & > * + * {
-    margin-top: ${({theme:e,spacing:t})=>i.extractStyleFromTheme(e.spaces,t,void 0)};
+    margin-top: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,h=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+`,h=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
   }
 
   & > * + * {
-    margin-left: ${({theme:e,spacing:t})=>i.extractStyleFromTheme(e.spaces,t,void 0)};
+    margin-left: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,d=u.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},a)=>(r&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?s.jsx(h,{ref:a,spacing:t||r,...n}):s.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));d.displayName="Stack";exports.Stack=d;
+`,u=d.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},a)=>(r&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?s.jsx(h,{ref:a,spacing:t||r,...n}):s.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));u.displayName="Stack";exports.Stack=u;

package/dist/Stack/Stack.js

@@ -4,7 +4,8 @@ import a from "styled-components";
 import { Flex as s } from "../Flex/Flex.js";
 import { extractStyleFromTheme as m } from "../helpers/theme.js";
 const c = {
-  size: !0
+  size: !0,
+  spacing: !0
 }, f = a(s).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
@@ -19,7 +20,7 @@ const c = {
   spacing: r
 }) => m(e.spaces, r, void 0)};
   }
-`, l = a(s).withConfig({
+`, g = a(s).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
   & > * {
@@ -33,12 +34,12 @@ const c = {
   spacing: r
 }) => m(e.spaces, r, void 0)};
   }
-`, g = d(({
+`, l = d(({
   horizontal: e = !1,
   spacing: r,
   size: t,
   ...o
-}, i) => (t && console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'), e ? n(l, {
+}, i) => (t && console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'), e ? n(g, {
   ref: i,
   spacing: r || t,
   ...o
@@ -49,7 +50,7 @@ const c = {
   spacing: r || t,
   ...o
 })));
-g.displayName = "Stack";
+l.displayName = "Stack";
 export {
-  g as Stack
+  l as Stack
 };

package/dist/SubNav/SubNavHeader.cjs

@@ -1,4 +1,4 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("prop-types"),I=require("styled-components"),R=require("@strapi/icons"),_=require("../Flex/Flex.cjs"),D=require("../Typography/Typography.cjs"),P=require("../IconButton/IconButton.cjs"),s=require("../Box/Box.cjs"),F=require("../Divider/Divider.cjs"),K=require("../Searchbar/Searchbar.cjs"),L=require("../Searchbar/SearchForm.cjs"),k=require("../helpers/useId.cjs"),w=require("../helpers/usePrevious.cjs"),O=require("../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(C),H=d(I),h=H.default(F.Divider)`
   width: ${24/16}rem;
   background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:g,searchLabel:f,searchable:b,onChange:y,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===O.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:m,onChange:y,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(_.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),b&&e.default.createElement(P.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(R.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;
+`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=w.usePrevious(n),q=k.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===O.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(_.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(P.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(R.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;

package/dist/SubNav/SubNavHeader.js

@@ -15,21 +15,21 @@ import { KeyboardKeys as j } from "../helpers/keyboardKeys.js";
 const d = x(k)`
   width: ${24 / 16}rem;
   background-color: ${({ theme: l }) => l.colors.neutral200};
-`, u = ({ as: l, label: f, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
-  const [a, c] = L(!1), m = $(a), C = _("subnav-searchbar-clear", y), o = p(), i = p();
+`, f = ({ as: l, label: u, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
+  const [o, i] = L(!1), m = $(o), C = _(y), a = p(), c = p();
   w(() => {
-    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
-  }, [a, m]);
+    o && a.current && a.current.focus(), m && !o && c.current && c.current.focus();
+  }, [o, m]);
   const v = () => {
-    c((t) => !t);
+    i((t) => !t);
   }, B = (t) => {
-    E(t), o.current.focus();
+    E(t), a.current.focus();
   }, T = (t) => {
-    t.relatedTarget?.id !== C && c(!1);
+    t.relatedTarget?.id !== C && i(!1);
   }, R = (t) => {
-    t.key === j.ESCAPE && c(!1);
+    t.key === j.ESCAPE && i(!1);
   };
-  return a ? /* @__PURE__ */ e.createElement(n, {
+  return o ? /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 4,
     paddingTop: 5,
     paddingBottom: 2,
@@ -40,7 +40,7 @@ const d = x(k)`
     onChange: h,
     placeholder: "e.g: strapi-plugin-abcd",
     onKeyDown: R,
-    ref: o,
+    ref: a,
     onBlur: T,
     onClear: B,
     onSubmit: S,
@@ -60,8 +60,8 @@ const d = x(k)`
   }, /* @__PURE__ */ e.createElement(K, {
     variant: "beta",
     as: l
-  }, f), g && /* @__PURE__ */ e.createElement(P, {
-    ref: i,
+  }, u), g && /* @__PURE__ */ e.createElement(P, {
+    ref: c,
     onClick: v,
     label: s,
     icon: /* @__PURE__ */ e.createElement(D, null)
@@ -69,7 +69,7 @@ const d = x(k)`
     paddingTop: 4
   }, /* @__PURE__ */ e.createElement(d, null)));
 };
-u.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
   onChange() {
@@ -82,7 +82,7 @@ u.defaultProps = {
   searchLabel: "",
   id: void 0
 };
-u.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -94,5 +94,5 @@ u.propTypes = {
   value: r.string
 };
 export {
-  u as SubNavHeader
+  f as SubNavHeader
 };

package/dist/SubNav/SubNavLinkSection.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons"),l=require("../Box/Box.cjs"),b=require("../Flex/Flex.cjs"),v=require("../Typography/Typography.cjs"),S=require("../helpers/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(m),i=d(h),E=i.default(l.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons"),l=require("../Box/Box.cjs"),b=require("../Flex/Flex.cjs"),S=require("../Typography/Typography.cjs"),v=require("../helpers/useId.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(m),i=d(h),E=i.default(l.Box)`
   svg {
     height: ${4/16}rem;
     path {
@@ -16,4 +16,4 @@
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=S.useId("subnav-list",p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(q,{rotated:n},t.default.createElement(x.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(v.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={children:void 0,id:void 0};s.propTypes={children:r.default.node,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;
+`,s=({label:e,children:u,id:p})=>{const[n,f]=o.useState(!0),c=v.useId(p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":n,"aria-controls":c},t.default.createElement(q,{rotated:n},t.default.createElement(x.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:c},o.Children.map(u,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={children:void 0,id:void 0};s.propTypes={children:r.default.node,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;

package/dist/SubNav/SubNavLinkSection.js

@@ -4,8 +4,8 @@ import a from "styled-components";
 import { CarretDown as h } from "@strapi/icons";
 import { Box as i } from "../Box/Box.js";
 import { Flex as E } from "../Flex/Flex.js";
-import { Typography as b } from "../Typography/Typography.js";
-import { useId as y } from "../helpers/useId.js";
+import { Typography as y } from "../Typography/Typography.js";
+import { useId as b } from "../helpers/useId.js";
 const k = a(i)`
   svg {
     height: ${4 / 16}rem;
@@ -24,9 +24,9 @@ const k = a(i)`
   align-items: center;
   width: ${12 / 16}rem;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, l = ({ label: t, children: p, id: s }) => {
-  const [r, m] = f(!0), d = y("subnav-list", s), c = () => {
-    m((n) => !n);
+`, l = ({ label: t, children: p, id: m }) => {
+  const [r, s] = f(!0), d = b(m), c = () => {
+    s((n) => !n);
   };
   return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, {
     paddingLeft: 7,
@@ -45,7 +45,7 @@ const k = a(i)`
     "aria-hidden": !0
   })), /* @__PURE__ */ e.createElement(i, {
     paddingLeft: 2
-  }, /* @__PURE__ */ e.createElement(b, {
+  }, /* @__PURE__ */ e.createElement(y, {
     as: "span",
     fontWeight: "semiBold",
     textColor: "neutral800"