@opensite/ui 1.6.9 → 1.7.0

package/dist/hero-design-showcase-logos.cjs

@@ -852,42 +852,70 @@ function HeroDesignShowcaseLogos({
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-3 flex items-center justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "mt-6 md:mt-12 flex items-center justify-center gap-3",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
+            label,
             icon,
-            label && /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }),
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                icon,
+                label && /* @__PURE__ */ jsxRuntime.jsx("div", { children: label }),
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderLogos = React.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-10 md:py-16", children: [
       logosLabel && (typeof logosLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-sm text-foreground/60", children: logosLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-sm text-foreground/60", children: logosLabel })),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap", logosClassName), children: logos.map((logo, index) => {
-        const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
-          {
-            src: logoSrc,
-            alt: logo.alt,
-            className: cn("block h-3.5 w-auto opacity-50 md:h-5", logo.className),
-            optixFlowConfig
-          },
-          index
-        );
-      }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap",
+            logosClassName
+          ),
+          children: logos.map((logo, index) => {
+            const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: logoSrc,
+                alt: logo.alt,
+                className: cn(
+                  "block h-3.5 w-auto opacity-50 md:h-5",
+                  logo.className
+                ),
+                optixFlowConfig
+              },
+              index
+            );
+          })
+        }
+      )
     ] });
   }, [logosSlot, logos, logosLabel, logosClassName, optixFlowConfig]);
   const renderShowcase = React.useMemo(() => {
@@ -898,7 +926,10 @@ function HeroDesignShowcaseLogos({
       {
         src: showcaseImage.src,
         alt: showcaseImage.alt,
-        className: cn("w-full object-cover object-top-left", showcaseImage.className),
+        className: cn(
+          "w-full object-cover object-top-left",
+          showcaseImage.className
+        ),
         optixFlowConfig
       }
     ) }) }) });
@@ -913,14 +944,47 @@ function HeroDesignShowcaseLogos({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderActions }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLogos })
-        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-8", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-center text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderActions }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderLogos })
+            ]
+          }
+        ) }),
         renderShowcase
       ]
     }

package/dist/hero-design-showcase-logos.js

@@ -831,42 +831,70 @@ function HeroDesignShowcaseLogos({
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: cn("mt-3 flex items-center justify-center gap-3", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "mt-6 md:mt-12 flex items-center justify-center gap-3",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
+            label,
             icon,
-            label && /* @__PURE__ */ jsx("div", { children: label }),
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                icon,
+                label && /* @__PURE__ */ jsx("div", { children: label }),
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderLogos = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "py-10 md:py-16", children: [
       logosLabel && (typeof logosLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-foreground/60", children: logosLabel }) : /* @__PURE__ */ jsx("div", { className: "text-center text-sm text-foreground/60", children: logosLabel })),
-      /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap", logosClassName), children: logos.map((logo, index) => {
-        const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
-        return /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: logoSrc,
-            alt: logo.alt,
-            className: cn("block h-3.5 w-auto opacity-50 md:h-5", logo.className),
-            optixFlowConfig
-          },
-          index
-        );
-      }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "mt-8 flex flex-wrap items-center justify-center gap-5 sm:flex-nowrap",
+            logosClassName
+          ),
+          children: logos.map((logo, index) => {
+            const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
+            return /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: logoSrc,
+                alt: logo.alt,
+                className: cn(
+                  "block h-3.5 w-auto opacity-50 md:h-5",
+                  logo.className
+                ),
+                optixFlowConfig
+              },
+              index
+            );
+          })
+        }
+      )
     ] });
   }, [logosSlot, logos, logosLabel, logosClassName, optixFlowConfig]);
   const renderShowcase = useMemo(() => {
@@ -877,7 +905,10 @@ function HeroDesignShowcaseLogos({
       {
         src: showcaseImage.src,
         alt: showcaseImage.alt,
-        className: cn("w-full object-cover object-top-left", showcaseImage.className),
+        className: cn(
+          "w-full object-cover object-top-left",
+          showcaseImage.className
+        ),
         optixFlowConfig
       }
     ) }) }) });
@@ -892,14 +923,47 @@ function HeroDesignShowcaseLogos({
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-8", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem]", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          /* @__PURE__ */ jsx("div", { children: renderActions }),
-          /* @__PURE__ */ jsx("div", { children: renderLogos })
-        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-8", contentClassName),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex max-w-[920px] flex-col items-center gap-6", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-6 text-center text-[2.75rem] leading-tight font-semibold md:text-[3.5rem] lg:text-[4.375rem] text-balance",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                )),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-center text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              /* @__PURE__ */ jsx("div", { children: renderActions }),
+              /* @__PURE__ */ jsx("div", { children: renderLogos })
+            ]
+          }
+        ) }),
         renderShowcase
       ]
     }

package/dist/hero-grid-pattern-solutions.cjs

@@ -7,6 +7,8 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var lightbox = require('@page-speed/lightbox');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -930,9 +932,41 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function HeroGridPatternSolutions({
   badgeText,
-  badgeHref = "#",
+  badgeHref,
   badgeSlot,
   heading,
   description,
@@ -940,7 +974,6 @@ function HeroGridPatternSolutions({
   actionsSlot,
   images,
   imagesSlot,
-  showGridPattern = true,
   background,
   spacing = "py-32 md:py-32",
   pattern,
@@ -954,56 +987,114 @@ function HeroGridPatternSolutions({
   imagesClassName,
   optixFlowConfig
 }) {
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+  const [lightboxIndex, setLightboxIndex] = React.useState(0);
+  const lightboxItems = React.useMemo(
+    () => (images ?? []).map((img, index) => ({
+      id: `hero-grid-image-${index}`,
+      type: "image",
+      src: img.src,
+      alt: img.alt,
+      download: true,
+      share: true
+    })),
+    [images]
+  );
+  const handleImageClick = React.useCallback((index) => {
+    setLightboxIndex(index);
+    setLightboxOpen(true);
+  }, []);
+  const handleLightboxClose = React.useCallback(() => {
+    setLightboxOpen(false);
+  }, []);
   const renderBadge = React.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
-      {
-        href: badgeHref,
-        className: "mx-auto mb-4 flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm bg-card",
-        children: [
-          badgeText,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-        ]
-      }
-    );
+    if (!badgeText) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: badgeHref, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-2", children: [
+      badgeText,
+      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right" })
+    ] }) });
   }, [badgeSlot, badgeHref, badgeText]);
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row", actionsClassName), children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col justify-center gap-x-2 gap-y-3 sm:flex-row",
+          actionsClassName
+        ),
+        children: actions.map((action, index) => {
+          const {
             label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    }) });
+            icon,
+            iconAfter,
+            children,
+            className: actionClassName,
+            ...pressableProps
+          } = action;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              asButton: true,
+              className: actionClassName,
+              ...pressableProps,
+              children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                icon,
+                label,
+                iconAfter
+              ] })
+            },
+            index
+          );
+        })
+      }
+    );
   }, [actionsSlot, actions, actionsClassName]);
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid gap-6 md:grid-cols-10", imagesClassName), children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn("h-full max-h-[500px] w-full rounded-xl object-cover", image.className),
-        optixFlowConfig
-      },
-      index
-    )) });
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+        className: cn(
+          "mt-8 md:mt-20 grid grid-cols-2 gap-4 md:flex md:flex-row md:items-center md:justify-center md:gap-6",
+          imagesClassName
+        ),
+        children: images.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "cursor-pointer overflow-hidden rounded-xl transition-transform hover:scale-[1.02] hover:shadow-lg",
+            onClick: () => handleImageClick(index),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleImageClick(index);
+              }
+            },
+            "aria-label": `View ${image.alt} in lightbox`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: cn(
+                  "h-full max-h-[200px] max-w-[200px] w-full rounded-xl object-cover shadow-xl",
+                  image.className
+                ),
+                optixFlowConfig
+              }
+            )
+          },
+          index
+        ))
+      }
+    );
+  }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
@@ -1012,18 +1103,65 @@ function HeroGridPatternSolutions({
       patternOpacity,
       className: cn("relative flex items-center justify-center", className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden", children: [
-          showGridPattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 -top-1 -left-1 -z-10 h-full w-full bg-[linear-gradient(to_right,hsl(var(--muted-foreground))_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground))_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_100%_at_50%_50%,transparent_60%,#000_100%)] bg-size-[92px_92px] opacity-15" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
             renderBadge,
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mb-8 max-w-2xl text-center lg:text-xl text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl text-balance",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "mx-auto mb-8 max-w-2xl text-center lg:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
             renderActions
-          ] })
+          ] }) }),
+          renderImages
         ] }),
-        renderImages
-      ] })
+        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
+          lightbox.Lightbox,
+          {
+            items: lightboxItems,
+            initialIndex: lightboxIndex,
+            layout: "horizontal",
+            controls: {
+              navigation: true,
+              thumbnails: true,
+              download: true,
+              share: true,
+              fullscreen: true,
+              captions: true,
+              counter: true
+            },
+            onClose: handleLightboxClose,
+            enableKeyboardShortcuts: true,
+            closeOnEscape: true,
+            closeOnBackdropClick: true
+          }
+        )
+      ]
     }
   );
 }

package/dist/hero-grid-pattern-solutions.d.cts

@@ -44,9 +44,6 @@ interface HeroGridPatternSolutionsProps {
      */
     imagesSlot?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -95,6 +92,6 @@ interface HeroGridPatternSolutionsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
+declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
 
 export { HeroGridPatternSolutions, type HeroGridPatternSolutionsProps };

package/dist/hero-grid-pattern-solutions.d.ts

@@ -44,9 +44,6 @@ interface HeroGridPatternSolutionsProps {
      */
     imagesSlot?: React.ReactNode;
     /**
-     * Whether to show the grid pattern background
-     */
-    showGridPattern?: boolean; /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -95,6 +92,6 @@ interface HeroGridPatternSolutionsProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, showGridPattern, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
+declare function HeroGridPatternSolutions({ badgeText, badgeHref, badgeSlot, heading, description, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroGridPatternSolutionsProps): React.JSX.Element;
 
 export { HeroGridPatternSolutions, type HeroGridPatternSolutionsProps };