@strapi/design-system 1.7.0 → 1.7.2-alpha.0

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 i=require("react/jsx-runtime");require("react");const a=require("prop-types"),s=require("styled-components"),n=e=>e&&e.__esModule?e:{default:e},r=n(a),u=n(s),d=u.default.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;
+`,t=({labelledBy:e,...o})=>{const l=e||"main-content-title";return i.jsx(d,{"aria-labelledby":l,id:"main-content",tabIndex:-1,...o})};t.defaultProps={labelledBy:void 0};t.propTypes={labelledBy:r.default.string};exports.Main=t;

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 n=require("react/jsx-runtime");require("react");const r=require("prop-types"),s=require("styled-components"),u=require("../Box/Box.cjs"),t=e=>e&&e.__esModule?e:{default:e},i=t(r),a=t(s),c=a.default(u.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})=>n.jsx(c,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",padding:3,position:"absolute",hasRadius:!0,children:e});o.propTypes={children:i.default.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 o=require("react/jsx-runtime");require("react");const a=require("prop-types"),s=require("styled-components"),i=require("./MainNavContext.cjs"),l=require("../Flex/Flex.cjs"),r=e=>e&&e.__esModule?e:{default:e},u=r(a),d=r(s),c=d.default(l.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;
+`,t=({condensed:e,...n})=>o.jsx(i.MainNavContext.Provider,{value:e,children:o.jsx(c,{alignItems:"normal",as:"nav",background:"neutral0",condensed:e,direction:"column",height:"100vh",position:"sticky",top:0,zIndex:2,...n})});t.defaultProps={condensed:!1};t.propTypes={condensed:u.default.bool};exports.MainNav=t;

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

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

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 r=require("react/jsx-runtime");require("react");const t=require("prop-types"),s=require("../Box/Box.cjs"),i=e=>e&&e.__esModule?e:{default:e},u=i(t),o=({children:e})=>r.jsx(s.Box,{position:"relative",children:e});o.displayName="NavFooter";o.propTypes={children:u.default.node.isRequired};exports.NavFooter=o;

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

package/dist/MainNav/NavLink.js

@@ -1,93 +1,103 @@
-import r from "react";
-import o from "prop-types";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import "react";
+import e from "prop-types";
 import { NavLink as g } from "react-router-dom";
-import i from "styled-components";
+import s from "styled-components";
 import { useMainNav as f } from "./MainNavContext.js";
-import { Badge as h } from "../Badge/Badge.js";
 import { Box as v } from "../Box/Box.js";
+import { Typography as i } from "../Typography/Typography.js";
 import { Flex as $ } from "../Flex/Flex.js";
-import { Tooltip as b } from "../Tooltip/Tooltip.js";
-import { Typography as a } from "../Typography/Typography.js";
-const p = i(v)`
+import { Badge as b } from "../Badge/Badge.js";
+import { Tooltip as y } from "../Tooltip/Tooltip.js";
+const p = s(v)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, d = i(g)`
+`, m = s(g)`
   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};
 
-  ${a} {
-    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};
 
-    ${a} {
-      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};
     }
 
-    ${a} {
-      color: ${({ theme: e }) => e.colors.primary600};
+    ${i} {
+      color: ${({ theme: r }) => r.colors.primary600};
       font-weight: 500;
     }
   }
-`, m = i($)`
-  padding: ${({ theme: e }) => `${e.spaces[2]} ${e.spaces[3]}`};
-`, u = i(h)`
-  ${({ theme: e, condensed: t }) => t && `
+`, u = s($)`
+  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
+`, h = s(b)`
+  ${({ 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]};
   `}
 
-  ${a} {
+  ${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 = ({ children: e, icon: t, badgeContent: n, badgeAriaLabel: l, ...c }) => f() ? /* @__PURE__ */ r.createElement(b, { position: "right", label: e }, /* @__PURE__ */ r.createElement(d, { ...c }, /* @__PURE__ */ r.createElement(m, { as: "span" }, /* @__PURE__ */ r.createElement(p, { "aria-hidden": !0, paddingRight: 0, as: "span" }, t), n && /* @__PURE__ */ r.createElement(u, { condensed: !0, "aria-label": l }, n)))) : /* @__PURE__ */ r.createElement(d, { ...c }, /* @__PURE__ */ r.createElement(m, { as: "span", justifyContent: "space-between" }, /* @__PURE__ */ r.createElement($, null, /* @__PURE__ */ r.createElement(p, { "aria-hidden": !0, paddingRight: 3, as: "span" }, t), /* @__PURE__ */ r.createElement(a, null, e)), n && /* @__PURE__ */ r.createElement(u, { 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 = ({ children: r, icon: a, badgeContent: n, badgeAriaLabel: c, ...d }) => f() ? /* @__PURE__ */ o(y, { position: "right", label: r, children: /* @__PURE__ */ o(m, { ...d, children: /* @__PURE__ */ t(u, { as: "span", children: [
+  /* @__PURE__ */ o(p, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }),
+  n && /* @__PURE__ */ o(h, { condensed: !0, "aria-label": c, children: n })
+] }) }) }) : /* @__PURE__ */ o(m, { ...d, children: /* @__PURE__ */ t(u, { as: "span", justifyContent: "space-between", children: [
+  /* @__PURE__ */ t($, { children: [
+    /* @__PURE__ */ o(p, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }),
+    /* @__PURE__ */ o(i, { children: r })
+  ] }),
+  n && /* @__PURE__ */ o(h, { 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.node.isRequired,
-  icon: o.node.isRequired
+l.propTypes = {
+  badgeAriaLabel: e.string,
+  badgeContent: e.oneOfType([e.string, e.number]),
+  children: e.node.isRequired,
+  icon: e.node.isRequired
 };
 export {
-  s as NavLink
+  l as NavLink
 };