@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/MainNav/MainNav.mjs

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { MainNavContext } from './MainNavContext.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const MainNavWrapper = styled(Flex) `
+  width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const MainNav = ({ condensed = false, ...props }) => {
+    return (jsx(MainNavContext.Provider, { value: condensed, children: jsx(MainNavWrapper, { alignItems: "normal", as: "nav", background: "neutral0", condensed: condensed, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...props }) }));
+};
+
+export { MainNav };

package/dist/MainNav/MainNavContext.js

@@ -1,6 +1,11 @@
-import { createContext as t, useContext as e } from "react";
-const o = t(!1), a = () => e(o);
-export {
-  o as MainNavContext,
-  a as useMainNav
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+
+const MainNavContext = React.createContext(false);
+const useMainNav = () => React.useContext(MainNavContext);
+
+exports.MainNavContext = MainNavContext;
+exports.useMainNav = useMainNav;

package/dist/MainNav/MainNavContext.mjs

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+
+const MainNavContext = createContext(false);
+const useMainNav = () => useContext(MainNavContext);
+
+export { MainNavContext, useMainNav };

package/dist/MainNav/NavBrand.js

@@ -1,23 +1,39 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { NavLink as t } from "react-router-dom";
-import c from "styled-components";
-import { useMainNav as m } from "./MainNavContext.js";
-import { Box as e } from "../Box/Box.js";
-import { VisuallyHidden as p } from "../VisuallyHidden/VisuallyHidden.js";
-import { Flex as l } from "../Flex/Flex.js";
-import { Typography as s } from "../Typography/Typography.js";
-const h = c.div`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactRouterDom = require('react-router-dom');
+const styled = require('styled-components');
+const MainNavContext = require('./MainNavContext.js');
+const Box = require('../Box/Box.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Flex = require('../Flex/Flex.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const BrandIconWrapper = styled__default.default.div `
   svg,
   img {
-    border-radius: ${({ theme: r }) => r.borderRadius};
+    border-radius: ${({ theme }) => theme.borderRadius};
     object-fit: contain;
-    height: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
-    width: ${({ condensed: r }) => r ? `${40 / 16}rem` : `${32 / 16}rem`};
+    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
   }
-`, g = c(t)`
+`;
+const NavLinkWrapper = styled__default.default(reactRouterDom.NavLink) `
   text-decoration: unset;
   color: inherit;
-`, N = ({ workplace: r, title: o, icon: a, to: i = "/" }) => m() ? n(e, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: n(h, { condensed: !0, children: d(t, { to: i, children: [a, d(p, { children: [n("span", { children: o }), n("span", { children: r })] })] }) }) }) : n(e, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: d(l, { children: [n(h, { as: t, to: i, "aria-hidden": !0, tabIndex: -1, children: a }), d(e, { paddingLeft: 2, children: [n(s, { fontWeight: "bold", textColor: "neutral800", as: "span", children: d(g, { to: i, children: [o, n(p, { as: "span", children: r })] }) }), n(s, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })] })] }) });
-export {
-  N as NavBrand
+`;
+const NavBrand = ({ workplace, title, icon, to = '/' }) => {
+    const condensed = MainNavContext.useMainNav();
+    if (condensed) {
+        return (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsx(BrandIconWrapper, { condensed: true, children: jsxRuntime.jsxs(reactRouterDom.NavLink, { to: to, children: [icon, jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx("span", { children: workplace })] })] }) }) }));
+    }
+    return (jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(BrandIconWrapper, { as: reactRouterDom.NavLink, to: to, "aria-hidden": true, tabIndex: -1, children: icon }), jsxRuntime.jsxs(Box.Box, { paddingLeft: 2, children: [jsxRuntime.jsx(Typography.Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", children: jsxRuntime.jsxs(NavLinkWrapper, { to: to, children: [title, jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "span", children: workplace })] }) }), jsxRuntime.jsx(Typography.Typography, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": true, children: workplace })] })] }) }));
 };
+
+exports.NavBrand = NavBrand;

package/dist/MainNav/NavBrand.mjs

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Box } from '../Box/Box.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const BrandIconWrapper = styled.div `
+  svg,
+  img {
+    border-radius: ${({ theme }) => theme.borderRadius};
+    object-fit: contain;
+    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+  }
+`;
+const NavLinkWrapper = styled(NavLink) `
+  text-decoration: unset;
+  color: inherit;
+`;
+const NavBrand = ({ workplace, title, icon, to = '/' }) => {
+    const condensed = useMainNav();
+    if (condensed) {
+        return (jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsx(BrandIconWrapper, { condensed: true, children: jsxs(NavLink, { to: to, children: [icon, jsxs(VisuallyHidden, { children: [jsx("span", { children: title }), jsx("span", { children: workplace })] })] }) }) }));
+    }
+    return (jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxs(Flex, { children: [jsx(BrandIconWrapper, { as: NavLink, to: to, "aria-hidden": true, tabIndex: -1, children: icon }), jsxs(Box, { paddingLeft: 2, children: [jsx(Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", children: jsxs(NavLinkWrapper, { to: to, children: [title, jsx(VisuallyHidden, { as: "span", children: workplace })] }) }), jsx(Typography, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": true, children: workplace })] })] }) }));
+};
+
+export { NavBrand };

package/dist/MainNav/NavCondense.js

@@ -1,20 +1,29 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { ChevronRight as i, ChevronLeft as s } from "@strapi/icons";
-import d from "styled-components";
-import { useMainNav as a } from "./MainNavContext.js";
-import { Icon as m } from "../Icon/Icon.js";
-import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
-const l = d.button`
-  background: ${({ theme: e }) => e.colors.neutral0};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral150};
-  border-radius: ${({ theme: e }) => e.borderRadius};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const MainNavContext = require('./MainNavContext.js');
+const Icon = require('../Icon/Icon.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const NavCondenseWrapper = styled__default.default.button `
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.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, condensed }) => (condensed ? 0 : theme.spaces[5])};
+  transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
   z-index: 2;
   width: ${18 / 16}rem;
   height: ${25 / 16}rem;
@@ -23,10 +32,10 @@ const l = d.button`
     width: ${6 / 16}rem;
     height: ${9 / 16}rem;
   }
-`, b = ({ children: e, ...r }) => {
-  const o = a();
-  return n(l, { as: "button", condensed: o, ...r, children: [t(m, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(h, { children: e })] });
-};
-export {
-  b as NavCondense
+`;
+const NavCondense = ({ children, ...props }) => {
+    const condensed = MainNavContext.useMainNav();
+    return (jsxRuntime.jsxs(NavCondenseWrapper, { as: "button", condensed: condensed, ...props, children: [jsxRuntime.jsx(Icon.Icon, { as: condensed ? icons.ChevronRight : icons.ChevronLeft, "aria-hidden": true, color: "neutral600" }), jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children })] }));
 };
+
+exports.NavCondense = NavCondense;

package/dist/MainNav/NavCondense.mjs

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronRight, ChevronLeft } from '@strapi/icons';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Icon } from '../Icon/Icon.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+
+const NavCondenseWrapper = styled.button `
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.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, condensed }) => (condensed ? 0 : theme.spaces[5])};
+  transform: ${({ condensed }) => (condensed ? `translateX(50%)` : undefined)};
+  z-index: 2;
+  width: ${18 / 16}rem;
+  height: ${25 / 16}rem;
+
+  svg {
+    width: ${6 / 16}rem;
+    height: ${9 / 16}rem;
+  }
+`;
+const NavCondense = ({ children, ...props }) => {
+    const condensed = useMainNav();
+    return (jsxs(NavCondenseWrapper, { as: "button", condensed: condensed, ...props, children: [jsx(Icon, { as: condensed ? ChevronRight : ChevronLeft, "aria-hidden": true, color: "neutral600" }), jsx(VisuallyHidden, { children: children })] }));
+};
+
+export { NavCondense };

package/dist/MainNav/NavFooter.js

@@ -1,6 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Box as t } from "../Box/Box.js";
-const m = ({ children: o }) => r(t, { position: "relative", children: o });
-export {
-  m as NavFooter
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const Box = require('../Box/Box.js');
+
+const NavFooter = ({ children }) => {
+    return jsxRuntime.jsx(Box.Box, { position: "relative", children: children });
 };
+
+exports.NavFooter = NavFooter;

package/dist/MainNav/NavFooter.mjs

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.mjs';
+
+const NavFooter = ({ children }) => {
+    return jsx(Box, { position: "relative", children: children });
+};
+
+export { NavFooter };

package/dist/MainNav/NavLink.js

@@ -1,81 +1,100 @@
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { NavLink as u } from "react-router-dom";
-import s from "styled-components";
-import { useMainNav as $ } from "./MainNavContext.js";
-import { Box as g } from "../Box/Box.js";
-import { Typography as i } from "../Typography/Typography.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Badge as f } from "../Badge/Badge.js";
-import { Tooltip as v } from "../Tooltip/Tooltip.js";
-const c = s(g)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const reactRouterDom = require('react-router-dom');
+const styled = require('styled-components');
+const MainNavContext = require('./MainNavContext.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.js');
+const Flex = require('../Flex/Flex.js');
+const Badge = require('../Badge/Badge.js');
+const Tooltip = require('../Tooltip/Tooltip.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const IconBox = styled__default.default(Box.Box) `
   svg {
     width: 1rem;
     height: 1rem;
   }
-`, p = s(u)`
+`;
+const MainNavLinkWrapper = styled__default.default(reactRouterDom.NavLink) `
   position: relative;
   text-decoration: none;
   display: block;
-  border-radius: ${({ theme: r }) => r.borderRadius};
-  background: ${({ theme: r }) => r.colors.neutral0};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
 
-  ${i} {
-    color: ${({ theme: r }) => r.colors.neutral600};
+  ${Typography.Typography} {
+    color: ${({ theme }) => theme.colors.neutral600};
   }
 
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
 
   &:hover {
-    background: ${({ theme: r }) => r.colors.neutral100};
+    background: ${({ theme }) => theme.colors.neutral100};
 
-    ${i} {
-      color: ${({ theme: r }) => r.colors.neutral700};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.neutral700};
     }
 
     svg path {
-      fill: ${({ theme: r }) => r.colors.neutral600};
+      fill: ${({ theme }) => theme.colors.neutral600};
     }
   }
 
   &.active {
-    background: ${({ theme: r }) => r.colors.primary100};
+    background: ${({ theme }) => theme.colors.primary100};
 
     svg path {
-      fill: ${({ theme: r }) => r.colors.primary600};
+      fill: ${({ theme }) => theme.colors.primary600};
     }
 
-    ${i} {
-      color: ${({ theme: r }) => r.colors.primary600};
+    ${Typography.Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
       font-weight: 500;
     }
   }
-`, d = s(m)`
-  padding: ${({ theme: r }) => `${r.spaces[2]} ${r.spaces[3]}`};
-`, h = s(f)`
-  ${({ theme: r, condensed: a }) => a && `
+`;
+const MainNavRow = styled__default.default(Flex.Flex) `
+  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};
+`;
+const CustomBadge = styled__default.default(Badge.Badge) `
+  ${({ theme, condensed }) => condensed &&
+    `
 	  position: absolute;
     // Values based on visual aspect 
-    top: -${r.spaces[3]};
-    right:  -${r.spaces[1]};
+    top: -${theme.spaces[3]};
+    right:  -${theme.spaces[1]};
   `}
 
-  ${i} {
+  ${Typography.Typography} {
     //find a solution to remove !important
-    color: ${({ theme: r }) => r.colors.neutral0} !important;
+    color: ${({ theme }) => theme.colors.neutral0} !important;
     line-height: 0;
   }
 
   display: flex;
   justify-content: center;
   align-items: center;
-  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};
-`, M = ({ children: r, icon: a, badgeContent: e, badgeAriaLabel: t, ...l }) => $() ? o(v, { position: "right", label: r, children: o(p, { ...l, children: n(d, { as: "span", children: [o(c, { "aria-hidden": !0, paddingRight: 0, as: "span", children: a }), e && o(h, { condensed: !0, "aria-label": t, children: e })] }) }) }) : o(p, { ...l, children: n(d, { as: "span", justifyContent: "space-between", children: [n(m, { children: [o(c, { "aria-hidden": !0, paddingRight: 3, as: "span", children: a }), o(i, { children: r })] }), e && o(h, { justifyContent: "center", "aria-label": t, children: e })] }) });
-export {
-  M as NavLink
+  min-width: ${({ theme }) => theme.spaces[6]};
+  height: ${({ theme }) => theme.spaces[5]};
+  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
+  border-radius: ${({ theme }) => theme.spaces[10]};
+  background: ${({ theme }) => theme.colors.primary600};
+`;
+const NavLink = ({ children, icon, badgeContent, badgeAriaLabel, ...props }) => {
+    const condensed = MainNavContext.useMainNav();
+    if (condensed) {
+        return (jsxRuntime.jsx(Tooltip.Tooltip, { position: "right", label: children, children: jsxRuntime.jsx(MainNavLinkWrapper, { ...props, children: jsxRuntime.jsxs(MainNavRow, { as: "span", children: [jsxRuntime.jsx(IconBox, { "aria-hidden": true, paddingRight: 0, as: "span", children: icon }), badgeContent && (jsxRuntime.jsx(CustomBadge, { condensed: true, "aria-label": badgeAriaLabel, children: badgeContent }))] }) }) }));
+    }
+    return (jsxRuntime.jsx(MainNavLinkWrapper, { ...props, children: jsxRuntime.jsxs(MainNavRow, { as: "span", justifyContent: "space-between", children: [jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(IconBox, { "aria-hidden": true, paddingRight: 3, as: "span", children: icon }), jsxRuntime.jsx(Typography.Typography, { children: children })] }), badgeContent && (jsxRuntime.jsx(CustomBadge, { justifyContent: "center", "aria-label": badgeAriaLabel, children: badgeContent }))] }) }));
 };
+
+exports.NavLink = NavLink;

package/dist/MainNav/NavLink.mjs

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { NavLink as NavLink$1 } from 'react-router-dom';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Badge } from '../Badge/Badge.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
+
+const IconBox = styled(Box) `
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+`;
+const MainNavLinkWrapper = styled(NavLink$1) `
+  position: relative;
+  text-decoration: none;
+  display: block;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+
+  ${Typography} {
+    color: ${({ theme }) => theme.colors.neutral600};
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.neutral100};
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.neutral700};
+    }
+
+    svg path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+
+  &.active {
+    background: ${({ theme }) => theme.colors.primary100};
+
+    svg path {
+      fill: ${({ theme }) => theme.colors.primary600};
+    }
+
+    ${Typography} {
+      color: ${({ theme }) => theme.colors.primary600};
+      font-weight: 500;
+    }
+  }
+`;
+const MainNavRow = styled(Flex) `
+  padding: ${({ theme }) => `${theme.spaces[2]} ${theme.spaces[3]}`};
+`;
+const CustomBadge = styled(Badge) `
+  ${({ theme, condensed }) => condensed &&
+    `
+	  position: absolute;
+    // Values based on visual aspect 
+    top: -${theme.spaces[3]};
+    right:  -${theme.spaces[1]};
+  `}
+
+  ${Typography} {
+    //find a solution to remove !important
+    color: ${({ theme }) => theme.colors.neutral0} !important;
+    line-height: 0;
+  }
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: ${({ theme }) => theme.spaces[6]};
+  height: ${({ theme }) => theme.spaces[5]};
+  padding: ${({ theme }) => `0 ${theme.spaces[2]}`};
+  border-radius: ${({ theme }) => theme.spaces[10]};
+  background: ${({ theme }) => theme.colors.primary600};
+`;
+const NavLink = ({ children, icon, badgeContent, badgeAriaLabel, ...props }) => {
+    const condensed = useMainNav();
+    if (condensed) {
+        return (jsx(Tooltip, { position: "right", label: children, children: jsx(MainNavLinkWrapper, { ...props, children: jsxs(MainNavRow, { as: "span", children: [jsx(IconBox, { "aria-hidden": true, paddingRight: 0, as: "span", children: icon }), badgeContent && (jsx(CustomBadge, { condensed: true, "aria-label": badgeAriaLabel, children: badgeContent }))] }) }) }));
+    }
+    return (jsx(MainNavLinkWrapper, { ...props, children: jsxs(MainNavRow, { as: "span", justifyContent: "space-between", children: [jsxs(Flex, { children: [jsx(IconBox, { "aria-hidden": true, paddingRight: 3, as: "span", children: icon }), jsx(Typography, { children: children })] }), badgeContent && (jsx(CustomBadge, { justifyContent: "center", "aria-label": badgeAriaLabel, children: badgeContent }))] }) }));
+};
+
+export { NavLink };

package/dist/MainNav/NavSection.js

@@ -1,12 +1,32 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import l from "react";
-import { useMainNav as p } from "./MainNavContext.js";
-import { Divider as u } from "../Divider/Divider.js";
-import { Flex as n } from "../Flex/Flex.js";
-import { Box as s } from "../Box/Box.js";
-import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as h } from "../Typography/Typography.js";
-const j = ({ label: a, children: o, spacing: c = 2, horizontal: e = !1, ...m }) => p() ? d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [d(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [r(u, {}), r(g, { children: r("span", { children: a }) })] }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] }) : d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [r(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: r(h, { variant: "sigma", textColor: "neutral600", children: a }) }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] });
-export {
-  j as NavSection
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const MainNavContext = require('./MainNavContext.js');
+const Divider = require('../Divider/Divider.js');
+const Flex = require('../Flex/Flex.js');
+const Box = require('../Box/Box.js');
+const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+
+const NavSection = ({ label, children, spacing = 2, horizontal = false, ...props }) => {
+    const condensed = MainNavContext.useMainNav();
+    if (condensed) {
+        return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxRuntime.jsxs(Box.Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, as: "span", children: [jsxRuntime.jsx(Divider.Divider, {}), jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx("span", { children: label }) })] }), jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
+                        // eslint-disable-next-line react/no-array-index-key
+                        return jsxRuntime.jsx("li", { children: child }, index);
+                    }) })] }));
+    }
+    return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxRuntime.jsx(Box.Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, as: "span", children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsxRuntime.jsx("li", { children: child }, index);
+                }) })] }));
 };
+
+exports.NavSection = NavSection;

package/dist/MainNav/NavSection.mjs

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { useMainNav } from './MainNavContext.mjs';
+import { Divider } from '../Divider/Divider.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const NavSection = ({ label, children, spacing = 2, horizontal = false, ...props }) => {
+    const condensed = useMainNav();
+    if (condensed) {
+        return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsxs(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: true, as: "span", children: [jsx(Divider, {}), jsx(VisuallyHidden, { children: jsx("span", { children: label }) })] }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
+                        // eslint-disable-next-line react/no-array-index-key
+                        return jsx("li", { children: child }, index);
+                    }) })] }));
+    }
+    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [jsx(Box, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: true, as: "span", children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return jsx("li", { children: child }, index);
+                }) })] }));
+};
+
+export { NavSection };

package/dist/MainNav/NavSections.js

@@ -1,12 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import m from "react";
-import l from "styled-components";
-import { Box as p } from "../Box/Box.js";
-import { Flex as a } from "../Flex/Flex.js";
-const c = l(p)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const styled = require('styled-components');
+const Box = require('../Box/Box.js');
+const Flex = require('../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const BoxGrow = styled__default.default(Box.Box) `
   flex-grow: 1;
   overflow-y: auto;
-`, h = ({ children: t, spacing: e = 4, horizontal: r = !1, ...i }) => o(c, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: o(a, { as: "ul", gap: e, direction: r ? "row" : "column", alignItems: r ? "center" : "stretch", ...i, children: m.Children.map(t, (n, d) => o("li", { children: n }, d)) }) });
-export {
-  h as NavSections
+`;
+const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
+    return (jsxRuntime.jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.default.Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsxRuntime.jsx("li", { children: child }, index);
+            }) }) }));
 };
+
+exports.NavSections = NavSections;

package/dist/MainNav/NavSections.mjs

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box/Box.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+
+const BoxGrow = styled(Box) `
+  flex-grow: 1;
+  overflow-y: auto;
+`;
+const NavSections = ({ children, spacing = 4, horizontal = false, ...props }) => {
+    return (jsx(BoxGrow, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: jsx(Flex, { as: "ul", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React__default.Children.map(children, (child, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsx("li", { children: child }, index);
+            }) }) }));
+};
+
+export { NavSections };