fragment-headless-sdk 2.1.0 → 2.1.1

package/dist/components/Announcement/index.js

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
 import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
-import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
 export default function Announcement({ content, type, handleClose, }) {
     const ref = useRef(null);
@@ -55,7 +54,6 @@ export default function Announcement({ content, type, handleClose, }) {
     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: innerClass, style: innerStyle, ...(innerAttributes ?? {}) },
             type === AnnouncementType.Marquee ? (React.createElement("div", { className: marqueeContainerClass, style: marqueeContainerStyle, ...(marqueeContainerAttributes ?? {}) },
                 React.createElement("div", { className: marqueeTextWrapperClass, style: marqueeTextWrapperStyle, ...(marqueeTextWrapperAttributes ?? {}) },

package/dist/components/Hero/DesktopHero.js

@@ -22,7 +22,6 @@ export default function DesktopHero({ buttonHref, content, colors, contentWidthC
                     fontSize: typography.title.fontSize,
                     lineHeight: typography.title.lineHeight,
                     text: content?.title,
-                    className: "mt-4",
                     color: colors.title,
                     font: typography.title.font,
                 }),

package/dist/components/Hero/MobileHero.js

@@ -1,13 +1,22 @@
 import React from "react";
+import { ensureSafeColor } from "../../utils/color";
 import { renderText, } from "../../utils/hero-resolvers";
 export default function MobileHero({ buttonHref, content, colors, typography, }) {
+    const safeTitleColor = ensureSafeColor(colors.title, "#ffffff");
+    const safeTextColor = ensureSafeColor(colors.text, "#ffffff");
+    const titleFontSize = typography.title.fontSize === "text-5xl"
+        ? "text-3xl"
+        : typography.title.fontSize;
+    const descriptionFontSize = typography.description.fontSize === "text-3xl"
+        ? "text-lg"
+        : typography.description.fontSize;
     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,
+            fontSize: titleFontSize,
             lineHeight: typography.title.lineHeight,
             text: content?.title,
-            className: "px-4 drop-shadow-xl text-center",
-            color: colors.title,
+            className: "px-4 drop-shadow-xl text-center font-bold",
+            color: safeTitleColor,
             font: typography.title.font,
         }),
         content?.videoUrl ? (React.createElement("div", { className: "w-full" },
@@ -15,11 +24,11 @@ export default function MobileHero({ buttonHref, content, colors, typography, })
             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,
+            fontSize: descriptionFontSize,
             lineHeight: typography.description.lineHeight,
             text: content?.description,
             className: "px-4 drop-shadow-lg text-center mt-4",
-            color: colors.text,
+            color: safeTextColor,
             font: typography.description.font,
         }),
         content?.buttonLink && content?.buttonText && (React.createElement("a", { href: buttonHref, target: "_blank", rel: "noopener noreferrer", className: "no-underline" },

package/dist/utils/color.d.ts

@@ -0,0 +1,2 @@
+export declare function isDarkColor(color: string | undefined | null): boolean;
+export declare function ensureSafeColor(color: string | undefined | null, fallback: string): string;

package/dist/utils/color.js

@@ -0,0 +1,67 @@
+const HEX_COLOR_REGEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const RGB_COLOR_REGEX = /^rgba?\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)$/i;
+function hexToRgb(color) {
+    if (!HEX_COLOR_REGEX.test(color)) {
+        return null;
+    }
+    let hex = color.slice(1);
+    if (hex.length === 3) {
+        hex = hex
+            .split("")
+            .map((char) => char + char)
+            .join("");
+    }
+    const bigint = parseInt(hex, 16);
+    return {
+        r: (bigint >> 16) & 255,
+        g: (bigint >> 8) & 255,
+        b: bigint & 255,
+    };
+}
+function rgbStringToRgb(color) {
+    const match = color.match(RGB_COLOR_REGEX);
+    if (!match) {
+        return null;
+    }
+    const [, r, g, b] = match;
+    const red = Number(r);
+    const green = Number(g);
+    const blue = Number(b);
+    if ([red, green, blue].some((value) => Number.isNaN(value))) {
+        return null;
+    }
+    return { r: red, g: green, b: blue };
+}
+function normalizeColor(color) {
+    if (!color) {
+        return null;
+    }
+    const trimmed = color.trim();
+    return hexToRgb(trimmed) ?? rgbStringToRgb(trimmed);
+}
+function getRelativeLuminance(rgb) {
+    const transform = (value) => {
+        const channel = value / 255;
+        if (channel <= 0.03928) {
+            return channel / 12.92;
+        }
+        return Math.pow((channel + 0.055) / 1.055, 2.4);
+    };
+    const r = transform(rgb.r);
+    const g = transform(rgb.g);
+    const b = transform(rgb.b);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function isDarkColor(color) {
+    const rgb = normalizeColor(color);
+    if (!rgb) {
+        return false;
+    }
+    return getRelativeLuminance(rgb) < 0.5;
+}
+export function ensureSafeColor(color, fallback) {
+    if (!color) {
+        return fallback;
+    }
+    return isDarkColor(color) ? fallback : color;
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",