@opensite/ui 0.8.9 → 0.9.1

package/dist/footer-comprehensive-links.js

@@ -564,6 +564,34 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -830,34 +858,87 @@ function PatternBackground({
     }
   );
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
+var backgroundStyles = {
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
+  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
 };
-var Container = React__default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsx(
-      Component,
+var spacingStyles = {
+  none: "py-0 md:py-0",
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40"
+};
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
+var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
+var Section = React__default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "default",
+    spacing = "lg",
+    pattern,
+    patternOpacity,
+    patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
+    ...props
+  }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
+    return /* @__PURE__ */ jsxs(
+      "section",
       {
         ref,
+        id,
         className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
+          "relative",
+          pattern ? "overflow-hidden" : null,
+          backgroundStyles[background],
+          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
           className
         ),
+        style,
         ...props,
-        children
+        children: [
+          /* @__PURE__ */ jsx(
+            PatternBackground,
+            {
+              pattern,
+              opacity: effectivePatternOpacity,
+              className: patternClassName
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
       }
     );
   }
 );
-Container.displayName = "Container";
+Section.displayName = "Section";
 var socialIconMap = {
   facebook: "simple-icons/facebook",
   x: "simple-icons/x",
@@ -888,155 +969,154 @@ function FooterComprehensiveLinks({
   const year = useMemo(() => (/* @__PURE__ */ new Date()).getFullYear(), []);
   const copyrightText = copyright || `\xA9 ${year} ${companyName || ""}. All rights reserved.`;
   return /* @__PURE__ */ jsxs(
-    "footer",
+    Section,
     {
-      className: cn(
-        "relative overflow-hidden",
-        className
-      ),
+      background,
+      spacing: "lg",
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName: "relative z-10",
       children: [
-        /* @__PURE__ */ jsx(PatternBackground, { pattern, opacity: patternOpacity }),
-        /* @__PURE__ */ jsxs(Container, { className: "relative z-10 py-12 lg:py-16", children: [
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:gap-12", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-12", children: [
-              (logoSrc || tagline || summary) && /* @__PURE__ */ jsx("div", { className: "sm:col-span-2 lg:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                logoSrc && /* @__PURE__ */ jsx(Pressable, { href: logoHref || "/", className: "inline-flex w-fit", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: logoSrc,
-                    alt: logoAlt || "Logo",
-                    className: "h-9 w-auto",
-                    loading: "eager",
-                    optixFlowConfig
-                  }
-                ) }),
-                tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: tagline }),
-                summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
-              ] }) }),
-              linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: column.title }),
-                /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:gap-12", children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-12", children: [
+            (logoSrc || tagline || summary) && /* @__PURE__ */ jsx("div", { className: "sm:col-span-2 lg:col-span-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              logoSrc && /* @__PURE__ */ jsx(Pressable, { href: logoHref || "/", className: "inline-flex w-fit", children: /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: logoSrc,
+                  alt: logoAlt || "Logo",
+                  className: "h-9 w-auto",
+                  loading: "eager",
+                  optixFlowConfig
+                }
+              ) }),
+              tagline && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: tagline }),
+              summary && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: summary })
+            ] }) }),
+            linkColumns && linkColumns.length > 0 && linkColumns.map((column) => /* @__PURE__ */ jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: column.title }),
+              /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2.5", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "text-sm text-muted-foreground transition-colors hover:text-primary",
+                  children: link.label
+                }
+              ) }, link.href)) })
+            ] }) }, column.title)),
+            contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
+              contact ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
+                /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
+                  contact.email ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: contact.email,
+                      className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/mail",
+                            size: 16,
+                            className: "text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.email })
+                      ]
+                    }
+                  ) }) : null,
+                  contact.phone ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: contact.phone,
+                      className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/phone",
+                            size: 16,
+                            className: "text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.phone })
+                      ]
+                    }
+                  ) }) : null,
+                  contact.address ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      href: `https://maps.google.com/?q=${encodeURIComponent(
+                        contact.address
+                      )}`,
+                      className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/map-pin",
+                            size: 16,
+                            className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.address })
+                      ]
+                    }
+                  ) }) : null
+                ] })
+              ] }) : null,
+              (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     href: link.href,
-                    className: "text-sm text-muted-foreground transition-colors hover:text-primary",
-                    children: link.label
-                  }
-                ) }, link.href)) })
-              ] }) }, column.title)),
-              contact || (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:col-span-3", children: [
-                contact ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Contact" }),
-                  /* @__PURE__ */ jsxs("ul", { className: "flex flex-col gap-3", children: [
-                    contact.email ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
+                    "aria-label": link.label || `Follow us on ${link.platform}`,
+                    className: cn(
+                      "flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-muted/80 hover:text-primary",
+                      getNestedCardBg(background),
+                      getNestedCardTextColor(background)
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      DynamicIcon,
                       {
-                        href: contact.email,
-                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/mail",
-                              size: 16,
-                              className: "text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.email })
-                        ]
+                        name: socialIconMap[link.platform],
+                        size: 16
                       }
-                    ) }) : null,
-                    contact.phone ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: contact.phone,
-                        className: "group flex items-center gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/phone",
-                              size: 16,
-                              className: "text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.phone })
-                        ]
-                      }
-                    ) }) : null,
-                    contact.address ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: `https://maps.google.com/?q=${encodeURIComponent(
-                          contact.address
-                        )}`,
-                        className: "group flex items-start gap-2.5 text-sm text-muted-foreground transition-colors hover:text-primary",
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: "lucide/map-pin",
-                              size: 16,
-                              className: "mt-0.5 text-muted-foreground transition-colors group-hover:text-primary"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("span", { className: "underline underline-offset-2", children: contact.address })
-                        ]
-                      }
-                    ) }) : null
-                  ] })
-                ] }) : null,
-                (socialLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Follow Us" }),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: socialLinks?.map((link) => /* @__PURE__ */ jsx(
-                    Pressable,
-                    {
-                      href: link.href,
-                      "aria-label": link.label || `Follow us on ${link.platform}`,
-                      className: cn(
-                        "flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-muted/80 hover:text-primary",
-                        getNestedCardBg(background),
-                        getNestedCardTextColor(background)
-                      ),
-                      children: /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: socialIconMap[link.platform],
-                          size: 16
-                        }
-                      )
-                    },
-                    `${link.platform}-${link.href}`
-                  )) })
-                ] }) : null
+                    )
+                  },
+                  `${link.platform}-${link.href}`
+                )) })
               ] }) : null
-            ] }),
-            (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  href: link.href,
-                  className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
-                  children: link.label
-                },
-                link.href
-              )) })
-            ] }) }) : null
+            ] }) : null
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
-            (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsx(
+          (articleLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: articleSectionTitle }),
+            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-x-8 gap-y-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: articleLinks?.map((link) => /* @__PURE__ */ jsx(
               Pressable,
               {
                 href: link.href,
-                className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
+                className: "truncate text-sm text-muted-foreground transition-colors hover:text-primary",
                 children: link.label
               },
               link.href
-            )) }) : null
-          ] }) })
-        ] })
+            )) })
+          ] }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-10 border-t pt-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between gap-4 sm:flex-row", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: copyrightText }),
+          (bottomLinks?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 sm:gap-6", children: bottomLinks?.map((link) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: link.href,
+              className: "text-sm text-muted-foreground underline underline-offset-2 transition-colors hover:text-primary",
+              children: link.label
+            },
+            link.href
+          )) }) : null
+        ] }) })
       ]
     }
   );

package/dist/hero-ad-campaign-expert.cjs

@@ -60,6 +60,28 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+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:")) {
@@ -910,14 +932,14 @@ function HeroAdCampaignExpert({
           (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter lg:text-5xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter lg:text-5xl", headingClassName), children: [
             "Your ad campaigns excel with",
             " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-muted2 border-b-2", children: headingHighlight }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(getBorderColor(background, "muted"), "border-b-2"), children: headingHighlight }),
             ", delivering optimized performance."
           ] }) : null),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderAction
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2", imageContainerClassName), children: [
-          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 355 / 520, className: "border-muted2 border", children: /* @__PURE__ */ jsxRuntime.jsx(
+          imageSrc && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 355 / 520, className: cn(getBorderColor(background, "muted"), "border"), children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: imageSrc,

package/dist/hero-ad-campaign-expert.js

@@ -38,6 +38,28 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
+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:")) {
@@ -888,14 +910,14 @@ function HeroAdCampaignExpert({
           (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter lg:text-5xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxs("h2", { className: cn("text-3xl leading-tight font-bold tracking-tighter lg:text-5xl", headingClassName), children: [
             "Your ad campaigns excel with",
             " ",
-            /* @__PURE__ */ jsx("span", { className: "border-muted2 border-b-2", children: headingHighlight }),
+            /* @__PURE__ */ jsx("span", { className: cn(getBorderColor(background, "muted"), "border-b-2"), children: headingHighlight }),
             ", delivering optimized performance."
           ] }) : null),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderAction
         ] }),
         /* @__PURE__ */ jsxs("div", { className: cn("relative flex w-full justify-center lg:w-1/2", imageContainerClassName), children: [
-          imageSrc && /* @__PURE__ */ jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 355 / 520, className: "border-muted2 border", children: /* @__PURE__ */ jsx(
+          imageSrc && /* @__PURE__ */ jsx("div", { className: "relative z-10 -mb-16 h-auto w-[80%] max-w-[355px] lg:w-[520px]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 355 / 520, className: cn(getBorderColor(background, "muted"), "border"), children: /* @__PURE__ */ jsx(
             Img,
             {
               src: imageSrc,

package/dist/hero-adaptable-product-grid.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:")) {
@@ -876,7 +902,7 @@ function HeroAdaptableProductGrid({
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-14 grid gap-10 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClassName, children: [
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg 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("text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderAction
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative flex items-center justify-center overflow-hidden", imageContainerClassName), children: [

package/dist/hero-adaptable-product-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:")) {
@@ -855,7 +881,7 @@ function HeroAdaptableProductGrid({
         heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
         /* @__PURE__ */ jsxs("div", { className: "mt-14 grid gap-10 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxs("div", { className: contentClassName, children: [
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg 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("text-lg lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
             renderAction
           ] }),
           /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center justify-center overflow-hidden", imageContainerClassName), children: [