@opensite/ui 1.6.8 → 1.6.9

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

@@ -7,7 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var AvatarPrimitive = require('@radix-ui/react-avatar');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -28,7 +27,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 
 // components/blocks/hero/hero-dashed-border-features.tsx
 function cn(...inputs) {
@@ -589,35 +587,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-function Avatar({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Root,
-    {
-      "data-slot": "avatar",
-      className: cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AvatarPrimitive__namespace.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -996,17 +965,16 @@ Section.displayName = "Section";
 function HeroDashedBorderFeatures({
   badgeText,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
   announcementSlot,
   heading,
   description,
   actions,
   actionsSlot,
-  demoAvatarSrc,
   features,
   featuresSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -1019,74 +987,64 @@ function HeroDashedBorderFeatures({
 }) {
   const renderAnnouncement = React.useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    if (!announcementText || !badgeText) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
       {
         href: announcementHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
+        className: cn(
+          "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground shadow-md hover:shadow-xl transition-shadow duration-500 w-fit"
+        ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badgeText }),
+          badgeText && /* @__PURE__ */ jsxRuntime.jsx(Badge, { children: badgeText }),
           announcementText,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
         ]
       }
-    );
+    ) });
   }, [announcementSlot, announcementHref, badgeText, announcementText]);
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          href: "#",
           asButton: true,
-          variant: "outline",
-          size: "lg",
-          className: "w-full gap-2 sm:w-auto lg:mt-10",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-8 rounded-full ring-1 ring-input", children: /* @__PURE__ */ jsxRuntime.jsx(
-              AvatarImage,
-              {
-                src: demoAvatarSrc,
-                alt: "placeholder"
-              }
-            ) }),
-            "Schedule a demo"
-          ]
-        }
-      )
-    ] });
-  }, [actionsSlot, actions, demoAvatarSrc]);
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Pressable,
       {
         className: cn(
           "flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg",
-          index === 1 && "border-x"
+          index === 1 && "md:border-x",
+          index === 2 ? "border-b" : "md:border-b"
         ),
+        href: feature.href,
         children: [
-          /* @__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 }) }),
+          /* @__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 text-card-foreground", children: feature.icon ? feature.icon : feature.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) : null }),
           feature.title
         ]
       },
@@ -1103,17 +1061,67 @@ function HeroDashedBorderFeatures({
       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 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: [
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          renderFeatures
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "border-x border-t border-dashed px-4 py-6 md: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 text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative grid border-x border-dashed md:grid-cols-3",
+              featuresClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              renderFeatures
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/hero-dashed-border-features.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, F as FeatureItem } from './blocks-DP3Vofl4.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig, F as FeatureItem } 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 HeroDashedBorderFeaturesProps {
@@ -39,10 +39,6 @@ interface HeroDashedBorderFeaturesProps {
      * Custom slot for rendering actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
-    /**
-     * Avatar image URL for demo button
-     */
-    demoAvatarSrc?: string;
     /**
      * Array of feature items
      */
@@ -98,6 +94,6 @@ interface HeroDashedBorderFeaturesProps {
      */
     featuresClassName?: string;
 }
-declare function HeroDashedBorderFeatures({ badgeText, announcementText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, demoAvatarSrc, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, featuresClassName, }: HeroDashedBorderFeaturesProps): React.JSX.Element;
+declare function HeroDashedBorderFeatures({ badgeText, announcementText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, featuresClassName, }: HeroDashedBorderFeaturesProps): React.JSX.Element;
 
 export { HeroDashedBorderFeatures, type HeroDashedBorderFeaturesProps };

package/dist/hero-dashed-border-features.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, F as FeatureItem } from './blocks-XLPGq8A5.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig, F as FeatureItem } 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 HeroDashedBorderFeaturesProps {
@@ -39,10 +39,6 @@ interface HeroDashedBorderFeaturesProps {
      * Custom slot for rendering actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
-    /**
-     * Avatar image URL for demo button
-     */
-    demoAvatarSrc?: string;
     /**
      * Array of feature items
      */
@@ -98,6 +94,6 @@ interface HeroDashedBorderFeaturesProps {
      */
     featuresClassName?: string;
 }
-declare function HeroDashedBorderFeatures({ badgeText, announcementText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, demoAvatarSrc, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, featuresClassName, }: HeroDashedBorderFeaturesProps): React.JSX.Element;
+declare function HeroDashedBorderFeatures({ badgeText, announcementText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, features, featuresSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, featuresClassName, }: HeroDashedBorderFeaturesProps): React.JSX.Element;
 
 export { HeroDashedBorderFeatures, type HeroDashedBorderFeaturesProps };

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

@@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
 // components/blocks/hero/hero-dashed-border-features.tsx
 function cn(...inputs) {
@@ -567,35 +566,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-function Avatar({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Root,
-    {
-      "data-slot": "avatar",
-      className: cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function AvatarImage({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Image,
-    {
-      "data-slot": "avatar-image",
-      className: cn("aspect-square size-full", className),
-      ...props
-    }
-  );
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -974,17 +944,16 @@ Section.displayName = "Section";
 function HeroDashedBorderFeatures({
   badgeText,
   announcementText,
-  announcementHref = "#",
+  announcementHref,
   announcementSlot,
   heading,
   description,
   actions,
   actionsSlot,
-  demoAvatarSrc,
   features,
   featuresSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
@@ -997,74 +966,64 @@ function HeroDashedBorderFeatures({
 }) {
   const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxs(
+    if (!announcementText || !badgeText) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs(
       Pressable,
       {
         href: announcementHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
+        className: cn(
+          "flex items-center gap-2 rounded-full px-2 py-1 text-sm bg-card text-card-foreground shadow-md hover:shadow-xl transition-shadow duration-500 w-fit"
+        ),
         children: [
-          /* @__PURE__ */ jsx(Badge, { children: badgeText }),
+          badgeText && /* @__PURE__ */ jsx(Badge, { children: badgeText }),
           announcementText,
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 16 })
         ]
       }
-    );
+    ) });
   }, [announcementSlot, announcementHref, badgeText, announcementText]);
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      }),
-      /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
         Pressable,
         {
-          href: "#",
           asButton: true,
-          variant: "outline",
-          size: "lg",
-          className: "w-full gap-2 sm:w-auto lg:mt-10",
-          children: [
-            /* @__PURE__ */ jsx(Avatar, { className: "size-8 rounded-full ring-1 ring-input", children: /* @__PURE__ */ jsx(
-              AvatarImage,
-              {
-                src: demoAvatarSrc,
-                alt: "placeholder"
-              }
-            ) }),
-            "Schedule a demo"
-          ]
-        }
-      )
-    ] });
-  }, [actionsSlot, actions, demoAvatarSrc]);
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [actionsSlot, actions, actionsClassName]);
   const renderFeatures = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
     return features.map((feature, index) => /* @__PURE__ */ jsxs(
-      "div",
+      Pressable,
       {
         className: cn(
           "flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg",
-          index === 1 && "border-x"
+          index === 1 && "md:border-x",
+          index === 2 ? "border-b" : "md:border-b"
         ),
+        href: feature.href,
         children: [
-          /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md text-sm lg:size-12 lg:text-base bg-card text-card-foreground", children: feature.icon ? feature.icon : feature.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName || "lucide/check", size: 20 }) : null }),
           feature.title
         ]
       },
@@ -1081,17 +1040,67 @@ function HeroDashedBorderFeatures({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("border-x border-t border-dashed px-4 py-20 md:px-16", contentClassName), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
-          renderAnnouncement,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mb-6 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("relative grid border-x border-dashed md:grid-cols-3", featuresClassName), children: [
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/sparkle", size: 20, className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary" }),
-          renderFeatures
-        ] })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "border-x border-t border-dashed px-4 py-6 md:py-20 md:px-16",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
+              renderAnnouncement,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto mb-6 max-w-2xl text-center lg:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative grid border-x border-dashed md:grid-cols-3",
+              featuresClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 right-0 translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DynamicIcon,
+                {
+                  name: "lucide/sparkle",
+                  size: 20,
+                  className: "absolute top-0 left-0 -translate-x-2.5 -translate-y-2.5 fill-primary"
+                }
+              ),
+              renderFeatures
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/hero-design-carousel-portfolio.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 { L as LogoItem, F as FeatureItem, 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 { L as LogoItem, F as FeatureItem, 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 HeroDesignCarouselPortfolioProps {

package/dist/hero-design-carousel-portfolio.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 { L as LogoItem, F as FeatureItem, 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 { L as LogoItem, F as FeatureItem, 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 HeroDesignCarouselPortfolioProps {

package/dist/hero-design-showcase-logos.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, L as LogoItem, 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, L as LogoItem, 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 HeroDesignShowcaseLogosProps {

package/dist/hero-design-showcase-logos.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, L as LogoItem, 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, L as LogoItem, 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 HeroDesignShowcaseLogosProps {

package/dist/hero-design-system-3d.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 HeroDesignSystem3dProps {