smartcomply-web-sdk 1.0.62 → 1.0.64

package/dist/esm/flow/SmartComplyFlow.d.ts

@@ -39,6 +39,7 @@ export declare class SmartComplyFlow {
     private idNumber;
     private documentBlob;
     private documentBackBlob;
+    private _documentViaCamera;
     private identityCheckId;
     private verificationResult;
     private livenessEntryId;

package/dist/esm/flow/SmartComplyFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SmartComplyFlow.d.ts","sourceRoot":"","sources":["../../../src/flow/SmartComplyFlow.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"SmartComplyFlow.d.ts","sourceRoot":"","sources":["../../../src/flow/SmartComplyFlow.ts"],"names":[],"mappings":"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"}

package/dist/esm/flow/SmartComplyFlow.js

@@ -1,8 +1,10 @@
 import { SmartComply } from "../client/Smartcomply";
-import { getTheme } from "./theme";
+import { getTheme, TYPE, RADIUS } from "./theme";
 import { DocumentCapture } from "./DocumentCapture";
 import { collectDeviceMetadata } from "../utils/device";
 import { requiresBackSide } from "../utils/documentRules";
+import { icon } from "./icons";
+import { renderSpinner, renderInlineSpinner } from "./spinner";
 const STEP_ORDER = [
     "loading",
     "welcome",
@@ -226,18 +228,6 @@ function _formatDocType(code) {
 }
 // SmartComplyFlow
 // ─────────────────────────────────────────────────────────────────────
-// Add CSS animation keyframes for spin animations
-const style = document.createElement('style');
-style.textContent = `
-  @keyframes sc-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-`;
-if (!document.head.querySelector('style[data-sc-animations]')) {
-    style.setAttribute('data-sc-animations', 'true');
-    document.head.appendChild(style);
-}
 export class SmartComplyFlow {
     constructor(options) {
         this.theme = getTheme("default");
@@ -262,6 +252,11 @@ export class SmartComplyFlow {
         this.idNumber = "";
         this.documentBlob = null;
         this.documentBackBlob = null;
+        // Whether the document's front image came from the live camera vs. a
+        // gallery/file upload — gates whether pre-warming the liveness camera on
+        // the confirm screens makes sense (reusing an already-open camera) or
+        // would surprise a user who hasn't touched their camera yet this session.
+        this._documentViaCamera = false;
         this.identityCheckId = null;
         this.verificationResult = null;
         this.livenessEntryId = null;
@@ -609,27 +604,9 @@ export class SmartComplyFlow {
     // ── Loading ─────────────────────────────────────────────────────
     renderLoading(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;gap:16px;";
-        const spinnerWrap = document.createElement("div");
-        spinnerWrap.style.cssText = "position:relative;width:60px;height:60px;flex-shrink:0;";
-        const ring = document.createElement("div");
-        ring.style.cssText = `
-      position:absolute;inset:0;border-radius:50%;
-      border:3px solid ${this.theme.border};
-      border-top-color:${this.theme.primary};
-      animation:sc-spin 0.9s linear infinite;
-    `;
-        const centre = document.createElement("div");
-        centre.style.cssText = `
-      position:absolute;inset:0;
-      display:flex;align-items:center;justify-content:center;
-      font-size:22px;
-    `;
-        centre.textContent = "\uD83D\uDEE1\uFE0F";
-        spinnerWrap.appendChild(ring);
-        spinnerWrap.appendChild(centre);
-        container.appendChild(spinnerWrap);
+        container.appendChild(renderSpinner(this.theme, { size: 60, icon: icon("shield", 22) }));
         const label = document.createElement("div");
-        label.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        label.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
         label.textContent = "Setting up secure session";
         container.appendChild(label);
         const sub = document.createElement("div");
@@ -648,11 +625,11 @@ export class SmartComplyFlow {
         iconWrap.style.cssText = `
       width:50px;height:50px;border-radius:14px;
       display:flex;align-items:center;justify-content:center;
-      font-size:22px;
+      color:${this.theme.primary};
       background:linear-gradient(135deg,${this.theme.primary}22,${this.theme.primaryGlow});
       border:1.5px solid ${this.theme.primary}33;
     `;
-        iconWrap.textContent = isDocFlow ? "🪪" : "🛡️";
+        iconWrap.innerHTML = icon(isDocFlow ? "id-card" : "shield", 24);
         topRow.appendChild(iconWrap);
         const badge = document.createElement("div");
         badge.style.cssText = `
@@ -671,7 +648,7 @@ export class SmartComplyFlow {
         titleWrap.style.cssText = "display:flex;flex-direction:column;gap:5px;";
         const title = document.createElement("h2");
         title.style.cssText = `
-      color:${this.theme.text};font-size:20px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;line-height:1.2;
     `;
         // W2: Use client brand name in title
@@ -705,7 +682,7 @@ export class SmartComplyFlow {
         const stepsWrap = document.createElement("div");
         stepsWrap.style.cssText = `
       width:100%;display:flex;flex-direction:column;gap:0;
-      border-radius:12px;overflow:hidden;
+      border-radius:${RADIUS.md}px;overflow:hidden;
       border:1.5px solid ${this.theme.border};
     `;
         steps.forEach((step, i) => {
@@ -718,7 +695,7 @@ export class SmartComplyFlow {
       `;
             const iconEl = document.createElement("div");
             iconEl.style.cssText = `
-        width:28px;height:28px;border-radius:8px;flex-shrink:0;
+        width:28px;height:28px;border-radius:${RADIUS.sm}px;flex-shrink:0;
         display:flex;align-items:center;justify-content:center;
         font-size:13px;
         background:${this.theme.primary}12;
@@ -946,7 +923,7 @@ export class SmartComplyFlow {
                 // Dropdown field
                 const select = document.createElement("select");
                 select.style.cssText = `
-          width:100%;padding:13px 16px;border-radius:12px;
+          width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
           font-size:15px;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -981,7 +958,7 @@ export class SmartComplyFlow {
                 fileInput.type = "file";
                 fileInput.accept = "image/*";
                 fileInput.style.cssText = `
-          width:100%;padding:12px 16px;border-radius:12px;
+          width:100%;padding:12px 16px;border-radius:${RADIUS.md}px;
           font-size:14px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -1025,7 +1002,7 @@ export class SmartComplyFlow {
                 if (rule?.numeric)
                     input.inputMode = "numeric";
                 input.style.cssText = `
-          width:100%;padding:14px 16px;border-radius:12px;
+          width:100%;padding:14px 16px;border-radius:${RADIUS.md}px;
           font-size:16px;font-weight:500;
           background:${this.theme.inputBg};
           color:${this.theme.text};
@@ -1087,7 +1064,7 @@ export class SmartComplyFlow {
         errorEl.id = "sc-id-error";
         errorEl.style.cssText = `
       color:${this.theme.error};font-size:13px;display:none;
-      padding:8px 12px;border-radius:8px;background:${this.theme.errorBg};
+      padding:8px 12px;border-radius:${RADIUS.sm}px;background:${this.theme.errorBg};
     `;
         container.appendChild(errorEl);
         // Submit
@@ -1108,7 +1085,7 @@ export class SmartComplyFlow {
         };
         submitBtn.addEventListener("click", async () => {
             submitBtn.disabled = true;
-            submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;"><span style="width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;animation:sc-spin 0.6s linear infinite;display:inline-block;flex-shrink:0;"></span>Verifying...</span>`;
+            submitBtn.innerHTML = `<span style="display:inline-flex;align-items:center;justify-content:center;gap:8px;">${renderInlineSpinner("#fff", 13)}Verifying...</span>`;
             errorEl.style.display = "none";
             try {
                 this.verificationResult = await this.sdk.onboarding.verify({
@@ -1235,11 +1212,11 @@ export class SmartComplyFlow {
         // W13: Pre-warm camera silently while user reads this screen
         this._prewarmCamera();
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-        iconWrap.textContent = "🛡️";
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+        iconWrap.innerHTML = icon("shield", 28);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = this._ivsName ? `Is this you?` : "Identity Confirmed";
         container.appendChild(title);
         if (this._ivsName) {
@@ -1301,14 +1278,32 @@ export class SmartComplyFlow {
             this._renderRetryLimitReached(container);
             return;
         }
-        // W13: Pre-warm camera while user reads
-        this._prewarmCamera();
+        // W13: Pre-warm camera while user reads — but only if the document photo
+        // itself came from the camera. Pre-warming here when the user uploaded
+        // from gallery means requesting camera access before they've touched
+        // their camera at all this session, which reads as an unexplained/
+        // unexpected prompt rather than a seamless continuation.
+        if (this._documentViaCamera)
+            this._prewarmCamera();
+        // Step badge — pairs with DocumentCapture.showPreview's "Step 1 of 2"
+        // badge shown right after capture, so this doesn't read as unexplained
+        // repetition: that screen checked photo clarity, this one checks the
+        // OCR-extracted data.
+        const stepBadge = document.createElement("div");
+        stepBadge.style.cssText = `
+      display:inline-flex;align-items:center;gap:5px;
+      padding:3px 11px;border-radius:${RADIUS.pill}px;
+      font-size:10.5px;font-weight:600;letter-spacing:0.2px;
+      color:${this.theme.primary};background:${this.theme.primary}15;border:1px solid ${this.theme.primary}30;
+    `;
+        stepBadge.textContent = "STEP 2 OF 2 · CHECK WHAT WE READ";
+        container.appendChild(stepBadge);
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;font-size:28px;`;
-        iconWrap.textContent = "📄";
+        iconWrap.style.cssText = `width:64px;height:64px;border-radius:50%;background:${this.theme.primary}15;border:2px solid ${this.theme.primary}30;display:flex;align-items:center;justify-content:center;color:${this.theme.primary};`;
+        iconWrap.innerHTML = icon("document", 28);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = "Are these your details?";
         container.appendChild(title);
         const sub = document.createElement("p");
@@ -1400,19 +1395,10 @@ export class SmartComplyFlow {
     // ── W6+W7+W8: OCR Gate (document verification) ───────────────────
     renderOcrGate(container) {
         container.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0;text-align:center;";
-        const spinnerWrap = document.createElement("div");
-        spinnerWrap.style.cssText = "position:relative;width:52px;height:52px;flex-shrink:0;";
-        const ring = document.createElement("div");
-        ring.style.cssText = `position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.9s linear infinite;`;
-        const centre = document.createElement("div");
-        centre.style.cssText = "position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;";
-        centre.textContent = "📄";
-        spinnerWrap.appendChild(ring);
-        spinnerWrap.appendChild(centre);
-        container.appendChild(spinnerWrap);
+        container.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("document", 20) }));
         const statusEl = document.createElement("div");
         statusEl.setAttribute("aria-live", "polite");
-        statusEl.style.cssText = `color:${this.theme.text};font-size:15px;font-weight:600;`;
+        statusEl.style.cssText = `color:${this.theme.text};font-size:${TYPE.base}px;font-weight:600;`;
         statusEl.textContent = "Reading your document…";
         container.appendChild(statusEl);
         const subEl = document.createElement("div");
@@ -1513,7 +1499,7 @@ export class SmartComplyFlow {
         icon.textContent = "📅";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         t.textContent = "Document Expired";
         container.appendChild(t);
         const d = document.createElement("p");
@@ -1539,7 +1525,7 @@ export class SmartComplyFlow {
         icon.textContent = "🔍";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         t.textContent = "Document Photo Unclear";
         container.appendChild(t);
         const msg = reason === "image_too_blurry" ? "Your document photo is too blurry. Please retake it in good lighting with a steady hand."
@@ -1576,11 +1562,11 @@ export class SmartComplyFlow {
             verificationResult: this.verificationResult || undefined,
         });
         const iconWrap = document.createElement("div");
-        iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
-        iconWrap.textContent = "✓";
+        iconWrap.style.cssText = `width:80px;height:80px;border-radius:50%;background:${this.theme.successBg};border:3px solid ${this.theme.success};display:flex;align-items:center;justify-content:center;color:${this.theme.success};animation:sc-pop 0.4s ease;`;
+        iconWrap.innerHTML = icon("check", 36);
         container.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:22px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.headingLg}px;font-weight:700;margin:0;`;
         title.textContent = "You're all done!";
         container.appendChild(title);
         const desc = document.createElement("p");
@@ -1607,7 +1593,7 @@ export class SmartComplyFlow {
         icon.textContent = "⚠️";
         container.appendChild(icon);
         const t = document.createElement("h2");
-        t.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        t.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         t.textContent = "Unable to Complete Verification";
         container.appendChild(t);
         const d = document.createElement("p");
@@ -1642,6 +1628,7 @@ export class SmartComplyFlow {
         // below so compression only happens once.
         this.documentBlob = await _compressImage(result.front, 1600, 0.85);
         this.documentBackBlob = result.back ? await _compressImage(result.back, 1600, 0.85) : null;
+        this._documentViaCamera = result.viaCamera;
         // Process the front image — pass the already-compressed blob
         await this.processDocumentBlob(this.documentBlob, captureContainer, container);
     }
@@ -1662,15 +1649,12 @@ export class SmartComplyFlow {
                 }
                 this.documentBlob = blob;
                 // Show scanning state
-                captureContainer.innerHTML = `
-      <div style="display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;">
-        <div style="position:relative;width:52px;height:52px;">
-          <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-          <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔍</div>
-        </div>
+                captureContainer.innerHTML = "";
+                captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 20px;";
+                captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("search", 20) }));
+                captureContainer.insertAdjacentHTML("beforeend", `
         <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Scanning document...</div>
-        <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>
-      </div>`;
+        <div style="color:${this.theme.textSecondary};font-size:12px;text-align:center;max-width:200px;line-height:1.5;">Running OCR and verifying your identity</div>`);
                 // Create liveness entry with document.
                 // Use the first collected field value as identifier when available
                 // (document flow has no data-verification step, so collectedFields is
@@ -1734,15 +1718,12 @@ export class SmartComplyFlow {
                     console.log(`Retrying document processing (attempt ${retryCount}/${maxRetries})`);
                     // Show retry message
                     if (captureContainer) {
-                        captureContainer.innerHTML = `
-              <div style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;">
-                <div style="position:relative;width:52px;height:52px;">
-                  <div style="position:absolute;inset:0;border-radius:50%;border:3px solid ${this.theme.border};border-top-color:${this.theme.primary};animation:sc-spin 0.8s linear infinite;"></div>
-                  <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;">🔄</div>
-                </div>
+                        captureContainer.innerHTML = "";
+                        captureContainer.style.cssText += "display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 20px;text-align:center;";
+                        captureContainer.appendChild(renderSpinner(this.theme, { size: 52, icon: icon("refresh", 20) }));
+                        captureContainer.insertAdjacentHTML("beforeend", `
                 <div style="color:${this.theme.text};font-size:14px;font-weight:600;">Retrying...</div>
-                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>
-              </div>`;
+                <div style="color:${this.theme.textSecondary};font-size:12px;max-width:240px;line-height:1.5;">Attempt ${retryCount} of ${maxRetries}</div>`);
                     }
                     // Wait before retry
                     await new Promise(resolve => setTimeout(resolve, 2000));
@@ -1804,7 +1785,7 @@ export class SmartComplyFlow {
                 const retryBtn = document.createElement("button");
                 retryBtn.textContent = "Try Again";
                 retryBtn.setAttribute("aria-label", "Retake document photo");
-                retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:8px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
+                retryBtn.style.cssText = `margin-top:8px;padding:12px 24px;border-radius:${RADIUS.sm}px;background:${this.theme.primary};color:#fff;border:none;font-size:14px;font-weight:600;cursor:pointer;`;
                 retryBtn.addEventListener("click", () => this.showStep("document_capture"));
                 wrap.appendChild(retryBtn);
             }
@@ -1865,6 +1846,12 @@ export class SmartComplyFlow {
                     : "liveness_only",
             // B4: pass pre-warmed stream so camera.open() is skipped
             prewarmedStream: this._prewarmedStream || undefined,
+            colors: {
+                primary: this.theme.primary,
+                success: this.theme.success,
+                error: this.theme.error,
+                warning: this.theme.warning,
+            },
         }, ["BLINK"], this.livenessEntryId || undefined)
             .then((result) => {
             // W11: After submit, end user is done — show "You're all done" screen.
@@ -1906,14 +1893,14 @@ export class SmartComplyFlow {
         // /v1/sdk/liveness/submit/) are an operator-facing problem, not something
         // the end user can act on — never show "wallet"/"balance" language to them.
         const isBillingErr = /wallet|balance|insufficient.*fund|payment.*required/i.test(message);
-        const errorIcon = isCameraErr ? "📷"
-            : isNetworkErr ? "📡"
-                : isAuthErr ? "⏱"
-                    : isDocQuality ? "🔍"
-                        : isExpiredDoc ? "📅"
-                            : isFaceMatch ? "🤳"
-                                : isBillingErr ? "⚠️"
-                                    : "✕";
+        const errorIconName = isCameraErr ? "camera"
+            : isNetworkErr ? "network"
+                : isAuthErr ? "clock"
+                    : isDocQuality ? "search"
+                        : isExpiredDoc ? "calendar"
+                            : isFaceMatch ? "face"
+                                : isBillingErr ? "warning"
+                                    : "close";
         const errorTitle = isCameraErr ? "Camera Access Required"
             : isNetworkErr ? "Connection Problem"
                 : isAuthErr ? "Session Expired"
@@ -1942,14 +1929,14 @@ export class SmartComplyFlow {
         iconWrap.style.cssText = `
       width:72px;height:72px;border-radius:50%;
       display:flex;align-items:center;justify-content:center;
-      font-size:28px;
+      color:${this.theme.error};
       background:${this.theme.errorBg};
       border:3px solid ${this.theme.error};
     `;
-        iconWrap.textContent = errorIcon;
+        iconWrap.innerHTML = icon(errorIconName, 28);
         wrapper.appendChild(iconWrap);
         const title = document.createElement("h2");
-        title.style.cssText = `color:${this.theme.text};font-size:18px;font-weight:700;margin:0;`;
+        title.style.cssText = `color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;margin:0;`;
         title.textContent = errorTitle;
         wrapper.appendChild(title);
         const desc = document.createElement("p");
@@ -1988,7 +1975,7 @@ export class SmartComplyFlow {
         this.headerBackBtn.innerHTML = "&#8592;";
         this.headerBackBtn.setAttribute("aria-label", "Go back to previous step");
         this.headerBackBtn.style.cssText = `
-      width:30px;height:30px;border-radius:8px;flex-shrink:0;
+      width:30px;height:30px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:none;align-items:center;justify-content:center;
       border:1.5px solid ${this.theme.border};cursor:pointer;
       font-size:16px;line-height:1;
@@ -2046,7 +2033,7 @@ export class SmartComplyFlow {
         closeBtn.innerHTML = "✕";
         closeBtn.setAttribute("aria-label", "Close identity verification");
         closeBtn.style.cssText = `
-      width:32px;height:32px;border-radius:8px;flex-shrink:0;
+      width:32px;height:32px;border-radius:${RADIUS.sm}px;flex-shrink:0;
       display:flex;align-items:center;justify-content:center;
       border:none;cursor:pointer;font-size:16px;
       background:${this.theme.shimmer};color:${this.theme.textMuted};
@@ -2083,7 +2070,7 @@ export class SmartComplyFlow {
     createStepTitle(text) {
         const el = document.createElement("h3");
         el.style.cssText = `
-      color:${this.theme.text};font-size:18px;font-weight:700;
+      color:${this.theme.text};font-size:${TYPE.heading}px;font-weight:700;
       margin:0;
     `;
         el.textContent = text;
@@ -2093,7 +2080,7 @@ export class SmartComplyFlow {
         const card = document.createElement("button");
         card.setAttribute("aria-label", subtitle ? `${title}: ${subtitle}` : title);
         card.style.cssText = `
-      width:100%;padding:13px 16px;border-radius:12px;
+      width:100%;padding:13px 16px;border-radius:${RADIUS.md}px;
       background:${this.theme.cardBg};
       border:2px solid ${this.theme.border};
       cursor:pointer;text-align:left;
@@ -2133,7 +2120,7 @@ export class SmartComplyFlow {
         const btn = document.createElement("button");
         btn.textContent = text;
         btn.style.cssText = `
-      width:100%;padding:14px;border-radius:12px;
+      width:100%;padding:14px;border-radius:${RADIUS.md}px;
       font-size:15px;font-weight:600;
       background:${this.theme.primary};color:#fff;
       border:none;cursor:pointer;
@@ -2154,7 +2141,7 @@ export class SmartComplyFlow {
         const btn = document.createElement("button");
         btn.textContent = text;
         btn.style.cssText = `
-      width:100%;padding:12px;border-radius:12px;
+      width:100%;padding:12px;border-radius:${RADIUS.md}px;
       font-size:14px;font-weight:500;
       background:transparent;color:${this.theme.textSecondary};
       border:none;cursor:pointer;
@@ -2292,9 +2279,6 @@ export class SmartComplyFlow {
         const style = document.createElement("style");
         style.id = "sc-flow-styles";
         style.textContent = `
-      @keyframes sc-spin {
-        to { transform: rotate(360deg); }
-      }
       @keyframes sc-pop {
         0% { transform: scale(0.8); opacity: 0; }
         50% { transform: scale(1.05); }