@justifi/webcomponents 6.10.4 → 6.12.0

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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { inputRadio, inputRadioChecked, inputRadioCheckedFocused, inputRadioFocused, inputRadioInvalid, label } from "../../styles/parts";
-export class RadioInput {
+export class FormControlRadio {
     constructor() {
         this.isFocused = false;
         this.inputHandler = () => { };
@@ -29,10 +29,10 @@ export class RadioInput {
         return inputRadio;
     }
     render() {
-        return (h(Host, { key: '4c7fb3b2ece714d07e8b4b8ee7745591d40554bb', class: 'form-group d-flex flex-column' }, h("div", { key: '63c62c7ffa6af6a092b1f526251406c0f08243d1', class: "form-check" }, h("input", { key: '1835d67a41dfab9abd3465c2a072303c9b7ef22c', ref: el => (this.radioElement = el), type: "radio", id: `${this.name}-${this.value}`, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '155f8db94cbc78a33daeaace0ea6b9e403d6856d', class: 'form-group d-flex flex-column' }, h("div", { key: 'f2c34e5513e584a68c6117775124eeb40d8a4de3', class: "form-check" }, h("input", { key: '50114b7a8428cc78b963442cf92eda6d0146f824', 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: 'a06621a85f0d2c7a4db4ebabbbf8dfab45c9f4a3', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '9d2c0d198f186946ab585ccc1488cfdeddfef211', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '7245f045ebf9c7633eea9784ad9b5348b06a0f93', 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: '759a69de65a6fc043494d394a118c55b1e948e75', class: "form-check-label", htmlFor: `${this.name}-${this.value}`, part: label }, this.label)), h("form-control-help-text", { key: '18ca0f0b27657d1a159b9eb4839290969f349d7e', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e4bffdf3cd4596a3b42fb6098be620005d68296e', 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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class SelectInput {
+export class FormControlSelect {
     constructor() {
         this.isFocused = false;
         this.handleFormControlInput = (event) => {
@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '649b0ca4cb24c5a179ac01db344d53ac4481dbbd' }, h("div", { key: '1976f3076b0cd47ead27e9acc9c71bda01623e56', class: "form-group d-flex flex-column" }, h("div", { key: '1610a472997ce0d6c8bb8e3e9e43096cfa442dc3', class: "d-flex align-items-start gap-2" }, h("label", { key: 'a25d6b0d6d2b51d8e2c61afe945eb9fe3ab0e6d6', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e9a891ffdb7910ac1ac6b94e98042e87f4ae0ad1', helpText: this.helpText })), h("select", { key: 'c56535aeb6701fbcb21fc64fdf449f23f8ea8876', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '181f9882efa122d1158475b03c5d91b6a596a029' }, h("div", { key: 'ab62345c08da6d3d33fa110937c936758e065eb3', class: "form-group d-flex flex-column" }, h("div", { key: 'a4cd1468d4c57b63ee25f25cca6f42ea08b70ef4', class: "d-flex align-items-start gap-2" }, h("label", { key: 'ebb6e16b2e11a3623c3152eb8e1b51412fa4d1ae', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '5d5d414a90927659661b6a2e167056c938e9c5a7', helpText: this.helpText })), h("select", { key: '8105c889f7fdb9376848c6057ccd58b9c62841a4', 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: '441e66367708e5653b483acd6a9834da391a6a0c', 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: '061a26387560f0b8085e83e1c373a43340146469', 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

@@ -1,7 +1,7 @@
 import { Host, h, } from "@stencil/core";
 import { FormControlErrorText } from "../../ui-components";
 import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
-export class TextInput {
+export class FormControlText {
     constructor() {
         this.isFocused = false;
         this.handleFormControlInput = (event) => {
@@ -36,10 +36,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '5f8effb66b11a0569925e7160a32f043a62f8888' }, h("div", { key: 'bf4b6f85fbd183845daf41768b0c5e9e69ff2961', class: "form-group d-flex flex-column" }, h("div", { key: 'cc0b6e98179b9492602b8fbbf7a31e852af7806c', class: "d-flex align-items-start gap-2" }, h("label", { key: '42a660902f9d062bf461cf51618863fc9cbe6d96', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'b2d8dfaa3ead8544d6ff9c29b990de936ca73fbe', helpText: this.helpText })), h("input", { key: 'dd993e2c00a5ce2d08b3de5ef0b37bb35183c90b', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '4ab9e7a2c6312b568de8a8ee429ef02f3f792173' }, h("div", { key: 'e273e0bc062be883505fe3047d41a741eaf23a44', class: "form-group d-flex flex-column" }, h("div", { key: 'a7496dd4f6b5549f26752ca2de35a34c5261e439', class: "d-flex align-items-start gap-2" }, h("label", { key: '97480c49cb0fcd3c75d123c6033df4880755baf0', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'e2a53e4e15be4f9f739a79afeaf28c3671c14a4d', helpText: this.helpText })), h("input", { key: '1571553d763734454026b2c4feaa88a9535f2057', 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: '99b4246d2be3389bfc4b790f6aebfaef193942d9', 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: '44f7c7847a2255ff3ddd83f542ff6690d1aed798', 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

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { input, inputDisabled, inputFocused, inputInvalid, inputInvalidAndFocused, label } from "../../styles/parts";
-export class TextInput {
+export class FormControlTextarea {
     constructor() {
         this.isFocused = false;
         this.helpText = '';
@@ -42,10 +42,10 @@ export class TextInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '361916c679e9bead548bb19080d7365a83dfe444' }, h("div", { key: '5c562f95399854ad9855281067d90b5378b10f36', class: "form-group d-flex flex-column" }, h("label", { key: '93617701dac9c5e181bfc781336fa88341731b9b', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '342904cb39293458fb7fc2c951539e39f7eaff8b', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1e73c7219f321b73bc6001cde222b33ba79a7338' }, h("div", { key: 'dc682efd7a21e80ed1936cf69a186d3fab258de8', class: "form-group d-flex flex-column" }, h("label", { key: '526bcc6604b03b79737e4211c6d7a282cbd71979', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '4dab395c565c7180631042f99ac3b91382df4ca1', 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: 'fd9b7d6b6eab0a78d92efb06d0dcdb3c07ed69f0', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: 'e5250f3229a5b1315b5a0bcf93512fcfc52ce5a1', 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: 'dc851b2b46a3be03c65121a7e1f957f6c6d20c1b', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3f09a6b275b4218aff7588f90a3cdb0de02ae8bb', errorText: this.errorText, name: this.name }))));
     }
     static get is() { return "form-control-textarea"; }
     static get properties() {

package/dist/collection/ui-components/form/form-helpers/form-control-tooltip/form-control-tooltip.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { tooltip, tooltipIcon, tooltipInner } from "../../../../styles/parts";
-export class TooltipComponent {
+export class FormControlTooltip {
     show() {
         this.tooltip.classList.add('show');
     }

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

@@ -87,7 +87,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '05cefc92dac95360d470070c64fbc0318c666214' }, h("input", { key: '02c9a6001a394b96cbc09b6d906287b81c20e98f', 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: 'd3aa78cd75de1a781c8100c121933122c6db599b' }, h("input", { key: '7ac01ecc01ca776cd6928a3a1d1e0b2baa4b8965', 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: 'ebf24e9c73ea9a7f352dfc7368678117144745c3', class: "form-group d-flex flex-column" }, h("div", { key: 'e88393af9005c217ad3cc2504e8285629339402c', style: {
+        return (h(Host, { key: 'a3039409160cb6fd7dd2e7bf189e241f34ddeca6', class: "form-group d-flex flex-column" }, h("div", { key: 'dab356c30fedca21f6092cfbaf576e23df36b318', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: '47591ac9c82096e9bde5b5706b08c9dc8461788b', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'b39265660ede091bd365d983a702202469adab97', 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: '12354fce7a91119a17d577df02c2f627ebc10b98', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: '0469fb973476f92cd5b275b62e4a462521448273', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd91253d593d700279c0d869b34d3d4f5d572759a', 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: '2a3676ad3d25daedccaa0cb2297f505641b47497', 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: '604488d6da7e2ff87e24e3eed0a77b3a6231106e', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'e54b9c1a7ef5da3bed2eb62e25a28c91865f1f40', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

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

@@ -7,6 +7,6 @@ export * from './headers/header-2';
 export * from './headers/header-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 './details/justifi-details';
 export * from './table';
 export * from './shadow-dom-components/justifi-radio-list-item';

package/dist/collection/ui-components/internal-button.js

@@ -0,0 +1,192 @@
+import { h } from "@stencil/core";
+import { Button } from "./button";
+export class InternalButton {
+    constructor() {
+        this.variant = 'primary';
+        this.type = 'button';
+    }
+    render() {
+        return (h(Button, { key: 'b9c53e47ed16f09a34b2d28c9edc275de6f375c1', variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, class: this.class, type: this.type, disabled: this.disabled, style: this.customStyle, hidden: this.hidden }, this.text));
+    }
+    static get is() { return "internal-button"; }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading"
+            },
+            "clickHandler": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: MouseEvent) => void",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            },
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { [key: string]: string }",
+                    "resolved": "string | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden"
+            }
+        };
+    }
+}

package/dist/collection/ui-components/radio-list-item.js

@@ -0,0 +1,153 @@
+import { h, Host } from "@stencil/core";
+import { radioListItem } from "../styles/parts";
+export class RadioListItem {
+    constructor() {
+        this.checked = false;
+        this.hidden = false;
+        this.handleClick = () => {
+            this.radioClick.emit(this.value);
+        };
+    }
+    render() {
+        return (h(Host, { key: '72ed5a0699e0777e0e9fe64fcf4384ee3a6f1d1b' }, h("div", { key: '0f6565adcc8fecd970e44ee5cd06f15d21cd2feb', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '017390d5dc479fb85b3d4fa493f3aaf292bce7b5', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+    }
+    static get is() { return "radio-list-item"; }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden",
+                "defaultValue": "false"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "class"
+            }
+        };
+    }
+    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-button.js

@@ -1,13 +1,12 @@
 import { h } from "@stencil/core";
 import { StyledHost } from "../styled-host/styled-host";
-import { Button } from "../button";
 export class JustifiButton {
     constructor() {
         this.variant = 'primary';
         this.type = 'button';
     }
     render() {
-        return (h(StyledHost, { key: '5f92a2a58c0828c78818f0055dc2692857730788' }, h(Button, { key: '541fe7cc24e137cf55fc470b16f3aa8c47eee0d3', 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: 'f1ac17863df571d72e7db9b748b1980218145322' }, h("internal-button", { key: '0b7052d216fb79ed5d9f90aacff97d39dce87473', text: this.text, variant: this.variant, isLoading: this.isLoading, clickHandler: this.clickHandler, type: this.type, disabled: this.disabled, class: this.class, customStyle: this.customStyle, hidden: this.hidden })));
     }
     static get is() { return "justifi-button"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +168,25 @@ export class JustifiButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "custom-style"
+            },
+            "hidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hidden"
             }
         };
     }

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

@@ -3,7 +3,7 @@ import { StyledHost } from "../styled-host/styled-host";
 import { Header1 } from "../headers/header-1";
 import { Header2 } from "../headers/header-2";
 import { Header3 } from "../headers/header-3";
-export class Header {
+export class JustifiHeader {
     constructor() {
         this.levels = {
             h1: Header1,
@@ -14,7 +14,7 @@ export class Header {
     }
     render() {
         const HeaderComponent = this.levels[this.level];
-        return (h(StyledHost, { key: '1fc31aaf9d222d4f53e4ca546fd323389f4154c3' }, h(HeaderComponent, { key: '6bc979a358b5a93159d378db2452b57133ed3aaa', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: '879e301ec35e7cc536dec135e11daf140c67eeed' }, h(HeaderComponent, { key: '1766cb9a4d84bee1b3365b4df93515274cf31565', 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

@@ -1,16 +1,12 @@
 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: '1ae40f787970160e38b72f917bda96f480d2a890' }, h("div", { key: '2130596c8294cc38365e6126806735da0f93ef4a', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '7d5524f518430f2bfd1c9863f354318929353cfb', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+        return (h(StyledHost, { key: '02955940079320bd9c6bf94e239545385ac36458' }, h("radio-list-item", { key: 'fc6b98e456e4326b843b2b3248b7327436767cf4', name: this.name, value: this.value, label: this.label, checked: this.checked, hidden: this.hidden, class: this.class, "onRadio-click": (e) => this.radioClick.emit(e.detail) })));
     }
     static get is() { return "justifi-radio-list-item"; }
     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: 'b2bc4a92e34bdb2d1f5a1e74ce69bd75757ded6f' }, h(Skeleton, { key: '291eefa0f623d8c751a8a62f7da018bbcd3c2313', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: 'c995981caeae785829f1ef75454b2759243e8adb' }, h(Skeleton, { key: '9c63cf385499820bb1acd3503e126363485684f6', 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"; }