@opensite/ui 1.8.2 → 1.8.4

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

@@ -814,11 +814,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,
@@ -924,11 +924,11 @@ function HeroHiringAnimatedText({
       ),
       containerClassName,
       style: { backgroundImage: `url('${backgroundImage}')` },
-      children: /* @__PURE__ */ 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__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-full max-w-md flex-col justify-between md:justify-end", children: /* @__PURE__ */ 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: [

package/dist/hero-minimal-centered-dark.cjs

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -31,58 +32,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 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:")) {
@@ -876,9 +825,40 @@ 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 HeroMinimalCenteredDark({
   badge,
-  showStatusDot = true,
   heading,
   headingHighlight,
   description,
@@ -887,11 +867,11 @@ function HeroMinimalCenteredDark({
   stats,
   statsSlot,
   background,
-  spacing,
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   badgeClassName,
   headingClassName,
   descriptionClassName,
@@ -902,7 +882,14 @@ function HeroMinimalCenteredDark({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return 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,
         {
@@ -922,36 +909,78 @@ function HeroMinimalCenteredDark({
   const renderStats = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", stat.className), children: [
-      stat.icon,
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: stat.value })
-    ] }, index));
+    return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("flex items-center gap-2", stat.className),
+        children: [
+          stat.icon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: stat.value })
+        ]
+      },
+      index
+    ));
   }, [statsSlot, stats]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "dark relative min-h-screen bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm", `${getNestedCardBg(background, "muted")}/30`, getTextColor(background, "muted"), badgeClassName), children: [
-          showStatusDot && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-success" })
-          ] }),
-          typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
-        ] }),
-        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: [
-          "The future of",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent", children: headingHighlight }),
-          " ",
-          "is here"
-        ] }) : null),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), statsClassName), children: renderStats })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3 py-2", badgeClassName), children: typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge }),
+        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: headingHighlight
+          }
+        ) : null),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-2xl text-lg md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-10 flex flex-col gap-4 md:flex-row",
+              actionsClassName
+            ),
+            children: renderActions
+          }
+        ),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex items-center gap-8 text-sm",
+              statsClassName
+            ),
+            children: renderStats
+          }
+        )
       ] })
     }
   );

package/dist/hero-minimal-centered-dark.d.cts

@@ -87,6 +87,6 @@ interface HeroMinimalCenteredDarkProps {
      */
     statsClassName?: string;
 }
-declare function HeroMinimalCenteredDark({ badge, showStatusDot, heading, headingHighlight, description, actions, actionsSlot, stats, statsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, }: HeroMinimalCenteredDarkProps): React.JSX.Element;
+declare function HeroMinimalCenteredDark({ badge, heading, headingHighlight, description, actions, actionsSlot, stats, statsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, }: HeroMinimalCenteredDarkProps): React.JSX.Element;
 
 export { HeroMinimalCenteredDark, type HeroMinimalCenteredDarkProps };

package/dist/hero-minimal-centered-dark.d.ts

@@ -87,6 +87,6 @@ interface HeroMinimalCenteredDarkProps {
      */
     statsClassName?: string;
 }
-declare function HeroMinimalCenteredDark({ badge, showStatusDot, heading, headingHighlight, description, actions, actionsSlot, stats, statsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, }: HeroMinimalCenteredDarkProps): React.JSX.Element;
+declare function HeroMinimalCenteredDark({ badge, heading, headingHighlight, description, actions, actionsSlot, stats, statsSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, }: HeroMinimalCenteredDarkProps): React.JSX.Element;
 
 export { HeroMinimalCenteredDark, type HeroMinimalCenteredDarkProps };

package/dist/hero-minimal-centered-dark.js

@@ -5,63 +5,12 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/hero/hero-minimal-centered-dark.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 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:")) {
@@ -855,9 +804,40 @@ 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 HeroMinimalCenteredDark({
   badge,
-  showStatusDot = true,
   heading,
   headingHighlight,
   description,
@@ -866,11 +846,11 @@ function HeroMinimalCenteredDark({
   stats,
   statsSlot,
   background,
-  spacing,
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   badgeClassName,
   headingClassName,
   descriptionClassName,
@@ -881,7 +861,14 @@ function HeroMinimalCenteredDark({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return 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,
         {
@@ -901,36 +888,78 @@ function HeroMinimalCenteredDark({
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", stat.className), children: [
-      stat.icon,
-      /* @__PURE__ */ jsx("span", { children: stat.value })
-    ] }, index));
+    return stats.map((stat, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex items-center gap-2", stat.className),
+        children: [
+          stat.icon,
+          /* @__PURE__ */ jsx("span", { children: stat.value })
+        ]
+      },
+      index
+    ));
   }, [statsSlot, stats]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "dark relative min-h-screen bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        badge && /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm", `${getNestedCardBg(background, "muted")}/30`, getTextColor(background, "muted"), badgeClassName), children: [
-          showStatusDot && /* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75" }),
-            /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-success" })
-          ] }),
-          typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge
-        ] }),
-        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : heading ? /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsxs("h1", { className: cn("mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: [
-          "The future of",
-          " ",
-          /* @__PURE__ */ jsx("span", { className: "bg-linear-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent", children: headingHighlight }),
-          " ",
-          "is here"
-        ] }) : null),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-2xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex flex-col gap-4 sm:flex-row", actionsClassName), children: renderActions }),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-8 text-sm", getTextColor(background, "muted"), statsClassName), children: renderStats })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        badge && /* @__PURE__ */ jsx(Badge, { className: cn("px-3 py-2", badgeClassName), children: typeof badge === "string" ? /* @__PURE__ */ jsx("span", { children: badge }) : badge }),
+        (heading || headingHighlight) && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading ? /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }) : headingHighlight ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: headingHighlight
+          }
+        ) : null),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-2xl text-lg md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+        (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-6 md:mt-10 flex flex-col gap-4 md:flex-row",
+              actionsClassName
+            ),
+            children: renderActions
+          }
+        ),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex items-center gap-8 text-sm",
+              statsClassName
+            ),
+            children: renderStats
+          }
+        )
       ] })
     }
   );

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

@@ -980,7 +980,7 @@ function HeroMobileAppDownload({
   notificationSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

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

@@ -959,7 +959,7 @@ function HeroMobileAppDownload({
   notificationSlot,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-overlay-cta-grid.cjs

@@ -943,7 +943,7 @@ function HeroOverlayCtaGrid({
   cards,
   cardsSlot,
   backgroundImage,
-  backgroundAlt = "OpenSite AI coverage advisory hero background",
+  backgroundAlt,
   backgroundSlot,
   background,
   spacing = "none",

package/dist/hero-overlay-cta-grid.js

@@ -922,7 +922,7 @@ function HeroOverlayCtaGrid({
   cards,
   cardsSlot,
   backgroundImage,
-  backgroundAlt = "OpenSite AI coverage advisory hero background",
+  backgroundAlt,
   backgroundSlot,
   background,
   spacing = "none",

package/dist/hero-spiral-pattern-cards.cjs

@@ -868,7 +868,7 @@ function HeroSpiralPatternCards({
   imagesSlot,
   optixFlowConfig,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-spiral-pattern-cards.js

@@ -847,7 +847,7 @@ function HeroSpiralPatternCards({
   imagesSlot,
   optixFlowConfig,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,

package/dist/hero-startup-launch-cta.cjs

@@ -878,7 +878,7 @@ function HeroStartupLaunchCta({
   patternClassName,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   contentClassName,
   badgeClassName,
   headingClassName,

package/dist/hero-startup-launch-cta.js

@@ -857,7 +857,7 @@ function HeroStartupLaunchCta({
   patternClassName,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-12 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   contentClassName,
   badgeClassName,
   headingClassName,