@opensite/ui 2.0.2 → 2.0.4

package/dist/hero-centered-image-grid.js

@@ -11,32 +11,6 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-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";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -838,27 +812,31 @@ function HeroCenteredImageGrid({
   gridImages,
   gridImagesSlot,
   imageOverlayAction,
-  logos,
-  logosSlot,
   background,
-  spacing,
   pattern,
   patternOpacity,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageGridClassName,
-  logosClassName,
   optixFlowConfig
 }) {
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -877,38 +855,20 @@ function HeroCenteredImageGrid({
   }, [actionsSlot, actions]);
   const renderImageOverlayAction = useMemo(() => {
     if (!imageOverlayAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = imageOverlayAction;
-    return /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        asButton: true,
-        className: actionClassName,
-        ...pressableProps,
-        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-          icon,
-          label,
-          iconAfter
-        ] })
-      }
-    );
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = imageOverlayAction;
+    return /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon,
+      label,
+      iconAfter
+    ] }) });
   }, [imageOverlayAction]);
-  const renderLogos = useMemo(() => {
-    if (logosSlot) return logosSlot;
-    if (!logos || logos.length === 0) return null;
-    return logos.map((logo, index) => {
-      const src = typeof logo.src === "string" ? logo.src : logo.src.light;
-      typeof logo.src === "string" ? logo.src : logo.src.dark;
-      return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
-        Img,
-        {
-          src,
-          alt: logo.alt,
-          className: cn(logo.className, "dark:invert"),
-          optixFlowConfig
-        }
-      ) }, index);
-    });
-  }, [logosSlot, logos, optixFlowConfig]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -916,39 +876,90 @@ function HeroCenteredImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex flex-col items-center gap-8 text-center", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-4xl font-semibold text-pretty lg:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("lg:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col justify-center gap-2 sm:flex-row", actionsClassName), children: renderActions })
-        ] }) }),
-        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5", imageGridClassName), children: [
-          gridImages?.[0] && /* @__PURE__ */ jsx(
-            Img,
-            {
-              src: gridImages[0].src,
-              alt: gridImages[0].alt,
-              className: cn("h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert", gridImages[0].className),
-              optixFlowConfig
-            }
-          ),
-          gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
-            /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: gridImages[1].src,
-                alt: gridImages[1].alt,
-                className: cn("h-full max-h-[500px] w-full object-cover dark:invert", gridImages[1].className),
-                optixFlowConfig
-              }
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "z-10 flex flex-col items-center gap-8 text-center",
+              contentClassName
             ),
-            renderImageOverlayAction
-          ] })
-        ] }),
-        (logosSlot || logos && logos.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mx-auto mt-12 grid max-w-7xl grid-cols-2 place-items-center gap-6 md:grid-cols-4", logosClassName), children: renderLogos })
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "max-w-3xl", children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h1",
+                  {
+                    className: cn(
+                      "mb-4 text-4xl font-semibold text-balance lg:text-6xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "lg:text-xl text-balance",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex w-full flex-col justify-center gap-2 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }),
+        gridImagesSlot ? gridImagesSlot : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mt-20 grid max-w-7xl gap-px bg-border p-px md:grid-cols-5",
+              imageGridClassName
+            ),
+            children: [
+              gridImages?.[0] && /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: gridImages[0].src,
+                  alt: gridImages[0].alt,
+                  className: cn(
+                    "h-full max-h-[500px] w-full object-cover md:col-span-3 dark:invert",
+                    gridImages[0].className
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              gridImages?.[1] && /* @__PURE__ */ jsxs("div", { className: "relative md:col-span-2", children: [
+                /* @__PURE__ */ jsx(
+                  Img,
+                  {
+                    src: gridImages[1].src,
+                    alt: gridImages[1].alt,
+                    className: cn(
+                      "h-full max-h-[500px] w-full object-cover dark:invert",
+                      gridImages[1].className
+                    ),
+                    optixFlowConfig
+                  }
+                ),
+                renderImageOverlayAction
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/hero-community-survey-cta.cjs

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var icon = require('@page-speed/icon');
 var img = require('@page-speed/img');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -451,10 +451,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -830,6 +826,38 @@ 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
+    }
+  );
+}
 var MOBILE_CLASSES = {
   "fit-left": "items-start md:items-center",
   "fit-center": "items-center",
@@ -913,11 +941,11 @@ function HeroCommunitySurveyCta({
   rightOverlayImage,
   imagesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "pt-32 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   announcementClassName,
   headingClassName,
   descriptionClassName,
@@ -927,29 +955,22 @@ function HeroCommunitySurveyCta({
 }) {
   const renderAnnouncement = React.useMemo(() => {
     if (announcementSlot) return announcementSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Pressable,
+    return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: announcementHref, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Badge,
       {
-        href: announcementHref,
         className: cn(
-          "group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm",
+          "group mx-auto w-fit gap-3 px-5 py-2 text-sm h-fit",
           announcementClassName
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1 font-medium", children: announcementPrimary }),
-          announcementSecondary,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DynamicIcon,
-            {
-              name: "lucide/minus",
-              size: 16,
-              className: "mx-1 inline-block"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold group-hover:underline", children: announcementLinkText })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: announcementPrimary }),
+            announcementSecondary
+          ] }),
+          announcementLinkText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold pl-4 ml-4 border-l", children: announcementLinkText }) : null
         ]
       }
-    );
+    ) });
   }, [
     announcementSlot,
     announcementHref,
@@ -958,46 +979,119 @@ function HeroCommunitySurveyCta({
     announcementSecondary,
     announcementLinkText
   ]);
+  const imageCount = React.useMemo(() => {
+    let count = 0;
+    if (mainImage) count++;
+    if (leftOverlayImage) count++;
+    if (rightOverlayImage) count++;
+    return count;
+  }, [mainImage, leftOverlayImage, rightOverlayImage]);
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mx-auto max-w-5xl", imagesClassName), children: [
-      mainImage && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: mainImage.src,
-          alt: mainImage.alt,
-          className: mainImage.className,
-          optixFlowConfig
-        }
-      ),
-      leftOverlayImage && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
+    if (imageCount === 0) return null;
+    if (imageCount === 1) {
+      const img$1 = mainImage || leftOverlayImage || rightOverlayImage;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          src: leftOverlayImage.src,
-          alt: leftOverlayImage.alt,
-          className: leftOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative aspect-4/3 w-full max-w-lg overflow-hidden rounded-lg shadow-2xl",
+            imagesClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: img$1.src,
+              alt: img$1.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          )
         }
-      ),
-      rightOverlayImage && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
+      ) });
+    }
+    if (imageCount === 2) {
+      const imgs = [mainImage, leftOverlayImage, rightOverlayImage].filter(
+        Boolean
+      );
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          src: rightOverlayImage.src,
-          alt: rightOverlayImage.alt,
-          className: rightOverlayImage.className,
-          optixFlowConfig
+          className: cn(
+            "relative min-h-[350px] md:min-h-[400px] lg:min-h-[450px]",
+            imagesClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[70%] overflow-hidden rounded-lg shadow-2xl md:w-[65%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: imgs[0].src,
+                alt: imgs[0].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[55%] overflow-hidden rounded-lg shadow-2xl md:w-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: imgs[1].src,
+                alt: imgs[1].alt,
+                className: "h-full w-full object-cover",
+                optixFlowConfig
+              }
+            ) })
+          ]
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "relative min-h-[380px] md:min-h-[430px] lg:min-h-[480px]",
+          imagesClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-0 z-10 aspect-4/3 w-[65%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: mainImage.src,
+              alt: mainImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 right-0 z-20 aspect-3/4 w-[50%] overflow-hidden rounded-lg shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: rightOverlayImage.src,
+              alt: rightOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-[10%] z-30 aspect-square w-[35%] overflow-hidden rounded-lg shadow-2xl md:bottom-6 md:left-[15%]", children: /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: leftOverlayImage.src,
+              alt: leftOverlayImage.alt,
+              className: "h-full w-full object-cover",
+              optixFlowConfig
+            }
+          ) })
+        ]
+      }
+    );
   }, [
     imagesSlot,
     imagesClassName,
+    imageCount,
     mainImage,
     leftOverlayImage,
     rightOverlayImage,
     optixFlowConfig
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -1006,14 +1100,14 @@ function HeroCommunitySurveyCta({
       patternOpacity,
       className,
       containerClassName,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           renderAnnouncement,
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h1",
             {
               className: cn(
-                "mx-auto max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
+                "max-w-4xl text-4xl font-semibold text-balance lg:text-6xl",
                 headingClassName
               ),
               children: heading
@@ -1023,7 +1117,7 @@ function HeroCommunitySurveyCta({
             "p",
             {
               className: cn(
-                "mx-auto max-w-4xl lg:text-xl",
+                "max-w-4xl lg:text-xl text-balance",
                 descriptionClassName
               ),
               children: description
@@ -1038,11 +1132,8 @@ function HeroCommunitySurveyCta({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative px-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%" }),
-          renderImages
-        ] })
-      ]
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: renderImages })
+      ] })
     }
   );
 }

package/dist/hero-community-survey-cta.d.cts

@@ -108,6 +108,6 @@ interface HeroCommunitySurveyCtaProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroCommunitySurveyCta({ announcementPrimary, announcementSecondary, announcementLinkText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, mainImage, leftOverlayImage, rightOverlayImage, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCommunitySurveyCtaProps): React.JSX.Element;
+declare function HeroCommunitySurveyCta({ announcementPrimary, announcementSecondary, announcementLinkText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, mainImage, leftOverlayImage, rightOverlayImage, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, announcementClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCommunitySurveyCtaProps): React.JSX.Element;
 
 export { HeroCommunitySurveyCta, type HeroCommunitySurveyCtaProps };

package/dist/hero-community-survey-cta.d.ts

@@ -108,6 +108,6 @@ interface HeroCommunitySurveyCtaProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroCommunitySurveyCta({ announcementPrimary, announcementSecondary, announcementLinkText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, mainImage, leftOverlayImage, rightOverlayImage, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, announcementClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCommunitySurveyCtaProps): React.JSX.Element;
+declare function HeroCommunitySurveyCta({ announcementPrimary, announcementSecondary, announcementLinkText, announcementHref, announcementSlot, heading, description, actions, actionsSlot, mainImage, leftOverlayImage, rightOverlayImage, imagesSlot, background, containerClassName, spacing, pattern, patternOpacity, className, announcementClassName, headingClassName, descriptionClassName, actionsClassName, imagesClassName, optixFlowConfig, }: HeroCommunitySurveyCtaProps): React.JSX.Element;
 
 export { HeroCommunitySurveyCta, type HeroCommunitySurveyCtaProps };