@opensite/ui 2.8.5 → 2.8.7

package/dist/footer-social-apps.js

@@ -1464,6 +1464,7 @@ var SocialLinkIcon = React2.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -1476,6 +1477,21 @@ var SocialLinkIcon = React2.forwardRef(
     const accessibleLabel = React2.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React2.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1487,16 +1503,7 @@ var SocialLinkIcon = React2.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/footer-social-newsletter.cjs

@@ -1415,6 +1415,7 @@ var SocialLinkIcon = React2__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -1427,6 +1428,21 @@ var SocialLinkIcon = React2__namespace.forwardRef(
     const accessibleLabel = React2__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React2__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -1438,16 +1454,7 @@ var SocialLinkIcon = React2__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/footer-social-newsletter.js

@@ -1394,6 +1394,7 @@ var SocialLinkIcon = React2.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -1406,6 +1407,21 @@ var SocialLinkIcon = React2.forwardRef(
     const accessibleLabel = React2.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React2.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1417,16 +1433,7 @@ var SocialLinkIcon = React2.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/footer-split-image-accordion.cjs

@@ -1154,6 +1154,7 @@ var SocialLinkIcon = React2__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -1166,6 +1167,21 @@ var SocialLinkIcon = React2__namespace.forwardRef(
     const accessibleLabel = React2__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React2__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -1177,16 +1193,7 @@ var SocialLinkIcon = React2__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/footer-split-image-accordion.js

@@ -1133,6 +1133,7 @@ var SocialLinkIcon = React2.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -1145,6 +1146,21 @@ var SocialLinkIcon = React2.forwardRef(
     const accessibleLabel = React2.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React2.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1156,16 +1172,7 @@ var SocialLinkIcon = React2.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/hero-badge-shadow-overlay.cjs

@@ -944,7 +944,7 @@ function HeroBadgeShadowOverlay({
   backgroundImageUrl,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-0",
+  spacing = "none",
   pattern,
   patternOpacity,
   className,

package/dist/hero-badge-shadow-overlay.js

@@ -923,7 +923,7 @@ function HeroBadgeShadowOverlay({
   backgroundImageUrl,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-0",
+  spacing = "none",
   pattern,
   patternOpacity,
   className,

package/dist/hero-coming-soon-countdown.cjs

@@ -914,6 +914,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -926,6 +927,21 @@ var SocialLinkIcon = React__namespace.forwardRef(
     const accessibleLabel = React__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -937,16 +953,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/hero-coming-soon-countdown.js

@@ -893,6 +893,7 @@ var SocialLinkIcon = React.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -905,6 +906,21 @@ var SocialLinkIcon = React.forwardRef(
     const accessibleLabel = React.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -916,16 +932,7 @@ var SocialLinkIcon = React.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

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

@@ -408,6 +408,67 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -932,7 +993,8 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   background,
-  videoBrightness = "50",
+  videoBrightness,
+  videoOverlayIntensity = "high",
   spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
@@ -944,21 +1006,21 @@ function HeroVideoBackgroundDark({
 }) {
   const renderVideo = React3.useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        loop: true,
-        playsInline: true,
-        src: videoSrc,
-        className: cn(
-          "absolute top-0 left-0 size-full object-cover",
-          `brightness-${videoBrightness}`
-        ),
-        autoPlay: true,
-        muted: true
-      }
-    );
-  }, [videoSlot, videoSrc, videoBrightness]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          loop: true,
+          playsInline: true,
+          src: videoSrc,
+          className: "absolute top-0 left-0 size-full object-cover",
+          autoPlay: true,
+          muted: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
+    ] });
+  }, [videoSlot, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

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

@@ -41,7 +41,12 @@ interface HeroVideoBackgroundDarkProps {
      */
     videoSlot?: React.ReactNode;
     /**
-     * Granular control of brightness for video
+     * Intensity of the gradient overlay on the video
+     * @default "high"
+     */
+    videoOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for video (deprecated - prefer videoOverlayIntensity)
      * @default "50"
      */
     videoBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -82,6 +87,6 @@ interface HeroVideoBackgroundDarkProps {
      */
     descriptionClassName?: string;
 }
-declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };

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

@@ -41,7 +41,12 @@ interface HeroVideoBackgroundDarkProps {
      */
     videoSlot?: React.ReactNode;
     /**
-     * Granular control of brightness for video
+     * Intensity of the gradient overlay on the video
+     * @default "high"
+     */
+    videoOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for video (deprecated - prefer videoOverlayIntensity)
      * @default "50"
      */
     videoBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -82,6 +87,6 @@ interface HeroVideoBackgroundDarkProps {
      */
     descriptionClassName?: string;
 }
-declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };

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

@@ -387,6 +387,67 @@ var Section = React3__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -911,7 +972,8 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   background,
-  videoBrightness = "50",
+  videoBrightness,
+  videoOverlayIntensity = "high",
   spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
@@ -923,21 +985,21 @@ function HeroVideoBackgroundDark({
 }) {
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsx(
-      "video",
-      {
-        loop: true,
-        playsInline: true,
-        src: videoSrc,
-        className: cn(
-          "absolute top-0 left-0 size-full object-cover",
-          `brightness-${videoBrightness}`
-        ),
-        autoPlay: true,
-        muted: true
-      }
-    );
-  }, [videoSlot, videoSrc, videoBrightness]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          loop: true,
+          playsInline: true,
+          src: videoSrc,
+          className: "absolute top-0 left-0 size-full object-cover",
+          autoPlay: true,
+          muted: true
+        }
+      ),
+      /* @__PURE__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })
+    ] });
+  }, [videoSlot, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsx(
     Section,
     {