@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/v2/MainNav/NavBrand.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { BaseLinkProps } from '../../BaseLink';
-export interface NavBrandProps extends BaseLinkProps {
-    icon: React.ReactNode;
-    title: string;
-    to?: string;
-    workplace: string;
-}
-export declare const NavBrand: React.ForwardRefExoticComponent<NavBrandProps & React.RefAttributes<HTMLAnchorElement>>;

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.d.ts

@@ -1,5 +0,0 @@
-import { FlexProps } from '../../Flex';
-export interface NavCondenseProps extends FlexProps<'button'> {
-    children: string;
-}
-export declare const NavCondense: ({ children, ...props }: NavCondenseProps) => import("react/jsx-runtime").JSX.Element;

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.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface NavFooterProps {
-    children: React.ReactNode;
-}
-export declare const NavFooter: ({ children }: NavFooterProps) => import("react/jsx-runtime").JSX.Element;

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 };

package/dist/v2/MainNav/NavLink.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { BaseLinkProps } from '../../BaseLink';
-export interface NavLinkProps extends BaseLinkProps {
-    badgeAriaLabel?: string;
-    badgeContent?: string | number;
-    children: string;
-    icon: React.ReactNode;
-}
-export declare const NavLink: React.ForwardRefExoticComponent<NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/v2/MainNav/NavLink.js

@@ -1,102 +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 Box = require('../../Box/Box.js');
-const BaseLink = require('../../BaseLink/BaseLink.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 React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const IconBox = styled__default.default(Box.Box) `
-  svg {
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-const MainNavLinkWrapper = styled__default.default(BaseLink.BaseLink) `
-  position: relative;
-  text-decoration: none;
-  display: block;
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-
-  ${Typography.Typography} {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.neutral100};
-
-    ${Typography.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.Typography} {
-      color: ${({ theme }) => theme.colors.primary600};
-      font-weight: 500;
-    }
-  }
-`;
-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: -${theme.spaces[3]};
-    right:  -${theme.spaces[1]};
-  `}
-
-  ${Typography.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 = React__default.default.forwardRef(({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
-    const condensed = MainNavContext.useMainNav();
-    if (condensed) {
-        return (jsxRuntime.jsx(MainNavLinkWrapper, { ref: ref, ...props, children: jsxRuntime.jsx(Tooltip.Tooltip, { position: "right", label: children, children: jsxRuntime.jsxs(MainNavRow, { as: "span", justifyContent: "center", 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, { ref: ref, ...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/v2/MainNav/NavLink.mjs

@@ -1,93 +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 { Box } from '../../Box/Box.mjs';
-import { BaseLink } from '../../BaseLink/BaseLink.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(BaseLink) `
-  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 = React__default.forwardRef(({ children, icon, badgeContent, badgeAriaLabel, ...props }, ref) => {
-    const condensed = useMainNav();
-    if (condensed) {
-        return (jsx(MainNavLinkWrapper, { ref: ref, ...props, children: jsx(Tooltip, { position: "right", label: children, children: jsxs(MainNavRow, { as: "span", justifyContent: "center", 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, { ref: ref, ...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/v2/MainNav/NavSection.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { FlexProps } from '../../Flex';
-export interface NavSectionProps extends FlexProps<'ul'> {
-    children: React.ReactNode;
-    label: string;
-    horizontal?: boolean;
-    spacing?: number;
-}
-export declare const NavSection: ({ label, children, horizontal, spacing, ...props }: NavSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/MainNav/NavSection.js

@@ -1,28 +0,0 @@
-'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 Flex = require('../../Flex/Flex.js');
-const Box = require('../../Box/Box.js');
-const Divider = require('../../Divider/Divider.js');
-const VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
-const Typography = require('../../Typography/Typography.js');
-
-const NavSection = ({ label, children, horizontal = false, spacing = 2, ...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.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.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/v2/MainNav/NavSection.mjs

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Children } from 'react';
-import { useMainNav } from './MainNavContext.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Divider } from '../../Divider/Divider.mjs';
-import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const NavSection = ({ label, children, horizontal = false, spacing = 2, ...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: 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: Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) })] }));
-};
-
-export { NavSection };

package/dist/v2/MainNav/NavSections.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FlexProps } from '../../Flex';
-export interface NavSectionsProps extends FlexProps<'ul'> {
-    children: React.ReactNode;
-    spacing?: number;
-    horizontal?: boolean;
-}
-export declare const NavSections: ({ children, spacing, horizontal, ...props }: NavSectionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/MainNav/NavSections.js

@@ -1,26 +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 Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const BoxGrow = styled__default.default(Box.Box) `
-  flex-grow: 1;
-  overflow-y: auto;
-`;
-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.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/v2/MainNav/NavSections.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children } 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: Children.map(children, (child, index) => {
-                // eslint-disable-next-line react/no-array-index-key
-                return jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-export { NavSections };

package/dist/v2/MainNav/NavUser.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { BoxProps } from '../../Box';
-export interface NavUserProps extends BoxProps {
-    children: React.ReactNode;
-    initials?: React.ReactNode;
-    src?: string;
-}
-export declare const NavUser: React.ForwardRefExoticComponent<NavUserProps & React.RefAttributes<any>>;

package/dist/v2/MainNav/NavUser.js

@@ -1,28 +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 Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-const Avatar = require('../../Avatar/Avatar.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 styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const NavUserBox = styled__default.default(Box.Box) `
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const NavUser = React__default.default.forwardRef(({ src, children, initials, ...props }, ref) => {
-    const condensed = MainNavContext.useMainNav();
-    return (jsxRuntime.jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxRuntime.jsxs(Flex.Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsxRuntime.jsx(Avatar.Avatar, { src: src, alt: "", "aria-hidden": true }) : jsxRuntime.jsx(Avatar.Initials, { children: initials }), condensed ? (jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: jsxRuntime.jsx("span", { children: children }) })) : (jsxRuntime.jsx(Box.Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsxRuntime.jsx(Typography.Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
-});
-
-exports.NavUser = NavUser;

package/dist/v2/MainNav/NavUser.mjs

@@ -1,19 +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 { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Avatar, Initials } from '../../Avatar/Avatar.mjs';
-import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const NavUserBox = styled(Box) `
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const NavUser = React__default.forwardRef(({ src, children, initials, ...props }, ref) => {
-    const condensed = useMainNav();
-    return (jsx(NavUserBox, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...props, children: jsxs(Flex, { as: "button", justifyContent: condensed ? 'center' : undefined, ref: ref, children: [src ? jsx(Avatar, { src: src, alt: "", "aria-hidden": true }) : jsx(Initials, { children: initials }), condensed ? (jsx(VisuallyHidden, { children: jsx("span", { children: children }) })) : (jsx(Box, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: jsx(Typography, { ellipsis: true, textColor: "neutral600", children: children }) }))] }) }));
-});
-
-export { NavUser };

package/dist/v2/MainNav/index.d.ts

@@ -1,8 +0,0 @@
-export * from './MainNav';
-export * from './NavBrand';
-export * from './NavCondense';
-export * from './NavFooter';
-export * from './NavLink';
-export * from './NavSection';
-export * from './NavSections';
-export * from './NavUser';

package/dist/v2/MainNav/index.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const MainNav = require('./MainNav.js');
-const NavBrand = require('./NavBrand.js');
-const NavCondense = require('./NavCondense.js');
-const NavFooter = require('./NavFooter.js');
-const NavLink = require('./NavLink.js');
-const NavSection = require('./NavSection.js');
-const NavSections = require('./NavSections.js');
-const NavUser = require('./NavUser.js');
-
-
-
-exports.MainNav = MainNav.MainNav;
-exports.NavBrand = NavBrand.NavBrand;
-exports.NavCondense = NavCondense.NavCondense;
-exports.NavFooter = NavFooter.NavFooter;
-exports.NavLink = NavLink.NavLink;
-exports.NavSection = NavSection.NavSection;
-exports.NavSections = NavSections.NavSections;
-exports.NavUser = NavUser.NavUser;

package/dist/v2/MainNav/index.mjs

@@ -1,8 +0,0 @@
-export { MainNav } from './MainNav.mjs';
-export { NavBrand } from './NavBrand.mjs';
-export { NavCondense } from './NavCondense.mjs';
-export { NavFooter } from './NavFooter.mjs';
-export { NavLink } from './NavLink.mjs';
-export { NavSection } from './NavSection.mjs';
-export { NavSections } from './NavSections.mjs';
-export { NavUser } from './NavUser.mjs';