@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-testimonial-image-grid.cjs

@@ -36,32 +36,6 @@ var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatio
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -908,21 +882,18 @@ Section.displayName = "Section";
 function HeroTestimonialImageGrid({
   heading,
   description,
-  button = {
-    text: "Get Started",
-    url: "#"
-  },
+  button,
   buttonSlot,
   testimonial,
   testimonialSlot,
   gridImages,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -968,7 +939,7 @@ function HeroTestimonialImageGrid({
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[0].src,
@@ -977,7 +948,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[1].src,
@@ -986,7 +957,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[2].src,
@@ -995,7 +966,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[3].src,
@@ -1013,8 +984,9 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12 md:py-20", className),
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
+      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),

package/dist/hero-testimonial-image-grid.js

@@ -13,32 +13,6 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -885,21 +859,18 @@ Section.displayName = "Section";
 function HeroTestimonialImageGrid({
   heading,
   description,
-  button = {
-    text: "Get Started",
-    url: "#"
-  },
+  button,
   buttonSlot,
   testimonial,
   testimonialSlot,
   gridImages,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
@@ -945,7 +916,7 @@ function HeroTestimonialImageGrid({
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
     return /* @__PURE__ */ jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxs("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: [
-      /* @__PURE__ */ jsx("div", { className: cn("overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[0].src,
@@ -954,7 +925,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "absolute top-1/2 left-[5%] w-[110%] max-w-100 -translate-y-1/2 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.739130435 / 1, children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[1].src,
@@ -963,7 +934,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "absolute top-[9%] left-[9%] w-[200%] max-w-150 overflow-hidden rounded-md", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1.6 / 1, children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[2].src,
@@ -972,7 +943,7 @@ function HeroTestimonialImageGrid({
           optixFlowConfig
         }
       ) }) }) }),
-      /* @__PURE__ */ jsx("div", { className: cn("relative overflow-hidden rounded-[5.2%] border border-muted", getNestedCardBg(background)), children: /* @__PURE__ */ jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsx("div", { className: "relative top-[12%] left-[50%] w-[70%] max-w-70 -translate-x-[50%]", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 0.52 / 1, children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[3].src,
@@ -990,8 +961,9 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12 md:py-20", className),
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
+      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),

package/dist/hero-therapy-testimonial-grid.cjs

@@ -32,36 +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 getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -865,11 +835,11 @@ function HeroTherapyTestimonialGrid({
   testimonial,
   testimonialSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -899,11 +869,7 @@ function HeroTherapyTestimonialGrid({
   const renderTestimonial = React.useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
-      "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
       testimonial.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -946,7 +912,7 @@ function HeroTherapyTestimonialGrid({
         }
       ) }) }),
       renderTestimonial,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full overflow-hidden rounded-2xl", getNestedCardBg(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-hidden rounded-2xl bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: images[2].src,
@@ -960,8 +926,13 @@ function HeroTherapyTestimonialGrid({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn("bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),

package/dist/hero-therapy-testimonial-grid.js

@@ -11,36 +11,6 @@ import { Img } from '@page-speed/img';
 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 normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -844,11 +814,11 @@ function HeroTherapyTestimonialGrid({
   testimonial,
   testimonialSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -878,11 +848,7 @@ function HeroTherapyTestimonialGrid({
   const renderTestimonial = useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
-    return /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8",
-      getNestedCardBg(background),
-      getNestedCardTextColor(background)
-    ), children: [
+    return /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
       testimonial.avatar && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsx(
         Img,
         {
@@ -925,7 +891,7 @@ function HeroTherapyTestimonialGrid({
         }
       ) }) }),
       renderTestimonial,
-      /* @__PURE__ */ jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsx("div", { className: cn("h-full w-full overflow-hidden rounded-2xl", getNestedCardBg(background)), children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "row-[4/5] md:col-[2/3] md:row-[2/3]", children: /* @__PURE__ */ jsx("div", { className: "h-full w-full overflow-hidden rounded-2xl bg-card", children: /* @__PURE__ */ jsx(
         Img,
         {
           src: images[2].src,
@@ -939,8 +905,13 @@ function HeroTherapyTestimonialGrid({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn("bg-background py-12 font-sans md:py-20", className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),

package/dist/hero-video-background-dark.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:")) {
@@ -859,10 +833,11 @@ function HeroVideoBackgroundDark({
   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
@@ -902,23 +877,24 @@ function HeroVideoBackgroundDark({
       }
     );
   }, [videoSlot, videoSrc]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-xs", getTextColor(background, "muted")), children: badgeText }) : badgeText),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-10 mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", 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 })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }

package/dist/hero-video-background-dark.d.cts

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

package/dist/hero-video-background-dark.d.ts

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

package/dist/hero-video-background-dark.js

@@ -10,32 +10,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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:")) {
@@ -838,10 +812,11 @@ function HeroVideoBackgroundDark({
   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
@@ -881,23 +856,24 @@ function HeroVideoBackgroundDark({
       }
     );
   }, [videoSlot, videoSrc]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 container mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-xs", getTextColor(background, "muted")), children: badgeText }) : badgeText),
+      className: cn("relative flex items-center justify-center", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 mx-auto flex size-full max-w-3xl flex-col justify-center gap-4 lg:items-center lg:text-center", contentClassName), children: [
+          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: badgeText }) : badgeText),
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-bold lg:text-[4.2rem]", 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 })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }),
         renderVideo
-      ]
+      ] })
     }
   );
 }