@opensite/ui 0.4.1 → 0.4.3

package/dist/about-story-expertise.cjs

@@ -896,6 +896,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -915,7 +916,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -969,7 +970,9 @@ function AboutStoryExpertise({
   const renderStory = () => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map((paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: paragraph }, idx)) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map(
+      (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: paragraph }, idx)
+    ) });
   };
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
@@ -989,38 +992,56 @@ function AboutStoryExpertise({
   const renderHighlight = () => {
     if (highlightSlot) return highlightSlot;
     if (!highlight) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl", highlightClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
-          highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-foreground", children: highlight.title }) : highlight.title)
-        ] })
-      ] }),
-      highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl",
+          highlightClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold text-foreground", children: highlight.title }) : highlight.title)
+            ] })
+          ] }),
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
+        ]
+      }
+    );
   };
   const renderExpertiseAreas = () => {
     if (expertiseAreasSlot) return expertiseAreasSlot;
     if (!expertiseAreas || expertiseAreas.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-6 md:grid-cols-2", expertiseAreasClassName), children: expertiseAreas.map((area, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-      framerMotion.motion.div,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        initial: { opacity: 0, scale: 0.96 },
-        whileInView: { opacity: 1, scale: 1 },
-        viewport: { once: true, margin: "-50px" },
-        transition: { duration: 0.3, delay: idx * 0.05 },
-        className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-bold text-foreground", children: area.title }) : area.title),
-            area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
-          ] })
-        ]
-      },
-      idx
-    )) });
+        className: cn(
+          "mt-10 grid grid-cols-1 gap-6 md:grid-cols-2",
+          expertiseAreasClassName
+        ),
+        children: expertiseAreas.map((area, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          framerMotion.motion.div,
+          {
+            initial: { opacity: 0, scale: 0.96 },
+            whileInView: { opacity: 1, scale: 1 },
+            viewport: { once: true, margin: "-50px" },
+            transition: { duration: 0.3, delay: idx * 0.05 },
+            className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-bold text-foreground", children: area.title }) : area.title),
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
+              ] })
+            ]
+          },
+          idx
+        ))
+      }
+    );
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -1042,8 +1063,26 @@ function AboutStoryExpertise({
               className: "order-2 space-y-6 lg:order-1",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em] text-primary", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-2 text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
+                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
+                        eyebrowClassName
+                      ),
+                      children: eyebrow
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mt-2 text-3xl font-bold text-foreground md:text-4xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
                 ] }),
                 renderStory(),
                 renderActions()
@@ -1058,30 +1097,75 @@ function AboutStoryExpertise({
               viewport: { once: true, margin: "-50px" },
               transition: { duration: 0.5 },
               className: "order-1 lg:order-2",
-              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-3xl border border-border shadow-2xl", imageClassName), children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: image.src,
-                    alt: image.alt,
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-foreground/60 via-transparent to-transparent" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-6 left-6 right-6", children: renderHighlight() })
-              ] })
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative overflow-hidden rounded-3xl border border-border shadow-2xl",
+                    imageClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: image.src,
+                        alt: image.alt,
+                        className: "h-full w-full object-cover",
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-foreground/60 via-transparent to-transparent" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-6 left-6 right-6", children: renderHighlight() })
+                  ]
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 rounded-3xl bg-muted/30 p-8 md:p-12", expertiseSectionClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
-            expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mt-2 text-2xl font-bold text-foreground md:text-3xl", expertiseHeadingClassName), children: expertiseHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
-            expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", expertiseDescriptionClassName), children: expertiseDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", expertiseDescriptionClassName), children: expertiseDescription }))
-          ] }),
-          renderExpertiseAreas()
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-20 rounded-3xl bg-muted/30 p-8 md:p-12",
+              expertiseSectionClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
+                expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "mt-2 text-2xl font-bold text-foreground md:text-3xl",
+                      expertiseHeadingClassName
+                    ),
+                    children: expertiseHeading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
+                expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                      expertiseDescriptionClassName
+                    ),
+                    children: expertiseDescription
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mx-auto mt-3 max-w-2xl",
+                      expertiseDescriptionClassName
+                    ),
+                    children: expertiseDescription
+                  }
+                ))
+              ] }),
+              renderExpertiseAreas()
+            ]
+          }
+        )
       ]
     }
   );

package/dist/about-story-expertise.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 { A as ActionConfig, 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';
@@ -138,7 +137,7 @@ interface AboutStoryExpertiseProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/about-story-expertise.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 { A as ActionConfig, 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';
@@ -138,7 +137,7 @@ interface AboutStoryExpertiseProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/about-story-expertise.js

@@ -875,6 +875,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -894,7 +895,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -948,7 +949,9 @@ function AboutStoryExpertise({
   const renderStory = () => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map((paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsx("div", { children: paragraph }, idx)) });
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 text-muted-foreground", storyClassName), children: storyParagraphs.map(
+      (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsx("div", { children: paragraph }, idx)
+    ) });
   };
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
@@ -968,38 +971,56 @@ function AboutStoryExpertise({
   const renderHighlight = () => {
     if (highlightSlot) return highlightSlot;
     if (!highlight) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl", highlightClassName), children: [
-      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
-          highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-foreground", children: highlight.title }) : highlight.title)
-        ] })
-      ] }),
-      highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl",
+          highlightClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: highlight.label }) : highlight.label),
+              highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-foreground", children: highlight.title }) : highlight.title)
+            ] })
+          ] }),
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: highlight.description }) : highlight.description)
+        ]
+      }
+    );
   };
   const renderExpertiseAreas = () => {
     if (expertiseAreasSlot) return expertiseAreasSlot;
     if (!expertiseAreas || expertiseAreas.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-10 grid grid-cols-1 gap-6 md:grid-cols-2", expertiseAreasClassName), children: expertiseAreas.map((area, idx) => /* @__PURE__ */ jsxs(
-      motion.div,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        initial: { opacity: 0, scale: 0.96 },
-        whileInView: { opacity: 1, scale: 1 },
-        viewport: { once: true, margin: "-50px" },
-        transition: { duration: 0.3, delay: idx * 0.05 },
-        className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold text-foreground", children: area.title }) : area.title),
-            area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
-          ] })
-        ]
-      },
-      idx
-    )) });
+        className: cn(
+          "mt-10 grid grid-cols-1 gap-6 md:grid-cols-2",
+          expertiseAreasClassName
+        ),
+        children: expertiseAreas.map((area, idx) => /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: { opacity: 0, scale: 0.96 },
+            whileInView: { opacity: 1, scale: 1 },
+            viewport: { once: true, margin: "-50px" },
+            transition: { duration: 0.3, delay: idx * 0.05 },
+            className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary", children: area.icon }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsx("h4", { className: "text-lg font-bold text-foreground", children: area.title }) : area.title),
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: area.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: area.description }))
+              ] })
+            ]
+          },
+          idx
+        ))
+      }
+    );
   };
   return /* @__PURE__ */ jsxs(
     Section,
@@ -1021,8 +1042,26 @@ function AboutStoryExpertise({
               className: "order-2 space-y-6 lg:order-1",
               children: [
                 /* @__PURE__ */ jsxs("div", { children: [
-                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em] text-primary", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mt-2 text-3xl font-bold text-foreground md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
+                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "text-sm font-semibold uppercase tracking-[0.2em] text-primary",
+                        eyebrowClassName
+                      ),
+                      children: eyebrow
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "mt-2 text-3xl font-bold text-foreground md:text-4xl",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
                 ] }),
                 renderStory(),
                 renderActions()
@@ -1037,30 +1076,75 @@ function AboutStoryExpertise({
               viewport: { once: true, margin: "-50px" },
               transition: { duration: 0.5 },
               className: "order-1 lg:order-2",
-              children: /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-3xl border border-border shadow-2xl", imageClassName), children: [
-                /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: image.src,
-                    alt: image.alt,
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-foreground/60 via-transparent to-transparent" }),
-                /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 left-6 right-6", children: renderHighlight() })
-              ] })
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative overflow-hidden rounded-3xl border border-border shadow-2xl",
+                    imageClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: image.src,
+                        alt: image.alt,
+                        className: "h-full w-full object-cover",
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-tr from-foreground/60 via-transparent to-transparent" }),
+                    /* @__PURE__ */ jsx("div", { className: "absolute bottom-6 left-6 right-6", children: renderHighlight() })
+                  ]
+                }
+              )
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: cn("mt-20 rounded-3xl bg-muted/30 p-8 md:p-12", expertiseSectionClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
-            expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mt-2 text-2xl font-bold text-foreground md:text-3xl", expertiseHeadingClassName), children: expertiseHeading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
-            expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-3 max-w-2xl text-muted-foreground", expertiseDescriptionClassName), children: expertiseDescription }) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-3 max-w-2xl", expertiseDescriptionClassName), children: expertiseDescription }))
-          ] }),
-          renderExpertiseAreas()
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mt-20 rounded-3xl bg-muted/30 p-8 md:p-12",
+              expertiseSectionClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold uppercase tracking-[0.2em] text-primary", children: "Our Expertise" }),
+                expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "mt-2 text-2xl font-bold text-foreground md:text-3xl",
+                      expertiseHeadingClassName
+                    ),
+                    children: expertiseHeading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", expertiseHeadingClassName), children: expertiseHeading })),
+                expertiseDescription && (typeof expertiseDescription === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mx-auto mt-3 max-w-2xl text-muted-foreground",
+                      expertiseDescriptionClassName
+                    ),
+                    children: expertiseDescription
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mx-auto mt-3 max-w-2xl",
+                      expertiseDescriptionClassName
+                    ),
+                    children: expertiseDescription
+                  }
+                ))
+              ] }),
+              renderExpertiseAreas()
+            ]
+          }
+        )
       ]
     }
   );

package/dist/alternating-blocks.cjs

@@ -339,6 +339,7 @@ var Section = React__default.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -358,7 +359,7 @@ var Section = React__default.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),

package/dist/alternating-blocks.d.cts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import './pattern-background-a7gKHzHy.cjs';
+import 'react/jsx-runtime';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';

package/dist/alternating-blocks.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
+import './pattern-background-a7gKHzHy.js';
+import 'react/jsx-runtime';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';

package/dist/alternating-blocks.js

@@ -333,6 +333,7 @@ var Section = React.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -352,7 +353,7 @@ var Section = React.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),

package/dist/animated-dialog.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AnimatedDialogProps } from './types.cjs';
 import 'react';
+import './pattern-background-a7gKHzHy.cjs';
 import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';

package/dist/animated-dialog.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AnimatedDialogProps } from './types.js';
 import 'react';
+import './pattern-background-a7gKHzHy.js';
 import './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';