@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-centered-image-grid.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -895,7 +921,7 @@ function HeroCenteredImageGrid({
         /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
           ] }),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),

package/dist/hero-centered-screenshot.cjs

@@ -32,6 +32,54 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -874,10 +922,10 @@ function HeroCenteredScreenshot({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("z-10 items-center text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-8 text-4xl font-semibold text-pretty lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         imageSrc && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/hero-centered-screenshot.js

@@ -11,6 +11,54 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -853,10 +901,10 @@ function HeroCenteredScreenshot({
       pattern,
       patternOpacity,
       className: cn(className),
-      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden border-b border-muted", children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      children: /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
         /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 items-center text-center", contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-8 text-4xl font-semibold text-pretty lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-3xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         imageSrc && /* @__PURE__ */ jsx(

package/dist/hero-coming-soon-countdown.cjs

@@ -61,6 +61,36 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1009,9 +1039,9 @@ function HeroComingSoonCountdown({
         getNestedCardBg(background, "muted"),
         getNestedCardTextColor(background)
       ), children: item.value }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-2 text-sm text-muted-foreground", children: item.label })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.label })
     ] }, item.label));
-  }, [countdownSlot, countdownItems]);
+  }, [countdownSlot, countdownItems, background]);
   const renderForm = React.useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
@@ -1022,7 +1052,7 @@ function HeroComingSoonCountdown({
         {
           type: "email",
           placeholder: emailPlaceholder,
-          className: "h-12 flex-1 bg-muted/30 border-border/50"
+          className: cn("h-12 flex-1 border-border/50", `${getNestedCardBg(background, "muted")}/30`)
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -1047,12 +1077,12 @@ function HeroComingSoonCountdown({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:opacity-80", link.className),
+        className: cn(getTextColor(background, "muted"), "hover:opacity-80", link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
     ));
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, background]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1067,11 +1097,11 @@ function HeroComingSoonCountdown({
           getNestedCardTextColor(background),
           badgeClassName
         ), children: [
-          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "text-primary" }),
+          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16, className: getAccentColor(background) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
         ] }),
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
         (countdownSlot || countdownItems && countdownItems.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 grid grid-cols-4 gap-4 md:gap-8", countdownClassName), children: renderCountdown }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
         (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-6", socialLinksClassName), children: renderSocialLinks })

package/dist/hero-coming-soon-countdown.js

@@ -40,6 +40,36 @@ function getNestedCardTextColor(parentBg, options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   return isDark ? "text-foreground" : "";
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getAccentColor(parentBg, options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  return isDark ? "text-accent-foreground" : "text-primary";
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -988,9 +1018,9 @@ function HeroComingSoonCountdown({
         getNestedCardBg(background, "muted"),
         getNestedCardTextColor(background)
       ), children: item.value }),
-      /* @__PURE__ */ jsx("span", { className: "mt-2 text-sm text-muted-foreground", children: item.label })
+      /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.label })
     ] }, item.label));
-  }, [countdownSlot, countdownItems]);
+  }, [countdownSlot, countdownItems, background]);
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
@@ -1001,7 +1031,7 @@ function HeroComingSoonCountdown({
         {
           type: "email",
           placeholder: emailPlaceholder,
-          className: "h-12 flex-1 bg-muted/30 border-border/50"
+          className: cn("h-12 flex-1 border-border/50", `${getNestedCardBg(background, "muted")}/30`)
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1026,12 +1056,12 @@ function HeroComingSoonCountdown({
       Pressable,
       {
         href: link.href,
-        className: cn("text-muted-foreground hover:opacity-80", link.className),
+        className: cn(getTextColor(background, "muted"), "hover:opacity-80", link.className),
         children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
       },
       index
     ));
-  }, [socialLinksSlot, socialLinks]);
+  }, [socialLinksSlot, socialLinks, background]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -1046,11 +1076,11 @@ function HeroComingSoonCountdown({
           getNestedCardTextColor(background),
           badgeClassName
         ), children: [
-          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: "text-primary" }),
+          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: getAccentColor(background) }),
           /* @__PURE__ */ jsx("span", { children: badgeText })
         ] }),
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
         (countdownSlot || countdownItems && countdownItems.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 grid grid-cols-4 gap-4 md:gap-8", countdownClassName), children: renderCountdown }),
         /* @__PURE__ */ jsx("div", { className: cn("mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
         (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-6", socialLinksClassName), children: renderSocialLinks })

package/dist/hero-community-survey-cta.cjs

@@ -32,6 +32,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1038,7 +1064,7 @@ function HeroCommunitySurveyCta({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto max-w-4xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-8", children: [

package/dist/hero-community-survey-cta.js

@@ -11,6 +11,32 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1017,7 +1043,7 @@ function HeroCommunitySurveyCta({
         /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col gap-7 text-center", containerClassName), children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl text-muted-foreground lg:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-4xl lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative px-8", children: [

package/dist/hero-conversation-intelligence.cjs

@@ -60,6 +60,54 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -918,7 +966,7 @@ function HeroConversationIntelligence({
           className: "w-full rounded-xl bg-[linear-gradient(var(--color-muted),transparent)]"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-muted2 absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: image.src,
@@ -951,7 +999,7 @@ function HeroConversationIntelligence({
               `after:${getNestedCardBg(background)}`
             ), children: headingHighlight })
           ] }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderImage })

package/dist/hero-conversation-intelligence.js

@@ -38,6 +38,54 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+function getTextColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-foreground/80";
+      case "subtle":
+        return "text-foreground/60";
+      case "accent":
+        return "text-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "text-foreground";
+      case "muted":
+        return "text-muted-foreground";
+      case "subtle":
+        return "text-muted-foreground/70";
+      case "accent":
+        return "text-primary";
+    }
+  }
+}
+function getBorderColor(parentBg, variant = "default", options) {
+  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
+  if (isDark) {
+    switch (variant) {
+      case "default":
+        return "border-foreground/20";
+      case "muted":
+        return "border-foreground/10";
+      case "accent":
+        return "border-accent-foreground";
+    }
+  } else {
+    switch (variant) {
+      case "default":
+        return "border-border";
+      case "muted":
+        return "border-muted";
+      case "accent":
+        return "border-primary";
+    }
+  }
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -896,7 +944,7 @@ function HeroConversationIntelligence({
           className: "w-full rounded-xl bg-[linear-gradient(var(--color-muted),transparent)]"
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "border-muted2 absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: cn("absolute top-1/2 left-1/2 z-10 w-[87.69%] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.594405594 / 1, children: /* @__PURE__ */ jsx(
         Img,
         {
           src: image.src,
@@ -929,7 +977,7 @@ function HeroConversationIntelligence({
               `after:${getNestedCardBg(background)}`
             ), children: headingHighlight })
           ] }),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl leading-normal text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-5", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsx("div", { children: renderImage })