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

package/dist/v2/SimpleMenu/SimpleMenu.js

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