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

package/dist/SimpleMenu/SimpleMenu.js

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

package/dist/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/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/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/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/Stack/Stack.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("react"),m=require("styled-components"),i=require("../Flex/Flex.cjs"),o=require("../helpers/theme.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=f(m),l={size:!0,spacing:!0},g=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & > * + * {
+    margin-top: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
+  }
+`,h=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+  & > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
+  }
+`,u=d.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},a)=>(r&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?s.jsx(h,{ref:a,spacing:t||r,...n}):s.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));u.displayName="Stack";exports.Stack=u;

package/dist/Stack/Stack.js

@@ -0,0 +1,56 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import a from "styled-components";
+import { Flex as s } from "../Flex/Flex.js";
+import { extractStyleFromTheme as m } from "../helpers/theme.js";
+const c = {
+  size: !0,
+  spacing: !0
+}, f = a(s).withConfig({
+  shouldForwardProp: (e, r) => !c[e] && r(e)
+})`
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & > * + * {
+    margin-top: ${({
+  theme: e,
+  spacing: r
+}) => m(e.spaces, r, void 0)};
+  }
+`, g = a(s).withConfig({
+  shouldForwardProp: (e, r) => !c[e] && r(e)
+})`
+  & > * {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  & > * + * {
+    margin-left: ${({
+  theme: e,
+  spacing: r
+}) => m(e.spaces, r, void 0)};
+  }
+`, l = d(({
+  horizontal: e = !1,
+  spacing: r,
+  size: t,
+  ...o
+}, i) => (t && console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'), e ? n(g, {
+  ref: i,
+  spacing: r || t,
+  ...o
+}) : n(f, {
+  direction: "column",
+  alignItems: "stretch",
+  ref: i,
+  spacing: r || t,
+  ...o
+})));
+l.displayName = "Stack";
+export {
+  l as Stack
+};

package/dist/Stack/index.cjs

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

package/dist/Stack/index.js

@@ -0,0 +1,4 @@
+import { Stack as t } from "./Stack.js";
+export {
+  t as Stack
+};

package/dist/Status/Status.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),b=require("prop-types"),m=require("styled-components"),$=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),T=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(h),o=a(b),c=a(m),_=c.default.div`
+  margin-right: ${({theme:e})=>e.spaces[3]};
+  width: ${6/16}rem;
+  height: ${6/16}rem;
+  border-radius: 50%;
+  background: ${({theme:e,backgroundColor:t})=>e.colors[t]};
+`,B=c.default($.Box)`
+  ${T.Typography} {
+    color: ${({theme:e,textColor:t})=>e.colors[t]};
+  }
+`,s=({variant:e,showBullet:t,size:l,children:n,...p})=>{const i=`${e}100`,g=`${e}200`,f=`${e}600`,y=`${e}600`,u=l==="S"?2:5,d=l==="S"?1:4;return r.default.createElement(B,{borderColor:g,textColor:y,background:i,hasRadius:!0,paddingTop:d,paddingBottom:d,paddingLeft:u,paddingRight:u,...p},t?r.default.createElement(x.Flex,null,r.default.createElement(_,{backgroundColor:f}),n):n)};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:o.default.node.isRequired,showBullet:o.default.bool,size:o.default.oneOf(["S","M"]),variant:o.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;

package/dist/Status/Status.js

@@ -0,0 +1,48 @@
+import t from "react";
+import e from "prop-types";
+import l from "styled-components";
+import { Box as f } from "../Box/Box.js";
+import { Flex as $ } from "../Flex/Flex.js";
+import { Typography as h } from "../Typography/Typography.js";
+const b = l.div`
+  margin-right: ${({ theme: o }) => o.spaces[3]};
+  width: ${6 / 16}rem;
+  height: ${6 / 16}rem;
+  border-radius: 50%;
+  background: ${({ theme: o, backgroundColor: r }) => o.colors[r]};
+`, y = l(f)`
+  ${h} {
+    color: ${({ theme: o, textColor: r }) => o.colors[r]};
+  }
+`, p = ({ variant: o, showBullet: r, size: n, children: a, ...i }) => {
+  const c = `${o}100`, m = `${o}200`, u = `${o}600`, g = `${o}600`, s = n === "S" ? 2 : 5, d = n === "S" ? 1 : 4;
+  return /* @__PURE__ */ t.createElement(
+    y,
+    {
+      borderColor: m,
+      textColor: g,
+      background: c,
+      hasRadius: !0,
+      paddingTop: d,
+      paddingBottom: d,
+      paddingLeft: s,
+      paddingRight: s,
+      ...i
+    },
+    r ? /* @__PURE__ */ t.createElement($, null, /* @__PURE__ */ t.createElement(b, { backgroundColor: u }), a) : a
+  );
+};
+p.defaultProps = {
+  showBullet: !0,
+  size: "M",
+  variant: "primary"
+};
+p.propTypes = {
+  children: e.node.isRequired,
+  showBullet: e.bool,
+  size: e.oneOf(["S", "M"]),
+  variant: e.oneOf(["alternative", "danger", "neutral", "primary", "secondary", "success", "warning"])
+};
+export {
+  p as Status
+};

package/dist/Status/index.cjs

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

package/dist/Status/index.js

@@ -0,0 +1,4 @@
+import { Status as r } from "./Status.js";
+export {
+  r as Status
+};

package/dist/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/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/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/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/SubNav/SubNavLink.cjs

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

package/dist/SubNav/SubNavLink.js

@@ -0,0 +1,75 @@
+import r from "react";
+import { Dot as u } from "@strapi/icons";
+import t from "prop-types";
+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 { Typography as s } from "../Typography/Typography.js";
+const g = 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};
+      }
+      ${s} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`, p = i(u)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme: e, $active: o }) => o ? e.colors.primary600 : e.colors.neutral600};
+  }
+`, $ = i.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
+};
+export {
+  n as SubNavLink
+};

package/dist/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),v=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;
+`,q=i.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;