@strapi/design-system 1.7.0 → 1.7.1

package/dist/Select/SingleSelect.js

@@ -1,129 +1,39 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as i from "react";
 import { Item as q, ItemText as H, Root as M, Trigger as P, Value as _, Portal as z, Content as A, Viewport as D } from "./SelectParts.js";
-import { Box as R } from "../Box/Box.js";
-import { Field as G } from "../Field/Field.js";
-import { FieldLabel as J } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as K } from "../Field/FieldHint.js";
-import { FieldError as Q } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
+import { useId as G } from "../hooks/useId.js";
+import { useIntersection as J } from "../hooks/useIntersection.js";
+import { Box as C } from "../Box/Box.js";
+import { Typography as K } from "../Typography/Typography.js";
+import { Field as Q } from "../Field/Field.js";
 import { Flex as U } from "../Flex/Flex.js";
-import { useId as X } from "../hooks/useId.js";
-import { useIntersection as Y } from "../hooks/useIntersection.js";
-import { Typography as Z } from "../Typography/Typography.js";
-const Ie = ({
-  children: s,
-  clearLabel: o = "Clear",
-  customizeContent: l,
-  disabled: d,
-  error: c,
-  hint: C,
-  id: O,
-  label: m,
-  labelAction: B,
-  onChange: h,
-  onClear: p,
-  onReachEnd: u,
-  placeholder: F,
-  required: g,
-  selectButtonTitle: ee,
-  startIcon: T,
-  size: $ = "M",
-  value: f,
-  ...y
-}) => {
-  const [w, I] = i.useState(), [V, k] = i.useState(!1), t = X(O), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
-    h ? h(typeof f == "number" ? Number(r) : r) : I(r);
+import { FieldLabel as X } from "../Field/FieldLabel.js";
+import { FieldHint as Y } from "../Field/FieldHint.js";
+import { FieldError as Z } from "../Field/FieldError.js";
+const ue = ({ children: s, clearLabel: o = "Clear", customizeContent: l, disabled: d, error: c, hint: R, id: O, label: u, labelAction: B, onChange: h, onClear: f, onReachEnd: m, placeholder: F, required: g, selectButtonTitle: ee, startIcon: T, size: $ = "M", value: p, ...y }) => {
+  const [w, I] = i.useState(), [V, k] = i.useState(!1), t = G(O), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
+    h ? h(typeof p == "number" ? Number(r) : r) : I(r);
   }, N = (r) => {
     k(r);
   }, j = (r) => {
-    p && p(r), h || I("");
-  }, b = i.useRef(null), W = () => {
-    b.current.focus();
-  }, x = i.useRef(null), S = `intersection-${t}`;
-  Y(x, (r) => {
-    u && u(r);
+    f && f(r), h || I("");
+  }, S = i.useRef(null), W = () => {
+    S.current.focus();
+  }, b = i.useRef(null), x = `intersection-${CSS.escape(t)}`;
+  J(b, (r) => {
+    m && m(r);
   }, {
-    selectorToWatch: `#${S}`,
+    selectorToWatch: `#${x}`,
+    /**
+     * We need to know when the select is open because only then will viewportRef
+     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+     */
     skipWhen: !V
   });
-  const n = (typeof f < "u" ? f.toString() : w) ?? "";
-  return e(G, {
-    hint: C,
-    error: c,
-    id: t,
-    required: g,
-    children: a(U, {
-      direction: "column",
-      alignItems: "stretch",
-      gap: 1,
-      children: [e(J, {
-        onClick: W,
-        action: B,
-        children: m
-      }), a(M, {
-        onOpenChange: N,
-        disabled: d,
-        required: g,
-        onValueChange: L,
-        value: n,
-        ...y,
-        children: [e(P, {
-          ref: b,
-          "aria-label": m,
-          "aria-describedby": `${v} ${E}`,
-          id: t,
-          startIcon: T,
-          size: $,
-          hasError: Boolean(c),
-          disabled: d,
-          clearLabel: o,
-          onClear: n && p ? j : void 0,
-          children: e(_, {
-            placeholder: F,
-            textColor: n ? "neutral800" : "neutral600",
-            children: n && l ? l(n) : void 0
-          })
-        }), e(z, {
-          children: e(A, {
-            position: "popper",
-            sideOffset: 4,
-            children: a(D, {
-              ref: x,
-              children: [s, e(R, {
-                id: S,
-                width: "100%",
-                height: "1px"
-              })]
-            })
-          })
-        })]
-      }), e(K, {}), e(Q, {})]
-    })
-  });
-}, be = i.forwardRef(({
-  value: s,
-  startIcon: o,
-  children: l,
-  ...d
-}, c) => a(q, {
-  ref: c,
-  value: s.toString(),
-  ...d,
-  children: [o && e(R, {
-    as: "span",
-    "aria-hidden": !0,
-    children: o
-  }), e(Z, {
-    textColor: "neutral800",
-    children: e(H, {
-      children: l
-    })
-  })]
-}));
+  const n = (typeof p < "u" ? p.toString() : w) ?? "";
+  return e(Q, { hint: R, error: c, id: t, required: g, children: a(U, { direction: "column", alignItems: "stretch", gap: 1, children: [e(X, { onClick: W, action: B, children: u }), a(M, { onOpenChange: N, disabled: d, required: g, onValueChange: L, value: n, ...y, children: [e(P, { ref: S, "aria-label": u, "aria-describedby": `${v} ${E}`, id: t, startIcon: T, size: $, hasError: !!c, disabled: d, clearLabel: o, onClear: n && f ? j : void 0, children: e(_, { placeholder: F, textColor: n ? "neutral800" : "neutral600", children: n && l ? l(n) : void 0 }) }), e(z, { children: e(A, { position: "popper", sideOffset: 4, children: a(D, { ref: b, children: [s, e(C, { id: x, width: "100%", height: "1px" })] }) }) })] }), e(Y, {}), e(Z, {})] }) });
+}, me = i.forwardRef(({ value: s, startIcon: o, children: l, ...d }, c) => a(q, { ref: c, value: s.toString(), ...d, children: [o && e(C, { as: "span", "aria-hidden": !0, children: o }), e(K, { textColor: "neutral800", children: e(H, { children: l }) })] }));
 export {
-  Ie as SingleSelect,
-  be as SingleSelectOption
+  ue as SingleSelect,
+  me as SingleSelectOption
 };

package/dist/Select/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./MultiSelectNested.cjs"),e=require("./MultiSelect.cjs"),t=require("./SingleSelect.cjs"),c=require("./Select.cjs"),i=require("./Option.cjs"),S=require("./OptGroup.cjs"),u=require("./SelectList.cjs");exports.MultiSelectNested=l.MultiSelectNested;exports.MultiSelect=e.MultiSelect;exports.MultiSelectGroup=e.MultiSelectGroup;exports.MultiSelectOption=e.MultiSelectOption;exports.SingleSelect=t.SingleSelect;exports.SingleSelectOption=t.SingleSelectOption;exports.Select=c.Select;exports.Option=i.Option;exports.OptGroup=S.OptGroup;exports.SelectList=u.SelectList;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./MultiSelectNested.cjs"),e=require("./MultiSelect.cjs"),t=require("./SingleSelect.cjs"),i=require("./Select.cjs"),c=require("./Option.cjs"),S=require("./OptGroup.cjs"),u=require("./SelectList.cjs");exports.MultiSelectNested=l.MultiSelectNested;exports.MultiSelect=e.MultiSelect;exports.MultiSelectGroup=e.MultiSelectGroup;exports.MultiSelectOption=e.MultiSelectOption;exports.SingleSelect=t.SingleSelect;exports.SingleSelectOption=t.SingleSelectOption;exports.Select=i.Select;exports.Option=c.Option;exports.OptGroup=S.OptGroup;exports.SelectList=u.SelectList;

package/dist/SimpleMenu/SimpleMenu.cjs

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

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,28 +1,29 @@
-import t, { useRef as T, useEffect as v, useState as B, Children as z, cloneElement as j } from "react";
-import { useCallbackRef as K } from "@radix-ui/react-use-callback-ref";
-import { CarretDown as H } from "@strapi/icons";
+import { jsx as t, jsxs as z } from "react/jsx-runtime";
+import B, { useRef as T, useEffect as E, useState as K, Children as H, cloneElement as U } from "react";
+import { useCallbackRef as $ } from "@radix-ui/react-use-callback-ref";
+import { CarretDown as G } from "@strapi/icons";
 import e from "prop-types";
-import { NavLink as U } from "react-router-dom";
+import { NavLink as J } from "react-router-dom";
 import y from "styled-components";
 import { getOptionStyle as b } from "./utils.js";
-import { Box as k } from "../Box/Box.js";
-import { Button as $ } from "../Button/Button.js";
-import { Flex as G } from "../Flex/Flex.js";
 import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-import { useId as J } from "../hooks/useId.js";
-import { Link as Q } from "../Link/Link.js";
-import { POPOVER_PLACEMENTS as X, Popover as Y } from "../Popover/Popover.js";
+import { useId as Q } from "../hooks/useId.js";
+import { Link as X } from "../Link/Link.js";
+import { Button as L } from "../Button/Button.js";
+import { POPOVER_PLACEMENTS as Y, Popover as Z } from "../Popover/Popover.js";
+import { Box as C } from "../Box/Box.js";
 import { Typography as O } from "../Typography/Typography.js";
-const Z = y.button`
+import { Flex as ee } from "../Flex/Flex.js";
+const ne = y.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
   ${b}
-`, ee = y(U)`
+`, oe = y(J)`
   text-decoration: none;
   ${b}
-`, ne = y(Q)`
+`, te = y(X)`
   /* Removing Link hover effect */
   &:hover {
     color: currentColor;
@@ -38,31 +39,31 @@ const Z = y.button`
   }
 
   ${b}
-`, te = y.span`
+`, re = y.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, oe = y($)`
+`, ie = y(L)`
   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,
+`, A = ({ children: o, onClick: h, to: s, isFocused: c, href: a, ...x }) => {
+  const d = T();
+  E(() => {
+    c && d.current && d.current.focus();
+  }, [c]);
+  const l = {
+    tabIndex: c ? 0 : -1,
+    ref: d,
     role: "menuitem",
-    ...P
-  }, u = (g) => {
-    (g.key === i.SPACE || g.key === i.ENTER) && E();
+    ...x
+  }, p = (g) => {
+    (g.key === i.SPACE || g.key === i.ENTER) && h();
   };
-  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, { padding: 2 }, /* @__PURE__ */ t.createElement(O, null, o))) : /* @__PURE__ */ t.createElement(Z, { onKeyDown: u, onMouseDown: E, type: "button", ...p }, /* @__PURE__ */ t.createElement(k, { padding: 2 }, /* @__PURE__ */ t.createElement(O, null, o)));
+  return s && !a ? /* @__PURE__ */ t(oe, { to: s, ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) }) : a && !s ? /* @__PURE__ */ t(te, { isExternal: !0, href: a, ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) }) : /* @__PURE__ */ t(ne, { onKeyDown: p, onMouseDown: h, type: "button", ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) });
 };
-L.defaultProps = {
+A.defaultProps = {
   as: void 0,
   href: void 0,
   isFocused: !1,
@@ -70,7 +71,7 @@ L.defaultProps = {
   },
   to: void 0
 };
-L.propTypes = {
+A.propTypes = {
   as: e.elementType,
   children: e.node.isRequired,
   href: e.string,
@@ -78,83 +79,93 @@ L.propTypes = {
   onClick: e.func,
   to: e.string
 };
-const C = ({
+const k = ({
   label: o,
-  children: E,
+  children: h,
   id: s,
-  as: a,
-  onOpen: l = () => {
+  as: c,
+  onOpen: a = () => {
   },
-  onClose: P = () => {
+  onClose: x = () => {
   },
-  size: c,
-  popoverPlacement: p,
-  onReachEnd: u,
+  size: d,
+  popoverPlacement: l,
+  onReachEnd: p,
   ...g
 }) => {
-  const d = T(), R = J(s), x = T(!1), [m, f] = B(!1), [D, I] = B(0), h = z.toArray(E), A = a || (c === "S" ? oe : $), S = !!u && typeof u == "function";
-  v(() => {
+  const u = T(), P = Q(s), R = T(!1), [f, m] = K(!1), [D, I] = K(0), v = H.toArray(h), N = c || (d === "S" ? ie : L), S = !!p && typeof p == "function";
+  E(() => {
     if (["string", "number"].includes(typeof o)) {
-      const n = h.findIndex((r) => r.props.children === o);
+      const n = v.findIndex((r) => r.props.children === o);
       n !== -1 && I(n);
     }
   }, [o]);
-  const w = K(l), M = K(P);
-  v(() => {
-    x?.current ? m ? w() : M() : x.current = !0;
-  }, [x, M, w, m]), v(() => {
-    t.isValidElement(o) && D === -1 && d.current.focus();
+  const w = $(a), M = $(x);
+  E(() => {
+    R?.current ? f ? w() : M() : R.current = !0;
+  }, [R, M, w, f]), E(() => {
+    B.isValidElement(o) && D === -1 && u.current.focus();
   }, [o, D]);
-  const N = (n) => {
-    m && (n.key === i.ESCAPE && (n.stopPropagation(), f(!1), d.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);
+  const F = (n) => {
+    f && (n.key === i.ESCAPE && (n.stopPropagation(), m(!1), u.current.focus()), n.key === i.DOWN && I((r) => r === v.length - 1 ? 0 : r + 1), n.key === i.UP && I((r) => r === 0 ? v.length - 1 : r - 1));
   }, V = (n) => {
-    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || f(!1);
+    (n.key === i.ENTER || n.key === i.SPACE) && m((r) => !r);
+  }, j = (n) => {
+    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || m(!1);
   }, q = (n) => {
-    n.preventDefault(), f((r) => !r);
+    n.preventDefault(), m((r) => !r);
   }, W = () => {
-    S && u();
-  }, _ = h.map((n, r) => /* @__PURE__ */ t.createElement(G, { as: "li", key: r, justifyContent: "center", role: "menuitem" }, j(n, {
-    onClick() {
-      n.props.onClick(), f(!1), d.current.focus();
-    },
-    isFocused: D === r
-  })));
-  return /* @__PURE__ */ t.createElement("div", { onKeyDown: N }, /* @__PURE__ */ t.createElement(
-    A,
-    {
-      label: t.isValidElement(o) ? null : o,
-      "aria-haspopup": !0,
-      "aria-expanded": m,
-      "aria-controls": R,
-      onKeyDown: F,
-      onMouseDown: q,
-      ref: d,
-      type: "button",
-      variant: "ghost",
-      endIcon: /* @__PURE__ */ t.createElement(te, null, /* @__PURE__ */ t.createElement(H, { "aria-hidden": !0 })),
-      ...g
-    },
-    o
-  ), m && /* @__PURE__ */ t.createElement(
-    Y,
-    {
-      onBlur: V,
-      placement: p,
-      source: d,
-      onReachEnd: W,
-      intersectionId: S ? `popover-${R}` : void 0,
-      spacing: 4
-    },
-    /* @__PURE__ */ t.createElement(k, { role: "menu", as: "ul", padding: 1, id: R }, _)
+    S && p();
+  }, _ = v.map((n, r) => (
+    // eslint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ t(ee, { as: "li", justifyContent: "center", role: "menuitem", children: U(n, {
+      onClick() {
+        n.props.onClick(), m(!1), u.current.focus();
+      },
+      isFocused: D === r
+    }) }, r)
   ));
+  return (
+    // TODO: review why we need to eslint it and how to solve this issue.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ z("div", { onKeyDown: F, children: [
+      /* @__PURE__ */ t(
+        N,
+        {
+          label: B.isValidElement(o) ? null : o,
+          "aria-haspopup": !0,
+          "aria-expanded": f,
+          "aria-controls": P,
+          onKeyDown: V,
+          onMouseDown: q,
+          ref: u,
+          type: "button",
+          variant: "ghost",
+          endIcon: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(G, { "aria-hidden": !0 }) }),
+          ...g,
+          children: o
+        }
+      ),
+      f && /* @__PURE__ */ t(
+        Z,
+        {
+          onBlur: j,
+          placement: l,
+          source: u,
+          onReachEnd: W,
+          intersectionId: S ? `popover-${P}` : void 0,
+          spacing: 4,
+          children: /* @__PURE__ */ t(C, { role: "menu", as: "ul", padding: 1, id: P, children: _ })
+        }
+      )
+    ] })
+  );
 };
-C.defaultProps = {
+k.defaultProps = {
   as: void 0
 };
-C.displayName = "SimpleMenu";
-C.defaultProps = {
+k.displayName = "SimpleMenu";
+k.defaultProps = {
   id: void 0,
   onOpen: void 0,
   onClose: void 0,
@@ -162,18 +173,26 @@ C.defaultProps = {
   popoverPlacement: "bottom-start",
   size: "M"
 };
-C.propTypes = {
+k.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,
+  /**
+   * Callback function to be called when the popover reaches the end of the scrollable content
+   */
   onReachEnd: e.func,
-  popoverPlacement: e.oneOf(X),
+  popoverPlacement: e.oneOf(Y),
+  /**
+   * Size of the trigger button.
+   * Note: in case a custom component is passed through the "as"
+   * prop, the size prop is passed along too, but needs to be handled there
+   */
   size: e.oneOf(["S", "M"])
 };
 export {
-  L as MenuItem,
-  C as SimpleMenu
+  A as MenuItem,
+  k as SimpleMenu
 };

package/dist/SimpleMenu/index.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SimpleMenu.cjs");exports.MenuItem=e.MenuItem;exports.SimpleMenu=e.SimpleMenu;

package/dist/SimpleMenu/utils.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=({theme:o})=>`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=({theme:o})=>`
     text-align: left;
     width: 100%;
     color: ${o.colors.neutral800};

package/dist/Stack/Stack.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("react"),m=require("styled-components"),i=require("../Flex/Flex.cjs"),o=require("../helpers/theme.cjs"),f=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=f(m),l={size:!0,spacing:!0},g=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),s=require("styled-components"),o=require("../helpers/theme.cjs"),c=require("../Flex/Flex.cjs"),l={size:!0,spacing:!0},u=s(c.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-top: 0;
     margin-bottom: 0;
@@ -7,7 +7,7 @@
   & > * + * {
     margin-top: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,h=c.default(i.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
+`,g=s(c.Flex).withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   & > * {
     margin-left: 0;
     margin-right: 0;
@@ -16,4 +16,4 @@
   & > * + * {
     margin-left: ${({theme:e,spacing:t})=>o.extractStyleFromTheme(e.spaces,t,void 0)};
   }
-`,u=d.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},a)=>(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?s.jsx(h,{ref:a,spacing:t||r,...n}):s.jsx(g,{direction:"column",alignItems:"stretch",ref:a,spacing:t||r,...n})));u.displayName="Stack";exports.Stack=u;
+`,m=d.forwardRef(({horizontal:e=!1,spacing:t,size:r,...n},i)=>(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?a.jsx(g,{ref:i,spacing:t||r,...n}):a.jsx(u,{direction:"column",alignItems:"stretch",ref:i,spacing:t||r,...n})));m.displayName="Stack";exports.Stack=m;

package/dist/Stack/Stack.js

@@ -1,12 +1,12 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
 import a from "styled-components";
-import { Flex as s } from "../Flex/Flex.js";
-import { extractStyleFromTheme as m } from "../helpers/theme.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+import { Flex as m } from "../Flex/Flex.js";
 const c = {
   size: !0,
   spacing: !0
-}, f = a(s).withConfig({
+}, f = a(m).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
   & > * {
@@ -15,12 +15,9 @@ const c = {
   }
 
   & > * + * {
-    margin-top: ${({
-  theme: e,
-  spacing: r
-}) => m(e.spaces, r, void 0)};
+    margin-top: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
   }
-`, g = a(s).withConfig({
+`, g = a(m).withConfig({
   shouldForwardProp: (e, r) => !c[e] && r(e)
 })`
   & > * {
@@ -29,27 +26,9 @@ const c = {
   }
 
   & > * + * {
-    margin-left: ${({
-  theme: e,
-  spacing: r
-}) => m(e.spaces, r, void 0)};
+    margin-left: ${({ theme: e, spacing: r }) => s(e.spaces, r, void 0)};
   }
-`, l = d(({
-  horizontal: e = !1,
-  spacing: r,
-  size: t,
-  ...o
-}, i) => (t && 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 ? n(g, {
-  ref: i,
-  spacing: r || t,
-  ...o
-}) : n(f, {
-  direction: "column",
-  alignItems: "stretch",
-  ref: i,
-  spacing: r || t,
-  ...o
-})));
+`, l = d(({ horizontal: e = !1, spacing: r, size: t, ...o }, i) => (t && 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 ? n(g, { ref: i, spacing: r || t, ...o }) : n(f, { direction: "column", alignItems: "stretch", ref: i, spacing: r || t, ...o })));
 l.displayName = "Stack";
 export {
   l as Stack

package/dist/Stack/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Stack.cjs");exports.Stack=e.Stack;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./Stack.cjs");exports.Stack=t.Stack;

package/dist/Status/Status.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),b=require("prop-types"),m=require("styled-components"),$=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs"),T=require("../Typography/Typography.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=a(h),o=a(b),c=a(m),_=c.default.div`
-  margin-right: ${({theme:e})=>e.spaces[3]};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const e=require("prop-types"),a=require("styled-components"),y=require("../Box/Box.cjs"),b=require("../Typography/Typography.cjs"),$=require("../Flex/Flex.cjs"),x=a.div`
+  margin-right: ${({theme:r})=>r.spaces[3]};
   width: ${6/16}rem;
   height: ${6/16}rem;
   border-radius: 50%;
-  background: ${({theme:e,backgroundColor:t})=>e.colors[t]};
-`,B=c.default($.Box)`
-  ${T.Typography} {
-    color: ${({theme:e,textColor:t})=>e.colors[t]};
+  background: ${({theme:r,backgroundColor:o})=>r.colors[o]};
+`,m=a(y.Box)`
+  ${b.Typography} {
+    color: ${({theme:r,textColor:o})=>r.colors[o]};
   }
-`,s=({variant:e,showBullet:t,size:l,children:n,...p})=>{const i=`${e}100`,g=`${e}200`,f=`${e}600`,y=`${e}600`,u=l==="S"?2:5,d=l==="S"?1:4;return r.default.createElement(B,{borderColor:g,textColor:y,background:i,hasRadius:!0,paddingTop:d,paddingBottom:d,paddingLeft:u,paddingRight:u,...p},t?r.default.createElement(x.Flex,null,r.default.createElement(_,{backgroundColor:f}),n):n)};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:o.default.node.isRequired,showBullet:o.default.bool,size:o.default.oneOf(["S","M"]),variant:o.default.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;
+`,s=({variant:r,showBullet:o,size:n,children:i,...c})=>{const l=`${r}100`,p=`${r}200`,g=`${r}600`,h=`${r}600`,d=n==="S"?2:5,u=n==="S"?1:4;return t.jsx(m,{borderColor:p,textColor:h,background:l,hasRadius:!0,paddingTop:u,paddingBottom:u,paddingLeft:d,paddingRight:d,...c,children:o?t.jsxs($.Flex,{children:[t.jsx(x,{backgroundColor:g}),i]}):i})};s.defaultProps={showBullet:!0,size:"M",variant:"primary"};s.propTypes={children:e.node.isRequired,showBullet:e.bool,size:e.oneOf(["S","M"]),variant:e.oneOf(["alternative","danger","neutral","primary","secondary","success","warning"])};exports.Status=s;