@justifi/webcomponents 5.7.6-rc-03 → 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: '00471f914090d5f7c9c4493334e37bc669178f68' }, h("style", { key: 'e4c72e453b7cbfde820a72c93cbcedc3a1c6d3c7' }, `
+        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: '8677d950b63503711e50a2f3d5b14bd7085f319e', class: "popper-content", ref: (el) => this.popperContentRef = el }, h("slot", { key: '54c1259606ca9b91d60f175b1d9981d8871fdd50' }))));
+          `), 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: 'f574898ffe8a3d666d4b95721cf4f3f3866f8632' }, h("div", { key: '185ac07832d140b467162e2bdacb90ea0640d460', class: 'form-group d-flex flex-column' }, h("div", { key: 'c610e4c989b6c8529253ef73e39d4e58f0efd1e3', class: "form-check" }, h("input", { key: '7abfbfed27e3ad2c0a46a5f30b0681d54673c1fb', 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: '9c505e1d0926690eb32d2d9621d6c144cfe27f6a', class: "form-check-label", htmlFor: this.name, part: label }, this.label)), h(FormControlHelpText, { key: 'fc7933d29f06ef533fe45025184d5c8cdd24cdd1', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '29879fd2d7c04a26eb999bb2f9991bc38515994b', 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: '42d56dc5835b06508f48e7eb8b5dca063d32dd5f' }, h("div", { key: '9a111c9f90604df8c32f66d1f0bcb05ebca9bad5', class: "form-group d-flex flex-column" }, h("div", { key: 'bec15b51e5d0f03cd4a69abcc3f0ee727262479b', class: "d-flex gap-2" }, h("label", { key: 'b57723374131e145d8c1307d7b94a5240ead9b4b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '2c03597da3e1db9fafd25a3835ee9b72dcb54a6d', helpText: this.helpText })), h("input", { key: 'b5e7e7b38fc6ba6c68cf1773e8ad68f09663a1cd', 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: '4ac80bbeaa886a8822b641f3643c6a36d1bbe111', 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: '09a00c508e5f8a6760a10596caa60e39650ae3dc', exportparts: "label,input,input-invalid" }, h("div", { key: 'af053f126524dc7dc5f02d5f6ef871012097e1a4', class: "form-group d-flex flex-column" }, h("div", { key: 'e7cbe9ae561c54c14ef4bf1adb4405f93e52a0da', class: "d-flex align-items-start gap-2" }, h("label", { key: '84173f53d2d70e8f3728cd5ed69dff4fa86ee659', part: "label", class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a5f6fa27696c3cb673c5b10a7cf7049c2be1d113', helpText: this.helpText })), h("input", { key: '8f39d6dfaa711830059c04fcbb0b99600d269000', 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: 'f9c61d2900f3a0776895c51d9f1aa42e6aabac4b', 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: 'bbf3a7e4cd4dcd5cc0ccefe4ad405dccbe7e3e78' }, h("div", { key: '4cb2c56d8015d1bb78ab08c5499d00ddeb8dd738', class: "form-group d-flex flex-column" }, h("div", { key: 'f72a96162d320c2ec86b0668a0d174065cca15e1', class: "d-flex align-items-start gap-2" }, h("label", { key: 'b99571312c582e453b867888db7499ad5dad69c1', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '014c69076270156f8301ba329bbc779046282e69', helpText: this.helpText })), h("input", { key: '08a71546d4f2c2fc3df64d4f87ac1ffe2dcef6d4', 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: '67496c44c3db670d269394b2667c13776d9ae166', 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: '0842196a10a26630b99d9b10149edc52f9197d75' }, h("div", { key: '9195cd13c772720637f9f5c68c3d93ba0b7b2b03', class: "form-group d-flex flex-column" }, h("label", { key: '995e71be182068b0ef4629c4fd6d66539199be5d', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'b9d3a12f486d808bc9eeb4155ca0c7c8086cdd0b', name: this.name, helpText: this.helpText }), h("div", { key: '00a19cfca58d00169c831f3f138c7ebc4b5afd85', class: "input-group" }, h("span", { key: '36120c616e2eec08cdf4a29fdfc2cb472441bf2b', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'dff91515955e4bc2ceb60b48deaa27be8717d95b', 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: '52a89e9a6196eeff1fbc20c7474ce7016be16fe3', 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: '6cae1871670deff0c71ea486c0e152f3e2fde29b' }, h("div", { key: 'd19b5550c44f287f8a209b8e5494f8dfa684c83c', class: "form-group d-flex flex-column" }, h("div", { key: 'b47d25e856e615073680ca7138659fb5a744482b', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a8487b47e04941ff3f03f4cf50cc8e6a3487a83d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'c1742daada4cc36cabee18a31d64320b039c8b7c', helpText: this.helpText })), h("input", { key: 'f0502f8af26a5a1dede6e8ea3645119b7c29086e', 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: 'f718537088c8b1fdb0b55a60fec35606e1d5e113', 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: '0c518001e14574c5c7bce66643ec03571eb80e86' }, h("div", { key: 'd09fbf1cd01990d2d73fe8ca3b0ee59ba48b4631', class: 'form-group d-flex flex-column' }, h("label", { key: '51476220a170a30e6fb8eabb06c0dc16b5231a59', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '3d31c0cbb62e9f9957994b3a4d2fc26330aa4ee8', 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: '48241a9ebf6118a0b231d05b7aa14ade91e105b7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '53b60709bd2c431e93fe411c498df28dca5dbc30', 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: 'd14a72683af8b1acaa69c203939b736a4c0dccb1', class: 'form-group d-flex flex-column' }, h("div", { key: '7c6f41ce758caf8c4dde203bdfa01088295a0d1c', class: "form-check" }, h("input", { key: '44577027dce61879ecf2eb697040364d4a383e3e', 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: '865a2e9b10774fd3e8c1352a20eb8c8b08d0adc4', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '8b9e73b963315bb209ed1a7f086d86020c56fc3b', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'a64d416e7683886a2846594b33f5205545fd3bf9', 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: '9842d5b2a2069292ded1b960bc024d7995a6d58e' }, h("div", { key: 'b4b5fe37f88661d2f592864adb16ae997a38b484', class: "form-group d-flex flex-column" }, h("div", { key: 'f70c40c7e4bdd58b985ac9b6e76fbf48ff15261e', class: "d-flex align-items-start gap-2" }, h("label", { key: '6b1d9e1f3b22e702962c1d23a057f08222af5e1a', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'fae7835adde280a8c4f48f3c9b169240aac3672d', helpText: this.helpText })), h("select", { key: 'bee75d1bb56ed104473efcad7d8c432b50bfbb38', 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: 'f5df46552aa8124b344260bca05bd02c695d0fe6', 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: '3bfa995ee52c29b234f9b5e55ba28b313b7cdaea' }, h("div", { key: '7c3063420028402d161a39799b8353f7579a63ec', class: "form-group d-flex flex-column" }, h("div", { key: 'cd66e51b2c88f33f107a06d548678dd0fe471045', class: "d-flex align-items-start gap-2" }, h("label", { key: '47a010c294accf77ab36ff4aae0e49b4b7088d75', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1bc3361f6851fc5b62e76ca0bb6cfa34b88e7f79', helpText: this.helpText })), h("input", { key: '8127d267a560e3b68bb170d32590ab3134d113f2', 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: '24fa8b67f634e15fe5aafc2e9c3c875ea2bc2811', 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: '8b7aa0820fe8e28893564b1db81f9a46af19ba5a' }, h("div", { key: '430c5979f3926703d09bbe33319634b77d8061e4', class: "form-group d-flex flex-column" }, h("label", { key: '74e5ea2805d737f43350d95ee95a3de0b3283661', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '64d7394cb65fcb16330c34efee4b343b7017be92', 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: '83b3b2f47a805d6896cc7b2c43bb57fce3242c4c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '9670a3995f4530352df05956bbd6827def43baed', 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: '9b8c4b1b44264f71586cf36ea85a920c65ab68ea' }, h("input", { key: 'b740788c09c9abd2368e35d1107581e821b72d28', 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: '6317dc0f48d4b44a94a2172e2d7342b8b77d96c7', class: "form-group d-flex flex-column" }, h("div", { key: '928a638fd786fb3e0518586e7c91f43d8e78f869', 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: '9489d0302ae3c1f9944c4563a4cf57a9864a0055', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '024ba8303ad42a45ea0794c7bd551294bad67c84', 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: 'effd7074bf559e5dfb63450eda633af57edb7abc', 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: '718118cbaf63d8e287f9bb8a0175b9cdb44fe41b', 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: '9058c69dafff70a5c678ab1c3bcf23912334fdb0' }, h(Button, { key: 'e338ce5761834c0a971970bb1d2085ec9f88eb65', 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: '91910c2913cd5085875d33d79e33136bcf78cb14' }, h(HeaderComponent, { key: 'd915085a734fa1abb5dc03d722c954139794ace3', 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"; }