@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.2

package/dist/SimpleMenu/SimpleMenu.cjs

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

package/dist/SimpleMenu/SimpleMenu.d.ts

@@ -0,0 +1,73 @@
+export function MenuItem({ children, onClick, to, isFocused, ...props }: {
+    [x: string]: any;
+    children: any;
+    onClick: any;
+    to: any;
+    isFocused: any;
+}): JSX.Element;
+export namespace MenuItem {
+    namespace defaultProps {
+        const as: undefined;
+        function onClick(): void;
+        const isFocused: boolean;
+        const to: undefined;
+    }
+    namespace propTypes {
+        const as_1: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        export { as_1 as as };
+        export const children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        const isFocused_1: PropTypes.Requireable<boolean>;
+        export { isFocused_1 as isFocused };
+        export const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        const to_1: PropTypes.Requireable<string>;
+        export { to_1 as to };
+    }
+}
+export function SimpleMenu({ label, children, id, as: asComp, onOpen, onClose, size, popoverPlacement, onReachEnd, ...props }: {
+    [x: string]: any;
+    label: any;
+    children: any;
+    id: any;
+    as: any;
+    onOpen?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    size: any;
+    popoverPlacement: any;
+    onReachEnd: any;
+}): JSX.Element;
+export namespace SimpleMenu {
+    const defaultProps_1: {
+        as: undefined;
+        id?: undefined;
+        onOpen?: undefined;
+        onClose?: undefined;
+        onReachEnd?: undefined;
+        popoverPlacement?: undefined;
+        size?: undefined;
+    } | {
+        id: undefined;
+        onOpen: undefined;
+        onClose: undefined;
+        onReachEnd: undefined;
+        popoverPlacement: string;
+        size: string;
+        as?: undefined;
+    };
+    export { defaultProps_1 as defaultProps };
+    export const displayName: string;
+    export namespace propTypes_1 {
+        const as_2: PropTypes.Requireable<any>;
+        export { as_2 as as };
+        const children_1: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
+        export { children_1 as children };
+        export const id: PropTypes.Requireable<string>;
+        export const label: PropTypes.Validator<NonNullable<NonNullable<string | number | PropTypes.ReactElementLike | null | undefined>>>;
+        export const onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        export const onReachEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        export const popoverPlacement: PropTypes.Requireable<string>;
+        export const size: PropTypes.Requireable<string>;
+    }
+    export { propTypes_1 as propTypes };
+}
+import PropTypes from "prop-types";

package/dist/SimpleMenu/SimpleMenu.js

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

package/dist/SimpleMenu/index.d.ts

@@ -0,0 +1 @@
+export * from "./SimpleMenu";

package/dist/SimpleMenu/utils.d.ts

@@ -0,0 +1,3 @@
+export function getOptionStyle({ theme }: {
+    theme: any;
+}): string;

package/dist/Stack/Stack.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),f=require("prop-types"),g=require("styled-components"),d=require("../Flex/Flex.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=r(c),n=r(f),u=r(g),p={size:!0},m=u.default(d.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
+"use strict";var S=Object.defineProperty;var a=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var c=(e,t,r)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,s=(e,t)=>{for(var r in t||(t={}))l.call(t,r)&&c(e,r,t[r]);if(a)for(var r of a(t))d.call(t,r)&&c(e,r,t[r]);return e};var u=(e,t)=>{var r={};for(var n in e)l.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&a)for(var n of a(e))t.indexOf(n)<0&&d.call(e,n)&&(r[n]=e[n]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),j=require("react"),y=require("styled-components"),f=require("../Flex/Flex.cjs"),g=require("../helpers/theme.cjs"),F=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},h=F(y),p={size:!0},w=h.default(f.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
   }
 
   & > * + * {
-    margin-top: ${({theme:e,spacing:t})=>e.spaces[t]};
+    margin-top: ${({theme:e,spacing:t})=>g.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,y=u.default(d.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
+`,k=h.default(f.Flex).withConfig({shouldForwardProp:(e,t)=>!p[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
   }
 
   & > * + * {
-    margin-left: ${({theme:e,spacing:t})=>e.spaces[t]};
+    margin-left: ${({theme:e,spacing:t})=>g.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,a=c.forwardRef(({horizontal:e,spacing:t,size:o,...s},i)=>(o&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?l.default.createElement(y,{ref:i,spacing:t||o,...s}):l.default.createElement(m,{direction:"column",alignItems:"stretch",ref:i,spacing:t||o,...s})));a.displayName="Stack";a.defaultProps={horizontal:!1,size:void 0,spacing:void 0};a.propTypes={horizontal:n.default.bool,size:n.default.number,spacing:n.default.number};exports.Stack=a;
+`,x=j.forwardRef((b,o)=>{var i=b,{horizontal:e=!1,spacing:t,size:r}=i,n=u(i,["horizontal","spacing","size"]);return r&&console.warn('Deprecation warning: Usage of "size" prop in Stack component is deprecated. This is discouraged and will be removed in the next major release. Please use "spacing" instead'),e?m.jsx(k,s({ref:o,spacing:t||r},n)):m.jsx(w,s({direction:"column",alignItems:"stretch",ref:o,spacing:t||r},n))});x.displayName="Stack";exports.Stack=x;

package/dist/Stack/Stack.d.ts

@@ -0,0 +1,19 @@
+import { DefaultTheme } from 'styled-components';
+import { FlexProps } from '../Flex';
+export interface StackProps extends FlexProps {
+    /**
+     * If `true`, align the `Stack` item horizontally.
+     */
+    horizontal?: boolean;
+    /**
+     * @deprecated use `spacing` instead
+     * The space between stack item.
+     */
+    size?: keyof DefaultTheme['spaces'];
+    /**
+     * The space between stack item.
+     * See [theme.spaces](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-theme--spaces)
+     */
+    spacing?: keyof DefaultTheme['spaces'];
+}
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;