dune-react 0.0.18 → 0.0.20

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

@@ -0,0 +1,110 @@
+import { FullscreenVideoHero, FullscreenVideoHeroDefaults } from "./component";
+import type { FullscreenVideoHeroProps } from "./component";
+export { FullscreenVideoHero, FullscreenVideoHeroDefaults };
+export type { FullscreenVideoHeroProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        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("../../../puck-core").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";
+            };
+        };
+        video: {
+            type: string;
+        };
+        image: {
+            type: "object";
+            objectFields: {
+                src: import("@puckeditor/core").Field<string>;
+                alt: {
+                    type: "text";
+                };
+            };
+        };
+    };
+    defaultProps: FullscreenVideoHeroProps;
+    render: (props: FullscreenVideoHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,20 @@
+import { FullscreenVideoHero, FullscreenVideoHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imageField } from "../../../puck-core/core/props/media.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    video: { type: "text" },
+    image: imageField
+  },
+  defaultProps: FullscreenVideoHeroDefaults,
+  render: FullscreenVideoHero
+};
+export {
+  FullscreenVideoHero,
+  FullscreenVideoHeroDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { HeroComponentProps } from "../props";
+export type GridExpandHeroProps = HeroComponentProps;
+export declare const GridExpandHero: (props: GridExpandHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const GridExpandHeroDefaults: GridExpandHeroProps;

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

@@ -0,0 +1,193 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useScroll, motion, useTransform } from "framer-motion";
+import { useMediaQuery } from "../../../../hooks/use-media-query.js";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const GridExpandHero = (props) => {
+  const {
+    heading,
+    description,
+    buttons = [],
+    images = [],
+    styles
+  } = {
+    ...GridExpandHeroDefaults,
+    ...props
+  };
+  const { textAlign = "left", gridRatio } = { ...GridExpandHeroDefaults.styles, ...styles };
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const { scrollYProgress } = useScroll();
+  const createTransform = (mobileValues, desktopValues) => useTransform(scrollYProgress, [0, 1], isMobile ? mobileValues : desktopValues);
+  const isCenter = textAlign === "center";
+  const resolvedGridRatio = gridRatio ?? (isCenter ? "32%_36%_32%" : "25%_50%_25%");
+  const [col1, col2, col3] = resolvedGridRatio.split("_");
+  const gridColsStyle = `${col1} ${col2} ${col3}`;
+  const leftContainerHeight = {
+    height: createTransform(["60vh", "100vh"], ["70vh", "100vh"])
+  };
+  const leftLeftImageGroup = {
+    x: createTransform(["0vw", "-25vw"], ["0vw", "-50vw"])
+  };
+  const leftCenterImageContainer = {
+    x: createTransform(["0vw", "-25vw"], ["0vw", "-50vw"]),
+    width: createTransform(["50vw", "100vw"], ["30vw", "100vw"]),
+    height: createTransform(["50vh", "100vh"], ["70vh", "100vh"])
+  };
+  const leftRightImage = {
+    x: createTransform(["0vw", "25vw"], ["0vw", "20vw"])
+  };
+  const centerLeftImageGroup = {
+    x: createTransform(["0vw", "-25vw"], ["0vw", "-32vw"])
+  };
+  const centerCenterImageContainer = {
+    x: createTransform(["0vw", "-25vw"], ["0vw", "-32vw"]),
+    width: createTransform(["50vw", "100vw"], ["36vw", "100vw"]),
+    height: createTransform(["60vh", "100vh"], ["80vh", "100vh"])
+  };
+  const centerRightImageGroup = {
+    x: createTransform(["0vw", "25vw"], ["0vw", "32vw"])
+  };
+  if (isCenter) {
+    return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative h-[250vh]", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-lg text-center", children: [
+        /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+        /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+      ] }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "z-10 grid w-full grid-flow-col content-center items-center justify-center",
+          style: {
+            gridTemplateColumns: gridColsStyle,
+            height: isMobile ? "60vh" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                className: "grid grid-flow-col grid-cols-1 items-center justify-items-end gap-4 justify-self-end px-4",
+                style: centerLeftImageGroup,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[1] }) }),
+                    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[2] }) })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(motion.div, { className: "relative", style: centerCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[3] }) }),
+            /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                className: "grid grid-flow-col items-center justify-items-start gap-4 justify-self-start px-4",
+                style: centerRightImageGroup,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "relative grid w-[40vw] grid-cols-1 grid-rows-[auto_auto] gap-4 self-center md:w-[18vw]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[4] }) }),
+                    /* @__PURE__ */ jsx("div", { className: "relative w-[40vw] sm:w-auto", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[5] }) })
+                  ] }),
+                  images[6] && /* @__PURE__ */ jsx("div", { className: "relative hidden md:block md:w-[25vw] lg:w-[20vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[6] }) })
+                ]
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { id: "relume", className: "relative h-[250vh]", children: [
+    /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg", children: [
+      /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+      /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+      /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "z-10 grid w-full grid-flow-col justify-center",
+        style: {
+          gridTemplateColumns: gridColsStyle,
+          ...leftContainerHeight
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              className: "grid grid-flow-col grid-cols-1 justify-items-end gap-4 justify-self-end px-4",
+              style: leftLeftImageGroup,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "relative top-[5%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[2/3] w-full object-cover", ...images[0] }) }),
+                /* @__PURE__ */ jsxs("div", { className: "relative top-[-5%] flex flex-col gap-4 self-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[1] }) }),
+                  /* @__PURE__ */ jsx("div", { className: "relative w-[30vw] flex-none md:w-[15vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[2] }) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "relative top-[15%] hidden w-[40vw] sm:w-[25vw] md:block lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-square w-full object-cover", ...images[3] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(motion.div, { className: "relative", style: leftCenterImageContainer, children: /* @__PURE__ */ jsx(CompoundImage, { className: "size-full object-cover", ...images[4] }) }),
+          /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              className: "grid grid-flow-col grid-cols-1 gap-4 justify-self-start px-4",
+              style: leftRightImage,
+              children: /* @__PURE__ */ jsx("div", { className: "relative top-[5%] w-[40vw] md:w-[25vw] lg:w-[22vw]", children: /* @__PURE__ */ jsx(CompoundImage, { className: "aspect-[3/4] w-full object-cover", ...images[5] }) })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+  ] });
+};
+const GridExpandHeroDefaults = {
+  heading: "Long heading is what you see here in this header section",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
+  buttons: [
+    {
+      label: "Button"
+    },
+    {
+      label: "Button",
+      variant: "secondary"
+    }
+  ],
+  styles: {
+    textAlign: "left",
+    gridRatio: "25%_50%_25%"
+  },
+  images: [
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 3"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 4"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 5"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 6"
+    }
+  ]
+};
+export {
+  GridExpandHero,
+  GridExpandHeroDefaults
+};

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

@@ -0,0 +1,135 @@
+import { GridExpandHero, GridExpandHeroDefaults } from "./component";
+import type { GridExpandHeroProps } from "./component";
+export { GridExpandHero, GridExpandHeroDefaults };
+export type { GridExpandHeroProps };
+declare const conf: {
+    fields: {
+        heading: {
+            readonly type: "text";
+            readonly contentEditable: true;
+        };
+        description: {
+            readonly type: "textarea";
+            readonly contentEditable: true;
+        };
+        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("../../../puck-core").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";
+            };
+        };
+        images: {
+            readonly type: "array";
+            readonly max: 10;
+            readonly getItemSummary: (item: {
+                alt?: string;
+            }, index?: number) => string;
+            readonly arrayFields: {
+                readonly src: import("@puckeditor/core").Field<string>;
+                readonly alt: {
+                    type: "text";
+                };
+            };
+            readonly defaultItemProps: {
+                alt: string;
+                src: string;
+            };
+        };
+        styles: {
+            type: "object";
+            objectFields: {
+                textAlign: {
+                    readonly type: "radio";
+                    readonly label: "Text Align";
+                    readonly options: readonly [{
+                        readonly label: "Left";
+                        readonly value: "left";
+                    }, {
+                        readonly label: "Center";
+                        readonly value: "center";
+                    }];
+                };
+                gridRatio: {
+                    readonly type: "text";
+                    readonly label: "Grid Ratio";
+                };
+            };
+        };
+    };
+    defaultProps: GridExpandHeroProps;
+    render: (props: GridExpandHeroProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default conf;

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

@@ -0,0 +1,27 @@
+import { GridExpandHero, GridExpandHeroDefaults } from "./component.js";
+import { descriptionField, headingField } from "../../../puck-core/core/props/content.js";
+import { buttonsField } from "../../../puck-core/core/props/interactive.js";
+import { imagesField } from "../../../puck-core/core/props/media.js";
+import { heroStyleFields } from "../props.js";
+const conf = {
+  fields: {
+    heading: headingField,
+    description: descriptionField,
+    buttons: buttonsField,
+    images: imagesField,
+    styles: {
+      type: "object",
+      objectFields: {
+        textAlign: heroStyleFields.textAlign,
+        gridRatio: heroStyleFields.gridRatio
+      }
+    }
+  },
+  defaultProps: GridExpandHeroDefaults,
+  render: GridExpandHero
+};
+export {
+  GridExpandHero,
+  GridExpandHeroDefaults,
+  conf as default
+};

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

@@ -0,0 +1,4 @@
+import type { HeroComponentProps } from "../props";
+export type HorizontalMarqueeHeroProps = HeroComponentProps;
+export declare const HorizontalMarqueeHero: (props: HorizontalMarqueeHeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalMarqueeHeroDefaults: HorizontalMarqueeHeroProps;

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

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CompoundButton } from "../../../puck-base/button.js";
+import { CompoundImage } from "../../../puck-base/image.js";
+const HorizontalMarqueeHero = (props) => {
+  const { heading, description, buttons = [], images = [] } = {
+    ...HorizontalMarqueeHeroDefaults,
+    ...props
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      id: "relume",
+      className: "grid grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:grid-cols-2 lg:pt-0",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mx-[5%] sm:max-w-md md:justify-self-start lg:ml-[5vw] lg:mr-20 lg:justify-self-end", children: [
+          /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+          /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-wrap gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 overflow-hidden bg-background-secondary py-8 md:py-16 lg:h-screen", children: /* @__PURE__ */ jsxs("div", { className: "grid shrink-0 grid-cols-1 gap-y-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "ml-[-8.5%] grid w-full animate-marquee-horizontally auto-cols-fr grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  className: "absolute inset-0 size-full object-cover",
+                  src: image.src,
+                  alt: image.alt
+                }
+              )
+            },
+            imageIndex
+          )) }, index)) }),
+          /* @__PURE__ */ jsx("div", { className: "grid w-full animate-marquee-horizontally grid-cols-2 gap-4 self-center", children: [...new Array(2)].map((_e, index) => /* @__PURE__ */ jsx("div", { className: "grid w-full grid-flow-col gap-4", children: images.map((image, imageIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "relative w-[60vw] pt-[75%] sm:w-[18rem] md:w-[26rem]",
+              children: /* @__PURE__ */ jsx(
+                CompoundImage,
+                {
+                  className: "absolute inset-0 size-full object-cover",
+                  src: image.src,
+                  alt: image.alt
+                }
+              )
+            },
+            imageIndex
+          )) }, index)) })
+        ] }) })
+      ]
+    }
+  );
+};
+const HorizontalMarqueeHeroDefaults = {
+  heading: "Medium length hero heading goes here",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
+  buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
+  images: [
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 1"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 2"
+    },
+    {
+      src: "https://picsum.photos/seed/hero-square/1200/1200",
+      alt: "Relume placeholder image 3"
+    }
+  ]
+};
+export {
+  HorizontalMarqueeHero,
+  HorizontalMarqueeHeroDefaults
+};