@justifi/webcomponents 5.7.6-rc-19 → 5.7.6-rc-21

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

@@ -42,10 +42,10 @@ export class MonetaryInput {
         return input;
     }
     render() {
-        return (h(Host, { key: 'fe51b18876a4ff9852e22a846560140c7785c13f' }, h("div", { key: 'dba07ddbca703924766869095f48dacdbd12ee3e', class: "form-group d-flex flex-column" }, h("label", { key: '2b06342a7e682609b2cdb9ad678f93fd6507b7f0', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: '71093364163bb3a58dda19e1a55cb44ad9810075', name: this.name, helpText: this.helpText }), h("div", { key: 'e31448537ac8240606c45089e918f6b10144f33e', class: "input-group" }, h("span", { key: '826c98a15902fbbc468bce8bbc0249906099bcbb', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: 'd339072b747a798a37abc7ece84691f86da88639', ref: el => this.formControl = el, id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'e3fc90899be1e53399be9a2d1cb7dc044a66cd9a' }, h("div", { key: 'ecc516c61f700f329022dd842b5abac11ede210e', class: "form-group d-flex flex-column" }, h("label", { key: 'c893dfa4275404d9f511f04289f59b2fff72eebb', part: label, class: "form-label", htmlFor: this.name }, this.label), h(FormControlHelpText, { key: 'fdb479013a60ad6dc75fc49ac43821678713be94', name: this.name, helpText: this.helpText }), h("div", { key: 'cad6f25647339c0754160a55016d61c4613f8160', class: "input-group" }, h("span", { key: 'eb5206a0f63ba81581edaf401239d6dd7f55257a', class: "input-group-text", part: inputAdornment }, "$"), h("input", { key: '65265e64b5d31c676cefe0f580a801bc2a763c3b', 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: '4bf5b64de48b7e16407be4dae29f2b210ce2b051', 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: 'ac486c8cc0a3f4ec0cf63cbac77935d479a2f376', 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

@@ -22,9 +22,11 @@ export class NumberInputMasked {
             this.textInput.addEventListener('blur', () => this.formControlBlur.emit());
         };
         this.handleFormControlInput = (event) => {
+            var _a;
             const target = event.target;
             const name = target.getAttribute('name');
-            this.formControlInput.emit({ name: name, value: target.value });
+            const rawValue = ((_a = this.imask) === null || _a === void 0 ? void 0 : _a.unmaskedValue) || target.value;
+            this.formControlInput.emit({ name: name, value: rawValue });
         };
         this.updateInput = (newValue) => {
             if (this.imask && newValue) {
@@ -59,10 +61,10 @@ export class NumberInputMasked {
         return input;
     }
     render() {
-        return (h(Host, { key: '2bc05adb1cf3da9fc980f2874d046601affeda59' }, h("div", { key: '55e0f1e30d71b69f69e70609f606a078fc1485aa', class: "form-group d-flex flex-column" }, h("div", { key: 'f1838cca156258e0add0e684950c7fc382e06ada', class: "d-flex align-items-start gap-2" }, h("label", { key: 'bdd36fa84754bcf52d6c317d626e393cef41e61c', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'cb2b1776828f08c60925ccc7e72566da7d6735c8', helpText: this.helpText })), h("input", { key: '752b462c95187ba9e108657fd6ef90200f3e7a5e', ref: el => (this.textInput = el), id: this.name, name: this.name, onFocus: () => (this.isFocused = true), onBlur: () => {
+        return (h(Host, { key: 'b80051f9e971bac339a5ce7e8abb0475a91f9c46' }, h("div", { key: 'f5c63c2723e6faa33263b12f5b4728d4255f6725', class: "form-group d-flex flex-column" }, h("div", { key: '6aafb989bd1c3bc4ed66fec7cc94189dc17cb0f0', class: "d-flex align-items-start gap-2" }, h("label", { key: 'cfc242e804398f642869dd9cc1a97d841798d66d', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'db7dc909c2545e30ff31579499363af2c33da5af', helpText: this.helpText })), h("input", { key: 'd68876ebd0b5d6395f83a427d5b2f2095ed76623', 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: 'a1ec708f91c3eb8142b714bba129afb186530927', 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: '99a1db5f72d19ae22eb52db419dcdc01c3053ec2', 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: 'dc0b79410cef1d158cc144a3005115b886861828' }, h("div", { key: '805a21626529fba2187d80532a54c62e6eab32d0', class: 'form-group d-flex flex-column' }, h("label", { key: '77c6a7d7083f2af2b3b9d67536b573f71c125ce3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '212751835d17b295756cb0f2d3c414a42f460639', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '7698cc4f02f193d42d793082401a0356ea9510ee' }, h("div", { key: '04a7ad2b7487a520b04c84cd8bf002de3e30cf38', class: 'form-group d-flex flex-column' }, h("label", { key: '25029094eb26e9d7d01071d005a254ee0d935301', part: label, class: "form-label", htmlFor: this.name }, this.label), h("input", { key: '1283bf554572cec3d8b3a1d6281783dbd8f5601d', 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: '12b238c6aebb20db5456f8020b30fc0b619883ef', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: '0128578f613685a45c331c57b5dd049348af933b', 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: '5c1be4c979c99fd2988b5631ef7eb3f18e5c1243', helpText: this.helpText, name: this.name }), h(FormControlErrorText, { key: 'b55c5ab0d9aa5c7899fad1b001a3b228a844dbc0', 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: '0f792d7511ff5921b8be68ae27bf8dc506303c5f', class: 'form-group d-flex flex-column' }, h("div", { key: '84696e5c14b67e18cc413a476baff838d0214426', class: "form-check" }, h("input", { key: 'aa5a9d7806cab27add880800ef7f13d6cac8b3da', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '984c9f44082c3672f4b27b5a0059061763b6fede', class: 'form-group d-flex flex-column' }, h("div", { key: 'e5782af27624f153276d2c4cc3d7f899560ff7a9', class: "form-check" }, h("input", { key: '3d36bf3f4fc10fa36cff6a8b9fd38ec3bd082713', 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: 'c15ab35882e414d8569e45359a0f37d33f7e61fd', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '0a1ff45eccd351915d1c4e400998a6c4fd4e5df0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '067419ea6b583610d5592b4fe2c30f8c7aa2469d', 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: '9f647a6cf94d280aa665a21fb2b6f492d2d6a931', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: 'bc315679286f429d49b1f113e74cb0c6307f7e96', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e315ab0413dc4e82fd7bd6457e95199980daa732', 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: '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: () => {
                 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: 'f5df46552aa8124b344260bca05bd02c695d0fe6', 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: '68ed9ee7ba3c4c33e3047a4ae95170518d0998ae' }, h("div", { key: '62db9a3f0478e12346e5872e284ffc21d019109e', class: "form-group d-flex flex-column" }, h("div", { key: '6393a547f640b8d089f4dadf04e2e18b25911b15', class: "d-flex align-items-start gap-2" }, h("label", { key: 'f85ecc2ffb78a2253b391a74599c91332b923ef1', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '0545d73dd5201a92ff783ba020d420d1c38aa428', helpText: this.helpText })), h("input", { key: '8e4da743a340b3dc80a62376f1b93c01921a4995', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: 'cd84a88604a278f60d81b3069449c1a4d5477d19' }, h("div", { key: 'e1ac6fc0c40c1a7142ed873654c44edf476101a5', class: "form-group d-flex flex-column" }, h("div", { key: '4bdefa049238c098e0a9fd036707e2e29089610b', class: "d-flex align-items-start gap-2" }, h("label", { key: '749b24acf4ea40e4dcf5c87ef0c5e833696469ae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a054ccd7be60d88ef69f88a55514f54fffd8abb3', helpText: this.helpText })), h("input", { key: '7444a06fd70bb71d8f481697c90a0f94154314f0', 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: 'f231489de0a377cec17ee031a2431ae709f8347d', 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: '093124125e3aae9c156993718fb602f74b9446dd', 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: 'e117014459085c16401a516f15d7d46f095297ff' }, h("div", { key: 'b5643fcad548ac6f514f77d8ac72c47d32dd7ec4', class: "form-group d-flex flex-column" }, h("label", { key: 'd48adaca703fceb68bf7cb7276ee882eb11e9bc3', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'e961112353657a4f4e7086aefd95195091bc366c', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '441f155ccc2b2d47ca059f378a2ce4654dee9226' }, h("div", { key: '8b40b7a1d71264f34ff42f50c28f8a2848f8b7e5', class: "form-group d-flex flex-column" }, h("label", { key: '15b349f7c0409bc5b2687d6c2b981d364c89d535', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '9f48b1b48aba962d4c331141d9c37fd76f5533f7', 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: 'c2d2c5fe6010af5383fd769042d9952dd11bd3d2', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '6adc9fa56ff5ee268867133750b9320449329efd', 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: 'a83d38aa90284c9744bed539cb491b9af5615b1c', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3ea714634686f0e48bc2e325f38af249614bbcea', 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: '959f4f415784168ab91395b9d9307bffe7cdad99' }, h("input", { key: '9fda34ffd37b839d68c3f85e08c42d4160d1ccfe', 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: 'eb0135c733e6a4273855b6c74efab83e51d3788d' }, h("input", { key: '48577dd678d44b2382bbeadcaa2efc14484f8638', 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: '7e3152f8496ebe7ed1be6c95922f5ca1c8b96df0', class: "form-group d-flex flex-column" }, h("div", { key: '22992212931f9f535854e0f39068c417facf9b0f', style: {
+        return (h(Host, { key: '07a697a99ef1b601c3f95d176c0eb28a695afff5', class: "form-group d-flex flex-column" }, h("div", { key: 'f9a1cf30b2020ae9de993dc363b07cd1e897c82d', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'c599bea085f2dd11378fc43b3a9d8eff20b3b455', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'f2ad94e5e1a549de53f1324e0663f5b5ad6b25f6', 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: '92555f1f148d3f7248bcf6aab254c63c0100f8d9', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '09c186cb27e0fc75352c8028f1ff4e92866f3984', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '758ea464591a51ddc183256ebcd66238602bc4cc', 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: 'c2956bb89e30fe2ba1a9111fe71681883470879b', 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: 'dd9e907c0fbe2b60b89370d76c0a226e2e48d19c', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: '0ab5542c8c8a8242aefee11cc4c1b0815f27f0aa', 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: '18d7ab039e1cef7b3e5fea26c0af5f37c36eab14' }, h(Button, { key: '5ae27b690cf7d7d94cfae966782ff3ff1165f402', 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: 'fae177edc7a7a898f1782a01c26b65fb11c50c65' }, h(Button, { key: 'c097e63cce36a5b4e2cb522bf17ba2519c354c6e', 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: '2d95ee91f805c2966eb50c1772ee2e02457ddca5' }, h(HeaderComponent, { key: '6afb5a11c91793a29f4b79e67e3cafe2ce1ff977', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'ae04a67a1eaf95d6d093fef23911ac4eb1523cfe' }, h(HeaderComponent, { key: '51b27dd180d113ebe9ac52f7ff10c494926f7cdf', 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: '81d89538db32fccfe1fc77002ca40444f6743fc4' }, h(Skeleton, { key: 'f06c19c3a4e09ffbd9fc40810576c0b160fbe15f', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: 'c54376afe1b0cebb0394ede10307bcdb32d68bb5' }, h(Skeleton, { key: '681e9e9d33bd7c2385e7b527f9093a93fbf884bb', 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"; }