fragment-headless-sdk 1.0.6 → 2.1.0

package/dist/components/Announcement/AnnouncementButton.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { ButtonType } from "../../constants";
+import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
 export default function AnnouncementButton({ content, buttonHref, }) {
     // Don’t render if no button or explicitly None
     if (!content?.buttonText || content.buttonType === ButtonType.None)
@@ -11,16 +12,32 @@ export default function AnnouncementButton({ content, buttonHref, }) {
     // If you already have a boolean like `content.buttonLink` meaning "open in new tab",
     // keep using it; otherwise you can add one later.
     const openInNewTab = Boolean(content.buttonLink);
-    const style = content.buttonType === ButtonType.Text
+    const styling = content.styling;
+    const baseTextColor = resolveTokenByCategory(styling, "colors", "text") ||
+        resolveToken(styling, "textColor");
+    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
+        resolveToken(styling, "buttonColor");
+    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
+        resolveToken(styling, "buttonTextColor");
+    const baseStyle = content.buttonType === ButtonType.Text
         ? {
             textDecoration: "underline",
-            color: content.textColor,
+            color: baseTextColor,
         }
         : {
-            backgroundColor: content.buttonColor,
-            color: content.buttonTextColor,
+            backgroundColor: buttonBgColor,
+            color: buttonTextColor,
         };
-    return (React.createElement("a", { href: buttonHref, className: "whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", style: style, ...(openInNewTab
+    const style = mergeSlotStyles(baseStyle, styling, "announcementButton", "button");
+    const className = mergeSlotClasses("whitespace-nowrap rounded-md px-3 py-2 text-sm font-semibold no-underline hover:cursor-pointer hover:opacity-70", styling, "announcementButton", "button");
+    const attributes = mergeSlotAttributes(styling, "announcementButton", "button");
+    const ariaLabel = attributes && "aria-label" in attributes
+        ? attributes["aria-label"]
+        : content.buttonText;
+    if (attributes && "aria-label" in attributes) {
+        delete attributes["aria-label"];
+    }
+    return (React.createElement("a", { href: buttonHref, className: className, style: style, ...(openInNewTab
             ? { target: "_blank", rel: "noopener noreferrer" }
-            : {}), "aria-label": content.buttonText }, content.buttonText));
+            : {}), ...(attributes ?? {}), "aria-label": ariaLabel }, content.buttonText));
 }

package/dist/components/Announcement/CountdownTimer.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, } from "../../utils";
 export default function CountdownTimer({ content, }) {
     const [timeLeft, setTimeLeft] = useState({
         days: "00",
@@ -25,18 +26,36 @@ export default function CountdownTimer({ content, }) {
         const interval = setInterval(updateTimer, 1000);
         return () => clearInterval(interval);
     }, [content.counterEndDate]);
-    const renderBlock = (value, label) => (React.createElement("div", { className: "flex flex-col items-center" },
-        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: "w-5 h-6 rounded bg-black text-white text-base font-bold flex items-center justify-center", style: {
-                backgroundColor: content.counterBgColor || "#000000",
-                color: content.counterDigitColor || "#FFFFFF",
-            } }, digit)))),
-        React.createElement("span", { className: "mt-0.5 text-[10px]" }, label)));
-    return (React.createElement("div", { className: "flex items-center justify-center gap-1 p-2" },
+    const styling = content.styling;
+    const containerClass = mergeSlotClasses("flex items-center justify-center gap-1 p-2", styling, "countdownContainer");
+    const containerStyle = mergeSlotStyles(undefined, styling, "countdownContainer");
+    const containerAttributes = mergeSlotAttributes(styling, "countdownContainer");
+    const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
+    const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
+    const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
+    const digitClass = mergeSlotClasses("w-5 h-6 rounded bg-black text-white text-base font-bold flex items-center justify-center", styling, "countdownDigit");
+    const digitBgColor = resolveToken(styling, "counterBgColor", "#000000") || "#000000";
+    const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
+    const digitStyle = mergeSlotStyles({
+        backgroundColor: digitBgColor,
+        color: digitTextColor,
+    }, styling, "countdownDigit");
+    const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
+    const labelClass = mergeSlotClasses("mt-0.5 text-[10px]", styling, "countdownLabel");
+    const labelStyle = mergeSlotStyles(undefined, styling, "countdownLabel");
+    const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
+    const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
+    const separatorStyle = mergeSlotStyles(undefined, styling, "countdownSeparator");
+    const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
+    const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
+        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
+        React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
+    return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
         renderBlock(timeLeft.days, "Days"),
-        React.createElement("span", { className: "text-xl font-semibold -mt-4" }, ":"),
+        React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
         renderBlock(timeLeft.hours, "Hours"),
-        React.createElement("span", { className: "text-xl font-semibold -mt-4" }, ":"),
+        React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
         renderBlock(timeLeft.minutes, "Minutes"),
-        React.createElement("span", { className: "text-xl font-semibold -mt-4" }, ":"),
+        React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
         renderBlock(timeLeft.seconds, "Seconds")));
 }

package/dist/components/Announcement/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
-import { buildClickUrl, fireImpressionWhenVisible } from "../../utils";
+import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
@@ -16,26 +16,59 @@ export default function Announcement({ content, type, handleClose, }) {
         : undefined;
     if (!content)
         return null;
-    return (React.createElement("div", { ref: ref, className: "relative w-full", style: {
-            backgroundColor: content.bgColor,
-            color: content.textColor,
-        } },
+    const styling = content.styling;
+    const backgroundColor = resolveTokenByCategory(styling, "colors", "background") ||
+        resolveToken(styling, "bgColor");
+    const textColor = resolveTokenByCategory(styling, "colors", "text") ||
+        resolveToken(styling, "textColor");
+    const themeClasses = getThemeClasses(styling);
+    const rootClass = mergeSlotClasses(`relative w-full ${themeClasses}`, styling, "root");
+    const rootStyle = mergeSlotStyles({
+        backgroundColor,
+        color: textColor,
+    }, styling, "root");
+    const rootAttributes = mergeSlotAttributes(styling, "root");
+    const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]", styling, "inner", "wrapper");
+    const innerStyle = mergeSlotStyles(undefined, styling, "inner", "wrapper");
+    const innerAttributes = mergeSlotAttributes(styling, "inner", "wrapper");
+    const marqueeContainerClass = mergeSlotClasses("flex w-full flex-col md:flex-row items-center justify-between gap-2 md:gap-4 overflow-hidden md:pr-8", styling, "marqueeContainer");
+    const marqueeContainerStyle = mergeSlotStyles(undefined, styling, "marqueeContainer");
+    const marqueeContainerAttributes = mergeSlotAttributes(styling, "marqueeContainer");
+    const marqueeTextWrapperClass = mergeSlotClasses("w-full md:flex-1 overflow-hidden", styling, "marqueeTextWrapper");
+    const marqueeTextWrapperStyle = mergeSlotStyles(undefined, styling, "marqueeTextWrapper");
+    const marqueeTextWrapperAttributes = mergeSlotAttributes(styling, "marqueeTextWrapper");
+    const marqueeTextClass = mergeSlotClasses("whitespace-nowrap animate-marquee", styling, "marqueeText");
+    const marqueeTextStyle = mergeSlotStyles(undefined, styling, "marqueeText");
+    const marqueeTextAttributes = mergeSlotAttributes(styling, "marqueeText");
+    const marqueeContentClass = mergeSlotClasses("inline-block max-w-none text-base", styling, "marqueeContent");
+    const marqueeContentStyle = mergeSlotStyles(undefined, styling, "marqueeContent");
+    const marqueeContentAttributes = mergeSlotAttributes(styling, "marqueeContent");
+    const contentRowClass = mergeSlotClasses("flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full", styling, "contentRow");
+    const contentRowStyle = mergeSlotStyles(undefined, styling, "contentRow");
+    const contentRowAttributes = mergeSlotAttributes(styling, "contentRow");
+    const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
+    const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
+    const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
+    const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", styling, "closeButton");
+    const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
+        (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
+    const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
+    const closeButtonAttributes = mergeSlotAttributes(styling, "closeButton");
+    return (React.createElement("div", { ref: ref, className: rootClass, style: rootStyle, ...(rootAttributes ?? {}) },
         React.createElement(AnnouncementStyles, null),
-        React.createElement("div", { className: "relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]" },
-            type === AnnouncementType.Marquee ? (React.createElement("div", { className: "flex w-full flex-col md:flex-row items-center justify-between gap-2 md:gap-4 overflow-hidden md:pr-8" },
-                React.createElement("div", { className: "w-full md:flex-1 overflow-hidden" },
-                    React.createElement("div", { className: "whitespace-nowrap animate-marquee" },
-                        React.createElement("div", { className: "inline-block max-w-none text-base", dangerouslySetInnerHTML: {
+        React.createElement("div", { className: innerClass, style: innerStyle, ...(innerAttributes ?? {}) },
+            type === AnnouncementType.Marquee ? (React.createElement("div", { className: marqueeContainerClass, style: marqueeContainerStyle, ...(marqueeContainerAttributes ?? {}) },
+                React.createElement("div", { className: marqueeTextWrapperClass, style: marqueeTextWrapperStyle, ...(marqueeTextWrapperAttributes ?? {}) },
+                    React.createElement("div", { className: marqueeTextClass, style: marqueeTextStyle, ...(marqueeTextAttributes ?? {}) },
+                        React.createElement("div", { className: marqueeContentClass, style: marqueeContentStyle, ...(marqueeContentAttributes ?? {}), dangerouslySetInnerHTML: {
                                 __html: content.announcementHtml || "",
                             } }))),
-                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: signedButtonHref })))) : (React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full" },
-                React.createElement("div", { className: "max-w-none text-base font-semibold" },
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: signedButtonHref })))) : (React.createElement("div", { className: contentRowClass, style: contentRowStyle, ...(contentRowAttributes ?? {}) },
+                React.createElement("div", { className: announcementTextClass, style: announcementTextStyle, ...(announcementTextAttributes ?? {}) },
                     React.createElement("div", { dangerouslySetInnerHTML: {
                             __html: content.announcementHtml || "",
                         } })),
                 type === AnnouncementType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
                     content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: signedButtonHref || content.buttonLink || "#" }))))),
-            React.createElement("div", { onClick: handleClose, className: "absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", style: {
-                    color: content.textColor || "#000",
-                } }, "\u00D7"))));
+            React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) }, "\u00D7"))));
 }

package/dist/components/Hero/DesktopHero.d.ts

@@ -1,6 +1,14 @@
 import React from "react";
 import { IHeroContent } from "../../types";
-export default function DesktopHero({ buttonHref, content, }: {
+import { resolveHeroColors, resolveHeroTypography } from "../../utils/hero-resolvers";
+interface HeroViewProps {
     buttonHref?: string;
     content: IHeroContent;
-}): React.JSX.Element;
+    colors: ReturnType<typeof resolveHeroColors>;
+    contentWidthClass: string;
+    typography: ReturnType<typeof resolveHeroTypography>;
+    position: "left" | "center" | "right";
+    height: string;
+}
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, }: HeroViewProps): React.JSX.Element;
+export {};

package/dist/components/Hero/DesktopHero.js

@@ -1,14 +1,42 @@
 import React from "react";
-export default function DesktopHero({ buttonHref, content, }) {
-    return (React.createElement("div", { className: "relative h-[400px] gap-4 w-full" },
-        content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "absolute inset-0 z-0 object-cover w-full h-full" })),
-        React.createElement("div", { className: "relative z-10 mx-auto flex h-full max-w-screen-xl flex-col items-start justify-center px-10 text-left xl:px-4" },
-            React.createElement("div", { className: "w-2/5" },
-                content?.title && (React.createElement("h1", { className: "text-5xl font-bold leading-tight drop-shadow-xl", style: { color: content.titleColor || "#ffffff" } }, content.title)),
-                content?.description && (React.createElement("div", { className: "mt-4 text-2xl drop-shadow-lg prose", style: { color: content.textColor || undefined }, dangerouslySetInnerHTML: { __html: content.description } })),
+import { DEFAULT_CONTENT_WIDTH_CLASS, joinClassNames, renderText, } from "../../utils/hero-resolvers";
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, }) {
+    const getPositionClasses = () => {
+        switch (position) {
+            case "center":
+                return "items-center text-center";
+            case "right":
+                return "items-end text-right";
+            case "left":
+            default:
+                return "items-start text-left";
+        }
+    };
+    return (React.createElement("div", { className: `relative ${height} gap-4 w-full`, style: { backgroundColor: colors.background } },
+        content?.videoUrl ? (React.createElement("video", { src: content.videoUrl, autoPlay: true, muted: true, loop: true, playsInline: true, className: "absolute inset-0 z-0 object-cover w-full h-full" })) : (
+        /* Image Background */
+        content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "absolute inset-0 z-0 object-cover w-full h-full" }))),
+        React.createElement("div", { className: `relative z-10 mx-auto flex h-full max-w-screen-xl flex-col justify-center px-10 ${getPositionClasses()} xl:px-4` },
+            React.createElement("div", { className: joinClassNames("max-w-full", contentWidthClass || DEFAULT_CONTENT_WIDTH_CLASS) },
+                renderText({
+                    fontSize: typography.title.fontSize,
+                    lineHeight: typography.title.lineHeight,
+                    text: content?.title,
+                    className: "mt-4",
+                    color: colors.title,
+                    font: typography.title.font,
+                }),
+                renderText({
+                    fontSize: typography.description.fontSize,
+                    lineHeight: typography.description.lineHeight,
+                    text: content?.description,
+                    className: "mt-4",
+                    color: colors.text,
+                    font: typography.description.font,
+                }),
                 content?.buttonLink && content?.buttonText && (React.createElement("a", { href: buttonHref, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
-                    React.createElement("div", { className: "mt-6 rounded-md px-8 py-2 text-2xl font-semibold drop-shadow-lg transition-all duration-200 hover:bg-gray-800 inline-block", style: {
-                            color: content.buttonTextColor ?? undefined,
-                            backgroundColor: content.buttonColor ?? undefined,
+                    React.createElement("div", { className: "mt-6 inline-block rounded-md px-8 py-2 text-2xl font-semibold drop-shadow-lg transition-all duration-200 hover:opacity-90", style: {
+                            color: colors.buttonText,
+                            backgroundColor: colors.buttonBackground,
                         } }, content.buttonText)))))));
 }

package/dist/components/Hero/MobileHero.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
 import { IHeroContent } from "../../types";
-export default function MobileHero({ buttonHref, content, }: {
+import { resolveHeroColors, resolveHeroTypography } from "../../utils/hero-resolvers";
+interface MobileHeroProps {
     buttonHref?: string;
     content: IHeroContent;
-}): React.JSX.Element;
+    colors: ReturnType<typeof resolveHeroColors>;
+    typography: ReturnType<typeof resolveHeroTypography>;
+}
+export default function MobileHero({ buttonHref, content, colors, typography, }: MobileHeroProps): React.JSX.Element;
+export {};

package/dist/components/Hero/MobileHero.js

@@ -1,13 +1,30 @@
 import React from "react";
-export default function MobileHero({ buttonHref, content, }) {
-    return (React.createElement("div", { className: "relative z-10 mx-auto gap-4 flex h-full max-w-screen-md flex-col items-center justify-center py-6 text-center" },
-        content?.title && (React.createElement("h1", { className: "text-3xl font-bold drop-shadow-xl px-4", style: { color: content.titleColor || undefined } }, content.title)),
-        (content?.mobileImageUrl || content?.imageUrl) && (React.createElement("div", { className: "w-full" },
-            React.createElement("img", { src: content.mobileImageUrl || content.imageUrl || "", alt: content.title || "Hero", className: "h-full w-full object-cover" }))),
-        content?.description && (React.createElement("div", { className: "px-4 text-2xl drop-shadow-lg prose", style: { color: content.textColor || undefined }, dangerouslySetInnerHTML: { __html: content.description } })),
+import { renderText, } from "../../utils/hero-resolvers";
+export default function MobileHero({ buttonHref, content, colors, typography, }) {
+    return (React.createElement("div", { className: "relative z-10 mx-auto gap-4 flex max-w-screen-md flex-col items-center justify-center py-6 text-center", style: { backgroundColor: colors.background } },
+        renderText({
+            fontSize: typography.title.fontSize,
+            lineHeight: typography.title.lineHeight,
+            text: content?.title,
+            className: "px-4 drop-shadow-xl text-center",
+            color: colors.title,
+            font: typography.title.font,
+        }),
+        content?.videoUrl ? (React.createElement("div", { className: "w-full" },
+            React.createElement("video", { src: content.videoUrl, autoPlay: true, muted: true, loop: true, playsInline: true, className: "h-full w-full object-cover" }))) : content?.mobileImageUrl ? (React.createElement("div", { className: "w-full" },
+            React.createElement("img", { src: content.mobileImageUrl, alt: content.title || "Hero", className: "h-full w-full object-cover" }))) : content?.imageUrl ? (React.createElement("div", { className: "w-full" },
+            React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "h-full w-full object-cover" }))) : null,
+        renderText({
+            fontSize: typography.description.fontSize,
+            lineHeight: typography.description.lineHeight,
+            text: content?.description,
+            className: "px-4 drop-shadow-lg text-center mt-4",
+            color: colors.text,
+            font: typography.description.font,
+        }),
         content?.buttonLink && content?.buttonText && (React.createElement("a", { href: buttonHref, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },
-            React.createElement("div", { className: "mb-2 rounded-md px-6 py-2 text-lg font-semibold drop-shadow-lg transition-all duration-200 hover:bg-gray-800", style: {
-                    color: content.buttonTextColor ?? undefined,
-                    backgroundColor: content.buttonColor ?? undefined,
+            React.createElement("div", { className: "mb-2 rounded-md px-6 py-2 text-lg font-semibold drop-shadow-lg transition-all duration-200 hover:opacity-90", style: {
+                    color: colors.buttonText,
+                    backgroundColor: colors.buttonBackground,
                 } }, content.buttonText)))));
 }

package/dist/components/Hero/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from "react";
 import { buildClickUrl, fireImpressionWhenVisible } from "../../utils";
+import { resolveContentWidthClass, resolveHeight, resolveHeroColors, resolveHeroTypography, resolvePosition, } from "../../utils/hero-resolvers";
 import DesktopHero from "./DesktopHero";
 import MobileHero from "./MobileHero";
 export default function Hero({ content }) {
@@ -14,9 +15,14 @@ export default function Hero({ content }) {
         : undefined;
     if (!content)
         return null;
-    return (React.createElement("div", { className: "bg-black", ref: ref },
+    const colors = resolveHeroColors(content);
+    const contentWidthClass = resolveContentWidthClass(content);
+    const typography = resolveHeroTypography(content);
+    const position = resolvePosition(content);
+    const height = resolveHeight(content);
+    return (React.createElement("div", { className: "bg-black", ref: ref, style: { backgroundColor: colors.background } },
         React.createElement("div", { className: "hidden lg:block" },
-            React.createElement(DesktopHero, { content: content, buttonHref: signedButtonHref })),
+            React.createElement(DesktopHero, { content: content, buttonHref: signedButtonHref, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, height: height })),
         React.createElement("div", { className: "block lg:hidden" },
-            React.createElement(MobileHero, { content: content, buttonHref: signedButtonHref }))));
+            React.createElement(MobileHero, { content: content, buttonHref: signedButtonHref, colors: colors, typography: typography }))));
 }

package/dist/styles/fragment-sdk.css

@@ -0,0 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600;700&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;500;700&family=Inter:wght@300;400;500;700&family=Poppins:wght@300;400;600;700&family=Raleway:wght@300;400;500;700&family=Playfair+Display:wght@400;700&family=Merriweather:wght@300;400;700&family=Oswald:wght@300;400;500;700&display=swap");
+
+/* Custom animations for fragment-headless-sdk */
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* Utility classes for marquee animations */
+.animate-marquee {
+  animation: marquee 25s linear infinite;
+}
+
+/* Make hero/announcement prose links inherit the surrounding text color (v2.1+) */
+.prose {
+  --tw-prose-links: currentColor;
+  --tw-prose-links-hover: currentColor;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  color: currentColor;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)):hover {
+  color: currentColor;
+  text-decoration: underline;
+}

package/dist/types/announcement.d.ts

@@ -1,4 +1,5 @@
 import { AnnouncementStatus, AnnouncementType, ButtonType } from "../constants";
+import { IAnnouncementStyling } from "./styling";
 export declare const buttonTypes: {
     label: string;
     value: ButtonType;
@@ -7,16 +8,11 @@ export interface IAnnouncementContent {
     buttonType: ButtonType;
     buttonText: string;
     buttonLink: string;
-    bgColor: string;
     announcementHtml: string;
-    buttonColor: string;
-    buttonTextColor: string;
-    textColor: string;
     counterEndDate?: string;
-    counterBgColor?: string;
-    counterDigitColor?: string;
     impressionUrl: string;
     clickUrlBase: string;
+    styling?: IAnnouncementStyling;
 }
 export interface IAnnouncement {
     id: string;

package/dist/types/hero.d.ts

@@ -1,4 +1,5 @@
 import { HeroStatus, HeroType } from "../constants";
+import { IHeroStyling } from "./styling";
 export type ShopPage = {
     id: string;
     title: string;
@@ -6,18 +7,15 @@ export type ShopPage = {
 };
 export interface IHeroContent {
     title: string;
-    titleColor: string;
     description: string;
-    textColor: string;
     buttonText: string;
     buttonLink: string;
-    buttonColor: string;
-    buttonTextColor: string;
     imageUrl: string;
     mobileImageUrl: string;
     videoUrl?: string;
     impressionUrl: string;
     clickUrlBase: string;
+    styling?: IHeroStyling;
 }
 export interface IHero {
     id: string;

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./announcement";
 export * from "./hero";
+export * from "./styling";

package/dist/types/index.js

@@ -1,2 +1,3 @@
 export * from "./announcement";
 export * from "./hero";
+export * from "./styling";

package/dist/types/styling.d.ts

@@ -0,0 +1,133 @@
+export type InlineStyleValue = string | number | undefined;
+export type InlineStyleMap = Record<string, InlineStyleValue>;
+export interface IFragmentTokens {
+    colors?: Record<string, string>;
+    spacing?: Record<string, string>;
+    typography?: Record<string, string>;
+    transitions?: Record<string, string>;
+    shadows?: Record<string, string>;
+    borders?: Record<string, string>;
+    [key: string]: Record<string, string> | undefined;
+}
+export interface IFragmentStylingSlot {
+    /**
+     * Additional classes to append to the base slot.
+     * Accepts a single string or array of strings.
+     */
+    className?: string | string[];
+    /**
+     * Inline CSS properties merged onto the slot.
+     */
+    style?: InlineStyleMap;
+    /**
+     * CSS variables that will be applied to the slot.
+     * Keys may be provided with or without the leading `--`.
+     */
+    vars?: InlineStyleMap;
+    /**
+     * Arbitrary attributes (data-, aria-, etc.) to spread on the slot.
+     */
+    attributes?: Record<string, string>;
+    /**
+     * CSS-in-JS support for styled-components, emotion, etc.
+     */
+    css?: string;
+    /**
+     * Responsive overrides for different breakpoints.
+     */
+    responsive?: {
+        sm?: Partial<IFragmentStylingSlot>;
+        md?: Partial<IFragmentStylingSlot>;
+        lg?: Partial<IFragmentStylingSlot>;
+        xl?: Partial<IFragmentStylingSlot>;
+        "2xl"?: Partial<IFragmentStylingSlot>;
+    };
+    /**
+     * State-based styling (hover, active, focus, disabled, etc.).
+     */
+    states?: {
+        hover?: Partial<IFragmentStylingSlot>;
+        active?: Partial<IFragmentStylingSlot>;
+        focus?: Partial<IFragmentStylingSlot>;
+        disabled?: Partial<IFragmentStylingSlot>;
+        loading?: Partial<IFragmentStylingSlot>;
+        [state: string]: Partial<IFragmentStylingSlot> | undefined;
+    };
+}
+export interface IFragmentStyling {
+    /**
+     * Slot-level overrides. Slot keys are component-specific (e.g. "root", "button").
+     */
+    slots?: Record<string, IFragmentStylingSlot>;
+    /**
+     * Structured design tokens for consistent theming.
+     */
+    tokens?: IFragmentTokens;
+    /**
+     * Legacy flat token support for backward compatibility.
+     * @deprecated Use structured tokens instead.
+     */
+    legacyTokens?: Record<string, string>;
+    /**
+     * Theme variant (light, dark, brand, etc.).
+     */
+    theme?: "light" | "dark" | "brand" | "minimal" | "bold" | string;
+    /**
+     * Component variant for different styles of the same component.
+     */
+    variant?: "default" | "outlined" | "ghost" | "solid" | "gradient" | string;
+    /**
+     * Global CSS variables to apply to the component root.
+     */
+    globalVars?: InlineStyleMap;
+}
+export interface IAnnouncementSlots {
+    root?: IFragmentStylingSlot;
+    inner?: IFragmentStylingSlot;
+    wrapper?: IFragmentStylingSlot;
+    marqueeContainer?: IFragmentStylingSlot;
+    marqueeTextWrapper?: IFragmentStylingSlot;
+    marqueeText?: IFragmentStylingSlot;
+    marqueeContent?: IFragmentStylingSlot;
+    contentRow?: IFragmentStylingSlot;
+    announcementText?: IFragmentStylingSlot;
+    announcementButton?: IFragmentStylingSlot;
+    button?: IFragmentStylingSlot;
+    closeButton?: IFragmentStylingSlot;
+    countdown?: IFragmentStylingSlot;
+    countdownItem?: IFragmentStylingSlot;
+    countdownLabel?: IFragmentStylingSlot;
+    countdownValue?: IFragmentStylingSlot;
+}
+export interface IHeroSlots {
+    root?: IFragmentStylingSlot;
+    desktopWrapper?: IFragmentStylingSlot;
+    mobileWrapper?: IFragmentStylingSlot;
+    container?: IFragmentStylingSlot;
+    desktopContainer?: IFragmentStylingSlot;
+    mobileContainer?: IFragmentStylingSlot;
+    image?: IFragmentStylingSlot;
+    desktopImage?: IFragmentStylingSlot;
+    mobileImage?: IFragmentStylingSlot;
+    contentWrapper?: IFragmentStylingSlot;
+    desktopContentWrapper?: IFragmentStylingSlot;
+    mobileContentWrapper?: IFragmentStylingSlot;
+    content?: IFragmentStylingSlot;
+    desktopContent?: IFragmentStylingSlot;
+    mobileContent?: IFragmentStylingSlot;
+    title?: IFragmentStylingSlot;
+    desktopTitle?: IFragmentStylingSlot;
+    mobileTitle?: IFragmentStylingSlot;
+    description?: IFragmentStylingSlot;
+    desktopDescription?: IFragmentStylingSlot;
+    mobileDescription?: IFragmentStylingSlot;
+    button?: IFragmentStylingSlot;
+    desktopButton?: IFragmentStylingSlot;
+    mobileButton?: IFragmentStylingSlot;
+}
+export interface IAnnouncementStyling extends Omit<IFragmentStyling, "slots"> {
+    slots?: IAnnouncementSlots;
+}
+export interface IHeroStyling extends Omit<IFragmentStyling, "slots"> {
+    slots?: IHeroSlots;
+}

package/dist/types/styling.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/hero-resolvers.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import { IHeroContent } from "../types";
+export interface HeroResolvedColors {
+    title: string;
+    text: string;
+    buttonBackground: string;
+    buttonText: string;
+    background: string;
+}
+export declare const DEFAULT_COLORS: HeroResolvedColors;
+export declare const DEFAULT_CONTENT_WIDTH_CLASS = "w-2/5";
+export declare const DEFAULT_HEIGHT_CLASS = "h-[400px]";
+export declare const FONT_FAMILY_MAP: {
+    readonly geist: "\"Geist\", -apple-system, BlinkMacSystemFont, sans-serif";
+    readonly georgia: "\"Georgia\", \"Times New Roman\", serif";
+    readonly geistMono: "\"Geist Mono\", \"SFMono-Regular\", Menlo, monospace";
+    readonly roboto: "\"Roboto\", sans-serif";
+    readonly openSans: "\"Open Sans\", sans-serif";
+    readonly lato: "\"Lato\", sans-serif";
+    readonly montserrat: "\"Montserrat\", sans-serif";
+    readonly inter: "\"Inter\", sans-serif";
+    readonly poppins: "\"Poppins\", sans-serif";
+    readonly raleway: "\"Raleway\", sans-serif";
+    readonly playfair: "\"Playfair Display\", serif";
+    readonly merriweather: "\"Merriweather\", serif";
+    readonly oswald: "\"Oswald\", sans-serif";
+};
+export type FontKey = keyof typeof FONT_FAMILY_MAP;
+export declare const DEFAULT_TYPOGRAPHY: {
+    titleFontSize: string;
+    titleLineHeight: string;
+    titleFont: FontKey;
+    descriptionFontSize: string;
+    descriptionLineHeight: string;
+    descriptionFont: FontKey;
+};
+export interface HeroTypographySettings {
+    title: {
+        fontSize: string;
+        lineHeight: string;
+        font: FontKey;
+    };
+    description: {
+        fontSize: string;
+        lineHeight: string;
+        font: FontKey;
+    };
+}
+export declare const joinClassNames: (...classes: Array<string | false | null | undefined>) => string;
+export declare function resolveHeroColors(content: IHeroContent): HeroResolvedColors;
+export declare function resolveContentWidthClass(content: IHeroContent): string;
+export declare function resolvePosition(content: IHeroContent): "left" | "center" | "right";
+export declare function resolveHeight(content: IHeroContent): string;
+export declare function resolveHeroTypography(content: IHeroContent): HeroTypographySettings;
+export declare function renderText({ fontSize, lineHeight, text, className, color, font, }: {
+    fontSize: string;
+    lineHeight: string;
+    text: string | null | undefined;
+    className?: string;
+    color?: string;
+    font: FontKey;
+}): React.JSX.Element | null;