@alviere/ui 0.8.2 → 0.9.0

package/dist/index.js

@@ -5546,6 +5546,12 @@ class SchemaValidator {
         errors.push(error);
       }
     }
+    if (schema.match) {
+      const error = this.validateMatch(value, schema.match, context);
+      if (error) {
+        errors.push(error);
+      }
+    }
     return {
       isValid: errors.length === 0,
       errors,
@@ -5605,10 +5611,32 @@ class SchemaValidator {
     const error = validator.date(value, rule.format);
     return error && rule.message ? rule.message : error;
   }
+  /**
+   * Validate that the field value matches another field's value
+   */
+  validateMatch(value, rule, context) {
+    let matchValue;
+    if (rule.fieldRef) {
+      if (typeof rule.fieldRef === "function") {
+        matchValue = rule.fieldRef();
+      } else if (rule.fieldRef && "value" in rule.fieldRef) {
+        matchValue = rule.fieldRef.value || "";
+      }
+    } else if (rule.fieldId && context.getMatchFieldValue) {
+      matchValue = context.getMatchFieldValue(rule.fieldId);
+    }
+    if (matchValue === void 0) {
+      return null;
+    }
+    if (value !== matchValue) {
+      return rule.message || "Values do not match";
+    }
+    return null;
+  }
 }
 const schemaValidator = new SchemaValidator();
-function validateWithSchema(value, schema, fieldName) {
-  return schemaValidator.validate({ value, schema, fieldName });
+function validateWithSchema(value, schema, fieldName, getMatchFieldValue) {
+  return schemaValidator.validate({ value, schema, fieldName, getMatchFieldValue });
 }
 const visaLogo = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Visa</title><path d="M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z"/></svg>';
 const mastercardLogo = '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>MasterCard</title><path d="M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z"/></svg>';
@@ -7144,7 +7172,7 @@ const $$css$f = {
 function TextInput($$anchor, $$props) {
   push($$props, true);
   append_styles$1($$anchor, $$css$f);
-  let value = prop($$props, "value", 15, ""), label = prop($$props, "label", 15, ""), placeholder = prop($$props, "placeholder", 15, ""), disabled = prop($$props, "disabled", 15, false), required = prop($$props, "required", 15, false), readonly = prop($$props, "readonly", 15, false), size = prop($$props, "size", 15, "md"), id = prop($$props, "id", 15, ""), name = prop($$props, "name", 15, ""), autocomplete = prop($$props, "autocomplete", 15, ""), validationState = prop($$props, "validationState", 15, "neutral"), errorMessage = prop($$props, "errorMessage", 15, ""), helpText = prop($$props, "helpText", 15, ""), validationSchema = prop($$props, "validationSchema", 31, () => proxy({})), sensitive = prop($$props, "sensitive", 15, false), maxlength = prop($$props, "maxlength", 15, void 0), minlength = prop($$props, "minlength", 15, void 0), oninput = prop($$props, "oninput", 15), onchange = prop($$props, "onchange", 15), onfocus = prop($$props, "onfocus", 15), onblur = prop($$props, "onblur", 15), type = prop($$props, "type", 15, "text"), rows = prop($$props, "rows", 15, 3), cols = prop($$props, "cols", 15, void 0), resize = prop($$props, "resize", 15, "vertical");
+  let value = prop($$props, "value", 15, ""), label = prop($$props, "label", 15, ""), placeholder = prop($$props, "placeholder", 15, ""), disabled = prop($$props, "disabled", 15, false), required = prop($$props, "required", 15, false), readonly = prop($$props, "readonly", 15, false), size = prop($$props, "size", 15, "md"), id = prop($$props, "id", 15, ""), name = prop($$props, "name", 15, ""), autocomplete = prop($$props, "autocomplete", 15, ""), validationState = prop($$props, "validationState", 15, "neutral"), errorMessage = prop($$props, "errorMessage", 15, ""), helpText = prop($$props, "helpText", 15, ""), validationSchema = prop($$props, "validationSchema", 31, () => proxy({})), sensitive = prop($$props, "sensitive", 15, false), maxlength = prop($$props, "maxlength", 15, void 0), minlength = prop($$props, "minlength", 15, void 0), oninput = prop($$props, "oninput", 15), onchange = prop($$props, "onchange", 15), onfocus = prop($$props, "onfocus", 15), onblur = prop($$props, "onblur", 15), type = prop($$props, "type", 15, "text"), rows = prop($$props, "rows", 15, 3), cols = prop($$props, "cols", 15, void 0), resize = prop($$props, "resize", 15, "vertical"), blockPaste = prop($$props, "blockPaste", 15, false);
   const baseInput = createEnhancedBaseInputMixin({
     get value() {
       return value();
@@ -7167,7 +7195,26 @@ function TextInput($$anchor, $$props) {
     componentName: "TextInput",
     componentType: "text",
     customValidator: (val) => {
-      const result = validateWithSchema(val, validationSchema(), label());
+      const getMatchFieldValue = (fieldId) => {
+        var _a2;
+        if ((_a2 = validationSchema().match) === null || _a2 === void 0 ? void 0 : _a2.fieldRef) {
+          const ref = validationSchema().match.fieldRef;
+          if (typeof ref === "function") {
+            return ref();
+          }
+          if (ref && "value" in ref) {
+            return ref.value || "";
+          }
+        }
+        if (fieldId && typeof document !== "undefined") {
+          const matchedField = document.getElementById(fieldId);
+          if (matchedField && "value" in matchedField) {
+            return matchedField.value || "";
+          }
+        }
+        return "";
+      };
+      const result = validateWithSchema(val, validationSchema(), label(), getMatchFieldValue);
       return { isValid: result.isValid, error: result.firstError };
     }
   });
@@ -7260,16 +7307,55 @@ function TextInput($$anchor, $$props) {
       }
     }
   });
+  user_effect(() => {
+    if (!validationSchema().match || !baseInput.state.hasInteracted) return;
+    if (validationSchema().match.fieldRef) ;
+    if (validationSchema().match.fieldId && typeof document !== "undefined") {
+      const handleFieldValueChanged = (event2) => {
+        var _a2, _b;
+        const customEvent = event2;
+        const changedFieldId = (_a2 = customEvent.detail) === null || _a2 === void 0 ? void 0 : _a2.fieldId;
+        if (changedFieldId === ((_b = validationSchema().match) === null || _b === void 0 ? void 0 : _b.fieldId)) {
+          if (baseInput.state.inputElement) {
+            const syntheticEvent = new Event("input", { bubbles: true });
+            baseInput.handlers.handleInput(syntheticEvent);
+          }
+        }
+      };
+      document.addEventListener("field-value-changed", handleFieldValueChanged);
+      return () => {
+        document.removeEventListener("field-value-changed", handleFieldValueChanged);
+      };
+    }
+  });
   function handleInput(event2) {
+    var _a2;
     const target = event2.target;
-    value(target.value);
+    const newValue = target.value;
+    value(newValue);
     baseInput.handlers.handleInput(event2);
+    if (id() && ((_a2 = validationSchema().match) === null || _a2 === void 0 ? void 0 : _a2.fieldId)) {
+      const matchEvent = new CustomEvent("field-value-changed", {
+        detail: { fieldId: id(), value: newValue },
+        bubbles: true,
+        composed: true
+      });
+      if (typeof document !== "undefined") {
+        document.dispatchEvent(matchEvent);
+      }
+    }
     get$1(eventDispatcher).dispatch(ComponentEvents.TEXT_INPUT, createEventDetail());
     if (oninput()) {
       uiLogger.info("TextInput: oninput", event2);
       oninput()(event2);
     }
   }
+  function handlePaste(event2) {
+    if (blockPaste()) {
+      event2.preventDefault();
+      return false;
+    }
+  }
   function handleChange2(event2) {
     baseInput.handlers.handleChange(event2);
     get$1(eventDispatcher).dispatch(ComponentEvents.TEXT_CHANGE, createEventDetail());
@@ -7400,6 +7486,7 @@ function TextInput($$anchor, $$props) {
       });
       event$1("focus", textarea, handleFocus);
       event$1("blur", textarea, handleBlur);
+      event$1("paste", textarea, handlePaste);
       bind_value(textarea, value);
       append($$anchor2, textarea);
     };
@@ -7428,6 +7515,7 @@ function TextInput($$anchor, $$props) {
       });
       event$1("focus", input, handleFocus);
       event$1("blur", input, handleBlur);
+      event$1("paste", input, handlePaste);
       bind_value(input, value);
       append($$anchor2, input);
     };
@@ -7727,6 +7815,13 @@ function TextInput($$anchor, $$props) {
     set resize($$value = "vertical") {
       resize($$value);
       flushSync();
+    },
+    get blockPaste() {
+      return blockPaste();
+    },
+    set blockPaste($$value = false) {
+      blockPaste($$value);
+      flushSync();
     }
   });
 }
@@ -7758,7 +7853,8 @@ customElements.define("alviere-text-input", create_custom_element(
     type: {},
     rows: {},
     cols: {},
-    resize: {}
+    resize: {},
+    blockPaste: {}
   },
   [],
   [
@@ -10320,7 +10416,7 @@ function createBaseFormMixin(options) {
 }
 var root_1$8 = /* @__PURE__ */ from_html(`<h2 class="svelte-hf49ea">Create Consumer Account</h2>`);
 var root_2$3 = /* @__PURE__ */ from_html(`<div><alviere-spinner><span slot="message"><!></span></alviere-spinner></div>`, 2);
-var root_11 = /* @__PURE__ */ from_html(`<span class="validation-hint svelte-hf49ea">Please fill in all required fields to continue</span>`);
+var root_11$1 = /* @__PURE__ */ from_html(`<span class="validation-hint svelte-hf49ea">Please fill in all required fields to continue</span>`);
 var root_12$2 = /* @__PURE__ */ from_html(`<span class="validation-error">Please fix the errors above</span>`);
 var root$8 = /* @__PURE__ */ from_html(`<div class="alviere-create-consumer-account svelte-hf49ea"><!> <!> <form novalidate=""><div class="form-section svelte-hf49ea"><h3 class="svelte-hf49ea">Personal Information</h3> <div class="form-row svelte-hf49ea"><!> <!></div> <div class="form-row svelte-hf49ea"><!></div></div> <div class="form-actions svelte-hf49ea"><div class="form-status svelte-hf49ea"><!> <!></div> <alviere-button><!></alviere-button></div></form></div>`, 2);
 const $$css$a = {
@@ -10838,7 +10934,7 @@ function CreateConsumerAccount($$anchor, $$props) {
   var node_9 = child(div_6);
   {
     var consequent_6 = ($$anchor2) => {
-      var span_1 = root_11();
+      var span_1 = root_11$1();
       append($$anchor2, span_1);
     };
     if_block(node_9, ($$render) => {
@@ -10982,104 +11078,89 @@ customElements.define("alviere-create-consumer-account", create_custom_element(
   [],
   true
 ));
+const bankInfoCache = /* @__PURE__ */ new Map();
 const COMMON_ROUTING_NUMBERS = {
   // Federal Reserve Banks (these are the actual routing numbers)
   "011000015": {
+    routing_number: "011000015",
     name: "Federal Reserve Bank",
-    type: "Federal Reserve",
-    region: "Atlanta",
-    description: "Federal Reserve Bank of Atlanta"
+    city: "Atlanta"
   },
   "021001208": {
+    routing_number: "021001208",
     name: "Federal Reserve Bank",
-    type: "Federal Reserve",
-    region: "East Rutherford",
-    description: "Federal Reserve Bank of East Rutherford"
+    city: "East Rutherford"
   },
   "021000322": {
+    routing_number: "021000322",
     name: "Bank of America, N.A.",
-    type: "Bank of America",
-    region: "Richmond",
-    description: "Bank of America Richmond"
+    city: "Richmond"
   },
   "031000503": {
+    routing_number: "031000503",
     name: "Wells Fargo Bank",
-    type: "Wells Fargo",
-    region: "Minneapolis",
-    description: "Wells Fargo Bank, N.A."
+    city: "Minneapolis"
   },
   "041000014": {
+    routing_number: "041000014",
     name: "Federal Reserve Bank",
-    type: "Federal Reserve",
-    region: "Atlanta",
-    description: "Federal Reserve Bank of Atlanta (ACH Department)"
+    city: "Atlanta"
   },
   "051000017": {
-    name: "Bank of America, N.A.",
-    type: "Bank of America",
-    region: "Henrico",
-    description: "Bank of America Henrico"
+    routing_number: "051000017",
+    name: "Bank of A  merica, N.A.",
+    city: "Henrico"
   },
   "061000104": {
+    routing_number: "061000104",
     name: "Suntrust",
-    type: "Suntrust",
-    region: "Orlando",
-    description: "Suntrust Bank Orlando"
+    city: "Orlando"
   },
   "071000013": {
+    routing_number: "071000013",
     name: "JPMorgan Chase",
-    type: "JPMorgan Chase",
-    region: "Belleville",
-    description: "JPMorgan Chase Belleville"
+    city: "Belleville"
   },
   "081000032": {
+    routing_number: "081000032",
     name: "Bank of America, N.A.",
-    type: "Bank of America",
-    region: "Henrico",
-    description: "Bank of America Henrico"
+    city: "Henrico"
   },
   "091000019": {
+    routing_number: "091000019",
     name: "Wells Fargo Bank",
-    type: "Wells Fargo",
-    region: "Minneapolis",
-    description: "Wells Fargo Bank NA (Minnesota)"
+    city: "Minneapolis"
   },
   "111000025": {
+    routing_number: "111000025",
     name: "Bank of America, N.A.",
-    type: "Bank of America",
-    region: "Henrico",
-    description: "Bank of America Henrico"
+    city: "Henrico"
   },
   "121058313": {
+    routing_number: "121058313",
     name: "Federal Reserve Bank SF- B, S & R",
-    type: "Federal Reserve",
-    region: "San Francisco",
-    description: "Federal Reserve Bank of San Francisco"
+    city: "San Francisco"
   },
   // Major commercial banks (verified routing numbers)
   "021000021": {
+    routing_number: "021000021",
     name: "JPMorgan Chase Bank",
-    type: "JPMorgan Chase",
-    region: "Tampa",
-    description: "JPMorgan Chase Tampa"
+    city: "Tampa"
   },
   "026009593": {
+    routing_number: "026009593",
     name: "Bank of America, N.A.",
-    type: "Bank of America",
-    region: "Richmond",
-    description: "Bank of America, N.A."
+    city: "Richmond"
   },
   "121000248": {
+    routing_number: "121000248",
     name: "Wells Fargo Bank",
-    type: "Wells Fargo",
-    region: "Minneapolis",
-    description: "Wells Fargo Bank, National Association"
+    city: "Minneapolis"
   },
   "021000089": {
+    routing_number: "021000089",
     name: "Citibank",
-    type: "Citibank",
-    region: "New Castle",
-    description: "Citibank, N.A."
+    city: "New Castle"
   }
 };
 const FEDERAL_RESERVE_REGIONS = {
@@ -11096,7 +11177,35 @@ const FEDERAL_RESERVE_REGIONS = {
   "11": "Dallas",
   "12": "San Francisco"
 };
-function lookupRoutingNumber(routingNumber) {
+async function lookupRoutingNumber(routingNumber, alviereCore) {
+  const cleanRouting = routingNumber.replace(/[-\s]/g, "");
+  if (!/^\d{9}$/.test(cleanRouting)) {
+    return null;
+  }
+  if (bankInfoCache.has(cleanRouting)) {
+    return bankInfoCache.get(cleanRouting);
+  }
+  if (alviereCore) {
+    try {
+      const bankInfoService = alviereCore.createBankInfoService();
+      const apiResult = await bankInfoService.getBankInfo(cleanRouting);
+      if (apiResult && apiResult.bank_info) {
+        return apiResult.bank_info;
+      }
+    } catch (error) {
+      alviereCore.getLogger().info(`Bank info API call failed, using local lookup: ${error}`);
+      alviereCore.getLogger().warn(
+        "⚠️ [DEPRECATED] Using local routing number lookup as fallback. This will be removed in a future version. Ensure API connectivity for accurate bank information."
+      );
+      return localLookupRoutingNumber(cleanRouting);
+    }
+  }
+  alviereCore == null ? void 0 : alviereCore.getLogger().warn(
+    "⚠️ [DEPRECATED] Using local routing number lookup. This will be removed in a future version. Pass AlviereCore instance to lookupRoutingNumber() for API-based lookup."
+  );
+  return localLookupRoutingNumber(cleanRouting);
+}
+function localLookupRoutingNumber(routingNumber) {
   const cleanRouting = routingNumber.replace(/[-\s]/g, "");
   if (!/^\d{9}$/.test(cleanRouting)) {
     return null;
@@ -11107,48 +11216,47 @@ function lookupRoutingNumber(routingNumber) {
   const fedSymbol = cleanRouting.substring(0, 2);
   if (FEDERAL_RESERVE_REGIONS[fedSymbol]) {
     return {
+      routing_number: cleanRouting,
       name: "Federal Reserve Bank",
-      type: "Federal Reserve",
-      region: FEDERAL_RESERVE_REGIONS[fedSymbol],
-      description: `Federal Reserve Bank of ${FEDERAL_RESERVE_REGIONS[fedSymbol]}`
+      city: FEDERAL_RESERVE_REGIONS[fedSymbol]
     };
   }
   const firstDigit = parseInt(cleanRouting.charAt(0));
   if (firstDigit === 0 || firstDigit === 1) {
     return {
+      routing_number: cleanRouting,
       name: "Federal Reserve Bank",
-      type: "Federal Reserve",
-      description: "Federal Reserve Bank (based on routing pattern)"
+      city: FEDERAL_RESERVE_REGIONS[fedSymbol]
     };
   } else if (firstDigit === 2 || firstDigit === 3) {
     return {
+      routing_number: cleanRouting,
       name: "Commercial Bank",
-      type: "Commercial Bank",
-      description: "Commercial Bank (based on routing pattern)"
+      city: "Unknown"
     };
   } else if (firstDigit === 4 || firstDigit === 5) {
     return {
+      routing_number: cleanRouting,
       name: "Thrift Institution",
-      type: "Thrift Institution",
-      description: "Thrift Institution (based on routing pattern)"
+      city: "Unknown"
     };
   } else if (firstDigit === 6 || firstDigit === 7) {
     return {
+      routing_number: cleanRouting,
       name: "Credit Union",
-      type: "Credit Union",
-      description: "Credit Union (based on routing pattern)"
+      city: "Unknown"
     };
   } else if (firstDigit === 8) {
     return {
+      routing_number: cleanRouting,
       name: "Special Purpose",
-      type: "Commercial Bank",
-      description: "Special Purpose Bank (based on routing pattern)"
+      city: "Unknown"
     };
   }
   return {
+    routing_number: cleanRouting,
     name: "Unknown Bank",
-    type: "Commercial Bank",
-    description: "Unable to determine bank type from routing number"
+    city: "Unknown"
   };
 }
 function formatRoutingNumber(routingNumber) {
@@ -11168,10 +11276,12 @@ var root_2$2 = /* @__PURE__ */ from_html(`<div class="bank-accounts-section svel
 var root_9$1 = /* @__PURE__ */ from_html(`<alviere-button><span class="alviere-add-bank-account__button__label">Back to Bank Accounts</span></alviere-button>`, 2);
 var root_13$1 = /* @__PURE__ */ from_html(`<span class="bank-region svelte-hrbllu"> </span>`);
 var root_12$1 = /* @__PURE__ */ from_html(`<div class="routing-info svelte-hrbllu"><div class="routing-info-header svelte-hrbllu"><span class="bank-name svelte-hrbllu"> </span> <!></div></div>`);
-var root_10 = /* @__PURE__ */ from_html(`<div class="alviere-add-bank-account__form__row alviere-add-bank-account__form__row--banking-info svelte-hrbllu"><alviere-badge>ACH</alviere-badge> <!></div> <div class="alviere-add-bank-account__form__row svelte-hrbllu"><!></div> <div class="alviere-add-bank-account__form__row svelte-hrbllu"><!></div>`, 3);
-var root_14$1 = /* @__PURE__ */ from_html(`<span class="validation-hint svelte-hrbllu">Please fill in all required fields to continue</span>`);
-var root_15$1 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-hrbllu">Please fix the errors above</span>`);
-var root_16$1 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-hrbllu" role="alert"> </span>`);
+var root_14$1 = /* @__PURE__ */ from_html(`<alviere-spinner></alviere-spinner>`, 2);
+var root_11 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_10 = /* @__PURE__ */ from_html(`<div class="alviere-add-bank-account__form__row alviere-add-bank-account__form__row--banking-info svelte-hrbllu"><alviere-badge>ACH</alviere-badge> <!></div> <div class="alviere-add-bank-account__form__row svelte-hrbllu"><!> <!></div> <div class="alviere-add-bank-account__form__row svelte-hrbllu"><!> <!></div>`, 3);
+var root_17$1 = /* @__PURE__ */ from_html(`<span class="validation-hint svelte-hrbllu">Please fill in all required fields to continue</span>`);
+var root_18$1 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-hrbllu">Please fix the errors above</span>`);
+var root_19$1 = /* @__PURE__ */ from_html(`<span class="validation-error svelte-hrbllu" role="alert"> </span>`);
 var root_8$1 = /* @__PURE__ */ from_html(`<form novalidate="" class="alviere-add-bank-account__form svelte-hrbllu"><div class="alviere-add-bank-account__header svelte-hrbllu"><h2 class="svelte-hrbllu">Add Bank Account</h2> <!></div> <div class="alviere-add-bank-account__form__section"><!></div> <div class="form-actions svelte-hrbllu"><div class="form-status svelte-hrbllu"><!> <!> <!></div> <alviere-button> </alviere-button></div></form>`, 2);
 var root$7 = /* @__PURE__ */ from_html(`<div class="alviere-add-bank-account svelte-hrbllu"><!> <!> <!></div>`);
 const $$css$9 = {
@@ -11181,7 +11291,7 @@ const $$css$9 = {
 function AddBankAccount($$anchor, $$props) {
   push($$props, true);
   append_styles$1($$anchor, $$css$9);
-  let jwt = prop($$props, "jwt", 7, ""), accountUuid = prop($$props, "accountUuid", 7, ""), debug = prop($$props, "debug", 7, true), onsuccess = prop($$props, "onsuccess", 15), publicCertificate = prop($$props, "publicCertificate", 7, ""), publicCertificateId = prop($$props, "publicCertificateId", 7, "");
+  let jwt = prop($$props, "jwt", 7, ""), accountUuid = prop($$props, "accountUuid", 7, ""), debug = prop($$props, "debug", 7, true), onsuccess = prop($$props, "onsuccess", 15), publicCertificate = prop($$props, "publicCertificate", 7, ""), publicCertificateId = prop($$props, "publicCertificateId", 7, ""), requireRoutingAndAccountConfirmation = prop($$props, "requireRoutingAndAccountConfirmation", 7, false);
   const initialFormData = {
     external_id: "",
     country: "USA",
@@ -11196,29 +11306,59 @@ function AddBankAccount($$anchor, $$props) {
     iban_details: { iban: "" },
     swift_details: { swift_code: "", account_number: "" },
     clabe_details: { swift_code: "", account_number: "" },
-    metadata: ""
+    metadata: "",
+    // Confirmation fields
+    confirm_routing_number: "",
+    confirm_account_number: ""
   };
-  const fieldSchemas = {
-    external_id: { required: true },
-    country: { required: true },
-    currency: { required: true },
-    bankAccountType: { required: true },
-    ach_routing_number: {
-      required: "Routing number is required",
-      pattern: {
-        regex: /^\d{9}$/,
-        message: "Routing number must be exactly 9 digits"
+  const fieldSchemas = Object.assign(
+    {
+      external_id: { required: true },
+      country: { required: true },
+      currency: { required: true },
+      bankAccountType: { required: true },
+      ach_routing_number: {
+        required: "Routing number is required",
+        pattern: {
+          regex: /^\d{9}$/,
+          message: "Routing number must be exactly 9 digits"
+        }
+      },
+      ach_account_number: {
+        required: "Account number is required",
+        numeric: "Account number must contain only digits",
+        minLength: {
+          value: 3,
+          message: "Account number must be at least 3 digits"
+        }
       }
     },
-    ach_account_number: {
-      required: "Account number is required",
-      numeric: "Account number must contain only digits",
-      minLength: {
-        value: 3,
-        message: "Account number must be at least 3 digits"
+    requireRoutingAndAccountConfirmation() && {
+      confirm_routing_number: {
+        required: "Please confirm your routing number",
+        pattern: {
+          regex: /^\d{9}$/,
+          message: "Routing number must be exactly 9 digits"
+        },
+        match: {
+          fieldRef: () => baseForm.state.formData.ach_details.routing_number || "",
+          message: "Routing number confirmation does not match"
+        }
+      },
+      confirm_account_number: {
+        required: "Please confirm your account number",
+        numeric: "Account number must contain only digits",
+        minLength: {
+          value: 3,
+          message: "Account number must be at least 3 digits"
+        },
+        match: {
+          fieldRef: () => baseForm.state.formData.ach_details.account_number || "",
+          message: "Account number confirmation does not match"
+        }
       }
     }
-  };
+  );
   const baseForm = createBaseFormMixin({
     jwt: jwt(),
     debug: debug(),
@@ -11239,6 +11379,8 @@ function AddBankAccount($$anchor, $$props) {
   let showAddForm = /* @__PURE__ */ state(false);
   let selectedBankAccountUuid = /* @__PURE__ */ state(null);
   let formError = /* @__PURE__ */ state(null);
+  let bankInfo = /* @__PURE__ */ state(null);
+  let isLoadingBankInfo = /* @__PURE__ */ state(false);
   let hostElement = /* @__PURE__ */ state(null);
   const hasCredentials = /* @__PURE__ */ user_derived(() => jwt() && accountUuid());
   user_effect(() => {
@@ -11249,21 +11391,29 @@ function AddBankAccount($$anchor, $$props) {
       uiLogger.info("🔄 Generated new external_id for bank account:", newExternalId);
     }
   });
+  user_effect(() => {
+    const routingNumber = baseForm.state.formData.ach_details.routing_number;
+    if (routingNumber && routingNumber.length === 9 && baseForm.state.alviereCore) {
+      set(isLoadingBankInfo, true);
+      lookupRoutingNumber(routingNumber, baseForm.state.alviereCore).then((info) => {
+        set(bankInfo, info, true);
+      }).catch((error) => {
+        set(bankInfo, null);
+        console.warn("Failed to lookup bank info:", error);
+      }).finally(() => {
+        set(isLoadingBankInfo, false);
+      });
+    } else {
+      set(bankInfo, null);
+    }
+  });
   onMount(async () => {
     set(isCheckingBankAccounts, true);
     if (!get$1(hasCredentials)) {
       throw new Error("Missing required credentials");
     }
-    if (accountUuid() !== "862a2524-ce32-4fa7-b138-e7ac7e93c022") {
-      await checkForBankAccounts();
-    }
     baseForm.actions.setFieldValue("external_id", `bank_${Date.now()}_${Math.random().toString(36).substring(2, 8)}`);
-    setTimeout(
-      () => {
-        set(isCheckingBankAccounts, false);
-      },
-      1e3
-    );
+    await checkForBankAccounts();
   });
   async function checkForBankAccounts() {
     var _a2;
@@ -11277,6 +11427,7 @@ function AddBankAccount($$anchor, $$props) {
       get$1(bankAccounts).bank_accounts = accountsWithExpansion.filter((account) => account.status === "ACTIVE");
       set(selectedBankAccountUuid, ((_a2 = get$1(bankAccounts).bank_accounts[0]) === null || _a2 === void 0 ? void 0 : _a2.payment_method_uuid) || null, true);
     }
+    set(isCheckingBankAccounts, false);
   }
   async function deleteBankAccount(uuid) {
     set(isSubmitting, true);
@@ -11323,18 +11474,6 @@ function AddBankAccount($$anchor, $$props) {
         case "ACH":
           request.bank_account_details.ach_details = formData.ach_details;
           break;
-        case "EFT":
-          request.bank_account_details.eft_details = formData.eft_details;
-          break;
-        case "IBAN":
-          request.bank_account_details.iban_details = formData.iban_details;
-          break;
-        case "SWIFT":
-          request.bank_account_details.swift_details = formData.swift_details;
-          break;
-        case "CLABE":
-          request.bank_account_details.clabe_details = formData.clabe_details;
-          break;
       }
       const paymentsService = baseForm.state.alviereCore.createPaymentsService();
       const response = await paymentsService.processAddBankAccountWithValidation(accountUuid(), request);
@@ -11372,48 +11511,15 @@ function AddBankAccount($$anchor, $$props) {
     }
   }
   function getBankAccountDisplayInfo(bankAccount) {
-    var _a2;
     const details = bankAccount.bank_account_details;
     if (details === null || details === void 0 ? void 0 : details.ach_details) {
-      const bankInfo = lookupRoutingNumber(details.ach_details.routing_number || "");
+      const bankInfo2 = lookupRoutingNumber(details.ach_details.routing_number || "");
       return {
         type: "ACH",
         accountNumber: bankAccount.last_4 || "N/A",
         routingNumber: formatRoutingNumber(details.ach_details.routing_number || ""),
         accountType: bankAccount.type || "N/A",
-        bankInfo
-      };
-    } else if (details === null || details === void 0 ? void 0 : details.eft_details) {
-      return {
-        type: "EFT",
-        accountNumber: bankAccount.last_4 || "N/A",
-        routingNumber: `${details.eft_details.institution_number || ""}-${details.eft_details.transit_number || ""}`,
-        accountType: "N/A",
-        bankInfo: null
-      };
-    } else if (details === null || details === void 0 ? void 0 : details.iban_details) {
-      return {
-        type: "IBAN",
-        accountNumber: bankAccount.last_4 || "N/A",
-        routingNumber: ((_a2 = details.iban_details.iban) === null || _a2 === void 0 ? void 0 : _a2.slice(0, 4)) || "N/A",
-        accountType: "N/A",
-        bankInfo: null
-      };
-    } else if (details === null || details === void 0 ? void 0 : details.swift_details) {
-      return {
-        type: "SWIFT",
-        accountNumber: bankAccount.last_4 || "N/A",
-        routingNumber: details.swift_details.swift_code || "N/A",
-        accountType: "N/A",
-        bankInfo: null
-      };
-    } else if (details === null || details === void 0 ? void 0 : details.clabe_details) {
-      return {
-        type: "CLABE",
-        accountNumber: bankAccount.last_4 || "N/A",
-        routingNumber: details.clabe_details.swift_code || "N/A",
-        accountType: "N/A",
-        bankInfo: null
+        bankInfo: bankInfo2
       };
     }
     return {
@@ -11629,7 +11735,7 @@ function AddBankAccount($$anchor, $$props) {
   }
   var node_6 = sibling(node_1, 2);
   {
-    var consequent_14 = ($$anchor2) => {
+    var consequent_17 = ($$anchor2) => {
       var form = root_8$1();
       var div_18 = child(form);
       var node_7 = sibling(child(div_18), 2);
@@ -11650,7 +11756,7 @@ function AddBankAccount($$anchor, $$props) {
       var div_19 = sibling(div_18, 2);
       var node_8 = child(div_19);
       {
-        var consequent_10 = ($$anchor3) => {
+        var consequent_13 = ($$anchor3) => {
           var fragment_1 = root_10();
           var div_20 = first_child(fragment_1);
           var alviere_badge_1 = child(div_20);
@@ -11658,9 +11764,8 @@ function AddBankAccount($$anchor, $$props) {
           set_custom_element_data(alviere_badge_1, "variant", "tertiary");
           var node_9 = sibling(alviere_badge_1, 2);
           {
-            var consequent_9 = ($$anchor4) => {
-              var fragment_2 = comment();
-              const bankInfo = /* @__PURE__ */ user_derived(() => lookupRoutingNumber(baseForm.state.formData.ach_details.routing_number));
+            var consequent_10 = ($$anchor4) => {
+              var fragment_2 = root_11();
               var node_10 = first_child(fragment_2);
               {
                 var consequent_8 = ($$anchor5) => {
@@ -11675,35 +11780,51 @@ function AddBankAccount($$anchor, $$props) {
                       var span_10 = root_13$1();
                       var text_12 = child(span_10);
                       reset(span_10);
-                      template_effect(() => set_text(text_12, `(${get$1(bankInfo).region ?? ""})`));
+                      template_effect(() => set_text(text_12, `(${get$1(bankInfo).city ?? ""})`));
                       append($$anchor6, span_10);
                     };
                     if_block(node_11, ($$render) => {
-                      if (get$1(bankInfo).region) $$render(consequent_7);
+                      var _a2;
+                      if ((_a2 = get$1(bankInfo)) == null ? void 0 : _a2.city) $$render(consequent_7);
                     });
                   }
                   reset(div_22);
                   reset(div_21);
-                  template_effect(() => set_text(text_11, get$1(bankInfo).name));
+                  template_effect(() => {
+                    var _a2;
+                    return set_text(text_11, (_a2 = get$1(bankInfo)) == null ? void 0 : _a2.name);
+                  });
                   append($$anchor5, div_21);
                 };
                 if_block(node_10, ($$render) => {
                   if (get$1(bankInfo)) $$render(consequent_8);
                 });
               }
+              var node_12 = sibling(node_10, 2);
+              {
+                var consequent_9 = ($$anchor5) => {
+                  var alviere_spinner_1 = root_14$1();
+                  set_custom_element_data(alviere_spinner_1, "size", "sm");
+                  set_custom_element_data(alviere_spinner_1, "variant", "circular");
+                  append($$anchor5, alviere_spinner_1);
+                };
+                if_block(node_12, ($$render) => {
+                  if (get$1(isLoadingBankInfo)) $$render(consequent_9);
+                });
+              }
               append($$anchor4, fragment_2);
             };
             if_block(node_9, ($$render) => {
-              if (baseForm.state.formData.ach_details.routing_number && baseForm.state.formData.ach_details.routing_number.length === 9) $$render(consequent_9);
+              if (baseForm.state.formData.ach_details.routing_number && baseForm.state.formData.ach_details.routing_number.length === 9) $$render(consequent_10);
             });
           }
           reset(div_20);
           var div_23 = sibling(div_20, 2);
-          var node_12 = child(div_23);
+          var node_13 = child(div_23);
           {
             let $0 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.ach_routing_number ? "invalid" : "neutral");
             let $1 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.ach_routing_number || "");
-            TextInput(node_12, {
+            TextInput(node_13, {
               get value() {
                 return baseForm.state.formData.ach_details.routing_number;
               },
@@ -11712,6 +11833,9 @@ function AddBankAccount($$anchor, $$props) {
               helpText: "You can find your routing number on your check or bank statement.",
               required: true,
               id: "ach_routing",
+              get validationSchema() {
+                return fieldSchemas.ach_routing_number;
+              },
               get validationState() {
                 return get$1($0);
               },
@@ -11725,13 +11849,50 @@ function AddBankAccount($$anchor, $$props) {
               }
             });
           }
+          var node_14 = sibling(node_13, 2);
+          {
+            var consequent_11 = ($$anchor4) => {
+              {
+                let $0 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.confirm_routing_number ? "invalid" : "neutral");
+                let $1 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.confirm_routing_number || "");
+                TextInput($$anchor4, {
+                  get value() {
+                    return baseForm.state.formData.confirm_routing_number;
+                  },
+                  label: "Confirm Routing Number",
+                  placeholder: "Re-enter 9-digit routing number",
+                  helpText: "Please confirm your routing number to ensure accuracy.",
+                  required: true,
+                  id: "confirm_ach_routing",
+                  get validationSchema() {
+                    return fieldSchemas.confirm_routing_number;
+                  },
+                  get validationState() {
+                    return get$1($0);
+                  },
+                  get errorMessage() {
+                    return get$1($1);
+                  },
+                  oninput: (e) => {
+                    const newValue = e.target.value;
+                    baseForm.state.formData.confirm_routing_number = newValue;
+                    baseForm.handlers.handleFieldChange("confirm_routing_number", newValue);
+                  },
+                  blockPaste: true
+                });
+              }
+            };
+            if_block(node_14, ($$render) => {
+              if (requireRoutingAndAccountConfirmation()) $$render(consequent_11);
+            });
+          }
           reset(div_23);
           var div_24 = sibling(div_23, 2);
-          var node_13 = child(div_24);
+          var node_15 = child(div_24);
           {
             let $0 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.ach_account_number ? "invalid" : "neutral");
             let $1 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.ach_account_number || "");
-            TextInput(node_13, {
+            TextInput(node_15, {
               get value() {
                 return baseForm.state.formData.ach_details.account_number;
               },
@@ -11740,6 +11901,9 @@ function AddBankAccount($$anchor, $$props) {
               required: true,
               minlength: 3,
               id: "ach_account",
+              get validationSchema() {
+                return fieldSchemas.ach_account_number;
+              },
               get validationState() {
                 return get$1($0);
               },
@@ -11753,47 +11917,85 @@ function AddBankAccount($$anchor, $$props) {
               }
             });
           }
+          var node_16 = sibling(node_15, 2);
+          {
+            var consequent_12 = ($$anchor4) => {
+              {
+                let $0 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.confirm_account_number ? "invalid" : "neutral");
+                let $1 = /* @__PURE__ */ user_derived(() => baseForm.state.validationErrors.confirm_account_number || "");
+                TextInput($$anchor4, {
+                  get value() {
+                    return baseForm.state.formData.confirm_account_number;
+                  },
+                  label: "Confirm Account Number",
+                  placeholder: "Re-enter account number",
+                  helpText: "Please confirm your account number to ensure accuracy.",
+                  required: true,
+                  minlength: 3,
+                  id: "confirm_ach_account",
+                  get validationSchema() {
+                    return fieldSchemas.confirm_account_number;
+                  },
+                  get validationState() {
+                    return get$1($0);
+                  },
+                  get errorMessage() {
+                    return get$1($1);
+                  },
+                  oninput: (e) => {
+                    const newValue = e.target.value;
+                    baseForm.state.formData.confirm_account_number = newValue;
+                    baseForm.handlers.handleFieldChange("confirm_account_number", newValue);
+                  },
+                  blockPaste: true
+                });
+              }
+            };
+            if_block(node_16, ($$render) => {
+              if (requireRoutingAndAccountConfirmation()) $$render(consequent_12);
+            });
+          }
           reset(div_24);
           append($$anchor3, fragment_1);
         };
         if_block(node_8, ($$render) => {
-          if (baseForm.state.formData.bankAccountType === "ACH") $$render(consequent_10);
+          if (baseForm.state.formData.bankAccountType === "ACH") $$render(consequent_13);
         });
       }
       reset(div_19);
       var div_25 = sibling(div_19, 2);
       var div_26 = child(div_25);
-      var node_14 = child(div_26);
+      var node_17 = child(div_26);
       {
-        var consequent_11 = ($$anchor3) => {
-          var span_11 = root_14$1();
+        var consequent_14 = ($$anchor3) => {
+          var span_11 = root_17$1();
           append($$anchor3, span_11);
         };
-        if_block(node_14, ($$render) => {
-          if (!baseForm.computed.canSubmit) $$render(consequent_11);
+        if_block(node_17, ($$render) => {
+          if (!baseForm.computed.canSubmit) $$render(consequent_14);
         });
       }
-      var node_15 = sibling(node_14, 2);
+      var node_18 = sibling(node_17, 2);
       {
-        var consequent_12 = ($$anchor3) => {
-          var span_12 = root_15$1();
+        var consequent_15 = ($$anchor3) => {
+          var span_12 = root_18$1();
           append($$anchor3, span_12);
         };
-        if_block(node_15, ($$render) => {
-          if (baseForm.computed.hasErrors && baseForm.computed.canSubmit) $$render(consequent_12);
+        if_block(node_18, ($$render) => {
+          if (baseForm.computed.hasErrors && baseForm.computed.canSubmit) $$render(consequent_15);
         });
       }
-      var node_16 = sibling(node_15, 2);
+      var node_19 = sibling(node_18, 2);
       {
-        var consequent_13 = ($$anchor3) => {
-          var span_13 = root_16$1();
+        var consequent_16 = ($$anchor3) => {
+          var span_13 = root_19$1();
           var text_13 = child(span_13, true);
           reset(span_13);
           template_effect(() => set_text(text_13, get$1(formError)));
           append($$anchor3, span_13);
         };
-        if_block(node_16, ($$render) => {
-          if (get$1(formError)) $$render(consequent_13);
+        if_block(node_19, ($$render) => {
+          if (get$1(formError)) $$render(consequent_16);
         });
       }
       reset(div_26);
@@ -11816,7 +12018,7 @@ function AddBankAccount($$anchor, $$props) {
       append($$anchor2, form);
     };
     if_block(node_6, ($$render) => {
-      if (get$1(showAddForm) || !get$1(isCheckingBankAccounts) && !get$1(bankAccounts).bank_accounts.length) $$render(consequent_14);
+      if (get$1(showAddForm) || !get$1(isCheckingBankAccounts) && !get$1(bankAccounts).bank_accounts.length) $$render(consequent_17);
     });
   }
   reset(div);
@@ -11864,6 +12066,13 @@ function AddBankAccount($$anchor, $$props) {
     set publicCertificateId($$value = "") {
       publicCertificateId($$value);
       flushSync();
+    },
+    get requireRoutingAndAccountConfirmation() {
+      return requireRoutingAndAccountConfirmation();
+    },
+    set requireRoutingAndAccountConfirmation($$value = false) {
+      requireRoutingAndAccountConfirmation($$value);
+      flushSync();
     }
   });
 }
@@ -11875,7 +12084,8 @@ customElements.define("alviere-add-bank-account", create_custom_element(
     debug: {},
     onsuccess: {},
     publicCertificate: {},
-    publicCertificateId: {}
+    publicCertificateId: {},
+    requireRoutingAndAccountConfirmation: {}
   },
   [],
   [],
@@ -11894,7 +12104,7 @@ const $$css$8 = {
 function CheckoutConfirm($$anchor, $$props) {
   push($$props, true);
   append_styles$1($$anchor, $$css$8);
-  let jwt = prop($$props, "jwt", 15, ""), accountUuid = prop($$props, "accountUuid", 15, ""), paymentMethodUuid = prop($$props, "paymentMethodUuid", 15, ""), amount = prop($$props, "amount", 15, 0), debug = prop($$props, "debug", 15, true), publicCertificate = prop($$props, "publicCertificate", 15, ""), publicCertificateId = prop($$props, "publicCertificateId", 15, "");
+  let jwt = prop($$props, "jwt", 15, ""), accountUuid = prop($$props, "accountUuid", 15, ""), paymentMethodUuid = prop($$props, "paymentMethodUuid", 15, ""), amount = prop($$props, "amount", 15, ""), debug = prop($$props, "debug", 15, true), publicCertificate = prop($$props, "publicCertificate", 15, ""), publicCertificateId = prop($$props, "publicCertificateId", 15, "");
   let hostElement = /* @__PURE__ */ state(null);
   let isSending = /* @__PURE__ */ state(false);
   let selfAmount = /* @__PURE__ */ state(proxy(amount()));
@@ -11985,7 +12195,7 @@ function CheckoutConfirm($$anchor, $$props) {
     get amount() {
       return amount();
     },
-    set amount($$value = 0) {
+    set amount($$value = "") {
       amount($$value);
       flushSync();
     },
@@ -13251,7 +13461,8 @@ function buildStepProps(stepType, config) {
       }
       return {
         ...baseProps,
-        accountUuid
+        accountUuid,
+        requireRoutingAndAccountConfirmation: true
       };
     }
     case "CREATE_CONSUMER_ACCOUNT":
@@ -13341,7 +13552,7 @@ function MultiStepFlow($$anchor, $$props) {
   const [$$stores, $$cleanup] = setup_stores();
   const $flowCoreStore = () => store_get(flowCoreStore, "$flowCoreStore", $$stores);
   var _a2, _b;
-  let config = prop($$props, "config", 31, () => proxy({ steps: [] })), jwt = prop($$props, "jwt", 15, ""), businessUuid = prop($$props, "businessUuid", 15, ""), debug = prop($$props, "debug", 31, () => proxy("false")), publicCertificate = prop($$props, "publicCertificate", 15, ""), publicCertificateId = prop($$props, "publicCertificateId", 15, ""), amount = prop($$props, "amount", 15, 0), onflowcomplete = prop($$props, "onflowcomplete", 15), onstepcomplete = prop($$props, "onstepcomplete", 15), onsteperror = prop($$props, "onsteperror", 15), onreset = prop($$props, "onreset", 15);
+  let config = prop($$props, "config", 31, () => proxy({ steps: [] })), jwt = prop($$props, "jwt", 15, ""), businessUuid = prop($$props, "businessUuid", 15, ""), debug = prop($$props, "debug", 31, () => proxy("false")), publicCertificate = prop($$props, "publicCertificate", 15, ""), publicCertificateId = prop($$props, "publicCertificateId", 15, ""), amount = prop($$props, "amount", 15, ""), onflowcomplete = prop($$props, "onflowcomplete", 15), onstepcomplete = prop($$props, "onstepcomplete", 15), onsteperror = prop($$props, "onsteperror", 15), onreset = prop($$props, "onreset", 15);
   debug(debug() === "true");
   debug() && uiLogger.warn("MultiStepFlow initialized, debug:", debug());
   let flowElement = /* @__PURE__ */ state(null);
@@ -13415,7 +13626,7 @@ function MultiStepFlow($$anchor, $$props) {
             try {
               const parsedConfig = JSON.parse(attrConfig);
               if (parsedConfig.amount !== void 0) {
-                amount(Number(parsedConfig.amount));
+                amount(parsedConfig.amount);
               }
               config(Object.assign(Object.assign(Object.assign({}, config()), parsedConfig), { steps: parsedConfig.steps || config().steps || [] }));
               debug() && uiLogger.info("✅ Config loaded from attribute:", parsedConfig);
@@ -13449,7 +13660,7 @@ function MultiStepFlow($$anchor, $$props) {
                   publicCertificateId(value);
                   break;
                 case "amount":
-                  amount(Number(value));
+                  amount(value);
                   break;
               }
             }
@@ -13909,7 +14120,7 @@ function MultiStepFlow($$anchor, $$props) {
     get amount() {
       return amount();
     },
-    set amount($$value = 0) {
+    set amount($$value = "") {
       amount($$value);
       flushSync();
     },