@opensite/ui 2.4.8 → 2.4.9

package/dist/feature-accordion-image.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -27,39 +27,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/features/feature-accordion-image.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -133,7 +107,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -438,7 +412,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -499,6 +473,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FeatureAccordionImage({
   title,
   description,
@@ -521,10 +527,9 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React__namespace.useState(defaultValue || "item-0");
+  const [activeItem, setActiveItem] = React4__namespace.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
-  const currentImage = items?.[activeIndex] || items?.[0];
-  const accordionItemsContent = React.useMemo(() => {
+  const accordionItemsContent = React4.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -537,44 +542,90 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-md md:text-lg font-medium",
+                "text-left md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
             }
           ),
-          item.content && /* @__PURE__ */ jsxRuntime.jsx(
-            AccordionContent,
-            {
-              className: cn(
-                getTextColor(background, "muted"),
-                item.contentClassName
-              ),
-              children: item.content
-            }
-          )
+          item.content && /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(item.contentClassName), children: item.content })
         ]
       },
       index
     ));
   }, [itemsSlot, items]);
-  const imageContent = React.useMemo(() => {
-    if (currentImage?.imageSlot) return currentImage.imageSlot;
-    if (!currentImage?.imageSrc) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: currentImage.imageSrc,
-        alt: currentImage.imageAlt || "",
-        className: cn(
-          "h-full w-full object-cover transition-opacity duration-300",
-          imageClassName
-        ),
-        loading: "lazy",
-        optixFlowConfig
+  const imageContent = React4.useMemo(() => {
+    if (!items || items.length === 0) return null;
+    const hasImageSlot = items.some((item) => item.imageSlot);
+    if (hasImageSlot) {
+      const current = items[activeIndex] || items[0];
+      if (current?.imageSlot) return current.imageSlot;
+      if (!current?.imageSrc) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: current.imageSrc,
+          alt: current.imageAlt || "Feature Image",
+          className: cn(
+            "h-full w-full object-cover transition-opacity duration-500",
+            imageClassName
+          ),
+          loading: "eager",
+          optixFlowConfig
+        }
+      );
+    }
+    return items.map((item, index) => {
+      if (!item.imageSrc) return null;
+      const isActive = index === activeIndex;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: item.imageSrc,
+          alt: item.imageAlt || "Feature Image",
+          className: cn(
+            "absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100" : "opacity-0",
+            imageClassName
+          ),
+          loading: "eager",
+          optixFlowConfig
+        },
+        index
+      );
+    });
+  }, [items, activeIndex, imageClassName, optixFlowConfig]);
+  const contentItems = React4.useMemo(() => {
+    const items2 = [];
+    if (title) {
+      if (typeof title === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-2xl font-semibold md:text-3xl lg:text-4xl",
+            titleClassName
+          ),
+          children: title
+        });
+      } else {
+        items2.push(title);
       }
-    );
-  }, [currentImage, imageClassName, optixFlowConfig]);
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [title, titleClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -586,35 +637,14 @@ function FeatureAccordionImage({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
-        (title || description) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
               "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
-            ),
-            children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }))
-            ]
+            )
           }
         ),
         (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/feature-accordion-image.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import * as React4 from 'react';
+import React4__default, { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -12,32 +12,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 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";
-    }
-  }
-}
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 function DynamicIcon({ apiKey, ...props }) {
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
@@ -111,7 +85,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -416,7 +390,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -477,6 +451,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4.isValidElement(reactNode)) {
+          return React4.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React4.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 function FeatureAccordionImage({
   title,
   description,
@@ -499,9 +505,8 @@ function FeatureAccordionImage({
   patternOpacity,
   patternClassName
 }) {
-  const [activeItem, setActiveItem] = React.useState(defaultValue || "item-0");
+  const [activeItem, setActiveItem] = React4.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
-  const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -515,44 +520,90 @@ function FeatureAccordionImage({
             AccordionTrigger,
             {
               className: cn(
-                "text-left text-md md:text-lg font-medium",
+                "text-left md:text-lg font-medium",
                 item.triggerClassName
               ),
               children: item.title
             }
           ),
-          item.content && /* @__PURE__ */ jsx(
-            AccordionContent,
-            {
-              className: cn(
-                getTextColor(background, "muted"),
-                item.contentClassName
-              ),
-              children: item.content
-            }
-          )
+          item.content && /* @__PURE__ */ jsx(AccordionContent, { className: cn(item.contentClassName), children: item.content })
         ]
       },
       index
     ));
   }, [itemsSlot, items]);
   const imageContent = useMemo(() => {
-    if (currentImage?.imageSlot) return currentImage.imageSlot;
-    if (!currentImage?.imageSrc) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: currentImage.imageSrc,
-        alt: currentImage.imageAlt || "",
-        className: cn(
-          "h-full w-full object-cover transition-opacity duration-300",
-          imageClassName
-        ),
-        loading: "lazy",
-        optixFlowConfig
+    if (!items || items.length === 0) return null;
+    const hasImageSlot = items.some((item) => item.imageSlot);
+    if (hasImageSlot) {
+      const current = items[activeIndex] || items[0];
+      if (current?.imageSlot) return current.imageSlot;
+      if (!current?.imageSrc) return null;
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: current.imageSrc,
+          alt: current.imageAlt || "Feature Image",
+          className: cn(
+            "h-full w-full object-cover transition-opacity duration-500",
+            imageClassName
+          ),
+          loading: "eager",
+          optixFlowConfig
+        }
+      );
+    }
+    return items.map((item, index) => {
+      if (!item.imageSrc) return null;
+      const isActive = index === activeIndex;
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: item.imageSrc,
+          alt: item.imageAlt || "Feature Image",
+          className: cn(
+            "absolute inset-0 h-full w-full object-cover transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100" : "opacity-0",
+            imageClassName
+          ),
+          loading: "eager",
+          optixFlowConfig
+        },
+        index
+      );
+    });
+  }, [items, activeIndex, imageClassName, optixFlowConfig]);
+  const contentItems = useMemo(() => {
+    const items2 = [];
+    if (title) {
+      if (typeof title === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-2xl font-semibold md:text-3xl lg:text-4xl",
+            titleClassName
+          ),
+          children: title
+        });
+      } else {
+        items2.push(title);
       }
-    );
-  }, [currentImage, imageClassName, optixFlowConfig]);
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [title, titleClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -564,35 +615,14 @@ function FeatureAccordionImage({
       className,
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6 md:space-y-16", children: [
-        (title || description) && /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
               "text-left md:text-center max-w-full md:max-w-md text-balance",
               headerClassName
-            ),
-            children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-2xl font-semibold md:text-3xl lg:text-4xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xl font-semibold md:text-2xl lg:text-3xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              )),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4 lg:text-lg", descriptionClassName), children: description }))
-            ]
+            )
           }
         ),
         (itemsSlot || items && items.length > 0) && /* @__PURE__ */ jsxs(

package/dist/feature-animated-carousel.cjs

@@ -951,7 +951,7 @@ var FeatureCard = React7__namespace.memo(
                 delay: 0.3,
                 ease: "easeOut"
               },
-              className: "p-6 text-sm md:p-8 md:text-base",
+              className: "p-6 text-sm md:p-8 md:text-base text-balance",
               children: (feature.title || feature.description) && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
                 feature.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
                   feature.title,
@@ -1199,7 +1199,7 @@ function FeatureAnimatedCarousel({
           as: "h2",
           className: cn(
             "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
-            title
+            titleClassName
           ),
           children: title
         });

package/dist/feature-animated-carousel.js

@@ -930,7 +930,7 @@ var FeatureCard = React7.memo(
                 delay: 0.3,
                 ease: "easeOut"
               },
-              className: "p-6 text-sm md:p-8 md:text-base",
+              className: "p-6 text-sm md:p-8 md:text-base text-balance",
               children: (feature.title || feature.description) && /* @__PURE__ */ jsxs("p", { children: [
                 feature.title && /* @__PURE__ */ jsxs("span", { className: "font-semibold", children: [
                   feature.title,
@@ -1178,7 +1178,7 @@ function FeatureAnimatedCarousel({
           as: "h2",
           className: cn(
             "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
-            title
+            titleClassName
           ),
           children: title
         });

package/dist/feature-image-cards-three-column.cjs

@@ -1068,7 +1068,7 @@ function FeatureImageCardsThreeColumn({
           style: aspectRatioStyle,
           className: cn(
             "group relative overflow-hidden rounded-2xl shadow-xl",
-            "aspect-[var(--aspect-mobile)] md:aspect-[var(--aspect-desktop)]",
+            "aspect-(--aspect-mobile) `md:aspect-(--aspect-desktop)",
             cardClassName,
             card.className
           ),
@@ -1099,7 +1099,7 @@ function FeatureImageCardsThreeColumn({
           as: "h2",
           className: cn(
             "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
-            title
+            titleClassName
           ),
           children: title
         });

package/dist/feature-image-cards-three-column.js

@@ -1046,7 +1046,7 @@ function FeatureImageCardsThreeColumn({
           style: aspectRatioStyle,
           className: cn(
             "group relative overflow-hidden rounded-2xl shadow-xl",
-            "aspect-[var(--aspect-mobile)] md:aspect-[var(--aspect-desktop)]",
+            "aspect-(--aspect-mobile) `md:aspect-(--aspect-desktop)",
             cardClassName,
             card.className
           ),
@@ -1077,7 +1077,7 @@ function FeatureImageCardsThreeColumn({
           as: "h2",
           className: cn(
             "text-3xl font-semibold text-balance md:text-4xl lg:text-5xl max-w-full md:max-w-md",
-            title
+            titleClassName
           ),
           children: title
         });

package/dist/footer-accordion-social.cjs

@@ -1451,7 +1451,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-accordion-social.js

@@ -1430,7 +1430,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-animated-social.cjs

@@ -1001,7 +1001,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-animated-social.js

@@ -980,7 +980,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-brand-description.cjs

@@ -1447,7 +1447,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",

package/dist/footer-brand-description.js

@@ -1426,7 +1426,7 @@ var platformIconMap = {
   yelp: "cib/yelp",
   spotify: "cib/spotify",
   apple: "cib/apple",
-  x: "line-md/twitter-x-alt",
+  x: "prime/twitter",
   github: "cib/github",
   snapchat: "cib/snapchat",
   discord: "cib/discord",