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

package/dist/types.d.ts

@@ -1,3 +1,3 @@
-import { CSSProperties } from 'react';
+import * as React from 'react';
 import { DefaultTheme } from 'styled-components';
-export type DefaultThemeOrCSSProp<T extends keyof DefaultTheme, K extends keyof CSSProperties> = keyof DefaultTheme[T] | CSSProperties[K];
+export type DefaultThemeOrCSSProp<T extends keyof DefaultTheme, K extends keyof React.CSSProperties> = keyof DefaultTheme[T] | React.CSSProperties[K];

package/package.json

@@ -1,27 +1,12 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.19.0-typescript.0",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "sideEffects": false,
+  "source": "./src/index.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "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/*"
-  },
   "files": [
     "dist"
   ],
@@ -33,44 +18,37 @@
     "@radix-ui/react-dismissable-layer": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-focus-scope": "1.0.4",
-    "@strapi/ui-primitives": "1.19.0-typescript.0",
+    "@strapi/ui-primitives": "^2.0.0-beta.0",
     "@uiw/react-codemirror": "^4.21.25",
     "aria-hidden": "^1.2.4",
-    "compute-scroll-into-view": "^3.1.0",
-    "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.9"
   },
   "devDependencies": {
     "@playwright/test": "1.43.0",
-    "@strapi/icons": "1.19.0-typescript.0",
+    "@strapi/icons": "^2.0.0-beta.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^2.0.1",
     "cross-env": "^7.0.3",
-    "react-router-dom": "^5.3.4",
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/icons": "1.19.0-typescript.0",
+    "@strapi/icons": "^2.0.0-beta.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": {
-    "build": "yarn clean && yarn build:prod",
-    "build:prod": "vite build",
+    "build": "pack-up build",
     "clean": "rimraf dist node_modules",
-    "generate:types": "tsc --noEmit false --declaration --emitDeclarationOnly --declarationDir dist",
     "lint": "eslint . --ext .tsx,.ts",
     "format": "yarn lint --fix",
     "test": "jest -c jest.config.mjs",
     "test:ts": "tsc --noEmit",
     "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"
+    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test",
+    "watch": "pack-up watch"
   },
   "gitHead": "c74900b0ee3525510d266dc83c9743cb24dafced"
 }

package/dist/Accordion/Accordion.js

@@ -1,83 +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 AccordionContext = require('./AccordionContext.js');
-const useId = require('../hooks/useId.js');
-const Typography = require('../Typography/Typography.js');
-const Flex = require('../Flex/Flex.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const getBorder = ({ theme, expanded, variant, disabled, error }) => {
-    if (error) {
-        return `1px solid ${theme.colors.danger600} !important`;
-    }
-    if (disabled) {
-        return `1px solid ${theme.colors.neutral150}`;
-    }
-    if (expanded) {
-        return `1px solid ${theme.colors.primary600}`;
-    }
-    if (variant === 'primary') {
-        return `1px solid ${theme.colors.neutral0}`;
-    }
-    return `1px solid ${theme.colors.neutral100}`;
-};
-const AccordionTypography = styled__default.default(Typography.Typography) ``;
-const AccordionWrapper = styled__default.default(Box.Box) `
-  border: ${getBorder};
-
-  &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    ${AccordionTypography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
-    }
-
-    ${Typography.Typography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
-    }
-
-    & > ${Flex.Flex} {
-      background: ${({ theme }) => theme.colors.primary100};
-    }
-
-    [data-strapi-dropdown='true'] {
-      background: ${({ theme }) => theme.colors.primary200};
-    }
-  }
-`;
-const Accordion = ({ children, disabled = false, error, expanded = false, hasErrorMessage = true, id, onToggle, toggle, size = 'M', variant = 'primary', shadow, }) => {
-    const generatedId = useId.useId(id);
-    const context = React__namespace.useMemo(() => ({ expanded, onToggle, toggle, id: generatedId, size, variant, disabled }), [disabled, expanded, generatedId, onToggle, size, toggle, variant]);
-    return (jsxRuntime.jsxs(AccordionContext.AccordionContext.Provider, { value: context, children: [jsxRuntime.jsx(AccordionWrapper, { "data-strapi-expanded": expanded, disabled: disabled, "aria-disabled": disabled, expanded: expanded, hasRadius: true, variant: variant, error: error, shadow: shadow, children: children }), error && hasErrorMessage && (jsxRuntime.jsx(Box.Box, { paddingTop: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "danger600", children: error }) }))] }));
-};
-
-exports.Accordion = Accordion;
-exports.AccordionTypography = AccordionTypography;

package/dist/Accordion/Accordion.mjs

@@ -1,55 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { AccordionContext } from './AccordionContext.mjs';
-import { useId } from '../hooks/useId.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const getBorder = ({ theme, expanded, variant, disabled, error }) => {
-    if (error) {
-        return `1px solid ${theme.colors.danger600} !important`;
-    }
-    if (disabled) {
-        return `1px solid ${theme.colors.neutral150}`;
-    }
-    if (expanded) {
-        return `1px solid ${theme.colors.primary600}`;
-    }
-    if (variant === 'primary') {
-        return `1px solid ${theme.colors.neutral0}`;
-    }
-    return `1px solid ${theme.colors.neutral100}`;
-};
-const AccordionTypography = styled(Typography) ``;
-const AccordionWrapper = styled(Box) `
-  border: ${getBorder};
-
-  &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-
-    ${AccordionTypography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
-    }
-
-    ${Typography} {
-      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
-    }
-
-    & > ${Flex} {
-      background: ${({ theme }) => theme.colors.primary100};
-    }
-
-    [data-strapi-dropdown='true'] {
-      background: ${({ theme }) => theme.colors.primary200};
-    }
-  }
-`;
-const Accordion = ({ children, disabled = false, error, expanded = false, hasErrorMessage = true, id, onToggle, toggle, size = 'M', variant = 'primary', shadow, }) => {
-    const generatedId = useId(id);
-    const context = React.useMemo(() => ({ expanded, onToggle, toggle, id: generatedId, size, variant, disabled }), [disabled, expanded, generatedId, onToggle, size, toggle, variant]);
-    return (jsxs(AccordionContext.Provider, { value: context, children: [jsx(AccordionWrapper, { "data-strapi-expanded": expanded, disabled: disabled, "aria-disabled": disabled, expanded: expanded, hasRadius: true, variant: variant, error: error, shadow: shadow, children: children }), error && hasErrorMessage && (jsx(Box, { paddingTop: 1, children: jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) }))] }));
-};
-
-export { Accordion, AccordionTypography };

package/dist/Accordion/AccordionContent.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const AccordionContext = require('./AccordionContext.js');
-const Box = require('../Box/Box.js');
-
-const AccordionContent = ({ children, ...props }) => {
-    const { expanded, id } = AccordionContext.useAccordion();
-    if (!expanded) {
-        return null;
-    }
-    const idContent = `accordion-content-${id}`;
-    const ariaLabelId = `accordion-label-${id}`;
-    const ariaDescriptionId = `accordion-desc-${id}`;
-    return (jsxRuntime.jsx(Box.Box, { role: "region", id: idContent, "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, ...props, children: children }));
-};
-
-exports.AccordionContent = AccordionContent;

package/dist/Accordion/AccordionContent.mjs

@@ -1,16 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useAccordion } from './AccordionContext.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const AccordionContent = ({ children, ...props }) => {
-    const { expanded, id } = useAccordion();
-    if (!expanded) {
-        return null;
-    }
-    const idContent = `accordion-content-${id}`;
-    const ariaLabelId = `accordion-label-${id}`;
-    const ariaDescriptionId = `accordion-desc-${id}`;
-    return (jsx(Box, { role: "region", id: idContent, "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, ...props, children: children }));
-};
-
-export { AccordionContent };

package/dist/Accordion/AccordionContext.js

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

package/dist/Accordion/AccordionContext.mjs

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const AccordionContext = createContext({
-    disabled: false,
-    expanded: false,
-    id: '',
-    size: 'M',
-    variant: 'primary',
-});
-const useAccordion = () => useContext(AccordionContext);
-
-export { AccordionContext, useAccordion };

package/dist/Accordion/AccordionGroup.js

@@ -1,92 +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 KeyboardNavigable = require('../KeyboardNavigable/KeyboardNavigable.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 };
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const AccordionFooter = styled__default.default(Box.Box) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-const EnhancedGroup = styled__default.default(Box.Box) `
-  & > * {
-    & > * {
-      border-radius: unset;
-    }
-  }
-
-  & > * {
-    border-radius: unset;
-    border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  }
-
-  & > *:first-of-type {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    & > * {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    }
-
-    &:hover {
-      border-top: 1px solid ${({ theme }) => theme.colors.primary600};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${({ theme, footer }) => `
-    &:not(${footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
-    }
-  `}
-`;
-const LabelAction = styled__default.default(Box.Box) `
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const AccordionGroup = ({ children, footer, label, labelAction, error }) => {
-    const childrenArray = React__namespace.Children.toArray(children).map((child) => {
-        return React__namespace.cloneElement(child, { hasErrorMessage: false });
-    });
-    return (jsxRuntime.jsxs(KeyboardNavigable.KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [label && (jsxRuntime.jsxs(Flex.Flex, { paddingBottom: 1, children: [jsxRuntime.jsx(Typography.Typography, { variant: "pi", as: "label", textColor: "neutral800", fontWeight: "bold", children: label }), labelAction && jsxRuntime.jsx(LabelAction, { paddingLeft: 1, children: labelAction })] })), jsxRuntime.jsx(EnhancedGroup, { footer: footer, children: childrenArray }), footer && jsxRuntime.jsx(AccordionFooter, { children: footer }), error && (jsxRuntime.jsx(Box.Box, { paddingTop: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: "danger600", children: error }) }))] }));
-};
-
-exports.AccordionGroup = AccordionGroup;

package/dist/Accordion/AccordionGroup.mjs

@@ -1,65 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { KeyboardNavigable } from '../KeyboardNavigable/KeyboardNavigable.mjs';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const AccordionFooter = styled(Box) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-  border-radius: 0 0 ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius};
-`;
-const EnhancedGroup = styled(Box) `
-  & > * {
-    & > * {
-      border-radius: unset;
-    }
-  }
-
-  & > * {
-    border-radius: unset;
-    border-right: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-bottom: 1px solid ${({ theme }) => theme.colors.neutral200};
-  }
-
-  & > *:first-of-type {
-    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    & > * {
-      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
-    }
-
-    &:hover {
-      border-top: 1px solid ${({ theme }) => theme.colors.primary600};
-    }
-  }
-
-  & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${({ theme, footer }) => `
-    &:not(${footer}) {
-      & > *:last-of-type {
-        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
-      }
-    }
-  `}
-`;
-const LabelAction = styled(Box) `
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const AccordionGroup = ({ children, footer, label, labelAction, error }) => {
-    const childrenArray = React.Children.toArray(children).map((child) => {
-        return React.cloneElement(child, { hasErrorMessage: false });
-    });
-    return (jsxs(KeyboardNavigable, { attributeName: "data-strapi-accordion-toggle", children: [label && (jsxs(Flex, { paddingBottom: 1, children: [jsx(Typography, { variant: "pi", as: "label", textColor: "neutral800", fontWeight: "bold", children: label }), labelAction && jsx(LabelAction, { paddingLeft: 1, children: labelAction })] })), jsx(EnhancedGroup, { footer: footer, children: childrenArray }), footer && jsx(AccordionFooter, { children: footer }), error && (jsx(Box, { paddingTop: 1, children: jsx(Typography, { variant: "pi", textColor: "danger600", children: error }) }))] }));
-};
-
-export { AccordionGroup };

package/dist/Accordion/AccordionToggle.js

@@ -1,90 +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 Accordion = require('./Accordion.js');
-const AccordionContext = require('./AccordionContext.js');
-const utils = require('./utils.js');
-const TextButton = require('../TextButton/TextButton.js');
-const Icon = require('../Icon/Icon.js');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const ToggleButton = styled__default.default(TextButton.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, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
-    }
-  }
-`;
-const FlexWithSize = styled__default.default(Flex.Flex) `
-  min-height: ${({ theme, size }) => theme.sizes.accordions[size]};
-  border-radius: ${({ theme, expanded }) => expanded ? `${theme.borderRadius} ${theme.borderRadius} 0 0` : theme.borderRadius};
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-`;
-const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'right', action, ...props }) => {
-    const { onToggle, toggle, expanded, id, size, variant, disabled } = AccordionContext.useAccordion();
-    // Accessibility identifiers
-    const ariaControls = `accordion-content-${id}`;
-    const ariaLabelId = `accordion-label-${id}`;
-    const ariaDescriptionId = `accordion-desc-${id}`;
-    // Style overrides
-    const boxPaddingX = size === 'M' ? 6 : 4;
-    const boxPaddingY = size === 'M' ? boxPaddingX : boxPaddingX - 2;
-    const boxBackground = utils.getBackground({ expanded, disabled, variant });
-    const titleColor = expanded ? 'primary600' : 'neutral700';
-    const titleProps = {
-        as,
-        fontWeight: size === 'S' ? 'bold' : undefined,
-        id: ariaLabelId,
-        textColor: titleColor,
-        ellipsis: true,
-        variant: size === 'M' ? 'delta' : undefined,
-    };
-    const descriptionColor = expanded ? 'primary600' : 'neutral600';
-    const iconColor = expanded ? 'primary200' : 'neutral200';
-    const iconSize = size === 'M' ? `${32 / 16}rem` : `${24 / 16}rem`;
-    const handleToggle = () => {
-        if (!disabled) {
-            if (toggle && !onToggle) {
-                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');
-                toggle();
-            }
-            else if (onToggle) {
-                onToggle();
-            }
-        }
-    };
-    const dropdownIcon = (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    const stopPropagation = (e) => {
-        e.stopPropagation();
-    };
-    return (jsxRuntime.jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Accordion.AccordionTypography, { ...titleProps, children: title }), description && (jsxRuntime.jsx(Typography.Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxRuntime.jsxs(Flex.Flex, { gap: 3, children: [dropdownIcon, jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
-};
-
-exports.AccordionToggle = AccordionToggle;

package/dist/Accordion/AccordionToggle.mjs

@@ -1,82 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { CarretDown } from '@strapi/icons';
-import styled from 'styled-components';
-import { AccordionTypography } from './Accordion.mjs';
-import { useAccordion } from './AccordionContext.mjs';
-import { getBackground } from './utils.mjs';
-import { TextButton } from '../TextButton/TextButton.mjs';
-import { Icon } from '../Icon/Icon.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const ToggleButton = styled(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, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
-    }
-  }
-`;
-const FlexWithSize = styled(Flex) `
-  min-height: ${({ theme, size }) => theme.sizes.accordions[size]};
-  border-radius: ${({ theme, expanded }) => expanded ? `${theme.borderRadius} ${theme.borderRadius} 0 0` : theme.borderRadius};
-
-  &:hover {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.primary600};
-      }
-    }
-  }
-`;
-const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'right', action, ...props }) => {
-    const { onToggle, toggle, expanded, id, size, variant, disabled } = useAccordion();
-    // Accessibility identifiers
-    const ariaControls = `accordion-content-${id}`;
-    const ariaLabelId = `accordion-label-${id}`;
-    const ariaDescriptionId = `accordion-desc-${id}`;
-    // Style overrides
-    const boxPaddingX = size === 'M' ? 6 : 4;
-    const boxPaddingY = size === 'M' ? boxPaddingX : boxPaddingX - 2;
-    const boxBackground = getBackground({ expanded, disabled, variant });
-    const titleColor = expanded ? 'primary600' : 'neutral700';
-    const titleProps = {
-        as,
-        fontWeight: size === 'S' ? 'bold' : undefined,
-        id: ariaLabelId,
-        textColor: titleColor,
-        ellipsis: true,
-        variant: size === 'M' ? 'delta' : undefined,
-    };
-    const descriptionColor = expanded ? 'primary600' : 'neutral600';
-    const iconColor = expanded ? 'primary200' : 'neutral200';
-    const iconSize = size === 'M' ? `${32 / 16}rem` : `${24 / 16}rem`;
-    const handleToggle = () => {
-        if (!disabled) {
-            if (toggle && !onToggle) {
-                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');
-                toggle();
-            }
-            else if (onToggle) {
-                onToggle();
-            }
-        }
-    };
-    const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
-    const stopPropagation = (e) => {
-        e.stopPropagation();
-    };
-    return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxs(Fragment, { children: [jsx(AccordionTypography, { ...titleProps, children: title }), description && (jsx(Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxs(Flex, { gap: 3, children: [dropdownIcon, jsx(Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsx(Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
-};
-
-export { AccordionToggle };

package/dist/Accordion/index.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Accordion = require('./Accordion.js');
-const AccordionContent = require('./AccordionContent.js');
-const AccordionToggle = require('./AccordionToggle.js');
-const AccordionGroup = require('./AccordionGroup.js');
-
-
-
-exports.Accordion = Accordion.Accordion;
-exports.AccordionTypography = Accordion.AccordionTypography;
-exports.AccordionContent = AccordionContent.AccordionContent;
-exports.AccordionToggle = AccordionToggle.AccordionToggle;
-exports.AccordionGroup = AccordionGroup.AccordionGroup;

package/dist/Accordion/index.mjs

@@ -1,4 +0,0 @@
-export { Accordion, AccordionTypography } from './Accordion.mjs';
-export { AccordionContent } from './AccordionContent.mjs';
-export { AccordionToggle } from './AccordionToggle.mjs';
-export { AccordionGroup } from './AccordionGroup.mjs';