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

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

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '3e5d9d316389c408227efc140470919ede9a49f0' }, h("div", { key: '438e75320d0dd82644da5846f35aa00253070b0d', class: "form-group d-flex flex-column" }, h("label", { key: 'ba7f69b961efda039f6faed58571d80320f1e7db', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '70a4dc0fc48a37102f0f1d6bffb259eb6e4a7c6b', name: this.name, helpText: this.helpText }), h("div", { key: '57c943368d8556a00fa8ed94cf34195761416322', class: "input-group" }, h("span", { key: '9c1f65ba1448895aa107c5358ea5200484835639', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '55910515d5146d078e72d6f4d70cab9c5ad0afe7', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'b3b5b2f0e09bf65b8aca2836f1712f9fbc79eb88', 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: '5ba05e5b423b1aa99bad6cd4e096b3ca40e1f528', 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: '2396f0e86fd6411a69aa33ad27996bc27d51c5ff' }, h("div", { key: '843c49d6623748474fb66a5a9c6df312ce3150c6', class: "form-group d-flex flex-column" }, h("div", { key: '02946008f20a5cbf5fa120581320d2232ca8f87b', class: "d-flex align-items-start gap-2" }, h("label", { key: '2cd845c41e2ff5c76e16f6ae235902a7ff821aa5', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '9142e6d951c69ac721d2be24fd90fad55e163231', helpText: this.helpText })), h("input", { key: '0161aa4d9bcc0c8f319a041e10948ee3fd4b92ac', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        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: () => {
                 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: 'fcf3fb19e7cbf18323fbbf4824235c4b1957a5d1', 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: 'a826bbca2dfb515542bcc5485b2c31c8c6c6fc56', 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: '2b4670028ce921d1784140b1a5e35c0e808e82d8' }, h("div", { key: '14a7d522a53eb04ef55e806fc7e14ec419d05915', class: 'form-group d-flex flex-column' }, h("label", { key: 'c4785313dab96aeb2a4d2f3b24d89fe0b1ff933f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: 'a3dff589653bd94be8ebf3bb27af35f296a49e59', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'f0de00517cece23f8eabe877f656f595711317d7', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '7691b836399614924d377c26340e631b13ac6fdf', 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: 'be5d1cf04001775d86aff7f3f8acbecc4b3940f4', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'af63439d042a2e74906a37050c5772d26bb98eaa', 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: '7e506e677b020d762afbbf5b4a2e95b78c672b33', class: 'form-group d-flex flex-column' }, h("div", { key: '33ebf3735238b6e14eba97d2763088d7c25eb64f', class: "form-check" }, h("input", { key: '3098513864c05277e14c33bdb2aca188b90f2b90', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '059f7d8a9bc8bbb19bd5cb73c5e06719becbf441', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '295307b03dbf8e634902692cf5f382571ccf430e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '9a0b8e22a4e975236e9575102b2e8a8bf83faf3e', 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: '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 })));
     }
     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: '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: () => {
+        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: () => {
                 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: '6ee60bb236ccf7cea7bc8ccf946a363d2cd26906', 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: 'b9a86795fa9b2717c459735cb49b2100c890d12a', 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: 'eb266645327b65097de5c9a6b2858f2c9a38412e' }, h("div", { key: 'a20abffedd96e0114988859acbb4823c5a6839e0', class: "form-group d-flex flex-column" }, h("div", { key: '26bf741a7908f6920b04a062432473cd935186ea', class: "d-flex align-items-start gap-2" }, h("label", { key: '944ba9e8f13ca14ba4d7880874536f19b19c02f6', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '596052a2165ed3e22ea45a949ffc663d82b12b6b', helpText: this.helpText })), h("input", { key: '7e2b7aeef57188ca4b3e5ab767e784b736eff5ba', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: 'ffc880aaa556ba0a6e8ae6f36d0ba14d34b2919e', 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: '54585710ea44fec44de2a299c1703a412e96ac21', 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: 'd0b98d212fc77b580dbc95ffbd4968e116a4ea68' }, h("div", { key: 'e2f15c7d68df28274470385c5417bd41ba4658a2', class: "form-group d-flex flex-column" }, h("label", { key: 'd1ece77c3c00a1ca83bb56b6cd990c04c5148a58', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '9b299c1201c42a700720d39a58b8088768efd3b7', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        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: () => {
                 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: '3e302298cde7d5b7572f8afa9c154ab9c5f3a36e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'd0609429f696b59661135f0c4da2b2a90e508964', 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: 'fe43f983b1354f90ed608a0bc32d521af7428c76', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '870687afed45cb19d663c7fde78f292aa819c0b7', 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: 'b463ccd5b6d6dff0c02080a61f768b33710bf81d' }, h("input", { key: 'd5fe6d3120d11b1a82fcf6d3e1d9a3b5929ac61d', 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: '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' } })));
     }
     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: 'b18d7ca56b7cb3f3fb927c210664e7c41a3263c2', class: "form-group d-flex flex-column" }, h("div", { key: '78fccc6cdc1323ef732cfc8fd57dfc9ab865db3f', style: {
+        return (h(Host, { key: 'fb0924f188673c2d89902e033ebac390204f790c', class: "form-group d-flex flex-column" }, h("div", { key: '376d424fe55e8e82fa97fefdc245be3586f92f93', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '6e6a08b933f3df6c68cbb8cf54768d8e1ab5af8d', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '43ace7ad01b2fd63d7184ba922cb83cd84cfef23', 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: '01fe8b095292a49b6278b2f5019847646536f5a2', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, 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 => {
                 this.iframeElement = el;
                 this.initializeFrameCommunicationService();
             }, width: "100%", onLoad: () => {
@@ -90,7 +90,7 @@ export class IframeInput {
                         this.iframeLoaded.emit();
                     }
                 }, this.iframeElement);
-            } })), h(FormControlErrorText, { key: '8531887da5c4a6a1fc02a7e7f1e835463a0fbd09', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '5366a798dfce089b8f6b300c7a8fb7f5e10aeddd', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

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

@@ -9,3 +9,4 @@ 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: 'e921657ff4c5aae07184ba6560a0f42b1e908643' }, h(Button, { key: '837cad8384e8d0e2e81d329beb4693ebb15b7d59', 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: '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)));
     }
     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: '1aa6a2f69da4f32ddfaae58c751134b4a8bd20b9' }, h(HeaderComponent, { key: 'f2877d1ef32662ab1a17a993d80366df01120a00', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'ebc12609efe0a7c65bdbf8740abba439f09a92a4' }, h(HeaderComponent, { key: '4f88280af54c1980aa90ad149fad220e860b3c6d', 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-radio-list-item.js

@@ -0,0 +1,155 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../styled-host/styled-host";
+import { radioListItem } from "../../styles/parts";
+export class JustifiRadioListItem {
+    constructor() {
+        this.checked = false;
+        this.hidden = false;
+        this.handleClick = () => {
+            this.radioClick.emit(this.value);
+        };
+    }
+    render() {
+        return (h(StyledHost, { key: '492a73e2bab02c04aa8733ce0b9ab801e5ff8875' }, h("div", { key: 'c095a98ba11739b85ece4c7bb0e0c30e7e08ec7b', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '050ed9e552c4a8bf4462e544d3496bed356e7c06', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+    }
+    static get is() { return "justifi-radio-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "attribute": "checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "attribute": "hidden",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "class": {
+                "type": "string",
+                "attribute": "class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioClick",
+                "name": "radio-click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}

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: '61759f6fd8527466a50047fb01c510b3181fa6ca' }, h(Skeleton, { key: 'f0b84cafaca36053a5c4c359e9c1896123a8fae9', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '9928d91672d7ce5854f08d190dc55d8dd1d763e9' }, h(Skeleton, { key: 'eb9bf35e904235d89cb06a2ee4de3edc8e05b12b', 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"; }