@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-centered-gradient-cta.cjs

@@ -31,62 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -891,11 +835,11 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gradientClassName,
   badgeClassName,
   headingClassName,
@@ -935,17 +879,17 @@ function HeroCenteredGradientCta({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      className: cn(
-        "relative min-h-screen overflow-hidden bg-background py-32",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center min-h-screen overflow-hidden bg-background py-32", className),
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.3),transparent)]", gradientClassName) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container relative z-10 flex flex-col items-center text-center", containerClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex flex-col items-center text-center", children: [
           badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-            "inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm",
-            getNestedCardBg(background, "muted"),
-            getNestedCardTextColor(background),
+            "inline-flex items-center gap-2 rounded-full border border-border/50 bg-accent px-4 py-2 text-sm",
             badgeClassName
           ), children: [
             badgeIcon,
@@ -956,9 +900,9 @@ function HeroCenteredGradientCta({
             " ",
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
           ] }) : null),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), featuresClassName), children: renderFeatures })
+          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", featuresClassName), children: renderFeatures })
         ] })
       ]
     }

package/dist/hero-centered-gradient-cta.js

@@ -10,62 +10,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -870,11 +814,11 @@ function HeroCenteredGradientCta({
   features,
   featuresSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gradientClassName,
   badgeClassName,
   headingClassName,
@@ -914,17 +858,17 @@ function HeroCenteredGradientCta({
   return /* @__PURE__ */ jsxs(
     Section,
     {
-      className: cn(
-        "relative min-h-screen overflow-hidden bg-background py-32",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center min-h-screen overflow-hidden bg-background py-32", className),
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(120,119,198,0.3),transparent)]", gradientClassName) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("container relative z-10 flex flex-col items-center text-center", containerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center text-center", children: [
           badge && /* @__PURE__ */ jsxs("div", { className: cn(
-            "inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm",
-            getNestedCardBg(background, "muted"),
-            getNestedCardTextColor(background),
+            "inline-flex items-center gap-2 rounded-full border border-border/50 bg-accent px-4 py-2 text-sm",
             badgeClassName
           ), children: [
             badgeIcon,
@@ -935,9 +879,9 @@ function HeroCenteredGradientCta({
             " ",
             /* @__PURE__ */ jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
           ] }) : null),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), featuresClassName), children: renderFeatures })
+          (featuresSlot || features && features.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm text-muted-foreground", featuresClassName), children: renderFeatures })
         ] })
       ]
     }

package/dist/hero-conversion-video-play.cjs

@@ -36,58 +36,6 @@ 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 getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "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:")) {
@@ -1089,11 +1037,11 @@ function HeroConversionVideoPlay({
   logos,
   logosSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1166,20 +1114,21 @@ function HeroConversionVideoPlay({
     });
   }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
         background,
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-7", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
@@ -1192,12 +1141,12 @@ function HeroConversionVideoPlay({
                 optixFlowConfig
               }
             ) }) }) }) : null })
-          ] }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium", getAccentColor(background)), children: logosTagline }) : logosTagline),
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl font-medium text-accent-foreground"), children: logosTagline }) : logosTagline),
             (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
-          ] }) })
-        ]
+          ] })
+        ] })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [

package/dist/hero-conversion-video-play.js

@@ -13,58 +13,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 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 getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "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:")) {
@@ -1066,11 +1014,11 @@ function HeroConversionVideoPlay({
   logos,
   logosSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1143,20 +1091,21 @@ function HeroConversionVideoPlay({
     });
   }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       Section,
       {
         background,
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden border-b", getBorderColor(background, "muted")), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 md:gap-24", children: [
             /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-7", children: [
                 heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-[920px] text-center text-4xl leading-tight font-semibold md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-[750px] text-center text-base leading-relaxed font-normal md:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
               ] }),
               /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-8", actionsClassName), children: renderActions })
             ] }),
@@ -1169,12 +1118,12 @@ function HeroConversionVideoPlay({
                 optixFlowConfig
               }
             ) }) }) }) : null })
-          ] }) }) }),
-          /* @__PURE__ */ jsx("div", { className: "container", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-16 py-20", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium", getAccentColor(background)), children: logosTagline }) : logosTagline),
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-16 py-20", children: [
+            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl font-medium text-accent-foreground"), children: logosTagline }) : logosTagline),
             (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-20", children: renderLogos })
-          ] }) })
-        ]
+          ] })
+        ] })
       }
     ),
     /* @__PURE__ */ jsx(Dialog, { open: isVideoOpen, onOpenChange: setIsVideoOpen, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-[800px]", children: [

package/dist/hero-customer-support-layered.cjs

@@ -473,7 +473,7 @@ function HeroCustomerSupportLayered({
               optixFlowConfig
             }
           ) }),
-          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[50%] top-[40%] md:top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: images[2].src,

package/dist/hero-customer-support-layered.js

@@ -467,7 +467,7 @@ function HeroCustomerSupportLayered({
               optixFlowConfig
             }
           ) }),
-          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsx(
+          images[2] && /* @__PURE__ */ jsx("div", { className: "absolute left-[50%] top-[40%] md:top-[10%] z-30 aspect-3/4 w-[45%] overflow-hidden rounded-lg shadow-2xl md:w-[40%]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: images[2].src,

package/dist/hero-dashed-border-features.cjs

@@ -34,62 +34,6 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-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";
-    }
-  }
-}
 var badgeVariants = classVarianceAuthority.cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -1062,11 +1006,11 @@ function HeroDashedBorderFeatures({
   features,
   featuresSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1079,11 +1023,7 @@ function HeroDashedBorderFeatures({
       Pressable,
       {
         href: announcementHref,
-        className: cn(
-          "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background)
-        ),
+        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badgeText }),
           announcementText,
@@ -1146,11 +1086,7 @@ function HeroDashedBorderFeatures({
           index === 1 && "border-x"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-            "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base bg-card", children: feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
           feature.title
         ]
       },
@@ -1164,12 +1100,13 @@ function HeroDashedBorderFeatures({
       spacing,
       pattern,
       patternOpacity,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [