@strapi/design-system 0.0.0-3cf3ff39

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -0,0 +1,27 @@
+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 R, Content as C, Item as M } from "./Menu.js";
+import * as $ from "./Menu.js";
+import { stripReactIdOfColon as j } from "../../helpers/strings.js";
+import { useId as y } from "../../hooks/useId.js";
+import { useIntersection as O } from "../../hooks/useIntersection.js";
+const P = ({ children: c, onOpen: t, onClose: n, popoverPlacement: f, onReachEnd: o, ...r }) => {
+  const m = h(null), [l, p] = g(!1), a = (e) => {
+    o && o(e);
+  }, d = (e) => {
+    e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
+  }, u = y(), i = `intersection-${j(u)}`;
+  return O(m, a, {
+    selectorToWatch: `#${i}`,
+    /**
+     * 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: !l
+  }), I(x, { onOpenChange: d, children: [s(R, { ...r, children: r.label }), s(C, { intersectionId: i, popoverPlacement: f, children: c })] });
+}, q = M;
+export {
+  $ as Menu,
+  q as MenuItem,
+  P as SimpleMenu
+};

package/dist/v2/SimpleMenu/index.cjs

@@ -0,0 +1 @@
+"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/SimpleMenu/index.js

@@ -0,0 +1,7 @@
+import { MenuItem as r, SimpleMenu as p } from "./SimpleMenu.js";
+import * as e from "./Menu.js";
+export {
+  e as Menu,
+  r as MenuItem,
+  p as SimpleMenu
+};

package/dist/v2/SubNav/SubNav.cjs

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

package/dist/v2/SubNav/SubNav.js

@@ -0,0 +1,22 @@
+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";
+const p = `${232 / 16}rem`, s = e(a)`
+  width: ${p};
+  background: ${({ theme: r }) => r.colors.neutral100};
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  z-index: 1;
+`, n = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t(s, { "aria-label": r, as: "nav", ...o });
+n.propTypes = {
+  ariaLabel: i.string.isRequired
+};
+export {
+  n as SubNav,
+  p as subNavWidth
+};

package/dist/v2/SubNav/SubNavHeader.cjs

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

package/dist/v2/SubNav/SubNavHeader.js

@@ -0,0 +1,86 @@
+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 K from "styled-components";
+import { KeyboardKeys as P } from "../../helpers/keyboardKeys.js";
+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: 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 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, {}) })
+  ] });
+};
+u.defaultProps = {
+  as: "h2",
+  searchable: !1,
+  onChange() {
+  },
+  onClear() {
+  },
+  onSubmit() {
+  },
+  value: "",
+  searchLabel: "",
+  id: void 0
+};
+u.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
+};
+export {
+  u as SubNavHeader
+};

package/dist/v2/SubNav/SubNavLink.cjs

@@ -0,0 +1,39 @@
+"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;
+  text-decoration: none;
+  color: ${({theme:e})=>e.colors.neutral800};
+  svg > * {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+
+  &.active {
+    ${({theme:e})=>`
+      background-color: ${e.colors.primary100};
+      border-right: 2px solid ${e.colors.primary600};
+      svg > * {
+        fill: ${e.colors.primary700};
+      }
+      ${c.Typography} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`,u=n.default(h.Dot)`
+  width: ${12/16}rem;
+  height: ${4/16}rem;
+  * {
+    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
+  }
+`,q=n.default.div`
+  svg {
+    height: ${12/16}rem;
+    width: ${12/16}rem;
+  }
+`,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

@@ -0,0 +1,84 @@
+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 { BaseLink as $ } from "../../BaseLink/BaseLink.js";
+const b = l(t)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  color: ${({ theme: r }) => r.colors.neutral800};
+  svg > * {
+    fill: ${({ theme: r }) => r.colors.neutral600};
+  }
+
+  &.active {
+    ${({ theme: r }) => `
+      background-color: ${r.colors.primary100};
+      border-right: 2px solid ${r.colors.primary600};
+      svg > * {
+        fill: ${r.colors.primary700};
+      }
+      ${c} {
+        color: ${r.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`, p = l(y)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme: r, $active: e }) => e ? r.colors.primary600 : r.colors.neutral600};
+  }
+`, v = l.div`
+  svg {
+    height: ${12 / 16}rem;
+    width: ${12 / 16}rem;
+  }
+`, n = h.forwardRef(({ children: r, icon: e, withBullet: d, as: m, isSubSectionChild: f, ...u }, g) => /* @__PURE__ */ s(
+  b,
+  {
+    as: m,
+    icon: e,
+    background: "neutral100",
+    paddingLeft: f ? 9 : 7,
+    paddingBottom: 2,
+    paddingTop: 2,
+    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: $,
+  icon: null,
+  isSubSectionChild: !1,
+  withBullet: !1
+};
+n.propTypes = {
+  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

@@ -0,0 +1,19 @@
+"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};
+    }
+  }
+`,k=s.default.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`,v=s.default.div`
+  display: flex;
+  align-items: center;
+  width: ${12/16}rem;
+  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
+`,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

@@ -0,0 +1,50 @@
+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: r }) => r.colors.neutral700};
+    }
+  }
+`, C = d.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`, S = d.div`
+  display: flex;
+  align-items: center;
+  width: ${12 / 16}rem;
+  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: n.node.isRequired,
+  id: n.string,
+  label: n.string.isRequired
+};
+export {
+  l as SubNavLinkSection
+};

package/dist/v2/SubNav/SubNavSection.cjs

@@ -0,0 +1,8 @@
+"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};
+    }
+  }
+`,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

@@ -0,0 +1,63 @@
+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 x } from "./SubNavSectionLabel.js";
+import { useId as C } from "../../hooks/useId.js";
+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: i }) => i.colors.neutral500};
+    }
+  }
+`, 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)) })
+  ] });
+};
+s.defaultProps = {
+  badgeLabel: null,
+  collapsable: !1,
+  id: void 0
+};
+s.propTypes = {
+  badgeLabel: o.string,
+  children: o.node.isRequired,
+  collapsable: o.bool,
+  id: o.string,
+  label: o.string.isRequired
+};
+export {
+  s as SubNavSection
+};

package/dist/v2/SubNav/SubNavSectionLabel.cjs

@@ -0,0 +1,9 @@
+"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;
+`,y=u.default.div`
+  display: flex;
+  align-items: center;
+  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
+`,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

@@ -0,0 +1,47 @@
+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 { 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;
+`, u = p.div`
+  display: flex;
+  align-items: center;
+  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
+`, d = ({ collapsable: t, label: e, onClick: s, ariaExpanded: n, ariaControls: c }) => t ? /* @__PURE__ */ m(
+  l,
+  {
+    as: "button",
+    onClick: s,
+    "aria-expanded": n,
+    "aria-controls": c,
+    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() {
+  }
+};
+d.propTypes = {
+  ariaControls: o.string,
+  ariaExpanded: o.bool,
+  collapsable: o.bool,
+  label: o.string.isRequired,
+  onClick: o.func
+};
+export {
+  d as SubNavSectionLabel
+};

package/dist/v2/SubNav/SubNavSections.cjs

@@ -0,0 +1 @@
+"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;

package/dist/v2/SubNav/SubNavSections.js

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

package/dist/v2/SubNav/index.cjs

@@ -0,0 +1 @@
+"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/v2/SubNav/index.js

@@ -0,0 +1,15 @@
+import { SubNav as e, subNavWidth as t } from "./SubNav.js";
+import { SubNavHeader as a } from "./SubNavHeader.js";
+import { SubNavLink as u } from "./SubNavLink.js";
+import { SubNavLinkSection as N } from "./SubNavLinkSection.js";
+import { SubNavSection as i } from "./SubNavSection.js";
+import { SubNavSections as p } from "./SubNavSections.js";
+export {
+  e as SubNav,
+  a as SubNavHeader,
+  u as SubNavLink,
+  N as SubNavLinkSection,
+  i as SubNavSection,
+  p as SubNavSections,
+  t as subNavWidth
+};

package/dist/v2/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Breadcrumbs/Breadcrumbs.cjs"),u=require("./Breadcrumbs/Crumb.cjs"),a=require("./Breadcrumbs/CrumbLink.cjs"),t=require("./Breadcrumbs/CrumbSimpleMenu.cjs"),o=require("./Link/Link.cjs"),s=require("./LinkButton/LinkButton.cjs"),v=require("./MainNav/MainNav.cjs"),N=require("./MainNav/NavBrand.cjs"),c=require("./MainNav/NavCondense.cjs"),S=require("./MainNav/NavFooter.cjs"),b=require("./MainNav/NavLink.cjs"),k=require("./MainNav/NavSection.cjs"),q=require("./MainNav/NavSections.cjs"),L=require("./MainNav/NavUser.cjs"),m=require("./Pagination/Pagination.cjs"),e=require("./Pagination/components.cjs"),n=require("./SimpleMenu/SimpleMenu.cjs"),d=require("./SimpleMenu/Menu.cjs"),i=require("./SubNav/SubNav.cjs"),M=require("./SubNav/SubNavHeader.cjs"),C=require("./SubNav/SubNavLink.cjs"),l=require("./SubNav/SubNavLinkSection.cjs"),B=require("./SubNav/SubNavSection.cjs"),p=require("./SubNav/SubNavSections.cjs");exports.Breadcrumbs=r.Breadcrumbs;exports.Crumb=u.Crumb;exports.CrumbLink=a.CrumbLink;exports.CrumbSimpleMenu=t.CrumbSimpleMenu;exports.Link=o.Link;exports.LinkButton=s.LinkButton;exports.MainNav=v.MainNav;exports.NavBrand=N.NavBrand;exports.NavCondense=c.NavCondense;exports.NavFooter=S.NavFooter;exports.NavLink=b.NavLink;exports.NavSection=k.NavSection;exports.NavSections=q.NavSections;exports.NavUser=L.NavUser;exports.Pagination=m.Pagination;exports.Dots=e.Dots;exports.NextLink=e.NextLink;exports.PageLink=e.PageLink;exports.PreviousLink=e.PreviousLink;exports.MenuItem=n.MenuItem;exports.SimpleMenu=n.SimpleMenu;exports.Menu=d;exports.SubNav=i.SubNav;exports.subNavWidth=i.subNavWidth;exports.SubNavHeader=M.SubNavHeader;exports.SubNavLink=C.SubNavLink;exports.SubNavLinkSection=l.SubNavLinkSection;exports.SubNavSection=B.SubNavSection;exports.SubNavSections=p.SubNavSections;

package/dist/v2/index.js

@@ -0,0 +1,55 @@
+import { Breadcrumbs as t } from "./Breadcrumbs/Breadcrumbs.js";
+import { Crumb as p } from "./Breadcrumbs/Crumb.js";
+import { CrumbLink as x } from "./Breadcrumbs/CrumbLink.js";
+import { CrumbSimpleMenu as a } from "./Breadcrumbs/CrumbSimpleMenu.js";
+import { Link as u } from "./Link/Link.js";
+import { LinkButton as N } from "./LinkButton/LinkButton.js";
+import { MainNav as b } from "./MainNav/MainNav.js";
+import { NavBrand as s } from "./MainNav/NavBrand.js";
+import { NavCondense as c } from "./MainNav/NavCondense.js";
+import { NavFooter as M } from "./MainNav/NavFooter.js";
+import { NavLink as B } from "./MainNav/NavLink.js";
+import { NavSection as g } from "./MainNav/NavSection.js";
+import { NavSections as h } from "./MainNav/NavSections.js";
+import { NavUser as F } from "./MainNav/NavUser.js";
+import { Pagination as I } from "./Pagination/Pagination.js";
+import { Dots as W, NextLink as j, PageLink as q, PreviousLink as w } from "./Pagination/components.js";
+import { MenuItem as z, SimpleMenu as A } from "./SimpleMenu/SimpleMenu.js";
+import * as o from "./SimpleMenu/Menu.js";
+import { SubNav as G, subNavWidth as J } from "./SubNav/SubNav.js";
+import { SubNavHeader as O } from "./SubNav/SubNavHeader.js";
+import { SubNavLink as R } from "./SubNav/SubNavLink.js";
+import { SubNavLinkSection as V } from "./SubNav/SubNavLinkSection.js";
+import { SubNavSection as Y } from "./SubNav/SubNavSection.js";
+import { SubNavSections as _ } from "./SubNav/SubNavSections.js";
+export {
+  t as Breadcrumbs,
+  p as Crumb,
+  x as CrumbLink,
+  a as CrumbSimpleMenu,
+  W as Dots,
+  u as Link,
+  N as LinkButton,
+  b as MainNav,
+  o as Menu,
+  z as MenuItem,
+  s as NavBrand,
+  c as NavCondense,
+  M as NavFooter,
+  B as NavLink,
+  g as NavSection,
+  h as NavSections,
+  F as NavUser,
+  j as NextLink,
+  q as PageLink,
+  I as Pagination,
+  w as PreviousLink,
+  A as SimpleMenu,
+  G as SubNav,
+  O as SubNavHeader,
+  R as SubNavLink,
+  V as SubNavLinkSection,
+  Y as SubNavSection,
+  _ as SubNavSections,
+  J as subNavWidth
+};