@opensite/ui 2.0.2 → 2.0.4

package/dist/hero-community-survey-cta.js

@@ -5,8 +5,8 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Icon } from '@page-speed/icon';
 import { Img } from '@page-speed/img';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-community-survey-cta.tsx
 function cn(...inputs) {
@@ -430,10 +430,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -809,6 +805,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = 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 ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 var MOBILE_CLASSES = {
   "fit-left": "items-start md:items-center",
   "fit-center": "items-center",
@@ -892,11 +920,11 @@ function HeroCommunitySurveyCta({
   rightOverlayImage,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   announcementClassName,
   headingClassName,
   descriptionClassName,
@@ -906,29 +934,22 @@ function HeroCommunitySurveyCta({
 }) {
   const renderAnnouncement = useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsx(Pressable, { href: announcementHref, children: /* @__PURE__ */ jsxs(
+      Badge,
       {
-        href: announcementHref,
         className: cn(
-          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          "group mx-auto w-fit gap-3 px-5 py-2 text-sm h-fit",
           announcementClassName
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "mr-1 font-medium", children: announcementPrimary }),
-          announcementSecondary,
-          /* @__PURE__ */ jsx(
-            DynamicIcon,
-            {
-              name: "lucide/minus",
-              size: 16,
-              className: "mx-1 inline-block"
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx("div", { className: "font-medium", children: announcementPrimary }),
+            announcementSecondary
+          ] }),
+          announcementLinkText ? /* @__PURE__ */ jsx("span", { className: "font-semibold pl-4 ml-4 border-l", children: announcementLinkText }) : null
         ]
       }
-    );
+    ) });
   }, [
     announcementSlot,
     announcementHref,
@@ -937,46 +958,119 @@ function HeroCommunitySurveyCta({
     announcementSecondary,
     announcementLinkText
   ]);
+  const imageCount = useMemo(() => {
+    let count = 0;
+    if (mainImage) count++;
+    if (leftOverlayImage) count++;
+    if (rightOverlayImage) count++;
+    return count;
+  }, [mainImage, leftOverlayImage, rightOverlayImage]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
-      mainImage && /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: mainImage.src,
-          alt: mainImage.alt,
-          className: mainImage.className,
-          optixFlowConfig
-        }
-      ),
-      leftOverlayImage && /* @__PURE__ */ jsx(
-        Img,
+    if (imageCount === 0) return null;
+    if (imageCount === 1) {
+      const img = mainImage || leftOverlayImage || rightOverlayImage;
+      return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+        "div",
         {
-          src: leftOverlayImage.src,
-          alt: leftOverlayImage.alt,
-          className: leftOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative aspect-4/3 w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
+            imagesClassName
+          ),
+          children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: img.src,
+              alt: img.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          )
         }
-      ),
-      rightOverlayImage && /* @__PURE__ */ jsx(
-        Img,
+      ) });
+    }
+    if (imageCount === 2) {
+      const imgs = [mainImage, leftOverlayImage, rightOverlayImage].filter(
+        Boolean
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
         {
-          src: rightOverlayImage.src,
-          alt: rightOverlayImage.alt,
-          className: rightOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+            imagesClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imgs[0].src,
+                alt: imgs[0].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: imgs[1].src,
+                alt: imgs[1].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) })
+          ]
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[380px] md:min-h-[430px] lg:min-h-[480px]",
+          imagesClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[65%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: mainImage.src,
+              alt: mainImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[50%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: rightOverlayImage.src,
+              alt: rightOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-[10%] z-30 aspect-square w-[35%] overflow-hidden rounded-lg shadow-2xl md:bottom-6 md:left-[15%]", children: /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: leftOverlayImage.src,
+              alt: leftOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) })
+        ]
+      }
+    );
   }, [
     imagesSlot,
     imagesClassName,
+    imageCount,
     mainImage,
     leftOverlayImage,
     rightOverlayImage,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -985,14 +1079,14 @@ function HeroCommunitySurveyCta({
       patternOpacity,
       className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h1",
             {
               className: cn(
-                "mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
+                "max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
                 headingClassName
               ),
               children: heading
@@ -1002,7 +1096,7 @@ function HeroCommunitySurveyCta({
             "p",
             {
               className: cn(
-                "mx-auto max-w-4xl lg:text-xl",
+                "max-w-4xl lg:text-xl text-balance",
                 descriptionClassName
               ),
               children: description
@@ -1017,11 +1111,8 @@ function HeroCommunitySurveyCta({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative px-8", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
-          renderImages
-        ] })
-      ]
+        /* @__PURE__ */ jsx("div", { className: "relative", children: renderImages })
+      ] })
     }
   );
 }

package/dist/hero-design-carousel-portfolio.cjs

@@ -6,11 +6,11 @@ var AutoScroll = require('embla-carousel-auto-scroll');
 var Autoplay = require('embla-carousel-autoplay');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var classVarianceAuthority = require('class-variance-authority');
-var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var useEmblaCarousel = require('embla-carousel-react');
+var classVarianceAuthority = require('class-variance-authority');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -41,6 +41,10 @@ var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+function DynamicIcon({ apiKey, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -459,10 +463,6 @@ var Pressable = React3__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
 var CarouselContext = React3__namespace.createContext(null);
 function useCarousel() {
   const context = React3__namespace.useContext(CarouselContext);
@@ -967,6 +967,74 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const renderAction = React3__namespace.useCallback(
+    (action, idx) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        href,
+        onClick,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          href,
+          onClick,
+          asButton: action.asButton || true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        idx
+      );
+    },
+    []
+  );
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => renderAction(action, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
 function HeroDesignCarouselPortfolio({
   logo,
   logoSlot,
@@ -974,18 +1042,17 @@ function HeroDesignCarouselPortfolio({
   featuresSlot,
   heading,
   description,
-  primaryAction,
-  primaryActionAvatar,
-  secondaryAction,
+  actions,
   actionsSlot,
+  actionsClassName,
   carouselImages,
   carouselSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1001,7 +1068,7 @@ function HeroDesignCarouselPortfolio({
       img.Img,
       {
         src: logoSrc,
-        className: cn("h-12 lg:h-16", logo.className),
+        className: cn("object-contain w-auto h-12 lg:h-16", logo.className),
         alt: logo.alt,
         optixFlowConfig
       }
@@ -1010,53 +1077,23 @@ function HeroDesignCarouselPortfolio({
   const renderFeatures = React3.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden items-center gap-6 lg:flex", featuresClassName), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 ", children: [
-      feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName || "lucide/check-circle", size: 24 }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
-    ] }, index)) });
-  }, [featuresSlot, features, featuresClassName]);
-  const renderPrimaryAction = React3.useMemo(() => {
-    if (actionsSlot) return null;
-    if (!primaryAction) return null;
-    const { label, className: actionClassName, ...pressableProps } = primaryAction;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
+        className: cn("hidden items-center gap-6 lg:flex", featuresClassName),
+        children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 ", children: [
+          feature.icon ?? /* @__PURE__ */ jsxRuntime.jsx(
+            DynamicIcon,
             {
-              src: primaryActionAvatar,
-              alt: "",
-              className: "size-9 rounded-full object-cover lg:size-11",
-              optixFlowConfig
+              name: feature.iconName || "lucide/check-circle",
+              size: 24
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-        ]
-      }
-    );
-  }, [actionsSlot, primaryAction, primaryActionAvatar, optixFlowConfig]);
-  const renderSecondaryAction = React3.useMemo(() => {
-    if (actionsSlot) return null;
-    if (!secondaryAction) return null;
-    const { label, iconAfter, className: actionClassName, ...pressableProps } = secondaryAction;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-          iconAfter
-        ]
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: feature.title })
+        ] }, index))
       }
     );
-  }, [actionsSlot, secondaryAction]);
+  }, [featuresSlot, features, featuresClassName]);
   const renderCarousel = React3.useMemo(() => {
     if (carouselSlot) return carouselSlot;
     if (!carouselImages || carouselImages.length === 0) return null;
@@ -1076,7 +1113,10 @@ function HeroDesignCarouselPortfolio({
             delay: 1e3
           })
         ],
-        className: cn("relative mx-auto w-full max-w-full overflow-hidden from-white to-transparent before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-[20%] before:bg-linear-to-r before:content-[''] after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-[20%] after:bg-linear-to-l after:from-white after:to-transparent after:content-['']", carouselClassName),
+        className: cn(
+          "relative mx-auto w-full max-w-full overflow-hidden from-white to-transparent before:absolute before:top-0 before:left-0 before:z-10 before:h-full before:w-[20%] before:bg-linear-to-r before:content-[''] after:absolute after:top-0 after:right-0 after:z-10 after:h-full after:w-[20%] after:bg-linear-to-l after:from-white after:to-transparent after:content-['']",
+          carouselClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "ml-5 flex gap-5 pl-4", children: carouselImages.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "basis-[496px] bg-background", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[380px] basis-[480px] overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
@@ -1097,20 +1137,72 @@ function HeroDesignCarouselPortfolio({
       pattern,
       patternOpacity,
       className: cn("relative", className),
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-8", children: renderLogo }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-10 py-10 lg:py-28", contentClassName), children: [
-            renderFeatures,
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl", headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg lg:text-2xl", descriptionClassName), children: description }))
-            ] }) }),
-            actionsSlot || renderPrimaryAction
-          ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          renderLogo ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pb-8", children: renderLogo }) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-10 pt-12 pb-8 lg:pt-24 lg:pb-12",
+                contentClassName
+              ),
+              children: [
+                renderFeatures,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-4", children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl font-semibold",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "h1",
+                    {
+                      className: cn(
+                        "max-w-6xl text-4xl tracking-tighter lg:text-7xl xl:text-9xl font-semibold",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  )),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-lg lg:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-lg lg:text-2xl text-balance",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ))
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsSlot,
+                    actionsClassName
+                  }
+                )
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", children: renderCarousel }),
-        actionsSlot || renderSecondaryAction
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex flex-col", children: renderCarousel })
       ]
     }
   );

package/dist/hero-design-carousel-portfolio.d.cts

@@ -34,21 +34,17 @@ interface HeroDesignCarouselPortfolioProps {
      */
     description?: React.ReactNode;
     /**
-     * Primary action configuration (schedule chat button)
+     * Array of action configurations for CTA buttons
      */
-    primaryAction?: ActionConfig;
-    /**
-     * Avatar image for primary action button
-     */
-    primaryActionAvatar?: string;
-    /**
-     * Secondary action configuration (portfolio button)
-     */
-    secondaryAction?: ActionConfig;
+    actions?: ActionConfig[];
     /**
      * Custom slot for actions (overrides action props)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
     /**
      * Array of carousel images
      */
@@ -106,6 +102,6 @@ interface HeroDesignCarouselPortfolioProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroDesignCarouselPortfolio({ logo, logoSlot, features, featuresSlot, heading, description, primaryAction, primaryActionAvatar, secondaryAction, actionsSlot, carouselImages, carouselSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, featuresClassName, carouselClassName, optixFlowConfig, }: HeroDesignCarouselPortfolioProps): React.JSX.Element;
+declare function HeroDesignCarouselPortfolio({ logo, logoSlot, features, featuresSlot, heading, description, actions, actionsSlot, actionsClassName, carouselImages, carouselSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, featuresClassName, carouselClassName, optixFlowConfig, }: HeroDesignCarouselPortfolioProps): React.JSX.Element;
 
 export { HeroDesignCarouselPortfolio, type HeroDesignCarouselPortfolioProps };

package/dist/hero-design-carousel-portfolio.d.ts

@@ -34,21 +34,17 @@ interface HeroDesignCarouselPortfolioProps {
      */
     description?: React.ReactNode;
     /**
-     * Primary action configuration (schedule chat button)
+     * Array of action configurations for CTA buttons
      */
-    primaryAction?: ActionConfig;
-    /**
-     * Avatar image for primary action button
-     */
-    primaryActionAvatar?: string;
-    /**
-     * Secondary action configuration (portfolio button)
-     */
-    secondaryAction?: ActionConfig;
+    actions?: ActionConfig[];
     /**
      * Custom slot for actions (overrides action props)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Additional CSS classes for the actions container
+     */
+    actionsClassName?: string;
     /**
      * Array of carousel images
      */
@@ -106,6 +102,6 @@ interface HeroDesignCarouselPortfolioProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroDesignCarouselPortfolio({ logo, logoSlot, features, featuresSlot, heading, description, primaryAction, primaryActionAvatar, secondaryAction, actionsSlot, carouselImages, carouselSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, featuresClassName, carouselClassName, optixFlowConfig, }: HeroDesignCarouselPortfolioProps): React.JSX.Element;
+declare function HeroDesignCarouselPortfolio({ logo, logoSlot, features, featuresSlot, heading, description, actions, actionsSlot, actionsClassName, carouselImages, carouselSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, featuresClassName, carouselClassName, optixFlowConfig, }: HeroDesignCarouselPortfolioProps): React.JSX.Element;
 
 export { HeroDesignCarouselPortfolio, type HeroDesignCarouselPortfolioProps };