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

package/dist/v2/Pagination/components.js

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

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

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

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

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

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

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

package/dist/v2/SimpleMenu/utils.cjs

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

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

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

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

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

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

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

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

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