@ozura/elements 1.0.1 → 1.0.2-next.10

package/dist/react/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { createContext, useContext, useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { createContext, useContext, useRef, useCallback, useState, useMemo, useEffect } from 'react';
 
 const THEME_DEFAULT = {
     base: {
@@ -819,13 +819,26 @@ function validateBilling(billing) {
     return { valid: errors.length === 0, errors, normalized };
 }
 
+/**
+ * Shared postMessage protocol constants.
+ *
+ * PROTOCOL_VERSION must be incremented any time a breaking change is made to
+ * the postMessage message shape (new required fields, renamed types, removed
+ * fields, changed semantics). The SDK reads this value from OZ_FRAME_READY
+ * messages and warns when the frame and SDK are out of sync.
+ *
+ * Non-breaking additions (new optional fields, new message types that old
+ * frames can safely ignore) do NOT require a version bump.
+ */
+const PROTOCOL_VERSION = 1;
+
 function isCardMetadata(v) {
     return !!v && typeof v === 'object' && typeof v.last4 === 'string';
 }
 function isBankAccountMetadata(v) {
     return !!v && typeof v === 'object' && typeof v.last4 === 'string';
 }
-const DEFAULT_FRAME_BASE_URL = "https://elements.ozura.com";
+const DEFAULT_FRAME_BASE_URL = "https://lively-hill-097170c0f.4.azurestaticapps.net";
 /**
  * The main entry point for OzElements. Creates and manages iframe-based
  * card input elements that keep raw card data isolated from the merchant page.
@@ -1391,6 +1404,11 @@ class OzVault {
                 // the previous session and justCompleted never fires, breaking auto-advance.
                 if (msg.type === 'OZ_FRAME_READY') {
                     this.completionState.set(frameId, false);
+                    if (msg.__ozVersion !== PROTOCOL_VERSION) {
+                        console.warn(`[OzVault] Protocol version mismatch on element frame "${frameId}" — ` +
+                            `SDK expects v${PROTOCOL_VERSION}, frame reported v${typeof msg.__ozVersion === 'number' ? msg.__ozVersion : '(none)'}. ` +
+                            'Deploy the matching frame assets to elements.ozura.com and purge the Azure CDN cache.');
+                    }
                 }
                 // Intercept OZ_CHANGE before forwarding — handle auto-advance and CVV sync
                 if (msg.type === 'OZ_CHANGE') {
@@ -1436,6 +1454,12 @@ class OzVault {
         var _a, _b, _c;
         switch (msg.type) {
             case 'OZ_FRAME_READY':
+                if (msg.__ozVersion !== PROTOCOL_VERSION) {
+                    console.warn(`[OzVault] Protocol version mismatch — SDK expects v${PROTOCOL_VERSION}, ` +
+                        `tokenizer frame reported v${typeof msg.__ozVersion === 'number' ? msg.__ozVersion : '(none)'}. ` +
+                        'This usually means the deployed frame files are stale. ' +
+                        'Deploy the matching frame assets to elements.ozura.com and purge the Azure CDN cache.');
+                }
                 this.tokenizerReady = true;
                 if (this.loadErrorTimeoutId != null) {
                     clearTimeout(this.loadErrorTimeoutId);
@@ -1469,13 +1493,8 @@ class OzVault {
                         pending.reject(new OzError('Vault returned a token result without a cvcSession — possible vault misconfiguration or API change.', undefined, 'server'));
                         break;
                     }
-                    if (!card) {
-                        pending.reject(new OzError('Vault returned a token result without card metadata — possible vault API change.', undefined, 'server'));
-                        break;
-                    }
-                    pending.resolve(Object.assign({ token,
-                        cvcSession,
-                        card }, (pending.billing ? { billing: pending.billing } : {})));
+                    pending.resolve(Object.assign(Object.assign({ token,
+                        cvcSession }, (card ? { card } : {})), (pending.billing ? { billing: pending.billing } : {})));
                     // Increment the per-key success counter and proactively refresh once
                     // the budget is exhausted so the next createToken() call uses a fresh
                     // key without waiting for a vault rejection.
@@ -1841,9 +1860,25 @@ function OzElements({ fetchWaxKey, pubKey, frameBaseUrl, fonts, onLoadError, loa
             // proactive, or visibility-change proactive). Without this the React
             // counter accumulates across key refreshes and diverges from the vault's
             // internal _tokenizeSuccessCount, which resets to 0 on every refresh.
+            //
+            // The reset is deferred via Promise.resolve().then() rather than being
+            // called synchronously. In the proactive-refresh case (budget exhausted
+            // after a successful tokenization), the vault's message handler calls
+            // onWaxRefresh synchronously before the Promise microtask that resumes
+            // the awaiting createToken() wrapper (and its notifyTokenize() call).
+            // A synchronous setTokenizeCount(0) would therefore fire BEFORE
+            // notifyTokenize's setTokenizeCount(n => n + 1), causing React to batch
+            // them as: reset to 0, then +1 = 1 — a persistent off-by-one.
+            // Deferring by one microtask flips the order: notifyTokenize fires first
+            // (increment), then the deferred reset fires (set 0), so the final
+            // batched result is 0 — correct for a just-exhausted key.
+            // In the reactive-refresh case the deferred reset still fires well before
+            // the retry tokenization completes (a full fetchWaxKey + tokenize round-
+            // trip separates them), so the count correctly resets to 0 then rises to
+            // 1 after the retry notifyTokenize fires.
             onWaxRefresh: () => {
                 var _a;
-                setTokenizeCount(0);
+                Promise.resolve().then(() => setTokenizeCount(0));
                 (_a = onWaxRefreshRef.current) === null || _a === void 0 ? void 0 : _a.call(onWaxRefreshRef);
             } }), (onReadyRef.current ? { onReady: () => { var _a; return (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef); } } : {})), (maxTokenizeCalls !== undefined ? { maxTokenizeCalls } : {})), abortController.signal).then(v => {
             if (cancelled) {
@@ -2007,6 +2042,71 @@ const OzCardNumber = (props) => jsx(OzFieldBase, Object.assign({ type: "cardNumb
 const OzExpiry = (props) => jsx(OzFieldBase, Object.assign({ type: "expirationDate", variant: "card" }, props));
 /** Renders a PCI-isolated CVV input inside an Ozura iframe. */
 const OzCvv = (props) => jsx(OzFieldBase, Object.assign({ type: "cvv", variant: "card" }, props));
+// ─── Shared composite-component hook ─────────────────────────────────────────
+/**
+ * Shared plumbing for OzCard and OzBankCard.
+ *
+ * Manages:
+ *  - Callback refs (onChange, onReady, onFocus, onBlur) kept in sync on every render
+ *  - Vault-change detection: resets `readyFieldTypes` and `onReadyFiredRef` when the
+ *    vault instance is replaced (e.g. after fetchWaxKey changes or the provider remounts)
+ *  - Per-field ready tracking: creates one stable handler per named field; fires the
+ *    `onReady` callback once all `fieldNames.length` fields have reported ready
+ *  - Error state
+ *  - Layout helpers: `gapStr`, `resolvedLabelStyle`, `renderLabel`
+ *
+ * @internal — not exported; used only by OzCard and OzBankCard.
+ */
+function useCardBase({ vault, fieldNames, onChange, onReady, onFocus, onBlur, gap = 8, labelStyle, labelClassName, }) {
+    const totalFields = fieldNames.length;
+    const readyFieldTypes = useRef(new Set());
+    const onReadyFiredRef = useRef(false);
+    const vaultRef = useRef(vault);
+    const onChangeRef = useRef(onChange);
+    const onReadyRef = useRef(onReady);
+    const onFocusRef = useRef(onFocus);
+    const onBlurRef = useRef(onBlur);
+    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
+    useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
+    useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
+    useEffect(() => { onBlurRef.current = onBlur; }, [onBlur]);
+    useEffect(() => {
+        if (vault !== vaultRef.current) {
+            vaultRef.current = vault;
+            readyFieldTypes.current = new Set();
+            onReadyFiredRef.current = false;
+        }
+        return () => {
+            readyFieldTypes.current = new Set();
+            onReadyFiredRef.current = false;
+        };
+    }, [vault]);
+    // One stable handler per named field — recreated only when total field count changes.
+    // Field names are static (card = 3 fields, bank = 2 fields) so `totalFields` alone
+    // is a sufficient dependency; a JSON dep would create a new map on every render.
+    // CONTRACT: `fieldNames` must be a static literal — callers must not pass a dynamic
+    // array that changes length without also changing field count.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const readyHandlers = useMemo(() => {
+        const handlers = {};
+        for (const name of fieldNames) {
+            handlers[name] = () => {
+                var _a;
+                readyFieldTypes.current.add(name);
+                if (readyFieldTypes.current.size >= totalFields && !onReadyFiredRef.current) {
+                    onReadyFiredRef.current = true;
+                    (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
+                }
+            };
+        }
+        return handlers;
+    }, [totalFields]); // totalFields captures fieldNames.length; field names are static
+    const [error, setError] = useState();
+    const gapStr = typeof gap === 'string' ? gap : `${gap}px`;
+    const resolvedLabelStyle = useMemo(() => (labelStyle ? Object.assign(Object.assign({}, DEFAULT_LABEL_STYLE), labelStyle) : DEFAULT_LABEL_STYLE), [labelStyle]);
+    const renderLabel = useCallback((text) => renderFieldLabel(text, labelClassName, resolvedLabelStyle), [labelClassName, resolvedLabelStyle]);
+    return { onChangeRef, onFocusRef, onBlurRef, readyHandlers, error, setError, gapStr, resolvedLabelStyle, renderLabel };
+}
 const DEFAULT_ERROR_STYLE = {
     color: '#dc2626',
     fontSize: 13,
@@ -2049,62 +2149,22 @@ function mergeStyles(base, override) {
 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 } = useContext(OzContext);
+    const { onChangeRef, onFocusRef, onBlurRef, readyHandlers, error, setError, gapStr, renderLabel, } = useCardBase({
+        vault,
+        fieldNames: ['cardNumber', 'expiry', 'cvv'],
+        onChange,
+        onReady,
+        onFocus,
+        onBlur,
+        gap,
+        labelStyle,
+        labelClassName,
+    });
     const fieldState = useRef({
         cardNumber: null,
         expiry: null,
         cvv: null,
     });
-    const readyFieldTypes = useRef(new Set());
-    const onReadyFiredRef = useRef(false);
-    const vaultRef = useRef(vault);
-    const onChangeRef = useRef(onChange);
-    const onReadyRef = useRef(onReady);
-    const onFocusRef = useRef(onFocus);
-    const onBlurRef = useRef(onBlur);
-    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
-    useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
-    useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
-    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.
-    // The cleanup resets readyFieldTypes when the component unmounts (covers React StrictMode double-invoke
-    // and SPA scenarios where the parent re-mounts this component).
-    useEffect(() => {
-        if (vault !== vaultRef.current) {
-            vaultRef.current = vault;
-            readyFieldTypes.current = new Set();
-            onReadyFiredRef.current = false;
-        }
-        return () => {
-            readyFieldTypes.current = new Set();
-            onReadyFiredRef.current = false;
-        };
-    }, [vault]);
-    const [error, setError] = useState();
-    const handleCardNumberReady = useCallback(() => {
-        var _a;
-        readyFieldTypes.current.add('cardNumber');
-        if (readyFieldTypes.current.size >= 3 && !onReadyFiredRef.current) {
-            onReadyFiredRef.current = true;
-            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-        }
-    }, []);
-    const handleExpiryReady = useCallback(() => {
-        var _a;
-        readyFieldTypes.current.add('expiry');
-        if (readyFieldTypes.current.size >= 3 && !onReadyFiredRef.current) {
-            onReadyFiredRef.current = true;
-            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-        }
-    }, []);
-    const handleCvvReady = useCallback(() => {
-        var _a;
-        readyFieldTypes.current.add('cvv');
-        if (readyFieldTypes.current.size >= 3 && !onReadyFiredRef.current) {
-            onReadyFiredRef.current = true;
-            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-        }
-    }, []);
     const emitChange = useCallback(() => {
         var _a;
         const { cardNumber, expiry, cvv } = fieldState.current;
@@ -2119,20 +2179,16 @@ function OzCard({ style, styles, classNames, labels, labelStyle, labelClassName,
             error: err,
             fields: Object.assign({}, fieldState.current),
         });
-    }, []);
-    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) => renderFieldLabel(text, labelClassName, resolvedLabelStyle);
+    }, [setError, onChangeRef]);
     const showError = !hideErrors && error;
     const errorNode = showError
         ? renderError
             ? renderError(error)
             : (jsx("div", { role: "alert", className: errorClassName, style: errorStyle ? Object.assign(Object.assign({}, DEFAULT_ERROR_STYLE), errorStyle) : DEFAULT_ERROR_STYLE, children: error }))
         : null;
-    const cardNumberField = (jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cardNumber), 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: handleCardNumberReady })] }));
-    const expiryField = (jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.expiry), 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: handleExpiryReady })] }));
-    const cvvField = (jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cvv), 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: handleCvvReady })] }));
+    const cardNumberField = (jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cardNumber), 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: readyHandlers['cardNumber'] })] }));
+    const expiryField = (jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.expiry), 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: readyHandlers['expiry'] })] }));
+    const cvvField = (jsxs("div", { style: layout === 'default' ? { flex: 1 } : undefined, children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.cvv), 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: readyHandlers['cvv'] })] }));
     if (layout === 'rows') {
         return (jsxs("div", { className: className, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: gapStr }, children: [cardNumberField, expiryField, cvvField, errorNode] }));
     }
@@ -2153,49 +2209,21 @@ const OzBankRoutingNumber = (props) => jsx(OzFieldBase, Object.assign({ type: "r
 function OzBankCard({ style, styles, classNames, labels, labelStyle, labelClassName, gap = 8, hideErrors = false, errorStyle, errorClassName, renderError, onChange, onReady, onFocus, onBlur, disabled, className, placeholders, }) {
     var _a, _b;
     const { vault } = useContext(OzContext);
+    const { onChangeRef, onFocusRef, onBlurRef, readyHandlers, error, setError, gapStr, renderLabel, } = useCardBase({
+        vault,
+        fieldNames: ['accountNumber', 'routingNumber'],
+        onChange,
+        onReady,
+        onFocus,
+        onBlur,
+        gap,
+        labelStyle,
+        labelClassName,
+    });
     const fieldState = useRef({
         accountNumber: null,
         routingNumber: null,
     });
-    const readyFieldTypes = useRef(new Set());
-    const onReadyFiredRef = useRef(false);
-    const vaultRef = useRef(vault);
-    const onChangeRef = useRef(onChange);
-    const onReadyRef = useRef(onReady);
-    const onFocusRef = useRef(onFocus);
-    const onBlurRef = useRef(onBlur);
-    useEffect(() => { onChangeRef.current = onChange; }, [onChange]);
-    useEffect(() => { onReadyRef.current = onReady; }, [onReady]);
-    useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
-    useEffect(() => { onBlurRef.current = onBlur; }, [onBlur]);
-    useEffect(() => {
-        if (vault !== vaultRef.current) {
-            vaultRef.current = vault;
-            readyFieldTypes.current = new Set();
-            onReadyFiredRef.current = false;
-        }
-        return () => {
-            readyFieldTypes.current = new Set();
-            onReadyFiredRef.current = false;
-        };
-    }, [vault]);
-    const [error, setError] = useState();
-    const handleAccountReady = useCallback(() => {
-        var _a;
-        readyFieldTypes.current.add('accountNumber');
-        if (readyFieldTypes.current.size >= 2 && !onReadyFiredRef.current) {
-            onReadyFiredRef.current = true;
-            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-        }
-    }, []);
-    const handleRoutingReady = useCallback(() => {
-        var _a;
-        readyFieldTypes.current.add('routingNumber');
-        if (readyFieldTypes.current.size >= 2 && !onReadyFiredRef.current) {
-            onReadyFiredRef.current = true;
-            (_a = onReadyRef.current) === null || _a === void 0 ? void 0 : _a.call(onReadyRef);
-        }
-    }, []);
     const emitChange = useCallback(() => {
         var _a;
         const { accountNumber, routingNumber } = fieldState.current;
@@ -2208,18 +2236,14 @@ function OzBankCard({ style, styles, classNames, labels, labelStyle, labelClassN
             error: err,
             fields: Object.assign({}, fieldState.current),
         });
-    }, []);
-    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) => renderFieldLabel(text, labelClassName, resolvedLabelStyle);
+    }, [setError, onChangeRef]);
     const showError = !hideErrors && error;
     const errorNode = showError
         ? renderError
             ? renderError(error)
             : (jsx("div", { role: "alert", className: errorClassName, style: errorStyle ? Object.assign(Object.assign({}, DEFAULT_ERROR_STYLE), errorStyle) : DEFAULT_ERROR_STYLE, children: error }))
         : null;
-    return (jsxs("div", { className: className, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: gapStr }, children: [jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.accountNumber), jsx(OzBankAccountNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.accountNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.accountNumber, placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders.accountNumber) !== null && _a !== void 0 ? _a : 'Account number', disabled: disabled, onChange: (e) => { fieldState.current.accountNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'accountNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'accountNumber'); }, onReady: handleAccountReady })] }), jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.routingNumber), jsx(OzBankRoutingNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.routingNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.routingNumber, placeholder: (_b = placeholders === null || placeholders === void 0 ? void 0 : placeholders.routingNumber) !== null && _b !== void 0 ? _b : 'Routing number', disabled: disabled, onChange: (e) => { fieldState.current.routingNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'routingNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'routingNumber'); }, onReady: handleRoutingReady })] }), errorNode] }));
+    return (jsxs("div", { className: className, style: { width: '100%', display: 'flex', flexDirection: 'column', gap: gapStr }, children: [jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.accountNumber), jsx(OzBankAccountNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.accountNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.accountNumber, placeholder: (_a = placeholders === null || placeholders === void 0 ? void 0 : placeholders.accountNumber) !== null && _a !== void 0 ? _a : 'Account number', disabled: disabled, onChange: (e) => { fieldState.current.accountNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'accountNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'accountNumber'); }, onReady: readyHandlers['accountNumber'] })] }), jsxs("div", { children: [renderLabel(labels === null || labels === void 0 ? void 0 : labels.routingNumber), jsx(OzBankRoutingNumber, { style: mergeStyles(style, styles === null || styles === void 0 ? void 0 : styles.routingNumber), className: classNames === null || classNames === void 0 ? void 0 : classNames.routingNumber, placeholder: (_b = placeholders === null || placeholders === void 0 ? void 0 : placeholders.routingNumber) !== null && _b !== void 0 ? _b : 'Routing number', disabled: disabled, onChange: (e) => { fieldState.current.routingNumber = e; emitChange(); }, onFocus: () => { var _a; return (_a = onFocusRef.current) === null || _a === void 0 ? void 0 : _a.call(onFocusRef, 'routingNumber'); }, onBlur: () => { var _a; return (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, 'routingNumber'); }, onReady: readyHandlers['routingNumber'] })] }), errorNode] }));
 }
 
 export { OzBankAccountNumber, OzBankCard, OzBankRoutingNumber, OzCard, OzCardNumber, OzCvv, OzElements, OzExpiry, createFetchWaxKey, useOzElements };