@loafmarkets/ui 0.1.316 → 0.1.318

package/dist/index.js

@@ -6820,27 +6820,16 @@ var LoginPopup = ({
             ] })
           ] }),
           !showKycWidget && /* @__PURE__ */ jsxRuntime.jsxs(KycLandingContainer, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(KycGoldGlow, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(KycLockIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(KycLockIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
               /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
               /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
             ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(OnboardingHeading, { style: { textAlign: "center", marginBottom: "0.25rem" }, children: "Verify To Access" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycHeading, { children: "Verify Your Identity" }),
             /* @__PURE__ */ jsxRuntime.jsx(KycSubline, { children: "Initial offerings are only available to verified investors" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(KycStartButton, { type: "button", onClick: handleKycStart, disabled: kycLoading, children: [
-              kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Takes about 2 minutes" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(KycSocialProof, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "#0ecb81", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "7", r: "4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-              ] }),
-              "247 investors verified this week"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(OnboardingSkipButton, { onClick: handleKycSkip, style: { marginTop: "0.5rem" }, children: "Exit" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycStartButton, { type: "button", onClick: handleKycStart, disabled: kycLoading, children: kycLoading ? "Verifying\u2026" : kycStatusProp === "PENDING" || kycStatusProp === "ON_HOLD" ? "Resume Verification" : "Start Verification" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycDuration, { children: "Takes about 2 minutes" }),
+            /* @__PURE__ */ jsxRuntime.jsx(KycDivider, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(KycExitLink, { onClick: handleKycSkip, children: "Exit" }),
             error && /* @__PURE__ */ jsxRuntime.jsx(StatusMessage, { $error: true, children: error })
           ] })
         ]
@@ -6991,15 +6980,15 @@ var PopupContainer = styled9__default.default.div`
   }
 `;
 var KycPopupContainer = styled9__default.default.div`
-  background-color: var(--color-background, #0a0a0a);
-  border: 1px solid rgba(230, 198, 86, 0.3);
-  border-radius: var(--border-radius, 12px);
-  padding: 2.5rem;
-  max-width: ${(props) => props.$expanded ? "680px" : "440px"};
+  background-color: #0c0c0e;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  padding: ${(props) => props.$expanded ? "2.5rem" : "2.5rem 2.5rem 2rem"};
+  max-width: ${(props) => props.$expanded ? "680px" : "400px"};
   width: 90%;
   position: relative;
   animation: slideUp 0.3s ease-out;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
   transition: max-width 0.3s ease;
 
   @keyframes slideUp {
@@ -7062,85 +7051,79 @@ var KycLandingContainer = styled9__default.default.div`
   flex-direction: column;
   align-items: center;
   text-align: center;
-  position: relative;
-  overflow: hidden;
 `;
-var KycGoldGlow = styled9__default.default.div`
-  position: absolute;
-  top: -60px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 200px;
-  height: 120px;
-  background: radial-gradient(ellipse, rgba(212,175,55,0.15) 0%, transparent 70%);
-  pointer-events: none;
+styled9__default.default.div`
+  display: none;
 `;
 var KycLockIcon = styled9__default.default.div`
-  width: 52px;
-  height: 52px;
-  border-radius: 50%;
-  background: rgba(212,175,55,0.08);
-  border: 1px solid rgba(212,175,55,0.2);
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(212,175,55,0.06);
+  border: 1px solid rgba(212,175,55,0.12);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 1rem;
+  margin-bottom: 1.25rem;
+`;
+var KycHeading = styled9__default.default.h2`
+  font-size: 1.15rem;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 0.5rem;
+  letter-spacing: -0.01em;
 `;
 var KycSubline = styled9__default.default.p`
   font-size: 0.8rem;
-  color: rgba(255,255,255,0.45);
-  margin: 0 0 1.25rem;
-  line-height: 1.4;
+  color: rgba(255,255,255,0.4);
+  margin: 0 0 1.75rem;
+  line-height: 1.5;
 `;
 styled9__default.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.6rem;
-  width: 100%;
-  margin-bottom: 1.25rem;
+  display: none;
 `;
 styled9__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  font-size: 0.8rem;
-  color: rgba(255,255,255,0.7);
-  text-align: left;
-  svg { flex-shrink: 0; }
+  display: none;
 `;
 var KycStartButton = styled9__default.default.button`
   width: 100%;
-  padding: 0.85rem 1rem;
-  border-radius: 10px;
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
   border: none;
   cursor: pointer;
-  background: linear-gradient(135deg, #D4AF37 0%, #b8962e 100%);
+  background: #D4AF37;
   color: #0a0a0a;
-  font-weight: 700;
-  font-size: 0.95rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.2rem;
-  box-shadow: 0 4px 16px rgba(212,175,55,0.3);
-  transition: all 0.2s ease;
-  &:hover { box-shadow: 0 6px 24px rgba(212,175,55,0.4); transform: translateY(-1px); }
-  &:active { transform: translateY(0); }
-  &[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }
-  span {
-    font-size: 0.7rem;
-    font-weight: 500;
-    opacity: 0.7;
-  }
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all 0.15s ease;
+  &:hover { background: #c9a432; }
+  &:active { transform: scale(0.99); }
+  &[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
 `;
-var KycSocialProof = styled9__default.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.7rem;
+var KycDuration = styled9__default.default.div`
+  font-size: 0.72rem;
+  color: rgba(255,255,255,0.3);
+  margin-top: 0.6rem;
+`;
+var KycDivider = styled9__default.default.div`
+  width: 100%;
+  height: 1px;
+  background: rgba(255,255,255,0.06);
+  margin: 1.25rem 0;
+`;
+var KycExitLink = styled9__default.default.button`
+  background: none;
+  border: none;
   color: rgba(255,255,255,0.35);
-  margin-top: 1rem;
-  svg { flex-shrink: 0; }
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  transition: color 0.15s ease;
+  &:hover { color: rgba(255,255,255,0.6); }
+`;
+styled9__default.default.div`
+  display: none;
 `;
 styled9__default.default.button`
   position: absolute;
@@ -7173,20 +7156,24 @@ var CloseButton = styled9__default.default.button`
   top: 1rem;
   right: 1rem;
   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);
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.4);
   font-size: 1.5rem;
   cursor: pointer;
-  padding: 0.5rem;
+  padding: 0.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color 0.2s ease;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 
   &:hover {
-    color: var(--color-accent, #e6c656);
+    color: rgba(255, 255, 255, 0.8);
   }
 `;
 var Title = styled9__default.default.h2`