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

package/dist/SubNav/SubNavHeader.js

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

package/dist/SubNav/SubNavLink.cjs

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

package/dist/SubNav/SubNavLink.js

@@ -1,30 +1,29 @@
-import r from "react";
-import { Dot as u } from "@strapi/icons";
-import t from "prop-types";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { Dot as m } from "@strapi/icons";
 import { NavLink as f } from "react-router-dom";
-import i from "styled-components";
-import { Box as l } from "../Box/Box.js";
-import { Flex as a } from "../Flex/Flex.js";
+import e from "styled-components";
+import { Box as t } from "../Box/Box.js";
 import { Typography as s } from "../Typography/Typography.js";
-const g = i(l)`
+import { Flex as n } from "../Flex/Flex.js";
+const g = e(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};
       }
       ${s} {
-        color: ${e.colors.primary700};
+        color: ${r.colors.primary700};
         font-weight: 500;
       }
       `}
@@ -33,43 +32,18 @@ const g = i(l)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, p = i(u)`
+`, a = e(m)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: e, $active: o }) => o ? e.colors.primary600 : e.colors.neutral600};
+    fill: ${({ theme: r, $active: i }) => i ? r.colors.primary600 : r.colors.neutral600};
   }
-`, $ = i.div`
+`, u = e.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, n = ({ children: e, icon: o, withBullet: c, isSubSectionChild: m, ...d }) => /* @__PURE__ */ r.createElement(
-  g,
-  {
-    as: f,
-    icon: o,
-    background: "neutral100",
-    paddingLeft: m ? 9 : 7,
-    paddingBottom: 2,
-    paddingTop: 2,
-    ...d
-  },
-  /* @__PURE__ */ r.createElement(a, null, o ? /* @__PURE__ */ r.createElement($, null, o) : /* @__PURE__ */ r.createElement(p, null), /* @__PURE__ */ r.createElement(l, { paddingLeft: 2 }, /* @__PURE__ */ r.createElement(s, { as: "span" }, e))),
-  c && /* @__PURE__ */ r.createElement(l, { as: a, paddingRight: 4 }, /* @__PURE__ */ r.createElement(p, { $active: !0 }))
-);
-n.displayName = "SubNavLink";
-n.defaultProps = {
-  icon: null,
-  isSubSectionChild: !1,
-  withBullet: !1
-};
-n.propTypes = {
-  children: t.node.isRequired,
-  icon: t.element,
-  isSubSectionChild: t.bool,
-  withBullet: t.bool
-};
+`, L = ({ children: r, icon: i, withBullet: c = !1, isSubSectionChild: p = !1, ...d }) => l(g, { as: f, icon: i, background: "neutral100", paddingLeft: p ? 9 : 7, paddingBottom: 2, paddingTop: 2, ...d, children: [l(n, { children: [i ? o(u, { children: i }) : o(a, {}), o(t, { paddingLeft: 2, children: o(s, { as: "span", children: r }) })] }), c && o(t, { as: n, paddingRight: 4, children: o(a, { $active: !0 }) })] });
 export {
-  n as SubNavLink
+  L as SubNavLink
 };

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

package/dist/SubNav/SubNavLinkSection.js

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

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

package/dist/SubNav/SubNavSection.js

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

package/dist/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"),c=require("@strapi/icons"),u=require("styled-components"),x=require("../Flex/Flex.cjs"),o=require("../Box/Box.cjs"),a=require("../Typography/Typography.cjs"),g=e=>e&&e.__esModule?e:{default:e},s=g(u),i=s.default(x.Flex)`
   border: none;
   padding: 0;
   background: transparent;
-`,m=i.default.div`
+`,p=s.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;
+`,h=({collapsable:e=!1,label:t,onClick:d=()=>{},ariaExpanded:n,ariaControls:l})=>e?r.jsxs(i,{as:"button",onClick:d,"aria-expanded":n,"aria-controls":l,textAlign:"left",children:[r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),e&&r.jsx(p,{rotated:n,children:r.jsx(c.CarretDown,{"aria-hidden":!0})})]}):r.jsx(i,{children:r.jsx(o.Box,{paddingRight:1,children:r.jsx(a.Typography,{variant:"sigma",textColor:"neutral600",children:t})})});exports.SubNavSectionLabel=h;

package/dist/SubNav/SubNavSectionLabel.js

@@ -1,44 +1,19 @@
-import e from "react";
-import { CarretDown as s } from "@strapi/icons";
-import r 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 { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { CarretDown as m } from "@strapi/icons";
+import d from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+import { Box as o } from "../Box/Box.js";
+import { Typography as i } from "../Typography/Typography.js";
+const a = d(s)`
   border: none;
   padding: 0;
   background: transparent;
-`, f = p.div`
+`, g = d.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,
-  {
-    as: "button",
-    onClick: d,
-    "aria-expanded": o,
-    "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 = {
-  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
-};
+`, y = ({ collapsable: t = !1, label: e, onClick: l = () => {
+}, ariaExpanded: n, ariaControls: p }) => t ? c(a, { as: "button", onClick: l, "aria-expanded": n, "aria-controls": p, textAlign: "left", children: [r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }), t && r(g, { rotated: n, children: r(m, { "aria-hidden": !0 }) })] }) : r(a, { children: r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
 export {
-  m as SubNavSectionLabel
+  y as SubNavSectionLabel
 };

package/dist/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 t=require("react/jsx-runtime"),s=require("react"),l=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},d=a(s),x=({children:e,spacing:r=2,horizontal:n=!1,...o})=>t.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:t.jsx(u.Flex,{as:"ol",gap:r,direction:n?"row":"column",alignItems:n?"center":"stretch",...o,children:d.default.Children.map(e,(c,i)=>t.jsx("li",{children:c},i))})});exports.SubNavSections=x;

package/dist/SubNav/SubNavSections.js

@@ -1,21 +1,8 @@
-import e, { Children as i } from "react";
-import a from "prop-types";
-import { Box as c } from "../Box/Box.js";
+import { jsx as r } from "react/jsx-runtime";
+import c from "react";
+import { Box as d } from "../Box/Box.js";
 import { Flex as l } from "../Flex/Flex.js";
-const d = ({ children: t, spacing: o = 2, horizontal: r = !1, ...m }) => /* @__PURE__ */ e.createElement(c, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(
-  l,
-  {
-    as: "ol",
-    gap: o,
-    direction: r ? "row" : "column",
-    alignItems: r ? "center" : "stretch",
-    ...m
-  },
-  i.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
-));
-d.propTypes = {
-  children: a.node.isRequired
-};
+const u = ({ children: o, spacing: t = 2, horizontal: e = !1, ...i }) => r(d, { paddingTop: 2, paddingBottom: 4, children: r(l, { as: "ol", gap: t, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...i, children: c.Children.map(o, (n, m) => r("li", { children: n }, m)) }) });
 export {
-  d as SubNavSections
+  u as SubNavSections
 };

package/dist/SubNav/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./SubNav.cjs"),u=require("./SubNavHeader.cjs"),S=require("./SubNavLink.cjs"),a=require("./SubNavLinkSection.cjs"),i=require("./SubNavSection.cjs"),b=require("./SubNavSections.cjs");exports.SubNav=e.SubNav;exports.subNavWidth=e.subNavWidth;exports.SubNavHeader=u.SubNavHeader;exports.SubNavLink=S.SubNavLink;exports.SubNavLinkSection=a.SubNavLinkSection;exports.SubNavSection=i.SubNavSection;exports.SubNavSections=b.SubNavSections;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SubNav.cjs"),u=require("./SubNavHeader.cjs"),S=require("./SubNavLink.cjs"),i=require("./SubNavLinkSection.cjs"),a=require("./SubNavSection.cjs"),n=require("./SubNavSections.cjs");exports.SubNav=e.SubNav;exports.subNavWidth=e.subNavWidth;exports.SubNavHeader=u.SubNavHeader;exports.SubNavLink=S.SubNavLink;exports.SubNavLinkSection=i.SubNavLinkSection;exports.SubNavSection=a.SubNavSection;exports.SubNavSections=n.SubNavSections;

package/dist/Switch/Switch.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),m=require("prop-types"),g=require("styled-components"),h=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(b),r=l(m),c=l(g),n=c.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("react"),f=require("styled-components"),p=require("../Flex/Flex.cjs"),b=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},g=i(h),c=i(f),n=c.default.div`
   background: ${({theme:e})=>e.colors.danger500};
   border: none;
   border-radius: 16px;
@@ -27,7 +27,7 @@
       transition: none;
     }
   }
-`,$=c.default.button`
+`,x=c.default.button`
   background: transparent;
   padding: 0;
   border: none;
@@ -39,4 +39,4 @@
   &[aria-checked='true'] ${n}:before {
     transform: translateX(1rem);
   }
-`,a=t.default.forwardRef(({label:e,onChange:i,onLabel:s,offLabel:u,selected:o,visibleLabels:d,...f},p)=>t.default.createElement($,{ref:p,role:"switch","aria-checked":o,"aria-label":e,onClick:i,visibleLabels:d,type:"button",...f},t.default.createElement(y.Flex,null,t.default.createElement(n,null,t.default.createElement("span",null,s),t.default.createElement("span",null,u)),d&&t.default.createElement(h.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:o?"success600":"danger600"},o?s:u))));a.defaultProps={onLabel:"On",offLabel:"Off",visibleLabels:!1};a.propTypes={label:r.default.string.isRequired,offLabel:r.default.string,onChange:r.default.func.isRequired,onLabel:r.default.string,selected:r.default.bool.isRequired,visibleLabels:r.default.bool};a.displayName="Switch";exports.Switch=a;
+`,m=g.default.forwardRef(({label:e,onChange:d,onLabel:o="On",offLabel:s="Off",selected:t,visibleLabels:a=!1,...u},l)=>r.jsx(x,{ref:l,role:"switch","aria-checked":t,"aria-label":e,onClick:d,visibleLabels:a,type:"button",...u,children:r.jsxs(p.Flex,{children:[r.jsxs(n,{children:[r.jsx("span",{children:o}),r.jsx("span",{children:s})]}),a&&r.jsx(b.Box,{as:"span","aria-hidden":!0,paddingLeft:2,color:t?"success600":"danger600",children:t?o:s})]})}));exports.Switch=m;