@opensite/ui 0.8.9 → 0.9.1

package/dist/hero-productivity-launcher-video.cjs

@@ -31,6 +31,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:")) {
@@ -973,7 +999,7 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = React.useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-6 text-xs", getTextColor(background, "muted")), children: [
       versionInfo.version && /* @__PURE__ */ jsxRuntime.jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
@@ -989,7 +1015,7 @@ function HeroProductivityLauncherVideo({
         className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
         children: [
           secondaryCta.primaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1", getTextColor(background, "muted")), children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.secondaryText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               DynamicIcon,
@@ -1029,7 +1055,7 @@ function HeroProductivityLauncherVideo({
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,

package/dist/hero-productivity-launcher-video.js

@@ -10,6 +10,32 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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:")) {
@@ -952,7 +978,7 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-6 text-xs", getTextColor(background, "muted")), children: [
       versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
@@ -968,7 +994,7 @@ function HeroProductivityLauncherVideo({
         className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
         children: [
           secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1", getTextColor(background, "muted")), children: [
             /* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
             /* @__PURE__ */ jsx(
               DynamicIcon,
@@ -1008,7 +1034,7 @@ function HeroProductivityLauncherVideo({
         /* @__PURE__ */ jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
             /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,

package/dist/hero-saas-dashboard-preview.cjs

@@ -62,6 +62,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:")) {
@@ -1010,7 +1040,7 @@ function HeroSaasDashboardPreview({
         {
           name: badgeIcon,
           size: 16,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       ),
       badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
@@ -1040,7 +1070,7 @@ function HeroSaasDashboardPreview({
           }
         )
       ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: emailForm.helperText }) : emailForm.helperText)
+      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted")), children: emailForm.helperText }) : emailForm.helperText)
     ] });
   }, [emailFormSlot, emailForm]);
   const renderBrowserPreview = React.useMemo(() => {
@@ -1061,7 +1091,7 @@ function HeroSaasDashboardPreview({
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-3 rounded-full bg-success" })
           ] }),
-          browserPreview.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 text-center text-sm text-muted-foreground", children: browserPreview.url })
+          browserPreview.url && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 text-center text-sm", getTextColor(background, "muted")), children: browserPreview.url })
         ] }),
         browserPreview.image && /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
@@ -1087,7 +1117,7 @@ function HeroSaasDashboardPreview({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),
         renderBrowserPreview

package/dist/hero-saas-dashboard-preview.js

@@ -41,6 +41,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:")) {
@@ -989,7 +1019,7 @@ function HeroSaasDashboardPreview({
         {
           name: badgeIcon,
           size: 16,
-          className: "text-primary"
+          className: getAccentColor(background)
         }
       ),
       badgeText && /* @__PURE__ */ jsx("span", { children: badgeText })
@@ -1019,7 +1049,7 @@ function HeroSaasDashboardPreview({
           }
         )
       ] }) }),
-      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: emailForm.helperText }) : emailForm.helperText)
+      emailForm.helperText && (typeof emailForm.helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted")), children: emailForm.helperText }) : emailForm.helperText)
     ] });
   }, [emailFormSlot, emailForm]);
   const renderBrowserPreview = useMemo(() => {
@@ -1040,7 +1070,7 @@ function HeroSaasDashboardPreview({
             /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-accent" }),
             /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-success" })
           ] }),
-          browserPreview.url && /* @__PURE__ */ jsx("div", { className: "flex-1 text-center text-sm text-muted-foreground", children: browserPreview.url })
+          browserPreview.url && /* @__PURE__ */ jsx("div", { className: cn("flex-1 text-center text-sm", getTextColor(background, "muted")), children: browserPreview.url })
         ] }),
         browserPreview.image && /* @__PURE__ */ jsx(
           Img,
@@ -1066,7 +1096,7 @@ function HeroSaasDashboardPreview({
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
           renderBadge,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderEmailForm
         ] }),
         renderBrowserPreview

package/dist/hero-shared-inbox-layered.cjs

@@ -35,6 +35,54 @@ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatio
 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 AspectRatio({
   ...props
 }) {
@@ -460,12 +508,12 @@ function HeroSharedInboxLayered({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn("relative border-b border-muted bg-background", className),
+      className: cn("relative border-b bg-background", getBorderColor(background, "muted"), className),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] 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-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLayeredImages })
       ] }) })

package/dist/hero-shared-inbox-layered.js

@@ -10,6 +10,54 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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 AspectRatio({
   ...props
 }) {
@@ -435,12 +483,12 @@ function HeroSharedInboxLayered({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn("relative border-b border-muted bg-background", className),
+      className: cn("relative border-b bg-background", getBorderColor(background, "muted"), className),
       children: /* @__PURE__ */ jsx("div", { className: cn("container pt-10", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center gap-2 md:gap-4 lg:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("flex w-full max-w-125 flex-col gap-9 lg:max-w-150 lg:py-[20%] xl:py-[26%]", contentClassName), children: [
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "font-mono text-[clamp(0.875rem,0.875vw,1rem)] text-muted-foreground", children: subtitle }) : subtitle),
+          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("font-mono text-[clamp(0.875rem,0.875vw,1rem)]", getTextColor(background, "muted")), children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[clamp(3.5rem,calc(6.5vw+2.3rem),9.5rem)] leading-[0.85] tracking-[-0.03em] ", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-[clamp(1.125rem,1.125vw,1.4rem)] 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-[clamp(1.125rem,1.125vw,1.4rem)] leading-normal", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsx("div", { children: renderLayeredImages })
       ] }) })

package/dist/hero-simple-centered-image.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:")) {
@@ -878,7 +904,7 @@ function HeroSimpleCenteredImage({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", 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("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
         ] }),
         imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/hero-simple-centered-image.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:")) {
@@ -857,7 +883,7 @@ function HeroSimpleCenteredImage({
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center text-center", containerClassName, contentClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-3 text-3xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl text-muted-foreground lg:mb-12 lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-6 max-w-xl lg:mb-12 lg:text-2xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex gap-2 lg:mb-12", actionsClassName), children: renderActions })
         ] }),
         imageSrc && /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsx("div", { className: cn("aspect-video mask-[linear-gradient(#000_80%,transparent_100%)]", imageWrapperClassName), children: /* @__PURE__ */ jsx(

package/dist/hero-software-growth-video-dialog.cjs

@@ -36,6 +36,54 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 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:")) {
@@ -1106,7 +1154,7 @@ function HeroSoftwareGrowthVideoDialog({
       { index: 2, className: "absolute -bottom-[14%] left-[51%] w-[38.19%] max-w-137.5", ratio: 1.686153846 / 1 },
       { index: 3, className: "absolute -bottom-[30%] left-[10.7%] w-[38.19%] max-w-137.5", ratio: 1.415041783 / 1 }
     ];
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-muted2 relative aspect-[2.716981132/1] w-full border", children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: posClassName, children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full py-[16%]", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-[2.716981132/1] w-full border", getBorderColor(background, "muted")), children: imageConfigs.map(({ index, className: posClassName, ratio }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: posClassName, children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio, children: /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
         src: showcaseImages[index].src,
@@ -1124,7 +1172,7 @@ function HeroSoftwareGrowthVideoDialog({
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container max-w-[1440px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[1000px] text-center text-[3.125rem] leading-none md:text-[4.25rem] lg:text-[5.5rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-212.5 text-center text-lg leading-snug md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
           ] }),
           renderShowcaseImages