@strapi/design-system 1.7.0 → 1.7.2-alpha.0

package/dist/v2/Pagination/components.cjs

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),g=require("@strapi/icons"),k=require("prop-types"),q=require("styled-components"),u=require("./PaginationContext.cjs"),T=require("../../BaseLink/BaseLink.cjs"),x=require("../../themes/utils.cjs"),E=require("../../Typography/Typography.cjs"),d=require("../../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(L),l=c(k),s=c(q),v=s.default(E.Typography)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),L=require("react"),g=require("@strapi/icons"),j=require("prop-types"),q=require("styled-components"),u=require("./PaginationContext.cjs"),R=require("../../themes/utils.cjs"),m=require("../../Typography/Typography.cjs"),w=require("../../BaseLink/BaseLink.cjs"),l=require("../../VisuallyHidden/VisuallyHidden.cjs"),c=e=>e&&e.__esModule?e:{default:e},p=c(L),d=c(j),n=c(q),x=n.default(m.Typography)`
   line-height: revert;
-`,w={active:!0},p=s.default(T.BaseLink).withConfig({shouldForwardProp:(e,t)=>!w[e]&&t(e)})`
+`,T={active:!0},h=n.default(w.BaseLink).withConfig({shouldForwardProp:(e,i)=>!T[e]&&i(e)})`
   padding: ${({theme:e})=>e.spaces[3]};
   border-radius: ${({theme:e})=>e.borderRadius};
-  box-shadow: ${({active:e,theme:t})=>e?t.shadows.filterShadow:void 0};
+  box-shadow: ${({active:e,theme:i})=>e?i.shadows.filterShadow:void 0};
   text-decoration: none;
   display: flex;
 
-  ${x.buttonFocusStyle}
-`,R=s.default(p)`
-  color: ${({theme:e,active:t})=>t?e.colors.primary700:e.colors.neutral800};
-  background: ${({theme:e,active:t})=>t?e.colors.neutral0:void 0};
+  ${R.buttonFocusStyle}
+`,$=n.default(h)`
+  color: ${({theme:e,active:i})=>i?e.colors.primary700:e.colors.neutral800};
+  background: ${({theme:e,active:i})=>i?e.colors.neutral0:void 0};
 
   &:hover {
     box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   }
-`,m=s.default(p)`
+`,P=n.default(h)`
   font-size: 0.7rem;
   svg path {
     fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral600};
@@ -31,6 +31,6 @@
   ${e=>e["aria-disabled"]?`
   pointer-events: none;
     `:void 0}
-`,$=s.default(p)`
+`,_=n.default(h)`
   color: ${({theme:e})=>e.colors.neutral800};
-`,f=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i}=u.usePagination(),r=i===1;return a.default.createElement(m,{ref:n,"aria-disabled":r,tabIndex:r?-1:void 0,...t},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(g.ChevronLeft,{"aria-hidden":!0}))});f.displayName="PreviousLink";const y=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i,pageCount:r}=u.usePagination(),o=i===r;return a.default.createElement(m,{ref:n,"aria-disabled":o,tabIndex:o?-1:void 0,...t},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(g.ChevronRight,{"aria-hidden":!0}))});y.displayName="NextLink";const h=a.default.forwardRef(({number:e,children:t,...n},i)=>{const{activePage:r}=u.usePagination(),o=r===e;return a.default.createElement(R,{ref:i,...n,active:o},a.default.createElement(d.VisuallyHidden,null,t),a.default.createElement(v,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null},e))});h.displayName="PageLink";const P=({children:e,...t})=>a.default.createElement($,{...t,as:"div"},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(v,{"aria-hidden":!0,variant:"pi"},"\u2026"));h.propTypes={children:l.default.node.isRequired,number:l.default.number.isRequired};const b={children:l.default.node.isRequired};y.propTypes=b;f.propTypes=b;P.propTypes={children:l.default.node.isRequired};exports.Dots=P;exports.NextLink=y;exports.PageLink=h;exports.PreviousLink=f;
+`,f=p.default.forwardRef(({children:e,...i},a)=>{const{activePage:s}=u.usePagination(),t=s===1;return r.jsxs(P,{ref:a,"aria-disabled":t,tabIndex:t?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(g.ChevronLeft,{"aria-hidden":!0})]})});f.displayName="PreviousLink";const v=p.default.forwardRef(({children:e,...i},a)=>{const{activePage:s,pageCount:t}=u.usePagination(),o=s===t;return r.jsxs(P,{ref:a,"aria-disabled":o,tabIndex:o?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(g.ChevronRight,{"aria-hidden":!0})]})});v.displayName="NextLink";const y=p.default.forwardRef(({number:e,children:i,...a},s)=>{const{activePage:t}=u.usePagination(),o=t===e;return r.jsxs($,{ref:s,...a,active:o,children:[r.jsx(l.VisuallyHidden,{children:i}),r.jsx(x,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null,children:e})]})});y.displayName="PageLink";const b=({children:e,...i})=>r.jsxs(_,{...i,as:"div",children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(x,{"aria-hidden":!0,variant:"pi",children:"…"})]});y.propTypes={children:d.default.node.isRequired,number:d.default.number.isRequired};const k={children:d.default.node.isRequired};v.propTypes=k;f.propTypes=k;b.propTypes={children:d.default.node.isRequired};exports.Dots=b;exports.NextLink=v;exports.PageLink=y;exports.PreviousLink=f;

package/dist/v2/Pagination/components.js

@@ -1,18 +1,19 @@
-import t from "react";
-import { ChevronLeft as b, ChevronRight as y } from "@strapi/icons";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import p from "react";
+import { ChevronLeft as P, ChevronRight as x } from "@strapi/icons";
 import d from "prop-types";
 import s from "styled-components";
-import { usePagination as c } from "./PaginationContext.js";
-import { BaseLink as P } from "../../BaseLink/BaseLink.js";
-import { buttonFocusStyle as E } from "../../themes/utils.js";
-import { Typography as k } from "../../Typography/Typography.js";
-import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
-const m = s(k)`
+import { usePagination as h } from "./PaginationContext.js";
+import { buttonFocusStyle as k } from "../../themes/utils.js";
+import { Typography as w } from "../../Typography/Typography.js";
+import { BaseLink as L } from "../../BaseLink/BaseLink.js";
+import { VisuallyHidden as c } from "../../VisuallyHidden/VisuallyHidden.js";
+const m = s(w)`
   line-height: revert;
-`, w = {
+`, $ = {
   active: !0
-}, p = s(P).withConfig({
-  shouldForwardProp: (e, r) => !w[e] && r(e)
+}, u = s(L).withConfig({
+  shouldForwardProp: (e, r) => !$[e] && r(e)
 })`
   padding: ${({ theme: e }) => e.spaces[3]};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -20,15 +21,15 @@ const m = s(k)`
   text-decoration: none;
   display: flex;
 
-  ${E}
-`, L = s(p)`
+  ${k}
+`, R = s(u)`
   color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
   background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
 
   &:hover {
     box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
   }
-`, u = s(p)`
+`, f = s(u)`
   font-size: 0.7rem;
   svg path {
     fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
@@ -44,39 +45,51 @@ const m = s(k)`
   ${(e) => e["aria-disabled"] ? `
   pointer-events: none;
     ` : void 0}
-`, $ = s(p)`
+`, T = s(u)`
   color: ${({ theme: e }) => e.colors.neutral800};
-`, h = t.forwardRef(({ children: e, ...r }, a) => {
-  const { activePage: i } = c(), o = i === 1;
-  return /* @__PURE__ */ t.createElement(u, { ref: a, "aria-disabled": o, tabIndex: o ? -1 : void 0, ...r }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(b, { "aria-hidden": !0 }));
+`, v = p.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: t } = h(), i = t === 1;
+  return /* @__PURE__ */ l(f, { ref: a, "aria-disabled": i, tabIndex: i ? -1 : void 0, ...r, children: [
+    /* @__PURE__ */ o(c, { children: e }),
+    /* @__PURE__ */ o(P, { "aria-hidden": !0 })
+  ] });
 });
-h.displayName = "PreviousLink";
-const f = t.forwardRef(({ children: e, ...r }, a) => {
-  const { activePage: i, pageCount: o } = c(), n = i === o;
-  return /* @__PURE__ */ t.createElement(u, { ref: a, "aria-disabled": n, tabIndex: n ? -1 : void 0, ...r }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(y, { "aria-hidden": !0 }));
+v.displayName = "PreviousLink";
+const g = p.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: t, pageCount: i } = h(), n = t === i;
+  return /* @__PURE__ */ l(f, { ref: a, "aria-disabled": n, tabIndex: n ? -1 : void 0, ...r, children: [
+    /* @__PURE__ */ o(c, { children: e }),
+    /* @__PURE__ */ o(x, { "aria-hidden": !0 })
+  ] });
 });
-f.displayName = "NextLink";
-const v = t.forwardRef(({ number: e, children: r, ...a }, i) => {
-  const { activePage: o } = c(), n = o === e;
-  return /* @__PURE__ */ t.createElement(L, { ref: i, ...a, active: n }, /* @__PURE__ */ t.createElement(l, null, r), /* @__PURE__ */ t.createElement(m, { "aria-hidden": !0, variant: "pi", fontWeight: n ? "bold" : null }, e));
+g.displayName = "NextLink";
+const b = p.forwardRef(({ number: e, children: r, ...a }, t) => {
+  const { activePage: i } = h(), n = i === e;
+  return /* @__PURE__ */ l(R, { ref: t, ...a, active: n, children: [
+    /* @__PURE__ */ o(c, { children: r }),
+    /* @__PURE__ */ o(m, { "aria-hidden": !0, variant: "pi", fontWeight: n ? "bold" : null, children: e })
+  ] });
 });
-v.displayName = "PageLink";
-const x = ({ children: e, ...r }) => /* @__PURE__ */ t.createElement($, { ...r, as: "div" }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(m, { "aria-hidden": !0, variant: "pi" }, "\u2026"));
-v.propTypes = {
+b.displayName = "PageLink";
+const N = ({ children: e, ...r }) => /* @__PURE__ */ l(T, { ...r, as: "div", children: [
+  /* @__PURE__ */ o(c, { children: e }),
+  /* @__PURE__ */ o(m, { "aria-hidden": !0, variant: "pi", children: "…" })
+] });
+b.propTypes = {
   children: d.node.isRequired,
   number: d.number.isRequired
 };
-const g = {
+const y = {
   children: d.node.isRequired
 };
-f.propTypes = g;
-h.propTypes = g;
-x.propTypes = {
+g.propTypes = y;
+v.propTypes = y;
+N.propTypes = {
   children: d.node.isRequired
 };
 export {
-  x as Dots,
-  f as NextLink,
-  v as PageLink,
-  h as PreviousLink
+  N as Dots,
+  g as NextLink,
+  b as PageLink,
+  v as PreviousLink
 };

package/dist/v2/Pagination/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./Pagination.cjs"),e=require("./components.cjs");exports.Pagination=i.Pagination;exports.Dots=e.Dots;exports.NextLink=e.NextLink;exports.PageLink=e.PageLink;exports.PreviousLink=e.PreviousLink;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Pagination.cjs"),i=require("./components.cjs");exports.Pagination=e.Pagination;exports.Dots=i.Dots;exports.NextLink=i.NextLink;exports.PageLink=i.PageLink;exports.PreviousLink=i.PreviousLink;

package/dist/v2/SimpleMenu/Menu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),y=require("@radix-ui/react-dropdown-menu"),c=require("@strapi/icons"),d=require("styled-components"),j=require("../../Box/Box.cjs"),m=require("../../Button/Button.cjs"),u=require("../../Flex/Flex.cjs"),S=require("../../helpers/theme.cjs"),i=require("../../Typography/Typography.cjs"),w=require("../Link/Link.cjs"),T=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),s=T(d),R=n.Root,k=a.forwardRef(({size:e,...r},o)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(m.Button,{ref:o,type:"button",variant:"ghost",endIcon:t.jsx(c.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...r})})),v=a.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...l},b)=>{const[f,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:f,loop:!0,asChild:!0,children:t.jsxs(h,{ref:b,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...l,children:[e,t.jsx(j.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=s.default(u.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),y=require("@radix-ui/react-dropdown-menu"),d=require("@strapi/icons"),c=require("styled-components"),S=require("../../helpers/theme.cjs"),w=require("../Link/Link.cjs"),j=require("../../Button/Button.cjs"),m=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),i=require("../../Typography/Typography.cjs"),T=e=>e&&e.__esModule?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,s.get?s:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),a=T(c),R=n.Root,$=l.forwardRef(({size:e,...r},o)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(j.Button,{ref:o,type:"button",variant:"ghost",endIcon:t.jsx(d.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...r})})),v=l.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...s},p)=>{const[f,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:f,loop:!0,asChild:!0,children:t.jsxs(h,{ref:p,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...s,children:[e,t.jsx(m.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=a.default(u.Flex)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -6,7 +6,7 @@
   &::-webkit-scrollbar {
     display: none;
   }
-`,$=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(L,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(i.Typography,{children:o.children})}):t.jsx(p,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(i.Typography,{children:o.children})})}),g=({theme:e})=>d.css`
+`,k=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(M,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(i.Typography,{children:o.children})}):t.jsx(b,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(i.Typography,{children:o.children})})}),g=({theme:e})=>c.css`
   text-align: left;
   width: 100%;
   border-radius: ${e.borderRadius};
@@ -35,9 +35,9 @@
       content: none;
     }
   }
-`,p=s.default(u.Flex)`
+`,b=a.default(u.Flex)`
   ${g}
-`,L=s.default(w.Link)`
+`,M=a.default(w.Link)`
   /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
   color: ${({theme:e,color:r})=>S.extractStyleFromTheme(e.colors,r,void 0)};
   text-decoration: none;
@@ -52,14 +52,14 @@
   }
 
   ${g}
-`,M=a.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(q,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),q=s.default(i.Typography)`
+`,q=l.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(L,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),L=a.default(i.Typography)`
   padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
-`,B=n.Sub,O=a.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(_,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(i.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),_=s.default(p)`
+`,O=n.Sub,_=l.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(B,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(i.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),B=a.default(b)`
   &[data-state='open'] {
     background-color: ${({theme:e})=>e.colors.primary100};
   }
-`,I=s.default(c.ChevronRight)`
+`,I=a.default(d.ChevronRight)`
   path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,F=a.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),D=R,P=k,E=v,W=$,H=M,A=B,N=O,V=F;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=D;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=P;
+`,D=l.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),P=R,F=$,E=v,W=k,H=q,A=O,N=_,V=D;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=P;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=F;

package/dist/v2/SimpleMenu/Menu.js

@@ -3,68 +3,15 @@ import { forwardRef as a } from "react";
 import * as n from "@radix-ui/react-dropdown-menu";
 import { CarretDown as f, ChevronRight as S } from "@strapi/icons";
 import l, { css as w } from "styled-components";
-import { Box as x } from "../../Box/Box.js";
-import { Button as y } from "../../Button/Button.js";
+import { extractStyleFromTheme as x } from "../../helpers/theme.js";
+import { Link as y } from "../Link/Link.js";
+import { Button as C } from "../../Button/Button.js";
+import { Box as $ } from "../../Box/Box.js";
 import { Flex as s } from "../../Flex/Flex.js";
-import { extractStyleFromTheme as C } from "../../helpers/theme.js";
 import { Typography as i } from "../../Typography/Typography.js";
-import { Link as $ } from "../Link/Link.js";
-const v = n.Root, k = a(({
-  size: r,
-  ...o
-}, t) => e(n.Trigger, {
-  asChild: !0,
-  children: e(y, {
-    ref: t,
-    type: "button",
-    variant: "ghost",
-    endIcon: e(f, {
-      width: `${6 / 16}rem`,
-      height: `${4 / 16}rem`,
-      "aria-hidden": !0
-    }),
-    paddingTop: r === "S" ? 1 : 2,
-    paddingBottom: r === "S" ? 1 : 2,
-    paddingLeft: r === "S" ? 3 : 4,
-    paddingRight: r === "S" ? 3 : 4,
-    ...o
-  })
-})), R = a(({
-  children: r,
-  intersectionId: o,
-  popoverPlacement: t = "bottom-start",
-  ...g
-}, p) => {
+const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, children: e(C, { ref: t, type: "button", variant: "ghost", endIcon: e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...o }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...g }, p) => {
   const [b, m] = t.split("-");
-  return e(n.Portal, {
-    children: e(n.Content, {
-      align: m,
-      side: b,
-      loop: !0,
-      asChild: !0,
-      children: d(c, {
-        ref: p,
-        direction: "column",
-        borderStyle: "solid",
-        borderWidth: "1px",
-        borderColor: "neutral150",
-        hasRadius: !0,
-        background: "neutral0",
-        shadow: "filterShadow",
-        maxHeight: "15rem",
-        padding: 1,
-        alignItems: "flex-start",
-        position: "relative",
-        overflow: "auto",
-        ...g,
-        children: [r, e(x, {
-          id: o,
-          width: "100%",
-          height: "1px"
-        })]
-      })
-    })
-  });
+  return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: d(c, { ref: p, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...g, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
 }), c = l(s)`
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -73,34 +20,7 @@ const v = n.Root, k = a(({
   &::-webkit-scrollbar {
     display: none;
   }
-`, T = ({
-  onSelect: r,
-  disabled: o = !1,
-  ...t
-}) => e(n.Item, {
-  asChild: !0,
-  onSelect: r,
-  disabled: o,
-  children: t.isLink || t.isExternal ? e(L, {
-    color: "neutral800",
-    ...t,
-    isExternal: t.isExternal ?? !1,
-    children: e(i, {
-      children: t.children
-    })
-  }) : e(h, {
-    cursor: "pointer",
-    color: "neutral800",
-    background: "transparent",
-    borderStyle: "none",
-    ...t,
-    children: e(i, {
-      children: t.children
-    })
-  })
-}), u = ({
-  theme: r
-}) => w`
+`, T = ({ onSelect: r, disabled: o = !1, ...t }) => e(n.Item, { asChild: !0, onSelect: r, disabled: o, children: t.isLink || t.isExternal ? e(L, { color: "neutral800", ...t, isExternal: t.isExternal ?? !1, children: e(i, { children: t.children }) }) : e(h, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), u = ({ theme: r }) => w`
   text-align: left;
   width: 100%;
   border-radius: ${r.borderRadius};
@@ -131,12 +51,9 @@ const v = n.Root, k = a(({
   }
 `, h = l(s)`
   ${u}
-`, L = l($)`
+`, L = l(y)`
   /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
-  color: ${({
-  theme: r,
-  color: o
-}) => C(r.colors, o, void 0)};
+  color: ${({ theme: r, color: o }) => x(r.colors, o, void 0)};
   text-decoration: none;
 
   &:hover {
@@ -149,74 +66,17 @@ const v = n.Root, k = a(({
   }
 
   ${u}
-`, M = a((r, o) => e(n.Label, {
-  asChild: !0,
-  children: e(I, {
-    ref: o,
-    variant: "sigma",
-    textColor: "neutral600",
-    ...r
-  })
-})), I = l(i)`
-  padding: ${({
-  theme: r
-}) => r.spaces[2]} ${({
-  theme: r
-}) => r.spaces[4]};
-`, B = n.Sub, O = a(({
-  disabled: r = !1,
-  ...o
-}, t) => e(n.SubTrigger, {
-  asChild: !0,
-  disabled: r,
-  children: d(E, {
-    ref: t,
-    color: "neutral800",
-    as: "button",
-    type: "button",
-    background: "transparent",
-    borderStyle: "none",
-    gap: 5,
-    ...o,
-    children: [e(i, {
-      children: o.children
-    }), e(W, {
-      height: 12,
-      width: 12
-    })]
-  })
-})), E = l(h)`
+`, M = a((r, o) => e(n.Label, { asChild: !0, children: e(I, { ref: o, variant: "sigma", textColor: "neutral600", ...r }) })), I = l(i)`
+  padding: ${({ theme: r }) => r.spaces[2]} ${({ theme: r }) => r.spaces[4]};
+`, B = n.Sub, O = a(({ disabled: r = !1, ...o }, t) => e(n.SubTrigger, { asChild: !0, disabled: r, children: d(E, { ref: t, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...o, children: [e(i, { children: o.children }), e(W, { height: 12, width: 12 })] }) })), E = l(h)`
   &[data-state='open'] {
-    background-color: ${({
-  theme: r
-}) => r.colors.primary100};
+    background-color: ${({ theme: r }) => r.colors.primary100};
   }
 `, W = l(S)`
   path {
-    fill: ${({
-  theme: r
-}) => r.colors.neutral500};
+    fill: ${({ theme: r }) => r.colors.neutral500};
   }
-`, j = a((r, o) => e(n.Portal, {
-  children: e(n.SubContent, {
-    sideOffset: 8,
-    asChild: !0,
-    children: e(c, {
-      ref: o,
-      direction: "column",
-      borderStyle: "solid",
-      borderWidth: "1px",
-      borderColor: "neutral150",
-      hasRadius: !0,
-      background: "neutral0",
-      shadow: "filterShadow",
-      maxHeight: "15rem",
-      padding: 1,
-      alignItems: "flex-start",
-      ...r
-    })
-  })
-})), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
+`, j = a((r, o) => e(n.Portal, { children: e(n.SubContent, { sideOffset: 8, asChild: !0, children: e(c, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", ...r }) }) })), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
 export {
   U as Content,
   X as Item,

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),i=require("react"),n=require("./Menu.cjs"),M=require("../../hooks/useId.cjs"),g=require("../../hooks/useIntersection.cjs"),p=({children:l,id:a,onOpen:s,onClose:c,popoverPlacement:d,onReachEnd:o,...r})=>{const I=i.useRef(null),[f,h]=i.useState(!1),j=e=>{o&&o(e)},m=e=>{e&&typeof s=="function"?s():!e&&typeof c=="function"&&c(),h(e)},u=`intersection-${M.useId(a)}`;return g.useIntersection(I,j,{selectorToWatch:`#${u}`,skipWhen:!f}),t.jsxs(n.Root,{onOpenChange:m,children:[t.jsx(n.Trigger,{...r,children:r.label}),t.jsx(n.Content,{intersectionId:u,popoverPlacement:d,children:l})]})},q=n.Item;exports.Menu=n;exports.MenuItem=q;exports.SimpleMenu=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),M=require("../../hooks/useId.cjs"),S=require("../../hooks/useIntersection.cjs"),j=({children:l,id:a,onOpen:s,onClose:c,popoverPlacement:d,onReachEnd:o,...r})=>{const I=u.useRef(null),[f,h]=u.useState(!1),m=e=>{o&&o(e)},p=e=>{e&&typeof s=="function"?s():!e&&typeof c=="function"&&c(),h(e)},g=M.useId(a),i=`intersection-${CSS.escape(g)}`;return S.useIntersection(I,m,{selectorToWatch:`#${i}`,skipWhen:!f}),t.jsxs(n.Root,{onOpenChange:p,children:[t.jsx(n.Trigger,{...r,children:r.label}),t.jsx(n.Content,{intersectionId:i,popoverPlacement:d,children:l})]})},q=n.Item;exports.Menu=n;exports.MenuItem=q;exports.SimpleMenu=j;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,38 +1,24 @@
-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 M, Content as R, Item as j } from "./Menu.js";
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import { useRef as g, useState as x } from "react";
+import { Root as S, Trigger as C, Content as M, Item as R } from "./Menu.js";
 import * as b from "./Menu.js";
-import { useId as y } from "../../hooks/useId.js";
-import { useIntersection as C } from "../../hooks/useIntersection.js";
-const O = ({
-  children: c,
-  id: f,
-  onOpen: t,
-  onClose: n,
-  popoverPlacement: m,
-  onReachEnd: o,
-  ...r
-}) => {
-  const l = h(null), [a, p] = g(!1), d = (e) => {
+import { useId as j } from "../../hooks/useId.js";
+import { useIntersection as y } from "../../hooks/useIntersection.js";
+const O = ({ children: c, id: f, onOpen: t, onClose: n, popoverPlacement: m, onReachEnd: o, ...r }) => {
+  const l = g(null), [a, p] = x(!1), u = (e) => {
     o && o(e);
-  }, u = (e) => {
+  }, d = (e) => {
     e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
-  }, i = `intersection-${y(f)}`;
-  return C(l, d, {
-    selectorToWatch: `#${i}`,
+  }, I = j(f), s = `intersection-${CSS.escape(I)}`;
+  return y(l, u, {
+    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: !a
-  }), I(x, {
-    onOpenChange: u,
-    children: [s(M, {
-      ...r,
-      children: r.label
-    }), s(R, {
-      intersectionId: i,
-      popoverPlacement: m,
-      children: c
-    })]
-  });
-}, P = j;
+  }), h(S, { onOpenChange: d, children: [i(C, { ...r, children: r.label }), i(M, { intersectionId: s, popoverPlacement: m, children: c })] });
+}, P = R;
 export {
   b as Menu,
   P as MenuItem,

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

@@ -1,4 +1,4 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("react");const u=require("prop-types"),a=require("styled-components"),n=require("../../Grid/Grid.cjs"),t=e=>e&&e.__esModule?e:{default:e},l=t(u),d=t(a),r=`${232/16}rem`,c=d.default(n.Grid)`
   width: ${r};
   background: ${({theme:e})=>e.colors.neutral100};
   position: sticky;
@@ -7,4 +7,4 @@
   overflow-y: auto;
   border-right: 1px solid ${({theme:e})=>e.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;
+`,o=({ariaLabel:e,...s})=>i.jsx(c,{"aria-label":e,as:"nav",...s});o.propTypes={ariaLabel:l.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;

package/dist/v2/SubNav/SubNav.js

@@ -1,9 +1,9 @@
-import t from "react";
-import e from "prop-types";
-import i from "styled-components";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import i from "prop-types";
+import e from "styled-components";
 import { Grid as a } from "../../Grid/Grid.js";
-import "../../Grid/GridItem.js";
-const p = `${232 / 16}rem`, s = i(a)`
+const p = `${232 / 16}rem`, s = e(a)`
   width: ${p};
   background: ${({ theme: r }) => r.colors.neutral100};
   position: sticky;
@@ -12,11 +12,11 @@ const p = `${232 / 16}rem`, s = i(a)`
   overflow-y: auto;
   border-right: 1px solid ${({ theme: r }) => r.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
+`, n = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t(s, { "aria-label": r, as: "nav", ...o });
+n.propTypes = {
+  ariaLabel: i.string.isRequired
 };
 export {
-  l as SubNav,
+  n as SubNav,
   p 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"),o=require("react"),R=require("@strapi/icons"),P=require("prop-types"),_=require("styled-components"),D=require("../../helpers/keyboardKeys.cjs"),I=require("../../hooks/useId.cjs"),K=require("../../hooks/usePrevious.cjs"),L=require("../../Divider/Divider.cjs"),c=require("../../Box/Box.cjs"),k=require("../../Searchbar/SearchForm.cjs"),w=require("../../Searchbar/Searchbar.cjs"),F=require("../../Flex/Flex.cjs"),O=require("../../Typography/Typography.cjs"),E=require("../../IconButton/IconButton.cjs"),h=t=>t&&t.__esModule?t:{default:t},r=h(P),H=h(_),p=H.default(L.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;
+`,d=({as:t,label:g,searchLabel:l,searchable:b,onChange:x,value:y,onClear:S,onSubmit:q,id:j})=>{const[s,i]=o.useState(!1),f=K.usePrevious(s),v=I.useId(j),a=o.useRef(),u=o.useRef();o.useEffect(()=>{s&&a.current&&a.current.focus(),f&&!s&&u.current&&u.current.focus()},[s,f]);const B=()=>{i(n=>!n)},m=n=>{S(n),a.current.focus()},C=n=>{n.relatedTarget?.id!==v&&i(!1)},T=n=>{n.key===D.KeyboardKeys.ESCAPE&&i(!1)};return s?e.jsxs(c.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4,children:[e.jsx(k.SearchForm,{children:e.jsx(w.Searchbar,{name:"searchbar",value:y,onChange:x,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:T,ref:a,onBlur:C,onClear:m,onSubmit:q,clearLabel:"Clear",size:"S",children:l})}),e.jsx(c.Box,{paddingLeft:2,paddingTop:4,children:e.jsx(p,{})})]}):e.jsxs(c.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4,children:[e.jsxs(F.Flex,{justifyContent:"space-between",alignItems:"flex-start",children:[e.jsx(O.Typography,{variant:"beta",as:t,children:g}),b&&e.jsx(E.IconButton,{ref:u,onClick:B,label:l,icon:e.jsx(R.Search,{})})]}),e.jsx(c.Box,{paddingTop:4,children:e.jsx(p,{})})]})};d.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};d.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=d;