@loafmarkets/ui 0.1.342 → 0.1.343

package/dist/index.mjs

@@ -6752,62 +6752,68 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "otp") {
-    return /* @__PURE__ */ jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
-      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxs(BackButton, { onClick: () => setView("email"), children: [
-        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
-        "Back"
-      ] }),
-      /* @__PURE__ */ jsxs(Title, { children: [
-        /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
-        "Enter Verification Code"
-      ] }),
-      /* @__PURE__ */ jsxs(InfoText, { style: { marginBottom: "1.5rem" }, children: [
-        "We sent a code to ",
-        /* @__PURE__ */ jsx("strong", { style: { color: "#eaecef" }, children: email })
-      ] }),
-      /* @__PURE__ */ jsx("form", { onSubmit: handleVerifyCode, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
-        /* @__PURE__ */ jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsx(
-          OTPInput,
-          {
-            id: `otp-${index}`,
-            type: "text",
-            inputMode: "numeric",
-            maxLength: 1,
-            value: digit,
-            onChange: (event) => handleOTPChange(index, event.target.value),
-            onKeyDown: (event) => handleOTPKeyDown(index, event),
-            onInput: (event) => handleOTPInput(index, event),
-            onPaste: handleOTPPaste,
-            autoComplete: index === 0 ? "one-time-code" : "off",
-            autoFocus: index === 0
-          },
-          index
-        )) }),
-        /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: loading || otp.join("").length !== OTP_INPUT_LENGTH, children: loading ? "Verifying..." : "Verify" }),
-        error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
-      ] }) }),
-      /* @__PURE__ */ jsxs(InfoText, { children: [
-        "Didn't receive a code?",
-        " ",
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (event) => {
-              event.preventDefault();
-              void handleSendCode(event);
-            },
-            style: {
-              background: "none",
-              border: "none",
-              color: "#f0b90b",
-              cursor: "pointer",
-              textDecoration: "underline"
+    return /* @__PURE__ */ jsx(Overlay2, { onClick: loading ? void 0 : onClose, children: /* @__PURE__ */ jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
+      !loading && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
+      loading ? /* @__PURE__ */ jsxs(AccountCreationLoader, { children: [
+        /* @__PURE__ */ jsx(SpinnerRing, {}),
+        /* @__PURE__ */ jsx(AccountCreationText, { children: isSignUp ? "Preparing your account\u2026" : "Signing you in\u2026" }),
+        /* @__PURE__ */ jsx(AccountCreationSubtext, { children: "This may take a few seconds" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(BackButton, { onClick: () => setView("email"), children: [
+          /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
+          "Back"
+        ] }),
+        /* @__PURE__ */ jsxs(Title, { children: [
+          /* @__PURE__ */ jsx(LogoContainer3, { children: /* @__PURE__ */ jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
+          "Enter Verification Code"
+        ] }),
+        /* @__PURE__ */ jsxs(InfoText, { style: { marginBottom: "1.5rem" }, children: [
+          "We sent a code to ",
+          /* @__PURE__ */ jsx("strong", { style: { color: "#eaecef" }, children: email })
+        ] }),
+        /* @__PURE__ */ jsx("form", { onSubmit: handleVerifyCode, children: /* @__PURE__ */ jsxs(EmailFormContainer, { children: [
+          /* @__PURE__ */ jsx(OTPContainer, { children: otp.map((digit, index) => /* @__PURE__ */ jsx(
+            OTPInput,
+            {
+              id: `otp-${index}`,
+              type: "text",
+              inputMode: "numeric",
+              maxLength: 1,
+              value: digit,
+              onChange: (event) => handleOTPChange(index, event.target.value),
+              onKeyDown: (event) => handleOTPKeyDown(index, event),
+              onInput: (event) => handleOTPInput(index, event),
+              onPaste: handleOTPPaste,
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              autoFocus: index === 0
             },
-            children: "Resend"
-          }
-        )
+            index
+          )) }),
+          /* @__PURE__ */ jsx(SubmitButton, { type: "submit", disabled: otp.join("").length !== OTP_INPUT_LENGTH, children: "Verify" }),
+          error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
+        ] }) }),
+        /* @__PURE__ */ jsxs(InfoText, { children: [
+          "Didn't receive a code?",
+          " ",
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (event) => {
+                event.preventDefault();
+                void handleSendCode(event);
+              },
+              style: {
+                background: "none",
+                border: "none",
+                color: "#f0b90b",
+                cursor: "pointer",
+                textDecoration: "underline"
+              },
+              children: "Resend"
+            }
+          )
+        ] })
       ] })
     ] }) });
   }
@@ -7632,6 +7638,37 @@ var MiniLiveFeed = () => {
     }
   );
 };
+var AccountCreationLoader = styled9.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem 0;
+  gap: 1rem;
+`;
+var AccountCreationText = styled9.p`
+  color: var(--color-text, #eaecef);
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0;
+`;
+var AccountCreationSubtext = styled9.p`
+  color: var(--color-text-secondary, #848e9c);
+  font-size: 0.8rem;
+  margin: 0;
+`;
+var SpinnerRing = styled9.div`
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(230, 198, 86, 0.2);
+  border-top-color: var(--color-accent, #e6c656);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+`;
 LoginPopup.displayName = "LoginPopup";
 var PropertyCompareBar = React5.forwardRef(
   ({