@opensite/ui 3.4.4 → 3.4.6

package/dist/registry.cjs

@@ -14104,10 +14104,10 @@ function ContactCareers({
         type: "single",
         collapsible: true,
         className: cn("space-y-3", accordionClassName),
-        children: jobListings.map((job) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: jobListings.map((job, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: job.id,
+            value: job.id || `faq-item-${idx}`,
             className: cn(
               "rounded-xl border border-border/60",
               "px-5 shadow-sm transition-all hover:shadow-md",
@@ -14132,7 +14132,7 @@ function ContactCareers({
               /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("pb-4", accordionContentClassName), children: job.description })
             ]
           },
-          job.id
+          job.id || idx
         ))
       }
     );
@@ -15470,10 +15470,10 @@ function ContactFaq({
   const faqContent = React30.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       AccordionItem,
       {
-        value: item.id,
+        value: item.id || `faq-item-${idx}`,
         className: accordionItemClassName,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -15489,7 +15489,7 @@ function ContactFaq({
           /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
         ]
       },
-      item.id
+      item.id || idx
     )) });
   }, [
     itemsSlot,
@@ -22833,6 +22833,12 @@ function FeatureIconGridBordered({
     }
   );
 }
+function isRenderableNode(value) {
+  return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
+}
+function firstRenderableNode(...values) {
+  return values.find(isRenderableNode);
+}
 function FeatureChecklistImage({
   sectionId = "feature-checklist-image",
   title,
@@ -22845,9 +22851,10 @@ function FeatureChecklistImage({
   actions,
   actionsSlot,
   checklistItems,
+  benefits,
   checklistSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
+  containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
   contentWrapperClassName,
   imageClassName,
   contentClassName,
@@ -22904,33 +22911,69 @@ function FeatureChecklistImage({
     if (imageSlot) return imageSlot;
     if (!imageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+      "div",
       {
-        src: imageSrc,
-        alt: imageAlt || "Feature illustration",
         className: cn(
-          "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
+          "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
           imageClassName
         ),
-        loading: "lazy",
-        optixFlowConfig
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: imageSrc,
+            alt: imageAlt || "Feature illustration",
+            className: cn(
+              "block h-full w-full object-cover object-center",
+              imageClassName
+            ),
+            loading: "lazy",
+            optixFlowConfig
+          }
+        )
       }
     );
   }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
   const checklistContent = React30.useMemo(() => {
     if (checklistSlot) return checklistSlot;
-    if (!checklistItems || checklistItems.length === 0) return null;
-    return checklistItems.map((item, index) => {
+    const items = checklistItems ?? benefits;
+    if (!items || items.length === 0) return null;
+    const renderedItems = [];
+    items.forEach((item, index) => {
       const isString = typeof item === "string";
-      const content = isString ? item : item.content;
-      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
+      const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
+      const title2 = isString ? void 0 : item.title;
+      const description2 = isString ? void 0 : item.description;
+      if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
+        return;
+      }
+      const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/circle-check-big",
+          size: 20,
+          className: "h-5 w-5"
+        }
+      ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: "lucide/circle-check-big",
+          size: 20,
+          className: "h-5 w-5"
+        }
+      ));
       const itemClassName = isString ? void 0 : item.className;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: iconElement }),
-        content
-      ] }, index);
+      renderedItems.push(
+        /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
+          isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
+            isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
+          ] })
+        ] }, index)
+      );
     });
-  }, [checklistSlot, checklistItems]);
+    return renderedItems.length > 0 ? renderedItems : null;
+  }, [checklistSlot, checklistItems, benefits]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -22946,7 +22989,8 @@ function FeatureChecklistImage({
         "div",
         {
           className: cn(
-            "flex flex-col gap-6 md:gap-12 md:flex-row",
+            "grid gap-8 md:gap-12 lg:items-center",
+            imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
             contentWrapperClassName
           ),
           children: [
@@ -22955,7 +22999,8 @@ function FeatureChecklistImage({
               "div",
               {
                 className: cn(
-                  "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
+                  "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
+                  imageContent && "lg:pl-8",
                   contentClassName
                 ),
                 children: [
@@ -22963,7 +23008,7 @@ function FeatureChecklistImage({
                     "h2",
                     {
                       className: cn(
-                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
                         titleClassName
                       ),
                       children: title
@@ -22972,18 +23017,36 @@ function FeatureChecklistImage({
                     "div",
                     {
                       className: cn(
-                        "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                        "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
                         titleClassName
                       ),
                       children: title
                     }
                   )),
-                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "relative text-base leading-relaxed md:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "relative text-base leading-relaxed md:text-lg",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  )),
                   actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       className: cn(
-                        "flex flex-wrap items-center gap-4",
+                        "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
                         actionsClassName
                       ),
                       children: actionsContent
@@ -22993,7 +23056,7 @@ function FeatureChecklistImage({
                     "ul",
                     {
                       className: cn(
-                        "flex-wrap items-center space-y-2 md:flex",
+                        "flex flex-col space-y-3 md:space-y-4",
                         checklistClassName
                       ),
                       children: checklistContent
@@ -39844,10 +39907,10 @@ function FaqCenteredAccordion({
         type: "single",
         collapsible: true,
         className: cn("mx-auto w-full lg:max-w-3xl", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: accordionItemClassName,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -39869,7 +39932,7 @@ function FaqCenteredAccordion({
               )
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -39957,10 +40020,10 @@ function FaqBadgeSupport({
         type: "single",
         collapsible: true,
         className: cn("mx-auto w-full lg:max-w-3xl", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: accordionItemClassName,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -39982,7 +40045,7 @@ function FaqBadgeSupport({
               )
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -40444,10 +40507,10 @@ function FaqSplitHelp({
         type: "single",
         collapsible: true,
         className: cn("w-full lg:w-2/3", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: accordionItemClassName,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -40469,7 +40532,7 @@ function FaqSplitHelp({
               )
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -40630,10 +40693,10 @@ function FaqCategorizedSections({
               children: category.title
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: categoryTitleClassName, children: category.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
             AccordionItem,
             {
-              value: item.id,
+              value: item.id || `faq-item-${idx}`,
               className: accordionItemClassName,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -40655,7 +40718,7 @@ function FaqCategorizedSections({
                 )
               ]
             },
-            item.id
+            item.id || idx
           )) })
         ] }, categoryIndex))
       }
@@ -40747,7 +40810,7 @@ function FaqMutedCards({
         children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${index}`,
             className: cn(
               "border-border/50",
               index === items.length - 1 ? "border-none" : "",
@@ -40895,10 +40958,10 @@ function FaqBorderedBadge({
         type: "single",
         collapsible: true,
         className: cn("space-y-4", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: cn("rounded-lg border px-4", accordionItemClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -40914,7 +40977,7 @@ function FaqBorderedBadge({
               /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn(accordionContentClassName), children: item.answer })
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -41021,10 +41084,10 @@ function FaqGradientCategories({
               children: category.title
             }
           ) : category.title,
-          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
             AccordionItem,
             {
-              value: item.id,
+              value: item.id || `faq-item-${idx}`,
               className: accordionItemClassName,
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -41048,7 +41111,7 @@ function FaqGradientCategories({
                 )
               ]
             },
-            item.id
+            item.id || idx
           )) })
         ] }, categoryIndex))
       }
@@ -41197,10 +41260,10 @@ function FaqSidebarNavigation({
                   children: category.title
                 }
               ) : category.title,
-              /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: category.items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                 AccordionItem,
                 {
-                  value: item.id,
+                  value: item.id || `faq-item-${idx}`,
                   className: accordionItemClassName,
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
@@ -41222,7 +41285,7 @@ function FaqSidebarNavigation({
                     )
                   ]
                 },
-                item.id
+                item.id || idx
               )) })
             ]
           },
@@ -41412,7 +41475,7 @@ function FaqCardCategories({
               children: category.items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 AccordionItem,
                 {
-                  value: item.id,
+                  value: item.id || `faq-item-${index}`,
                   className: cn(
                     categories?.length === index + 1 && "border-b-0",
                     accordionItemClassName
@@ -41439,7 +41502,7 @@ function FaqCardCategories({
                     )
                   ]
                 },
-                item.id
+                item.id || index
               ))
             }
           ) })
@@ -41720,10 +41783,10 @@ function FaqRoundedCards({
         type: "single",
         collapsible: true,
         className: cn("space-y-4", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: cn(
               "border border-border/50",
               "transition-all duration-500",
@@ -41760,7 +41823,7 @@ function FaqRoundedCards({
               )
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -41878,10 +41941,10 @@ function FaqProfileSidebar({
   const itemsContent = React30.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
       AccordionItem,
       {
-        value: item.id,
+        value: item.id || `faq-item-${idx}`,
         className: accordionItemClassName,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -41905,7 +41968,7 @@ function FaqProfileSidebar({
           )
         ]
       },
-      item.id
+      item.id || idx
     )) });
   }, [
     itemsSlot,
@@ -42102,10 +42165,10 @@ function FaqSplitHero({
         type: "single",
         collapsible: true,
         className: cn("w-full", accordionClassName),
-        children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        children: items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
           AccordionItem,
           {
-            value: item.id,
+            value: item.id || `faq-item-${idx}`,
             className: cn("border-b border-current/20", accordionItemClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -42129,7 +42192,7 @@ function FaqSplitHero({
               )
             ]
           },
-          item.id
+          item.id || idx
         ))
       }
     );
@@ -69428,10 +69491,10 @@ var NavbarTabbedSections = ({
             className: "border-b-0",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
-              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full pl-4", children: item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full pl-4", children: item.tabs.map((tab, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
                 AccordionItem,
                 {
-                  value: tab.id,
+                  value: tab.id || `tab-${idx}`,
                   className: "border-b-0",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-12 items-center p-0 px-4! text-sm leading-[3] font-medium text-muted-foreground hover:bg-muted hover:no-underline", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -69453,7 +69516,7 @@ var NavbarTabbedSections = ({
                     )) }) })
                   ]
                 },
-                tab.id
+                tab.id || idx
               )) }) })
             ]
           },