@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/Select/index.js

@@ -1,12 +1,19 @@
-import { Select as o } from "./Select.js";
-import { Option as p } from "./Option.js";
-import { OptGroup as m } from "./OptGroup.js";
-import { MultiSelectNested as l } from "./MultiSelectNested.js";
-import { SelectList as i } from "./SelectList.js";
+import { MultiSelectNested as o } from "./MultiSelectNested.js";
+import { MultiSelect as l, MultiSelectGroup as p, MultiSelectOption as i } from "./MultiSelect.js";
+import { SingleSelect as c, SingleSelectOption as f } from "./SingleSelect.js";
+import { Select as x } from "./Select.js";
+import { Option as n } from "./Option.js";
+import { OptGroup as O } from "./OptGroup.js";
+import { SelectList as s } from "./SelectList.js";
 export {
-  l as MultiSelectNested,
-  m as OptGroup,
-  p as Option,
-  o as Select,
-  i as SelectList
+  l as MultiSelect,
+  p as MultiSelectGroup,
+  o as MultiSelectNested,
+  i as MultiSelectOption,
+  O as OptGroup,
+  n as Option,
+  x as Select,
+  s as SelectList,
+  c as SingleSelect,
+  f as SingleSelectOption
 };

package/dist/SimpleMenu/SimpleMenu.cjs

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),M=require("@radix-ui/react-use-callback-ref"),z=require("@strapi/icons"),U=require("prop-types"),H=require("react-router-dom"),G=require("styled-components"),q=require("./utils.cjs"),b=require("../Box/Box.cjs"),j=require("../Button/Button.cjs"),J=require("../Flex/Flex.cjs"),s=require("../helpers/keyboardKeys.cjs"),Q=require("../hooks/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Popover/Popover.cjs"),T=require("../Typography/Typography.cjs"),B=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=B(a),t=B(U),E=B(G),Y=E.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),N=require("@strapi/icons"),C=require("@strapi/ui-primitives"),F=require("react-router-dom"),W=require("styled-components"),R=require("./utils.cjs"),s=require("../helpers/keyboardKeys.cjs"),H=require("../hooks/useId.cjs"),U=require("../Link/Link.cjs"),M=require("../Button/Button.cjs"),z=require("../Popover/Popover.cjs"),E=require("../Box/Box.cjs"),D=require("../Typography/Typography.cjs"),G=require("../Flex/Flex.cjs"),w=e=>e&&e.__esModule?e:{default:e},K=w(r),m=w(W),J=m.default.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${q.getOptionStyle}
-`,Z=E.default(H.NavLink)`
+  ${R.getOptionStyle}
+`,Q=m.default(F.NavLink)`
   text-decoration: none;
-  ${q.getOptionStyle}
-`,ee=E.default(X.Link)`
+  ${R.getOptionStyle}
+`,X=m.default(U.Link)`
   /* Removing Link hover effect */
   &:hover {
     color: currentColor;
@@ -22,14 +22,14 @@
     }
   }
 
-  ${q.getOptionStyle}
-`,te=E.default.span`
+  ${R.getOptionStyle}
+`,Y=m.default.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`,ne=E.default(j.Button)`
+`,Z=m.default(M.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,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=Q.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(J.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(z.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;
+`,ee=({children:e,onClick:h=()=>{},to:i,isFocused:u=!1,href:c,...j})=>{const a=r.useRef();r.useEffect(()=>{u&&a.current&&a.current.focus()},[u]);const l={tabIndex:u?0:-1,ref:a,role:"menuitem",...j},d=x=>{(x.key===s.KeyboardKeys.SPACE||x.key===s.KeyboardKeys.ENTER)&&h()};return i&&!c?o.jsx(Q,{to:i,...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})}):c&&!i?o.jsx(X,{isExternal:!0,href:c,...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})}):o.jsx(J,{onKeyDown:d,onMouseDown:h,type:"button",...l,children:o.jsx(E.Box,{padding:2,children:o.jsx(D.Typography,{children:e})})})},ne=({label:e,children:h,id:i,as:u,onOpen:c=()=>{},onClose:j=()=>{},size:a="M",popoverPlacement:l="bottom-start",onReachEnd:d,...x})=>{const f=r.useRef(void 0),k=H.useId(i),b=r.useRef(!1),[p,y]=r.useState(!1),[I,v]=r.useState(0),g=r.Children.toArray(h),P=a==="S"?Z:M.Button,T=u||P,q=!!d&&typeof d=="function";r.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=g.findIndex(t=>K.default.isValidElement(t)&&t.props.children===e||t===e);n!==-1&&v(n)}},[e]);const S=C.useCallbackRef(c),B=C.useCallbackRef(j);r.useEffect(()=>{b?.current?p?S():B():b.current=!0},[b,B,S,p]),r.useEffect(()=>{K.default.isValidElement(e)&&I===-1&&f.current.focus()},[e,I]);const O=n=>{p&&(n.key===s.KeyboardKeys.ESCAPE&&(n.stopPropagation(),y(!1),f.current.focus()),n.key===s.KeyboardKeys.DOWN&&v(t=>t===g.length-1?0:t+1),n.key===s.KeyboardKeys.UP&&v(t=>t===0?g.length-1:t-1))},$=n=>{(n.key===s.KeyboardKeys.ENTER||n.key===s.KeyboardKeys.SPACE)&&y(t=>!t)},L=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||y(!1)},_=n=>{n.preventDefault(),y(t=>!t)},A=()=>{q&&d()},V=g.map((n,t)=>o.jsx(G.Flex,{as:"li",justifyContent:"center",role:"menuitem",children:K.default.isValidElement(n)?r.cloneElement(n,{onClick(){n.props.onClick(),y(!1),f.current.focus()},isFocused:I===t}):n},t));return o.jsxs("div",{onKeyDown:O,children:[o.jsx(T,{label:K.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":p,"aria-controls":k,onKeyDown:$,onMouseDown:_,ref:f,type:"button",variant:"ghost",endIcon:o.jsx(Y,{children:o.jsx(N.CarretDown,{"aria-hidden":!0})}),...x,children:e}),p&&o.jsx(z.Popover,{onBlur:L,placement:l,source:f,onReachEnd:A,intersectionId:q?`popover-${k}`:void 0,spacing:4,children:o.jsx(E.Box,{role:"menu",as:"ul",padding:1,id:k,children:V})})]})};exports.MenuItem=ee;exports.SimpleMenu=ne;

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,28 +1,28 @@
-import t, { useRef as T, useEffect as v, useState as B, Children as z, cloneElement as j } from "react";
-import { useCallbackRef as K } from "@radix-ui/react-use-callback-ref";
-import { CarretDown as H } from "@strapi/icons";
-import e from "prop-types";
-import { NavLink as U } from "react-router-dom";
-import y from "styled-components";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import x, { useRef as S, useEffect as E, useState as $, Children as _, cloneElement as H } from "react";
+import { CarretDown as U } from "@strapi/icons";
+import { useCallbackRef as P } from "@strapi/ui-primitives";
+import { NavLink as q } from "react-router-dom";
+import m from "styled-components";
 import { getOptionStyle as b } from "./utils.js";
+import { KeyboardKeys as r } from "../helpers/keyboardKeys.js";
+import { useId as z } from "../hooks/useId.js";
+import { Link as G } from "../Link/Link.js";
+import { Button as L } from "../Button/Button.js";
+import { Popover as J } from "../Popover/Popover.js";
 import { Box as k } from "../Box/Box.js";
-import { Button as $ } from "../Button/Button.js";
-import { Flex as G } from "../Flex/Flex.js";
-import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-import { useId as J } from "../hooks/useId.js";
-import { Link as Q } from "../Link/Link.js";
-import { POPOVER_PLACEMENTS as X, Popover as Y } from "../Popover/Popover.js";
-import { Typography as O } from "../Typography/Typography.js";
-const Z = y.button`
+import { Typography as R } from "../Typography/Typography.js";
+import { Flex as Q } from "../Flex/Flex.js";
+const X = m.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
   ${b}
-`, ee = y(U)`
+`, Y = m(q)`
   text-decoration: none;
   ${b}
-`, ne = y(Q)`
+`, Z = m(G)`
   /* Removing Link hover effect */
   &:hover {
     color: currentColor;
@@ -30,7 +30,7 @@ const Z = y.button`
 
   &:focus-visible {
     /* Removing Link focus-visible after properties and reset to global outline */
-    outline: 2px solid ${({ theme: o }) => o.colors.primary600};
+    outline: 2px solid ${({ theme: n }) => n.colors.primary600};
     outline-offset: 2px;
     &:after {
       content: none;
@@ -38,142 +38,72 @@ const Z = y.button`
   }
 
   ${b}
-`, te = y.span`
+`, ee = m.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, oe = y($)`
-  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[3]}`};
-`, L = ({ children: o, onClick: E, to: s, isFocused: a, href: l, ...P }) => {
-  const c = T();
-  v(() => {
-    a && c.current && c.current.focus();
-  }, [a]);
-  const p = {
-    tabIndex: a ? 0 : -1,
-    ref: c,
+`, ne = m(L)`
+  padding: ${({ theme: n }) => `${n.spaces[1]} ${n.spaces[3]}`};
+`, xe = ({ children: n, onClick: h = () => {
+}, to: i, isFocused: s = !1, href: c, ...D }) => {
+  const a = S();
+  E(() => {
+    s && a.current && a.current.focus();
+  }, [s]);
+  const l = {
+    tabIndex: s ? 0 : -1,
+    ref: a,
     role: "menuitem",
-    ...P
-  }, u = (g) => {
-    (g.key === i.SPACE || g.key === i.ENTER) && E();
+    ...D
+  }, u = (y) => {
+    (y.key === r.SPACE || y.key === r.ENTER) && h();
   };
-  return s && !l ? /* @__PURE__ */ t.createElement(ee, { to: s, ...p }, /* @__PURE__ */ t.createElement(k, { padding: 2 }, /* @__PURE__ */ t.createElement(O, null, o))) : l && !s ? /* @__PURE__ */ t.createElement(ne, { isExternal: !0, href: l, ...p }, /* @__PURE__ */ t.createElement(k, { padding: 2 }, /* @__PURE__ */ t.createElement(O, null, o))) : /* @__PURE__ */ t.createElement(Z, { onKeyDown: u, onMouseDown: E, type: "button", ...p }, /* @__PURE__ */ t.createElement(k, { padding: 2 }, /* @__PURE__ */ t.createElement(O, null, o)));
-};
-L.defaultProps = {
-  as: void 0,
-  href: void 0,
-  isFocused: !1,
-  onClick() {
-  },
-  to: void 0
-};
-L.propTypes = {
-  as: e.elementType,
-  children: e.node.isRequired,
-  href: e.string,
-  isFocused: e.bool,
-  onClick: e.func,
-  to: e.string
-};
-const C = ({
-  label: o,
-  children: E,
-  id: s,
-  as: a,
-  onOpen: l = () => {
-  },
-  onClose: P = () => {
-  },
-  size: c,
-  popoverPlacement: p,
-  onReachEnd: u,
-  ...g
-}) => {
-  const d = T(), R = J(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);
-      n !== -1 && I(n);
+  return i && !c ? t(Y, { to: i, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : c && !i ? t(Z, { isExternal: !0, href: c, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : t(X, { onKeyDown: u, onMouseDown: h, type: "button", ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) });
+}, Ee = ({ label: n, children: h, id: i, as: s, onOpen: c = () => {
+}, onClose: D = () => {
+}, size: a = "M", popoverPlacement: l = "bottom-start", onReachEnd: u, ...y }) => {
+  const d = S(void 0), I = z(i), C = S(!1), [f, p] = $(!1), [v, w] = $(0), g = _.toArray(h), O = s || (a === "S" ? ne : L), B = !!u && typeof u == "function";
+  E(() => {
+    if (["string", "number"].includes(typeof n)) {
+      const e = g.findIndex((o) => x.isValidElement(o) && o.props.children === n || o === n);
+      e !== -1 && w(e);
     }
-  }, [o]);
-  const w = K(l), M = K(P);
-  v(() => {
-    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) => {
-    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) => {
-    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || f(!1);
-  }, q = (n) => {
-    n.preventDefault(), f((r) => !r);
-  }, W = () => {
-    S && u();
-  }, _ = h.map((n, r) => /* @__PURE__ */ t.createElement(G, { as: "li", key: r, justifyContent: "center", role: "menuitem" }, j(n, {
-    onClick() {
-      n.props.onClick(), f(!1), d.current.focus();
-    },
-    isFocused: D === r
-  })));
-  return /* @__PURE__ */ t.createElement("div", { onKeyDown: N }, /* @__PURE__ */ t.createElement(
-    A,
-    {
-      label: t.isValidElement(o) ? null : o,
-      "aria-haspopup": !0,
-      "aria-expanded": m,
-      "aria-controls": R,
-      onKeyDown: F,
-      onMouseDown: q,
-      ref: d,
-      type: "button",
-      variant: "ghost",
-      endIcon: /* @__PURE__ */ t.createElement(te, null, /* @__PURE__ */ t.createElement(H, { "aria-hidden": !0 })),
-      ...g
-    },
-    o
-  ), m && /* @__PURE__ */ t.createElement(
-    Y,
-    {
-      onBlur: V,
-      placement: p,
-      source: d,
-      onReachEnd: W,
-      intersectionId: S ? `popover-${R}` : void 0,
-      spacing: 4
-    },
-    /* @__PURE__ */ t.createElement(k, { role: "menu", as: "ul", padding: 1, id: R }, _)
+  }, [n]);
+  const K = P(c), M = P(D);
+  E(() => {
+    C?.current ? f ? K() : M() : C.current = !0;
+  }, [C, M, K, f]), E(() => {
+    x.isValidElement(n) && v === -1 && d.current.focus();
+  }, [n, v]);
+  const T = (e) => {
+    f && (e.key === r.ESCAPE && (e.stopPropagation(), p(!1), d.current.focus()), e.key === r.DOWN && w((o) => o === g.length - 1 ? 0 : o + 1), e.key === r.UP && w((o) => o === 0 ? g.length - 1 : o - 1));
+  }, A = (e) => {
+    (e.key === r.ENTER || e.key === r.SPACE) && p((o) => !o);
+  }, V = (e) => {
+    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || p(!1);
+  }, N = (e) => {
+    e.preventDefault(), p((o) => !o);
+  }, j = () => {
+    B && u();
+  }, W = g.map((e, o) => (
+    // eslint-disable-next-line react/no-array-index-key
+    t(Q, { as: "li", justifyContent: "center", role: "menuitem", children: x.isValidElement(e) ? H(e, {
+      onClick() {
+        e.props.onClick(), p(!1), d.current.focus();
+      },
+      isFocused: v === o
+    }) : e }, o)
   ));
-};
-C.defaultProps = {
-  as: void 0
-};
-C.displayName = "SimpleMenu";
-C.defaultProps = {
-  id: void 0,
-  onOpen: void 0,
-  onClose: void 0,
-  onReachEnd: void 0,
-  popoverPlacement: "bottom-start",
-  size: "M"
-};
-C.propTypes = {
-  as: e.any,
-  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
-  id: e.string,
-  label: e.oneOfType([e.string, e.number, e.element]).isRequired,
-  onClose: e.func,
-  onOpen: e.func,
-  onReachEnd: e.func,
-  popoverPlacement: e.oneOf(X),
-  size: e.oneOf(["S", "M"])
+  return (
+    // TODO: review why we need to eslint it and how to solve this issue.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    F("div", { onKeyDown: T, children: [t(O, { label: x.isValidElement(n) ? null : n, "aria-haspopup": !0, "aria-expanded": f, "aria-controls": I, onKeyDown: A, onMouseDown: N, ref: d, type: "button", variant: "ghost", endIcon: t(ee, { children: t(U, { "aria-hidden": !0 }) }), ...y, children: n }), f && t(J, { onBlur: V, placement: l, source: d, onReachEnd: j, intersectionId: B ? `popover-${I}` : void 0, spacing: 4, children: t(k, { role: "menu", as: "ul", padding: 1, id: I, children: W }) })] })
+  );
 };
 export {
-  L as MenuItem,
-  C as SimpleMenu
+  xe as MenuItem,
+  Ee as SimpleMenu
 };

package/dist/SimpleMenu/index.cjs

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

package/dist/SimpleMenu/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=({theme:o})=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=({theme:o})=>`
     text-align: left;
     width: 100%;
     color: ${o.colors.neutral800};

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"),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)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("react"),m=require("styled-components"),s=require("../helpers/theme.cjs"),o=require("../Flex/Flex.cjs"),f=e=>e&&e.__esModule?e:{default:e},c=f(m),l={size:!0,spacing:!0},g=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
 
   & > * + * {
-    margin-top: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
+    margin-top: ${({theme:e,spacing:t})=>s.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,h=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+`,h=c.default(o.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
   }
 
   & > * + * {
-    margin-left: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
+    margin-left: ${({theme:e,spacing:t})=>s.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,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;
+`,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?i.jsx(h,{ref:a,spacing:t||r,...n}):i.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));d.displayName="Stack";exports.Stack=d;

package/dist/Stack/Stack.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
 import a from "styled-components";
-import { Flex as s } from "../Flex/Flex.js";
-import { extractStyleFromTheme as m } from "../helpers/theme.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+import { Flex as m } from "../Flex/Flex.js";
 const c = {
   size: !0,
   spacing: !0
-}, f = a(s).withConfig({
+}, f = a(m).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
   & > * {
@@ -15,12 +15,9 @@ const c = {
   }
 
   & > * + * {
-    margin-top: ${({
-  theme: e,
-  spacing: r
-}) => m(e.spaces, r, void 0)};
+    margin-top: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
   }
-`, g = a(s).withConfig({
+`, g = a(m).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
   & > * {
@@ -29,27 +26,9 @@ const c = {
   }
 
   & > * + * {
-    margin-left: ${({
-  theme: e,
-  spacing: r
-}) => m(e.spaces, r, void 0)};
+    margin-left: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
   }
-`, 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(g, {
-  ref: i,
-  spacing: r || t,
-  ...o
-}) : n(f, {
-  direction: "column",
-  alignItems: "stretch",
-  ref: i,
-  spacing: r || t,
-  ...o
-})));
+`, 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(g, { ref: i, spacing: r || t, ...o }) : n(f, { direction: "column", alignItems: "stretch", ref: i, spacing: r || t, ...o })));
 l.displayName = "Stack";
 export {
   l as Stack

package/dist/Stack/index.cjs

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

package/dist/Status/Status.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),b=require("prop-types"),m=require("styled-components"),$=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),T=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(h),o=a(b),c=a(m),_=c.default.div`
-  margin-right: ${({theme:e})=>e.spaces[3]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),p=require("styled-components"),b=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),h=o=>o&&o.__esModule?o:{default:o},u=h(p),y=u.default.div`
+  margin-right: ${({theme:o})=>o.spaces[3]};
   width: ${6/16}rem;
   height: ${6/16}rem;
   border-radius: 50%;
-  background: ${({theme:e,backgroundColor:t})=>e.colors[t]};
-`,B=c.default($.Box)`
-  ${T.Typography} {
-    color: ${({theme:e,textColor:t})=>e.colors[t]};
+  background: ${({theme:o,backgroundColor:t})=>o.colors[t]};
+`,f=u.default(b.Box)`
+  ${x.Typography} {
+    color: ${({theme:o,textColor:t})=>o.colors[t]};
   }
-`,s=({variant:e,showBullet:t,size:l,children:n,...p})=>{const i=`${e}100`,g=`${e}200`,f=`${e}600`,y=`${e}600`,u=l==="S"?2:5,d=l==="S"?1:4;return r.default.createElement(B,{borderColor:g,textColor:y,background:i,hasRadius:!0,paddingTop:d,paddingBottom:d,paddingLeft:u,paddingRight:u,...p},t?r.default.createElement(x.Flex,null,r.default.createElement(_,{backgroundColor:f}),n):n)};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:o.default.node.isRequired,showBullet:o.default.bool,size:o.default.oneOf(["S","M"]),variant:o.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;
+`,m=({variant:o="primary",showBullet:t=!0,size:e="M",children:s,...l})=>{const c=`${o}100`,a=`${o}200`,i=`${o}600`,g=`${o}600`,d=e==="S"?2:5,n=e==="S"?1:4;return r.jsx(f,{borderColor:a,textColor:g,background:c,hasRadius:!0,paddingTop:n,paddingBottom:n,paddingLeft:d,paddingRight:d,...l,children:t?r.jsxs($.Flex,{children:[r.jsx(y,{backgroundColor:i}),s]}):s})};exports.Status=m;

package/dist/Status/Status.js

@@ -1,48 +1,22 @@
-import t from "react";
-import e from "prop-types";
-import l from "styled-components";
-import { Box as f } from "../Box/Box.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { Typography as h } from "../Typography/Typography.js";
-const b = l.div`
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
+import p from "styled-components";
+import { Box as u } from "../Box/Box.js";
+import { Typography as $ } from "../Typography/Typography.js";
+import { Flex as b } from "../Flex/Flex.js";
+const h = p.div`
   margin-right: ${({ theme: o }) => o.spaces[3]};
   width: ${6 / 16}rem;
   height: ${6 / 16}rem;
   border-radius: 50%;
   background: ${({ theme: o, backgroundColor: r }) => o.colors[r]};
-`, y = l(f)`
-  ${h} {
+`, x = p(u)`
+  ${$} {
     color: ${({ theme: o, textColor: r }) => o.colors[r]};
   }
-`, p = ({ variant: o, showBullet: r, size: n, children: a, ...i }) => {
-  const c = `${o}100`, m = `${o}200`, u = `${o}600`, g = `${o}600`, s = n === "S" ? 2 : 5, d = n === "S" ? 1 : 4;
-  return /* @__PURE__ */ t.createElement(
-    y,
-    {
-      borderColor: m,
-      textColor: g,
-      background: c,
-      hasRadius: !0,
-      paddingTop: d,
-      paddingBottom: d,
-      paddingLeft: s,
-      paddingRight: s,
-      ...i
-    },
-    r ? /* @__PURE__ */ t.createElement($, null, /* @__PURE__ */ t.createElement(b, { backgroundColor: u }), a) : a
-  );
-};
-p.defaultProps = {
-  showBullet: !0,
-  size: "M",
-  variant: "primary"
-};
-p.propTypes = {
-  children: e.node.isRequired,
-  showBullet: e.bool,
-  size: e.oneOf(["S", "M"]),
-  variant: e.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
+`, B = ({ variant: o = "primary", showBullet: r = !0, size: t = "M", children: d, ...c }) => {
+  const i = `${o}100`, l = `${o}200`, g = `${o}600`, m = `${o}600`, s = t === "S" ? 2 : 5, e = t === "S" ? 1 : 4;
+  return n(x, { borderColor: l, textColor: m, background: i, hasRadius: !0, paddingTop: e, paddingBottom: e, paddingLeft: s, paddingRight: s, ...c, children: r ? a(b, { children: [n(h, { backgroundColor: g }), d] }) : d });
 };
 export {
-  p as Status
+  B as Status
 };

package/dist/Status/index.cjs

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

package/dist/SubNav/SubNav.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("prop-types"),u=require("styled-components"),d=require("../Grid/Grid.cjs");require("../Grid/GridItem.cjs");const t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(s),c=t(i),n=t(u),r=`${232/16}rem`,p=n.default(d.Grid)`
-  width: ${r};
-  background: ${({theme:e})=>e.colors.neutral100};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("styled-components"),u=require("../Grid/Grid.cjs"),a=t=>t&&t.__esModule?t:{default:t},i=a(s),e=`${232/16}rem`,n=i.default(u.Grid)`
+  width: ${e};
+  background: ${({theme:t})=>t.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
+  border-right: 1px solid ${({theme:t})=>t.colors.neutral200};
   z-index: 1;
-`,o=({ariaLabel:e,...a})=>l.default.createElement(p,{"aria-label":e,as:"nav",...a});o.propTypes={ariaLabel:c.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;
+`,l=({ariaLabel:t,...r})=>o.jsx(n,{"aria-label":t,as:"nav",...r});exports.SubNav=l;exports.subNavWidth=e;

package/dist/SubNav/SubNav.js

@@ -1,22 +1,17 @@
-import t from "react";
-import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
 import i from "styled-components";
 import { Grid as a } from "../Grid/Grid.js";
-import "../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = i(a)`
-  width: ${p};
-  background: ${({ theme: r }) => r.colors.neutral100};
+const e = `${232 / 16}rem`, s = i(a)`
+  width: ${e};
+  background: ${({ theme: o }) => o.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-right: 1px solid ${({ theme: o }) => o.colors.neutral200};
   z-index: 1;
-`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, { "aria-label": r, as: "nav", ...o });
-l.propTypes = {
-  ariaLabel: e.string.isRequired
-};
+`, d = ({ ariaLabel: o, ...r }) => t(s, { "aria-label": o, as: "nav", ...r });
 export {
-  l as SubNav,
-  p as subNavWidth
+  d as SubNav,
+  e as subNavWidth
 };

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