@opensite/ui 1.7.1 → 1.7.3

package/dist/registry.cjs

@@ -10120,7 +10120,6 @@ function ContactDark({
   socialLinks,
   socialLinksSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -10131,10 +10130,11 @@ function ContactDark({
   infoPanelClassName,
   contactOptionsClassName,
   socialLinksClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -10191,7 +10191,14 @@ function ContactDark({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -10257,103 +10264,140 @@ function ContactDark({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      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", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: cn("grid gap-0 overflow-hidden lg:grid-cols-2", cardClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-8", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-            forms.Form,
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
             {
-              form,
-              action: formConfig?.endpoint,
-              method: formMethod,
-              className: cn("space-y-6", formClassName),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed ", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Card,
+          {
+            className: cn(
+              "grid gap-0 overflow-hidden lg:grid-cols-2",
+              cardClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-6 lg:p-8", formPanelClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
+                {
+                  form,
+                  action: formConfig?.endpoint,
+                  method: formMethod,
+                  className: cn("space-y-6", formClassName),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          inputs.TextInput,
+                          {
+                            ...field,
+                            id: "first-name",
+                            placeholder: "John",
+                            error: meta.touched && !!meta.error,
+                            "aria-label": "First Name"
+                          }
+                        )
+                      ] }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          inputs.TextInput,
+                          {
+                            ...field,
+                            id: "last-name",
+                            placeholder: "Doe",
+                            error: meta.touched && !!meta.error,
+                            "aria-label": "Last Name"
+                          }
+                        )
+                      ] }) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email Address" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        inputs.TextInput,
+                        {
+                          ...field,
+                          id: "email",
+                          type: "email",
+                          placeholder: "john@example.com",
+                          error: meta.touched && !!meta.error,
+                          "aria-label": "Email Address"
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        inputs.TextArea,
+                        {
+                          ...field,
+                          id: "message",
+                          placeholder: "Tell us how we can help...",
+                          rows: 4,
+                          error: meta.touched && !!meta.error,
+                          "aria-label": "Message"
+                        }
+                      )
+                    ] }) }),
+                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
                       {
-                        ...field,
-                        id: "first-name",
-                        placeholder: "John",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "First Name"
+                        componentType: "button",
+                        type: "submit",
+                        className: cn("w-full", submitClassName),
+                        asButton: true,
+                        disabled: form.isSubmitting,
+                        children: [
+                          buttonIcon,
+                          buttonText
+                        ]
                       }
                     )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8",
+                    infoPanelClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: contactHeading })),
+                      contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: contactDescription })),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
+                    ] }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+                      "div",
                       {
-                        ...field,
-                        id: "last-name",
-                        placeholder: "Doe",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Last Name"
+                        className: cn(
+                          "mt-8 flex items-center gap-4",
+                          socialLinksClassName
+                        ),
+                        children: socialLinksContent
                       }
                     )
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email Address" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      id: "email",
-                      type: "email",
-                      placeholder: "john@example.com",
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Email Address"
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    TextArea,
-                    {
-                      ...field,
-                      id: "message",
-                      placeholder: "Tell us how we can help...",
-                      rows: 4,
-                      error: meta.touched && !!meta.error,
-                      "aria-label": "Message"
-                    }
-                  )
-                ] }) }),
-                actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
-                  {
-                    componentType: "button",
-                    type: "submit",
-                    className: cn("w-full", submitClassName),
-                    asButton: true,
-                    disabled: form.isSubmitting,
-                    children: [
-                      buttonIcon,
-                      buttonText
-                    ]
-                  }
-                )
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between bg-primary p-6 text-primary-foreground lg:p-8", infoPanelClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              contactHeading && (typeof contactHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-3 text-xl font-semibold", children: contactHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: contactHeading })),
-              contactDescription && (typeof contactDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-8 text-sm text-primary-foreground/80", children: contactDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8", children: contactDescription })),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", contactOptionsClassName), children: contactOptionsContent })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex items-center gap-4", socialLinksClassName), children: socialLinksContent })
-          ] })
-        ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -11211,7 +11255,6 @@ function ContactFaq({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -11220,10 +11263,11 @@ function ContactFaq({
   formHeadingClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -11280,7 +11324,14 @@ function ContactFaq({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -11306,14 +11357,42 @@ function ContactFaq({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      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", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          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",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
-          formHeading && (typeof formHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-6 text-xl font-semibold", formHeadingClassName), children: formHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: formHeadingClassName, children: formHeading })),
+          formHeading && (typeof formHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h3",
+            {
+              className: cn(
+                "mb-6 text-xl font-semibold",
+                formHeadingClassName
+              ),
+              children: formHeading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: formHeadingClassName, children: formHeading })),
           /* @__PURE__ */ jsxRuntime.jsxs(
             forms.Form,
             {
@@ -11326,7 +11405,7 @@ function ContactFaq({
                   /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "name", children: "Name" }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+                      inputs.TextInput,
                       {
                         ...field,
                         id: "name",
@@ -11339,7 +11418,7 @@ function ContactFaq({
                   /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
+                      inputs.TextInput,
                       {
                         ...field,
                         id: "email",
@@ -11354,7 +11433,7 @@ function ContactFaq({
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "subject", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "subject", children: "Subject" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+                    inputs.TextInput,
                     {
                       ...field,
                       id: "subject",
@@ -11367,7 +11446,7 @@ function ContactFaq({
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextArea,
+                    inputs.TextArea,
                     {
                       ...field,
                       id: "message",
@@ -14004,7 +14083,6 @@ function ContactPhotography({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   headerClassName,
   headingClassName,
   descriptionClassName,
@@ -14012,10 +14090,11 @@ function ContactPhotography({
   cardContentClassName,
   formClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "py-8 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
@@ -14074,12 +14153,28 @@ function ContactPhotography({
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-        return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon,
+        const {
           label,
-          iconAfter
-        ] }) }, index);
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Pressable,
+          {
+            asButton: true,
+            className: actionClassName,
+            ...pressableProps,
+            children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              icon,
+              label,
+              iconAfter
+            ] })
+          },
+          index
+        );
       });
     }
     return null;
@@ -14091,11 +14186,30 @@ function ContactPhotography({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-4xl px-4", containerClassName), children: [
+      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", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          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",
+            {
+              className: cn(
+                "leading-relaxed text-balance",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
@@ -14109,7 +14223,7 @@ function ContactPhotography({
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "first_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+                    inputs.TextInput,
                     {
                       ...field,
                       id: "first-name",
@@ -14122,7 +14236,7 @@ function ContactPhotography({
                 /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "last_name", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    TextInput,
+                    inputs.TextInput,
                     {
                       ...field,
                       id: "last-name",
@@ -14136,7 +14250,7 @@ function ContactPhotography({
               /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
+                  inputs.TextInput,
                   {
                     ...field,
                     id: "email",
@@ -14150,7 +14264,7 @@ function ContactPhotography({
               /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  TextInput,
+                  inputs.TextInput,
                   {
                     ...field,
                     id: "phone",
@@ -14164,7 +14278,7 @@ function ContactPhotography({
               /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "message", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "message", children: "Message" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  TextArea,
+                  inputs.TextArea,
                   {
                     ...field,
                     id: "message",
@@ -53217,10 +53331,10 @@ function HeroPremiumSplitAvatars({
   image,
   imageSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   headingClassName,
@@ -55080,7 +55194,7 @@ function HeroDesignShowcaseLogos({
   showcaseImage,
   showcaseSlot,
   background,
-  spacing = "py-32 md:py-32",
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
@@ -55150,7 +55264,7 @@ function HeroDesignShowcaseLogos({
                 src: logoSrc,
                 alt: logo.alt,
                 className: cn(
-                  "block w-auto opacity-50 md:h-5 object-contain",
+                  "block w-auto opacity-50 h-5 object-contain",
                   logo.className
                 ),
                 optixFlowConfig
@@ -55482,7 +55596,7 @@ function HeroHiringAnimatedText({
           animatedTexts && animatedTexts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-9 lg:h-12 xl:h-22", children: animatedTexts.map((text, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "absolute top-0 left-0 text-white transition-opacity duration-500 ease-in-out",
+              className: "absolute top-0 left-0 text-white transition-opacity duration-1000 ease-in-out",
               style: {
                 opacity: index === activeIndex ? 1 : 0
               },
@@ -55493,43 +55607,40 @@ function HeroHiringAnimatedText({
         ]
       }
     );
-  }, [headingSlot, headingPrefix, animatedTexts, headingClassName, activeIndex]);
+  }, [
+    headingSlot,
+    headingPrefix,
+    animatedTexts,
+    headingClassName,
+    activeIndex
+  ]);
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "flex flex-col md:flex-row items-center gap-4",
-          actionsClassName
-        ),
-        children: actions.map((action, index) => {
-          const {
-            label,
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col md:flex-row gap-4", actionsClassName), children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: actionClassName,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
-            iconAfter,
-            children,
-            className: actionClassName,
-            ...pressableProps
-          } = action;
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              asButton: true,
-              className: actionClassName,
-              ...pressableProps,
-              children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                icon,
-                label,
-                iconAfter
-              ] })
-            },
-            index
-          );
-        })
-      }
-    );
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
   }, [actionsSlot, actions, actionsClassName]);
   const renderScrollAction = React52.useMemo(() => {
     if (scrollActionSlot) return scrollActionSlot;
@@ -55748,8 +55859,8 @@ function HeroCenteredGradientCta({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative gap-6 md:gap-16 z-10 flex flex-col items-center text-center", children: [
-        badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative gap-6 z-10 flex flex-col items-center text-center", children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: "px-3", children: [
           badgeIcon,
           typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) : badge
         ] }),
@@ -55757,7 +55868,7 @@ function HeroCenteredGradientCta({
           "h1",
           {
             className: cn(
-              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
               headingClassName
             ),
             children: heading
@@ -55766,7 +55877,7 @@ function HeroCenteredGradientCta({
           "h1",
           {
             className: cn(
-              "mt-8 max-w-4xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              "max-w-full md:max-w-md text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
               headingClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-linear-to-r from-primary to-purple-600 bg-clip-text text-transparent", children: headingHighlight })
@@ -55776,7 +55887,7 @@ function HeroCenteredGradientCta({
           "p",
           {
             className: cn(
-              "mt-6 max-w-2xl text-lg md:text-xl text-balance",
+              "max-w-full md:max-w-md text-md md:text-xl text-balance",
               descriptionClassName
             ),
             children: description
@@ -55786,7 +55897,7 @@ function HeroCenteredGradientCta({
           "div",
           {
             className: cn(
-              "mt-8 md:mt-16 flex flex-col gap-4 sm:flex-row",
+              "mt-0 md:mt-6 flex flex-col gap-4 sm:flex-row",
               actionsClassName
             ),
             children: renderActions
@@ -55796,7 +55907,7 @@ function HeroCenteredGradientCta({
           "div",
           {
             className: cn(
-              "mt-16 flex items-center gap-8 text-sm text-muted-foreground",
+              "mt-4 md:mt-6 flex flex-col md:flex-row items-center gap-4 md:gap-8 text-sm",
               featuresClassName
             ),
             children: renderFeatures
@@ -56016,29 +56127,21 @@ function HeroTestimonialImageGrid({
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial || !testimonial.avatars) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-        Avatar,
-        {
-          className: "size-10 border-2 border-border",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: "" }),
-            /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
-          ]
-        },
-        index
-      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: testimonial.avatars.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "size-10 border-2 border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatar.image, alt: testimonial.author }),
+        /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: avatar.fallback })
+      ] }, index)) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm text-foreground/60 italic", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mb-1 text-sm  italic", children: [
           '"',
           testimonial.quote,
           '"'
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium text-foreground/60", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium ", children: [
           testimonial.author,
           ", ",
           testimonial.role,
-          " @",
-          testimonial.company
+          testimonial.company?.length ? ` | ${testimonial.company}` : ""
         ] })
       ] })
     ] });
@@ -56047,15 +56150,22 @@ function HeroTestimonialImageGrid({
     if (imagesSlot) return imagesSlot;
     if (!gridImages || gridImages.length < 4) return null;
     const images = gridImages;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-[3.5%]", children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-[5.2%] border border-border bg-card", children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full md:max-w-200", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1 / 1, className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-2 grid-rows-2 gap-4", children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt || "",
-        className: "size-full object-cover object-center",
-        optixFlowConfig
-      }
-    ) }, index)) }) }) }) });
+        className: "overflow-hidden rounded-lg shadow-xl",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src: image.src,
+            alt: image.alt || "",
+            className: "size-full object-cover object-center",
+            optixFlowConfig
+          }
+        )
+      },
+      index
+    )) }) }) }) });
   }, [imagesSlot, gridImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -56064,13 +56174,49 @@ function HeroTestimonialImageGrid({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center py-12 md:py-20", className),
+      className,
       containerClassName,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:gap-8", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl", headingClassName), children: heading })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg leading-relaxed text-muted-foreground xl:text-2xl", descriptionClassName), children: description }))
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "leading-tighter max-w-[80%] text-4xl font-semibold tracking-tight lg:text-5xl xl:text-7xl",
+                  headingClassName
+                ),
+                children: heading
+              }
+            )),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-lg leading-relaxed text-balance xl:text-2xl",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-6 lg:my-10", children: renderButton }),
           renderTestimonial
@@ -56230,11 +56376,11 @@ function HeroArchitectureFullscreen({
   actionSlot,
   backgroundImage,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
   className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "mx-0 min-h-screen h-full w-screen max-w-full relative z-10 px-0 sm:px-0 md:px-0 lg:px-0 flex items-end",
   taglineClassName,
   headingClassName,
   descriptionClassName,
@@ -56279,8 +56425,8 @@ function HeroArchitectureFullscreen({
             optixFlowConfig
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-end gap-6 md:gap-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-245.5 flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 h-full w-full max-w-340 p-8 md:p-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-end gap-6 md:gap-12", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
             tagline && (typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
@@ -56302,11 +56448,11 @@ function HeroArchitectureFullscreen({
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full flex-col justify-between gap-5 sm:flex-row sm:items-center", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-between gap-5 sm:flex-row sm:items-center", children: description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               className: cn(
-                "max-w-81 text-base text-balance text-white text-shadow-xl",
+                "text-base text-balance text-white text-shadow-xl",
                 descriptionClassName
               ),
               children: description
@@ -56874,7 +57020,7 @@ function HeroTherapyTestimonialGrid({
   const renderActions = React52.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start mt-6 md:mt-8 gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col mt-6 md:mt-8 gap-4 sm:flex-row items-center", children: actions.map((action, index) => {
       const {
         label,
         icon,
@@ -56902,7 +57048,7 @@ function HeroTherapyTestimonialGrid({
   const renderTestimonial = React52.useMemo(() => {
     if (testimonialSlot) return testimonialSlot;
     if (!testimonial) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-6 md:p-8 md:flex-row md:items-start md:gap-7", children: [
       testimonial.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsxRuntime.jsx(
         img.Img,
         {
@@ -56990,7 +57136,7 @@ function HeroTherapyTestimonialGrid({
                 "h1",
                 {
                   className: cn(
-                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl",
+                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -56999,7 +57145,7 @@ function HeroTherapyTestimonialGrid({
                 "h1",
                 {
                   className: cn(
-                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl",
+                    "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -57009,7 +57155,7 @@ function HeroTherapyTestimonialGrid({
                 "p",
                 {
                   className: cn(
-                    "text-center text-lg text-muted-foreground md:text-xl",
+                    "text-center text-lg md:text-xl",
                     descriptionClassName
                   ),
                   children: description
@@ -77371,8 +77517,9 @@ function ProcessRoadmapTimeline({
       "div",
       {
         className: cn(
-          "relative flex items-start gap-8",
-          index % 2 === 0 ? "flex-row" : "flex-row-reverse",
+          "relative flex items-start gap-4 md:gap-8",
+          "flex-col md:flex-row",
+          index % 2 !== 0 && "md:flex-row-reverse",
           milestone.className
         ),
         children: [
@@ -77380,8 +77527,9 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "flex-1",
-                index % 2 === 0 ? "text-right pr-8" : "text-left pl-8"
+                "w-full md:flex-1",
+                "text-left md:pr-0",
+                index % 2 === 0 ? "md:text-right md:pr-8" : "md:text-left md:pl-8"
               ),
               children: /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
@@ -77397,7 +77545,8 @@ function ProcessRoadmapTimeline({
                       {
                         className: cn(
                           "mb-3 flex items-center gap-3",
-                          index % 2 === 0 ? "justify-end" : "justify-start"
+                          "justify-start",
+                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                         ),
                         children: [
                           milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium"), children: milestone.date })),
@@ -77418,7 +77567,8 @@ function ProcessRoadmapTimeline({
                       {
                         className: cn(
                           "flex flex-wrap gap-2",
-                          index % 2 === 0 ? "justify-end" : "justify-start"
+                          "justify-start",
+                          index % 2 === 0 ? "md:justify-end" : "md:justify-start"
                         ),
                         children: milestone.features.map((feature, fIndex) => /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
@@ -77437,7 +77587,7 @@ function ProcessRoadmapTimeline({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block md:flex-1" })
         ]
       },
       index
@@ -77487,7 +77637,7 @@ function ProcessRoadmapTimeline({
             "div",
             {
               className: cn(
-                "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
+                "absolute left-4 md:left-1/2 top-0 bottom-0 w-px md:-translate-x-1/2 bg-border/50",
                 timelineLineClassName
               )
             }