@strapi/design-system 0.0.0-599b75fb-test → 0.0.0-622b91ef

package/dist/v2/LinkButton/LinkButton.js

@@ -1,71 +1,33 @@
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import h from "react";
 import y from "styled-components";
-import { BaseButtonWrapper as b } from "../../BaseButton/BaseButton.js";
-import { BaseLink as d } from "../../BaseLink/BaseLink.js";
-import { getDisabledStyle as p, getHoverStyle as v, getActiveStyle as x, getVariantStyle as S } from "../../Button/utils.js";
+import { getDisabledStyle as d, getHoverStyle as b, getActiveStyle as v, getVariantStyle as x } from "../../Button/utils.js";
+import { BaseButtonWrapper as S } from "../../BaseButton/BaseButton.js";
+import { BaseLink as p } from "../../BaseLink/BaseLink.js";
 import { Flex as l } from "../../Flex/Flex.js";
 import { Typography as B } from "../../Typography/Typography.js";
-const k = y(b)`
+const k = y(S)`
   text-decoration: none;
 
   &[aria-disabled='true'] {
-    ${p}
+    ${d}
     &:active {
-      ${p}
+      ${d}
     }
   }
 
   &:hover {
-    ${v}
+    ${b}
   }
 
   &:active {
-    ${x}
+    ${v}
   }
 
-  ${S}
-`, L = h.forwardRef(({
-  variant: m = "default",
-  startIcon: e,
-  endIcon: i,
-  disabled: o = !1,
-  children: u,
-  size: t = "S",
-  as: f = d,
-  ...s
-}, g) => {
+  ${x}
+`, L = h.forwardRef(({ variant: m = "default", startIcon: e, endIcon: i, disabled: o = !1, children: u, size: t = "S", as: f = p, ...s }, g) => {
   const a = t === "S" ? 2 : "10px", n = 4;
-  return c(k, {
-    ref: g,
-    "aria-disabled": o,
-    size: t,
-    variant: m,
-    background: "buttonPrimary600",
-    borderColor: "buttonPrimary600",
-    hasRadius: !0,
-    gap: 2,
-    inline: !0,
-    paddingBottom: a,
-    paddingLeft: n,
-    paddingRight: n,
-    paddingTop: a,
-    pointerEvents: o ? "none" : void 0,
-    ...s,
-    as: f || d,
-    children: [e && r(l, {
-      "aria-hidden": !0,
-      children: e
-    }), r(B, {
-      variant: t === "S" ? "pi" : void 0,
-      fontWeight: "bold",
-      textColor: "buttonNeutral0",
-      children: u
-    }), i && r(l, {
-      "aria-hidden": !0,
-      children: i
-    })]
-  });
+  return c(k, { ref: g, "aria-disabled": o, size: t, variant: m, background: "buttonPrimary600", borderColor: "buttonPrimary600", hasRadius: !0, gap: 2, inline: !0, paddingBottom: a, paddingLeft: n, paddingRight: n, paddingTop: a, pointerEvents: o ? "none" : void 0, ...s, as: f || p, children: [e && r(l, { "aria-hidden": !0, children: e }), r(B, { variant: t === "S" ? "pi" : void 0, fontWeight: "bold", textColor: "buttonNeutral0", children: u }), i && r(l, { "aria-hidden": !0, children: i })] });
 });
 L.displayName = "LinkButton";
 export {

package/dist/v2/LinkButton/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./LinkButton.cjs");exports.LinkButton=t.LinkButton;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./LinkButton.cjs");exports.LinkButton=t.LinkButton;

package/dist/v2/MainNav/MainNav.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("prop-types"),s=require("styled-components"),c=require("./MainNavContext.cjs"),i=require("../../Flex/Flex.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=d.default(i.Flex)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),o=require("./MainNavContext.cjs"),a=require("../../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},s=i(r),l=s.default(a.Flex)`
   width: ${({condensed:e})=>e?"max-content":`${224/16}rem`};
   border-right: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,o=({condensed:e,...n})=>a.default.createElement(c.MainNavContext.Provider,{value:e},a.default.createElement(p,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n}));o.defaultProps={condensed:!1};o.propTypes={condensed:u.default.bool};exports.MainNav=o;
+`,u=({condensed:e=!1,...n})=>t.jsx(o.MainNavContext.Provider,{value:e,children:t.jsx(l,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});exports.MainNav=u;

package/dist/v2/MainNav/MainNav.js

@@ -1,32 +1,11 @@
-import o from "react";
-import n from "prop-types";
-import a from "styled-components";
-import { MainNavContext as i } from "./MainNavContext.js";
-import { Flex as m } from "../../Flex/Flex.js";
-const p = a(m)`
-  width: ${({ condensed: e }) => e ? "max-content" : `${224 / 16}rem`};
-  border-right: 1px solid ${({ theme: e }) => e.colors.neutral150};
-`, r = ({ condensed: e, ...t }) => /* @__PURE__ */ o.createElement(i.Provider, { value: e }, /* @__PURE__ */ o.createElement(
-  p,
-  {
-    alignItems: "normal",
-    as: "nav",
-    background: "neutral0",
-    condensed: e,
-    direction: "column",
-    height: "100vh",
-    position: "sticky",
-    top: 0,
-    zIndex: 2,
-    ...t
-  }
-));
-r.defaultProps = {
-  condensed: !1
-};
-r.propTypes = {
-  condensed: n.bool
-};
+import { jsx as o } from "react/jsx-runtime";
+import n from "styled-components";
+import { MainNavContext as e } from "./MainNavContext.js";
+import { Flex as i } from "../../Flex/Flex.js";
+const a = n(i)`
+  width: ${({ condensed: r }) => r ? "max-content" : `${224 / 16}rem`};
+  border-right: 1px solid ${({ theme: r }) => r.colors.neutral150};
+`, c = ({ condensed: r = !1, ...t }) => o(e.Provider, { value: r, children: o(a, { alignItems: "normal", as: "nav", background: "neutral0", condensed: r, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...t }) });
 export {
-  r as MainNav
+  c as MainNav
 };

package/dist/v2/MainNav/MainNavContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),a=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(!1),a=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=a;

package/dist/v2/MainNav/MainNavContext.js

@@ -1,5 +1,5 @@
 import { createContext as t, useContext as e } from "react";
-const o = t(), a = () => e(o);
+const o = t(!1), a = () => e(o);
 export {
   o as MainNavContext,
   a as useMainNav

package/dist/v2/MainNav/NavBrand.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("react"),m=require("prop-types"),B=require("styled-components"),x=require("./MainNavContext.cjs"),f=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),h=require("../../Flex/Flex.cjs"),u=require("../../Typography/Typography.cjs"),c=require("../../VisuallyHidden/VisuallyHidden.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(y),a=r(m),g=r(B),p=g.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),p=require("react"),g=require("styled-components"),f=require("./MainNavContext.cjs"),c=require("../../BaseLink/BaseLink.cjs"),d=require("../../Box/Box.cjs"),s=require("../../VisuallyHidden/VisuallyHidden.cjs"),j=require("../../Flex/Flex.cjs"),o=require("../../Typography/Typography.cjs"),u=e=>e&&e.__esModule?e:{default:e},y=u(p),h=u(g),l=h.default.div`
   border-radius: ${({theme:e})=>e.borderRadius};
 
   svg,
@@ -6,7 +6,7 @@
     height: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
     width: ${({condensed:e})=>e?`${40/16}rem`:`${32/16}rem`};
   }
-`,E=g.default(f.BaseLink)`
+`,B=h.default(c.BaseLink)`
   text-decoration: unset;
   color: inherit;
-`,n=t.default.forwardRef(({workplace:e,title:l,icon:i,...o},s)=>x.useMainNav()?t.default.createElement(f.BaseLink,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(p,{condensed:!0},i,t.default.createElement(c.VisuallyHidden,null,t.default.createElement("span",null,l),t.default.createElement("span",null,e))))):t.default.createElement(E,{ref:s,...o},t.default.createElement(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4},t.default.createElement(h.Flex,null,t.default.createElement(p,{"aria-hidden":!0,tabIndex:-1},i),t.default.createElement(d.Box,{paddingLeft:2},t.default.createElement(u.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span"},l,t.default.createElement(c.VisuallyHidden,{as:"span"},e)),t.default.createElement(u.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0},e))))));n.displayName="NavBrand";n.defaultProps={to:"/"};n.propTypes={icon:a.default.node.isRequired,title:a.default.string.isRequired,to:a.default.string,workplace:a.default.string.isRequired};exports.NavBrand=n;
+`,m=y.default.forwardRef(({workplace:e,title:t,icon:i,...r},a)=>{const x=f.useMainNav();return r.to=r?.to??"/",x?n.jsx(c.BaseLink,{ref:a,...r,children:n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(l,{condensed:!0,children:[i,n.jsxs(s.VisuallyHidden,{children:[n.jsx("span",{children:t}),n.jsx("span",{children:e})]})]})})}):n.jsx(B,{ref:a,...r,children:n.jsx(d.Box,{paddingLeft:3,paddingRight:3,paddingTop:4,paddingBottom:4,children:n.jsxs(j.Flex,{children:[n.jsx(l,{"aria-hidden":!0,tabIndex:-1,children:i}),n.jsxs(d.Box,{paddingLeft:2,children:[n.jsxs(o.Typography,{fontWeight:"bold",textColor:"neutral800",as:"span",children:[t,n.jsx(s.VisuallyHidden,{as:"span",children:e})]}),n.jsx(o.Typography,{variant:"pi",as:"p",textColor:"neutral600","aria-hidden":!0,children:e})]})]})})})});exports.NavBrand=m;

package/dist/v2/MainNav/NavBrand.js

@@ -1,34 +1,27 @@
-import e from "react";
-import r from "prop-types";
-import c from "styled-components";
+import { jsx as d, jsxs as e } from "react/jsx-runtime";
+import f from "react";
+import l from "styled-components";
 import { useMainNav as g } from "./MainNavContext.js";
-import { BaseLink as u } from "../../BaseLink/BaseLink.js";
+import { BaseLink as c } from "../../BaseLink/BaseLink.js";
 import { Box as n } from "../../Box/Box.js";
-import { Flex as f } from "../../Flex/Flex.js";
+import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Flex as u } 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};
+const h = l.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)`
+`, x = l(c)`
   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 = {
-  to: "/"
-};
-a.propTypes = {
-  icon: r.node.isRequired,
-  title: r.string.isRequired,
-  to: r.string,
-  workplace: r.string.isRequired
-};
+`, W = f.forwardRef(({ workplace: r, title: t, icon: o, ...i }, a) => {
+  const s = g();
+  return i.to = i?.to ?? "/", s ? d(c, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(h, { condensed: !0, children: [o, e(m, { children: [d("span", { children: t }), d("span", { children: r })] })] }) }) }) : d(x, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(u, { children: [d(h, { "aria-hidden": !0, tabIndex: -1, children: o }), e(n, { paddingLeft: 2, children: [e(p, { fontWeight: "bold", textColor: "neutral800", as: "span", children: [t, d(m, { as: "span", children: r })] }), d(p, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })] })] }) }) });
+});
 export {
-  a as NavBrand
+  W as NavBrand
 };

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,10 +1,7 @@
-"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 n=require("react/jsx-runtime"),o=require("@strapi/icons"),s=require("styled-components"),i=require("./MainNavContext.cjs"),d=require("../../Flex/Flex.cjs"),a=require("../../Icon/Icon.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),l=e=>e&&e.__esModule?e:{default:e},c=l(s),h=c.default(d.Flex).attrs(e=>({justifyContent:"center",...e}))`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.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:t})=>t?0:e.spaces[5]};
@@ -17,4 +14,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;
+`,g=({children:e,...t})=>{const r=i.useMainNav();return n.jsxs(h,{as:"button",condensed:r,...t,children:[n.jsx(a.Icon,{as:r?o.ChevronRight:o.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.jsx(u.VisuallyHidden,{children:e})]})};exports.NavCondense=g;

package/dist/v2/MainNav/NavCondense.js

@@ -1,21 +1,21 @@
-import t from "react";
-import { ChevronRight as n, ChevronLeft as i } from "@strapi/icons";
-import s from "prop-types";
-import a from "styled-components";
-import { useMainNav as d } from "./MainNavContext.js";
-import { Icon as m } from "../../Icon/Icon.js";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { ChevronRight as i, ChevronLeft as s } from "@strapi/icons";
+import d from "styled-components";
+import { useMainNav as a } from "./MainNavContext.js";
+import { Flex as m } from "../../Flex/Flex.js";
+import { Icon as h } 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};
-  display: flex;
-  align-items: center;
-  justify-content: center;
+const c = d(m).attrs((r) => ({
+  justifyContent: "center",
+  ...r
+}))`
+  background: ${({ theme: r }) => r.colors.neutral0};
+  border: 1px solid ${({ theme: r }) => r.colors.neutral150};
+  border-radius: ${({ theme: r }) => r.borderRadius};
   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,13 +24,10 @@ 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.propTypes = {
-  children: s.string.isRequired
+`, x = ({ children: r, ...e }) => {
+  const o = a();
+  return n(c, { as: "button", condensed: o, ...e, children: [t(h, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(l, { children: r })] });
 };
 export {
-  c as NavCondense
+  x 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"),t=require("../../Box/Box.cjs"),r=({children:e})=>o.jsx(t.Box,{position:"relative",children:e});exports.NavFooter=r;

package/dist/v2/MainNav/NavFooter.js

@@ -1,11 +1,6 @@
-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 r } from "react/jsx-runtime";
+import { Box as t } from "../../Box/Box.js";
+const m = ({ children: o }) => r(t, { position: "relative", children: o });
 export {
-  e as NavFooter
+  m 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"),y=require("styled-components"),f=require("./MainNavContext.cjs"),x=require("../../Box/Box.cjs"),j=require("../../BaseLink/BaseLink.cjs"),s=require("../../Typography/Typography.cjs"),h=require("../../Flex/Flex.cjs"),v=require("../../Badge/Badge.cjs"),m=require("../../Tooltip/Tooltip.cjs"),g=e=>e&&e.__esModule?e:{default:e},b=g($),a=g(y),c=a.default(x.Box)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,f=s.default(x.BaseLink)`
+`,d=a.default(j.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)`
+`,u=a.default(h.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,y=s.default(T.Badge)`
-  ${({theme:e,condensed:r})=>r&&`
+`,p=a.default(v.Badge)`
+  ${({theme:e,condensed:o})=>o&&`
 	  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;
+`,k=b.default.forwardRef(({children:e,icon:o,badgeContent:t,badgeAriaLabel:n,...i},l)=>f.useMainNav()?r.jsx(d,{ref:l,...i,children:r.jsx(m.Tooltip,{position:"right",label:e,children:r.jsxs(u,{as:"span",justifyContent:"center",children:[r.jsx(c,{"aria-hidden":!0,paddingRight:0,as:"span",children:o}),t&&r.jsx(p,{condensed:!0,"aria-label":n,children:t})]})})}):r.jsx(d,{ref:l,...i,children:r.jsxs(u,{as:"span",justifyContent:"space-between",children:[r.jsxs(h.Flex,{children:[r.jsx(c,{"aria-hidden":!0,paddingRight:3,as:"span",children:o}),r.jsx(s.Typography,{children:e})]}),t&&r.jsx(p,{justifyContent:"center","aria-label":n,children:t})]})}));exports.NavLink=k;

package/dist/v2/MainNav/NavLink.js

@@ -1,93 +1,82 @@
-import r from "react";
-import o from "prop-types";
-import i from "styled-components";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import $ from "react";
+import t 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 { Box as b } from "../../Box/Box.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 { Box as g } from "../../Box/Box.js";
+import { BaseLink as v } from "../../BaseLink/BaseLink.js";
+import { Typography as e } from "../../Typography/Typography.js";
+import { Flex as h } from "../../Flex/Flex.js";
+import { Badge as y } from "../../Badge/Badge.js";
+import { Tooltip as b } from "../../Tooltip/Tooltip.js";
+const p = t(g)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, m = i(y)`
+`, d = 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};
+  ${e} {
+    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};
+    ${e} {
+      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};
+    ${e} {
+      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 && `
+`, m = t(h)`
+  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
+`, u = t(y)`
+  ${({ theme: r, condensed: i }) => i && `
 	  position: absolute;
     // Values based on visual aspect 
-    top: -${e.spaces[3]};
-    right:  -${e.spaces[1]};
+    top: -${r.spaces[3]};
+    right:  -${r.spaces[1]};
   `}
 
-  ${t} {
+  ${e} {
     //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 = {
-  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
-};
+  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};
+`, C = $.forwardRef(({ children: r, icon: i, badgeContent: a, badgeAriaLabel: n, ...l }, c) => f() ? o(d, { ref: c, ...l, children: o(b, { position: "right", label: r, children: s(m, { as: "span", justifyContent: "center", children: [o(p, { "aria-hidden": !0, paddingRight: 0, as: "span", children: i }), a && o(u, { condensed: !0, "aria-label": n, children: a })] }) }) }) : o(d, { ref: c, ...l, children: s(m, { as: "span", justifyContent: "space-between", children: [s(h, { children: [o(p, { "aria-hidden": !0, paddingRight: 3, as: "span", children: i }), o(e, { children: r })] }), a && o(u, { justifyContent: "center", "aria-label": n, children: a })] }) }));
 export {
-  s as NavLink
+  C 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"),u=require("./MainNavContext.cjs"),r=require("../../Flex/Flex.cjs"),l=require("../../Box/Box.cjs"),x=require("../../Divider/Divider.cjs"),g=require("../../VisuallyHidden/VisuallyHidden.cjs"),p=require("../../Typography/Typography.cjs"),h=({label:s,children:a,horizontal:n=!1,spacing:d=2,...c})=>u.useMainNav()?e.jsxs(r.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(x.Divider,{}),e.jsx(g.VisuallyHidden,{children:e.jsx("span",{children:s})})]}),e.jsx(r.Flex,{as:"ul",gap:d,direction:n?"row":"column",alignItems:n?"center":"stretch",...c,children:o.Children.map(a,(i,t)=>e.jsx("li",{children:i},t))})]}):e.jsxs(r.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(p.Typography,{variant:"sigma",textColor:"neutral600",children:s})}),e.jsx(r.Flex,{as:"ul",gap:d,direction:n?"row":"column",alignItems:n?"center":"stretch",...c,children:o.Children.map(a,(i,t)=>e.jsx("li",{children:i},t))})]});exports.NavSection=h;

package/dist/v2/MainNav/NavSection.js

@@ -1,36 +1,12 @@
-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 { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { Children as s } from "react";
+import { useMainNav as p } from "./MainNavContext.js";
+import { Flex as e } from "../../Flex/Flex.js";
+import { Box as l } 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 { VisuallyHidden as g } from "../../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../../Typography/Typography.js";
+const k = ({ label: o, children: a, horizontal: n = !1, spacing: c = 2, ...m }) => p() ? d(e, { direction: "column", alignItems: "stretch", gap: 2, children: [d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [r(u, {}), r(g, { children: r("span", { children: o }) })] }), r(e, { as: "ul", gap: c, direction: n ? "row" : "column", alignItems: n ? "center" : "stretch", ...m, children: s.map(a, (i, t) => r("li", { children: i }, t)) })] }) : d(e, { direction: "column", alignItems: "stretch", gap: 2, children: [r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: r(h, { variant: "sigma", textColor: "neutral600", children: o }) }), r(e, { as: "ul", gap: c, direction: n ? "row" : "column", alignItems: n ? "center" : "stretch", ...m, children: s.map(a, (i, t) => r("li", { children: i }, t)) })] });
 export {
-  E as NavSection
+  k 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 t=require("react/jsx-runtime"),l=require("react"),c=require("styled-components"),d=require("../../Box/Box.cjs"),u=require("../../Flex/Flex.cjs"),a=e=>e&&e.__esModule?e:{default:e},g=a(c),x=g.default(d.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;
+`,f=({children:e,spacing:r=4,horizontal:o=!1,...n})=>t.jsx(x,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(u.Flex,{as:"ul",gap:r,direction:o?"row":"column",alignItems:o?"center":"stretch",...n,children:l.Children.map(e,(i,s)=>t.jsx("li",{children:i},s))})});exports.NavSections=f;