@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/v2/Breadcrumbs/Crumb.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-
-const Crumb = ({ children, isCurrent = false, ...props }) => (jsxRuntime.jsx(Box.Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral800", fontWeight: isCurrent ? 'bold' : 'normal', "aria-current": isCurrent, ...props, children: children }) }));
-Crumb.displayName = 'Crumb';
-
-exports.Crumb = Crumb;

package/dist/v2/Breadcrumbs/Crumb.mjs

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '../../Box/Box.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const Crumb = ({ children, isCurrent = false, ...props }) => (jsx(Box, { paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: jsx(Typography, { variant: "pi", textColor: "neutral800", fontWeight: isCurrent ? 'bold' : 'normal', "aria-current": isCurrent, ...props, children: children }) }));
-Crumb.displayName = 'Crumb';
-
-export { Crumb };

package/dist/v2/Breadcrumbs/CrumbLink.js

@@ -1,30 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const BaseLink = require('../../BaseLink/BaseLink.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledLink = styled__default.default(BaseLink.BaseLink) `
-  border-radius: ${({ theme }) => theme.borderRadius};
-  color: ${({ theme }) => theme.colors.neutral600};
-  font-size: ${({ theme }) => theme.fontSizes[1]};
-  line-height: ${({ theme }) => theme.lineHeights[4]};
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
-  text-decoration: none;
-
-  :hover,
-  :focus {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-    color: ${({ theme }) => theme.colors.neutral700};
-  }
-`;
-const CrumbLink = ({ children, ...props }) => jsxRuntime.jsx(StyledLink, { ...props, children: children });
-CrumbLink.displayName = 'CrumbLink';
-
-exports.CrumbLink = CrumbLink;

package/dist/v2/Breadcrumbs/CrumbLink.mjs

@@ -1,22 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { BaseLink } from '../../BaseLink/BaseLink.mjs';
-
-const StyledLink = styled(BaseLink) `
-  border-radius: ${({ theme }) => theme.borderRadius};
-  color: ${({ theme }) => theme.colors.neutral600};
-  font-size: ${({ theme }) => theme.fontSizes[1]};
-  line-height: ${({ theme }) => theme.lineHeights[4]};
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
-  text-decoration: none;
-
-  :hover,
-  :focus {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-    color: ${({ theme }) => theme.colors.neutral700};
-  }
-`;
-const CrumbLink = ({ children, ...props }) => jsx(StyledLink, { ...props, children: children });
-CrumbLink.displayName = 'CrumbLink';
-
-export { CrumbLink };

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const SimpleMenu = require('../SimpleMenu/SimpleMenu.js');
-const Button = require('../../Button/Button.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const StyledButton = styled__default.default(Button.Button) `
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
-  height: unset;
-
-  :hover,
-  :focus {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-  }
-`;
-const CrumbSimpleMenu = ({ children, ...props }) => (jsxRuntime.jsx(SimpleMenu.SimpleMenu, { endIcon: null, as: StyledButton, size: "S", ...props, children: children }));
-CrumbSimpleMenu.displayName = 'CrumbSimpleMenu';
-
-exports.CrumbSimpleMenu = CrumbSimpleMenu;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { SimpleMenu } from '../SimpleMenu/SimpleMenu.mjs';
-import { Button } from '../../Button/Button.mjs';
-
-const StyledButton = styled(Button) `
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[2]}`};
-  height: unset;
-
-  :hover,
-  :focus {
-    background-color: ${({ theme }) => theme.colors.neutral200};
-  }
-`;
-const CrumbSimpleMenu = ({ children, ...props }) => (jsx(SimpleMenu, { endIcon: null, as: StyledButton, size: "S", ...props, children: children }));
-CrumbSimpleMenu.displayName = 'CrumbSimpleMenu';
-
-export { CrumbSimpleMenu };

package/dist/v2/Breadcrumbs/Divider.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-
-const Divider = () => {
-    return (jsxRuntime.jsx(Box.Box, { "aria-hidden": true, paddingLeft: 1, paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "neutral500", children: "/" }) }));
-};
-Divider.displayName = 'Divider';
-
-exports.Divider = Divider;

package/dist/v2/Breadcrumbs/Divider.mjs

@@ -1,10 +0,0 @@
-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,15 +0,0 @@
-'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

@@ -1,4 +0,0 @@
-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,48 +0,0 @@
-'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 }) => 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};
-  }
-
-  ${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

@@ -1,39 +0,0 @@
-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,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Link = require('./Link.js');
-
-
-
-exports.Link = Link.Link;

package/dist/v2/Link/index.mjs

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

package/dist/v2/LinkButton/LinkButton.js

@@ -1,46 +0,0 @@
-'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'] {
-    ${utils.getDisabledStyle}
-    &:active {
-      ${utils.getDisabledStyle}
-    }
-  }
-
-  &:hover {
-    ${utils.getHoverStyle}
-  }
-
-  &:active {
-    ${utils.getActiveStyle}
-  }
-
-  ${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 })] }));
-});
-LinkButton.displayName = 'LinkButton';
-
-exports.LinkButton = LinkButton;

package/dist/v2/LinkButton/LinkButton.mjs

@@ -1,37 +0,0 @@
-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,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const LinkButton = require('./LinkButton.js');
-
-
-
-exports.LinkButton = LinkButton.LinkButton;

package/dist/v2/LinkButton/index.mjs

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

package/dist/v2/MainNav/MainNav.js

@@ -1,22 +0,0 @@
-'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

@@ -1,14 +0,0 @@
-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,11 +0,0 @@
-'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

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

package/dist/v2/MainNav/NavBrand.js

@@ -1,46 +0,0 @@
-'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 }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-    width: ${({ condensed }) => (condensed ? `${40 / 16}rem` : `${32 / 16}rem`)};
-  }
-`;
-const NavLinkWrapper = styled__default.default(BaseLink.BaseLink) `
-  text-decoration: unset;
-  color: inherit;
-`;
-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 })] })] }) }) }));
-});
-
-exports.NavBrand = NavBrand;

package/dist/v2/MainNav/NavBrand.mjs

@@ -1,37 +0,0 @@
-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,42 +0,0 @@
-'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, 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 = 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

@@ -1,34 +0,0 @@
-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,12 +0,0 @@
-'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

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