@justifi/webcomponents 4.13.0 → 4.15.0

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

@@ -0,0 +1,1791 @@
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-83dcf934.js';
+import { c as create$3, F as FormController } from './index.esm-d98bc080.js';
+import { i as identityNameValidation, l as lineOneValidation, a as lineTwoValidation, c as cityValidation, s as stateValidation, p as postalValidation } from './schema-validations-31feaa53.js';
+import { S as StateOptions } from './state-options-a356fb11.js';
+import { f as filterPostalInput } from './utils-6f05d9d7.js';
+import { n as composeQueryParams } from './utils-37533368.js';
+import './business-form-options-de11bc46.js';
+import './Business-d83fbdb4.js';
+
+const BillingFormSchema = create$3({
+    name: identityNameValidation.required('Enter full name'),
+    address_line1: lineOneValidation.required('Enter street address'),
+    address_line2: lineTwoValidation.nullable(),
+    address_city: cityValidation.required('Enter city'),
+    address_state: stateValidation.required('Select state'),
+    address_postal_code: postalValidation.required('Enter postal code'),
+});
+
+const billingFormCss = ":root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13, 110, 253;--bs-secondary-rgb:108, 117, 125;--bs-success-rgb:25, 135, 84;--bs-info-rgb:13, 202, 240;--bs-warning-rgb:255, 193, 7;--bs-danger-rgb:220, 53, 69;--bs-light-rgb:248, 249, 250;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13, 110, 253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10, 88, 202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222, 226, 230;--bs-body-bg:#212529;--bs-body-bg-rgb:33, 37, 41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255, 255, 255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222, 226, 230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52, 58, 64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222, 226, 230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43, 48, 53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110, 168, 254;--bs-link-hover-color-rgb:139, 185, 254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}.spinner-grow,.spinner-border{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}@keyframes spinner-border{to{transform:rotate(360deg) }}.spinner-border{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-border-width:0.25em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-border;border:var(--bs-spinner-border-width) solid currentcolor;border-right-color:transparent}.spinner-border-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem;--bs-spinner-border-width:0.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-0.125em;--bs-spinner-animation-speed:0.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion: reduce){.spinner-border,.spinner-grow{--bs-spinner-animation-speed:1.5s}}.clearfix::after{display:block;clear:both;content:\"\"}.text-bg-primary{color:#fff !important;background-color:RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-secondary{color:#fff !important;background-color:RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-success{color:#fff !important;background-color:RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-info{color:#000 !important;background-color:RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-warning{color:#000 !important;background-color:RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-danger{color:#fff !important;background-color:RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-light{color:#000 !important;background-color:RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important}.text-bg-dark{color:#fff !important;background-color:RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important}.link-primary{color:RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-primary:hover,.link-primary:focus{color:RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important}.link-secondary{color:RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-secondary:hover,.link-secondary:focus{color:RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important}.link-success{color:RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-success:hover,.link-success:focus{color:RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important}.link-info{color:RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-info:hover,.link-info:focus{color:RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important}.link-warning{color:RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-warning:hover,.link-warning:focus{color:RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important}.link-danger{color:RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-danger:hover,.link-danger:focus{color:RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important}.link-light{color:RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-light:hover,.link-light:focus{color:RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important}.link-dark{color:RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-dark:hover,.link-dark:focus{color:RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important}.link-body-emphasis:hover,.link-body-emphasis:focus{color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;text-decoration-color:RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important}.focus-ring:focus{outline:0;box-shadow:var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color)}.icon-link{display:inline-flex;gap:0.375rem;align-items:center;text-decoration-color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));text-underline-offset:0.25em;backface-visibility:hidden}.icon-link>.bi{flex-shrink:0;width:1em;height:1em;fill:currentcolor;transition:0.2s ease-in-out transform}@media (prefers-reduced-motion: reduce){.icon-link>.bi{transition:none}}.icon-link-hover:hover>.bi,.icon-link-hover:focus-visible>.bi{transform:var(--bs-icon-link-transform, translate3d(0.25em, 0, 0))}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:\"\"}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio:100%}.ratio-4x3{--bs-aspect-ratio:75%}.ratio-16x9{--bs-aspect-ratio:56.25%}.ratio-21x9{--bs-aspect-ratio:42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:sticky;top:0;z-index:1020}.sticky-bottom{position:sticky;bottom:0;z-index:1020}@media (min-width: 576px){.sticky-sm-top{position:sticky;top:0;z-index:1020}.sticky-sm-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 768px){.sticky-md-top{position:sticky;top:0;z-index:1020}.sticky-md-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 992px){.sticky-lg-top{position:sticky;top:0;z-index:1020}.sticky-lg-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1200px){.sticky-xl-top{position:sticky;top:0;z-index:1020}.sticky-xl-bottom{position:sticky;bottom:0;z-index:1020}}@media (min-width: 1400px){.sticky-xxl-top{position:sticky;top:0;z-index:1020}.sticky-xxl-bottom{position:sticky;bottom:0;z-index:1020}}.hstack{display:flex;flex-direction:row;align-items:center;align-self:stretch}.vstack{display:flex;flex:1 1 auto;flex-direction:column;align-self:stretch}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.visually-hidden:not(caption),.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption){position:absolute !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:\"\"}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:0.25}*,*::before,*::after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:0.25}h6,h5,h4,h3,h2,h1{margin-top:0;margin-bottom:0.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width: 1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + 0.9vw)}@media (min-width: 1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + 0.6vw)}@media (min-width: 1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + 0.3vw)}@media (min-width: 1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{text-decoration:underline dotted;cursor:help;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:0.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:0.875em}mark{padding:0.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:0.75em;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}a{color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:0.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:0.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:0.1875rem 0.375rem;font-size:0.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:0.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:0.5rem;padding-bottom:0.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}thead,tbody,tfoot,tr,td,th{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none !important}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:0.5rem;font-size:calc(1.275rem + 0.3vw);line-height:inherit}@media (min-width: 1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none !important}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-0.5 * var(--bs-gutter-x));margin-left:calc(-0.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * 0.5);padding-left:calc(var(--bs-gutter-x) * 0.5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.66666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.33333333%}.col-2{flex:0 0 auto;width:16.66666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.33333333%}.col-5{flex:0 0 auto;width:41.66666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.33333333%}.col-8{flex:0 0 auto;width:66.66666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.33333333%}.col-11{flex:0 0 auto;width:91.66666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.33333333%}.offset-2{margin-left:16.66666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.33333333%}.offset-5{margin-left:41.66666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.33333333%}.offset-8{margin-left:66.66666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.33333333%}.offset-11{margin-left:91.66666667%}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:0.25rem}.g-1,.gy-1{--bs-gutter-y:0.25rem}.g-2,.gx-2{--bs-gutter-x:0.5rem}.g-2,.gy-2{--bs-gutter-y:0.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}@media (min-width: 576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.66666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333333%}.col-sm-2{flex:0 0 auto;width:16.66666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-5{flex:0 0 auto;width:41.66666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.33333333%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.33333333%}.col-sm-11{flex:0 0 auto;width:91.66666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.33333333%}.offset-sm-2{margin-left:16.66666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.33333333%}.offset-sm-5{margin-left:41.66666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.33333333%}.offset-sm-8{margin-left:66.66666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.33333333%}.offset-sm-11{margin-left:91.66666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x:0}.g-sm-0,.gy-sm-0{--bs-gutter-y:0}.g-sm-1,.gx-sm-1{--bs-gutter-x:0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y:0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x:0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y:0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x:1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y:1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x:1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y:1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x:3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y:3rem}}@media (min-width: 768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.66666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333333%}.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-5{flex:0 0 auto;width:41.66666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.33333333%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-11{flex:0 0 auto;width:91.66666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.33333333%}.offset-md-2{margin-left:16.66666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.33333333%}.offset-md-5{margin-left:41.66666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.33333333%}.offset-md-8{margin-left:66.66666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.33333333%}.offset-md-11{margin-left:91.66666667%}.g-md-0,.gx-md-0{--bs-gutter-x:0}.g-md-0,.gy-md-0{--bs-gutter-y:0}.g-md-1,.gx-md-1{--bs-gutter-x:0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y:0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x:0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y:0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x:1rem}.g-md-3,.gy-md-3{--bs-gutter-y:1rem}.g-md-4,.gx-md-4{--bs-gutter-x:1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y:1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x:3rem}.g-md-5,.gy-md-5{--bs-gutter-y:3rem}}@media (min-width: 992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.66666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333333%}.col-lg-2{flex:0 0 auto;width:16.66666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.33333333%}.col-lg-11{flex:0 0 auto;width:91.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.33333333%}.offset-lg-2{margin-left:16.66666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.33333333%}.offset-lg-5{margin-left:41.66666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.33333333%}.offset-lg-8{margin-left:66.66666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.33333333%}.offset-lg-11{margin-left:91.66666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x:0}.g-lg-0,.gy-lg-0{--bs-gutter-y:0}.g-lg-1,.gx-lg-1{--bs-gutter-x:0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y:0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x:0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y:0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x:1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y:1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x:1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y:1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x:3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y:3rem}}@media (min-width: 1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.66666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333333%}.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.33333333%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-11{flex:0 0 auto;width:91.66666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.33333333%}.offset-xl-2{margin-left:16.66666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.33333333%}.offset-xl-5{margin-left:41.66666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.33333333%}.offset-xl-8{margin-left:66.66666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.33333333%}.offset-xl-11{margin-left:91.66666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x:0}.g-xl-0,.gy-xl-0{--bs-gutter-y:0}.g-xl-1,.gx-xl-1{--bs-gutter-x:0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y:0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x:0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y:0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x:1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y:1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x:1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y:1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x:3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y:3rem}}@media (min-width: 1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.33333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.66666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333333%}.col-xxl-2{flex:0 0 auto;width:16.66666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.33333333%}.col-xxl-5{flex:0 0 auto;width:41.66666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.33333333%}.col-xxl-8{flex:0 0 auto;width:66.66666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.33333333%}.col-xxl-11{flex:0 0 auto;width:91.66666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.33333333%}.offset-xxl-2{margin-left:16.66666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.33333333%}.offset-xxl-5{margin-left:41.66666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.33333333%}.offset-xxl-8{margin-left:66.66666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.33333333%}.offset-xxl-11{margin-left:91.66666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x:0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y:0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x:0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y:0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x:0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y:0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x:1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y:1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x:1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y:1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x:3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y:3rem}}:host{font-family:system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;display:block}justifi-billing-form{margin-left:calc(var(--jfi-layout-padding) * -1);margin-right:calc(var(--jfi-layout-padding) * -1)}*::part(label){color:var(--jfi-form-label-color);font-family:var(--jfi-form-label-font-family);font-weight:var(--jfi-form-label-font-weight);font-size:var(--jfi-form-label-font-size);margin:var(--jfi-form-label-margin)}*::part(input){background-color:var(--jfi-form-control-background-color);border-color:var(--jfi-form-control-border-color);border-width:var(--jfi-form-control-border-width);border-bottom-width:var(--jfi-form-control-border-bottom-width);border-left-width:var(--jfi-form-control-border-left-width);border-right-width:var(--jfi-form-control-border-right-width);border-top-width:var(--jfi-form-control-border-top-width);border-radius:var(--jfi-form-control-border-radius);border-style:var(--jfi-form-control-border-style);box-shadow:var(--jfi-form-control-box-shadow);color:var(--jfi-form-control-color);font-size:var(--jfi-form-control-font-size);font-weight:var(--jfi-form-control-font-weight);line-height:var(--jfi-form-control-line-height);margin:var(--jfi-form-control-margin);padding:var(--jfi-form-control-padding)}*::part(input):focus{color:var(--jfi-form-control-color-focus);border-color:var(--jfi-form-control-border-color-focus);box-shadow:var(--jfi-form-control-box-shadow-focus)}*::part(input-invalid){border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error)}*::part(input-invalid):focus{border-color:var(--jfi-form-control-border-color-error);box-shadow:var(--jfi-form-control-box-shadow-error-focus)}";
+
+const BillingForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+        this.legend = undefined;
+        this.formController = undefined;
+        this.billingInfo = undefined;
+        this.errors = {};
+    }
+    componentWillLoad() {
+        this.formController = new FormController(BillingFormSchema);
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async fill(fields) {
+        this.formController.setValues(fields);
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", null, h("fieldset", null, this.legend && h("legend", null, this.legend), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, error: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, error: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, error: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, error: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, error: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, error: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: filterPostalInput })))))));
+    }
+};
+BillingForm.style = billingFormCss;
+
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire();
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+var iframeResizer = createCommonjsModule(function (module) {
+(function (undefined$1) {
+  if (typeof window === 'undefined') return // don't run for server side render
+
+  var count = 0,
+    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,
+      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);
+  }
+
+  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
+        }
+
+        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
+        });
+      }
+
+      var MutationObserver = getMutationObserver();
+      if (MutationObserver) {
+        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();
+})();
+});
+
+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 name = "@justifi/webcomponents";
+const version = "4.15.0";
+const description = "JustiFi Web Components";
+const main = "dist/module/index.js";
+const module = "dist/module/index.js";
+const types = "./dist/types/index.d.ts";
+const repository = {
+	type: "git",
+	url: "git+https://github.com/justifi-tech/web-component-library.git"
+};
+const homepage = "https://storybook.justifi.ai/?path=/docs/introduction--docs";
+const publishConfig = {
+	registry: "https://registry.npmjs.org"
+};
+const files = [
+	"dist/"
+];
+const scripts = {
+	build: "stencil build --docs",
+	dev: "stencil build --watch",
+	lint: "eslint . --max-warnings 0",
+	clean: "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+	generate: "stencil generate",
+	test: "TZ=utc stencil test --spec",
+	"test:watch": "TZ=utc stencil test --spec --watchAll",
+	"test:e2e": "stencil test --e2e",
+	"test:file": "stencil test --spec --watch --"
+};
+const dependencies = {
+	"@stencil/core": "^4.0.5",
+	bootstrap: "^5.2.3",
+	"chart.js": "^4.4.1",
+	"date-fns": "^2.29.3",
+	"dinero.js": "^1.9.1",
+	"iframe-resizer": "^4.3.7",
+	imask: "^7.6.0",
+	rxjs: "^7.8.1",
+	"ts-dedent": "^2.2.0",
+	uuid: "^9.0.0",
+	yup: "^1.0.0"
+};
+const devDependencies = {
+	"@babel/preset-env": "^7.21.5",
+	"@babel/preset-react": "^7.18.6",
+	"@babel/preset-typescript": "^7.21.5",
+	"@stencil/sass": "^3.0.1",
+	"@stencil/store": "^2.0.8",
+	"@types/jest": "27.0.3",
+	"@types/node": "^20.1.4",
+	"@types/react": "^18.0.37",
+	"@types/react-dom": "^18.0.11",
+	dotenv: "^16.3.1",
+	jest: "^29.7.0",
+	"jest-cli": "^29.7.0",
+	"jest-environment-node": "^29.7.0",
+	puppeteer: "^21.0.0",
+	"ts-jest": "^29.1.2"
+};
+const license = "MIT";
+const gitHead = "507bac1d941eae6e1f56e185ecd9bc9d22637783";
+const packageJson = {
+	name: name,
+	version: version,
+	description: description,
+	main: main,
+	module: module,
+	types: types,
+	repository: repository,
+	homepage: homepage,
+	publishConfig: publishConfig,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies,
+	license: license,
+	gitHead: gitHead
+};
+
+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 PaymentMethodForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paymentMethodFormReady = createEvent(this, "paymentMethodFormReady", 7);
+        this.paymentMethodFormValidated = createEvent(this, "paymentMethodFormValidated", 7);
+        this.paymentMethodFormTokenized = 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: 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}${composeQueryParams(paramsList)}`;
+        return iframeSrc;
+    }
+    initializeFrameCommunicationService() {
+        var _a;
+        this.frameService = new FrameCommunicationService(this.iframeElement, this.iframeOrigin);
+        (_a = this.frameService) === null || _a === void 0 ? void 0 : _a.addMessageListener(this.dispatchMessageEvent);
+    }
+    render() {
+        return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => {
+                this.iframeElement = el;
+                this.initializeFrameCommunicationService();
+            }, onLoad: () => {
+                iframeResizer({
+                    scrollbars: false,
+                }, this.iframeElement);
+                this.sendStyleOverrides();
+            } })));
+    }
+};
+PaymentMethodForm.style = paymentMethodFormCss;
+
+export { BillingForm as justifi_billing_form, PaymentMethodForm as justifi_payment_method_form };