@strapi/design-system 1.4.2 → 1.5.0-alpha.0

package/dist/v2/Pagination/components.js

@@ -1,40 +1,19 @@
-var R = Object.defineProperty, T = Object.defineProperties;
-var N = Object.getOwnPropertyDescriptors;
-var m = Object.getOwnPropertySymbols;
-var y = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
-var b = (e, r, o) => r in e ? R(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, l = (e, r) => {
-  for (var o in r || (r = {}))
-    y.call(r, o) && b(e, o, r[o]);
-  if (m)
-    for (var o of m(r))
-      P.call(r, o) && b(e, o, r[o]);
-  return e;
-}, f = (e, r) => T(e, N(r));
-var c = (e, r) => {
-  var o = {};
-  for (var t in e)
-    y.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
-  if (e != null && m)
-    for (var t of m(e))
-      r.indexOf(t) < 0 && P.call(e, t) && (o[t] = e[t]);
-  return o;
-};
-import a from "react";
-import p from "styled-components";
-import u from "prop-types";
-import W from "@strapi/icons/ChevronLeft";
-import q from "@strapi/icons/ChevronRight";
-import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-import { usePagination as v } from "./PaginationContext.js";
-import { Typography as C } from "../../Typography/Typography.js";
-import { buttonFocusStyle as S } from "../../themes/utils.js";
-import { BaseLink as A } from "../../BaseLink/BaseLink.js";
-const E = p(C)`
+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;
-`, D = {
+`, w = {
   active: !0
-}, g = p(A).withConfig({
-  shouldForwardProp: (e, r) => !D[e] && r(e)
+}, p = s(k).withConfig({
+  shouldForwardProp: (e, r) => !w[e] && r(e)
 })`
   padding: ${({ theme: e }) => e.spaces[3]};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -42,15 +21,15 @@ const E = p(C)`
   text-decoration: none;
   display: flex;
 
-  ${S}
-`, F = p(g)`
+  ${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};
   }
-`, k = p(g)`
+`, u = s(p)`
   font-size: 0.7rem;
   svg path {
     fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
@@ -66,70 +45,67 @@ const E = p(C)`
   ${(e) => e["aria-disabled"] ? `
   pointer-events: none;
     ` : void 0}
-`, I = p(g)`
+`, $ = s(p)`
   color: ${({ theme: e }) => e.colors.neutral800};
-`, w = a.forwardRef((t, o) => {
-  var i = t, { children: e } = i, r = c(i, ["children"]);
-  const { activePage: n } = v(), s = n === 1;
-  return /* @__PURE__ */ a.createElement(k, l({
-    ref: o,
-    "aria-disabled": s,
-    tabIndex: s ? -1 : void 0
-  }, r), /* @__PURE__ */ a.createElement(h, null, e), /* @__PURE__ */ a.createElement(W, {
+`, 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
   }));
 });
-w.displayName = "PreviousLink";
-const L = a.forwardRef((t, o) => {
-  var i = t, { children: e } = i, r = c(i, ["children"]);
-  const { activePage: n, pageCount: s } = v(), d = n === s;
-  return /* @__PURE__ */ a.createElement(k, l({
-    ref: o,
-    "aria-disabled": d,
-    tabIndex: d ? -1 : void 0
-  }, r), /* @__PURE__ */ a.createElement(h, null, e), /* @__PURE__ */ a.createElement(q, {
+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
   }));
 });
-L.displayName = "NextLink";
-const $ = a.forwardRef((i, t) => {
-  var n = i, { number: e, children: r } = n, o = c(n, ["number", "children"]);
-  const { activePage: s } = v(), d = s === e;
-  return /* @__PURE__ */ a.createElement(F, f(l({
-    ref: t
-  }, o), {
-    active: d
-  }), /* @__PURE__ */ a.createElement(h, null, r), /* @__PURE__ */ a.createElement(E, {
+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: d ? "bold" : null
+    fontWeight: n ? "bold" : null
   }, e));
 });
-$.displayName = "PageLink";
-const _ = (o) => {
-  var t = o, { children: e } = t, r = c(t, ["children"]);
-  return /* @__PURE__ */ a.createElement(I, f(l({}, r), {
-    as: "div"
-  }), /* @__PURE__ */ a.createElement(h, null, e), /* @__PURE__ */ a.createElement(E, {
-    "aria-hidden": !0,
-    variant: "pi"
-  }, "\u2026"));
-};
-$.propTypes = {
-  children: u.node.isRequired,
-  number: u.number.isRequired
+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 x = {
-  children: u.node.isRequired
+const g = {
+  children: d.node.isRequired
 };
-L.propTypes = x;
-w.propTypes = x;
-_.propTypes = {
-  children: u.node.isRequired
+f.propTypes = g;
+h.propTypes = g;
+x.propTypes = {
+  children: d.node.isRequired
 };
 export {
-  _ as Dots,
-  L as NextLink,
-  $ as PageLink,
-  w as PreviousLink
+  x as Dots,
+  f as NextLink,
+  v as PageLink,
+  h as PreviousLink
 };

package/dist/v2/SimpleMenu/SimpleMenu.cjs

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

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

package/dist/v2/SubNav/SubNav.cjs

@@ -1,5 +1,5 @@
-"use strict";var b=Object.defineProperty;var a=Object.getOwnPropertySymbols;var u=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var i=(e,t,r)=>t in e?b(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))u.call(t,r)&&i(e,r,t[r]);if(a)for(var r of a(t))d.call(t,r)&&i(e,r,t[r]);return e};var c=(e,t)=>{var r={};for(var o in e)u.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&a)for(var o of a(e))t.indexOf(o)<0&&d.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),y=require("styled-components"),v=require("prop-types"),_=require("../../Grid/Grid.cjs");require("../../Grid/GridItem.cjs");const s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},g=s(f),h=s(y),q=s(v),n=`${232/16}rem`,G=h.default(_.Grid)`
-  width: ${n};
+"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;
@@ -7,4 +7,4 @@
   overflow-y: auto;
   border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
   z-index: 1;
-`,p=r=>{var o=r,{ariaLabel:e}=o,t=c(o,["ariaLabel"]);return g.default.createElement(G,l({"aria-label":e,as:"nav"},t))};p.propTypes={ariaLabel:q.default.string.isRequired};exports.SubNav=p;exports.subNavWidth=n;
+`,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;