fragment-headless-sdk 2.0.0 → 2.1.0

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,45 +1,42 @@
 import React from "react";
-import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
-export default function DesktopHero({ buttonHref, content, }) {
-    const styling = content.styling;
-    const containerClass = mergeSlotClasses("relative h-[400px] gap-4 w-full", styling, "desktopContainer", "container");
-    const containerStyle = mergeSlotStyles(undefined, styling, "desktopContainer", "container");
-    const containerAttributes = mergeSlotAttributes(styling, "desktopContainer", "container");
-    const imageClass = mergeSlotClasses("absolute inset-0 z-0 object-cover w-full h-full", styling, "desktopImage", "image");
-    const imageStyle = mergeSlotStyles(undefined, styling, "desktopImage", "image");
-    const imageAttributes = mergeSlotAttributes(styling, "desktopImage", "image");
-    const titleColor = resolveTokenByCategory(styling, "colors", "title") ||
-        resolveToken(styling, "titleColor", "#ffffff");
-    const titleStyle = mergeSlotStyles({ color: titleColor }, styling, "desktopTitle", "title");
-    const titleClass = mergeSlotClasses("text-5xl font-bold leading-tight drop-shadow-xl", styling, "desktopTitle", "title");
-    const titleAttributes = mergeSlotAttributes(styling, "desktopTitle", "title");
-    const descriptionColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
-    const descriptionStyle = mergeSlotStyles(descriptionColor ? { color: descriptionColor } : undefined, styling, "desktopDescription", "description");
-    const descriptionClass = mergeSlotClasses("mt-4 text-2xl drop-shadow-lg prose", styling, "desktopDescription", "description");
-    const descriptionAttributes = mergeSlotAttributes(styling, "desktopDescription", "description");
-    const contentWrapperClass = mergeSlotClasses("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", styling, "desktopContentWrapper", "contentWrapper");
-    const contentWrapperStyle = mergeSlotStyles(undefined, styling, "desktopContentWrapper", "contentWrapper");
-    const contentWrapperAttributes = mergeSlotAttributes(styling, "desktopContentWrapper", "contentWrapper");
-    const contentInnerClass = mergeSlotClasses("w-2/5", styling, "desktopContent", "content");
-    const contentInnerStyle = mergeSlotStyles(undefined, styling, "desktopContent", "content");
-    const contentInnerAttributes = mergeSlotAttributes(styling, "desktopContent", "content");
-    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
-        resolveToken(styling, "buttonColor");
-    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
-        resolveToken(styling, "buttonTextColor");
-    const buttonStyle = mergeSlotStyles({
-        backgroundColor: buttonBgColor,
-        color: buttonTextColor,
-    }, styling, "desktopButton", "button");
-    const buttonClass = mergeSlotClasses("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", styling, "desktopButton", "button");
-    const buttonAttributes = mergeSlotAttributes(styling, "desktopButton", "button");
-    return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
-        content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: imageClass, style: imageStyle, ...(imageAttributes ?? {}) })),
-        React.createElement("div", { className: contentWrapperClass, style: contentWrapperStyle, ...(contentWrapperAttributes ?? {}) },
-            React.createElement("div", { className: contentInnerClass, style: contentInnerStyle, ...(contentInnerAttributes ?? {}) },
-                content?.title && (React.createElement("h1", { className: titleClass, style: titleStyle, ...(titleAttributes ?? {}) }, content.title)),
-                content?.description && (React.createElement("div", { className: descriptionClass, style: descriptionStyle, ...(descriptionAttributes ?? {}), 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: buttonClass, style: buttonStyle, ...(buttonAttributes ?? {}) }, content.buttonText)))))));
+                    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,41 +1,30 @@
 import React from "react";
-import { mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
-export default function MobileHero({ buttonHref, content, }) {
-    const styling = content.styling;
-    const containerClass = mergeSlotClasses("relative z-10 mx-auto gap-4 flex h-full max-w-screen-md flex-col items-center justify-center py-6 text-center", styling, "mobileContainer", "container");
-    const containerStyle = mergeSlotStyles(undefined, styling, "mobileContainer", "container");
-    const containerAttributes = mergeSlotAttributes(styling, "mobileContainer", "container");
-    const titleColor = resolveTokenByCategory(styling, "colors", "title") ||
-        resolveToken(styling, "titleColor");
-    const titleClass = mergeSlotClasses("text-3xl font-bold drop-shadow-xl px-4", styling, "mobileTitle", "title");
-    const titleStyle = mergeSlotStyles(titleColor ? { color: titleColor } : undefined, styling, "mobileTitle", "title");
-    const titleAttributes = mergeSlotAttributes(styling, "mobileTitle", "title");
-    const imageWrapperClass = mergeSlotClasses("w-full", styling, "mobileImageWrapper", "imageWrapper");
-    const imageWrapperStyle = mergeSlotStyles(undefined, styling, "mobileImageWrapper", "imageWrapper");
-    const imageWrapperAttributes = mergeSlotAttributes(styling, "mobileImageWrapper", "imageWrapper");
-    const imageClass = mergeSlotClasses("h-full w-full object-cover", styling, "mobileImage", "image");
-    const imageStyle = mergeSlotStyles(undefined, styling, "mobileImage", "image");
-    const imageAttributes = mergeSlotAttributes(styling, "mobileImage", "image");
-    const descriptionColor = resolveTokenByCategory(styling, "colors", "text") ||
-        resolveToken(styling, "textColor");
-    const descriptionClass = mergeSlotClasses("px-4 text-2xl drop-shadow-lg prose", styling, "mobileDescription", "description");
-    const descriptionStyle = mergeSlotStyles(descriptionColor ? { color: descriptionColor } : undefined, styling, "mobileDescription", "description");
-    const descriptionAttributes = mergeSlotAttributes(styling, "mobileDescription", "description");
-    const buttonBgColor = resolveTokenByCategory(styling, "colors", "button") ||
-        resolveToken(styling, "buttonColor");
-    const buttonTextColor = resolveTokenByCategory(styling, "colors", "buttonText") ||
-        resolveToken(styling, "buttonTextColor");
-    const buttonClass = mergeSlotClasses("mb-2 rounded-md px-6 py-2 text-lg font-semibold drop-shadow-lg transition-all duration-200 hover:bg-gray-800", styling, "mobileButton", "button");
-    const buttonStyle = mergeSlotStyles({
-        backgroundColor: buttonBgColor,
-        color: buttonTextColor,
-    }, styling, "mobileButton", "button");
-    const buttonAttributes = mergeSlotAttributes(styling, "mobileButton", "button");
-    return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
-        content?.title && (React.createElement("h1", { className: titleClass, style: titleStyle, ...(titleAttributes ?? {}) }, content.title)),
-        (content?.mobileImageUrl || content?.imageUrl) && (React.createElement("div", { className: imageWrapperClass, style: imageWrapperStyle, ...(imageWrapperAttributes ?? {}) },
-            React.createElement("img", { src: content.mobileImageUrl || content.imageUrl || "", alt: content.title || "Hero", className: imageClass, style: imageStyle, ...(imageAttributes ?? {}) }))),
-        content?.description && (React.createElement("div", { className: descriptionClass, style: descriptionStyle, ...(descriptionAttributes ?? {}), 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: buttonClass, style: buttonStyle, ...(buttonAttributes ?? {}) }, content.buttonText)))));
+            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, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, } from "../../utils";
+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,18 +15,14 @@ export default function Hero({ content }) {
         : undefined;
     if (!content)
         return null;
-    const styling = content.styling;
-    const themeClasses = getThemeClasses(styling);
-    const rootClassName = mergeSlotClasses(`bg-black ${themeClasses}`, styling, "root");
-    const rootStyle = mergeSlotStyles(undefined, styling, "root");
-    const rootAttributes = mergeSlotAttributes(styling, "root");
-    const desktopWrapperClass = mergeSlotClasses("hidden lg:block", styling, "desktopWrapper");
-    const desktopWrapperAttributes = mergeSlotAttributes(styling, "desktopWrapper");
-    const mobileWrapperClass = mergeSlotClasses("block lg:hidden", styling, "mobileWrapper");
-    const mobileWrapperAttributes = mergeSlotAttributes(styling, "mobileWrapper");
-    return (React.createElement("div", { className: rootClassName, ref: ref, style: rootStyle, ...(rootAttributes ?? {}) },
-        React.createElement("div", { className: desktopWrapperClass, ...(desktopWrapperAttributes ?? {}) },
-            React.createElement(DesktopHero, { content: content, buttonHref: signedButtonHref })),
-        React.createElement("div", { className: mobileWrapperClass, ...(mobileWrapperAttributes ?? {}) },
-            React.createElement(MobileHero, { content: content, buttonHref: signedButtonHref }))));
+    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, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, height: height })),
+        React.createElement("div", { className: "block lg:hidden" },
+            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/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;

package/dist/utils/hero-resolvers.js

@@ -0,0 +1,107 @@
+import React from "react";
+export const DEFAULT_COLORS = {
+    title: "#ffffff",
+    text: "#ffffff",
+    buttonBackground: "#ffffff",
+    buttonText: "#000000",
+    background: "#000000",
+};
+export const DEFAULT_CONTENT_WIDTH_CLASS = "w-2/5";
+export const DEFAULT_HEIGHT_CLASS = "h-[400px]";
+export const FONT_FAMILY_MAP = {
+    geist: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
+    georgia: '"Georgia", "Times New Roman", serif',
+    geistMono: '"Geist Mono", "SFMono-Regular", Menlo, monospace',
+    roboto: '"Roboto", sans-serif',
+    openSans: '"Open Sans", sans-serif',
+    lato: '"Lato", sans-serif',
+    montserrat: '"Montserrat", sans-serif',
+    inter: '"Inter", sans-serif',
+    poppins: '"Poppins", sans-serif',
+    raleway: '"Raleway", sans-serif',
+    playfair: '"Playfair Display", serif',
+    merriweather: '"Merriweather", serif',
+    oswald: '"Oswald", sans-serif',
+};
+export const DEFAULT_TYPOGRAPHY = {
+    titleFontSize: "text-5xl",
+    titleLineHeight: "leading-none",
+    titleFont: "roboto",
+    descriptionFontSize: "text-3xl",
+    descriptionLineHeight: "leading-relaxed",
+    descriptionFont: "roboto",
+};
+export const joinClassNames = (...classes) => classes.filter(Boolean).join(" ");
+const fallbackColor = (value, fallback) => typeof value === "string" && value.trim().length > 0 ? value : fallback;
+export function resolveHeroColors(content) {
+    const tokens = content?.styling?.tokens?.colors ??
+        {};
+    return {
+        title: fallbackColor(tokens.title, DEFAULT_COLORS.title),
+        text: fallbackColor(tokens.text, DEFAULT_COLORS.text),
+        buttonBackground: fallbackColor(tokens.button ?? tokens.buttonBackground, DEFAULT_COLORS.buttonBackground),
+        buttonText: fallbackColor(tokens.buttonText, DEFAULT_COLORS.buttonText),
+        background: fallbackColor(tokens.background, DEFAULT_COLORS.background),
+    };
+}
+export function resolveContentWidthClass(content) {
+    const layout = content?.styling?.tokens?.layout ?? {};
+    const rawClass = layout.contentWidthClass;
+    if (typeof rawClass === "string" && rawClass.trim().length > 0) {
+        return rawClass.trim();
+    }
+    return DEFAULT_CONTENT_WIDTH_CLASS;
+}
+export function resolvePosition(content) {
+    const layout = content?.styling?.tokens?.layout ?? {};
+    const rawPosition = layout.position;
+    if (rawPosition === "center" ||
+        rawPosition === "right" ||
+        rawPosition === "left") {
+        return rawPosition;
+    }
+    return "left";
+}
+export function resolveHeight(content) {
+    const layout = content?.styling?.tokens?.layout ?? {};
+    const rawHeight = layout.height;
+    if (typeof rawHeight === "string" && rawHeight.trim().length > 0) {
+        return rawHeight.trim();
+    }
+    return DEFAULT_HEIGHT_CLASS;
+}
+export function resolveHeroTypography(content) {
+    const typography = content?.styling?.tokens?.typography;
+    return {
+        title: {
+            fontSize: typography?.titleFontSize ?? DEFAULT_TYPOGRAPHY.titleFontSize,
+            lineHeight: typography?.titleLineHeight ?? DEFAULT_TYPOGRAPHY.titleLineHeight,
+            font: typography?.titleFont ?? DEFAULT_TYPOGRAPHY.titleFont,
+        },
+        description: {
+            fontSize: typography?.descriptionFontSize ??
+                DEFAULT_TYPOGRAPHY.descriptionFontSize,
+            lineHeight: typography?.descriptionLineHeight ??
+                DEFAULT_TYPOGRAPHY.descriptionLineHeight,
+            font: typography?.descriptionFont ??
+                DEFAULT_TYPOGRAPHY.descriptionFont,
+        },
+    };
+}
+export function renderText({ fontSize, lineHeight, text, className, color, font, }) {
+    if (!text || text.trim().length === 0) {
+        return null;
+    }
+    const baseClasses = "drop-shadow-lg";
+    const combinedClasses = className
+        ? `${baseClasses} ${fontSize} ${lineHeight} ${className}`
+        : `${baseClasses} ${fontSize} ${lineHeight}`;
+    return React.createElement("div", {
+        className: combinedClasses,
+        style: {
+            color,
+            fontFamily: FONT_FAMILY_MAP[font] ?? FONT_FAMILY_MAP.geist,
+        },
+        dangerouslySetInnerHTML: { __html: text },
+    });
+}

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./cache";
 export * from "./fetch-resource";
+export * from "./hero-resolvers";
 export * from "./metrics";
 export * from "./styling";

package/dist/utils/index.js

@@ -1,4 +1,5 @@
 export * from "./cache";
 export * from "./fetch-resource";
+export * from "./hero-resolvers";
 export * from "./metrics";
 export * from "./styling";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    }
+    },
+    "./styles": "./dist/styles/fragment-sdk.css"
   },
   "files": [
     "dist"

package/readme.md

@@ -2,7 +2,14 @@
 
 The official SDK for integrating with Fragment-Shopify CMS. Provides React components, TypeScript types, and utilities for rendering published sections in headless Shopify storefronts.
 
-## ✨ What's New in v2.0.0
+## ✨ What's New in v2.1.0
+
+🎨 **Enhanced Hero Styling System** - New hero resolvers utility with advanced typography, positioning, and layout controls  
+🔤 **Advanced Typography** - Built-in font family support with granular control over sizes and line heights  
+📐 **Flexible Layout Controls** - Content positioning (left/center/right), width management, and height configuration  
+🎯 **Developer Experience** - Enhanced TypeScript interfaces and utility functions for better development workflow
+
+### Previous Major Release (v2.0.0)
 
 🎨 **Revolutionary Styling System** - Complete overhaul with advanced theming, responsive design, and scalable architecture  
 🏗️ **Component-Specific Types** - Enhanced type safety with dedicated slot interfaces  
@@ -46,6 +53,15 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - 🔄 **Legacy Compatibility**: Seamless migration path from v1.x styling
 - 🎪 **CSS-in-JS Support**: Integration with styled-components, emotion, etc.
 
+### Hero Resolvers System (v2.1+)
+
+- 🔤 **Advanced Typography**: Built-in font family support (Roboto, Inter, Montserrat, etc.)
+- 📐 **Layout Controls**: Content positioning (left/center/right), width, and height management
+- 🎨 **Smart Color Resolution**: Intelligent fallback handling for color tokens
+- 🛠️ **Utility Functions**: Helper functions for class joining, text rendering, and style resolution
+- 📝 **Type Safety**: Enhanced TypeScript interfaces for all styling options
+- 🔄 **Backward Compatible**: Works seamlessly with existing Hero implementations
+
 ---
 
 ## 📦 Installation
@@ -104,6 +120,30 @@ module.exports = {
 @tailwind utilities;
 ```
 
+### 4. Import Fragment SDK Styles
+
+**Required** - Import the SDK's CSS file for proper typography and animations:
+
+#### Option A: JavaScript/TypeScript Import
+
+```typescript
+// In your main app file (e.g., _app.tsx, layout.tsx, or main.tsx)
+import "fragment-headless-sdk/styles";
+```
+
+#### Option B: CSS Import
+
+```css
+/* In your global CSS file */
+@import "fragment-headless-sdk/dist/styles/fragment-sdk.css";
+```
+
+This provides:
+
+- **Google Fonts** for all supported font families (Roboto, Inter, Montserrat, etc.)
+- **Marquee animations** for announcement components
+- **Improved link styling** for prose content
+
 ---
 
 ## 🚀 Quick Start
@@ -417,6 +457,172 @@ slots: {
 
 ---
 
+## 🎨 Hero Resolvers System (v2.1+)
+
+The Hero Resolvers system provides advanced utilities for customizing Hero components with enhanced typography, layout, and styling controls.
+
+### Typography Control
+
+```typescript
+import { resolveHeroTypography, FontKey } from "fragment-headless-sdk";
+
+// Enhanced typography configuration
+const heroContent = {
+  title: "Welcome to Our Store",
+  description: "Discover amazing products",
+  styling: {
+    tokens: {
+      typography: {
+        // Title typography
+        titleFont: "montserrat" as FontKey,
+        titleFontSize: "text-6xl",
+        titleLineHeight: "leading-tight",
+
+        // Description typography
+        descriptionFont: "inter" as FontKey,
+        descriptionFontSize: "text-xl",
+        descriptionLineHeight: "leading-relaxed",
+      },
+    },
+  },
+};
+
+// Resolve typography settings
+const typography = resolveHeroTypography(heroContent);
+```
+
+### Layout & Positioning
+
+```typescript
+import {
+  resolvePosition,
+  resolveContentWidthClass,
+  resolveHeight,
+} from "fragment-headless-sdk";
+
+const heroContent = {
+  title: "Centered Hero",
+  styling: {
+    tokens: {
+      layout: {
+        position: "center", // "left" | "center" | "right"
+        contentWidth: "max-w-4xl", // Tailwind width classes
+        height: "min-h-screen", // Custom height classes
+      },
+    },
+  },
+};
+
+// Resolve layout settings
+const position = resolvePosition(heroContent); // "center"
+const contentWidth = resolveContentWidthClass(heroContent); // "max-w-4xl"
+const height = resolveHeight(heroContent); // "min-h-screen"
+```
+
+### Color Resolution
+
+```typescript
+import { resolveHeroColors } from "fragment-headless-sdk";
+
+const heroContent = {
+  title: "Styled Hero",
+  styling: {
+    tokens: {
+      colors: {
+        title: "#ffffff",
+        text: "#f0f0f0",
+        button: "#007bff",
+        buttonText: "#ffffff",
+        background: "#1a1a1a",
+      },
+    },
+  },
+};
+
+// Resolve colors with intelligent fallbacks
+const colors = resolveHeroColors(heroContent);
+// Returns: { title: "#ffffff", text: "#f0f0f0", buttonBackground: "#007bff", buttonText: "#ffffff", background: "#1a1a1a" }
+```
+
+### Built-in Font Families
+
+The system includes support for popular web fonts:
+
+```typescript
+type FontKey =
+  | "roboto"
+  | "open-sans"
+  | "lato"
+  | "montserrat"
+  | "poppins"
+  | "inter"
+  | "nunito-sans"
+  | "source-sans-pro";
+```
+
+### Utility Functions
+
+```typescript
+import { joinClassNames, renderText } from "fragment-headless-sdk";
+
+// Safe class name joining
+const classes = joinClassNames("text-xl", "font-bold", null, "text-center");
+// Returns: "text-xl font-bold text-center"
+
+// Unified text rendering
+const titleElement = renderText({
+  fontSize: "text-4xl",
+  lineHeight: "leading-tight",
+  text: "Hero Title",
+  className: "font-bold",
+  color: "#ffffff",
+  font: "montserrat",
+});
+```
+
+### Complete Example
+
+```typescript
+import { Hero } from "fragment-headless-sdk";
+
+const advancedHeroContent = {
+  title: "Advanced Hero Section",
+  description: "With enhanced typography and layout controls",
+  buttonText: "Get Started",
+  buttonLink: "/signup",
+  imageUrl: "https://example.com/hero.jpg",
+
+  styling: {
+    tokens: {
+      colors: {
+        title: "#ffffff",
+        text: "#e2e8f0",
+        button: "#3b82f6",
+        buttonText: "#ffffff",
+        background: "#1e293b",
+      },
+      typography: {
+        titleFont: "montserrat",
+        titleFontSize: "text-5xl lg:text-7xl",
+        titleLineHeight: "leading-tight",
+        descriptionFont: "inter",
+        descriptionFontSize: "text-lg lg:text-xl",
+        descriptionLineHeight: "leading-relaxed",
+      },
+      layout: {
+        position: "center",
+        contentWidth: "max-w-4xl",
+        height: "min-h-screen",
+      },
+    },
+  },
+};
+
+<Hero content={advancedHeroContent} />;
+```
+
+---
+
 ## 📡 API Reference
 
 ### `fetchResource<T>(params)`
@@ -725,6 +931,54 @@ fragment-headless-sdk/
 
 ## 🔄 Migration Guide
 
+### From v2.0 to v2.1
+
+**No Breaking Changes** - v2.1 is fully backward compatible!
+
+All existing Hero components continue to work exactly as before. The new Hero Resolvers system is completely opt-in.
+
+#### New Features Available (Optional)
+
+```typescript
+// v2.0 style (continues to work)
+const heroContent = {
+  title: "My Hero",
+  styling: {
+    tokens: {
+      colors: {
+        title: "#ffffff",
+        button: "#007bff",
+      },
+    },
+  },
+};
+
+// v2.1 enhanced style (new features)
+const heroContent = {
+  title: "My Hero",
+  styling: {
+    tokens: {
+      colors: {
+        title: "#ffffff",
+        button: "#007bff",
+      },
+      // NEW: Typography controls
+      typography: {
+        titleFont: "montserrat",
+        titleFontSize: "text-6xl",
+        titleLineHeight: "leading-tight",
+      },
+      // NEW: Layout controls
+      layout: {
+        position: "center",
+        contentWidth: "max-w-4xl",
+        height: "min-h-screen",
+      },
+    },
+  },
+};
+```
+
 ### From v1.x to v2.0
 
 **No Breaking Changes** - v2.0 is fully backward compatible!
@@ -810,12 +1064,13 @@ MIT License - See LICENSE file for details.
 
 ## 🎉 What's Next?
 
-The v2.0 styling system provides a foundation for unlimited customization and scalability. Future enhancements may include:
+The v2.1 Hero Resolvers system and v2.0 styling foundation provide unlimited customization and scalability. Future enhancements may include:
 
 - Visual styling editor integration
 - Animation and transition presets
-- Advanced layout system
+- Advanced layout system for all components
 - Component composition utilities
 - Design system generator
+- Enhanced Announcement component resolvers
 
-**Ready to build beautiful, scalable headless experiences!** 🚀
+**Ready to build beautiful, scalable headless experiences with advanced typography and layout controls!** 🚀