@opensite/ui 0.7.2 → 0.7.4

package/dist/registry.js

@@ -17239,13 +17239,23 @@ function ContactHelpCenter({
     }
   );
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function CarouselAnimatedSections({
   sections,
   sectionsSlot,
   actionsSlot,
   actions,
   className,
-  containerClassName = "h-full",
+  containerClassName = "h-full flex flex-col justify-center",
   contentClassName,
   subtitleClassName,
   titleClassName,
@@ -17254,7 +17264,7 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  overlayClassName,
+  slideMediaBrightness = "50",
   optixFlowConfig,
   background = "dark",
   spacing = "py-0",
@@ -17309,7 +17319,7 @@ function CarouselAnimatedSections({
     })
   };
   const currentSection = sections?.[currentIndex];
-  const renderActions = () => {
+  const actionElements = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => /* @__PURE__ */ jsxs(
@@ -17319,11 +17329,8 @@ function CarouselAnimatedSections({
           onClick: action.onClick,
           asButton: true,
           variant: action.variant,
-          size: action.size || "lg",
-          className: cn(
-            "bg-white text-black hover:bg-white/90",
-            action.className
-          ),
+          size: action.size,
+          className: cn(action.className),
           children: [
             action.label,
             action.icon && /* @__PURE__ */ jsx("span", { className: "ml-2", children: action.icon }),
@@ -17334,7 +17341,7 @@ function CarouselAnimatedSections({
       ));
     }
     return null;
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxs(
     Section,
     {
@@ -17346,7 +17353,7 @@ function CarouselAnimatedSections({
       containerMaxWidth,
       containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxs(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
           motion.div,
           {
             custom: direction,
@@ -17357,26 +17364,19 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: currentSection?.image,
-                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                  className: cn(
-                    "h-full w-full object-cover",
-                    currentSection?.imageClassName
-                  ),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn("absolute inset-0 bg-black/50", overlayClassName)
-                }
-              )
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: currentSection?.image,
+                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  currentSection?.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           currentIndex
         ) }) : null,
@@ -17394,7 +17394,7 @@ function CarouselAnimatedSections({
                 animate: { opacity: 1, y: 0 },
                 exit: { opacity: 0, y: -40 },
                 transition: { duration: 0.4, delay: 0.2 },
-                className: "max-w-2xl text-white",
+                className: "max-w-2xl text-white text-shadow",
                 children: [
                   currentSection?.subtitle && (typeof currentSection?.subtitle === "string" ? /* @__PURE__ */ jsx(
                     "p",
@@ -17426,7 +17426,7 @@ function CarouselAnimatedSections({
                       children: currentSection?.description
                     }
                   ) : /* @__PURE__ */ jsx("div", { className: cn("mb-8", descriptionClassName), children: currentSection?.description })),
-                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() || currentSection?.ctaText && /* @__PURE__ */ jsxs(
+                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: actionElements || currentSection?.ctaText && /* @__PURE__ */ jsxs(
                     Pressable,
                     {
                       href: currentSection?.ctaHref,
@@ -18137,6 +18137,11 @@ function CarouselNext({
     }
   );
 }
+var SLIDE_LAYOUT_ASPECT_MAP = {
+  horizontal: "aspect-video",
+  vertical: "aspect-[9/16]",
+  square: "aspect-square"
+};
 function CarouselFeatureBadge({
   badge,
   heading,
@@ -18152,23 +18157,34 @@ function CarouselFeatureBadge({
   carouselClassName,
   carouselItemClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideLayoutVariant = "square",
+  containerMaxWidth = "2xl"
 }) {
   const renderCarouselItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx("div", { className: "flex aspect-video items-center justify-center overflow-hidden rounded-md bg-muted p-6", children: /* @__PURE__ */ jsx(
-      Img,
+    return items.map((item, index) => /* @__PURE__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx(
+      "div",
       {
-        src: item.src,
-        alt: item.alt,
-        className: cn("h-full w-full object-cover", item.className),
-        optixFlowConfig
+        className: cn(
+          "flex items-center justify-center overflow-hidden rounded-2xl",
+          SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+        ),
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: item.src,
+            alt: item.alt,
+            className: cn("h-full w-full object-cover", item.className),
+            optixFlowConfig
+          }
+        )
       }
-    ) }) }, index));
+    ) }, index));
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -18178,14 +18194,39 @@ function CarouselFeatureBadge({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container mx-auto", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-10 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start gap-4", contentClassName), children: [
-          badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { children: badge }) : badge }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-left text-xl font-normal tracking-tighter md:text-3xl lg:max-w-xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-left text-lg leading-relaxed tracking-tight text-muted-foreground lg:max-w-sm", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] })
-        ] }),
+      containerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-end justify-end gap-6 md:gap-20 lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-start gap-4", contentClassName),
+            children: [
+              badge && /* @__PURE__ */ jsx("div", { className: badgeClassName, children: typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { children: badge }) : badge }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-left text-xl font-semibold md:text-3xl lg:max-w-xl lg:text-4xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "max-w-xl text-left text-lg leading-snug lg:max-w-sm",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxs(Carousel, { children: [
           /* @__PURE__ */ jsx(CarouselContent, { children: renderCarouselItems() }),
           /* @__PURE__ */ jsx(CarouselPrevious, {}),
@@ -18199,6 +18240,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
+  containerClassName = "h-full flex flex-col justify-center",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -18207,10 +18249,11 @@ function CarouselFullscreenScrollFx({
   scrollIndicatorClassName,
   counterClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
-  pattern,
-  patternOpacity
+  background = "dark",
+  spacing = "py-0",
+  containerMaxWidth = "full",
+  pattern = "diagonalCrossBasic",
+  patternOpacity = 0.033
 }) {
   const containerRef = React52.useRef(null);
   const [activeIndex, setActiveIndex] = React52.useState(0);
@@ -18246,27 +18289,41 @@ function CarouselFullscreenScrollFx({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerMaxWidth,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex", navigationClassName), children: slides?.map((slide, index) => /* @__PURE__ */ jsx(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: () => {
-              const element = document.getElementById(`fullscreen-${slide.id}`);
-              element?.scrollIntoView({ behavior: "smooth" });
-            },
             className: cn(
-              "h-3 w-3 rounded-full border-2 transition-all",
-              activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+              "fixed right-6 top-1/2 z-50 hidden -translate-y-1/2 flex-col gap-3 lg:flex",
+              navigationClassName
             ),
-            "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
-          },
-          slide.id
-        )) }),
+            children: slides?.map((slide, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  const element = document.getElementById(`fullscreen-${slide.id}`);
+                  element?.scrollIntoView({ behavior: "smooth" });
+                },
+                className: cn(
+                  "h-3 w-3 rounded-full border-2 transition-all",
+                  activeIndex === index ? "scale-125 border-white bg-white" : "border-white/50 bg-transparent hover:border-white"
+                ),
+                "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
+              },
+              slide.id
+            ))
+          }
+        ),
         slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
           "div",
           {
             id: `fullscreen-${slide.id}`,
-            className: cn("relative flex h-screen w-full items-center justify-center overflow-hidden", slide.className),
+            className: cn(
+              "relative flex h-screen w-full items-center justify-center overflow-hidden",
+              slide.className
+            ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
                 /* @__PURE__ */ jsx(
@@ -18274,7 +18331,10 @@ function CarouselFullscreenScrollFx({
                   {
                     src: slide.image,
                     alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                    className: cn("h-full w-full object-cover", slide.imageClassName),
+                    className: cn(
+                      "h-full w-full object-cover",
+                      slide.imageClassName
+                    ),
                     optixFlowConfig
                   }
                 ),
@@ -18288,21 +18348,75 @@ function CarouselFullscreenScrollFx({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: cn("relative z-10 mx-auto max-w-4xl px-6 text-center text-white", contentClassName), children: [
-                slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm font-medium uppercase tracking-widest text-white/70", subtitleClassName), children: slide.subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
-                slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl", titleClassName), children: slide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
-                slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mx-auto max-w-2xl text-lg text-white/80 md:text-xl", descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description })),
-                index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-8 left-1/2 -translate-x-1/2", scrollIndicatorClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
-                  /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-gradient-to-b from-white/50 to-transparent" })
-                ] }) })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-8 right-8 text-sm text-white/50", counterClassName), children: [
-                String(index + 1).padStart(2, "0"),
-                " /",
-                " ",
-                String(slides?.length ?? 0).padStart(2, "0")
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                    contentClassName
+                  ),
+                  children: [
+                    slide.subtitle && (typeof slide.subtitle === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mb-4 text-sm font-medium uppercase tracking-widest text-white/70",
+                          subtitleClassName
+                        ),
+                        children: slide.subtitle
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: slide.subtitle })),
+                    slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        className: cn(
+                          "mb-6 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
+                          titleClassName
+                        ),
+                        children: slide.title
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: slide.title })),
+                    slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: cn(
+                          "mx-auto text-lg text-white/80 md:text-xl text-balance",
+                          descriptionClassName
+                        ),
+                        children: slide.description
+                      }
+                    ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: slide.description }))
+                  ]
+                }
+              ),
+              index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute bottom-8 left-1/2 -translate-x-1/2",
+                    scrollIndicatorClassName
+                  ),
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
+                    /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute bottom-8 right-8 text-sm text-white/50",
+                    counterClassName
+                  ),
+                  children: [
+                    String(index + 1).padStart(2, "0"),
+                    " /",
+                    " ",
+                    String(slides?.length ?? 0).padStart(2, "0")
+                  ]
+                }
+              )
             ]
           },
           slide.id
@@ -76788,7 +76902,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo439 } = React52;
+var { useMemo: useMemo440 } = React52;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -76855,7 +76969,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo439(() => {
+  const renderCloseButton = useMemo440(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -76869,12 +76983,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo439(() => {
+  const renderHeader = useMemo440(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo439(() => {
+  const renderForm = useMemo440(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -76936,7 +77050,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo440 } = React52;
+var { useMemo: useMemo441 } = React52;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -77012,7 +77126,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo440(() => {
+  const renderImage = useMemo441(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -77025,7 +77139,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo440(() => {
+  const renderCloseButton = useMemo441(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -77041,7 +77155,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo440(() => {
+  const renderForm = useMemo441(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -77104,7 +77218,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo440(() => {
+  const renderFooter = useMemo441(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -77132,7 +77246,7 @@ function OfferModalMembershipImage({
     }
   ) });
 }
-var { useMemo: useMemo441 } = React52;
+var { useMemo: useMemo442 } = React52;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -77214,7 +77328,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo441(() => {
+  const renderLogo = useMemo442(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -77228,7 +77342,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo441(() => {
+  const renderHeader = useMemo442(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -77238,7 +77352,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo441(() => {
+  const renderForm = useMemo442(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -77286,7 +77400,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo441(() => {
+  const renderLegal = useMemo442(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -77300,7 +77414,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo441(() => {
+  const renderImage = useMemo442(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",