@opensite/ui 2.4.7 → 2.4.9

package/dist/footer-brand-links-contact.cjs

@@ -1001,7 +1001,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-brand-links-contact.js

@@ -980,7 +980,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-comprehensive-links.cjs

@@ -1001,7 +1001,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-comprehensive-links.js

@@ -980,7 +980,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-contact-card.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-contact-card.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-cta-banner.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-cta-banner.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-cta-social.cjs

@@ -1375,7 +1375,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-cta-social.js

@@ -1354,7 +1354,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-info-cards-accordion.cjs

@@ -1118,7 +1118,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-info-cards-accordion.js

@@ -1096,7 +1096,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-nav-social.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-nav-social.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-contact.cjs

@@ -1078,7 +1078,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-contact.js

@@ -1056,7 +1056,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-grid.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-grid.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-minimal.cjs

@@ -1005,7 +1005,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-newsletter-minimal.js

@@ -984,7 +984,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-social-apps.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-social-apps.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-social-newsletter.cjs

@@ -1449,7 +1449,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-social-newsletter.js

@@ -1428,7 +1428,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-split-image-accordion.cjs

@@ -1117,7 +1117,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-split-image-accordion.js

@@ -1096,7 +1096,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/hero-coming-soon-countdown.cjs

@@ -876,7 +876,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/hero-coming-soon-countdown.js

@@ -855,7 +855,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/hero-event-registration.cjs

@@ -1015,7 +1015,7 @@ function HeroEventRegistration({
         className: cn(
           "bg-card text-card-foreground",
           "rounded-2xl p-2 md:p-4 shadow-lg",
-          "absolute -bottom-1/2 -translate-y-1/2",
+          "absolute bottom-0 translate-y-1/2",
           "left-1/2 -translate-x-1/2 w-[90%]",
           "md:-left-4 md:translate-x-0 md:w-auto",
           "ring-4 ring-primary"

package/dist/hero-event-registration.js

@@ -994,7 +994,7 @@ function HeroEventRegistration({
         className: cn(
           "bg-card text-card-foreground",
           "rounded-2xl p-2 md:p-4 shadow-lg",
-          "absolute -bottom-1/2 -translate-y-1/2",
+          "absolute bottom-0 translate-y-1/2",
           "left-1/2 -translate-x-1/2 w-[90%]",
           "md:-left-4 md:translate-x-0 md:w-auto",
           "ring-4 ring-primary"

package/dist/hero-product-showcase-floating.cjs

@@ -8,6 +8,7 @@ var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var classVarianceAuthority = require('class-variance-authority');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -33,36 +34,6 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -584,6 +555,38 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
+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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -860,6 +863,38 @@ var Pressable = React3__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React3__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React3__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React3__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React3__namespace.isValidElement(reactNode)) {
+          return React3__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React3__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 var MOBILE_CLASSES = {
   "fit-left": "items-start md:items-center",
   "fit-center": "items-center",
@@ -947,56 +982,40 @@ function HeroProductShowcaseFloating({
   spacing = "xl",
   contentClassName,
   headingClassName,
+  headerClassName,
   descriptionClassName,
   showcaseClassName,
   optixFlowConfig
 }) {
   const renderBadge = React3.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",
-          `${getAccentColor(background)}/10`,
-          getAccentColor(background)
-        ),
-        children: [
-          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
-          badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-2"), children: [
+      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+      badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
+    ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderFloatingStat = React3.useMemo(() => {
     if (floatingStatSlot) return floatingStatSlot;
     if (!floatingStat) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      floatingStat.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-success/10", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: floatingStat.icon,
-          size: 20,
-          className: "text-success"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: floatingStat.label })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      floatingStat.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 size-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: floatingStat.icon }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: floatingStat.value }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-normal opacity-70", children: floatingStat.label })
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
   const renderUserCount = React3.useMemo(() => {
     if (userCountSlot) return userCountSlot;
     if (!userCount) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
       userCount.avatars && userCount.avatars.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: userCount.avatars.map((avatar, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: avatar.src,
           alt: avatar.alt,
           className: cn(
-            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            "size-8 rounded-full border-2 border-background object-cover",
             avatar.className
           ),
           optixFlowConfig
@@ -1004,8 +1023,8 @@ function HeroProductShowcaseFloating({
         idx
       )) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: userCount.count }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: userCount.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: userCount.count }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-normal opacity-70", children: userCount.label })
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
@@ -1013,7 +1032,7 @@ function HeroProductShowcaseFloating({
     if (productImageSlot) return productImageSlot;
     if (!productImage) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("order-1", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-4/3 overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-purple-500/20 p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-primary/80 p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: productImage.src,
@@ -1036,6 +1055,37 @@ function HeroProductShowcaseFloating({
     renderFloatingStat,
     renderUserCount
   ]);
+  const contentItems = React3.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-2xl font-semibold md:text-3xl lg:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -1043,42 +1093,22 @@ function HeroProductShowcaseFloating({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 lg:gap-20", children: [
         renderProductShowcase,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 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",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ContentGroup,
             {
+              items: contentItems,
               className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
+                "text-left text-balance space-y-0 md:space-y-2",
+                headerClassName
+              )
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {

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

@@ -123,6 +123,10 @@ interface HeroProductShowcaseFloatingProps {
      * Additional CSS classes for the heading
      */
     headingClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
     /**
      * Additional CSS classes for the description
      */
@@ -140,6 +144,6 @@ interface HeroProductShowcaseFloatingProps {
      */
     actionsClassName?: string;
 }
-declare function HeroProductShowcaseFloating({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, productImage, productImageSlot, floatingStat, floatingStatSlot, userCount, userCountSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroProductShowcaseFloatingProps): React.JSX.Element;
+declare function HeroProductShowcaseFloating({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, productImage, productImageSlot, floatingStat, floatingStatSlot, userCount, userCountSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, headerClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroProductShowcaseFloatingProps): React.JSX.Element;
 
 export { HeroProductShowcaseFloating, type HeroProductShowcaseFloatingProps };

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

@@ -123,6 +123,10 @@ interface HeroProductShowcaseFloatingProps {
      * Additional CSS classes for the heading
      */
     headingClassName?: string;
+    /**
+     * Additional CSS classes for the header wrapper
+     */
+    headerClassName?: string;
     /**
      * Additional CSS classes for the description
      */
@@ -140,6 +144,6 @@ interface HeroProductShowcaseFloatingProps {
      */
     actionsClassName?: string;
 }
-declare function HeroProductShowcaseFloating({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, productImage, productImageSlot, floatingStat, floatingStatSlot, userCount, userCountSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroProductShowcaseFloatingProps): React.JSX.Element;
+declare function HeroProductShowcaseFloating({ badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, actionsClassName, productImage, productImageSlot, floatingStat, floatingStatSlot, userCount, userCountSlot, background, pattern, patternOpacity, className, containerClassName, spacing, contentClassName, headingClassName, headerClassName, descriptionClassName, showcaseClassName, optixFlowConfig, }: HeroProductShowcaseFloatingProps): React.JSX.Element;
 
 export { HeroProductShowcaseFloating, type HeroProductShowcaseFloatingProps };