@strapi/design-system 1.2.7 → 1.3.0-beta.0

package/dist/v2/Pagination/components.js

@@ -0,0 +1,111 @@
+import o from "react";
+import s from "styled-components";
+import d from "prop-types";
+import b from "@strapi/icons/ChevronLeft";
+import y from "@strapi/icons/ChevronRight";
+import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
+import { usePagination as c } from "./PaginationContext.js";
+import { Typography as P } from "../../Typography/Typography.js";
+import { buttonFocusStyle as E } from "../../themes/utils.js";
+import { BaseLink as k } from "../../BaseLink/BaseLink.js";
+const m = s(P)`
+  line-height: revert;
+`, w = {
+  active: !0
+}, p = s(k).withConfig({
+  shouldForwardProp: (e, r) => !w[e] && r(e)
+})`
+  padding: ${({ theme: e }) => e.spaces[3]};
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  box-shadow: ${({ active: e, theme: r }) => e ? r.shadows.filterShadow : void 0};
+  text-decoration: none;
+  display: flex;
+
+  ${E}
+`, L = s(p)`
+  color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
+  background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
+
+  &:hover {
+    box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  }
+`, u = s(p)`
+  font-size: 0.7rem;
+  svg path {
+    fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
+  }
+
+  &:focus,
+  &:hover {
+    svg path {
+      fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral700};
+    }
+  }
+
+  ${(e) => e["aria-disabled"] ? `
+  pointer-events: none;
+    ` : void 0}
+`, $ = s(p)`
+  color: ${({ theme: e }) => e.colors.neutral800};
+`, h = o.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: i } = c(), t = i === 1;
+  return /* @__PURE__ */ o.createElement(u, {
+    ref: a,
+    "aria-disabled": t,
+    tabIndex: t ? -1 : void 0,
+    ...r
+  }, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(b, {
+    "aria-hidden": !0
+  }));
+});
+h.displayName = "PreviousLink";
+const f = o.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: i, pageCount: t } = c(), n = i === t;
+  return /* @__PURE__ */ o.createElement(u, {
+    ref: a,
+    "aria-disabled": n,
+    tabIndex: n ? -1 : void 0,
+    ...r
+  }, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(y, {
+    "aria-hidden": !0
+  }));
+});
+f.displayName = "NextLink";
+const v = o.forwardRef(({ number: e, children: r, ...a }, i) => {
+  const { activePage: t } = c(), n = t === e;
+  return /* @__PURE__ */ o.createElement(L, {
+    ref: i,
+    ...a,
+    active: n
+  }, /* @__PURE__ */ o.createElement(l, null, r), /* @__PURE__ */ o.createElement(m, {
+    "aria-hidden": !0,
+    variant: "pi",
+    fontWeight: n ? "bold" : null
+  }, e));
+});
+v.displayName = "PageLink";
+const x = ({ children: e, ...r }) => /* @__PURE__ */ o.createElement($, {
+  ...r,
+  as: "div"
+}, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(m, {
+  "aria-hidden": !0,
+  variant: "pi"
+}, "\u2026"));
+v.propTypes = {
+  children: d.node.isRequired,
+  number: d.number.isRequired
+};
+const g = {
+  children: d.node.isRequired
+};
+f.propTypes = g;
+h.propTypes = g;
+x.propTypes = {
+  children: d.node.isRequired
+};
+export {
+  x as Dots,
+  f as NextLink,
+  v as PageLink,
+  h as PreviousLink
+};

package/dist/v2/Pagination/index.cjs

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

package/dist/v2/Pagination/index.js

@@ -0,0 +1,9 @@
+import { Pagination as e } from "./Pagination.js";
+import { Dots as r, NextLink as t, PageLink as a, PreviousLink as k } from "./components.js";
+export {
+  r as Dots,
+  t as NextLink,
+  a as PageLink,
+  e as Pagination,
+  k as PreviousLink
+};

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),F=require("prop-types"),A=require("styled-components"),N=require("@strapi/icons/CarretDown"),S=require("../../Typography/Typography.cjs"),x=require("../../Box/Box.cjs"),$=require("../../Flex/Flex.cjs"),q=require("../../Button/Button.cjs"),V=require("../../BaseLink/BaseLink.cjs"),C=require("../../Popover/Popover.cjs"),M=require("./utils.cjs"),W=require("../../helpers/useId.cjs"),u=require("../../helpers/keyboardKeys.cjs"),K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=K(r),n=K(F),k=K(A),z=K(N),U=k.default.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  ${M.getOptionStyle}
+`,G=k.default(V.BaseLink)`
+  text-decoration: none;
+  ${M.getOptionStyle}
+`,H=k.default.span`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 4px;
+    width: 6px;
+  }
+`,J=k.default(q.Button)`
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
+`,D=({as:e,children:p,onClick:y,isFocused:l,isLink:m,...E})=>{const c=r.useRef();r.useEffect(()=>{l&&c.current&&c.current.focus()},[l]);const g={tabIndex:l?0:-1,ref:c,role:"menuitem",...E},B=a=>{(a.key===u.KeyboardKeys.SPACE||a.key===u.KeyboardKeys.ENTER)&&y()};return m?o.default.createElement(G,{as:e,...g},o.default.createElement(x.Box,{padding:2},o.default.createElement(S.Typography,null,p))):o.default.createElement(U,{onKeyDown:B,onMouseDown:y,type:"button",...g},o.default.createElement(x.Box,{padding:2},o.default.createElement(S.Typography,null,p)))};D.defaultProps={onClick:()=>{},isFocused:!1,isLink:!1};D.propTypes={as:n.default.elementType,children:n.default.node.isRequired,isFocused:n.default.bool,isLink:n.default.bool,onClick:n.default.func};const f=({label:e,children:p,id:y,as:l,onOpen:m=()=>{},onClose:E=()=>{},size:c,popoverPlacement:g,...B})=>{const a=r.useRef(),I=W.useId("simplemenu",y),P=r.useRef(!1),[d,i]=r.useState(!1),[b,T]=r.useState(0),h=r.Children.toArray(p),v=c==="S"?J:q.Button,w=l||v;r.useEffect(()=>{if(["string","number"].includes(typeof e)){const t=h.findIndex(s=>s.props.children===e);t!==-1&&T(t)}},[e]),r.useEffect(()=>{P?.current?d&&typeof m=="function"?m():typeof E=="function"&&E():P.current=!0},[P,d]),r.useEffect(()=>{o.default.isValidElement(e)&&b==-1&&a.current.focus()},[e,b]);const O=t=>{d&&(t.key===u.KeyboardKeys.ESCAPE&&(t.stopPropagation(),i(!1),a.current.focus()),t.key===u.KeyboardKeys.DOWN&&T(s=>s===h.length-1?0:s+1),t.key===u.KeyboardKeys.UP&&T(s=>s===0?h.length-1:s-1))},R=t=>{(t.key===u.KeyboardKeys.ENTER||t.key===u.KeyboardKeys.SPACE)&&i(s=>!s)},j=t=>{t.preventDefault(),t.currentTarget.contains(t.relatedTarget)||i(!1)},_=t=>{t.preventDefault(),i(s=>!s)},L=h.map((t,s)=>o.default.createElement($.Flex,{as:"li",key:s,justifyContent:"center",role:"menuitem"},r.cloneElement(t,{onClick:()=>{t.props.onClick(),i(!1),a.current.focus()},isFocused:b===s})));return o.default.createElement("div",{onKeyDown:O},o.default.createElement(w,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":d,"aria-controls":I,onKeyDown:R,onMouseDown:_,ref:a,type:"button",variant:"ghost",endIcon:o.default.createElement(H,null,o.default.createElement(z.default,{"aria-hidden":!0})),...B},e),d&&o.default.createElement(C.Popover,{onBlur:j,placement:g,source:a,spacing:4},o.default.createElement(x.Box,{role:"menu",as:"ul",padding:1,id:I},L)))};f.defaultProps={as:void 0};f.displayName="SimpleMenu";f.defaultProps={popoverPlacement:"bottom-start",size:"M"};f.propTypes={as:n.default.any,children:n.default.oneOfType([n.default.arrayOf(n.default.node),n.default.node]).isRequired,id:n.default.string,label:n.default.oneOfType([n.default.string,n.default.number,n.default.element]).isRequired,onClose:n.default.func,onOpen:n.default.func,popoverPlacement:n.default.oneOf(C.POPOVER_PLACEMENTS),size:n.default.oneOf(["S","M"])};exports.MenuItem=D;exports.SimpleMenu=f;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -0,0 +1,164 @@
+import t, { useRef as T, useEffect as g, useState as x, Children as $, cloneElement as F } from "react";
+import n from "prop-types";
+import h from "styled-components";
+import V from "@strapi/icons/CarretDown";
+import { Typography as M } from "../../Typography/Typography.js";
+import { Box as S } from "../../Box/Box.js";
+import { Flex as q } from "../../Flex/Flex.js";
+import { Button as O } from "../../Button/Button.js";
+import { BaseLink as W } from "../../BaseLink/BaseLink.js";
+import { POPOVER_PLACEMENTS as _, Popover as z } from "../../Popover/Popover.js";
+import { getOptionStyle as R } from "./utils.js";
+import { useId as j } from "../../helpers/useId.js";
+import { KeyboardKeys as i } from "../../helpers/keyboardKeys.js";
+const U = h.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  ${R}
+`, G = h(W)`
+  text-decoration: none;
+  ${R}
+`, H = h.span`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 4px;
+    width: 6px;
+  }
+`, J = h(O)`
+  padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
+`, b = ({ as: r, children: u, onClick: m, isFocused: a, isLink: f, ...d }) => {
+  const c = T();
+  g(() => {
+    a && c.current && c.current.focus();
+  }, [a]);
+  const y = {
+    tabIndex: a ? 0 : -1,
+    ref: c,
+    role: "menuitem",
+    ...d
+  }, P = (s) => {
+    (s.key === i.SPACE || s.key === i.ENTER) && m();
+  };
+  return f ? /* @__PURE__ */ t.createElement(G, {
+    as: r,
+    ...y
+  }, /* @__PURE__ */ t.createElement(S, {
+    padding: 2
+  }, /* @__PURE__ */ t.createElement(M, null, u))) : /* @__PURE__ */ t.createElement(U, {
+    onKeyDown: P,
+    onMouseDown: m,
+    type: "button",
+    ...y
+  }, /* @__PURE__ */ t.createElement(S, {
+    padding: 2
+  }, /* @__PURE__ */ t.createElement(M, null, u)));
+};
+b.defaultProps = {
+  onClick: () => {
+  },
+  isFocused: !1,
+  isLink: !1
+};
+b.propTypes = {
+  as: n.elementType,
+  children: n.node.isRequired,
+  isFocused: n.bool,
+  isLink: n.bool,
+  onClick: n.func
+};
+const k = ({
+  label: r,
+  children: u,
+  id: m,
+  as: a,
+  onOpen: f = () => {
+  },
+  onClose: d = () => {
+  },
+  size: c,
+  popoverPlacement: y,
+  ...P
+}) => {
+  const s = T(), w = j("simplemenu", m), D = T(!1), [l, p] = x(!1), [C, I] = x(0), E = $.toArray(u), B = a || (c === "S" ? J : O);
+  g(() => {
+    if (["string", "number"].includes(typeof r)) {
+      const e = E.findIndex((o) => o.props.children === r);
+      e !== -1 && I(e);
+    }
+  }, [r]), g(() => {
+    D?.current ? l && typeof f == "function" ? f() : typeof d == "function" && d() : D.current = !0;
+  }, [D, l]), g(() => {
+    t.isValidElement(r) && C == -1 && s.current.focus();
+  }, [r, C]);
+  const v = (e) => {
+    l && (e.key === i.ESCAPE && (e.stopPropagation(), p(!1), s.current.focus()), e.key === i.DOWN && I((o) => o === E.length - 1 ? 0 : o + 1), e.key === i.UP && I((o) => o === 0 ? E.length - 1 : o - 1));
+  }, K = (e) => {
+    (e.key === i.ENTER || e.key === i.SPACE) && p((o) => !o);
+  }, A = (e) => {
+    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || p(!1);
+  }, L = (e) => {
+    e.preventDefault(), p((o) => !o);
+  }, N = E.map((e, o) => /* @__PURE__ */ t.createElement(q, {
+    as: "li",
+    key: o,
+    justifyContent: "center",
+    role: "menuitem"
+  }, F(e, {
+    onClick: () => {
+      e.props.onClick(), p(!1), s.current.focus();
+    },
+    isFocused: C === o
+  })));
+  return /* @__PURE__ */ t.createElement("div", {
+    onKeyDown: v
+  }, /* @__PURE__ */ t.createElement(B, {
+    label: t.isValidElement(r) ? null : r,
+    "aria-haspopup": !0,
+    "aria-expanded": l,
+    "aria-controls": w,
+    onKeyDown: K,
+    onMouseDown: L,
+    ref: s,
+    type: "button",
+    variant: "ghost",
+    endIcon: /* @__PURE__ */ t.createElement(H, null, /* @__PURE__ */ t.createElement(V, {
+      "aria-hidden": !0
+    })),
+    ...P
+  }, r), l && /* @__PURE__ */ t.createElement(z, {
+    onBlur: A,
+    placement: y,
+    source: s,
+    spacing: 4
+  }, /* @__PURE__ */ t.createElement(S, {
+    role: "menu",
+    as: "ul",
+    padding: 1,
+    id: w
+  }, N)));
+};
+k.defaultProps = {
+  as: void 0
+};
+k.displayName = "SimpleMenu";
+k.defaultProps = {
+  popoverPlacement: "bottom-start",
+  size: "M"
+};
+k.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(_),
+  size: n.oneOf(["S", "M"])
+};
+export {
+  b as MenuItem,
+  k 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("styled-components"),u=require("prop-types"),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=c.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:n.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;

package/dist/v2/SubNav/SubNav.js

@@ -0,0 +1,26 @@
+import t from "react";
+import e from "styled-components";
+import i from "prop-types";
+import { Grid as a } from "../../Grid/Grid.js";
+import "../../Grid/GridItem.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;
+`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, {
+  "aria-label": r,
+  as: "nav",
+  ...o
+});
+l.propTypes = {
+  ariaLabel: i.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("prop-types"),_=require("styled-components"),I=require("@strapi/icons/Search"),R=require("../../Flex/Flex.cjs"),D=require("../../Typography/Typography.cjs"),P=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),F=require("../../Divider/Divider.cjs"),K=require("../../Searchbar/Searchbar.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../helpers/useId.cjs"),w=require("../../helpers/usePrevious.cjs"),O=require("../../helpers/keyboardKeys.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),r=l(C),H=l(_),M=l(I),p=H.default(F.Divider)`
+  width: ${24/16}rem;
+  background-color: ${({theme:t})=>t.colors.neutral200};
+`,i=({as:t,label:h,searchLabel:f,searchable:g,onChange:b,value:y,onClear:m,onSubmit:S,id:v})=>{const[n,u]=o.useState(!1),B=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",v),c=o.useRef(),d=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),B&&!n&&d.current&&d.current.focus()},[n]);const E=()=>{u(a=>!a)},j=a=>{m(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&u(!1)},x=a=>{a.key===O.KeyboardKeys.ESCAPE&&u(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:y,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:S,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(p,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(R.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},h),g&&e.default.createElement(P.IconButton,{ref:d,onClick:E,label:f,icon:e.default.createElement(M.default,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(p,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,98 @@
+import e, { useState as L, useRef as m, useEffect as w } from "react";
+import r from "prop-types";
+import x from "styled-components";
+import D from "@strapi/icons/Search";
+import { Flex as I } from "../../Flex/Flex.js";
+import { Typography as K } from "../../Typography/Typography.js";
+import { IconButton as P } from "../../IconButton/IconButton.js";
+import { Box as n } from "../../Box/Box.js";
+import { Divider as k } from "../../Divider/Divider.js";
+import { Searchbar as O } from "../../Searchbar/Searchbar.js";
+import { SearchForm as F } from "../../Searchbar/SearchForm.js";
+import { useId as _ } from "../../helpers/useId.js";
+import { usePrevious as $ } from "../../helpers/usePrevious.js";
+import { KeyboardKeys as j } from "../../helpers/keyboardKeys.js";
+const p = x(k)`
+  width: ${24 / 16}rem;
+  background-color: ${({ theme: l }) => l.colors.neutral200};
+`, d = ({ as: l, label: u, searchLabel: s, searchable: f, onChange: g, value: h, onClear: b, onSubmit: E, id: S }) => {
+  const [a, c] = L(!1), y = $(a), C = _("subnav-searchbar-clear", S), o = m(), i = m();
+  w(() => {
+    a && o.current && o.current.focus(), y && !a && i.current && i.current.focus();
+  }, [a]);
+  const v = () => {
+    c((t) => !t);
+  }, B = (t) => {
+    b(t), o.current.focus();
+  }, T = (t) => {
+    t.relatedTarget?.id !== C && c(!1);
+  }, R = (t) => {
+    t.key === j.ESCAPE && c(!1);
+  };
+  return a ? /* @__PURE__ */ e.createElement(n, {
+    paddingLeft: 4,
+    paddingTop: 5,
+    paddingBottom: 2,
+    paddingRight: 4
+  }, /* @__PURE__ */ e.createElement(F, null, /* @__PURE__ */ e.createElement(O, {
+    name: "searchbar",
+    value: h,
+    onChange: g,
+    placeholder: "e.g: strapi-plugin-abcd",
+    onKeyDown: R,
+    ref: o,
+    onBlur: T,
+    onClear: B,
+    onSubmit: E,
+    clearLabel: "Clear",
+    size: "S"
+  }, s)), /* @__PURE__ */ e.createElement(n, {
+    paddingLeft: 2,
+    paddingTop: 4
+  }, /* @__PURE__ */ e.createElement(p, null))) : /* @__PURE__ */ e.createElement(n, {
+    paddingLeft: 6,
+    paddingTop: 6,
+    paddingBottom: 2,
+    paddingRight: 4
+  }, /* @__PURE__ */ e.createElement(I, {
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, /* @__PURE__ */ e.createElement(K, {
+    variant: "beta",
+    as: l
+  }, u), f && /* @__PURE__ */ e.createElement(P, {
+    ref: i,
+    onClick: v,
+    label: s,
+    icon: /* @__PURE__ */ e.createElement(D, null)
+  })), /* @__PURE__ */ e.createElement(n, {
+    paddingTop: 4
+  }, /* @__PURE__ */ e.createElement(p, null)));
+};
+d.defaultProps = {
+  as: "h2",
+  searchable: !1,
+  onChange: () => {
+  },
+  onClear: () => {
+  },
+  onSubmit: () => {
+  },
+  value: "",
+  searchLabel: "",
+  id: void 0
+};
+d.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 {
+  d 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("prop-types"),h=require("styled-components"),x=require("@strapi/icons/Dot"),n=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),i=require("../../Flex/Flex.cjs"),B=require("../../BaseLink/BaseLink.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(m),l=a(b),s=a(h),$=a(x),v=s.default(n.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($.default)`
+  width: ${12/16}rem;
+  height: ${4/16}rem;
+  * {
+    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
+  }
+`,k=s.default.div`
+  svg {
+    height: ${12/16}rem;
+    width: ${12/16}rem;
+  }
+`,r=t.default.forwardRef(({children:e,icon:o,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement(v,{as:p,icon:o,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,o?t.default.createElement(k,null,o):t.default.createElement(u,null),t.default.createElement(n.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(n.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:l.default.elementType,children:l.default.node,icon:l.default.element,isSubSectionChild:l.default.bool,link:l.default.element,withBullet:l.default.bool};exports.SubNavLink=r;

package/dist/v2/SubNav/SubNavLink.js

@@ -0,0 +1,83 @@
+import r from "react";
+import o from "prop-types";
+import i from "styled-components";
+import g from "@strapi/icons/Dot";
+import { Box as l } from "../../Box/Box.js";
+import { Typography as s } from "../../Typography/Typography.js";
+import { Flex as a } from "../../Flex/Flex.js";
+import { BaseLink as y } from "../../BaseLink/BaseLink.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};
+      }
+      ${s} {
+        color: ${e.colors.primary700};
+        font-weight: 500;
+      }
+      `}
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`, p = i(g)`
+  width: ${12 / 16}rem;
+  height: ${4 / 16}rem;
+  * {
+    fill: ${({ theme: e, $active: t }) => t ? e.colors.primary600 : e.colors.neutral600};
+  }
+`, b = i.div`
+  svg {
+    height: ${12 / 16}rem;
+    width: ${12 / 16}rem;
+  }
+`, n = r.forwardRef(({ children: e, icon: t, withBullet: c, as: m, isSubSectionChild: d, ...u }, f) => /* @__PURE__ */ r.createElement($, {
+  as: m,
+  icon: t,
+  background: "neutral100",
+  paddingLeft: d ? 9 : 7,
+  paddingBottom: 2,
+  paddingTop: 2,
+  ref: f,
+  ...u
+}, /* @__PURE__ */ r.createElement(a, null, t ? /* @__PURE__ */ r.createElement(b, null, t) : /* @__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 = {
+  as: y,
+  icon: null,
+  isSubSectionChild: !1,
+  withBullet: !1
+};
+n.propTypes = {
+  as: o.elementType,
+  children: o.node,
+  icon: o.element,
+  isSubSectionChild: o.bool,
+  link: o.element,
+  withBullet: o.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 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),v=n(x),E=s.default(d.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;
+`,q=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(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":a,"aria-controls":u},t.default.createElement(q,{rotated:a},t.default.createElement(v.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,id:o.default.string,label:o.default.string.isRequired};exports.SubNavLinkSection=i;