@opensite/ui 0.8.5 → 0.8.7

package/dist/comparison-table-tabs.js

@@ -633,12 +633,12 @@ function ComparisonTableTabs({
   const [selectedTab, setSelectedTab] = useState(models?.[0]?.name || "");
   const renderStatusIcon = React.useCallback((status) => {
     if (status === "positive") {
-      return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-green-200 bg-green-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-green-700" }) });
+      return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-success/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check", size: 16, className: "text-success" }) });
     }
     if (status === "negative") {
-      return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-red-200 bg-red-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-red-700" }) });
+      return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-destructive/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-x", size: 16, className: "text-destructive" }) });
     }
-    return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border border-amber-200 bg-amber-100", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-minus", size: 16, className: "text-amber-700" }) });
+    return /* @__PURE__ */ jsx("span", { className: "flex size-8 items-center justify-center rounded-full border bg-accent/10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-minus", size: 16, className: "text-accent" }) });
   }, []);
   const tableContent = React.useMemo(() => {
     if (tableSlot) return tableSlot;
@@ -659,7 +659,7 @@ function ComparisonTableTabs({
             TableHead,
             {
               className: cn(
-                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium text-primary after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border",
+                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-base font-medium after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border",
                 tableHeaderClassName
               ),
               children: "Feature"
@@ -669,7 +669,7 @@ function ComparisonTableTabs({
             TableHead,
             {
               className: cn(
-                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium text-primary after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border md:table-cell",
+                "sticky top-0 mb-24 w-1/4 bg-background p-5 text-center text-base font-medium after:absolute after:right-0 after:-bottom-px after:left-0 after:h-px after:bg-border md:table-cell",
                 model.name !== selectedTab ? "hidden" : "",
                 tableHeaderClassName
               ),

package/dist/comparison-table-tooltips.cjs

@@ -585,7 +585,7 @@ function ComparisonTableTooltips({
         optionALabel && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
         optionBLabel && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { className: "text-foreground", children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
         /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })

package/dist/comparison-table-tooltips.js

@@ -563,7 +563,7 @@ function ComparisonTableTooltips({
         optionALabel && /* @__PURE__ */ jsx(TableHead, { className: cn("bg-muted px-6 py-4 font-semibold", tableHeaderClassName), children: optionALabel }),
         optionBLabel && /* @__PURE__ */ jsx(TableHead, { className: cn("px-6 py-4 font-semibold", tableHeaderClassName), children: optionBLabel })
       ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { className: "text-foreground", children: rows.map((row, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, idx) => /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: row.feature }),
         /* @__PURE__ */ jsx(TableCell, { className: cn("bg-muted px-6 py-4", tableCellClassName), children: renderCellContent(row.optionA, true) }),
         /* @__PURE__ */ jsx(TableCell, { className: cn("px-6 py-4", tableCellClassName), children: renderCellContent(row.optionB, false) })

package/dist/comparison-table-two-column.cjs

@@ -556,7 +556,7 @@ function ComparisonTableTwoColumn({
               className: "h-7 md:h-8",
               optixFlowConfig
             }
-          ) : optionALabel && (typeof optionALabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-success", children: optionALabel }) : optionALabel) }),
+          ) : optionALabel && (typeof optionALabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: optionALabel }) : optionALabel) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center rounded-t-md bg-destructive/10 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
@@ -565,7 +565,7 @@ function ComparisonTableTwoColumn({
               className: "h-7 md:h-8",
               optixFlowConfig
             }
-          ) : optionBLabel && (typeof optionBLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold text-destructive", children: optionBLabel }) : optionBLabel) }),
+          ) : optionBLabel && (typeof optionBLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold", children: optionBLabel }) : optionBLabel) }),
           rows.map((row, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-b bg-success/5 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [

package/dist/comparison-table-two-column.js

@@ -535,7 +535,7 @@ function ComparisonTableTwoColumn({
               className: "h-7 md:h-8",
               optixFlowConfig
             }
-          ) : optionALabel && (typeof optionALabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-success", children: optionALabel }) : optionALabel) }),
+          ) : optionALabel && (typeof optionALabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: optionALabel }) : optionALabel) }),
           /* @__PURE__ */ jsx("div", { className: cn("flex items-center rounded-t-md bg-destructive/10 p-3 md:p-4", optionBCellClassName), children: optionBLogo ? /* @__PURE__ */ jsx(
             Img,
             {
@@ -544,7 +544,7 @@ function ComparisonTableTwoColumn({
               className: "h-7 md:h-8",
               optixFlowConfig
             }
-          ) : optionBLabel && (typeof optionBLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-destructive", children: optionBLabel }) : optionBLabel) }),
+          ) : optionBLabel && (typeof optionBLabel === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: optionBLabel }) : optionBLabel) }),
           rows.map((row, idx) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "flex items-center border-b p-3 text-base font-medium md:p-4 md:text-lg", children: row.label }),
             /* @__PURE__ */ jsx("div", { className: cn("border-b bg-success/5 p-3 md:p-6", optionACellClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [

package/dist/components.cjs

@@ -830,7 +830,6 @@ var ImageSlider = ({
               img.Img,
               {
                 src: activeImage.src,
-                mediaId: activeImage.mediaId,
                 alt: activeImage.alt,
                 className: cn(
                   "h-full w-full object-cover object-center",
@@ -842,7 +841,7 @@ var ImageSlider = ({
               }
             )
           },
-          `${currentIndex}-${activeImage.src ?? activeImage.mediaId ?? "image"}`
+          `${currentIndex}-${activeImage.src ?? "image"}`
         ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1682,13 +1681,13 @@ function AboutSplitHero({
   const bgColorClass = React4.useMemo(() => {
     switch (background) {
       case "dark":
-        return "bg-gray-900 text-white";
+        return "bg-foreground text-background";
       case "gray":
-        return "bg-gray-100 text-gray-900";
+        return "bg-muted";
       case "white":
-        return "bg-white text-gray-900";
+        return "bg-background";
       default:
-        return "bg-background text-foreground";
+        return "bg-background";
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
@@ -1940,7 +1939,7 @@ function AboutMissionPrinciples({
                   "p",
                   {
                     className: cn(
-                      "mb-4 text-foreground/80",
+                      "mb-4 text-muted-foreground",
                       visionDescriptionClassName
                     ),
                     children: visionDescription
@@ -3024,7 +3023,7 @@ function FooterSimpleCentered({
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            "text-sm text-muted-foreground transition-colors hover:text-primary",
             sitemapLinkClassName
           ),
           children: link.label
@@ -3041,7 +3040,7 @@ function FooterSimpleCentered({
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            "text-sm text-muted-foreground transition-colors hover:text-primary",
             bottomLinkClassName
           ),
           children: link.text
@@ -3480,7 +3479,7 @@ function FooterCtaBanner({
               {
                 href: social.href,
                 "aria-label": social.label,
-                className: cn("text-muted-foreground transition-colors hover:text-foreground", socialLinkClassName),
+                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
                 children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: social.icon, size: 20 })
               }
             ) }, idx)) })
@@ -3491,7 +3490,7 @@ function FooterCtaBanner({
               Pressable,
               {
                 href: link.href,
-                className: cn("hover:text-foreground", navLinkClassName),
+                className: cn("hover:text-primary", navLinkClassName),
                 children: link.name
               }
             ) }, linkIdx)) })
@@ -3504,14 +3503,14 @@ function FooterCtaBanner({
               Pressable,
               {
                 href: attributionHref,
-                className: "hover:text-foreground",
+                className: "hover:text-primary",
                 target: "_blank",
                 rel: "noopener noreferrer",
                 children: attributionText
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, className: cn("hover:text-foreground", legalLinkClassName), children: link.name }) }, idx)) })
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.href, className: cn("hover:text-primary", legalLinkClassName), children: link.name }) }, idx)) })
         ] })
       ] }) })
     }
@@ -3847,7 +3846,7 @@ function FooterAnimatedSocial({
           Pressable,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80", socialLinkClassName),
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-medium", children: link.name }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -3885,7 +3884,7 @@ function FooterAnimatedSocial({
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxRuntime.jsxs(framerMotion.motion.div, { variants: itemVariants, className: "space-y-6", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl leading-tight font-bold text-foreground lg:text-5xl", headingClassName), children: heading }),
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-md text-lg leading-relaxed text-muted-foreground", descriptionClassName), children: description })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3922,7 +3921,7 @@ function FooterAnimatedSocial({
                       framerMotion.motion.a,
                       {
                         href: attributionHref,
-                        className: "underline underline-offset-4 transition-colors hover:text-foreground",
+                        className: "underline underline-offset-4 transition-colors hover:text-primary",
                         whileHover: { scale: 1.05 },
                         transition: {
                           type: "spring",
@@ -4113,7 +4112,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("tracking-tight text-foreground hover:text-foreground/30", navLinkClassName),
+        className: cn("tracking-tight hover:text-muted-foreground", navLinkClassName),
         children: item.label
       }
     ) }, idx));
@@ -4124,7 +4123,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30", socialLinkClassName),
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName),
         children: [
           item.label,
           " ",
@@ -4133,7 +4132,7 @@ function FooterNewsletterMinimal({
             {
               name: "lucide/arrow-up-right",
               size: 14,
-              className: "text-foreground group-hover:text-muted-foreground/50"
+              className: "group-hover:text-muted-foreground/50"
             }
           )
         ]
@@ -4146,7 +4145,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30", footerLinkClassName),
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", footerLinkClassName),
         children: item.label
       }
     ) }, item.label));
@@ -4272,7 +4271,7 @@ function FooterNewsletterMinimal({
             Pressable,
             {
               href: attributionHref,
-              className: "mt-2 inline-block hover:text-foreground",
+              className: "mt-2 inline-block hover:text-primary",
               target: "_blank",
               rel: "noopener noreferrer",
               children: attributionText
@@ -4368,7 +4367,7 @@ function FooterCtaSocial({
           Pressable,
           {
             href: `mailto:${email}`,
-            className: "transition-colors hover:text-foreground",
+            className: "transition-colors hover:text-primary",
             children: email
           }
         ) }),
@@ -4378,7 +4377,7 @@ function FooterCtaSocial({
             Pressable,
             {
               href: attributionHref,
-              className: "mt-2 inline-block hover:text-foreground",
+              className: "mt-2 inline-block hover:text-primary",
               target: "_blank",
               rel: "noopener noreferrer",
               children: attributionText

package/dist/components.js

@@ -807,7 +807,6 @@ var ImageSlider = ({
               Img,
               {
                 src: activeImage.src,
-                mediaId: activeImage.mediaId,
                 alt: activeImage.alt,
                 className: cn(
                   "h-full w-full object-cover object-center",
@@ -819,7 +818,7 @@ var ImageSlider = ({
               }
             )
           },
-          `${currentIndex}-${activeImage.src ?? activeImage.mediaId ?? "image"}`
+          `${currentIndex}-${activeImage.src ?? "image"}`
         ) : null }),
         overlayContent,
         children ? /* @__PURE__ */ jsx(
@@ -1659,13 +1658,13 @@ function AboutSplitHero({
   const bgColorClass = useMemo(() => {
     switch (background) {
       case "dark":
-        return "bg-gray-900 text-white";
+        return "bg-foreground text-background";
       case "gray":
-        return "bg-gray-100 text-gray-900";
+        return "bg-muted";
       case "white":
-        return "bg-white text-gray-900";
+        return "bg-background";
       default:
-        return "bg-background text-foreground";
+        return "bg-background";
     }
   }, [background]);
   const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
@@ -1917,7 +1916,7 @@ function AboutMissionPrinciples({
                   "p",
                   {
                     className: cn(
-                      "mb-4 text-foreground/80",
+                      "mb-4 text-muted-foreground",
                       visionDescriptionClassName
                     ),
                     children: visionDescription
@@ -3001,7 +3000,7 @@ function FooterSimpleCentered({
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            "text-sm text-muted-foreground transition-colors hover:text-primary",
             sitemapLinkClassName
           ),
           children: link.label
@@ -3018,7 +3017,7 @@ function FooterSimpleCentered({
         {
           href: link.href,
           className: cn(
-            "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            "text-sm text-muted-foreground transition-colors hover:text-primary",
             bottomLinkClassName
           ),
           children: link.text
@@ -3457,7 +3456,7 @@ function FooterCtaBanner({
               {
                 href: social.href,
                 "aria-label": social.label,
-                className: cn("text-muted-foreground transition-colors hover:text-foreground", socialLinkClassName),
+                className: cn("text-muted-foreground transition-colors hover:text-primary", socialLinkClassName),
                 children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 20 })
               }
             ) }, idx)) })
@@ -3468,7 +3467,7 @@ function FooterCtaBanner({
               Pressable,
               {
                 href: link.href,
-                className: cn("hover:text-foreground", navLinkClassName),
+                className: cn("hover:text-primary", navLinkClassName),
                 children: link.name
               }
             ) }, linkIdx)) })
@@ -3481,14 +3480,14 @@ function FooterCtaBanner({
               Pressable,
               {
                 href: attributionHref,
-                className: "hover:text-foreground",
+                className: "hover:text-primary",
                 target: "_blank",
                 rel: "noopener noreferrer",
                 children: attributionText
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:text-foreground", legalLinkClassName), children: link.name }) }, idx)) })
+          /* @__PURE__ */ jsx("ul", { className: cn("flex gap-4", legalLinksClassName), children: legalLinks?.map((link, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Pressable, { href: link.href, className: cn("hover:text-primary", legalLinkClassName), children: link.name }) }, idx)) })
         ] })
       ] }) })
     }
@@ -3824,7 +3823,7 @@ function FooterAnimatedSocial({
           Pressable,
           {
             href: link.href,
-            className: cn("group flex items-center gap-2 py-2 text-foreground transition-colors hover:text-foreground/80", socialLinkClassName),
+            className: cn("group flex items-center gap-2 py-2 transition-colors hover:text-muted-foreground", socialLinkClassName),
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-xl font-medium", children: link.name }),
               /* @__PURE__ */ jsx(
@@ -3862,7 +3861,7 @@ function FooterAnimatedSocial({
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("space-y-8", leftColumnClassName), children: [
                 /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "space-y-6", children: [
-                  /* @__PURE__ */ jsx("h2", { className: cn("text-4xl leading-tight font-bold text-foreground lg:text-5xl", headingClassName), children: heading }),
+                  /* @__PURE__ */ jsx("h2", { className: cn("text-4xl leading-tight font-bold lg:text-5xl", headingClassName), children: heading }),
                   /* @__PURE__ */ jsx("p", { className: cn("max-w-md text-lg leading-relaxed text-muted-foreground", descriptionClassName), children: description })
                 ] }),
                 ctaUrl && ctaText && /* @__PURE__ */ jsx(motion.div, { variants: itemVariants, children: /* @__PURE__ */ jsx(
@@ -3899,7 +3898,7 @@ function FooterAnimatedSocial({
                       motion.a,
                       {
                         href: attributionHref,
-                        className: "underline underline-offset-4 transition-colors hover:text-foreground",
+                        className: "underline underline-offset-4 transition-colors hover:text-primary",
                         whileHover: { scale: 1.05 },
                         transition: {
                           type: "spring",
@@ -4090,7 +4089,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("tracking-tight text-foreground hover:text-foreground/30", navLinkClassName),
+        className: cn("tracking-tight hover:text-muted-foreground", navLinkClassName),
         children: item.label
       }
     ) }, idx));
@@ -4101,7 +4100,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30", socialLinkClassName),
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", socialLinkClassName),
         children: [
           item.label,
           " ",
@@ -4110,7 +4109,7 @@ function FooterNewsletterMinimal({
             {
               name: "lucide/arrow-up-right",
               size: 14,
-              className: "text-foreground group-hover:text-muted-foreground/50"
+              className: "group-hover:text-muted-foreground/50"
             }
           )
         ]
@@ -4123,7 +4122,7 @@ function FooterNewsletterMinimal({
       Pressable,
       {
         href: item.href,
-        className: cn("group flex items-center gap-1 tracking-tight text-foreground hover:text-foreground/30", footerLinkClassName),
+        className: cn("group flex items-center gap-1 tracking-tight hover:text-muted-foreground", footerLinkClassName),
         children: item.label
       }
     ) }, item.label));
@@ -4249,7 +4248,7 @@ function FooterNewsletterMinimal({
             Pressable,
             {
               href: attributionHref,
-              className: "mt-2 inline-block hover:text-foreground",
+              className: "mt-2 inline-block hover:text-primary",
               target: "_blank",
               rel: "noopener noreferrer",
               children: attributionText
@@ -4345,7 +4344,7 @@ function FooterCtaSocial({
           Pressable,
           {
             href: `mailto:${email}`,
-            className: "transition-colors hover:text-foreground",
+            className: "transition-colors hover:text-primary",
             children: email
           }
         ) }),
@@ -4355,7 +4354,7 @@ function FooterCtaSocial({
             Pressable,
             {
               href: attributionHref,
-              className: "mt-2 inline-block hover:text-foreground",
+              className: "mt-2 inline-block hover:text-primary",
               target: "_blank",
               rel: "noopener noreferrer",
               children: attributionText

package/dist/contact-emergency.cjs

@@ -1446,7 +1446,7 @@ function ContactEmergency({
                   /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
                     /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Expected response:" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: selectedPriority?.response })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: selectedPriority?.response })
                   ] }),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                     Pressable,

package/dist/contact-emergency.js

@@ -1423,7 +1423,7 @@ function ContactEmergency({
                   /* @__PURE__ */ jsx(Separator, {}),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
                     /* @__PURE__ */ jsx("span", { children: "Expected response:" }),
-                    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: selectedPriority?.response })
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: selectedPriority?.response })
                   ] }),
                   actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                     Pressable,

package/dist/contact-help-center.cjs

@@ -962,7 +962,7 @@ function ContactHelpCenter({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-foreground", children: item.title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold", children: item.title }),
             item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: item.subtitle }) : null
           ] })
         ]
@@ -1001,7 +1001,7 @@ function ContactHelpCenter({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-bold text-foreground md:text-4xl",
+                    "text-3xl font-bold md:text-4xl",
                     headingClassName
                   ),
                   children: heading
@@ -1030,7 +1030,7 @@ function ContactHelpCenter({
                     "h3",
                     {
                       className: cn(
-                        "text-xl font-bold text-foreground",
+                        "text-xl font-bold",
                         cardTitleClassName
                       ),
                       children: cardTitle

package/dist/contact-help-center.js

@@ -941,7 +941,7 @@ function ContactHelpCenter({
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 20 }) }),
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: item.title }),
+            /* @__PURE__ */ jsx("p", { className: "font-semibold", children: item.title }),
             item.subtitle ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.subtitle }) : null
           ] })
         ]
@@ -980,7 +980,7 @@ function ContactHelpCenter({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-bold text-foreground md:text-4xl",
+                    "text-3xl font-bold md:text-4xl",
                     headingClassName
                   ),
                   children: heading
@@ -1009,7 +1009,7 @@ function ContactHelpCenter({
                     "h3",
                     {
                       className: cn(
-                        "text-xl font-bold text-foreground",
+                        "text-xl font-bold",
                         cardTitleClassName
                       ),
                       children: cardTitle

package/dist/cta-background-icon-badge.cjs

@@ -1002,7 +1002,7 @@ function CtaBackgroundIconBadge({
             cardClassName
           ),
           style: backgroundImage ? {
-            backgroundImage: `linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('${backgroundImage}')`
+            backgroundImage: `linear-gradient(hsl(var(--foreground) / 0.6), hsl(var(--foreground) / 0.6)), url('${backgroundImage}')`
           } : void 0,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
             "div",

package/dist/cta-background-icon-badge.js

@@ -981,7 +981,7 @@ function CtaBackgroundIconBadge({
             cardClassName
           ),
           style: backgroundImage ? {
-            backgroundImage: `linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('${backgroundImage}')`
+            backgroundImage: `linear-gradient(hsl(var(--foreground) / 0.6), hsl(var(--foreground) / 0.6)), url('${backgroundImage}')`
           } : void 0,
           children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
             "div",

package/dist/cta-enterprise-dark-features.cjs

@@ -967,7 +967,7 @@ function CtaEnterpriseDarkFeatures({
           variant: action.variant,
           size: action.size,
           className: cn(
-            isOutlineOnDark && "border-white/30 text-white hover:bg-white/10",
+            isOutlineOnDark && "border-background/30 text-background hover:bg-background/10",
             action.className
           ),
           "aria-label": action["aria-label"],
@@ -997,12 +997,12 @@ function CtaEnterpriseDarkFeatures({
       {
         className: cn("flex items-center gap-3", feature.className),
         children: [
-          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-white/10", children: feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-background/10", children: feature.icon ?? (feature.iconName && /* @__PURE__ */ jsxRuntime.jsx(
             DynamicIcon,
             {
               name: feature.iconName,
               size: 16,
-              className: "text-white"
+              className: "text-background"
             }
           )) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.text })
@@ -1023,7 +1023,7 @@ function CtaEnterpriseDarkFeatures({
         "div",
         {
           className: cn(
-            "relative overflow-hidden rounded-2xl bg-slate-900 p-8 text-white md:p-12 lg:p-16",
+            "relative overflow-hidden rounded-2xl bg-foreground p-8 text-background md:p-12 lg:p-16",
             cardClassName
           ),
           children: [
@@ -1043,7 +1043,7 @@ function CtaEnterpriseDarkFeatures({
                   "p",
                   {
                     className: cn(
-                      "mb-8 text-lg text-slate-300",
+                      "mb-8 text-lg text-background/80",
                       descriptionClassName
                     ),
                     children: description

package/dist/cta-enterprise-dark-features.js

@@ -946,7 +946,7 @@ function CtaEnterpriseDarkFeatures({
           variant: action.variant,
           size: action.size,
           className: cn(
-            isOutlineOnDark && "border-white/30 text-white hover:bg-white/10",
+            isOutlineOnDark && "border-background/30 text-background hover:bg-background/10",
             action.className
           ),
           "aria-label": action["aria-label"],
@@ -976,12 +976,12 @@ function CtaEnterpriseDarkFeatures({
       {
         className: cn("flex items-center gap-3", feature.className),
         children: [
-          (feature.icon || feature.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-white/10", children: feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(
+          (feature.icon || feature.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-background/10", children: feature.icon ?? (feature.iconName && /* @__PURE__ */ jsx(
             DynamicIcon,
             {
               name: feature.iconName,
               size: 16,
-              className: "text-white"
+              className: "text-background"
             }
           )) }),
           /* @__PURE__ */ jsx("span", { children: feature.text })
@@ -1002,7 +1002,7 @@ function CtaEnterpriseDarkFeatures({
         "div",
         {
           className: cn(
-            "relative overflow-hidden rounded-2xl bg-slate-900 p-8 text-white md:p-12 lg:p-16",
+            "relative overflow-hidden rounded-2xl bg-foreground p-8 text-background md:p-12 lg:p-16",
             cardClassName
           ),
           children: [
@@ -1022,7 +1022,7 @@ function CtaEnterpriseDarkFeatures({
                   "p",
                   {
                     className: cn(
-                      "mb-8 text-lg text-slate-300",
+                      "mb-8 text-lg text-background/80",
                       descriptionClassName
                     ),
                     children: description