dune-react 0.0.9 → 0.0.11

package/dist/components/puck-block/cta-sections/gradient-cta-1/gradient-cta.js

@@ -1,38 +1,64 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
-import { CompoundContent } from "../../../puck-base/content.js";
+import { CompoundBadge } from "../../../puck-base/badge.js";
+import { CompoundButton } from "../../../puck-base/button.js";
 const GradientCta = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   badge,
   heading,
   description,
   buttons,
-  gradientFrom = "var(--primary)",
-  gradientTo = "var(--chart-2)",
-  backgroundCSS,
-  textColor
+  styles
 }) => {
-  const bg = backgroundCSS || `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
-  const color = textColor || (backgroundCSS ? void 0 : "var(--primary-foreground)");
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsx(
-    "div",
+  const gradientFrom = (styles == null ? void 0 : styles.gradientFrom) ?? "var(--primary)";
+  const gradientTo = (styles == null ? void 0 : styles.gradientTo) ?? "var(--chart-2)";
+  const bg = (styles == null ? void 0 : styles.backgroundCSS) || `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`;
+  const color = (styles == null ? void 0 : styles.textColor) || ((styles == null ? void 0 : styles.backgroundCSS) ? void 0 : "var(--primary-foreground)");
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: "rounded-2xl p-8 text-center md:p-14",
-      style: { background: bg, color },
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
       children: /* @__PURE__ */ jsx(
-        CompoundContent,
+        "div",
         {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: "center"
+          className: "rounded-2xl p-8 text-center md:p-14",
+          style: { background: bg, color },
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-8", children: [
+            (!!heading || !!description || !!badge) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4", children: [
+              (badge == null ? void 0 : badge.label) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                CompoundBadge,
+                {
+                  label: badge.label,
+                  variant: badge.variant,
+                  url: badge.url
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center gap-4", children: [
+                !!heading && /* @__PURE__ */ jsx("h2", { className: "font-serif font-regular text-3xl tracking-tighter text-center md:text-5xl lg:max-w-xl", children: heading }),
+                !!description && /* @__PURE__ */ jsx("p", { className: "text text-lg leading-relaxed tracking-tight text-center lg:max-w-xl", children: description })
+              ] })
+            ] }),
+            Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row justify-center flex-wrap gap-4", children: buttons.filter((button) => !!button.label).map((button, index) => {
+              const needsContrast = !button.variant || button.variant === "default";
+              return /* @__PURE__ */ jsx(
+                CompoundButton,
+                {
+                  label: button.label,
+                  action: button.action,
+                  variant: button.variant,
+                  size: button.size,
+                  icon: button.icon,
+                  className: needsContrast ? "bg-background text-foreground hover:bg-background/90" : void 0
+                },
+                index
+              );
+            }) })
+          ] })
         }
       )
     }
-  ) });
+  );
 };
 export {
   GradientCta

package/dist/components/puck-block/cta-sections/gradient-cta-1/index.js

@@ -1,33 +1,38 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { GradientCta } from "./gradient-cta.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
+const gradientCtaStylesField = createStylesField({
+  gradientFrom: {
+    type: "text",
+    label: "Gradient Start",
+    ai: {
+      instructions: "Use a CSS variable from the template theme, e.g. 'var(--primary)', 'var(--chart-1)'. Also accepts oklch format."
+    }
+  },
+  gradientTo: {
+    type: "text",
+    label: "Gradient End",
+    ai: {
+      instructions: "Use a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format."
+    }
+  },
+  backgroundCSS: {
+    type: "textarea",
+    label: "Full CSS Background",
+    ai: {
+      instructions: "Full CSS background value (radial-gradient, multi-layer). Overrides gradientFrom/To."
+    }
+  },
+  textColor: {
+    type: "text",
+    label: "Text Color",
+    ai: { instructions: "Override text color, e.g. #333 or white" }
+  }
+});
 const conf = {
   fields: {
     ...contentFields,
-    gradientFrom: {
-      type: "text",
-      label: "Gradient Start",
-      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--primary)', 'var(--chart-1)'. Also accepts oklch format." }
-    },
-    gradientTo: {
-      type: "text",
-      label: "Gradient End",
-      ai: { instructions: "Use a CSS variable from the template theme, e.g. 'var(--chart-2)', 'var(--accent)'. Also accepts oklch format." }
-    },
-    backgroundCSS: {
-      type: "textarea",
-      label: "Full CSS Background",
-      ai: {
-        instructions: "Full CSS background value (radial-gradient, multi-layer). Overrides gradientFrom/To."
-      }
-    },
-    textColor: {
-      type: "text",
-      label: "Text Color",
-      ai: { instructions: "Override text color, e.g. #333 or white" }
-    },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: gradientCtaStylesField
   },
   defaultProps: {
     heading: "Ready to get started?",
@@ -35,9 +40,11 @@ const conf = {
     buttons: [
       { label: "Start Free Trial", icon: "move-right", variant: "default" }
     ],
-    gradientFrom: "var(--primary)",
-    gradientTo: "var(--chart-2)",
-    padding: paddingDefaults
+    styles: {
+      ...createStylesDefaults(),
+      gradientFrom: "var(--primary)",
+      gradientTo: "var(--chart-2)"
+    }
   },
   render: GradientCta
 };

package/dist/components/puck-block/cta-sections/newsletter-signup-1/index.js

@@ -1,19 +1,27 @@
-import { paddingDefaults, padding } from "../../../puck-base/core/fields.js";
 import { NewsletterSignup } from "./newsletter-signup.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
     description: { type: "textarea", contentEditable: true },
-    buttonLabel: { type: "text" },
+    buttons: {
+      type: "array",
+      max: 1,
+      getItemSummary: (item, i = 0) => item.label || `Button ${i + 1}`,
+      arrayFields: {
+        label: { type: "text" }
+      },
+      defaultItemProps: { label: "Subscribe" }
+    },
     placeholder: { type: "text" },
-    padding
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Stay in the loop",
     description: "Get the latest updates delivered to your inbox.",
-    buttonLabel: "Subscribe",
+    buttons: [{ label: "Subscribe" }],
     placeholder: "Enter your email",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: NewsletterSignup
 };

package/dist/components/puck-block/cta-sections/newsletter-signup-1/newsletter-signup.d.ts

@@ -1,9 +1,13 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface NewsletterSignupProps {
-    padding?: CompoundContainerProps["padding"];
     heading?: string;
     description?: string;
-    buttonLabel?: string;
+    buttons?: Array<{
+        label: string;
+    }>;
     placeholder?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+    };
 }
-export declare const NewsletterSignup: ({ padding, heading, description, buttonLabel, placeholder, }: NewsletterSignupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NewsletterSignup: ({ heading, description, buttons, placeholder, styles, }: NewsletterSignupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/newsletter-signup-1/newsletter-signup.js

@@ -2,40 +2,43 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 const NewsletterSignup = ({
-  padding,
   heading,
   description,
-  buttonLabel = "Subscribe",
-  placeholder = "Enter your email"
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl text-center", children: [
-  heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif mb-2 text-2xl font-bold tracking-tight md:text-3xl", children: heading }),
-  description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: description }),
-  /* @__PURE__ */ jsxs(
-    "form",
-    {
-      className: "mx-auto flex max-w-md gap-2",
-      onSubmit: (e) => e.preventDefault(),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "email",
-            placeholder,
-            className: "border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary flex-1 rounded-lg border px-4 py-2.5 focus:ring-2 focus:outline-none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          CompoundButton,
-          {
-            label: buttonLabel,
-            variant: "default",
-            type: "submit"
-          }
-        )
-      ]
-    }
-  )
-] }) });
+  buttons = [],
+  placeholder = "Enter your email",
+  styles
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsx(CompoundContainer, { padding: styles == null ? void 0 : styles.padding, sectionStyle: "muted", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-xl text-center", children: [
+    heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif mb-2 text-2xl font-bold tracking-tight md:text-3xl", children: heading }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "mx-auto flex max-w-md gap-2",
+        onSubmit: (e) => e.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "email",
+              placeholder,
+              className: "border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary flex-1 rounded-lg border px-4 py-2.5 focus:ring-2 focus:outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: ((_a = buttons[0]) == null ? void 0 : _a.label) ?? "Subscribe",
+              variant: "default",
+              type: "submit"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+};
 export {
   NewsletterSignup
 };

package/dist/components/puck-block/cta-sections/promo-section-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, buttons, badge, image } from "../../../puck-base/core/fields.js";
+import { buttons, badge, image } from "../../../puck-base/core/fields.js";
 import { PromoSection } from "./promo-section.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -16,28 +17,25 @@ const conf = {
     },
     badge,
     buttons,
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Summer Sale — Up to 50% Off",
     description: "Don't miss our biggest sale of the year. Shop now and save on your favorite items.",
     image: {
-      src: "https://dummyimage.com/800x600/f5f4f4/101010.png&text=Promo+Image",
+      src: "https://picsum.photos/seed/Promo%20Image/800/600",
       alt: "Promotional image"
     },
     imagePosition: "right",
     buttons: [
       {
         label: "Shop Now",
-        url: "#",
         variant: "default",
         size: "lg",
         icon: "none"
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: PromoSection
 };

package/dist/components/puck-block/cta-sections/promo-section-1/promo-section.d.ts

@@ -2,9 +2,6 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundBadgeProps } from "@/components/puck-base/badge";
 import { CompoundButtonProps } from "@/components/puck-base/button";
 export interface PromoSectionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading: string;
     description?: string;
     image?: {
@@ -14,5 +11,10 @@ export interface PromoSectionProps {
     imagePosition?: "left" | "right" | "background";
     buttons?: CompoundButtonProps[];
     badge?: CompoundBadgeProps;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const PromoSection: ({ padding, sectionStyle, backgroundColor, heading, description, image, imagePosition, buttons, badge, }: PromoSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PromoSection: ({ heading, description, image, imagePosition, buttons, badge, styles, }: PromoSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/cta-sections/promo-section-1/promo-section.js

@@ -5,98 +5,112 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { cn } from "../../../../utils/css-utils.js";
 const PromoSection = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
   image,
   imagePosition = "right",
   buttons,
-  badge
+  badge,
+  styles
 }) => {
   if (imagePosition === "background") {
-    return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[400px] items-center overflow-hidden rounded-2xl [&>span]:h-full [&>span]:w-full", children: [
-      (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-        CompoundImage,
-        {
-          src: image.src,
-          alt: image.alt ?? "",
-          className: "h-full w-full object-cover"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "bg-foreground/50 absolute inset-0" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex max-w-xl flex-col gap-6 p-8 md:p-16", children: [
-        badge && /* @__PURE__ */ jsx(
-          CompoundBadge,
-          {
-            label: badge.label,
-            variant: badge.variant,
-            url: badge.url
-          }
-        ),
-        /* @__PURE__ */ jsx("h2", { className: "text-background text-3xl font-bold tracking-tight md:text-5xl", children: heading }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-background/80 text-lg", children: description }),
-        Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
-          (button, index) => button.label ? /* @__PURE__ */ jsx(
-            CompoundButton,
+    return /* @__PURE__ */ jsx(
+      CompoundContainer,
+      {
+        padding: styles == null ? void 0 : styles.padding,
+        sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+        backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[400px] items-center overflow-hidden rounded-2xl [&>span]:h-full [&>span]:w-full", children: [
+          (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
+            CompoundImage,
             {
-              label: button.label,
-              url: button.url,
-              variant: button.variant,
-              size: button.size,
-              icon: button.icon
-            },
-            index
-          ) : null
-        ) })
-      ] })
-    ] }) });
+              src: image.src,
+              alt: image.alt ?? "",
+              className: "h-full w-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "bg-foreground/50 absolute inset-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex max-w-xl flex-col gap-6 p-8 md:p-16", children: [
+            badge && /* @__PURE__ */ jsx(
+              CompoundBadge,
+              {
+                label: badge.label,
+                variant: badge.variant,
+                url: badge.url
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { className: "text-background text-3xl font-bold tracking-tight md:text-5xl", children: heading }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-background/80 text-lg", children: description }),
+            Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
+              (button, index) => button.label ? /* @__PURE__ */ jsx(
+                CompoundButton,
+                {
+                  label: button.label,
+                  action: button.action,
+                  variant: button.variant,
+                  size: button.size,
+                  icon: button.icon
+                },
+                index
+              ) : null
+            ) })
+          ] })
+        ] })
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CompoundContainer,
     {
-      className: cn(
-        "grid grid-cols-1 items-center gap-10 lg:grid-cols-2",
-        imagePosition === "left" && "lg:[&>*:first-child]:order-2"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-          badge && /* @__PURE__ */ jsx(
-            CompoundBadge,
-            {
-              label: badge.label,
-              variant: badge.variant,
-              url: badge.url
-            }
+      padding: styles == null ? void 0 : styles.padding,
+      sectionStyle: styles == null ? void 0 : styles.sectionStyle,
+      backgroundColor: styles == null ? void 0 : styles.backgroundColor,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid grid-cols-1 items-center gap-10 lg:grid-cols-2",
+            imagePosition === "left" && "lg:[&>*:first-child]:order-2"
           ),
-          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-5xl", children: heading }),
-          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: description }),
-          Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
-            (button, index) => button.label ? /* @__PURE__ */ jsx(
-              CompoundButton,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+              badge && /* @__PURE__ */ jsx(
+                CompoundBadge,
+                {
+                  label: badge.label,
+                  variant: badge.variant,
+                  url: badge.url
+                }
+              ),
+              /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-5xl", children: heading }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-lg", children: description }),
+              Array.isArray(buttons) && buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-4", children: buttons.map(
+                (button, index) => button.label ? /* @__PURE__ */ jsx(
+                  CompoundButton,
+                  {
+                    label: button.label,
+                    action: button.action,
+                    variant: button.variant,
+                    size: button.size,
+                    icon: button.icon
+                  },
+                  index
+                ) : null
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3] overflow-hidden rounded-xl [&>span]:h-full [&>span]:w-full", children: (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
+              CompoundImage,
               {
-                label: button.label,
-                url: button.url,
-                variant: button.variant,
-                size: button.size,
-                icon: button.icon
-              },
-              index
-            ) : null
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "bg-muted aspect-[4/3] overflow-hidden rounded-xl [&>span]:h-full [&>span]:w-full", children: (image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-          CompoundImage,
-          {
-            src: image.src,
-            alt: image.alt ?? "",
-            className: "h-full w-full object-cover"
-          }
-        ) })
-      ]
+                src: image.src,
+                alt: image.alt ?? "",
+                className: "h-full w-full object-cover"
+              }
+            ) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   PromoSection

package/dist/components/puck-block/cta-sections/props.d.ts

@@ -0,0 +1,47 @@
+type CtaVariant = "banner-cta-1" | "cta-1" | "gradient-cta-1" | "newsletter-signup-1" | "promo-section-1";
+type CtaPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type CtaSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type CtaBadge = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "destructive" | "outline";
+};
+type CtaButton = {
+    label: string;
+    url?: string;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
+    size?: "default" | "sm" | "lg" | "icon";
+    icon?: string;
+};
+type CtaImage = {
+    src: string;
+    alt?: string;
+};
+type CtaSectionProps = {
+    variant?: CtaVariant;
+    badge?: CtaBadge;
+    heading?: string;
+    description?: string;
+    buttons?: CtaButton[];
+    alignContent?: "start" | "center" | "end";
+    spacing?: "tight" | "normal" | "relaxed";
+    layout?: "contained" | "full-bleed";
+    displayText?: string;
+    placeholder?: string;
+    image?: CtaImage;
+    imagePosition?: "left" | "right" | "background";
+    styles?: {
+        padding?: CtaPadding;
+        sectionStyle?: CtaSectionStyle;
+        backgroundColor?: string;
+        className?: string;
+        gradientFrom?: string;
+        gradientTo?: string;
+        backgroundCSS?: string;
+        textColor?: string;
+        visualVariant?: "primary" | "dark" | "gradient";
+    };
+};

package/dist/components/puck-block/faq-sections/accordion-1/accordion.d.ts

@@ -1,13 +1,15 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface AccordionProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     heading?: string;
     description?: string;
     items?: Array<{
         title: string;
         content: string;
     }>;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Accordion: ({ padding, sectionStyle, backgroundColor, heading, description, items, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ heading, description, items, styles, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;