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

package/dist/Accordion/Accordion.js

@@ -1,38 +1,83 @@
-import { jsxs as y, jsx as n } from "react/jsx-runtime";
-import * as g from "react";
-import m from "styled-components";
-import { AccordionContext as h } from "./AccordionContext.js";
-import { useId as b } from "../hooks/useId.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { Flex as A } from "../Flex/Flex.js";
-import { Box as u } from "../Box/Box.js";
-const v = ({ theme: r, expanded: o, variant: t, disabled: i, error: a }) => a ? `1px solid ${r.colors.danger600} !important` : i ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, j = m(p)``, k = m(u)`
-  border: ${v};
+'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: r }) => r.colors.primary600};
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
 
-    ${j} {
-      color: ${({ theme: r, expanded: o }) => o ? void 0 : r.colors.primary700};
+    ${AccordionTypography} {
+      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary700)};
     }
 
-    ${p} {
-      color: ${({ theme: r, expanded: o }) => o ? void 0 : r.colors.primary600};
+    ${Typography.Typography} {
+      color: ${({ theme, expanded }) => (expanded ? undefined : theme.colors.primary600)};
     }
 
-    & > ${A} {
-      background: ${({ theme: r }) => r.colors.primary100};
+    & > ${Flex.Flex} {
+      background: ${({ theme }) => theme.colors.primary100};
     }
 
     [data-strapi-dropdown='true'] {
-      background: ${({ theme: r }) => r.colors.primary200};
+      background: ${({ theme }) => theme.colors.primary200};
     }
   }
-`, F = ({ children: r, disabled: o = !1, error: t, expanded: i = !1, hasErrorMessage: a = !0, id: f, onToggle: s, toggle: c, size: e = "M", variant: d = "primary", shadow: $ }) => {
-  const l = b(f), x = g.useMemo(() => ({ expanded: i, onToggle: s, toggle: c, id: l, size: e, variant: d, disabled: o }), [o, i, l, s, e, c, d]);
-  return y(h.Provider, { value: x, children: [n(k, { "data-strapi-expanded": i, disabled: o, "aria-disabled": o, expanded: i, hasRadius: !0, variant: d, error: t, shadow: $, children: r }), t && a && n(u, { paddingTop: 1, children: n(p, { variant: "pi", textColor: "danger600", children: t }) })] });
-};
-export {
-  F as Accordion,
-  j as AccordionTypography
+`;
+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

@@ -0,0 +1,55 @@
+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,13 +1,20 @@
-import { jsx as d } from "react/jsx-runtime";
-import { useAccordion as a } from "./AccordionContext.js";
-import { Box as l } from "../Box/Box.js";
-const p = ({ children: r, ...n }) => {
-  const { expanded: i, id: o } = a();
-  if (!i)
-    return null;
-  const c = `accordion-content-${o}`, e = `accordion-label-${o}`, t = `accordion-desc-${o}`;
-  return d(l, { role: "region", id: c, "aria-labelledby": e, "aria-describedby": t, ...n, children: r });
-};
-export {
-  p as AccordionContent
+'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

@@ -0,0 +1,16 @@
+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,12 +1,17 @@
-import { createContext as e, useContext as o } from "react";
-const t = e({
-  disabled: !1,
-  expanded: !1,
-  id: "",
-  size: "M",
-  variant: "primary"
-}), r = () => o(t);
-export {
-  t as AccordionContext,
-  r as useAccordion
-};
+'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

@@ -0,0 +1,12 @@
+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,16 +1,45 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import * as n from "react";
-import t from "styled-components";
-import { KeyboardNavigable as b } from "../KeyboardNavigable/KeyboardNavigable.js";
-import { Box as e } from "../Box/Box.js";
-import { Flex as m } from "../Flex/Flex.js";
-import { Typography as p } from "../Typography/Typography.js";
-const $ = t(e)`
-  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 = t(e)`
+'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;
@@ -19,42 +48,45 @@ const $ = t(e)`
 
   & > * {
     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};
+    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: r }) => r.colors.neutral200};
-    border-radius: ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius} 0 0;
+    border-top: 1px solid ${({ theme }) => theme.colors.neutral200};
+    border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
     & > * {
-      border-radius: ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius} 0 0;
+      border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;
     }
 
     &:hover {
-      border-top: 1px solid ${({ theme: r }) => r.colors.primary600};
+      border-top: 1px solid ${({ theme }) => theme.colors.primary600};
     }
   }
 
   & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+    border: 1px solid ${({ theme }) => theme.colors.primary600};
   }
 
-  ${({ theme: r, footer: d }) => `
-    &:not(${d}) {
+  ${({ theme, footer }) => `
+    &:not(${footer}) {
       & > *:last-of-type {
-        border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
+        border-radius: 0 0 ${theme.borderRadius} ${theme.borderRadius};
       }
     }
   `}
-`, x = t(e)`
+`;
+const LabelAction = styled__default.default(Box.Box) `
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
-`, C = ({ children: r, footer: d, label: i, labelAction: a, error: s }) => {
-  const c = n.Children.toArray(r).map((u) => n.cloneElement(u, { hasErrorMessage: !1 }));
-  return l(b, { attributeName: "data-strapi-accordion-toggle", children: [i && l(m, { paddingBottom: 1, children: [o(p, { variant: "pi", as: "label", textColor: "neutral800", fontWeight: "bold", children: i }), a && o(x, { paddingLeft: 1, children: a })] }), o(h, { footer: d, children: c }), d && o($, { children: d }), s && o(e, { paddingTop: 1, children: o(p, { variant: "pi", textColor: "danger600", children: s }) })] });
-};
-export {
-  C as AccordionGroup
+`;
+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

@@ -0,0 +1,65 @@
+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,14 +1,23 @@
-import { jsx as i, jsxs as p, Fragment as M } from "react/jsx-runtime";
-import { CarretDown as R } from "@strapi/icons";
-import y from "styled-components";
-import { AccordionTypography as A } from "./Accordion.js";
-import { useAccordion as I } from "./AccordionContext.js";
-import { getBackground as W } from "./utils.js";
-import { TextButton as D } from "../TextButton/TextButton.js";
-import { Icon as F } from "../Icon/Icon.js";
-import { Flex as d } from "../Flex/Flex.js";
-import { Typography as S } from "../Typography/Typography.js";
-const L = y(D)`
+'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 _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
@@ -21,33 +30,57 @@ const L = y(D)`
     height: ${14 / 16}rem;
 
     path {
-      fill: ${({ theme: o, expanded: e }) => e ? o.colors.primary600 : o.colors.neutral500};
+      fill: ${({ theme, expanded }) => (expanded ? theme.colors.primary600 : theme.colors.neutral500)};
     }
   }
-`, P = y(d)`
-  min-height: ${({ theme: o, size: e }) => o.sizes.accordions[e]};
-  border-radius: ${({ theme: o, expanded: e }) => e ? `${o.borderRadius} ${o.borderRadius} 0 0` : o.borderRadius};
+`;
+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: o }) => o.colors.primary600};
+        fill: ${({ theme }) => theme.colors.primary600};
       }
     }
   }
-`, Q = ({ title: o, description: e, as: $ = "span", togglePosition: l = "right", action: g, ...w }) => {
-  const { onToggle: s, toggle: m, expanded: r, id: c, size: t, variant: C, disabled: n } = I(), T = `accordion-content-${c}`, h = `accordion-label-${c}`, k = `accordion-desc-${c}`, a = t === "M" ? 6 : 4, u = t === "M" ? a : a - 2, v = W({ expanded: r, disabled: n, variant: C }), j = {
-    as: $,
-    fontWeight: t === "S" ? "bold" : void 0,
-    id: h,
-    textColor: r ? "primary600" : "neutral700",
-    ellipsis: !0,
-    variant: t === "M" ? "delta" : void 0
-  }, z = r ? "primary600" : "neutral600", B = r ? "primary200" : "neutral200", f = t === "M" ? `${32 / 16}rem` : `${24 / 16}rem`, x = () => {
-    n || (m && !s ? (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'), m()) : s && s());
-  }, b = i(d, { justifyContent: "center", borderRadius: "50%", height: f, width: f, transform: r ? "rotate(180deg)" : void 0, "data-strapi-dropdown": !0, "aria-hidden": !0, as: "span", background: B, cursor: n ? "not-allowed" : "pointer", onClick: x, shrink: 0, children: i(F, { as: R, width: t === "M" ? `${11 / 16}rem` : `${8 / 16}rem`, color: r ? "primary600" : "neutral600" }) });
-  return i(P, { paddingBottom: u, paddingLeft: a, paddingRight: a, paddingTop: u, background: v, expanded: r, size: t, justifyContent: "space-between", cursor: n ? "not-allowed" : "", children: p(d, { gap: 3, flex: 1, maxWidth: "100%", children: [l === "left" && b, i(L, { onClick: x, "aria-disabled": n, "aria-expanded": r, "aria-controls": T, "aria-labelledby": h, "data-strapi-accordion-toggle": !0, expanded: r, type: "button", flex: 1, minWidth: 0, ...w, children: p(M, { children: [i(A, { ...j, children: o }), e && i(S, { as: "p", id: k, textColor: z, children: e })] }) }), l === "right" && p(d, { gap: 3, children: [b, g] }), l === "left" && g] }) });
-};
-export {
-  Q as AccordionToggle
+`;
+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', onClick: handleToggle, shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
+    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' : '', children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { onClick: handleToggle, "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, action] })), togglePosition === 'left' && action] }) }));
 };
+
+exports.AccordionToggle = AccordionToggle;