@strapi/design-system 1.3.0-beta.3 → 1.4.0-beta.0

package/dist/v2/MainNav/NavSections.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),u=require("prop-types"),i=require("../../Stack/Stack.cjs"),d=require("../../Box/Box.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(a),l=r(u),c=({children:e,...o})=>t.default.createElement(d.Box,{paddingLeft:3,paddingRight:2,paddingTop:3},t.default.createElement(i.Stack,{as:"ul",spacing:4,...o},a.Children.map(e,(n,s)=>t.default.createElement("li",{key:s},n))));c.propTypes={children:l.default.node.isRequired};exports.NavSections=c;

package/dist/v2/MainNav/NavSections.js

@@ -0,0 +1,21 @@
+import e, { Children as i } from "react";
+import n from "prop-types";
+import { Stack as a } from "../../Stack/Stack.js";
+import { Box as m } from "../../Box/Box.js";
+const d = ({ children: r, ...t }) => /* @__PURE__ */ e.createElement(m, {
+  paddingLeft: 3,
+  paddingRight: 2,
+  paddingTop: 3
+}, /* @__PURE__ */ e.createElement(a, {
+  as: "ul",
+  spacing: 4,
+  ...t
+}, i.map(r, (o, p) => /* @__PURE__ */ e.createElement("li", {
+  key: p
+}, o))));
+d.propTypes = {
+  children: n.node.isRequired
+};
+export {
+  d as NavSections
+};

package/dist/v2/MainNav/NavUser.cjs

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react"),f=require("prop-types"),y=require("styled-components"),s=require("../../Avatar/Avatar.cjs");require("../../Avatar/AvatarGroup.cjs");const v=require("../../Typography/Typography.cjs"),x=require("../../Flex/Flex.cjs"),d=require("../../Box/Box.cjs"),g=require("./MainNavContext.cjs"),m=require("../../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(p),r=o(f),q=o(y),j=q.default(d.Box)`
+  text-decoration: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,a=t.default.forwardRef(({src:e,children:n,initials:i,...u},c)=>{const l=g.useMainNav();return t.default.createElement(j,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...u},t.default.createElement(x.Flex,{as:"button",justifyContent:l?"center":void 0,ref:c},e?t.default.createElement(s.Avatar,{src:e,alt:"","aria-hidden":!0}):t.default.createElement(s.Initials,null,i),l?t.default.createElement(m.VisuallyHidden,null,t.default.createElement("span",null,n)):t.default.createElement(d.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span"},t.default.createElement(v.Typography,{ellipsis:!0,textColor:"neutral600"},n))))});a.displayName="NavUser";a.defaultProps={src:void 0,initials:void 0};a.propTypes={children:r.default.node.isRequired,initials:r.default.node,src:r.default.string};exports.NavUser=a;

package/dist/v2/MainNav/NavUser.js

@@ -0,0 +1,54 @@
+import e from "react";
+import o from "prop-types";
+import m from "styled-components";
+import { Avatar as s, Initials as c } from "../../Avatar/Avatar.js";
+import "../../Avatar/AvatarGroup.js";
+import { Typography as f } from "../../Typography/Typography.js";
+import { Flex as u } from "../../Flex/Flex.js";
+import { Box as a } from "../../Box/Box.js";
+import { useMainNav as g } from "./MainNavContext.js";
+import { VisuallyHidden as v } from "../../VisuallyHidden/VisuallyHidden.js";
+const y = m(a)`
+  text-decoration: none;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid ${({ theme: t }) => t.colors.neutral150};
+`, r = e.forwardRef(({ src: t, children: i, initials: l, ...d }, p) => {
+  const n = g();
+  return /* @__PURE__ */ e.createElement(y, {
+    paddingTop: 3,
+    paddingBottom: 3,
+    paddingLeft: 5,
+    paddingRight: 5,
+    ...d
+  }, /* @__PURE__ */ e.createElement(u, {
+    as: "button",
+    justifyContent: n ? "center" : void 0,
+    ref: p
+  }, t ? /* @__PURE__ */ e.createElement(s, {
+    src: t,
+    alt: "",
+    "aria-hidden": !0
+  }) : /* @__PURE__ */ e.createElement(c, null, l), n ? /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("span", null, i)) : /* @__PURE__ */ e.createElement(a, {
+    width: `${130 / 16}rem`,
+    paddingLeft: 2,
+    as: "span"
+  }, /* @__PURE__ */ e.createElement(f, {
+    ellipsis: !0,
+    textColor: "neutral600"
+  }, i))));
+});
+r.displayName = "NavUser";
+r.defaultProps = {
+  src: void 0,
+  initials: void 0
+};
+r.propTypes = {
+  children: o.node.isRequired,
+  initials: o.node,
+  src: o.string
+};
+export {
+  r as NavUser
+};

package/dist/v2/MainNav/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./MainNav.cjs"),a=require("./NavBrand.cjs"),n=require("./NavLink.cjs"),s=require("./NavSection.cjs"),v=require("./NavSections.cjs"),N=require("./NavUser.cjs"),i=require("./NavCondense.cjs");exports.MainNav=e.MainNav;exports.NavBrand=a.NavBrand;exports.NavLink=n.NavLink;exports.NavSection=s.NavSection;exports.NavSections=v.NavSections;exports.NavUser=N.NavUser;exports.NavCondense=i.NavCondense;

package/dist/v2/MainNav/index.js

@@ -0,0 +1,16 @@
+import { MainNav as e } from "./MainNav.js";
+import { NavBrand as t } from "./NavBrand.js";
+import { NavLink as m } from "./NavLink.js";
+import { NavSection as p } from "./NavSection.js";
+import { NavSections as x } from "./NavSections.js";
+import { NavUser as i } from "./NavUser.js";
+import { NavCondense as c } from "./NavCondense.js";
+export {
+  e as MainNav,
+  t as NavBrand,
+  c as NavCondense,
+  m as NavLink,
+  p as NavSection,
+  x as NavSections,
+  i as NavUser
+};

package/dist/v2/Pagination/Pagination.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),p=require("styled-components"),f=require("prop-types"),g=require("../../Flex/Flex.cjs"),P=require("./PaginationContext.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(r),i=n(p),a=n(f),y=i.default.nav``,m=i.default(g.Flex)`
+  & > * + * {
+    margin-left: ${({theme:e})=>e.spaces[1]};
+  }
+`,l=({children:e,label:o,activePage:u,pageCount:s})=>t.default.createElement(P.PaginationContext.Provider,{value:{activePage:u,pageCount:s}},t.default.createElement(y,{"aria-label":o},t.default.createElement(m,{as:"ul"},r.Children.map(e,(c,d)=>t.default.createElement("li",{key:d},c)))));l.defaultProps={label:"pagination"};l.propTypes={activePage:a.default.number.isRequired,children:a.default.node.isRequired,label:a.default.string,pageCount:a.default.number.isRequired};exports.Pagination=l;

package/dist/v2/Pagination/Pagination.js

@@ -0,0 +1,30 @@
+import e, { Children as s } from "react";
+import a from "styled-components";
+import r from "prop-types";
+import { Flex as u } from "../../Flex/Flex.js";
+import { PaginationContext as c } from "./PaginationContext.js";
+const d = a.nav``, g = a(u)`
+  & > * + * {
+    margin-left: ${({ theme: t }) => t.spaces[1]};
+  }
+`, i = ({ children: t, label: n, activePage: o, pageCount: l }) => /* @__PURE__ */ e.createElement(c.Provider, {
+  value: { activePage: o, pageCount: l }
+}, /* @__PURE__ */ e.createElement(d, {
+  "aria-label": n
+}, /* @__PURE__ */ e.createElement(g, {
+  as: "ul"
+}, s.map(t, (m, p) => /* @__PURE__ */ e.createElement("li", {
+  key: p
+}, m)))));
+i.defaultProps = {
+  label: "pagination"
+};
+i.propTypes = {
+  activePage: r.number.isRequired,
+  children: r.node.isRequired,
+  label: r.string,
+  pageCount: r.number.isRequired
+};
+export {
+  i as Pagination
+};

package/dist/v2/Pagination/PaginationContext.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({activePage:1,pageCount:1}),n=()=>e.useContext(t);exports.PaginationContext=t;exports.usePagination=n;

package/dist/v2/Pagination/PaginationContext.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t({ activePage: 1, pageCount: 1 }), a = () => e(o);
+export {
+  o as PaginationContext,
+  a as usePagination
+};

package/dist/v2/Pagination/assets/next.cjs

@@ -0,0 +1 @@
+"use strict";const M="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";module.exports=M;

package/dist/v2/Pagination/assets/next.js

@@ -0,0 +1,4 @@
+const M = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0tMC4wMDAxOTU1MDMgMS4xNzVMMy44MTY0NyA1TC0wLjAwMDE5NTUwMyA4LjgyNUwxLjE3NDggMTBMNi4xNzQ4IDVMMS4xNzQ4IDBMLTAuMDAwMTk1NTAzIDEuMTc1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+export {
+  M as default
+};

package/dist/v2/Pagination/assets/previous.cjs

@@ -0,0 +1 @@
+"use strict";const I="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";module.exports=I;

package/dist/v2/Pagination/assets/previous.js

@@ -0,0 +1,4 @@
+const I = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02LjE3NSA4LjgyNUwyLjM1ODMzIDVMNi4xNzUgMS4xNzVMNSAwTDAgNUw1IDEwTDYuMTc1IDguODI1WiIgZmlsbD0iIzhFOEVBOSIvPgo8L3N2Zz4K";
+export {
+  I as default
+};

package/dist/v2/Pagination/components.cjs

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),L=require("styled-components"),k=require("prop-types"),q=require("@strapi/icons/ChevronLeft"),R=require("@strapi/icons/ChevronRight"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),c=require("./PaginationContext.cjs"),T=require("../../Typography/Typography.cjs"),_=require("../../themes/utils.cjs"),x=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=s(b),l=s(L),d=s(k),E=s(q),w=s(R),g=l.default(T.Typography)`
+  line-height: revert;
+`,$={active:!0},f=l.default(x.BaseLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(e)})`
+  padding: ${({theme:e})=>e.spaces[3]};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  box-shadow: ${({active:e,theme:t})=>e?t.shadows.filterShadow:void 0};
+  text-decoration: none;
+  display: flex;
+
+  ${_.buttonFocusStyle}
+`,C=l.default(f)`
+  color: ${({theme:e,active:t})=>t?e.colors.primary700:e.colors.neutral800};
+  background: ${({theme:e,active:t})=>t?e.colors.neutral0:void 0};
+
+  &:hover {
+    box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  }
+`,v=l.default(f)`
+  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}
+`,j=l.default(f)`
+  color: ${({theme:e})=>e.colors.neutral800};
+`,p=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i}=c.usePagination(),r=i===1;return a.default.createElement(v,{ref:n,"aria-disabled":r,tabIndex:r?-1:void 0,...t},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(E.default,{"aria-hidden":!0}))});p.displayName="PreviousLink";const h=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i,pageCount:r}=c.usePagination(),o=i===r;return a.default.createElement(v,{ref:n,"aria-disabled":o,tabIndex:o?-1:void 0,...t},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(w.default,{"aria-hidden":!0}))});h.displayName="NextLink";const y=a.default.forwardRef(({number:e,children:t,...n},i)=>{const{activePage:r}=c.usePagination(),o=r===e;return a.default.createElement(C,{ref:i,...n,active:o},a.default.createElement(u.VisuallyHidden,null,t),a.default.createElement(g,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null},e))});y.displayName="PageLink";const m=({children:e,...t})=>a.default.createElement(j,{...t,as:"div"},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(g,{"aria-hidden":!0,variant:"pi"},"\u2026"));y.propTypes={children:d.default.node.isRequired,number:d.default.number.isRequired};const P={children:d.default.node.isRequired};h.propTypes=P;p.propTypes=P;m.propTypes={children:d.default.node.isRequired};exports.Dots=m;exports.NextLink=h;exports.PageLink=y;exports.PreviousLink=p;

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;