@strapi/design-system 1.7.0 → 1.7.1

package/dist/v2/MainNav/NavBrand.js

@@ -1,34 +1,50 @@
-import e from "react";
-import r from "prop-types";
-import c from "styled-components";
-import { useMainNav as g } from "./MainNavContext.js";
-import { BaseLink as u } from "../../BaseLink/BaseLink.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import f from "react";
+import d from "prop-types";
+import h from "styled-components";
+import { useMainNav as u } from "./MainNavContext.js";
+import { BaseLink as g } from "../../BaseLink/BaseLink.js";
 import { Box as n } from "../../Box/Box.js";
-import { Flex as f } from "../../Flex/Flex.js";
-import { Typography as p } from "../../Typography/Typography.js";
-import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
-const s = c.div`
-  border-radius: ${({ theme: t }) => t.borderRadius};
+import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Flex as x } from "../../Flex/Flex.js";
+import { Typography as l } from "../../Typography/Typography.js";
+const c = h.div`
+  border-radius: ${({ theme: r }) => r.borderRadius};
 
   svg,
   img {
-    height: ${({ condensed: t }) => t ? `${40 / 16}rem` : `${32 / 16}rem`};
-    width: ${({ condensed: t }) => t ? `${40 / 16}rem` : `${32 / 16}rem`};
+    height: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
+    width: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
   }
-`, E = c(u)`
+`, R = h(g)`
   text-decoration: unset;
   color: inherit;
-`, a = e.forwardRef(({ workplace: t, title: i, icon: o, ...d }, m) => g() ? /* @__PURE__ */ e.createElement(u, { ref: m, ...d }, /* @__PURE__ */ e.createElement(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(s, { condensed: !0 }, o, /* @__PURE__ */ e.createElement(l, null, /* @__PURE__ */ e.createElement("span", null, i), /* @__PURE__ */ e.createElement("span", null, t))))) : /* @__PURE__ */ e.createElement(E, { ref: m, ...d }, /* @__PURE__ */ e.createElement(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement(s, { "aria-hidden": !0, tabIndex: -1 }, o), /* @__PURE__ */ e.createElement(n, { paddingLeft: 2 }, /* @__PURE__ */ e.createElement(p, { fontWeight: "bold", textColor: "neutral800", as: "span" }, i, /* @__PURE__ */ e.createElement(l, { as: "span" }, t)), /* @__PURE__ */ e.createElement(p, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0 }, t))))));
-a.displayName = "NavBrand";
-a.defaultProps = {
+`, t = f.forwardRef(({ workplace: r, title: o, icon: a, ...p }, s) => u() ? /* @__PURE__ */ e(g, { ref: s, ...p, children: /* @__PURE__ */ e(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(c, { condensed: !0, children: [
+  a,
+  /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ e("span", { children: o }),
+    /* @__PURE__ */ e("span", { children: r })
+  ] })
+] }) }) }) : /* @__PURE__ */ e(R, { ref: s, ...p, children: /* @__PURE__ */ e(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(x, { children: [
+  /* @__PURE__ */ e(c, { "aria-hidden": !0, tabIndex: -1, children: a }),
+  /* @__PURE__ */ i(n, { paddingLeft: 2, children: [
+    /* @__PURE__ */ i(l, { fontWeight: "bold", textColor: "neutral800", as: "span", children: [
+      o,
+      /* @__PURE__ */ e(m, { as: "span", children: r })
+    ] }),
+    /* @__PURE__ */ e(l, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })
+  ] })
+] }) }) }));
+t.displayName = "NavBrand";
+t.defaultProps = {
   to: "/"
 };
-a.propTypes = {
-  icon: r.node.isRequired,
-  title: r.string.isRequired,
-  to: r.string,
-  workplace: r.string.isRequired
+t.propTypes = {
+  icon: d.node.isRequired,
+  title: d.string.isRequired,
+  to: d.string,
+  workplace: d.string.isRequired
 };
 export {
-  a as NavBrand
+  t as NavBrand
 };

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),s=require("@strapi/icons"),d=require("prop-types"),l=require("styled-components"),c=require("./MainNavContext.cjs"),u=require("../../Icon/Icon.cjs"),p=require("../../VisuallyHidden/VisuallyHidden.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(i),f=o(d),h=o(l),y=h.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const s=require("@strapi/icons"),i=require("prop-types"),d=require("styled-components"),a=require("./MainNavContext.cjs"),u=require("../../Icon/Icon.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),l=d.button`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.borderRadius};
@@ -7,7 +7,7 @@
   justify-content: center;
   position: absolute;
   bottom: ${(9+4)/16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({theme:e,condensed:t})=>t?0:e.spaces[5]};
+  right: ${({theme:e,condensed:r})=>r?0:e.spaces[5]};
   transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
   z-index: 2;
   width: ${18/16}rem;
@@ -17,4 +17,4 @@
     width: ${6/16}rem;
     height: ${9/16}rem;
   }
-`,a=({children:e,...t})=>{const r=c.useMainNav();return n.default.createElement(y,{as:"button",condensed:r,...t},n.default.createElement(u.Icon,{as:r?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.default.createElement(p.VisuallyHidden,null,e))};a.propTypes={children:f.default.string.isRequired};exports.NavCondense=a;
+`,o=({children:e,...r})=>{const n=a.useMainNav();return t.jsxs(l,{as:"button",condensed:n,...r,children:[t.jsx(u.Icon,{as:n?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),t.jsx(c.VisuallyHidden,{children:e})]})};o.propTypes={children:i.string.isRequired};exports.NavCondense=o;

package/dist/v2/MainNav/NavCondense.js

@@ -1,21 +1,22 @@
-import t from "react";
-import { ChevronRight as n, ChevronLeft as i } from "@strapi/icons";
-import s from "prop-types";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import "react";
+import { ChevronRight as n, ChevronLeft as s } from "@strapi/icons";
+import d from "prop-types";
 import a from "styled-components";
-import { useMainNav as d } from "./MainNavContext.js";
-import { Icon as m } from "../../Icon/Icon.js";
-import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
-const p = a.button`
-  background: ${({ theme: e }) => e.colors.neutral0};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  border-radius: ${({ theme: e }) => e.borderRadius};
+import { useMainNav as m } from "./MainNavContext.js";
+import { Icon as p } from "../../Icon/Icon.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+const l = a.button`
+  background: ${({ theme: r }) => r.colors.neutral0};
+  border: 1px solid ${({ theme: r }) => r.colors.neutral150};
+  border-radius: ${({ theme: r }) => r.borderRadius};
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme: e, condensed: r }) => r ? 0 : e.spaces[5]};
-  transform: ${({ condensed: e }) => e ? "translateX(50%)" : void 0};
+  right: ${({ theme: r, condensed: e }) => e ? 0 : r.spaces[5]};
+  transform: ${({ condensed: r }) => r ? "translateX(50%)" : void 0};
   z-index: 2;
   width: ${18 / 16}rem;
   height: ${25 / 16}rem;
@@ -24,12 +25,15 @@ const p = a.button`
     width: ${6 / 16}rem;
     height: ${9 / 16}rem;
   }
-`, c = ({ children: e, ...r }) => {
-  const o = d();
-  return /* @__PURE__ */ t.createElement(p, { as: "button", condensed: o, ...r }, /* @__PURE__ */ t.createElement(m, { as: o ? n : i, "aria-hidden": !0, color: "neutral600" }), /* @__PURE__ */ t.createElement(l, null, e));
+`, c = ({ children: r, ...e }) => {
+  const o = m();
+  return /* @__PURE__ */ i(l, { as: "button", condensed: o, ...e, children: [
+    /* @__PURE__ */ t(p, { as: o ? n : s, "aria-hidden": !0, color: "neutral600" }),
+    /* @__PURE__ */ t(h, { children: r })
+  ] });
 };
 c.propTypes = {
-  children: s.string.isRequired
+  children: d.string.isRequired
 };
 export {
   c as NavCondense

package/dist/v2/MainNav/NavFooter.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const t=require("prop-types"),i=require("../../Box/Box.cjs"),e=({children:r})=>o.jsx(i.Box,{position:"relative",children:r});e.displayName="NavFooter";e.propTypes={children:t.node.isRequired};exports.NavFooter=e;

package/dist/v2/MainNav/NavFooter.js

@@ -1,11 +1,12 @@
-import r from "react";
-import t from "prop-types";
-import { Box as p } from "../../Box/Box.js";
-const e = ({ children: o }) => /* @__PURE__ */ r.createElement(p, { position: "relative" }, o);
-e.displayName = "NavFooter";
-e.propTypes = {
-  children: t.node.isRequired
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import p from "prop-types";
+import { Box as i } from "../../Box/Box.js";
+const o = ({ children: r }) => /* @__PURE__ */ e(i, { position: "relative", children: r });
+o.displayName = "NavFooter";
+o.propTypes = {
+  children: p.node.isRequired
 };
 export {
-  e as NavFooter
+  o as NavFooter
 };

package/dist/v2/MainNav/NavLink.cjs

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

package/dist/v2/MainNav/NavLink.js

@@ -1,93 +1,103 @@
-import r from "react";
-import o from "prop-types";
-import i from "styled-components";
-import { useMainNav as f } from "./MainNavContext.js";
-import { Badge as h } from "../../Badge/Badge.js";
-import { BaseLink as y } from "../../BaseLink/BaseLink.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import f from "react";
+import e from "prop-types";
+import t from "styled-components";
+import { useMainNav as y } from "./MainNavContext.js";
 import { Box as b } from "../../Box/Box.js";
+import { BaseLink as v } from "../../BaseLink/BaseLink.js";
+import { Typography as i } from "../../Typography/Typography.js";
 import { Flex as $ } from "../../Flex/Flex.js";
-import { Tooltip as v } from "../../Tooltip/Tooltip.js";
-import { Typography as t } from "../../Typography/Typography.js";
-const d = i(b)`
+import { Badge as k } from "../../Badge/Badge.js";
+import { Tooltip as x } from "../../Tooltip/Tooltip.js";
+const m = t(b)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, m = i(y)`
+`, u = t(v)`
   position: relative;
   text-decoration: none;
   display: block;
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  background: ${({ theme: e }) => e.colors.neutral0};
+  border-radius: ${({ theme: r }) => r.borderRadius};
+  background: ${({ theme: r }) => r.colors.neutral0};
 
-  ${t} {
-    color: ${({ theme: e }) => e.colors.neutral600};
+  ${i} {
+    color: ${({ theme: r }) => r.colors.neutral600};
   }
 
   svg path {
-    fill: ${({ theme: e }) => e.colors.neutral500};
+    fill: ${({ theme: r }) => r.colors.neutral500};
   }
 
   &:hover {
-    background: ${({ theme: e }) => e.colors.neutral100};
+    background: ${({ theme: r }) => r.colors.neutral100};
 
-    ${t} {
-      color: ${({ theme: e }) => e.colors.neutral700};
+    ${i} {
+      color: ${({ theme: r }) => r.colors.neutral700};
     }
 
     svg path {
-      fill: ${({ theme: e }) => e.colors.neutral600};
+      fill: ${({ theme: r }) => r.colors.neutral600};
     }
   }
 
   &.active {
-    background: ${({ theme: e }) => e.colors.primary100};
+    background: ${({ theme: r }) => r.colors.primary100};
 
     svg path {
-      fill: ${({ theme: e }) => e.colors.primary600};
+      fill: ${({ theme: r }) => r.colors.primary600};
     }
 
-    ${t} {
-      color: ${({ theme: e }) => e.colors.primary600};
+    ${i} {
+      color: ${({ theme: r }) => r.colors.primary600};
       font-weight: 500;
     }
   }
-`, u = i($)`
-  padding: ${({ theme: e }) => `${e.spaces[2]} ${e.spaces[3]}`};
-`, g = i(h)`
-  ${({ theme: e, condensed: a }) => a && `
+`, h = t($)`
+  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
+`, g = t(k)`
+  ${({ theme: r, condensed: a }) => a && `
 	  position: absolute;
     // Values based on visual aspect 
-    top: -${e.spaces[3]};
-    right:  -${e.spaces[1]};
+    top: -${r.spaces[3]};
+    right:  -${r.spaces[1]};
   `}
 
-  ${t} {
+  ${i} {
     //find a solution to remove !important
-    color: ${({ theme: e }) => e.colors.neutral0} !important;
+    color: ${({ theme: r }) => r.colors.neutral0} !important;
     line-height: 0;
   }
 
   display: flex;
   justify-content: center;
   align-items: center;
-  min-width: ${({ theme: e }) => e.spaces[6]};
-  height: ${({ theme: e }) => e.spaces[5]};
-  padding: ${({ theme: e }) => `0 ${e.spaces[2]}`};
-  border-radius: ${({ theme: e }) => e.spaces[10]};
-  background: ${({ theme: e }) => e.colors.primary600};
-`, s = r.forwardRef(({ children: e, icon: a, badgeContent: n, badgeAriaLabel: l, ...c }, p) => f() ? /* @__PURE__ */ r.createElement(m, { ref: p, ...c }, /* @__PURE__ */ r.createElement(v, { position: "right", label: e }, /* @__PURE__ */ r.createElement(u, { as: "span", justifyContent: "center" }, /* @__PURE__ */ r.createElement(d, { "aria-hidden": !0, paddingRight: 0, as: "span" }, a), n && /* @__PURE__ */ r.createElement(g, { condensed: !0, "aria-label": l }, n)))) : /* @__PURE__ */ r.createElement(m, { ref: p, ...c }, /* @__PURE__ */ r.createElement(u, { as: "span", justifyContent: "space-between" }, /* @__PURE__ */ r.createElement($, null, /* @__PURE__ */ r.createElement(d, { "aria-hidden": !0, paddingRight: 3, as: "span" }, a), /* @__PURE__ */ r.createElement(t, null, e)), n && /* @__PURE__ */ r.createElement(g, { justifyContent: "center", "aria-label": l }, n))));
-s.displayName = "NavLink";
-s.defaultProps = {
+  min-width: ${({ theme: r }) => r.spaces[6]};
+  height: ${({ theme: r }) => r.spaces[5]};
+  padding: ${({ theme: r }) => `0 ${r.spaces[2]}`};
+  border-radius: ${({ theme: r }) => r.spaces[10]};
+  background: ${({ theme: r }) => r.colors.primary600};
+`, l = f.forwardRef(({ children: r, icon: a, badgeContent: n, badgeAriaLabel: c, ...d }, p) => y() ? /* @__PURE__ */ o(u, { ref: p, ...d, children: /* @__PURE__ */ o(x, { position: "right", label: r, children: /* @__PURE__ */ s(h, { as: "span", justifyContent: "center", children: [
+  /* @__PURE__ */ o(m, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }),
+  n && /* @__PURE__ */ o(g, { condensed: !0, "aria-label": c, children: n })
+] }) }) }) : /* @__PURE__ */ o(u, { ref: p, ...d, children: /* @__PURE__ */ s(h, { as: "span", justifyContent: "space-between", children: [
+  /* @__PURE__ */ s($, { children: [
+    /* @__PURE__ */ o(m, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }),
+    /* @__PURE__ */ o(i, { children: r })
+  ] }),
+  n && /* @__PURE__ */ o(g, { justifyContent: "center", "aria-label": c, children: n })
+] }) }));
+l.displayName = "NavLink";
+l.defaultProps = {
   badgeContent: void 0,
   badgeAriaLabel: void 0
 };
-s.propTypes = {
-  badgeAriaLabel: o.string,
-  badgeContent: o.oneOfType([o.string, o.number]),
-  children: o.string.isRequired,
-  icon: o.node.isRequired
+l.propTypes = {
+  badgeAriaLabel: e.string,
+  badgeContent: e.oneOfType([e.string, e.number]),
+  children: e.string.isRequired,
+  icon: e.node.isRequired
 };
 export {
-  s as NavLink
+  l as NavLink
 };

package/dist/v2/MainNav/NavSection.cjs

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

package/dist/v2/MainNav/NavSection.js

@@ -1,36 +1,46 @@
-import e, { Children as c } from "react";
-import d from "prop-types";
-import { useMainNav as s } from "./MainNavContext.js";
-import { Box as p } from "../../Box/Box.js";
-import { Divider as u } from "../../Divider/Divider.js";
-import { Flex as r } from "../../Flex/Flex.js";
-import { Typography as g } from "../../Typography/Typography.js";
-import { VisuallyHidden as f } from "../../VisuallyHidden/VisuallyHidden.js";
-const E = ({ label: i, children: m, horizontal: t = !1, spacing: o = 2, ...l }) => s() ? /* @__PURE__ */ e.createElement(r, { direction: "column", alignItems: "stretch", gap: 2 }, /* @__PURE__ */ e.createElement(p, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(u, null), /* @__PURE__ */ e.createElement(f, null, /* @__PURE__ */ e.createElement("span", null, i))), /* @__PURE__ */ e.createElement(
-  r,
-  {
-    as: "ul",
-    gap: o,
-    direction: t ? "row" : "column",
-    alignItems: t ? "center" : "stretch",
-    ...l
-  },
-  c.map(m, (n, a) => /* @__PURE__ */ e.createElement("li", { key: a }, n))
-)) : /* @__PURE__ */ e.createElement(r, { direction: "column", alignItems: "stretch", gap: 2 }, /* @__PURE__ */ e.createElement(p, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span" }, /* @__PURE__ */ e.createElement(g, { variant: "sigma", textColor: "neutral600" }, i)), /* @__PURE__ */ e.createElement(
-  r,
-  {
-    as: "ul",
-    gap: o,
-    direction: t ? "row" : "column",
-    alignItems: t ? "center" : "stretch",
-    ...l
-  },
-  c.map(m, (n, a) => /* @__PURE__ */ e.createElement("li", { key: a }, n))
-));
-E.propTypes = {
-  children: d.node.isRequired,
-  label: d.string.isRequired
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { Children as m } from "react";
+import p from "prop-types";
+import { useMainNav as u } from "./MainNavContext.js";
+import { Flex as i } from "../../Flex/Flex.js";
+import { Box as l } from "../../Box/Box.js";
+import { Divider as g } from "../../Divider/Divider.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Typography as f } from "../../Typography/Typography.js";
+const x = ({ label: o, children: a, horizontal: e = !1, spacing: s = 2, ...c }) => u() ? /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
+  /* @__PURE__ */ d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [
+    /* @__PURE__ */ r(g, {}),
+    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r("span", { children: o }) })
+  ] }),
+  /* @__PURE__ */ r(
+    i,
+    {
+      as: "ul",
+      gap: s,
+      direction: e ? "row" : "column",
+      alignItems: e ? "center" : "stretch",
+      ...c,
+      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
+    }
+  )
+] }) : /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
+  /* @__PURE__ */ r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: /* @__PURE__ */ r(f, { variant: "sigma", textColor: "neutral600", children: o }) }),
+  /* @__PURE__ */ r(
+    i,
+    {
+      as: "ul",
+      gap: s,
+      direction: e ? "row" : "column",
+      alignItems: e ? "center" : "stretch",
+      ...c,
+      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
+    }
+  )
+] });
+x.propTypes = {
+  children: p.node.isRequired,
+  label: p.string.isRequired
 };
 export {
-  E as NavSection
+  x as NavSection
 };

package/dist/v2/MainNav/NavSections.cjs

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

package/dist/v2/MainNav/NavSections.js

@@ -1,24 +1,25 @@
-import e, { Children as m } from "react";
-import a from "prop-types";
-import d from "styled-components";
-import { Box as l } from "../../Box/Box.js";
+import { jsx as r } from "react/jsx-runtime";
+import { Children as d } from "react";
+import m from "prop-types";
+import l from "styled-components";
+import { Box as s } from "../../Box/Box.js";
 import { Flex as c } from "../../Flex/Flex.js";
-const s = d(l)`
+const a = l(s)`
   flex-grow: 1;
   overflow-y: auto;
-`, f = ({ children: t, spacing: o = 4, horizontal: r = !1, ...i }) => /* @__PURE__ */ e.createElement(s, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8 }, /* @__PURE__ */ e.createElement(
+`, f = ({ children: e, spacing: i = 4, horizontal: o = !1, ...t }) => /* @__PURE__ */ r(a, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: /* @__PURE__ */ r(
   c,
   {
     as: "ul",
-    gap: o,
-    direction: r ? "row" : "column",
-    alignItems: r ? "center" : "stretch",
-    ...i
-  },
-  m.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
-));
+    gap: i,
+    direction: o ? "row" : "column",
+    alignItems: o ? "center" : "stretch",
+    ...t,
+    children: d.map(e, (p, n) => /* @__PURE__ */ r("li", { children: p }, n))
+  }
+) });
 f.propTypes = {
-  children: a.node.isRequired
+  children: m.node.isRequired
 };
 export {
   f as NavSections

package/dist/v2/MainNav/NavUser.cjs

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