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

package/dist/v2/SubNav/SubNavSection.mjs

@@ -0,0 +1,30 @@
+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,19 +1,33 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { CarretDown as m } from "@strapi/icons";
-import d from "styled-components";
-import { Flex as s } from "../../Flex/Flex.js";
-import { Box as o } from "../../Box/Box.js";
-import { Typography as i } from "../../Typography/Typography.js";
-const a = d(s)`
+'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;
-`, g = d.div`
+`;
+const DropDownIconWrapper = styled__default.default.div `
   display: flex;
   align-items: center;
-  transform: rotateX(${({ rotated: t }) => t ? "0deg" : "180deg"});
-`, y = ({ collapsable: t = !1, label: e, onClick: l = () => {
-}, ariaExpanded: n, ariaControls: p }) => t ? c(a, { as: "button", onClick: l, "aria-expanded": n, "aria-controls": p, textAlign: "left", children: [r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }), t && r(g, { rotated: n, children: r(m, { "aria-hidden": !0 }) })] }) : r(a, { children: r(o, { paddingRight: 1, children: r(i, { variant: "sigma", textColor: "neutral600", children: e }) }) });
-export {
-  y as SubNavSectionLabel
+  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

@@ -0,0 +1,25 @@
+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,8 +1,17 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Children as p } from "react";
-import { Box as c } from "../../Box/Box.js";
-import { Flex as d } from "../../Flex/Flex.js";
-const g = ({ children: e, spacing: t = 2, horizontal: o = !1, ...i }) => r(c, { paddingTop: 2, paddingBottom: 4, children: r(d, { as: "ol", gap: t, direction: o ? "row" : "column", alignItems: o ? "center" : "stretch", ...i, children: p.map(e, (n, m) => r("li", { children: n }, m)) }) });
-export {
-  g as SubNavSections
+'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

@@ -0,0 +1,13 @@
+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,15 +1,20 @@
-import { SubNav as e, subNavWidth as t } from "./SubNav.js";
-import { SubNavHeader as a } from "./SubNavHeader.js";
-import { SubNavLink as u } from "./SubNavLink.js";
-import { SubNavLinkSection as N } from "./SubNavLinkSection.js";
-import { SubNavSection as i } from "./SubNavSection.js";
-import { SubNavSections as p } from "./SubNavSections.js";
-export {
-  e as SubNav,
-  a as SubNavHeader,
-  u as SubNavLink,
-  N as SubNavLinkSection,
-  i as SubNavSection,
-  p as SubNavSections,
-  t as subNavWidth
-};
+'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

@@ -0,0 +1,6 @@
+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,55 +1,60 @@
-import { Breadcrumbs as t } from "./Breadcrumbs/Breadcrumbs.js";
-import { Crumb as p } from "./Breadcrumbs/Crumb.js";
-import { CrumbLink as x } from "./Breadcrumbs/CrumbLink.js";
-import { CrumbSimpleMenu as a } from "./Breadcrumbs/CrumbSimpleMenu.js";
-import { Link as u } from "./Link/Link.js";
-import { LinkButton as N } from "./LinkButton/LinkButton.js";
-import { MainNav as b } from "./MainNav/MainNav.js";
-import { NavBrand as s } from "./MainNav/NavBrand.js";
-import { NavCondense as c } from "./MainNav/NavCondense.js";
-import { NavFooter as M } from "./MainNav/NavFooter.js";
-import { NavLink as B } from "./MainNav/NavLink.js";
-import { NavSection as g } from "./MainNav/NavSection.js";
-import { NavSections as h } from "./MainNav/NavSections.js";
-import { NavUser as F } from "./MainNav/NavUser.js";
-import { Pagination as I } from "./Pagination/Pagination.js";
-import { Dots as W, NextLink as j, PageLink as q, PreviousLink as w } from "./Pagination/components.js";
-import { MenuItem as z, SimpleMenu as A } from "./SimpleMenu/SimpleMenu.js";
-import * as o from "./SimpleMenu/Menu.js";
-import { SubNav as G, subNavWidth as J } from "./SubNav/SubNav.js";
-import { SubNavHeader as O } from "./SubNav/SubNavHeader.js";
-import { SubNavLink as R } from "./SubNav/SubNavLink.js";
-import { SubNavLinkSection as V } from "./SubNav/SubNavLinkSection.js";
-import { SubNavSection as Y } from "./SubNav/SubNavSection.js";
-import { SubNavSections as _ } from "./SubNav/SubNavSections.js";
-export {
-  t as Breadcrumbs,
-  p as Crumb,
-  x as CrumbLink,
-  a as CrumbSimpleMenu,
-  W as Dots,
-  u as Link,
-  N as LinkButton,
-  b as MainNav,
-  o as Menu,
-  z as MenuItem,
-  s as NavBrand,
-  c as NavCondense,
-  M as NavFooter,
-  B as NavLink,
-  g as NavSection,
-  h as NavSections,
-  F as NavUser,
-  j as NextLink,
-  q as PageLink,
-  I as Pagination,
-  w as PreviousLink,
-  A as SimpleMenu,
-  G as SubNav,
-  O as SubNavHeader,
-  R as SubNavLink,
-  V as SubNavLinkSection,
-  Y as SubNavSection,
-  _ as SubNavSections,
-  J as subNavWidth
-};
+'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

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

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.8.2",
+  "version": "1.10.0-alpha.0",
   "license": "MIT",
-  "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./v2": {
+      "types": "./dist/v2/index.d.ts",
+      "import": "./dist/v2/index.mjs",
+      "require": "./dist/v2/index.js",
+      "default": "./dist/v2/index.js"
     },
     "./*": "./dist/*"
   },
@@ -19,22 +27,22 @@
   ],
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
-    "@floating-ui/react-dom": "^2.0.1",
-    "@internationalized/date": "^3.3.0",
+    "@floating-ui/react-dom": "^2.0.2",
+    "@internationalized/date": "^3.4.0",
     "@internationalized/number": "^3.2.1",
     "@radix-ui/react-dismissable-layer": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-focus-scope": "1.0.3",
-    "@strapi/ui-primitives": "^1.8.2",
-    "@uiw/react-codemirror": "^4.21.7",
+    "@strapi/ui-primitives": "^1.10.0-alpha.0",
+    "@uiw/react-codemirror": "^4.21.13",
     "aria-hidden": "^1.2.3",
     "compute-scroll-into-view": "^3.0.3",
     "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.35.1",
-    "@strapi/icons": "^1.8.2",
+    "@playwright/test": "1.37.1",
+    "@strapi/icons": "^1.10.0-alpha.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -43,27 +51,26 @@
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.5.0",
+    "@strapi/icons": "^1.10.0-alpha.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1"
   },
   "scripts": {
-    "develop": "vite build --watch",
-    "build": "yarn build:prod",
+    "build": "yarn clean && yarn build:prod",
     "build:prod": "vite build",
     "clean": "rimraf dist node_modules",
     "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
-    "lint": "eslint . --ext .js,.jsx,.tsx,.ts",
+    "lint": "eslint . --ext .tsx,.ts",
     "format": "yarn lint --fix",
-    "test": "jest -c jest.config.js",
+    "test": "jest -c jest.config.mjs",
     "test:ts": "tsc --noEmit",
-    "test:watch": "jest -c jest.config.js --watchAll",
+    "test:watch": "jest -c jest.config.mjs --watchAll",
     "test:e2e": "playwright test",
     "test:e2e:ci": "cross-env CI=true playwright test",
     "test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
     "test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
   },
-  "gitHead": "770d9832b8a67d3dabd6ad3dec6408308cc35d99"
+  "gitHead": "c74900b0ee3525510d266dc83c9743cb24dafced"
 }

package/dist/Accordion/Accordion.cjs

@@ -1,23 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("react"),m=require("styled-components"),j=require("./AccordionContext.cjs"),_=require("../hooks/useId.cjs"),s=require("../Typography/Typography.cjs"),h=require("../Flex/Flex.cjs"),p=require("../Box/Box.cjs"),q=r=>r&&r.__esModule?r:{default:r};function T(r){if(r&&r.__esModule)return r;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>r[e]})}}return o.default=r,Object.freeze(o)}const A=T(b),y=q(m),M=({theme:r,expanded:o,variant:e,disabled:t,error:c})=>c?`1px solid ${r.colors.danger600} !important`:t?`1px solid ${r.colors.neutral150}`:o?`1px solid ${r.colors.primary600}`:e==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(s.Typography)``,O=y.default(p.Box)`
-  border: ${M};
-
-  &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({theme:r})=>r.colors.primary600};
-
-    ${f} {
-      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary700};
-    }
-
-    ${s.Typography} {
-      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary600};
-    }
-
-    & > ${h.Flex} {
-      background: ${({theme:r})=>r.colors.primary100};
-    }
-
-    [data-strapi-dropdown='true'] {
-      background: ${({theme:r})=>r.colors.primary200};
-    }
-  }
-`,v=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:c=!0,id:x,onToggle:a,toggle:d,size:u="M",variant:i="primary",shadow:g})=>{const l=_.useId(x),$=A.useMemo(()=>({expanded:t,onToggle:a,toggle:d,id:l,size:u,variant:i,disabled:o}),[o,t,l,a,u,d,i]);return n.jsxs(j.AccordionContext.Provider,{value:$,children:[n.jsx(O,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,shadow:g,children:r}),e&&c&&n.jsx(p.Box,{paddingTop:1,children:n.jsx(s.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=v;exports.AccordionTypography=f;

package/dist/Accordion/AccordionContent.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),a=require("./AccordionContext.cjs"),s=require("../Box/Box.cjs"),l=({children:e,...n})=>{const{expanded:r,id:o}=a.useAccordion();if(!r)return null;const c=`accordion-content-${o}`,t=`accordion-label-${o}`,i=`accordion-desc-${o}`;return d.jsx(s.Box,{role:"region",id:c,"aria-labelledby":t,"aria-describedby":i,...n,children:e})};exports.AccordionContent=l;

package/dist/Accordion/AccordionContext.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext({disabled:!1,expanded:!1,id:"",size:"M",variant:"primary"}),o=()=>e.useContext(t);exports.AccordionContext=t;exports.useAccordion=o;

package/dist/Accordion/AccordionGroup.cjs

@@ -1,47 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react"),b=require("styled-components"),x=require("../KeyboardNavigable/KeyboardNavigable.cjs"),s=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),n=require("../Typography/Typography.cjs"),g=r=>r&&r.__esModule?r:{default:r};function y(r){if(r&&r.__esModule)return r;const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const d=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,d.get?d:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const l=y(p),a=g(b),$=a.default(s.Box)`
-  border-bottom: 1px solid ${({theme:r})=>r.colors.neutral200};
-  border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
-  border-left: 1px solid ${({theme:r})=>r.colors.neutral200};
-  border-radius: 0 0 ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius};
-`,h=a.default(s.Box)`
-  & > * {
-    & > * {
-      border-radius: unset;
-    }
-  }
-
-  & > * {
-    border-radius: unset;
-    border-right: 1px solid ${({theme:r})=>r.colors.neutral200};
-    border-left: 1px solid ${({theme:r})=>r.colors.neutral200};
-    border-bottom: 1px solid ${({theme:r})=>r.colors.neutral200};
-  }
-
-  & > *:first-of-type {
-    border-top: 1px solid ${({theme:r})=>r.colors.neutral200};
-    border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
-    & > * {
-      border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
-    }
-
-    &:hover {
-      border-top: 1px solid ${({theme:r})=>r.colors.primary600};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({theme:r})=>r.colors.primary600};
-  }
-
-  ${({theme:r,footer:e})=>`
-    &:not(${e}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
-      }
-    }
-  `}
-`,j=a.default(s.Box)`
-  svg path {
-    fill: ${({theme:r})=>r.colors.neutral500};
-  }
-`,m=({children:r,footer:e,label:t,labelAction:d,error:i})=>{const u=l.Children.toArray(r).map(c=>l.cloneElement(c,{hasErrorMessage:!1}));return o.jsxs(x.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle",children:[t&&o.jsxs(f.Flex,{paddingBottom:1,children:[o.jsx(n.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold",children:t}),d&&o.jsx(j,{paddingLeft:1,children:d})]}),o.jsx(h,{footer:e,children:u}),e&&o.jsx($,{children:e}),i&&o.jsx(s.Box,{paddingTop:1,children:o.jsx(n.Typography,{variant:"pi",textColor:"danger600",children:i})})]})};exports.AccordionGroup=m;

package/dist/Accordion/AccordionToggle.cjs

@@ -1,28 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),A=require("@strapi/icons"),F=require("styled-components"),M=require("./Accordion.cjs"),B=require("./AccordionContext.cjs"),R=require("./utils.cjs"),z=require("../TextButton/TextButton.cjs"),I=require("../Icon/Icon.cjs"),d=require("../Flex/Flex.cjs"),S=require("../Typography/Typography.cjs"),_=e=>e&&e.__esModule?e:{default:e},m=_(F),D=m.default(z.TextButton)`
-  text-align: left;
-
-  // necessary to make the ellipsis prop work on the title
-  > span {
-    max-width: 100%;
-  }
-
-  svg {
-    width: ${14/16}rem;
-    height: ${14/16}rem;
-
-    path {
-      fill: ${({theme:e,expanded:t})=>t?e.colors.primary600:e.colors.neutral500};
-    }
-  }
-`,W=m.default(d.Flex)`
-  min-height: ${({theme:e,size:t})=>e.sizes.accordions[t]};
-  border-radius: ${({theme:e,expanded:t})=>t?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({theme:e})=>e.colors.primary600};
-      }
-    }
-  }
-`,P=({title:e,description:t,as:y="span",togglePosition:s="right",action:u,...$})=>{const{onToggle:c,toggle:p,expanded:r,id:l,size:n,variant:j,disabled:i}=B.useAccordion(),w=`accordion-content-${l}`,g=`accordion-label-${l}`,T=`accordion-desc-${l}`,a=n==="M"?6:4,h=n==="M"?a:a-2,C=R.getBackground({expanded:r,disabled:i,variant:j}),q={as:y,fontWeight:n==="S"?"bold":void 0,id:g,textColor:r?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},k=r?"primary600":"neutral600",v=r?"primary200":"neutral200",x=n==="M"?`${32/16}rem`:`${24/16}rem`,f=()=>{i||(p&&!c?(console.warn('Deprecation warning: Usage of "toggle" prop in Accordion component is deprecated. This is discouraged and will be removed in the next major release. Please use "onToggle" instead'),p()):c&&c())},b=o.jsx(d.Flex,{justifyContent:"center",borderRadius:"50%",height:x,width:x,transform:r?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:v,cursor:i?"not-allowed":"pointer",onClick:f,shrink:0,children:o.jsx(I.Icon,{as:A.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:r?"primary600":"neutral600"})});return o.jsx(W,{paddingBottom:h,paddingLeft:a,paddingRight:a,paddingTop:h,background:C,expanded:r,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(d.Flex,{gap:3,flex:1,maxWidth:"100%",children:[s==="left"&&b,o.jsx(D,{onClick:f,"aria-disabled":i,"aria-expanded":r,"aria-controls":w,"aria-labelledby":g,"data-strapi-accordion-toggle":!0,expanded:r,type:"button",flex:1,minWidth:0,...$,children:o.jsxs(o.Fragment,{children:[o.jsx(M.AccordionTypography,{...q,children:e}),t&&o.jsx(S.Typography,{as:"p",id:T,textColor:k,children:t})]})}),s==="right"&&o.jsxs(d.Flex,{gap:3,children:[b,u]}),s==="left"&&u]})})};exports.AccordionToggle=P;

package/dist/Accordion/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./Accordion.cjs"),c=require("./AccordionContent.cjs"),r=require("./AccordionToggle.cjs"),n=require("./AccordionGroup.cjs");exports.Accordion=o.Accordion;exports.AccordionTypography=o.AccordionTypography;exports.AccordionContent=c.AccordionContent;exports.AccordionToggle=r.AccordionToggle;exports.AccordionGroup=n.AccordionGroup;

package/dist/Accordion/utils.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=({expanded:r,disabled:t,variant:a})=>{let e="neutral100";return r?e="primary100":t?e="neutral150":a==="primary"&&(e="neutral0"),e};exports.getBackground=n;

package/dist/Alert/Alert.cjs

@@ -1,29 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("@strapi/icons"),p=require("styled-components"),l=require("./utils.cjs"),f=require("../themes/utils.cjs"),u=require("../Box/Box.cjs"),a=require("../Flex/Flex.cjs"),d=require("../Typography/Typography.cjs"),C=e=>e&&e.__esModule?e:{default:e},i=C(p),j=i.default(u.Box)`
-  svg {
-    height: 100%;
-    width: 100%;
-
-    path {
-      fill: ${({theme:e})=>e.colors.neutral700};
-    }
-  }
-
-  ${f.buttonFocusStyle};
-`,b=i.default(a.Flex)`
-  svg {
-    height: 100%;
-    width: 100%;
-
-    path {
-      fill: ${l.handleIconColor};
-    }
-  }
-`,m=({variant:e,...o})=>e==="success"?r.jsx(n.CheckCircle,{...o}):e==="danger"||e==="warning"?r.jsx(n.ExclamationMarkCircle,{...o}):r.jsx(n.Information,{...o}),y=i.default(u.Box)`
-  & a > span {
-    color: ${l.handleIconColor};
-  }
-
-  svg path {
-    fill: ${l.handleIconColor};
-  }
-`,w=({title:e,children:o,variant:t="default",onClose:c,closeLabel:h,titleAs:g="p",action:s,...x})=>r.jsxs(a.Flex,{alignItems:"flex-start",background:l.handleBackgroundColor(t),borderColor:l.handleBorderColor(t),boxShadow:"filterShadow",gap:3,hasRadius:!0,padding:5,paddingRight:6,variant:t,...x,children:[r.jsx(b,{height:`${20/16}rem`,shrink:0,variant:t,width:`${20/16}rem`,children:r.jsx(m,{"aria-hidden":!0,variant:t})}),r.jsxs(a.Flex,{alignItems:"start",gap:s?2:1,wrap:"wrap",role:t==="danger"?"alert":"status",width:"100%",children:[r.jsx(d.Typography,{fontWeight:"bold",textColor:"neutral800",as:g,children:e}),r.jsx(d.Typography,{as:"p",textColor:"neutral800",children:o}),s&&r.jsx(y,{variant:t,children:s})]}),r.jsx(j,{as:"button",background:"transparent",borderColor:void 0,height:`${12/16}rem`,marginTop:1,onClick:c,width:`${12/16}rem`,"aria-label":h,children:r.jsx(n.Cross,{"aria-hidden":!0})})]});exports.Alert=w;

package/dist/Alert/index.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Alert.cjs");exports.Alert=e.Alert;

package/dist/Alert/utils.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=r=>{switch(r){case"danger":return"danger100";case"success":return"success100";case"warning":return"warning100";default:return"primary100"}},e=r=>o(r).replace("100","200"),c=({theme:r,variant:n})=>n==="danger"?r.colors.danger700:n==="success"?r.colors.success700:n==="warning"?r.colors.warning700:r.colors.primary700;exports.handleBackgroundColor=o;exports.handleBorderColor=e;exports.handleIconColor=c;

package/dist/Avatar/Avatar.cjs

@@ -1,18 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),c=require("react"),d=require("styled-components"),t=require("./constants.cjs"),u=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),f=require("../Typography/Typography.cjs"),x=e=>e&&e.__esModule?e:{default:e};function h(e){if(e&&e.__esModule)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(a,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return a.default=e,Object.freeze(a)}const g=h(c),o=x(d),v=o.default.img`
-  border-radius: 50%;
-  object-fit: cover;
-  display: block;
-  position: relative;
-`,b=o.default.img`
-  border-radius: 50%;
-  object-fit: cover;
-  position: absolute;
-  transform: translate(-${(t.previewSize-t.avatarSize)/2}px, -100%);
-  margin-top: -${({theme:e})=>e.spaces[1]};
-`,S=o.default(u.Box)`
-  opacity: 0.4;
-`,y=({src:e,alt:a,preview:r})=>{const[n,l]=g.useState(!1),s=!!(r&&n);return i.jsxs("span",{children:[s?i.jsx(b,{"aria-hidden":!0,alt:"",width:`${t.previewSize}px`,height:`${t.previewSize}px`,src:r===!0?e:typeof r=="string"?r:""}):null,i.jsxs(u.Box,{zIndex:s?1:void 0,position:"relative",onMouseEnter:()=>l(!0),onMouseLeave:()=>l(!1),width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,children:[s?i.jsx(S,{background:"neutral0",borderRadius:"50%",position:"absolute",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,zIndex:1}):null,i.jsx(v,{src:e,alt:a,width:`${t.avatarSize}px`,height:`${t.avatarSize}px`})]})]})},j=o.default(p.Flex)`
-  span {
-    line-height: 0;
-  }
-`,z=({children:e,background:a="primary600",textColor:r="buttonNeutral0"})=>i.jsx(j,{background:a,borderRadius:"50%",width:`${t.avatarSize}px`,height:`${t.avatarSize}px`,justifyContent:"center",children:i.jsx(f.Typography,{fontSize:0,fontWeight:"bold",textColor:r,textTransform:"uppercase",children:e})});exports.Avatar=y;exports.Initials=z;