@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-marketplace-scattered-images.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -947,11 +921,11 @@ function HeroMarketplaceScatteredImages({
   imagesSlot,
   showGridPattern = true,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -996,12 +970,13 @@ function HeroMarketplaceScatteredImages({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative container mx-auto max-w-xl py-10 text-center", contentClassName), children: [
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("relative mx-auto max-w-xl py-10 text-center", contentClassName), children: [
           showGridPattern && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[64px_64px]" }),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-3 text-4xl lg:text-7xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-sm md:text-base", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-sm md:text-base text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderAction,
           renderTagline
         ] }),

package/dist/hero-mentorship-video-split.cjs

@@ -36,10 +36,6 @@ var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1032,19 +1028,19 @@ function HeroMentorshipVideoSplit({
   description,
   action,
   actionSlot,
-  videoLabel = "Watch our introduction to discover our services",
+  videoLabel,
   videoThumbnail,
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
-  videoTitle = "Presentation Video",
+  videoUrl,
+  videoTitle,
   videoSlot,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1066,7 +1062,7 @@ function HeroMentorshipVideoSplit({
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl", getAccentColor(background)), children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl text-accent-foreground", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1119,12 +1115,13 @@ function HeroMentorshipVideoSplit({
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium md:text-xl", getAccentColor(background), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg font-medium text-accent-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
               renderAction
             ] }),
             renderVideoSection

package/dist/hero-mentorship-video-split.js

@@ -13,10 +13,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -1009,19 +1005,19 @@ function HeroMentorshipVideoSplit({
   description,
   action,
   actionSlot,
-  videoLabel = "Watch our introduction to discover our services",
+  videoLabel,
   videoThumbnail,
-  videoUrl = "https://www.youtube.com/embed/your-video-id",
-  videoTitle = "Presentation Video",
+  videoUrl,
+  videoTitle,
   videoSlot,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -1043,7 +1039,7 @@ function HeroMentorshipVideoSplit({
     if (videoSlot) return videoSlot;
     if (!videoThumbnail) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex max-w-97.5 flex-col gap-6", children: [
-      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl", getAccentColor(background)), children: videoLabel }) : videoLabel),
+      videoLabel && (typeof videoLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xl text-accent-foreground", children: videoLabel }) : videoLabel),
       /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1096,12 +1092,13 @@ function HeroMentorshipVideoSplit({
         spacing,
         pattern,
         patternOpacity,
-        className: cn(className),
-        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
+        className: cn("relative flex items-center justify-center", className),
+        containerClassName,
+        children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid w-full grid-cols-1 gap-6 lg:grid-cols-2", children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col justify-between gap-12", contentClassName), children: [
             /* @__PURE__ */ jsxs("div", { className: "flex max-w-165 flex-col gap-9", children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none sm:text-[3.4375rem] md:text-[4rem]", getAccentColor(background), headingClassName), children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium md:text-xl", getAccentColor(background), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-[2.5rem] leading-none text-accent-foreground sm:text-[3.4375rem] md:text-[4rem]", headingClassName), children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg font-medium text-accent-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
               renderAction
             ] }),
             renderVideoSection

package/dist/hero-mobile-app-download.cjs

@@ -968,7 +968,6 @@ function HeroMobileAppDownload({
   badgeIcon,
   badgeSlot,
   heading,
-  description,
   storeActions,
   storeActionsSlot,
   ratingValue,
@@ -987,13 +986,14 @@ function HeroMobileAppDownload({
   className,
   contentClassName,
   headingClassName,
+  description,
   descriptionClassName,
   imageClassName,
   optixFlowConfig
 }) {
   const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-4 py-1", children: [
       badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
     ] });

package/dist/hero-mobile-app-download.d.cts

@@ -147,6 +147,6 @@ interface HeroMobileAppDownloadProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroMobileAppDownload({ badgeText, badgeIcon, badgeSlot, heading, description, storeActions, storeActionsSlot, ratingValue, ratingLabel, starCount, ratingSlot, image, imageSlot, notification, notificationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMobileAppDownloadProps): React.JSX.Element;
+declare function HeroMobileAppDownload({ badgeText, badgeIcon, badgeSlot, heading, storeActions, storeActionsSlot, ratingValue, ratingLabel, starCount, ratingSlot, image, imageSlot, notification, notificationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, description, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMobileAppDownloadProps): React.JSX.Element;
 
 export { HeroMobileAppDownload, type HeroMobileAppDownloadProps };

package/dist/hero-mobile-app-download.d.ts

@@ -147,6 +147,6 @@ interface HeroMobileAppDownloadProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroMobileAppDownload({ badgeText, badgeIcon, badgeSlot, heading, description, storeActions, storeActionsSlot, ratingValue, ratingLabel, starCount, ratingSlot, image, imageSlot, notification, notificationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMobileAppDownloadProps): React.JSX.Element;
+declare function HeroMobileAppDownload({ badgeText, badgeIcon, badgeSlot, heading, storeActions, storeActionsSlot, ratingValue, ratingLabel, starCount, ratingSlot, image, imageSlot, notification, notificationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, description, descriptionClassName, imageClassName, optixFlowConfig, }: HeroMobileAppDownloadProps): React.JSX.Element;
 
 export { HeroMobileAppDownload, type HeroMobileAppDownloadProps };

package/dist/hero-mobile-app-download.js

@@ -947,7 +947,6 @@ function HeroMobileAppDownload({
   badgeIcon,
   badgeSlot,
   heading,
-  description,
   storeActions,
   storeActionsSlot,
   ratingValue,
@@ -966,13 +965,14 @@ function HeroMobileAppDownload({
   className,
   contentClassName,
   headingClassName,
+  description,
   descriptionClassName,
   imageClassName,
   optixFlowConfig
 }) {
   const renderBadge = useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxs(Badge, { children: [
+    return /* @__PURE__ */ jsxs(Badge, { className: "px-4 py-1", children: [
       badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon }),
       /* @__PURE__ */ jsx("span", { children: badgeText })
     ] });

package/dist/hero-premium-split-avatars.cjs

@@ -873,8 +873,8 @@ var Section = React__namespace.default.forwardRef(
 );
 Section.displayName = "Section";
 function HeroPremiumSplitAvatars({
-  brandName = "Business",
-  brandSuffix = "PRO",
+  brandName,
+  brandSuffix,
   brandSlot,
   heading,
   description,
@@ -882,14 +882,15 @@ function HeroPremiumSplitAvatars({
   actionSlot,
   avatars,
   avatarsSlot,
-  socialProofText = "More than 1 million professionals rely on our platform",
+  socialProofText,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -938,16 +939,17 @@ function HeroPremiumSplitAvatars({
       }
     );
   }, [imageSlot, image, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark flex", className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
+      className: cn("relative flex items-center justify-center dark", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
           renderBrand,
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
@@ -957,7 +959,7 @@ function HeroPremiumSplitAvatars({
           renderAvatars
         ] }) }),
         renderImage
-      ]
+      ] })
     }
   );
 }

package/dist/hero-premium-split-avatars.d.cts

@@ -84,6 +84,10 @@ interface HeroPremiumSplitAvatarsProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the content column
      */
@@ -105,6 +109,6 @@ interface HeroPremiumSplitAvatarsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
+declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
 
 export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };

package/dist/hero-premium-split-avatars.d.ts

@@ -84,6 +84,10 @@ interface HeroPremiumSplitAvatarsProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the content column
      */
@@ -105,6 +109,6 @@ interface HeroPremiumSplitAvatarsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
+declare function HeroPremiumSplitAvatars({ brandName, brandSuffix, brandSlot, heading, description, action, actionSlot, avatars, avatarsSlot, socialProofText, image, imageSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroPremiumSplitAvatarsProps): React.JSX.Element;
 
 export { HeroPremiumSplitAvatars, type HeroPremiumSplitAvatarsProps };

package/dist/hero-premium-split-avatars.js

@@ -851,8 +851,8 @@ var Section = React__default.forwardRef(
 );
 Section.displayName = "Section";
 function HeroPremiumSplitAvatars({
-  brandName = "Business",
-  brandSuffix = "PRO",
+  brandName,
+  brandSuffix,
   brandSlot,
   heading,
   description,
@@ -860,14 +860,15 @@ function HeroPremiumSplitAvatars({
   actionSlot,
   avatars,
   avatarsSlot,
-  socialProofText = "More than 1 million professionals rely on our platform",
+  socialProofText,
   image,
   imageSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -916,16 +917,17 @@ function HeroPremiumSplitAvatars({
       }
     );
   }, [imageSlot, image, imageClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("dark flex", className),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxs("div", { className: cn("container my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
+      className: cn("relative flex items-center justify-center dark", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-center bg-background lg:w-1/2", children: /* @__PURE__ */ jsxs("div", { className: cn("my-10 flex w-[500px] flex-col gap-24", contentClassName), children: [
           renderBrand,
           /* @__PURE__ */ jsxs("div", { children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-4xl lg:text-6xl", headingClassName), children: heading })),
@@ -935,7 +937,7 @@ function HeroPremiumSplitAvatars({
           renderAvatars
         ] }) }),
         renderImage
-      ]
+      ] })
     }
   );
 }

package/dist/hero-presentation-platform-video.cjs

@@ -833,10 +833,11 @@ function HeroPresentationPlatformVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -879,22 +880,24 @@ function HeroPresentationPlatformVideo({
       }
     ) });
   }, [videoSlot, videoSrc, videoClassName]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "flex min-h-screen items-center justify-between bg-background py-14",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5 px-[10%] lg:w-[50%] lg:pr-0", contentClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-screen items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-5 lg:w-[50%] lg:pr-0", contentClassName), children: [
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light uppercase", children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }

package/dist/hero-presentation-platform-video.d.cts

@@ -54,6 +54,10 @@ interface HeroPresentationPlatformVideoProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the content column
      */
@@ -71,6 +75,6 @@ interface HeroPresentationPlatformVideoProps {
      */
     videoClassName?: string;
 }
-declare function HeroPresentationPlatformVideo({ subtitle, heading, description, actions, actionsSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
+declare function HeroPresentationPlatformVideo({ subtitle, heading, description, actions, actionsSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
 
 export { HeroPresentationPlatformVideo, type HeroPresentationPlatformVideoProps };

package/dist/hero-presentation-platform-video.d.ts

@@ -54,6 +54,10 @@ interface HeroPresentationPlatformVideoProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the content column
      */
@@ -71,6 +75,6 @@ interface HeroPresentationPlatformVideoProps {
      */
     videoClassName?: string;
 }
-declare function HeroPresentationPlatformVideo({ subtitle, heading, description, actions, actionsSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
+declare function HeroPresentationPlatformVideo({ subtitle, heading, description, actions, actionsSlot, videoSrc, videoSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, videoClassName, }: HeroPresentationPlatformVideoProps): React.JSX.Element;
 
 export { HeroPresentationPlatformVideo, type HeroPresentationPlatformVideoProps };

package/dist/hero-presentation-platform-video.js

@@ -812,10 +812,11 @@ function HeroPresentationPlatformVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -858,22 +859,24 @@ function HeroPresentationPlatformVideo({
       }
     ) });
   }, [videoSlot, videoSrc, videoClassName]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "flex min-h-screen items-center justify-between bg-background py-14",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5 px-[10%] lg:w-[50%] lg:pr-0", contentClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-screen items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5 lg:w-[50%] lg:pr-0", contentClassName), children: [
           subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: "font-light uppercase", children: subtitle }) : subtitle),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-medium md:text-6xl lg:text-7xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }

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

@@ -31,32 +31,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -967,7 +941,7 @@ function HeroProductivityLauncherVideo({
   videoSrc,
   videoSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
@@ -999,7 +973,7 @@ function HeroProductivityLauncherVideo({
   const renderVersionInfo = React.useMemo(() => {
     if (versionInfoSlot) return versionInfoSlot;
     if (!versionInfo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-6 text-xs", getTextColor(background, "muted")), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6 text-xs text-muted-foreground", children: [
       versionInfo.version && /* @__PURE__ */ jsxRuntime.jsx("span", { children: versionInfo.version }),
       versionInfo.osRequirement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: versionInfo.osRequirement }),
       versionInfo.installMethod && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative before:absolute before:-left-3 before:content-['|']", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: versionInfo.installAction, children: versionInfo.installMethod }) })
@@ -1015,7 +989,7 @@ function HeroProductivityLauncherVideo({
         className: "group relative mt-10 flex h-8 items-center gap-3 overflow-hidden rounded-full border border-border/50 bg-background px-3 py-1 text-sm font-medium",
         children: [
           secondaryCta.primaryText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.primaryText }),
-          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex items-center gap-1", getTextColor(background, "muted")), children: [
+          secondaryCta.secondaryText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: secondaryCta.secondaryText }),
             /* @__PURE__ */ jsxRuntime.jsx(
               DynamicIcon,
@@ -1047,15 +1021,17 @@ function HeroProductivityLauncherVideo({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
-      className: cn(
-        "dark relative overflow-hidden bg-background py-12 font-sans md:py-20",
-        className
-      ),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center dark overflow-hidden bg-background py-12 font-sans md:py-20", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 container max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-20 max-w-204.5", contentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 px-4 pt-52 pb-32 md:pb-52", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-100 sm:max-w-135", children: heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-semibold [text-shadow:0_4px_4px_rgba(0,0,0,0.15)] sm:text-5xl md:text-[4rem]", headingClassName), children: heading })) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-90 md:max-w-full", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm leading-normal tracking-tight text-balance text-muted-foreground [text-shadow:0_4px_4px_rgba(0,0,0,0.25)] md:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             renderActions,