@opensite/ui 0.4.1 → 0.4.3

package/dist/footer-newsletter-minimal.d.cts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -101,7 +103,7 @@ interface FooterNewsletterMinimalProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /**

package/dist/footer-newsletter-minimal.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { P as PageSpeedFormConfig } from './forms-BCcwNFhk.js';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -101,7 +103,7 @@ interface FooterNewsletterMinimalProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /**

package/dist/footer-newsletter-minimal.js

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

package/dist/footer-simple-centered.cjs

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

package/dist/footer-simple-centered.d.cts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -93,7 +95,7 @@ interface FooterSimpleCenteredProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /** Optional Optix Flow configuration for @page-speed/img */

package/dist/footer-simple-centered.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { N as NavLinkItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -93,7 +95,7 @@ interface FooterSimpleCenteredProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /** Optional Optix Flow configuration for @page-speed/img */

package/dist/footer-simple-centered.js

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

package/dist/footer-social-newsletter.cjs

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

package/dist/footer-social-newsletter.d.cts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.cjs';
 import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -118,7 +120,7 @@ interface FooterSocialNewsletterProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /** Optional Optix Flow configuration for @page-speed/img */

package/dist/footer-social-newsletter.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SectionBackground, SectionSpacing } from './types.js';
 import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
+import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -118,7 +120,7 @@ interface FooterSocialNewsletterProps {
     /** Section spacing variant */
     spacing?: SectionSpacing;
     /** Optional background pattern */
-    pattern?: string;
+    pattern?: PatternName;
     /** Pattern opacity (0-1) */
     patternOpacity?: number;
     /** Optional Optix Flow configuration for @page-speed/img */

package/dist/footer-social-newsletter.js

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

package/dist/hero-gradient-avatars-rating.cjs

@@ -587,18 +587,18 @@ function AvatarImage({
   );
 }
 function HeroGradientAvatarsRating({
-  topLinkText = "opensiteai.com",
-  topLinkHref = "#",
+  topLinkText,
+  topLinkHref,
   topLinkSlot,
   heading,
-  headingSubtitle = "Made Simple",
+  headingSubtitle,
   description,
   actions,
   actionsSlot,
   avatars,
   avatarsSlot,
-  ratingValue = "5.0",
-  ratingLabel = "1000+ happy developers",
+  ratingValue,
+  ratingLabel,
   starCount = 5,
   images,
   imagesSlot,
@@ -613,6 +613,7 @@ function HeroGradientAvatarsRating({
 }) {
   const renderTopLink = () => {
     if (topLinkSlot) return topLinkSlot;
+    if (!topLinkText || !topLinkHref) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -656,6 +657,7 @@ function HeroGradientAvatarsRating({
     )) });
   };
   const renderRating = () => {
+    if (!ratingValue && !ratingLabel) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center sm:items-start", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
         [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -667,9 +669,9 @@ function HeroGradientAvatarsRating({
           },
           i
         )),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: ratingValue })
+        ratingValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: ratingValue })
       ] }),
-      typeof ratingLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel
+      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel)
     ] });
   };
   const renderImages = () => {
@@ -712,7 +714,7 @@ function HeroGradientAvatarsRating({
         ] }),
         description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
         renderActions(),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
+        (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
           renderAvatars(),
           renderRating()
         ] })

package/dist/hero-gradient-avatars-rating.d.cts

@@ -110,4 +110,4 @@ interface HeroGradientAvatarsRatingProps {
 }
 declare function HeroGradientAvatarsRating({ topLinkText, topLinkHref, topLinkSlot, heading, headingSubtitle, description, actions, actionsSlot, avatars, avatarsSlot, ratingValue, ratingLabel, starCount, images, imagesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGradientAvatarsRatingProps): React.JSX.Element;
 
-export { HeroGradientAvatarsRating, type HeroGradientAvatarsRatingProps };
+export { type AvatarItem, HeroGradientAvatarsRating, type HeroGradientAvatarsRatingProps };

package/dist/hero-gradient-avatars-rating.d.ts

@@ -110,4 +110,4 @@ interface HeroGradientAvatarsRatingProps {
 }
 declare function HeroGradientAvatarsRating({ topLinkText, topLinkHref, topLinkSlot, heading, headingSubtitle, description, actions, actionsSlot, avatars, avatarsSlot, ratingValue, ratingLabel, starCount, images, imagesSlot, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGradientAvatarsRatingProps): React.JSX.Element;
 
-export { HeroGradientAvatarsRating, type HeroGradientAvatarsRatingProps };
+export { type AvatarItem, HeroGradientAvatarsRating, type HeroGradientAvatarsRatingProps };

package/dist/hero-gradient-avatars-rating.js

@@ -564,18 +564,18 @@ function AvatarImage({
   );
 }
 function HeroGradientAvatarsRating({
-  topLinkText = "opensiteai.com",
-  topLinkHref = "#",
+  topLinkText,
+  topLinkHref,
   topLinkSlot,
   heading,
-  headingSubtitle = "Made Simple",
+  headingSubtitle,
   description,
   actions,
   actionsSlot,
   avatars,
   avatarsSlot,
-  ratingValue = "5.0",
-  ratingLabel = "1000+ happy developers",
+  ratingValue,
+  ratingLabel,
   starCount = 5,
   images,
   imagesSlot,
@@ -590,6 +590,7 @@ function HeroGradientAvatarsRating({
 }) {
   const renderTopLink = () => {
     if (topLinkSlot) return topLinkSlot;
+    if (!topLinkText || !topLinkHref) return null;
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -633,6 +634,7 @@ function HeroGradientAvatarsRating({
     )) });
   };
   const renderRating = () => {
+    if (!ratingValue && !ratingLabel) return null;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center sm:items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
         [...Array(starCount)].map((_, i) => /* @__PURE__ */ jsx(
@@ -644,9 +646,9 @@ function HeroGradientAvatarsRating({
           },
           i
         )),
-        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: ratingValue })
+        ratingValue && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: ratingValue })
       ] }),
-      typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel
+      ratingLabel && (typeof ratingLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: ratingLabel }) : ratingLabel)
     ] });
   };
   const renderImages = () => {
@@ -689,7 +691,7 @@ function HeroGradientAvatarsRating({
         ] }),
         description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("my-8 max-w-xl text-muted-foreground lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
         renderActions(),
-        /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
+        (avatars || avatarsSlot || ratingValue || ratingLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-col items-center gap-4 sm:flex-row sm:items-center", children: [
           renderAvatars(),
           renderRating()
         ] })

package/dist/hero-image-slider.cjs

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

package/dist/hero-image-slider.d.cts

@@ -6,6 +6,7 @@ import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
+import './pattern-background-a7gKHzHy.cjs';
 
 interface HeroImageSliderProps {
     /**

package/dist/hero-image-slider.d.ts

@@ -6,6 +6,7 @@ import 'react/jsx-runtime';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
+import './pattern-background-a7gKHzHy.js';
 
 interface HeroImageSliderProps {
     /**

package/dist/hero-image-slider.js

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

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

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

package/dist/hero-split-icon-cards.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/hero-split-icon-cards.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/hero-split-icon-cards.js

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

package/dist/index.cjs

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

package/dist/index.d.cts

@@ -34,7 +34,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
-import './pattern-background-BXRgbd05.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import './pattern-background-a7gKHzHy.cjs';
 import './forms-BCcwNFhk.cjs';
 import 'clsx';

package/dist/index.d.ts

@@ -34,7 +34,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import '@radix-ui/react-popover';
-import './pattern-background-z0e5HB0v.js';
-import './patternSvgs-c5ZNVoTT.js';
+import './pattern-background-a7gKHzHy.js';
 import './forms-BCcwNFhk.js';
 import 'clsx';

package/dist/index.js

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

package/dist/industries-badge-list-bordered.cjs

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

package/dist/industries-badge-list-bordered.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';
@@ -94,7 +93,7 @@ interface IndustriesBadgeListBorderedProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/industries-badge-list-bordered.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';
@@ -94,7 +93,7 @@ interface IndustriesBadgeListBorderedProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/industries-badge-list-bordered.js

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