@strapi/design-system 1.7.0-alpha.5 → 1.7.1

package/dist/Loader/Loader.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import m, { keyframes as n } from "styled-components";
-import d from "./assets/loader.js";
+import d from "./assets/loader.svg.js";
 import { VisuallyHidden as f } from "../VisuallyHidden/VisuallyHidden.js";
 const l = n`
   from {
@@ -13,27 +13,8 @@ const l = n`
 `, c = m.img`
   animation: ${l} 1s infinite linear;
   will-change: transform;
-  ${({
-  small: e,
-  theme: r
-}) => e && `width: ${r.spaces[6]}; height: ${r.spaces[6]};`}
-`, $ = s.forwardRef(({
-  children: e,
-  small: r = !1,
-  ...a
-}, t) => i("div", {
-  role: "alert",
-  "aria-live": "assertive",
-  ref: t,
-  ...a,
-  children: [o(f, {
-    children: e
-  }), o(c, {
-    src: d,
-    "aria-hidden": !0,
-    small: r
-  })]
-}));
+  ${({ small: e, theme: r }) => e && `width: ${r.spaces[6]}; height: ${r.spaces[6]};`}
+`, $ = s.forwardRef(({ children: e, small: r = !1, ...a }, t) => i("div", { role: "alert", "aria-live": "assertive", ref: t, ...a, children: [o(f, { children: e }), o(c, { src: d, "aria-hidden": !0, small: r })] }));
 export {
   $ as Loader
 };

package/dist/Loader/index.cjs

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

package/dist/Main/Main.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),i=require("prop-types"),s=require("styled-components"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=t(a),u=t(i),c=t(s),d=c.default.main`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("react");const l=require("prop-types"),r=require("styled-components"),a=r.main`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
     outline: none;
   }
-`,n=({labelledBy:e,...o})=>{const l=e||"main-content-title";return r.default.createElement(d,{"aria-labelledby":l,id:"main-content",tabIndex:-1,...o})};n.defaultProps={labelledBy:void 0};n.propTypes={labelledBy:u.default.string};exports.Main=n;
+`,e=({labelledBy:n,...i})=>{const t=n||"main-content-title";return o.jsx(a,{"aria-labelledby":t,id:"main-content",tabIndex:-1,...i})};e.defaultProps={labelledBy:void 0};e.propTypes={labelledBy:l.string};exports.Main=e;

package/dist/Main/Main.js

@@ -1,20 +1,18 @@
-import i from "react";
-import l from "prop-types";
-import a from "styled-components";
-const r = a.main`
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import t from "prop-types";
+import l from "styled-components";
+const a = l.main`
   // To prevent global outline on focus visible to force an outline when Main is focused
   &:focus-visible {
     outline: none;
   }
-`, e = ({ labelledBy: o, ...t }) => {
-  const n = o || "main-content-title";
-  return /* @__PURE__ */ i.createElement(r, { "aria-labelledby": n, id: "main-content", tabIndex: -1, ...t });
-};
+`, e = ({ labelledBy: o, ...i }) => /* @__PURE__ */ n(a, { "aria-labelledby": o || "main-content-title", id: "main-content", tabIndex: -1, ...i });
 e.defaultProps = {
   labelledBy: void 0
 };
 e.propTypes = {
-  labelledBy: l.string
+  labelledBy: t.string
 };
 export {
   e as Main

package/dist/Main/SkipToContent.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),s=require("prop-types"),r=require("styled-components"),a=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=t(n),u=t(s),l=t(r),d=l.default(a.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("react");const r=require("prop-types"),n=require("styled-components"),s=require("../Box/Box.cjs"),i=n(s.Box)`
   text-decoration: none;
   z-index: 9999;
   left: -100%;
@@ -8,4 +8,4 @@
     left: ${({theme:e})=>e.spaces[3]};
     top: ${({theme:e})=>e.spaces[3]};
   }
-`,o=({children:e})=>c.default.createElement(d,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0},e);o.propTypes={children:u.default.node.isRequired};exports.SkipToContent=o;
+`,o=({children:e})=>t.jsx(i,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0,children:e});o.propTypes={children:r.node.isRequired};exports.SkipToContent=o;

package/dist/Main/SkipToContent.js

@@ -1,8 +1,9 @@
-import e from "react";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
 import t from "prop-types";
-import r from "styled-components";
+import e from "styled-components";
 import { Box as n } from "../Box/Box.js";
-const p = r(n)`
+const p = e(n)`
   text-decoration: none;
   z-index: 9999;
   left: -100%;
@@ -12,7 +13,7 @@ const p = r(n)`
     left: ${({ theme: o }) => o.spaces[3]};
     top: ${({ theme: o }) => o.spaces[3]};
   }
-`, a = ({ children: o }) => /* @__PURE__ */ e.createElement(
+`, i = ({ children: o }) => /* @__PURE__ */ r(
   p,
   {
     as: "a",
@@ -21,13 +22,13 @@ const p = r(n)`
     color: "neutral0",
     padding: 3,
     position: "absolute",
-    hasRadius: !0
-  },
-  o
+    hasRadius: !0,
+    children: o
+  }
 );
-a.propTypes = {
+i.propTypes = {
   children: t.node.isRequired
 };
 export {
-  a as SkipToContent
+  i as SkipToContent
 };

package/dist/Main/index.cjs

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

package/dist/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 n=require("react/jsx-runtime");require("react");const o=require("prop-types"),i=require("styled-components"),a=require("./MainNavContext.cjs"),s=require("../Flex/Flex.cjs"),l=i(s.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;
+`,r=({condensed:e,...t})=>n.jsx(a.MainNavContext.Provider,{value:e,children:n.jsx(l,{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:o.bool};exports.MainNav=r;

package/dist/MainNav/MainNav.js

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

package/dist/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(),n=()=>e.useContext(t);exports.MainNavContext=t;exports.useMainNav=n;

package/dist/MainNav/NavBrand.cjs

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

package/dist/MainNav/NavBrand.js

@@ -1,33 +1,49 @@
-import e from "react";
-import r from "prop-types";
-import { NavLink as i } from "react-router-dom";
-import s from "styled-components";
-import { useMainNav as u } from "./MainNavContext.js";
-import { Box as a } from "../Box/Box.js";
-import { Flex as g } from "../Flex/Flex.js";
+import { jsx as i, jsxs as e } from "react/jsx-runtime";
+import "react";
+import n from "prop-types";
+import { NavLink as o } from "react-router-dom";
+import h from "styled-components";
+import { useMainNav as g } from "./MainNavContext.js";
+import { Box as t } from "../Box/Box.js";
+import { VisuallyHidden as s } from "../VisuallyHidden/VisuallyHidden.js";
+import { Flex as f } from "../Flex/Flex.js";
 import { Typography as m } from "../Typography/Typography.js";
-import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
-const l = s.div`
+const c = h.div`
   svg,
   img {
-    border-radius: ${({ theme: t }) => t.borderRadius};
+    border-radius: ${({ theme: r }) => r.borderRadius};
     object-fit: contain;
-    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`};
   }
-`, f = s(i)`
+`, u = h(o)`
   text-decoration: unset;
   color: inherit;
-`, c = ({ workplace: t, title: o, icon: d, to: n }) => u() ? /* @__PURE__ */ e.createElement(a, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(l, { condensed: !0 }, /* @__PURE__ */ e.createElement(i, { to: n }, d, /* @__PURE__ */ e.createElement(p, null, /* @__PURE__ */ e.createElement("span", null, o), /* @__PURE__ */ e.createElement("span", null, t))))) : /* @__PURE__ */ e.createElement(a, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(g, null, /* @__PURE__ */ e.createElement(l, { as: i, to: n, "aria-hidden": !0, tabIndex: -1 }, d), /* @__PURE__ */ e.createElement(a, { paddingLeft: 2 }, /* @__PURE__ */ e.createElement(m, { fontWeight: "bold", textColor: "neutral800", as: "span" }, /* @__PURE__ */ e.createElement(f, { to: n }, o, /* @__PURE__ */ e.createElement(p, { as: "span" }, t))), /* @__PURE__ */ e.createElement(m, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0 }, t))));
-c.defaultProps = {
+`, l = ({ workplace: r, title: a, icon: p, to: d }) => g() ? /* @__PURE__ */ i(t, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ i(c, { condensed: !0, children: /* @__PURE__ */ e(o, { to: d, children: [
+  p,
+  /* @__PURE__ */ e(s, { children: [
+    /* @__PURE__ */ i("span", { children: a }),
+    /* @__PURE__ */ i("span", { children: r })
+  ] })
+] }) }) }) : /* @__PURE__ */ i(t, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: /* @__PURE__ */ e(f, { children: [
+  /* @__PURE__ */ i(c, { as: o, to: d, "aria-hidden": !0, tabIndex: -1, children: p }),
+  /* @__PURE__ */ e(t, { paddingLeft: 2, children: [
+    /* @__PURE__ */ i(m, { fontWeight: "bold", textColor: "neutral800", as: "span", children: /* @__PURE__ */ e(u, { to: d, children: [
+      a,
+      /* @__PURE__ */ i(s, { as: "span", children: r })
+    ] }) }),
+    /* @__PURE__ */ i(m, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })
+  ] })
+] }) });
+l.defaultProps = {
   to: "/"
 };
-c.propTypes = {
-  icon: r.node.isRequired,
-  title: r.string.isRequired,
-  to: r.string,
-  workplace: r.string.isRequired
+l.propTypes = {
+  icon: n.node.isRequired,
+  title: n.string.isRequired,
+  to: n.string,
+  workplace: n.string.isRequired
 };
 export {
-  c as NavBrand
+  l as NavBrand
 };

package/dist/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/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/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/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/MainNav/NavLink.cjs

@@ -1,16 +1,16 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),$=require("prop-types"),h=require("react-router-dom"),v=require("styled-components"),b=require("./MainNavContext.cjs"),T=require("../Badge/Badge.cjs"),x=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),q=require("../Tooltip/Tooltip.cjs"),o=require("../Typography/Typography.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(m),a=i($),l=i(v),u=l.default(x.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("react");const o=require("prop-types"),y=require("react-router-dom"),a=require("styled-components"),$=require("./MainNavContext.cjs"),x=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),v=require("../Badge/Badge.cjs"),b=require("../Tooltip/Tooltip.cjs"),d=a(x.Box)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,p=l.default(h.NavLink)`
+`,p=a(y.NavLink)`
   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;
     }
   }
-`,f=l.default(y.Flex)`
+`,u=a(h.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,g=l.default(T.Badge)`
-  ${({theme:e,condensed:r})=>r&&`
+`,g=a(v.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};
-`,s=({children:e,icon:r,badgeContent:n,badgeAriaLabel:c,...d})=>b.useMainNav()?t.default.createElement(q.Tooltip,{position:"right",label:e},t.default.createElement(p,{...d},t.default.createElement(f,{as:"span"},t.default.createElement(u,{"aria-hidden":!0,paddingRight:0,as:"span"},r),n&&t.default.createElement(g,{condensed:!0,"aria-label":c},n)))):t.default.createElement(p,{...d},t.default.createElement(f,{as:"span",justifyContent:"space-between"},t.default.createElement(y.Flex,null,t.default.createElement(u,{"aria-hidden":!0,paddingRight:3,as:"span"},r),t.default.createElement(o.Typography,null,e)),n&&t.default.createElement(g,{justifyContent:"center","aria-label":c},n)));s.displayName="NavLink";s.defaultProps={badgeContent:void 0,badgeAriaLabel:void 0};s.propTypes={badgeAriaLabel:a.default.string,badgeContent:a.default.oneOfType([a.default.string,a.default.number]),children:a.default.node.isRequired,icon:a.default.node.isRequired};exports.NavLink=s;
+`,t=({children:e,icon:i,badgeContent:n,badgeAriaLabel:c,...l})=>$.useMainNav()?r.jsx(b.Tooltip,{position:"right",label:e,children:r.jsx(p,{...l,children:r.jsxs(u,{as:"span",children:[r.jsx(d,{"aria-hidden":!0,paddingRight:0,as:"span",children:i}),n&&r.jsx(g,{condensed:!0,"aria-label":c,children:n})]})})}):r.jsx(p,{...l,children:r.jsxs(u,{as:"span",justifyContent:"space-between",children:[r.jsxs(h.Flex,{children:[r.jsx(d,{"aria-hidden":!0,paddingRight:3,as:"span",children:i}),r.jsx(s.Typography,{children:e})]}),n&&r.jsx(g,{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.node.isRequired,icon:o.node.isRequired};exports.NavLink=t;