@strapi/design-system 1.5.0 → 1.6.0-alpha.0

package/dist/Accordion/Accordion.cjs

@@ -1,18 +1,18 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v=require("react"),b=require("prop-types"),m=require("styled-components"),n=require("../Typography/Typography.cjs"),h=require("./AccordionContext.cjs"),q=require("../helpers/useId.cjs"),p=require("../Box/Box.cjs"),_=require("../Flex/Flex.cjs"),c=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=c(v),o=c(b),y=c(m),A=({theme:r,expanded:e,variant:d,disabled:l,error:t})=>t?`1px solid ${r.colors.danger600} !important`:l?`1px solid ${r.colors.neutral150}`:e?`1px solid ${r.colors.primary600}`:d==="primary"?`1px solid ${r.colors.neutral0}`:`1px solid ${r.colors.neutral100}`,f=y.default(n.Typography)``,j=y.default(p.Box)`
-  border: ${A};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),f=require("styled-components"),s=require("../Typography/Typography.cjs"),$=require("../helpers/useId.cjs"),a=require("../Box/Box.cjs"),j=require("../Flex/Flex.cjs"),h=require("./AccordionContext.cjs"),T=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=T(f),m=({theme:r,expanded:o,variant:e,disabled:t,error:n})=>n?`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}`,l=d.default(s.Typography)``,b=d.default(a.Box)`
+  border: ${m};
 
   &:hover:not([aria-disabled='true']) {
     border: 1px solid ${({theme:r})=>r.colors.primary600};
 
-    ${f} {
-      color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary700};
+    ${l} {
+      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary700};
     }
 
-    ${n.Typography} {
-      color: ${({theme:r,expanded:e})=>e?void 0:r.colors.primary600};
+    ${s.Typography} {
+      color: ${({theme:r,expanded:o})=>o?void 0:r.colors.primary600};
     }
 
-    & > ${_.Flex} {
+    & > ${j.Flex} {
       background: ${({theme:r})=>r.colors.primary100};
     }
 
@@ -20,4 +20,4 @@
       background: ${({theme:r})=>r.colors.primary200};
     }
   }
-`,u=({children:r,expanded:e,id:d,size:l,variant:t,disabled:s,error:i,hasErrorMessage:g,onToggle:x,toggle:T})=>{const $=q.useId("accordion",d);return a.default.createElement(h.AccordionContext.Provider,{value:{expanded:e,onToggle:x,toggle:T,id:$,size:l,variant:t,disabled:s}},a.default.createElement(j,{"data-strapi-expanded":e,disabled:s,"aria-disabled":s,expanded:e,hasRadius:!0,variant:t,error:i},r),i&&g&&a.default.createElement(p.Box,{paddingTop:1},a.default.createElement(n.Typography,{variant:"pi",textColor:"danger600"},i)))};u.defaultProps={disabled:!1,error:void 0,expanded:!1,hasErrorMessage:!0,id:void 0,toggle:void 0,size:"M",variant:"primary",onToggle:void 0};u.propTypes={children:o.default.node.isRequired,disabled:o.default.bool,error:o.default.string,expanded:o.default.bool,hasErrorMessage:o.default.bool,id:o.default.string,onToggle:o.default.func,size:o.default.oneOf(["S","M"]),toggle:o.default.func,variant:o.default.oneOf(["primary","secondary"])};exports.Accordion=u;exports.AccordionTypography=f;
+`,A=({children:r,disabled:o=!1,error:e,expanded:t=!1,hasErrorMessage:n=!0,id:p,onToggle:u,toggle:y,size:x="M",variant:i="primary"})=>{const g=$.useId("accordion",p);return c.jsxs(h.AccordionContext.Provider,{value:{expanded:t,onToggle:u,toggle:y,id:g,size:x,variant:i,disabled:o},children:[c.jsx(b,{"data-strapi-expanded":t,disabled:o,"aria-disabled":o,expanded:t,hasRadius:!0,variant:i,error:e,children:r}),e&&n&&c.jsx(a.Box,{paddingTop:1,children:c.jsx(s.Typography,{variant:"pi",textColor:"danger600",children:e})})]})};exports.Accordion=A;exports.AccordionTypography=l;

package/dist/Accordion/Accordion.js

@@ -1,87 +1,93 @@
-import a from "react";
-import o from "prop-types";
-import l from "styled-components";
-import { Typography as p } from "../Typography/Typography.js";
-import { AccordionContext as $ } from "./AccordionContext.js";
+import { jsxs as $, jsx as n } from "react/jsx-runtime";
+import e from "styled-components";
+import { Typography as t } from "../Typography/Typography.js";
 import { useId as x } from "../helpers/useId.js";
 import { Box as c } from "../Box/Box.js";
-import { Flex as v } from "../Flex/Flex.js";
-const b = ({ theme: r, expanded: e, variant: t, disabled: d, error: i }) => i ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : e ? `1px solid ${r.colors.primary600}` : t === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, T = l(p)``, E = l(c)`
+import { Flex as y } from "../Flex/Flex.js";
+import { AccordionContext as g } from "./AccordionContext.js";
+const b = ({
+  theme: r,
+  expanded: o,
+  variant: i,
+  disabled: d,
+  error: a
+}) => a ? `1px solid ${r.colors.danger600} !important` : d ? `1px solid ${r.colors.neutral150}` : o ? `1px solid ${r.colors.primary600}` : i === "primary" ? `1px solid ${r.colors.neutral0}` : `1px solid ${r.colors.neutral100}`, h = e(t)``, v = e(c)`
   border: ${b};
 
   &:hover:not([aria-disabled='true']) {
-    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+    border: 1px solid ${({
+  theme: r
+}) => r.colors.primary600};
 
-    ${T} {
-      color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary700};
+    ${h} {
+      color: ${({
+  theme: r,
+  expanded: o
+}) => o ? void 0 : r.colors.primary700};
     }
 
-    ${p} {
-      color: ${({ theme: r, expanded: e }) => e ? void 0 : r.colors.primary600};
+    ${t} {
+      color: ${({
+  theme: r,
+  expanded: o
+}) => o ? void 0 : r.colors.primary600};
     }
 
-    & > ${v} {
-      background: ${({ theme: r }) => r.colors.primary100};
+    & > ${y} {
+      background: ${({
+  theme: r
+}) => r.colors.primary100};
     }
 
     [data-strapi-dropdown='true'] {
-      background: ${({ theme: r }) => r.colors.primary200};
+      background: ${({
+  theme: r
+}) => r.colors.primary200};
     }
   }
-`, m = ({
+`, w = ({
   children: r,
-  expanded: e,
-  id: t,
-  size: d,
-  variant: i,
-  disabled: n,
-  error: s,
-  hasErrorMessage: u,
-  onToggle: g,
-  toggle: f
+  disabled: o = !1,
+  error: i,
+  expanded: d = !1,
+  hasErrorMessage: a = !0,
+  id: s,
+  onToggle: l,
+  toggle: u,
+  size: m = "M",
+  variant: p = "primary"
 }) => {
-  const y = x("accordion", t);
-  return /* @__PURE__ */ a.createElement($.Provider, {
-    value: { expanded: e, onToggle: g, toggle: f, id: y, size: d, variant: i, disabled: n }
-  }, /* @__PURE__ */ a.createElement(E, {
-    "data-strapi-expanded": e,
-    disabled: n,
-    "aria-disabled": n,
-    expanded: e,
-    hasRadius: !0,
-    variant: i,
-    error: s
-  }, r), s && u && /* @__PURE__ */ a.createElement(c, {
-    paddingTop: 1
-  }, /* @__PURE__ */ a.createElement(p, {
-    variant: "pi",
-    textColor: "danger600"
-  }, s)));
-};
-m.defaultProps = {
-  disabled: !1,
-  error: void 0,
-  expanded: !1,
-  hasErrorMessage: !0,
-  id: void 0,
-  toggle: void 0,
-  size: "M",
-  variant: "primary",
-  onToggle: void 0
-};
-m.propTypes = {
-  children: o.node.isRequired,
-  disabled: o.bool,
-  error: o.string,
-  expanded: o.bool,
-  hasErrorMessage: o.bool,
-  id: o.string,
-  onToggle: o.func,
-  size: o.oneOf(["S", "M"]),
-  toggle: o.func,
-  variant: o.oneOf(["primary", "secondary"])
+  const f = x("accordion", s);
+  return $(g.Provider, {
+    value: {
+      expanded: d,
+      onToggle: l,
+      toggle: u,
+      id: f,
+      size: m,
+      variant: p,
+      disabled: o
+    },
+    children: [n(v, {
+      "data-strapi-expanded": d,
+      disabled: o,
+      "aria-disabled": o,
+      expanded: d,
+      hasRadius: !0,
+      variant: p,
+      error: i,
+      children: r
+    }), i && a && n(c, {
+      paddingTop: 1,
+      children: n(t, {
+        variant: "pi",
+        textColor: "danger600",
+        children: i
+      })
+    })]
+  });
 };
 export {
-  m as Accordion,
-  T as AccordionTypography
+  w as Accordion,
+  h as AccordionTypography
 };

package/dist/Accordion/AccordionContent.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),l=require("prop-types"),u=require("./AccordionContext.cjs"),p=require("../Box/Box.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=t(s),b=t(l),c=({children:e,...n})=>{const{expanded:r,id:o}=u.useAccordion();if(!r)return null;const i=`accordion-content-${o}`,d=`accordion-label-${o}`,a=`accordion-desc-${o}`;return f.default.createElement(p.Box,{role:"region",id:i,"aria-labelledby":d,"aria-describedby":a,...n},e)};c.propTypes={children:b.default.node.isRequired};exports.AccordionContent=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("../Box/Box.cjs"),a=require("./AccordionContext.cjs"),l=({children:o,...n})=>{const{expanded:c,id:e}=a.useAccordion();if(!c)return null;const r=`accordion-content-${e}`,t=`accordion-label-${e}`,i=`accordion-desc-${e}`;return d.jsx(s.Box,{role:"region",id:r,"aria-labelledby":t,"aria-describedby":i,...n,children:o})};exports.AccordionContent=l;

package/dist/Accordion/AccordionContent.js

@@ -1,23 +1,26 @@
-import d from "react";
-import a from "prop-types";
+import { jsx as d } from "react/jsx-runtime";
+import { Box as a } from "../Box/Box.js";
 import { useAccordion as l } from "./AccordionContext.js";
-import { Box as p } from "../Box/Box.js";
-const s = ({ children: e, ...r }) => {
-  const { expanded: n, id: o } = l();
-  if (!n)
+const p = ({
+  children: r,
+  ...n
+}) => {
+  const {
+    expanded: i,
+    id: o
+  } = l();
+  if (!i)
     return null;
-  const i = `accordion-content-${o}`, t = `accordion-label-${o}`, c = `accordion-desc-${o}`;
-  return /* @__PURE__ */ d.createElement(p, {
+  const c = `accordion-content-${o}`, e = `accordion-label-${o}`, t = `accordion-desc-${o}`;
+  return d(a, {
     role: "region",
-    id: i,
-    "aria-labelledby": t,
-    "aria-describedby": c,
-    ...r
-  }, e);
-};
-s.propTypes = {
-  children: a.node.isRequired
+    id: c,
+    "aria-labelledby": e,
+    "aria-describedby": t,
+    ...n,
+    children: r
+  });
 };
 export {
-  s as AccordionContent
+  p as AccordionContent
 };

package/dist/Accordion/AccordionContext.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext(),o=()=>e.useContext(t);exports.AccordionContext=t;exports.useAccordion=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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/AccordionContext.js

@@ -1,6 +1,12 @@
-import { createContext as o, useContext as t } from "react";
-const e = o(), n = () => t(e);
+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 {
-  e as AccordionContext,
-  n as useAccordion
+  t as AccordionContext,
+  r as useAccordion
 };

package/dist/Accordion/AccordionGroup.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),y=require("prop-types"),g=require("styled-components"),a=require("../Box/Box.cjs"),p=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),$=require("../KeyboardNavigable/KeyboardNavigable.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=l(d),t=l(y),s=l(g),m=s.default(a.Box)`
-  border-bottom: 1px solid ${({theme:e})=>e.colors.neutral200};
-  border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
-  border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
-  border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
-`,h=s.default(a.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),l=require("react"),p=require("styled-components"),t=require("../Box/Box.cjs"),n=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),x=require("../KeyboardNavigable/KeyboardNavigable.cjs"),y=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},d=y(p),g=d.default(t.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=d.default(t.Box)`
   & > * {
     & > * {
       border-radius: unset;
@@ -12,36 +12,36 @@
 
   & > * {
     border-radius: unset;
-    border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
-    border-left: 1px solid ${({theme:e})=>e.colors.neutral200};
-    border-bottom: 1px solid ${({theme:e})=>e.colors.neutral200};
+    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:e})=>e.colors.neutral200};
-    border-radius: ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius} 0 0;
+    border-top: 1px solid ${({theme:r})=>r.colors.neutral200};
+    border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
     & > * {
-      border-radius: ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius} 0 0;
+      border-radius: ${({theme:r})=>r.borderRadius} ${({theme:r})=>r.borderRadius} 0 0;
     }
 
     &:hover {
-      border-top: 1px solid ${({theme:e})=>e.colors.primary600};
+      border-top: 1px solid ${({theme:r})=>r.colors.primary600};
     }
   }
 
   & [data-strapi-expanded='true'] {
-    border: 1px solid ${({theme:e})=>e.colors.primary600};
+    border: 1px solid ${({theme:r})=>r.colors.primary600};
   }
 
-  ${({theme:e,footer:o})=>`
-    &:not(${o}) {
+  ${({theme:r,footer:e})=>`
+    &:not(${e}) {
       & > *:last-of-type {
-        border-radius: 0 0 ${e.borderRadius} ${e.borderRadius};
+        border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
       }
     }
   `}
-`,v=s.default(a.Box)`
+`,$=d.default(t.Box)`
   svg path {
-    fill: ${({theme:e})=>e.colors.neutral500};
+    fill: ${({theme:r})=>r.colors.neutral500};
   }
-`,n=({children:e,footer:o,label:i,labelAction:u,error:c})=>{const b=d.Children.toArray(e).map(f=>d.cloneElement(f,{hasErrorMessage:!1}));return r.default.createElement($.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle"},i&&r.default.createElement(x.Flex,{paddingBottom:1},r.default.createElement(p.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold"},i),u&&r.default.createElement(v,{paddingLeft:1},u)),r.default.createElement(h,{footer:o},b),o&&r.default.createElement(m,null,o),c&&r.default.createElement(a.Box,{paddingTop:1},r.default.createElement(p.Typography,{variant:"pi",textColor:"danger600"},c)))};n.defaultProps={footer:null,error:void 0,label:null,labelAction:void 0};n.propTypes={children:t.default.node.isRequired,error:t.default.string,footer:t.default.node,label:t.default.string,labelAction:t.default.node};exports.AccordionGroup=n;
+`,f=({children:r,footer:e,label:a,labelAction:s,error:i})=>{const c=l.Children.toArray(r).map(u=>l.cloneElement(u,{hasErrorMessage:!1}));return o.jsxs(x.KeyboardNavigable,{attributeName:"data-strapi-accordion-toggle",children:[a&&o.jsxs(b.Flex,{paddingBottom:1,children:[o.jsx(n.Typography,{variant:"pi",as:"label",textColor:"neutral800",fontWeight:"bold",children:a}),s&&o.jsx($,{paddingLeft:1,children:s})]}),o.jsx(h,{footer:e,children:c}),e&&o.jsx(g,{children:e}),i&&o.jsx(t.Box,{paddingTop:1,children:o.jsx(n.Typography,{variant:"pi",textColor:"danger600",children:i})})]})};exports.AccordionGroup=f;

package/dist/Accordion/AccordionGroup.js

@@ -1,16 +1,26 @@
-import o, { Children as b, cloneElement as m } from "react";
-import t from "prop-types";
-import a from "styled-components";
-import { Box as d } from "../Box/Box.js";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { Children as u, cloneElement as b } from "react";
+import t from "styled-components";
+import { Box as e } from "../Box/Box.js";
 import { Typography as n } from "../Typography/Typography.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { KeyboardNavigable as f } from "../KeyboardNavigable/KeyboardNavigable.js";
-const g = a(d)`
-  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};
-`, x = a(d)`
+import { Flex as m } from "../Flex/Flex.js";
+import { KeyboardNavigable as $ } from "../KeyboardNavigable/KeyboardNavigable.js";
+const h = 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};
+`, x = t(e)`
   & > * {
     & > * {
       border-radius: unset;
@@ -19,73 +29,102 @@ const g = a(d)`
 
   & > * {
     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: 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-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;
+      border-radius: ${({
+  theme: r
+}) => r.borderRadius} ${({
+  theme: r
+}) => r.borderRadius} 0 0;
     }
 
     &:hover {
-      border-top: 1px solid ${({ theme: r }) => r.colors.primary600};
+      border-top: 1px solid ${({
+  theme: r
+}) => r.colors.primary600};
     }
   }
 
   & [data-strapi-expanded='true'] {
-    border: 1px solid ${({ theme: r }) => r.colors.primary600};
+    border: 1px solid ${({
+  theme: r
+}) => r.colors.primary600};
   }
 
-  ${({ theme: r, footer: e }) => `
-    &:not(${e}) {
+  ${({
+  theme: r,
+  footer: d
+}) => `
+    &:not(${d}) {
       & > *:last-of-type {
         border-radius: 0 0 ${r.borderRadius} ${r.borderRadius};
       }
     }
   `}
-`, y = a(d)`
+`, f = t(e)`
   svg path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({
+  theme: r
+}) => r.colors.neutral500};
   }
-`, p = ({ children: r, footer: e, label: l, labelAction: i, error: s }) => {
-  const u = b.toArray(r).map((c) => m(c, { hasErrorMessage: !1 }));
-  return /* @__PURE__ */ o.createElement(f, {
-    attributeName: "data-strapi-accordion-toggle"
-  }, l && /* @__PURE__ */ o.createElement($, {
-    paddingBottom: 1
-  }, /* @__PURE__ */ o.createElement(n, {
-    variant: "pi",
-    as: "label",
-    textColor: "neutral800",
-    fontWeight: "bold"
-  }, l), i && /* @__PURE__ */ o.createElement(y, {
-    paddingLeft: 1
-  }, i)), /* @__PURE__ */ o.createElement(x, {
-    footer: e
-  }, u), e && /* @__PURE__ */ o.createElement(g, null, e), s && /* @__PURE__ */ o.createElement(d, {
-    paddingTop: 1
-  }, /* @__PURE__ */ o.createElement(n, {
-    variant: "pi",
-    textColor: "danger600"
-  }, s)));
-};
-p.defaultProps = {
-  footer: null,
-  error: void 0,
-  label: null,
-  labelAction: void 0
-};
-p.propTypes = {
-  children: t.node.isRequired,
-  error: t.string,
-  footer: t.node,
-  label: t.string,
-  labelAction: t.node
+`, j = ({
+  children: r,
+  footer: d,
+  label: i,
+  labelAction: a,
+  error: s
+}) => {
+  const p = u.toArray(r).map((c) => b(c, {
+    hasErrorMessage: !1
+  }));
+  return l($, {
+    attributeName: "data-strapi-accordion-toggle",
+    children: [i && l(m, {
+      paddingBottom: 1,
+      children: [o(n, {
+        variant: "pi",
+        as: "label",
+        textColor: "neutral800",
+        fontWeight: "bold",
+        children: i
+      }), a && o(f, {
+        paddingLeft: 1,
+        children: a
+      })]
+    }), o(x, {
+      footer: d,
+      children: p
+    }), d && o(h, {
+      children: d
+    }), s && o(e, {
+      paddingTop: 1,
+      children: o(n, {
+        variant: "pi",
+        textColor: "danger600",
+        children: s
+      })
+    })]
+  });
 };
 export {
-  p as AccordionGroup
+  j as AccordionGroup
 };

package/dist/Accordion/AccordionToggle.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react"),P=require("prop-types"),F=require("@strapi/icons/CarretDown"),I=require("styled-components"),M=require("../TextButton/TextButton.cjs"),z=require("../Typography/Typography.cjs"),D=require("./Accordion.cjs"),W=require("./AccordionContext.cjs"),C=require("../Flex/Flex.cjs"),T=require("../Stack/Stack.cjs"),L=require("../Icon/Icon.cjs"),O=require("./utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(w),i=l(P),U=l(F),k=l(I),X=k.default(M.TextButton)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),v=require("@strapi/icons"),B=require("styled-components"),z=require("../TextButton/TextButton.cjs"),F=require("../Typography/Typography.cjs"),j=require("../Flex/Flex.cjs"),y=require("../Stack/Stack.cjs"),I=require("../Icon/Icon.cjs"),M=require("./Accordion.cjs"),R=require("./AccordionContext.cjs"),_=require("./utils.cjs"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=D(B),W=m.default(z.TextButton)`
   text-align: left;
 
   // necessary to make the ellipsis prop work on the title
@@ -14,7 +14,7 @@
       fill: ${({theme:e,expanded:r})=>r?e.colors.primary600:e.colors.neutral500};
     }
   }
-`,Y=k.default(C.Flex)`
+`,L=m.default(j.Flex)`
   min-height: ${({theme:e,size:r})=>e.sizes.accordions[r]};
   border-radius: ${({theme:e,expanded:r})=>r?`${e.borderRadius} ${e.borderRadius} 0 0`:e.borderRadius};
 
@@ -25,4 +25,4 @@
       }
     }
   }
-`,u=({title:e,description:r,as:v,togglePosition:s,action:p,...$})=>{const g=w.useRef(null),{onToggle:f,toggle:y,expanded:o,id:d,size:n,variant:j,disabled:a}=W.useAccordion(),q=`accordion-content-${d}`,m=`accordion-label-${d}`,_=`accordion-desc-${d}`,c=n==="M"?6:4,h=n==="M"?c:c-2,R=O.getBackground({expanded:o,disabled:a,variant:j}),S={as:v,fontWeight:n==="S"?"bold":void 0,id:m,textColor:o?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},A=o?"primary600":"neutral600",B=o?"primary200":"neutral200",x=n==="M"?`${32/16}rem`:`${24/16}rem`,E=()=>{a||(y&&!f?(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'),y()):f())},b=t.default.createElement(C.Flex,{justifyContent:"center",borderRadius:"50%",height:x,width:x,transform:o?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,disabled:a,"aria-hidden":!0,as:"span",background:B,cursor:a?"not-allowed":"pointer",onClick:()=>g?.current?.click(),shrink:0},t.default.createElement(L.Icon,{as:U.default,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:o?"primary600":"neutral600"}));return t.default.createElement(Y,{paddingBottom:h,paddingLeft:c,paddingRight:c,paddingTop:h,background:R,expanded:o,size:n,justifyContent:"space-between",cursor:a?"not-allowed":""},t.default.createElement(T.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%"},s==="left"&&b,t.default.createElement(X,{ref:g,onClick:E,"aria-disabled":a,"aria-expanded":o,"aria-controls":q,"aria-labelledby":m,"data-strapi-accordion-toggle":!0,expanded:o,type:"button",flex:1,minWidth:0,...$},t.default.createElement(t.default.Fragment,null,t.default.createElement(D.AccordionTypography,{...S},e),r&&t.default.createElement(z.Typography,{as:"p",id:_,textColor:A},r))),s==="right"&&t.default.createElement(T.Stack,{horizontal:!0,spacing:3},b,p),s==="left"&&p))};u.defaultProps={action:void 0,as:"span",description:void 0,variant:"primary",togglePosition:"right"};u.propTypes={action:i.default.node,as:i.default.string,description:i.default.string,title:i.default.string.isRequired,togglePosition:i.default.oneOf(["right","left"]),variant:i.default.oneOf(["primary","secondary"])};exports.AccordionToggle=u;
+`,P=({title:e,description:r,as:b="span",togglePosition:s="right",action:l,...T})=>{const{onToggle:c,toggle:u,expanded:t,id:d,size:n,variant:$,disabled:i}=R.useAccordion(),k=`accordion-content-${d}`,p=`accordion-label-${d}`,w=`accordion-desc-${d}`,a=n==="M"?6:4,g=n==="M"?a:a-2,C=_.getBackground({expanded:t,disabled:i,variant:$}),q={as:b,fontWeight:n==="S"?"bold":void 0,id:p,textColor:t?"primary600":"neutral700",ellipsis:!0,variant:n==="M"?"delta":void 0},S=t?"primary600":"neutral600",A=t?"primary200":"neutral200",h=n==="M"?`${32/16}rem`:`${24/16}rem`,x=()=>{i||(u&&!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'),u()):c&&c())},f=o.jsx(j.Flex,{justifyContent:"center",borderRadius:"50%",height:h,width:h,transform:t?"rotate(180deg)":void 0,"data-strapi-dropdown":!0,"aria-hidden":!0,as:"span",background:A,cursor:i?"not-allowed":"pointer",onClick:x,shrink:0,children:o.jsx(I.Icon,{as:v.CarretDown,width:n==="M"?`${11/16}rem`:`${8/16}rem`,color:t?"primary600":"neutral600"})});return o.jsx(L,{paddingBottom:g,paddingLeft:a,paddingRight:a,paddingTop:g,background:C,expanded:t,size:n,justifyContent:"space-between",cursor:i?"not-allowed":"",children:o.jsxs(y.Stack,{horizontal:!0,spacing:3,flex:1,maxWidth:"100%",children:[s==="left"&&f,o.jsx(W,{onClick:x,"aria-disabled":i,"aria-expanded":t,"aria-controls":k,"aria-labelledby":p,"data-strapi-accordion-toggle":!0,expanded:t,type:"button",flex:1,minWidth:0,...T,children:o.jsxs(o.Fragment,{children:[o.jsx(M.AccordionTypography,{...q,children:e}),r&&o.jsx(F.Typography,{as:"p",id:w,textColor:S,children:r})]})}),s==="right"&&o.jsxs(y.Stack,{horizontal:!0,spacing:3,children:[f,l]}),s==="left"&&l]})})};exports.AccordionToggle=P;