@strapi/design-system 1.7.0 → 1.7.2-alpha.0

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"),x=require("react"),h=require("@strapi/icons"),b=require("prop-types"),$=require("styled-components"),s=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),a=require("../../Flex/Flex.cjs"),m=require("../../BaseLink/BaseLink.cjs"),i=e=>e&&e.__esModule?e:{default:e},v=i(x),t=i(b),n=i($),j=n.default(s.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,u=s.default(b.Dot)`
+`,u=n.default(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`
+`,q=n.default.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;
+`,l=v.default.forwardRef(({children:e,icon:o,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>r.jsxs(j,{as:p,icon:o,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y,children:[r.jsxs(a.Flex,{children:[o?r.jsx(q,{children:o}):r.jsx(u,{}),r.jsx(s.Box,{paddingLeft:2,children:r.jsx(c.Typography,{as:"span",children:e})})]}),d&&r.jsx(s.Box,{as:a.Flex,paddingRight:4,children:r.jsx(u,{$active:!0})})]}));l.displayName="SubNavLink";l.defaultProps={as:m.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};l.propTypes={as:t.default.elementType,children:t.default.node.isRequired,icon:t.default.element,isSubSectionChild:t.default.bool,withBullet:t.default.bool};exports.SubNavLink=l;

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 t=require("react/jsx-runtime"),l=require("react"),f=require("@strapi/icons"),y=require("prop-types"),j=require("styled-components"),b=require("../../hooks/useId.cjs"),o=require("../../Box/Box.cjs"),q=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),c=e=>e&&e.__esModule?e:{default:e},i=c(y),s=c(j),m=s.default(o.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,E=i.default.button`
+`,k=s.default.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`,v=i.default.div`
+`,v=s.default.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;
+`,d=({label:e,children:u,id:p})=>{const[n,g]=l.useState(!0),a=b.useId(p),h=()=>{g(r=>!r)};return t.jsxs(o.Box,{children:[t.jsx(m,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsx(q.Flex,{justifyContent:"space-between",children:t.jsxs(k,{onClick:h,"aria-expanded":n,"aria-controls":a,children:[t.jsx(v,{rotated:n,children:t.jsx(f.CarretDown,{"aria-hidden":!0})}),t.jsx(o.Box,{paddingLeft:2,children:t.jsx(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800",children:e})})]})})}),n&&t.jsx("ul",{id:a,children:l.Children.map(u,(r,x)=>t.jsx("li",{children:r},x))})]})};d.defaultProps={id:void 0};d.propTypes={children:i.default.node.isRequired,id:i.default.string,label:i.default.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 t=require("react/jsx-runtime"),a=require("react"),b=require("prop-types"),S=require("styled-components"),q=require("./SubNavSectionLabel.cjs"),j=require("../../hooks/useId.cjs"),d=require("../../Box/Box.cjs"),v=require("../../Flex/Flex.cjs"),m=require("../../Badge/Badge.cjs"),u=e=>e&&e.__esModule?e:{default:e},r=u(b),y=u(S),_=y.default(d.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.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:e,label:c,badgeLabel:i,children:p,id:g})=>{const[s,f]=a.useState(!0),l=j.useId(g),h=()=>{f(n=>!n)};return t.jsxs(v.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsxs(d.Box,{position:"relative",paddingRight:i?6:0,children:[t.jsx(q.SubNavSectionLabel,{onClick:h,ariaExpanded:s,ariaControls:l,collapsable:e,label:c}),i&&t.jsx(m.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:i})]})}),(!e||s)&&t.jsx("ol",{id:l,children:a.Children.map(p,(n,x)=>t.jsx("li",{children:n},x))})]})};o.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};o.propTypes={badgeLabel:r.default.string,children:r.default.node.isRequired,collapsable:r.default.bool,id:r.default.string,label:r.default.string.isRequired};exports.SubNavSection=o;

package/dist/v2/SubNav/SubNavSection.js

@@ -1,56 +1,63 @@
-import e, { useState as f, Children as h } from "react";
-import t from "prop-types";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { useState as h, Children as f } from "react";
+import o from "prop-types";
 import b from "styled-components";
-import { SubNavSectionLabel as E } from "./SubNavSectionLabel.js";
-import { Badge as S } from "../../Badge/Badge.js";
-import { Box as l } from "../../Box/Box.js";
-import { Flex as v } from "../../Flex/Flex.js";
+import { SubNavSectionLabel as x } from "./SubNavSectionLabel.js";
 import { useId as C } from "../../hooks/useId.js";
-const k = b(l)`
+import { Box as d } from "../../Box/Box.js";
+import { Flex as S } from "../../Flex/Flex.js";
+import { Badge as v } from "../../Badge/Badge.js";
+const k = b(d)`
   svg {
     height: ${4 / 16}rem;
     path {
-      fill: ${({ theme: r }) => r.colors.neutral500};
+      fill: ${({ theme: i }) => i.colors.neutral500};
     }
   }
-`, p = ({ collapsable: r, label: s, badgeLabel: o, children: d, id: m }) => {
-  const [n, c] = f(!0), a = C(m), u = () => {
-    c((i) => !i);
-  };
-  return /* @__PURE__ */ e.createElement(v, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ e.createElement(k, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
-    E,
-    {
-      onClick: u,
-      ariaExpanded: n,
-      ariaControls: a,
-      collapsable: r,
-      label: s
-    }
-  ), o && /* @__PURE__ */ e.createElement(
-    S,
-    {
-      backgroundColor: "neutral150",
-      textColor: "neutral600",
-      position: "absolute",
-      right: 0,
-      top: "50%",
-      transform: "translateY(-50%)"
-    },
-    o
-  ))), (!r || n) && /* @__PURE__ */ e.createElement("ol", { id: a }, h.map(d, (i, g) => /* @__PURE__ */ e.createElement("li", { key: g }, i))));
+`, s = ({ collapsable: i, label: p, badgeLabel: t, children: c, id: m }) => {
+  const [n, u] = h(!0), l = C(m);
+  return /* @__PURE__ */ a(S, { direction: "column", alignItems: "stretch", gap: 1, children: [
+    /* @__PURE__ */ r(k, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: /* @__PURE__ */ a(d, { position: "relative", paddingRight: t ? 6 : 0, children: [
+      /* @__PURE__ */ r(
+        x,
+        {
+          onClick: () => {
+            u((e) => !e);
+          },
+          ariaExpanded: n,
+          ariaControls: l,
+          collapsable: i,
+          label: p
+        }
+      ),
+      t && /* @__PURE__ */ r(
+        v,
+        {
+          backgroundColor: "neutral150",
+          textColor: "neutral600",
+          position: "absolute",
+          right: 0,
+          top: "50%",
+          transform: "translateY(-50%)",
+          children: t
+        }
+      )
+    ] }) }),
+    (!i || n) && /* @__PURE__ */ r("ol", { id: l, children: f.map(c, (e, g) => /* @__PURE__ */ r("li", { children: e }, g)) })
+  ] });
 };
-p.defaultProps = {
+s.defaultProps = {
   badgeLabel: null,
   collapsable: !1,
   id: void 0
 };
-p.propTypes = {
-  badgeLabel: t.string,
-  children: t.node.isRequired,
-  collapsable: t.bool,
-  id: t.string,
-  label: t.string.isRequired
+s.propTypes = {
+  badgeLabel: o.string,
+  children: o.node.isRequired,
+  collapsable: o.bool,
+  id: o.string,
+  label: o.string.isRequired
 };
 export {
-  p as SubNavSection
+  s as SubNavSection
 };

package/dist/v2/SubNav/SubNavSectionLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),g=require("@strapi/icons"),y=require("prop-types"),b=require("styled-components"),u=require("../../Box/Box.cjs"),x=require("../../Flex/Flex.cjs"),s=require("../../Typography/Typography.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(f),a=r(y),i=r(b),d=i.default(x.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const x=require("@strapi/icons"),f=require("prop-types"),g=require("styled-components"),b=require("../../Flex/Flex.cjs"),l=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),d=e=>e&&e.__esModule?e:{default:e},t=d(f),u=d(g),s=u.default(b.Flex)`
   border: none;
   padding: 0;
   background: transparent;
-`,m=i.default.div`
+`,y=u.default.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,o=({collapsable:e,label:l,onClick:c,ariaExpanded:n,ariaControls:p})=>e?t.default.createElement(d,{as:"button",onClick:c,"aria-expanded":n,"aria-controls":p,textAlign:"left"},t.default.createElement(u.Box,{paddingRight:1},t.default.createElement(s.Typography,{variant:"sigma",textColor:"neutral600"},l)),e&&t.default.createElement(m,{rotated:n},t.default.createElement(g.CarretDown,{"aria-hidden":!0}))):t.default.createElement(d,null,t.default.createElement(u.Box,{paddingRight:1},t.default.createElement(s.Typography,{variant:"sigma",textColor:"neutral600"},l)));o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:a.default.string,ariaExpanded:a.default.bool,collapsable:a.default.bool,label:a.default.string.isRequired,onClick:a.default.func};exports.SubNavSectionLabel=o;
+`,a=({collapsable:e,label:n,onClick:c,ariaExpanded:o,ariaControls:p})=>e?r.jsxs(s,{as:"button",onClick:c,"aria-expanded":o,"aria-controls":p,textAlign:"left",children:[r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e&&r.jsx(y,{rotated:o,children:r.jsx(x.CarretDown,{"aria-hidden":!0})})]}):r.jsx(s,{children:r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})})});a.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};a.propTypes={ariaControls:t.default.string,ariaExpanded:t.default.bool,collapsable:t.default.bool,label:t.default.string.isRequired,onClick:t.default.func};exports.SubNavSectionLabel=a;

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -1,44 +1,47 @@
-import e from "react";
-import { CarretDown as s } from "@strapi/icons";
-import r from "prop-types";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import "react";
+import { CarretDown as g } from "@strapi/icons";
+import o from "prop-types";
 import p from "styled-components";
-import { Box as n } from "../../Box/Box.js";
-import { Flex as u } from "../../Flex/Flex.js";
-import { Typography as l } from "../../Typography/Typography.js";
-const i = p(u)`
+import { Flex as f } from "../../Flex/Flex.js";
+import { Box as a } from "../../Box/Box.js";
+import { Typography as i } from "../../Typography/Typography.js";
+const l = p(f)`
   border: none;
   padding: 0;
   background: transparent;
-`, f = p.div`
+`, u = p.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, m = ({ collapsable: t, label: a, onClick: d, ariaExpanded: o, ariaControls: c }) => t ? /* @__PURE__ */ e.createElement(
-  i,
+`, d = ({ collapsable: t, label: e, onClick: s, ariaExpanded: n, ariaControls: c }) => t ? /* @__PURE__ */ m(
+  l,
   {
     as: "button",
-    onClick: d,
-    "aria-expanded": o,
+    onClick: s,
+    "aria-expanded": n,
     "aria-controls": c,
-    textAlign: "left"
-  },
-  /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)),
-  t && /* @__PURE__ */ e.createElement(f, { rotated: o }, /* @__PURE__ */ e.createElement(s, { "aria-hidden": !0 }))
-) : /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(n, { paddingRight: 1 }, /* @__PURE__ */ e.createElement(l, { variant: "sigma", textColor: "neutral600" }, a)));
-m.defaultProps = {
+    textAlign: "left",
+    children: [
+      /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }),
+      t && /* @__PURE__ */ r(u, { rotated: n, children: /* @__PURE__ */ r(g, { "aria-hidden": !0 }) })
+    ]
+  }
+) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
+d.defaultProps = {
   ariaControls: null,
   ariaExpanded: null,
   collapsable: !1,
   onClick() {
   }
 };
-m.propTypes = {
-  ariaControls: r.string,
-  ariaExpanded: r.bool,
-  collapsable: r.bool,
-  label: r.string.isRequired,
-  onClick: r.func
+d.propTypes = {
+  ariaControls: o.string,
+  ariaExpanded: o.bool,
+  collapsable: o.bool,
+  label: o.string.isRequired,
+  onClick: o.func
 };
 export {
-  m as SubNavSectionLabel
+  d as SubNavSectionLabel
 };

package/dist/v2/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),i=require("prop-types"),d=require("../../Box/Box.cjs"),p=require("../../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),f=a(i),c=({children:e,spacing:l=2,horizontal:o=!1,...n})=>t.default.createElement(d.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(p.Flex,{as:"ol",gap:l,direction:o?"row":"column",alignItems:o?"center":"stretch",...n},r.Children.map(e,(s,u)=>t.default.createElement("li",{key:u},s))));c.propTypes={children:f.default.node.isRequired};exports.SubNavSections=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("react"),l=require("prop-types"),d=require("../../Box/Box.cjs"),a=require("../../Flex/Flex.cjs"),p=e=>e&&e.__esModule?e:{default:e},x=p(l),n=({children:e,spacing:o=2,horizontal:t=!1,...s})=>r.jsx(d.Box,{paddingTop:2,paddingBottom:4,children:r.jsx(a.Flex,{as:"ol",gap:o,direction:t?"row":"column",alignItems:t?"center":"stretch",...s,children:u.Children.map(e,(i,c)=>r.jsx("li",{children:i},c))})});n.propTypes={children:x.default.node.isRequired};exports.SubNavSections=n;