@justifi/webcomponents 0.0.13 → 0.0.14

package/dist/components/payment-method-form.js

@@ -6,12 +6,14 @@ const MessageEventType = {
     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',
   }
 };
 
@@ -25,6 +27,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodStyleOverrides = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -33,6 +36,14 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
+  componentShouldUpdate() {
+    this.sendStyleOverrides();
+  }
+  sendStyleOverrides() {
+    if (this.paymentMethodStyleOverrides) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    }
+  }
   dispatchMessageEvent(messageEvent) {
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
@@ -44,6 +55,12 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.height = messageData.height;
     }
   }
+  postMessage(eventType, payload) {
+    if (this.iframeElement) {
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+    }
+  }
+  ;
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
       const responseListener = (event) => {
@@ -53,7 +70,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         resolve(event.data.data);
       };
       window.addEventListener('message', responseListener);
-      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+      this.postMessage(eventType, payload);
     });
   }
   async tokenize(clientKey, paymentMethodMetadata, account) {
@@ -80,10 +97,14 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   render() {
     return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
   }
+  static get watchers() { return {
+    "paymentMethodStyleOverrides": ["sendStyleOverrides"]
+  }; }
   static get style() { return paymentMethodFormCss; }
 }, [0, "justifi-payment-method-form", {
     "paymentMethodFormType": [1, "payment-method-form-type"],
     "paymentMethodFormValidationStrategy": [1, "payment-method-form-validation-strategy"],
+    "paymentMethodStyleOverrides": [16],
     "height": [32],
     "tokenize": [64],
     "validate": [64]

package/dist/esm/{index-3d88d85c.js → index-c1f569bd.js}

@@ -111,6 +111,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -125,6 +133,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -398,6 +412,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -414,6 +443,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -606,7 +648,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -673,6 +716,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const oldVNode = hostRef.$vnode$ || newVNode(null, null);
@@ -720,6 +775,9 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
                 hostRef.$queuedListeners$ = null;
             }
         }
+        {
+            promise = safeCall(instance, 'componentWillLoad');
+        }
     }
     endSchedule();
     return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
@@ -883,6 +941,11 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
                 }
             }
             if ((flags & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+                if (instance.componentShouldUpdate) {
+                    if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
+                        return;
+                    }
+                }
                 // looks like this value actually changed, so we've got work to do!
                 // but only if we've already rendered, otherwise just chill out
                 // queue that we need to do an update, but don't worry about queuing

package/dist/esm/justifi-bank-account-form_4.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-3d88d85c.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-c1f569bd.js';
 
 const BankAccountForm = class {
   constructor(hostRef) {
@@ -7,6 +7,8 @@ const BankAccountForm = class {
     this.bankAccountFormTokenize = createEvent(this, "bankAccountFormTokenize", 7);
     this.bankAccountFormValidate = createEvent(this, "bankAccountFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -17,6 +19,13 @@ const BankAccountForm = class {
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -34,8 +43,11 @@ const BankAccountForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 };
 
 const CardForm = class {
@@ -45,6 +57,8 @@ const CardForm = class {
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -55,6 +69,13 @@ const CardForm = class {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+    this.internalStyleOverrides = parsedStyleOverrides;
+  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -72,8 +93,11 @@ const CardForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit' }));
+      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
 };
 
 const MessageEventType = {
@@ -82,12 +106,14 @@ const MessageEventType = {
     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',
   }
 };
 
@@ -100,6 +126,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormTokenize = createEvent(this, "paymentMethodFormTokenize", 7);
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
+    this.paymentMethodStyleOverrides = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -108,6 +135,14 @@ const PaymentMethodForm = class {
   disconnectedCallback() {
     window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
   }
+  componentShouldUpdate() {
+    this.sendStyleOverrides();
+  }
+  sendStyleOverrides() {
+    if (this.paymentMethodStyleOverrides) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    }
+  }
   dispatchMessageEvent(messageEvent) {
     const messagePayload = messageEvent.data;
     const messageType = messagePayload.eventType;
@@ -119,6 +154,12 @@ const PaymentMethodForm = class {
       this.height = messageData.height;
     }
   }
+  postMessage(eventType, payload) {
+    if (this.iframeElement) {
+      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+    }
+  }
+  ;
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise((resolve) => {
       const responseListener = (event) => {
@@ -128,7 +169,7 @@ const PaymentMethodForm = class {
         resolve(event.data.data);
       };
       window.addEventListener('message', responseListener);
-      this.iframeElement.contentWindow.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+      this.postMessage(eventType, payload);
     });
   }
   async tokenize(clientKey, paymentMethodMetadata, account) {
@@ -155,6 +196,9 @@ const PaymentMethodForm = class {
   render() {
     return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: (el) => this.iframeElement = el, height: this.height })));
   }
+  static get watchers() { return {
+    "paymentMethodStyleOverrides": ["sendStyleOverrides"]
+  }; }
 };
 PaymentMethodForm.style = paymentMethodFormCss;
 

package/dist/esm/loader.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3d88d85c.js';
-export { s as setNonce } from './index-3d88d85c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c1f569bd.js';
+export { s as setNonce } from './index-c1f569bd.js';
 
 /*
- Stencil Client Patch Esm v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();
@@ -11,7 +11,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["justifi-bank-account-form_4",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-bank-account-form_4",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/esm/webcomponents.js

@@ -1,8 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-3d88d85c.js';
-export { s as setNonce } from './index-3d88d85c.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-c1f569bd.js';
+export { s as setNonce } from './index-c1f569bd.js';
 
 /*
- Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
@@ -14,5 +14,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["justifi-bank-account-form_4",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return bootstrapLazy([["justifi-bank-account-form_4",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}],[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });

package/dist/types/components/bank-account-form/bank-account-form.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Theme } from '../payment-method-form/theme';
 export declare class BankAccountForm {
   validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  styleOverrides?: string;
+  internalStyleOverrides: Theme;
   bankAccountFormReady: EventEmitter;
   bankAccountFormTokenize: EventEmitter<{
     data: any;
@@ -17,6 +20,8 @@ export declare class BankAccountForm {
   validateHandler(event: {
     data: any;
   }): void;
+  componentWillLoad(): void;
+  parseStyleOverrides(): void;
   private childRef?;
   tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<any>;
   validate(): Promise<any>;

package/dist/types/components/card-form/card-form.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Theme } from '../payment-method-form/theme';
 export declare class CardForm {
   validationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  styleOverrides?: string;
+  internalStyleOverrides: Theme;
   cardFormReady: EventEmitter;
   cardFormTokenize: EventEmitter<{
     data: any;
@@ -17,6 +20,8 @@ export declare class CardForm {
   validateHandler(event: {
     data: any;
   }): void;
+  componentWillLoad(): void;
+  parseStyleOverrides(): void;
   private childRef?;
   tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<any>;
   validate(): Promise<any>;

package/dist/types/components/payment-method-form/message-event-types.d.ts

@@ -4,11 +4,13 @@ export declare const MessageEventType: {
     tokenize: string;
     validate: string;
     resize: string;
+    styleOverrides: string;
   };
   bankAccount: {
     ready: string;
     tokenize: string;
     validate: string;
     resize: string;
+    styleOverrides: string;
   };
 };

package/dist/types/components/payment-method-form/payment-method-form.d.ts

@@ -1,7 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Theme } from './theme';
 export declare class PaymentMethodForm {
   paymentMethodFormType: 'card' | 'bankAccount';
   paymentMethodFormValidationStrategy: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+  paymentMethodStyleOverrides: Theme;
   paymentMethodFormReady: EventEmitter;
   paymentMethodFormTokenize: EventEmitter<{
     data: any;
@@ -10,7 +12,10 @@ export declare class PaymentMethodForm {
   iframeElement: HTMLIFrameElement;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentShouldUpdate(): void;
+  sendStyleOverrides(): void;
   private dispatchMessageEvent;
+  private postMessage;
   private postMessageWithResponseListener;
   tokenize(clientKey: string, paymentMethodMetadata: any, account?: string): Promise<any>;
   validate(): Promise<any>;

package/dist/types/components/payment-method-form/theme.d.ts

@@ -0,0 +1,43 @@
+export interface Theme {
+  layout?: {
+    padding?: string;
+    formControlSpacingHorizontal?: string;
+    formControlSpacingVertical?: string;
+  };
+  formLabel?: {
+    fontWeight?: string;
+    fontFamily?: string;
+    margin?: string;
+  };
+  formControl?: {
+    backgroundColor?: string;
+    backgroundColorHover?: string;
+    borderColor?: string;
+    borderColorHover?: string;
+    borderColorFocus?: string;
+    borderColorError?: string;
+    borderWidth?: string;
+    borderBottomWidth?: string;
+    borderLeftWidth?: string;
+    borderRightWidth?: string;
+    borderTopWidth?: string;
+    borderRadius?: string;
+    borderStyle?: string;
+    boxShadow?: string;
+    boxShadowError?: string;
+    boxShadowErrorFocus?: string;
+    boxShadowFocus?: string;
+    color?: string;
+    colorFocus?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    margin?: string;
+    padding?: string;
+  };
+  errorMessage?: {
+    color?: string;
+    margin?: string;
+    fontSize?: string;
+  };
+}

package/dist/types/components.d.ts

@@ -5,13 +5,16 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { Theme } from "./components/payment-method-form/theme";
 export namespace Components {
     interface JustifiBankAccountForm {
+        "styleOverrides"?: string;
         "tokenize": (clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
         "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiCardForm {
+        "styleOverrides"?: string;
         "tokenize": (clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
         "validationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
@@ -19,6 +22,7 @@ export namespace Components {
     interface JustifiPaymentMethodForm {
         "paymentMethodFormType": 'card' | 'bankAccount';
         "paymentMethodFormValidationStrategy": 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "paymentMethodStyleOverrides": Theme;
         "tokenize": (clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>;
         "validate": () => Promise<any>;
     }
@@ -76,12 +80,14 @@ declare namespace LocalJSX {
         "onBankAccountFormReady"?: (event: JustifiBankAccountFormCustomEvent<any>) => void;
         "onBankAccountFormTokenize"?: (event: JustifiBankAccountFormCustomEvent<{ data: any }>) => void;
         "onBankAccountFormValidate"?: (event: JustifiBankAccountFormCustomEvent<{ data: { isValid: boolean } }>) => void;
+        "styleOverrides"?: string;
         "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiCardForm {
         "onCardFormReady"?: (event: JustifiCardFormCustomEvent<any>) => void;
         "onCardFormTokenize"?: (event: JustifiCardFormCustomEvent<{ data: any }>) => void;
         "onCardFormValidate"?: (event: JustifiCardFormCustomEvent<{ data: { isValid: boolean } }>) => void;
+        "styleOverrides"?: string;
         "validationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
     }
     interface JustifiPaymentMethodForm {
@@ -89,6 +95,7 @@ declare namespace LocalJSX {
         "onPaymentMethodFormTokenize"?: (event: JustifiPaymentMethodFormCustomEvent<{ data: any }>) => void;
         "paymentMethodFormType"?: 'card' | 'bankAccount';
         "paymentMethodFormValidationStrategy"?: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';
+        "paymentMethodStyleOverrides"?: Theme;
     }
     interface JustifiPaymentsList {
         "accountId"?: string;

package/dist/types/stencil-public-runtime.d.ts

@@ -485,6 +485,14 @@ export interface FunctionalUtilities {
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -531,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;

package/dist/webcomponents/p-1de39730.js

@@ -0,0 +1,2 @@
+let e,n,t=!1;const l={},o=e=>"object"==(e=typeof e)||"function"===e;function s(e){var n,t,l;return null!==(l=null===(t=null===(n=e.head)||void 0===n?void 0:n.querySelector('meta[name="csp-nonce"]'))||void 0===t?void 0:t.getAttribute("content"))&&void 0!==l?l:void 0}const c=(e,n,...t)=>{let l=null,s=!1,c=!1;const r=[],u=n=>{for(let t=0;t<n.length;t++)l=n[t],Array.isArray(l)?u(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!o(l))&&(l+=""),s&&c?r[r.length-1].t+=l:r.push(s?i(null,l):l),c=s)};if(u(t),n){const e=n.className||n.class;e&&(n.class="object"!=typeof e?e:Object.keys(e).filter((n=>e[n])).join(" "))}const a=i(e,null);return a.l=n,r.length>0&&(a.o=r),a},i=(e,n)=>({i:0,u:e,t:n,h:null,o:null,l:null}),r={},u=(e,n,t)=>{const l=(e=>V(e).m)(e);return{emit:e=>a(l,n,{bubbles:!!(4&t),composed:!!(2&t),cancelable:!!(1&t),detail:e})}},a=(e,n,t)=>{const l=X.ce(n,t);return e.dispatchEvent(l),l},f=new WeakMap,d=e=>"sc-"+e.$,h=(e,n,t,l,s,c)=>{if(t!==l){let i=B(e,n);if(n.toLowerCase(),"class"===n){const n=e.classList,o=y(t),s=y(l);n.remove(...o.filter((e=>e&&!s.includes(e)))),n.add(...s.filter((e=>e&&!o.includes(e))))}else if("ref"===n)l&&l(e);else{const r=o(l);if((i||r&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[n]=l;else{const o=null==l?"":l;"list"===n?i=!1:null!=t&&e[n]==o||(e[n]=o)}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(n)||e.removeAttribute(n):(!i||4&c||s)&&!r&&e.setAttribute(n,l=!0===l?"":l)}}},m=/\s/,y=e=>e?e.split(m):[],$=(e,n,t,o)=>{const s=11===n.h.nodeType&&n.h.host?n.h.host:n.h,c=e&&e.l||l,i=n.l||l;for(o in c)o in i||h(s,o,c[o],void 0,t,n.i);for(o in i)h(s,o,c[o],i[o],t,n.i)},p=(n,t,l)=>{const o=t.o[l];let s,c,i=0;if(null!==o.t)s=o.h=Q.createTextNode(o.t);else if(s=o.h=Q.createElement(o.u),$(null,o,!1),null!=e&&s["s-si"]!==e&&s.classList.add(s["s-si"]=e),o.o)for(i=0;i<o.o.length;++i)c=p(n,o,i),c&&s.appendChild(c);return s},b=(e,t,l,o,s,c)=>{let i,r=e;for(r.shadowRoot&&r.tagName===n&&(r=r.shadowRoot);s<=c;++s)o[s]&&(i=p(null,l,s),i&&(o[s].h=i,r.insertBefore(i,t)))},w=(e,n,t,l,o)=>{for(;n<=t;++n)(l=e[n])&&(o=l.h,g(l),o.remove())},v=(e,n)=>e.u===n.u,S=(e,n)=>{const t=n.h=e.h,l=e.o,o=n.o,s=n.t;null===s?($(e,n,!1),null!==l&&null!==o?((e,n,t,l)=>{let o,s=0,c=0,i=n.length-1,r=n[0],u=n[i],a=l.length-1,f=l[0],d=l[a];for(;s<=i&&c<=a;)null==r?r=n[++s]:null==u?u=n[--i]:null==f?f=l[++c]:null==d?d=l[--a]:v(r,f)?(S(r,f),r=n[++s],f=l[++c]):v(u,d)?(S(u,d),u=n[--i],d=l[--a]):v(r,d)?(S(r,d),e.insertBefore(r.h,u.h.nextSibling),r=n[++s],d=l[--a]):v(u,f)?(S(u,f),e.insertBefore(u.h,r.h),u=n[--i],f=l[++c]):(o=p(n&&n[c],t,c),f=l[++c],o&&r.h.parentNode.insertBefore(o,r.h));s>i?b(e,null==l[a+1]?null:l[a+1].h,t,l,c,a):c>a&&w(n,s,i)})(t,l,n,o):null!==o?(null!==e.t&&(t.textContent=""),b(t,null,n,o,0,o.length-1)):null!==l&&w(l,0,l.length-1)):e.t!==s&&(t.data=s)},g=e=>{e.l&&e.l.ref&&e.l.ref(null),e.o&&e.o.map(g)},j=(e,n)=>{n&&!e.p&&n["s-p"]&&n["s-p"].push(new Promise((n=>e.p=n)))},k=(e,n)=>{if(e.i|=16,!(4&e.i))return j(e,e.v),ce((()=>C(e,n)));e.i|=512},C=(e,n)=>{const t=e.S;let l;return n&&(e.i|=256,e.g&&(e.g.map((([e,n])=>E(t,e,n))),e.g=null),l=E(t,"componentWillLoad")),L(l,(()=>M(e,t,n)))},M=async(e,n,t)=>{const l=e.m,o=l["s-rc"];t&&(e=>{const n=e.j,t=e.m,l=n.i,o=((e,n)=>{var t;let l=d(n);const o=J.get(l);if(e=11===e.nodeType?e:Q,o)if("string"==typeof o){let n,c=f.get(e=e.head||e);if(c||f.set(e,c=new Set),!c.has(l)){{n=Q.createElement("style"),n.innerHTML=o;const l=null!==(t=X.k)&&void 0!==t?t:s(Q);null!=l&&n.setAttribute("nonce",l),e.insertBefore(n,e.querySelector("link"))}c&&c.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(t.shadowRoot?t.shadowRoot:t.getRootNode(),n);10&l&&(t["s-sc"]=o,t.classList.add(o+"-h"))})(e);O(e,n),o&&(o.map((e=>e())),l["s-rc"]=void 0);{const n=l["s-p"],t=()=>P(e);0===n.length?t():(Promise.all(n).then(t),e.i|=4,n.length=0)}},O=(t,l)=>{try{l=l.render(),t.i&=-17,t.i|=2,((t,l)=>{const o=t.m,s=t.C||i(null,null),u=(e=>e&&e.u===r)(l)?l:c(null,null,l);n=o.tagName,u.u=null,u.i|=4,t.C=u,u.h=s.h=o.shadowRoot||o,e=o["s-sc"],S(s,u)})(t,l)}catch(e){D(e,t.m)}return null},P=e=>{const n=e.m,t=e.v;64&e.i||(e.i|=64,N(n),e.M(n),t||x()),e.O(n),e.p&&(e.p(),e.p=void 0),512&e.i&&se((()=>k(e,!1))),e.i&=-517},x=()=>{N(Q.documentElement),se((()=>a(K,"appload",{detail:{namespace:"webcomponents"}})))},E=(e,n,t)=>{if(e&&e[n])try{return e[n](t)}catch(e){D(e)}},L=(e,n)=>e&&e.then?e.then(n):n(),N=e=>e.classList.add("hydrated"),T=(e,n,t)=>{if(n.P){e.watchers&&(n.L=e.watchers);const l=Object.entries(n.P),s=e.prototype;if(l.map((([e,[l]])=>{31&l||2&t&&32&l?Object.defineProperty(s,e,{get(){return((e,n)=>V(this).N.get(n))(0,e)},set(t){((e,n,t,l)=>{const s=V(e),c=s.m,i=s.N.get(n),r=s.i,u=s.S;if(t=((e,n)=>null==e||o(e)?e:1&n?e+"":e)(t,l.P[n][0]),(!(8&r)||void 0===i)&&t!==i&&(!Number.isNaN(i)||!Number.isNaN(t))&&(s.N.set(n,t),u)){if(l.L&&128&r){const e=l.L[n];e&&e.map((e=>{try{u[e](t,i,n)}catch(e){D(e,c)}}))}if(2==(18&r)){if(u.componentShouldUpdate&&!1===u.componentShouldUpdate(t,i,n))return;k(s,!1)}}})(this,e,t,n)},configurable:!0,enumerable:!0}):1&t&&64&l&&Object.defineProperty(s,e,{value(...n){const t=V(this);return t.T.then((()=>t.S[e](...n)))}})})),1&t){const n=new Map;s.attributeChangedCallback=function(e,t,l){X.jmp((()=>{const t=n.get(e);if(this.hasOwnProperty(t))l=this[t],delete this[t];else if(s.hasOwnProperty(t)&&"number"==typeof this[t]&&this[t]==l)return;this[t]=(null!==l||"boolean"!=typeof this[t])&&l}))},e.observedAttributes=l.filter((([e,n])=>15&n[0])).map((([e,t])=>{const l=t[1]||e;return n.set(l,e),l}))}}return e},W=e=>{E(e,"connectedCallback")},A=(e,n={})=>{var t;const l=[],o=n.exclude||[],c=K.customElements,i=Q.head,r=i.querySelector("meta[charset]"),u=Q.createElement("style"),a=[];let f,h=!0;Object.assign(X,n),X.W=new URL(n.resourcesUrl||"./",Q.baseURI).href,e.map((e=>{e[1].map((n=>{const t={i:n[0],$:n[1],P:n[2],A:n[3]};t.P=n[2],t.A=n[3],t.L={};const s=t.$,i=class extends HTMLElement{constructor(e){super(e),z(e=this,t),1&t.i&&e.attachShadow({mode:"open"})}connectedCallback(){f&&(clearTimeout(f),f=null),h?a.push(this):X.jmp((()=>(e=>{if(0==(1&X.i)){const n=V(e),t=n.j,l=()=>{};if(1&n.i)H(e,n,t.A),W(n.S);else{n.i|=1;{let t=e;for(;t=t.parentNode||t.host;)if(t["s-p"]){j(n,n.v=t);break}}t.P&&Object.entries(t.P).map((([n,[t]])=>{if(31&t&&e.hasOwnProperty(n)){const t=e[n];delete e[n],e[n]=t}})),(async(e,n,t,l,o)=>{if(0==(32&n.i)){{if(n.i|=32,(o=I(t)).then){const e=()=>{};o=await o,e()}o.isProxied||(t.L=o.watchers,T(o,t,2),o.isProxied=!0);const e=()=>{};n.i|=8;try{new o(n)}catch(e){D(e)}n.i&=-9,n.i|=128,e(),W(n.S)}if(o.style){let e=o.style;const n=d(t);if(!J.has(n)){const l=()=>{};((e,n,t)=>{let l=J.get(e);Z&&t?(l=l||new CSSStyleSheet,"string"==typeof l?l=n:l.replaceSync(n)):l=n,J.set(e,l)})(n,e,!!(1&t.i)),l()}}}const s=n.v,c=()=>k(n,!0);s&&s["s-rc"]?s["s-rc"].push(c):c()})(0,n,t)}l()}})(this)))}disconnectedCallback(){X.jmp((()=>(()=>{if(0==(1&X.i)){const e=V(this),n=e.S;e.H&&(e.H.map((e=>e())),e.H=void 0),E(n,"disconnectedCallback")}})()))}componentOnReady(){return V(this).R}};t.U=e[0],o.includes(s)||c.get(s)||(l.push(s),c.define(s,T(i,t,1)))}))}));{u.innerHTML=l+"{visibility:hidden}.hydrated{visibility:inherit}",u.setAttribute("data-styles","");const e=null!==(t=X.k)&&void 0!==t?t:s(Q);null!=e&&u.setAttribute("nonce",e),i.insertBefore(u,r?r.nextSibling:i.firstChild)}h=!1,a.length?a.map((e=>e.connectedCallback())):X.jmp((()=>f=setTimeout(x,30)))},H=(e,n,t)=>{t&&t.map((([t,l,o])=>{const s=e,c=R(n,o),i=U(t);X.ael(s,l,c,i),(n.H=n.H||[]).push((()=>X.rel(s,l,c,i)))}))},R=(e,n)=>t=>{try{256&e.i?e.S[n](t):(e.g=e.g||[]).push([n,t])}catch(e){D(e)}},U=e=>0!=(2&e),q=e=>X.k=e,F=new WeakMap,V=e=>F.get(e),_=(e,n)=>F.set(n.S=e,n),z=(e,n)=>{const t={i:0,m:e,j:n,N:new Map};return t.T=new Promise((e=>t.O=e)),t.R=new Promise((e=>t.M=e)),e["s-p"]=[],e["s-rc"]=[],H(e,t,n.A),F.set(e,t)},B=(e,n)=>n in e,D=(e,n)=>(0,console.error)(e,n),G=new Map,I=e=>{const n=e.$.replace(/-/g,"_"),t=e.U,l=G.get(t);return l?l[n]:import(`./${t}.entry.js`).then((e=>(G.set(t,e),e[n])),D)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},J=new Map,K="undefined"!=typeof window?window:{},Q=K.document||{head:{}},X={i:0,W:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,n,t,l)=>e.addEventListener(n,t,l),rel:(e,n,t,l)=>e.removeEventListener(n,t,l),ce:(e,n)=>new CustomEvent(e,n)},Y=e=>Promise.resolve(e),Z=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),ee=[],ne=[],te=(e,n)=>l=>{e.push(l),t||(t=!0,n&&4&X.i?se(oe):X.raf(oe))},le=e=>{for(let n=0;n<e.length;n++)try{e[n](performance.now())}catch(e){D(e)}e.length=0},oe=()=>{le(ee),le(ne),(t=ee.length>0)&&X.raf(oe)},se=e=>Y().then(e),ce=te(ne,!0);export{r as H,A as b,u as c,c as h,Y as p,_ as r,q as s}