@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.1

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.d.ts

@@ -0,0 +1,48 @@
+import { DefaultTheme } from 'styled-components';
+export declare const AccordionTypography: import("styled-components").StyledComponent<"span", DefaultTheme, import("../Typography").TypographyProps, never>;
+export type AccordionSize = 'S' | 'M';
+export type AccordionVariant = 'primary' | 'secondary';
+export interface AccordionProps {
+    children: React.ReactNode;
+    /**
+     * If `true`, the accordion will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If defined, will add a border (borderColor: `danger600`) and display the error message below the component.
+     */
+    error?: string;
+    /**
+     * If `true`, an expanded Accordion will be rendered.
+     */
+    expanded?: boolean;
+    /**
+     * If `false`, the error message won't show.
+     * If the `Accordion` is as child of an `AccordionGroup`, this prop will be set to `false` automatically.
+     * The error message of the `AccordionGroup` will be shown below the group instead of the Accordion itself.
+     */
+    hasErrorMessage?: boolean;
+    /**
+     * The id of the component.
+     */
+    id?: string;
+    /**
+     * The callback invoked after a click event on the `AccordionToggle`.
+     */
+    onToggle?: () => void;
+    /**
+     * @deprecated use `onToggle` instead
+     * The callback invoked after a click event on the `AccordionToggle`.
+     */
+    toggle?: () => void;
+    /**
+     * Size of the Accordion.
+     */
+    size?: AccordionSize;
+    /**
+     * Color variant for `Accordion`. The "secondary" variant reverses the background colors.
+     * This is useful when you want to display a list and alternate the colors of the accordions.
+     */
+    variant?: AccordionVariant;
+}
+export declare const Accordion: ({ children, disabled, error, expanded, hasErrorMessage, id, onToggle, toggle, size, variant, }: AccordionProps) => JSX.Element;

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";var C=Object.defineProperty,B=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var r=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;var i=(e,o,n)=>o in e?C(e,o,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[o]=n,a=(e,o)=>{for(var n in o||(o={}))d.call(o,n)&&i(e,n,o[n]);if(r)for(var n of r(o))s.call(o,n)&&i(e,n,o[n]);return e},l=(e,o)=>B(e,g(o));var u=(e,o)=>{var n={};for(var c in e)d.call(e,c)&&o.indexOf(c)<0&&(n[c]=e[c]);if(e!=null&&r)for(var c of r(e))o.indexOf(c)<0&&s.call(e,c)&&(n[c]=e[c]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),p=require("../Box/Box.cjs"),q=require("./AccordionContext.cjs"),y=n=>{var c=n,{children:e}=c,o=u(c,["children"]);const{expanded:x,id:t}=q.useAccordion();if(!x)return null;const b=`accordion-content-${t}`,j=`accordion-label-${t}`,A=`accordion-desc-${t}`;return m.jsx(p.Box,l(a({role:"region",id:b,"aria-labelledby":j,"aria-describedby":A},o),{children:e}))};exports.AccordionContent=y;

package/dist/Accordion/AccordionContent.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from '../Box';
+export type AccordionContentProps = BoxProps;
+export declare const AccordionContent: ({ children, ...props }: AccordionContentProps) => JSX.Element | null;

package/dist/Accordion/AccordionContent.js

@@ -1,23 +1,49 @@
-import d from "react";
-import a from "prop-types";
-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)
+var x = Object.defineProperty, $ = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var c = Object.getOwnPropertySymbols;
+var d = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
+var t = (o, r, n) => r in o ? x(o, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : o[r] = n, l = (o, r) => {
+  for (var n in r || (r = {}))
+    d.call(r, n) && t(o, n, r[n]);
+  if (c)
+    for (var n of c(r))
+      a.call(r, n) && t(o, n, r[n]);
+  return o;
+}, s = (o, r) => $(o, y(r));
+var b = (o, r) => {
+  var n = {};
+  for (var i in o)
+    d.call(o, i) && r.indexOf(i) < 0 && (n[i] = o[i]);
+  if (o != null && c)
+    for (var i of c(o))
+      r.indexOf(i) < 0 && a.call(o, i) && (n[i] = o[i]);
+  return n;
+};
+import { jsx as A } from "react/jsx-runtime";
+import { Box as C } from "../Box/Box.js";
+import { useAccordion as I } from "./AccordionContext.js";
+const D = (n) => {
+  var i = n, {
+    children: o
+  } = i, r = b(i, [
+    "children"
+  ]);
+  const {
+    expanded: m,
+    id: e
+  } = I();
+  if (!m)
     return null;
-  const i = `accordion-content-${o}`, t = `accordion-label-${o}`, c = `accordion-desc-${o}`;
-  return /* @__PURE__ */ d.createElement(p, {
+  const p = `accordion-content-${e}`, f = `accordion-label-${e}`, u = `accordion-desc-${e}`;
+  return A(C, s(l({
     role: "region",
-    id: i,
-    "aria-labelledby": t,
-    "aria-describedby": c,
-    ...r
-  }, e);
-};
-s.propTypes = {
-  children: a.node.isRequired
+    id: p,
+    "aria-labelledby": f,
+    "aria-describedby": u
+  }, r), {
+    children: o
+  }));
 };
 export {
-  s as AccordionContent
+  D 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.d.ts

@@ -0,0 +1,12 @@
+import type { AccordionSize, AccordionVariant } from './Accordion';
+export interface AccordionContextValue {
+    disabled: boolean;
+    expanded: boolean;
+    id: string;
+    onToggle?: () => void;
+    toggle?: () => void;
+    size: AccordionSize;
+    variant: AccordionVariant;
+}
+export declare const AccordionContext: import("react").Context<AccordionContextValue>;
+export declare const useAccordion: () => AccordionContextValue;

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.d.ts

@@ -0,0 +1,8 @@
+export interface AccordionGroup {
+    children: React.ReactNode;
+    error?: string;
+    footer?: React.ReactNode;
+    label?: string;
+    labelAction?: React.ReactNode;
+}
+export declare const AccordionGroup: ({ children, footer, label, labelAction, error }: AccordionGroup) => JSX.Element;

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
 };