@opensite/ui 1.6.5 → 1.6.6

package/dist/hero-tech-carousel.cjs

@@ -37,62 +37,6 @@ var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var CarouselContext = React__namespace.createContext(null);
 function useCarousel() {
   const context = React__namespace.useContext(CarouselContext);
@@ -602,18 +546,20 @@ function HeroTechCarousel({
   description,
   technologies,
   carouselSlot,
-  autoplayDelay = 4e3,
+  autoplayDelay = 5e3,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
-  const plugin = React.useRef(Autoplay__default.default({ delay: autoplayDelay, stopOnInteraction: false }));
+  const plugin = React.useRef(
+    Autoplay__default.default({ delay: autoplayDelay, stopOnInteraction: false })
+  );
   const [api, setApi] = React.useState();
   const [current, setCurrent] = React.useState(0);
   const [fadeIn, setFadeIn] = React.useState(true);
@@ -661,12 +607,12 @@ function HeroTechCarousel({
               "div",
               {
                 className: cn(
-                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border p-6",
+                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border px-4 py-2",
                   idx === current ? "border-input" : "border-transparent"
                 ),
                 onClick: () => selectTechnology(idx),
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                  technology.logo && /* @__PURE__ */ jsxRuntime.jsx(
                     img.Img,
                     {
                       className: "h-4 shrink-0 md:h-7",
@@ -675,7 +621,7 @@ function HeroTechCarousel({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: technology.name })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-nowrap", children: technology.name })
                 ]
               }
             )
@@ -684,7 +630,15 @@ function HeroTechCarousel({
         )) })
       }
     );
-  }, [carouselSlot, technologies, setApi, plugin, current, selectTechnology, optixFlowConfig]);
+  }, [
+    carouselSlot,
+    technologies,
+    setApi,
+    plugin,
+    current,
+    selectTechnology,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -692,36 +646,77 @@ function HeroTechCarousel({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-          technologies && technologies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-            "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-center text-lg text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          technologies && technologies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "flex items-center gap-2 transition-opacity duration-300",
-                fadeIn ? "opacity-100" : "opacity-0"
+                "mx-auto bg-muted mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center"
               ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: technologies[current]?.logo,
-                    alt: technologies[current]?.name,
-                    className: "h-4 md:h-7",
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
-              ]
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-2 transition-opacity duration-300",
+                    fadeIn ? "opacity-100" : "opacity-0"
+                  ),
+                  children: [
+                    technologies && current && technologies[current] && technologies[current].logo && /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: technologies[current]?.logo,
+                        alt: technologies[current]?.name,
+                        className: "h-4 md:h-7",
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "px-2 font-mono text-sm",
+                          technologies && technologies[current] && technologies[current].logo ? "border-l" : ""
+                        ),
+                        children: technologies[current]?.command
+                      }
+                    )
+                  ]
+                }
+              )
             }
-          ) })
+          )
         ] }),
         renderCarousel
       ] })

package/dist/hero-tech-carousel.d.cts

@@ -77,6 +77,6 @@ interface HeroTechCarouselProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroTechCarousel({ heading, description, technologies, carouselSlot, autoplayDelay, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
+declare function HeroTechCarousel({ heading, description, technologies, carouselSlot, autoplayDelay, background, pattern, patternOpacity, className, containerClassName, spacing, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
 
 export { HeroTechCarousel, type HeroTechCarouselProps };

package/dist/hero-tech-carousel.d.ts

@@ -77,6 +77,6 @@ interface HeroTechCarouselProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroTechCarousel({ heading, description, technologies, carouselSlot, autoplayDelay, background, spacing, pattern, patternOpacity, className, containerClassName, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
+declare function HeroTechCarousel({ heading, description, technologies, carouselSlot, autoplayDelay, background, pattern, patternOpacity, className, containerClassName, spacing, headingClassName, descriptionClassName, optixFlowConfig, }: HeroTechCarouselProps): React.JSX.Element;
 
 export { HeroTechCarousel, type HeroTechCarouselProps };

package/dist/hero-tech-carousel.js

@@ -12,62 +12,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var CarouselContext = React.createContext(null);
 function useCarousel() {
   const context = React.useContext(CarouselContext);
@@ -577,18 +521,20 @@ function HeroTechCarousel({
   description,
   technologies,
   carouselSlot,
-  autoplayDelay = 4e3,
+  autoplayDelay = 5e3,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-6 md:py-32",
   headingClassName,
   descriptionClassName,
   optixFlowConfig
 }) {
-  const plugin = useRef(Autoplay({ delay: autoplayDelay, stopOnInteraction: false }));
+  const plugin = useRef(
+    Autoplay({ delay: autoplayDelay, stopOnInteraction: false })
+  );
   const [api, setApi] = useState();
   const [current, setCurrent] = useState(0);
   const [fadeIn, setFadeIn] = useState(true);
@@ -636,12 +582,12 @@ function HeroTechCarousel({
               "div",
               {
                 className: cn(
-                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border p-6",
+                  "flex cursor-pointer items-center justify-center gap-2 rounded-md border px-4 py-2",
                   idx === current ? "border-input" : "border-transparent"
                 ),
                 onClick: () => selectTechnology(idx),
                 children: [
-                  /* @__PURE__ */ jsx(
+                  technology.logo && /* @__PURE__ */ jsx(
                     Img,
                     {
                       className: "h-4 shrink-0 md:h-7",
@@ -650,7 +596,7 @@ function HeroTechCarousel({
                       optixFlowConfig
                     }
                   ),
-                  /* @__PURE__ */ jsx("p", { children: technology.name })
+                  /* @__PURE__ */ jsx("p", { className: "text-nowrap", children: technology.name })
                 ]
               }
             )
@@ -659,7 +605,15 @@ function HeroTechCarousel({
         )) })
       }
     );
-  }, [carouselSlot, technologies, setApi, plugin, current, selectTechnology, optixFlowConfig]);
+  }, [
+    carouselSlot,
+    technologies,
+    setApi,
+    plugin,
+    current,
+    selectTechnology,
+    optixFlowConfig
+  ]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -667,36 +621,77 @@ function HeroTechCarousel({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl", headingClassName), children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto mt-4 max-w-xl text-center text-lg", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          technologies && technologies.length > 0 && /* @__PURE__ */ jsx("div", { className: cn(
-            "mx-auto mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center",
-            getNestedCardBg(background),
-            getNestedCardTextColor(background)
-          ), children: /* @__PURE__ */ jsxs(
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx(
+            "h1",
+            {
+              className: cn(
+                "mx-auto mb-4 max-w-2xl text-center text-4xl font-bold md:text-6xl text-balance",
+                headingClassName
+              ),
+              children: heading
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mx-auto mt-4 max-w-xl text-center text-lg text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+          technologies && technologies.length > 0 && /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex items-center gap-2 transition-opacity duration-300",
-                fadeIn ? "opacity-100" : "opacity-0"
+                "mx-auto bg-muted mt-8 mb-12 flex h-[60px] w-fit items-center gap-2 rounded-md px-4 py-2 text-center"
               ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: technologies[current]?.logo,
-                    alt: technologies[current]?.name,
-                    className: "h-4 md:h-7",
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsx("p", { className: "border-l px-2 font-mono text-sm", children: technologies[current]?.command })
-              ]
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-2 transition-opacity duration-300",
+                    fadeIn ? "opacity-100" : "opacity-0"
+                  ),
+                  children: [
+                    technologies && current && technologies[current] && technologies[current].logo && /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: technologies[current]?.logo,
+                        alt: technologies[current]?.name,
+                        className: "h-4 md:h-7",
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "px-2 font-mono text-sm",
+                          technologies && technologies[current] && technologies[current].logo ? "border-l" : ""
+                        ),
+                        children: technologies[current]?.command
+                      }
+                    )
+                  ]
+                }
+              )
             }
-          ) })
+          )
         ] }),
         renderCarousel
       ] })

package/dist/link-page-newsletter-social.cjs

@@ -1153,11 +1153,21 @@ function LinkPageNewsletterSocial({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = submitAction ?? {
-    label: buttonText,
-    variant: "default",
-    size: "lg"
-  };
+  const resolvedSubmitAction = React.useMemo(() => {
+    if (submitAction) {
+      return {
+        ...submitAction,
+        label: buttonText || submitAction?.label || "Submit",
+        variant: submitAction?.variant || "default",
+        size: submitAction?.size || "lg"
+      };
+    }
+    return {
+      label: buttonText || "Submit",
+      variant: "default",
+      size: "lg"
+    };
+  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = React.useMemo(() => {
     if (profileSlot) return profileSlot;
@@ -1315,7 +1325,7 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "space-y-4 rounded-2xl p-6",
-          "border border-border bg-card shadow-sm",
+          "border border-border bg-card text-card-foreground shadow-sm",
           newsletterCardClassName
         ),
         children: [
@@ -1402,7 +1412,7 @@ function LinkPageNewsletterSocial({
           className: cn(
             "flex w-full bg-card text-card-foreground items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-card hover:opacity-80",
+            "border border-border hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),

package/dist/link-page-newsletter-social.js

@@ -1132,11 +1132,21 @@ function LinkPageNewsletterSocial({
     }
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const resolvedSubmitAction = submitAction ?? {
-    label: buttonText,
-    variant: "default",
-    size: "lg"
-  };
+  const resolvedSubmitAction = useMemo(() => {
+    if (submitAction) {
+      return {
+        ...submitAction,
+        label: buttonText || submitAction?.label || "Submit",
+        variant: submitAction?.variant || "default",
+        size: submitAction?.size || "lg"
+      };
+    }
+    return {
+      label: buttonText || "Submit",
+      variant: "default",
+      size: "lg"
+    };
+  }, [submitAction, buttonText]);
   const resolvedChevronIcon = linkChevronIcon ?? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 });
   const renderProfile = useMemo(() => {
     if (profileSlot) return profileSlot;
@@ -1294,7 +1304,7 @@ function LinkPageNewsletterSocial({
       {
         className: cn(
           "space-y-4 rounded-2xl p-6",
-          "border border-border bg-card shadow-sm",
+          "border border-border bg-card text-card-foreground shadow-sm",
           newsletterCardClassName
         ),
         children: [
@@ -1381,7 +1391,7 @@ function LinkPageNewsletterSocial({
           className: cn(
             "flex w-full bg-card text-card-foreground items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200",
             "hover:scale-[1.02] active:scale-[0.98]",
-            "border border-border bg-card hover:opacity-80",
+            "border border-border hover:opacity-80",
             linkClassName,
             linkItemClassName
           ),

package/dist/link-tree-block.cjs

@@ -1459,22 +1459,13 @@ function LinkTreeBlock({
       patternClassName,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex min-h-screen w-full items-start justify-center py-12",
-              containerClassName
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
-              renderBrandHeader,
-              renderLinks,
-              renderMediaGallery,
-              renderSocialLinks,
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
-            ] })
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
+          renderBrandHeader,
+          renderLinks,
+          renderMediaGallery,
+          renderSocialLinks,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", children: renderFooter })
+        ] }) }),
         lightboxOpen && lightboxItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,
           {

package/dist/link-tree-block.js

@@ -1438,22 +1438,13 @@ function LinkTreeBlock({
       patternClassName,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex min-h-screen w-full items-start justify-center py-12",
-              containerClassName
-            ),
-            children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
-              renderBrandHeader,
-              renderLinks,
-              renderMediaGallery,
-              renderSocialLinks,
-              /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
-            ] })
-          }
-        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-screen w-full items-start justify-center py-12", children: /* @__PURE__ */ jsxs("div", { className: cn("w-full max-w-md space-y-6", contentClassName), children: [
+          renderBrandHeader,
+          renderLinks,
+          renderMediaGallery,
+          renderSocialLinks,
+          /* @__PURE__ */ jsx("div", { className: "pt-4", children: renderFooter })
+        ] }) }),
         lightboxOpen && lightboxItems.length > 0 && /* @__PURE__ */ jsx(
           Lightbox,
           {