dune-react 0.0.20 → 0.0.22

package/dist/components/puck-block/contact-sections/split-info-form/index.js

@@ -2,6 +2,7 @@ import { SplitInfoForm, SplitInfoFormDefaults } from "./split-info-form.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -15,7 +16,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        formType: contactStyleFields.formType
+        formType: contactStyleFields.formType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/split-info-form/split-info-form.js

@@ -3,18 +3,19 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "../../../shadcn/select.js";
 import { Input } from "../../../shadcn/input.js";
-import { Checkbox } from "../../../shadcn/checkbox.js";
 import { Label } from "../../../shadcn/label.js";
 import { Textarea } from "../../../shadcn/textarea.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { useContactForm } from "../use-contact-form.js";
 import { BiEnvelope, BiPhone, BiMap } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/bi/index.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const SplitInfoForm = (props) => {
   const { tagline, heading, description, email, phone, address, button, styles } = {
     ...SplitInfoFormDefaults,
     ...props
   };
-  const { formType = "simple" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, formType = "simple" } = styles ?? {};
   const { createSubmitHandler, submitting } = useContactForm();
   const [nameInput, setNameInput] = useState("");
   const [firstName, setFirstName] = useState("");
@@ -23,7 +24,6 @@ const SplitInfoForm = (props) => {
   const [phoneInput, setPhoneInput] = useState("");
   const [messageInput, setMessageInput] = useState("");
   const [topic, setTopic] = useState("");
-  const [acceptTerms, setAcceptTerms] = useState(false);
   const handleSubmit = createSubmitHandler(
     () => ({
       name: nameInput || `${firstName} ${lastName}`.trim() || "",
@@ -39,7 +39,6 @@ const SplitInfoForm = (props) => {
       setPhoneInput("");
       setMessageInput("");
       setTopic("");
-      setAcceptTerms(false);
     }
   );
   const renderSimpleFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -112,7 +111,7 @@ const SplitInfoForm = (props) => {
       )
     ] })
   ] });
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:grid-flow-col lg:gap-x-20 lg:gap-y-16", children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-y-12 md:grid-flow-row md:grid-cols-2 md:gap-x-12 lg:grid-flow-col lg:gap-x-20 lg:gap-y-16", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsxs("div", { className: "mb-6 md:mb-8", children: [
@@ -136,14 +135,6 @@ const SplitInfoForm = (props) => {
     ] }),
     /* @__PURE__ */ jsxs("form", { className: "grid grid-cols-1 grid-rows-[auto_auto] gap-6", onSubmit: handleSubmit, children: [
       formType === "advanced" ? renderAdvancedFields() : renderSimpleFields(),
-      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center space-x-2 text-sm md:mb-4", children: [
-        /* @__PURE__ */ jsx(Checkbox, { id: "terms", checked: acceptTerms, onCheckedChange: setAcceptTerms }),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: "terms", className: "cursor-pointer", children: [
-          "I accept the",
-          " ",
-          /* @__PURE__ */ jsx("a", { className: "text-link-primary underline", href: "#", children: "Terms" })
-        ] })
-      ] }),
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CompoundButton, { label: submitting ? "Submitting..." : button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon, disabled: submitting }) })
     ] })
   ] }) }) });

package/dist/components/puck-block/contact-sections/tab-locations/index.d.ts

@@ -55,6 +55,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 mediaType: {
                     readonly type: "radio";
                     readonly label: "Media Type";

package/dist/components/puck-block/contact-sections/tab-locations/index.js

@@ -2,6 +2,7 @@ import { TabLocations, TabLocationsDefaults } from "./tab-locations.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { contactStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -25,7 +26,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        mediaType: contactStyleFields.mediaType
+        mediaType: contactStyleFields.mediaType,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/contact-sections/tab-locations/tab-locations.js

@@ -2,14 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../../shadcn/tabs.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const TabLocations = (props) => {
   var _a;
   const { tagline, heading, description, tabs, styles } = {
     ...TabLocationsDefaults,
     ...props
   };
-  const { mediaType = "map" } = styles ?? {};
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
+  const { className: sectionClassName, style: sectionStyle, css, mediaType = "map" } = styles ?? {};
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-12 flex max-w-lg flex-col justify-start md:mb-18 lg:mb-20", children: [
       /* @__PURE__ */ jsx("p", { className: "mb-3 font-semibold md:mb-4", children: tagline }),
       /* @__PURE__ */ jsx("h2", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/contact-sections/use-contact-form.js

@@ -1,7 +1,7 @@
 "use client";
 import { useState } from "react";
 import { toast } from "sonner";
-import { useEditorContext } from "../../puck-core/editor-context.js";
+import { useEditorContext } from "../../puck-core/core/context/editor-context.js";
 import { submitFormLead } from "./api/form-leads.js";
 const EMPTY = { name: "", email: "", phone: "", message: "" };
 function useContactForm() {

package/dist/components/puck-block/cta-sections/feature-card-cta/feature-card-cta.js

@@ -2,14 +2,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../utils/css-utils.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 const FeatureCardCta = (props) => {
   const { featureSections = [], styles } = {
     ...FeatureCardCtaDefaults,
     ...props
   };
-  const { textAlign = "left" } = styles ?? {};
+  const { className: sectionClassName, style: sectionStyle, css, textAlign = "left" } = styles ?? {};
   const isCenter = textAlign === "center";
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:gap-x-16", children: featureSections.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn({ "text-center": isCenter }), children: [
+  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: "grid auto-cols-fr grid-cols-1 gap-x-8 gap-y-12 md:grid-cols-2 lg:gap-x-16", children: featureSections.map((feature, index) => /* @__PURE__ */ jsxs("div", { className: cn({ "text-center": isCenter }), children: [
     /* @__PURE__ */ jsx(
       CompoundImage,
       {

package/dist/components/puck-block/cta-sections/feature-card-cta/index.d.ts

@@ -41,7 +41,7 @@ declare const conf: {
                         readonly action: {
                             type: "custom";
                             label: string;
-                            render: typeof import("../../../puck-core").ActionField;
+                            render: typeof import("../../..").ActionField;
                         };
                         readonly variant: {
                             readonly type: "select";
@@ -113,6 +113,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textAlign: {
                     readonly type: "radio";
                     readonly label: "Text Align";

package/dist/components/puck-block/cta-sections/feature-card-cta/index.js

@@ -3,6 +3,7 @@ import { descriptionField, headingField } from "../../../puck-core/core/props/co
 import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     featureSections: {
@@ -20,7 +21,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        textAlign: ctaStyleFields.textAlign
+        textAlign: ctaStyleFields.textAlign,
+        ...sectionWrapperFields
       }
     }
   },

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

@@ -1,2 +1,4 @@
 export { default as FeatureCardCtaConf } from "./feature-card-cta";
 export { default as MouseTrackCtaConf } from "./mouse-track-cta";
+export { default as SideMediaCtaConf } from "./side-media-cta";
+export { default as TextBlockCtaConf } from "./text-block-cta";

package/dist/components/puck-block/cta-sections/mouse-track-cta/index.d.ts

@@ -17,7 +17,7 @@ declare const conf: {
                 action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 heading: {
                     readonly type: "text";
@@ -41,6 +41,28 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 listStyle: {
                     readonly type: "radio";
                     readonly label: "List Style";

package/dist/components/puck-block/cta-sections/mouse-track-cta/index.js

@@ -3,6 +3,7 @@ import { headingField } from "../../../puck-core/core/props/content.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { actionField } from "../../../puck-core/core/props/interactive.js";
 import { ctaStyleFields } from "../props.js";
+import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     tagline: { type: "text" },
@@ -21,7 +22,8 @@ const conf = {
       type: "object",
       label: "Styles",
       objectFields: {
-        listStyle: ctaStyleFields.listStyle
+        listStyle: ctaStyleFields.listStyle,
+        ...sectionWrapperFields
       }
     }
   },

package/dist/components/puck-block/cta-sections/mouse-track-cta/mouse-track-cta.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.js";
+import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { resolveActionUrl } from "../../../puck-core/core/props/interactive.js";
 const getDirection = (ev, obj) => {
   const { width: w, height: h, left, top } = obj.getBoundingClientRect();
@@ -25,11 +26,20 @@ const imageVariants = {
   right: { x: -50, transition: { type: "spring", duration: 1, bounce: 0 } }
 };
 const MouseTrackCta = (props) => {
-  const { tagline, hoverLinks = [], styles } = {
+  const {
+    tagline,
+    hoverLinks = [],
+    styles
+  } = {
     ...MouseTrackCtaDefaults,
     ...props
   };
-  const { listStyle = "center" } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    listStyle = "center"
+  } = styles ?? {};
   const isNumbered = listStyle === "numbered";
   const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
   const [hoveredIndex, setHoveredIndex] = useState(null);
@@ -46,7 +56,10 @@ const MouseTrackCta = (props) => {
       const containerRect = container.getBoundingClientRect();
       const leftBoundary = containerRect.left + containerRect.width / 2 - 100;
       const rightBoundary = containerRect.right / 2 + 100;
-      const clampedX = Math.max(leftBoundary, Math.min(rightBoundary, e.clientX));
+      const clampedX = Math.max(
+        leftBoundary,
+        Math.min(rightBoundary, e.clientX)
+      );
       const smoothFactor = 0.1;
       setCursorPosition((prev) => ({
         x: prev.x + (clampedX - prev.x) * smoothFactor,
@@ -63,64 +76,81 @@ const MouseTrackCta = (props) => {
   const translateBottomInverse = direction === "bottom" ? isNumbered ? 25 : 50 : 0;
   const translateLeftInverse = direction === "left" ? isNumbered ? -25 : -50 : 0;
   const translateRightInverse = direction === "right" ? isNumbered ? 25 : 50 : 0;
-  return /* @__PURE__ */ jsx("section", { id: "relume", className: "px-[5%] py-16 md:py-24 lg:py-28", onMouseMove: !isNumbered ? handleMouseMove : void 0, children: /* @__PURE__ */ jsxs("div", { className: cn("container", { "max-w-xl text-center": !isNumbered }), onMouseMove: isNumbered ? handleMouseMove : void 0, children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: "initial",
-        whileHover: direction,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: resolveActionUrl(link.action ?? { type: "none" }) ?? "#",
-            onMouseEnter: () => setHoveredIndex(index),
-            className: cn(
-              "flex items-center p-4 transition-colors duration-300",
-              isNumbered ? "relative justify-start border-b border-border-primary py-5 md:py-6" : "justify-center",
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
+    {
+      className: cn("isolate px-[5%] py-8 md:py-12 lg:py-14", sectionClassName),
+      style: sectionStyle,
+      css,
+      onMouseMove: !isNumbered ? handleMouseMove : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("container", { "max-w-xl text-center": !isNumbered }),
+          onMouseMove: isNumbered ? handleMouseMove : void 0,
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-6 font-semibold md:mb-8", children: tagline }),
+            /* @__PURE__ */ jsx(
+              motion.div,
               {
-                "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
-                "lg:text-black": hoveredIndex === index || hoveredIndex === null
-              }
-            ),
-            children: [
-              isNumbered && link.listNumber && /* @__PURE__ */ jsx("p", { className: "mr-6 whitespace-nowrap text-xl font-bold md:mr-8 md:text-2xl", children: link.listNumber }),
-              /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-9xl lg:text-10xl", children: link.heading }),
-              /* @__PURE__ */ jsx(
-                motion.div,
-                {
-                  className: cn(
-                    "pointer-events-none fixed inset-0 hidden size-[600px] lg:block",
-                    isNumbered ? "-z-10 ml-[300px]" : "-z-10",
-                    {
-                      "opacity-100": hoveredIndex === index,
-                      "opacity-0": hoveredIndex !== index
-                    }
-                  ),
-                  style: {
-                    translateX: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
-                    translateY: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                initial: "initial",
+                whileHover: direction,
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                children: hoverLinks.map((link, index) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: resolveActionUrl(link.action ?? { type: "none" }) ?? "#",
+                    onMouseEnter: () => setHoveredIndex(index),
+                    className: cn(
+                      "flex items-center p-4 transition-colors duration-300",
+                      isNumbered ? "relative justify-start border-b border-border-primary py-5 md:py-6" : "justify-center",
+                      {
+                        "lg:text-black/20": hoveredIndex !== index && hoveredIndex !== null,
+                        "lg:text-black": hoveredIndex === index || hoveredIndex === null
+                      }
+                    ),
+                    children: [
+                      isNumbered && link.listNumber && /* @__PURE__ */ jsx("p", { className: "mr-6 whitespace-nowrap text-xl font-bold md:mr-8 md:text-2xl", children: link.listNumber }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-9xl lg:text-10xl", children: link.heading }),
+                      /* @__PURE__ */ jsx(
+                        motion.div,
+                        {
+                          className: cn(
+                            "pointer-events-none fixed inset-0 hidden size-[600px] transition-opacity duration-300 lg:block",
+                            isNumbered ? "-z-10 ml-[300px]" : "-z-10",
+                            {
+                              "opacity-70": hoveredIndex === index,
+                              "opacity-0": hoveredIndex !== index
+                            }
+                          ),
+                          animate: {
+                            x: cursorPosition.x - 300 + translateLeftInverse + translateRightInverse,
+                            y: cursorPosition.y - 300 + translateTopInverse + translateBottomInverse
+                          },
+                          transition: { type: "spring", damping: 20, stiffness: 150, mass: 0.5 },
+                          children: /* @__PURE__ */ jsx(
+                            motion.img,
+                            {
+                              className: "size-full max-w-md",
+                              variants: imageVariants,
+                              src: link.image.src,
+                              alt: link.image.alt
+                            }
+                          )
+                        }
+                      )
+                    ]
                   },
-                  children: /* @__PURE__ */ jsx(
-                    motion.img,
-                    {
-                      className: "size-full max-w-md",
-                      variants: imageVariants,
-                      src: link.image.src,
-                      alt: link.image.alt
-                    }
-                  )
-                }
-              )
-            ]
-          },
-          index
-        ))
-      }
-    )
-  ] }) });
+                  index
+                ))
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
 };
 const MouseTrackCtaDefaults = {
   tagline: "Tagline",

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

@@ -8,6 +8,9 @@ import type { BaseImage } from "@/components/puck-core/core/props/media";
 import type { BaseButton } from "@/components/puck-core/core/props/interactive";
 export type { BaseImage, BaseButton };
 export interface CtaSectionStyles {
+    className?: string;
+    style?: React.CSSProperties;
+    css?: string;
     textLayout?: "left" | "center" | "twoColumn" | "inlineRow";
     textAlign?: "left" | "center";
     mediaPosition?: "left" | "right";
@@ -21,7 +24,6 @@ export interface CtaSectionBaseProps {
     heading: string;
     description: string;
     buttons: BaseButton[];
-    image: BaseImage;
     images: BaseImage[];
     video: string;
     inputPlaceholder: string;

package/dist/components/puck-block/cta-sections/props.js

@@ -1,4 +1,14 @@
 const ctaStyleFields = {
+  textLayout: {
+    type: "select",
+    label: "Text Layout",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Two Column", value: "twoColumn" },
+      { label: "Inline Row", value: "inlineRow" }
+    ]
+  },
   textAlign: {
     type: "radio",
     label: "Text Align",
@@ -7,6 +17,42 @@ const ctaStyleFields = {
       { label: "Center", value: "center" }
     ]
   },
+  mediaPosition: {
+    type: "radio",
+    label: "Media Position",
+    options: [
+      { label: "Left", value: "left" },
+      { label: "Right", value: "right" }
+    ]
+  },
+  bgMedia: {
+    type: "select",
+    label: "Background Media",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Fullscreen Image", value: "fullscreenImage" },
+      { label: "Fullscreen Video", value: "fullscreenVideo" },
+      { label: "Container Image", value: "containerImage" },
+      { label: "Container Video", value: "containerVideo" }
+    ]
+  },
+  bordered: {
+    type: "radio",
+    label: "Bordered",
+    options: [
+      { label: "Yes", value: "true" },
+      { label: "No", value: "false" }
+    ]
+  },
+  bottomContent: {
+    type: "select",
+    label: "Bottom Content",
+    options: [
+      { label: "None", value: "none" },
+      { label: "Image", value: "image" },
+      { label: "Logos", value: "logos" }
+    ]
+  },
   listStyle: {
     type: "radio",
     label: "List Style",