@strapi/design-system 1.3.1 → 1.4.0-beta.1

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,105 +1,108 @@
-var U = Object.defineProperty;
-var D = Object.getOwnPropertySymbols;
-var B = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
-var b = (e, r, n) => r in e ? U(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, y = (e, r) => {
-  for (var n in r || (r = {}))
-    B.call(r, n) && b(e, n, r[n]);
-  if (D)
-    for (var n of D(r))
-      K.call(r, n) && b(e, n, r[n]);
+var Y = Object.defineProperty;
+var g = Object.getOwnPropertySymbols;
+var $ = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
+var N = (e, r, o) => r in e ? Y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, y = (e, r) => {
+  for (var o in r || (r = {}))
+    $.call(r, o) && N(e, o, r[o]);
+  if (g)
+    for (var o of g(r))
+      F.call(r, o) && N(e, o, r[o]);
   return e;
 };
-var x = (e, r) => {
-  var n = {};
+var S = (e, r) => {
+  var o = {};
   for (var s in e)
-    B.call(e, s) && r.indexOf(s) < 0 && (n[s] = e[s]);
-  if (e != null && D)
-    for (var s of D(e))
-      r.indexOf(s) < 0 && K.call(e, s) && (n[s] = e[s]);
-  return n;
+    $.call(e, s) && r.indexOf(s) < 0 && (o[s] = e[s]);
+  if (e != null && g)
+    for (var s of g(e))
+      r.indexOf(s) < 0 && F.call(e, s) && (o[s] = e[s]);
+  return o;
 };
-import i, { useRef as O, useEffect as k, useState as A, Children as G, cloneElement as H } from "react";
-import o from "prop-types";
-import C from "styled-components";
-import J from "@strapi/icons/CarretDown";
-import { NavLink as Q } from "react-router-dom";
-import { Typography as N } from "../Typography/Typography.js";
-import { Box as v } from "../Box/Box.js";
-import { Flex as X } from "../Flex/Flex.js";
-import { Button as $ } from "../Button/Button.js";
-import { POPOVER_PLACEMENTS as Y, Popover as Z } from "../Popover/Popover.js";
-import { getOptionStyle as F } from "./utils.js";
-import { useId as ee } from "../helpers/useId.js";
+import i, { useRef as w, useEffect as C, useState as V, Children as Z, cloneElement as ee } from "react";
+import n from "prop-types";
+import v from "styled-components";
+import { NavLink as ne } from "react-router-dom";
+import { useCallbackRef as q } from "@radix-ui/react-use-callback-ref";
+import oe from "@strapi/icons/CarretDown";
+import { Typography as L } from "../Typography/Typography.js";
+import { Box as x } from "../Box/Box.js";
+import { Flex as te } from "../Flex/Flex.js";
+import { Button as W } from "../Button/Button.js";
+import { POPOVER_PLACEMENTS as re, Popover as se } from "../Popover/Popover.js";
+import { getOptionStyle as _ } from "./utils.js";
+import { useId as ie } from "../helpers/useId.js";
 import { KeyboardKeys as c } from "../helpers/keyboardKeys.js";
-const ne = C.button`
+const ae = v.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${F}
-`, te = C(Q)`
+  ${_}
+`, ce = v(ne)`
   text-decoration: none;
-  ${F}
-`, oe = C.span`
+  ${_}
+`, le = v.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, re = C($)`
+`, pe = v(W)`
   padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
-`, V = (T) => {
-  var g = T, { children: e, onClick: r, to: n, isFocused: s } = g, E = x(g, ["children", "onClick", "to", "isFocused"]);
-  const p = O();
-  k(() => {
+`, z = (b) => {
+  var E = b, { children: e, onClick: r, to: o, isFocused: s } = E, k = S(E, ["children", "onClick", "to", "isFocused"]);
+  const p = w();
+  C(() => {
     s && p.current && p.current.focus();
   }, [s]);
-  const h = y({
+  const l = y({
     tabIndex: s ? 0 : -1,
     ref: p,
     role: "menuitem"
-  }, E), R = (l) => {
-    (l.key === c.SPACE || l.key === c.ENTER) && r();
+  }, k), D = (I) => {
+    (I.key === c.SPACE || I.key === c.ENTER) && r();
   };
-  return n ? /* @__PURE__ */ i.createElement(te, y({
-    to: n
-  }, h), /* @__PURE__ */ i.createElement(v, {
+  return o ? /* @__PURE__ */ i.createElement(ce, y({
+    to: o
+  }, l), /* @__PURE__ */ i.createElement(x, {
     padding: 2
-  }, /* @__PURE__ */ i.createElement(N, null, e))) : /* @__PURE__ */ i.createElement(ne, y({
-    onKeyDown: R,
+  }, /* @__PURE__ */ i.createElement(L, null, e))) : /* @__PURE__ */ i.createElement(ae, y({
+    onKeyDown: D,
     onMouseDown: r,
     type: "button"
-  }, h), /* @__PURE__ */ i.createElement(v, {
+  }, l), /* @__PURE__ */ i.createElement(x, {
     padding: 2
-  }, /* @__PURE__ */ i.createElement(N, null, e)));
+  }, /* @__PURE__ */ i.createElement(L, null, e)));
 };
-V.defaultProps = {
-  onClick: () => {
+z.defaultProps = {
+  as: void 0,
+  onClick() {
   },
   isFocused: !1,
   to: void 0
 };
-V.propTypes = {
-  as: o.elementType,
-  children: o.node.isRequired,
-  isFocused: o.bool,
-  onClick: o.func,
-  to: o.string
+z.propTypes = {
+  as: n.elementType,
+  children: n.node.isRequired,
+  isFocused: n.bool,
+  onClick: n.func,
+  to: n.string
 };
-const I = (R) => {
-  var l = R, {
+const P = (I) => {
+  var M = I, {
     label: e,
     children: r,
-    id: n,
+    id: o,
     as: s,
-    onOpen: E = () => {
+    onOpen: k = () => {
     },
-    onClose: T = () => {
+    onClose: b = () => {
     },
-    size: g,
-    popoverPlacement: p
-  } = l, h = x(l, [
+    size: E,
+    popoverPlacement: p,
+    onReachEnd: l
+  } = M, D = S(M, [
     "label",
     "children",
     "id",
@@ -107,84 +110,96 @@ const I = (R) => {
     "onOpen",
     "onClose",
     "size",
-    "popoverPlacement"
+    "popoverPlacement",
+    "onReachEnd"
   ]);
-  const u = O(), M = ee("simplemenu", n), m = O(!1), [f, d] = A(!1), [S, w] = A(0), P = G.toArray(r), q = s || (g === "S" ? re : $);
-  k(() => {
+  const u = w(), O = ie("simplemenu", o), m = w(!1), [d, f] = V(!1), [R, T] = V(0), h = Z.toArray(r), j = s || (E === "S" ? pe : W), B = !!l && typeof l == "function";
+  C(() => {
     if (["string", "number"].includes(typeof e)) {
-      const t = P.findIndex((a) => a.props.children === e);
-      t !== -1 && w(t);
+      const t = h.findIndex((a) => a.props.children === e);
+      t !== -1 && T(t);
     }
-  }, [e]), k(() => {
-    m != null && m.current ? f && typeof E == "function" ? E() : typeof T == "function" && T() : m.current = !0;
-  }, [m, f]), k(() => {
-    i.isValidElement(e) && S == -1 && u.current.focus();
-  }, [e, S]);
-  const L = (t) => {
-    f && (t.key === c.ESCAPE && (t.stopPropagation(), d(!1), u.current.focus()), t.key === c.DOWN && w((a) => a === P.length - 1 ? 0 : a + 1), t.key === c.UP && w((a) => a === 0 ? P.length - 1 : a - 1));
-  }, W = (t) => {
-    (t.key === c.ENTER || t.key === c.SPACE) && d((a) => !a);
-  }, _ = (t) => {
-    t.preventDefault(), t.currentTarget.contains(t.relatedTarget) || d(!1);
-  }, z = (t) => {
-    t.preventDefault(), d((a) => !a);
-  }, j = P.map((t, a) => /* @__PURE__ */ i.createElement(X, {
+  }, [e]);
+  const K = q(k), A = q(b);
+  C(() => {
+    m != null && m.current ? d ? K() : A() : m.current = !0;
+  }, [m, A, K, d]), C(() => {
+    i.isValidElement(e) && R === -1 && u.current.focus();
+  }, [e, R]);
+  const H = (t) => {
+    d && (t.key === c.ESCAPE && (t.stopPropagation(), f(!1), u.current.focus()), t.key === c.DOWN && T((a) => a === h.length - 1 ? 0 : a + 1), t.key === c.UP && T((a) => a === 0 ? h.length - 1 : a - 1));
+  }, U = (t) => {
+    (t.key === c.ENTER || t.key === c.SPACE) && f((a) => !a);
+  }, G = (t) => {
+    t.preventDefault(), t.currentTarget.contains(t.relatedTarget) || f(!1);
+  }, J = (t) => {
+    t.preventDefault(), f((a) => !a);
+  }, Q = () => {
+    B && l();
+  }, X = h.map((t, a) => /* @__PURE__ */ i.createElement(te, {
     as: "li",
     key: a,
     justifyContent: "center",
     role: "menuitem"
-  }, H(t, {
-    onClick: () => {
-      t.props.onClick(), d(!1), u.current.focus();
+  }, ee(t, {
+    onClick() {
+      t.props.onClick(), f(!1), u.current.focus();
     },
-    isFocused: S === a
+    isFocused: R === a
   })));
   return /* @__PURE__ */ i.createElement("div", {
-    onKeyDown: L
-  }, /* @__PURE__ */ i.createElement(q, y({
+    onKeyDown: H
+  }, /* @__PURE__ */ i.createElement(j, y({
     label: i.isValidElement(e) ? null : e,
     "aria-haspopup": !0,
-    "aria-expanded": f,
-    "aria-controls": M,
-    onKeyDown: W,
-    onMouseDown: z,
+    "aria-expanded": d,
+    "aria-controls": O,
+    onKeyDown: U,
+    onMouseDown: J,
     ref: u,
     type: "button",
     variant: "ghost",
-    endIcon: /* @__PURE__ */ i.createElement(oe, null, /* @__PURE__ */ i.createElement(J, {
+    endIcon: /* @__PURE__ */ i.createElement(le, null, /* @__PURE__ */ i.createElement(oe, {
       "aria-hidden": !0
     }))
-  }, h), e), f && /* @__PURE__ */ i.createElement(Z, {
-    onBlur: _,
+  }, D), e), d && /* @__PURE__ */ i.createElement(se, {
+    onBlur: G,
     placement: p,
     source: u,
+    onReachEnd: Q,
+    intersectionId: B ? `popover-${O}` : void 0,
     spacing: 4
-  }, /* @__PURE__ */ i.createElement(v, {
+  }, /* @__PURE__ */ i.createElement(x, {
     role: "menu",
     as: "ul",
     padding: 1,
-    id: M
-  }, j)));
+    id: O
+  }, X)));
 };
-I.defaultProps = {
+P.defaultProps = {
   as: void 0
 };
-I.displayName = "SimpleMenu";
-I.defaultProps = {
+P.displayName = "SimpleMenu";
+P.defaultProps = {
+  id: void 0,
+  onOpen: void 0,
+  onClose: void 0,
+  onReachEnd: void 0,
   popoverPlacement: "bottom-start",
   size: "M"
 };
-I.propTypes = {
-  as: o.any,
-  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired,
-  id: o.string,
-  label: o.oneOfType([o.string, o.number, o.element]).isRequired,
-  onClose: o.func,
-  onOpen: o.func,
-  popoverPlacement: o.oneOf(Y),
-  size: o.oneOf(["S", "M"])
+P.propTypes = {
+  as: n.any,
+  children: n.oneOfType([n.arrayOf(n.node), n.node]).isRequired,
+  id: n.string,
+  label: n.oneOfType([n.string, n.number, n.element]).isRequired,
+  onClose: n.func,
+  onOpen: n.func,
+  onReachEnd: n.func,
+  popoverPlacement: n.oneOf(re),
+  size: n.oneOf(["S", "M"])
 };
 export {
-  V as MenuItem,
-  I as SimpleMenu
+  z as MenuItem,
+  P as SimpleMenu
 };

package/dist/Status/Status.cjs

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

package/dist/Status/Status.js

@@ -20,10 +20,10 @@ var g = (o, r) => {
 };
 import s from "react";
 import a from "prop-types";
+import f from "styled-components";
 import { Box as k } from "../Box/Box.js";
 import { Flex as w } from "../Flex/Flex.js";
 import { Typography as x } from "../Typography/Typography.js";
-import f from "styled-components";
 const R = f.div`
   margin-right: ${({ theme: o }) => o.spaces[3]};
   width: ${6 / 16}rem;

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

@@ -1,4 +1,4 @@
-import e, { useState as w, useRef as p, useEffect as x } from "react";
+import e, { useState as w, useRef as d, useEffect as x } from "react";
 import r from "prop-types";
 import D from "styled-components";
 import I from "@strapi/icons/Search";
@@ -12,21 +12,21 @@ import { SearchForm as _ } from "../Searchbar/SearchForm.js";
 import { useId as $ } from "../helpers/useId.js";
 import { usePrevious as j } from "../helpers/usePrevious.js";
 import { KeyboardKeys as q } from "../helpers/keyboardKeys.js";
-const d = D(O)`
+const u = D(O)`
   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] = w(!1), C = j(a), v = $("subnav-searchbar-clear", y), o = p(), i = p();
+`, f = ({ as: l, label: g, searchLabel: s, searchable: h, onChange: b, value: E, onClear: S, onSubmit: y, id: C }) => {
+  const [a, c] = w(!1), m = j(a), v = $("subnav-searchbar-clear", C), o = d(), i = d();
   x(() => {
-    a && o.current && o.current.focus(), C && !a && i.current && i.current.focus();
-  }, [a]);
+    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
+  }, [a, m]);
   const B = () => {
     c((t) => !t);
   }, T = (t) => {
-    E(t), o.current.focus();
+    S(t), o.current.focus();
   }, R = (t) => {
-    var m;
-    ((m = t.relatedTarget) == null ? void 0 : m.id) !== v && c(!1);
+    var p;
+    ((p = t.relatedTarget) == null ? void 0 : p.id) !== v && c(!1);
   }, L = (t) => {
     t.key === q.ESCAPE && c(!1);
   };
@@ -37,20 +37,20 @@ const d = D(O)`
     paddingRight: 4
   }, /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(F, {
     name: "searchbar",
-    value: b,
-    onChange: h,
+    value: E,
+    onChange: b,
     placeholder: "e.g: strapi-plugin-abcd",
     onKeyDown: L,
     ref: o,
     onBlur: R,
     onClear: T,
-    onSubmit: S,
+    onSubmit: y,
     clearLabel: "Clear",
     size: "S"
   }, s)), /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 2,
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(d, null))) : /* @__PURE__ */ e.createElement(n, {
+  }, /* @__PURE__ */ e.createElement(u, null))) : /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 6,
     paddingTop: 6,
     paddingBottom: 2,
@@ -61,29 +61,29 @@ const d = D(O)`
   }, /* @__PURE__ */ e.createElement(P, {
     variant: "beta",
     as: l
-  }, f), g && /* @__PURE__ */ e.createElement(k, {
+  }, g), h && /* @__PURE__ */ e.createElement(k, {
     ref: i,
     onClick: B,
     label: s,
     icon: /* @__PURE__ */ e.createElement(I, null)
   })), /* @__PURE__ */ e.createElement(n, {
     paddingTop: 4
-  }, /* @__PURE__ */ e.createElement(d, null)));
+  }, /* @__PURE__ */ e.createElement(u, null)));
 };
-u.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
-  onChange: () => {
+  onChange() {
   },
-  onClear: () => {
+  onClear() {
   },
-  onSubmit: () => {
+  onSubmit() {
   },
   value: "",
   searchLabel: "",
   id: void 0
 };
-u.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -95,5 +95,5 @@ u.propTypes = {
   value: r.string
 };
 export {
-  u as SubNavHeader
+  f as SubNavHeader
 };

package/dist/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";var $=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,l)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,g=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&p(e,l,t[l]);if(n)for(var l of n(t))y.call(t,l)&&p(e,l,t[l]);return e};var m=(e,t)=>{var l={};for(var o in e)f.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&y.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),B=require("prop-types"),S=require("styled-components"),T=require("@strapi/icons/Dot"),k=require("react-router-dom"),s=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=u(_),a=u(B),c=u(S),q=u(T),E=c.default(s.Box)`
+"use strict";var $=Object.defineProperty;var a=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,o)=>t in e?$(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,g=(e,t)=>{for(var o in t||(t={}))f.call(t,o)&&p(e,o,t[o]);if(a)for(var o of a(t))y.call(t,o)&&p(e,o,t[o]);return e};var m=(e,t)=>{var o={};for(var l in e)f.call(e,l)&&t.indexOf(l)<0&&(o[l]=e[l]);if(e!=null&&a)for(var l of a(e))t.indexOf(l)<0&&y.call(e,l)&&(o[l]=e[l]);return o};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _=require("react"),B=require("prop-types"),S=require("styled-components"),T=require("@strapi/icons/Dot"),q=require("react-router-dom"),s=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=u(_),n=u(B),c=u(S),E=u(T),L=c.default(s.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,h=c.default(q.default)`
+`,h=c.default(E.default)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
     fill: ${({theme:e,$active:t})=>t?e.colors.primary600:e.colors.neutral600};
   }
-`,L=c.default.div`
+`,k=c.default.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,i=j=>{var d=j,{children:e,icon:t,withBullet:l,isSubSectionChild:o}=d,v=m(d,["children","icon","withBullet","isSubSectionChild"]);return r.default.createElement(E,g({as:k.NavLink,icon:t,background:"neutral100",paddingLeft:o?9:7,paddingBottom:2,paddingTop:2},v),r.default.createElement(b.Flex,null,t?r.default.createElement(L,null,t):r.default.createElement(h,null),r.default.createElement(s.Box,{paddingLeft:2},r.default.createElement(x.Typography,{as:"span"},e))),l&&r.default.createElement(s.Box,{as:b.Flex,paddingRight:4},r.default.createElement(h,{$active:!0})))};i.displayName="SubNavLink";i.defaultProps={icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={children:a.default.node,icon:a.default.element,isSubSectionChild:a.default.bool,link:a.default.element,withBullet:a.default.bool};exports.SubNavLink=i;
+`,i=j=>{var d=j,{children:e,icon:t,withBullet:o,isSubSectionChild:l}=d,v=m(d,["children","icon","withBullet","isSubSectionChild"]);return r.default.createElement(L,g({as:q.NavLink,icon:t,background:"neutral100",paddingLeft:l?9:7,paddingBottom:2,paddingTop:2},v),r.default.createElement(b.Flex,null,t?r.default.createElement(k,null,t):r.default.createElement(h,null),r.default.createElement(s.Box,{paddingLeft:2},r.default.createElement(x.Typography,{as:"span"},e))),o&&r.default.createElement(s.Box,{as:b.Flex,paddingRight:4},r.default.createElement(h,{$active:!0})))};i.displayName="SubNavLink";i.defaultProps={icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={children:n.default.node.isRequired,icon:n.default.element,isSubSectionChild:n.default.bool,withBullet:n.default.bool};exports.SubNavLink=i;

package/dist/SubNav/SubNavLink.js

@@ -1,11 +1,11 @@
 var v = Object.defineProperty;
-var n = Object.getOwnPropertySymbols;
+var i = Object.getOwnPropertySymbols;
 var d = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
 var m = (e, r, o) => r in e ? v(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
   for (var o in r || (r = {}))
     d.call(r, o) && m(e, o, r[o]);
-  if (n)
-    for (var o of n(r))
+  if (i)
+    for (var o of i(r))
       u.call(r, o) && m(e, o, r[o]);
   return e;
 };
@@ -13,20 +13,20 @@ var g = (e, r) => {
   var o = {};
   for (var t in e)
     d.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
-  if (e != null && n)
-    for (var t of n(e))
+  if (e != null && i)
+    for (var t of i(e))
       r.indexOf(t) < 0 && u.call(e, t) && (o[t] = e[t]);
   return o;
 };
 import l from "react";
-import i from "prop-types";
+import n from "prop-types";
 import p from "styled-components";
 import E from "@strapi/icons/Dot";
-import { NavLink as k } from "react-router-dom";
+import { NavLink as x } from "react-router-dom";
 import { Box as a } from "../Box/Box.js";
 import { Typography as b } from "../Typography/Typography.js";
 import { Flex as $ } from "../Flex/Flex.js";
-const x = p(a)`
+const S = p(a)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -59,21 +59,21 @@ const x = p(a)`
   * {
     fill: ${({ theme: e, $active: r }) => r ? e.colors.primary600 : e.colors.neutral600};
   }
-`, S = p.div`
+`, k = p.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, c = (w) => {
-  var s = w, { children: e, icon: r, withBullet: o, isSubSectionChild: t } = s, h = g(s, ["children", "icon", "withBullet", "isSubSectionChild"]);
-  return /* @__PURE__ */ l.createElement(x, f({
-    as: k,
+`, s = (w) => {
+  var c = w, { children: e, icon: r, withBullet: o, isSubSectionChild: t } = c, h = g(c, ["children", "icon", "withBullet", "isSubSectionChild"]);
+  return /* @__PURE__ */ l.createElement(S, f({
+    as: x,
     icon: r,
     background: "neutral100",
     paddingLeft: t ? 9 : 7,
     paddingBottom: 2,
     paddingTop: 2
-  }, h), /* @__PURE__ */ l.createElement($, null, r ? /* @__PURE__ */ l.createElement(S, null, r) : /* @__PURE__ */ l.createElement(y, null), /* @__PURE__ */ l.createElement(a, {
+  }, h), /* @__PURE__ */ l.createElement($, null, r ? /* @__PURE__ */ l.createElement(k, null, r) : /* @__PURE__ */ l.createElement(y, null), /* @__PURE__ */ l.createElement(a, {
     paddingLeft: 2
   }, /* @__PURE__ */ l.createElement(b, {
     as: "span"
@@ -84,19 +84,18 @@ const x = p(a)`
     $active: !0
   })));
 };
-c.displayName = "SubNavLink";
-c.defaultProps = {
+s.displayName = "SubNavLink";
+s.defaultProps = {
   icon: null,
   isSubSectionChild: !1,
   withBullet: !1
 };
-c.propTypes = {
-  children: i.node,
-  icon: i.element,
-  isSubSectionChild: i.bool,
-  link: i.element,
-  withBullet: i.bool
+s.propTypes = {
+  children: n.node.isRequired,
+  icon: n.element,
+  isSubSectionChild: n.bool,
+  withBullet: n.bool
 };
 export {
-  c as SubNavLink
+  s as SubNavLink
 };

package/dist/SubNav/SubNavLinkSection.cjs

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