dune-react 0.0.9 → 0.0.11

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

@@ -4,43 +4,54 @@ import { useState } from "react";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 const Accordion = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   heading,
   description,
-  items = []
+  items = [],
+  styles
 }) => {
   const [openIndex, setOpenIndex] = useState(null);
-  return /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
-      heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "divide-border max-w-3xl divide-y", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setOpenIndex(openIndex === i ? null : i),
-          className: "flex w-full items-center justify-between py-4 text-left",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: item.title }),
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "text-muted-foreground transition-transform",
-                  openIndex === i && "rotate-45"
-                ),
-                children: "+"
-              }
-            )
-          ]
-        }
-      ),
-      openIndex === i && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground pb-4 leading-relaxed", children: item.content })
-    ] }, i)) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    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: "mb-12 max-w-2xl", children: [
+          heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "divide-border max-w-3xl divide-y", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setOpenIndex(openIndex === i ? null : i);
+              },
+              style: { pointerEvents: "auto" },
+              className: "flex w-full items-center justify-between py-4 text-left cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", style: { pointerEvents: "none" }, children: item.title }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-muted-foreground transition-transform",
+                      openIndex === i && "rotate-45"
+                    ),
+                    style: { pointerEvents: "none" },
+                    children: "+"
+                  }
+                )
+              ]
+            }
+          ),
+          openIndex === i && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground pb-4 leading-relaxed", children: item.content })
+        ] }, i)) })
+      ]
+    }
+  );
 };
 export {
   Accordion

package/dist/components/puck-block/faq-sections/accordion-1/index.js

@@ -1,5 +1,5 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding } from "../../../puck-base/core/fields.js";
 import { Accordion } from "./accordion.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -11,9 +11,7 @@ const conf = {
       arrayFields: { title: { type: "text" }, content: { type: "textarea" } },
       defaultItemProps: { title: "Question?", content: "Answer here." }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Frequently Asked Questions",
@@ -32,7 +30,7 @@ const conf = {
         content: "Yes, you can cancel your subscription at any time."
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Accordion
 };

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

@@ -1,15 +1,17 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 export interface FaqProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
     layout?: "single-col" | "two-col";
-    type?: "single" | "multiple";
-    collapsible?: "true" | "false";
-    faqs: {
+    expandMode?: "single" | "multiple";
+    collapsible?: boolean;
+    items: {
         question: string;
         answer: string;
     }[];
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Faq: ({ padding, sectionStyle, backgroundColor, layout, badge, heading, description, buttons, type, collapsible, faqs, }: FaqProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Faq: ({ layout, badge, heading, description, buttons, expandMode, collapsible, items, styles, }: FaqProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/faq-sections/faq-1/faq.js

@@ -5,58 +5,64 @@ import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "..
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 const Faq = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
   layout = "two-col",
   badge,
   heading,
   description,
   buttons,
-  type = "single",
-  collapsible = "true",
-  faqs
-}) => /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs(
-  "div",
+  expandMode = "single",
+  collapsible = true,
+  items,
+  styles
+}) => /* @__PURE__ */ jsx(
+  CompoundContainer,
   {
-    className: cn("grid gap-10", {
-      "items-center lg:grid-cols-1": layout === "single-col",
-      "lg:grid-cols-2": layout === "two-col"
-    }),
-    children: [
-      /* @__PURE__ */ jsx(
-        CompoundContent,
-        {
-          badge,
-          heading,
-          description,
-          buttons,
-          alignContent: layout === "single-col" ? "center" : "start"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Accordion,
-        {
-          type,
-          collapsible: collapsible === "true",
-          className: "w-full",
-          children: faqs.map((faq, index) => /* @__PURE__ */ jsxs(
-            AccordionItem,
+    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 gap-10", {
+          "items-center lg:grid-cols-1": layout === "single-col",
+          "lg:grid-cols-2": layout === "two-col"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(
+            CompoundContent,
             {
-              value: "index-" + index,
-              ref: registerOverlayPortal,
-              children: [
-                /* @__PURE__ */ jsx(AccordionTrigger, { children: faq.question }),
-                /* @__PURE__ */ jsx(AccordionContent, { children: faq.answer })
-              ]
-            },
-            index
-          ))
-        }
-      )
-    ]
+              badge,
+              heading,
+              description,
+              buttons,
+              alignContent: layout === "single-col" ? "center" : "start"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Accordion,
+            {
+              type: expandMode,
+              collapsible,
+              className: "w-full",
+              children: items.map((faq, index) => /* @__PURE__ */ jsxs(
+                AccordionItem,
+                {
+                  value: "index-" + index,
+                  ref: registerOverlayPortal,
+                  children: [
+                    /* @__PURE__ */ jsx(AccordionTrigger, { children: faq.question }),
+                    /* @__PURE__ */ jsx(AccordionContent, { children: faq.answer })
+                  ]
+                },
+                index
+              ))
+            }
+          )
+        ]
+      }
+    )
   }
-) });
+);
 export {
   Faq
 };

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

@@ -1,9 +1,10 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, contentFields } from "../../../puck-base/core/fields.js";
+import { contentFields } from "../../../puck-base/core/fields.js";
 import { Faq } from "./faq.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
-    type: {
+    expandMode: {
       type: "radio",
       label: "answer display",
       options: [
@@ -12,15 +13,14 @@ const conf = {
       ]
     },
     collapsible: {
-      // TODO: would be good to have boolean values
       type: "radio",
       label: "can close answers",
       options: [
-        { label: "yes", value: "true" },
-        { label: "no", value: "false" }
+        { label: "yes", value: true },
+        { label: "no", value: false }
       ]
     },
-    faqs: {
+    items: {
       type: "array",
       max: 20,
       getItemSummary: (item, index = 0) => {
@@ -45,9 +45,7 @@ const conf = {
         { label: "two Column", value: "two-col" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     badge: {
@@ -64,19 +62,19 @@ const conf = {
         variant: "secondary"
       }
     ],
-    type: "single",
-    collapsible: "true",
-    faqs: [
+    expandMode: "single",
+    collapsible: true,
+    items: [
       {
         question: "Question",
         answer: "Answer"
       }
     ],
     layout: "two-col",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   resolveFields: (data, params) => {
-    if (data.props.type === "multiple") {
+    if (data.props.expandMode === "multiple") {
       const { collapsible, ...newFields } = params.fields;
       return newFields;
     }

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

@@ -9,8 +9,10 @@ export interface Faq2Props {
     items?: Faq2Item[];
     image?: CompoundImageProps;
     imagePosition?: "left" | "right";
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
 }
-export declare const Faq2: ({ heading, items, image, imagePosition, padding, sectionStyle, backgroundColor, }: Faq2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Faq2: ({ heading, items, image, imagePosition, styles, }: Faq2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/faq-sections/faq-2/faq-2.js

@@ -8,9 +8,7 @@ const Faq2 = ({
   items = [],
   image,
   imagePosition = "right",
-  padding,
-  sectionStyle,
-  backgroundColor
+  styles
 }) => {
   const imageCol = /* @__PURE__ */ jsx("div", { className: "hidden lg:block lg:sticky lg:top-8 aspect-square overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsx(
     CompoundImage,
@@ -35,9 +33,9 @@ const Faq2 = ({
   return /* @__PURE__ */ jsx(
     CompoundContainer,
     {
-      padding,
-      sectionStyle,
-      backgroundColor,
+      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: "flex flex-col gap-10", children: [
         heading && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("h2", { className: "text-foreground font-serif text-3xl font-semibold tracking-tight md:text-4xl lg:text-5xl", children: heading }) }),
         /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-12 lg:grid-cols-2 lg:items-start lg:gap-16", children: imagePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/puck-block/faq-sections/faq-2/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image1x1Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image1x1Placeholder, image } from "../../../puck-base/core/fields.js";
 import { Faq2 } from "./faq-2.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const defaultItems = [
   {
     question: "What's included in a session?",
@@ -44,16 +45,14 @@ const conf = {
         { label: "Right", value: "right" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Questions about getting started",
     items: defaultItems,
     image: image1x1Placeholder,
     imagePosition: "right",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Faq2
 };

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

@@ -0,0 +1,30 @@
+type FaqVariant = "accordion-1" | "faq-1" | "faq-2";
+type FaqPadding = {
+    top?: "none" | "small" | "medium" | "large";
+    bottom?: "none" | "small" | "medium" | "large";
+};
+type FaqSectionStyle = "default" | "dark" | "muted" | "inverted" | "custom";
+type FaqImage = {
+    src: string;
+    alt?: string;
+};
+type FaqItem = {
+    question: string;
+    answer: string;
+};
+type FaqSectionProps = {
+    variant?: FaqVariant;
+    heading?: string;
+    description?: string;
+    items?: FaqItem[];
+    layout?: "single-col" | "two-col";
+    expandMode?: "single" | "multiple";
+    collapsible?: boolean;
+    image?: FaqImage;
+    styles?: {
+        padding?: FaqPadding;
+        sectionStyle?: FaqSectionStyle;
+        backgroundColor?: string;
+        imagePosition?: "left" | "right";
+    };
+};

package/dist/components/puck-block/feature-sections/bento-1/bento.d.ts

@@ -2,9 +2,11 @@ import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundContentProps } from "@/components/puck-base/content";
 import { CompoundCardProps } from "@/components/puck-base/card";
 export interface BentoProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     cards?: CompoundCardProps[];
 }
-export declare const Bento: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, cards, }: BentoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Bento: ({ styles, badge, heading, description, buttons, cards, }: BentoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/bento-1/bento.js

@@ -4,16 +4,14 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundContent } from "../../../puck-base/content.js";
 import { CompoundCard } from "../../../puck-base/card.js";
 const Bento = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   badge,
   heading,
   description,
   buttons,
   cards = []
 }) => {
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+  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: "flex flex-col gap-10", children: [
     /* @__PURE__ */ jsx(
       CompoundContent,
       {

package/dist/components/puck-block/feature-sections/bento-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, backgroundColor, sectionStyle, padding, cards, contentFields } from "../../../puck-base/core/fields.js";
+import { cards, contentFields } from "../../../puck-base/core/fields.js";
 import { Bento } from "./bento.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -8,9 +9,7 @@ const conf = {
       min: 1,
       max: 4
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     badge: {
@@ -25,7 +24,7 @@ const conf = {
       ...cards.defaultItemProps,
       heading: `Card ${index + 1}`
     })),
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: Bento
 };

package/dist/components/puck-block/feature-sections/feature-cards-1/feature-cards.d.ts

@@ -2,10 +2,12 @@ import { CompoundContentProps } from "@/components/puck-base/content";
 import { CompoundContainerProps } from "@/components/puck-base/container";
 import { CompoundArticleCardProps } from "@/components/puck-base/article-card";
 export interface FeatureCardsProps extends CompoundContentProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     columns?: 1 | 2 | 3;
     cards?: CompoundArticleCardProps[];
 }
-export declare const FeatureCards: ({ padding, sectionStyle, backgroundColor, badge, heading, description, buttons, columns, cards, alignContent, className, }: FeatureCardsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureCards: ({ styles, badge, heading, description, buttons, columns, cards, alignContent, className, }: FeatureCardsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/feature-cards-1/feature-cards.js

@@ -4,9 +4,7 @@ import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundArticleCard } from "../../../puck-base/article-card.js";
 import { cn } from "../../../../utils/css-utils.js";
 const FeatureCards = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   badge,
   heading,
   description,
@@ -16,7 +14,7 @@ const FeatureCards = ({
   alignContent = "start",
   className
 }) => {
-  return /* @__PURE__ */ jsx(CompoundContainer, { padding, sectionStyle, backgroundColor, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
+  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, className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-10", children: [
     /* @__PURE__ */ jsx(
       CompoundContent,
       {

package/dist/components/puck-block/feature-sections/feature-cards-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, button, image, contentFields } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, button, image, contentFields } from "../../../puck-base/core/fields.js";
 import { FeatureCards } from "./feature-cards.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     ...contentFields,
@@ -35,16 +36,13 @@ const conf = {
         description: "Card description goes here.",
         button: {
           label: "",
-          url: "",
           variant: "link",
           size: "default",
           icon: "move-right"
         }
       }
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Something new!",
@@ -64,14 +62,13 @@ const conf = {
         description: "Card description goes here.",
         button: {
           label: "",
-          url: "",
           variant: "link",
           size: "default",
           icon: "move-right"
         }
       }
     ],
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: FeatureCards
 };

package/dist/components/puck-block/feature-sections/feature-showcase-1/feature-showcase.d.ts

@@ -1,8 +1,10 @@
 import { CompoundContainerProps } from "@/components/puck-base/container";
 export interface FeatureShowcaseProps {
-    padding?: CompoundContainerProps["padding"];
-    sectionStyle?: CompoundContainerProps["sectionStyle"];
-    backgroundColor?: string;
+    styles?: {
+        padding?: CompoundContainerProps["padding"];
+        sectionStyle?: CompoundContainerProps["sectionStyle"];
+        backgroundColor?: string;
+    };
     heading?: string;
     description?: string;
     image?: {
@@ -16,4 +18,4 @@ export interface FeatureShowcaseProps {
     }>;
     layout?: "image-left" | "image-right";
 }
-export declare const FeatureShowcase: ({ padding, sectionStyle, backgroundColor, heading, description, image, features, layout, }: FeatureShowcaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FeatureShowcase: ({ styles, heading, description, image, features, layout, }: FeatureShowcaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/feature-sections/feature-showcase-1/feature-showcase.js

@@ -3,15 +3,13 @@ import { cn } from "../../../../utils/css-utils.js";
 import { CompoundContainer } from "../../../puck-base/container.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 const FeatureShowcase = ({
-  padding,
-  sectionStyle,
-  backgroundColor,
+  styles,
   heading,
   description,
   image,
   features = [],
   layout = "image-right"
-}) => /* @__PURE__ */ jsxs(CompoundContainer, { padding, sectionStyle, backgroundColor, children: [
+}) => /* @__PURE__ */ jsxs(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: "mb-12 max-w-2xl", children: [
     heading && /* @__PURE__ */ jsx("h2", { className: "text-foreground text-3xl font-bold tracking-tight md:text-4xl", children: heading }),
     description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description })

package/dist/components/puck-block/feature-sections/feature-showcase-1/index.js

@@ -1,5 +1,6 @@
-import { paddingDefaults, image16x9Placeholder, backgroundColor, sectionStyle, padding, image } from "../../../puck-base/core/fields.js";
+import { image16x9Placeholder, image } from "../../../puck-base/core/fields.js";
 import { FeatureShowcase } from "./feature-showcase.js";
+import { createStylesDefaults, createStylesField } from "../../../puck-base/core/styles.js";
 const conf = {
   fields: {
     heading: { type: "text", contentEditable: true },
@@ -25,9 +26,7 @@ const conf = {
         { label: "Image Right", value: "image-right" }
       ]
     },
-    padding,
-    sectionStyle,
-    backgroundColor
+    styles: createStylesField()
   },
   defaultProps: {
     heading: "Everything you need",
@@ -48,7 +47,7 @@ const conf = {
       }
     ],
     layout: "image-right",
-    padding: paddingDefaults
+    styles: createStylesDefaults()
   },
   render: FeatureShowcase
 };