@opensite/ui 1.8.2 → 1.8.4

package/dist/hero-ecommerce-product-showcase.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;
@@ -32,62 +33,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:")) {
@@ -986,6 +931,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 HeroEcommerceProductShowcase({
   badgeText,
   badgeIcon,
@@ -999,11 +976,12 @@ function HeroEcommerceProductShowcase({
   images,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1014,11 +992,7 @@ function HeroEcommerceProductShowcase({
 }) {
   const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
-      getNestedCardBg(background, "accent"),
-      getNestedCardTextColor(background)
-    ), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-4 py-2"), children: [
       badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
     ] });
@@ -1027,7 +1001,14 @@ function HeroEcommerceProductShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), 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,
         {
@@ -1051,7 +1032,7 @@ function HeroEcommerceProductShowcase({
       index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px bg-border" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: stat.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
       ] })
     ] }, index)) });
   }, [statsSlot, stats, statsClassName]);
@@ -1060,41 +1041,53 @@ function HeroEcommerceProductShowcase({
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[0] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[0].src,
             alt: images[0].alt,
-            className: cn("aspect-3/4 w-full object-cover", images[0].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover",
+              images[0].className
+            ),
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[1] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[1].src,
             alt: images[1].alt,
-            className: cn("aspect-square w-full object-cover", images[1].className),
+            className: cn(
+              "aspect-square w-full object-cover",
+              images[1].className
+            ),
             optixFlowConfig
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[2] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[2].src,
             alt: images[2].alt,
-            className: cn("aspect-square w-full object-cover", images[2].className),
+            className: cn(
+              "aspect-square w-full object-cover",
+              images[2].className
+            ),
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsxRuntime.jsx(
+        images[3] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
             src: images[3].src,
             alt: images[3].alt,
-            className: cn("aspect-3/4 w-full object-cover", images[3].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover",
+              images[3].className
+            ),
             optixFlowConfig
           }
         ) })
@@ -1108,16 +1101,45 @@ function HeroEcommerceProductShowcase({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "order-2 lg:order-1", children: renderImages }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          renderActions,
-          renderStats
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "order-1 flex flex-col gap-8 lg:order-2",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions,
+              renderStats
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/hero-ecommerce-product-showcase.d.cts

@@ -67,6 +67,10 @@ interface HeroEcommerceProductShowcaseProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -104,6 +108,6 @@ interface HeroEcommerceProductShowcaseProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroEcommerceProductShowcase({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imagesClassName, optixFlowConfig, }: HeroEcommerceProductShowcaseProps): React.JSX.Element;
+declare function HeroEcommerceProductShowcase({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imagesClassName, optixFlowConfig, }: HeroEcommerceProductShowcaseProps): React.JSX.Element;
 
 export { HeroEcommerceProductShowcase, type HeroEcommerceProductShowcaseProps };

package/dist/hero-ecommerce-product-showcase.d.ts

@@ -67,6 +67,10 @@ interface HeroEcommerceProductShowcaseProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -104,6 +108,6 @@ interface HeroEcommerceProductShowcaseProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroEcommerceProductShowcase({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imagesClassName, optixFlowConfig, }: HeroEcommerceProductShowcaseProps): React.JSX.Element;
+declare function HeroEcommerceProductShowcase({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, images, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imagesClassName, optixFlowConfig, }: HeroEcommerceProductShowcaseProps): React.JSX.Element;
 
 export { HeroEcommerceProductShowcase, type HeroEcommerceProductShowcaseProps };

package/dist/hero-ecommerce-product-showcase.js

@@ -6,67 +6,12 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-ecommerce-product-showcase.tsx
 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:")) {
@@ -965,6 +910,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
+    }
+  );
+}
 function HeroEcommerceProductShowcase({
   badgeText,
   badgeIcon,
@@ -978,11 +955,12 @@ function HeroEcommerceProductShowcase({
   images,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -993,11 +971,7 @@ function HeroEcommerceProductShowcase({
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs("div", { className: cn(
-      "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
-      getNestedCardBg(background, "accent"),
-      getNestedCardTextColor(background)
-    ), children: [
+    return /* @__PURE__ */ jsxs(Badge, { className: cn("px-4 py-2"), children: [
       badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
       /* @__PURE__ */ jsx("span", { children: badgeText })
     ] });
@@ -1006,7 +980,14 @@ function HeroEcommerceProductShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4 sm:flex-row", actionsClassName), 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,
         {
@@ -1030,7 +1011,7 @@ function HeroEcommerceProductShowcase({
       index > 0 && /* @__PURE__ */ jsx("div", { className: "h-12 w-px bg-border" }),
       /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx("div", { className: "text-2xl font-bold ", children: stat.value }),
-        /* @__PURE__ */ jsx("div", { className: cn("text-sm", getTextColor(background, "muted")), children: stat.label })
+        /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
       ] })
     ] }, index)) });
   }, [statsSlot, stats, statsClassName]);
@@ -1039,41 +1020,53 @@ function HeroEcommerceProductShowcase({
     if (!images || images.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-4", imagesClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-        images[0] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
+        images[0] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[0].src,
             alt: images[0].alt,
-            className: cn("aspect-3/4 w-full object-cover", images[0].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover",
+              images[0].className
+            ),
             optixFlowConfig
           }
         ) }),
-        images[1] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
+        images[1] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[1].src,
             alt: images[1].alt,
-            className: cn("aspect-square w-full object-cover", images[1].className),
+            className: cn(
+              "aspect-square w-full object-cover",
+              images[1].className
+            ),
             optixFlowConfig
           }
         ) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-4 pt-8", children: [
-        images[2] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
+        images[2] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[2].src,
             alt: images[2].alt,
-            className: cn("aspect-square w-full object-cover", images[2].className),
+            className: cn(
+              "aspect-square w-full object-cover",
+              images[2].className
+            ),
             optixFlowConfig
           }
         ) }),
-        images[3] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl", getNestedCardBg(background, "muted")), children: /* @__PURE__ */ jsx(
+        images[3] && /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-2xl"), children: /* @__PURE__ */ jsx(
           Img,
           {
             src: images[3].src,
             alt: images[3].alt,
-            className: cn("aspect-3/4 w-full object-cover", images[3].className),
+            className: cn(
+              "aspect-3/4 w-full object-cover",
+              images[3].className
+            ),
             optixFlowConfig
           }
         ) })
@@ -1087,16 +1080,45 @@ function HeroEcommerceProductShowcase({
       spacing,
       pattern,
       patternOpacity,
+      patternClassName,
       className,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
         /* @__PURE__ */ jsx("div", { className: "order-2 lg:order-1", children: renderImages }),
-        /* @__PURE__ */ jsxs("div", { className: cn("order-1 flex flex-col gap-8 lg:order-2", contentClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderActions,
-          renderStats
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "order-1 flex flex-col gap-8 lg:order-2",
+              contentClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions,
+              renderStats
+            ]
+          }
+        )
       ] }) })
     }
   );

package/dist/hero-floating-images.cjs

@@ -593,7 +593,7 @@ function HeroFloatingImages({
       {
         type: "button",
         className: cn(
-          "group relative col-span-2 aspect-[4/3] overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
+          "group relative col-span-2 aspect-4/3 overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
           featuredImageClassName
         ),
         onClick: () => handleImageClick(0),

package/dist/hero-floating-images.js

@@ -572,7 +572,7 @@ function HeroFloatingImages({
       {
         type: "button",
         className: cn(
-          "group relative col-span-2 aspect-[4/3] overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
+          "group relative col-span-2 aspect-4/3 overflow-hidden rounded-2xl sm:col-span-1 sm:row-span-2 sm:aspect-auto sm:h-full",
           featuredImageClassName
         ),
         onClick: () => handleImageClick(0),

package/dist/hero-hiring-animated-text.cjs

@@ -835,11 +835,11 @@ function HeroHiringAnimatedText({
   scrollActionSlot,
   backgroundImage,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-auto h-screen w-full max-w-7xl relative z-10 px-6 md:px-16 lg:px-32 pb-12 md:pb-18",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -945,11 +945,11 @@ function HeroHiringAnimatedText({
       ),
       containerClassName,
       style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-full max-w-412.5 flex-col justify-between pt-24 pb-14 md:justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex size-full max-w-md flex-col justify-between md:justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "flex h-full flex-col justify-between gap-6 md:justify-end max-w-full md:max-w-md",
+            "flex h-full flex-col gap-6 justify-end max-w-full md:max-w-md",
             contentClassName
           ),
           children: [