@loafmarkets/ui 0.1.298 → 0.1.300

package/dist/index.mjs

@@ -6300,7 +6300,8 @@ var LoginPopup = ({
   onKycStart,
   renderKycWidget,
   onFundWallet,
-  initialView
+  initialView,
+  kycStatus: kycStatusProp
 }) => {
   const [view, setView] = useState(() => initialView ?? "main");
   const [email, setEmail] = useState("");
@@ -6537,10 +6538,6 @@ var LoginPopup = ({
       setView("kyc-failed");
     }
   };
-  const handleKycWidgetClose = () => {
-    setShowKycWidget(false);
-    onClose();
-  };
   const handleKycStart = async () => {
     if (renderKycWidget) {
       setShowKycWidget(true);
@@ -6786,19 +6783,26 @@ var LoginPopup = ({
         $expanded: showKycWidget,
         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" }) }) }),
-          showKycWidget && renderKycWidget ? /* @__PURE__ */ jsxs(KycWidgetContainer, { children: [
-            /* @__PURE__ */ jsx(InlineCloseButton, { onClick: handleKycWidgetClose, "aria-label": "Close KYC widget", 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" }) }) }),
-            renderKycWidget(handleKycWidgetResult)
-          ] }) : /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
+          renderKycWidget && /* @__PURE__ */ jsxs(KycWidgetContainer, { style: showKycWidget ? void 0 : { position: "absolute", left: "-9999px", opacity: 0, pointerEvents: "none" }, children: [
+            renderKycWidget(handleKycWidgetResult),
+            /* @__PURE__ */ jsxs(KycWidgetFooter, { children: [
+              /* @__PURE__ */ jsxs(KycProgressSaved, { children: [
+                /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#0ecb81", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+                "Progress saved"
+              ] }),
+              /* @__PURE__ */ jsx(KycExitButton, { type: "button", onClick: onClose, children: "Save & Exit" })
+            ] })
+          ] }),
+          !showKycWidget && /* @__PURE__ */ jsxs(OnboardingStepContainer, { style: { alignItems: "stretch", textAlign: "left" }, children: [
             /* @__PURE__ */ jsx(OnboardingHeading, { style: { textAlign: "center" }, children: "Verify to Gain Access" }),
             /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: /* @__PURE__ */ jsxs(ModalOptionCard, { onClick: handleKycStart, disabled: kycLoading, children: [
               /* @__PURE__ */ jsx("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", style: { color: "rgba(255,255,255,0.6)", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
               /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: kycLoading ? "Verifying\u2026" : "Start Verification" }),
+                /* @__PURE__ */ jsx("div", { style: { color: "#fff", fontWeight: 600, fontSize: "0.95rem", marginBottom: "0.25rem" }, children: kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification" }),
                 /* @__PURE__ */ jsx("div", { style: { color: "rgba(255,255,255,0.5)", fontSize: "0.8rem" }, children: "Takes about 2 minutes" })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "1rem" }, children: "I'll do this later" }),
+            /* @__PURE__ */ jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "1rem" }, children: "Exit" }),
             error && /* @__PURE__ */ jsx(StatusMessage, { $error: true, children: error })
           ] })
         ]
@@ -6984,7 +6988,38 @@ var KycWidgetContainer = styled9.div`
   position: relative;
   gap: 0.75rem;
 `;
-var InlineCloseButton = styled9.button`
+var KycWidgetFooter = styled9.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255,255,255,0.08);
+  margin-top: 0.5rem;
+`;
+var KycProgressSaved = styled9.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #0ecb81;
+`;
+var KycExitButton = styled9.button`
+  background: rgba(255,255,255,0.06);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 6px;
+  padding: 0.4rem 0.85rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.6);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  &:hover {
+    background: rgba(255,255,255,0.1);
+    color: rgba(255,255,255,0.8);
+  }
+`;
+styled9.button`
   position: absolute;
   top: -12px;
   right: -12px;
@@ -7014,8 +7049,10 @@ var CloseButton = styled9.button`
   position: absolute;
   top: 1rem;
   right: 1rem;
-  background: none;
-  border: none;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 999px;
   color: var(--color-text-secondary, #848e9c);
   font-size: 1.5rem;
   cursor: pointer;
@@ -7023,7 +7060,7 @@ var CloseButton = styled9.button`
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.2s ease;
+  transition: color 0.2s ease, background 0.2s ease;
 
   &:hover {
     color: var(--color-accent, #e6c656);