@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,38 +1,24 @@
-import { jsxs as I, jsx as s } from "react/jsx-runtime";
-import { useRef as h, useState as g } from "react";
-import { Root as x, Trigger as M, Content as R, Item as j } from "./Menu.js";
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import { useRef as g, useState as x } from "react";
+import { Root as S, Trigger as C, Content as M, Item as R } from "./Menu.js";
 import * as b from "./Menu.js";
-import { useId as y } from "../../hooks/useId.js";
-import { useIntersection as C } from "../../hooks/useIntersection.js";
-const O = ({
-  children: c,
-  id: f,
-  onOpen: t,
-  onClose: n,
-  popoverPlacement: m,
-  onReachEnd: o,
-  ...r
-}) => {
-  const l = h(null), [a, p] = g(!1), d = (e) => {
+import { useId as j } from "../../hooks/useId.js";
+import { useIntersection as y } from "../../hooks/useIntersection.js";
+const O = ({ children: c, id: f, onOpen: t, onClose: n, popoverPlacement: m, onReachEnd: o, ...r }) => {
+  const l = g(null), [a, p] = x(!1), u = (e) => {
     o && o(e);
-  }, u = (e) => {
+  }, d = (e) => {
     e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
-  }, i = `intersection-${y(f)}`;
-  return C(l, d, {
-    selectorToWatch: `#${i}`,
+  }, I = j(f), s = `intersection-${CSS.escape(I)}`;
+  return y(l, u, {
+    selectorToWatch: `#${s}`,
+    /**
+     * We need to know when the select is open because only then will viewportRef
+     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+     */
     skipWhen: !a
-  }), I(x, {
-    onOpenChange: u,
-    children: [s(M, {
-      ...r,
-      children: r.label
-    }), s(R, {
-      intersectionId: i,
-      popoverPlacement: m,
-      children: c
-    })]
-  });
-}, P = j;
+  }), h(S, { onOpenChange: d, children: [i(C, { ...r, children: r.label }), i(M, { intersectionId: s, popoverPlacement: m, children: c })] });
+}, P = R;
 export {
   b as Menu,
   P as MenuItem,

package/dist/v2/SimpleMenu/index.cjs

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

package/dist/v2/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");require("react");const s=require("prop-types"),a=require("styled-components"),u=require("../../Grid/Grid.cjs"),e=`${232/16}rem`,n=a(u.Grid)`
+  width: ${e};
+  background: ${({theme:r})=>r.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:r})=>r.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;
+`,t=({ariaLabel:r,...i})=>o.jsx(n,{"aria-label":r,as:"nav",...i});t.propTypes={ariaLabel:s.string.isRequired};exports.SubNav=t;exports.subNavWidth=e;

package/dist/v2/SubNav/SubNav.js

@@ -1,9 +1,9 @@
-import t from "react";
-import e from "prop-types";
-import i from "styled-components";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import i from "prop-types";
+import e from "styled-components";
 import { Grid as a } from "../../Grid/Grid.js";
-import "../../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = i(a)`
+const p = `${232 / 16}rem`, s = e(a)`
   width: ${p};
   background: ${({ theme: r }) => r.colors.neutral100};
   position: sticky;
@@ -12,11 +12,11 @@ const p = `${232 / 16}rem`, s = i(a)`
   overflow-y: auto;
   border-right: 1px solid ${({ theme: r }) => r.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
+`, n = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t(s, { "aria-label": r, as: "nav", ...o });
+n.propTypes = {
+  ariaLabel: i.string.isRequired
 };
 export {
-  l as SubNav,
+  n as SubNav,
   p as subNavWidth
 };

package/dist/v2/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"),t=require("react"),T=require("@strapi/icons"),r=require("prop-types"),R=require("styled-components"),I=require("../../helpers/keyboardKeys.cjs"),P=require("../../hooks/useId.cjs"),D=require("../../hooks/usePrevious.cjs"),K=require("../../Divider/Divider.cjs"),a=require("../../Box/Box.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../Searchbar/Searchbar.cjs"),w=require("../../Flex/Flex.cjs"),F=require("../../Typography/Typography.cjs"),O=require("../../IconButton/IconButton.cjs"),p=R(K.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:i})=>i.colors.neutral200};
+`,d=({as:i,label:g,searchLabel:l,searchable:f,onChange:b,value:x,onClear:S,onSubmit:y,id:q})=>{const[s,c]=t.useState(!1),h=D.usePrevious(s),j=P.useId(q),o=t.useRef(),u=t.useRef();t.useEffect(()=>{s&&o.current&&o.current.focus(),h&&!s&&u.current&&u.current.focus()},[s,h]);const v=()=>{c(n=>!n)},B=n=>{S(n),o.current.focus()},m=n=>{n.relatedTarget?.id!==j&&c(!1)},C=n=>{n.key===I.KeyboardKeys.ESCAPE&&c(!1)};return s?e.jsxs(a.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4,children:[e.jsx(L.SearchForm,{children:e.jsx(k.Searchbar,{name:"searchbar",value:x,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:C,ref:o,onBlur:m,onClear:B,onSubmit:y,clearLabel:"Clear",size:"S",children:l})}),e.jsx(a.Box,{paddingLeft:2,paddingTop:4,children:e.jsx(p,{})})]}):e.jsxs(a.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4,children:[e.jsxs(w.Flex,{justifyContent:"space-between",alignItems:"flex-start",children:[e.jsx(F.Typography,{variant:"beta",as:i,children:g}),f&&e.jsx(O.IconButton,{ref:u,onClick:v,label:l,icon:e.jsx(T.Search,{})})]}),e.jsx(a.Box,{paddingTop:4,children:e.jsx(p,{})})]})};d.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};d.propTypes={as:r.string,id:r.string,label:r.string.isRequired,onChange:r.func,onClear:r.func,onSubmit:r.func,searchLabel:r.string,searchable:r.bool,value:r.string};exports.SubNavHeader=d;

package/dist/v2/SubNav/SubNavHeader.js

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

package/dist/v2/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("@strapi/icons"),h=require("prop-types"),x=require("styled-components"),B=require("../../BaseLink/BaseLink.cjs"),a=require("../../Box/Box.cjs"),i=require("../../Flex/Flex.cjs"),c=require("../../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(m),o=n(h),s=n(x),$=s.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),h=require("@strapi/icons"),i=require("prop-types"),n=require("styled-components"),t=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),l=require("../../Flex/Flex.cjs"),f=require("../../BaseLink/BaseLink.cjs"),b=n(t.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,u=s.default(b.Dot)`
+`,a=n(h.Dot)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
-    fill: ${({theme:e,$active:l})=>l?e.colors.primary600:e.colors.neutral600};
+    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
   }
-`,v=s.default.div`
+`,$=n.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,r=t.default.forwardRef(({children:e,icon:l,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement($,{as:p,icon:l,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,l?t.default.createElement(v,null,l):t.default.createElement(u,null),t.default.createElement(a.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(a.Box,{as:i.Flex,paddingRight:4},t.default.createElement(u,{$active:!0}))));r.displayName="SubNavLink";r.defaultProps={as:B.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};r.propTypes={as:o.default.elementType,children:o.default.node.isRequired,icon:o.default.element,isSubSectionChild:o.default.bool,withBullet:o.default.bool};exports.SubNavLink=r;
+`,s=y.forwardRef(({children:e,icon:o,withBullet:u,as:d,isSubSectionChild:p,...g},x)=>r.jsxs(b,{as:d,icon:o,background:"neutral100",paddingLeft:p?9:7,paddingBottom:2,paddingTop:2,ref:x,...g,children:[r.jsxs(l.Flex,{children:[o?r.jsx($,{children:o}):r.jsx(a,{}),r.jsx(t.Box,{paddingLeft:2,children:r.jsx(c.Typography,{as:"span",children:e})})]}),u&&r.jsx(t.Box,{as:l.Flex,paddingRight:4,children:r.jsx(a,{$active:!0})})]}));s.displayName="SubNavLink";s.defaultProps={as:f.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};s.propTypes={as:i.elementType,children:i.node.isRequired,icon:i.element,isSubSectionChild:i.bool,withBullet:i.bool};exports.SubNavLink=s;

package/dist/v2/SubNav/SubNavLink.js

@@ -1,30 +1,31 @@
-import r from "react";
-import { Dot as g } from "@strapi/icons";
-import t from "prop-types";
-import i from "styled-components";
-import { BaseLink as y } from "../../BaseLink/BaseLink.js";
-import { Box as l } from "../../Box/Box.js";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import h from "react";
+import { Dot as y } from "@strapi/icons";
+import i from "prop-types";
+import l from "styled-components";
+import { Box as t } from "../../Box/Box.js";
+import { Typography as c } from "../../Typography/Typography.js";
 import { Flex as a } from "../../Flex/Flex.js";
-import { Typography as p } from "../../Typography/Typography.js";
-const $ = i(l)`
+import { BaseLink as $ } from "../../BaseLink/BaseLink.js";
+const b = l(t)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({ theme: r }) => r.colors.neutral800};
   svg > * {
-    fill: ${({ theme: e }) => e.colors.neutral600};
+    fill: ${({ theme: r }) => r.colors.neutral600};
   }
 
   &.active {
-    ${({ theme: e }) => `
-      background-color: ${e.colors.primary100};
-      border-right: 2px solid ${e.colors.primary600};
+    ${({ theme: r }) => `
+      background-color: ${r.colors.primary100};
+      border-right: 2px solid ${r.colors.primary600};
       svg > * {
-        fill: ${e.colors.primary700};
+        fill: ${r.colors.primary700};
       }
-      ${p} {
-        color: ${e.colors.primary700};
+      ${c} {
+        color: ${r.colors.primary700};
         font-weight: 500;
       }
       `}
@@ -33,45 +34,50 @@ const $ = i(l)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, s = i(g)`
+`, p = l(y)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: e, $active: o }) => o ? e.colors.primary600 : e.colors.neutral600};
+    fill: ${({ theme: r, $active: e }) => e ? r.colors.primary600 : r.colors.neutral600};
   }
-`, b = i.div`
+`, v = l.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, n = r.forwardRef(({ children: e, icon: o, withBullet: c, as: m, isSubSectionChild: d, ...u }, f) => /* @__PURE__ */ r.createElement(
-  $,
+`, n = h.forwardRef(({ children: r, icon: e, withBullet: d, as: m, isSubSectionChild: f, ...u }, g) => /* @__PURE__ */ s(
+  b,
   {
     as: m,
-    icon: o,
+    icon: e,
     background: "neutral100",
-    paddingLeft: d ? 9 : 7,
+    paddingLeft: f ? 9 : 7,
     paddingBottom: 2,
     paddingTop: 2,
-    ref: f,
-    ...u
-  },
-  /* @__PURE__ */ r.createElement(a, null, o ? /* @__PURE__ */ r.createElement(b, null, o) : /* @__PURE__ */ r.createElement(s, null), /* @__PURE__ */ r.createElement(l, { paddingLeft: 2 }, /* @__PURE__ */ r.createElement(p, { as: "span" }, e))),
-  c && /* @__PURE__ */ r.createElement(l, { as: a, paddingRight: 4 }, /* @__PURE__ */ r.createElement(s, { $active: !0 }))
+    ref: g,
+    ...u,
+    children: [
+      /* @__PURE__ */ s(a, { children: [
+        e ? /* @__PURE__ */ o(v, { children: e }) : /* @__PURE__ */ o(p, {}),
+        /* @__PURE__ */ o(t, { paddingLeft: 2, children: /* @__PURE__ */ o(c, { as: "span", children: r }) })
+      ] }),
+      d && /* @__PURE__ */ o(t, { as: a, paddingRight: 4, children: /* @__PURE__ */ o(p, { $active: !0 }) })
+    ]
+  }
 ));
 n.displayName = "SubNavLink";
 n.defaultProps = {
-  as: y,
+  as: $,
   icon: null,
   isSubSectionChild: !1,
   withBullet: !1
 };
 n.propTypes = {
-  as: t.elementType,
-  children: t.node.isRequired,
-  icon: t.element,
-  isSubSectionChild: t.bool,
-  withBullet: t.bool
+  as: i.elementType,
+  children: i.node.isRequired,
+  icon: i.element,
+  isSubSectionChild: i.bool,
+  withBullet: i.bool
 };
 export {
   n as SubNavLink

package/dist/v2/SubNav/SubNavLinkSection.cjs

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

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -1,42 +1,49 @@
-import e, { useState as f, Children as g } from "react";
-import { CarretDown as h } from "@strapi/icons";
-import o from "prop-types";
-import a from "styled-components";
-import { Box as i } from "../../Box/Box.js";
-import { Flex as E } from "../../Flex/Flex.js";
-import { useId as y } from "../../hooks/useId.js";
-import { Typography as b } from "../../Typography/Typography.js";
-const k = a(i)`
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useState as u, Children as f } from "react";
+import { CarretDown as g } from "@strapi/icons";
+import n from "prop-types";
+import d from "styled-components";
+import { useId as x } from "../../hooks/useId.js";
+import { Box as o } from "../../Box/Box.js";
+import { Flex as b } from "../../Flex/Flex.js";
+import { Typography as k } from "../../Typography/Typography.js";
+const y = d(o)`
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: t }) => t.colors.neutral700};
+      fill: ${({ theme: r }) => r.colors.neutral700};
     }
   }
-`, x = a.button`
+`, C = d.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`, S = a.div`
+`, S = d.div`
   display: flex;
   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(s), c = () => {
-    m((n) => !n);
-  };
-  return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement(E, { justifyContent: "space-between" }, /* @__PURE__ */ e.createElement(x, { onClick: c, "aria-expanded": r, "aria-controls": d }, /* @__PURE__ */ e.createElement(S, { rotated: r }, /* @__PURE__ */ e.createElement(h, { "aria-hidden": !0 })), /* @__PURE__ */ e.createElement(i, { paddingLeft: 2 }, /* @__PURE__ */ e.createElement(b, { as: "span", fontWeight: "semiBold", textColor: "neutral800" }, t))))), r && /* @__PURE__ */ e.createElement("ul", { id: d }, g.map(p, (n, u) => /* @__PURE__ */ e.createElement("li", { key: u }, n))));
+  transform: rotateX(${({ rotated: r }) => r ? "0deg" : "180deg"});
+`, l = ({ label: r, children: s, id: c }) => {
+  const [i, m] = u(!0), a = x(c);
+  return /* @__PURE__ */ p(o, { children: [
+    /* @__PURE__ */ e(y, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ e(b, { justifyContent: "space-between", children: /* @__PURE__ */ p(C, { onClick: () => {
+      m((t) => !t);
+    }, "aria-expanded": i, "aria-controls": a, children: [
+      /* @__PURE__ */ e(S, { rotated: i, children: /* @__PURE__ */ e(g, { "aria-hidden": !0 }) }),
+      /* @__PURE__ */ e(o, { paddingLeft: 2, children: /* @__PURE__ */ e(k, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: r }) })
+    ] }) }) }),
+    i && /* @__PURE__ */ e("ul", { id: a, children: f.map(s, (t, h) => /* @__PURE__ */ e("li", { children: t }, h)) })
+  ] });
 };
 l.defaultProps = {
   id: void 0
 };
 l.propTypes = {
-  children: o.node.isRequired,
-  id: o.string,
-  label: o.string.isRequired
+  children: n.node.isRequired,
+  id: n.string,
+  label: n.string.isRequired
 };
 export {
   l as SubNavLinkSection

package/dist/v2/SubNav/SubNavSection.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),S=require("prop-types"),h=require("styled-components"),v=require("./SubNavSectionLabel.cjs"),x=require("../../Badge/Badge.cjs"),u=require("../../Box/Box.cjs"),y=require("../../Flex/Flex.cjs"),q=require("../../hooks/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(S),B=r(h),_=B.default(u.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("prop-types"),b=require("styled-components"),S=require("./SubNavSectionLabel.cjs"),q=require("../../hooks/useId.cjs"),d=require("../../Box/Box.cjs"),j=require("../../Flex/Flex.cjs"),v=require("../../Badge/Badge.cjs"),m=b(d.Box)`
   svg {
     height: ${4/16}rem;
     path {
-      fill: ${({theme:e})=>e.colors.neutral500};
+      fill: ${({theme:i})=>i.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=q.useId(f),b=()=>{g(o=>!o)};return t.default.createElement(y.Flex,{direction:"column",alignItems:"stretch",gap:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(v.SubNavSectionLabel,{onClick:b,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(x.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,m)=>t.default.createElement("li",{key:m},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,o=({collapsable:i,label:c,badgeLabel:r,children:u,id:p})=>{const[s,g]=a.useState(!0),l=q.useId(p),h=()=>{g(n=>!n)};return e.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(m,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4,children:e.jsxs(d.Box,{position:"relative",paddingRight:r?6:0,children:[e.jsx(S.SubNavSectionLabel,{onClick:h,ariaExpanded:s,ariaControls:l,collapsable:i,label:c}),r&&e.jsx(v.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:r})]})}),(!i||s)&&e.jsx("ol",{id:l,children:a.Children.map(u,(n,x)=>e.jsx("li",{children:n},x))})]})};o.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};o.propTypes={badgeLabel:t.string,children:t.node.isRequired,collapsable:t.bool,id:t.string,label:t.string.isRequired};exports.SubNavSection=o;