@strapi/design-system 0.0.0-599b75fb-test

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/dist/v2/SimpleMenu/index.cjs

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

package/dist/v2/SimpleMenu/index.js

@@ -0,0 +1,5 @@
+import { MenuItem as n, SimpleMenu as o } from "./SimpleMenu.js";
+export {
+  n as MenuItem,
+  o as SimpleMenu
+};

package/dist/v2/SimpleMenu/utils.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=({theme:o})=>`
+    text-align: left;
+    width: 100%;
+    color: ${o.colors.neutral800};
+    border-radius: ${o.borderRadius};
+    &:focus {
+        background-color: ${o.colors.primary100};
+    }
+    &:not([aria-disabled]):hover {
+        background-color: ${o.colors.primary100};
+    }
+`;exports.getOptionStyle=r;

package/dist/v2/SimpleMenu/utils.js

@@ -0,0 +1,15 @@
+const r = ({ theme: o }) => `
+    text-align: left;
+    width: 100%;
+    color: ${o.colors.neutral800};
+    border-radius: ${o.borderRadius};
+    &:focus {
+        background-color: ${o.colors.primary100};
+    }
+    &:not([aria-disabled]):hover {
+        background-color: ${o.colors.primary100};
+    }
+`;
+export {
+  r as getOptionStyle
+};

package/dist/v2/SubNav/SubNav.cjs

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

package/dist/v2/SubNav/SubNav.js

@@ -0,0 +1,22 @@
+import t from "react";
+import e from "prop-types";
+import i from "styled-components";
+import { Grid as a } from "../../Grid/Grid.js";
+import "../../Grid/GridItem.js";
+const p = `${232 / 16}rem`, s = i(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;
+`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, { "aria-label": r, as: "nav", ...o });
+l.propTypes = {
+  ariaLabel: e.string.isRequired
+};
+export {
+  l as SubNav,
+  p as subNavWidth
+};

package/dist/v2/SubNav/SubNavHeader.cjs

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

package/dist/v2/SubNav/SubNavHeader.js

@@ -0,0 +1,76 @@
+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 { 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)`
+  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);
+  };
+  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
+};
+export {
+  f as SubNavHeader
+};

package/dist/v2/SubNav/SubNavLink.cjs

@@ -0,0 +1,39 @@
+"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)`
+  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=s.default(b.Dot)`
+  width: ${12/16}rem;
+  height: ${4/16}rem;
+  * {
+    fill: ${({theme:e,$active:l})=>l?e.colors.primary600:e.colors.neutral600};
+  }
+`,v=s.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;

package/dist/v2/SubNav/SubNavLink.js

@@ -0,0 +1,78 @@
+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 { Flex as a } from "../../Flex/Flex.js";
+import { Typography as p } from "../../Typography/Typography.js";
+const $ = i(l)`
+  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};
+      }
+      ${p} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`, s = i(g)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme: e, $active: o }) => o ? e.colors.primary600 : e.colors.neutral600};
+  }
+`, b = i.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(
+  $,
+  {
+    as: m,
+    icon: o,
+    background: "neutral100",
+    paddingLeft: d ? 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 }))
+));
+n.displayName = "SubNavLink";
+n.defaultProps = {
+  as: y,
+  icon: null,
+  isSubSectionChild: !1,
+  withBullet: !1
+};
+n.propTypes = {
+  as: t.elementType,
+  children: t.node.isRequired,
+  icon: t.element,
+  isSubSectionChild: t.bool,
+  withBullet: t.bool
+};
+export {
+  n as SubNavLink
+};

package/dist/v2/SubNav/SubNavLinkSection.cjs

@@ -0,0 +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)`
+  svg {
+    height: ${4/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral700};
+    }
+  }
+`,E=i.default.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`,v=i.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;

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -0,0 +1,43 @@
+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)`
+  svg {
+    height: ${4 / 16}rem;
+    path {
+      fill: ${({ theme: t }) => t.colors.neutral700};
+    }
+  }
+`, x = a.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`, S = a.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))));
+};
+l.defaultProps = {
+  id: void 0
+};
+l.propTypes = {
+  children: o.node.isRequired,
+  id: o.string,
+  label: o.string.isRequired
+};
+export {
+  l as SubNavLinkSection
+};

package/dist/v2/SubNav/SubNavSection.cjs

@@ -0,0 +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)`
+  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;

package/dist/v2/SubNav/SubNavSection.js

@@ -0,0 +1,56 @@
+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 S } from "../../Badge/Badge.js";
+import { Box as l } from "../../Box/Box.js";
+import { Flex as v } from "../../Flex/Flex.js";
+import { useId as C } from "../../hooks/useId.js";
+const k = b(l)`
+  svg {
+    height: ${4 / 16}rem;
+    path {
+      fill: ${({ theme: r }) => r.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))));
+};
+p.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
+};
+export {
+  p as SubNavSection
+};

package/dist/v2/SubNav/SubNavSectionLabel.cjs

@@ -0,0 +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)`
+  border: none;
+  padding: 0;
+  background: transparent;
+`,m=i.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;

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -0,0 +1,44 @@
+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)`
+  border: none;
+  padding: 0;
+  background: transparent;
+`, f = 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,
+  {
+    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
+};
+export {
+  m as SubNavSectionLabel
+};

package/dist/v2/SubNav/SubNavSections.cjs

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