@agg-build/ui 4.17.0 → 4.17.3

package/dist/{chunk-QGONLJLE.mjs → chunk-B5ALKYD5.mjs}

@@ -20,7 +20,7 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-RR44PSKH.mjs";
+} from "./chunk-BBDFSTIA.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";
@@ -628,6 +628,27 @@ var getSafeConnectionError = ({
     error.message
   ).trim();
 };
+var CloseButton = ({
+  className,
+  disabled
+}) => {
+  const labels = useLabels7();
+  return /* @__PURE__ */ jsx7(
+    Dialog3.Close,
+    {
+      "aria-label": labels.common.close,
+      disabled,
+      className: cn(
+        "z-30 flex size-6 cursor-pointer items-center justify-center rounded-agg-full",
+        "text-agg-foreground transition-colors hover:text-agg-foreground/80",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-accent",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      children: /* @__PURE__ */ jsx7(Icon, { name: "close", size: "medium", className: "!text-agg-foreground" })
+    }
+  );
+};
 var ConnectKalshiModal = ({
   open,
   onOpenChange,
@@ -658,12 +679,12 @@ var ConnectKalshiModal = ({
     setError(void 0);
     setIsVerifying(false);
     setIsConnected(false);
-    const animationFrame = window.requestAnimationFrame(() => {
-      var _a;
-      return (_a = apiKeyInputRef.current) == null ? void 0 : _a.focus();
-    });
-    return () => window.cancelAnimationFrame(animationFrame);
   }, [open]);
+  const handleOpenAutoFocus = useCallback4((event) => {
+    var _a;
+    event.preventDefault();
+    (_a = apiKeyInputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, []);
   const handleOpenChange = useCallback4(
     (nextOpen) => {
       if (isVerifying && !nextOpen) return;
@@ -706,207 +727,211 @@ var ConnectKalshiModal = ({
     [handleVerify]
   );
   if (availabilityState === "hidden") return null;
-  return /* @__PURE__ */ jsx7(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx7(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx7(
     Modal.Container,
     {
-      maxWidth: "600px",
+      maxWidth: isConnected ? "480px" : "600px",
       "aria-label": labels.onboarding.connectKalshiModal.ariaLabel,
-      classNames: { container: "!rounded-agg-2xl" },
-      children: [
-        /* @__PURE__ */ jsx7("div", { className: "flex h-[60px] shrink-0 items-center justify-end px-8", children: /* @__PURE__ */ jsx7(
-          Dialog3.Close,
-          {
-            "aria-label": labels.common.close,
-            className: "flex size-10 cursor-pointer items-center justify-center rounded-agg-full text-agg-secondary transition-colors hover:bg-agg-quaternary hover:text-agg-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-accent disabled:cursor-default disabled:opacity-50",
-            disabled: isVerifying,
-            children: /* @__PURE__ */ jsx7(Icon, { name: "close", size: "medium" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx7(Modal.Body, { classNames: { root: "!px-5 !pb-12 !pt-0 sm:!px-10" }, children: isConnected ? /* @__PURE__ */ jsxs7(
+      classNames: {
+        container: "!rounded-t-agg-xl !rounded-b-none md:!rounded-agg-2xl"
+      },
+      onOpenAutoFocus: isConnected ? void 0 : handleOpenAutoFocus,
+      children: isConnected ? /* @__PURE__ */ jsxs7(Modal.Body, { classNames: { root: "relative !px-5 !py-8 md:!px-10 md:!py-12" }, children: [
+        /* @__PURE__ */ jsx7(CloseButton, { className: "absolute right-5 top-5 md:right-8 md:top-8" }),
+        /* @__PURE__ */ jsxs7(
           "div",
           {
-            className: "flex flex-col items-center gap-8 pb-3 text-center",
+            className: "flex flex-col items-center gap-8 text-center",
             role: "status",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ jsx7("div", { className: "flex size-[60px] items-center justify-center rounded-agg-full bg-agg-success", children: /* @__PURE__ */ jsx7(
-                Icon,
-                {
-                  name: "success-check",
-                  className: "size-7 text-agg-on-primary",
-                  "aria-hidden": "true"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-4", children: [
+              /* @__PURE__ */ jsx7("div", { className: "flex size-[60px] items-center justify-center rounded-agg-full bg-agg-success/15", children: /* @__PURE__ */ jsx7(Icon, { name: "success-check", className: "size-6 text-agg-success", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ jsx7(Dialog3.Title, { className: "text-agg-2xl font-agg-bold leading-agg-8 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.title }),
-                /* @__PURE__ */ jsx7(Dialog3.Description, { className: "max-w-[480px] text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.description })
+                /* @__PURE__ */ jsx7(Dialog3.Description, { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.description })
               ] }),
-              /* @__PURE__ */ jsx7(
-                Button,
-                {
-                  variant: "primary",
-                  size: "large",
-                  className: "min-w-[120px]",
-                  onClick: () => handleOpenChange(false),
-                  children: labels.onboarding.connectKalshiModal.success.done
-                }
-              )
+              /* @__PURE__ */ jsx7(Button, { variant: "secondary", size: "large", onClick: () => handleOpenChange(false), children: labels.onboarding.connectKalshiModal.success.done })
             ]
           }
-        ) : /* @__PURE__ */ jsxs7("form", { className: "flex flex-col items-center gap-8", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ jsx7(VenueLogo, { venue: Venue2.kalshi, variant: "logo", size: "large", className: "size-[60px]" }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-            /* @__PURE__ */ jsx7(Dialog3.Title, { className: "text-agg-2xl font-agg-bold leading-agg-8 text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
-            /* @__PURE__ */ jsx7(Dialog3.Description, { className: "max-w-[520px] text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
-          ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-4", children: [
-            /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx7("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
-                /* @__PURE__ */ jsx7("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
-              ] }),
-              /* @__PURE__ */ jsxs7("div", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-                /* @__PURE__ */ jsx7("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
-                /* @__PURE__ */ jsxs7("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
-                  " ",
-                  /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
-                  " ",
+        )
+      ] }) : /* @__PURE__ */ jsxs7("form", { className: "flex min-h-0 flex-1 flex-col", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ jsx7(
+          Modal.Body,
+          {
+            classNames: { root: "relative !px-5 !pb-6 !pt-5 md:!px-10 md:!pb-0 md:!pt-12" },
+            children: /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-6 md:items-center md:gap-0", children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col md:contents", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 md:contents", children: [
                   /* @__PURE__ */ jsx7(
-                    "a",
+                    VenueLogo,
                     {
-                      href: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl,
-                      target: "_blank",
-                      rel: "noreferrer",
-                      className: "cursor-pointer underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
-                      children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl
+                      venue: Venue2.kalshi,
+                      variant: "logo",
+                      size: "large",
+                      className: "!size-10 md:!mb-8 md:!size-[60px]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(Dialog3.Title, { className: "text-agg-lg font-agg-bold leading-agg-7 text-agg-foreground md:mb-4 md:text-center md:text-agg-2xl md:leading-agg-8", children: labels.onboarding.connectKalshiModal.title }),
+                  /* @__PURE__ */ jsx7(
+                    CloseButton,
+                    {
+                      disabled: isVerifying,
+                      className: "ml-auto shrink-0 md:absolute md:right-8 md:top-8 md:ml-0"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs7("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
-                  " ",
-                  /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
-                ] }),
-                /* @__PURE__ */ jsxs7("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
-                  " ",
-                  /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
-                ] }),
-                /* @__PURE__ */ jsx7("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
+                /* @__PURE__ */ jsx7(Dialog3.Description, { className: "mt-3 text-agg-sm leading-agg-5 text-agg-foreground md:mb-8 md:mt-0 md:text-center md:text-agg-base md:leading-agg-6", children: labels.onboarding.connectKalshiModal.description })
               ] }),
-              /* @__PURE__ */ jsxs7("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-                labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
-                /* @__PURE__ */ jsx7("br", {}),
-                labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ jsx7("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
-                /* @__PURE__ */ jsx7("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
-              ] }),
-              /* @__PURE__ */ jsx7("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
-              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx7(
-                  "label",
-                  {
-                    htmlFor: "kalshi-api-key-id",
-                    className: "text-agg-sm font-agg-bold text-agg-foreground",
-                    children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx7(
-                  "input",
-                  {
-                    ref: apiKeyInputRef,
-                    id: "kalshi-api-key-id",
-                    type: "text",
-                    autoComplete: "off",
-                    value: apiKeyId,
-                    onChange: (event) => setApiKeyId(event.target.value),
-                    placeholder: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdPlaceholder,
-                    disabled: isVerifying,
-                    "aria-invalid": !!error,
-                    "aria-describedby": error ? errorId : void 0,
-                    className: cn(
-                      "h-10 w-full rounded-agg-md border border-agg-separator bg-agg-secondary px-3 py-2.5",
-                      "text-agg-base text-agg-foreground placeholder:text-agg-muted-foreground",
-                      "outline-none transition-colors focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
-                      "disabled:cursor-not-allowed disabled:opacity-60"
+              /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-4", children: [
+                /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsx7("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
+                    /* @__PURE__ */ jsx7("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                    /* @__PURE__ */ jsx7("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
+                    /* @__PURE__ */ jsxs7("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
+                      " ",
+                      /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
+                      " ",
+                      /* @__PURE__ */ jsx7(
+                        "a",
+                        {
+                          href: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl,
+                          target: "_blank",
+                          rel: "noreferrer",
+                          className: "cursor-pointer underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary",
+                          children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileUrl
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs7("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
+                      " ",
+                      /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
+                    ] }),
+                    /* @__PURE__ */ jsxs7("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
+                      " ",
+                      /* @__PURE__ */ jsx7("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
+                    ] }),
+                    /* @__PURE__ */ jsx7("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
+                  ] }),
+                  /* @__PURE__ */ jsxs7("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                    labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
+                    /* @__PURE__ */ jsx7("br", {}),
+                    labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsx7("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
+                    /* @__PURE__ */ jsx7("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
+                  ] }),
+                  /* @__PURE__ */ jsx7("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsx7(
+                      "label",
+                      {
+                        htmlFor: "kalshi-api-key-id",
+                        className: "text-agg-sm font-agg-bold text-agg-foreground",
+                        children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "input",
+                      {
+                        ref: apiKeyInputRef,
+                        id: "kalshi-api-key-id",
+                        type: "text",
+                        autoComplete: "off",
+                        value: apiKeyId,
+                        onChange: (event) => setApiKeyId(event.target.value),
+                        placeholder: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdPlaceholder,
+                        disabled: isVerifying,
+                        "aria-invalid": !!error,
+                        "aria-describedby": error ? errorId : void 0,
+                        className: cn(
+                          "h-10 w-full rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5",
+                          "text-agg-base text-agg-foreground placeholder:text-agg-muted-foreground",
+                          "outline-none transition-colors focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
+                          "disabled:cursor-not-allowed disabled:opacity-60"
+                        )
+                      }
                     )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ jsx7(
-                  "label",
-                  {
-                    htmlFor: "kalshi-private-key",
-                    className: "text-agg-sm font-agg-bold text-agg-foreground",
-                    children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx7(
-                  "textarea",
-                  {
-                    id: "kalshi-private-key",
-                    autoComplete: "off",
-                    value: privateKey,
-                    onChange: (event) => setPrivateKey(event.target.value),
-                    placeholder: labels.onboarding.connectKalshiModal.stepTwo.privateKeyPlaceholder,
-                    rows: 3,
-                    disabled: isVerifying,
-                    "aria-invalid": !!error,
-                    "aria-describedby": error ? errorId : void 0,
-                    className: cn(
-                      "w-full resize-none rounded-agg-md border border-agg-separator bg-agg-secondary px-3 py-2.5",
-                      "text-agg-base text-agg-foreground placeholder:text-agg-muted-foreground",
-                      "outline-none transition-colors focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
-                      "disabled:cursor-not-allowed disabled:opacity-60"
+                  ] }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ jsx7(
+                      "label",
+                      {
+                        htmlFor: "kalshi-private-key",
+                        className: "text-agg-sm font-agg-bold text-agg-foreground",
+                        children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7(
+                      "textarea",
+                      {
+                        id: "kalshi-private-key",
+                        autoComplete: "off",
+                        value: privateKey,
+                        onChange: (event) => setPrivateKey(event.target.value),
+                        placeholder: labels.onboarding.connectKalshiModal.stepTwo.privateKeyPlaceholder,
+                        rows: 3,
+                        disabled: isVerifying,
+                        "aria-invalid": !!error,
+                        "aria-describedby": error ? errorId : void 0,
+                        className: cn(
+                          "w-full resize-none rounded-agg-sm border border-agg-separator bg-agg-secondary px-3 py-2.5",
+                          "text-agg-base text-agg-foreground placeholder:text-agg-muted-foreground",
+                          "outline-none transition-colors focus:border-agg-primary focus:ring-1 focus:ring-agg-primary",
+                          "disabled:cursor-not-allowed disabled:opacity-60"
+                        )
+                      }
                     )
-                  }
-                )
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsx7("p", { className: "text-agg-base text-agg-foreground", children: labels.onboarding.connectKalshiModal.help.label }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary", children: [
-                /* @__PURE__ */ jsx7(Icon, { name: "document", size: "small", className: "size-4 text-agg-primary" }),
-                labels.onboarding.connectKalshiModal.help.docsLinkLabel
+                  ] })
+                ] })
               ] }),
-              /* @__PURE__ */ jsx7("span", { className: "h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary", children: [
-                /* @__PURE__ */ jsx7(Icon, { name: "play-square", size: "small", className: "size-4 text-agg-primary" }),
-                labels.onboarding.connectKalshiModal.help.tutorialLinkLabel
-              ] })
+              error ? /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  id: errorId,
+                  className: "flex items-center gap-2 md:justify-center",
+                  role: "alert",
+                  "aria-live": "assertive",
+                  children: [
+                    /* @__PURE__ */ jsx7(Icon, { name: "warning", size: "small", className: "size-3.5 text-agg-error" }),
+                    /* @__PURE__ */ jsx7("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+                  ]
+                }
+              ) : null
             ] })
-          ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-5", children: [
-            error ? /* @__PURE__ */ jsxs7(
-              "div",
-              {
-                id: errorId,
-                className: "flex items-center gap-2",
-                role: "alert",
-                "aria-live": "assertive",
-                children: [
-                  /* @__PURE__ */ jsx7(Icon, { name: "warning", size: "small", className: "size-3.5 text-agg-error" }),
-                  /* @__PURE__ */ jsx7("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center gap-3", children: [
+          }
+        ),
+        /* @__PURE__ */ jsxs7(
+          Modal.Footer,
+          {
+            classNames: {
+              root: "relative !h-auto !gap-3 !p-4 md:!justify-center md:!border-0 md:!px-10 md:!pb-12 md:!pt-8"
+            },
+            children: [
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-x-0 -top-[60px] h-[60px] bg-gradient-to-b from-transparent to-agg-secondary md:hidden"
+                }
+              ),
               /* @__PURE__ */ jsx7(
                 Button,
                 {
                   variant: "secondary",
                   size: "large",
+                  className: "shrink-0",
                   onClick: () => handleOpenChange(false),
                   disabled: isVerifying,
                   children: labels.onboarding.connectKalshiModal.actions.cancel
@@ -918,15 +943,16 @@ var ConnectKalshiModal = ({
                   type: "submit",
                   variant: "primary",
                   size: "large",
+                  className: "flex-1 md:flex-none",
                   disabled: !parsedCredentials.success || isVerifying,
                   isLoading: isVerifying,
                   children: labels.onboarding.connectKalshiModal.actions.verifyConnection
                 }
               )
-            ] })
-          ] })
-        ] }) })
-      ]
+            ]
+          }
+        )
+      ] })
     }
   ) });
 };

package/dist/{chunk-RR44PSKH.mjs → chunk-BBDFSTIA.mjs}

@@ -8727,7 +8727,8 @@ var ModalContainer = ({
   maxWidth = "600px",
   classNames,
   "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy
+  "aria-labelledby": ariaLabelledBy,
+  onOpenAutoFocus
 }) => {
   const {
     general: { rootClassName },
@@ -8758,6 +8759,7 @@ var ModalContainer = ({
         ),
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        onOpenAutoFocus,
         onCloseAutoFocus: (event) => {
           event.preventDefault();
         },