@ozura/elements 0.1.0-beta.1

package/dist/react/index.cjs.js

@@ -0,0 +1,1407 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+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;
+}
+
+/**
+ * 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);
+    }
+}
+
+const OzContext = react.createContext({
+    vault: null,
+    notifyReady: () => { },
+    notifyUnmount: () => { },
+    notifyMount: () => { },
+    mountedCount: 0,
+    readyCount: 0,
+});
+/**
+ * Creates and owns an OzVault instance for the lifetime of this component.
+ * All `<OzCardNumber />`, `<OzExpiry />`, and `<OzCvv />` children must be
+ * rendered inside this provider.
+ */
+function OzElements({ apiKey, pubKey, apiUrl, frameBaseUrl, fonts, onLoadError, loadTimeoutMs, appearance, children }) {
+    const [vault, setVault] = react.useState(null);
+    const [mountedCount, setMountedCount] = react.useState(0);
+    const [readyCount, setReadyCount] = react.useState(0);
+    const onLoadErrorRef = react.useRef(onLoadError);
+    onLoadErrorRef.current = onLoadError;
+    const appearanceKey = react.useMemo(() => appearance ? JSON.stringify(appearance) : '', [appearance]);
+    const fontsKey = react.useMemo(() => fonts ? JSON.stringify(fonts) : '', [fonts]);
+    react.useEffect(() => {
+        const parsedAppearance = appearanceKey ? JSON.parse(appearanceKey) : undefined;
+        const parsedFonts = fontsKey ? JSON.parse(fontsKey) : undefined;
+        const v = new OzVault(apiKey, Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ pubKey }, (apiUrl ? { apiUrl } : {})), (frameBaseUrl ? { frameBaseUrl } : {})), (parsedFonts ? { fonts: parsedFonts } : {})), (parsedAppearance ? { appearance: parsedAppearance } : {})), (onLoadErrorRef.current ? { onLoadError: () => { var _a; return (_a = onLoadErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadErrorRef); }, loadTimeoutMs } : {})));
+        setVault(v);
+        setMountedCount(0);
+        setReadyCount(0);
+        return () => {
+            v.destroy();
+            setVault(null);
+        };
+    }, [apiKey, pubKey, apiUrl, frameBaseUrl, loadTimeoutMs, appearanceKey, fontsKey]);
+    const notifyMount = react.useCallback(() => setMountedCount(n => n + 1), []);
+    const notifyReady = react.useCallback(() => setReadyCount(n => n + 1), []);
+    const notifyUnmount = react.useCallback(() => {
+        setMountedCount(n => Math.max(0, n - 1));
+        setReadyCount(n => Math.max(0, n - 1));
+    }, []);
+    const value = react.useMemo(() => ({ vault, notifyMount, notifyReady, notifyUnmount, mountedCount, readyCount }), [vault, notifyMount, notifyReady, notifyUnmount, mountedCount, readyCount]);
+    return jsxRuntime.jsx(OzContext.Provider, { value: value, children: children });
+}
+/**
+ * Returns `createToken` and the `ready` flag. Must be called from inside
+ * an `<OzElements>` provider tree.
+ */
+function useOzElements() {
+    const { vault, mountedCount, readyCount } = react.useContext(OzContext);
+    const createToken = react.useCallback((options) => {
+        if (!vault) {
+            return Promise.reject(new OzError('useOzElements must be called inside an <OzElements> provider.'));
+        }
+        return vault.createToken(options);
+    }, [vault]);
+    const ready = vault !== null && mountedCount > 0 && readyCount >= mountedCount;
+    return { createToken, ready };
+}
+const SKELETON_STYLE = {
+    height: 46,
+    borderRadius: 6,
+    background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
+    backgroundSize: '200% 100%',
+    animation: 'oz-shimmer 1.5s infinite',
+};
+const SHIMMER_KEYFRAMES = `@keyframes oz-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }`;
+let shimmerInjected = false;
+function injectShimmerCSS() {
+    if (shimmerInjected || typeof document === 'undefined')
+        return;
+    const sheet = document.createElement('style');
+    sheet.textContent = SHIMMER_KEYFRAMES;
+    document.head.appendChild(sheet);
+    shimmerInjected = true;
+}
+const LOAD_ERROR_STYLE = {
+    height: 46,
+    borderRadius: 6,
+    background: '#fef2f2',
+    border: '1px solid #fecaca',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '#991b1b',
+    fontSize: 13,
+};
+function OzField({ type, style, placeholder, disabled, loadTimeoutMs, onChange, onFocus, onBlur, onReady, onLoadError, className, }) {
+    const containerRef = react.useRef(null);
+    const elementRef = react.useRef(null);
+    const [loaded, setLoaded] = react.useState(false);
+    const [loadError, setLoadError] = react.useState(null);
+    const { vault, notifyMount, notifyReady, notifyUnmount } = react.useContext(OzContext);
+    const onChangeRef = react.useRef(onChange);
+    const onFocusRef = react.useRef(onFocus);
+    const onBlurRef = react.useRef(onBlur);
+    const onReadyRef = react.useRef(onReady);
+    const onLoadErrorRef = react.useRef(onLoadError);
+    react.useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    react.useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
+    react.useEffect(() => { onBlurRef.current = onBlur; }, [onBlur]);
+    react.useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
+    react.useEffect(() => { onLoadErrorRef.current = onLoadError; }, [onLoadError]);
+    react.useEffect(() => {
+        var _a;
+        (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.update({ style, placeholder, disabled });
+    }, [style, placeholder, disabled]);
+    react.useEffect(() => {
+        if (!vault || !containerRef.current)
+            return;
+        injectShimmerCSS();
+        setLoaded(false);
+        setLoadError(null);
+        const element = vault.createElement(type, { style, placeholder, disabled, loadTimeoutMs });
+        elementRef.current = element;
+        notifyMount();
+        element.on('ready', () => {
+            var _a;
+            setLoaded(true);
+            notifyReady();
+            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+        });
+        element.on('change', (e) => { var _a; return (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, e); });
+        element.on('focus', () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef); });
+        element.on('blur', () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef); });
+        element.on('loaderror', (e) => {
+            var _a, _b;
+            const err = (_a = e === null || e === void 0 ? void 0 : e.error) !== null && _a !== void 0 ? _a : 'Failed to load card field';
+            setLoadError(err);
+            (_b = onLoadErrorRef.current) === null || _b === void 0 ? void 0 : _b.call(onLoadErrorRef, err);
+        });
+        element.mount(containerRef.current);
+        return () => {
+            element.unmount();
+            elementRef.current = null;
+            setLoaded(false);
+            setLoadError(null);
+            notifyUnmount();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [vault, type]);
+    return (jsxRuntime.jsxs("div", { className: className, style: { width: '100%', position: 'relative' }, children: [loadError && jsxRuntime.jsx("div", { style: LOAD_ERROR_STYLE, role: "alert", children: loadError }), !loaded && !loadError && jsxRuntime.jsx("div", { style: SKELETON_STYLE }), jsxRuntime.jsx("div", { ref: containerRef, style: Object.assign({ width: '100%', opacity: loaded ? 1 : 0, transition: 'opacity 0.2s' }, (loadError ? { display: 'none' } : {})) })] }));
+}
+// ─── Public field components ──────────────────────────────────────────────────
+/** Renders a PCI-isolated card number input inside an Ozura iframe. */
+const OzCardNumber = (props) => jsxRuntime.jsx(OzField, Object.assign({ type: "cardNumber" }, props));
+/** Renders a PCI-isolated expiration date input inside an Ozura iframe. */
+const OzExpiry = (props) => jsxRuntime.jsx(OzField, Object.assign({ type: "expirationDate" }, props));
+/** Renders a PCI-isolated CVV input inside an Ozura iframe. */
+const OzCvv = (props) => jsxRuntime.jsx(OzField, Object.assign({ type: "cvv" }, props));
+const DEFAULT_ERROR_STYLE = {
+    color: '#dc2626',
+    fontSize: 13,
+    marginTop: 6,
+    lineHeight: 1.4,
+};
+const DEFAULT_LABEL_STYLE = {
+    display: 'block',
+    fontSize: 14,
+    fontWeight: 500,
+    marginBottom: 4,
+    color: '#374151',
+};
+function mergeStyles(base, override) {
+    if (!override)
+        return base;
+    if (!base)
+        return override;
+    return {
+        base: Object.assign(Object.assign({}, base === null || base === void 0 ? void 0 : base.base), override === null || override === void 0 ? void 0 : override.base),
+        focus: Object.assign(Object.assign({}, base === null || base === void 0 ? void 0 : base.focus), override === null || override === void 0 ? void 0 : override.focus),
+        invalid: Object.assign(Object.assign({}, base === null || base === void 0 ? void 0 : base.invalid), override === null || override === void 0 ? void 0 : override.invalid),
+        complete: Object.assign(Object.assign({}, base === null || base === void 0 ? void 0 : base.complete), override === null || override === void 0 ? void 0 : override.complete),
+        placeholder: Object.assign(Object.assign({}, base === null || base === void 0 ? void 0 : base.placeholder), override === null || override === void 0 ? void 0 : override.placeholder),
+    };
+}
+/**
+ * Combined card input — renders card number, expiry, and CVV in a single
+ * component with built-in layout, loading skeletons, and inline error display.
+ *
+ * Fully customizable: per-field styles, labels, layout variants, error rendering,
+ * and focus/blur callbacks. For maximum layout control, use the individual
+ * `<OzCardNumber />`, `<OzExpiry />`, `<OzCvv />` components instead.
+ */
+function OzCard({ style, styles, classNames, labels, labelStyle, labelClassName, layout = 'default', gap = 8, hideErrors = false, errorStyle, errorClassName, renderError, onChange, onReady, onFocus, onBlur, disabled, className, placeholders, }) {
+    var _a, _b, _c;
+    const { vault } = react.useContext(OzContext);
+    const fieldState = react.useRef({
+        cardNumber: null,
+        expiry: null,
+        cvv: null,
+    });
+    const readyFields = react.useRef(0);
+    const vaultRef = react.useRef(vault);
+    const onChangeRef = react.useRef(onChange);
+    const onReadyRef = react.useRef(onReady);
+    const onFocusRef = react.useRef(onFocus);
+    const onBlurRef = react.useRef(onBlur);
+    react.useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    react.useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
+    react.useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
+    react.useEffect(() => { onBlurRef.current = onBlur; }, [onBlur]);
+    // When the vault is recreated (e.g. appearance/fonts props change on OzElements),
+    // context readyCount is reset but this ref is not. Reset so onReady fires once when all 3 are ready.
+    react.useEffect(() => {
+        if (vault !== vaultRef.current) {
+            vaultRef.current = vault;
+            readyFields.current = 0;
+        }
+    }, [vault]);
+    const [error, setError] = react.useState();
+    const handleFieldReady = react.useCallback(() => {
+        var _a;
+        readyFields.current++;
+        if (readyFields.current >= 3) {
+            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+        }
+    }, []);
+    const emitChange = react.useCallback(() => {
+        var _a;
+        const { cardNumber, expiry, cvv } = fieldState.current;
+        const complete = !!((cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.complete) && (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.valid) &&
+            (expiry === null || expiry === void 0 ? void 0 : expiry.complete) && (expiry === null || expiry === void 0 ? void 0 : expiry.valid) &&
+            (cvv === null || cvv === void 0 ? void 0 : cvv.complete) && (cvv === null || cvv === void 0 ? void 0 : cvv.valid));
+        const err = (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.error) || (expiry === null || expiry === void 0 ? void 0 : expiry.error) || (cvv === null || cvv === void 0 ? void 0 : cvv.error) || undefined;
+        setError(err);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, {
+            complete,
+            cardBrand: cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.cardBrand,
+            error: err,
+            fields: Object.assign({}, fieldState.current),
+        });
+    }, []);
+    const gapValue = typeof gap === 'number' ? gap : undefined;
+    const gapStr = typeof gap === 'string' ? gap : `${gap}px`;
+    const resolvedLabelStyle = labelStyle
+        ? Object.assign(Object.assign({}, DEFAULT_LABEL_STYLE), labelStyle) : DEFAULT_LABEL_STYLE;
+    const renderLabel = (text) => {
+        if (!text)
+            return null;
+        return (jsxRuntime.jsx("label", { className: labelClassName, style: resolvedLabelStyle, children: text }));
+    };
+    const showError = !hideErrors && error;
+    const errorNode = showError
+        ? renderError
+            ? renderError(error)
+            : (jsxRuntime.jsx("div", { role: "alert", className: errorClassName, style: errorStyle ? Object.assign(Object.assign({}, DEFAULT_ERROR_STYLE), errorStyle) : DEFAULT_ERROR_STYLE, children: error }))
+        : null;
+    const cardNumberField = (jsxRuntime.jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cardNumber), jsxRuntime.jsx(OzCardNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.cardNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.cardNumber, placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders.cardNumber) !== null && _a !== void 0 ? _a : 'Card number', disabled: disabled, onChange: (e) => { fieldState.current.cardNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'cardNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'cardNumber'); }, onReady: handleFieldReady })] }));
+    const expiryField = (jsxRuntime.jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.expiry), jsxRuntime.jsx(OzExpiry, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.expiry), className: classNames === null || classNames === void 0 ? void 0 : classNames.expiry, placeholder: (_b = placeholders === null || placeholders === void 0 ? void 0 : placeholders.expiry) !== null && _b !== void 0 ? _b : 'MM / YY', disabled: disabled, onChange: (e) => { fieldState.current.expiry = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'expiry'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'expiry'); }, onReady: handleFieldReady })] }));
+    const cvvField = (jsxRuntime.jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cvv), jsxRuntime.jsx(OzCvv, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.cvv), className: classNames === null || classNames === void 0 ? void 0 : classNames.cvv, placeholder: (_c = placeholders === null || placeholders === void 0 ? void 0 : placeholders.cvv) !== null && _c !== void 0 ? _c : 'CVV', disabled: disabled, onChange: (e) => { fieldState.current.cvv = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'cvv'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'cvv'); }, onReady: handleFieldReady })] }));
+    if (layout === 'rows') {
+        return (jsxRuntime.jsxs("div", { className: className, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: gapStr }, children: [cardNumberField, expiryField, cvvField, errorNode] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: className, style: { width: '100%' }, children: [cardNumberField, jsxRuntime.jsxs("div", { className: classNames === null || classNames === void 0 ? void 0 : classNames.row, style: { display: 'flex', gap: gapValue !== null && gapValue !== void 0 ? gapValue : gapStr, marginTop: gapValue !== null && gapValue !== void 0 ? gapValue : gapStr }, children: [expiryField, cvvField] }), errorNode] }));
+}
+
+exports.OzCard = OzCard;
+exports.OzCardNumber = OzCardNumber;
+exports.OzCvv = OzCvv;
+exports.OzElements = OzElements;
+exports.OzExpiry = OzExpiry;
+exports.useOzElements = useOzElements;
+//# sourceMappingURL=index.cjs.js.map