rebill-web-components-sdk 1.10.0 → 1.10.2-beta.0

package/dist/cjs/card-fields-wrapper_11.cjs.entry.js

@@ -22,9 +22,9 @@ const CardFieldsWrapper = class {
     showDocument;
     customCSS;
     render() {
-        return (index.h("div", { key: '475cc2c6587cc8be54bd57a0c1d7e671aa8edb9c', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, index.h("card-iframe", { key: '3480c89afadb9ba070b0c79a1ccd044d0a0c9862', customCSS: this.customCSS }), !renewal_store.renewalState.isInitialized &&
+        return (index.h("div", { key: 'd2d13c8b43ac83c032a20a27cd26a35a27478270', style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, index.h("card-iframe", { key: '88bedb4599965f2e811d21a015c503e468a421cd', customCSS: this.customCSS }), !renewal_store.renewalState.isInitialized &&
             i18n_service.state.data?.itemInformation?.type !== i18n_service.SESSION_ITEM_TYPE_ENUM.PLAN &&
-            i18n_service.state.data.cardInformation?.installments?.installments.length > 0 && (index.h("rebill-installments", { key: 'd91afd60efd4ad18762339569dbeea4573aa2235', error: this.installmentsError })), this.showDocument && (index.h("card-identification", { key: '4ea5405c165c38dab857f64427624d98b307a08e', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
+            i18n_service.state.data.cardInformation?.installments?.installments.length > 0 && (index.h("rebill-installments", { key: 'e5e2f139eb7b0e857d48b7e8ae20b1deba4e4bf3', error: this.installmentsError })), this.showDocument && (index.h("card-identification", { key: '150f5355fe805e3ec12aa91f322a2096a43ee9ca', documentTypeError: this.documentTypeError, documentNumberError: this.documentNumberError }))));
     }
 };
 
@@ -89,7 +89,7 @@ const Identification = class {
             label: documentType.value,
             value: documentType.value,
         }));
-        return (index.h(index.h.Fragment, null, index.h("rebill-input-combo", { key: '23210f89a5683feb3b8ac77eacc1515940ce7a9d', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": i18n_service.I18nService.translate('document.typePlaceholder'), "input-placeholder": i18n_service.I18nService.translate('document.numberPlaceholder'), error: i18n_service.I18nService.translate(error), options: options, disabled: this.disabled })));
+        return (index.h(index.h.Fragment, null, index.h("rebill-input-combo", { key: '3a995ac7c50c2b36c0827ab9d9696b3682160311', "select-id": "documentType", "input-id": "documentNumber", "on-input": this.handleInputChange, "select-placeholder": i18n_service.I18nService.translate('document.typePlaceholder'), "input-placeholder": i18n_service.I18nService.translate('document.numberPlaceholder'), error: i18n_service.I18nService.translate(error), options: options, disabled: this.disabled })));
     }
 };
 
@@ -428,12 +428,12 @@ const CardIframe = class {
         }
     };
     render() {
-        return (index.h("div", { key: '6acb3fa64fcb457467278d8a051839b47525c330', style: {
+        return (index.h("div", { key: 'bbc86deffbe89ea5d34d8373eecc4d2c91a68730', style: {
                 width: '100%',
                 height: this.iframeHeight,
                 position: 'relative',
                 overflow: 'hidden',
-            } }, !this.iframeLoaded && index.h("card-skeleton", { key: '908424a0b5430e758592f3a03095ac18b5a82656' }), index.h("iframe", { key: '231b2bb1f1d1b2f8c9c6c70d191a61d2fb48c207', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
+            } }, !this.iframeLoaded && index.h("card-skeleton", { key: '8c2505c2a2411374c3af667e779f28dd62dc8ebe' }), index.h("iframe", { key: '6f7ae6cf9d4899370b88cb61521bb622b87d9e0f', ref: el => (this.iframeRef = el), src: this.getIframeURL(), style: {
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -449,7 +449,7 @@ const CardSkeleton = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '8d4ebddb59892f6dbb090290f96f1775b06ca146', class: "iframe-skeleton" }, index.h("div", { key: '143f20cdfa98fd72eaf1423074b9427329f91bb8', class: "input-skeleton" }), index.h("div", { key: '62ce9251b51d34382f4c9e0882d5c67139b72456', class: "input-skeleton" })));
+        return (index.h("div", { key: '65268605af4713cf31ea230eb2ca28372b462ae9', class: "iframe-skeleton" }, index.h("div", { key: '703a201ac037d042b1ab8a4727c17b8ab85cdedc', class: "input-skeleton" }), index.h("div", { key: 'f2dbb0d69cf6b4fa7f5b51c7db8ab5b0da0ea32d', class: "input-skeleton" })));
     }
 };
 CardSkeleton.style = cardSkeletonCss;
@@ -567,7 +567,7 @@ const AddressSearch = class {
     render() {
         const translationKey = this.addressType === 'shipping' ? 'shippingAddress' : 'billingAddress';
         const defaultPlaceholder = i18n_service.I18nService.translate(`${translationKey}.searchPlaceholder`, 'Search for an address...');
-        return (index.h("div", { key: 'c7f82d72fe615ec760772d6582cc8a329da5c326', class: "address-search-container" }, index.h("div", { key: '1bd8ac5573f891417404b552f115424f6c3a7952', class: "search-input-container" }, index.h("rebill-input-text", { key: '8de72cde444078c7d167b0a0801234465fce36a4', id: `${this.addressType}-search`, placeholder: this.placeholder || defaultPlaceholder, rightIcon: "search", error: this.error, disabled: this.disabled })), index.h("div", { key: 'e4f38485af0f0b8b36e9943b88d63b0ba2f2a2f5', class: "manual-entry-link-wrapper" }, index.h("button", { key: '34ba9048cdada210831696a0fc426558ad681e29', class: "manual-entry-link", type: "button", onClick: this.handleManualEntry }, index.h("rebill-typography", { key: '5ea7147ed9819709df105854e0fb8260ddee5385', variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.SECONDARY, class: "footer-link" }, i18n_service.I18nService.translate(`${translationKey}.manualEntry`, 'Enter address manually'))))));
+        return (index.h("rebill-autofill-detector", { key: '6e868d1df24e7ceab339251fdf3ab18567135aa9', "target-selector": "rebill-input-text input", disabled: this.disabled, onAutofillDetected: event => this.handleAddressSelected(event.detail), onManualEntryRequested: () => this.handleManualEntry() }, index.h("div", { key: 'a68479f95b6647d508aa61c04e6d5d5009c0abd5', class: "address-search-container" }, index.h("div", { key: 'e7d6f84d7204bea78ac39a3b53629f8f2806d07d', class: "search-input-container" }, index.h("rebill-input-text", { key: '89be99ce24152f41f5405fa6b7046561588e6a8e', id: `${this.addressType}-search`, placeholder: this.placeholder || defaultPlaceholder, rightIcon: "search", error: this.error, disabled: this.disabled })), index.h("div", { key: 'ae9941a5c30dfe90b5f92fe1e0f181f271337709', class: "manual-entry-link-wrapper" }, index.h("button", { key: '7e6a9e0be749f0e8984bbea12a84da45eb5bfeb4', class: "manual-entry-link", type: "button", onClick: this.handleManualEntry }, index.h("rebill-typography", { key: 'eab5f811cb4cd6e55ba8eca9eb60779bd31d23c6', variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.SECONDARY, class: "footer-link" }, i18n_service.I18nService.translate(`${translationKey}.manualEntry`, 'Enter address manually')))))));
     }
 };
 AddressSearch.style = addressSearchCss;
@@ -747,7 +747,7 @@ const InputCombo = class {
     render() {
         const selectedLabel = this.getSelectedOptionLabel();
         const hasSelectValue = this.selectValue !== '';
-        return (index.h("div", { key: '76d665b8d7084bd43ad0e8efba2ce0c803f2ffad', class: "input-container" }, this.label && (index.h("label", { key: 'b3f2d0ea454e28f3d417cabf4282fdc958109dd1', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '4c722e4b7d921731475600c5871f254f5f21e3f0', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, index.h("div", { key: '536207f7b4f917ad5472319372e14a9591f4f4ec', class: "select-section", style: { width: this.selectWidth } }, index.h("div", { key: 'e82c3cfcd8589c17332d5d8cbe1c4c5bc160504f', ref: el => (this.triggerRef = el), class: `input-combo-select select-combo-trigger ${!hasSelectValue ? 'placeholder' : ''}`, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown, onBlur: this.onSelectBlur, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox" }, index.h("span", { key: '1943bdb40417ea83aa130c173c8ee9612722ce82', class: "select-value" }, selectedLabel), index.h("div", { key: '8101e632958671447c4829b791f41ca8f173707f', class: "icon-wrapper" }, index.h("rebill-icon", { key: '7b2b4b7a686ccccc3e7e83af3ef0ed58b13e9bf7', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (index.h("div", { key: '2bdda1fad8959edf6cd4796cb4c299896f59c82a', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index$1) => (index.h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index$1 ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), index.h("div", { key: '37752672fa87246cb7368334f270a08b2a8f1bd4', class: "combo-divider" }), index.h("div", { key: '799d97a7cbf720bb71adae47263218d0016526d8', class: "input-section" }, index.h("input", { key: 'fba362451d476d98924720b8f3df5d9dda0a37c6', type: "text", class: "input-combo-element combo-input", placeholder: this.inputPlaceholder, value: this.inputValue, onInput: this.onInputChange, onBlur: this.onInputBlur, disabled: this.disabled }))), this.error && index.h("span", { key: 'cff9831e3fd979f35a031bcdf83441257072f8a1', class: "error-message" }, this.error)));
+        return (index.h("div", { key: '0360567ad633891e99e66919cd438a47e699f695', class: "input-container" }, this.label && (index.h("label", { key: '1bc2c3011814027332eba0b08b91ef1c9911c6aa', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '027f513328a30719c0ebc69e3d53d6fb4fc510f6', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, index.h("div", { key: '620f17945e07b215252a5ebc5f6ed27b314ae34b', class: "select-section", style: { width: this.selectWidth } }, index.h("div", { key: 'cd0c22bcef863c8bd5f90662226347650c7ac7e8', ref: el => (this.triggerRef = el), class: `input-combo-select select-combo-trigger ${!hasSelectValue ? 'placeholder' : ''}`, onClick: this.toggleDropdown, onKeyDown: this.handleKeyDown, onBlur: this.onSelectBlur, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox" }, index.h("span", { key: '21e26bb4dffe66836580fb3b76f9b4f8273c0cee', class: "select-value" }, selectedLabel), index.h("div", { key: 'b145278bcbea29ab2eb337b573983673532041fe', class: "icon-wrapper" }, index.h("rebill-icon", { key: '56ae1b4873155c427c04e05c10ea8524d3478f10', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (index.h("div", { key: 'fe74110079d0a3e5f7d59977a002e303fb2ee662', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index$1) => (index.h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index$1 ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), index.h("div", { key: '7abccdd32f6c6ccbb2b6118f00ce9e25eccce127', class: "combo-divider" }), index.h("div", { key: 'ed775e735b692adb7340217da21cce1e58313db0', class: "input-section" }, index.h("input", { key: 'c8207be47f190354bbfeb2a9df1787db4db4ec77', type: "text", class: "input-combo-element combo-input", placeholder: this.inputPlaceholder, value: this.inputValue, onInput: this.onInputChange, onBlur: this.onInputBlur, disabled: this.disabled }))), this.error && index.h("span", { key: 'd0710be8bc27af2175fd3e9fe347f865c12db1df', class: "error-message" }, this.error)));
     }
 };
 InputCombo.style = inputComboCss;
@@ -4102,10 +4102,10 @@ const InputPhone = class {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedError || translatedValidationError;
-        return (index.h("div", { key: '8fba6feb4478949879c456ff3577e2ad1f367b44', class: "input-container" }, index.h("div", { key: 'e8a28230fe4037b279a8d4384373fb8ebf53878d', class: inputClasses }, index.h("div", { key: 'bcedaa12b504a099bd964210ca53009c57786e30', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index.h("span", { key: '440a00bad94b4780654dfa64f82b80d461a5cbca', class: "flag" }, this.selectedCountry.flag), index.h("span", { key: '6f046256e37dc9f965111827aff45c091c29a9f5', class: "dial-code" }, this.selectedCountry.dialCode), index.h("span", { key: 'fd69d4bd8659db7aea9d8d00070bed1f57dd0521', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index.h("div", { key: '1165d6036ea97e1d43a72a0b77f79e0742cd154c', class: "country-dropdown" }, this.searchable && (index.h("div", { key: 'ec3c210898d9253a4ba8dbc20f9464f3c6a4936a', class: "search-container", onClick: this.handleSearchClick }, index.h("div", { key: 'ef27972eaecf64965aae24bda863fcd224684a82', class: "search-input-wrapper" }, index.h("rebill-icon", { key: '3bfc22a42421239512da7bbe17afd4f07177b4ae', name: "search", size: "16px", class: "search-icon" }), index.h("input", { key: '9dab2af68352698c0267f49c501c282b6fe2dcf5', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index.h("button", { key: '42fab62bc8ebe1dc9e4b65d4466be292da37797c', type: "button", class: "clear-search", onClick: event => {
+        return (index.h("div", { key: '9bfb1a075b9ea338d062f260ca89e3036ad489ae', class: "input-container" }, index.h("div", { key: '60af8d6684ef5c3b576de699ba522ec0d8147bf0', class: inputClasses }, index.h("div", { key: 'f48255f3bb5fdea49bd3a6d8617939f89e111465', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, index.h("span", { key: 'c824bbb3c4c14ad31f45aaf5414b4000f3364a18', class: "flag" }, this.selectedCountry.flag), index.h("span", { key: '0a1f614c791c4bd3490fb9b259d7aba5fb179210', class: "dial-code" }, this.selectedCountry.dialCode), index.h("span", { key: 'f9eb3ac4c2675afc7445dcfbc0cf0f0a70c8e721', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (index.h("div", { key: 'e0ef26d1fa03ccadf93955f4775f7e965f2e8988', class: "country-dropdown" }, this.searchable && (index.h("div", { key: '18bb6464cd28a58137cedbf62c5487f43daf62a8', class: "search-container", onClick: this.handleSearchClick }, index.h("div", { key: '844c66e1899ba58ce199fcb7f76a056629c8a887', class: "search-input-wrapper" }, index.h("rebill-icon", { key: '35d725f71c63307f2f62a528919723469c4584b7', name: "search", size: "16px", class: "search-icon" }), index.h("input", { key: '9b0abbc8b57424841a611dc76892979b7ae29955', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (index.h("button", { key: 'c9426b67a6121cfa453d43ffe1ca83a257303f86', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, index.h("rebill-icon", { key: '729810b758d580a3d8e97466167372f2f38ac1cd', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index.h("span", { class: "flag" }, country.flag), index.h("span", { class: "country-name" }, country.name), index.h("span", { class: "dial-code" }, country.dialCode))))) : (index.h("div", { class: "no-results" }, "No se encontraron resultados")))), index.h("input", { key: '670c71606ecd9dee94027283e89d04aac41450cd', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index.h("span", { key: '5654b0719202e22091eb4b247361d05a880a6096', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, index.h("rebill-icon", { key: '0c6c770adc4587627336ad73d5740931d2fc35d7', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (index.h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, index.h("span", { class: "flag" }, country.flag), index.h("span", { class: "country-name" }, country.name), index.h("span", { class: "dial-code" }, country.dialCode))))) : (index.h("div", { class: "no-results" }, "No se encontraron resultados")))), index.h("input", { key: '7a1a13857f138578f13a8c3430f1f41afc115d96', id: this.phoneNumberId, type: "tel", class: "input-combo-element phone-number-input", placeholder: this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onPhoneBlurPhone, disabled: this.disabled, required: this.required })), displayError && index.h("span", { key: 'cb53860dcc25c54579ac45c7a785bb3e540b3c3a', class: "error-message" }, displayError)));
     }
 };
 InputPhone.style = inputPhoneCss;
@@ -4151,11 +4151,11 @@ const Installments = class {
         });
     }
     render() {
-        return (index.h("div", { key: '2f60849281be2e756c126b23cd7b261711e35c56' }, index.h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: i18n_service.state.data.cardInformation?.installments?.installments.map(installment => ({
+        return (index.h("div", { key: '4af075549b78b088506e275cb19a75967a9ae39f' }, index.h("rebill-input-select", { key: this.isDisabled.toString(), id: "installments", variant: "outlined", value: this.value, options: i18n_service.state.data.cardInformation?.installments?.installments.map(installment => ({
                 label: installmentUtils.getInstallmentLabel(installment.installment, installmentUtils.getRecalculatedInstallmentAmount(installment.installmentAmount), i18n_service.state.data.pricing?.currency, installment.cft, installment.model),
                 value: installment?.installment?.toString(),
             })) || [], loading: i18n_service.state.data.fetchingInstallments, placeholder: this.placeholder, disabled: this.isDisabled, "on-input": this.handleInstallments, error: i18n_service.I18nService.translate(this.error) }), i18n_service.state.data.cardInformation?.installments?.installments.find(installment => installment.installment ===
-            i18n_service.state.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === installmentUtils.ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (index.h("rebill-typography", { key: '552a970b2345f074bcb83f9a53ec4b04cf202c6e', variant: "italic", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('installments.interest')))));
+            i18n_service.state.data.cardInformation?.installments?.selectedInstallment?.installment)?.model === installmentUtils.ENUM_INSTALLMENT_MODEL.CUSTOMER_FINANCED && (index.h("rebill-typography", { key: '812dd9796b719b349ed1a07ad4619a3d619f2ba8', variant: "italic", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('installments.interest')))));
     }
 };
 Installments.style = installmentsCss;
@@ -4183,11 +4183,11 @@ const SelectableCard = class {
         this.selectableCardClick.emit(this.cardKey);
     };
     render() {
-        return (index.h("button", { key: '54c5c782b61f73ccab3cb91c9f8a837164ac9bbf', class: {
+        return (index.h("button", { key: '830e58480bd4401421d6a57d77af966c239ac53d', class: {
                 'selectable-card': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, index.h("div", { key: 'cd3a71d5da02c5ffdd9bc9e415a431c6eaeb9cfb', class: "icon" }, index.h("slot", { key: 'cfce89a71121f48f47a4f73068282b8c14db7231', name: "icon" })), index.h("span", { key: '3f794ba596c47e5a76ba93ba6a3e63d6a2981415', class: "label" }, this.label)));
+            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, index.h("div", { key: 'b52f528220696700ecd242fe4f5029d5af5d35f7', class: "icon" }, index.h("slot", { key: '95ba35f60e9a98e4ea079c6fd6fb502f06ba0c81', name: "icon" })), index.h("span", { key: '0e84ff76e0a944476a96afe1c3eb33fa55f104b5', class: "label" }, this.label)));
     }
 };
 SelectableCard.style = selectableCardCss;
@@ -4203,9 +4203,9 @@ const SinglePaymentMethod = class {
     paymentMethodDetails;
     icons = [];
     render() {
-        return (index.h("div", { key: '2d233264d6381f700745152929e89011878a0bde', class: "single-payment-method" }, index.h("div", { key: '957b8c7d7532135f2d4811730fae134a6cdd4efb', class: "payment-method" }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD && index.h("rebill-icon", { key: 'fb6cc4457081579a56fbabcfe6e0a67fa6d617be', name: "card" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CASH && (index.h("rebill-icon", { key: '5518baf52b69cf8e6203dab3db694683b4a50e4a', name: "cash" })), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry === 'AR' && index.h("rebill-icon", { key: 'dd3ee71a4b4bd945056b066750101afd7acc3cbd', name: "qr-code" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry !== 'AR' && index.h("rebill-icon", { key: '8576429beb78cb089ff4ad5874b04d788872ea8c', name: "bank" }), index.h("rebill-typography", { key: '641dcc8aa10c1932c7d25ea09408265129cd98ba', variant: "body2-small", color: colorClassMapper.COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD
+        return (index.h("div", { key: '805c192db74578fdb9b3dc5e834420c1a927d108', class: "single-payment-method" }, index.h("div", { key: 'cffba26f380d3dafbe11b713434d698f16490dda', class: "payment-method" }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD && index.h("rebill-icon", { key: 'b907c16e54c735162efc004f6ddd604c48e38d45', name: "card" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CASH && (index.h("rebill-icon", { key: '745c9f1314c7bb1354f3472f0680f9288826f579', name: "cash" })), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry === 'AR' && index.h("rebill-icon", { key: '8ea9522422daac6d79868a2a213e565e32e1f56f', name: "qr-code" }), this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry !== 'AR' && index.h("rebill-icon", { key: 'b1436ff24cce03b01880dfa4c35e3b4ca64626f6', name: "bank" }), index.h("rebill-typography", { key: '2821b70236c18cacd349d31284ab9df867702830', variant: "body2-small", color: colorClassMapper.COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CARD
             ? i18n_service.I18nService.translate('paymentMethods.cardDescription')
             : this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
                 this.currencyCountry === 'AR'
@@ -4215,7 +4215,7 @@ const SinglePaymentMethod = class {
                     ? getPaymentMethodDisplayName.getPaymentMethodDisplayName(i18n_service.PAYMENT_METHOD_ENUM.CASH, this.currencyCountry) ||
                         i18n_service.I18nService.translate('paymentMethods.cash')
                     : i18n_service.I18nService.translate(`paymentMethods.${this.paymentMethod}`))), (this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.BANK_TRANSFER ||
-            this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CASH) && (index.h("div", { key: '179d9b6da12cdde78a2b2099dd240d4abf3f9afd', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => index.h("rebill-icon", { name: iconName, key: iconName }))) : (index.h("rebill-icon", { name: "card" }))))));
+            this.paymentMethod === i18n_service.PAYMENT_METHOD_ENUM.CASH) && (index.h("div", { key: 'd4a25a2dcc60a2d1937807d0f9042ab0958fc7ac', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => index.h("rebill-icon", { name: iconName, key: iconName }))) : (index.h("rebill-icon", { name: "card" }))))));
     }
 };
 SinglePaymentMethod.style = singlePaymentMethodCss;

package/dist/cjs/change-card-success.cjs.entry.js

@@ -14,6 +14,8 @@ const ChangeCardSuccess = class {
     cardBrand;
     paymentDate;
     customerEmail;
+    currentLocale = i18n_service.state.currentLocale;
+    unsubscribeCurrentLocaleStore;
     getPaymentMethodLabel() {
         const label = this.cardBrand ||
             renewal_store.renewalState.data.cardInformation?.brand ||
@@ -24,8 +26,20 @@ const ChangeCardSuccess = class {
     getCardBrand() {
         return this.cardBrand || renewal_store.renewalState.data.cardInformation?.brand || '';
     }
+    componentWillLoad() {
+        // Listen for language changes
+        this.unsubscribeCurrentLocaleStore = i18n_service.SessionStore.onChange('currentLocale', () => {
+            this.currentLocale = i18n_service.state.currentLocale;
+        });
+    }
+    disconnectedCallback() {
+        // Clean up language change subscription
+        if (this.unsubscribeCurrentLocaleStore) {
+            this.unsubscribeCurrentLocaleStore();
+        }
+    }
     render() {
-        return (index.h("rebill-checkout-single-column", { key: '82eacf8641559106964b2699e2f01ce97af0ccd9' }, index.h("div", { key: 'eaf15c6999049dbfb9398f00f1ac5b737c6ac919', class: "success-page__success-content" }, index.h("rebill-typography", { key: 'b30dd2a5d7fbb058b126a4c6a18fab6cb4ec960e', variant: "h3", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, i18n_service.I18nService.translate('changeCard.successTitle')), index.h("div", { key: '79fd0f8cd5c52a3fc7c7ff6d3f718b7d32214021', class: "success-page__success-icon" }, index.h("svg", { key: 'a9a18c5f9b22ee545e61011371ceb97d1e99f4e4', width: "96", height: "96", viewBox: "0 0 96 96", fill: "none" }, index.h("path", { key: '089259ffbf49abb06d781b3f092359f36ed23532', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z", fill: "#35B093" }))), index.h("div", { key: '0436258b5588c0ae2627f5799723bdd56de89468', class: "success-page__info-card" }, index.h("div", { key: '9a28794c242f5328d7f75d0252f5d318a811912c', class: "success-page__card-row" }, index.h("rebill-typography", { key: '28fb7edfc8a168f6fd1167ef8df89460f28fba69', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.paymentMethod')), index.h("div", { key: 'b8e02031a1f49986d92e1658b22bc15dc4055707', class: "success-page__card-value" }, index.h("div", { key: '10308d7c012c21e342115f6df322623703486a9d', class: "success-page__payment-method-display" }, index.h("rebill-card-icon", { key: 'a6e0cf30bba2168adebcc0fffe5d51cd3b992400', "card-brand": this.getCardBrand() }), index.h("rebill-typography", { key: 'ff7052289bb9ee1f6eef78a82b4b2d06675c1a9a', variant: "body2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getPaymentMethodLabel())))), index.h("div", { key: 'f06305580ca422b6d442f5210b18658898c124ab', class: "success-page__card-row" }, index.h("rebill-typography", { key: '4df64ca31d193313c3a39d895a966e243b254648', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.paymentDate')), index.h("div", { key: '0491af6a9f1f750a1c6eba511f49d1e2447a72f1', class: "success-page__card-value" }, this.paymentDate || '—')), index.h("div", { key: '9bbe1ccb0b6b4fe9639a0008fbdbc0b280b3c608', class: "success-page__card-row" }, index.h("rebill-typography", { key: '3641313bf126b3f4562ac6eac7b0db087cc44e3d', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.customerEmail')), index.h("div", { key: 'fc3ead91a9b0bb1013ec111de234e0f959480920', class: "success-page__card-value" }, this.customerEmail || i18n_service.I18nService.translate('changeCard.defaultEmail')))))));
+        return (index.h("rebill-checkout-single-column", { key: '5909b6dfe0626a93567cb7bd2e9c7f195da19093' }, index.h("div", { key: '9867e831b8cf8cd1825b61366ad7aaeb4e5e3095', class: "success-page__success-content" }, index.h("rebill-typography", { key: 'cc30b11371091803a45c0462511a61ccbeef2679', variant: "h3", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, i18n_service.I18nService.translate('changeCard.successTitle')), index.h("div", { key: 'a79ee482ffd451a1c93d1324cc81a9ab1fe84301', class: "success-page__success-icon" }, index.h("svg", { key: '2d5e11f621b100c3757f3e0da43f78b3da8d4505', width: "96", height: "96", viewBox: "0 0 96 96", fill: "none" }, index.h("path", { key: 'fdbc12ff2662fc937e24f86113a2cee4377b27a7', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z", fill: "#35B093" }))), index.h("div", { key: 'a1f511643bd70599c3c00b9b468aa016f9ba0370', class: "success-page__info-card" }, index.h("div", { key: 'c40cf53572343cfca97d07ffd3a19a15f782f1b3', class: "success-page__card-row" }, index.h("rebill-typography", { key: '6980ac069fd7685ffc34fd55cb1d59688714b020', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.paymentMethod')), index.h("div", { key: '044039c0b048b4eb8251b57e62d44bf000e53c5f', class: "success-page__card-value" }, index.h("div", { key: '85dcf92d00bec6cc830948be6aa22f278422529b', class: "success-page__payment-method-display" }, index.h("rebill-card-icon", { key: '9a095cf50a964a74f8eb357b1d0dab91a8e319ec', "card-brand": this.getCardBrand() }), index.h("rebill-typography", { key: 'b307161ecaf45928f89351218e9b0d5b5d8d8038', variant: "body2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK_TEXT }, this.getPaymentMethodLabel())))), index.h("div", { key: '498cd733743fe875466371f7f940591016e3dc9b', class: "success-page__card-row" }, index.h("rebill-typography", { key: '5c6350f7098a4f27a26310e53a130e79718da8e5', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.paymentDate')), index.h("div", { key: '9da78e0b3ef6a2651c1c4f3a5b4dd296ab53feb2', class: "success-page__card-value" }, this.paymentDate || '—')), index.h("div", { key: '6c5cc226f2cc1699d0b659d40c58394a19903fbf', class: "success-page__card-row" }, index.h("rebill-typography", { key: 'b06de08b8ce93775d674024c4ff3db6ff063f444', variant: "body2", color: colorClassMapper.COLORS_ENUM.SECONDARY }, i18n_service.I18nService.translate('changeCard.customerEmail')), index.h("div", { key: '3c492b5fc04af605f44f15de7a5c754edfca78fd', class: "success-page__card-value" }, this.customerEmail || i18n_service.I18nService.translate('changeCard.defaultEmail')))))));
     }
 };
 

package/dist/cjs/change-card-success.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"change-card-success.entry.cjs.js","sources":["src/components/change-card/change-card-success.tsx"],"sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport '../../components/shared/typography/typography';\nimport { I18nService } from '../../i18n/i18n.service';\nimport { renewalState } from '../../store/renewal.store';\nimport { COLORS_ENUM } from '../../utils/color-class-mapper';\nimport '../shared/card-icon/card-icon';\nimport '../shared/layouts/custom/single-column/checkout-single-column';\n\n@Component({\n  tag: 'change-card-success',\n  shadow: false,\n})\nexport class ChangeCardSuccess {\n  @Prop() customerName?: string;\n  @Prop() cardLastFour?: string | null;\n  @Prop() cardBrand?: string | null;\n  @Prop() paymentDate?: string | null;\n  @Prop() customerEmail?: string | null;\n\n  private getPaymentMethodLabel() {\n    const label =\n      this.cardBrand ||\n      renewalState.data.cardInformation?.brand ||\n      I18nService.translate('changeCard.defaultBrand');\n    const lastFour = this.cardLastFour || renewalState.data.cardInformation?.lastFour || '****';\n    return `${label} - ${lastFour}`;\n  }\n\n  private getCardBrand() {\n    return this.cardBrand || renewalState.data.cardInformation?.brand || '';\n  }\n\n  render() {\n    return (\n      <rebill-checkout-single-column>\n        <div class=\"success-page__success-content\">\n          <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n            {I18nService.translate('changeCard.successTitle')}\n          </rebill-typography>\n          <div class=\"success-page__success-icon\">\n            <svg width=\"96\" height=\"96\" viewBox=\"0 0 96 96\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z\"\n                fill=\"#35B093\"\n              />\n            </svg>\n          </div>\n\n          <div class=\"success-page__info-card\">\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.paymentMethod')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">\n                <div class=\"success-page__payment-method-display\">\n                  <rebill-card-icon card-brand={this.getCardBrand()} />\n                  <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n                    {this.getPaymentMethodLabel()}\n                  </rebill-typography>\n                </div>\n              </div>\n            </div>\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.paymentDate')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">{this.paymentDate || '—'}</div>\n            </div>\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.customerEmail')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">\n                {this.customerEmail || I18nService.translate('changeCard.defaultEmail')}\n              </div>\n            </div>\n          </div>\n        </div>\n      </rebill-checkout-single-column>\n    );\n  }\n}\n"],"names":["renewalState","I18nService","h","COLORS_ENUM"],"mappings":"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"}
+{"version":3,"file":"change-card-success.entry.cjs.js","sources":["src/components/change-card/change-card-success.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport '../../components/shared/typography/typography';\nimport { I18nService } from '../../i18n/i18n.service';\nimport { renewalState } from '../../store/renewal.store';\nimport { sessionState, SessionStore } from '../../store/session.store';\nimport { COLORS_ENUM } from '../../utils/color-class-mapper';\nimport '../shared/card-icon/card-icon';\nimport '../shared/layouts/custom/single-column/checkout-single-column';\n\n@Component({\n  tag: 'change-card-success',\n  shadow: false,\n})\nexport class ChangeCardSuccess {\n  @Prop() customerName?: string;\n  @Prop() cardLastFour?: string | null;\n  @Prop() cardBrand?: string | null;\n  @Prop() paymentDate?: string | null;\n  @Prop() customerEmail?: string | null;\n  @State() currentLocale: string = sessionState.currentLocale;\n  private unsubscribeCurrentLocaleStore?: () => void;\n\n  private getPaymentMethodLabel() {\n    const label =\n      this.cardBrand ||\n      renewalState.data.cardInformation?.brand ||\n      I18nService.translate('changeCard.defaultBrand');\n    const lastFour = this.cardLastFour || renewalState.data.cardInformation?.lastFour || '****';\n    return `${label} - ${lastFour}`;\n  }\n\n  private getCardBrand() {\n    return this.cardBrand || renewalState.data.cardInformation?.brand || '';\n  }\n\n  componentWillLoad() {\n    // Listen for language changes\n    this.unsubscribeCurrentLocaleStore = SessionStore.onChange('currentLocale', () => {\n      this.currentLocale = sessionState.currentLocale;\n    });\n  }\n\n  disconnectedCallback() {\n    // Clean up language change subscription\n    if (this.unsubscribeCurrentLocaleStore) {\n      this.unsubscribeCurrentLocaleStore();\n    }\n  }\n\n  render() {\n    return (\n      <rebill-checkout-single-column>\n        <div class=\"success-page__success-content\">\n          <rebill-typography variant=\"h3\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n            {I18nService.translate('changeCard.successTitle')}\n          </rebill-typography>\n          <div class=\"success-page__success-icon\">\n            <svg width=\"96\" height=\"96\" viewBox=\"0 0 96 96\" fill=\"none\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M7.99219 47.998C7.99219 25.9067 25.9008 7.99805 47.9922 7.99805C70.0836 7.99805 87.9922 25.9067 87.9922 47.998C87.9922 70.0894 70.0836 87.998 47.9922 87.998C25.9008 87.998 7.99219 70.0894 7.99219 47.998ZM61.5401 39.2645C62.2396 38.4096 62.1136 37.1496 61.2587 36.4501C60.4038 35.7507 59.1437 35.8767 58.4443 36.7316L41.8437 57.0211L35.4064 50.5838C34.6254 49.8028 33.359 49.8028 32.578 50.5838C31.7969 51.3649 31.7969 52.6312 32.578 53.4123L40.578 61.4123C40.9775 61.8118 41.5275 62.0237 42.0918 61.9956C42.6562 61.9674 43.1823 61.7019 43.5401 61.2645L61.5401 39.2645Z\"\n                fill=\"#35B093\"\n              />\n            </svg>\n          </div>\n\n          <div class=\"success-page__info-card\">\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.paymentMethod')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">\n                <div class=\"success-page__payment-method-display\">\n                  <rebill-card-icon card-brand={this.getCardBrand()} />\n                  <rebill-typography variant=\"body2\" color={COLORS_ENUM.PRIMARY_DARK_TEXT}>\n                    {this.getPaymentMethodLabel()}\n                  </rebill-typography>\n                </div>\n              </div>\n            </div>\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.paymentDate')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">{this.paymentDate || '—'}</div>\n            </div>\n            <div class=\"success-page__card-row\">\n              <rebill-typography variant=\"body2\" color={COLORS_ENUM.SECONDARY}>\n                {I18nService.translate('changeCard.customerEmail')}\n              </rebill-typography>\n              <div class=\"success-page__card-value\">\n                {this.customerEmail || I18nService.translate('changeCard.defaultEmail')}\n              </div>\n            </div>\n          </div>\n        </div>\n      </rebill-checkout-single-column>\n    );\n  }\n}\n"],"names":["sessionState","renewalState","I18nService","SessionStore","h","COLORS_ENUM"],"mappings":"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"}

package/dist/cjs/collapsible-card_3.cjs.entry.js

@@ -27,7 +27,7 @@ const CollapsibleCard = class {
         this.toggled.emit(this.isOpen);
     };
     render() {
-        return (index.h("div", { key: 'e52b1b8af35e29aea8855c420d7ebc4107e67d4f', class: `collapsible-card ${this.variant}` }, index.h("button", { key: 'b080f05ec7ee05d91be7a05beec4bdce6c1011ef', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, index.h("rebill-typography", { key: '78a55b92415160bf6b23e6ac474788f7ab12d325', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: colorClassMapper.COLORS_ENUM.TEXT_PRIMARY }, this.header), index.h("span", { key: '8b2816beaa64950da2198296553eff3c3a3b09ff', class: { chevron: true, open: this.isOpen } }, index.h("rebill-icon", { key: '5d20724e3b2e28dda66df988217405471cf00d57', name: "chevron-down", size: "20px", color: "currentColor" }))), index.h("div", { key: '3ec018d1829c00a835f0c61b6db3248e613271d4', class: { content: true, open: this.isOpen } }, index.h("slot", { key: '5635f97ced439d69df9d6d90d09c7214aa992eef' }))));
+        return (index.h("div", { key: 'd2b73737e6dc90fc0ab7bfa73efad8b9b29bffd5', class: `collapsible-card ${this.variant}` }, index.h("button", { key: '6482650b50e27946f4060d607f86ed0b76d96a84', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, index.h("rebill-typography", { key: 'bf757cba347d3af969c6acc351edcddedfc03bd1', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: colorClassMapper.COLORS_ENUM.TEXT_PRIMARY }, this.header), index.h("span", { key: '3448f0519229b5c742be17c6b611f4f0cfac0589', class: { chevron: true, open: this.isOpen } }, index.h("rebill-icon", { key: '1c37e962e19a54c9457bd1a8997acde4122cf6f7', name: "chevron-down", size: "20px", color: "currentColor" }))), index.h("div", { key: 'ef1f27e213b6fccf68be585ca81506e5a0143048', class: { content: true, open: this.isOpen } }, index.h("slot", { key: '078c022fd7f5b5942d3deddeed9b6ac83caaa8f9' }))));
     }
 };
 CollapsibleCard.style = collapsibleCardCss;
@@ -191,7 +191,7 @@ const Divider = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("div", { key: '789cf5df15ea71a80e5c44d3bc5e1931261cf75f', class: "rebill-divider" });
+        return index.h("div", { key: 'ca56aa0464420f08e8c5736fd67ed31142c90b30', class: "rebill-divider" });
     }
 };
 Divider.style = dividerCss;