@agent-native/core 0.98.4 → 0.98.6

package/corpus/templates/forms/app/pages/FormBuilderPage.tsx

@@ -21,6 +21,7 @@ import {
   IconPlus,
   IconChevronDown,
   IconCopy,
+  IconArrowLeft,
   IconArrowUp,
   IconArrowDown,
   IconArrowsSort,
@@ -333,7 +334,21 @@ export function FormBuilderPage() {
       <div className="flex flex-col h-full">
         {/* Top bar */}
         <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
-          <div className="flex items-center gap-3 min-w-0 flex-1">
+          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="size-10 shrink-0 active:scale-[0.96]"
+                  onClick={() => navigate("/forms")}
+                  aria-label={t("builder.backToForms")}
+                >
+                  <IconArrowLeft className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>{t("builder.backToForms")}</TooltipContent>
+            </Tooltip>
             <Skeleton className="h-5 w-48" />
             <Skeleton className="h-4 w-14 rounded-full" />
           </div>
@@ -538,7 +553,21 @@ export function FormBuilderPage() {
       {codeRequiredDialog}
       {/* Top bar */}
       <div className="flex items-center justify-between border-b border-border ps-12 pe-2 sm:px-4 md:ps-4 h-14 shrink-0 min-w-0">
-        <div className="flex items-center gap-2 sm:gap-3 relative min-w-0 flex-1 me-2">
+        <div className="flex items-center gap-1 sm:gap-2 relative min-w-0 flex-1 me-2">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-10 shrink-0 active:scale-[0.96]"
+                onClick={() => navigate("/forms")}
+                aria-label={t("builder.backToForms")}
+              >
+                <IconArrowLeft className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("builder.backToForms")}</TooltipContent>
+          </Tooltip>
           <span
             ref={titleMeasureRef}
             aria-hidden
@@ -574,7 +603,12 @@ export function FormBuilderPage() {
           {form.status === "published" && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8" asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
+                  asChild
+                >
                   <a
                     href={appPath(`/f/${form.slug}`)}
                     target="_blank"
@@ -596,7 +630,7 @@ export function FormBuilderPage() {
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="h-8 w-8"
+                  className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
                   onClick={copyShareLink}
                   disabled={form.status !== "published"}
                   aria-label={
@@ -605,11 +639,24 @@ export function FormBuilderPage() {
                       : t("builder.publishBeforeCopyPublicFormLink")
                   }
                 >
-                  {copied ? (
-                    <IconCheck className="h-4 w-4" />
-                  ) : (
-                    <IconCopy className="h-4 w-4" />
-                  )}
+                  <span className="relative inline-flex h-4 w-4 items-center justify-center">
+                    <IconCopy
+                      className={cn(
+                        "absolute h-4 w-4 transition-[opacity,scale] duration-200 ease-out",
+                        copied
+                          ? "scale-[0.25] opacity-0"
+                          : "scale-100 opacity-100",
+                      )}
+                    />
+                    <IconCheck
+                      className={cn(
+                        "absolute h-4 w-4 transition-[opacity,scale] duration-200 ease-out",
+                        copied
+                          ? "scale-100 opacity-100"
+                          : "scale-[0.25] opacity-0",
+                      )}
+                    />
+                  </span>
                 </Button>
               </span>
             </TooltipTrigger>
@@ -629,7 +676,7 @@ export function FormBuilderPage() {
                   resourceType="form"
                   resourceId={form.id}
                   resourceTitle={form.title}
-                  triggerClassName="h-9 border-input bg-transparent px-3 text-xs hover:bg-accent hover:text-accent-foreground"
+                  triggerClassName="h-10 border-input bg-transparent px-3 text-xs active:scale-[0.96] hover:bg-accent hover:text-accent-foreground"
                   shareUrl={publishedFormUrl}
                   shareUrlLabel={t("builder.publicResponseLink")}
                   shareUrlDescription={t(
@@ -662,7 +709,7 @@ export function FormBuilderPage() {
           {canEdit && form.status !== "published" && (
             <Button
               size="sm"
-              className="text-xs"
+              className="relative text-xs before:absolute before:-inset-y-0.5 before:content-[''] active:scale-[0.96] motion-reduce:active:scale-100"
               onClick={handleTogglePublish}
               disabled={pendingStatus !== null}
             >
@@ -684,7 +731,7 @@ export function FormBuilderPage() {
                     <Button
                       variant="outline"
                       size="icon"
-                      className="h-9 w-9 bg-transparent"
+                      className="h-10 w-10 bg-transparent active:scale-[0.96] motion-reduce:active:scale-100"
                       aria-label={t("forms.formActions")}
                     >
                       <IconDots className="h-4 w-4" />
@@ -728,13 +775,19 @@ export function FormBuilderPage() {
           value={activeBuilderTab}
           onValueChange={canEdit ? setBuilderTab : undefined}
         >
-          <TabsList className="w-max sm:w-auto">
-            <TabsTrigger value="edit" className="text-xs">
+          <TabsList className="w-max rounded-lg shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] sm:w-auto">
+            <TabsTrigger
+              value="edit"
+              className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+            >
               {canEdit ? t("builder.editTab") : t("builder.previewTab")}
             </TabsTrigger>
             {canEdit && (
               <>
-                <TabsTrigger value="responses" className="text-xs">
+                <TabsTrigger
+                  value="responses"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("builder.resultsTab")}
                   {(form.responseCount ?? 0) > 0 && (
                     <Badge
@@ -745,10 +798,16 @@ export function FormBuilderPage() {
                     </Badge>
                   )}
                 </TabsTrigger>
-                <TabsTrigger value="settings" className="text-xs">
+                <TabsTrigger
+                  value="settings"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("header.settings")}
                 </TabsTrigger>
-                <TabsTrigger value="integrations" className="text-xs">
+                <TabsTrigger
+                  value="integrations"
+                  className="rounded-md text-xs transition-[color,background-color,box-shadow,transform] active:scale-[0.96]"
+                >
                   {t("builder.integrationsTab")}
                 </TabsTrigger>
               </>
@@ -972,18 +1031,18 @@ function BuilderContent({
                         )
                       }
                       className={cn(
-                        "group relative rounded-lg border p-4 cursor-pointer",
+                        "group relative -mx-3 cursor-pointer rounded-lg border px-3 py-4 transition-[background-color,border-color,box-shadow,opacity] duration-150 ease-out sm:-mx-4 sm:px-4",
                         selectedFieldId === field.id
-                          ? "border-primary ring-1 ring-primary/20 bg-card"
-                          : "border-border bg-card hover:border-primary/30",
+                          ? "border-primary bg-card shadow-[0_1px_3px_-2px_hsl(var(--foreground)/0.16)] ring-1 ring-primary/20"
+                          : "border-transparent bg-transparent shadow-none hover:border-border/80 hover:bg-card/70 hover:shadow-[0_1px_3px_-2px_hsl(var(--foreground)/0.12)]",
                         dragIdx === idx && "opacity-50",
                       )}
                     >
                       <div
-                        className="absolute -start-3 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 cursor-grab hidden sm:block"
+                        className="absolute -start-5 top-1/2 hidden size-10 -translate-y-1/2 items-center justify-center cursor-grab text-muted-foreground opacity-0 transition-[color,opacity,transform] duration-150 ease-out group-hover:opacity-100 group-focus-within:opacity-100 hover:text-foreground sm:flex"
                         aria-label={t("builder.dragToReorder")}
                       >
-                        <IconGripVertical className="h-4 w-4 text-muted-foreground" />
+                        <IconGripVertical className="h-4 w-4 translate-x-px" />
                       </div>
                       <FieldRenderer field={field} preview />
                     </div>
@@ -992,7 +1051,7 @@ function BuilderContent({
                     side="right"
                     align="start"
                     sideOffset={12}
-                    className="w-[calc(100vw-2rem)] sm:w-72 max-h-[70vh] sm:max-h-[520px] overflow-auto p-0"
+                    className="w-[calc(100vw-2rem)] max-h-[70vh] overflow-auto rounded-lg p-0 shadow-md sm:w-72 sm:max-h-[520px]"
                     onOpenAutoFocus={(e) => e.preventDefault()}
                     onInteractOutside={(e) => {
                       // Don't close when interacting with dropdowns portaled to body
@@ -1016,7 +1075,7 @@ function BuilderContent({
               ) : (
                 <div
                   key={field.id}
-                  className="relative rounded-lg border border-border bg-card p-4"
+                  className="relative -mx-3 rounded-lg border border-transparent bg-transparent px-3 py-4 transition-[background-color,border-color] duration-150 hover:border-border/70 hover:bg-card/70 sm:-mx-4 sm:px-4"
                 >
                   <FieldRenderer field={field} preview />
                 </div>
@@ -1030,10 +1089,13 @@ function BuilderContent({
             <div className="mt-4 flex items-center gap-2">
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button variant="outline" className="gap-2">
-                    <IconPlus className="h-4 w-4" />
+                  <Button
+                    variant="outline"
+                    className="gap-2 active:scale-[0.96]"
+                  >
+                    <IconPlus className="h-4 w-4 shrink-0" />
                     {t("builder.addField")}
-                    <IconChevronDown className="h-3 w-3" />
+                    <IconChevronDown className="h-3.5 w-3.5 translate-y-px" />
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="start" className="w-48">
@@ -1056,6 +1118,7 @@ function BuilderContent({
                   <Button
                     variant="outline"
                     size="icon"
+                    className="active:scale-[0.96]"
                     aria-label={t("builder.editFormWithAi")}
                   >
                     <IconMessage className="h-4 w-4" />
@@ -1065,7 +1128,7 @@ function BuilderContent({
                   side="top"
                   align="end"
                   sideOffset={8}
-                  className="w-[calc(100vw-2rem)] sm:w-80 p-0 rounded-xl"
+                  className="w-[calc(100vw-2rem)] rounded-lg p-0 shadow-md sm:w-80"
                   onOpenAutoFocus={(e) => {
                     e.preventDefault();
                     agentPromptRef.current?.focus();
@@ -1100,7 +1163,7 @@ function BuilderContent({
                     <Button
                       variant="secondary"
                       size="icon"
-                      className="h-7 w-7"
+                      className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
                       onClick={onSubmitAgent}
                       disabled={
                         !agentPrompt.trim() ||
@@ -1170,7 +1233,6 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
 
   const allResponses = data?.responses || [];
   const fields: FormField[] = data?.fields || form?.fields || [];
-  const total = data?.total ?? 0;
   const hasSubmitterEmail = allResponses.some((r: any) =>
     responseValueAsString(r.submitterEmail).trim(),
   );
@@ -1272,7 +1334,7 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
           variant="outline"
           size="sm"
           onClick={() => refetch()}
-          className="gap-2"
+          className="gap-2 active:scale-[0.96]"
         >
           <IconRefresh className="h-3.5 w-3.5" />
           {t("common.retry")}
@@ -1295,13 +1357,7 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
   return (
     <div className="flex flex-col flex-1 overflow-hidden">
       <div className="flex flex-wrap items-center justify-between gap-2 px-3 sm:px-4 py-2 border-b border-border">
-        <div className="flex items-center gap-2">
-          <Badge variant="secondary" className="text-xs">
-            {t("builder.results.responseCount", {
-              count: total,
-              formattedCount: formatNumber(total),
-            })}
-          </Badge>
+        <div className="ms-auto flex items-center gap-2">
           {search.trim() && filtered.length !== allResponses.length && (
             <span className="text-xs text-muted-foreground">
               {t("builder.results.matchCount", {
@@ -1310,8 +1366,6 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
               })}
             </span>
           )}
-        </div>
-        <div className="flex items-center gap-2">
           <div className="relative">
             <IconSearch className="absolute start-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
             <Input
@@ -1334,17 +1388,20 @@ function ResultsContent({ formId, form }: { formId: string; form: any }) {
         </div>
       </div>
       <div className="flex-1 min-w-0 overflow-auto overscroll-x-contain">
-        <div className="min-w-full">
+        <div className="w-full min-w-full">
           <table
-            className="min-w-full table-fixed text-sm"
-            style={{ minWidth: responseTableMinWidth }}
+            className="w-full min-w-full table-fixed text-sm"
+            style={{ width: "100%", minWidth: responseTableMinWidth }}
           >
             <colgroup>
               <col className="w-16" />
               <col className="w-40" />
               {hasSubmitterEmail ? <col className="w-56" /> : null}
-              {fields.map((f) => (
-                <col key={f.id} className="w-80" />
+              {fields.map((f, index) => (
+                <col
+                  key={f.id}
+                  className={index === fields.length - 1 ? "w-auto" : "w-80"}
+                />
               ))}
             </colgroup>
             <thead>
@@ -1460,18 +1517,33 @@ function ResultsSortableHeader({
     <button
       type="button"
       onClick={onClick}
-      className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+      className="relative inline-flex cursor-pointer items-center gap-1 transition-[color,transform] duration-150 ease-out hover:text-foreground active:scale-[0.96] motion-reduce:active:scale-100 before:absolute before:-inset-3 before:content-['']"
     >
       <span>{label}</span>
-      {active ? (
-        dir === "asc" ? (
-          <IconArrowUp className="h-3 w-3" />
-        ) : (
-          <IconArrowDown className="h-3 w-3" />
-        )
-      ) : (
-        <IconArrowsSort className="h-3 w-3 opacity-40" />
-      )}
+      <span className="relative inline-flex h-3 w-3 items-center justify-center">
+        <IconArrowUp
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active && dir === "asc"
+              ? "scale-100 opacity-100"
+              : "scale-[0.25] opacity-0",
+          )}
+        />
+        <IconArrowDown
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active && dir === "desc"
+              ? "scale-100 opacity-100"
+              : "scale-[0.25] opacity-0",
+          )}
+        />
+        <IconArrowsSort
+          className={cn(
+            "absolute h-3 w-3 transition-[opacity,scale] duration-200 ease-out",
+            active ? "scale-[0.25] opacity-0" : "scale-100 opacity-40",
+          )}
+        />
+      </span>
     </button>
   );
 }
@@ -1532,7 +1604,7 @@ function SettingsEditor({
         />
       </div>
 
-      <div className="flex items-start justify-between gap-4 rounded-lg border p-3">
+      <div className="flex items-start justify-between gap-4 rounded-lg border border-border/60 bg-card p-3">
         <div className="space-y-1">
           <Label htmlFor="anonymous-responses" className="text-xs">
             {t("builder.settings.anonymousResponses")}
@@ -1549,7 +1621,11 @@ function SettingsEditor({
         />
       </div>
 
-      <Button onClick={() => onSave(settings)} className="w-full" size="sm">
+      <Button
+        onClick={() => onSave(settings)}
+        className="w-full active:scale-[0.96]"
+        size="sm"
+      >
         {t("builder.settings.saveSettings")}
       </Button>
     </div>
@@ -1620,12 +1696,12 @@ function IntegrationBrandMark({
     return (
       <div
         className={cn(
-          "flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-background shadow-sm",
+          "flex h-10 w-10 items-center justify-center rounded-lg border border-border/70 bg-background",
           className,
         )}
       >
         <img
-          src={meta.logoSrc}
+          src={appPath(meta.logoSrc)}
           alt={t("builder.integrations.logoAlt", { label })}
           className="h-5 w-5 object-contain"
         />
@@ -1636,7 +1712,7 @@ function IntegrationBrandMark({
   return (
     <div
       className={cn(
-        "flex h-10 w-10 items-center justify-center rounded-xl border border-border/70 bg-foreground text-background shadow-sm",
+        "flex h-10 w-10 items-center justify-center rounded-lg border border-border/70 bg-foreground text-background",
         className,
       )}
     >
@@ -1713,7 +1789,7 @@ function IntegrationsEditor({
       </div>
 
       {!hasIntegrations && (
-        <div className="rounded-xl border border-dashed border-border bg-muted/20 p-5">
+        <div className="rounded-lg border border-border/60 bg-muted/20 p-5">
           <div className="space-y-4">
             <div className="space-y-2">
               <h3 className="text-sm font-medium">
@@ -1735,7 +1811,7 @@ function IntegrationsEditor({
                   key={type}
                   type="button"
                   onClick={() => addIntegration(type)}
-                  className="cursor-pointer rounded-lg border bg-background p-3 text-start hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring min-h-[44px]"
+                  className="min-h-[44px] cursor-pointer rounded-lg border border-border/60 bg-background p-3 text-start transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-primary/30 hover:bg-muted/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:scale-[0.96] motion-reduce:active:scale-100"
                 >
                   <div className="flex items-center gap-3">
                     <IntegrationBrandMark type={type} className="h-9 w-9" />
@@ -1767,7 +1843,7 @@ function IntegrationsEditor({
         return (
           <div
             key={integration.id}
-            className="rounded-xl border bg-card p-4 space-y-3"
+            className="space-y-3 rounded-lg border border-border/60 bg-card p-4"
           >
             <div className="flex items-start gap-3">
               <IntegrationBrandMark type={integration.type} />
@@ -1801,7 +1877,7 @@ function IntegrationsEditor({
               <Button
                 variant="ghost"
                 size="icon"
-                className="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive"
+                className="h-10 w-10 shrink-0 text-muted-foreground hover:text-destructive active:scale-[0.96] motion-reduce:active:scale-100"
                 onClick={() => removeIntegration(integration.id)}
               >
                 <IconTrash className="h-4 w-4" />
@@ -1849,7 +1925,7 @@ function IntegrationsEditor({
           <Button
             variant="outline"
             size="sm"
-            className="h-11 w-full rounded-xl"
+            className="h-11 w-full rounded-lg active:scale-[0.96]"
           >
             <IconPlus className="h-3.5 w-3.5 me-1.5" />
             {hasIntegrations
@@ -1869,7 +1945,7 @@ function IntegrationsEditor({
                 key={type}
                 onClick={() => addIntegration(type)}
                 disabled={selectedTypes.has(type)}
-                className="rounded-md px-3 py-3"
+                className="px-3 py-3"
               >
                 <div className="flex items-center gap-3">
                   <IntegrationBrandMark type={type} />
@@ -1900,7 +1976,7 @@ function IntegrationsEditor({
         <div className="space-y-2">
           <Button
             onClick={() => onSave(settings)}
-            className="h-10 w-full"
+            className="h-10 w-full active:scale-[0.96]"
             size="sm"
           >
             {saveLabel}

package/corpus/templates/forms/app/pages/FormFillPage.tsx

@@ -187,8 +187,8 @@ export function FormFillPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen bg-background py-10 px-4">
-        <div className="max-w-xl mx-auto space-y-6">
+      <div className="min-h-screen bg-muted/30 px-4 py-10">
+        <div className="mx-auto max-w-xl space-y-6 rounded-2xl border border-border/80 bg-background p-5 shadow-sm sm:p-8">
           <div className="space-y-3">
             <Skeleton className="h-8 w-2/3" />
             <Skeleton className="h-4 w-full" />
@@ -210,8 +210,19 @@ export function FormFillPage() {
 
   if (error || !form) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="text-center">
+      <div
+        className={cn(
+          "flex min-h-screen items-center justify-center p-4",
+          embedded ? "bg-background" : "bg-muted/30",
+        )}
+      >
+        <div
+          className={cn(
+            "text-center",
+            !embedded &&
+              "max-w-md rounded-2xl border border-border/80 bg-background p-8 shadow-sm sm:p-10",
+          )}
+        >
           <h1 className="text-2xl font-semibold mb-2">
             {t("publicForm.formNotFound")}
           </h1>
@@ -222,7 +233,7 @@ export function FormFillPage() {
             variant="outline"
             size="sm"
             onClick={() => window.location.reload()}
-            className="gap-2"
+            className="min-h-10 gap-2 transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none"
           >
             <IconRefresh className="h-3.5 w-3.5" />
             {t("publicForm.tryAgain")}
@@ -235,8 +246,19 @@ export function FormFillPage() {
 
   if (submitted) {
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center p-4">
-        <div className="text-center max-w-md">
+      <div
+        className={cn(
+          "flex min-h-screen items-center justify-center p-4",
+          embedded ? "bg-background" : "bg-muted/30",
+        )}
+      >
+        <div
+          className={cn(
+            "max-w-md text-center",
+            !embedded &&
+              "rounded-2xl border border-border/80 bg-background p-8 shadow-sm sm:p-10",
+          )}
+        >
           <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-emerald-600/10">
             <IconCircleCheck className="h-7 w-7 text-emerald-600 dark:text-emerald-400" />
           </div>
@@ -254,11 +276,22 @@ export function FormFillPage() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex items-center justify-center p-3 sm:p-4 py-8 sm:py-12">
-      <div className="w-full max-w-2xl">
+    <div
+      className={cn(
+        "flex min-h-screen items-center justify-center p-3 sm:p-4 py-8 sm:py-12",
+        embedded ? "bg-background" : "bg-muted/30",
+      )}
+    >
+      <div
+        className={cn(
+          "w-full max-w-2xl",
+          !embedded &&
+            "rounded-2xl border border-border/80 bg-background p-5 shadow-sm sm:p-8",
+        )}
+      >
         {!embedded && (
           <div className="mb-3 flex justify-end">
-            <ThemeToggle className="h-8 w-8" />
+            <ThemeToggle className="h-10 w-10 transition-[scale,background-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none" />
           </div>
         )}
         {/* Form header */}
@@ -320,7 +353,7 @@ export function FormFillPage() {
 
           <Button
             type="submit"
-            className="mt-4 w-full sm:w-auto"
+            className="mt-4 min-h-11 w-full transition-[scale,background-color,border-color,color,box-shadow] duration-150 active:scale-[0.96] motion-reduce:transition-none sm:w-auto"
             size="lg"
             disabled={submitForm.isPending}
           >