@agg-build/ui 4.17.0 → 4.17.2

package/dist/index.mjs

@@ -14,7 +14,7 @@ import {
   formatRecurringCountdown,
   formatShareAmount,
   useHomePageModals
-} from "./chunk-M6U2RKBD.mjs";
+} from "./chunk-3Y2GCNVL.mjs";
 import {
   EventList,
   EventListItem,
@@ -32,7 +32,7 @@ import {
   orderbookRowLimitDefault,
   resolveEventDetailsSyncKey,
   useCenterOrderbookSpread
-} from "./chunk-NIRCF54M.mjs";
+} from "./chunk-RZLM3M5R.mjs";
 import {
   CARD_NETWORK_OPTIONS,
   DepositModal,
@@ -45,7 +45,7 @@ import {
   buildTerminalSummary,
   clearPendingCardSession,
   getPendingCardSession
-} from "./chunk-5SCDQSNA.mjs";
+} from "./chunk-JI5KV4QI.mjs";
 import {
   AggNotificationEventsProvider,
   DEPOSIT_MODAL_OPEN_EVENT,
@@ -67,7 +67,7 @@ import {
   useResolvedMarketClaim,
   useSharedKycFlow,
   venueRequiresSharedKyc
-} from "./chunk-D2BTU7QI.mjs";
+} from "./chunk-7E4UXCEX.mjs";
 import {
   SETTLEMENT_SECTION_ID,
   Settlement,
@@ -88,7 +88,7 @@ import {
   resolveOrderBookRows,
   resolveUnifiedOrderBookEntries,
   useEventTradingContext
-} from "./chunk-HFMKCV4L.mjs";
+} from "./chunk-TK62UB5F.mjs";
 import {
   ConnectAccountsStep,
   ConnectKalshiModal,
@@ -98,7 +98,7 @@ import {
   OnboardingModal,
   ProfileSetupStep,
   SharedKycModal
-} from "./chunk-QGONLJLE.mjs";
+} from "./chunk-B5ALKYD5.mjs";
 import {
   AGG_DEFAULT_URL,
   AGG_DOCS_URL,
@@ -220,7 +220,7 @@ import {
   useOptionalToast,
   useToast,
   venueLogoNames
-} from "./chunk-RR44PSKH.mjs";
+} from "./chunk-BBDFSTIA.mjs";
 
 // src/notifications/agg-toast-provider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -249,15 +249,12 @@ function AggProvider(_a) {
 
 // src/auth/connect-button-view/index.tsx
 import {
-  getVenueAvailabilityState,
   optimizedImageUrl,
   useAggAuthContext,
-  useAppConfig,
   useLabels,
   useResolvedExecutionMode,
   useSdkUiConfig
 } from "@agg-build/hooks";
-import { Venue } from "@agg-build/sdk";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 
 // src/auth/connect-button-view/connect-button-view.constants.ts
@@ -626,7 +623,6 @@ var AuthConnectButtonView = ({
   profileLabel,
   totalBalance,
   positionsBalance,
-  kalshiBalance = null,
   claimReadyCount = 0,
   onClaimWinningsClick,
   walletMethods,
@@ -634,19 +630,12 @@ var AuthConnectButtonView = ({
 }) => {
   var _a;
   const labels = useLabels();
-  const { disabledVenues, isLoading: isAppConfigLoading } = useAppConfig();
   const { isPaperMode } = useResolvedExecutionMode();
-  const isKalshiAvailable = getVenueAvailabilityState({
-    venueId: Venue.kalshi,
-    disabledVenues,
-    isConfigLoading: isAppConfigLoading
-  }) === "available";
   const {
     general: { rootClassName },
     features: { enableAnimations }
   } = useSdkUiConfig();
   const resolvedProfileLabel = profileLabel || labels.auth.myProfile;
-  const kalshiBalanceLabel = formatUsd(kalshiBalance != null ? kalshiBalance : 0);
   const authLabelsWithClaim = labels.auth;
   const resolveClaimTooltipLabel = (count) => {
     var _a2, _b;
@@ -774,18 +763,7 @@ var AuthConnectButtonView = ({
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx3("span", { className: "h-3.5 w-3.5 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: /* @__PURE__ */ jsx3(Icon, { name: "wallet-filled", size: "small", className: "text-agg-muted-foreground" }) }),
         /* @__PURE__ */ jsx3("p", { className: cn("agg-type-label text-agg-foreground", classNames == null ? void 0 : classNames.balanceText), children: isBalanceLoading ? /* @__PURE__ */ jsx3(LoadingIcon, { size: "small" }) : formatUsd(totalBalance) })
-      ] }),
-      isKalshiAvailable && !isPaperMode ? /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "flex items-center gap-2",
-          "aria-label": `${labels.userProfile.balance.kalshiBalance}: ${kalshiBalanceLabel}`,
-          children: [
-            /* @__PURE__ */ jsx3(VenueLogo, { venue: Venue.kalshi, size: "small", className: "size-3.5" }),
-            /* @__PURE__ */ jsx3("p", { className: "agg-type-label text-agg-foreground", children: kalshiBalanceLabel })
-          ]
-        }
-      ) : null
+      ] })
     ] }),
     /* @__PURE__ */ jsxs(DropdownMenu.Root, { open: isProfileMenuOpen, onOpenChange: onProfileMenuOpenChange, children: [
       /* @__PURE__ */ jsx3(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -911,14 +889,7 @@ var AuthConnectButtonView = ({
                             /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-sm leading-agg-5 text-agg-foreground", children: "Positions Value" })
                           ] }),
                           /* @__PURE__ */ jsx3("p", { className: "text-agg-lg font-agg-bold leading-agg-7 text-agg-foreground text-left", children: isBalanceLoading ? /* @__PURE__ */ jsx3(LoadingIcon, { size: "small" }) : formatUsd(positionsBalance) })
-                        ] }),
-                        isKalshiAvailable && !isPaperMode ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
-                          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-                            /* @__PURE__ */ jsx3(VenueLogo, { venue: Venue.kalshi, size: "small", className: "size-4" }),
-                            /* @__PURE__ */ jsx3("span", { className: "truncate text-agg-sm leading-agg-5 text-agg-foreground", children: labels.userProfile.balance.kalshiBalance })
-                          ] }),
-                          /* @__PURE__ */ jsx3("p", { className: "text-left text-agg-lg font-agg-bold leading-agg-7 text-agg-foreground", children: kalshiBalanceLabel })
-                        ] }) : null
+                        ] })
                       ] })
                     ]
                   }

package/dist/modals.js

@@ -237,7 +237,8 @@ var ModalContainer = ({
   maxWidth = "600px",
   classNames,
   "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy
+  "aria-labelledby": ariaLabelledBy,
+  onOpenAutoFocus
 }) => {
   const {
     general: { rootClassName },
@@ -268,6 +269,7 @@ var ModalContainer = ({
         ),
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        onOpenAutoFocus,
         onCloseAutoFocus: (event) => {
           event.preventDefault();
         },
@@ -8936,6 +8938,27 @@ var getSafeConnectionError = ({
     error.message
   ).trim();
 };
+var CloseButton = ({
+  className,
+  disabled
+}) => {
+  const labels = (0, import_hooks39.useLabels)();
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+    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__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "close", size: "medium", className: "!text-agg-foreground" })
+    }
+  );
+};
 var ConnectKalshiModal = ({
   open,
   onOpenChange,
@@ -8966,12 +8989,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 = (0, import_react16.useCallback)((event) => {
+    var _a;
+    event.preventDefault();
+    (_a = apiKeyInputRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, []);
   const handleOpenChange = (0, import_react16.useCallback)(
     (nextOpen) => {
       if (isVerifying && !nextOpen) return;
@@ -9014,207 +9037,211 @@ var ConnectKalshiModal = ({
     [handleVerify]
   );
   if (availabilityState === "hidden") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Modal, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Modal.Container,
     {
-      maxWidth: "600px",
+      maxWidth: isConnected ? "480px" : "600px",
       "aria-label": labels.onboarding.connectKalshiModal.ariaLabel,
-      classNames: { container: "!rounded-agg-2xl" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex h-[60px] shrink-0 items-center justify-end px-8", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-          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__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "close", size: "medium" })
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Modal.Body, { classNames: { root: "!px-5 !pb-12 !pt-0 sm:!px-10" }, children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+      classNames: {
+        container: "!rounded-t-agg-xl !rounded-b-none md:!rounded-agg-2xl"
+      },
+      onOpenAutoFocus: isConnected ? void 0 : handleOpenAutoFocus,
+      children: isConnected ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(Modal.Body, { classNames: { root: "relative !px-5 !py-8 md:!px-10 md:!py-12" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(CloseButton, { className: "absolute right-5 top-5 md:right-8 md:top-8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
           "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__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex size-[60px] items-center justify-center rounded-agg-full bg-agg-success", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                Icon,
-                {
-                  name: "success-check",
-                  className: "size-7 text-agg-on-primary",
-                  "aria-hidden": "true"
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex size-[60px] items-center justify-center rounded-agg-full bg-agg-success/15", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "success-check", className: "size-6 text-agg-success", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Dialog3.Title, { className: "text-agg-2xl font-agg-bold leading-agg-8 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Dialog3.Description, { className: "max-w-[480px] text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.description })
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Dialog3.Description, { className: "text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.success.description })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                Button,
-                {
-                  variant: "primary",
-                  size: "large",
-                  className: "min-w-[120px]",
-                  onClick: () => handleOpenChange(false),
-                  children: labels.onboarding.connectKalshiModal.success.done
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Button, { variant: "secondary", size: "large", onClick: () => handleOpenChange(false), children: labels.onboarding.connectKalshiModal.success.done })
             ]
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("form", { className: "flex flex-col items-center gap-8", onSubmit: handleSubmit, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(VenueLogo, { venue: import_sdk13.Venue.kalshi, variant: "logo", size: "large", className: "size-[60px]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col items-center gap-4 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Dialog3.Title, { className: "text-agg-2xl font-agg-bold leading-agg-8 text-agg-foreground", children: labels.onboarding.connectKalshiModal.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Dialog3.Description, { className: "max-w-[520px] text-agg-base leading-agg-6 text-agg-foreground", children: labels.onboarding.connectKalshiModal.description })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
-                  " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
-                  " ",
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("form", { className: "flex min-h-0 flex-1 flex-col", onSubmit: handleSubmit, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+          Modal.Body,
+          {
+            classNames: { root: "relative !px-5 !pb-6 !pt-5 md:!px-10 md:!pb-0 md:!pt-12" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-6 md:items-center md:gap-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex w-full flex-col md:contents", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-center gap-3 md:contents", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                    "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: import_sdk13.Venue.kalshi,
+                      variant: "logo",
+                      size: "large",
+                      className: "!size-10 md:!mb-8 md:!size-[60px]"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(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__ */ (0, import_jsx_runtime138.jsx)(
+                    CloseButton,
+                    {
+                      disabled: isVerifying,
+                      className: "ml-auto shrink-0 md:absolute md:right-8 md:top-8 md:ml-0"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
-                  " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
-                  " ",
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
-                  labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
-                labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("br", {}),
-                labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(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__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                  "label",
-                  {
-                    htmlFor: "kalshi-api-key-id",
-                    className: "text-agg-sm font-agg-bold text-agg-foreground",
-                    children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                  "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__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepOne.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepOne.title })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.signIn }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfilePrefix,
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.profileText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.goToProfileSeparator,
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                        "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__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeyPrefix,
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKeyText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.clickCreateKeySuffix
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { children: [
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsPrefix,
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "font-agg-bold", children: labels.onboarding.connectKalshiModal.stepOne.instructions.readWriteText }),
+                      labels.onboarding.connectKalshiModal.stepOne.instructions.selectPermissionsSuffix
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { children: labels.onboarding.connectKalshiModal.stepOne.instructions.createKey })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+                    labels.onboarding.connectKalshiModal.stepOne.footerLineOne,
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("br", {}),
+                    labels.onboarding.connectKalshiModal.stepOne.footerLineTwo
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-3 rounded-agg-xl bg-agg-secondary-hover p-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 text-agg-muted-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.label }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.title })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: labels.onboarding.connectKalshiModal.stepTwo.description }),
+                  /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                      "label",
+                      {
+                        htmlFor: "kalshi-api-key-id",
+                        className: "text-agg-sm font-agg-bold text-agg-foreground",
+                        children: labels.onboarding.connectKalshiModal.stepTwo.apiKeyIdLabel
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                      "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__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                  "label",
-                  {
-                    htmlFor: "kalshi-private-key",
-                    className: "text-agg-sm font-agg-bold text-agg-foreground",
-                    children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
-                  "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__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                      "label",
+                      {
+                        htmlFor: "kalshi-private-key",
+                        className: "text-agg-sm font-agg-bold text-agg-foreground",
+                        children: labels.onboarding.connectKalshiModal.stepTwo.privateKeyLabel
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+                      "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__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-base text-agg-foreground", children: labels.onboarding.connectKalshiModal.help.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("span", { className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "document", size: "small", className: "size-4 text-agg-primary" }),
-                labels.onboarding.connectKalshiModal.help.docsLinkLabel
+                  ] })
+                ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "h-3 w-px bg-agg-separator" }),
-              /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("span", { className: "flex items-center gap-2 text-agg-base font-agg-bold text-agg-primary", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "play-square", size: "small", className: "size-4 text-agg-primary" }),
-                labels.onboarding.connectKalshiModal.help.tutorialLinkLabel
-              ] })
+              error ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+                "div",
+                {
+                  id: errorId,
+                  className: "flex items-center gap-2 md:justify-center",
+                  role: "alert",
+                  "aria-live": "assertive",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "warning", size: "small", className: "size-3.5 text-agg-error" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
+                  ]
+                }
+              ) : null
             ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex flex-col items-center gap-5", children: [
-            error ? /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
-              "div",
-              {
-                id: errorId,
-                className: "flex items-center gap-2",
-                role: "alert",
-                "aria-live": "assertive",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Icon, { name: "warning", size: "small", className: "size-3.5 text-agg-error" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("p", { className: "text-agg-sm leading-agg-5 text-agg-error", children: error })
-                ]
-              }
-            ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)("div", { className: "flex items-center justify-center gap-3", children: [
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+          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__ */ (0, import_jsx_runtime138.jsx)(
+                "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__ */ (0, import_jsx_runtime138.jsx)(
                 Button,
                 {
                   variant: "secondary",
                   size: "large",
+                  className: "shrink-0",
                   onClick: () => handleOpenChange(false),
                   disabled: isVerifying,
                   children: labels.onboarding.connectKalshiModal.actions.cancel
@@ -9226,15 +9253,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/modals.mjs

@@ -11,7 +11,7 @@ import {
   buildTerminalSummary,
   clearPendingCardSession,
   getPendingCardSession
-} from "./chunk-5SCDQSNA.mjs";
+} from "./chunk-JI5KV4QI.mjs";
 import {
   ConnectAccountsStep,
   ConnectKalshiModal,
@@ -21,8 +21,8 @@ import {
   OnboardingModal,
   ProfileSetupStep,
   SharedKycModal
-} from "./chunk-QGONLJLE.mjs";
-import "./chunk-RR44PSKH.mjs";
+} from "./chunk-B5ALKYD5.mjs";
+import "./chunk-BBDFSTIA.mjs";
 export {
   CARD_NETWORK_OPTIONS,
   ConnectAccountsStep,