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

package/dist/v2/SimpleMenu/SimpleMenu.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 Menu = require('./Menu.js');
-const strings = require('../../helpers/strings.js');
-const useId = require('../../hooks/useId.js');
-const useIntersection = require('../../hooks/useIntersection.js');
-
-const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
-    /**
-     * Used for the intersection observer
-     */
-    const contentRef = React.useRef(null);
-    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    const handleOpenChange = (isOpen) => {
-        if (isOpen && typeof onOpen === 'function') {
-            onOpen();
-        }
-        else if (!isOpen && typeof onClose === 'function') {
-            onClose();
-        }
-        setInternalIsOpen(isOpen);
-    };
-    const generatedId = useId.useId();
-    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedId)}`;
-    useIntersection.useIntersection(contentRef, handleReachEnd, {
-        selectorToWatch: `#${intersectionId}`,
-        /**
-         * We need to know when the select is open because only then will viewportRef
-         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-         */
-        skipWhen: !internalIsOpen,
-    });
-    return (jsxRuntime.jsxs(Menu.Root, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Menu.Trigger, { ...props, children: props.label }), jsxRuntime.jsx(Menu.Content, { intersectionId: intersectionId, popoverPlacement: popoverPlacement, children: children })] }));
-};
-const MenuItem = Menu.Item;
-
-exports.Menu = Menu;
-exports.MenuItem = MenuItem;
-exports.SimpleMenu = SimpleMenu;

package/dist/v2/SimpleMenu/SimpleMenu.mjs

@@ -1,44 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState } from 'react';
-import { Root, Trigger, Content, Item } from './Menu.mjs';
-import * as Menu from './Menu.mjs';
-export { Menu };
-import { stripReactIdOfColon } from '../../helpers/strings.mjs';
-import { useId } from '../../hooks/useId.mjs';
-import { useIntersection } from '../../hooks/useIntersection.mjs';
-
-const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
-    /**
-     * Used for the intersection observer
-     */
-    const contentRef = useRef(null);
-    const [internalIsOpen, setInternalIsOpen] = useState(false);
-    const handleReachEnd = (entry) => {
-        if (onReachEnd) {
-            onReachEnd(entry);
-        }
-    };
-    const handleOpenChange = (isOpen) => {
-        if (isOpen && typeof onOpen === 'function') {
-            onOpen();
-        }
-        else if (!isOpen && typeof onClose === 'function') {
-            onClose();
-        }
-        setInternalIsOpen(isOpen);
-    };
-    const generatedId = useId();
-    const intersectionId = `intersection-${stripReactIdOfColon(generatedId)}`;
-    useIntersection(contentRef, handleReachEnd, {
-        selectorToWatch: `#${intersectionId}`,
-        /**
-         * We need to know when the select is open because only then will viewportRef
-         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
-         */
-        skipWhen: !internalIsOpen,
-    });
-    return (jsxs(Root, { onOpenChange: handleOpenChange, children: [jsx(Trigger, { ...props, children: props.label }), jsx(Content, { intersectionId: intersectionId, popoverPlacement: popoverPlacement, children: children })] }));
-};
-const MenuItem = Item;
-
-export { MenuItem, SimpleMenu };

package/dist/v2/SimpleMenu/__tests__/Menu.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/v2/SimpleMenu/__tests__/SimpleMenu.spec.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export * from './SimpleMenu';

package/dist/v2/SimpleMenu/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SimpleMenu = require('./SimpleMenu.js');
-const Menu = require('./Menu.js');
-
-
-
-exports.MenuItem = SimpleMenu.MenuItem;
-exports.SimpleMenu = SimpleMenu.SimpleMenu;
-exports.Menu = Menu;

package/dist/v2/SimpleMenu/index.mjs

@@ -1,3 +0,0 @@
-export { MenuItem, SimpleMenu } from './SimpleMenu.mjs';
-import * as Menu from './Menu.mjs';
-export { Menu };

package/dist/v2/SubNav/SubNav.d.ts

@@ -1,6 +0,0 @@
-import { GridProps } from '../../Grid';
-export declare const subNavWidth = "14.5rem";
-export interface SubNavProps extends GridProps {
-    ariaLabel: string;
-}
-export declare const SubNav: ({ ariaLabel, ...props }: SubNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/SubNav/SubNav.js

@@ -1,29 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Grid = require('../../Grid/Grid.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const subNavWidth = `${232 / 16}rem`;
-const SubNavWrapper = styled__default.default(Grid.Grid) `
-  width: ${subNavWidth};
-  background: ${({ theme }) => theme.colors.neutral100};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  z-index: 1;
-`;
-const SubNav = ({ ariaLabel, ...props }) => {
-    return jsxRuntime.jsx(SubNavWrapper, { "aria-label": ariaLabel, as: "nav", ...props });
-};
-
-exports.SubNav = SubNav;
-exports.subNavWidth = subNavWidth;

package/dist/v2/SubNav/SubNav.mjs

@@ -1,20 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Grid } from '../../Grid/Grid.mjs';
-
-const subNavWidth = `${232 / 16}rem`;
-const SubNavWrapper = styled(Grid) `
-  width: ${subNavWidth};
-  background: ${({ theme }) => theme.colors.neutral100};
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  z-index: 1;
-`;
-const SubNav = ({ ariaLabel, ...props }) => {
-    return jsx(SubNavWrapper, { "aria-label": ariaLabel, as: "nav", ...props });
-};
-
-export { SubNav, subNavWidth };

package/dist/v2/SubNav/SubNavHeader.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export interface SubNavHeaderProps {
-    as?: keyof JSX.IntrinsicElements;
-    id?: string;
-    label: string;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    onClear?: React.MouseEventHandler<HTMLInputElement>;
-    onSubmit?: React.FormEventHandler<HTMLInputElement>;
-    searchLabel?: string;
-    searchable?: boolean;
-    value?: string;
-}
-export declare const SubNavHeader: ({ as, label, searchLabel, searchable, onChange, value, onClear, onSubmit, id, }: SubNavHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/SubNav/SubNavHeader.js

@@ -1,65 +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 keyboardKeys = require('../../helpers/keyboardKeys.js');
-const useId = require('../../hooks/useId.js');
-const usePrevious = require('../../hooks/usePrevious.js');
-const Divider = require('../../Divider/Divider.js');
-const Box = require('../../Box/Box.js');
-const SearchForm = require('../../Searchbar/SearchForm.js');
-const Searchbar = require('../../Searchbar/Searchbar.js');
-const Flex = require('../../Flex/Flex.js');
-const Typography = require('../../Typography/Typography.js');
-const IconButton = require('../../IconButton/IconButton.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const CustomDivider = styled__default.default(Divider.Divider) `
-  width: ${24 / 16}rem;
-  background-color: ${({ theme }) => theme.colors.neutral200};
-`;
-const SubNavHeader = ({ as = 'h2', label, searchLabel = '', searchable = false, onChange = () => { }, value = '', onClear = () => { }, onSubmit = () => { }, id, }) => {
-    const [isSearchOpen, setSearchOpen] = React.useState(false);
-    const previousSearchOpenValue = usePrevious.usePrevious(isSearchOpen);
-    const clearButtonId = useId.useId(id);
-    const searchRef = React.useRef(undefined);
-    const searchButtonRef = React.useRef(undefined);
-    React.useEffect(() => {
-        if (isSearchOpen && searchRef.current) {
-            searchRef.current.focus();
-        }
-        if (previousSearchOpenValue && !isSearchOpen && searchButtonRef.current) {
-            searchButtonRef.current.focus();
-        }
-    }, [isSearchOpen, previousSearchOpenValue]);
-    const toggleSearch = () => {
-        setSearchOpen((isOpen) => !isOpen);
-    };
-    const handleClear = (e) => {
-        onClear(e);
-        searchRef.current.focus();
-    };
-    const handleBlur = (e) => {
-        if (e.relatedTarget?.id !== clearButtonId) {
-            setSearchOpen(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === keyboardKeys.KeyboardKeys.ESCAPE) {
-            setSearchOpen(false);
-        }
-    };
-    if (isSearchOpen) {
-        return (jsxRuntime.jsxs(Box.Box, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [jsxRuntime.jsx(SearchForm.SearchForm, { children: jsxRuntime.jsx(Searchbar.Searchbar, { name: "searchbar", value: value, onChange: onChange, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: handleKeyDown, ref: searchRef, onBlur: handleBlur, onClear: handleClear, onSubmit: onSubmit, clearLabel: "Clear", size: "S", children: searchLabel }) }), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, paddingTop: 4, children: jsxRuntime.jsx(CustomDivider, {}) })] }));
-    }
-    return (jsxRuntime.jsxs(Box.Box, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, children: label }), searchable && (jsxRuntime.jsx(IconButton.IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, icon: jsxRuntime.jsx(icons.Search, {}) }))] }), jsxRuntime.jsx(Box.Box, { paddingTop: 4, children: jsxRuntime.jsx(CustomDivider, {}) })] }));
-};
-
-exports.SubNavHeader = SubNavHeader;

package/dist/v2/SubNav/SubNavHeader.mjs

@@ -1,57 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
-import { Search } from '@strapi/icons';
-import styled from 'styled-components';
-import { KeyboardKeys } from '../../helpers/keyboardKeys.mjs';
-import { useId } from '../../hooks/useId.mjs';
-import { usePrevious } from '../../hooks/usePrevious.mjs';
-import { Divider } from '../../Divider/Divider.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { SearchForm } from '../../Searchbar/SearchForm.mjs';
-import { Searchbar } from '../../Searchbar/Searchbar.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-import { IconButton } from '../../IconButton/IconButton.mjs';
-
-const CustomDivider = styled(Divider) `
-  width: ${24 / 16}rem;
-  background-color: ${({ theme }) => theme.colors.neutral200};
-`;
-const SubNavHeader = ({ as = 'h2', label, searchLabel = '', searchable = false, onChange = () => { }, value = '', onClear = () => { }, onSubmit = () => { }, id, }) => {
-    const [isSearchOpen, setSearchOpen] = useState(false);
-    const previousSearchOpenValue = usePrevious(isSearchOpen);
-    const clearButtonId = useId(id);
-    const searchRef = useRef(undefined);
-    const searchButtonRef = useRef(undefined);
-    useEffect(() => {
-        if (isSearchOpen && searchRef.current) {
-            searchRef.current.focus();
-        }
-        if (previousSearchOpenValue && !isSearchOpen && searchButtonRef.current) {
-            searchButtonRef.current.focus();
-        }
-    }, [isSearchOpen, previousSearchOpenValue]);
-    const toggleSearch = () => {
-        setSearchOpen((isOpen) => !isOpen);
-    };
-    const handleClear = (e) => {
-        onClear(e);
-        searchRef.current.focus();
-    };
-    const handleBlur = (e) => {
-        if (e.relatedTarget?.id !== clearButtonId) {
-            setSearchOpen(false);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (e.key === KeyboardKeys.ESCAPE) {
-            setSearchOpen(false);
-        }
-    };
-    if (isSearchOpen) {
-        return (jsxs(Box, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [jsx(SearchForm, { children: jsx(Searchbar, { name: "searchbar", value: value, onChange: onChange, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: handleKeyDown, ref: searchRef, onBlur: handleBlur, onClear: handleClear, onSubmit: onSubmit, clearLabel: "Clear", size: "S", children: searchLabel }) }), jsx(Box, { paddingLeft: 2, paddingTop: 4, children: jsx(CustomDivider, {}) })] }));
-    }
-    return (jsxs(Box, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [jsx(Typography, { variant: "beta", as: as, children: label }), searchable && (jsx(IconButton, { ref: searchButtonRef, onClick: toggleSearch, label: searchLabel, icon: jsx(Search, {}) }))] }), jsx(Box, { paddingTop: 4, children: jsx(CustomDivider, {}) })] }));
-};
-
-export { SubNavHeader };

package/dist/v2/SubNav/SubNavLink.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface SubNavLinkProps {
-    as?: React.ElementType;
-    children: React.ReactNode;
-    icon?: React.ReactElement;
-    isSubSectionChild?: boolean;
-    withBullet?: boolean;
-}
-export declare const SubNavLink: React.ForwardRefExoticComponent<SubNavLinkProps & React.RefAttributes<unknown>>;

package/dist/v2/SubNav/SubNavLink.js

@@ -1,66 +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 Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-const Flex = require('../../Flex/Flex.js');
-const BaseLink = require('../../BaseLink/BaseLink.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavLinkWrapper = styled__default.default(Box.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.Typography} {
-        color: ${theme.colors.primary700};
-        font-weight: 500;
-      }
-      `;
-}}
-  }
-
-  &:focus-visible {
-    outline-offset: -2px;
-  }
-`;
-const CustomBullet = styled__default.default(icons.Dot) `
-  width: ${12 / 16}rem;
-  height: ${4 / 16}rem;
-  * {
-    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
-  }
-`;
-const IconWrapper = styled__default.default.div `
-  svg {
-    height: ${12 / 16}rem;
-    width: ${12 / 16}rem;
-  }
-`;
-const SubNavLink = React__default.default.forwardRef(({ children, icon = null, withBullet = false, as = BaseLink.BaseLink, isSubSectionChild = false, ...props }, ref) => {
-    return (jsxRuntime.jsxs(SubNavLinkWrapper, { as: as, icon: icon, background: "neutral100", paddingLeft: isSubSectionChild ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: ref, ...props, children: [jsxRuntime.jsxs(Flex.Flex, { children: [icon ? jsxRuntime.jsx(IconWrapper, { children: icon }) : jsxRuntime.jsx(CustomBullet, {}), jsxRuntime.jsx(Box.Box, { paddingLeft: 2, children: jsxRuntime.jsx(Typography.Typography, { as: "span", children: children }) })] }), withBullet && (jsxRuntime.jsx(Box.Box, { as: Flex.Flex, paddingRight: 4, children: jsxRuntime.jsx(CustomBullet, { "$active": true }) }))] }));
-});
-
-exports.SubNavLink = SubNavLink;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-export interface SubNavLinkSectionProps {
-    children: React.ReactNode;
-    id?: string;
-    label: string;
-}
-export declare const SubNavLinkSection: ({ label, children, id }: SubNavLinkSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface SubNavSectionProps {
-    badgeLabel?: string;
-    children: React.ReactNode;
-    collapsable?: boolean;
-    id?: string;
-    label: string;
-}
-export declare const SubNavSection: ({ collapsable, label, badgeLabel, children, id }: SubNavSectionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface SubNavSectionLabelProps {
-    ariaControls?: string;
-    ariaExpanded?: boolean;
-    collapsable?: boolean;
-    label: string;
-    onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;
-}
-export declare const SubNavSectionLabel: ({ collapsable, label, onClick, ariaExpanded, ariaControls, }: SubNavSectionLabelProps) => import("react/jsx-runtime").JSX.Element;