@justifi/webcomponents 5.7.6-rc-04 → 5.7.6-rc-05

package/dist/collection/ui-components/apple-pay-button.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+import { ApplePayButtonType, ApplePayButtonStyle } from "../api/ApplePay";
+const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
+export const ApplePayButton = (props) => {
+    const getApplePayButtonClass = () => {
+        let classes = "apple-pay-button";
+        switch (props.buttonStyle) {
+            case ApplePayButtonStyle.WHITE:
+                classes += " apple-pay-button-white";
+                break;
+            case ApplePayButtonStyle.WHITE_OUTLINE:
+                classes += " apple-pay-button-white-outline";
+                break;
+            case ApplePayButtonStyle.BLACK:
+            default:
+                classes += " apple-pay-button-black";
+                break;
+        }
+        switch (props.buttonType) {
+            case ApplePayButtonType.BUY:
+                classes += " apple-pay-button-type-buy";
+                break;
+            case ApplePayButtonType.DONATE:
+                classes += " apple-pay-button-type-donate";
+                break;
+            case ApplePayButtonType.PLAIN:
+            default:
+                classes += " apple-pay-button-type-plain";
+                break;
+        }
+        if (props.disabled || props.isProcessing || !props.isAvailable) {
+            classes += " disabled";
+        }
+        return classes;
+    };
+    const getButtonStyles = () => {
+        return {
+            width: props.width || "200px",
+            height: props.height || "48px",
+        };
+    };
+    const handleClick = () => {
+        if (!props.disabled &&
+            !props.isProcessing &&
+            props.isAvailable &&
+            props.clickHandler) {
+            props.clickHandler();
+        }
+    };
+    return (h("div", { class: 'apple-pay-button-container' }, h("button", Object.assign({ class: getApplePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Apple Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner()), h("style", null, `
+          .apple-pay-button-container {
+            display: inline-block;
+            position: relative;
+          }
+
+          /* Apple Pay CSS classes - these are the official Apple Pay button styles */
+          .apple-pay-button {
+            display: inline-block;
+            -webkit-appearance: -apple-pay-button;
+            -apple-pay-button-type: plain; /* default */
+            -apple-pay-button-style: black; /* default */
+            border-radius: 8px;
+            cursor: pointer;
+            border: none;
+            outline: none;
+            transition: opacity 0.2s ease;
+            position: relative;
+          }
+
+          /* Button styles */
+          .apple-pay-button.apple-pay-button-black {
+            -apple-pay-button-style: black;
+          }
+
+          .apple-pay-button.apple-pay-button-white {
+            -apple-pay-button-style: white;
+          }
+
+          .apple-pay-button.apple-pay-button-white-outline {
+            -apple-pay-button-style: white-outline;
+          }
+
+          /* Button types */
+          .apple-pay-button.apple-pay-button-type-plain {
+            -apple-pay-button-type: plain;
+          }
+
+          .apple-pay-button.apple-pay-button-type-buy {
+            -apple-pay-button-type: buy;
+          }
+
+          .apple-pay-button.apple-pay-button-type-donate {
+            -apple-pay-button-type: donate;
+          }
+
+          /* Hover and disabled states */
+          .apple-pay-button:hover:not(.disabled) {
+            opacity: 0.9;
+          }
+
+          .apple-pay-button.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+          }
+
+          /* Processing overlay */
+          .processing-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          .spinner {
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top: 2px solid #fff;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+          }
+
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+
+          /* Responsive design */
+          @media (max-width: 480px) {
+            .apple-pay-button {
+              width: 100% !important;
+              min-width: 200px;
+            }
+          }
+        `)));
+};

package/dist/collection/ui-components/custom-popper/custom-popper.js

@@ -80,7 +80,7 @@ export class CustomPopper {
         this.hideEvent.emit();
     }
     render() {
-        return (h("div", { key: '609efa147a53d357ac11d1d97a2277a518c6ba53' }, h("style", { key: 'ae6f607f454e1038518bd6438b50704fbb5096ce' }, `
+        return (h("div", { key: '06e75da41aa1f7ec57177f48046e62e44029f510' }, h("style", { key: 'c10a70d9b56f0eed808b9848a176067300897494' }, `
           .popper-content {
             display: none;
           }
@@ -88,7 +88,7 @@ export class CustomPopper {
             display: block;
             z-index: 1030;
           }
-          `), h("div", { key: '4d6fc7f6990bd1f271402146c38d0dd175fad94b', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '509c63e0288098dca22d2d4830ce790271cde6eb' }))));
+          `), h("div", { key: '1b88ade0037feae8b74ecd82941564cee6db3977', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '76e5d2a38d61112cdaa567ce64b7c9c971dbf925' }))));
     }
     static get is() { return "custom-popper"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-checkbox.js

@@ -31,10 +31,10 @@ export class CheckboxInput {
         return inputCheckbox;
     }
     render() {
-        return (h(Host, { key: '54f78efeb7d16825cfc08e98dcd37bad7b61f81b' }, h("div", { key: '83fef493e58c3a063cbbfe09700ba786b6242c4f', class: 'form-group d-flex flex-column' }, h("div", { key: '3c0ce3b7eb238a2ed5311f284b7f7422117e77bb', class: "form-check" }, h("input", { key: 'e071a738ff24cfec86f8f8c33c3cbae7261015ac', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '105ee6e8933e143e3c369ab143f3d65c4a837543' }, h("div", { key: '41a69cef645007940b718ee6dc4cc001479210a3', class: 'form-group d-flex flex-column' }, h("div", { key: 'e530e8b800832c0626d7106aae9810634a4f8c1a', class: "form-check" }, h("input", { key: 'd74af0b836f305a6ebcd9df34c08618b1e4e008d', ref: el => (this.checkboxElement = el), type: "checkbox", id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: 'e73b59126ddfd1b4f7c510b6d18e48c66aa9417d', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'c69896d9f44b0d9bb12bad10f22f3da5c5a6de52', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '5a8e732e9cb5999ab72769f00f00a4a19def3471', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, checked: this.checked }), h("label", { key: 'c6ab8d9d643d7efef1bed13a41995812745581b8', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'f12671212404e6827b0b715ee22c187d55fb3a7a', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '34e4484c1791c743026facabbeb8aa2d43d1e197', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-checkbox"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-date.js

@@ -42,10 +42,10 @@ export class DateInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '08bce3cf3be399f5cbc2b83885b42cbc38edb118' }, h("div", { key: '9d7537d093c98aad6ace2bf2e1dff221a94342ae', class: "form-group d-flex flex-column" }, h("div", { key: '4bb572f4060339595df10dd2b33799b926b6efd1', class: "d-flex gap-2" }, h("label", { key: '7ff86ee061e99220d836786304835edb087a513e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '22506780fb5306be2eea2c8b0982668a57b8ac64', helpText: this.helpText })), h("input", { key: 'a15de1023d46a919caf8f2d4b4bd2fd187c44bc7', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '969690d52131c51dd12f7109a727e47f5a9d20db' }, h("div", { key: '36432e5ac752961e4cfaa4291895744e36dc8e61', class: "form-group d-flex flex-column" }, h("div", { key: 'b1417067ba00ae69efcf1926617601725d090977', class: "d-flex gap-2" }, h("label", { key: '94710deac6095b3c3c1ff24f3ddf614284ce884e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f25dc94699cd9d8424247d9963127477269bb0a3', helpText: this.helpText })), h("input", { key: '8f0468e9d37afbebdd603040656dd43dd54ffaa9', type: this.showTime ? 'datetime-local' : 'date', ref: el => (this.dateInput = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: '05011a1473a87a9a167a757d1f9387a3da3b9ebe', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled, max: this.maxDate }), h(FormControlErrorText, { key: 'a7cd3ba55f6f29eacd279cb151365479818c759a', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-date"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file-v2.js

@@ -2,7 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "./form-helpers/form-control-error-text";
 export class FileInput {
     render() {
-        return (h(Host, { key: '326085a82e5ba4a9dfd92d821bbc61ae1226abca', exportparts: "label,input,input-invalid" }, h("div", { key: 'eb08a1c5c9eba7c1589a4088c822d6c877d2ac8f', class: "form-group d-flex flex-column" }, h("div", { key: '214803f34627450d640573a746fff3d10aeb83c8', class: "d-flex align-items-start gap-2" }, h("label", { key: '4c352fd5c0388437bbda2d02b0d5fb7b93b031f4', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5653524953f91a5de2f10aa1d60014fe47b1e9b9', helpText: this.helpText })), h("input", { key: 'a247246694d393078ff8e3fb391b6232c3ee66c5', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: 'e3b485d2b5968444f4f0af9c1e4b922f0da58283', errorText: this.errorText, name: this.name }))));
+        return (h(Host, { key: 'e08644e84a0f21fca4dbc2ea6ddddea34b01a845', exportparts: "label,input,input-invalid" }, h("div", { key: '481bbdb8de822595df7d5a09148f35a5242485a8', class: "form-group d-flex flex-column" }, h("div", { key: 'cdb8d81ec35c50f271d22fe61cca7ee11296f94f', class: "d-flex align-items-start gap-2" }, h("label", { key: '95712c8bc414f7158b7eefe6635d7ea15ad57f67', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '0c68d725f108863b58734b3a574ed28961a7d352', helpText: this.helpText })), h("input", { key: 'aa6bb58e74e0a90865c33b0207a64174dd333d3c', type: "file", name: this.name, part: `input ${this.errorText ? "input-invalid " : ""}${this.disabled ? "input-disabled" : ""}`, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onBlur: () => this.formControlBlur.emit(), onChange: () => this.errorText = "" }), h(FormControlErrorText, { key: '4225aef32c734de9db025efcc6dd46c0cb771410', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file-v2"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-file.js

@@ -37,10 +37,10 @@ export class FileInput {
         return part;
     }
     render() {
-        return (h(Host, { key: '8521437d1faf90d5f3b73f821485560d0ca517a2' }, h("div", { key: 'd803250512feba82aea03c8a8946b024aec2eeae', class: "form-group d-flex flex-column" }, h("div", { key: '8377b86ca9c4b1974a55380d7cc325d6b5149913', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ae69567c041aed85bdde3ea16f829aec96e4b25c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '78c0ab7de411ca18dcfade80f1bac72b4741fdf9', helpText: this.helpText })), h("input", { key: 'ed1d7c11db1478e0edb90be9d918e119feb478ba', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '9ca34251b08c89c7d1f63d8f04a012d5dad4cd0d' }, h("div", { key: 'ee08445d0f9baa633de1198c79d84564da9e9da8', class: "form-group d-flex flex-column" }, h("div", { key: '2ef3a71e430f5a8d78b5a9ff715cd697f83bb5c4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'df4258d8a9b799b0c52ca37168b3b7244130dd83', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '05856f44772f33d4e7f5647ded0f781dfb6f5b52', helpText: this.helpText })), h("input", { key: '3d7293a283da289b3aa6dd18ce584dbd4945306f', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            } }), h(FormControlErrorText, { key: 'b31b790d9c3fc013df2d504be03fb75987779148', errorText: this.errorText, name: this.name }))));
+            } }), h(FormControlErrorText, { key: 'b8f3c7c30c5e220b999a9db6b1f896d8f7b05b5f', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-file"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-monetary.js

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '4627cd58c4be09dc4650c52c22cba47134dad748' }, h("div", { key: '71b9039fd1046aacf6dc1e5ebbfc778dbea36f18', class: "form-group d-flex flex-column" }, h("label", { key: '53326d4fc12a7b0087a420f5c3396a42e1fc01dc', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '50e431a5aa3e83f6cff7d520bc5df4f372055541', name: this.name, helpText: this.helpText }), h("div", { key: 'e462e21706fd2cdac31f68e3a9dfc3319e002416', class: "input-group" }, h("span", { key: '2bfe95a64d5ba18f36256933f85bb710f47c233c', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '5ce586b7b9de9f082d29632a2abc4ee676ca3ef9', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '35f299a4b3d491c78faebf3c5c204a44139c4a7d' }, h("div", { key: '6cf9cf915295c7013eceb3af69806c772f2c2cce', class: "form-group d-flex flex-column" }, h("label", { key: 'b73aa560cec9c8b7a362931d60fbe839d771622a', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'e0fcf59e28f050156dff13cd13d8bf988928818e', name: this.name, helpText: this.helpText }), h("div", { key: 'dbc260339bee68020778dbd2d7226177f4cfa5d7', class: "input-group" }, h("span", { key: '80eecb80c5e3c6e14de064764ac402213e842702', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '3ee62af1207afeedbf449697f70bea3ba214176c', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '5ba05e5b423b1aa99bad6cd4e096b3ca40e1f528', errorText: this.errorText, name: this.name }))));
+            }, onInput: (event) => this.updateInput(event.target.value), onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.inputPart, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled })), h(FormControlErrorText, { key: '78867efd36f98b473f5b0f72ec3655d706bc5705', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-monetary"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number-masked.js

@@ -59,10 +59,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '90e98aec90cbbfcb6b7aed010f45ec83336faf17' }, h("div", { key: '43185b809d29eee55e8d52538e4db9b58c07105e', class: "form-group d-flex flex-column" }, h("div", { key: 'c6eaeaae9643e86fb719b4c3c1fb91e5283611f9', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f7aec8f74195a1837b27202b7f54891572ba4dc7', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '17d6bb8316b612de5276f9c492213a50400a672f', helpText: this.helpText })), h("input", { key: '6d5bc7033170be3cec7a0c63c4367839c6907588', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: '061fe0815ef19482e674b7a79f7fd8d3efd9b23e' }, h("div", { key: 'aa7cbf11fa76f3275e5134b73eb791d9820224fc', class: "form-group d-flex flex-column" }, h("div", { key: '8691788f18c11838e9cab552aa4b461b8c16475d', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a10ab49f8c8bb40568fbabdc6a331453e9f0da7f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '72ad331bd99426ea403137f14868830a5d37525d', helpText: this.helpText })), h("input", { key: 'f3500f91fe305c5a5bb57e2fe6746cd7367b73a4', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'a826bbca2dfb515542bcc5485b2c31c8c6c6fc56', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: 'f2862035e9bd3f5fe7ddb68823cc2c2e3bb3ed9e', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number-masked"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-number.js

@@ -36,10 +36,10 @@ export class NumberInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'efa689f0c0eaf8ea284c3638ae24eb78d22b3746' }, h("div", { key: 'cf749f1b2fbdc117dbd54b64804aa9e86e5e7596', class: 'form-group d-flex flex-column' }, h("label", { key: '1d9313fad2bfe87aba771584888d1ae14a65658b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '450f93bc24778a0ffe095a5e9b0481466f301eef', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '3a327ad2c5222d0173a5e0d3441fdc67828fe296' }, h("div", { key: 'ce9abb2be09e963b5f9845ef53943e5d0c91b52e', class: 'form-group d-flex flex-column' }, h("label", { key: 'fd1696fc3708330e9c17cc170d63fa185c70554f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '5511ce43acffab43852d33b999f38ea2af5c8a22', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: 'be5d1cf04001775d86aff7f3f8acbecc4b3940f4', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'af63439d042a2e74906a37050c5772d26bb98eaa', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', type: "number", disabled: this.disabled }), h(FormControlHelpText, { key: '7cc49d28e9c8fa25936b4cc6845d543b7f2f13db', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '9239a87c6114f4ed7cb5031d2de843c75642abe3', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-number"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-radio.js

@@ -26,10 +26,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '6fc1bd87b882538bc41afbb6879b25a8bc046f16', class: 'form-group d-flex flex-column' }, h("div", { key: '0937e3f5820ca6eaaa4d44a7c21c60db2e0c6d96', class: "form-check" }, h("input", { key: '3e1d3fa4567bbe2ee72915c9ef9817194c4d2789', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '2f64360b10bab1122ae4b02ef46c60885dfaffc7', class: 'form-group d-flex flex-column' }, h("div", { key: '3c8c6c0ef5ef7fecec50dce58bc4b8ace86141ff', class: "form-check" }, h("input", { key: 'dcdffa6b533e39e0b0ba94e6618838581676d770', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: 'b9b6978555b339b722492cbbf8fba7c2f2086f7d', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'da9d5829ca6bd368bad2a9455d1aa24fb9453a07', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'd63ced982c2ba602e765c1133dfe8def475c861c', errorText: this.errorText, name: this.name })));
+            }, onChange: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-check-input is-invalid' : 'form-check-input', disabled: this.disabled, value: this.value, checked: this.checked }), h("label", { key: '445b9d24065d6bf342dbc11913025c85c45438eb', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'cff7ef6c97d8a11abaf849204fd36e096a90bd47', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '758ef5790f511eaadafb09dabd742c21d71d28c3', errorText: this.errorText, name: this.name })));
     }
     static get is() { return "form-control-radio"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-select.js

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '839c378aeb1e2886a99828d5d2bf56a886863553' }, h("div", { key: 'b136cb01ca628a434e0f3525ea9160e8ea645461', class: "form-group d-flex flex-column" }, h("div", { key: '02beb8e2c5d8c3c83b0ff3f7fc85999d1f3fd238', class: "d-flex align-items-start gap-2" }, h("label", { key: '446aae548caa27b70c79f50dd8248b30ed03d65a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '704061186d7d11461a4eb28f2da23ae0b0182386', helpText: this.helpText })), h("select", { key: '8960d6fdd2cb5c6065494c23157f25ed9fb8b43a', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'a7428cd8a89414d877dafe9948f5652f28c36a5f' }, h("div", { key: 'c9d5d5d2f8a6292484d3606d883dbb9d168aa316', class: "form-group d-flex flex-column" }, h("div", { key: 'c1aba6560934b966de02e9afef77428c6060eefb', class: "d-flex align-items-start gap-2" }, h("label", { key: '5fbbb09c3955ff3285b006f24c3873082394d39c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'f756a05a8273ab6fd65205bb5c32cd34c30a9db3', helpText: this.helpText })), h("select", { key: 'ffd0fa461d3c35da5595e705a7c4068066d8f971', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: 'b9a86795fa9b2717c459735cb49b2100c890d12a', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, part: this.part, class: this.errorText ? 'form-select is-invalid' : 'form-select', disabled: this.disabled }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("option", { value: option.value }, option.label)))), h(FormControlErrorText, { key: '6ee60bb236ccf7cea7bc8ccf946a363d2cd26906', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-select"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-text.js

@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'e5d8f5de52ee67b8a19f92c9bda42590ba7c8f9e' }, h("div", { key: '70f3889053a4c432d8597db382e2e79d1a0bf940', class: "form-group d-flex flex-column" }, h("div", { key: '8ce7f67b0d3e9331e14f697e8ab09e62ad8fa802', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ea05923eafbecc5a6c9657cde0e9f2bfbbd53398', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fafde539fde52e451a50626325c5053449969f12', helpText: this.helpText })), h("input", { key: 'ca8c5abef9574fdd3b6f6a8abbde7d6ce6d16dba', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '5b500af224b7de44bf8098d3cd932d6e2fddcbc7' }, h("div", { key: '5df6aee512b3d4d65d262fb9855687687ca60c3e', class: "form-group d-flex flex-column" }, h("div", { key: 'a1861ef5aaac348fd6f9710c265abb7a38ca844c', class: "d-flex align-items-start gap-2" }, h("label", { key: '0bb09702643db8ab0d3da2d0ea1e1ba702c3fedf', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '86555252ecc0dc43b9e87339cac7212606f18f62', helpText: this.helpText })), h("input", { key: '76cee08e6e148f6b430c7159ae88b274d6f2ecc5', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '54585710ea44fec44de2a299c1703a412e96ac21', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", type: "text", disabled: this.disabled }), h(FormControlErrorText, { key: '2cceb2db7b3b52c92561385abbdd8e811df633c6', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-text"; }
     static get properties() {

package/dist/collection/ui-components/form/form-control-textarea.js

@@ -38,10 +38,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'f45ebba5dc17491a061e42d2367af0349a6dfbb6' }, h("div", { key: '91a3b4bd2c7f1b24c86c462142e03fadada54333', class: "form-group d-flex flex-column" }, h("label", { key: '0db662d661f3f8ae7cbf0dafba5f1aae77bdab16', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '413bb49fe3aadc0113bc2c95bee09dda04efa13e', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '2034befef3ceba090d731e78173ae7b497110f78' }, h("div", { key: 'e501518a21ce664a4abf5142e3df83a92334e2a0', class: "form-group d-flex flex-column" }, h("label", { key: '9ee9b447ed978dae9f12083c16bc858033f1873e', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '60de3ec721ed876aff1a8c57a7c1c657dd60454f', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
                 this.isFocused = false;
                 this.formControlBlur.emit();
-            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: 'fe43f983b1354f90ed608a0bc32d521af7428c76', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '870687afed45cb19d663c7fde78f292aa819c0b7', errorText: this.errorText, name: this.name }))));
+            }, onInput: this.handleFormControlInput, onKeyDown: this.keyDownHandler, onPaste: this.keyDownHandler, maxLength: this.maxLength, part: this.part, class: this.errorText ? 'form-control is-invalid' : 'form-control', disabled: this.disabled }), h("form-control-help-text", { key: '2490a8f33b6a45bdb48058dfdbbf4a011a1f816c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '2c137ae9de0a8c7c0a4888f4a945be495230e67b', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/hidden-input.js

@@ -73,7 +73,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'aa2fcff3addf2d5c93e3f5826f1690c4d48ed57c' }, h("input", { key: '302959d5e9bee9f86c6260a89268e0f68332c23e', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
+        return (h(Host, { key: '0ee80d3f6e70e496682e798ddfc57d9e8e8b0578' }, h("input", { key: '6ec2b8825e4b2e9c2d130ce810bb76f67dc30940', ref: el => this.hiddenInput = el, type: "text", class: this.errorText ? "form-control is-invalid" : "form-control", onFocus: () => this.isFocused = true, onBlur: () => this.isFocused = false, part: this.part, tabindex: "-1", style: { height: '0', opacity: '0', pointerEvents: 'none', animation: 'none' } })));
     }
     static get is() { return "hidden-input"; }
     static get states() {

package/dist/collection/ui-components/form/iframe-input.js

@@ -77,10 +77,10 @@ export class IframeInput {
         return params;
     }
     render() {
-        return (h(Host, { key: 'fb0924f188673c2d89902e033ebac390204f790c', class: "form-group d-flex flex-column" }, h("div", { key: '376d424fe55e8e82fa97fefdc245be3586f92f93', style: {
+        return (h(Host, { key: '476aa13501c575d34fc189186cb9cc087f1934c0', class: "form-group d-flex flex-column" }, h("div", { key: '4479d3f3ca36738a4803a8296335df173cc60600', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'd4fae6f4a028eb14be4271b75794da46834c7087', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd43852337045814bdaeba085cff30ea0af00cf44', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: 'bcdad13247f7c3fa34ccd4ab334426ba6ed24a0b', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: 'ab3ca944b088d966fb5e31248e72be90cd817596', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'e0590b5060c5f53ae009f463c7fd2013c718d29a', class: `p-0 d-flex form-control ${this.isValid ? '' : 'is-invalid'}`, part: this.part, style: Object.assign(Object.assign({}, this.style), { overflow: 'hidden' }) }, h("iframe", { key: '5c31e3628e9c1480702008c750b9023e27427c68', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '5366a798dfce089b8f6b300c7a8fb7f5e10aeddd', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '8dd8903b2de383fa145a11d45e32efe1b95e10fd', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

package/dist/collection/ui-components/index.js

@@ -9,4 +9,3 @@ export * from './form/form-helpers/form-control-help-text';
 export * from './form/form-helpers/form-control-error-text';
 export * from './details/details';
 export * from './table';
-export * from './shadow-dom-components/justifi-radio-list-item';

package/dist/collection/ui-components/shadow-dom-components/justifi-button.js

@@ -7,7 +7,7 @@ export class JustifiButton {
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: 'aad33c81cefca389b2806d7597fb3ea9dfe262b0' }, h(Button, { key: '3fb90e6122d7fe05385f8d84c6c21ca9f87d9666', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
+        return (h(StyledHost, { key: '89057d5d72b67b613e4846165ea8d2bf5c79482d' }, h(Button, { key: '2bfa0c22898e703a36fb59b1060da35b362f6efa', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle }, this.text)));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-header.js

@@ -14,7 +14,7 @@ export class Header {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: 'ebc12609efe0a7c65bdbf8740abba439f09a92a4' }, h(HeaderComponent, { key: '4f88280af54c1980aa90ad149fad220e860b3c6d', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '0ea6499e12267cc11baa3e88b24b06aae5add667' }, h(HeaderComponent, { key: 'd2e1d462e946d129890187b320db0b8006f505f7', text: this.text, class: this.class })));
     }
     static get is() { return "justifi-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ui-components/shadow-dom-components/justifi-skeleton.js

@@ -3,7 +3,7 @@ import { StyledHost } from "../styled-host/styled-host";
 import { Skeleton } from "../skeleton";
 export class JustifiSkeleton {
     render() {
-        return (h(StyledHost, { key: '9928d91672d7ce5854f08d190dc55d8dd1d763e9' }, h(Skeleton, { key: 'eb9bf35e904235d89cb06a2ee4de3edc8e05b12b', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '4c06883ecab0314da95dbfdab5a9ff46be2286b5' }, h(Skeleton, { key: 'ebe43cc3008e04345c3daf16c44d94d78b99fab6', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
     }
     static get is() { return "justifi-skeleton"; }
     static get encapsulation() { return "shadow"; }