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

package/dist/v2/SubNav/SubNavLink.mjs

@@ -1,57 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import { Dot } from '@strapi/icons';
-import styled from 'styled-components';
-import { Box } from '../../Box/Box.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { BaseLink } from '../../BaseLink/BaseLink.mjs';
-
-const SubNavLinkWrapper = styled(Box) `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-decoration: none;
-  color: ${({ theme }) => theme.colors.neutral800};
-  svg > * {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-
-  &.active {
-    ${({ theme }) => {
-    return `
-      background-color: ${theme.colors.primary100};
-      border-right: 2px solid ${theme.colors.primary600};
-      svg > * {
-        fill: ${theme.colors.primary700};
-      }
-      ${Typography} {
-        color: ${theme.colors.primary700};
-        font-weight: 500;
-      }
-      `;
-}}
-  }
-
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-`;
-const CustomBullet = styled(Dot) `
-  width: ${12 / 16}rem;
-  height: ${4 / 16}rem;
-  * {
-    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
-  }
-`;
-const IconWrapper = styled.div `
-  svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
-  }
-`;
-const SubNavLink = React__default.forwardRef(({ children, icon = null, withBullet = false, as = BaseLink, isSubSectionChild = false, ...props }, ref) => {
-    return (jsxs(SubNavLinkWrapper, { as: as, icon: icon, background: "neutral100", paddingLeft: isSubSectionChild ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: ref, ...props, children: [jsxs(Flex, { children: [icon ? jsx(IconWrapper, { children: icon }) : jsx(CustomBullet, {}), jsx(Box, { paddingLeft: 2, children: jsx(Typography, { as: "span", children: children }) })] }), withBullet && (jsx(Box, { as: Flex, paddingRight: 4, children: jsx(CustomBullet, { "$active": true }) }))] }));
-});
-
-export { SubNavLink };

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -1,51 +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 useId = require('../../hooks/useId.js');
-const Box = require('../../Box/Box.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 SubNavLinkSectionWrapper = styled__default.default(Box.Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral700};
-    }
-  }
-`;
-const SubNavLinkSectionButton = styled__default.default.button `
-  border: none;
-  padding: 0;
-  background: transparent;
-  display: flex;
-  align-items: center;
-`;
-const DropDownIconWrapper = styled__default.default.div `
-  display: flex;
-  align-items: center;
-  width: ${12 / 16}rem;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavLinkSection = ({ label, children, id }) => {
-    const [isOpen, setOpenLinks] = React.useState(true);
-    const listId = useId.useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxRuntime.jsxs(Box.Box, { children: [jsxRuntime.jsx(SubNavLinkSectionWrapper, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsxRuntime.jsx(Flex.Flex, { justifyContent: "space-between", children: jsxRuntime.jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [jsxRuntime.jsx(DropDownIconWrapper, { rotated: isOpen, children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: jsxRuntime.jsx(Typography.Typography, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: label }) })] }) }) }), isOpen && (jsxRuntime.jsx("ul", { id: listId, children: React.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsxRuntime.jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-exports.SubNavLinkSection = SubNavLinkSection;

package/dist/v2/SubNav/SubNavLinkSection.mjs

@@ -1,43 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, Children } from 'react';
-import { CarretDown } from '@strapi/icons';
-import styled from 'styled-components';
-import { useId } from '../../hooks/useId.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const SubNavLinkSectionWrapper = styled(Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral700};
-    }
-  }
-`;
-const SubNavLinkSectionButton = styled.button `
-  border: none;
-  padding: 0;
-  background: transparent;
-  display: flex;
-  align-items: center;
-`;
-const DropDownIconWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  width: ${12 / 16}rem;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavLinkSection = ({ label, children, id }) => {
-    const [isOpen, setOpenLinks] = useState(true);
-    const listId = useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxs(Box, { children: [jsx(SubNavLinkSectionWrapper, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsx(Flex, { justifyContent: "space-between", children: jsxs(SubNavLinkSectionButton, { onClick: handleClick, "aria-expanded": isOpen, "aria-controls": listId, children: [jsx(DropDownIconWrapper, { rotated: isOpen, children: jsx(CarretDown, { "aria-hidden": true }) }), jsx(Box, { paddingLeft: 2, children: jsx(Typography, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: label }) })] }) }) }), isOpen && (jsx("ul", { id: listId, children: Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-export { SubNavLinkSection };

package/dist/v2/SubNav/SubNavSection.js

@@ -1,38 +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 SubNavSectionLabel = require('./SubNavSectionLabel.js');
-const useId = require('../../hooks/useId.js');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-const Badge = require('../../Badge/Badge.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavSectionWrapper = styled__default.default(Box.Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-`;
-const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
-    const [isOpen, setOpenLinks] = React.useState(true);
-    const listId = useId.useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsxRuntime.jsxs(Box.Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsxRuntime.jsx(SubNavSectionLabel.SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsxRuntime.jsx(Badge.Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsxRuntime.jsx("ol", { id: listId, children: React.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsxRuntime.jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-exports.SubNavSection = SubNavSection;

package/dist/v2/SubNav/SubNavSection.mjs

@@ -1,30 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, Children } from 'react';
-import styled from 'styled-components';
-import { SubNavSectionLabel } from './SubNavSectionLabel.mjs';
-import { useId } from '../../hooks/useId.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Badge } from '../../Badge/Badge.mjs';
-
-const SubNavSectionWrapper = styled(Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-`;
-const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
-    const [isOpen, setOpenLinks] = useState(true);
-    const listId = useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsxs(Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsx(SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsx("ol", { id: listId, children: Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-export { SubNavSection };

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -1,33 +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 Flex = require('../../Flex/Flex.js');
-const Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavSectionLabelWrapper = styled__default.default(Flex.Flex) `
-  border: none;
-  padding: 0;
-  background: transparent;
-`;
-const DropDownIconWrapper = styled__default.default.div `
-  display: flex;
-  align-items: center;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
-    if (collapsable) {
-        return (jsxRuntime.jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsxRuntime.jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }))] }));
-    }
-    return (jsxRuntime.jsx(SubNavSectionLabelWrapper, { children: jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
-};
-
-exports.SubNavSectionLabel = SubNavSectionLabel;

package/dist/v2/SubNav/SubNavSectionLabel.mjs

@@ -1,25 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { CarretDown } from '@strapi/icons';
-import styled from 'styled-components';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const SubNavSectionLabelWrapper = styled(Flex) `
-  border: none;
-  padding: 0;
-  background: transparent;
-`;
-const DropDownIconWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
-    if (collapsable) {
-        return (jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsx(CarretDown, { "aria-hidden": true }) }))] }));
-    }
-    return (jsx(SubNavSectionLabelWrapper, { children: jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
-};
-
-export { SubNavSectionLabel };

package/dist/v2/SubNav/SubNavSections.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-
-const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
-    return (jsxRuntime.jsx(Box.Box, { paddingTop: 2, paddingBottom: 4, children: jsxRuntime.jsx(Flex.Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React.Children.map(children, (child, index) => {
-                /* eslint-disable react/no-array-index-key */
-                return jsxRuntime.jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-exports.SubNavSections = SubNavSections;

package/dist/v2/SubNav/SubNavSections.mjs

@@ -1,13 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children } from 'react';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-
-const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
-    return (jsx(Box, { paddingTop: 2, paddingBottom: 4, children: jsx(Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: Children.map(children, (child, index) => {
-                /* eslint-disable react/no-array-index-key */
-                return jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-export { SubNavSections };

package/dist/v2/SubNav/index.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SubNav = require('./SubNav.js');
-const SubNavHeader = require('./SubNavHeader.js');
-const SubNavLink = require('./SubNavLink.js');
-const SubNavLinkSection = require('./SubNavLinkSection.js');
-const SubNavSection = require('./SubNavSection.js');
-const SubNavSections = require('./SubNavSections.js');
-
-
-
-exports.SubNav = SubNav.SubNav;
-exports.subNavWidth = SubNav.subNavWidth;
-exports.SubNavHeader = SubNavHeader.SubNavHeader;
-exports.SubNavLink = SubNavLink.SubNavLink;
-exports.SubNavLinkSection = SubNavLinkSection.SubNavLinkSection;
-exports.SubNavSection = SubNavSection.SubNavSection;
-exports.SubNavSections = SubNavSections.SubNavSections;

package/dist/v2/SubNav/index.mjs

@@ -1,6 +0,0 @@
-export { SubNav, subNavWidth } from './SubNav.mjs';
-export { SubNavHeader } from './SubNavHeader.mjs';
-export { SubNavLink } from './SubNavLink.mjs';
-export { SubNavLinkSection } from './SubNavLinkSection.mjs';
-export { SubNavSection } from './SubNavSection.mjs';
-export { SubNavSections } from './SubNavSections.mjs';

package/dist/v2/index.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Breadcrumbs = require('./Breadcrumbs/Breadcrumbs.js');
-const Crumb = require('./Breadcrumbs/Crumb.js');
-const CrumbLink = require('./Breadcrumbs/CrumbLink.js');
-const CrumbSimpleMenu = require('./Breadcrumbs/CrumbSimpleMenu.js');
-const Link = require('./Link/Link.js');
-const LinkButton = require('./LinkButton/LinkButton.js');
-const MainNav = require('./MainNav/MainNav.js');
-const NavBrand = require('./MainNav/NavBrand.js');
-const NavCondense = require('./MainNav/NavCondense.js');
-const NavFooter = require('./MainNav/NavFooter.js');
-const NavLink = require('./MainNav/NavLink.js');
-const NavSection = require('./MainNav/NavSection.js');
-const NavSections = require('./MainNav/NavSections.js');
-const NavUser = require('./MainNav/NavUser.js');
-const Pagination = require('./Pagination/Pagination.js');
-const components = require('./Pagination/components.js');
-const SimpleMenu = require('./SimpleMenu/SimpleMenu.js');
-const Menu = require('./SimpleMenu/Menu.js');
-const SubNav = require('./SubNav/SubNav.js');
-const SubNavHeader = require('./SubNav/SubNavHeader.js');
-const SubNavLink = require('./SubNav/SubNavLink.js');
-const SubNavLinkSection = require('./SubNav/SubNavLinkSection.js');
-const SubNavSection = require('./SubNav/SubNavSection.js');
-const SubNavSections = require('./SubNav/SubNavSections.js');
-
-
-
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.Crumb = Crumb.Crumb;
-exports.CrumbLink = CrumbLink.CrumbLink;
-exports.CrumbSimpleMenu = CrumbSimpleMenu.CrumbSimpleMenu;
-exports.Link = Link.Link;
-exports.LinkButton = LinkButton.LinkButton;
-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;
-exports.Pagination = Pagination.Pagination;
-exports.Dots = components.Dots;
-exports.NextLink = components.NextLink;
-exports.PageLink = components.PageLink;
-exports.PreviousLink = components.PreviousLink;
-exports.MenuItem = SimpleMenu.MenuItem;
-exports.SimpleMenu = SimpleMenu.SimpleMenu;
-exports.Menu = Menu;
-exports.SubNav = SubNav.SubNav;
-exports.subNavWidth = SubNav.subNavWidth;
-exports.SubNavHeader = SubNavHeader.SubNavHeader;
-exports.SubNavLink = SubNavLink.SubNavLink;
-exports.SubNavLinkSection = SubNavLinkSection.SubNavLinkSection;
-exports.SubNavSection = SubNavSection.SubNavSection;
-exports.SubNavSections = SubNavSections.SubNavSections;

package/dist/v2/index.mjs

@@ -1,25 +0,0 @@
-export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.mjs';
-export { Crumb } from './Breadcrumbs/Crumb.mjs';
-export { CrumbLink } from './Breadcrumbs/CrumbLink.mjs';
-export { CrumbSimpleMenu } from './Breadcrumbs/CrumbSimpleMenu.mjs';
-export { Link } from './Link/Link.mjs';
-export { LinkButton } from './LinkButton/LinkButton.mjs';
-export { MainNav } from './MainNav/MainNav.mjs';
-export { NavBrand } from './MainNav/NavBrand.mjs';
-export { NavCondense } from './MainNav/NavCondense.mjs';
-export { NavFooter } from './MainNav/NavFooter.mjs';
-export { NavLink } from './MainNav/NavLink.mjs';
-export { NavSection } from './MainNav/NavSection.mjs';
-export { NavSections } from './MainNav/NavSections.mjs';
-export { NavUser } from './MainNav/NavUser.mjs';
-export { Pagination } from './Pagination/Pagination.mjs';
-export { Dots, NextLink, PageLink, PreviousLink } from './Pagination/components.mjs';
-export { MenuItem, SimpleMenu } from './SimpleMenu/SimpleMenu.mjs';
-import * as Menu from './SimpleMenu/Menu.mjs';
-export { Menu };
-export { SubNav, subNavWidth } from './SubNav/SubNav.mjs';
-export { SubNavHeader } from './SubNav/SubNavHeader.mjs';
-export { SubNavLink } from './SubNav/SubNavLink.mjs';
-export { SubNavLinkSection } from './SubNav/SubNavLinkSection.mjs';
-export { SubNavSection } from './SubNav/SubNavSection.mjs';
-export { SubNavSections } from './SubNav/SubNavSections.mjs';