@strapi/design-system 1.7.7 → 1.7.8

package/dist/v2/SubNav/SubNavHeader.js

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

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

package/dist/v2/SubNav/SubNavLink.js

@@ -1,13 +1,12 @@
-import { jsxs as s, jsx as o } from "react/jsx-runtime";
-import h from "react";
-import { Dot as y } from "@strapi/icons";
-import i from "prop-types";
-import l from "styled-components";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import u from "react";
+import { Dot as g } from "@strapi/icons";
+import e from "styled-components";
 import { Box as t } from "../../Box/Box.js";
-import { Typography as c } from "../../Typography/Typography.js";
-import { Flex as a } from "../../Flex/Flex.js";
+import { Typography as s } from "../../Typography/Typography.js";
+import { Flex as n } from "../../Flex/Flex.js";
 import { BaseLink as $ } from "../../BaseLink/BaseLink.js";
-const b = l(t)`
+const h = e(t)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -24,7 +23,7 @@ const b = l(t)`
       svg > * {
         fill: ${r.colors.primary700};
       }
-      ${c} {
+      ${s} {
         color: ${r.colors.primary700};
         font-weight: 500;
       }
@@ -34,51 +33,18 @@ const b = l(t)`
   &:focus-visible {
     outline-offset: -2px;
   }
-`, p = l(y)`
+`, a = e(g)`
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: r, $active: e }) => e ? r.colors.primary600 : r.colors.neutral600};
+    fill: ${({ theme: r, $active: i }) => i ? r.colors.primary600 : r.colors.neutral600};
   }
-`, v = l.div`
+`, y = e.div`
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, n = h.forwardRef(({ children: r, icon: e, withBullet: d, as: m, isSubSectionChild: f, ...u }, g) => /* @__PURE__ */ s(
-  b,
-  {
-    as: m,
-    icon: e,
-    background: "neutral100",
-    paddingLeft: f ? 9 : 7,
-    paddingBottom: 2,
-    paddingTop: 2,
-    ref: g,
-    ...u,
-    children: [
-      /* @__PURE__ */ s(a, { children: [
-        e ? /* @__PURE__ */ o(v, { children: e }) : /* @__PURE__ */ o(p, {}),
-        /* @__PURE__ */ o(t, { paddingLeft: 2, children: /* @__PURE__ */ o(c, { as: "span", children: r }) })
-      ] }),
-      d && /* @__PURE__ */ o(t, { as: a, paddingRight: 4, children: /* @__PURE__ */ o(p, { $active: !0 }) })
-    ]
-  }
-));
-n.displayName = "SubNavLink";
-n.defaultProps = {
-  as: $,
-  icon: null,
-  isSubSectionChild: !1,
-  withBullet: !1
-};
-n.propTypes = {
-  as: i.elementType,
-  children: i.node.isRequired,
-  icon: i.element,
-  isSubSectionChild: i.bool,
-  withBullet: i.bool
-};
+`, R = u.forwardRef(({ children: r, icon: i = null, withBullet: c = !1, as: p = $, isSubSectionChild: d = !1, ...f }, m) => l(h, { as: p, icon: i, background: "neutral100", paddingLeft: d ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: m, ...f, children: [l(n, { children: [i ? o(y, { children: i }) : o(a, {}), o(t, { paddingLeft: 2, children: o(s, { as: "span", children: r }) })] }), c && o(t, { as: n, paddingRight: 4, children: o(a, { $active: !0 }) })] }));
 export {
-  n as SubNavLink
+  R as SubNavLink
 };

package/dist/v2/SubNav/SubNavLinkSection.cjs

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

package/dist/v2/SubNav/SubNavLinkSection.js

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

package/dist/v2/SubNav/SubNavSection.cjs

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

package/dist/v2/SubNav/SubNavSection.js

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

package/dist/v2/SubNav/SubNavSectionLabel.cjs

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

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -1,47 +1,19 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import "react";
-import { CarretDown as g } from "@strapi/icons";
-import o from "prop-types";
-import p from "styled-components";
-import { Flex as f } from "../../Flex/Flex.js";
-import { Box as a } from "../../Box/Box.js";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { CarretDown as m } from "@strapi/icons";
+import d from "styled-components";
+import { Flex as s } from "../../Flex/Flex.js";
+import { Box as o } from "../../Box/Box.js";
 import { Typography as i } from "../../Typography/Typography.js";
-const l = p(f)`
+const a = d(s)`
   border: none;
   padding: 0;
   background: transparent;
-`, u = p.div`
+`, g = d.div`
   display: flex;
   align-items: center;
   transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, d = ({ collapsable: t, label: e, onClick: s, ariaExpanded: n, ariaControls: c }) => t ? /* @__PURE__ */ m(
-  l,
-  {
-    as: "button",
-    onClick: s,
-    "aria-expanded": n,
-    "aria-controls": c,
-    textAlign: "left",
-    children: [
-      /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }),
-      t && /* @__PURE__ */ r(u, { rotated: n, children: /* @__PURE__ */ r(g, { "aria-hidden": !0 }) })
-    ]
-  }
-) : /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(a, { paddingRight: 1, children: /* @__PURE__ */ r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
-d.defaultProps = {
-  ariaControls: null,
-  ariaExpanded: null,
-  collapsable: !1,
-  onClick() {
-  }
-};
-d.propTypes = {
-  ariaControls: o.string,
-  ariaExpanded: o.bool,
-  collapsable: o.bool,
-  label: o.string.isRequired,
-  onClick: o.func
-};
+`, y = ({ collapsable: t = !1, label: e, onClick: l = () => {
+}, ariaExpanded: n, ariaControls: p }) => t ? c(a, { as: "button", onClick: l, "aria-expanded": n, "aria-controls": p, textAlign: "left", children: [r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }), t && r(g, { rotated: n, children: r(m, { "aria-hidden": !0 }) })] }) : r(a, { children: r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
 export {
-  d as SubNavSectionLabel
+  y as SubNavSectionLabel
 };

package/dist/v2/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),l=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),a=({children:t,spacing:n=2,horizontal:r=!1,...i})=>e.jsx(l.Box,{paddingTop:2,paddingBottom:4,children:e.jsx(u.Flex,{as:"ol",gap:n,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:s.Children.map(t,(o,c)=>e.jsx("li",{children:o},c))})});exports.SubNavSections=a;

package/dist/v2/SubNav/SubNavSections.js

@@ -1,22 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { Children as m } from "react";
-import d from "prop-types";
+import { Children as p } from "react";
 import { Box as c } from "../../Box/Box.js";
-import { Flex as l } from "../../Flex/Flex.js";
-const s = ({ children: e, spacing: i = 2, horizontal: o = !1, ...p }) => /* @__PURE__ */ r(c, { paddingTop: 2, paddingBottom: 4, children: /* @__PURE__ */ r(
-  l,
-  {
-    as: "ol",
-    gap: i,
-    direction: o ? "row" : "column",
-    alignItems: o ? "center" : "stretch",
-    ...p,
-    children: m.map(e, (t, n) => /* @__PURE__ */ r("li", { children: t }, n))
-  }
-) });
-s.propTypes = {
-  children: d.node.isRequired
-};
+import { Flex as d } from "../../Flex/Flex.js";
+const g = ({ children: e, spacing: t = 2, horizontal: o = !1, ...i }) => r(c, { paddingTop: 2, paddingBottom: 4, children: r(d, { as: "ol", gap: t, direction: o ? "row" : "column", alignItems: o ? "center" : "stretch", ...i, children: p.map(e, (n, m) => r("li", { children: n }, m)) }) });
 export {
-  s as SubNavSections
+  g as SubNavSections
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -24,7 +24,7 @@
     "@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.7.7",
+    "@strapi/ui-primitives": "^1.7.8",
     "@uiw/react-codemirror": "^4.19.16",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.33.0",
-    "@strapi/icons": "^1.7.7",
+    "@strapi/icons": "^1.7.8",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -64,5 +64,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": "95a02179f945511d2c5fb50efb880ed13f3169c9"
+  "gitHead": "d82da913a5a9f8d8abd785e95f893fa4100d5793"
 }

package/dist/Grid/GridContext.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({gap:0,gridCols:12}),o=()=>e.useContext(t);exports.GridContext=t;exports.useGrid=o;

package/dist/Grid/GridContext.js

@@ -1,6 +0,0 @@
-import { createContext as t, useContext as o } from "react";
-const e = t({ gap: 0, gridCols: 12 }), n = () => o(e);
-export {
-  e as GridContext,
-  n as useGrid
-};