@strapi/design-system 0.0.0-jsoninput.0

package/dist/v2/SimpleMenu/SimpleMenu.cjs

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

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/dist/v2/SubNav/SubNav.js

@@ -0,0 +1,48 @@
+var m = Object.defineProperty;
+var i = Object.getOwnPropertySymbols;
+var p = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+var a = (r, o, t) => o in r ? m(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t, l = (r, o) => {
+  for (var t in o || (o = {}))
+    p.call(o, t) && a(r, t, o[t]);
+  if (i)
+    for (var t of i(o))
+      s.call(o, t) && a(r, t, o[t]);
+  return r;
+};
+var n = (r, o) => {
+  var t = {};
+  for (var e in r)
+    p.call(r, e) && o.indexOf(e) < 0 && (t[e] = r[e]);
+  if (r != null && i)
+    for (var e of i(r))
+      o.indexOf(e) < 0 && s.call(r, e) && (t[e] = r[e]);
+  return t;
+};
+import d from "react";
+import u from "styled-components";
+import c from "prop-types";
+import { Grid as b } from "../../Grid/Grid.js";
+import "../../Grid/GridItem.js";
+const f = `${232 / 16}rem`, h = u(b)`
+  width: ${f};
+  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;
+`, v = (t) => {
+  var e = t, { ariaLabel: r } = e, o = n(e, ["ariaLabel"]);
+  return /* @__PURE__ */ d.createElement(h, l({
+    "aria-label": r,
+    as: "nav"
+  }, o));
+};
+v.propTypes = {
+  ariaLabel: c.string.isRequired
+};
+export {
+  v as SubNav,
+  f 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"),_=require("prop-types"),I=require("styled-components"),R=require("@strapi/icons/Search"),D=require("../../Flex/Flex.cjs"),P=require("../../Typography/Typography.cjs"),F=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),K=require("../../Divider/Divider.cjs"),L=require("../../Searchbar/Searchbar.cjs"),k=require("../../Searchbar/SearchForm.cjs"),w=require("../../helpers/useId.cjs"),O=require("../../helpers/usePrevious.cjs"),H=require("../../helpers/keyboardKeys.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),r=l(_),M=l(I),N=l(R),g=M.default(K.Divider)`
+  width: ${24/16}rem;
+  background-color: ${({theme:t})=>t.colors.neutral200};
+`,i=({as:t,label:b,searchLabel:f,searchable:y,onChange:m,value:S,onClear:v,onSubmit:B,id:q})=>{const[n,u]=o.useState(!1),p=O.usePrevious(n),E=w.useId("subnav-searchbar-clear",q),c=o.useRef(),d=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&d.current&&d.current.focus()},[n,p]);const j=()=>{u(a=>!a)},T=a=>{v(a),c.current.focus()},x=a=>{var h;((h=a.relatedTarget)==null?void 0:h.id)!==E&&u(!1)},C=a=>{a.key===H.KeyboardKeys.ESCAPE&&u(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(k.SearchForm,null,e.default.createElement(L.Searchbar,{name:"searchbar",value:S,onChange:m,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:C,ref:c,onBlur:x,onClear:T,onSubmit:B,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(g,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(P.Typography,{variant:"beta",as:t},b),y&&e.default.createElement(F.IconButton,{ref:d,onClick:j,label:f,icon:e.default.createElement(N.default,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(g,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,99 @@
+import e, { useState as w, useRef as d, useEffect as x } from "react";
+import r from "prop-types";
+import D from "styled-components";
+import I from "@strapi/icons/Search";
+import { Flex as K } from "../../Flex/Flex.js";
+import { Typography as P } from "../../Typography/Typography.js";
+import { IconButton as k } from "../../IconButton/IconButton.js";
+import { Box as n } from "../../Box/Box.js";
+import { Divider as O } from "../../Divider/Divider.js";
+import { Searchbar as F } from "../../Searchbar/Searchbar.js";
+import { SearchForm as _ } from "../../Searchbar/SearchForm.js";
+import { useId as $ } from "../../helpers/useId.js";
+import { usePrevious as j } from "../../helpers/usePrevious.js";
+import { KeyboardKeys as q } from "../../helpers/keyboardKeys.js";
+const u = D(O)`
+  width: ${24 / 16}rem;
+  background-color: ${({ theme: l }) => l.colors.neutral200};
+`, f = ({ as: l, label: g, searchLabel: s, searchable: h, onChange: b, value: E, onClear: S, onSubmit: y, id: C }) => {
+  const [a, c] = w(!1), m = j(a), v = $("subnav-searchbar-clear", C), o = d(), i = d();
+  x(() => {
+    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
+  }, [a, m]);
+  const B = () => {
+    c((t) => !t);
+  }, T = (t) => {
+    S(t), o.current.focus();
+  }, R = (t) => {
+    var p;
+    ((p = t.relatedTarget) == null ? void 0 : p.id) !== v && c(!1);
+  }, L = (t) => {
+    t.key === q.ESCAPE && c(!1);
+  };
+  return a ? /* @__PURE__ */ e.createElement(n, {
+    paddingLeft: 4,
+    paddingTop: 5,
+    paddingBottom: 2,
+    paddingRight: 4
+  }, /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(F, {
+    name: "searchbar",
+    value: E,
+    onChange: b,
+    placeholder: "e.g: strapi-plugin-abcd",
+    onKeyDown: L,
+    ref: o,
+    onBlur: R,
+    onClear: T,
+    onSubmit: y,
+    clearLabel: "Clear",
+    size: "S"
+  }, s)), /* @__PURE__ */ e.createElement(n, {
+    paddingLeft: 2,
+    paddingTop: 4
+  }, /* @__PURE__ */ e.createElement(u, 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(P, {
+    variant: "beta",
+    as: l
+  }, g), h && /* @__PURE__ */ e.createElement(k, {
+    ref: i,
+    onClick: B,
+    label: s,
+    icon: /* @__PURE__ */ e.createElement(I, null)
+  })), /* @__PURE__ */ e.createElement(n, {
+    paddingTop: 4
+  }, /* @__PURE__ */ e.createElement(u, 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";var L=Object.defineProperty;var n=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var p=(e,t,l)=>t in e?L(e,t,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[t]=l,g=(e,t)=>{for(var l in t||(t={}))f.call(t,l)&&p(e,l,t[l]);if(n)for(var l of n(t))y.call(t,l)&&p(e,l,t[l]);return e};var m=(e,t)=>{var l={};for(var o in e)f.call(e,o)&&t.indexOf(o)<0&&(l[o]=e[o]);if(e!=null&&n)for(var o of n(e))t.indexOf(o)<0&&y.call(e,o)&&(l[o]=e[o]);return l};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react"),_=require("prop-types"),k=require("styled-components"),S=require("@strapi/icons/Dot"),u=require("../../Box/Box.cjs"),x=require("../../Typography/Typography.cjs"),b=require("../../Flex/Flex.cjs"),q=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=s(T),a=s(_),c=s(k),E=s(S),j=c.default(u.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};
+      }
+      ${x.Typography} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`,h=c.default(E.default)`
+  width: ${12/16}rem;
+  height: ${4/16}rem;
+  * {
+    fill: ${({theme:e,$active:t})=>t?e.colors.primary600:e.colors.neutral600};
+  }
+`,w=c.default.div`
+  svg {
+    height: ${12/16}rem;
+    width: ${12/16}rem;
+  }
+`,i=r.default.forwardRef((F,v)=>{var d=F,{children:e,icon:t,withBullet:l,as:o,isSubSectionChild:B}=d,$=m(d,["children","icon","withBullet","as","isSubSectionChild"]);return r.default.createElement(j,g({as:o,icon:t,background:"neutral100",paddingLeft:B?9:7,paddingBottom:2,paddingTop:2,ref:v},$),r.default.createElement(b.Flex,null,t?r.default.createElement(w,null,t):r.default.createElement(h,null),r.default.createElement(u.Box,{paddingLeft:2},r.default.createElement(x.Typography,{as:"span"},e))),l&&r.default.createElement(u.Box,{as:b.Flex,paddingRight:4},r.default.createElement(h,{$active:!0})))});i.displayName="SubNavLink";i.defaultProps={as:q.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};i.propTypes={as:a.default.elementType,children:a.default.node.isRequired,icon:a.default.element,isSubSectionChild:a.default.bool,withBullet:a.default.bool};exports.SubNavLink=i;

package/dist/v2/SubNav/SubNavLink.js

@@ -0,0 +1,104 @@
+var w = Object.defineProperty;
+var n = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
+var m = (e, r, o) => r in e ? w(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, f = (e, r) => {
+  for (var o in r || (r = {}))
+    d.call(r, o) && m(e, o, r[o]);
+  if (n)
+    for (var o of n(r))
+      u.call(r, o) && m(e, o, r[o]);
+  return e;
+};
+var g = (e, r) => {
+  var o = {};
+  for (var t in e)
+    d.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && n)
+    for (var t of n(e))
+      r.indexOf(t) < 0 && u.call(e, t) && (o[t] = e[t]);
+  return o;
+};
+import l from "react";
+import i from "prop-types";
+import s from "styled-components";
+import x from "@strapi/icons/Dot";
+import { Box as a } from "../../Box/Box.js";
+import { Typography as b } from "../../Typography/Typography.js";
+import { Flex as y } from "../../Flex/Flex.js";
+import { BaseLink as S } from "../../BaseLink/BaseLink.js";
+const k = s(a)`
+  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};
+      }
+      ${b} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`, $ = s(x)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme: e, $active: r }) => r ? e.colors.primary600 : e.colors.neutral600};
+  }
+`, B = s.div`
+  svg {
+    height: ${12 / 16}rem;
+    width: ${12 / 16}rem;
+  }
+`, p = l.forwardRef((L, E) => {
+  var c = L, { children: e, icon: r, withBullet: o, as: t, isSubSectionChild: h } = c, v = g(c, ["children", "icon", "withBullet", "as", "isSubSectionChild"]);
+  return /* @__PURE__ */ l.createElement(k, f({
+    as: t,
+    icon: r,
+    background: "neutral100",
+    paddingLeft: h ? 9 : 7,
+    paddingBottom: 2,
+    paddingTop: 2,
+    ref: E
+  }, v), /* @__PURE__ */ l.createElement(y, null, r ? /* @__PURE__ */ l.createElement(B, null, r) : /* @__PURE__ */ l.createElement($, null), /* @__PURE__ */ l.createElement(a, {
+    paddingLeft: 2
+  }, /* @__PURE__ */ l.createElement(b, {
+    as: "span"
+  }, e))), o && /* @__PURE__ */ l.createElement(a, {
+    as: y,
+    paddingRight: 4
+  }, /* @__PURE__ */ l.createElement($, {
+    $active: !0
+  })));
+});
+p.displayName = "SubNavLink";
+p.defaultProps = {
+  as: S,
+  icon: null,
+  isSubSectionChild: !1,
+  withBullet: !1
+};
+p.propTypes = {
+  as: i.elementType,
+  children: i.node.isRequired,
+  icon: i.element,
+  isSubSectionChild: i.bool,
+  withBullet: i.bool
+};
+export {
+  p 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 l=require("react"),m=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/CarretDown"),d=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../Typography/Typography.cjs"),_=require("../../helpers/useId.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(l),o=n(m),s=n(h),q=n(x),v=s.default(d.Box)`
+  svg {
+    height: ${4/16}rem;
+    path {
+      fill: ${({theme:e})=>e.colors.neutral700};
+    }
+  }
+`,E=s.default.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+`,k=s.default.div`
+  display: flex;
+  align-items: center;
+  width: ${12/16}rem;
+  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
+`,i=({label:e,children:c,id:p})=>{const[a,f]=l.useState(!0),u=_.useId("subnav-list",p),g=()=>{f(r=>!r)};return t.default.createElement(d.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":a,"aria-controls":u},t.default.createElement(k,{rotated:a},t.default.createElement(q.default,{"aria-hidden":!0})),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(S.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),a&&t.default.createElement("ul",{id:u},l.Children.map(c,(r,y)=>t.default.createElement("li",{key:y},r))))};i.defaultProps={id:void 0};i.propTypes={children:o.default.node.isRequired,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;