@opensite/ui 1.6.2 → 1.6.3

package/dist/hero-pattern-badge-logos.js

@@ -12,32 +12,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";
-    }
-  }
-}
 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",
   {
@@ -871,14 +845,13 @@ function HeroPatternBadgeLogos({
   actionsSlot,
   logos,
   logosSlot,
-  logosTagline = "Powering the next generation of digital products",
-  backgroundImageUrl = "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  logosTagline,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
@@ -892,7 +865,14 @@ function HeroPatternBadgeLogos({
     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,
         {
@@ -949,7 +929,7 @@ function HeroPatternBadgeLogos({
       return /* @__PURE__ */ jsx("div", { className: logoClassName, children: imgElement }, index);
     });
   }, [logosSlot, logos, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -957,31 +937,61 @@ function HeroPatternBadgeLogos({
       pattern,
       patternOpacity,
       className: cn("relative p-0", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute h-full w-full bg-contain bg-repeat opacity-100 lg:block",
-              "mask-[linear-gradient(to_right,var(--color-border),transparent,transparent,var(--color-border))]",
-              backgroundClassName
+      containerClassName,
+      children: /* @__PURE__ */ jsx("div", { className: cn("relative"), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center",
+            contentClassName
+          ),
+          children: [
+            badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "default", children: badge }) : badge }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "mb-6 text-4xl font-bold tracking-tight text-balance md:text-5xl lg:text-7xl",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mx-auto max-w-2xl md:text-lg lg: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 flex items-center gap-4", actionsClassName),
+                children: renderActions
+              }
             ),
-            style: { backgroundImage: `url('${backgroundImageUrl}')` }
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn("container py-28 md:py-32", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "transition-colors hover:bg-secondary/20", children: badge }) : badge }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-4xl font-bold tracking-tight text-pretty md:text-5xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl md:text-lg lg: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-6 flex items-center gap-4", actionsClassName), children: renderActions }),
-          (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12 flex flex-col items-center gap-4 lg:mt-16", logosClassName), children: [
-            logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm", getTextColor(background, "muted")), children: logosTagline }) : logosTagline),
-            /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
-          ] })
-        ] }) }) })
-      ]
+            (logosSlot || logos && logos.length > 0 || logosTagline) && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "mt-12 flex flex-col items-center gap-4 lg:mt-16",
+                  logosClassName
+                ),
+                children: [
+                  logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
+                ]
+              }
+            )
+          ]
+        }
+      ) }) })
     }
   );
 }

package/dist/hero-split-icon-cards.cjs

@@ -983,28 +983,22 @@ function HeroSplitIconCards({
   cardItems,
   cardsSlot,
   background,
-  verticalSpacing,
   pattern,
   patternOpacity,
   className,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  verticalSpacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32"
 }) {
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-4", children: [
       primaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          href: secondaryCta.href,
-          size: "lg",
-          variant: "outline",
-          children: secondaryCta.label
-        }
-      )
+      secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "outline", children: secondaryCta.label })
     ] });
   }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = React.useMemo(() => {
@@ -1012,10 +1006,29 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-14 w-14 items-center justify-center rounded-xl",
+              `${getAccentColor(background)}/10`,
+              getAccentColor(background)
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 24 })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
+          item.subtitle ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: item.subtitle
+            }
+          ) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: card }, idx);
@@ -1025,15 +1038,53 @@ function HeroSplitIconCards({
     Section,
     {
       background,
-      spacing: verticalSpacing,
+      spacing: verticalSpacing || spacing,
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", 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 })),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-semibold uppercase tracking-[0.25em]",
+                getAccentColor(background)
+              ),
+              children: eyebrow
+            }
+          ) : eyebrow),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards

package/dist/hero-split-icon-cards.d.cts

@@ -99,12 +99,18 @@ interface HeroSplitIconCardsProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /** Section spacing variant */
+    spacing?: SectionSpacing;
 }
 /**
  * HeroSplitIconCards - Two-column hero layout with text content on the left and
  * a stacked list of icon cards on the right. Ideal for service pages that need
  * an explanatory hero plus quick benefit callouts.
  */
-declare function HeroSplitIconCards({ eyebrow, heading, description, primaryCta, secondaryCta, actionsSlot, children, cardItems, cardsSlot, background, verticalSpacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroSplitIconCardsProps): React.JSX.Element;
+declare function HeroSplitIconCards({ eyebrow, heading, description, primaryCta, secondaryCta, actionsSlot, children, cardItems, cardsSlot, background, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, verticalSpacing, containerClassName, spacing, }: HeroSplitIconCardsProps): React.JSX.Element;
 
 export { HeroSplitIconCards, type HeroSplitIconCardsProps };

package/dist/hero-split-icon-cards.d.ts

@@ -99,12 +99,18 @@ interface HeroSplitIconCardsProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
+    /** Section spacing variant */
+    spacing?: SectionSpacing;
 }
 /**
  * HeroSplitIconCards - Two-column hero layout with text content on the left and
  * a stacked list of icon cards on the right. Ideal for service pages that need
  * an explanatory hero plus quick benefit callouts.
  */
-declare function HeroSplitIconCards({ eyebrow, heading, description, primaryCta, secondaryCta, actionsSlot, children, cardItems, cardsSlot, background, verticalSpacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, }: HeroSplitIconCardsProps): React.JSX.Element;
+declare function HeroSplitIconCards({ eyebrow, heading, description, primaryCta, secondaryCta, actionsSlot, children, cardItems, cardsSlot, background, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, verticalSpacing, containerClassName, spacing, }: HeroSplitIconCardsProps): React.JSX.Element;
 
 export { HeroSplitIconCards, type HeroSplitIconCardsProps };

package/dist/hero-split-icon-cards.js

@@ -962,28 +962,22 @@ function HeroSplitIconCards({
   cardItems,
   cardsSlot,
   background,
-  verticalSpacing,
   pattern,
   patternOpacity,
   className,
   contentClassName,
   headingClassName,
-  descriptionClassName
+  descriptionClassName,
+  verticalSpacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32"
 }) {
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!primaryCta && !secondaryCta) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
       primaryCta && /* @__PURE__ */ jsx(Pressable, { href: primaryCta.href, size: "lg", variant: "default", children: primaryCta.label }),
-      secondaryCta && /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          href: secondaryCta.href,
-          size: "lg",
-          variant: "outline",
-          children: secondaryCta.label
-        }
-      )
+      secondaryCta && /* @__PURE__ */ jsx(Pressable, { href: secondaryCta.href, size: "lg", variant: "outline", children: secondaryCta.label })
     ] });
   }, [actionsSlot, primaryCta, secondaryCta]);
   const renderCards = useMemo(() => {
@@ -991,10 +985,29 @@ function HeroSplitIconCards({
     if (!cardItems || cardItems.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4", children: cardItems.map((item, idx) => {
       const card = /* @__PURE__ */ jsx(Card, { className: "h-full border-border/60 px-0 py-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-6", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("flex h-14 w-14 items-center justify-center rounded-xl", `${getAccentColor(background)}/10`, getAccentColor(background)), children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-14 w-14 items-center justify-center rounded-xl",
+              `${getAccentColor(background)}/10`,
+              getAccentColor(background)
+            ),
+            children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 24 })
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold ", children: item.title }),
-          item.subtitle ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.subtitle }) : null
+          item.subtitle ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-2 text-sm",
+                getTextColor(background, "muted")
+              ),
+              children: item.subtitle
+            }
+          ) : null
         ] })
       ] }) });
       return item.href ? /* @__PURE__ */ jsx(Pressable, { href: item.href, className: "block", children: card }, idx) : /* @__PURE__ */ jsx("div", { children: card }, idx);
@@ -1004,15 +1017,53 @@ function HeroSplitIconCards({
     Section,
     {
       background,
-      spacing: verticalSpacing,
+      spacing: verticalSpacing || spacing,
       pattern,
       patternOpacity,
       className: cn("overflow-hidden", className),
+      containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center", children: [
         /* @__PURE__ */ jsx("div", { className: cn("space-y-6", contentClassName), children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
-          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.25em]", getAccentColor(background)), children: eyebrow }) : eyebrow),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", 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 })),
+          eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-xs font-semibold uppercase tracking-[0.25em]",
+                getAccentColor(background)
+              ),
+              children: eyebrow
+            }
+          ) : eyebrow),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-lg",
+                getTextColor(background, "muted"),
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
           renderActions
         ] }) }),
         renderCards