@opensite/ui 0.4.1 → 0.4.3

package/dist/service-hover-carousel.cjs

@@ -1047,6 +1047,7 @@ var Section = React4__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -1066,7 +1067,7 @@ var Section = React4__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1131,87 +1132,121 @@ function ServiceHoverCarousel({
   const renderHeader = () => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex flex-col justify-between md:flex-row md:items-end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex shrink-0 items-center justify-start gap-2", controlsClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            size: "icon",
-            variant: "outline",
-            onClick: () => carouselApi?.scrollPrev(),
-            disabled: !canScrollPrev,
-            className: "rounded-full",
-            asButton: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            size: "icon",
-            variant: "outline",
-            onClick: () => carouselApi?.scrollNext(),
-            disabled: !canScrollNext,
-            className: "rounded-full",
-            asButton: true,
-            children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-          }
-        )
-      ] })
-    ] }) });
-  };
-  const renderItems = () => {
-    if (itemsSlot) return itemsSlot;
-    if (!items || items.length === 0) return null;
-    return items.map((product) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("min-w-[334px] flex-1", itemClassName, product.className), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "a",
-      {
-        href: product.href || `/services/${product.id}`,
-        className: "group relative flex h-full flex-col items-start justify-start gap-2",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative z-10 overflow-hidden rounded-2xl", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: product.image,
-                alt: typeof product.title === "string" ? product.title : product.imageAlt || "Service image",
-                className: cn("h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0", imageClassName),
-                style: { aspectRatio: "3/4" },
-                loading: "lazy",
-                optixFlowConfig
-              }
-            ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          className: cn(
+            "text-3xl font-semibold md:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-8 flex shrink-0 items-center justify-start gap-2",
+            controlsClassName
+          ),
+          children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+              Pressable,
               {
-                src: product.hoverImage,
-                alt: typeof product.title === "string" ? product.title : product.hoverImageAlt || "Service hover image",
-                className: cn("absolute top-0 left-0 z-10 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100", imageClassName),
-                style: { aspectRatio: "3/4" },
-                loading: "lazy",
-                optixFlowConfig
+                size: "icon",
+                variant: "outline",
+                onClick: () => carouselApi?.scrollPrev(),
+                disabled: !canScrollPrev,
+                className: "rounded-full",
+                asButton: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
+              Pressable,
               {
-                className: cn("absolute top-4 left-4 bg-background px-4 py-2", badgeClassName),
+                size: "icon",
                 variant: "outline",
-                children: product.tag
+                onClick: () => carouselApi?.scrollNext(),
+                disabled: !canScrollNext,
+                className: "rounded-full",
+                asButton: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { children: product.title }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              pricePrefix,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.price })
-            ] })
-          ] })
-        ]
-      }
-    ) }, product.id));
+          ]
+        }
+      )
+    ] }) });
+  };
+  const renderItems = () => {
+    if (itemsSlot) return itemsSlot;
+    if (!items || items.length === 0) return null;
+    return items.map((product) => /* @__PURE__ */ jsxRuntime.jsx(
+      CarouselItem,
+      {
+        className: cn("min-w-[334px] flex-1", itemClassName, product.className),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: product.href || `/services/${product.id}`,
+            className: "group relative flex h-full flex-col items-start justify-start gap-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative z-10 overflow-hidden rounded-2xl", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: product.image,
+                    alt: typeof product.title === "string" ? product.title : product.imageAlt || "Service image",
+                    className: cn(
+                      "h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0",
+                      imageClassName
+                    ),
+                    style: { aspectRatio: "3/4" },
+                    loading: "lazy",
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: product.hoverImage,
+                    alt: typeof product.title === "string" ? product.title : product.hoverImageAlt || "Service hover image",
+                    className: cn(
+                      "absolute top-0 left-0 z-10 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100",
+                      imageClassName
+                    ),
+                    style: { aspectRatio: "3/4" },
+                    loading: "lazy",
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Badge,
+                  {
+                    className: cn(
+                      "absolute top-4 left-4 bg-background px-4 py-2",
+                      badgeClassName
+                    ),
+                    variant: "outline",
+                    children: product.tag
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { children: product.title }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  pricePrefix,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.price })
+                ] })
+              ] })
+            ]
+          }
+        )
+      },
+      product.id
+    ));
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1233,19 +1268,34 @@ function ServiceHoverCarousel({
                 align: "start"
               },
               className: carouselClassName,
-              children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: cn("px-4 pb-10 lg:px-10", carouselContentClassName), children: renderItems() })
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                CarouselContent,
+                {
+                  className: cn("px-4 pb-10 lg:px-10", carouselContentClassName),
+                  children: renderItems()
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-0 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200", progressClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "h-0.5 rounded bg-black transition-transform duration-300 ease-out",
-              style: {
-                width: `${progressIndicatorWidth}px`,
-                transform: `translateX(${progressOffset}px)`
-              }
+              className: cn(
+                "absolute bottom-0 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200",
+                progressClassName
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "h-0.5 rounded bg-black transition-transform duration-300 ease-out",
+                  style: {
+                    width: `${progressIndicatorWidth}px`,
+                    transform: `translateX(${progressOffset}px)`
+                  }
+                }
+              )
             }
-          ) })
+          )
         ] })
       ]
     }

package/dist/service-hover-carousel.d.cts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -122,7 +121,7 @@ interface ServiceHoverCarouselProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/service-hover-carousel.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -122,7 +121,7 @@ interface ServiceHoverCarouselProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/service-hover-carousel.js

@@ -1023,6 +1023,7 @@ var Section = React4__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -1042,7 +1043,7 @@ var Section = React4__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1107,87 +1108,121 @@ function ServiceHoverCarousel({
   const renderHeader = () => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsx("div", { className: "px-4 lg:px-10", children: /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col justify-between md:flex-row md:items-end", children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", headingClassName), children: heading }) }),
-      /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex shrink-0 items-center justify-start gap-2", controlsClassName), children: [
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            size: "icon",
-            variant: "outline",
-            onClick: () => carouselApi?.scrollPrev(),
-            disabled: !canScrollPrev,
-            className: "rounded-full",
-            asButton: true,
-            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            size: "icon",
-            variant: "outline",
-            onClick: () => carouselApi?.scrollNext(),
-            disabled: !canScrollNext,
-            className: "rounded-full",
-            asButton: true,
-            children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-          }
-        )
-      ] })
-    ] }) });
-  };
-  const renderItems = () => {
-    if (itemsSlot) return itemsSlot;
-    if (!items || items.length === 0) return null;
-    return items.map((product) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("min-w-[334px] flex-1", itemClassName, product.className), children: /* @__PURE__ */ jsxs(
-      "a",
-      {
-        href: product.href || `/services/${product.id}`,
-        className: "group relative flex h-full flex-col items-start justify-start gap-2",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "group relative z-10 overflow-hidden rounded-2xl", children: [
-            /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: product.image,
-                alt: typeof product.title === "string" ? product.title : product.imageAlt || "Service image",
-                className: cn("h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0", imageClassName),
-                style: { aspectRatio: "3/4" },
-                loading: "lazy",
-                optixFlowConfig
-              }
-            ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: cn(
+            "text-3xl font-semibold md:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "mt-8 flex shrink-0 items-center justify-start gap-2",
+            controlsClassName
+          ),
+          children: [
             /* @__PURE__ */ jsx(
-              Img,
+              Pressable,
               {
-                src: product.hoverImage,
-                alt: typeof product.title === "string" ? product.title : product.hoverImageAlt || "Service hover image",
-                className: cn("absolute top-0 left-0 z-10 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100", imageClassName),
-                style: { aspectRatio: "3/4" },
-                loading: "lazy",
-                optixFlowConfig
+                size: "icon",
+                variant: "outline",
+                onClick: () => carouselApi?.scrollPrev(),
+                disabled: !canScrollPrev,
+                className: "rounded-full",
+                asButton: true,
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 20 })
               }
             ),
             /* @__PURE__ */ jsx(
-              Badge,
+              Pressable,
               {
-                className: cn("absolute top-4 left-4 bg-background px-4 py-2", badgeClassName),
+                size: "icon",
                 variant: "outline",
-                children: product.tag
+                onClick: () => carouselApi?.scrollNext(),
+                disabled: !canScrollNext,
+                className: "rounded-full",
+                asButton: true,
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
               }
             )
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("h3", { children: product.title }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              pricePrefix,
-              " ",
-              /* @__PURE__ */ jsx("span", { children: product.price })
-            ] })
-          ] })
-        ]
-      }
-    ) }, product.id));
+          ]
+        }
+      )
+    ] }) });
+  };
+  const renderItems = () => {
+    if (itemsSlot) return itemsSlot;
+    if (!items || items.length === 0) return null;
+    return items.map((product) => /* @__PURE__ */ jsx(
+      CarouselItem,
+      {
+        className: cn("min-w-[334px] flex-1", itemClassName, product.className),
+        children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: product.href || `/services/${product.id}`,
+            className: "group relative flex h-full flex-col items-start justify-start gap-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxs("div", { className: "group relative z-10 overflow-hidden rounded-2xl", children: [
+                /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: product.image,
+                    alt: typeof product.title === "string" ? product.title : product.imageAlt || "Service image",
+                    className: cn(
+                      "h-full w-full object-cover transition-opacity duration-500 group-hover:opacity-0",
+                      imageClassName
+                    ),
+                    style: { aspectRatio: "3/4" },
+                    loading: "lazy",
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: product.hoverImage,
+                    alt: typeof product.title === "string" ? product.title : product.hoverImageAlt || "Service hover image",
+                    className: cn(
+                      "absolute top-0 left-0 z-10 h-full w-full rounded-2xl object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100",
+                      imageClassName
+                    ),
+                    style: { aspectRatio: "3/4" },
+                    loading: "lazy",
+                    optixFlowConfig
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    className: cn(
+                      "absolute top-4 left-4 bg-background px-4 py-2",
+                      badgeClassName
+                    ),
+                    variant: "outline",
+                    children: product.tag
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("h3", { children: product.title }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  pricePrefix,
+                  " ",
+                  /* @__PURE__ */ jsx("span", { children: product.price })
+                ] })
+              ] })
+            ]
+          }
+        )
+      },
+      product.id
+    ));
   };
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1209,19 +1244,34 @@ function ServiceHoverCarousel({
                 align: "start"
               },
               className: carouselClassName,
-              children: /* @__PURE__ */ jsx(CarouselContent, { className: cn("px-4 pb-10 lg:px-10", carouselContentClassName), children: renderItems() })
+              children: /* @__PURE__ */ jsx(
+                CarouselContent,
+                {
+                  className: cn("px-4 pb-10 lg:px-10", carouselContentClassName),
+                  children: renderItems()
+                }
+              )
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-0 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200", progressClassName), children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: "h-0.5 rounded bg-black transition-transform duration-300 ease-out",
-              style: {
-                width: `${progressIndicatorWidth}px`,
-                transform: `translateX(${progressOffset}px)`
-              }
+              className: cn(
+                "absolute bottom-0 left-1/2 h-0.5 w-60 -translate-x-1/2 rounded bg-gray-200",
+                progressClassName
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "h-0.5 rounded bg-black transition-transform duration-300 ease-out",
+                  style: {
+                    width: `${progressIndicatorWidth}px`,
+                    transform: `translateX(${progressOffset}px)`
+                  }
+                }
+              )
             }
-          ) })
+          )
         ] })
       ]
     }

package/dist/services-list-feature-spotlight.cjs

@@ -476,6 +476,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -495,7 +496,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -532,7 +533,8 @@ function ServicesListFeatureSpotlight({
 }) {
   const renderFeatureIcon = (feature) => {
     if (feature.icon) return feature.icon;
-    if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 });
+    if (feature.iconName)
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24 });
     return null;
   };
   const renderFeatures = () => {
@@ -543,7 +545,10 @@ function ServicesListFeatureSpotlight({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         framerMotion.motion.div,
         {
-          className: cn("grid grid-cols-1 items-center gap-8 lg:grid-cols-2", feature.className),
+          className: cn(
+            "grid grid-cols-1 items-center gap-8 lg:grid-cols-2",
+            feature.className
+          ),
           initial: { opacity: 0, y: 18 },
           whileInView: { opacity: 1, y: 0 },
           viewport: { once: true, margin: "-50px" },
@@ -601,8 +606,26 @@ function ServicesListFeatureSpotlight({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em] text-primary", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-3 text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading })),
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mt-3 text-3xl font-bold text-foreground md:text-4xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
         ] }),
         renderFeatures()
       ] })

package/dist/services-list-feature-spotlight.d.cts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -108,7 +107,7 @@ interface ServicesListFeatureSpotlightProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/services-list-feature-spotlight.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import 'react/jsx-runtime';
-import './patternSvgs-c5ZNVoTT.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -108,7 +107,7 @@ interface ServicesListFeatureSpotlightProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */