@opensite/ui 2.5.3 → 2.5.6

package/dist/registry.cjs

@@ -4397,7 +4397,7 @@ function FooterLinksGrid({
   );
 }
 var DEFAULT_STYLE_RULES = {
-  formContainer: "flex items-stretch w-full",
+  formContainer: "flex justify-center md:justify-end w-full",
   fieldsContainer: "",
   fieldClassName: "",
   formClassName: ""
@@ -4433,7 +4433,7 @@ function FooterSocialNewsletter({
   copyrightClassName,
   background,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-16 md:py-32",
   pattern,
   patternOpacity,
   optixFlowConfig
@@ -4508,12 +4508,9 @@ function FooterSocialNewsletter({
                 SocialLinkIcon,
                 {
                   size: "icon-lg",
-                  variant: "ghost",
+                  variant: "outline",
                   ...social,
-                  className: cn(
-                    "opacity-80 transition-colors hover:opacity-100",
-                    socialLinkClassName
-                  )
+                  className: cn(socialLinkClassName)
                 }
               ) }, idx))
             }
@@ -4543,7 +4540,7 @@ function FooterSocialNewsletter({
           "div",
           {
             className: cn(
-              "gap-14 md:gap-4 mt-16 flex flex-col-reverse border-t-0 md:border-t pt-4 md:pt-10 lg:flex-row lg:items-start lg:justify-between",
+              "gap-14 md:gap-4 mt-8 md:mt-16 flex flex-col-reverse border-t-0 md:border-t pt-4 md:pt-10 md:flex-row md:items-start md:justify-between w-full",
               bottomClassName
             ),
             children: [
@@ -4551,7 +4548,9 @@ function FooterSocialNewsletter({
                 "div",
                 {
                   className: cn(
-                    "flex flex-col gap-2 text-sm font-medium opacity-80 md:flex-row md:items-center md:gap-4",
+                    "flex shrink-0 w-full md:w-fit flex-col gap-2 text-sm",
+                    "font-medium opacity-70 md:flex-row md:items-center md:gap-4",
+                    "text-center md:text-left",
                     copyrightClassName
                   ),
                   children: [
@@ -7610,7 +7609,7 @@ function AboutDeveloperStory({
           as: "h1",
           className: cn(
             "text-4xl font-bold tracking-tight md:text-6xl text-balance",
-            title
+            titleClassName
           ),
           children: title
         });
@@ -8667,6 +8666,37 @@ function AboutStatsSidebar({
       }
     );
   }, [featuresSlot, features, featuresClassName]);
+  const contentItems = React30.useMemo(() => {
+    const items = [];
+    if (title) {
+      if (typeof title === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "text-3xl font-bold tracking-tight md:text-4xl",
+            titleClassName
+          ),
+          children: title
+        });
+      } else {
+        items.push(title);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("mt-4 text-lg", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [title, titleClassName, description, descriptionClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -8677,23 +8707,11 @@ function AboutStatsSidebar({
       className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn("lg:sticky lg:top-24 lg:self-start", sidebarClassName),
-            children: [
-              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-3xl font-bold tracking-tight md:text-4xl",
-                    titleClassName
-                  ),
-                  children: title
-                }
-              ) : title),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg", descriptionClassName), children: description }) : description)
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { items: contentItems, className: "space-y-3" })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:col-span-2", children: [
@@ -13889,6 +13907,66 @@ function ContactCard({
     }
   );
 }
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 var DEFAULT_STYLE_RULES7 = {
   formContainer: "",
   fieldsContainer: "",
@@ -13914,7 +13992,7 @@ var DEFAULT_FORM_FIELDS7 = [
     ]
   },
   {
-    name: "firstName",
+    name: "first_name",
     type: "text",
     label: "First Name",
     placeholder: "John",
@@ -13922,7 +14000,7 @@ var DEFAULT_FORM_FIELDS7 = [
     columnSpan: 6
   },
   {
-    name: "lastName",
+    name: "last_name",
     type: "text",
     label: "Last Name",
     placeholder: "Doe",
@@ -14005,11 +14083,101 @@ function ContactCareers({
   cardClassName,
   cardContentClassName,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "xl",
   pattern,
   patternOpacity,
-  formEngineSetup
+  formEngineSetup,
+  jobListings,
+  sidebarComponent,
+  sidebarTitle = "Open Positions",
+  sidebarDescription,
+  sidebarClassName,
+  sidebarStickyClassName,
+  accordionClassName,
+  accordionItemClassName,
+  accordionTriggerClassName,
+  accordionContentClassName,
+  formCardTitle,
+  formCardDescription
 }) {
+  const jobListingsContent = React30.useMemo(() => {
+    if (sidebarComponent) return sidebarComponent;
+    if (!jobListings || jobListings.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Accordion,
+      {
+        type: "single",
+        collapsible: true,
+        className: cn("space-y-3", accordionClassName),
+        children: jobListings.map((job) => /* @__PURE__ */ jsxRuntime.jsxs(
+          AccordionItem,
+          {
+            value: job.id,
+            className: cn(
+              "rounded-xl border border-border/60 px-5 shadow-sm transition-shadow hover:shadow-md data-[state=open]:shadow-md",
+              accordionItemClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AccordionTrigger,
+                {
+                  className: cn(
+                    "py-4 font-medium transition-opacity hover:no-underline hover:opacity-70 lg:text-lg [&[data-state=open]>svg]:rotate-180",
+                    accordionTriggerClassName
+                  ),
+                  children: job.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: cn("pb-4", accordionContentClassName), children: job.description })
+            ]
+          },
+          job.id
+        ))
+      }
+    );
+  }, [
+    sidebarComponent,
+    jobListings,
+    accordionClassName,
+    accordionItemClassName,
+    accordionTriggerClassName,
+    accordionContentClassName
+  ]);
+  const contentItems = React30.useMemo(() => {
+    const items = [];
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h1",
+          className: cn(
+            "text-4xl font-bold tracking-tight md:text-6xl text-balance",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "max-w-2xl text-lg md:text-xl text-balance",
+            descriptionClassName
+          ),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [heading, headingClassName, description, descriptionClassName]);
+  const hasSidebar = sidebarComponent || jobListings && jobListings.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -14017,39 +14185,42 @@ function ContactCareers({
       spacing,
       pattern,
       patternOpacity,
-      className,
+      className: cn(pattern && "overflow-visible", className),
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "h2",
-            {
-              className: cn(
-                "mb-3 text-3xl font-bold tracking-tight text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-10", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { className: "space-y-3", items: contentItems }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8", hasSidebar && "lg:grid-cols-5"), children: [
+          hasSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
               className: cn(
-                "leading-relaxed text-balance",
-                descriptionClassName
+                "order-first lg:order-last lg:col-span-2",
+                sidebarClassName
               ),
-              children: description
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("lg:sticky lg:top-8", sidebarStickyClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl p-6", children: [
+                (sidebarTitle || sidebarDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+                  sidebarTitle && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold", children: sidebarTitle }),
+                  sidebarDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm ", children: sidebarDescription })
+                ] }),
+                jobListingsContent
+              ] }) })
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
-          integration.FormEngine,
-          {
-            formEngineSetup,
-            defaultFields: DEFAULT_FORM_FIELDS7,
-            defaultStyleRules: DEFAULT_STYLE_RULES7
-          }
-        ) : null }) })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(hasSidebar && "lg:col-span-3"), children: /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cardClassName, children: [
+            (formCardTitle || formCardDescription) && /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { children: [
+              formCardTitle && /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { children: formCardTitle }),
+              formCardDescription && /* @__PURE__ */ jsxRuntime.jsx(CardDescription, { children: formCardDescription })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
+              integration.FormEngine,
+              {
+                formEngineSetup,
+                defaultFields: DEFAULT_FORM_FIELDS7,
+                defaultStyleRules: DEFAULT_STYLE_RULES7
+              }
+            ) : null })
+          ] }) })
+        ] })
       ] })
     }
   );
@@ -14338,7 +14509,7 @@ var DEFAULT_FORM_FIELDS9 = [
     options: BUDGETS
   },
   {
-    name: "firstName",
+    name: "first_name",
     type: "text",
     label: "First Name",
     placeholder: "John",
@@ -14346,7 +14517,7 @@ var DEFAULT_FORM_FIELDS9 = [
     columnSpan: 6
   },
   {
-    name: "lastName",
+    name: "last_name",
     type: "text",
     label: "Last Name",
     placeholder: "Doe",
@@ -14471,7 +14642,7 @@ var DEFAULT_STYLE_RULES10 = {
 };
 var DEFAULT_FORM_FIELDS10 = [
   {
-    name: "firstName",
+    name: "first_name",
     type: "text",
     label: "First Name",
     placeholder: "First name",
@@ -14479,7 +14650,7 @@ var DEFAULT_FORM_FIELDS10 = [
     columnSpan: 6
   },
   {
-    name: "lastName",
+    name: "last_name",
     type: "text",
     label: "Last Name",
     placeholder: "Last name",
@@ -15205,66 +15376,6 @@ function ContactEvent({
     }
   );
 }
-function Accordion({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
-}
-function AccordionItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Item,
-    {
-      "data-slot": "accordion-item",
-      className: cn("border-b ", className),
-      ...props
-    }
-  );
-}
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    AccordionPrimitive__namespace.Trigger,
-    {
-      "data-slot": "accordion-trigger",
-      className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: "lucide/chevron-down",
-            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
-          }
-        )
-      ]
-    }
-  ) });
-}
-function AccordionContent({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AccordionPrimitive__namespace.Content,
-    {
-      "data-slot": "accordion-content",
-      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
-    }
-  );
-}
 var DEFAULT_STYLE_RULES14 = {
   formContainer: "",
   fieldsContainer: "",
@@ -47820,7 +47931,7 @@ var DEFAULT_STYLE_RULES48 = {
 };
 var DEFAULT_FORM_FIELDS48 = [
   {
-    name: "firstName",
+    name: "first_name",
     type: "text",
     label: "First name",
     placeholder: "John",
@@ -47828,7 +47939,7 @@ var DEFAULT_FORM_FIELDS48 = [
     columnSpan: 12
   },
   {
-    name: "lastName",
+    name: "last_name",
     type: "text",
     label: "Last name",
     placeholder: "Doe",
@@ -76312,6 +76423,7 @@ function ProcessExpandableTimeline({
           className: cn(
             "group relative flex w-full items-start gap-6 border-b p-6 text-left transition-colors",
             `hover:bg-card hover:text-card-foreground`,
+            expandedIndex === index ? "bg-card text-card-foreground" : "",
             stepItemClassName
           ),
           children: [
@@ -76326,15 +76438,13 @@ function ProcessExpandableTimeline({
               {
                 className: cn(
                   "shrink-0 flex size-12 items-center justify-center rounded-full border-2 transition-colors",
-                  expandedIndex === index ? cn("bg-primary text-primary-foreground") : cn(
-                    `group-hover:bg-primary group-hover:text-primary-foreground`
-                  ),
+                  expandedIndex === index ? "bg-primary text-primary-foreground" : "group-hover:bg-primary group-hover:text-primary-foreground",
                   stepBadgeClassName
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: String(index + 1).padStart(2, "0") })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-8 md:pr-12", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 pr-8 md:pr-12 space-y-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 step.title && (typeof step.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
@@ -76353,7 +76463,7 @@ function ProcessExpandableTimeline({
                   }
                 )
               ] }),
-              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: step.description }) : step.description)
+              step.description && (typeof step.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-normal", children: step.description }) : step.description)
             ] })
           ]
         }
@@ -76371,7 +76481,7 @@ function ProcessExpandableTimeline({
             {
               className: cn(
                 "border-b p-6",
-                "bg-card text-bg-foreground",
+                "bg-card text-card-foreground",
                 expandedContentClassName
               ),
               children: typeof step.expandedContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg", children: step.expandedContent }) : step.expandedContent