@opensite/ui 1.6.8 → 1.7.0

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

@@ -428,111 +428,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -915,12 +810,11 @@ function HeroProductivityLauncherVideo({
   actionsSlot,
   versionInfo,
   versionInfoSlot,
-  secondaryCta,
-  secondaryCtaSlot,
   videoSrc,
   videoSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "py-0 md:py-0",
+  containerClassName = "mx-auto w-screen min-h-screen h-full max-w-screen relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex flex-col items-center justify-center",
   pattern,
   patternOpacity,
   className,
@@ -932,7 +826,14 @@ function HeroProductivityLauncherVideo({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-4", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -952,40 +853,15 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-6 text-xs text-white", children: [
       versionInfo.version && /* @__PURE__ */ jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
     ] });
   }, [versionInfoSlot, versionInfo]);
-  const renderSecondaryCta = useMemo(() => {
-    if (secondaryCtaSlot) return secondaryCtaSlot;
-    if (!secondaryCta) return null;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        href: secondaryCta.href,
-        className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
-        children: [
-          secondaryCta.primaryText && /* @__PURE__ */ jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx("span", { children: secondaryCta.secondaryText }),
-            /* @__PURE__ */ jsx(
-              DynamicIcon,
-              {
-                name: "lucide/arrow-right",
-                size: 16,
-                className: "stroke-muted-foreground"
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }, [secondaryCtaSlot, secondaryCta]);
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsx("div", { className: "absolute -top-24 z-10 h-full w-full before:absolute before:inset-0 before:size-full before:bg-[radial-gradient(circle_at_center,rgba(10,10,10,.3)_15%,rgba(10,10,10,1)_45%)] before:content-['']", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: "absolute top-0 z-10 h-full w-full inset-0", children: /* @__PURE__ */ jsx(
       "video",
       {
         src: videoSrc,
@@ -993,7 +869,7 @@ function HeroProductivityLauncherVideo({
         muted: true,
         autoPlay: true,
         controls: false,
-        className: "block size-full object-cover object-center bg-blend-saturation"
+        className: "block size-full object-cover object-center brightness-50"
       }
     ) });
   }, [videoSlot, videoSrc]);
@@ -1004,19 +880,45 @@ function HeroProductivityLauncherVideo({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
-      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
+      className,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
-            /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-center text-4xl leading-tight font-semibold text-shadow-xl sm:text-5xl md:text-6xl text-balance text-white",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "text-center text-sm leading-normal tracking-tight text-balance md:text-lg text-white",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,
             renderVersionInfo
-          ] }),
-          renderSecondaryCta
+          ] })
         ] }) }),
         renderVideo
       ]

package/dist/hero-saas-dashboard-preview.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface EmailFormConfig {

package/dist/hero-saas-dashboard-preview.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface EmailFormConfig {

package/dist/hero-shared-inbox-layered.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { I as ImageItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface LayeredImageConfig {

package/dist/hero-shared-inbox-layered.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { I as ImageItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface LayeredImageConfig {

package/dist/hero-simple-centered-image.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface HeroSimpleCenteredImageProps {

package/dist/hero-simple-centered-image.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface HeroSimpleCenteredImageProps {

package/dist/hero-software-growth-video-dialog.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-software-growth-video-dialog.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-spiral-pattern-cards.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -825,6 +826,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function HeroSpiralPatternCards({
   badgeText,
   heading,
@@ -848,7 +881,14 @@ function HeroSpiralPatternCards({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-center gap-2 sm:flex-row", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -868,35 +908,53 @@ function HeroSpiralPatternCards({
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex flex-col items-center justify-center lg:mt-32", imagesClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
-      images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center overflow-hidden rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[0].src,
-          alt: images[0].alt,
-          className: cn("h-full w-full object-cover", images[0].className),
-          optixFlowConfig
-        }
-      ) }),
-      images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center overflow-hidden rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[1].src,
-          alt: images[1].alt,
-          className: cn("h-full w-full object-cover", images[1].className),
-          optixFlowConfig
-        }
-      ) }),
-      images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center overflow-hidden rounded-lg border border-border md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: images[2].src,
-          alt: images[2].alt,
-          className: cn("h-full w-full object-cover", images[2].className),
-          optixFlowConfig
-        }
-      ) })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-16 flex flex-col items-center justify-center lg:mt-32",
+          imagesClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mx-auto aspect-square w-[95%] max-w-125 sm:w-full", children: [
+          images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-5 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-75%] translate-y-[10%] scale-[0.85] rotate-[-15deg] justify-center overflow-hidden rounded-lg border border-border opacity-60 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[0].src,
+              alt: images[0].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[0].className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] translate-x-[-40%] translate-y-[5%] scale-[0.9] rotate-[-7deg] justify-center overflow-hidden rounded-lg border border-border opacity-80 md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[1].src,
+              alt: images[1].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[1].className
+              ),
+              optixFlowConfig
+            }
+          ) }),
+          images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 m-auto flex aspect-29/36 w-4/5 max-w-[16rem] justify-center overflow-hidden rounded-lg border border-border md:w-85 md:max-w-85", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: images[2].src,
+              alt: images[2].alt,
+              className: cn(
+                "h-full w-full object-cover",
+                images[2].className
+              ),
+              optixFlowConfig
+            }
+          ) })
+        ] })
+      }
+    );
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -909,9 +967,36 @@ function HeroSpiralPatternCards({
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center", children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase", children: badgeText }) : badgeText),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-3 text-2xl font-bold text-pretty sm:text-4xl md:my-6 lg:text-5xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6 max-w-xl md:mb-12 lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badgeText }) : badgeText),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "my-3 text-2xl font-bold sm:text-4xl md:my-6 lg:text-5xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "my-3 text-2xl font-bold sm:text-4xl md:my-6 lg:text-5xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mb-6 max-w-xl md:mb-12 lg:text-xl text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderImages

package/dist/hero-spiral-pattern-cards.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface HeroSpiralPatternCardsProps {

package/dist/hero-spiral-pattern-cards.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-CdNtNOuP.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface HeroSpiralPatternCardsProps {