@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/dist/v2/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"),u=require("./Menu.cjs");exports.MenuItem=e.MenuItem;exports.SimpleMenu=e.SimpleMenu;exports.Menu=u;

package/dist/v2/SimpleMenu/index.js

@@ -1,5 +1,7 @@
-import { MenuItem as n, SimpleMenu as o } from "./SimpleMenu.js";
+import { MenuItem as r, SimpleMenu as p } from "./SimpleMenu.js";
+import * as e from "./Menu.js";
 export {
-  n as MenuItem,
-  o as SimpleMenu
+  e as Menu,
+  r as MenuItem,
+  p as SimpleMenu
 };

package/dist/v2/SubNav/SubNav.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),i=require("prop-types"),u=require("styled-components"),d=require("../../Grid/Grid.cjs");require("../../Grid/GridItem.cjs");const t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},l=t(s),c=t(i),n=t(u),r=`${232/16}rem`,p=n.default(d.Grid)`
-  width: ${r};
-  background: ${({theme:e})=>e.colors.neutral100};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("styled-components"),u=require("../../Grid/Grid.cjs"),a=t=>t&&t.__esModule?t:{default:t},i=a(s),e=`${232/16}rem`,n=i.default(u.Grid)`
+  width: ${e};
+  background: ${({theme:t})=>t.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
+  border-right: 1px solid ${({theme:t})=>t.colors.neutral200};
   z-index: 1;
-`,o=({ariaLabel:e,...a})=>l.default.createElement(p,{"aria-label":e,as:"nav",...a});o.propTypes={ariaLabel:c.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;
+`,l=({ariaLabel:t,...r})=>o.jsx(n,{"aria-label":t,as:"nav",...r});exports.SubNav=l;exports.subNavWidth=e;

package/dist/v2/SubNav/SubNav.js

@@ -1,22 +1,17 @@
-import t from "react";
-import e from "prop-types";
+import { jsx as t } from "react/jsx-runtime";
 import i from "styled-components";
 import { Grid as a } from "../../Grid/Grid.js";
-import "../../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = i(a)`
-  width: ${p};
-  background: ${({ theme: r }) => r.colors.neutral100};
+const e = `${232 / 16}rem`, s = i(a)`
+  width: ${e};
+  background: ${({ theme: o }) => o.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-right: 1px solid ${({ theme: o }) => o.colors.neutral200};
   z-index: 1;
-`, l = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t.createElement(s, { "aria-label": r, as: "nav", ...o });
-l.propTypes = {
-  ariaLabel: e.string.isRequired
-};
+`, d = ({ ariaLabel: o, ...r }) => t(s, { "aria-label": o, as: "nav", ...r });
 export {
-  l as SubNav,
-  p as subNavWidth
+  d as SubNav,
+  e as subNavWidth
 };

package/dist/v2/SubNav/SubNavHeader.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("@strapi/icons"),I=require("prop-types"),R=require("styled-components"),s=require("../../Box/Box.cjs"),_=require("../../Divider/Divider.cjs"),D=require("../../Flex/Flex.cjs"),P=require("../../helpers/keyboardKeys.cjs"),k=require("../../hooks/useId.cjs"),F=require("../../hooks/usePrevious.cjs"),K=require("../../IconButton/IconButton.cjs"),L=require("../../Searchbar/Searchbar.cjs"),w=require("../../Searchbar/SearchForm.cjs"),O=require("../../Typography/Typography.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(I),H=d(R),h=H.default(_.Divider)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),v=require("@strapi/icons"),C=require("styled-components"),R=require("../../helpers/keyboardKeys.cjs"),T=require("../../hooks/useId.cjs"),D=require("../../hooks/usePrevious.cjs"),I=require("../../Divider/Divider.cjs"),a=require("../../Box/Box.cjs"),K=require("../../Searchbar/SearchForm.cjs"),_=require("../../Searchbar/Searchbar.cjs"),k=require("../../Flex/Flex.cjs"),w=require("../../Typography/Typography.cjs"),F=require("../../IconButton/IconButton.cjs"),O=r=>r&&r.__esModule?r:{default:r},P=O(C),l=P.default(I.Divider)`
   width: ${24/16}rem;
-  background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=F.usePrevious(n),q=k.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===P.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(w.SearchForm,null,e.default.createElement(L.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(O.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(K.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(C.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;
+  background-color: ${({theme:r})=>r.colors.neutral200};
+`,E=({as:r="h2",label:f,searchLabel:u="",searchable:h=!1,onChange:p=()=>{},value:g="",onClear:x=()=>{},onSubmit:S=()=>{},id:y})=>{const[t,c]=s.useState(!1),d=D.usePrevious(t),b=T.useId(y),o=s.useRef(void 0),i=s.useRef(void 0);s.useEffect(()=>{t&&o.current&&o.current.focus(),d&&!t&&i.current&&i.current.focus()},[t,d]);const j=()=>{c(n=>!n)},q=n=>{x(n),o.current.focus()},B=n=>{n.relatedTarget?.id!==b&&c(!1)},m=n=>{n.key===R.KeyboardKeys.ESCAPE&&c(!1)};return t?e.jsxs(a.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4,children:[e.jsx(K.SearchForm,{children:e.jsx(_.Searchbar,{name:"searchbar",value:g,onChange:p,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:m,ref:o,onBlur:B,onClear:q,onSubmit:S,clearLabel:"Clear",size:"S",children:u})}),e.jsx(a.Box,{paddingLeft:2,paddingTop:4,children:e.jsx(l,{})})]}):e.jsxs(a.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4,children:[e.jsxs(k.Flex,{justifyContent:"space-between",alignItems:"flex-start",children:[e.jsx(w.Typography,{variant:"beta",as:r,children:f}),h&&e.jsx(F.IconButton,{ref:i,onClick:j,label:u,icon:e.jsx(v.Search,{})})]}),e.jsx(a.Box,{paddingTop:4,children:e.jsx(l,{})})]})};exports.SubNavHeader=E;

package/dist/v2/SubNav/SubNavHeader.js

@@ -1,76 +1,39 @@
-import e, { useState as L, useRef as p, useEffect as w } from "react";
-import { Search as x } from "@strapi/icons";
-import r from "prop-types";
-import D from "styled-components";
-import { Box as n } from "../../Box/Box.js";
-import { Divider as I } from "../../Divider/Divider.js";
-import { Flex as K } from "../../Flex/Flex.js";
-import { KeyboardKeys as P } from "../../helpers/keyboardKeys.js";
-import { useId as k } from "../../hooks/useId.js";
-import { usePrevious as O } from "../../hooks/usePrevious.js";
-import { IconButton as F } from "../../IconButton/IconButton.js";
-import { Searchbar as _ } from "../../Searchbar/Searchbar.js";
-import { SearchForm as $ } from "../../Searchbar/SearchForm.js";
-import { Typography as j } from "../../Typography/Typography.js";
-const d = D(I)`
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as p, useEffect as w } from "react";
+import { Search as D } from "@strapi/icons";
+import I from "styled-components";
+import { KeyboardKeys as K } from "../../helpers/keyboardKeys.js";
+import { useId as j } from "../../hooks/useId.js";
+import { usePrevious as k } from "../../hooks/usePrevious.js";
+import { Divider as E } from "../../Divider/Divider.js";
+import { Box as t } from "../../Box/Box.js";
+import { SearchForm as L } from "../../Searchbar/SearchForm.js";
+import { Searchbar as O } from "../../Searchbar/Searchbar.js";
+import { Flex as F } from "../../Flex/Flex.js";
+import { Typography as P } from "../../Typography/Typography.js";
+import { IconButton as $ } from "../../IconButton/IconButton.js";
+const l = I(E)`
   width: ${24 / 16}rem;
-  background-color: ${({ theme: l }) => l.colors.neutral200};
-`, f = ({ as: l, label: u, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
-  const [o, i] = L(!1), m = O(o), C = k(y), a = p(), c = p();
+  background-color: ${({ theme: i }) => i.colors.neutral200};
+`, Z = ({ as: i = "h2", label: m, searchLabel: s = "", searchable: u = !1, onChange: h = () => {
+}, value: g = "", onClear: S = () => {
+}, onSubmit: b = () => {
+}, id: y }) => {
+  const [o, a] = R(!1), f = k(o), B = j(y), n = p(void 0), d = p(void 0);
   w(() => {
-    o && a.current && a.current.focus(), m && !o && c.current && c.current.focus();
-  }, [o, m]);
-  const v = () => {
-    i((t) => !t);
-  }, B = (t) => {
-    E(t), a.current.focus();
-  }, T = (t) => {
-    t.relatedTarget?.id !== C && i(!1);
-  }, R = (t) => {
-    t.key === P.ESCAPE && i(!1);
+    o && n.current && n.current.focus(), f && !o && d.current && d.current.focus();
+  }, [o, f]);
+  const C = () => {
+    a((r) => !r);
+  }, v = (r) => {
+    S(r), n.current.focus();
+  }, x = (r) => {
+    r.relatedTarget?.id !== B && a(!1);
+  }, T = (r) => {
+    r.key === K.ESCAPE && a(!1);
   };
-  return o ? /* @__PURE__ */ e.createElement(n, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement($, null, /* @__PURE__ */ e.createElement(
-    _,
-    {
-      name: "searchbar",
-      value: b,
-      onChange: h,
-      placeholder: "e.g: strapi-plugin-abcd",
-      onKeyDown: R,
-      ref: a,
-      onBlur: T,
-      onClear: B,
-      onSubmit: S,
-      clearLabel: "Clear",
-      size: "S"
-    },
-    s
-  )), /* @__PURE__ */ e.createElement(n, { paddingLeft: 2, paddingTop: 4 }, /* @__PURE__ */ e.createElement(d, null))) : /* @__PURE__ */ e.createElement(n, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement(K, { justifyContent: "space-between", alignItems: "flex-start" }, /* @__PURE__ */ e.createElement(j, { variant: "beta", as: l }, u), g && /* @__PURE__ */ e.createElement(F, { ref: c, onClick: v, label: s, icon: /* @__PURE__ */ e.createElement(x, null) })), /* @__PURE__ */ e.createElement(n, { paddingTop: 4 }, /* @__PURE__ */ e.createElement(d, null)));
-};
-f.defaultProps = {
-  as: "h2",
-  searchable: !1,
-  onChange() {
-  },
-  onClear() {
-  },
-  onSubmit() {
-  },
-  value: "",
-  searchLabel: "",
-  id: void 0
-};
-f.propTypes = {
-  as: r.string,
-  id: r.string,
-  label: r.string.isRequired,
-  onChange: r.func,
-  onClear: r.func,
-  onSubmit: r.func,
-  searchLabel: r.string,
-  searchable: r.bool,
-  value: r.string
+  return o ? c(t, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [e(L, { children: e(O, { name: "searchbar", value: g, onChange: h, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: T, ref: n, onBlur: x, onClear: v, onSubmit: b, clearLabel: "Clear", size: "S", children: s }) }), e(t, { paddingLeft: 2, paddingTop: 4, children: e(l, {}) })] }) : c(t, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [c(F, { justifyContent: "space-between", alignItems: "flex-start", children: [e(P, { variant: "beta", as: i, children: m }), u && e($, { ref: d, onClick: C, label: s, icon: e(D, {}) })] }), e(t, { paddingTop: 4, children: e(l, {}) })] });
 };
 export {
-  f as SubNavHeader
+  Z as SubNavHeader
 };

package/dist/v2/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("@strapi/icons"),h=require("prop-types"),x=require("styled-components"),B=require("../../BaseLink/BaseLink.cjs"),a=require("../../Box/Box.cjs"),i=require("../../Flex/Flex.cjs"),c=require("../../Typography/Typography.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(m),o=n(h),s=n(x),$=s.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),x=require("@strapi/icons"),y=require("styled-components"),t=require("../../Box/Box.cjs"),n=require("../../Typography/Typography.cjs"),i=require("../../Flex/Flex.cjs"),h=require("../../BaseLink/BaseLink.cjs"),a=e=>e&&e.__esModule?e:{default:e},$=a(g),s=a(y),j=s.default(t.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15,7 +15,7 @@
       svg > * {
         fill: ${e.colors.primary700};
       }
-      ${c.Typography} {
+      ${n.Typography} {
         color: ${e.colors.primary700};
         font-weight: 500;
       }
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,u=s.default(b.Dot)`
+`,l=s.default(x.Dot)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
-    fill: ${({theme:e,$active:l})=>l?e.colors.primary600:e.colors.neutral600};
+    fill: ${({theme:e,$active:o})=>o?e.colors.primary600:e.colors.neutral600};
   }
 `,v=s.default.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,r=t.default.forwardRef(({children:e,icon:l,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement($,{as:p,icon:l,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,l?t.default.createElement(v,null,l):t.default.createElement(u,null),t.default.createElement(a.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(a.Box,{as:i.Flex,paddingRight:4},t.default.createElement(u,{$active:!0}))));r.displayName="SubNavLink";r.defaultProps={as:B.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};r.propTypes={as:o.default.elementType,children:o.default.node.isRequired,icon:o.default.element,isSubSectionChild:o.default.bool,withBullet:o.default.bool};exports.SubNavLink=r;
+`,b=$.default.forwardRef(({children:e,icon:o=null,withBullet:c=!1,as:u=h.BaseLink,isSubSectionChild:d=!1,...p},f)=>r.jsxs(j,{as:u,icon:o,background:"neutral100",paddingLeft:d?9:7,paddingBottom:2,paddingTop:2,ref:f,...p,children:[r.jsxs(i.Flex,{children:[o?r.jsx(v,{children:o}):r.jsx(l,{}),r.jsx(t.Box,{paddingLeft:2,children:r.jsx(n.Typography,{as:"span",children:e})})]}),c&&r.jsx(t.Box,{as:i.Flex,paddingRight:4,children:r.jsx(l,{$active:!0})})]}));exports.SubNavLink=b;

package/dist/v2/SubNav/SubNavLink.js

@@ -1,30 +1,30 @@
-import r from "react";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import u from "react";
 import { Dot as g } from "@strapi/icons";
-import t from "prop-types";
-import i from "styled-components";
-import { BaseLink as y } from "../../BaseLink/BaseLink.js";
-import { Box as l } from "../../Box/Box.js";
-import { Flex as a } from "../../Flex/Flex.js";
-import { Typography as p } from "../../Typography/Typography.js";
-const $ = i(l)`
+import e from "styled-components";
+import { Box as t } from "../../Box/Box.js";
+import { Typography as s } from "../../Typography/Typography.js";
+import { Flex as n } from "../../Flex/Flex.js";
+import { BaseLink as $ } from "../../BaseLink/BaseLink.js";
+const h = e(t)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-decoration: none;
-  color: ${({ theme: e }) => e.colors.neutral800};
+  color: ${({ theme: r }) => r.colors.neutral800};
   svg > * {
-    fill: ${({ theme: e }) => e.colors.neutral600};
+    fill: ${({ theme: r }) => r.colors.neutral600};
   }
 
   &.active {
-    ${({ theme: e }) => `
-      background-color: ${e.colors.primary100};
-      border-right: 2px solid ${e.colors.primary600};
+    ${({ theme: r }) => `
+      background-color: ${r.colors.primary100};
+      border-right: 2px solid ${r.colors.primary600};
       svg > * {
-        fill: ${e.colors.primary700};
+        fill: ${r.colors.primary700};
       }
-      ${p} {
-        color: ${e.colors.primary700};
+      ${s} {
+        color: ${r.colors.primary700};
         font-weight: 500;
       }
       `}
@@ -33,46 +33,18 @@ const $ = i(l)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, s = i(g)`
+`, a = e(g)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: e, $active: o }) => o ? e.colors.primary600 : e.colors.neutral600};
+    fill: ${({ theme: r, $active: i }) => i ? r.colors.primary600 : r.colors.neutral600};
   }
-`, b = i.div`
+`, y = e.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, n = r.forwardRef(({ children: e, icon: o, withBullet: c, as: m, isSubSectionChild: d, ...u }, f) => /* @__PURE__ */ r.createElement(
-  $,
-  {
-    as: m,
-    icon: o,
-    background: "neutral100",
-    paddingLeft: d ? 9 : 7,
-    paddingBottom: 2,
-    paddingTop: 2,
-    ref: f,
-    ...u
-  },
-  /* @__PURE__ */ r.createElement(a, null, o ? /* @__PURE__ */ r.createElement(b, null, o) : /* @__PURE__ */ r.createElement(s, null), /* @__PURE__ */ r.createElement(l, { paddingLeft: 2 }, /* @__PURE__ */ r.createElement(p, { as: "span" }, e))),
-  c && /* @__PURE__ */ r.createElement(l, { as: a, paddingRight: 4 }, /* @__PURE__ */ r.createElement(s, { $active: !0 }))
-));
-n.displayName = "SubNavLink";
-n.defaultProps = {
-  as: y,
-  icon: null,
-  isSubSectionChild: !1,
-  withBullet: !1
-};
-n.propTypes = {
-  as: t.elementType,
-  children: t.node.isRequired,
-  icon: t.element,
-  isSubSectionChild: t.bool,
-  withBullet: t.bool
-};
+`, R = u.forwardRef(({ children: r, icon: i = null, withBullet: c = !1, as: p = $, isSubSectionChild: d = !1, ...f }, m) => l(h, { as: p, icon: i, background: "neutral100", paddingLeft: d ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: m, ...f, children: [l(n, { children: [i ? o(y, { children: i }) : o(a, {}), o(t, { paddingLeft: 2, children: o(s, { as: "span", children: r }) })] }), c && o(t, { as: n, paddingRight: 4, children: o(a, { $active: !0 }) })] }));
 export {
-  n as SubNavLink
+  R as SubNavLink
 };

package/dist/v2/SubNav/SubNavLinkSection.cjs

@@ -1,19 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("@strapi/icons"),h=require("prop-types"),x=require("styled-components"),l=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../hooks/useId.cjs"),k=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(h),i=d(x),q=i.default(l.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),x=require("@strapi/icons"),h=require("styled-components"),g=require("../../hooks/useId.cjs"),i=require("../../Box/Box.cjs"),f=require("../../Flex/Flex.cjs"),j=require("../../Typography/Typography.cjs"),y=e=>e&&e.__esModule?e:{default:e},o=y(h),S=o.default(i.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,E=i.default.button`
+`,b=o.default.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`,v=i.default.div`
+`,m=o.default.div`
   display: flex;
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=S.useId(p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(q,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(E,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(v,{rotated:n},t.default.createElement(m.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(k.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={id:void 0};s.propTypes={children:r.default.node.isRequired,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;
+`,k=({label:e,children:a,id:l})=>{const[n,c]=d.useState(!0),s=g.useId(l),u=()=>{c(r=>!r)};return t.jsxs(i.Box,{children:[t.jsx(S,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsx(f.Flex,{justifyContent:"space-between",children:t.jsxs(b,{onClick:u,"aria-expanded":n,"aria-controls":s,children:[t.jsx(m,{rotated:n,children:t.jsx(x.CarretDown,{"aria-hidden":!0})}),t.jsx(i.Box,{paddingLeft:2,children:t.jsx(j.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800",children:e})})]})})}),n&&t.jsx("ul",{id:s,children:d.Children.map(a,(r,p)=>t.jsx("li",{children:r},p))})]})};exports.SubNavLinkSection=k;