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

package/dist/v2/Breadcrumbs/Divider.mjs

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box } from '../../Box/Box.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const Divider = () => {
+    return (jsx(Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: jsx(Typography, { variant: "pi", textColor: "neutral500", children: "/" }) }));
+};
+Divider.displayName = 'Divider';
+
+export { Divider };

package/dist/v2/Breadcrumbs/index.js

@@ -1,10 +1,15 @@
-import { Breadcrumbs as o } from "./Breadcrumbs.js";
-import { Crumb as p } from "./Crumb.js";
-import { CrumbLink as b } from "./CrumbLink.js";
-import { CrumbSimpleMenu as t } from "./CrumbSimpleMenu.js";
-export {
-  o as Breadcrumbs,
-  p as Crumb,
-  b as CrumbLink,
-  t as CrumbSimpleMenu
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Breadcrumbs = require('./Breadcrumbs.js');
+const Crumb = require('./Crumb.js');
+const CrumbLink = require('./CrumbLink.js');
+const CrumbSimpleMenu = require('./CrumbSimpleMenu.js');
+
+
+
+exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
+exports.Crumb = Crumb.Crumb;
+exports.CrumbLink = CrumbLink.CrumbLink;
+exports.CrumbSimpleMenu = CrumbSimpleMenu.CrumbSimpleMenu;

package/dist/v2/Breadcrumbs/index.mjs

@@ -0,0 +1,4 @@
+export { Breadcrumbs } from './Breadcrumbs.mjs';
+export { Crumb } from './Crumb.mjs';
+export { CrumbLink } from './CrumbLink.mjs';
+export { CrumbSimpleMenu } from './CrumbSimpleMenu.mjs';

package/dist/v2/Link/Link.js

@@ -1,36 +1,48 @@
-import { jsxs as s, jsx as n } from "react/jsx-runtime";
-import m from "react";
-import { ExternalLink as f } from "@strapi/icons";
-import c from "styled-components";
-import { buttonFocusStyle as y } from "../../themes/utils.js";
-import { BaseLink as d } from "../../BaseLink/BaseLink.js";
-import { Typography as u } from "../../Typography/Typography.js";
-const x = c(d)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const utils = require('../../themes/utils.js');
+const BaseLink = require('../../BaseLink/BaseLink.js');
+const Typography = require('../../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const LinkWrapper = styled__default.default(BaseLink.BaseLink) `
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  gap: ${({ theme: r }) => r.spaces[2]};
-  pointer-events: ${({ disabled: r }) => r ? "none" : void 0};
+  gap: ${({ theme }) => theme.spaces[2]};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
 
   svg {
     font-size: ${10 / 16}rem;
 
     path {
-      fill: ${({ disabled: r, theme: o }) => r ? o.colors.neutral600 : o.colors.primary600};
+      fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
     }
   }
 
   &:hover {
-    color: ${({ theme: r }) => r.colors.primary500};
+    color: ${({ theme }) => theme.colors.primary500};
   }
 
   &:active {
-    color: ${({ theme: r }) => r.colors.primary700};
+    color: ${({ theme }) => theme.colors.primary700};
   }
 
-  ${y};
-`, $ = m.forwardRef(({ children: r, href: o, disabled: e = !1, startIcon: a, endIcon: t, isExternal: i = !0, ...l }, p) => s(x, { ref: p, href: o, disabled: e, isExternal: i, ...l, children: [a, n(u, { textColor: e ? "neutral600" : "primary600", children: r }), t, o && !t && i && n(f, {})] }));
-$.displayName = "Link";
-export {
-  $ as Link
-};
+  ${utils.buttonFocusStyle};
+`;
+const Link = React__default.default.forwardRef(({ children, href, disabled = false, startIcon, endIcon, isExternal = true, ...props }, ref) => {
+    return (jsxRuntime.jsxs(LinkWrapper, { ref: ref, href: href, disabled: disabled, isExternal: isExternal, ...props, children: [startIcon, jsxRuntime.jsx(Typography.Typography, { textColor: disabled ? 'neutral600' : 'primary600', children: children }), endIcon, href && !endIcon && isExternal && jsxRuntime.jsx(icons.ExternalLink, {})] }));
+});
+Link.displayName = 'Link';
+
+exports.Link = Link;

package/dist/v2/Link/Link.mjs

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ExternalLink } from '@strapi/icons';
+import styled from 'styled-components';
+import { buttonFocusStyle } from '../../themes/utils.mjs';
+import { BaseLink } from '../../BaseLink/BaseLink.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const LinkWrapper = styled(BaseLink) `
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  gap: ${({ theme }) => theme.spaces[2]};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : undefined)};
+
+  svg {
+    font-size: ${10 / 16}rem;
+
+    path {
+      fill: ${({ disabled, theme }) => (disabled ? theme.colors.neutral600 : theme.colors.primary600)};
+    }
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary500};
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.primary700};
+  }
+
+  ${buttonFocusStyle};
+`;
+const Link = React__default.forwardRef(({ children, href, disabled = false, startIcon, endIcon, isExternal = true, ...props }, ref) => {
+    return (jsxs(LinkWrapper, { ref: ref, href: href, disabled: disabled, isExternal: isExternal, ...props, children: [startIcon, jsx(Typography, { textColor: disabled ? 'neutral600' : 'primary600', children: children }), endIcon, href && !endIcon && isExternal && jsx(ExternalLink, {})] }));
+});
+Link.displayName = 'Link';
+
+export { Link };

package/dist/v2/Link/index.js

@@ -1,4 +1,9 @@
-import { Link as e } from "./Link.js";
-export {
-  e as Link
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Link = require('./Link.js');
+
+
+
+exports.Link = Link.Link;

package/dist/v2/Link/index.mjs

@@ -0,0 +1 @@
+export { Link } from './Link.mjs';

package/dist/v2/LinkButton/LinkButton.js

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

package/dist/v2/LinkButton/LinkButton.mjs

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from '../../Button/utils.mjs';
+import { BaseButtonWrapper } from '../../BaseButton/BaseButton.mjs';
+import { BaseLink } from '../../BaseLink/BaseLink.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const LinkWrapper = styled(BaseButtonWrapper) `
+  text-decoration: none;
+
+  &[aria-disabled='true'] {
+    ${getDisabledStyle}
+    &:active {
+      ${getDisabledStyle}
+    }
+  }
+
+  &:hover {
+    ${getHoverStyle}
+  }
+
+  &:active {
+    ${getActiveStyle}
+  }
+
+  ${getVariantStyle}
+`;
+const LinkButton = React__default.forwardRef(({ variant = 'default', startIcon, endIcon, disabled = false, children, size = 'S', as = BaseLink, ...props }, ref) => {
+    const paddingX = size === 'S' ? 2 : '10px';
+    const paddingY = 4;
+    return (jsxs(LinkWrapper, { ref: ref, "aria-disabled": disabled, size: size, variant: variant, background: "buttonPrimary600", borderColor: "buttonPrimary600", hasRadius: true, gap: 2, inline: true, paddingBottom: paddingX, paddingLeft: paddingY, paddingRight: paddingY, paddingTop: paddingX, pointerEvents: disabled ? 'none' : undefined, ...props, as: as || BaseLink, children: [startIcon && jsx(Flex, { "aria-hidden": true, children: startIcon }), jsx(Typography, { variant: size === 'S' ? 'pi' : undefined, fontWeight: "bold", textColor: "buttonNeutral0", children: children }), endIcon && jsx(Flex, { "aria-hidden": true, children: endIcon })] }));
+});
+LinkButton.displayName = 'LinkButton';
+
+export { LinkButton };

package/dist/v2/LinkButton/index.js

@@ -1,4 +1,9 @@
-import { LinkButton as n } from "./LinkButton.js";
-export {
-  n as LinkButton
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const LinkButton = require('./LinkButton.js');
+
+
+
+exports.LinkButton = LinkButton.LinkButton;

package/dist/v2/LinkButton/index.mjs

@@ -0,0 +1 @@
+export { LinkButton } from './LinkButton.mjs';

package/dist/v2/MainNav/MainNav.js

@@ -1,11 +1,22 @@
-import { jsx as o } from "react/jsx-runtime";
-import n from "styled-components";
-import { MainNavContext as e } from "./MainNavContext.js";
-import { Flex as i } from "../../Flex/Flex.js";
-const a = n(i)`
-  width: ${({ condensed: r }) => r ? "max-content" : `${224 / 16}rem`};
-  border-right: 1px solid ${({ theme: r }) => r.colors.neutral150};
-`, c = ({ condensed: r = !1, ...t }) => o(e.Provider, { value: r, children: o(a, { alignItems: "normal", as: "nav", background: "neutral0", condensed: r, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...t }) });
-export {
-  c as MainNav
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styled = require('styled-components');
+const MainNavContext = require('./MainNavContext.js');
+const Flex = require('../../Flex/Flex.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const MainNavWrapper = styled__default.default(Flex.Flex) `
+  width: ${({ condensed }) => (condensed ? 'max-content' : `${224 / 16}rem`)};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+const MainNav = ({ condensed = false, ...props }) => {
+    return (jsxRuntime.jsx(MainNavContext.MainNavContext.Provider, { value: condensed, children: jsxRuntime.jsx(MainNavWrapper, { alignItems: "normal", as: "nav", background: "neutral0", condensed: condensed, direction: "column", height: "100vh", position: "sticky", top: 0, zIndex: 2, ...props }) }));
 };
+
+exports.MainNav = MainNav;

package/dist/v2/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/v2/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/v2/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/v2/MainNav/NavBrand.js

@@ -1,27 +1,46 @@
-import { jsx as d, jsxs as e } from "react/jsx-runtime";
-import f from "react";
-import l from "styled-components";
-import { useMainNav as g } from "./MainNavContext.js";
-import { BaseLink as c } from "../../BaseLink/BaseLink.js";
-import { Box as n } from "../../Box/Box.js";
-import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
-import { Flex as u } from "../../Flex/Flex.js";
-import { Typography as p } from "../../Typography/Typography.js";
-const h = l.div`
-  border-radius: ${({ theme: r }) => r.borderRadius};
+'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 MainNavContext = require('./MainNavContext.js');
+const BaseLink = require('../../BaseLink/BaseLink.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 React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const BrandIconWrapper = styled__default.default.div `
+  border-radius: ${({ theme }) => theme.borderRadius};
 
   svg,
   img {
-    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`)};
   }
-`, x = l(c)`
+`;
+const NavLinkWrapper = styled__default.default(BaseLink.BaseLink) `
   text-decoration: unset;
   color: inherit;
-`, W = f.forwardRef(({ workplace: r, title: t, icon: o, ...i }, a) => {
-  const s = g();
-  return i.to = i?.to ?? "/", s ? d(c, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(h, { condensed: !0, children: [o, e(m, { children: [d("span", { children: t }), d("span", { children: r })] })] }) }) }) : d(x, { ref: a, ...i, children: d(n, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: e(u, { children: [d(h, { "aria-hidden": !0, tabIndex: -1, children: o }), e(n, { paddingLeft: 2, children: [e(p, { fontWeight: "bold", textColor: "neutral800", as: "span", children: [t, d(m, { as: "span", children: r })] }), d(p, { variant: "pi", as: "p", textColor: "neutral600", "aria-hidden": !0, children: r })] })] }) }) });
+`;
+const NavBrand = React__default.default.forwardRef(({ workplace, title, icon, ...props }, ref) => {
+    const condensed = MainNavContext.useMainNav();
+    /**
+     * TODO: this shouldn't be here, because we're assuming you're
+     * passing a ReactRouter Link which isn't necessarily the case.
+     */
+    props.to = props?.to ?? '/';
+    if (condensed) {
+        return (jsxRuntime.jsx(BaseLink.BaseLink, { ref: ref, ...props, children: jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsxs(BrandIconWrapper, { condensed: true, children: [icon, jsxRuntime.jsxs(VisuallyHidden.VisuallyHidden, { children: [jsxRuntime.jsx("span", { children: title }), jsxRuntime.jsx("span", { children: workplace })] })] }) }) }));
+    }
+    return (jsxRuntime.jsx(NavLinkWrapper, { ref: ref, ...props, children: jsxRuntime.jsx(Box.Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxRuntime.jsxs(Flex.Flex, { children: [jsxRuntime.jsx(BrandIconWrapper, { "aria-hidden": true, tabIndex: -1, children: icon }), jsxRuntime.jsxs(Box.Box, { paddingLeft: 2, children: [jsxRuntime.jsxs(Typography.Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", 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 })] })] }) }) }));
 });
-export {
-  W as NavBrand
-};
+
+exports.NavBrand = NavBrand;

package/dist/v2/MainNav/NavBrand.mjs

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { BaseLink } from '../../BaseLink/BaseLink.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 `
+  border-radius: ${({ theme }) => theme.borderRadius};
+
+  svg,
+  img {
+    height: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
+  }
+`;
+const NavLinkWrapper = styled(BaseLink) `
+  text-decoration: unset;
+  color: inherit;
+`;
+const NavBrand = React__default.forwardRef(({ workplace, title, icon, ...props }, ref) => {
+    const condensed = useMainNav();
+    /**
+     * TODO: this shouldn't be here, because we're assuming you're
+     * passing a ReactRouter Link which isn't necessarily the case.
+     */
+    props.to = props?.to ?? '/';
+    if (condensed) {
+        return (jsx(BaseLink, { ref: ref, ...props, children: jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxs(BrandIconWrapper, { condensed: true, children: [icon, jsxs(VisuallyHidden, { children: [jsx("span", { children: title }), jsx("span", { children: workplace })] })] }) }) }));
+    }
+    return (jsx(NavLinkWrapper, { ref: ref, ...props, children: jsx(Box, { paddingLeft: 3, paddingRight: 3, paddingTop: 4, paddingBottom: 4, children: jsxs(Flex, { children: [jsx(BrandIconWrapper, { "aria-hidden": true, tabIndex: -1, children: icon }), jsxs(Box, { paddingLeft: 2, children: [jsxs(Typography, { fontWeight: "bold", textColor: "neutral800", as: "span", 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/v2/MainNav/NavCondense.js

@@ -1,21 +1,30 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { ChevronRight as i, ChevronLeft as s } from "@strapi/icons";
-import d from "styled-components";
-import { useMainNav as a } from "./MainNavContext.js";
-import { Flex as m } from "../../Flex/Flex.js";
-import { Icon as h } from "../../Icon/Icon.js";
-import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
-const c = d(m).attrs((r) => ({
-  justifyContent: "center",
-  ...r
-}))`
-  background: ${({ theme: r }) => r.colors.neutral0};
-  border: 1px solid ${({ theme: r }) => r.colors.neutral150};
-  border-radius: ${({ theme: r }) => r.borderRadius};
+'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 Flex = require('../../Flex/Flex.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(Flex.Flex).attrs((props) => ({
+    justifyContent: 'center',
+    ...props,
+})) `
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
   position: absolute;
   bottom: ${(9 + 4) / 16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({ theme: r, condensed: e }) => e ? 0 : r.spaces[5]};
-  transform: ${({ condensed: r }) => r ? "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;
@@ -24,10 +33,10 @@ const c = d(m).attrs((r) => ({
     width: ${6 / 16}rem;
     height: ${9 / 16}rem;
   }
-`, x = ({ children: r, ...e }) => {
-  const o = a();
-  return n(c, { as: "button", condensed: o, ...e, children: [t(h, { as: o ? i : s, "aria-hidden": !0, color: "neutral600" }), t(l, { children: r })] });
-};
-export {
-  x 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/v2/MainNav/NavCondense.mjs

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChevronRight, ChevronLeft } from '@strapi/icons';
+import styled from 'styled-components';
+import { useMainNav } from './MainNavContext.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+
+const NavCondenseWrapper = styled(Flex).attrs((props) => ({
+    justifyContent: 'center',
+    ...props,
+})) `
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral150};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  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/v2/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/v2/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 };