@opensite/ui 1.6.3 → 1.6.5

package/dist/hero-overlay-cta-grid.cjs

@@ -138,34 +138,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__namespace.default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -584,6 +556,34 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__namespace.default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -1019,7 +1019,7 @@ function HeroOverlayCtaGrid({
           optixFlowConfig
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-r from-black/80 via-black/65 to-black/20" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
     ] });
   }, [backgroundSlot, backgroundImage, backgroundAlt, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1030,71 +1030,66 @@ function HeroOverlayCtaGrid({
       pattern,
       patternOpacity,
       className: cn(
-        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
+      containerClassName,
       children: [
         renderBackground,
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          Container,
-          {
-            className: cn("relative flex flex-col gap-12", containerClassName),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                framerMotion.motion.div,
-                {
-                  initial: { opacity: 0, y: 28 },
-                  animate: { opacity: 1, y: 0 },
-                  transition: { duration: 0.6, ease: "easeOut" },
-                  className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
-                  children: [
-                    renderBadge,
-                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "h1",
-                      {
-                        className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "h1",
-                      {
-                        className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    )),
-                    description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "mt-5 text-lg md:text-xl text-balance",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "mt-5 text-lg md:text-xl text-balance",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    )),
-                    renderActions
-                  ]
-                }
-              ),
-              renderCards
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, y: 28 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.6, ease: "easeOut" },
+              className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
+              children: [
+                renderBadge,
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mt-5 text-lg md:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-5 text-lg md:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                )),
+                renderActions
+              ]
+            }
+          ),
+          renderCards
+        ] })
       ]
     }
   );

package/dist/hero-overlay-cta-grid.js

@@ -117,34 +117,6 @@ function processSvgForCurrentColor(svg) {
   );
   return processed;
 }
-var maxWidthStyles = {
-  sm: "max-w-screen-sm",
-  md: "max-w-screen-md",
-  lg: "max-w-screen-lg",
-  xl: "max-w-7xl",
-  "2xl": "max-w-screen-2xl",
-  "4xl": "max-w-[1536px]",
-  full: "max-w-full"
-};
-var Container = React__default.forwardRef(
-  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
-    const Component = as;
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ref,
-        className: cn(
-          "mx-auto w-full px-2 sm:px-4 lg:px-8",
-          maxWidthStyles[maxWidth],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-Container.displayName = "Container";
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -563,6 +535,34 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -998,7 +998,7 @@ function HeroOverlayCtaGrid({
           optixFlowConfig
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-r from-black/80 via-black/65 to-black/20" })
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
     ] });
   }, [backgroundSlot, backgroundImage, backgroundAlt, optixFlowConfig]);
   return /* @__PURE__ */ jsxs(
@@ -1009,71 +1009,66 @@ function HeroOverlayCtaGrid({
       pattern,
       patternOpacity,
       className: cn(
-        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-6",
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
         className
       ),
+      containerClassName,
       children: [
         renderBackground,
-        /* @__PURE__ */ jsxs(
-          Container,
-          {
-            className: cn("relative flex flex-col gap-12", containerClassName),
-            children: [
-              /* @__PURE__ */ jsxs(
-                motion.div,
-                {
-                  initial: { opacity: 0, y: 28 },
-                  animate: { opacity: 1, y: 0 },
-                  transition: { duration: 0.6, ease: "easeOut" },
-                  className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
-                  children: [
-                    renderBadge,
-                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                      "h1",
-                      {
-                        className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "h1",
-                      {
-                        className: cn(
-                          "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    )),
-                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "mt-5 text-lg md:text-xl text-balance",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    ) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "mt-5 text-lg md:text-xl text-balance",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    )),
-                    renderActions
-                  ]
-                }
-              ),
-              renderCards
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-12", children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 28 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.6, ease: "easeOut" },
+              className: "mx-auto max-w-3xl text-center text-balance text-white px-0",
+              children: [
+                renderBadge,
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mt-6 text-4xl font-bold leading-tight md:text-5xl lg:text-6xl text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "mt-5 text-lg md:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "mt-5 text-lg md:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                )),
+                renderActions
+              ]
+            }
+          ),
+          renderCards
+        ] })
       ]
     }
   );

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

@@ -922,7 +922,10 @@ function HeroPatternBadgeLogos({
           {
             src: src.light,
             alt,
-            className: cn(imgClassName, "dark:hidden"),
+            className: cn(
+              imgClassName,
+              "w-full h-10 object-contain dark:hidden"
+            ),
             optixFlowConfig
           }
         ),
@@ -931,7 +934,10 @@ function HeroPatternBadgeLogos({
           {
             src: src.dark,
             alt,
-            className: cn(imgClassName, "hidden dark:block"),
+            className: cn(
+              imgClassName,
+              "w-full h-10 object-contain hidden dark:block"
+            ),
             optixFlowConfig
           }
         )
@@ -940,14 +946,24 @@ function HeroPatternBadgeLogos({
         {
           src,
           alt,
-          className: imgClassName,
+          className: cn("w-full h-10 object-contain", imgClassName),
           optixFlowConfig
         }
       );
       if (href) {
         return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href, className: logoClassName, children: imgElement }, index);
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: logoClassName, children: imgElement }, index);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "w-auto max-h-10 h-10 flex items-center justify-center",
+            logoClassName
+          ),
+          children: imgElement
+        },
+        index
+      );
     });
   }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -959,11 +975,11 @@ function HeroPatternBadgeLogos({
       patternOpacity,
       className: cn("relative p-0", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center",
+            "p-6 flex w-full flex-col items-center gap-6 text-center",
             contentClassName
           ),
           children: [
@@ -993,7 +1009,10 @@ function HeroPatternBadgeLogos({
             (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: cn("mt-6 flex items-center gap-4", actionsClassName),
+                className: cn(
+                  "mt-6 flex items-center justify-center gap-4 flex-col md:flex-row w-full",
+                  actionsClassName
+                ),
                 children: renderActions
               }
             ),
@@ -1001,12 +1020,12 @@ function HeroPatternBadgeLogos({
               "div",
               {
                 className: cn(
-                  "mt-12 flex flex-col items-center gap-4 lg:mt-16",
+                  "mt-6 flex flex-col items-center gap-4 lg:mt-16 w-full",
                   logosClassName
                 ),
                 children: [
                   logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
                 ]
               }
             )

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

@@ -901,7 +901,10 @@ function HeroPatternBadgeLogos({
           {
             src: src.light,
             alt,
-            className: cn(imgClassName, "dark:hidden"),
+            className: cn(
+              imgClassName,
+              "w-full h-10 object-contain dark:hidden"
+            ),
             optixFlowConfig
           }
         ),
@@ -910,7 +913,10 @@ function HeroPatternBadgeLogos({
           {
             src: src.dark,
             alt,
-            className: cn(imgClassName, "hidden dark:block"),
+            className: cn(
+              imgClassName,
+              "w-full h-10 object-contain hidden dark:block"
+            ),
             optixFlowConfig
           }
         )
@@ -919,14 +925,24 @@ function HeroPatternBadgeLogos({
         {
           src,
           alt,
-          className: imgClassName,
+          className: cn("w-full h-10 object-contain", imgClassName),
           optixFlowConfig
         }
       );
       if (href) {
         return /* @__PURE__ */ jsx(Pressable, { href, className: logoClassName, children: imgElement }, index);
       }
-      return /* @__PURE__ */ jsx("div", { className: logoClassName, children: imgElement }, index);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "w-auto max-h-10 h-10 flex items-center justify-center",
+            logoClassName
+          ),
+          children: imgElement
+        },
+        index
+      );
     });
   }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
@@ -938,11 +954,11 @@ function HeroPatternBadgeLogos({
       patternOpacity,
       className: cn("relative p-0", className),
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: cn("relative"), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center",
+            "p-6 flex w-full flex-col items-center gap-6 text-center",
             contentClassName
           ),
           children: [
@@ -972,7 +988,10 @@ function HeroPatternBadgeLogos({
             (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
               "div",
               {
-                className: cn("mt-6 flex items-center gap-4", actionsClassName),
+                className: cn(
+                  "mt-6 flex items-center justify-center gap-4 flex-col md:flex-row w-full",
+                  actionsClassName
+                ),
                 children: renderActions
               }
             ),
@@ -980,12 +999,12 @@ function HeroPatternBadgeLogos({
               "div",
               {
                 className: cn(
-                  "mt-12 flex flex-col items-center gap-4 lg:mt-16",
+                  "mt-6 flex flex-col items-center gap-4 lg:mt-16 w-full",
                   logosClassName
                 ),
                 children: [
                   logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm"), children: logosTagline }) : logosTagline),
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4", children: renderLogos })
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 place-items-center items-center justify-center gap-6 opacity-80 sm:grid-cols-4 sm:gap-4 w-full", children: renderLogos })
                 ]
               }
             )