dune-react 0.0.40 → 0.0.42

package/dist/components/puck-block/header-sections/centered-navbar/index.js

@@ -6,7 +6,14 @@ import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } },
-    logo: mediaField,
+    logo: {
+      type: "object",
+      objectFields: {
+        src: mediaField.objectFields.src,
+        alt: { type: "text" },
+        url: { type: "text" }
+      }
+    },
     navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } },
     buttons: buttonsField,
     socialLinks: socialLinksField,

package/dist/components/puck-block/header-sections/drawer-navbar/index.d.ts

@@ -16,11 +16,14 @@ declare const conf: {
             };
         };
         logo: {
-            type: "object";
+            type: string;
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;
                 alt: {
-                    type: "text";
+                    type: string;
+                };
+                url: {
+                    type: string;
                 };
             };
         };

package/dist/components/puck-block/header-sections/drawer-navbar/index.js

@@ -4,7 +4,7 @@ import { socialLinksField, buttonsField } from "../../../puck-core/core/props/in
 import { headerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: { type: "object", objectFields: { src: mediaField.objectFields.src, alt: { type: "text" }, url: { type: "text" } } }, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: DrawerNavbarDefaults,
   render: DrawerNavbar
 };

package/dist/components/puck-block/header-sections/floating-bordered-navbar/index.d.ts

@@ -16,11 +16,14 @@ declare const conf: {
             };
         };
         logo: {
-            type: "object";
+            type: string;
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;
                 alt: {
-                    type: "text";
+                    type: string;
+                };
+                url: {
+                    type: string;
                 };
             };
         };

package/dist/components/puck-block/header-sections/floating-bordered-navbar/index.js

@@ -4,7 +4,7 @@ import { socialLinksField, buttonsField } from "../../../puck-core/core/props/in
 import { headerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: { type: "object", objectFields: { src: mediaField.objectFields.src, alt: { type: "text" }, url: { type: "text" } } }, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { position: headerStyleFields.position, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: FloatingBorderedNavbarDefaults,
   render: FloatingBorderedNavbar
 };

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/index.d.ts

@@ -16,11 +16,14 @@ declare const conf: {
             };
         };
         logo: {
-            type: "object";
+            type: string;
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;
                 alt: {
-                    type: "text";
+                    type: string;
+                };
+                url: {
+                    type: string;
                 };
             };
         };

package/dist/components/puck-block/header-sections/fullscreen-overlay-navbar/index.js

@@ -4,7 +4,7 @@ import { socialLinksField, buttonsField } from "../../../puck-core/core/props/in
 import { headerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: { type: "object", objectFields: { src: mediaField.objectFields.src, alt: { type: "text" }, url: { type: "text" } } }, navLinks: { type: "array", max: 8, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { overlayContent: headerStyleFields.overlayContent, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: FullscreenOverlayNavbarDefaults,
   render: FullscreenOverlayNavbar
 };

package/dist/components/puck-block/header-sections/mega-menu-navbar/index.d.ts

@@ -16,11 +16,14 @@ declare const conf: {
             };
         };
         logo: {
-            type: "object";
+            type: string;
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;
                 alt: {
-                    type: "text";
+                    type: string;
+                };
+                url: {
+                    type: string;
                 };
             };
         };

package/dist/components/puck-block/header-sections/mega-menu-navbar/index.js

@@ -4,7 +4,7 @@ import { socialLinksField, buttonsField } from "../../../puck-core/core/props/in
 import { headerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
-  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: mediaField, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
+  fields: { __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } }, logo: { type: "object", objectFields: { src: mediaField.objectFields.src, alt: { type: "text" }, url: { type: "text" } } }, navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } }, buttons: buttonsField, socialLinks: socialLinksField, styles: { type: "object", label: "Styles", objectFields: { megaMenuLayout: headerStyleFields.megaMenuLayout, showSocialLinks: headerStyleFields.showSocialLinks, ...sectionWrapperFields } } },
   defaultProps: MegaMenuNavbarDefaults,
   render: MegaMenuNavbar
 };

package/dist/components/puck-block/header-sections/standard-navbar/index.d.ts

@@ -16,11 +16,14 @@ declare const conf: {
             };
         };
         logo: {
-            type: "object";
+            type: string;
             objectFields: {
                 src: import("@puckeditor/core").Field<string>;
                 alt: {
-                    type: "text";
+                    type: string;
+                };
+                url: {
+                    type: string;
                 };
             };
         };

package/dist/components/puck-block/header-sections/standard-navbar/index.js

@@ -6,7 +6,14 @@ import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
   fields: {
     __metadata: { type: "object", ai: { instructions: "Layout metadata identifying this component as a header section. The type field must always be 'header'." }, objectFields: { type: { type: "text" } } },
-    logo: mediaField,
+    logo: {
+      type: "object",
+      objectFields: {
+        src: mediaField.objectFields.src,
+        alt: { type: "text" },
+        url: { type: "text" }
+      }
+    },
     navLinks: { type: "array", max: 6, getItemSummary: (item, i = 0) => item.title || `Link ${i + 1}`, arrayFields: { title: { type: "text" }, url: { type: "text" } } },
     buttons: buttonsField,
     socialLinks: socialLinksField,

package/dist/components/puck-block/hero-sections/carousel-hero/component.d.ts

@@ -1,9 +1,4 @@
 import type { HeroComponentProps } from "../props";
-type CarouselHeroExtra = {
-    carouselHeading: string;
-    carouselDescription: string;
-};
-export type CarouselHeroProps = HeroComponentProps<CarouselHeroExtra>;
+export type CarouselHeroProps = HeroComponentProps;
 export declare const CarouselHero: (props: CarouselHeroProps) => import("react/jsx-runtime").JSX.Element;
 export declare const CarouselHeroDefaults: CarouselHeroProps;
-export {};

package/dist/components/puck-block/hero-sections/carousel-hero/component.js

@@ -15,8 +15,6 @@ const CarouselHero = (props) => {
     description,
     buttons,
     medias,
-    carouselHeading,
-    carouselDescription,
     styles
   } = {
     ...CarouselHeroDefaults,
@@ -59,43 +57,35 @@ const CarouselHero = (props) => {
             index
           )) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative clear-both h-[300px] max-h-[60rem] min-h-screen w-full text-center", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "relative clear-both h-[30rem] w-full text-center md:h-[40rem] lg:h-[48rem]", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: { loop: true },
             plugins: [Autoplay({ delay: 5e3 })],
             setApi,
-            className: "relative left-0 right-0 z-10 block h-full overflow-hidden whitespace-nowrap pl-4",
+            className: "group relative left-0 right-0 z-10 block h-full overflow-hidden whitespace-nowrap",
             children: [
-              /* @__PURE__ */ jsx(CarouselContent, { children: medias.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative inline-block size-full whitespace-normal text-left align-top", children: /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col", children: [
-                /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx(
-                  CompoundMedia,
-                  {
-                    className: "absolute size-full object-cover",
-                    src: item.src,
-                    alt: item.alt
-                  }
-                ) }),
-                /* @__PURE__ */ jsx("div", { className: "relative bg-background-secondary px-6 pb-32 pt-6 sm:px-8 sm:pt-8", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
-                  /* @__PURE__ */ jsx("h6", { className: "mb-1 text-md font-bold leading-[1.4] md:text-xl", children: carouselHeading }),
-                  /* @__PURE__ */ jsx("p", { children: carouselDescription })
-                ] }) })
-              ] }) }) }, index)) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pl-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "absolute bottom-[52px] left-8 right-auto top-auto flex w-full items-start justify-start", children: medias.map((_, index) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    onClick: () => api == null ? void 0 : api.scrollTo(index),
-                    className: cn("mx-[3px] inline-block size-2 rounded-full", {
-                      "bg-black": current === index + 1,
-                      "bg-neutral-light": current !== index + 1
-                    })
-                  },
-                  index
-                )) }),
-                /* @__PURE__ */ jsx(CarouselPrevious, { className: "bottom-2 left-auto right-[5.5rem] top-auto size-12 bg-transparent md:right-24" }),
-                /* @__PURE__ */ jsx(CarouselNext, { className: "bottom-2 left-auto right-8 top-auto size-12 bg-transparent" })
-              ] })
+              /* @__PURE__ */ jsx(CarouselContent, { children: medias.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "pl-0", children: /* @__PURE__ */ jsx("div", { className: "relative h-[30rem] w-full md:h-[40rem] lg:h-[48rem]", children: /* @__PURE__ */ jsx(
+                CompoundMedia,
+                {
+                  className: "absolute inset-0 size-full object-cover",
+                  src: item.src,
+                  alt: item.alt
+                }
+              ) }) }, index)) }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-4 flex justify-center gap-1.5", children: medias.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => api == null ? void 0 : api.scrollTo(index),
+                  className: cn("size-2 rounded-full", {
+                    "bg-black": current === index + 1,
+                    "bg-neutral-light": current !== index + 1
+                  })
+                },
+                index
+              )) }),
+              /* @__PURE__ */ jsx(CarouselPrevious, { className: "left-3 top-1/2 size-10 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:opacity-100" }),
+              /* @__PURE__ */ jsx(CarouselNext, { className: "right-3 top-1/2 size-10 -translate-y-1/2 cursor-pointer opacity-0 transition-opacity group-hover:opacity-100" })
             ]
           }
         ) })
@@ -120,9 +110,7 @@ const CarouselHeroDefaults = {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
       alt: "Placeholder image 3"
     }
-  ],
-  carouselHeading: "Short heading goes here",
-  carouselDescription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+  ]
 };
 export {
   CarouselHero,

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

@@ -108,12 +108,6 @@ declare const conf: {
                 src: string;
             };
         };
-        carouselHeading: {
-            type: string;
-        };
-        carouselDescription: {
-            type: string;
-        };
     };
     defaultProps: CarouselHeroProps;
     render: (props: CarouselHeroProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/puck-block/hero-sections/carousel-hero/index.js

@@ -7,9 +7,7 @@ const conf = {
     heading: headingField,
     description: descriptionField,
     buttons: buttonsField,
-    medias: mediasField,
-    carouselHeading: { type: "text" },
-    carouselDescription: { type: "textarea" }
+    medias: mediasField
   },
   defaultProps: CarouselHeroDefaults,
   render: CarouselHero

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

@@ -17,12 +17,12 @@ export interface HeroSectionStyles {
     textPosition?: "left" | "top" | "top-left";
     mediaType?: "image" | "video" | "play";
     formType?: "none" | "email" | "search";
-    bordered?: boolean;
+    bordered?: string;
     imageCount?: "1" | "2" | "3";
     imageGridRatio?: string;
     overlapStyle?: "default" | "square" | "side-by-side";
     variant?: "centered" | "parallax-bg";
-    responsive?: boolean;
+    responsive?: string;
     gridRatio?: string;
 }
 export interface HeroSectionBaseProps {

package/dist/components/puck-block/hero-sections/three-image-parallax-hero/component.js

@@ -26,7 +26,7 @@ const ThreeImageParallaxHero = (props) => {
     style: sectionStyle,
     css,
     textAlign = "left",
-    responsive = false
+    responsive = "false"
   } = { ...ThreeImageParallaxHeroDefaults.styles, ...styles };
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
@@ -59,13 +59,13 @@ const ThreeImageParallaxHero = (props) => {
     isMobile ? ["26%", "-20%"] : isTablet ? ["8%", "-20%"] : ["12%", "-20%"]
   );
   const leftImageTranslate = {
-    y: responsive ? responsiveLeftY : fixedLeftY
+    y: responsive === "true" ? responsiveLeftY : fixedLeftY
   };
   const centerImageTranslate = {
-    y: responsive ? responsiveCenterY : fixedCenterY
+    y: responsive === "true" ? responsiveCenterY : fixedCenterY
   };
   const rightImageTranslate = {
-    y: responsive ? responsiveRightY : fixedRightY
+    y: responsive === "true" ? responsiveRightY : fixedRightY
   };
   return /* @__PURE__ */ jsx(
     SectionWrapper,
@@ -171,7 +171,7 @@ const ThreeImageParallaxHeroDefaults = {
   },
   styles: {
     textAlign: "left",
-    responsive: false
+    responsive: "false"
   }
 };
 export {

package/dist/components/puck-block/metrics-sections/center-media-stats/index.d.ts

@@ -31,6 +31,85 @@ declare const conf: {
                 };
             };
         };
+        buttons: {
+            readonly type: "array";
+            readonly max: 3;
+            readonly getItemSummary: (item: {
+                label?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly label: {
+                    readonly type: "text";
+                };
+                readonly action: {
+                    type: "custom";
+                    label: string;
+                    render: typeof import("../../..").ActionField;
+                };
+                readonly variant: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "primary";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "secondary";
+                        readonly value: "secondary";
+                    }, {
+                        readonly label: "outline";
+                        readonly value: "outline";
+                    }, {
+                        readonly label: "ghost";
+                        readonly value: "ghost";
+                    }, {
+                        readonly label: "link";
+                        readonly value: "link";
+                    }, {
+                        readonly label: "destructive";
+                        readonly value: "destructive";
+                    }];
+                };
+                readonly size: {
+                    readonly type: "select";
+                    readonly options: readonly [{
+                        readonly label: "default";
+                        readonly value: "default";
+                    }, {
+                        readonly label: "sm";
+                        readonly value: "sm";
+                    }, {
+                        readonly label: "lg";
+                        readonly value: "lg";
+                    }, {
+                        readonly label: "icon";
+                        readonly value: "icon";
+                    }];
+                };
+                readonly icon: {
+                    type: "custom";
+                    render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                };
+            };
+            readonly defaultItemProps: {
+                readonly label: "Button";
+                readonly action: {
+                    readonly type: "page";
+                    readonly pageUrl: "";
+                    readonly externalUrl: "";
+                    readonly openInNewTab: "false";
+                    readonly email: "";
+                    readonly subject: "";
+                    readonly phone: "";
+                    readonly sectionId: "";
+                    readonly downloadUrl: "";
+                };
+                readonly variant: "default";
+                readonly size: "default";
+                readonly icon: "none";
+            };
+            readonly ai: {
+                readonly instructions: "Buttons must use the same size";
+            };
+        };
         media: {
             type: "object";
             objectFields: {

package/dist/components/puck-block/metrics-sections/center-media-stats/index.js

@@ -1,5 +1,6 @@
 import { CenterMediaStats, CenterMediaStatsDefaults } from "./center-media-stats.js";
 import { headingField, descriptionField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { mediaField } from "../../../puck-core/core/props/media.js";
 import { metricsStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
@@ -17,6 +18,7 @@ const conf = {
         heading: headingField
       }
     },
+    buttons: buttonsField,
     media: mediaField,
     styles: {
       type: "object",

package/dist/components/puck-block/metrics-sections/header-stats-row/header-stats-row.js

@@ -75,7 +75,11 @@ const HeaderStatsRow = (props) => {
         /* @__PURE__ */ jsx("h2", { className: cn("mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", textColorClass), children: heading }),
         /* @__PURE__ */ jsx("p", { className: cn("md:text-md", textColorClass), children: description })
       ] }) }),
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-y-8 md:grid-cols-3 md:gap-x-8 lg:gap-x-12 lg:gap-y-16", children: stats.map((stat, index) => renderStat(stat, index)) })
+      /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-1 gap-y-8 md:gap-x-8 lg:gap-x-12 lg:gap-y-16", {
+        "md:grid-cols-2 lg:grid-cols-2": stats.length === 2,
+        "md:grid-cols-3 lg:grid-cols-3": stats.length === 3,
+        "md:grid-cols-2 lg:grid-cols-4": stats.length >= 4
+      }), children: stats.map((stat, index) => renderStat(stat, index)) })
     ] })
   ] });
 };
@@ -88,6 +92,7 @@ const HeaderStatsRowDefaults = {
     { label: "Button", variant: "link" }
   ],
   stats: [
+    { percentage: "30%", heading: "Short heading goes here" },
     { percentage: "30%", heading: "Short heading goes here" },
     { percentage: "30%", heading: "Short heading goes here" },
     { percentage: "30%", heading: "Short heading goes here" }

package/dist/components/puck-block/pricing-sections/pricing-card-grid/index.d.ts

@@ -36,6 +36,61 @@ declare const conf: {
                         type: string;
                     };
                 };
+                button: {
+                    readonly type: "object";
+                    readonly objectFields: {
+                        readonly label: {
+                            readonly type: "text";
+                        };
+                        readonly action: {
+                            type: "custom";
+                            label: string;
+                            render: typeof import("../../..").ActionField;
+                        };
+                        readonly variant: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "primary";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "secondary";
+                                readonly value: "secondary";
+                            }, {
+                                readonly label: "outline";
+                                readonly value: "outline";
+                            }, {
+                                readonly label: "ghost";
+                                readonly value: "ghost";
+                            }, {
+                                readonly label: "link";
+                                readonly value: "link";
+                            }, {
+                                readonly label: "destructive";
+                                readonly value: "destructive";
+                            }];
+                        };
+                        readonly size: {
+                            readonly type: "select";
+                            readonly options: readonly [{
+                                readonly label: "default";
+                                readonly value: "default";
+                            }, {
+                                readonly label: "sm";
+                                readonly value: "sm";
+                            }, {
+                                readonly label: "lg";
+                                readonly value: "lg";
+                            }, {
+                                readonly label: "icon";
+                                readonly value: "icon";
+                            }];
+                        };
+                        readonly icon: {
+                            type: "custom";
+                            render: typeof import("../../../puck-core/fields/icon-picker-field").IconPickerField;
+                        };
+                    };
+                };
             };
         };
         styles: {

package/dist/components/puck-block/pricing-sections/pricing-card-grid/index.js

@@ -1,5 +1,6 @@
 import { PricingCardGrid, PricingCardGridDefaults } from "./component.js";
 import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonField } from "../../../puck-core/core/props/interactive.js";
 import { pricingStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
 const conf = {
@@ -17,7 +18,8 @@ const conf = {
         features: {
           type: "array",
           arrayFields: { type: "text" }
-        }
+        },
+        button: buttonField
       }
     },
     styles: {

package/dist/components/puck-block/pricing-sections/pricing-comparison-table/component.js

@@ -21,9 +21,9 @@ const PricingComparisonTable = (props) => {
     className: sectionClassName,
     style: sectionStyle,
     css,
-    tabSwitching = false,
+    tabSwitching = "false",
     tableStyle = "border-separated",
-    bottomButtons = false
+    bottomButtons = "false"
   } = styles ?? {};
   const renderHeader = (plans) => /* @__PURE__ */ jsxs("div", { className: "sticky top-0 grid grid-cols-3 border-b border-border-primary bg-background-primary md:grid-cols-[1.5fr_1fr_1fr_1fr]", children: [
     /* @__PURE__ */ jsx("div", { className: "hidden md:block" }),
@@ -131,7 +131,7 @@ const PricingComparisonTable = (props) => {
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
         ] }),
-        tabSwitching && tabs ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue || "monthly", children: [
+        tabSwitching === "true" && tabs ? /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultTabValue || "monthly", children: [
           /* @__PURE__ */ jsx(TabsList, { className: "mx-auto mb-12 w-fit", children: tabs.map((tab, index) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.tabName }, index)) }),
           tabs.map((tab, index) => /* @__PURE__ */ jsxs(
             TabsContent,
@@ -141,7 +141,7 @@ const PricingComparisonTable = (props) => {
               children: [
                 renderHeader(tab.pricingPlans),
                 renderFeatures(),
-                bottomButtons && renderBottomButtons(tab.pricingPlans)
+                bottomButtons === "true" && renderBottomButtons(tab.pricingPlans)
               ]
             },
             index
@@ -149,7 +149,7 @@ const PricingComparisonTable = (props) => {
         ] }) : /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
           renderHeader(pricingPlans),
           renderFeatures(),
-          bottomButtons && renderBottomButtons(pricingPlans)
+          bottomButtons === "true" && renderBottomButtons(pricingPlans)
         ] })
       ] })
     }
@@ -210,9 +210,9 @@ const PricingComparisonTableDefaults = {
     }
   ],
   styles: {
-    tabSwitching: false,
+    tabSwitching: "false",
     tableStyle: "border-separated",
-    bottomButtons: false
+    bottomButtons: "false"
   }
 };
 export {