@justifi/webcomponents 4.16.0 → 4.17.0

package/dist/cjs/justifi-billing-form_2.cjs.entry.js

@@ -4,11 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b4498996.js');
 const index_esm = require('./index.esm-52757963.js');
-const schemaValidations = require('./schema-validations-9668fd79.js');
+const schemaValidations = require('./schema-validations-2733de42.js');
 const stateOptions = require('./state-options-4fbcb48a.js');
-const utils = require('./utils-fd644316.js');
-const _package = require('./package-b40227dd.js');
-const utils$1 = require('./utils-17869710.js');
+const utils = require('./utils-742da2e3.js');
 require('./business-form-options-582467fe.js');
 require('./Business-aacbe893.js');
 require('./helpers-602962eb.js');
@@ -49,7 +47,7 @@ const BillingForm = class {
         return this.formController.values.getValue();
     }
     async fill(fields) {
-        this.formController.setValues(fields);
+        this.formController.setInitialValues(fields);
     }
     async validate() {
         let isValid = await this.formController.validate();
@@ -57,1689 +55,26 @@ const BillingForm = class {
     }
     render() {
         const billingFormDefaultValue = this.formController.getInitialValues();
-        return (index.h(index.Host, { key: '394ccc8799078a3c6d0deb96d6b96553c0268d40', exportparts: "label,input,input-invalid" }, index.h("form", { key: 'a4796aa2ddc184bf881b9ca620ccdf54cb4ea9d5' }, index.h("fieldset", { key: '437d9d75bb9614349520b477e0b9f69c400fee8b' }, this.legend && index.h("legend", { key: '7f5c1078da38049ee2dc486b9c7eccff10a3698b' }, this.legend), index.h("div", { key: 'f8624c6ed26e5f052675ba6c40d98a1d7da02e86', class: "row gy-3" }, index.h("div", { key: '9aa4fb17b220bacaad519949a7686968e43a5d2d', class: "col-12" }, index.h("form-control-text", { key: 'f46a938e7ccb2f390675cc95adea78de91b7746b', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: '2c725e13c99d39ff1d583bdfadc8353e71df9a49', class: "col-12" }, index.h("form-control-text", { key: '893a63193b8be1172140a9475d552e16f2281c4e', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: '327ecba6bd968e4a24055446a45cdb2fdb51aa7b', class: "col-12" }, index.h("form-control-text", { key: '13524570e96720e0b2fcdc75e170bd52d77a1f78', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: '894c40be08af53aca60a549c12d60e98038b0388', class: "col-12" }, index.h("form-control-text", { key: 'ed13196ca464b162805bed6bb4c0e1ebbe20f028', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: '56aedf85b8c85ba0bda37fa5de223598ab38c950', class: "col-12" }, index.h("form-control-select", { key: 'c8fdf53bcff9ce6b5caeb5e06f15ff47b1ec633e', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: 'cdb3b5406da9d459fada4e59080bd94bd2d9b621', class: "col-12" }, index.h("form-control-text", { key: '67c0ca310493470e79866e11959edb91a77883e8', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler })))))));
+        return (index.h(index.Host, { key: '3e0954b4babb893c7409e91fcb18184298bc0b65', exportparts: "label,input,input-invalid" }, index.h("form", { key: 'fb71a434643015867f88d0efce59d31c3c7429c6' }, index.h("fieldset", { key: 'd24b2ab37867192046a27d5a4ff697474c4bf3da' }, this.legend && index.h("legend", { key: '67232ddf644cdc43c314f0dd5c3d25cf2fa70457' }, this.legend), index.h("div", { key: 'cedc173c4b65caf38fa43db6e82784cd10389dbb', class: "row gy-3" }, index.h("div", { key: '29bb833c0d6ab0a382422970df82538d22d4faee', class: "col-12" }, index.h("form-control-text", { key: '5b1dd1dc7020ee795c8676a59888c66fbaa10729', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), index.h("div", { key: 'c04e342634d5eca451f98a043b3aa57d06a141cd', class: "col-12" }, index.h("form-control-text", { key: '61407ae0370b96357c671a6db9f3a689db5df222', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), index.h("div", { key: '7dbf877e690936a53d2e11075a0904ae66854e6a', class: "col-12" }, index.h("form-control-text", { key: 'e13552aad0d46d7edf88c28c4348b0b401107b10', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), index.h("div", { key: 'c5be293a5559cbfa2e0c5425fb6ec0ec798c2af8', class: "col-12" }, index.h("form-control-text", { key: 'd6c6502bb828ab30598bb8f528d53a1431069dd5', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), index.h("div", { key: 'ec50b1ba2b7b2b687d9e6ad3c1c7af89d0dc6f74', class: "col-12" }, index.h("form-control-select", { key: '275e63c9b8b8b743c27d6053c36a2c14a57754fc', name: 'address_state', label: 'State', options: stateOptions.StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), index.h("div", { key: '4bfb86b74779742bb6816ed923ac06d28da142b2', class: "col-12" }, index.h("form-control-text", { key: 'a901279bda8599a14d4c440998f0d8da48b28252', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: utils.numberOnlyHandler })))))));
     }
 };
 BillingForm.style = JustifiBillingFormStyle0;
 
-var iframeResizer = {exports: {}};
-
-/*
- * File: iframeResizer.js
- * Desc: Force iframes to size to content.
- * Requires: iframeResizer.contentWindow.js to be loaded into the target frame.
- * Doc: https://iframe-resizer.com
- * Author: David J. Bradshaw - info@iframe-resizer.com
- */
-
-(function (module) {
-console.info(`
-IFRAME-RESIZER
-
-Iframe-Resizer 5 is now available via the following two packages:
-
- * @iframe-resizer/parent
- * @iframe-resizer/child
-
-Additionally their are also new versions of iframe-resizer for React, Vue, and jQuery.
-
-Version 5 of iframe-resizer has been extensively rewritten to use modern browser APIs, which has enabled significantly better performance and greater accuracy in the detection of content resizing events.
-
-Please see https://iframe-resizer.com/upgrade for more details.
-`)
-
-// eslint-disable-next-line sonarjs/cognitive-complexity, no-shadow-restricted-names
-;(function (undefined$1) {
-  if (typeof window === 'undefined') return // don't run for server side render
-
-  // var VERSION = '4.3.11'
-
-  var count = 0,
-    destroyObserver,
-    logEnabled = false,
-    hiddenCheckEnabled = false,
-    msgHeader = 'message',
-    msgHeaderLen = msgHeader.length,
-    msgId = '[iFrameSizer]', // Must match iframe msg ID
-    msgIdLen = msgId.length,
-    pagePosition = null,
-    requestAnimationFrame = window.requestAnimationFrame,
-    resetRequiredMethods = Object.freeze({
-      max: 1,
-      scroll: 1,
-      bodyScroll: 1,
-      documentElementScroll: 1
-    }),
-    settings = {},
-    timer = null,
-    defaults = Object.freeze({
-      autoResize: true,
-      bodyBackground: null,
-      bodyMargin: null,
-      bodyMarginV1: 8,
-      bodyPadding: null,
-      checkOrigin: true,
-      inPageLinks: false,
-      enablePublicMethods: true,
-      heightCalculationMethod: 'bodyOffset',
-      id: 'iFrameResizer',
-      interval: 32,
-      license: '1jqr0si6pnt',
-      log: false,
-      maxHeight: Infinity,
-      maxWidth: Infinity,
-      minHeight: 0,
-      minWidth: 0,
-      mouseEvents: true,
-      resizeFrom: 'parent',
-      scrolling: false,
-      sizeHeight: true,
-      sizeWidth: false,
-      warningTimeout: 5000,
-      tolerance: 0,
-      widthCalculationMethod: 'scroll',
-      onClose: function () {
-        return true
-      },
-      onClosed: function () {},
-      onInit: function () {},
-      onMessage: function () {
-        warn('onMessage function not defined');
-      },
-      onMouseEnter: function () {},
-      onMouseLeave: function () {},
-      onResized: function () {},
-      onScroll: function () {
-        return true
-      }
-    });
-
-  function getMutationObserver() {
-    return (
-      window.MutationObserver ||
-      window.WebKitMutationObserver ||
-      window.MozMutationObserver
-    )
-  }
-
-  function addEventListener(el, evt, func) {
-    el.addEventListener(evt, func, false);
-  }
-
-  function removeEventListener(el, evt, func) {
-    el.removeEventListener(evt, func, false);
-  }
-
-  function setupRequestAnimationFrame() {
-    var vendors = ['moz', 'webkit', 'o', 'ms'];
-    var x;
-
-    // Remove vendor prefixing if prefixed and break early if not
-    for (x = 0; x < vendors.length && !requestAnimationFrame; x += 1) {
-      requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
-    }
-
-    if (requestAnimationFrame) {
-      // Firefox extension content-scripts have a globalThis object that is not the same as window.
-      // Binding `requestAnimationFrame` to window allows the function to work and prevents errors
-      // being thrown when run in that context, and should be a no-op in every other context.
-      requestAnimationFrame = requestAnimationFrame.bind(window);
-    } else {
-      log('setup', 'RequestAnimationFrame not supported');
-    }
-  }
-
-  function getMyID(iframeId) {
-    var retStr = 'Host page: ' + iframeId;
-
-    if (window.top !== window.self) {
-      retStr =
-        window.parentIFrame && window.parentIFrame.getId
-          ? window.parentIFrame.getId() + ': ' + iframeId
-          : 'Nested host page: ' + iframeId;
-    }
-
-    return retStr
-  }
-
-  function formatLogHeader(iframeId) {
-    return msgId + '[' + getMyID(iframeId) + ']'
-  }
-
-  function isLogEnabled(iframeId) {
-    return settings[iframeId] ? settings[iframeId].log : logEnabled
-  }
-
-  function log(iframeId, msg) {
-    output('log', iframeId, msg, isLogEnabled(iframeId));
-  }
-
-  function info(iframeId, msg) {
-    output('info', iframeId, msg, isLogEnabled(iframeId));
-  }
-
-  function warn(iframeId, msg) {
-    output('warn', iframeId, msg, true);
-  }
-
-  function output(type, iframeId, msg, enabled) {
-    if (true === enabled && 'object' === typeof window.console) {
-      // eslint-disable-next-line no-console
-      console[type](formatLogHeader(iframeId), msg);
-    }
-  }
-
-  function iFrameListener(event) {
-    function resizeIFrame() {
-      function resize() {
-        setSize(messageData);
-        setPagePosition(iframeId);
-        on('onResized', messageData);
-      }
-
-      ensureInRange('Height');
-      ensureInRange('Width');
-
-      syncResize(resize, messageData, 'init');
-    }
-
-    function processMsg() {
-      var data = msg.slice(msgIdLen).split(':');
-      var height = data[1] ? parseInt(data[1], 10) : 0;
-      var iframe = settings[data[0]] && settings[data[0]].iframe;
-      var compStyle = getComputedStyle(iframe);
-
-      return {
-        iframe: iframe,
-        id: data[0],
-        height: height + getPaddingEnds(compStyle) + getBorderEnds(compStyle),
-        width: data[2],
-        type: data[3]
-      }
-    }
-
-    function getPaddingEnds(compStyle) {
-      if (compStyle.boxSizing !== 'border-box') {
-        return 0
-      }
-      var top = compStyle.paddingTop ? parseInt(compStyle.paddingTop, 10) : 0;
-      var bot = compStyle.paddingBottom
-        ? parseInt(compStyle.paddingBottom, 10)
-        : 0;
-      return top + bot
-    }
-
-    function getBorderEnds(compStyle) {
-      if (compStyle.boxSizing !== 'border-box') {
-        return 0
-      }
-      var top = compStyle.borderTopWidth
-        ? parseInt(compStyle.borderTopWidth, 10)
-        : 0;
-      var bot = compStyle.borderBottomWidth
-        ? parseInt(compStyle.borderBottomWidth, 10)
-        : 0;
-      return top + bot
-    }
-
-    function ensureInRange(Dimension) {
-      var max = Number(settings[iframeId]['max' + Dimension]),
-        min = Number(settings[iframeId]['min' + Dimension]),
-        dimension = Dimension.toLowerCase(),
-        size = Number(messageData[dimension]);
-
-      log(iframeId, 'Checking ' + dimension + ' is in range ' + min + '-' + max);
-
-      if (size < min) {
-        size = min;
-        log(iframeId, 'Set ' + dimension + ' to min value');
-      }
-
-      if (size > max) {
-        size = max;
-        log(iframeId, 'Set ' + dimension + ' to max value');
-      }
-
-      messageData[dimension] = '' + size;
-    }
-
-    function isMessageFromIFrame() {
-      function checkAllowedOrigin() {
-        function checkList() {
-          var i = 0,
-            retCode = false;
-
-          log(
-            iframeId,
-            'Checking connection is from allowed list of origins: ' +
-              checkOrigin
-          );
-
-          for (; i < checkOrigin.length; i++) {
-            if (checkOrigin[i] === origin) {
-              retCode = true;
-              break
-            }
-          }
-          return retCode
-        }
-
-        function checkSingle() {
-          var remoteHost = settings[iframeId] && settings[iframeId].remoteHost;
-          log(iframeId, 'Checking connection is from: ' + remoteHost);
-          return origin === remoteHost
-        }
-
-        return checkOrigin.constructor === Array ? checkList() : checkSingle()
-      }
-
-      var origin = event.origin,
-        checkOrigin = settings[iframeId] && settings[iframeId].checkOrigin;
-
-      if (checkOrigin && '' + origin !== 'null' && !checkAllowedOrigin()) {
-        throw new Error(
-          'Unexpected message received from: ' +
-            origin +
-            ' for ' +
-            messageData.iframe.id +
-            '. Message was: ' +
-            event.data +
-            '. This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.'
-        )
-      }
-
-      return true
-    }
-
-    function isMessageForUs() {
-      return (
-        msgId === ('' + msg).slice(0, msgIdLen) &&
-        msg.slice(msgIdLen).split(':')[0] in settings
-      ) // ''+Protects against non-string msg
-    }
-
-    function isMessageFromMetaParent() {
-      // Test if this message is from a parent above us. This is an ugly test, however, updating
-      // the message format would break backwards compatibility.
-      var retCode = messageData.type in { true: 1, false: 1, undefined: 1 };
-
-      if (retCode) {
-        log(iframeId, 'Ignoring init message from meta parent page');
-      }
-
-      return retCode
-    }
-
-    function getMsgBody(offset) {
-      return msg.slice(msg.indexOf(':') + msgHeaderLen + offset)
-    }
-
-    function forwardMsgFromIFrame(msgBody) {
-      log(
-        iframeId,
-        'onMessage passed: {iframe: ' +
-          messageData.iframe.id +
-          ', message: ' +
-          msgBody +
-          '}'
-      );
-
-      on('onMessage', {
-        iframe: messageData.iframe,
-        message: JSON.parse(msgBody)
-      });
-
-      log(iframeId, '--');
-    }
-
-    function getPageInfo() {
-      var bodyPosition = document.body.getBoundingClientRect(),
-        iFramePosition = messageData.iframe.getBoundingClientRect();
-
-      return JSON.stringify({
-        iframeHeight: iFramePosition.height,
-        iframeWidth: iFramePosition.width,
-        clientHeight: Math.max(
-          document.documentElement.clientHeight,
-          window.innerHeight || 0
-        ),
-        clientWidth: Math.max(
-          document.documentElement.clientWidth,
-          window.innerWidth || 0
-        ),
-        offsetTop: parseInt(iFramePosition.top - bodyPosition.top, 10),
-        offsetLeft: parseInt(iFramePosition.left - bodyPosition.left, 10),
-        scrollTop: window.pageYOffset,
-        scrollLeft: window.pageXOffset,
-        documentHeight: document.documentElement.clientHeight,
-        documentWidth: document.documentElement.clientWidth,
-        windowHeight: window.innerHeight,
-        windowWidth: window.innerWidth
-      })
-    }
-
-    function sendPageInfoToIframe(iframe, iframeId) {
-      function debouncedTrigger() {
-        trigger('Send Page Info', 'pageInfo:' + getPageInfo(), iframe, iframeId);
-      }
-      debounceFrameEvents(debouncedTrigger, 32, iframeId);
-    }
-
-    function startPageInfoMonitor() {
-      function setListener(type, func) {
-        function sendPageInfo() {
-          if (settings[id]) {
-            sendPageInfoToIframe(settings[id].iframe, id);
-          } else {
-            stop();
-          }
-        }
-['scroll', 'resize'].forEach(function (evt) {
-          log(id, type + evt + ' listener for sendPageInfo');
-          func(window, evt, sendPageInfo);
-        });
-      }
-
-      function stop() {
-        setListener('Remove ', removeEventListener);
-      }
-
-      function start() {
-        setListener('Add ', addEventListener);
-      }
-
-      var id = iframeId; // Create locally scoped copy of iFrame ID
-
-      start();
-
-      if (settings[id]) {
-        settings[id].stopPageInfo = stop;
-      }
-    }
-
-    function stopPageInfoMonitor() {
-      if (settings[iframeId] && settings[iframeId].stopPageInfo) {
-        settings[iframeId].stopPageInfo();
-        delete settings[iframeId].stopPageInfo;
-      }
-    }
-
-    function checkIFrameExists() {
-      var retBool = true;
-
-      if (null === messageData.iframe) {
-        warn(iframeId, 'IFrame (' + messageData.id + ') not found');
-        retBool = false;
-      }
-      return retBool
-    }
-
-    function getElementPosition(target) {
-      var iFramePosition = target.getBoundingClientRect();
-
-      getPagePosition(iframeId);
-
-      return {
-        x: Math.floor(Number(iFramePosition.left) + Number(pagePosition.x)),
-        y: Math.floor(Number(iFramePosition.top) + Number(pagePosition.y))
-      }
-    }
-
-    function scrollRequestFromChild(addOffset) {
-      /* istanbul ignore next */ // Not testable in Karma
-      function reposition() {
-        pagePosition = newPosition;
-        scrollTo();
-        log(iframeId, '--');
-      }
-
-      function calcOffset() {
-        return {
-          x: Number(messageData.width) + offset.x,
-          y: Number(messageData.height) + offset.y
-        }
-      }
-
-      function scrollParent() {
-        if (window.parentIFrame) {
-          window.parentIFrame['scrollTo' + (addOffset ? 'Offset' : '')](
-            newPosition.x,
-            newPosition.y
-          );
-        } else {
-          warn(
-            iframeId,
-            'Unable to scroll to requested position, window.parentIFrame not found'
-          );
-        }
-      }
-
-      var offset = addOffset
-          ? getElementPosition(messageData.iframe)
-          : { x: 0, y: 0 },
-        newPosition = calcOffset();
-
-      log(
-        iframeId,
-        'Reposition requested from iFrame (offset x:' +
-          offset.x +
-          ' y:' +
-          offset.y +
-          ')'
-      );
-
-      if (window.top === window.self) {
-        reposition();
-      } else {
-        scrollParent();
-      }
-    }
-
-    function scrollTo() {
-      if (false === on('onScroll', pagePosition)) {
-        unsetPagePosition();
-      } else {
-        setPagePosition(iframeId);
-      }
-    }
-
-    function findTarget(location) {
-      function jumpToTarget() {
-        var jumpPosition = getElementPosition(target);
-
-        log(
-          iframeId,
-          'Moving to in page link (#' +
-            hash +
-            ') at x: ' +
-            jumpPosition.x +
-            ' y: ' +
-            jumpPosition.y
-        );
-        pagePosition = {
-          x: jumpPosition.x,
-          y: jumpPosition.y
-        };
-
-        scrollTo();
-        log(iframeId, '--');
-      }
-
-      function jumpToParent() {
-        if (window.parentIFrame) {
-          window.parentIFrame.moveToAnchor(hash);
-        } else {
-          log(
-            iframeId,
-            'In page link #' +
-              hash +
-              ' not found and window.parentIFrame not found'
-          );
-        }
-      }
-
-      var hash = location.split('#')[1] || '',
-        hashData = decodeURIComponent(hash),
-        target =
-          document.getElementById(hashData) ||
-          document.getElementsByName(hashData)[0];
-
-      if (target) {
-        jumpToTarget();
-      } else if (window.top === window.self) {
-        log(iframeId, 'In page link #' + hash + ' not found');
-      } else {
-        jumpToParent();
-      }
-    }
-
-    function onMouse(event) {
-      var mousePos = {};
-
-      if (Number(messageData.width) === 0 && Number(messageData.height) === 0) {
-        var data = getMsgBody(9).split(':');
-        mousePos = {
-          x: data[1],
-          y: data[0]
-        };
-      } else {
-        mousePos = {
-          x: messageData.width,
-          y: messageData.height
-        };
-      }
-
-      on(event, {
-        iframe: messageData.iframe,
-        screenX: Number(mousePos.x),
-        screenY: Number(mousePos.y),
-        type: messageData.type
-      });
-    }
-
-    function on(funcName, val) {
-      return chkEvent(iframeId, funcName, val)
-    }
-
-    function actionMsg() {
-      if (settings[iframeId] && settings[iframeId].firstRun) firstRun();
-
-      switch (messageData.type) {
-        case 'close': {
-          closeIFrame(messageData.iframe);
-          break
-        }
-
-        case 'message': {
-          forwardMsgFromIFrame(getMsgBody(6));
-          break
-        }
-
-        case 'mouseenter': {
-          onMouse('onMouseEnter');
-          break
-        }
-
-        case 'mouseleave': {
-          onMouse('onMouseLeave');
-          break
-        }
-
-        case 'autoResize': {
-          settings[iframeId].autoResize = JSON.parse(getMsgBody(9));
-          break
-        }
-
-        case 'scrollTo': {
-          scrollRequestFromChild(false);
-          break
-        }
-
-        case 'scrollToOffset': {
-          scrollRequestFromChild(true);
-          break
-        }
-
-        case 'pageInfo': {
-          sendPageInfoToIframe(
-            settings[iframeId] && settings[iframeId].iframe,
-            iframeId
-          );
-          startPageInfoMonitor();
-          break
-        }
-
-        case 'pageInfoStop': {
-          stopPageInfoMonitor();
-          break
-        }
-
-        case 'inPageLink': {
-          findTarget(getMsgBody(9));
-          break
-        }
-
-        case 'reset': {
-          resetIFrame(messageData);
-          break
-        }
-
-        case 'init': {
-          resizeIFrame();
-          on('onInit', messageData.iframe);
-          break
-        }
-
-        default: {
-          if (
-            Number(messageData.width) === 0 &&
-            Number(messageData.height) === 0
-          ) {
-            warn(
-              'Unsupported message received (' +
-                messageData.type +
-                '), this is likely due to the iframe containing a later ' +
-                'version of iframe-resizer than the parent page'
-            );
-          } else {
-            resizeIFrame();
-          }
-        }
-      }
-    }
-
-    function hasSettings(iframeId) {
-      var retBool = true;
-
-      if (!settings[iframeId]) {
-        retBool = false;
-        warn(
-          messageData.type +
-            ' No settings for ' +
-            iframeId +
-            '. Message was: ' +
-            msg
-        );
-      }
-
-      return retBool
-    }
-
-    function iFrameReadyMsgReceived() {
-      // eslint-disable-next-line no-restricted-syntax, guard-for-in
-      for (var iframeId in settings) {
-        trigger(
-          'iFrame requested init',
-          createOutgoingMsg(iframeId),
-          settings[iframeId].iframe,
-          iframeId
-        );
-      }
-    }
-
-    function firstRun() {
-      if (settings[iframeId]) {
-        settings[iframeId].firstRun = false;
-      }
-    }
-
-    var msg = event.data,
-      messageData = {},
-      iframeId = null;
-
-    if ('[iFrameResizerChild]Ready' === msg) {
-      iFrameReadyMsgReceived();
-    } else if (isMessageForUs()) {
-      messageData = processMsg();
-      iframeId = messageData.id;
-      if (settings[iframeId]) {
-        settings[iframeId].loaded = true;
-      }
-
-      if (!isMessageFromMetaParent() && hasSettings(iframeId)) {
-        log(iframeId, 'Received: ' + msg);
-
-        if (checkIFrameExists() && isMessageFromIFrame()) {
-          actionMsg();
-        }
-      }
-    } else {
-      info(iframeId, 'Ignored: ' + msg);
-    }
-  }
-
-  function chkEvent(iframeId, funcName, val) {
-    var func = null,
-      retVal = null;
-
-    if (settings[iframeId]) {
-      func = settings[iframeId][funcName];
-
-      if ('function' === typeof func) {
-        retVal = func(val);
-      } else {
-        throw new TypeError(
-          funcName + ' on iFrame[' + iframeId + '] is not a function'
-        )
-      }
-    }
-
-    return retVal
-  }
-
-  function removeIframeListeners(iframe) {
-    var iframeId = iframe.id;
-    delete settings[iframeId];
-  }
-
-  function closeIFrame(iframe) {
-    var iframeId = iframe.id;
-    if (chkEvent(iframeId, 'onClose', iframeId) === false) {
-      log(iframeId, 'Close iframe cancelled by onClose event');
-      return
-    }
-    log(iframeId, 'Removing iFrame: ' + iframeId);
-
-    try {
-      // Catch race condition error with React
-      if (iframe.parentNode) {
-        iframe.parentNode.removeChild(iframe);
-      }
-    } catch (error) {
-      warn(error);
-    }
-
-    chkEvent(iframeId, 'onClosed', iframeId);
-    log(iframeId, '--');
-    removeIframeListeners(iframe);
-    if (destroyObserver) {
-      destroyObserver.disconnect();
-      destroyObserver = null;
-    }
-  }
-
-  function getPagePosition(iframeId) {
-    if (null === pagePosition) {
-      pagePosition = {
-        x:
-          window.pageXOffset === undefined$1
-            ? document.documentElement.scrollLeft
-            : window.pageXOffset,
-        y:
-          window.pageYOffset === undefined$1
-            ? document.documentElement.scrollTop
-            : window.pageYOffset
-      };
-      log(
-        iframeId,
-        'Get page position: ' + pagePosition.x + ',' + pagePosition.y
-      );
-    }
-  }
-
-  function setPagePosition(iframeId) {
-    if (null !== pagePosition) {
-      window.scrollTo(pagePosition.x, pagePosition.y);
-      log(
-        iframeId,
-        'Set page position: ' + pagePosition.x + ',' + pagePosition.y
-      );
-      unsetPagePosition();
-    }
-  }
-
-  function unsetPagePosition() {
-    pagePosition = null;
-  }
-
-  function resetIFrame(messageData) {
-    function reset() {
-      setSize(messageData);
-      trigger('reset', 'reset', messageData.iframe, messageData.id);
-    }
-
-    log(
-      messageData.id,
-      'Size reset requested by ' +
-        ('init' === messageData.type ? 'host page' : 'iFrame')
-    );
-    getPagePosition(messageData.id);
-    syncResize(reset, messageData, 'reset');
-  }
-
-  function setSize(messageData) {
-    function setDimension(dimension) {
-      if (!messageData.id) {
-        log('undefined', 'messageData id not set');
-        return
-      }
-      messageData.iframe.style[dimension] = messageData[dimension] + 'px';
-      log(
-        messageData.id,
-        'IFrame (' +
-          iframeId +
-          ') ' +
-          dimension +
-          ' set to ' +
-          messageData[dimension] +
-          'px'
-      );
-    }
-
-    function chkZero(dimension) {
-      // FireFox sets dimension of hidden iFrames to zero.
-      // So if we detect that set up an event to check for
-      // when iFrame becomes visible.
-
-      /* istanbul ignore next */ // Not testable in PhantomJS
-      if (!hiddenCheckEnabled && '0' === messageData[dimension]) {
-        hiddenCheckEnabled = true;
-        log(iframeId, 'Hidden iFrame detected, creating visibility listener');
-        fixHiddenIFrames();
-      }
-    }
-
-    function processDimension(dimension) {
-      setDimension(dimension);
-      chkZero(dimension);
-    }
-
-    var iframeId = messageData.iframe.id;
-
-    if (settings[iframeId]) {
-      if (settings[iframeId].sizeHeight) {
-        processDimension('height');
-      }
-      if (settings[iframeId].sizeWidth) {
-        processDimension('width');
-      }
-    }
-  }
-
-  function syncResize(func, messageData, doNotSync) {
-    /* istanbul ignore if */ // Not testable in PhantomJS
-    if (
-      doNotSync !== messageData.type &&
-      requestAnimationFrame &&
-      // including check for jasmine because had trouble getting spy to work in unit test using requestAnimationFrame
-      !window.jasmine
-    ) {
-      log(messageData.id, 'Requesting animation frame');
-      requestAnimationFrame(func);
-    } else {
-      func();
-    }
-  }
-
-  function trigger(calleeMsg, msg, iframe, id, noResponseWarning) {
-    function postMessageToIFrame() {
-      var target = settings[id] && settings[id].targetOrigin;
-      log(
-        id,
-        '[' +
-          calleeMsg +
-          '] Sending msg to iframe[' +
-          id +
-          '] (' +
-          msg +
-          ') targetOrigin: ' +
-          target
-      );
-      iframe.contentWindow.postMessage(msgId + msg, target);
-    }
-
-    function iFrameNotFound() {
-      warn(id, '[' + calleeMsg + '] IFrame(' + id + ') not found');
-    }
-
-    function chkAndSend() {
-      if (
-        iframe &&
-        'contentWindow' in iframe &&
-        null !== iframe.contentWindow
-      ) {
-        // Null test for PhantomJS
-        postMessageToIFrame();
-      } else {
-        iFrameNotFound();
-      }
-    }
-
-    function warnOnNoResponse() {
-      function warning() {
-        if (settings[id] && !settings[id].loaded && !errorShown) {
-          errorShown = true;
-          warn(
-            id,
-            'IFrame has not responded within ' +
-              settings[id].warningTimeout / 1000 +
-              ' seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning.'
-          );
-        }
-      }
-
-      if (
-        !!noResponseWarning &&
-        settings[id] &&
-        !!settings[id].warningTimeout
-      ) {
-        settings[id].msgTimeout = setTimeout(
-          warning,
-          settings[id].warningTimeout
-        );
-      }
-    }
-
-    var errorShown = false;
-
-    id = id || iframe.id;
-
-    if (settings[id]) {
-      chkAndSend();
-      warnOnNoResponse();
-    }
-  }
-
-  function createOutgoingMsg(iframeId) {
-    return (
-      iframeId +
-      ':' +
-      settings[iframeId].bodyMarginV1 +
-      ':' +
-      settings[iframeId].sizeWidth +
-      ':' +
-      settings[iframeId].log +
-      ':' +
-      settings[iframeId].interval +
-      ':' +
-      settings[iframeId].enablePublicMethods +
-      ':' +
-      settings[iframeId].autoResize +
-      ':' +
-      settings[iframeId].bodyMargin +
-      ':' +
-      settings[iframeId].heightCalculationMethod +
-      ':' +
-      settings[iframeId].bodyBackground +
-      ':' +
-      settings[iframeId].bodyPadding +
-      ':' +
-      settings[iframeId].tolerance +
-      ':' +
-      settings[iframeId].inPageLinks +
-      ':' +
-      settings[iframeId].resizeFrom +
-      ':' +
-      settings[iframeId].widthCalculationMethod +
-      ':' +
-      settings[iframeId].mouseEvents
-    )
-  }
-
-  function isNumber(value) {
-    return typeof value === 'number'
-  }
-
-  function setupIFrame(iframe, options) {
-    function setLimits() {
-      function addStyle(style) {
-        var styleValue = settings[iframeId][style];
-        if (Infinity !== styleValue && 0 !== styleValue) {
-          iframe.style[style] = isNumber(styleValue)
-            ? styleValue + 'px'
-            : styleValue;
-          log(iframeId, 'Set ' + style + ' = ' + iframe.style[style]);
-        }
-      }
-
-      function chkMinMax(dimension) {
-        if (
-          settings[iframeId]['min' + dimension] >
-          settings[iframeId]['max' + dimension]
-        ) {
-          throw new Error(
-            'Value for min' +
-              dimension +
-              ' can not be greater than max' +
-              dimension
-          )
-        }
-      }
-
-      chkMinMax('Height');
-      chkMinMax('Width');
-
-      addStyle('maxHeight');
-      addStyle('minHeight');
-      addStyle('maxWidth');
-      addStyle('minWidth');
-    }
-
-    function newId() {
-      var id = (options && options.id) || defaults.id + count++;
-      if (null !== document.getElementById(id)) {
-        id += count++;
-      }
-      return id
-    }
-
-    function ensureHasId(iframeId) {
-      if (typeof iframeId !== 'string') {
-        throw new TypeError('Invaild id for iFrame. Expected String')
-      }
-
-      if ('' === iframeId) {
-        // eslint-disable-next-line no-multi-assign
-        iframe.id = iframeId = newId();
-        logEnabled = (options || {}).log;
-        log(
-          iframeId,
-          'Added missing iframe ID: ' + iframeId + ' (' + iframe.src + ')'
-        );
-      }
-
-      return iframeId
-    }
-
-    function setScrolling() {
-      log(
-        iframeId,
-        'IFrame scrolling ' +
-          (settings[iframeId] && settings[iframeId].scrolling
-            ? 'enabled'
-            : 'disabled') +
-          ' for ' +
-          iframeId
-      );
-      iframe.style.overflow =
-        false === (settings[iframeId] && settings[iframeId].scrolling)
-          ? 'hidden'
-          : 'auto';
-      switch (settings[iframeId] && settings[iframeId].scrolling) {
-        case 'omit': {
-          break
-        }
-
-        case true: {
-          iframe.scrolling = 'yes';
-          break
-        }
-
-        case false: {
-          iframe.scrolling = 'no';
-          break
-        }
-
-        default: {
-          iframe.scrolling = settings[iframeId]
-            ? settings[iframeId].scrolling
-            : 'no';
-        }
-      }
-    }
-
-    // The V1 iFrame script expects an int, where as in V2 expects a CSS
-    // string value such as '1px 3em', so if we have an int for V2, set V1=V2
-    // and then convert V2 to a string PX value.
-    function setupBodyMarginValues() {
-      if (
-        'number' ===
-          typeof (settings[iframeId] && settings[iframeId].bodyMargin) ||
-        '0' === (settings[iframeId] && settings[iframeId].bodyMargin)
-      ) {
-        settings[iframeId].bodyMarginV1 = settings[iframeId].bodyMargin;
-        settings[iframeId].bodyMargin =
-          '' + settings[iframeId].bodyMargin + 'px';
-      }
-    }
-
-    function checkReset() {
-      // Reduce scope of firstRun to function, because IE8's JS execution
-      // context stack is borked and this value gets externally
-      // changed midway through running this function!!!
-      var firstRun = settings[iframeId] && settings[iframeId].firstRun,
-        resetRequertMethod =
-          settings[iframeId] &&
-          settings[iframeId].heightCalculationMethod in resetRequiredMethods;
-
-      if (!firstRun && resetRequertMethod) {
-        resetIFrame({ iframe: iframe, height: 0, width: 0, type: 'init' });
-      }
-    }
-
-    function setupIFrameObject() {
-      if (settings[iframeId]) {
-        settings[iframeId].iframe.iFrameResizer = {
-          close: closeIFrame.bind(null, settings[iframeId].iframe),
-
-          removeListeners: removeIframeListeners.bind(
-            null,
-            settings[iframeId].iframe
-          ),
-
-          resize: trigger.bind(
-            null,
-            'Window resize',
-            'resize',
-            settings[iframeId].iframe
-          ),
-
-          moveToAnchor: function (anchor) {
-            trigger(
-              'Move to anchor',
-              'moveToAnchor:' + anchor,
-              settings[iframeId].iframe,
-              iframeId
-            );
-          },
-
-          sendMessage: function (message) {
-            message = JSON.stringify(message);
-            trigger(
-              'Send Message',
-              'message:' + message,
-              settings[iframeId].iframe,
-              iframeId
-            );
-          }
-        };
-      }
-    }
-
-    // We have to call trigger twice, as we can not be sure if all
-    // iframes have completed loading when this code runs. The
-    // event listener also catches the page changing in the iFrame.
-    function init(msg) {
-      function iFrameLoaded() {
-        trigger('iFrame.onload', msg, iframe, undefined$1, true);
-        checkReset();
-      }
-
-      function createDestroyObserver(MutationObserver) {
-        if (!iframe.parentNode) {
-          return null
-        }
-
-        var destroyObserver = new MutationObserver(function (mutations) {
-          mutations.forEach(function (mutation) {
-            var removedNodes = Array.prototype.slice.call(mutation.removedNodes); // Transform NodeList into an Array
-            removedNodes.forEach(function (removedNode) {
-              if (removedNode === iframe) {
-                closeIFrame(iframe);
-              }
-            });
-          });
-        });
-        destroyObserver.observe(iframe.parentNode, {
-          childList: true
-        });
-        return destroyObserver
-      }
-
-      var MutationObserver = getMutationObserver();
-      if (MutationObserver) {
-        destroyObserver = createDestroyObserver(MutationObserver);
-      }
-
-      addEventListener(iframe, 'load', iFrameLoaded);
-      trigger('init', msg, iframe, undefined$1, true);
-    }
-
-    function checkOptions(options) {
-      if ('object' !== typeof options) {
-        throw new TypeError('Options is not an object')
-      }
-    }
-
-    function copyOptions(options) {
-      // eslint-disable-next-line no-restricted-syntax
-      for (var option in defaults) {
-        if (Object.prototype.hasOwnProperty.call(defaults, option)) {
-          settings[iframeId][option] = Object.prototype.hasOwnProperty.call(
-            options,
-            option
-          )
-            ? options[option]
-            : defaults[option];
-        }
-      }
-    }
-
-    function getTargetOrigin(remoteHost) {
-      return '' === remoteHost ||
-        null !== remoteHost.match(/^(about:blank|javascript:|file:\/\/)/)
-        ? '*'
-        : remoteHost
-    }
-
-    function depricate(key) {
-      var splitName = key.split('Callback');
-
-      if (splitName.length === 2) {
-        var name =
-          'on' + splitName[0].charAt(0).toUpperCase() + splitName[0].slice(1);
-        this[name] = this[key];
-        delete this[key];
-        warn(
-          iframeId,
-          "Deprecated: '" +
-            key +
-            "' has been renamed '" +
-            name +
-            "'. The old method will be removed in the next major version."
-        );
-      }
-    }
-
-    function processOptions(options) {
-      options = options || {};
-
-      settings[iframeId] = Object.create(null); // Protect against prototype attacks
-      settings[iframeId].iframe = iframe;
-      settings[iframeId].firstRun = true;
-      settings[iframeId].remoteHost =
-        iframe.src && iframe.src.split('/').slice(0, 3).join('/');
-
-      checkOptions(options);
-      Object.keys(options).forEach(depricate, options);
-      copyOptions(options);
-
-      if (settings[iframeId]) {
-        settings[iframeId].targetOrigin =
-          true === settings[iframeId].checkOrigin
-            ? getTargetOrigin(settings[iframeId].remoteHost)
-            : '*';
-      }
-    }
-
-    function beenHere() {
-      return iframeId in settings && 'iFrameResizer' in iframe
-    }
-
-    var iframeId = ensureHasId(iframe.id);
-
-    if (beenHere()) {
-      warn(iframeId, 'Ignored iFrame, already setup.');
-    } else {
-      processOptions(options);
-      setScrolling();
-      setLimits();
-      setupBodyMarginValues();
-      init(createOutgoingMsg(iframeId));
-      setupIFrameObject();
-    }
-  }
-
-  function debouce(fn, time) {
-    if (null === timer) {
-      timer = setTimeout(function () {
-        timer = null;
-        fn();
-      }, time);
-    }
-  }
-
-  var frameTimer = {};
-  function debounceFrameEvents(fn, time, frameId) {
-    if (!frameTimer[frameId]) {
-      frameTimer[frameId] = setTimeout(function () {
-        frameTimer[frameId] = null;
-        fn();
-      }, time);
-    }
-  }
-
-  // Not testable in PhantomJS
-  /* istanbul ignore next */
-
-  function fixHiddenIFrames() {
-    function checkIFrames() {
-      function checkIFrame(settingId) {
-        function chkDimension(dimension) {
-          return (
-            '0px' ===
-            (settings[settingId] && settings[settingId].iframe.style[dimension])
-          )
-        }
-
-        function isVisible(el) {
-          return null !== el.offsetParent
-        }
-
-        if (
-          settings[settingId] &&
-          isVisible(settings[settingId].iframe) &&
-          (chkDimension('height') || chkDimension('width'))
-        ) {
-          trigger(
-            'Visibility change',
-            'resize',
-            settings[settingId].iframe,
-            settingId
-          );
-        }
-      }
-
-      Object.keys(settings).forEach(function (key) {
-        checkIFrame(key);
-      });
-    }
-
-    function mutationObserved(mutations) {
-      log(
-        'window',
-        'Mutation observed: ' + mutations[0].target + ' ' + mutations[0].type
-      );
-      debouce(checkIFrames, 16);
-    }
-
-    function createMutationObserver() {
-      var target = document.querySelector('body'),
-        config = {
-          attributes: true,
-          attributeOldValue: false,
-          characterData: true,
-          characterDataOldValue: false,
-          childList: true,
-          subtree: true
-        },
-        observer = new MutationObserver(mutationObserved);
-
-      observer.observe(target, config);
-    }
-
-    var MutationObserver = getMutationObserver();
-    if (MutationObserver) {
-      createMutationObserver();
-    }
-  }
-
-  function resizeIFrames(event) {
-    function resize() {
-      sendTriggerMsg('Window ' + event, 'resize');
-    }
-
-    log('window', 'Trigger event: ' + event);
-    debouce(resize, 16);
-  }
-
-  // Not testable in PhantomJS
-  /* istanbul ignore next */
-  function tabVisible() {
-    function resize() {
-      sendTriggerMsg('Tab Visible', 'resize');
-    }
-
-    if ('hidden' !== document.visibilityState) {
-      log('document', 'Trigger event: Visibility change');
-      debouce(resize, 16);
-    }
-  }
-
-  function sendTriggerMsg(eventName, event) {
-    function isIFrameResizeEnabled(iframeId) {
-      return (
-        settings[iframeId] &&
-        'parent' === settings[iframeId].resizeFrom &&
-        settings[iframeId].autoResize &&
-        !settings[iframeId].firstRun
-      )
-    }
-
-    Object.keys(settings).forEach(function (iframeId) {
-      if (isIFrameResizeEnabled(iframeId)) {
-        trigger(eventName, event, settings[iframeId].iframe, iframeId);
-      }
-    });
-  }
-
-  function setupEventListeners() {
-    addEventListener(window, 'message', iFrameListener);
-
-    addEventListener(window, 'resize', function () {
-      resizeIFrames('resize');
-    });
-
-    addEventListener(document, 'visibilitychange', tabVisible);
-
-    addEventListener(document, '-webkit-visibilitychange', tabVisible);
-  }
-
-  function factory() {
-    function init(options, element) {
-      function chkType() {
-        if (!element.tagName) {
-          throw new TypeError('Object is not a valid DOM element')
-        } else if ('IFRAME' !== element.tagName.toUpperCase()) {
-          throw new TypeError(
-            'Expected <IFRAME> tag, found <' + element.tagName + '>'
-          )
-        }
-      }
-
-      if (element) {
-        chkType();
-        setupIFrame(element, options);
-        iFrames.push(element);
-      }
-    }
-
-    function warnDeprecatedOptions(options) {
-      if (options && options.enablePublicMethods) {
-        warn(
-          'enablePublicMethods option has been removed, public methods are now always available in the iFrame'
-        );
-      }
-    }
-
-    var iFrames;
-
-    setupRequestAnimationFrame();
-    setupEventListeners();
-
-    return function iFrameResizeF(options, target) {
-      iFrames = []; // Only return iFrames past in on this call
-
-      warnDeprecatedOptions(options);
-
-      switch (typeof target) {
-        case 'undefined':
-        case 'string': {
-          Array.prototype.forEach.call(
-            document.querySelectorAll(target || 'iframe'),
-            init.bind(undefined$1, options)
-          );
-          break
-        }
-
-        case 'object': {
-          init(options, target);
-          break
-        }
-
-        default: {
-          throw new TypeError('Unexpected data type (' + typeof target + ')')
-        }
-      }
-
-      return iFrames
-    }
-  }
-
-  function createJQueryPublicMethod($) {
-    if (!$.fn) {
-      info('', 'Unable to bind to jQuery, it is not fully loaded.');
-    } else if (!$.fn.iFrameResize) {
-      $.fn.iFrameResize = function $iFrameResizeF(options) {
-        function init(index, element) {
-          setupIFrame(element, options);
-        }
-
-        return this.filter('iframe').each(init).end()
-      };
-    }
-  }
-
-  if (window.jQuery !== undefined$1) {
-    createJQueryPublicMethod(window.jQuery);
-  }
-
-  if (typeof undefined$1 === 'function' && undefined$1.amd) {
-    undefined$1([], factory);
-  } else {
-    // Node for browserfy
-    module.exports = factory();
-  }
-  window.iFrameResize = window.iFrameResize || factory();
-})();
-}(iframeResizer));
-
-const iFrameResize = iframeResizer.exports;
-
-const MessageEventType = {
-    card: {
-        ready: 'justifi.card.ready',
-        tokenize: 'justifi.card.tokenize',
-        validate: 'justifi.card.validate',
-        resize: 'justifi.card.resize',
-        styleOverrides: 'justifi.card.styleOverrides',
-    },
-    bankAccount: {
-        ready: 'justifi.bankAccount.ready',
-        tokenize: 'justifi.bankAccount.tokenize',
-        validate: 'justifi.bankAccount.validate',
-        resize: 'justifi.bankAccount.resize',
-        styleOverrides: 'justifi.bankAccount.styleOverrides',
-    },
-};
-
-const getComputedTheme = () => {
-    const computedStyles = getComputedStyle(document.body);
-    const computedTheme = {
-        loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),
-        layout: {
-            fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),
-            padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
-            formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
-            formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),
-        },
-        formControl: {
-            backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),
-            borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),
-            borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),
-            borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),
-            borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),
-            borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),
-            borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),
-            borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),
-            borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),
-            borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),
-            borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),
-            boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),
-            boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),
-            boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),
-            boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),
-            color: computedStyles.getPropertyValue('--jfi-form-control-color'),
-            colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),
-            fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),
-            fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),
-            lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),
-            margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),
-            padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),
-        },
-        formLabel: {
-            color: computedStyles.getPropertyValue('--jfi-form-label-color'),
-            fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),
-            fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),
-            fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),
-            margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),
-        },
-        errorMessage: {
-            color: computedStyles.getPropertyValue('--jfi-error-message-color'),
-            margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),
-            fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),
-        },
-    };
-    return computedTheme;
-};
-
-/**
- * This approach decouples the communication logic from PaymentMethodForm component,
- * making it cleaner, more maintainable, and easier to test
- */
-class FrameCommunicationService {
-    constructor(iframe, iframeOrigin) {
-        this.iframe = iframe;
-        this.iframeOrigin = iframeOrigin;
-    }
-    postMessage(eventType, payload) {
-        const message = Object.assign({ eventType }, payload);
-        this.iframe.contentWindow.postMessage(message, this.iframeOrigin);
-    }
-    addMessageListener(callback) {
-        window.addEventListener('message', callback);
-    }
-    removeMessageListener(callback) {
-        window.removeEventListener('message', callback);
-    }
-    postMessageWithResponseListener(eventType, payload) {
-        return new Promise((resolve) => {
-            const responseListener = (event) => {
-                if (event.data.eventType !== eventType)
-                    return;
-                window.removeEventListener('message', responseListener);
-                resolve(event.data.data);
-            };
-            window.addEventListener('message', responseListener);
-            this.postMessage(eventType, payload);
-        });
-    }
-}
-
-const paymentMethodFormCss = ":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}iframe{width:1px;min-width:100%}";
-const JustifiPaymentMethodFormStyle0 = paymentMethodFormCss;
-
-const PaymentMethodForm = class {
+const SaveNewPaymentMethod = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.paymentMethodFormReady = index.createEvent(this, "paymentMethodFormReady", 7);
-        this.paymentMethodFormValidated = index.createEvent(this, "paymentMethodFormValidated", 7);
-        this.paymentMethodFormTokenized = index.createEvent(this, "paymentMethodFormTokenized", 7);
-        this.computedTheme = getComputedTheme();
-        this.dispatchMessageEvent = (messageEvent) => {
-            const { eventType, data } = messageEvent.data;
-            const eventTypeMessage = MessageEventType[this.paymentMethodFormType];
-            if (eventType === eventTypeMessage.ready) {
-                this.paymentMethodFormReady.emit(data);
-            }
-            else if (eventType === eventTypeMessage.tokenize) {
-                this.paymentMethodFormTokenized.emit(data);
-            }
-            else if (eventType === eventTypeMessage.validate) {
-                this.paymentMethodFormValidated.emit(data);
-            }
-        };
-        this.postMessage = (eventType, payload) => {
-            this.frameService.postMessage(eventType, payload);
-        };
-        this.paymentMethodFormType = undefined;
-        this.paymentMethodFormValidationMode = undefined;
-        this.iframeOrigin = undefined;
-        this.singleLine = undefined;
-    }
-    disconnectedCallback() {
-        this.frameService.removeMessageListener(this.dispatchMessageEvent);
-    }
-    async resize() {
-        this.postMessage(MessageEventType[this.paymentMethodFormType].resize);
-    }
-    async tokenize(clientId, paymentMethodMetadata, account) {
-        const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
-        return this.frameService.postMessageWithResponseListener(eventType, {
-            clientId,
-            paymentMethodMetadata,
-            account,
-            componentVersion: _package.packageJson.version,
-        });
-    }
-    async validate() {
-        const eventType = MessageEventType[this.paymentMethodFormType].validate;
-        return this.frameService.postMessageWithResponseListener(eventType);
-    }
-    sendStyleOverrides() {
-        if (this.computedTheme) {
-            this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
-        }
-    }
-    getIframeSrc() {
-        let paramsList = [];
-        if (this.paymentMethodFormValidationMode) {
-            paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);
-        }
-        if (this.singleLine) {
-            paramsList.push(`singleLine=${this.singleLine}`);
-        }
-        let iframeSrc = `${this.iframeOrigin}/${this.paymentMethodFormType}${utils$1.composeQueryParams(paramsList)}`;
-        return iframeSrc;
+        this.checkboxChanged = index.createEvent(this, "checkboxChanged", 7);
+        this.isChecked = false;
     }
-    initializeFrameCommunicationService() {
-        var _a;
-        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
-        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
+    handleCheckboxChange(event) {
+        const target = event.target;
+        this.isChecked = target.checked;
+        this.checkboxChanged.emit(this.isChecked);
     }
     render() {
-        return (index.h(index.Host, { key: '91a69ce3f918c98248d6bb5df6dc5ec0dffe3c26' }, index.h("iframe", { key: '99c06be5a78a3849e687f7f95f8fe3382cc2c4cd', id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
-                this.iframeElement = el;
-                this.initializeFrameCommunicationService();
-            }, onLoad: () => {
-                iFrameResize({
-                    scrollbars: false,
-                }, this.iframeElement);
-                this.sendStyleOverrides();
-            } })));
+        return (index.h("div", { key: '2de6df80b2da83b29a9adb8b1a94d6326200567b', class: "mt-4 d-flex align-items-center" }, index.h("input", { key: 'ad5bac37f404ed7abf754d7ed87b58a80f04150e', type: "checkbox", checked: this.isChecked, onChange: (event) => this.handleCheckboxChange(event), class: "me-2" }), index.h("label", { key: 'cc860c51e9a9efdb95cdaf974723b2538204d6a0', class: 'checkbox-label' }, "Save new payment method")));
     }
 };
-PaymentMethodForm.style = JustifiPaymentMethodFormStyle0;
 
 exports.justifi_billing_form = BillingForm;
-exports.justifi_payment_method_form = PaymentMethodForm;
+exports.justifi_save_new_payment_method = SaveNewPaymentMethod;