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

package/dist/v2/SimpleMenu/SimpleMenu.mjs

@@ -0,0 +1,44 @@
+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/index.js

@@ -1,7 +1,12 @@
-import { MenuItem as r, SimpleMenu as p } from "./SimpleMenu.js";
-import * as e from "./Menu.js";
-export {
-  e as Menu,
-  r as MenuItem,
-  p as SimpleMenu
-};
+'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

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

package/dist/v2/SubNav/SubNav.js

@@ -1,17 +1,29 @@
-import { jsx as t } from "react/jsx-runtime";
-import i from "styled-components";
-import { Grid as a } from "../../Grid/Grid.js";
-const e = `${232 / 16}rem`, s = i(a)`
-  width: ${e};
-  background: ${({ theme: o }) => o.colors.neutral100};
+'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: o }) => o.colors.neutral200};
+  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
   z-index: 1;
-`, d = ({ ariaLabel: o, ...r }) => t(s, { "aria-label": o, as: "nav", ...r });
-export {
-  d as SubNav,
-  e as subNavWidth
+`;
+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

@@ -0,0 +1,20 @@
+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.js

@@ -1,39 +1,65 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useState as R, useRef as p, useEffect as w } from "react";
-import { Search as D } from "@strapi/icons";
-import I from "styled-components";
-import { KeyboardKeys as K } from "../../helpers/keyboardKeys.js";
-import { useId as j } from "../../hooks/useId.js";
-import { usePrevious as k } from "../../hooks/usePrevious.js";
-import { Divider as E } from "../../Divider/Divider.js";
-import { Box as t } from "../../Box/Box.js";
-import { SearchForm as L } from "../../Searchbar/SearchForm.js";
-import { Searchbar as O } from "../../Searchbar/Searchbar.js";
-import { Flex as F } from "../../Flex/Flex.js";
-import { Typography as P } from "../../Typography/Typography.js";
-import { IconButton as $ } from "../../IconButton/IconButton.js";
-const l = I(E)`
+'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: i }) => i.colors.neutral200};
-`, Z = ({ as: i = "h2", label: m, searchLabel: s = "", searchable: u = !1, onChange: h = () => {
-}, value: g = "", onClear: S = () => {
-}, onSubmit: b = () => {
-}, id: y }) => {
-  const [o, a] = R(!1), f = k(o), B = j(y), n = p(void 0), d = p(void 0);
-  w(() => {
-    o && n.current && n.current.focus(), f && !o && d.current && d.current.focus();
-  }, [o, f]);
-  const C = () => {
-    a((r) => !r);
-  }, v = (r) => {
-    S(r), n.current.focus();
-  }, x = (r) => {
-    r.relatedTarget?.id !== B && a(!1);
-  }, T = (r) => {
-    r.key === K.ESCAPE && a(!1);
-  };
-  return o ? c(t, { paddingLeft: 4, paddingTop: 5, paddingBottom: 2, paddingRight: 4, children: [e(L, { children: e(O, { name: "searchbar", value: g, onChange: h, placeholder: "e.g: strapi-plugin-abcd", onKeyDown: T, ref: n, onBlur: x, onClear: v, onSubmit: b, clearLabel: "Clear", size: "S", children: s }) }), e(t, { paddingLeft: 2, paddingTop: 4, children: e(l, {}) })] }) : c(t, { paddingLeft: 6, paddingTop: 6, paddingBottom: 2, paddingRight: 4, children: [c(F, { justifyContent: "space-between", alignItems: "flex-start", children: [e(P, { variant: "beta", as: i, children: m }), u && e($, { ref: d, onClick: C, label: s, icon: e(D, {}) })] }), e(t, { paddingTop: 4, children: e(l, {}) })] });
-};
-export {
-  Z as SubNavHeader
+  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

@@ -0,0 +1,57 @@
+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.js

@@ -1,50 +1,66 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import u from "react";
-import { Dot as g } from "@strapi/icons";
-import e from "styled-components";
-import { Box as t } from "../../Box/Box.js";
-import { Typography as s } from "../../Typography/Typography.js";
-import { Flex as n } from "../../Flex/Flex.js";
-import { BaseLink as $ } from "../../BaseLink/BaseLink.js";
-const h = e(t)`
+'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: r }) => r.colors.neutral800};
+  color: ${({ theme }) => theme.colors.neutral800};
   svg > * {
-    fill: ${({ theme: r }) => r.colors.neutral600};
+    fill: ${({ theme }) => theme.colors.neutral600};
   }
 
   &.active {
-    ${({ theme: r }) => `
-      background-color: ${r.colors.primary100};
-      border-right: 2px solid ${r.colors.primary600};
+    ${({ theme }) => {
+    return `
+      background-color: ${theme.colors.primary100};
+      border-right: 2px solid ${theme.colors.primary600};
       svg > * {
-        fill: ${r.colors.primary700};
+        fill: ${theme.colors.primary700};
       }
-      ${s} {
-        color: ${r.colors.primary700};
+      ${Typography.Typography} {
+        color: ${theme.colors.primary700};
         font-weight: 500;
       }
-      `}
+      `;
+}}
   }
 
   &:focus-visible {
     outline-offset: -2px;
   }
-`, a = e(g)`
+`;
+const CustomBullet = styled__default.default(icons.Dot) `
   width: ${12 / 16}rem;
   height: ${4 / 16}rem;
   * {
-    fill: ${({ theme: r, $active: i }) => i ? r.colors.primary600 : r.colors.neutral600};
+    fill: ${({ theme, $active }) => ($active ? theme.colors.primary600 : theme.colors.neutral600)};
   }
-`, y = e.div`
+`;
+const IconWrapper = styled__default.default.div `
   svg {
     height: ${12 / 16}rem;
     width: ${12 / 16}rem;
   }
-`, R = u.forwardRef(({ children: r, icon: i = null, withBullet: c = !1, as: p = $, isSubSectionChild: d = !1, ...f }, m) => l(h, { as: p, icon: i, background: "neutral100", paddingLeft: d ? 9 : 7, paddingBottom: 2, paddingTop: 2, ref: m, ...f, children: [l(n, { children: [i ? o(y, { children: i }) : o(a, {}), o(t, { paddingLeft: 2, children: o(s, { as: "span", children: r }) })] }), c && o(t, { as: n, paddingRight: 4, children: o(a, { $active: !0 }) })] }));
-export {
-  R as SubNavLink
-};
+`;
+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

@@ -0,0 +1,57 @@
+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,35 +1,51 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { useState as m, Children as h } from "react";
-import { CarretDown as f } from "@strapi/icons";
-import o from "styled-components";
-import { useId as g } from "../../hooks/useId.js";
-import { Box as i } from "../../Box/Box.js";
-import { Flex as u } from "../../Flex/Flex.js";
-import { Typography as x } from "../../Typography/Typography.js";
-const k = o(i)`
+'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: t }) => t.colors.neutral700};
+      fill: ${({ theme }) => theme.colors.neutral700};
     }
   }
-`, b = o.button`
+`;
+const SubNavLinkSectionButton = styled__default.default.button `
   border: none;
   padding: 0;
   background: transparent;
   display: flex;
   align-items: center;
-`, C = o.div`
+`;
+const DropDownIconWrapper = styled__default.default.div `
   display: flex;
   align-items: center;
   width: ${12 / 16}rem;
-  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, I = ({ label: t, children: l, id: p }) => {
-  const [n, s] = m(!0), d = g(p);
-  return a(i, { children: [e(k, { paddingLeft: 7, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: e(u, { justifyContent: "space-between", children: a(b, { onClick: () => {
-    s((r) => !r);
-  }, "aria-expanded": n, "aria-controls": d, children: [e(C, { rotated: n, children: e(f, { "aria-hidden": !0 }) }), e(i, { paddingLeft: 2, children: e(x, { as: "span", fontWeight: "semiBold", textColor: "neutral800", children: t }) })] }) }) }), n && e("ul", { id: d, children: h.map(l, (r, c) => e("li", { children: r }, c)) })] });
-};
-export {
-  I as SubNavLinkSection
+  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

@@ -0,0 +1,43 @@
+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,24 +1,38 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { useState as h, Children as u } from "react";
-import f from "styled-components";
-import { SubNavSectionLabel as g } from "./SubNavSectionLabel.js";
-import { useId as x } from "../../hooks/useId.js";
-import { Box as a } from "../../Box/Box.js";
-import { Flex as C } from "../../Flex/Flex.js";
-import { Badge as S } from "../../Badge/Badge.js";
-const k = f(a)`
+'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: o }) => o.colors.neutral500};
+      fill: ${({ theme }) => theme.colors.neutral500};
     }
   }
-`, y = ({ collapsable: o = !1, label: d, badgeLabel: r, children: p, id: s }) => {
-  const [n, c] = h(!0), e = x(s);
-  return l(C, { direction: "column", alignItems: "stretch", gap: 1, children: [t(k, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: l(a, { position: "relative", paddingRight: r ? 6 : 0, children: [t(g, { onClick: () => {
-    c((i) => !i);
-  }, ariaExpanded: n, ariaControls: e, collapsable: o, label: d }), r && t(S, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: r })] }) }), (!o || n) && t("ol", { id: e, children: u.map(p, (i, m) => t("li", { children: i }, m)) })] });
-};
-export {
-  y as SubNavSection
+`;
+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;