@opensite/ui 2.4.8 → 2.4.9

package/dist/registry.cjs

@@ -1486,7 +1486,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",
@@ -8536,18 +8536,68 @@ function AboutStoryHero({
       "div",
       {
         className: cn(
-          "mt-6 md:mt-8 rounded-2xl p-6",
-          getNestedCardBg(background),
-          getNestedCardTextColor(background),
+          "rounded-2xl bg-muted text-muted-foreground",
+          "flex flex-col items-start gap-2",
           teamInfoClassName
         ),
         children: [
-          typeof teamInfo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-bold", children: teamInfo.title }) : teamInfo.title,
-          typeof teamInfo.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1", getTextColor(background, "muted")), children: teamInfo.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: teamInfo.description })
+          teamInfo.title ? typeof teamInfo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl md:text-2xl font-bold", children: teamInfo.title }) : teamInfo.title : null,
+          teamInfo.description ? typeof teamInfo.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: teamInfo.description }) : teamInfo.description : null
         ]
       }
     );
   }, [teamInfoSlot, teamInfo, teamInfoClassName, background]);
+  const contentItems = React27.useMemo(() => {
+    const items = [];
+    if (subtitle) {
+      if (typeof subtitle === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-sm font-semibold",
+            "uppercase tracking-wider opacity-65",
+            subtitleClassName
+          ),
+          children: subtitle
+        });
+      } else {
+        items.push(subtitle);
+      }
+    }
+    if (title) {
+      if (typeof title === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn("text-4xl font-bold tracking-tight md:text-5xl", title),
+          children: title
+        });
+      } else {
+        items.push(title);
+      }
+    }
+    if (content) {
+      if (typeof content === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg whitespace-pre-line", bodyClassName),
+          children: content
+        });
+      } else {
+        items.push(content);
+      }
+    }
+    return items;
+  }, [
+    subtitle,
+    subtitleClassName,
+    title,
+    titleClassName,
+    content,
+    bodyClassName
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -8555,49 +8605,24 @@ function AboutStoryHero({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           className: cn(
-            "grid gap:6 md:gap-12 lg:grid-cols-2 lg:items-center",
+            "grid gap-6 md:gap-12 grid-cols-1 lg:grid-cols-2 items-center",
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "text-sm font-semibold uppercase tracking-wider",
-                    getAccentColor(background),
-                    subtitleClassName
-                  ),
-                  children: subtitle
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle })),
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
-                {
-                  className: cn(
-                    "mt-4 text-4xl font-bold tracking-tight md:text-5xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
-              content && (typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 md:space-y-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ContentGroup,
                 {
-                  className: cn(
-                    "mt-6 text-lg whitespace-pre-line",
-                    getTextColor(background, "muted"),
-                    bodyClassName
-                  ),
-                  children: content
+                  items: contentItems,
+                  className: "space-y-4 md:space-y-6"
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", bodyClassName), children: content })),
+              ),
               (teamInfoSlot || teamInfo) && teamInfoContent
             ] }),
             heroImage && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8606,7 +8631,8 @@ function AboutStoryHero({
                 src: heroImage.src,
                 alt: heroImage.alt,
                 className: cn(
-                  "mt-6 md:mt-0 w-full h-auto rounded-2xl object-cover sm:h-full",
+                  "w-full h-auto sm:h-full",
+                  "rounded-2xl object-cover shadow-xl",
                   imageClassName
                 ),
                 optixFlowConfig
@@ -8676,7 +8702,9 @@ function AboutStatsSidebar({
       "div",
       {
         className: cn(
-          "mt-8 space-y-6 p-6 bg-card text-card-foreground rounded-xl shadow-xl",
+          "bg-card text-card-foreground",
+          "mt-4 md:mt-6 space-y-6 p-6",
+          "rounded-xl shadow-xl",
           featuresClassName
         ),
         children: features.map((feature, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
@@ -8724,8 +8752,8 @@ function AboutStatsSidebar({
                   ),
                   children: title
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description }))
+              ) : title),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
             ]
           }
         ),
@@ -10785,14 +10813,14 @@ function CtaAccentBackground({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   cardClassName,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity
 }) {
@@ -10832,18 +10860,14 @@ function CtaAccentBackground({
     {
       background,
       spacing,
-      className: cn(className),
+      className,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: cn(
-            "rounded-lg p-8 md:rounded-xl lg:p-12",
-            getNestedCardBg(background, "accent"),
-            getNestedCardTextColor(background),
-            cardClassName
-          ),
+          className: cn("rounded-lg p-8 md:rounded-xl lg:p-12", cardClassName),
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h3",
@@ -10854,18 +10878,17 @@ function CtaAccentBackground({
                 ),
                 children: heading
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 lg:mb-6", headingClassName), children: heading })),
+            ) : heading),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
                 className: cn(
                   "mb-8 text-lg font-medium lg:text-xl",
-                  getTextColor(background, "muted"),
                   descriptionClassName
                 ),
                 children: description
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", descriptionClassName), children: description })),
+            ) : description),
             actionsContent
           ] })
         }
@@ -11744,7 +11767,8 @@ function CtaAppDownloadNewsletter({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -11764,17 +11788,7 @@ function CtaAppDownloadNewsletter({
                     children: appHeading
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", appHeadingClassName), children: appHeading })),
-                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn(
-                      "mb-8",
-                      getTextColor(background, "muted"),
-                      appDescriptionClassName
-                    ),
-                    children: appDescription
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
+                appDescription && (typeof appDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8", appDescriptionClassName), children: appDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", appDescriptionClassName), children: appDescription })),
                 appActionsContent
               ] }),
               phoneMockupImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -right-16 -bottom-16 h-64 w-48 rotate-12 opacity-20 lg:h-80 lg:w-60", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -11794,8 +11808,6 @@ function CtaAppDownloadNewsletter({
           {
             className: cn(
               "flex flex-col justify-center rounded-2xl border p-8 lg:p-12",
-              getNestedCardBg(background, "card"),
-              getNestedCardTextColor(background),
               newsletterCardClassName
             ),
             children: [
@@ -11809,17 +11821,7 @@ function CtaAppDownloadNewsletter({
                   children: newsletterHeading
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", newsletterHeadingClassName), children: newsletterHeading })),
-              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    "mb-8",
-                    getTextColor(background, "muted"),
-                    newsletterDescriptionClassName
-                  ),
-                  children: newsletterDescription
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
+              newsletterDescription && (typeof newsletterDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8", newsletterDescriptionClassName), children: newsletterDescription })),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 forms.Form,
                 {
@@ -26427,7 +26429,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
           ),
@@ -26458,7 +26460,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
         });
@@ -26814,7 +26816,6 @@ function FeatureAccordionImage({
 }) {
   const [activeItem, setActiveItem] = React27__namespace.useState(defaultValue || "item-0");
   const activeIndex = parseInt(activeItem.replace("item-", ""), 10) || 0;
-  const currentImage = items?.[activeIndex] || items?.[0];
   const accordionItemsContent = React27.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -26828,44 +26829,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 = React27.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
+    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 = React27.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,
     {
@@ -26877,35 +26924,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(
@@ -39115,13 +39141,16 @@ function FaqSimpleAccordion({
   items,
   itemsSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "lg",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
+  description,
+  descriptionClassName,
   headingClassName,
+  headerClassName,
   accordionClassName,
   accordionItemClassName,
   accordionTriggerClassName,
@@ -39146,13 +39175,7 @@ function FaqSimpleAccordion({
               children: item.question
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            AccordionContent,
-            {
-              className: cn(getTextColor(background, "muted"), accordionContentClassName),
-              children: item.answer
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
         ]
       },
       item.id || index
@@ -39166,6 +39189,37 @@ function FaqSimpleAccordion({
     accordionContentClassName,
     background
   ]);
+  const contentItems = React27.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    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;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -39175,17 +39229,18 @@ function FaqSimpleAccordion({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-          "h1",
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-full md:max-w-3xl space-y-4 md:space-y-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mb-4 text-3xl font-semibold md:mb-11 md:text-4xl",
-              headingClassName
-            ),
-            children: heading
+              "flex flex-col gap-2 text-left items-start",
+              headerClassName
+            )
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+        ),
         itemsContent
       ] })
     }
@@ -39372,12 +39427,12 @@ function FaqBadgeSupport({
   supportAction,
   supportSlot,
   background,
-  spacing = "py-6 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -39410,14 +39465,14 @@ function FaqBadgeSupport({
                     "transition-opacity duration-200 hover:no-underline hover:opacity-60",
                     accordionTriggerClassName
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium sm:py-1 lg:py-2 lg:text-lg", children: item.question })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold py-1 lg:py-2 text-lg leading-tight", children: item.question })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
                   className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg", children: item.answer })
                 }
               )
             ]
@@ -39441,11 +39496,16 @@ function FaqBadgeSupport({
       "div",
       {
         className: cn(
-          "mx-auto flex max-w-3xl flex-col items-center gap-4 text-center md:flex-row md:justify-between md:text-left",
+          "mx-auto max-w-full md:max-w-3xl",
+          "flex flex-col items-center md:flex-row md:justify-between",
+          "bg-card text-card-foreground",
+          "text-center md:text-left",
+          "gap-4 p-6 md:p-12",
+          "rounded-lg shadow-lg ring-2",
           supportSectionClassName
         ),
         children: [
-          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: getTextColor(background, "muted"), children: supportText }) : supportText),
+          supportText && (typeof supportText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: supportText }) : supportText),
           supportAction && /* @__PURE__ */ jsxRuntime.jsxs(
             Pressable,
             {
@@ -39465,7 +39525,49 @@ function FaqBadgeSupport({
         ]
       }
     );
-  }, [supportSlot, supportText, supportAction, supportSectionClassName, background]);
+  }, [
+    supportSlot,
+    supportText,
+    supportAction,
+    supportSectionClassName,
+    background
+  ]);
+  const contentItems = React27.useMemo(() => {
+    const items2 = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items2.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "max-w-full md:max-w-md",
+            "text-3xl md:text-4xl lg:text-5xl",
+            "font-semibold text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items2.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items2.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-base md:text-lg max-w-full md:max-w-md text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items2.push(description);
+      }
+    }
+    return items2;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -39475,49 +39577,31 @@ function FaqBadgeSupport({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-8 md:space-y-16", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-8 md:space-y-16", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "mx-auto flex max-w-full md:max-w-3xl flex-col text-left md:text-center",
               headerClassName
             ),
             children: [
-              badge && /* @__PURE__ */ jsxRuntime.jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: cn("w-fit md:mx-auto", badgeClassName),
-                  children: badge
-                }
-              ),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mt-4 text-3xl font-semibold md:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-2", badgeClassName), children: badge }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ContentGroup,
                 {
+                  items: contentItems,
                   className: cn(
-                    getTextColor(background, "muted"),
-                    "mt-6 text-base md:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
+                    "flex flex-col gap-2 text-left md:text-center items-start",
+                    headerClassName
+                  )
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+              )
             ]
           }
         ),
         itemsContent,
-        /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
         supportSectionContent
       ] })
     }
@@ -40471,18 +40555,18 @@ function FaqGradientCategories({
 function FaqSidebarNavigation({
   heading,
   description,
+  descriptionClassName,
   categories,
   categoriesSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   patternClassName,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
-  descriptionClassName,
   contentWrapperClassName,
   navClassName,
   navButtonClassName,
@@ -40541,7 +40625,7 @@ function FaqSidebarNavigation({
                   AccordionContent,
                   {
                     className: cn("sm:mb-1 lg:mb-2", accordionContentClassName),
-                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(getTextColor(background, "muted"), "lg:text-lg"), children: item.answer })
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:text-lg"), children: item.answer })
                   }
                 )
               ]
@@ -40552,7 +40636,48 @@ function FaqSidebarNavigation({
       },
       category.id
     )) });
-  }, [categoriesSlot, filteredCategories, categoriesWrapperClassName, categoryTitleClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, background]);
+  }, [
+    categoriesSlot,
+    filteredCategories,
+    categoriesWrapperClassName,
+    categoryTitleClassName,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName,
+    background
+  ]);
+  const contentItems = React27.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "font-semibold text-4xl md:text-5xl lg:text-6xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -40561,38 +40686,17 @@ function FaqSidebarNavigation({
       pattern,
       patternOpacity,
       patternClassName,
-      className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+      className: cn(pattern && "overflow-visible", className),
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ContentGroup,
           {
+            items: contentItems,
             className: cn(
-              "mx-auto flex max-w-3xl flex-col text-left md:text-center",
+              "flex flex-col text-left mb-12 md:mb-24 gap-0 text-balance items-start max-w-full md:max-w-md",
               headerClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "mb-3 text-3xl font-semibold md:mb-4 lg:mb-6 lg:text-4xl",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "p",
-                {
-                  className: cn(
-                    getTextColor(background, "muted"),
-                    "lg:text-lg",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-            ]
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -40603,17 +40707,21 @@ function FaqSidebarNavigation({
               contentWrapperClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-2 overflow-x-auto pb-2 lg:flex-col lg:gap-2 lg:overflow-visible lg:pb-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("nav", { className: cn("lg:w-1/4", navClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 flex gap-1 overflow-x-auto lg:flex-col lg:gap-2 lg:overflow-visible p-2 ring-2 rounded-lg", children: [
                 categories && categories.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     onClick: () => setActiveCategory("all"),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === "all" ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: "All"
                   }
@@ -40623,11 +40731,15 @@ function FaqSidebarNavigation({
                   {
                     onClick: () => setActiveCategory(category.id),
                     className: cn(
-                      "shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
+                      "cursor-pointer",
+                      "shrink-0 whitespace-nowrap rounded-md px-4 py-2 text-left text-sm font-medium transition-colors lg:w-full",
                       activeCategory === category.id ? cn(
                         "bg-primary text-primary-foreground",
                         navButtonActiveClassName
-                      ) : cn("hover:bg-muted", navButtonClassName)
+                      ) : cn(
+                        "hover:bg-muted hover:text-muted-foreground",
+                        navButtonClassName
+                      )
                     ),
                     children: category.title
                   },
@@ -41471,7 +41583,7 @@ var FeatureCard = React27__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,
@@ -41719,7 +41831,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
         });
@@ -55001,56 +55113,40 @@ function HeroProductShowcaseFloating({
   spacing = "xl",
   contentClassName,
   headingClassName,
+  headerClassName,
   descriptionClassName,
   showcaseClassName,
   optixFlowConfig
 }) {
   const renderBadge = React27.useMemo(() => {
     if (badgeSlot) return badgeSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: cn(
-          "inline-flex w-fit items-center gap-2 rounded-full px-4 py-2 text-sm font-medium",
-          `${getAccentColor(background)}/10`,
-          getAccentColor(background)
-        ),
-        children: [
-          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
-          badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("px-2"), children: [
+      badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
+      badgeText && /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
+    ] });
   }, [badgeSlot, badgeIcon, badgeText]);
   const renderFloatingStat = React27.useMemo(() => {
     if (floatingStatSlot) return floatingStatSlot;
     if (!floatingStat) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      floatingStat.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-success/10", children: /* @__PURE__ */ jsxRuntime.jsx(
-        DynamicIcon,
-        {
-          name: floatingStat.icon,
-          size: 20,
-          className: "text-success"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl font-bold ", children: floatingStat.value }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xs", getTextColor(background, "muted")), children: floatingStat.label })
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-4 -right-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      floatingStat.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 size-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: floatingStat.icon }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: floatingStat.value }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-normal opacity-70", children: floatingStat.label })
       ] })
     ] }) });
   }, [floatingStatSlot, floatingStat]);
   const renderUserCount = React27.useMemo(() => {
     if (userCountSlot) return userCountSlot;
     if (!userCount) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-background p-4 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-4 -left-4 rounded-xl bg-card text-card-foreground p-4 shadow-lg border", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
       userCount.avatars && userCount.avatars.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: userCount.avatars.map((avatar, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: avatar.src,
           alt: avatar.alt,
           className: cn(
-            "h-8 w-8 rounded-full border-2 border-background object-cover",
+            "size-8 rounded-full border-2 border-background object-cover",
             avatar.className
           ),
           optixFlowConfig
@@ -55058,8 +55154,8 @@ function HeroProductShowcaseFloating({
         idx
       )) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold ", children: userCount.count }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: getTextColor(background, "muted"), children: userCount.label })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold", children: userCount.count }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-normal opacity-70", children: userCount.label })
       ] })
     ] }) });
   }, [userCountSlot, userCount, optixFlowConfig]);
@@ -55067,7 +55163,7 @@ function HeroProductShowcaseFloating({
     if (productImageSlot) return productImageSlot;
     if (!productImage) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("order-1", showcaseClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-4/3 overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-purple-500/20 p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square overflow-hidden rounded-2xl bg-linear-to-br from-primary/20 to-primary/80 p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
           src: productImage.src,
@@ -55090,6 +55186,37 @@ function HeroProductShowcaseFloating({
     renderFloatingStat,
     renderUserCount
   ]);
+  const contentItems = React27.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-2xl font-semibold md:text-3xl lg:text-4xl",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("text-lg opacity-70", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -55097,42 +55224,22 @@ function HeroProductShowcaseFloating({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-10 md:pt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2 lg:gap-20", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-12 grid-cols-1 md:grid-cols-2 lg:gap-20", children: [
         renderProductShowcase,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-8 order-2", contentClassName), children: [
           renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
-            {
-              className: cn(
-                "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ContentGroup,
             {
+              items: contentItems,
               className: cn(
-                "text-lg",
-                getTextColor(background, "muted"),
-                descriptionClassName
-              ),
-              children: description
+                "text-left text-balance space-y-0 md:space-y-2",
+                headerClassName
+              )
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             BlockActions,
             {