@opensite/ui 1.5.3 → 1.5.5

package/dist/registry.cjs

@@ -3911,8 +3911,8 @@ function AboutLocationInfoHero({
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-7xl relative z-10 px-8 sm:px-6 md:px-0",
+  spacing = "py-12 md:py-32",
   optixFlowConfig
 }) {
   const isSingleImage = (images?.length ?? 0) <= 1;
@@ -3924,7 +3924,7 @@ function AboutLocationInfoHero({
       {
         href: action.href,
         onClick: action.onClick,
-        className: "h-auto text-sm font-semibold uppercase tracking-wider underline decoration-2 underline-offset-8 transition hover:no-underline",
+        className: "h-auto text-sm font-semibold uppercase tracking-wider underline decoration-2 underline-offset-8 transition-opacity hover:opacity-70",
         children: action.label
       },
       index
@@ -3943,8 +3943,8 @@ function AboutLocationInfoHero({
         }
       ) : section.label),
       section.hours && section.hours.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-2", children: section.hours.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60 tracking-wide", children: item.day }) : item.day),
-        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm font-semibold uppercase opacity-60", children: item.time }) : item.time)
+        item.day && (typeof item.day === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase opacity-60 tracking-tight", children: item.day }) : item.day),
+        item.time && (typeof item.time === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm uppercase tracking-tight", children: item.time }) : item.time)
       ] }, itemIndex)) })
     ] }, sectionIndex)) });
   }, [
@@ -4020,7 +4020,7 @@ function AboutLocationInfoHero({
         "div",
         {
           className: cn(
-            "flex flex-col gap-8 lg:flex-row lg:items-center lg:gap-12",
+            "flex flex-col gap-6 lg:flex-row lg:items-center lg:gap-12",
             contentPosition === "right" && "lg:flex-row-reverse",
             mobileStackOrder === "images-first" && "flex-col-reverse"
           ),
@@ -4037,7 +4037,7 @@ function AboutLocationInfoHero({
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headlineClassName, children: headline })),
               actionsContent,
-              address || phone ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+              address || phone ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 my-12 md:my-10", children: [
                 address ? /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -23923,6 +23923,7 @@ function FooterBackgroundCard({
     () => backgroundImage ? { backgroundImage: `url('${backgroundImage}')` } : void 0,
     [backgroundImage]
   );
+  const contactLocationLabel = contact?.location && contact?.timezone ? `${contact.location} \u2022 ${contact.timezone}` : contact?.location || contact?.timezone;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -24000,7 +24001,73 @@ function FooterBackgroundCard({
                         ),
                         children: ctaText
                       }
-                    )
+                    ),
+                    (contactTitle || contact) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8", contactSectionClassName), children: [
+                      contactTitle && /* @__PURE__ */ jsxRuntime.jsx(
+                        "h3",
+                        {
+                          className: cn(
+                            "mb-4 text-sm font-medium tracking-wider uppercase",
+                            contactTitleClassName
+                          ),
+                          children: contactTitle
+                        }
+                      ),
+                      contact && /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-3", children: [
+                        contact.phone ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-sm", contactItemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: contact.phone,
+                            className: "group flex items-center gap-2.5 opacity-80 transition-opacity hover:opacity-100",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/phone", size: 16 }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contact.phone })
+                            ]
+                          }
+                        ) }) : null,
+                        contact.email ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-sm", contactItemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: contact.email,
+                            className: "group flex items-center gap-2.5 opacity-80 transition-opacity hover:opacity-100",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/mail", size: 16 }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contact.email })
+                            ]
+                          }
+                        ) }) : null,
+                        contactLocationLabel ? /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("text-sm", contactItemClassName), children: contact.location ? /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: `https://maps.google.com/?q=${encodeURIComponent(
+                              contact.location
+                            )}`,
+                            className: "group flex items-start gap-2.5 opacity-80 transition-opacity hover:opacity-100",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: "lucide/map-pin",
+                                  size: 16,
+                                  className: "mt-0.5"
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contactLocationLabel })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2.5 opacity-80", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            DynamicIcon,
+                            {
+                              name: "lucide/map-pin",
+                              size: 16,
+                              className: "mt-0.5"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "underline underline-offset-2", children: contactLocationLabel })
+                        ] }) }) : null
+                      ] })
+                    ] })
                   ] }),
                   menuItems && menuItems.length > 0 && menuItems.map((menu, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
@@ -24031,28 +24098,7 @@ function FooterBackgroundCard({
                       ]
                     },
                     idx
-                  )),
-                  (contactTitle || contact) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("pl-0 md:pl-8", contactSectionClassName), children: [
-                    contactTitle && /* @__PURE__ */ jsxRuntime.jsx(
-                      "h3",
-                      {
-                        className: cn(
-                          "mb-4 text-sm font-medium tracking-wider uppercase",
-                          contactTitleClassName
-                        ),
-                        children: contactTitle
-                      }
-                    ),
-                    contact && /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "space-y-3", children: [
-                      contact.phone && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.phone }),
-                      contact.email && /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("opacity-80", contactItemClassName), children: contact.email }),
-                      (contact.location || contact.timezone) && /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("opacity-80", contactItemClassName), children: [
-                        contact.location,
-                        contact.location && contact.timezone && " \u2022 ",
-                        contact.timezone
-                      ] })
-                    ] })
-                  ] })
+                  ))
                 ]
               }
             ),
@@ -24449,7 +24495,7 @@ function FooterNewsletterMinimal({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 flex flex-col justify-between gap-15 lg:flex-row", newsletterSectionClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
+          formConfig?.token && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-md flex-col gap-10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 text-sm font-light tracking-tight lg:text-base", children: [
             newsletterLabel && /* @__PURE__ */ jsxRuntime.jsx("p", { children: newsletterLabel }),
             /* @__PURE__ */ jsxRuntime.jsxs(
               forms.Form,
@@ -27419,66 +27465,39 @@ function FeatureIntegrationCards({
   patternOpacity,
   patternClassName
 }) {
-  const renderIntegrationIcon = React52.useCallback((integration) => {
-    if (integration.iconSlot) return integration.iconSlot;
-    if (!integration.icon) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: integration.icon,
-        alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
-        className: cn("h-auto w-7", integration.iconClassName),
-        loading: "lazy",
-        optixFlowConfig
-      }
-    );
-  }, [optixFlowConfig]);
-  const renderLinkLabel = React52.useCallback((integration) => {
-    if (integration.linkLabelSlot) return integration.linkLabelSlot;
-    if (!integration.linkLabel) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: cn(
-          "flex items-center gap-1.5 rounded-full border px-3 py-2 text-sm font-medium transition-colors",
-          getBorderColor(background),
-          getAccentColor(background),
-          integration.linkLabelClassName
-        ),
-        children: [
-          integration.linkLabel,
-          /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 14 })
-        ]
-      }
-    );
-  }, [background]);
+  const renderIntegrationIcon = React52.useCallback(
+    (integration) => {
+      if (integration.iconSlot) return integration.iconSlot;
+      if (!integration.icon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: integration.icon,
+          alt: integration.iconAlt || (typeof integration.title === "string" ? integration.title : "Integration icon"),
+          className: cn(
+            "min-h-12 h-auto w-auto object-contain",
+            integration.iconClassName
+          ),
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    },
+    [optixFlowConfig]
+  );
   const integrationsContent = React52.useMemo(() => {
     if (integrationsSlot) return integrationsSlot;
     if (!integrations || integrations.length === 0) return null;
     return integrations.map((integration, index) => {
       const iconContent = renderIntegrationIcon(integration);
-      const linkLabelContent = renderLinkLabel(integration);
       const cardContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          iconContent && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "grid size-12 shrink-0 place-content-center rounded-lg border bg-background/50",
-                getBorderColor(background)
-              ),
-              children: iconContent
-            }
-          ),
-          linkLabelContent
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start gap-2 justify-between", children: iconContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex"), children: iconContent }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
           integration.title && (typeof integration.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h3",
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -27488,7 +27507,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "font-semibold md:text-lg",
-                getTextColor(background),
                 integration.titleClassName
               ),
               children: integration.title
@@ -27499,7 +27517,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -27509,7 +27526,6 @@ function FeatureIntegrationCards({
             {
               className: cn(
                 "text-sm leading-relaxed md:text-base",
-                getTextColor(background, "muted"),
                 integration.descriptionClassName
               ),
               children: integration.description
@@ -27518,8 +27534,7 @@ function FeatureIntegrationCards({
         ] })
       ] });
       const cardClasses = cn(
-        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300",
-        getBorderColor(background),
+        "flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300 bg-card card-text-foreground",
         "hover:shadow-lg",
         cardClassName,
         integration.className
@@ -27537,7 +27552,7 @@ function FeatureIntegrationCards({
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClasses, children: cardContent }, index);
     });
-  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon, renderLinkLabel, background]);
+  }, [integrationsSlot, integrations, cardClassName, renderIntegrationIcon]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -27549,11 +27564,47 @@ function FeatureIntegrationCards({
       className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center", headerClassName), children: [
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-semibold md:text-4xl", titleClassName), children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-4", gridClassName), children: integrationsContent })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 flex max-w-3xl flex-col items-center gap-4 text-center",
+              headerClassName
+            ),
+            children: [
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-3xl font-semibold md:text-4xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(descriptionClassName), children: description }))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-6 sm:grid-cols-2 lg:grid-cols-4",
+              gridClassName
+            ),
+            children: integrationsContent
+          }
+        )
       ]
     }
   );
@@ -44053,7 +44104,7 @@ function FooterNewsletterContact({
       className: cn(className),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-10", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-x-16 gap-y-8 md:grid-cols-2 xl:grid-cols-4", children: [
-          (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          formConfig?.token && (newsletterTitle || newsletterDescription || newsletterButtonText) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
             newsletterTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-3xl font-medium font-serif leading-none", children: newsletterTitle }),
             newsletterDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-light leading-normal", children: newsletterDescription }),
             /* @__PURE__ */ jsxRuntime.jsxs(
@@ -44492,43 +44543,45 @@ function FooterAccordionSocial({
                 optixFlowConfig
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              forms.Form,
-              {
-                form,
-                action: formConfig?.endpoint,
-                method: formMethod,
-                className: "flex gap-2",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: "Email Address",
-                      error: meta.touched && !!meta.error,
-                      className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                      "aria-label": "Email Address"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
-                      asButton: false,
-                      disabled: form.isSubmitting,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-                    }
-                  )
-                ]
-              }
-            )
+            formConfig?.token && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold", children: newsletterTitle }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-80", children: newsletterDescription })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: "flex gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", className: "flex-1", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsx(
+                      TextInput,
+                      {
+                        ...field,
+                        type: "email",
+                        placeholder: "Email Address",
+                        error: meta.touched && !!meta.error,
+                        className: "flex h-10 w-full rounded-md border border-input px-3 py-2 text-sm ring-offset-background placeholder:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                        "aria-label": "Email Address"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: "inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90",
+                        asButton: false,
+                        disabled: form.isSubmitting,
+                        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
           ] }),
           footerLinks && footerLinks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-x-16 gap-y-8 lg:grid-cols-3", children: footerLinks.map((section) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 text-lg font-bold", children: section.title }),
@@ -50266,7 +50319,16 @@ function HeroCenteredScreenshot({
                   children: description
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lazy", actionsClassName), children: renderActions })
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-4 mt-8 md:mt-12 justify-center",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
             ]
           }
         ) }),
@@ -50276,7 +50338,7 @@ function HeroCenteredScreenshot({
             src: imageSrc,
             alt: imageAlt,
             className: cn(
-              "mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-2xl object-cover shadow-lg",
+              "mx-auto mt-12 md:mt-24 max-h-[700px] w-full max-w-7xl rounded-2xl object-cover shadow-xl",
               imageClassName
             ),
             optixFlowConfig