@strapi/design-system 0.0.0-3cf3ff39

package/dist/Select/SelectList.js

@@ -0,0 +1,85 @@
+import { jsx as A } from "react/jsx-runtime";
+import * as b from "react";
+import { compute as S } from "compute-scroll-into-view";
+import { KeyboardKeys as u } from "../helpers/keyboardKeys.js";
+import { Flex as h } from "../Flex/Flex.js";
+const g = {
+  Keyboard: "down:keyboard",
+  Mouse: "down:mouse"
+}, m = { Keyboard: "up:keyboard", Mouse: "up:mouse" };
+/**
+ * @preserve
+ * @deprecated This component will be removed in the next major release.
+ * If you need a custom listbox I would recommend opening a new issue.
+ */
+const E = ({ labelledBy: r, onSelectItem: e, children: c, multi: s = !1, onEscape: t, expanded: f }) => {
+  const o = K(f);
+  return A(h, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": r, tabIndex: -1, ref: o, onKeyDown: (i) => {
+    switch (i.key) {
+      case u.ESCAPE: {
+        i.stopPropagation(), t();
+        break;
+      }
+      case u.DOWN: {
+        i.preventDefault();
+        const n = y(o.current);
+        if (!n)
+          return;
+        const a = n.nextSibling;
+        if (a)
+          l(o.current, a);
+        else {
+          const d = o.current.querySelectorAll('[role="option"]')[0];
+          l(o.current, d);
+        }
+        break;
+      }
+      case u.UP: {
+        i.preventDefault();
+        const n = y(o.current);
+        if (!n)
+          return;
+        const a = n.previousSibling;
+        if (a)
+          l(o.current, a);
+        else {
+          const p = o.current.querySelectorAll('[role="option"]'), d = p[p.length - 1];
+          l(o.current, d);
+        }
+        break;
+      }
+      case u.SPACE:
+      case u.ENTER: {
+        i.preventDefault();
+        const n = y(o.current);
+        n.getAttribute("data-opt-group") ? e(n.getAttribute("data-opt-group-children").split(","), n.getAttribute("data-opt-group")) : e(n.getAttribute("data-strapi-value")), s || t();
+        break;
+      }
+    }
+  }, onBlur: t, children: c });
+}, l = (r, e) => {
+  r.setAttribute("aria-activedescendant", e.getAttribute("id")), r.querySelectorAll('[role="option"]').forEach((t) => t.classList.remove("is-focused")), e.classList.add("is-focused"), S(e, {
+    scrollMode: "if-needed",
+    block: "nearest",
+    inline: "nearest"
+  }).forEach(({ el: t, top: f, left: o }) => {
+    t.scrollTop = f, t.scrollLeft = o;
+  });
+}, K = (r) => {
+  const e = b.useRef(null);
+  return b.useEffect(() => {
+    e.current.focus();
+  }, []), b.useEffect(() => {
+    if (!e.current)
+      return;
+    const c = e.current.querySelector('[aria-selected="true"]'), s = e.current.querySelectorAll('[role="option"]');
+    let t;
+    c ? t = c : r === m.Keyboard ? t = s[s.length - 1] : r === g.Keyboard && (t = s[0]), t && (r === m.Keyboard || r === g.Keyboard) && l(e.current, t);
+  }, []), e;
+}, y = (r) => {
+  const e = r.getAttribute("aria-activedescendant");
+  return r.querySelector(`#${e}`);
+};
+export {
+  E as SelectList
+};

package/dist/Select/SelectParts.cjs

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("react"),d=require("@strapi/icons"),o=require("@strapi/ui-primitives"),p=require("styled-components"),j=require("../hooks/useComposeRefs.cjs"),c=require("../Flex/Flex.cjs"),f=require("../Box/Box.cjs"),u=require("../themes/utils.cjs"),g=require("../Typography/Typography.cjs"),I=e=>e&&e.__esModule?e:{default:e};function T(e){if(e&&e.__esModule)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(t,s,n.get?n:{enumerable:!0,get:()=>e[s]})}}return t.default=e,Object.freeze(t)}const a=T(R),l=I(p),v=a.forwardRef(({onClear:e,clearLabel:t="Clear",startIcon:s,disabled:n,hasError:h,size:m="M",children:x,...b},$)=>{const i=a.useRef(null),S=y=>{e&&!n&&(e(y),i.current.focus())},w=j.useComposedRefs(i,$);return r.jsx(o.Select.Trigger,{asChild:!0,children:r.jsxs(q,{"aria-disabled":n,$hasError:h,$size:m,ref:w,alignItems:"center",justifyContent:"space-between",position:"relative",overflow:"hidden",hasRadius:!0,background:n?"neutral150":"neutral0",paddingLeft:3,paddingRight:3,gap:4,cursor:"default",width:"100%",...b,children:[r.jsxs(c.Flex,{flex:"1",as:"span",gap:3,children:[s&&r.jsx(f.Box,{as:"span","aria-hidden":!0,children:s}),x]}),r.jsxs(c.Flex,{as:"span",gap:3,children:[e?r.jsx(C,{as:"button",hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:S,"aria-disabled":n,"aria-label":t,title:t,cursor:"pointer",children:r.jsx(d.Cross,{})}):null,r.jsx(k,{children:r.jsx(d.CarretDown,{})})]})]})})}),C=l.default(f.Box)`
+  border: none;
+
+  svg {
+    height: ${11/16}rem;
+    width: ${11/16}rem;
+  }
+
+  svg path {
+    fill: ${({theme:e})=>e.colors.neutral600};
+  }
+`,q=l.default(c.Flex)`
+  border: 1px solid ${({theme:e,$hasError:t})=>t?e.colors.danger600:e.colors.neutral200};
+  min-height: ${({theme:e,$size:t})=>u.getThemeSize("input")({theme:e,size:t})};
+
+  &[aria-disabled='true'] {
+    color: ${e=>e.theme.colors.neutral600};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({theme:e,$hasError:t})=>u.inputFocusStyle()({theme:e,hasError:t})};
+`,k=l.default(o.Select.Icon)`
+  & > svg {
+    width: ${6/16}rem;
+
+    & > path {
+      fill: ${({theme:e})=>e.colors.neutral600};
+    }
+  }
+`,V=a.forwardRef(({children:e,placeholder:t,...s},n)=>r.jsx(_,{ref:n,ellipsis:!0,...s,children:r.jsx(P,{placeholder:t,children:e})})),_=l.default(g.Typography)`
+  flex: 1;
+`,P=l.default(o.Select.Value)`
+  display: flex;
+  gap: ${({theme:e})=>e.spaces[1]};
+  flex-wrap: wrap;
+`,z=l.default(o.Select.Content)`
+  background: ${({theme:e})=>e.colors.neutral0};
+  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
+  border: 1px solid ${({theme:e})=>e.colors.neutral150};
+  border-radius: ${({theme:e})=>e.borderRadius};
+  min-width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+  z-index: ${({theme:e})=>e.zIndices[1]};
+`,F=l.default(o.Select.Viewport)`
+  padding: ${({theme:e})=>e.spaces[1]};
+`,O=a.forwardRef((e,t)=>r.jsx(B,{ref:t,...e})),M=p.css`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  border-radius: ${e=>e.theme.borderRadius};
+  padding: ${e=>`${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
+  padding-left: ${({theme:e})=>e.spaces[4]};
+  background-color: ${({theme:e})=>e.colors.neutral0};
+  display: flex;
+  align-items: center;
+  gap: ${({theme:e})=>e.spaces[2]};
+  white-space: nowrap;
+  user-select: none;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+`,B=l.default(o.Select.Item)`
+  ${M}
+
+  &:hover {
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${g.Typography} {
+      font-weight: bold;
+      color: ${({theme:e})=>e.colors.primary600};
+    }
+  }
+`,D=o.Select.Root,G=v,E=V,N=o.Select.Portal,A=z,H=F,J=O,K=o.Select.ItemIndicator,L=o.Select.ItemText,Q=o.Select.Group;exports.Content=A;exports.Group=Q;exports.Item=J;exports.ItemIndicator=K;exports.ItemText=L;exports.Portal=N;exports.Root=D;exports.Trigger=G;exports.Value=E;exports.Viewport=H;

package/dist/Select/SelectParts.js

@@ -0,0 +1,110 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import * as a from "react";
+import { Cross as y, CarretDown as R } from "@strapi/icons";
+import { Select as o } from "@strapi/ui-primitives";
+import s, { css as I } from "styled-components";
+import { useComposedRefs as S } from "../hooks/useComposeRefs.js";
+import { Flex as c } from "../Flex/Flex.js";
+import { Box as p } from "../Box/Box.js";
+import { getThemeSize as C, inputFocusStyle as T } from "../themes/utils.js";
+import { Typography as u } from "../Typography/Typography.js";
+const k = a.forwardRef(({ onClear: e, clearLabel: r = "Clear", startIcon: i, disabled: n, hasError: m, size: h = "M", children: f, ...g }, $) => {
+  const d = a.useRef(null), w = (x) => {
+    e && !n && (e(x), d.current.focus());
+  }, b = S(d, $);
+  return t(o.Trigger, { asChild: !0, children: l(V, { "aria-disabled": n, $hasError: m, $size: h, ref: b, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: !0, background: n ? "neutral150" : "neutral0", paddingLeft: 3, paddingRight: 3, gap: 4, cursor: "default", width: "100%", ...g, children: [l(c, { flex: "1", as: "span", gap: 3, children: [i && t(p, { as: "span", "aria-hidden": !0, children: i }), f] }), l(c, { as: "span", gap: 3, children: [e ? t(v, { as: "button", hasRadius: !0, background: "transparent", role: "button", tabIndex: 0, onClick: w, "aria-disabled": n, "aria-label": r, title: r, cursor: "pointer", children: t(y, {}) }) : null, t(z, { children: t(R, {}) })] })] }) });
+}), v = s(p)`
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme: e }) => e.colors.neutral600};
+  }
+`, V = s(c)`
+  border: 1px solid ${({ theme: e, $hasError: r }) => r ? e.colors.danger600 : e.colors.neutral200};
+  min-height: ${({ theme: e, $size: r }) => C("input")({ theme: e, size: r })};
+
+  &[aria-disabled='true'] {
+    color: ${(e) => e.theme.colors.neutral600};
+  }
+
+  /* Required to ensure the below inputFocusStyles are adhered too */
+  &:focus-visible {
+    outline: none;
+  }
+
+  ${({ theme: e, $hasError: r }) => T()({ theme: e, hasError: r })};
+`, z = s(o.Icon)`
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({ theme: e }) => e.colors.neutral600};
+    }
+  }
+`, j = a.forwardRef(({ children: e, placeholder: r, ...i }, n) => t(F, { ref: n, ellipsis: !0, ...i, children: t(B, { placeholder: r, children: e }) })), F = s(u)`
+  flex: 1;
+`, B = s(o.Value)`
+  display: flex;
+  gap: ${({ theme: e }) => e.spaces[1]};
+  flex-wrap: wrap;
+`, D = s(o.Content)`
+  background: ${({ theme: e }) => e.colors.neutral0};
+  box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
+  border-radius: ${({ theme: e }) => e.borderRadius};
+  min-width: var(--radix-select-trigger-width);
+  /* This is from the design-system figma file. */
+  max-height: 15rem;
+  z-index: ${({ theme: e }) => e.zIndices[1]};
+`, E = s(o.Viewport)`
+  padding: ${({ theme: e }) => e.spaces[1]};
+`, G = a.forwardRef((e, r) => t(q, { ref: r, ...e })), P = I`
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline-offset: -3px;
+  border-radius: ${(e) => e.theme.borderRadius};
+  padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
+  padding-left: ${({ theme: e }) => e.spaces[4]};
+  background-color: ${({ theme: e }) => e.colors.neutral0};
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spaces[2]};
+  white-space: nowrap;
+  user-select: none;
+
+  &:focus-visible {
+    outline: none;
+    background-color: ${({ theme: e }) => e.colors.primary100};
+  }
+`, q = s(o.Item)`
+  ${P}
+
+  &:hover {
+    background-color: ${({ theme: e }) => e.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${u} {
+      font-weight: bold;
+      color: ${({ theme: e }) => e.colors.primary600};
+    }
+  }
+`, U = o.Root, W = k, X = j, Y = o.Portal, Z = D, _ = E, ee = G, re = o.ItemIndicator, oe = o.ItemText, te = o.Group;
+export {
+  Z as Content,
+  te as Group,
+  ee as Item,
+  re as ItemIndicator,
+  oe as ItemText,
+  Y as Portal,
+  U as Root,
+  W as Trigger,
+  X as Value,
+  _ as Viewport
+};

package/dist/Select/SingleSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),o=require("./SelectParts.cjs"),E=require("../helpers/strings.cjs"),b=require("../hooks/useId.cjs"),V=require("../hooks/useIntersection.cjs"),q=require("../Box/Box.cjs"),H=require("../Typography/Typography.cjs"),W=require("../Field/Field.cjs"),z=require("../Flex/Flex.cjs"),D=require("../Field/FieldLabel.cjs"),A=require("../Field/FieldHint.cjs"),G=require("../Field/FieldError.cjs");function J(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,i.get?i:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const h=J(N),K=({error:e,hint:n,id:r,label:i,labelAction:s,required:f,selectButtonTitle:x,...d})=>{const c=b.useId(r),u=h.useRef(null),g=()=>{u.current.focus()};return t.jsx(W.Field,{hint:n,error:e,id:c,required:f,children:t.jsxs(z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(D.FieldLabel,{onClick:g,action:s,children:i}),t.jsx(O,{label:i,id:c,triggerRef:u,required:f,...d}),t.jsx(A.FieldHint,{}),t.jsx(G.FieldError,{})]})})},O=({id:e,children:n,clearLabel:r="Clear",customizeContent:i,disabled:s,error:f,label:x,onChange:d,onClear:c,onReachEnd:u,placeholder:g,required:m,selectButtonTitle:U,startIcon:y,size:F="M",value:p,triggerRef:R,...T})=>{const[B,j]=h.useState(),[C,_]=h.useState(!1),$=l=>{_(l)},v=l=>{c&&c(l),d||j("")},w=`${e}-hint`,P=`${e}-error`,k=l=>{d?d(typeof p=="number"?Number(l):l):j(l)},S=h.useRef(null),L=b.useId(),I=`intersection-${E.stripReactIdOfColon(L)}`,M=l=>{u&&u(l)};V.useIntersection(S,M,{selectorToWatch:`#${I}`,skipWhen:!C});const a=(typeof p<"u"&&p!==null?p.toString():B)??"";return t.jsxs(o.Root,{onOpenChange:$,disabled:s,required:m,onValueChange:k,value:a,...T,children:[t.jsx(o.Trigger,{ref:R,"aria-label":x,"aria-describedby":e?`${w} ${P}`:void 0,id:e,startIcon:y,size:F,hasError:!!f,disabled:s,clearLabel:r,onClear:a&&c?v:void 0,children:t.jsx(o.Value,{placeholder:g,textColor:a?"neutral800":"neutral600",children:a&&i?i(a):void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:S,children:[n,t.jsx(q.Box,{id:I,width:"100%",height:"1px"})]})})})]})},Q=h.forwardRef(({value:e,startIcon:n,children:r,...i},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...i,children:[n&&t.jsx(q.Box,{as:"span","aria-hidden":!0,children:n}),t.jsx(H.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:r})})]}));exports.SingleSelect=K;exports.SingleSelectInput=O;exports.SingleSelectOption=Q;

package/dist/Select/SingleSelect.js

@@ -0,0 +1,44 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as u from "react";
+import { Item as j, ItemText as q, Root as W, Trigger as _, Value as H, Portal as M, Content as P, Viewport as z } from "./SelectParts.js";
+import { stripReactIdOfColon as A } from "../helpers/strings.js";
+import { useId as R } from "../hooks/useId.js";
+import { useIntersection as D } from "../hooks/useIntersection.js";
+import { Box as x } from "../Box/Box.js";
+import { Typography as G } from "../Typography/Typography.js";
+import { Field as J } from "../Field/Field.js";
+import { Flex as K } from "../Flex/Flex.js";
+import { FieldLabel as Q } from "../Field/FieldLabel.js";
+import { FieldHint as U } from "../Field/FieldHint.js";
+import { FieldError as X } from "../Field/FieldError.js";
+const pe = ({ error: r, hint: i, id: c, label: n, labelAction: o, required: f, selectButtonTitle: m, ...d }) => {
+  const l = R(c), a = u.useRef(null);
+  return e(J, { hint: i, error: r, id: l, required: f, children: p(K, { direction: "column", alignItems: "stretch", gap: 1, children: [e(Q, { onClick: () => {
+    a.current.focus();
+  }, action: o, children: n }), e(Y, { label: n, id: l, triggerRef: a, required: f, ...d }), e(U, {}), e(X, {})] }) });
+}, Y = ({ id: r, children: i, clearLabel: c = "Clear", customizeContent: n, disabled: o, error: f, label: m, onChange: d, onClear: l, onReachEnd: a, placeholder: g, required: C, selectButtonTitle: Z, startIcon: B, size: O = "M", value: h, triggerRef: T, ...F }) => {
+  const [$, I] = u.useState(), [y, k] = u.useState(!1), w = (t) => {
+    k(t);
+  }, L = (t) => {
+    l && l(t), d || I("");
+  }, v = `${r}-hint`, E = `${r}-error`, N = (t) => {
+    d ? d(typeof h == "number" ? Number(t) : t) : I(t);
+  }, b = u.useRef(null), V = R(), S = `intersection-${A(V)}`;
+  D(b, (t) => {
+    a && a(t);
+  }, {
+    selectorToWatch: `#${S}`,
+    /**
+     * 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: !y
+  });
+  const s = (typeof h < "u" && h !== null ? h.toString() : $) ?? "";
+  return p(W, { onOpenChange: w, disabled: o, required: C, onValueChange: N, value: s, ...F, children: [e(_, { ref: T, "aria-label": m, "aria-describedby": r ? `${v} ${E}` : void 0, id: r, startIcon: B, size: O, hasError: !!f, disabled: o, clearLabel: c, onClear: s && l ? L : void 0, children: e(H, { placeholder: g, textColor: s ? "neutral800" : "neutral600", children: s && n ? n(s) : void 0 }) }), e(M, { children: e(P, { position: "popper", sideOffset: 4, children: p(z, { ref: b, children: [i, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
+}, me = u.forwardRef(({ value: r, startIcon: i, children: c, ...n }, o) => p(j, { ref: o, value: r.toString(), ...n, children: [i && e(x, { as: "span", "aria-hidden": !0, children: i }), e(G, { textColor: "neutral800", children: e(q, { children: c }) })] }));
+export {
+  pe as SingleSelect,
+  Y as SingleSelectInput,
+  me as SingleSelectOption
+};

package/dist/Select/index.cjs

@@ -0,0 +1 @@
+"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/Select/index.js

@@ -0,0 +1,19 @@
+import { MultiSelectNested as o } from "./MultiSelectNested.js";
+import { MultiSelect as l, MultiSelectGroup as p, MultiSelectOption as i } from "./MultiSelect.js";
+import { SingleSelect as c, SingleSelectOption as f } from "./SingleSelect.js";
+import { Select as x } from "./Select.js";
+import { Option as n } from "./Option.js";
+import { OptGroup as O } from "./OptGroup.js";
+import { SelectList as s } from "./SelectList.js";
+export {
+  l as MultiSelect,
+  p as MultiSelectGroup,
+  o as MultiSelectNested,
+  i as MultiSelectOption,
+  O as OptGroup,
+  n as Option,
+  x as Select,
+  s as SelectList,
+  c as SingleSelect,
+  f as SingleSelectOption
+};

package/dist/SimpleMenu/SimpleMenu.cjs

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

package/dist/SimpleMenu/SimpleMenu.js

@@ -0,0 +1,198 @@
+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 { CarretDown as G } from "@strapi/icons";
+import { useCallbackRef as $ } from "@strapi/ui-primitives";
+import e from "prop-types";
+import { NavLink as J } from "react-router-dom";
+import y from "styled-components";
+import { getOptionStyle as b } from "./utils.js";
+import { KeyboardKeys as i } from "../helpers/keyboardKeys.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";
+import { Flex as ee } from "../Flex/Flex.js";
+const ne = y.button`
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  ${b}
+`, oe = y(J)`
+  text-decoration: none;
+  ${b}
+`, te = y(X)`
+  /* 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}
+`, re = y.span`
+  display: flex;
+  align-items: center;
+  svg {
+    height: 4px;
+    width: 6px;
+  }
+`, ie = y(L)`
+  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[3]}`};
+`, 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",
+    ...x
+  }, p = (g) => {
+    (g.key === i.SPACE || g.key === i.ENTER) && h();
+  };
+  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 }) }) });
+};
+A.defaultProps = {
+  as: void 0,
+  href: void 0,
+  isFocused: !1,
+  onClick() {
+  },
+  to: void 0
+};
+A.propTypes = {
+  as: e.elementType,
+  children: e.node.isRequired,
+  href: e.string,
+  isFocused: e.bool,
+  onClick: e.func,
+  to: e.string
+};
+const k = ({
+  label: o,
+  children: h,
+  id: s,
+  as: c,
+  onOpen: a = () => {
+  },
+  onClose: x = () => {
+  },
+  size: d,
+  popoverPlacement: l,
+  onReachEnd: p,
+  ...g
+}) => {
+  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 = v.findIndex((r) => r.props.children === o);
+      n !== -1 && I(n);
+    }
+  }, [o]);
+  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 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.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(), m((r) => !r);
+  }, W = () => {
+    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: _ })
+        }
+      )
+    ] })
+  );
+};
+k.defaultProps = {
+  as: void 0
+};
+k.displayName = "SimpleMenu";
+k.defaultProps = {
+  id: void 0,
+  onOpen: void 0,
+  onClose: void 0,
+  onReachEnd: void 0,
+  popoverPlacement: "bottom-start",
+  size: "M"
+};
+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(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 {
+  A as MenuItem,
+  k as SimpleMenu
+};

package/dist/SimpleMenu/index.cjs

@@ -0,0 +1 @@
+"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/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/SimpleMenu/utils.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,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/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/Stack/Stack.cjs

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