@strapi/design-system 1.6.3 → 1.6.5

package/dist/Main/Main.js

@@ -8,12 +8,7 @@ const r = a.main`
   }
 `, e = ({ labelledBy: o, ...t }) => {
   const n = o || "main-content-title";
-  return /* @__PURE__ */ i.createElement(r, {
-    "aria-labelledby": n,
-    id: "main-content",
-    tabIndex: -1,
-    ...t
-  });
+  return /* @__PURE__ */ i.createElement(r, { "aria-labelledby": n, id: "main-content", tabIndex: -1, ...t });
 };
 e.defaultProps = {
   labelledBy: void 0

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("styled-components"),r=require("prop-types"),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=u.default(a.Box)`
+"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)`
   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:l.default.node.isRequired};exports.SkipToContent=o;
+`,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;

package/dist/Main/SkipToContent.js

@@ -1,8 +1,8 @@
 import e from "react";
-import t from "styled-components";
-import r from "prop-types";
+import t from "prop-types";
+import r from "styled-components";
 import { Box as n } from "../Box/Box.js";
-const p = t(n)`
+const p = r(n)`
   text-decoration: none;
   z-index: 9999;
   left: -100%;
@@ -12,17 +12,21 @@ const p = t(n)`
     left: ${({ theme: o }) => o.spaces[3]};
     top: ${({ theme: o }) => o.spaces[3]};
   }
-`, a = ({ children: o }) => /* @__PURE__ */ e.createElement(p, {
-  as: "a",
-  href: "#main-content",
-  background: "primary600",
-  color: "neutral0",
-  padding: 3,
-  position: "absolute",
-  hasRadius: !0
-}, o);
+`, a = ({ children: o }) => /* @__PURE__ */ e.createElement(
+  p,
+  {
+    as: "a",
+    href: "#main-content",
+    background: "primary600",
+    color: "neutral0",
+    padding: 3,
+    position: "absolute",
+    hasRadius: !0
+  },
+  o
+);
 a.propTypes = {
-  children: r.node.isRequired
+  children: t.node.isRequired
 };
 export {
   a as 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("styled-components"),s=require("prop-types"),c=require("../Flex/Flex.cjs"),i=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(r),u=t(l),d=t(s),p=u.default(c.Flex)`
+"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)`
   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(i.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:d.default.bool};exports.MainNav=o;
+`,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;

package/dist/MainNav/MainNav.js

@@ -1,30 +1,31 @@
 import o from "react";
-import n from "styled-components";
-import a from "prop-types";
-import { Flex as i } from "../Flex/Flex.js";
-import { MainNavContext as m } from "./MainNavContext.js";
-const p = n(i)`
+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(m.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 = ({ 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: a.bool
+  condensed: n.bool
 };
 export {
   r as MainNav

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"),y=require("styled-components"),d=require("react-router-dom"),r=require("../Box/Box.cjs"),s=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),h=require("./MainNavContext.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.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`
   svg,
   img {
     border-radius: ${({theme:e})=>e.borderRadius};
@@ -9,4 +9,4 @@
 `,v=f.default(d.NavLink)`
   text-decoration: unset;
   color: inherit;
-`,o=({workplace:e,title:i,icon:u,to:n})=>h.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(x.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;
+`,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;

package/dist/MainNav/NavBrand.js

@@ -1,11 +1,11 @@
 import e from "react";
 import r from "prop-types";
-import s from "styled-components";
 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 { Typography as m } from "../Typography/Typography.js";
-import { Flex as u } from "../Flex/Flex.js";
-import { useMainNav as g } from "./MainNavContext.js";
 import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
 const l = s.div`
   svg,
@@ -18,41 +18,7 @@ const l = s.div`
 `, f = s(i)`
   text-decoration: unset;
   color: inherit;
-`, c = ({ workplace: t, title: o, icon: d, to: n }) => g() ? /* @__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(u, 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 = ({ 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 = {
   to: "/"
 };

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"),d=require("prop-types"),l=require("styled-components"),s=require("@strapi/icons"),c=require("../Icon/Icon.cjs"),u=require("../VisuallyHidden/VisuallyHidden.cjs"),p=require("./MainNavContext.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.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`
   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=p.useMainNav();return n.default.createElement(y,{as:"button",condensed:r,...t},n.default.createElement(c.Icon,{as:r?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.default.createElement(u.VisuallyHidden,null,e))};a.propTypes={children:f.default.string.isRequired};exports.NavCondense=a;
+`,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;

package/dist/MainNav/NavCondense.js

@@ -1,11 +1,11 @@
 import t from "react";
-import n from "prop-types";
-import i from "styled-components";
-import { ChevronRight as s, ChevronLeft as a } from "@strapi/icons";
-import { Icon as d } from "../Icon/Icon.js";
-import { VisuallyHidden as m } from "../VisuallyHidden/VisuallyHidden.js";
-import { useMainNav as l } from "./MainNavContext.js";
-const p = i.button`
+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 { 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};
@@ -25,19 +25,11 @@ const p = i.button`
     height: ${9 / 16}rem;
   }
 `, c = ({ children: e, ...r }) => {
-  const o = l();
-  return /* @__PURE__ */ t.createElement(p, {
-    as: "button",
-    condensed: o,
-    ...r
-  }, /* @__PURE__ */ t.createElement(d, {
-    as: o ? s : a,
-    "aria-hidden": !0,
-    color: "neutral600"
-  }), /* @__PURE__ */ t.createElement(m, null, e));
+  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: n.string.isRequired
+  children: s.string.isRequired
 };
 export {
   c as NavCondense

package/dist/MainNav/NavFooter.js

@@ -1,9 +1,7 @@
 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);
+const e = ({ children: o }) => /* @__PURE__ */ r.createElement(p, { position: "relative" }, o);
 e.displayName = "NavFooter";
 e.propTypes = {
   children: t.node.isRequired

package/dist/MainNav/NavLink.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),$=require("styled-components"),h=require("prop-types"),v=require("react-router-dom"),b=require("../Box/Box.cjs"),y=require("../Flex/Flex.cjs"),o=require("../Typography/Typography.cjs"),T=require("./MainNavContext.cjs"),x=require("../Tooltip/Tooltip.cjs"),q=require("../Badge/Badge.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(m),l=i($),a=i(h),u=l.default(b.Box)`
+"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)`
   svg {
     width: 1rem;
     height: 1rem;
   }
-`,p=l.default(v.NavLink)`
+`,p=l.default(h.NavLink)`
   position: relative;
   text-decoration: none;
   display: block;
@@ -44,7 +44,7 @@
   }
 `,f=l.default(y.Flex)`
   padding: ${({theme:e})=>`${e.spaces[2]} ${e.spaces[3]}`};
-`,g=l.default(q.Badge)`
+`,g=l.default(T.Badge)`
   ${({theme:e,condensed:r})=>r&&`
 	  position: absolute;
     // Values based on visual aspect 
@@ -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})=>T.useMainNav()?t.default.createElement(x.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;
+`,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;

package/dist/MainNav/NavLink.js

@@ -1,14 +1,14 @@
 import r from "react";
-import i from "styled-components";
 import o from "prop-types";
 import { NavLink as g } from "react-router-dom";
-import { Box as f } from "../Box/Box.js";
+import i 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 { Flex as $ } from "../Flex/Flex.js";
+import { Tooltip as b } from "../Tooltip/Tooltip.js";
 import { Typography as a } from "../Typography/Typography.js";
-import { useMainNav as h } from "./MainNavContext.js";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-import { Badge as b } from "../Badge/Badge.js";
-const p = i(f)`
+const p = i(v)`
   svg {
     width: 1rem;
     height: 1rem;
@@ -54,7 +54,7 @@ const p = i(f)`
   }
 `, m = i($)`
   padding: ${({ theme: e }) => `${e.spaces[2]} ${e.spaces[3]}`};
-`, u = i(b)`
+`, u = i(h)`
   ${({ theme: e, condensed: t }) => t && `
 	  position: absolute;
     // Values based on visual aspect 
@@ -76,33 +76,7 @@ const p = i(f)`
   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 }) => h() ? /* @__PURE__ */ r.createElement(v, {
-  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 = ({ 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 = {
   badgeContent: void 0,

package/dist/MainNav/NavSection.cjs

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

package/dist/MainNav/NavSection.js

@@ -1,49 +1,36 @@
-import e, { Children as m } from "react";
-import p from "prop-types";
-import { Box as l } from "../Box/Box.js";
-import { Typography as d } from "../Typography/Typography.js";
-import { Stack as t } from "../Stack/Stack.js";
+import e, { Children as c } from "react";
+import d from "prop-types";
 import { useMainNav as s } from "./MainNavContext.js";
-import { VisuallyHidden as c } from "../VisuallyHidden/VisuallyHidden.js";
+import { Box as p } from "../Box/Box.js";
 import { Divider as u } from "../Divider/Divider.js";
-const g = ({ label: n, children: i, ...o }) => s() ? /* @__PURE__ */ e.createElement(t, {
-  spacing: 2
-}, /* @__PURE__ */ e.createElement(l, {
-  paddingTop: 1,
-  paddingBottom: 1,
-  background: "neutral0",
-  hasRadius: !0,
-  as: "span"
-}, /* @__PURE__ */ e.createElement(u, null), /* @__PURE__ */ e.createElement(c, null, /* @__PURE__ */ e.createElement("span", null, n))), /* @__PURE__ */ e.createElement(t, {
-  as: "ul",
-  spacing: 2,
-  ...o
-}, m.map(i, (r, a) => /* @__PURE__ */ e.createElement("li", {
-  key: a
-}, r)))) : /* @__PURE__ */ e.createElement(t, {
-  spacing: 2
-}, /* @__PURE__ */ e.createElement(l, {
-  paddingTop: 1,
-  paddingBottom: 1,
-  background: "neutral0",
-  paddingRight: 3,
-  paddingLeft: 3,
-  hasRadius: !0,
-  as: "span"
-}, /* @__PURE__ */ e.createElement(d, {
-  variant: "sigma",
-  textColor: "neutral600"
-}, n)), /* @__PURE__ */ e.createElement(t, {
-  as: "ul",
-  spacing: 2,
-  ...o
-}, m.map(i, (r, a) => /* @__PURE__ */ e.createElement("li", {
-  key: a
-}, r))));
-g.propTypes = {
-  children: p.node.isRequired,
-  label: p.string.isRequired
+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, spacing: o = 2, horizontal: t = !1, ...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
 };
 export {
-  g as NavSection
+  E as NavSection
 };

package/dist/MainNav/NavSections.cjs

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

package/dist/MainNav/NavSections.js

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

package/dist/MainNav/NavUser.cjs

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

package/dist/MainNav/NavUser.js

@@ -1,39 +1,18 @@
 import e from "react";
 import r from "prop-types";
 import m from "styled-components";
-import { Avatar as s, Initials as c } from "../Avatar/Avatar.js";
+import { useMainNav as s } from "./MainNavContext.js";
+import { Avatar as c, Initials as f } from "../Avatar/Avatar.js";
 import "../Avatar/AvatarGroup.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { Flex as u } from "../Flex/Flex.js";
 import { Box as n } from "../Box/Box.js";
-import { useMainNav as g } from "./MainNavContext.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { Typography as g } from "../Typography/Typography.js";
 import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
 const y = m(n)`
   border-top: 1px solid ${({ theme: t }) => t.colors.neutral150};
 `, o = e.forwardRef(({ src: t, children: i, initials: l, ...p }, d) => {
-  const a = g();
-  return /* @__PURE__ */ e.createElement(y, {
-    paddingTop: 3,
-    paddingBottom: 3,
-    paddingLeft: 5,
-    paddingRight: 5,
-    ...p
-  }, /* @__PURE__ */ e.createElement(u, {
-    as: "button",
-    justifyContent: a ? "center" : void 0,
-    ref: d
-  }, t ? /* @__PURE__ */ e.createElement(s, {
-    src: t,
-    alt: "",
-    "aria-hidden": !0
-  }) : /* @__PURE__ */ e.createElement(c, null, l), a ? /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("span", null, i)) : /* @__PURE__ */ e.createElement(n, {
-    width: `${130 / 16}rem`,
-    paddingLeft: 2,
-    as: "span"
-  }, /* @__PURE__ */ e.createElement(f, {
-    ellipsis: !0,
-    textColor: "neutral600"
-  }, i))));
+  const a = s();
+  return /* @__PURE__ */ e.createElement(y, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...p }, /* @__PURE__ */ e.createElement(u, { as: "button", justifyContent: a ? "center" : void 0, ref: d }, t ? /* @__PURE__ */ e.createElement(c, { src: t, alt: "", "aria-hidden": !0 }) : /* @__PURE__ */ e.createElement(f, null, l), a ? /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement("span", null, i)) : /* @__PURE__ */ e.createElement(n, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span" }, /* @__PURE__ */ e.createElement(g, { ellipsis: !0, textColor: "neutral600" }, i))));
 });
 o.displayName = "NavUser";
 o.defaultProps = {

package/dist/ModalLayout/ModalBody.js

@@ -4,10 +4,7 @@ import { Box as e } from "../Box/Box.js";
 const a = r(e)`
   overflow: auto;
   max-height: 60vh;
-`, l = (o) => /* @__PURE__ */ t.createElement(a, {
-  padding: 7,
-  ...o
-});
+`, l = (o) => /* @__PURE__ */ t.createElement(a, { padding: 7, ...o });
 export {
   l as ModalBody
 };

package/dist/ModalLayout/ModalFooter.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),c=require("styled-components"),i=require("prop-types"),p=require("../Box/Box.cjs"),n=require("../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(u),l=o(c),a=o(i),f=l.default(p.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),c=require("prop-types"),i=require("styled-components"),p=require("../Box/Box.cjs"),n=require("../Flex/Flex.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(u),a=o(c),l=o(i),f=l.default(p.Box)`
   border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
   border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
 `,d=l.default(n.Flex)`