@justifi/webcomponents 1.0.0 → 2.0.1

package/dist/collection/components/card-form/card-form.js

@@ -2,10 +2,8 @@ import { h } from '@stencil/core';
 export class CardForm {
   constructor() {
     this.validationMode = undefined;
-    this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -16,15 +14,6 @@ export class CardForm {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -42,7 +31,7 @@ export class CardForm {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
   static get is() { return "justifi-card-form"; }
   static get properties() {
@@ -64,23 +53,6 @@ export class CardForm {
         "attribute": "validation-mode",
         "reflect": false
       },
-      "styleOverrides": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "style-overrides",
-        "reflect": false
-      },
       "iframeOrigin": {
         "type": "string",
         "mutable": true,
@@ -117,11 +89,6 @@ export class CardForm {
       }
     };
   }
-  static get states() {
-    return {
-      "internalStyleOverrides": {}
-    };
-  }
   static get events() {
     return [{
         "method": "cardFormReady",
@@ -215,12 +182,6 @@ export class CardForm {
       }
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "styleOverrides",
-        "methodName": "parseStyleOverrides"
-      }];
-  }
   static get listeners() {
     return [{
         "name": "paymentMethodFormReady",

package/dist/collection/components/card-form/card-form.stories.js

@@ -16,12 +16,6 @@ export default {
         category: 'Props'
       }
     },
-    styleOverrides: {
-      control: 'object',
-      table: {
-        category: 'Props'
-      }
-    },
     validationMode: {
       control: { type: 'select' },
       options: ['onSubmit', 'onBlur', 'onChange', 'onTouched', 'all'],
@@ -81,53 +75,19 @@ const FormButtons = `
     <button id="tokenize-btn">Tokenize</button>
   </div>
 `;
-const storyStyleOverrides = {
-  "layout": {
-    "padding": "100px",
-    "formControlSpacingHorizontal": ".5rem",
-    "formControlSpacingVertical": "1rem"
-  },
-  "formLabel": {
-    "fontWeight": "700",
-    "fontFamily": "sans-serif",
-    "margin": "0 0 .5rem 0"
-  },
-  "formControl": {
-    "backgroundColor": "#00F4F6",
-    "backgroundColorHover": "#EEEEF5",
-    "borderColor": "rgba(0, 0, 0, 0.42)",
-    "borderColorHover": "rgba(0, 0, 0, 0.62)",
-    "borderColorFocus": "#fccc32",
-    "borderColorError": "#C12727",
-    "borderWidth": "0px",
-    "borderBottomWidth": "1px",
-    "borderRadius": "40px 4px 0 0",
-    "borderStyle": "solid",
-    "boxShadowErrorFocus": "none",
-    "boxShadowFocus": "none",
-    "color": "#212529",
-    "fontSize": "1rem",
-    "fontWeight": "400",
-    "lineHeight": "2",
-    "margin": "0",
-    "padding": ".5rem .875rem"
-  },
-  "errorMessage": {
-    "color": "#C12727",
-    "margin": ".25rem 0 0 0",
-    "fontSize": ".875rem"
-  }
-};
 const Template = (args) => {
-  const parsedStyleOverrides = args.styleOverrides ? JSON.stringify(args.styleOverrides) : null;
   const includeButtons = true;
   return (`
     <div>
+      <style>
+      :root {
+        ${args.cssVariables}
+      }
+      </style>
       <justifi-card-form 
         data-testid="card-form-iframe" 
         validation-mode='${args.validationMode || 'onSubmit'}'
-        style-overrides='${parsedStyleOverrides || ''}' 
-        iframe-origin='${args.iframeOrigin}'
+        iframe-origin='${args.iframeOrigin || ''}'
         single-line='${args.singleLine}'
       />
     </div>
@@ -155,7 +115,38 @@ Embedded.decorators = [
 ];
 export const Styled = Template.bind({});
 Styled.args = {
-  styleOverrides: storyStyleOverrides,
+  cssVariables: (`
+  --jfi-layout-padding: 0;
+  --jfi-layout-form-control-spacing-x: .5rem;
+  --jfi-layout-form-control-spacing-y: 1rem;
+  --jfi-form-label-font-weight: 700;
+  --jfi-form-label-font-family: sans-serif;
+  --jfi-form-label-margin: 0 0 .5rem 0;
+  --jfi-form-control-background-color: #F4F4F6;
+  --jfi-form-control-background-color-hover: #EEEEF5;
+  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+  --jfi-form-control-border-color-focus: #fccc32;
+  --jfi-form-control-border-color-error: #C12727;
+  --jfi-form-control-border-top-width: 0;
+  --jfi-form-control-border-left-width: 0;
+  --jfi-form-control-border-bottom-width: 1px;
+  --jfi-form-control-border-right-width: 0;
+  --jfi-form-control-border-radius: 4px 4px 0 0;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow-focus: none;
+  --jfi-form-control-box-shadow-error-focus: none;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-color: #212529;
+  --jfi-form-control-font-size: 1rem;
+  --jfi-form-control-font-weight: 400;
+  --jfi-form-control-line-height: 2;
+  --jfi-form-control-margin: 0;
+  --jfi-form-control-padding: .5rem .875rem;
+  --jfi-error-message-color: #C12727;
+  --jfi-error-message-margin: .25rem 0 0 0;
+  --jfi-error-message-font-size: .875rem;
+  `)
 };
 export const Completed = Template.bind({});
 Completed.play = async ({ canvasElement, step }) => {

package/dist/collection/components/payment-form/payment-form.css

@@ -1550,4 +1550,51 @@ progress {
   line-height: 1.5;
   color: #212529;
   display: block;
+}
+
+justifi-payment-method-form {
+  display: block;
+  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);
 }

package/dist/collection/components/payment-form/payment-form.stories.js

@@ -1,30 +1,3 @@
-const Template = (args) => {
-  // The <div> here should be replaced by a `display` property in the cardForm potentially
-  return (`
-    <div>
-      <justifi-payment-form card=${args.card} bank-account=${args['bank-account']} />
-    </div>
-    <div>
-      <button id="submit-button">Submit</button>
-    </div>
-    <script>
-    (async () => {
-      await customElements.whenDefined('justifi-payment-form');
-      const paymentForm = document.querySelector('justifi-payment-form');
-      const submitButton = document.querySelector('#submit-button');
-
-      submitButton?.addEventListener('click', async () => {
-        const tokenizeResponse = await paymentForm.submit({
-          clientId: '${args.clientId}',
-          paymentMethodData: ${JSON.stringify(args.paymentMethodData)},
-          accountId: '${args.accountId}'
-        });
-        console.log('tokenizeResponse:', tokenizeResponse);
-      });
-    })()
-    </script>
-  `);
-};
 export default {
   title: 'Components/PaymentForm',
   component: 'justifi-payment-form',
@@ -69,6 +42,38 @@ export default {
     (story) => story(),
   ],
 };
+const Template = (args) => {
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return (`
+    <div>
+      <justifi-payment-form card=${args.card} bank-account=${args['bank-account']} />
+    </div>
+    <div>
+      <button id="submit-button">Submit</button>
+    </div>
+    <style>
+      :root {
+        ${args.cssVariables}
+      }
+    </style>
+    <script>
+    (async () => {
+      await customElements.whenDefined('justifi-payment-form');
+      const paymentForm = document.querySelector('justifi-payment-form');
+      const submitButton = document.querySelector('#submit-button');
+
+      submitButton?.addEventListener('click', async () => {
+        const tokenizeResponse = await paymentForm.submit({
+          clientId: '${args.clientId}',
+          paymentMethodData: ${JSON.stringify(args.paymentMethodData)},
+          accountId: '${args.accountId}'
+        });
+        console.log('tokenizeResponse:', tokenizeResponse);
+      });
+    })()
+    </script>
+  `);
+};
 export const Basic = Template.bind({});
 Basic.args = {
   'bank-account': true,
@@ -78,3 +83,38 @@ Basic.args = {
   accountId: '',
   iframeOrigin: ''
 };
+export const Styled = Template.bind({});
+Styled.args = {
+  cssVariables: (`
+  --jfi-layout-padding: 0;
+  --jfi-layout-form-control-spacing-x: .5rem;
+  --jfi-layout-form-control-spacing-y: 1rem;
+  --jfi-form-label-font-weight: 700;
+  --jfi-form-label-font-family: sans-serif;
+  --jfi-form-label-margin: 0 0 .5rem 0;
+  --jfi-form-control-background-color: #F4F4F6;
+  --jfi-form-control-background-color-hover: #EEEEF5;
+  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+  --jfi-form-control-border-color-focus: #fccc32;
+  --jfi-form-control-border-color-error: #C12727;
+  --jfi-form-control-border-top-width: 0;
+  --jfi-form-control-border-left-width: 0;
+  --jfi-form-control-border-bottom-width: 1px;
+  --jfi-form-control-border-right-width: 0;
+  --jfi-form-control-border-radius: 4px 4px 0 0;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow-focus: none;
+  --jfi-form-control-box-shadow-error-focus: none;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-color: #212529;
+  --jfi-form-control-font-size: 1rem;
+  --jfi-form-control-font-weight: 400;
+  --jfi-form-control-line-height: 2;
+  --jfi-form-control-margin: 0;
+  --jfi-form-control-padding: .5rem .875rem;
+  --jfi-error-message-color: #C12727;
+  --jfi-error-message-margin: .25rem 0 0 0;
+  --jfi-error-message-font-size: .875rem;
+  `)
+};

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

@@ -13,7 +13,7 @@ export class PaymentMethodSelector {
   }
   render() {
     return (h("div", { class: "form-check" }, this.paymentMethodTypes.map((paymentMethodType) => {
-      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "form-check-input" }), h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
+      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "form-check-input" }), h("label", { htmlFor: paymentMethodType, class: "form-check-label" }, PaymentMethodLabels[paymentMethodType])));
     })));
   }
   ;

package/dist/collection/components/payment-method-form/get-computed-theme.js

@@ -0,0 +1,48 @@
+const getComputedTheme = () => {
+  const computedStyles = getComputedStyle(document.body);
+  const computedTheme = {
+    layout: {
+      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;
+};
+export default getComputedTheme;

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

@@ -1,11 +1,12 @@
 import { Host, h } from '@stencil/core';
 import { MessageEventType } from './message-event-types';
 import packageJson from '../../../package.json';
+import getComputedTheme from './get-computed-theme';
 export class PaymentMethodForm {
   constructor() {
+    this.computedTheme = getComputedTheme();
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationMode = undefined;
-    this.paymentMethodStyleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
     this.height = 55;
@@ -20,8 +21,8 @@ export class PaymentMethodForm {
     this.sendStyleOverrides();
   }
   sendStyleOverrides() {
-    if (this.paymentMethodStyleOverrides) {
-      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.paymentMethodStyleOverrides });
+    if (this.computedTheme) {
+      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });
     }
   }
   dispatchMessageEvent(messageEvent) {
@@ -142,26 +143,6 @@ export class PaymentMethodForm {
         "attribute": "payment-method-form-validation-mode",
         "reflect": false
       },
-      "paymentMethodStyleOverrides": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Theme | undefined",
-          "resolved": "Theme",
-          "references": {
-            "Theme": {
-              "location": "import",
-              "path": "./theme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
       "iframeOrigin": {
         "type": "string",
         "mutable": false,
@@ -281,10 +262,4 @@ export class PaymentMethodForm {
       }
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "paymentMethodStyleOverrides",
-        "methodName": "sendStyleOverrides"
-      }];
-  }
 }

package/dist/collection/components/select-input/select-input.js

@@ -15,7 +15,7 @@ export class SelectInput {
   }
   ;
   render() {
-    return (h(Host, null, h("label", { class: "form-label" }, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event), class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event), part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-select is-invalid' : 'form-select' }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "select-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-input/text-input.js

@@ -14,7 +14,7 @@ export class TextInput {
   }
   ;
   render() {
-    return (h(Host, null, h("label", { class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("label", { part: "label", class: "form-label" }, this.label), h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue, part: `input ${this.error && 'input-invalid'}`, class: this.error ? 'form-control is-invalid' : 'form-control' }), this.error && h("div", { class: "invalid-feedback" }, this.error)));
   }
   static get is() { return "text-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/billing-form.js

@@ -2150,7 +2150,7 @@ const BillingForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return this.billingFields;
   }
   render() {
-    return (h(Host, null, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, this.legend && this.legendBlock, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 })), h("div", { class: "col-12" }, h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 })), h("div", { class: "col-12" }, h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city })), h("div", { class: "col-12" }, h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state })), h("div", { class: "col-12" }, h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))))));
   }
   static get style() { return billingFormCss; }
 }, [1, "justifi-billing-form", {

package/dist/components/justifi-bank-account-form.js

@@ -11,7 +11,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.validationMode = undefined;
     this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.bankAccountFormReady.emit(event);
@@ -22,15 +21,6 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   validateHandler(event) {
     this.bankAccountFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -48,16 +38,12 @@ const BankAccountForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
 }, [0, "justifi-bank-account-form", {
     "validationMode": [1025, "validation-mode"],
     "styleOverrides": [1025, "style-overrides"],
     "iframeOrigin": [1025, "iframe-origin"],
-    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);

package/dist/components/justifi-card-form.js

@@ -9,10 +9,8 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationMode = undefined;
-    this.styleOverrides = undefined;
     this.iframeOrigin = undefined;
     this.singleLine = undefined;
-    this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
     this.cardFormReady.emit(event);
@@ -23,15 +21,6 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   validateHandler(event) {
     this.cardFormValidate.emit(event);
   }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -49,17 +38,12 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (el) {
           this.childRef = el;
         }
-      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "single-line": this.singleLine, "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-mode": this.validationMode || 'onSubmit' }));
   }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
 }, [0, "justifi-card-form", {
     "validationMode": [1025, "validation-mode"],
-    "styleOverrides": [1025, "style-overrides"],
     "iframeOrigin": [1025, "iframe-origin"],
     "singleLine": [4, "single-line"],
-    "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]
   }, [[0, "paymentMethodFormReady", "readyHandler"], [0, "paymentMethodFormTokenize", "tokenizeHandler"], [0, "paymentMethodFormValidate", "validateHandler"]]]);