@justifi/webcomponents 6.5.1-rc.5 → 6.7.0

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

@@ -35,10 +35,10 @@ export class SelectInput {
     }
     render() {
         var _a;
-        return (h(Host, { key: '21cd587a6a3f6b1c508201f688e6cf3e3456166c' }, h("div", { key: '5666e007193120a6ae78d4bab4b1005c0e3f0b49', class: "form-group d-flex flex-column" }, h("div", { key: 'fba926c6cf060e64ecaf6d30afeb82e58eaf82bb', class: "d-flex align-items-start gap-2" }, h("label", { key: '4e1f65a58657e129dbdb2fb7dfa6bfc664942527', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '51cb52bc2a167ddbe48de8686e969905a7a9f865', helpText: this.helpText })), h("select", { key: '29bd66fd51ba97138828317633c9d14267efd815', ref: el => (this.selectElement = el), id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '605b6cb9bfa7bac528ee0af9c4deb5e7b1356b93' }, h("div", { key: 'f8b42609971ff02c4bc147a113bb4a025d32bcd8', class: "form-group d-flex flex-column" }, h("div", { key: '26c87da7b92edbb7fd41825a4e64b642778d0808', class: "d-flex align-items-start gap-2" }, h("label", { key: '43ad562c323b586bf7ab0260258d8678ef3194aa', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '1e4b1fa0e9bae57b6e783fb873de38c49ae7a8a4', helpText: this.helpText })), h("select", { key: 'bef2df140499a642ea9bf5bd3f6d7b558042e733', 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: '867d7ac1d9d7ec0b121135f944994565a2b18760', 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: '99abaaa766c1270cf1cfd926320d343393b13d1d', 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: 'bf68ea270c8dee6a9e572f0d2fdfc9308c8c106f' }, h("div", { key: '8e315377092c55c7c1a48c5528dba67f0d4a6f1c', class: "form-group d-flex flex-column" }, h("div", { key: 'c507734dadd643a306a22ce2e9df63a54422a7ab', class: "d-flex align-items-start gap-2" }, h("label", { key: '7e9ca4266d86bfb0e33e5951a07599a7a17c0c31', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: 'a3f1737b361144e9df92c706c6b5a1c4e1e2fc34', helpText: this.helpText })), h("input", { key: '657edb006b902ad815cd65e426d74a306328a0cb', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '559f086283d08b505d31b39e181581d30038aa6a' }, h("div", { key: '4f86bb1d540bac675f354b90ea197a5772a4c6f5', class: "form-group d-flex flex-column" }, h("div", { key: '0012abb57c9d764af117e4a7c94a46d1cf155578', class: "d-flex align-items-start gap-2" }, h("label", { key: '0af1f99196b62eb76901c4656e231fde993c5e0f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '364a0e5f3d5229012f8ab8815938d99f0d1e9e06', helpText: this.helpText })), h("input", { key: '2b068466f069282a6a5acdd0842bb0f96db6944f', 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: '1ebb690623549e319972fe5ea0221966a9982cac', 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: '602fc385905ba52c551aa73ef71e29f0ef16084e', 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: '1e41c053b809f4bda982850125e00e9897470d54' }, h("div", { key: 'c87bf55b62aea28d4eee19235c6a49ba5e14d9d7', class: "form-group d-flex flex-column" }, h("label", { key: 'be4dd8515c80b016e8d0cb88d8a50a53f570e239', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: 'da24a7b98a098a71683a79bc1a4c77da64d9f3dc', id: this.name, name: this.name, onFocus: () => this.isFocused = true, onBlur: () => {
+        return (h(Host, { key: '1fa96ad32451a814537a92abc4547d3a227ba832' }, h("div", { key: '6adc16748f0b4fc2f3d9e7eaf2d88233263b82c0', class: "form-group d-flex flex-column" }, h("label", { key: '0b18eece09db4d3dd3f9c870b1c232c7c32f6f94', part: label, class: "form-label", htmlFor: this.name }, this.label), h("textarea", { key: '411d846fa0af7a5ab5a72662b71c802f1de87a8d', 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: '6af10143701fec60501ebc5bcbff614638d3c9a9', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '3a56898b53e89041e5947d3ffcd9f827a6b925fe', 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: 'd52fad4559514075e0623c1571b33ccc4df62ead', helpText: this.helpText, name: this.name }), h("form-control-error-text", { key: '52484a4da5de1a0e5409524cdb6993dc4469d708', 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

@@ -87,7 +87,7 @@ export class HiddenInput {
         return input;
     }
     render() {
-        return (h(Host, { key: '213626f7805ac907a867ccca6fdaf02b9ea3382a' }, h("input", { key: '1f54e360af287b98c49c62687b90fd0a20251c3c', 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: '5ebb1ec479a87430d51fbdff53edcaace72e98c2' }, h("input", { key: '48ace17d93b23f5da773412390fd8187c03cd59d', 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: '0c3f4427120c3405bf47f60dd3bde638f0c3176e', class: "form-group d-flex flex-column" }, h("div", { key: '6ba2a62c8df9db7b01341ea06fbe1df25a87e604', style: {
+        return (h(Host, { key: 'b7f549db9954e772632f144d0b8fab81aa00ac48', class: "form-group d-flex flex-column" }, h("div", { key: 'c073506d6835001d515839382d5140ea074cb1c8', style: {
                 visibility: this.iframeLoaded ? 'visible' : 'hidden',
                 height: this.iframeLoaded ? 'auto' : '0',
-            } }, h("label", { key: 'cc7dfd2299382e473f6ce279c5ffe61794d56e59', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: '62406d7581a21dcdec52c993edc2a03cd8fce1ef', 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: '7c804be15e9029e003684bea21f93578269bdac7', id: this.inputId, name: this.inputId, src: `${this.iframeOrigin}?${this.urlParams}`, ref: el => {
+            } }, h("label", { key: 'a80095abc7580bf8f4704239a27d0d819df48800', class: "form-label", htmlFor: "", part: label }, this.label || ''), h("div", { key: 'd3c5647e79ae3f2fc68cd3b0395c18416ef848fe', 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: '66ad8a684dcc1397fe11ac2e1c7429ce88ec1166', 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: '2cb6be114be8cea65d880b6c21eacdf46052468c', errorText: this.errorText, name: this.inputId }))));
+            } })), h(FormControlErrorText, { key: 'bca0e095f13b229ad73a309e9c39b4a42104e303', errorText: this.errorText, name: this.inputId }))));
     }
     static get is() { return "iframe-input"; }
     static get properties() {

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

@@ -0,0 +1,251 @@
+import { h } from "@stencil/core";
+import { GooglePayButtonType, GooglePayButtonStyle, GooglePayButtonSizeMode } from "../api/GooglePay";
+const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
+export const GooglePayButton = (props) => {
+    const getGooglePayButtonClass = () => {
+        let classes = "google-pay-button";
+        // Button style
+        switch (props.buttonStyle) {
+            case GooglePayButtonStyle.WHITE:
+                classes += " google-pay-button-white";
+                break;
+            case GooglePayButtonStyle.BLACK:
+            default:
+                classes += " google-pay-button-black";
+                break;
+        }
+        // Button type
+        switch (props.buttonType) {
+            case GooglePayButtonType.BUY:
+                classes += " google-pay-button-type-buy";
+                break;
+            case GooglePayButtonType.BOOK:
+                classes += " google-pay-button-type-book";
+                break;
+            case GooglePayButtonType.CHECKOUT:
+                classes += " google-pay-button-type-checkout";
+                break;
+            case GooglePayButtonType.DONATE:
+                classes += " google-pay-button-type-donate";
+                break;
+            case GooglePayButtonType.ORDER:
+                classes += " google-pay-button-type-order";
+                break;
+            case GooglePayButtonType.PAY:
+                classes += " google-pay-button-type-pay";
+                break;
+            case GooglePayButtonType.SUBSCRIBE:
+                classes += " google-pay-button-type-subscribe";
+                break;
+            case GooglePayButtonType.PLAIN:
+            default:
+                classes += " google-pay-button-type-plain";
+                break;
+        }
+        // Size mode
+        switch (props.buttonSizeMode) {
+            case GooglePayButtonSizeMode.FILL:
+                classes += " google-pay-button-fill";
+                break;
+            case GooglePayButtonSizeMode.STATIC:
+            default:
+                classes += " google-pay-button-static";
+                break;
+        }
+        if (props.disabled || props.isProcessing || !props.isAvailable) {
+            classes += " disabled";
+        }
+        return classes;
+    };
+    const getButtonStyles = () => {
+        const styles = {};
+        if (props.buttonSizeMode === GooglePayButtonSizeMode.FILL) {
+            styles.width = '100%';
+            styles.minWidth = '200px';
+        }
+        else {
+            styles.width = props.width || '200px';
+        }
+        styles.height = props.height || '48px';
+        return styles;
+    };
+    const handleClick = () => {
+        if (!props.disabled &&
+            !props.isProcessing &&
+            props.isAvailable &&
+            props.clickHandler) {
+            props.clickHandler();
+        }
+    };
+    return (h("div", { class: "google-pay-button-container" }, h("button", Object.assign({ class: getGooglePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": "Google Pay", type: "button" }, props), props.isProcessing && ProcessingSpinner(), h("div", { class: 'google-pay-button-content' }, h("svg", { width: "41", height: "17", xmlns: "http://www.w3.org/2000/svg" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M19.526 2.635v4.083h2.518c.6 0 1.096-.202 1.488-.605.403-.402.605-.882.605-1.437 0-.544-.202-1.018-.605-1.422-.392-.413-.888-.62-1.488-.62h-2.518zm0 5.52v4.736h-1.504V1.198h3.99c1.013 0 1.873.337 2.582 1.012.72.675 1.08 1.497 1.08 2.466 0 .991-.36 1.819-1.08 2.482-.697.665-1.559.996-2.583.996h-2.485v.001zm7.668 2.287c0 .392.166.718.499.98.332.26.722.391 1.168.391.633 0 1.196-.234 1.692-.701.497-.469.744-1.019.744-1.65-.469-.37-1.123-.555-1.962-.555-.61 0-1.12.148-1.528.442-.409.294-.613.657-.613 1.093m1.946-5.815c1.112 0 1.989.297 2.633.89.642.594.964 1.408.964 2.442v4.932h-1.439v-1.11h-.065c-.622.914-1.45 1.372-2.486 1.372-.882 0-1.621-.262-2.215-.784-.594-.523-.891-1.176-.891-1.96 0-.828.313-1.486.94-1.976s1.463-.735 2.51-.735c.892 0 1.629.163 2.206.49v-.344c0-.522-.207-.966-.621-1.33a2.132 2.132 0 0 0-1.455-.547c-.84 0-1.504.353-1.995 1.062l-1.324-.834c.73-1.045 1.81-1.568 3.238-1.568m11.853.262l-5.02 11.53H34.42l1.864-4.034-3.302-7.496h1.635l2.387 5.749h.032l2.322-5.75z", fill: "#FFF" }), h("path", { d: "M13.448 7.134c0-.473-.04-.93-.116-1.366H6.988v2.588h3.634a3.11 3.11 0 0 1-1.344 2.042v1.68h2.169c1.27-1.17 2.001-2.9 2.001-4.944", fill: "#4285F4" }), h("path", { d: "M6.988 13.7c1.816 0 3.344-.595 4.459-1.621l-2.169-1.681c-.603.406-1.38.643-2.29.643-1.754 0-3.244-1.182-3.776-2.774H.978v1.731a6.728 6.728 0 0 0 6.01 3.703", fill: "#34A853" }), h("path", { d: "M3.212 8.267a4.034 4.034 0 0 1 0-2.572V3.964H.978A6.678 6.678 0 0 0 .261 6.98c0 1.085.26 2.11.717 3.017l2.234-1.731z", fill: "#FABB05" }), h("path", { d: "M6.988 2.921c.992 0 1.88.34 2.58 1.008v.001l1.92-1.918C10.324.928 8.804.262 6.989.262a6.728 6.728 0 0 0-6.01 3.702l2.234 1.731c.532-1.592 2.022-2.774 3.776-2.774", fill: "#E94235" }))))), h("style", null, `
+          .google-pay-button-container {
+            display: block;
+            position: relative;
+          }
+
+          .google-pay-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            letter-spacing: 0.25px;
+            line-height: 16px;
+            outline: none;
+            padding: 0 20px;
+            position: relative;
+            min-width: 140px;
+            min-height: 48px;
+          }
+
+          /* Button styles */
+          .google-pay-button.google-pay-button-black {
+            background-color: #000;
+            color: #fff;
+          }
+
+          .google-pay-button.google-pay-button-white {
+            background-color: #fff;
+            color: #3c4043;
+          }
+
+          /* Button content */
+          .google-pay-button-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            white-space: nowrap;
+          }
+
+          .google-g-logo {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+          }
+
+          .pay-text {
+            font-family: 'Google Sans', arial, sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            margin-left: 8px;
+          }
+
+          /* Button types - text content handled by ::before pseudo-element */
+          .google-pay-button-type-buy .google-pay-button-content::before {
+            content: 'Buy with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-book .google-pay-button-content::before {
+            content: 'Book with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-checkout .google-pay-button-content::before {
+            content: 'Checkout with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-donate .google-pay-button-content::before {
+            content: 'Donate with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-order .google-pay-button-content::before {
+            content: 'Order with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-pay .google-pay-button-content::before {
+            content: 'Pay with';
+            margin-right: 8px;
+          }
+
+          .google-pay-button-type-subscribe .google-pay-button-content::before {
+            content: 'Subscribe with';
+            margin-right: 8px;
+          }
+
+          /* Size modes */
+          .google-pay-button.google-pay-button-fill {
+            width: 100%;
+            min-width: 200px;
+          }
+
+          .google-pay-button.google-pay-button-static {
+            width: auto;
+          }
+
+          /* Hover and focus states */
+          .google-pay-button:hover:not(.disabled) {
+            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
+          }
+
+          .google-pay-button:focus:not(.disabled) {
+            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
+          }
+
+          .google-pay-button:active:not(.disabled) {
+            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
+            transform: translateY(1px);
+          }
+
+          /* Disabled state */
+          .google-pay-button.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            box-shadow: none;
+          }
+
+          .google-pay-button.disabled:hover,
+          .google-pay-button.disabled:focus,
+          .google-pay-button.disabled:active {
+            box-shadow: none;
+            transform: none;
+          }
+
+          /* 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: 4px;
+            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) {
+            .google-pay-button {
+              width: 100% !important;
+              min-width: 200px;
+            }
+          }
+        `)));
+};

package/dist/collection/ui-components/pagination-menu/pagination-menu.js

@@ -7,13 +7,13 @@ export class PaginationMenu {
         this.params = {};
     }
     render() {
-        return (h(Host, { key: '67ec7328221f28064498ebc359ec2100b33df423' }, h("nav", { key: '503d4f3c3e236797a1ef6309edb00d8d0c2be345', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '9573011f1775928268a0b0932890a6c25050e3fe', class: "pagination m-0" }, h("li", { key: '0247aa3068849046f8282124e7e168c381fd6340', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: '5608ce502116c96e9400fdfeb0cfb4e64bc25a55', class: "page-link", onClick: (e) => {
+        return (h(Host, { key: '7b821154b627026ef8624af6e4759e2176004676' }, h("nav", { key: '7990aee285d0cc3e6f83cb59bb216439e5364df5', "aria-label": "Table pagination", class: "d-flex justify-content-end gap-3" }, h("ul", { key: '02c68163934ce1aabf4abd607cc28e549e20ebe1', class: "pagination m-0" }, h("li", { key: 'aab661ae85fc61eecd230d058f135483796769c0', class: `page-item ${this.paging.has_previous ? '' : ' disabled'}` }, h("button", { key: 'ef42a41831a9890186c333418b161877761674e1', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickPrevious(this.paging.start_cursor);
-            }, part: this.paging.has_previous ? paginationButton : paginationButtonDisabled }, h("span", { key: '7c08295d1c5edd4950bb577272a8745e3cd3d692', class: "me-1", part: paginationButtonIconPrevious }, "\u00AB"), h("span", { key: 'cd766ba6a6e6c31509442537a4f8345f2cd16251', part: paginationButtonText }, "Previous"))), h("li", { key: '54c810056bc6d74be7245a47f54c8d4b75068feb', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: '5ff8d8621accf87017980b527823640061b27c18', class: "page-link", onClick: (e) => {
+            }, part: this.paging.has_previous ? paginationButton : paginationButtonDisabled }, h("span", { key: 'a898a92687e4a5fec37d9dab4208430260a9f274', class: "me-1", part: paginationButtonIconPrevious }, "\u00AB"), h("span", { key: 'ecc2eeedc064d405ad178b9a98ed088e12f1b2fb', part: paginationButtonText }, "Previous"))), h("li", { key: '56569cd9f9803ead8b1180e2f982a98d7009be1f', class: `page-item ${this.paging.has_next ? '' : ' disabled'}` }, h("button", { key: 'c39d389ab89609e8ce11b3dd81eb5c4a50d3521f', class: "page-link", onClick: (e) => {
                 e.preventDefault();
                 this.paging.handleClickNext(this.paging.end_cursor);
-            }, part: this.paging.has_next ? paginationButton : paginationButtonDisabled }, h("span", { key: '2dc934a96eb1be000eb7e016507ddc926c68db2a', part: paginationButtonText }, "Next"), h("span", { key: '4e7cbcbfd2e29969f2019eacde0a24d07a72cbb3', class: "ms-1", part: paginationButtonIconNext }, "\u00BB")))))));
+            }, part: this.paging.has_next ? paginationButton : paginationButtonDisabled }, h("span", { key: '6a01458a048a524931b03df6a964fa4a0ac403ac', part: paginationButtonText }, "Next"), h("span", { key: 'f4cb3d084647c00dff30b99f751180564463443f', class: "ms-1", part: paginationButtonIconNext }, "\u00BB")))))));
     }
     static get is() { return "pagination-menu"; }
     static get properties() {

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: 'e3b353dac8bf4c078fed17a4854c6ee1891df140' }, h(Button, { key: '76bfcc8763775a3442fe7f8c307400c1fa829da0', 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: '7c8b76c4eaa412f2dc2ba59fd56cb7c28f46656c' }, h(Button, { key: '9440f90ebb380703b35b6c5d811e5d0780e80fd2', 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: 'd4871da09451d40b27220a207ee72317ed9b1b9f' }, h(HeaderComponent, { key: 'f7de159fa6395ef4024f48b868369f8d10edf64e', text: this.text, class: this.class })));
+        return (h(StyledHost, { key: 'e448c85b2268df923662a0ff71bf4d178dcfc910' }, h(HeaderComponent, { key: 'c76766a1ab006ea4b5eb7e0ad8a6b294d52283a0', 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

@@ -10,7 +10,7 @@ export class JustifiRadioListItem {
         };
     }
     render() {
-        return (h(StyledHost, { key: 'b0501b66bcfdd697d88c01835b8f97fb2c0861ab' }, h("div", { key: 'ada4dda7868086b1ea4cadd6c8824f87d3cb2301', class: `radio-list-item p-3 ${this.class || ''}`, part: radioListItem, onClick: this.handleClick, hidden: this.hidden }, h("form-control-radio", { key: '72c6d07dd2a664ca6bd2be9b446584d7344bc2b0', name: this.name, value: this.value, checked: this.checked, label: this.label, inputHandler: () => null }))));
+        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 }))));
     }
     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: '79c2def38d099c6c146b89b6d33f8b1ca403bace' }, h(Skeleton, { key: 'd73576f82a88f9282caebaeb66cf4c444e8318a6', component: this.component, height: this.height, width: this.width, className: this.class, styles: this.customStyle })));
+        return (h(StyledHost, { key: '2bb7c8b02477b880d0ebefebe37e62573b2a68d3' }, h(Skeleton, { key: '067e503b0e6047b9f14603336cba0112247c2a54', 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"; }