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

package/dist/v2/MainNav/NavLink.cjs

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),$=require("react"),o=require("prop-types"),a=require("styled-components"),x=require("./MainNavContext.cjs"),v=require("../../Box/Box.cjs"),b=require("../../BaseLink/BaseLink.cjs"),s=require("../../Typography/Typography.cjs"),y=require("../../Flex/Flex.cjs"),j=require("../../Badge/Badge.cjs"),f=require("../../Tooltip/Tooltip.cjs"),p=a(v.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),$=require("react"),x=require("prop-types"),v=require("styled-components"),b=require("./MainNavContext.cjs"),j=require("../../Box/Box.cjs"),m=require("../../BaseLink/BaseLink.cjs"),o=require("../../Typography/Typography.cjs"),y=require("../../Flex/Flex.cjs"),q=require("../../Badge/Badge.cjs"),T=require("../../Tooltip/Tooltip.cjs"),l=e=>e&&e.__esModule?e:{default:e},k=l($),a=l(x),n=l(v),p=n.default(j.Box)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,u=a(b.BaseLink)`
+`,g=n.default(m.BaseLink)`
   position: relative;
   text-decoration: none;
   display: block;
   border-radius: ${({theme:e})=>e.borderRadius};
   background: ${({theme:e})=>e.colors.neutral0};
 
-  ${s.Typography} {
+  ${o.Typography} {
     color: ${({theme:e})=>e.colors.neutral600};
   }
 
@@ -21,7 +21,7 @@
   &:hover {
     background: ${({theme:e})=>e.colors.neutral100};
 
-    ${s.Typography} {
+    ${o.Typography} {
       color: ${({theme:e})=>e.colors.neutral700};
     }
 
@@ -37,22 +37,22 @@
       fill: ${({theme:e})=>e.colors.primary600};
     }
 
-    ${s.Typography} {
+    ${o.Typography} {
       color: ${({theme:e})=>e.colors.primary600};
       font-weight: 500;
     }
   }
-`,g=a(y.Flex)`
+`,h=n.default(y.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,h=a(j.Badge)`
-  ${({theme:e,condensed:i})=>i&&`
+`,f=n.default(q.Badge)`
+  ${({theme:e,condensed:s})=>s&&`
 	  position: absolute;
     // Values based on visual aspect 
     top: -${e.spaces[3]};
     right:  -${e.spaces[1]};
   `}
 
-  ${s.Typography} {
+  ${o.Typography} {
     //find a solution to remove !important
     color: ${({theme:e})=>e.colors.neutral0} !important;
     line-height: 0;
@@ -66,4 +66,4 @@
   padding: ${({theme:e})=>`0 ${e.spaces[2]}`};
   border-radius: ${({theme:e})=>e.spaces[10]};
   background: ${({theme:e})=>e.colors.primary600};
-`,t=$.forwardRef(({children:e,icon:i,badgeContent:n,badgeAriaLabel:c,...l},d)=>x.useMainNav()?r.jsx(u,{ref:d,...l,children:r.jsx(f.Tooltip,{position:"right",label:e,children:r.jsxs(g,{as:"span",justifyContent:"center",children:[r.jsx(p,{"aria-hidden":!0,paddingRight:0,as:"span",children:i}),n&&r.jsx(h,{condensed:!0,"aria-label":c,children:n})]})})}):r.jsx(u,{ref:d,...l,children:r.jsxs(g,{as:"span",justifyContent:"space-between",children:[r.jsxs(y.Flex,{children:[r.jsx(p,{"aria-hidden":!0,paddingRight:3,as:"span",children:i}),r.jsx(s.Typography,{children:e})]}),n&&r.jsx(h,{justifyContent:"center","aria-label":c,children:n})]})}));t.displayName="NavLink";t.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};t.propTypes={badgeAriaLabel:o.string,badgeContent:o.oneOfType([o.string,o.number]),children:o.string.isRequired,icon:o.node.isRequired};exports.NavLink=t;
+`,i=k.default.forwardRef(({children:e,icon:s,badgeContent:t,badgeAriaLabel:c,...d},u)=>b.useMainNav()?r.jsx(g,{ref:u,...d,children:r.jsx(T.Tooltip,{position:"right",label:e,children:r.jsxs(h,{as:"span",justifyContent:"center",children:[r.jsx(p,{"aria-hidden":!0,paddingRight:0,as:"span",children:s}),t&&r.jsx(f,{condensed:!0,"aria-label":c,children:t})]})})}):r.jsx(g,{ref:u,...d,children:r.jsxs(h,{as:"span",justifyContent:"space-between",children:[r.jsxs(y.Flex,{children:[r.jsx(p,{"aria-hidden":!0,paddingRight:3,as:"span",children:s}),r.jsx(o.Typography,{children:e})]}),t&&r.jsx(f,{justifyContent:"center","aria-label":c,children:t})]})}));i.displayName="NavLink";i.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};i.propTypes={badgeAriaLabel:a.default.string,badgeContent:a.default.oneOfType([a.default.string,a.default.number]),children:a.default.string.isRequired,icon:a.default.node.isRequired};exports.NavLink=i;

package/dist/v2/MainNav/NavSection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),l=require("prop-types"),x=require("./MainNavContext.cjs"),r=require("../../Flex/Flex.cjs"),u=require("../../Box/Box.cjs"),g=require("../../Divider/Divider.cjs"),h=require("../../VisuallyHidden/VisuallyHidden.cjs"),m=require("../../Typography/Typography.cjs"),p=({label:t,children:d,horizontal:n=!1,spacing:a=2,...c})=>x.useMainNav()?e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(u.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(g.Divider,{}),e.jsx(h.VisuallyHidden,{children:e.jsx("span",{children:t})})]}),e.jsx(r.Flex,{as:"ul",gap:a,direction:n?"row":"column",alignItems:n?"center":"stretch",...c,children:o.Children.map(d,(i,s)=>e.jsx("li",{children:i},s))})]}):e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(u.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(m.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),e.jsx(r.Flex,{as:"ul",gap:a,direction:n?"row":"column",alignItems:n?"center":"stretch",...c,children:o.Children.map(d,(i,s)=>e.jsx("li",{children:i},s))})]});p.propTypes={children:l.node.isRequired,label:l.string.isRequired};exports.NavSection=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),x=require("prop-types"),g=require("./MainNavContext.cjs"),i=require("../../Flex/Flex.cjs"),l=require("../../Box/Box.cjs"),h=require("../../Divider/Divider.cjs"),m=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Typography/Typography.cjs"),q=n=>n&&n.__esModule?n:{default:n},u=q(x),p=({label:n,children:d,horizontal:r=!1,spacing:a=2,...c})=>g.useMainNav()?e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(h.Divider,{}),e.jsx(m.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]}):e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(j.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]});p.propTypes={children:u.default.node.isRequired,label:u.default.string.isRequired};exports.NavSection=p;

package/dist/v2/MainNav/NavSections.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),l=require("prop-types"),u=require("styled-components"),a=require("../../Box/Box.cjs"),p=require("../../Flex/Flex.cjs"),g=u(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),u=require("prop-types"),a=require("styled-components"),p=require("../../Box/Box.cjs"),f=require("../../Flex/Flex.cjs"),o=e=>e&&e.__esModule?e:{default:e},g=o(u),x=o(a),y=x.default(p.Box)`
   flex-grow: 1;
   overflow-y: auto;
-`,t=({children:o,spacing:n=4,horizontal:r=!1,...i})=>e.jsx(g,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:e.jsx(p.Flex,{as:"ul",gap:n,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:d.Children.map(o,(s,c)=>e.jsx("li",{children:s},c))})});t.propTypes={children:l.node.isRequired};exports.NavSections=t;
+`,n=({children:e,spacing:s=4,horizontal:r=!1,...i})=>t.jsx(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(f.Flex,{as:"ul",gap:s,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:c.Children.map(e,(d,l)=>t.jsx("li",{children:d},l))})});n.propTypes={children:g.default.node.isRequired};exports.NavSections=n;

package/dist/v2/MainNav/NavUser.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),s=require("prop-types"),p=require("styled-components"),x=require("./MainNavContext.cjs"),a=require("../../Box/Box.cjs"),y=require("../../Flex/Flex.cjs"),o=require("../../Avatar/Avatar.cjs"),v=require("../../VisuallyHidden/VisuallyHidden.cjs"),g=require("../../Typography/Typography.cjs"),j=p(a.Box)`
-  border-top: 1px solid ${({theme:r})=>r.colors.neutral150};
-`,i=c.forwardRef(({src:r,children:t,initials:d,...l},u)=>{const n=x.useMainNav();return e.jsx(j,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...l,children:e.jsxs(y.Flex,{as:"button",justifyContent:n?"center":void 0,ref:u,children:[r?e.jsx(o.Avatar,{src:r,alt:"","aria-hidden":!0}):e.jsx(o.Initials,{children:d}),n?e.jsx(v.VisuallyHidden,{children:e.jsx("span",{children:t})}):e.jsx(a.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:e.jsx(g.Typography,{ellipsis:!0,textColor:"neutral600",children:t})})]})})});i.displayName="NavUser";i.defaultProps={src:void 0,initials:void 0};i.propTypes={children:s.node.isRequired,initials:s.node,src:s.string};exports.NavUser=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),x=require("prop-types"),f=require("styled-components"),y=require("./MainNavContext.cjs"),d=require("../../Box/Box.cjs"),v=require("../../Flex/Flex.cjs"),a=require("../../Avatar/Avatar.cjs"),g=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},q=i(p),s=i(x),h=i(f),_=h.default(d.Box)`
+  border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
+`,r=q.default.forwardRef(({src:e,children:n,initials:l,...u},c)=>{const o=y.useMainNav();return t.jsx(_,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...u,children:t.jsxs(v.Flex,{as:"button",justifyContent:o?"center":void 0,ref:c,children:[e?t.jsx(a.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(a.Initials,{children:l}),o?t.jsx(g.VisuallyHidden,{children:t.jsx("span",{children:n})}):t.jsx(d.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(j.Typography,{ellipsis:!0,textColor:"neutral600",children:n})})]})})});r.displayName="NavUser";r.defaultProps={src:void 0,initials:void 0};r.propTypes={children:s.default.node.isRequired,initials:s.default.node,src:s.default.string};exports.NavUser=r;

package/dist/v2/Pagination/Pagination.cjs

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),o=require("prop-types"),c=require("styled-components"),g=require("./PaginationContext.cjs"),b=require("../../Flex/Flex.cjs");function f(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const s=f(p),P=c.nav``,m=c(b.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),g=require("prop-types"),b=require("styled-components"),P=require("./PaginationContext.cjs"),_=require("../../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e};function m(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const l=m(p),a=s(g),u=s(b),j=u.default.nav``,x=u.default(_.Flex)`
   & > * + * {
     margin-left: ${({theme:e})=>e.spaces[1]};
   }
-`,a=({children:e,label:n,activePage:t,pageCount:r})=>{const l=s.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return i.jsx(g.PaginationContext.Provider,{value:l,children:i.jsx(P,{"aria-label":n,children:i.jsx(m,{as:"ul",children:s.Children.map(e,(u,d)=>i.jsx("li",{children:u},d))})})})};a.defaultProps={label:"pagination"};a.propTypes={activePage:o.number.isRequired,children:o.node.isRequired,label:o.string,pageCount:o.number.isRequired};exports.Pagination=a;
+`,o=({children:e,label:n,activePage:t,pageCount:r})=>{const c=l.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return i.jsx(P.PaginationContext.Provider,{value:c,children:i.jsx(j,{"aria-label":n,children:i.jsx(x,{as:"ul",children:l.Children.map(e,(d,f)=>i.jsx("li",{children:d},f))})})})};o.defaultProps={label:"pagination"};o.propTypes={activePage:a.default.number.isRequired,children:a.default.node.isRequired,label:a.default.string,pageCount:a.default.number.isRequired};exports.Pagination=o;

package/dist/v2/Pagination/components.cjs

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),x=require("@strapi/icons"),d=require("prop-types"),t=require("styled-components"),u=require("./PaginationContext.cjs"),k=require("../../themes/utils.cjs"),L=require("../../Typography/Typography.cjs"),j=require("../../BaseLink/BaseLink.cjs"),l=require("../../VisuallyHidden/VisuallyHidden.cjs"),y=t(L.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;
-`,q={active:!0},p=t(j.BaseLink).withConfig({shouldForwardProp:(e,i)=>!q[e]&&i(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:i})=>e?i.shadows.filterShadow:void 0};
   text-decoration: none;
   display: flex;
 
-  ${k.buttonFocusStyle}
-`,m=t(p)`
+  ${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};
   }
-`,P=t(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}
-`,w=t(p)`
+`,_=n.default(h)`
   color: ${({theme:e})=>e.colors.neutral800};
-`,h=c.forwardRef(({children:e,...i},o)=>{const{activePage:n}=u.usePagination(),s=n===1;return r.jsxs(P,{ref:o,"aria-disabled":s,tabIndex:s?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(x.ChevronLeft,{"aria-hidden":!0})]})});h.displayName="PreviousLink";const v=c.forwardRef(({children:e,...i},o)=>{const{activePage:n,pageCount:s}=u.usePagination(),a=n===s;return r.jsxs(P,{ref:o,"aria-disabled":a,tabIndex:a?-1:void 0,...i,children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(x.ChevronRight,{"aria-hidden":!0})]})});v.displayName="NextLink";const g=c.forwardRef(({number:e,children:i,...o},n)=>{const{activePage:s}=u.usePagination(),a=s===e;return r.jsxs(m,{ref:n,...o,active:a,children:[r.jsx(l.VisuallyHidden,{children:i}),r.jsx(y,{"aria-hidden":!0,variant:"pi",fontWeight:a?"bold":null,children:e})]})});g.displayName="PageLink";const b=({children:e,...i})=>r.jsxs(w,{...i,as:"div",children:[r.jsx(l.VisuallyHidden,{children:e}),r.jsx(y,{"aria-hidden":!0,variant:"pi",children:"…"})]});g.propTypes={children:d.node.isRequired,number:d.number.isRequired};const f={children:d.node.isRequired};v.propTypes=f;h.propTypes=f;b.propTypes={children:d.node.isRequired};exports.Dots=b;exports.NextLink=v;exports.PageLink=g;exports.PreviousLink=h;
+`,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/SimpleMenu/Menu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=require("react"),x=require("@radix-ui/react-dropdown-menu"),c=require("@strapi/icons"),i=require("styled-components"),y=require("../../helpers/theme.cjs"),S=require("../Link/Link.cjs"),w=require("../../Button/Button.cjs"),j=require("../../Box/Box.cjs"),d=require("../../Flex/Flex.cjs"),s=require("../../Typography/Typography.cjs");function m(e){const t=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(t,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return t.default=e,Object.freeze(t)}const n=m(x),T=n.Root,C=a.forwardRef(({size:e,...t},o)=>r.jsx(n.Trigger,{asChild:!0,children:r.jsx(w.Button,{ref:o,type:"button",variant:"ghost",endIcon:r.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,...t})})),R=a.forwardRef(({children:e,intersectionId:t,popoverPlacement:o="bottom-start",...l},b)=>{const[p,f]=o.split("-");return r.jsx(n.Portal,{children:r.jsx(n.Content,{align:f,side:p,loop:!0,asChild:!0,children:r.jsxs(u,{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,r.jsx(j.Box,{id:t,width:"100%",height:"1px"})]})})})}),u=i(d.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,20 +6,20 @@
   &::-webkit-scrollbar {
     display: none;
   }
-`,$=({onSelect:e,disabled:t=!1,...o})=>r.jsx(n.Item,{asChild:!0,onSelect:e,disabled:t,children:o.isLink||o.isExternal?r.jsx(v,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:r.jsx(s.Typography,{children:o.children})}):r.jsx(g,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:r.jsx(s.Typography,{children:o.children})})}),h=({theme:e})=>i.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};
   padding: ${e.spaces[2]} ${e.spaces[4]};
 
-  ${s.Typography} {
+  ${i.Typography} {
     color: inherit;
   }
 
   &[aria-disabled] {
     cursor: not-allowed;
 
-    ${s.Typography} {
+    ${i.Typography} {
       color: ${e.colors.neutral500};
     }
   }
@@ -35,11 +35,11 @@
       content: none;
     }
   }
-`,g=i(d.Flex)`
-  ${h}
-`,v=i(S.Link)`
+`,b=a.default(u.Flex)`
+  ${g}
+`,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:t})=>y.extractStyleFromTheme(e.colors,t,void 0)};
+  color: ${({theme:e,color:r})=>S.extractStyleFromTheme(e.colors,r,void 0)};
   text-decoration: none;
 
   &:hover {
@@ -51,15 +51,15 @@
     fill: currentColor;
   }
 
-  ${h}
-`,k=a.forwardRef((e,t)=>r.jsx(n.Label,{asChild:!0,children:r.jsx(M,{ref:t,variant:"sigma",textColor:"neutral600",...e})})),M=i(s.Typography)`
+  ${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)`
   padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
-`,q=n.Sub,L=a.forwardRef(({disabled:e=!1,...t},o)=>r.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:r.jsxs(O,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...t,children:[r.jsx(s.Typography,{children:t.children}),r.jsx(B,{height:12,width:12})]})})),O=i(g)`
+`,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};
   }
-`,B=i(c.ChevronRight)`
+`,I=a.default(d.ChevronRight)`
   path {
     fill: ${({theme:e})=>e.colors.neutral500};
   }
-`,I=a.forwardRef((e,t)=>r.jsx(n.Portal,{children:r.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:r.jsx(u,{ref:t,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),D=T,P=C,F=R,E=$,W=k,_=q,H=L,A=I;exports.Content=F;exports.Item=E;exports.Label=W;exports.Root=D;exports.SubContent=A;exports.SubRoot=_;exports.SubTrigger=H;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/SubNav/SubNav.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const s=require("prop-types"),a=require("styled-components"),u=require("../../Grid/Grid.cjs"),e=`${232/16}rem`,n=a(u.Grid)`
-  width: ${e};
-  background: ${({theme:r})=>r.colors.neutral100};
+"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;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
+  border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
   z-index: 1;
-`,t=({ariaLabel:r,...i})=>o.jsx(n,{"aria-label":r,as:"nav",...i});t.propTypes={ariaLabel:s.string.isRequired};exports.SubNav=t;exports.subNavWidth=e;
+`,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/SubNavHeader.cjs

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

package/dist/v2/SubNav/SubNavLink.cjs

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

package/dist/v2/SubNav/SubNavLinkSection.cjs

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

package/dist/v2/SubNav/SubNavSection.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("prop-types"),b=require("styled-components"),S=require("./SubNavSectionLabel.cjs"),q=require("../../hooks/useId.cjs"),d=require("../../Box/Box.cjs"),j=require("../../Flex/Flex.cjs"),v=require("../../Badge/Badge.cjs"),m=b(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),b=require("prop-types"),S=require("styled-components"),q=require("./SubNavSectionLabel.cjs"),j=require("../../hooks/useId.cjs"),d=require("../../Box/Box.cjs"),v=require("../../Flex/Flex.cjs"),m=require("../../Badge/Badge.cjs"),u=e=>e&&e.__esModule?e:{default:e},r=u(b),y=u(S),_=y.default(d.Box)`
   svg {
     height: ${4/16}rem;
     path {
-      fill: ${({theme:i})=>i.colors.neutral500};
+      fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,o=({collapsable:i,label:c,badgeLabel:r,children:u,id:p})=>{const[s,g]=a.useState(!0),l=q.useId(p),h=()=>{g(n=>!n)};return e.jsxs(j.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(m,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4,children:e.jsxs(d.Box,{position:"relative",paddingRight:r?6:0,children:[e.jsx(S.SubNavSectionLabel,{onClick:h,ariaExpanded:s,ariaControls:l,collapsable:i,label:c}),r&&e.jsx(v.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:r})]})}),(!i||s)&&e.jsx("ol",{id:l,children:a.Children.map(u,(n,x)=>e.jsx("li",{children:n},x))})]})};o.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};o.propTypes={badgeLabel:t.string,children:t.node.isRequired,collapsable:t.bool,id:t.string,label:t.string.isRequired};exports.SubNavSection=o;
+`,o=({collapsable:e,label:c,badgeLabel:i,children:p,id:g})=>{const[s,f]=a.useState(!0),l=j.useId(g),h=()=>{f(n=>!n)};return t.jsxs(v.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4,children:t.jsxs(d.Box,{position:"relative",paddingRight:i?6:0,children:[t.jsx(q.SubNavSectionLabel,{onClick:h,ariaExpanded:s,ariaControls:l,collapsable:e,label:c}),i&&t.jsx(m.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)",children:i})]})}),(!e||s)&&t.jsx("ol",{id:l,children:a.Children.map(p,(n,x)=>t.jsx("li",{children:n},x))})]})};o.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};o.propTypes={badgeLabel:r.default.string,children:r.default.node.isRequired,collapsable:r.default.bool,id:r.default.string,label:r.default.string.isRequired};exports.SubNavSection=o;

package/dist/v2/SubNav/SubNavSectionLabel.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const p=require("@strapi/icons"),r=require("prop-types"),c=require("styled-components"),x=require("../../Flex/Flex.cjs"),i=require("../../Box/Box.cjs"),s=require("../../Typography/Typography.cjs"),l=c(x.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const x=require("@strapi/icons"),f=require("prop-types"),g=require("styled-components"),b=require("../../Flex/Flex.cjs"),l=require("../../Box/Box.cjs"),i=require("../../Typography/Typography.cjs"),d=e=>e&&e.__esModule?e:{default:e},t=d(f),u=d(g),s=u.default(b.Flex)`
   border: none;
   padding: 0;
   background: transparent;
-`,g=c.div`
+`,y=u.default.div`
   display: flex;
   align-items: center;
-  transform: rotateX(${({rotated:n})=>n?"0deg":"180deg"});
-`,o=({collapsable:n,label:t,onClick:d,ariaExpanded:a,ariaControls:u})=>n?e.jsxs(l,{as:"button",onClick:d,"aria-expanded":a,"aria-controls":u,textAlign:"left",children:[e.jsx(i.Box,{paddingRight:1,children:e.jsx(s.Typography,{variant:"sigma",textColor:"neutral600",children:t})}),n&&e.jsx(g,{rotated:a,children:e.jsx(p.CarretDown,{"aria-hidden":!0})})]}):e.jsx(l,{children:e.jsx(i.Box,{paddingRight:1,children:e.jsx(s.Typography,{variant:"sigma",textColor:"neutral600",children:t})})});o.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};o.propTypes={ariaControls:r.string,ariaExpanded:r.bool,collapsable:r.bool,label:r.string.isRequired,onClick:r.func};exports.SubNavSectionLabel=o;
+  transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
+`,a=({collapsable:e,label:n,onClick:c,ariaExpanded:o,ariaControls:p})=>e?r.jsxs(s,{as:"button",onClick:c,"aria-expanded":o,"aria-controls":p,textAlign:"left",children:[r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e&&r.jsx(y,{rotated:o,children:r.jsx(x.CarretDown,{"aria-hidden":!0})})]}):r.jsx(s,{children:r.jsx(l.Box,{paddingRight:1,children:r.jsx(i.Typography,{variant:"sigma",textColor:"neutral600",children:n})})});a.defaultProps={ariaControls:null,ariaExpanded:null,collapsable:!1,onClick(){}};a.propTypes={ariaControls:t.default.string,ariaExpanded:t.default.bool,collapsable:t.default.bool,label:t.default.string.isRequired,onClick:t.default.func};exports.SubNavSectionLabel=a;

package/dist/v2/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),d=require("prop-types"),l=require("../../Box/Box.cjs"),a=require("../../Flex/Flex.cjs"),n=({children:t,spacing:i=2,horizontal:r=!1,...o})=>e.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:e.jsx(a.Flex,{as:"ol",gap:i,direction:r?"row":"column",alignItems:r?"center":"stretch",...o,children:u.Children.map(t,(s,c)=>e.jsx("li",{children:s},c))})});n.propTypes={children:d.node.isRequired};exports.SubNavSections=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("react"),l=require("prop-types"),d=require("../../Box/Box.cjs"),a=require("../../Flex/Flex.cjs"),p=e=>e&&e.__esModule?e:{default:e},x=p(l),n=({children:e,spacing:o=2,horizontal:t=!1,...s})=>r.jsx(d.Box,{paddingTop:2,paddingBottom:4,children:r.jsx(a.Flex,{as:"ol",gap:o,direction:t?"row":"column",alignItems:t?"center":"stretch",...s,children:u.Children.map(e,(i,c)=>r.jsx("li",{children:i},c))})});n.propTypes={children:x.default.node.isRequired};exports.SubNavSections=n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.1",
+  "version": "1.7.2-alpha.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,14 +24,14 @@
     "@radix-ui/react-dismissable-layer": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@strapi/ui-primitives": "^1.7.1",
+    "@strapi/ui-primitives": "^1.7.2-alpha.0",
     "@uiw/react-codemirror": "^4.19.16",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.1",
+    "@strapi/icons": "^1.7.2-alpha.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -62,5 +62,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": "eeec25c8dd4e89a430dbcf97bbdf05a744d29a56"
+  "gitHead": "26487d141d9fa502e9f222f07bc57bba41a34e2a"
 }