@strapi/design-system 1.6.1 → 1.6.2

package/dist/ToggleCheckbox/ToggleCheckbox.js

@@ -1,35 +1,35 @@
-import r from "react";
+import t from "react";
 import n from "prop-types";
-import i from "styled-components";
-import { sizes as v } from "../themes/sizes.js";
-import { inputFocusStyle as k } from "../themes/utils.js";
-import { Typography as d } from "../Typography/Typography.js";
-import { VisuallyHidden as R } from "../VisuallyHidden/VisuallyHidden.js";
-import { Box as E } from "../Box/Box.js";
+import l from "styled-components";
+import { sizes as E } from "../themes/sizes.js";
+import { inputFocusStyle as T } from "../themes/utils.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { VisuallyHidden as L } from "../VisuallyHidden/VisuallyHidden.js";
+import { Box as q } from "../Box/Box.js";
 import "../Field/Field.js";
 import "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { useField as T } from "../Field/FieldContext.js";
+import { useField as z } from "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as $ } from "../Flex/Flex.js";
-const L = i.label`
+import { Flex as W } from "../Flex/Flex.js";
+const S = l.label`
   position: relative;
   display: inline-block;
   z-index: 0;
   width: 100%;
-`, q = i(E)`
+`, j = l(q)`
   cursor: ${({ disabled: e }) => e ? "not-allowed" : void 0};
   // Masks the background of each value
   overflow: hidden;
   flex-wrap: wrap;
 
-  ${k()}
-`, f = i($).attrs({
+  ${T()}
+`, m = l(W).attrs({
   hasRadius: !0
 })`
-  background-color: ${({ theme: e, checked: l, disabled: a }) => l ? a ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
+  background-color: ${({ theme: e, checked: a, disabled: i }) => a ? i ? e.colors.neutral200 : e.colors.neutral0 : "transparent"};
   border: 1px solid
-    ${({ theme: e, checked: l, disabled: a }) => l && l !== null ? a ? e.colors.neutral300 : e.colors.neutral200 : a ? e.colors.neutral150 : e.colors.neutral100};
+    ${({ theme: e, checked: a, disabled: i }) => a && a !== null ? i ? e.colors.neutral300 : e.colors.neutral200 : i ? e.colors.neutral150 : e.colors.neutral100};
   position: relative;
   user-select: none;
   z-index: 2;
@@ -41,7 +41,7 @@ const L = i.label`
   */
   padding-top: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
   padding-bottom: ${({ size: e }) => `${e === "S" ? "2px" : "6px"}`};
-`, z = i.input`
+`, B = l.input`
   height: 100%;
   left: 0;
   opacity: 0;
@@ -49,14 +49,15 @@ const L = i.label`
   top: 0;
   z-index: 1;
   width: 100%;
-`, u = r.forwardRef(
-  ({ size: e, onLabel: l, offLabel: a, children: c, checked: t, disabled: o, onChange: m, ...g }, h) => {
-    const { name: b, required: x } = T(), s = "neutral600";
-    let y = !t && t !== null ? "danger700" : s, C = t ? "primary600" : s;
-    const w = (p) => {
-      o || m(p);
+`, s = t.forwardRef(
+  ({ size: e, onLabel: a, offLabel: i, children: g, checked: r, disabled: o, onChange: h, ...b }, x) => {
+    const { error: y, hint: C, id: d, name: w, required: v } = z(), f = "neutral600";
+    let $ = !r && r !== null ? "danger700" : f, k = r ? "primary600" : f;
+    const R = (u) => {
+      o || h(u);
     };
-    return /* @__PURE__ */ r.createElement(L, null, /* @__PURE__ */ r.createElement(R, null, c), /* @__PURE__ */ r.createElement(q, {
+    let p;
+    return y ? p = `${d}-error` : C && (p = `${d}-hint`), /* @__PURE__ */ t.createElement(S, null, /* @__PURE__ */ t.createElement(L, null, g), /* @__PURE__ */ t.createElement(j, {
       hasRadius: !0,
       disabled: o,
       padding: 1,
@@ -65,62 +66,63 @@ const L = i.label`
       borderStyle: "solid",
       borderWidth: "1px",
       borderColor: "neutral200"
-    }, /* @__PURE__ */ r.createElement(f, {
+    }, /* @__PURE__ */ t.createElement(m, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: t === null ? !1 : !t,
+      checked: r === null ? !1 : !r,
       disabled: o
-    }, /* @__PURE__ */ r.createElement(d, {
+    }, /* @__PURE__ */ t.createElement(c, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: o ? "neutral700" : y
-    }, a)), /* @__PURE__ */ r.createElement(f, {
+      textColor: o ? "neutral700" : $
+    }, i)), /* @__PURE__ */ t.createElement(m, {
       size: e,
       paddingLeft: 3,
       paddingRight: 3,
       justifyContent: "center",
       alignItems: "center",
       "aria-hidden": !0,
-      checked: t === null ? !1 : t,
+      checked: r === null ? !1 : r,
       disabled: o
-    }, /* @__PURE__ */ r.createElement(d, {
+    }, /* @__PURE__ */ t.createElement(c, {
       variant: "pi",
       fontWeight: "bold",
       textTransform: "uppercase",
-      textColor: o ? "neutral700" : C
-    }, l)), /* @__PURE__ */ r.createElement(z, {
+      textColor: o ? "neutral700" : k
+    }, a)), /* @__PURE__ */ t.createElement(B, {
       type: "checkbox",
       "aria-disabled": o,
-      onChange: (p) => w(p),
-      name: b,
-      ref: h,
-      "aria-required": x,
-      ...g,
-      checked: !(t === null || !t)
+      "aria-describedby": p,
+      onChange: (u) => R(u),
+      name: w,
+      ref: x,
+      "aria-required": v,
+      ...b,
+      checked: !(r === null || !r)
     })));
   }
 );
-u.displayName = "ToggleCheckbox";
-u.defaultProps = {
+s.displayName = "ToggleCheckbox";
+s.defaultProps = {
   disabled: !1,
   checked: !1,
   onChange: void 0,
   size: "M"
 };
-u.propTypes = {
+s.propTypes = {
   checked: n.bool,
   children: n.string.isRequired,
   disabled: n.bool,
   offLabel: n.string.isRequired,
   onChange: n.func,
   onLabel: n.string.isRequired,
-  size: n.oneOf(Object.keys(v.input))
+  size: n.oneOf(Object.keys(E.input))
 };
 export {
-  u as ToggleCheckbox
+  s as ToggleCheckbox
 };

package/dist/ToggleInput/ToggleInput.cjs

@@ -3,4 +3,4 @@
 `,L=s.default(S.TextButton)`
   align-self: flex-end;
   margin-left: auto;
-`,r=({disabled:t,size:c,error:f,hint:g,label:i,name:p,labelAction:F,required:b,id:q,onClear:o,clearLabel:n,checked:a,...j})=>{const u=k.useId("toggleinput",q);return l.default.createElement(B,{name:p,hint:g,error:f,id:u,required:b},l.default.createElement(C.Stack,{spacing:1},l.default.createElement(I.Flex,null,l.default.createElement(h.FieldLabel,{action:F},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:c,checked:a,disabled:t,...j},i),l.default.createElement(_.FieldHint,null),l.default.createElement(v.FieldError,null)))};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(y.sizes.input))};exports.ToggleInput=r;
+`,r=({disabled:t,size:c,error:f,hint:g,label:i,name:p,labelAction:F,required:b,id:q,onClear:o,clearLabel:n,checked:a,...j})=>{const u=k.useId(q);return l.default.createElement(B,{name:p,hint:g,error:f,id:u,required:b},l.default.createElement(C.Stack,{spacing:1},l.default.createElement(I.Flex,null,l.default.createElement(h.FieldLabel,{action:F},i),n&&o&&a!==null&&!t&&l.default.createElement(L,{onClick:o},n)),l.default.createElement(z.ToggleCheckbox,{id:u,size:c,checked:a,disabled:t,...j},i),l.default.createElement(_.FieldHint,null),l.default.createElement(v.FieldError,null)))};r.displayName="ToggleInput";r.defaultProps={checked:!1,clearLabel:void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:"",labelAction:void 0,name:"",onClear:void 0,required:!1,size:"M"};r.propTypes={checked:e.default.bool,clearLabel:e.default.string,disabled:e.default.bool,error:e.default.string,hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.string,label:e.default.string,labelAction:e.default.node,name:e.default.string,onClear:e.default.func,required:e.default.bool,size:e.default.oneOf(Object.keys(y.sizes.input))};exports.ToggleInput=r;

package/dist/ToggleInput/ToggleInput.js

@@ -1,5 +1,5 @@
 import r from "react";
-import p from "styled-components";
+import d from "styled-components";
 import e from "prop-types";
 import { sizes as x } from "../themes/sizes.js";
 import { useId as y } from "../helpers/useId.js";
@@ -14,42 +14,42 @@ import { Stack as k } from "../Stack/Stack.js";
 import { Flex as C } from "../Flex/Flex.js";
 import { TextButton as I } from "../TextButton/TextButton.js";
 import { ToggleCheckbox as O } from "../ToggleCheckbox/ToggleCheckbox.js";
-const z = p(T)`
+const z = d(T)`
   max-width: 320px;
-`, q = p(I)`
+`, q = d(I)`
   align-self: flex-end;
   margin-left: auto;
 `, o = ({
   disabled: t,
-  size: d,
+  size: p,
   error: s,
   hint: c,
   label: i,
   name: f,
-  labelAction: g,
-  required: u,
+  labelAction: u,
+  required: g,
   id: b,
   onClear: l,
   clearLabel: n,
   checked: m,
   ...E
 }) => {
-  const a = y("toggleinput", b);
+  const a = y(b);
   return /* @__PURE__ */ r.createElement(z, {
     name: f,
     hint: c,
     error: s,
     id: a,
-    required: u
+    required: g
   }, /* @__PURE__ */ r.createElement(k, {
     spacing: 1
   }, /* @__PURE__ */ r.createElement(C, null, /* @__PURE__ */ r.createElement(v, {
-    action: g
+    action: u
   }, i), n && l && m !== null && !t && /* @__PURE__ */ r.createElement(q, {
     onClick: l
   }, n)), /* @__PURE__ */ r.createElement(O, {
     id: a,
-    size: d,
+    size: p,
     checked: m,
     disabled: t,
     ...E

package/dist/Tooltip/Tooltip.cjs

@@ -1,6 +1,5 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(m),o=r(q),I=r(v),R=I.default(j.Box)`
-  position: absolute;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),q=require("prop-types"),v=require("styled-components"),j=require("../Box/Box.cjs"),x=require("../Typography/Typography.cjs"),_=require("../Portal/Portal.cjs"),H=require("./hooks/useTooltipHandlers.cjs"),P=require("./hooks/useTooltipLayout.cjs"),n=require("../helpers/useId.cjs"),E=require("../VisuallyHidden/VisuallyHidden.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(m),o=i(q),I=i(v),R=I.default(j.Box)`
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({visible:e})=>e?"revert":"none"};
-`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId("tooltip",c),y=n.useId("description"),{visible:i,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(i,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:i,...f},i&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;
+`,a=({children:e,label:d,description:l,delay:u,position:p,id:c,...f})=>{const s=n.useId(c),y=n.useId(),{visible:r,...g}=H.useTooltipHandlers(u),{tooltipWrapperRef:T,toggleSourceRef:b}=P.useTooltipLayout(r,p),h=t.default.cloneElement(e,{tabIndex:0,"aria-labelledby":d?s:void 0,"aria-describedby":l?s:void 0,...g});return t.default.createElement(t.default.Fragment,null,t.default.createElement(_.Portal,null,t.default.createElement(R,{id:s,background:"neutral900",hasRadius:!0,padding:2,role:"tooltip",ref:T,visible:r,position:"absolute",...f},r&&t.default.createElement(E.VisuallyHidden,{id:y},l),t.default.createElement(x.Typography,{as:"p",variant:"pi",fontWeight:"bold",textColor:"neutral0"},d||l))),t.default.createElement("span",{ref:b},h))};a.defaultProps={delay:500,id:void 0,position:"top",label:void 0,description:void 0};a.propTypes={children:o.default.node.isRequired,delay:o.default.number,description:o.default.string,id:o.default.string,label:o.default.string,position:o.default.oneOf(["top","left","bottom","right"])};exports.Tooltip=a;

package/dist/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
-import o from "react";
-import e from "prop-types";
+import e from "react";
+import o from "prop-types";
 import v from "styled-components";
 import { Box as x } from "../Box/Box.js";
 import { Typography as E } from "../Typography/Typography.js";
@@ -9,34 +9,34 @@ import { useTooltipLayout as R } from "./hooks/useTooltipLayout.js";
 import { useId as p } from "../helpers/useId.js";
 import { VisuallyHidden as I } from "../VisuallyHidden/VisuallyHidden.js";
 const H = v(x)`
-  position: absolute;
   /* z-index exist because of its position inside Modals */
   z-index: 4;
   display: ${({ visible: t }) => t ? "revert" : "none"};
-`, a = ({ children: t, label: n, description: i, delay: d, position: s, id: m, ...c }) => {
-  const r = p("tooltip", m), f = p("description"), { visible: l, ...u } = h(d), { tooltipWrapperRef: b, toggleSourceRef: y } = R(l, s), g = o.cloneElement(t, {
+`, a = ({ children: t, label: n, description: r, delay: d, position: s, id: m, ...c }) => {
+  const i = p(m), f = p(), { visible: l, ...u } = h(d), { tooltipWrapperRef: b, toggleSourceRef: y } = R(l, s), g = e.cloneElement(t, {
     tabIndex: 0,
-    "aria-labelledby": n ? r : void 0,
-    "aria-describedby": i ? r : void 0,
+    "aria-labelledby": n ? i : void 0,
+    "aria-describedby": r ? i : void 0,
     ...u
   });
-  return /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(T, null, /* @__PURE__ */ o.createElement(H, {
-    id: r,
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(T, null, /* @__PURE__ */ e.createElement(H, {
+    id: i,
     background: "neutral900",
     hasRadius: !0,
     padding: 2,
     role: "tooltip",
     ref: b,
     visible: l,
+    position: "absolute",
     ...c
-  }, l && /* @__PURE__ */ o.createElement(I, {
+  }, l && /* @__PURE__ */ e.createElement(I, {
     id: f
-  }, i), /* @__PURE__ */ o.createElement(E, {
+  }, r), /* @__PURE__ */ e.createElement(E, {
     as: "p",
     variant: "pi",
     fontWeight: "bold",
     textColor: "neutral0"
-  }, n || i))), /* @__PURE__ */ o.createElement("span", {
+  }, n || r))), /* @__PURE__ */ e.createElement("span", {
     ref: y
   }, g));
 };
@@ -48,12 +48,12 @@ a.defaultProps = {
   description: void 0
 };
 a.propTypes = {
-  children: e.node.isRequired,
-  delay: e.number,
-  description: e.string,
-  id: e.string,
-  label: e.string,
-  position: e.oneOf(["top", "left", "bottom", "right"])
+  children: o.node.isRequired,
+  delay: o.number,
+  description: o.string,
+  id: o.string,
+  label: o.string,
+  position: o.oneOf(["top", "left", "bottom", "right"])
 };
 export {
   a as Tooltip

package/dist/helpers/deprecations.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r="[@strapi/design-system]:",i=n=>{const e=n;let t=!1;if(typeof e!="function")throw new TypeError(`${r} once requires a function parameter`);return(...o)=>{t||(e(...o),t=!0)}};exports.once=i;exports.prefix=r;

package/dist/helpers/deprecations.js

@@ -0,0 +1,13 @@
+const o = "[@strapi/design-system]:", c = (t) => {
+  const e = t;
+  let r = !1;
+  if (typeof e != "function")
+    throw new TypeError(`${o} once requires a function parameter`);
+  return (...n) => {
+    r || (e(...n), r = !0);
+  };
+};
+export {
+  c as once,
+  o as prefix
+};

package/dist/helpers/useId.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),u=require("./genId.cjs"),s=(e,t)=>r.useRef(t||`${e}-${u.genId()}`).current;exports.useId=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=c(t),r=n.default["useId".toString()]||(()=>{});let a=0;const d=e=>{const[u,o]=t.useState(r());return t.useLayoutEffect(()=>{e||o(s=>s??String(a++))},[e]),e?.toString()??(u||"")};exports.useId=d;

package/dist/helpers/useId.js

@@ -1,6 +1,13 @@
-import { useRef as o } from "react";
-import { genId as t } from "./genId.js";
-const i = (e, r) => o(r || `${e}-${t()}`).current;
+import s, { useState as n, useLayoutEffect as r } from "react";
+const c = s["useId".toString()] || (() => {
+});
+let d = 0;
+const S = (t) => {
+  const [e, o] = n(c());
+  return r(() => {
+    t || o((u) => u ?? String(d++));
+  }, [t]), t?.toString() ?? (e || "");
+};
 export {
-  i as useId
+  S as useId
 };

package/dist/hooks/useIntersection.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const g=require("react"),d=require("@radix-ui/react-use-callback-ref"),v=(e,i,{selectorToWatch:t,skipWhen:r=!1})=>{const n=d.useCallbackRef(i);g.useEffect(()=>{if(r||!e.current)return;const u={root:e.current,rootMargin:"0px"},a=f=>{f.forEach(s=>{s.isIntersecting&&e.current&&e.current.scrollHeight>e.current.clientHeight&&n(s)})},c=new IntersectionObserver(a,u),o=e.current.querySelector(t);return o&&c.observe(o),()=>{c.disconnect()}},[r,n,t])};exports.useIntersection=v;

package/dist/hooks/useIntersection.js

@@ -0,0 +1,23 @@
+import { useEffect as m } from "react";
+import { useCallbackRef as p } from "@radix-ui/react-use-callback-ref";
+const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
+  const e = p(s);
+  m(() => {
+    if (r || !t.current)
+      return;
+    const u = {
+      root: t.current,
+      rootMargin: "0px"
+    }, f = (g) => {
+      g.forEach((i) => {
+        i.isIntersecting && t.current && t.current.scrollHeight > t.current.clientHeight && e(i);
+      });
+    }, o = new IntersectionObserver(f, u), c = t.current.querySelector(n);
+    return c && o.observe(c), () => {
+      o.disconnect();
+    };
+  }, [r, e, n]);
+};
+export {
+  E as useIntersection
+};

package/dist/v2/MainNav/MainNav.cjs

@@ -1,9 +1,4 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("styled-components"),s=require("prop-types"),c=require("../../Flex/Flex.cjs"),i=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=u.default(c.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
-  background: ${({theme:e})=>e.colors.neutral0};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  z-index: 2;
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{as:"nav",alignItems:"normal",direction:"column",condensed:e,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;
+`,o=({condensed:e,...n})=>a.default.createElement(i.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:d.default.bool};exports.MainNav=o;

package/dist/v2/MainNav/MainNav.js

@@ -1,23 +1,23 @@
-import e from "react";
+import o from "react";
 import n from "styled-components";
 import a from "prop-types";
 import { Flex as i } from "../../Flex/Flex.js";
-import { MainNavContext as l } from "./MainNavContext.js";
-const m = n(i)`
-  width: ${({ condensed: o }) => o ? "max-content" : `${224 / 16}rem`};
-  background: ${({ theme: o }) => o.colors.neutral0};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  z-index: 2;
-  border-right: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, r = ({ condensed: o, ...t }) => /* @__PURE__ */ e.createElement(l.Provider, {
-  value: o
-}, /* @__PURE__ */ e.createElement(m, {
-  as: "nav",
+import { MainNavContext as m } from "./MainNavContext.js";
+const p = n(i)`
+  width: ${({ condensed: e }) => e ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: e }) => e.colors.neutral150};
+`, r = ({ condensed: e, ...t }) => /* @__PURE__ */ o.createElement(m.Provider, {
+  value: e
+}, /* @__PURE__ */ o.createElement(p, {
   alignItems: "normal",
+  as: "nav",
+  background: "neutral0",
+  condensed: e,
   direction: "column",
-  condensed: o,
+  height: "100vh",
+  position: "sticky",
+  top: 0,
+  zIndex: 2,
   ...t
 }));
 r.defaultProps = {

package/dist/v2/MainNav/NavFooter.cjs

@@ -1,3 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),s=require("prop-types"),a=require("styled-components"),l=require("../../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=t(r),u=t(s),c=t(a),d=c.default(l.Box)`
-  position: relative;
-`,o=({children:e})=>n.default.createElement(d,null,e);o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),a=require("prop-types"),s=require("../../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},u=o(r),c=o(a),t=({children:e})=>u.default.createElement(s.Box,{position:"relative"},e);t.displayName="NavFooter";t.propTypes={children:c.default.node.isRequired};exports.NavFooter=t;

package/dist/v2/MainNav/NavFooter.js

@@ -1,10 +1,9 @@
 import r from "react";
 import t from "prop-types";
-import i from "styled-components";
 import { Box as p } from "../../Box/Box.js";
-const m = i(p)`
-  position: relative;
-`, e = ({ children: o }) => /* @__PURE__ */ r.createElement(m, null, o);
+const e = ({ children: o }) => /* @__PURE__ */ r.createElement(p, {
+  position: "relative"
+}, o);
 e.displayName = "NavFooter";
 e.propTypes = {
   children: t.node.isRequired

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -30,4 +30,4 @@
   }
 `,ne=y.default(M.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,I=({as:e,children:i,onClick:E,isFocused:c,isLink:h,isExternal:b,...x})=>{const d=a.useRef();a.useEffect(()=>{c&&d.current&&d.current.focus()},[c]);const l={tabIndex:c?0:-1,ref:d,role:"menuitem",...x},v=r=>{(r.key===u.KeyboardKeys.SPACE||r.key===u.KeyboardKeys.ENTER)&&E()};return h?o.default.createElement(Z,{as:e,...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i))):b?o.default.createElement(ee,{isExternal:!0,...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i))):o.default.createElement(Y,{onKeyDown:v,onMouseDown:E,type:"button",...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i)))};I.defaultProps={as:void 0,onClick(){},isExternal:!1,isFocused:!1,isLink:!1};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,isExternal:t.default.bool,isFocused:t.default.bool,isLink:t.default.bool,onClick:t.default.func};const m=({label:e,children:i,id:E,as:c,onOpen:h=()=>{},onClose:b=()=>{},size:x,popoverPlacement:d,onReachEnd:l,...v})=>{const r=a.useRef(),B=X.useId("simplemenu",E),K=a.useRef(!1),[f,p]=a.useState(!1),[P,R]=a.useState(0),g=a.Children.toArray(i),w=x==="S"?ne:M.Button,_=c||w,O=!!l&&typeof l=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=g.findIndex(s=>s.props.children===e);n!==-1&&R(n)}},[e]);const S=D.useCallbackRef(h),L=D.useCallbackRef(b);a.useEffect(()=>{K?.current?f?S():L():K.current=!0},[K,f,S,L]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&r.current.focus()},[e,P]);const $=n=>{f&&(n.key===u.KeyboardKeys.ESCAPE&&(n.stopPropagation(),p(!1),r.current.focus()),n.key===u.KeyboardKeys.DOWN&&R(s=>s===g.length-1?0:s+1),n.key===u.KeyboardKeys.UP&&R(s=>s===0?g.length-1:s-1))},F=n=>{(n.key===u.KeyboardKeys.ENTER||n.key===u.KeyboardKeys.SPACE)&&p(s=>!s)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||p(!1)},N=n=>{n.preventDefault(),p(s=>!s)},V=()=>{O&&l()},W=g.map((n,s)=>o.default.createElement(J.Flex,{as:"li",key:s,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),p(!1),r.current.focus()},isFocused:P===s})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":f,"aria-controls":B,onKeyDown:F,onMouseDown:N,ref:r,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(H.CarretDown,{"aria-hidden":!0})),...v},e),f&&o.default.createElement(j.Popover,{onBlur:A,placement:d,source:r,onReachEnd:V,intersectionId:O?`popover-${B}`:void 0,spacing:4},o.default.createElement(k.Box,{role:"menu",as:"ul",padding:1,id:B},W)))};m.defaultProps={as:void 0};m.displayName="SimpleMenu";m.defaultProps={id:void 0,onClose(){},onOpen(){},onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};m.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(j.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=m;
+`,I=({as:e,children:i,onClick:E,isFocused:c,isLink:h,isExternal:b,...x})=>{const d=a.useRef();a.useEffect(()=>{c&&d.current&&d.current.focus()},[c]);const l={tabIndex:c?0:-1,ref:d,role:"menuitem",...x},v=r=>{(r.key===u.KeyboardKeys.SPACE||r.key===u.KeyboardKeys.ENTER)&&E()};return h?o.default.createElement(Z,{as:e,...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i))):b?o.default.createElement(ee,{isExternal:!0,...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i))):o.default.createElement(Y,{onKeyDown:v,onMouseDown:E,type:"button",...l},o.default.createElement(k.Box,{padding:2},o.default.createElement(C.Typography,null,i)))};I.defaultProps={as:void 0,onClick(){},isExternal:!1,isFocused:!1,isLink:!1};I.propTypes={as:t.default.elementType,children:t.default.node.isRequired,isExternal:t.default.bool,isFocused:t.default.bool,isLink:t.default.bool,onClick:t.default.func};const m=({label:e,children:i,id:E,as:c,onOpen:h=()=>{},onClose:b=()=>{},size:x,popoverPlacement:d,onReachEnd:l,...v})=>{const r=a.useRef(),B=X.useId(E),K=a.useRef(!1),[f,p]=a.useState(!1),[P,R]=a.useState(0),g=a.Children.toArray(i),w=x==="S"?ne:M.Button,_=c||w,O=!!l&&typeof l=="function";a.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=g.findIndex(s=>s.props.children===e);n!==-1&&R(n)}},[e]);const S=D.useCallbackRef(h),L=D.useCallbackRef(b);a.useEffect(()=>{K?.current?f?S():L():K.current=!0},[K,f,S,L]),a.useEffect(()=>{o.default.isValidElement(e)&&P===-1&&r.current.focus()},[e,P]);const $=n=>{f&&(n.key===u.KeyboardKeys.ESCAPE&&(n.stopPropagation(),p(!1),r.current.focus()),n.key===u.KeyboardKeys.DOWN&&R(s=>s===g.length-1?0:s+1),n.key===u.KeyboardKeys.UP&&R(s=>s===0?g.length-1:s-1))},F=n=>{(n.key===u.KeyboardKeys.ENTER||n.key===u.KeyboardKeys.SPACE)&&p(s=>!s)},A=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||p(!1)},N=n=>{n.preventDefault(),p(s=>!s)},V=()=>{O&&l()},W=g.map((n,s)=>o.default.createElement(J.Flex,{as:"li",key:s,justifyContent:"center",role:"menuitem"},a.cloneElement(n,{onClick(){n.props.onClick(),p(!1),r.current.focus()},isFocused:P===s})));return o.default.createElement("div",{onKeyDown:$},o.default.createElement(_,{label:o.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":f,"aria-controls":B,onKeyDown:F,onMouseDown:N,ref:r,type:"button",variant:"ghost",endIcon:o.default.createElement(te,null,o.default.createElement(H.CarretDown,{"aria-hidden":!0})),...v},e),f&&o.default.createElement(j.Popover,{onBlur:A,placement:d,source:r,onReachEnd:V,intersectionId:O?`popover-${B}`:void 0,spacing:4},o.default.createElement(k.Box,{role:"menu",as:"ul",padding:1,id:B},W)))};m.defaultProps={as:void 0};m.displayName="SimpleMenu";m.defaultProps={id:void 0,onClose(){},onOpen(){},onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};m.propTypes={as:t.default.any,children:t.default.oneOfType([t.default.arrayOf(t.default.node),t.default.node]).isRequired,id:t.default.string,label:t.default.oneOfType([t.default.string,t.default.number,t.default.element]).isRequired,onClose:t.default.func,onOpen:t.default.func,onReachEnd:t.default.func,popoverPlacement:t.default.oneOf(j.POPOVER_PLACEMENTS),size:t.default.oneOf(["S","M"])};exports.MenuItem=I;exports.SimpleMenu=m;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,6 +1,6 @@
 import t, { useRef as b, useEffect as E, useState as B, Children as z, cloneElement as j } from "react";
 import e from "prop-types";
-import f from "styled-components";
+import m from "styled-components";
 import { useCallbackRef as L } from "@radix-ui/react-use-callback-ref";
 import { CarretDown as H } from "@strapi/icons";
 import { Link as U } from "../Link/Link.js";
@@ -13,16 +13,16 @@ import { POPOVER_PLACEMENTS as Q, Popover as X } from "../../Popover/Popover.js"
 import { getOptionStyle as T } from "./utils.js";
 import { useId as Y } from "../../helpers/useId.js";
 import { KeyboardKeys as a } from "../../helpers/keyboardKeys.js";
-const Z = f.button`
+const Z = m.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
   ${T}
-`, ee = f(J)`
+`, ee = m(J)`
   text-decoration: none;
   ${T}
-`, ne = f(U)`
+`, ne = m(U)`
   &:focus-visible {
     /* Removes Link focus-visible after properties and reset to global outline */
     outline: 2px solid ${({ theme: o }) => o.colors.primary600};
@@ -36,14 +36,14 @@ const Z = f.button`
     fill: currentColor;
   }
   ${T}
-`, te = f.span`
+`, te = m.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, oe = f(K)`
+`, 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();
@@ -107,7 +107,7 @@ const h = ({
   onReachEnd: i,
   ...x
 }) => {
-  const s = b(), P = Y("simplemenu", d), R = b(!1), [u, m] = B(!1), [D, I] = B(0), y = z.toArray(l), A = c || (C === "S" ? oe : K), S = !!i && typeof i == "function";
+  const s = b(), P = Y(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);
@@ -121,13 +121,13 @@ const h = ({
     t.isValidElement(o) && D === -1 && s.current.focus();
   }, [o, D]);
   const N = (n) => {
-    u && (n.key === a.ESCAPE && (n.stopPropagation(), m(!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));
+    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) && m((r) => !r);
+    (n.key === a.ENTER || n.key === a.SPACE) && f((r) => !r);
   }, V = (n) => {
-    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || m(!1);
+    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || f(!1);
   }, q = (n) => {
-    n.preventDefault(), m((r) => !r);
+    n.preventDefault(), f((r) => !r);
   }, W = () => {
     S && i();
   }, _ = y.map((n, r) => /* @__PURE__ */ t.createElement(G, {
@@ -137,7 +137,7 @@ const h = ({
     role: "menuitem"
   }, j(n, {
     onClick() {
-      n.props.onClick(), m(!1), s.current.focus();
+      n.props.onClick(), f(!1), s.current.focus();
     },
     isFocused: D === r
   })));

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("prop-types"),I=require("styled-components"),R=require("@strapi/icons"),_=require("../../Flex/Flex.cjs"),D=require("../../Typography/Typography.cjs"),P=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),F=require("../../Divider/Divider.cjs"),K=require("../../Searchbar/Searchbar.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../helpers/useId.cjs"),w=require("../../helpers/usePrevious.cjs"),O=require("../../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(C),H=d(I),h=H.default(F.Divider)`
   width: ${24/16}rem;
   background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:g,searchLabel:f,searchable:b,onChange:y,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",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===O.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:m,onChange:y,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(_.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),b&&e.default.createElement(P.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(R.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;
+`,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=w.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===O.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.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(_.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(P.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(R.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;