@strapi/design-system 1.8.0 → 1.8.2

package/dist/Typography/utils.js

@@ -1,4 +1,4 @@
-import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as l, BETA as f, ALPHA as r } from "./constants.js";
+import { SIGMA as e, PI as s, OMEGA as t, EPSILON as o, DELTA as f, BETA as l, ALPHA as r } from "./constants.js";
 const $ = ({ ellipsis: n = !1 }) => n && `
     display: block;
     white-space: nowrap;
@@ -12,13 +12,13 @@ const $ = ({ ellipsis: n = !1 }) => n && `
         font-size: ${i.fontSizes[5]};
         line-height: ${i.lineHeights[2]};
       `;
-    case f:
+    case l:
       return `
         font-weight: ${i.fontWeights.bold};
         font-size: ${i.fontSizes[4]};
         line-height: ${i.lineHeights[1]};
       `;
-    case l:
+    case f:
       return `
         font-weight: ${i.fontWeights.semiBold};
         font-size: ${i.fontSizes[3]};
@@ -51,9 +51,8 @@ const $ = ({ ellipsis: n = !1 }) => n && `
         font-size: ${i.fontSizes[2]};
       `;
   }
-}, z = ({ theme: n, textColor: i }) => n.colors[i || "neutral800"];
+};
 export {
   $ as ellipsisStyle,
-  z as handleColor,
   a as variantStyle
 };

package/dist/v2/Breadcrumbs/Breadcrumbs.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),f=require("prop-types"),m=require("styled-components"),p=require("./Divider.cjs"),a=require("../../Flex/Flex.cjs"),y=require("../../Box/Box.cjs"),l=e=>e&&e.__esModule?e:{default:e},r=l(f),b=l(m),g=b.default(a.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),u=require("styled-components"),h=require("./Divider.cjs"),s=require("../../Flex/Flex.cjs"),m=require("../../Box/Box.cjs"),b=e=>e&&e.__esModule?e:{default:e},f=b(u),x=f.default(s.Flex)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
@@ -6,4 +6,4 @@
   :first-child {
     margin-left: ${({theme:e})=>`calc(-1*${e.spaces[2]})`};
   }
-`,s=({label:e,children:d,...o})=>{const i=n.Children.toArray(d);return t.jsx(y.Box,{"aria-label":e,...o,children:t.jsx(g,{as:"ol",horizontal:!0,children:n.Children.map(i,(u,c)=>{const h=i.length>1&&c+1<i.length;return t.jsxs(a.Flex,{inline:!0,as:"li",children:[u,h&&t.jsx(p.Divider,{})]})})})})};s.displayName="Breadcrumbs";s.propTypes={children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired,label:r.default.string.isRequired};exports.Breadcrumbs=s;
+`,n=({label:e,children:a,...l})=>{const r=i.Children.toArray(a);return t.jsx(m.Box,{"aria-label":e,...l,children:t.jsx(x,{as:"ol",children:i.Children.map(r,(o,c)=>{const d=r.length>1&&c+1<r.length;return t.jsxs(s.Flex,{inline:!0,as:"li",children:[o,d&&t.jsx(h.Divider,{})]})})})})};n.displayName="Breadcrumbs";exports.Breadcrumbs=n;

package/dist/v2/Breadcrumbs/Breadcrumbs.js

@@ -1,33 +1,25 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import { Children as o } from "react";
-import e from "prop-types";
-import p from "styled-components";
-import { Divider as f } from "./Divider.js";
-import { Flex as n } from "../../Flex/Flex.js";
-import { Box as u } from "../../Box/Box.js";
-const y = p(n)`
+import { jsx as i, jsxs as h } from "react/jsx-runtime";
+import { Children as t } from "react";
+import d from "styled-components";
+import { Divider as c } from "./Divider.js";
+import { Flex as a } from "../../Flex/Flex.js";
+import { Box as f } from "../../Box/Box.js";
+const p = d(a)`
   // CrumbLinks do have padding-x, because they need to have a
   // interaction effect, which mis-aligns the breadcrumbs on the left.
   // This normalizes the behavior by moving the first item to left by
   // the same amount it has inner padding
   :first-child {
-    margin-left: ${({ theme: r }) => `calc(-1*${r.spaces[2]})`};
+    margin-left: ${({ theme: e }) => `calc(-1*${e.spaces[2]})`};
   }
-`, a = ({ label: r, children: s, ...l }) => {
-  const i = o.toArray(s);
-  return /* @__PURE__ */ t(u, { "aria-label": r, ...l, children: /* @__PURE__ */ t(y, { as: "ol", horizontal: !0, children: o.map(i, (m, d) => {
-    const h = i.length > 1 && d + 1 < i.length;
-    return /* @__PURE__ */ c(n, { inline: !0, as: "li", children: [
-      m,
-      h && /* @__PURE__ */ t(f, {})
-    ] });
+`, b = ({ label: e, children: n, ...o }) => {
+  const r = t.toArray(n);
+  return i(f, { "aria-label": e, ...o, children: i(p, { as: "ol", children: t.map(r, (s, l) => {
+    const m = r.length > 1 && l + 1 < r.length;
+    return h(a, { inline: !0, as: "li", children: [s, m && i(c, {})] });
   }) }) });
 };
-a.displayName = "Breadcrumbs";
-a.propTypes = {
-  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
-  label: e.string.isRequired
-};
+b.displayName = "Breadcrumbs";
 export {
-  a as Breadcrumbs
+  b as Breadcrumbs
 };

package/dist/v2/Breadcrumbs/Crumb.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const a=require("prop-types"),u=require("../../Box/Box.cjs"),d=require("../../Typography/Typography.cjs"),p=e=>e&&e.__esModule?e:{default:e},i=p(a),r=({children:e,isCurrent:t,...n})=>o.jsx(u.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:o.jsx(d.Typography,{variant:"pi",textColor:"neutral800",fontWeight:t?"bold":"normal","aria-current":t,...n,children:e})});r.displayName="Crumb";r.defaultProps={isCurrent:!1};r.propTypes={children:i.default.node.isRequired,isCurrent:i.default.bool};exports.Crumb=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("../../Box/Box.cjs"),n=require("../../Typography/Typography.cjs"),t=({children:o,isCurrent:e=!1,...i})=>r.jsx(a.Box,{paddingLeft:2,paddingRight:2,paddingTop:1,paddingBottom:1,children:r.jsx(n.Typography,{variant:"pi",textColor:"neutral800",fontWeight:e?"bold":"normal","aria-current":e,...i,children:o})});t.displayName="Crumb";exports.Crumb=t;

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,27 +1,8 @@
-import { jsx as p } from "react/jsx-runtime";
-import "react";
-import i from "prop-types";
-import { Box as a } from "../../Box/Box.js";
-import { Typography as d } from "../../Typography/Typography.js";
-const r = ({ children: t, isCurrent: o, ...e }) => /* @__PURE__ */ p(a, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: /* @__PURE__ */ p(
-  d,
-  {
-    variant: "pi",
-    textColor: "neutral800",
-    fontWeight: o ? "bold" : "normal",
-    "aria-current": o,
-    ...e,
-    children: t
-  }
-) });
-r.displayName = "Crumb";
-r.defaultProps = {
-  isCurrent: !1
-};
-r.propTypes = {
-  children: i.node.isRequired,
-  isCurrent: i.bool
-};
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i } from "../../Box/Box.js";
+import { Typography as p } from "../../Typography/Typography.js";
+const d = ({ children: t, isCurrent: o = !1, ...a }) => r(i, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: r(p, { variant: "pi", textColor: "neutral800", fontWeight: o ? "bold" : "normal", "aria-current": o, ...a, children: t }) });
+d.displayName = "Crumb";
 export {
-  r as Crumb
+  d as Crumb
 };

package/dist/v2/Breadcrumbs/CrumbLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("react");const i=require("prop-types"),u=require("styled-components"),l=require("../../BaseLink/BaseLink.cjs"),t=e=>e&&e.__esModule?e:{default:e},r=t(i),d=t(u),a=d.default(l.BaseLink)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("styled-components"),s=require("../../BaseLink/BaseLink.cjs"),i=e=>e&&e.__esModule?e:{default:e},l=i(n),u=l.default(s.BaseLink)`
   border-radius: ${({theme:e})=>e.borderRadius};
   color: ${({theme:e})=>e.colors.neutral600};
   font-size: ${({theme:e})=>e.fontSizes[1]};
@@ -11,4 +11,4 @@
     background-color: ${({theme:e})=>e.colors.neutral200};
     color: ${({theme:e})=>e.colors.neutral700};
   }
-`,o=({children:e,...s})=>n.jsx(a,{...s,children:e});o.displayName="CrumbLink";o.defaultProps={to:void 0};o.propTypes={children:r.default.node.isRequired,to:r.default.string};exports.CrumbLink=o;
+`,o=({children:e,...r})=>t.jsx(u,{...r,children:e});o.displayName="CrumbLink";exports.CrumbLink=o;

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -1,9 +1,7 @@
-import { jsx as s } from "react/jsx-runtime";
-import "react";
-import e from "prop-types";
-import t from "styled-components";
+import { jsx as e } from "react/jsx-runtime";
+import i from "styled-components";
 import { BaseLink as n } from "../../BaseLink/BaseLink.js";
-const d = t(n)`
+const s = i(n)`
   border-radius: ${({ theme: o }) => o.borderRadius};
   color: ${({ theme: o }) => o.colors.neutral600};
   font-size: ${({ theme: o }) => o.fontSizes[1]};
@@ -16,15 +14,8 @@ const d = t(n)`
     background-color: ${({ theme: o }) => o.colors.neutral200};
     color: ${({ theme: o }) => o.colors.neutral700};
   }
-`, r = ({ children: o, ...i }) => /* @__PURE__ */ s(d, { ...i, children: o });
-r.displayName = "CrumbLink";
-r.defaultProps = {
-  to: void 0
-};
-r.propTypes = {
-  children: e.node.isRequired,
-  to: e.string
-};
+`, t = ({ children: o, ...r }) => e(s, { ...r, children: o });
+t.displayName = "CrumbLink";
 export {
-  r as CrumbLink
+  t as CrumbLink
 };

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs

@@ -1,8 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),i=require("prop-types"),l=require("styled-components"),a=require("../SimpleMenu/SimpleMenu.cjs"),d=require("../../Button/Button.cjs"),o=e=>e&&e.__esModule?e:{default:e},r=o(i),c=o(l),p=c.default(d.Button)`
-  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("styled-components"),s=require("../SimpleMenu/SimpleMenu.cjs"),l=require("../../Button/Button.cjs"),r=e=>e&&e.__esModule?e:{default:e},i=r(o),c=i.default(l.Button)`
+  padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[2]}`};
+  height: unset;
 
   :hover,
   :focus {
     background-color: ${({theme:e})=>e.colors.neutral200};
   }
-`,t=({children:e,...n})=>u.jsx(a.SimpleMenu,{noBorder:!0,icon:u.jsx(s.CarretDown,{}),as:p,size:"S",...n,children:e});t.displayName="CrumbSimpleMenu";t.propTypes={"aria-label":r.default.string.isRequired,children:r.default.oneOfType([r.default.arrayOf(r.default.node),r.default.node]).isRequired};exports.CrumbSimpleMenu=t;
+`,t=({children:e,...u})=>n.jsx(s.SimpleMenu,{endIcon:null,as:c,size:"S",...u,children:e});t.displayName="CrumbSimpleMenu";exports.CrumbSimpleMenu=t;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -1,23 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { CarretDown as t } from "@strapi/icons";
-import o from "prop-types";
-import m from "styled-components";
-import { SimpleMenu as n } from "../SimpleMenu/SimpleMenu.js";
+import { jsx as r } from "react/jsx-runtime";
+import n from "styled-components";
+import { SimpleMenu as t } from "../SimpleMenu/SimpleMenu.js";
 import { Button as s } from "../../Button/Button.js";
-const a = m(s)`
-  padding: ${({ theme: r }) => `${r.spaces[1]} ${r.spaces[3]}`};
+const m = n(s)`
+  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[2]}`};
+  height: unset;
 
   :hover,
   :focus {
-    background-color: ${({ theme: r }) => r.colors.neutral200};
+    background-color: ${({ theme: o }) => o.colors.neutral200};
   }
-`, i = ({ children: r, ...p }) => /* @__PURE__ */ e(n, { noBorder: !0, icon: /* @__PURE__ */ e(t, {}), as: a, size: "S", ...p, children: r });
+`, i = ({ children: o, ...e }) => r(t, { endIcon: null, as: m, size: "S", ...e, children: o });
 i.displayName = "CrumbSimpleMenu";
-i.propTypes = {
-  "aria-label": o.string.isRequired,
-  children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired
-};
 export {
   i as CrumbSimpleMenu
 };

package/dist/v2/Breadcrumbs/Divider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../Box/Box.cjs"),t=require("../../Typography/Typography.cjs"),r=()=>e.jsx(i.Box,{"aria-hidden":!0,paddingLeft:1,paddingRight:1,children:e.jsx(t.Typography,{variant:"pi",textColor:"neutral500",children:"/"})});r.displayName="Divider";exports.Divider=r;

package/dist/v2/Breadcrumbs/Divider.js

@@ -1,9 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
 import { Box as i } from "../../Box/Box.js";
 import { Typography as t } from "../../Typography/Typography.js";
-const o = () => /* @__PURE__ */ r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: /* @__PURE__ */ r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
-o.displayName = "Divider";
+const e = () => r(i, { "aria-hidden": !0, paddingLeft: 1, paddingRight: 1, children: r(t, { variant: "pi", textColor: "neutral500", children: "/" }) });
+e.displayName = "Divider";
 export {
-  o as Divider
+  e as Divider
 };

package/dist/v2/SimpleMenu/Menu.cjs

@@ -1,4 +1,4 @@
-"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)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=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"),a=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 i=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,i.get?i:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),l=T(c),R=n.Root,v=s.forwardRef(({size:e,endIcon:r=t.jsx(d.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),...o},i)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(j.Button,{ref:i,type:"button",variant:"ghost",endIcon:r,paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...o})})),$=s.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...i},f)=>{const[p,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:p,loop:!0,asChild:!0,children:t.jsxs(h,{ref:f,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",...i,children:[e,t.jsx(m.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=l.default(u.Flex)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -6,20 +6,20 @@
   &::-webkit-scrollbar {
     display: none;
   }
-`,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`
+`,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(a.Typography,{children:o.children})}):t.jsx(b,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(a.Typography,{children:o.children})})}),g=({theme:e})=>c.css`
   text-align: left;
   width: 100%;
   border-radius: ${e.borderRadius};
   padding: ${e.spaces[2]} ${e.spaces[4]};
 
-  ${i.Typography} {
+  ${a.Typography} {
     color: inherit;
   }
 
   &[aria-disabled] {
     cursor: not-allowed;
 
-    ${i.Typography} {
+    ${a.Typography} {
       color: ${e.colors.neutral500};
     }
   }
@@ -35,9 +35,9 @@
       content: none;
     }
   }
-`,b=a.default(u.Flex)`
+`,b=l.default(u.Flex)`
   ${g}
-`,M=a.default(w.Link)`
+`,M=l.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}
-`,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)`
+`,q=s.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(L,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),L=l.default(a.Typography)`
   padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
-`,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)`
+`,O=n.Sub,_=s.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(a.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),B=l.default(b)`
   &[data-state='open'] {
     background-color: ${({theme:e})=>e.colors.primary100};
   }
-`,I=a.default(d.ChevronRight)`
+`,I=l.default(d.ChevronRight)`
   path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,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;
+`,D=s.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",overflow:"auto",...e})})})),P=R,F=v,E=$,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

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 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";
@@ -7,12 +7,12 @@ 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 { Flex as c } from "../../Flex/Flex.js";
 import { Typography as i } from "../../Typography/Typography.js";
-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 v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), ...t }, d) => e(n.Trigger, { asChild: !0, children: e(C, { ref: d, type: "button", variant: "ghost", endIcon: o, paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...t }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...d }, 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($, { id: o, width: "100%", height: "1px" })] }) }) });
-}), c = l(s)`
+  return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: s(u, { 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", ...d, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
+}), u = l(c)`
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -20,7 +20,7 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
   &::-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(g, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), h = ({ theme: r }) => w`
   text-align: left;
   width: 100%;
   border-radius: ${r.borderRadius};
@@ -49,8 +49,8 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
       content: none;
     }
   }
-`, h = l(s)`
-  ${u}
+`, g = l(c)`
+  ${h}
 `, 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 }) => x(r.colors, o, void 0)};
@@ -65,10 +65,10 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
     fill: currentColor;
   }
 
-  ${u}
+  ${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)`
+`, B = n.Sub, O = a(({ disabled: r = !1, ...o }, t) => e(n.SubTrigger, { asChild: !0, disabled: r, children: s(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(g)`
   &[data-state='open'] {
     background-color: ${({ theme: r }) => r.colors.primary100};
   }
@@ -76,7 +76,7 @@ const v = n.Root, k = a(({ size: r, ...o }, t) => e(n.Trigger, { asChild: !0, ch
   path {
     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(u, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...r }) }) })), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
 export {
   U as Content,
   X as Item,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -19,28 +19,28 @@
   ],
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
-    "@floating-ui/react-dom": "^1.3.0",
-    "@internationalized/date": "^3.2.0",
-    "@internationalized/number": "^3.2.0",
-    "@radix-ui/react-dismissable-layer": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "^2.0.4",
-    "@radix-ui/react-focus-scope": "1.0.2",
-    "@strapi/ui-primitives": "^1.8.0",
-    "@uiw/react-codemirror": "^4.20.4",
+    "@floating-ui/react-dom": "^2.0.1",
+    "@internationalized/date": "^3.3.0",
+    "@internationalized/number": "^3.2.1",
+    "@radix-ui/react-dismissable-layer": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-focus-scope": "1.0.3",
+    "@strapi/ui-primitives": "^1.8.2",
+    "@uiw/react-codemirror": "^4.21.7",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1",
-    "react-remove-scroll": "^2.5.5"
+    "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.8.0",
+    "@playwright/test": "1.35.1",
+    "@strapi/icons": "^1.8.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
     "cross-env": "^7.0.3",
     "react-router-dom": "^5.3.4",
-    "styled-components": "^5.3.10"
+    "styled-components": "^5.3.11"
   },
   "peerDependencies": {
     "@strapi/icons": "^1.5.0",
@@ -54,7 +54,7 @@
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "clean": "rimraf dist node_modules",
-    "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
+    "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
     "format": "yarn lint --fix",
     "test": "jest -c jest.config.js",
@@ -65,5 +65,5 @@
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "81283e7a5b2112d37be8e75caae5dbb883195349"
+  "gitHead": "770d9832b8a67d3dabd6ad3dec6408308cc35d99"
 }