@strapi/design-system 1.6.1 → 1.6.3

package/dist/v2/MainNav/NavFooter.cjs

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

package/dist/v2/MainNav/NavFooter.js

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

package/dist/v2/SimpleMenu/SimpleMenu.cjs

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

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/dist/v2/SubNav/SubNavHeader.cjs

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

package/dist/v2/SubNav/SubNavHeader.js

@@ -15,21 +15,21 @@ import { KeyboardKeys as j } from "../../helpers/keyboardKeys.js";
 const d = x(k)`
   width: ${24 / 16}rem;
   background-color: ${({ theme: l }) => l.colors.neutral200};
-`, u = ({ as: l, label: f, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
-  const [a, c] = L(!1), m = $(a), C = _("subnav-searchbar-clear", y), o = p(), i = p();
+`, f = ({ as: l, label: u, searchLabel: s, searchable: g, onChange: h, value: b, onClear: E, onSubmit: S, id: y }) => {
+  const [o, i] = L(!1), m = $(o), C = _(y), a = p(), c = p();
   w(() => {
-    a && o.current && o.current.focus(), m && !a && i.current && i.current.focus();
-  }, [a, m]);
+    o && a.current && a.current.focus(), m && !o && c.current && c.current.focus();
+  }, [o, m]);
   const v = () => {
-    c((t) => !t);
+    i((t) => !t);
   }, B = (t) => {
-    E(t), o.current.focus();
+    E(t), a.current.focus();
   }, T = (t) => {
-    t.relatedTarget?.id !== C && c(!1);
+    t.relatedTarget?.id !== C && i(!1);
   }, R = (t) => {
-    t.key === j.ESCAPE && c(!1);
+    t.key === j.ESCAPE && i(!1);
   };
-  return a ? /* @__PURE__ */ e.createElement(n, {
+  return o ? /* @__PURE__ */ e.createElement(n, {
     paddingLeft: 4,
     paddingTop: 5,
     paddingBottom: 2,
@@ -40,7 +40,7 @@ const d = x(k)`
     onChange: h,
     placeholder: "e.g: strapi-plugin-abcd",
     onKeyDown: R,
-    ref: o,
+    ref: a,
     onBlur: T,
     onClear: B,
     onSubmit: S,
@@ -60,8 +60,8 @@ const d = x(k)`
   }, /* @__PURE__ */ e.createElement(K, {
     variant: "beta",
     as: l
-  }, f), g && /* @__PURE__ */ e.createElement(P, {
-    ref: i,
+  }, u), g && /* @__PURE__ */ e.createElement(P, {
+    ref: c,
     onClick: v,
     label: s,
     icon: /* @__PURE__ */ e.createElement(D, null)
@@ -69,7 +69,7 @@ const d = x(k)`
     paddingTop: 4
   }, /* @__PURE__ */ e.createElement(d, null)));
 };
-u.defaultProps = {
+f.defaultProps = {
   as: "h2",
   searchable: !1,
   onChange() {
@@ -82,7 +82,7 @@ u.defaultProps = {
   searchLabel: "",
   id: void 0
 };
-u.propTypes = {
+f.propTypes = {
   as: r.string,
   id: r.string,
   label: r.string.isRequired,
@@ -94,5 +94,5 @@ u.propTypes = {
   value: r.string
 };
 export {
-  u as SubNavHeader
+  f as SubNavHeader
 };

package/dist/v2/SubNav/SubNavLinkSection.cjs

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

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -4,8 +4,8 @@ import a from "styled-components";
 import { CarretDown as h } from "@strapi/icons";
 import { Box as i } from "../../Box/Box.js";
 import { Flex as E } from "../../Flex/Flex.js";
-import { Typography as b } from "../../Typography/Typography.js";
-import { useId as y } from "../../helpers/useId.js";
+import { Typography as y } from "../../Typography/Typography.js";
+import { useId as b } from "../../helpers/useId.js";
 const k = a(i)`
   svg {
     height: ${4 / 16}rem;
@@ -13,19 +13,19 @@ const k = a(i)`
       fill: ${({ theme: t }) => t.colors.neutral700};
     }
   }
-`, v = a.button`
+`, x = a.button`
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`, x = a.div`
+`, S = a.div`
   display: flex;
   align-items: center;
   width: ${12 / 16}rem;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
 `, l = ({ label: t, children: p, id: s }) => {
-  const [r, m] = f(!0), d = y("subnav-list", s), c = () => {
+  const [r, m] = f(!0), d = b(s), c = () => {
     m((n) => !n);
   };
   return /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(k, {
@@ -35,17 +35,17 @@ const k = a(i)`
     paddingRight: 4
   }, /* @__PURE__ */ e.createElement(E, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ e.createElement(v, {
+  }, /* @__PURE__ */ e.createElement(x, {
     onClick: c,
     "aria-expanded": r,
     "aria-controls": d
-  }, /* @__PURE__ */ e.createElement(x, {
+  }, /* @__PURE__ */ e.createElement(S, {
     rotated: r
   }, /* @__PURE__ */ e.createElement(h, {
     "aria-hidden": !0
   })), /* @__PURE__ */ e.createElement(i, {
     paddingLeft: 2
-  }, /* @__PURE__ */ e.createElement(b, {
+  }, /* @__PURE__ */ e.createElement(y, {
     as: "span",
     fontWeight: "semiBold",
     textColor: "neutral800"

package/dist/v2/SubNav/SubNavSection.cjs

@@ -5,4 +5,4 @@
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId("subnav-list",f),S=()=>{g(o=>!o)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,b)=>t.default.createElement("li",{key:b},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,s=({collapsable:e,label:c,badgeLabel:o,children:p,id:f})=>{const[i,g]=n.useState(!0),d=B.useId(f),S=()=>{g(l=>!l)};return t.default.createElement(h.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:o?6:0},t.default.createElement(q.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),o&&t.default.createElement(y.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},o))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(l,b)=>t.default.createElement("li",{key:b},l))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;

package/dist/v2/SubNav/SubNavSection.js

@@ -4,8 +4,8 @@ import h from "styled-components";
 import { Box as l } from "../../Box/Box.js";
 import { Badge as E } from "../../Badge/Badge.js";
 import { Stack as S } from "../../Stack/Stack.js";
-import { SubNavSectionLabel as v } from "./SubNavSectionLabel.js";
-import { useId as k } from "../../helpers/useId.js";
+import { SubNavSectionLabel as k } from "./SubNavSectionLabel.js";
+import { useId as v } from "../../helpers/useId.js";
 const C = h(l)`
   svg {
     height: ${4 / 16}rem;
@@ -14,7 +14,7 @@ const C = h(l)`
     }
   }
 `, p = ({ collapsable: r, label: s, badgeLabel: o, children: d, id: m }) => {
-  const [a, c] = f(!0), n = k("subnav-list", m), u = () => {
+  const [a, c] = f(!0), n = v(m), u = () => {
     c((i) => !i);
   };
   return /* @__PURE__ */ e.createElement(S, {
@@ -27,7 +27,7 @@ const C = h(l)`
   }, /* @__PURE__ */ e.createElement(l, {
     position: "relative",
     paddingRight: o ? 6 : 0
-  }, /* @__PURE__ */ e.createElement(v, {
+  }, /* @__PURE__ */ e.createElement(k, {
     onClick: u,
     ariaExpanded: a,
     ariaControls: n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.1",
+    "@strapi/icons": "^1.6.3",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
@@ -58,7 +58,6 @@
   },
   "scripts": {
     "develop": "vite build --watch",
-    "prebuild": "rimraf dist",
     "build": "yarn build:prod",
     "build:prod": "vite build",
     "generate:types": "tsc --noEmit false --emitDeclarationOnly --declarationDir dist",
@@ -74,5 +73,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "d4148c932fc2b03cd2db769859f6b51b2d0738a4"
+  "gitHead": "475dab0bd887ffc86edd026365c78adad4ffbc36"
 }

package/dist/helpers/genId.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});let e=0;const t=()=>++e;exports.genId=t;

package/dist/helpers/genId.js

@@ -1,5 +0,0 @@
-let e = 0;
-const t = () => ++e;
-export {
-  t as genId
-};