@ozura/elements 0.1.0-beta.1

package/dist/oz-elements.umd.js

@@ -0,0 +1,1202 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.OzElements = {}));
+})(this, (function (exports) { 'use strict';
+
+    const THEME_DEFAULT = {
+        base: {
+            color: '#1a1a2e',
+            fontSize: '16px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            lineHeight: '1.5',
+            padding: '12px 14px',
+            backgroundColor: 'transparent',
+            caretColor: '#6366f1',
+            transition: 'color .15s ease',
+        },
+        focus: {
+            color: '#111827',
+        },
+        invalid: {
+            color: '#dc2626',
+        },
+        complete: {
+            color: '#16a34a',
+        },
+        placeholder: {
+            color: '#9ca3af',
+        },
+    };
+    const THEME_NIGHT = {
+        base: {
+            color: '#e5e7eb',
+            fontSize: '16px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            lineHeight: '1.5',
+            padding: '12px 14px',
+            backgroundColor: 'transparent',
+            caretColor: '#818cf8',
+            transition: 'color .15s ease',
+        },
+        focus: {
+            color: '#f9fafb',
+        },
+        invalid: {
+            color: '#fca5a5',
+        },
+        complete: {
+            color: '#86efac',
+        },
+        placeholder: {
+            color: '#6b7280',
+        },
+    };
+    const THEME_FLAT = {
+        base: {
+            color: '#374151',
+            fontSize: '16px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            lineHeight: '1.5',
+            padding: '12px 14px',
+            backgroundColor: 'transparent',
+            caretColor: '#6366f1',
+            transition: 'color .15s ease',
+            borderBottom: '2px solid #d1d5db',
+            borderRadius: '0px',
+        },
+        focus: {
+            color: '#111827',
+            borderBottom: '2px solid #6366f1',
+        },
+        invalid: {
+            color: '#dc2626',
+            borderBottom: '2px solid #dc2626',
+        },
+        complete: {
+            color: '#16a34a',
+            borderBottom: '2px solid #16a34a',
+        },
+        placeholder: {
+            color: '#9ca3af',
+        },
+    };
+    const THEMES = {
+        default: THEME_DEFAULT,
+        night: THEME_NIGHT,
+        flat: THEME_FLAT,
+    };
+    function variablesToStyle(vars) {
+        const base = {};
+        const focus = {};
+        const invalid = {};
+        const complete = {};
+        const placeholder = {};
+        if (vars.colorText)
+            base.color = vars.colorText;
+        if (vars.colorBackground)
+            base.backgroundColor = vars.colorBackground;
+        if (vars.fontFamily)
+            base.fontFamily = vars.fontFamily;
+        if (vars.fontSize)
+            base.fontSize = vars.fontSize;
+        if (vars.fontWeight)
+            base.fontWeight = vars.fontWeight;
+        if (vars.letterSpacing)
+            base.letterSpacing = vars.letterSpacing;
+        if (vars.lineHeight)
+            base.lineHeight = vars.lineHeight;
+        if (vars.padding)
+            base.padding = vars.padding;
+        if (vars.colorPrimary) {
+            focus.caretColor = vars.colorPrimary;
+            base.caretColor = vars.colorPrimary;
+        }
+        if (vars.colorDanger)
+            invalid.color = vars.colorDanger;
+        if (vars.colorSuccess)
+            complete.color = vars.colorSuccess;
+        if (vars.colorPlaceholder)
+            placeholder.color = vars.colorPlaceholder;
+        return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (Object.keys(base).length > 0 ? { base } : {})), (Object.keys(focus).length > 0 ? { focus } : {})), (Object.keys(invalid).length > 0 ? { invalid } : {})), (Object.keys(complete).length > 0 ? { complete } : {})), (Object.keys(placeholder).length > 0 ? { placeholder } : {}));
+    }
+    function mergeStyleConfigs(a, b) {
+        return {
+            base: Object.assign(Object.assign({}, a.base), b.base),
+            focus: Object.assign(Object.assign({}, a.focus), b.focus),
+            invalid: Object.assign(Object.assign({}, a.invalid), b.invalid),
+            complete: Object.assign(Object.assign({}, a.complete), b.complete),
+            placeholder: Object.assign(Object.assign({}, a.placeholder), b.placeholder),
+        };
+    }
+    /**
+     * Resolves an `Appearance` config into a flat `ElementStyleConfig`.
+     * Resolution order: theme defaults → variable overrides.
+     * The returned config is then used as the "base appearance" that
+     * per-element `style` overrides merge on top of.
+     */
+    function resolveAppearance(appearance) {
+        var _a, _b;
+        if (!appearance)
+            return undefined;
+        const theme = (_b = THEMES[(_a = appearance.theme) !== null && _a !== void 0 ? _a : 'default']) !== null && _b !== void 0 ? _b : THEMES.default;
+        if (!appearance.variables)
+            return theme;
+        const varStyles = variablesToStyle(appearance.variables);
+        return mergeStyleConfigs(theme, varStyles);
+    }
+    /**
+     * Merges a resolved appearance with per-element style overrides.
+     * Element styles always win over appearance styles.
+     */
+    function mergeAppearanceWithElementStyle(appearance, elementStyle) {
+        if (!appearance && !elementStyle)
+            return undefined;
+        if (!appearance)
+            return elementStyle;
+        if (!elementStyle)
+            return appearance;
+        return mergeStyleConfigs(appearance, elementStyle);
+    }
+
+    const BLOCKED_CSS_PATTERNS = /url\s*\(|expression\s*\(|javascript\s*:|vbscript\s*:|@import|behavior\s*:|binding\s*:|-moz-binding|-webkit-binding|<\s*script|<\s*style|\\[0-9a-fA-F]/i;
+    const CSS_BREAKOUT = /[{};<>]/;
+    const MAX_CSS_VALUE_LEN = 200;
+    function sanitizeStyleObj(obj) {
+        if (!obj)
+            return obj;
+        const clean = {};
+        for (const [k, v] of Object.entries(obj)) {
+            if (v === undefined) {
+                clean[k] = v;
+                continue;
+            }
+            if (typeof v !== 'string' || v.length > MAX_CSS_VALUE_LEN || BLOCKED_CSS_PATTERNS.test(v) || CSS_BREAKOUT.test(v))
+                continue;
+            clean[k] = v;
+        }
+        return clean;
+    }
+    function sanitizeStyles(style) {
+        if (!style)
+            return style;
+        return {
+            base: sanitizeStyleObj(style.base),
+            focus: sanitizeStyleObj(style.focus),
+            invalid: sanitizeStyleObj(style.invalid),
+            complete: sanitizeStyleObj(style.complete),
+            placeholder: sanitizeStyleObj(style.placeholder),
+        };
+    }
+    function sanitizeOptions(options) {
+        var _a;
+        const result = Object.assign(Object.assign({}, options), { placeholder: (_a = options.placeholder) === null || _a === void 0 ? void 0 : _a.slice(0, 100) });
+        // Only set style when provided; omitting it avoids clobbering existing style
+        // when merging (e.g. update({ placeholder: 'new' }) must not overwrite style with undefined).
+        if (options.style !== undefined) {
+            result.style = sanitizeStyles(options.style);
+        }
+        return result;
+    }
+    /**
+     * A proxy for one Ozura iframe element. Merchants interact with this object;
+     * it never holds raw card data — all sensitive values live in the iframe.
+     */
+    class OzElement {
+        constructor(elementType, options, vaultId, frameBaseUrl, fonts = [], appearanceStyle) {
+            this.iframe = null;
+            this._frameWindow = null;
+            this._ready = false;
+            this._destroyed = false;
+            this._loadTimer = null;
+            this.pendingMessages = [];
+            this.handlers = new Map();
+            this.elementType = elementType;
+            this.options = sanitizeOptions(options);
+            this.vaultId = vaultId;
+            this.frameBaseUrl = frameBaseUrl;
+            this.frameOrigin = new URL(frameBaseUrl).origin;
+            this.fonts = fonts;
+            this.appearanceStyle = appearanceStyle;
+            this.frameId = `oz-${elementType}-${Math.random().toString(36).slice(2, 10)}`;
+        }
+        /** The element type this proxy represents. */
+        get type() {
+            return this.elementType;
+        }
+        /** True once the element iframe has loaded and signalled ready. */
+        get isReady() {
+            return this._ready;
+        }
+        /**
+         * Mounts the element iframe into a container.
+         * Accepts either a CSS selector string or a direct HTMLElement reference
+         * (useful when integrating with React refs).
+         */
+        mount(target) {
+            var _a;
+            if (this._destroyed)
+                throw new Error('OzElements: cannot mount a destroyed element.');
+            if (this.iframe)
+                this.unmount();
+            const container = typeof target === 'string'
+                ? document.querySelector(target)
+                : target;
+            if (!container)
+                throw new Error(typeof target === 'string'
+                    ? `OzElements: mount target not found — no element matches "${target}"`
+                    : `OzElements: mount target not found — the provided HTMLElement is null or undefined`);
+            const iframe = document.createElement('iframe');
+            iframe.setAttribute('frameborder', '0');
+            iframe.setAttribute('scrolling', 'no');
+            iframe.setAttribute('allowtransparency', 'true');
+            iframe.style.cssText = 'border:none;width:100%;height:46px;display:block;overflow:hidden;';
+            iframe.title = `Secure ${this.elementType} input`;
+            // Use hash instead of query string — survives clean-URL redirects from static servers.
+            // parentOrigin lets the frame target postMessage to the merchant origin instead of '*'.
+            const parentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+            const src = `${this.frameBaseUrl}/frame/element-frame.html#type=${this.elementType}&vaultId=${encodeURIComponent(this.vaultId)}&frameId=${encodeURIComponent(this.frameId)}${parentOrigin ? `&parentOrigin=${encodeURIComponent(parentOrigin)}` : ''}`;
+            iframe.src = src;
+            container.appendChild(iframe);
+            this.iframe = iframe;
+            this._frameWindow = iframe.contentWindow;
+            const timeout = (_a = this.options.loadTimeoutMs) !== null && _a !== void 0 ? _a : 10000;
+            this._loadTimer = setTimeout(() => {
+                if (!this._ready && !this._destroyed) {
+                    this.emit('loaderror', { elementType: this.elementType, error: `${this.elementType} iframe failed to load within ${timeout}ms` });
+                }
+            }, timeout);
+        }
+        on(event, callback) {
+            if (this._destroyed)
+                return this;
+            if (!this.handlers.has(event))
+                this.handlers.set(event, []);
+            this.handlers.get(event).push(callback);
+            return this;
+        }
+        off(event, callback) {
+            const list = this.handlers.get(event);
+            if (list) {
+                const idx = list.indexOf(callback);
+                if (idx !== -1)
+                    list.splice(idx, 1);
+            }
+            return this;
+        }
+        once(event, callback) {
+            const wrapper = (payload) => {
+                this.off(event, wrapper);
+                callback(payload);
+            };
+            return this.on(event, wrapper);
+        }
+        update(options) {
+            if (this._destroyed)
+                return;
+            const safe = sanitizeOptions(options);
+            this.options = Object.assign(Object.assign({}, this.options), safe);
+            this.post({ type: 'OZ_UPDATE', options: safe });
+        }
+        clear() {
+            if (this._destroyed)
+                return;
+            this.post({ type: 'OZ_CLEAR' });
+        }
+        /**
+         * Removes the iframe from the DOM and resets internal state.
+         * Called automatically by `OzVault.destroy()`. Safe to call manually
+         * for partial teardown (e.g. swapping payment method in a SPA).
+         */
+        unmount() {
+            var _a;
+            if (this._loadTimer) {
+                clearTimeout(this._loadTimer);
+                this._loadTimer = null;
+            }
+            (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.remove();
+            this.iframe = null;
+            this._frameWindow = null;
+            this._ready = false;
+            this.pendingMessages = [];
+        }
+        /** Programmatically focus this element's input. Used internally for auto-advance. */
+        focus() {
+            if (this._destroyed)
+                return;
+            this.post({ type: 'OZ_FOCUS_REQUEST' });
+        }
+        /** Programmatically blur this element's input. */
+        blur() {
+            if (this._destroyed)
+                return;
+            this.post({ type: 'OZ_BLUR_REQUEST' });
+        }
+        /**
+         * Permanently destroys this element: unmounts it, clears all event handlers,
+         * and prevents future use. Distinct from `unmount()` which allows re-mounting.
+         */
+        destroy() {
+            this.unmount();
+            this.handlers.clear();
+            this._destroyed = true;
+        }
+        // ─── Called by OzVault ───────────────────────────────────────────────────
+        setTokenizerName(tokenizerName) {
+            this.post({ type: 'OZ_SET_TOKENIZER_NAME', tokenizerName });
+        }
+        beginCollect(requestId) {
+            this.post({ type: 'OZ_BEGIN_COLLECT', requestId });
+        }
+        /** Tell a CVV element how many digits to expect. Called automatically when card brand changes. */
+        setCvvLength(length) {
+            this.post({ type: 'OZ_SET_CVV_LENGTH', length });
+        }
+        handleMessage(msg) {
+            var _a, _b;
+            switch (msg.type) {
+                case 'OZ_FRAME_READY': {
+                    this._ready = true;
+                    if (this._loadTimer) {
+                        clearTimeout(this._loadTimer);
+                        this._loadTimer = null;
+                    }
+                    this._frameWindow = (_b = (_a = this.iframe) === null || _a === void 0 ? void 0 : _a.contentWindow) !== null && _b !== void 0 ? _b : null;
+                    const mergedOptions = Object.assign(Object.assign({}, this.options), { style: mergeAppearanceWithElementStyle(this.appearanceStyle, this.options.style) });
+                    this.post(Object.assign({ type: 'OZ_INIT', elementType: this.elementType, options: sanitizeOptions(mergedOptions), frameId: this.frameId }, (this.fonts.length > 0 ? { fonts: this.fonts } : {})));
+                    this.pendingMessages.forEach(m => this.send(m));
+                    this.pendingMessages = [];
+                    this.emit('ready', undefined);
+                    break;
+                }
+                case 'OZ_CHANGE':
+                    this.emit('change', {
+                        empty: msg.empty,
+                        complete: msg.complete,
+                        valid: msg.valid,
+                        cardBrand: msg.cardBrand,
+                        month: msg.month,
+                        year: msg.year,
+                        error: msg.error,
+                    });
+                    break;
+                case 'OZ_FOCUS':
+                    this.emit('focus', undefined);
+                    break;
+                case 'OZ_BLUR':
+                    this.emit('blur', {
+                        empty: msg.empty,
+                        complete: msg.complete,
+                        valid: msg.valid,
+                        error: msg.error,
+                    });
+                    break;
+                case 'OZ_RESIZE':
+                    if (this.iframe) {
+                        this.iframe.style.height = `${msg.height}px`;
+                    }
+                    break;
+            }
+        }
+        // ─── Internal ────────────────────────────────────────────────────────────
+        emit(event, payload) {
+            const list = this.handlers.get(event);
+            if (list)
+                [...list].forEach(fn => fn(payload));
+        }
+        post(data) {
+            const msg = Object.assign({ __oz: true, vaultId: this.vaultId }, data);
+            if (!this._ready) {
+                this.pendingMessages.push(msg);
+            }
+            else {
+                this.send(msg);
+            }
+        }
+        send(msg) {
+            var _a;
+            (_a = this._frameWindow) === null || _a === void 0 ? void 0 : _a.postMessage(msg, this.frameOrigin);
+        }
+    }
+
+    /**
+     * errors.ts — error types and normalisation for OzElements.
+     *
+     * Two normalisation functions:
+     *  - normalizeVaultError  — maps raw vault /tokenize errors to user-facing messages
+     *  - normalizeCardSaleError — maps raw cardSale API errors to user-facing messages
+     *
+     * Error keys in normalizeCardSaleError are taken directly from checkout's
+     * errorMapping.ts so the same error strings produce the same user-facing copy.
+     */
+    class OzError extends Error {
+        constructor(message, raw, errorCode) {
+            super(message);
+            this.name = 'OzError';
+            this.raw = raw !== null && raw !== void 0 ? raw : message;
+            this.errorCode = errorCode !== null && errorCode !== void 0 ? errorCode : 'unknown';
+            this.retryable = this.errorCode === 'network' || this.errorCode === 'timeout' || this.errorCode === 'server';
+        }
+    }
+    /** Shared patterns that apply to both card and bank vault errors. */
+    function normalizeCommonVaultError(msg) {
+        if (msg.includes('api key') || msg.includes('unauthorized') || msg.includes('authentication') || msg.includes('forbidden')) {
+            return 'Authentication failed. Check your vault API key configuration.';
+        }
+        if (msg.includes('network') || msg.includes('failed to fetch') || msg.includes('fetch')) {
+            return 'A network error occurred. Please check your connection and try again.';
+        }
+        if (msg.includes('timeout') || msg.includes('timed out')) {
+            return 'The request timed out. Please try again.';
+        }
+        if (msg.includes('http 5') || msg.includes('500') || msg.includes('502') || msg.includes('503')) {
+            return 'A server error occurred. Please try again shortly.';
+        }
+        return null;
+    }
+    /**
+     * Maps a raw vault /tokenize error string to a user-facing message for card flows.
+     * Falls back to the original string if no pattern matches.
+     */
+    function normalizeVaultError(raw) {
+        const msg = raw.toLowerCase();
+        const common = normalizeCommonVaultError(msg);
+        if (common)
+            return common;
+        if (msg.includes('card number') || msg.includes('invalid card') || msg.includes('luhn')) {
+            return 'The card number is invalid. Please check and try again.';
+        }
+        if (msg.includes('expir')) {
+            return 'The card expiration date is invalid or the card has expired.';
+        }
+        if (msg.includes('cvv') || msg.includes('cvc') || msg.includes('security code')) {
+            return 'The CVV code is invalid. Please check and try again.';
+        }
+        if (msg.includes('insufficient') || msg.includes('funds')) {
+            return 'Your card has insufficient funds. Please use a different card.';
+        }
+        if (msg.includes('declined') || msg.includes('do not honor')) {
+            return 'Your card was declined. Please try a different card or contact your bank.';
+        }
+        return raw;
+    }
+    /**
+     * Maps a raw vault /tokenize error string to a user-facing message for bank (ACH) flows.
+     * Uses bank-specific pattern matching so card-specific messages are never shown for
+     * bank errors. Falls back to the original string if no pattern matches.
+     */
+    function normalizeBankVaultError(raw) {
+        const msg = raw.toLowerCase();
+        const common = normalizeCommonVaultError(msg);
+        if (common)
+            return common;
+        if (msg.includes('account number') || msg.includes('account_number') || msg.includes('invalid account')) {
+            return 'The bank account number is invalid. Please check and try again.';
+        }
+        if (msg.includes('routing number') || msg.includes('routing_number') || msg.includes('invalid routing') || msg.includes('aba')) {
+            return 'The routing number is invalid. Please check and try again.';
+        }
+        return raw;
+    }
+    // ─── cardSale error map (mirrors checkout/src/utils/errorMapping.ts exactly) ─
+    const CARD_SALE_ERROR_MAP = [
+        ['Insufficient Funds', 'Your card has insufficient funds. Please use a different payment method.'],
+        ['Invalid card number', 'The card number you entered is invalid. Please check and try again.'],
+        ['Card expired', 'Your card has expired. Please use a different card.'],
+        ['CVV Verification Failed', 'The CVV code you entered is incorrect. Please check and try again.'],
+        ['Address Verification Failed', 'The billing address does not match your card. Please verify your address.'],
+        ['Do Not Honor', 'Your card was declined. Please contact your bank or use a different payment method.'],
+        ['Declined', 'Your card was declined. Please contact your bank or use a different payment method.'],
+        ['Surcharge is currently not supported', 'Surcharge fees are not supported at this time.'],
+        ['Surcharge percent must be between', 'Surcharge fees are not supported at this time.'],
+        ['Forbidden - API key', 'Authentication failed. Please refresh the page.'],
+        ['Api Key is invalid', 'Authentication failed. Please refresh the page.'],
+        ['API key not found', 'Authentication failed. Please refresh the page.'],
+        ['Access token expired', 'Your session has expired. Please refresh the page.'],
+        ['Access token is invalid', 'Authentication failed. Please refresh the page.'],
+        ['Unauthorized', 'Authentication failed. Please refresh the page.'],
+        ['Too Many Requests', 'Too many requests. Please wait a moment and try again.'],
+        ['Rate limit exceeded', 'System is busy. Please wait a moment and try again.'],
+        ['No processor integrations found', 'Payment processing is not configured for this merchant. Please contact the merchant for assistance.'],
+        ['processor integration', 'Payment processing is temporarily unavailable. Please try again later or contact the merchant.'],
+        ['Invalid zipcode', 'The ZIP code you entered is invalid. Please check and try again.'],
+        ['failed to save to database', 'Your payment was processed but we encountered an issue. Please contact support.'],
+        ['CASHBACK UNAVAIL', 'This transaction type is not supported. Please try again or use a different payment method.'],
+    ];
+    /**
+     * Maps a raw Ozura Pay API cardSale error string to a user-facing message.
+     *
+     * Uses the exact same error key table as checkout's `getUserFriendlyError()` in
+     * errorMapping.ts so both surfaces produce identical copy for the same errors.
+     *
+     * Falls back to the original string when it's under 100 characters, or to a
+     * generic message for long/opaque server errors — matching checkout's fallback
+     * behaviour exactly.
+     */
+    function normalizeCardSaleError(raw) {
+        if (!raw)
+            return 'Payment processing failed. Please try again.';
+        for (const [key, message] of CARD_SALE_ERROR_MAP) {
+            if (raw.toLowerCase().includes(key.toLowerCase())) {
+                return message;
+            }
+        }
+        // Checkout fallback: pass through short errors, genericise long ones
+        if (raw.length < 100)
+            return raw;
+        return 'Payment processing failed. Please try again or contact support.';
+    }
+
+    /**
+     * billingUtils.ts — billing detail validation and normalization.
+     *
+     * Mirrors the validation in checkout/page.tsx (pre-flight checks before cardSale)
+     * so that billing data passed to createToken() is guaranteed schema-compliant and
+     * ready to forward directly to the Ozura Pay API cardSale endpoint.
+     *
+     * All string fields enforced to 1–50 characters (cardSale schema constraint).
+     * State is normalized to 2-letter abbreviation for US and CA.
+     * Phone must be E.164 format (matches checkout's formatPhoneForAPI output).
+     */
+    // ─── Email ────────────────────────────────────────────────────────────────────
+    const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    /** Returns true when the email is syntactically valid and ≤50 characters. */
+    function validateEmail(email) {
+        return EMAIL_RE.test(email) && email.length <= 50;
+    }
+    // ─── Phone ───────────────────────────────────────────────────────────────────
+    /**
+     * Validates E.164 phone format: starts with +, 1–3 digit country code,
+     * followed by 7–12 digits, total ≤50 characters.
+     *
+     * Matches the output of checkout's formatPhoneForAPI() function.
+     * Examples: "+15551234567", "+447911123456", "+61412345678"
+     */
+    function validateE164Phone(phone) {
+        return /^\+[1-9]\d{6,49}$/.test(phone) && phone.length <= 50;
+    }
+    // ─── Field length ─────────────────────────────────────────────────────────────
+    /** Returns true when the string is non-empty and ≤50 characters (cardSale schema). */
+    function isValidBillingField(value) {
+        return value.length > 0 && value.length <= 50;
+    }
+    // ─── US state normalization ───────────────────────────────────────────────────
+    // Mirrors checkout's convertStateToAbbreviation() so the same input variants work.
+    const US_STATES = {
+        alabama: 'AL', alaska: 'AK', arizona: 'AZ', arkansas: 'AR',
+        california: 'CA', colorado: 'CO', connecticut: 'CT', delaware: 'DE',
+        'district of columbia': 'DC', florida: 'FL', georgia: 'GA', hawaii: 'HI',
+        idaho: 'ID', illinois: 'IL', indiana: 'IN', iowa: 'IA', kansas: 'KS',
+        kentucky: 'KY', louisiana: 'LA', maine: 'ME', maryland: 'MD',
+        massachusetts: 'MA', michigan: 'MI', minnesota: 'MN', mississippi: 'MS',
+        missouri: 'MO', montana: 'MT', nebraska: 'NE', nevada: 'NV',
+        'new hampshire': 'NH', 'new jersey': 'NJ', 'new mexico': 'NM', 'new york': 'NY',
+        'north carolina': 'NC', 'north dakota': 'ND', ohio: 'OH', oklahoma: 'OK',
+        oregon: 'OR', pennsylvania: 'PA', 'rhode island': 'RI', 'south carolina': 'SC',
+        'south dakota': 'SD', tennessee: 'TN', texas: 'TX', utah: 'UT',
+        vermont: 'VT', virginia: 'VA', washington: 'WA', 'west virginia': 'WV',
+        wisconsin: 'WI', wyoming: 'WY',
+    };
+    const US_ABBREVS = new Set(Object.values(US_STATES));
+    const CA_PROVINCES = {
+        alberta: 'AB', 'british columbia': 'BC', manitoba: 'MB', 'new brunswick': 'NB',
+        'newfoundland and labrador': 'NL', 'nova scotia': 'NS', ontario: 'ON',
+        'prince edward island': 'PE', quebec: 'QC', saskatchewan: 'SK',
+        'northwest territories': 'NT', nunavut: 'NU', yukon: 'YT',
+    };
+    const CA_ABBREVS = new Set(Object.values(CA_PROVINCES));
+    /**
+     * Converts a full US state or Canadian province name to its 2-letter abbreviation.
+     * If already a valid abbreviation (case-insensitive), returns it uppercased.
+     * For non-US/CA countries, returns the input uppercased unchanged.
+     *
+     * Matches checkout's convertStateToAbbreviation() behaviour exactly.
+     */
+    function normalizeState(state, country) {
+        var _a, _b;
+        const upper = state.trim().toUpperCase();
+        const lower = state.trim().toLowerCase();
+        if (country === 'US') {
+            if (US_ABBREVS.has(upper))
+                return upper;
+            return (_a = US_STATES[lower]) !== null && _a !== void 0 ? _a : upper;
+        }
+        if (country === 'CA') {
+            if (CA_ABBREVS.has(upper))
+                return upper;
+            return (_b = CA_PROVINCES[lower]) !== null && _b !== void 0 ? _b : upper;
+        }
+        return upper;
+    }
+    // ─── Postal code validation ───────────────────────────────────────────────────
+    const POSTAL_PATTERNS = {
+        US: /^\d{5}(-?\d{4})?$/, // 5-digit or ZIP+4 (with or without hyphen)
+        CA: /^[A-Za-z]\d[A-Za-z]\s?\d[A-Za-z]\d$/, // A1A 1A1
+        GB: /^[A-Za-z]{1,2}\d[A-Za-z\d]?\s?\d[A-Za-z]{2}$/,
+        DE: /^\d{5}$/,
+        FR: /^\d{5}$/,
+        ES: /^\d{5}$/,
+        IT: /^\d{5}$/,
+        AU: /^\d{4}$/,
+        NL: /^\d{4}\s?[A-Za-z]{2}$/,
+        BR: /^\d{5}-?\d{3}$/,
+        JP: /^\d{3}-?\d{4}$/,
+        IN: /^\d{6}$/,
+    };
+    /**
+     * Validates a postal/ZIP code against country-specific format rules.
+     * For countries without a specific pattern, falls back to generic 1–50 char check.
+     */
+    function validatePostalCode(zip, country) {
+        if (!zip || zip.length === 0)
+            return { valid: false, error: 'Postal code is required' };
+        if (zip.length > 50)
+            return { valid: false, error: 'Postal code must be 50 characters or fewer' };
+        const pattern = POSTAL_PATTERNS[country.toUpperCase()];
+        if (pattern && !pattern.test(zip)) {
+            return { valid: false, error: `Invalid postal code format for ${country.toUpperCase()}` };
+        }
+        return { valid: true };
+    }
+    /**
+     * Validates and normalizes billing details against the Ozura cardSale API schema.
+     *
+     * Rules applied (same as checkout's pre-flight validation in page.tsx):
+     * - firstName, lastName: required, 1–50 chars
+     * - email: optional; if provided, must be valid format and ≤50 chars
+     * - phone: optional; if provided, must be E.164 and ≤50 chars
+     * - address fields: if address is provided, line1/city/state/zip/country are
+     *   required (1–50 chars each); line2 is optional and omitted from normalized
+     *   output if blank (cardSale schema: minLength 1 if present)
+     * - state: normalized to 2-letter abbreviation for US and CA
+     */
+    function validateBilling(billing) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        const errors = [];
+        const firstName = (_b = (_a = billing.firstName) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+        const lastName = (_d = (_c = billing.lastName) === null || _c === void 0 ? void 0 : _c.trim()) !== null && _d !== void 0 ? _d : '';
+        const email = (_f = (_e = billing.email) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : '';
+        const phone = (_h = (_g = billing.phone) === null || _g === void 0 ? void 0 : _g.trim()) !== null && _h !== void 0 ? _h : '';
+        if (!isValidBillingField(firstName)) {
+            errors.push('billing.firstName must be 1–50 characters');
+        }
+        if (!isValidBillingField(lastName)) {
+            errors.push('billing.lastName must be 1–50 characters');
+        }
+        if (email && !validateEmail(email)) {
+            errors.push('billing.email must be a valid address (max 50 characters)');
+        }
+        if (phone && !validateE164Phone(phone)) {
+            errors.push('billing.phone must be E.164 format, e.g. "+15551234567" (max 50 characters)');
+        }
+        let normalizedAddress;
+        if (billing.address) {
+            const a = billing.address;
+            const country = (_k = (_j = a.country) === null || _j === void 0 ? void 0 : _j.trim().toUpperCase()) !== null && _k !== void 0 ? _k : '';
+            const line1 = (_m = (_l = a.line1) === null || _l === void 0 ? void 0 : _l.trim()) !== null && _m !== void 0 ? _m : '';
+            const line2 = (_p = (_o = a.line2) === null || _o === void 0 ? void 0 : _o.trim()) !== null && _p !== void 0 ? _p : '';
+            const city = (_r = (_q = a.city) === null || _q === void 0 ? void 0 : _q.trim()) !== null && _r !== void 0 ? _r : '';
+            const zip = (_t = (_s = a.zip) === null || _s === void 0 ? void 0 : _s.trim()) !== null && _t !== void 0 ? _t : '';
+            const state = normalizeState((_v = (_u = a.state) === null || _u === void 0 ? void 0 : _u.trim()) !== null && _v !== void 0 ? _v : '', country);
+            if (!isValidBillingField(line1))
+                errors.push('billing.address.line1 must be 1–50 characters');
+            if (line2 && !isValidBillingField(line2))
+                errors.push('billing.address.line2 must be 1–50 characters if provided');
+            if (!isValidBillingField(city))
+                errors.push('billing.address.city must be 1–50 characters');
+            if (!isValidBillingField(state))
+                errors.push('billing.address.state must be 1–50 characters');
+            // cardSale backend uses strict enum validation on country — must be exactly 2 uppercase letters
+            if (!/^[A-Z]{2}$/.test(country)) {
+                errors.push('billing.address.country must be a 2-letter ISO 3166-1 alpha-2 code (e.g. "US", "CA", "GB")');
+            }
+            if (!isValidBillingField(zip)) {
+                errors.push('billing.address.zip must be 1–50 characters');
+            }
+            else if (/^[A-Z]{2}$/.test(country)) {
+                const postalResult = validatePostalCode(zip, country);
+                if (!postalResult.valid) {
+                    errors.push(`billing.address.zip: ${postalResult.error}`);
+                }
+            }
+            normalizedAddress = Object.assign(Object.assign({ line1 }, (line2 ? { line2 } : {})), { city,
+                state,
+                zip,
+                country });
+        }
+        const normalized = Object.assign(Object.assign(Object.assign({ firstName,
+            lastName }, (email ? { email } : {})), (phone ? { phone } : {})), (normalizedAddress ? { address: normalizedAddress } : {}));
+        return { valid: errors.length === 0, errors, normalized };
+    }
+
+    const DEFAULT_API_URL = "https://pci-vault-staging-drc0duhcakf4g4fr.eastus-01.azurewebsites.net";
+    const DEFAULT_FRAME_BASE_URL = "https://staging.elements.ozura.com";
+    /**
+     * The main entry point for OzElements. Creates and manages iframe-based
+     * card input elements that keep raw card data isolated from the merchant page.
+     *
+     * @example
+     * const vault = new OzVault('your_vault_api_key');
+     * const cardNum = vault.createElement('cardNumber');
+     * cardNum.mount('#card-number');
+     * const { token, cvcSession } = await vault.createToken({
+     *   billing: { firstName: 'Jane', lastName: 'Doe' },
+     * });
+     */
+    class OzVault {
+        constructor(apiKey, options) {
+            var _a, _b;
+            this.elements = new Map();
+            this.elementsByType = new Map();
+            this.bankElementsByType = new Map();
+            this.tokenizeResolvers = new Map();
+            this.bankTokenizeResolvers = new Map();
+            // Track completion state per element for auto-advance (only fire on transition)
+            this.completionState = new Map();
+            this.tokenizerFrame = null;
+            this.tokenizerWindow = null;
+            this.tokenizerReady = false;
+            this._tokenizing = null;
+            this._destroyed = false;
+            this._pendingMount = null;
+            this.loadErrorTimeoutId = null;
+            if (!apiKey || !apiKey.trim()) {
+                throw new OzError('A non-empty vault API key is required. Pass your key as the first argument to new OzVault().');
+            }
+            this.apiKey = apiKey;
+            this.pubKey = options.pubKey;
+            this.apiUrl = options.apiUrl || DEFAULT_API_URL;
+            this.frameBaseUrl = options.frameBaseUrl || DEFAULT_FRAME_BASE_URL;
+            this.frameOrigin = new URL(this.frameBaseUrl).origin;
+            this.fonts = (_a = options.fonts) !== null && _a !== void 0 ? _a : [];
+            this.resolvedAppearance = resolveAppearance(options.appearance);
+            this.vaultId = `vault-${Math.random().toString(36).slice(2, 12)}`;
+            this.tokenizerName = `__oz_tok_${this.vaultId}`;
+            this.boundHandleMessage = this.handleMessage.bind(this);
+            window.addEventListener('message', this.boundHandleMessage);
+            this.mountTokenizerFrame();
+            if (options.onLoadError) {
+                const timeout = (_b = options.loadTimeoutMs) !== null && _b !== void 0 ? _b : 10000;
+                this.loadErrorTimeoutId = setTimeout(() => {
+                    this.loadErrorTimeoutId = null;
+                    if (!this._destroyed && !this.tokenizerReady) {
+                        options.onLoadError();
+                    }
+                }, timeout);
+            }
+        }
+        /**
+         * True once the hidden tokenizer iframe has loaded and signalled ready.
+         * Use this to gate the pay button when building custom UIs without React.
+         * React consumers should use the `ready` value returned by `useOzElements()`.
+         */
+        get isReady() {
+            return this.tokenizerReady;
+        }
+        /**
+         * Creates a new OzElement of the given type. Call `.mount(selector)` on the
+         * returned element to attach it to the DOM.
+         */
+        createElement(type, options = {}) {
+            if (this._destroyed) {
+                throw new OzError('Cannot create elements on a destroyed vault. Create a new OzVault instance.');
+            }
+            const existing = this.elementsByType.get(type);
+            if (existing) {
+                this.elements.delete(existing.frameId);
+                this.completionState.delete(existing.frameId);
+                existing.destroy();
+            }
+            const el = new OzElement(type, options, this.vaultId, this.frameBaseUrl, this.fonts, this.resolvedAppearance);
+            this.elements.set(el.frameId, el);
+            this.elementsByType.set(type, el);
+            return el;
+        }
+        /** Returns the existing element of the given type, or null if none has been created. */
+        getElement(type) {
+            var _a;
+            return (_a = this.elementsByType.get(type)) !== null && _a !== void 0 ? _a : null;
+        }
+        /**
+         * Creates a bank account input element (accountNumber or routingNumber).
+         * Call `.mount(selector)` on the returned element to attach it to the DOM.
+         *
+         * @example
+         * const accountEl = vault.createBankElement('accountNumber');
+         * const routingEl = vault.createBankElement('routingNumber');
+         * accountEl.mount('#account-number');
+         * routingEl.mount('#routing-number');
+         */
+        createBankElement(type, options = {}) {
+            if (this._destroyed) {
+                throw new OzError('Cannot create elements on a destroyed vault. Create a new OzVault instance.');
+            }
+            const existing = this.bankElementsByType.get(type);
+            if (existing) {
+                this.elements.delete(existing.frameId);
+                this.completionState.delete(existing.frameId);
+                existing.destroy();
+            }
+            const el = new OzElement(type, options, this.vaultId, this.frameBaseUrl, this.fonts, this.resolvedAppearance);
+            this.elements.set(el.frameId, el);
+            this.bankElementsByType.set(type, el);
+            return el;
+        }
+        /** Returns the existing bank element of the given type, or null if none has been created. */
+        getBankElement(type) {
+            var _a;
+            return (_a = this.bankElementsByType.get(type)) !== null && _a !== void 0 ? _a : null;
+        }
+        /**
+         * Tokenizes mounted bank account elements. Raw account and routing numbers
+         * never leave the Ozura-origin iframes — the tokenizer iframe POSTs directly
+         * to the vault API.
+         *
+         * Returns a token that can be used with any ACH-capable payment processor.
+         *
+         * **Note:** OzuraPay does not currently support bank account payments.
+         * Use this token with your own ACH processor backend.
+         *
+         * @example
+         * const { token, bank } = await vault.createBankToken({
+         *   firstName: 'Jane',
+         *   lastName: 'Smith',
+         * });
+         */
+        async createBankToken(options) {
+            var _a, _b;
+            if (this._destroyed) {
+                throw new OzError('Cannot tokenize on a destroyed vault. Create a new OzVault instance.');
+            }
+            if (!this.tokenizerReady) {
+                throw new OzError('Vault not ready. Ensure the page is fully loaded before calling createBankToken.');
+            }
+            if (this._tokenizing) {
+                throw new OzError(this._tokenizing === 'card'
+                    ? 'A card tokenization is already in progress. Wait for it to complete before calling createBankToken().'
+                    : 'A bank tokenization is already in progress. Wait for it to complete before calling createBankToken() again.');
+            }
+            if (!((_a = options.firstName) === null || _a === void 0 ? void 0 : _a.trim())) {
+                throw new OzError('firstName is required for bank account tokenization.');
+            }
+            if (!((_b = options.lastName) === null || _b === void 0 ? void 0 : _b.trim())) {
+                throw new OzError('lastName is required for bank account tokenization.');
+            }
+            const accountEl = this.bankElementsByType.get('accountNumber');
+            const routingEl = this.bankElementsByType.get('routingNumber');
+            const accountReady = !!accountEl && this.elements.has(accountEl.frameId) && accountEl.isReady;
+            const routingReady = !!routingEl && this.elements.has(routingEl.frameId) && routingEl.isReady;
+            if (!accountReady && !routingReady) {
+                throw new OzError('No bank elements are mounted and ready. Mount accountNumber and routingNumber elements before calling createBankToken.');
+            }
+            if (!accountReady) {
+                throw new OzError('accountNumber element is not mounted or not ready. Mount both accountNumber and routingNumber elements before calling createBankToken.');
+            }
+            if (!routingReady) {
+                throw new OzError('routingNumber element is not mounted or not ready. Mount both accountNumber and routingNumber elements before calling createBankToken.');
+            }
+            const readyBankElements = [accountEl, routingEl];
+            this._tokenizing = 'bank';
+            const requestId = `req-${Math.random().toString(36).slice(2, 10)}`;
+            return new Promise((resolve, reject) => {
+                const cleanup = () => { this._tokenizing = null; };
+                this.bankTokenizeResolvers.set(requestId, {
+                    resolve: (v) => { cleanup(); resolve(v); },
+                    reject: (e) => { cleanup(); reject(e); },
+                });
+                this.sendToTokenizer({
+                    type: 'OZ_BANK_TOKENIZE',
+                    requestId,
+                    apiUrl: this.apiUrl,
+                    apiKey: this.apiKey,
+                    pubKey: this.pubKey,
+                    firstName: options.firstName.trim(),
+                    lastName: options.lastName.trim(),
+                    fieldCount: readyBankElements.length,
+                });
+                readyBankElements.forEach(el => el.beginCollect(requestId));
+                setTimeout(() => {
+                    if (this.bankTokenizeResolvers.has(requestId)) {
+                        this.bankTokenizeResolvers.delete(requestId);
+                        cleanup();
+                        reject(new OzError('Bank tokenization timed out after 30 seconds', undefined, 'timeout'));
+                    }
+                }, 30000);
+            });
+        }
+        /**
+         * Tokenizes all mounted elements. Raw card data never leaves the Ozura-origin
+         * iframes — the tokenizer iframe POSTs directly to the vault API.
+         *
+         * Returns a token and cvcSession that can be passed to the Ozura Pay API.
+         */
+        async createToken(options = {}) {
+            var _a, _b;
+            if (this._destroyed) {
+                throw new OzError('Cannot tokenize on a destroyed vault. Create a new OzVault instance.');
+            }
+            if (!this.tokenizerReady) {
+                throw new OzError('Vault not ready. Ensure the page is fully loaded before calling createToken.');
+            }
+            if (this._tokenizing) {
+                throw new OzError(this._tokenizing === 'bank'
+                    ? 'A bank tokenization is already in progress. Wait for it to complete before calling createToken().'
+                    : 'A card tokenization is already in progress. Wait for it to complete before calling createToken() again.');
+            }
+            this._tokenizing = 'card';
+            const requestId = `req-${Math.random().toString(36).slice(2, 10)}`;
+            // Only include card elements whose iframes have actually loaded — an element
+            // created but never mounted will never send OZ_FIELD_VALUE, which would
+            // cause the tokenizer to hang waiting for a value that never arrives.
+            // Explicitly exclude bank elements (accountNumber/routingNumber) that share
+            // the same this.elements map; including them would inflate fieldCount and
+            // allow the accountNumber iframe's last4 to overwrite cardMeta.last4.
+            const cardElements = new Set(this.elementsByType.values());
+            const readyElements = [...this.elements.values()].filter(el => el.isReady && cardElements.has(el));
+            if (readyElements.length === 0) {
+                this._tokenizing = null;
+                throw new OzError('No elements are mounted and ready. Mount at least one element before calling createToken.');
+            }
+            // Validate billing details if provided and extract firstName/lastName for the vault payload.
+            // billing.firstName/lastName take precedence over the deprecated top-level params.
+            let normalizedBilling;
+            let firstName = (_a = options.firstName) !== null && _a !== void 0 ? _a : '';
+            let lastName = (_b = options.lastName) !== null && _b !== void 0 ? _b : '';
+            if (options.billing) {
+                const result = validateBilling(options.billing);
+                if (!result.valid) {
+                    this._tokenizing = null;
+                    throw new OzError(`Invalid billing details: ${result.errors.join('; ')}`);
+                }
+                normalizedBilling = result.normalized;
+                firstName = normalizedBilling.firstName;
+                lastName = normalizedBilling.lastName;
+            }
+            else {
+                if (firstName.length > 50) {
+                    this._tokenizing = null;
+                    throw new OzError('firstName must be 50 characters or fewer');
+                }
+                if (lastName.length > 50) {
+                    this._tokenizing = null;
+                    throw new OzError('lastName must be 50 characters or fewer');
+                }
+            }
+            return new Promise((resolve, reject) => {
+                const cleanup = () => { this._tokenizing = null; };
+                this.tokenizeResolvers.set(requestId, {
+                    resolve: (v) => { cleanup(); resolve(v); },
+                    reject: (e) => { cleanup(); reject(e); },
+                    billing: normalizedBilling,
+                });
+                // Tell tokenizer frame to expect N field values, then tokenize
+                this.sendToTokenizer({
+                    type: 'OZ_TOKENIZE',
+                    requestId,
+                    apiUrl: this.apiUrl,
+                    apiKey: this.apiKey,
+                    pubKey: this.pubKey,
+                    firstName,
+                    lastName,
+                    fieldCount: readyElements.length,
+                });
+                // Tell each ready element frame to send its raw value to the tokenizer
+                readyElements.forEach(el => el.beginCollect(requestId));
+                setTimeout(() => {
+                    if (this.tokenizeResolvers.has(requestId)) {
+                        this.tokenizeResolvers.delete(requestId);
+                        cleanup();
+                        reject(new OzError('Tokenization timed out after 30 seconds', undefined, 'timeout'));
+                    }
+                }, 30000);
+            });
+        }
+        /**
+         * Tears down the vault: removes all element iframes, the tokenizer iframe,
+         * and the global message listener. Call this when the checkout component
+         * unmounts (e.g. in React's useEffect cleanup or a SPA route change).
+         */
+        destroy() {
+            var _a;
+            if (this._destroyed)
+                return;
+            this._destroyed = true;
+            window.removeEventListener('message', this.boundHandleMessage);
+            if (this._pendingMount) {
+                document.removeEventListener('DOMContentLoaded', this._pendingMount);
+                this._pendingMount = null;
+            }
+            if (this.loadErrorTimeoutId != null) {
+                clearTimeout(this.loadErrorTimeoutId);
+                this.loadErrorTimeoutId = null;
+            }
+            // Reject any pending tokenize promises so callers aren't left hanging
+            this._tokenizing = null;
+            this.tokenizeResolvers.forEach(({ reject }) => {
+                reject(new OzError('Vault destroyed before tokenization completed.'));
+            });
+            this.tokenizeResolvers.clear();
+            this.bankTokenizeResolvers.forEach(({ reject }) => {
+                reject(new OzError('Vault destroyed before bank tokenization completed.'));
+            });
+            this.bankTokenizeResolvers.clear();
+            this.elements.forEach(el => el.destroy());
+            this.elements.clear();
+            this.elementsByType.clear();
+            this.bankElementsByType.clear();
+            this.completionState.clear();
+            (_a = this.tokenizerFrame) === null || _a === void 0 ? void 0 : _a.remove();
+            this.tokenizerFrame = null;
+            this.tokenizerWindow = null;
+            this.tokenizerReady = false;
+        }
+        // ─── Private ─────────────────────────────────────────────────────────────
+        mountTokenizerFrame() {
+            const mount = () => {
+                this._pendingMount = null;
+                const iframe = document.createElement('iframe');
+                iframe.name = this.tokenizerName;
+                iframe.style.cssText = 'position:absolute;top:-9999px;left:-9999px;width:1px;height:1px;';
+                iframe.setAttribute('aria-hidden', 'true');
+                iframe.tabIndex = -1;
+                const parentOrigin = typeof window !== 'undefined' ? window.location.origin : '';
+                iframe.src = `${this.frameBaseUrl}/frame/tokenizer-frame.html#vaultId=${encodeURIComponent(this.vaultId)}${parentOrigin ? `&parentOrigin=${encodeURIComponent(parentOrigin)}` : ''}`;
+                document.body.appendChild(iframe);
+                this.tokenizerFrame = iframe;
+            };
+            if (document.readyState === 'loading') {
+                this._pendingMount = mount;
+                document.addEventListener('DOMContentLoaded', mount);
+            }
+            else {
+                mount();
+            }
+        }
+        handleMessage(event) {
+            var _a;
+            // Only accept messages from our frame origin (defense in depth; prevents
+            // arbitrary pages from injecting OZ_TOKEN_RESULT etc. with a guessed vaultId).
+            if (event.origin !== this.frameOrigin)
+                return;
+            const msg = event.data;
+            if (!msg || msg.__oz !== true || msg.vaultId !== this.vaultId)
+                return;
+            // Route tokenizer messages
+            if (event.source === ((_a = this.tokenizerFrame) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+                this.handleTokenizerMessage(msg);
+                return;
+            }
+            // Route to the matching element
+            const frameId = msg.frameId;
+            if (frameId) {
+                const el = this.elements.get(frameId);
+                if (el) {
+                    // Intercept OZ_CHANGE before forwarding — handle auto-advance and CVV sync
+                    if (msg.type === 'OZ_CHANGE') {
+                        this.handleElementChange(msg, el);
+                    }
+                    el.handleMessage(msg);
+                    if (msg.type === 'OZ_FRAME_READY' && this.tokenizerReady) {
+                        el.setTokenizerName(this.tokenizerName);
+                    }
+                }
+            }
+        }
+        /**
+         * Handles side-effects that the SDK manages internally when a field changes:
+         * - CVV length sync when card brand changes
+         * - Auto-advance focus when a field completes
+         */
+        handleElementChange(msg, el) {
+            var _a, _b, _c;
+            const complete = msg.complete;
+            const valid = msg.valid;
+            const wasComplete = (_a = this.completionState.get(el.frameId)) !== null && _a !== void 0 ? _a : false;
+            this.completionState.set(el.frameId, complete);
+            // Require valid too — avoids advancing at 13 digits for unknown-brand cards
+            // where isComplete() fires before the user has finished typing.
+            const justCompleted = complete && valid && !wasComplete;
+            // Sync CVV length when card brand changes
+            if (el.type === 'cardNumber') {
+                const brand = msg.cardBrand;
+                const cvvEl = this.elementsByType.get('cvv');
+                if (cvvEl && brand) {
+                    cvvEl.setCvvLength(brand === 'amex' ? 4 : 3);
+                }
+            }
+            // Auto-advance focus on completion
+            if (justCompleted) {
+                if (el.type === 'cardNumber') {
+                    (_b = this.elementsByType.get('expirationDate')) === null || _b === void 0 ? void 0 : _b.focus();
+                }
+                else if (el.type === 'expirationDate') {
+                    (_c = this.elementsByType.get('cvv')) === null || _c === void 0 ? void 0 : _c.focus();
+                }
+            }
+        }
+        handleTokenizerMessage(msg) {
+            var _a, _b;
+            switch (msg.type) {
+                case 'OZ_FRAME_READY':
+                    this.tokenizerReady = true;
+                    if (this.loadErrorTimeoutId != null) {
+                        clearTimeout(this.loadErrorTimeoutId);
+                        this.loadErrorTimeoutId = null;
+                    }
+                    this.tokenizerWindow = (_b = (_a = this.tokenizerFrame) === null || _a === void 0 ? void 0 : _a.contentWindow) !== null && _b !== void 0 ? _b : null;
+                    this.sendToTokenizer({ type: 'OZ_INIT', frameId: '__tokenizer__' });
+                    this.elements.forEach(el => el.setTokenizerName(this.tokenizerName));
+                    break;
+                case 'OZ_TOKEN_RESULT': {
+                    const pending = this.tokenizeResolvers.get(msg.requestId);
+                    if (pending) {
+                        this.tokenizeResolvers.delete(msg.requestId);
+                        const card = msg.card;
+                        pending.resolve(Object.assign(Object.assign({ token: msg.token, cvcSession: msg.cvcSession }, (card ? { card } : {})), (pending.billing ? { billing: pending.billing } : {})));
+                    }
+                    break;
+                }
+                case 'OZ_TOKEN_ERROR': {
+                    const pending = this.tokenizeResolvers.get(msg.requestId);
+                    if (pending) {
+                        this.tokenizeResolvers.delete(msg.requestId);
+                        const raw = msg.error;
+                        const errorCode = (msg.errorCode || 'unknown');
+                        pending.reject(new OzError(normalizeVaultError(raw), raw, errorCode));
+                    }
+                    // Also check bank resolvers — both card and bank errors use OZ_TOKEN_ERROR
+                    const bankPending = this.bankTokenizeResolvers.get(msg.requestId);
+                    if (bankPending) {
+                        this.bankTokenizeResolvers.delete(msg.requestId);
+                        const raw = msg.error;
+                        const errorCode = (msg.errorCode || 'unknown');
+                        bankPending.reject(new OzError(normalizeBankVaultError(raw), raw, errorCode));
+                    }
+                    break;
+                }
+                case 'OZ_BANK_TOKEN_RESULT': {
+                    const pending = this.bankTokenizeResolvers.get(msg.requestId);
+                    if (pending) {
+                        this.bankTokenizeResolvers.delete(msg.requestId);
+                        const bank = msg.bank;
+                        pending.resolve(Object.assign({ token: msg.token }, (bank ? { bank } : {})));
+                    }
+                    break;
+                }
+            }
+        }
+        sendToTokenizer(data) {
+            var _a;
+            const msg = Object.assign({ __oz: true, vaultId: this.vaultId }, data);
+            (_a = this.tokenizerWindow) === null || _a === void 0 ? void 0 : _a.postMessage(msg, this.frameOrigin);
+        }
+    }
+
+    exports.OzElement = OzElement;
+    exports.OzError = OzError;
+    exports.OzVault = OzVault;
+    exports.normalizeCardSaleError = normalizeCardSaleError;
+    exports.normalizeVaultError = normalizeVaultError;
+
+}));
+//# sourceMappingURL=oz-elements.umd.js.map