rebill-web-components-sdk 1.8.32 → 1.8.34-beta.0

package/dist/collection/components/renewal/renewal-summary/renewal-summary.js

@@ -11,6 +11,15 @@ export class RenewalSummary {
         'details',
         'summary',
     ];
+    totalAmount;
+    subscriptionTitle;
+    subscriptionAmount;
+    nextChargeDate;
+    frequency;
+    currency;
+    couponCode;
+    discountAmount;
+    discountPercentage;
     componentWillLoad() {
         i18n.on('languageChanged', this.handleLanguageChange);
     }
@@ -20,12 +29,6 @@ export class RenewalSummary {
     handleLanguageChange = () => {
         this.forceUpdate = this.forceUpdate + 1;
     };
-    totalAmount;
-    subscriptionTitle;
-    subscriptionAmount;
-    nextChargeDate;
-    frequency;
-    currency;
     getFrequencyText() {
         if (!this.frequency || !this.frequency.period)
             return '';
@@ -34,8 +37,28 @@ export class RenewalSummary {
         const translationKey = `summary.${period}`;
         return I18nService.translate(translationKey, { count });
     }
+    getDiscountAmount() {
+        const amountDiscount = Math.max(0, this.discountAmount);
+        if (amountDiscount > 0) {
+            return amountDiscount;
+        }
+        const percentage = this.discountPercentage;
+        if (percentage && percentage > 0) {
+            const base = this.totalAmount;
+            const percentageDiscount = (base * percentage) / 100;
+            return Math.max(0, percentageDiscount);
+        }
+        return 0;
+    }
+    getFinalAmount() {
+        const final = this.totalAmount - this.getDiscountAmount();
+        return Math.max(0, final);
+    }
+    hasDiscount() {
+        return this.getDiscountAmount() > 0;
+    }
     renderHeader = () => {
-        return (h("div", { class: "header" }, h("p", { class: "title" }, I18nService.translate('renewal.title')), h("p", { class: "amount" }, formatAmount(this.totalAmount, this.currency), ' ', h("span", { class: "per" }, "/ ", this.getFrequencyText().toLowerCase()))));
+        return (h("div", { class: "header" }, h("p", { class: "title" }, I18nService.translate('renewal.title')), h("p", { class: "amount" }, h("span", { class: "total-amount" }, formatAmount(this.getFinalAmount(), this.currency)), ' ', h("span", { class: "per" }, "/ ", this.getFrequencyText().toLowerCase()))));
     };
     renderInfoRow = (label, value) => {
         return (h("div", { class: "row" }, h("div", { class: "left" }, label), h("div", { class: "right" }, value)));
@@ -49,11 +72,16 @@ export class RenewalSummary {
     renderSubtotal = () => {
         return this.renderInfoRow(I18nService.translate('renewal.subtotal'), formatAmount(this.totalAmount, this.currency));
     };
+    renderDiscount = () => {
+        if (!this.hasDiscount())
+            return null;
+        return (h("div", { class: "row" }, h("div", { class: "left" }, I18nService.translate('summary.discount')), h("div", { class: "right discount-chip-wrapper" }, h("discount-coupon", { displayMode: "readonly", readonlyCouponCode: this.couponCode || undefined, readonlyDiscountAmount: this.getDiscountAmount(), readonlyCurrency: this.currency }))));
+    };
     renderTotal = () => {
-        return (h("div", { class: "total-row" }, h("div", { class: "left" }, I18nService.translate('renewal.totalToRenew')), h("div", { class: "right" }, formatAmount(this.totalAmount, this.currency))));
+        return (h("div", { class: "total-row" }, h("div", { class: "left" }, I18nService.translate('renewal.totalToRenew')), h("div", { class: "right" }, formatAmount(this.getFinalAmount(), this.currency))));
     };
     renderDesktop = () => {
-        return (h("div", { class: "wrapper" }, this.renderHeader(), h("div", { class: "info" }, h("div", { class: "row" }, h("div", { class: "" }, I18nService.translate('renewal.subscriptionDetails'))), this.renderProduct(), this.renderNextRenewal(), this.renderSubtotal()), this.renderTotal()));
+        return (h("div", { class: "wrapper" }, this.renderHeader(), h("div", { class: "info" }, h("div", { class: "row" }, h("div", { class: "" }, I18nService.translate('renewal.subscriptionDetails'))), this.renderProduct(), this.renderNextRenewal(), this.renderSubtotal(), this.renderDiscount()), this.renderTotal()));
     };
     render() {
         if (this.displayedComponents.includes('header') &&
@@ -68,7 +96,7 @@ export class RenewalSummary {
             return (h("collapsible-card", { header: I18nService.translate('summary.details') }, this.renderProduct(), this.renderNextRenewal()));
         }
         if (this.displayedComponents.includes('summary')) {
-            return (h("collapsible-card", { header: I18nService.translate('summary.summary') }, this.renderInfoRow(this.subscriptionTitle, '1 x ' + formatAmount(this.subscriptionAmount, this.currency)), this.renderSubtotal(), h("rebill-divider", null), this.renderInfoRow(I18nService.translate('renewal.totalToRenew'), formatAmount(this.totalAmount, this.currency))));
+            return (h("collapsible-card", { header: I18nService.translate('summary.summary') }, this.renderInfoRow(this.subscriptionTitle, '1 x ' + formatAmount(this.subscriptionAmount, this.currency)), this.renderSubtotal(), this.renderDiscount(), h("rebill-divider", null), this.renderInfoRow(I18nService.translate('renewal.totalToRenew'), formatAmount(this.getFinalAmount(), this.currency))));
         }
     }
     static get is() { return "renewal-summary"; }
@@ -103,11 +131,11 @@ export class RenewalSummary {
                 "defaultValue": "[\n    'header',\n    'details',\n    'summary',\n  ]"
             },
             "totalAmount": {
-                "type": "any",
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number | string",
-                    "resolved": "number | string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": true,
@@ -141,11 +169,11 @@ export class RenewalSummary {
                 "attribute": "subscription-title"
             },
             "subscriptionAmount": {
-                "type": "any",
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number | string",
-                    "resolved": "number | string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": true,
@@ -213,6 +241,63 @@ export class RenewalSummary {
                 "setter": false,
                 "reflect": false,
                 "attribute": "currency"
+            },
+            "couponCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "coupon-code"
+            },
+            "discountAmount": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "discount-amount"
+            },
+            "discountPercentage": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "discount-percentage"
             }
         };
     }

package/dist/collection/components/renewal/renewal-summary/renewal-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"renewal-summary.js","sourceRoot":"","sources":["../../../../src/components/renewal/renewal-summary/renewal-summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState } from '../../../store/session.store';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { formatDate as formatDateByLocale } from '../../../utils/date-formatter';\n\n@Component({\n  tag: 'renewal-summary',\n  styleUrl: 'renewal-summary.css',\n  shadow: false,\n})\nexport class RenewalSummary {\n  @State() private forceUpdate = 0;\n  @Prop() displayedComponents: ('header' | 'details' | 'summary')[] = [\n    'header',\n    'details',\n    'summary',\n  ];\n\n  componentWillLoad() {\n    i18n.on('languageChanged', this.handleLanguageChange);\n  }\n\n  disconnectedCallback() {\n    i18n.off('languageChanged', this.handleLanguageChange);\n  }\n\n  private handleLanguageChange = () => {\n    this.forceUpdate = this.forceUpdate + 1;\n  };\n\n  @Prop() totalAmount!: number | string;\n  @Prop() subscriptionTitle!: string;\n  @Prop() subscriptionAmount!: number | string;\n  @Prop() nextChargeDate?: string;\n  @Prop() frequency?: { count: number; period: string };\n  @Prop() currency: string;\n\n  private getFrequencyText(): string {\n    if (!this.frequency || !this.frequency.period) return '';\n\n    const period = this.frequency.period.toLowerCase();\n    const count = this.frequency.count;\n\n    const translationKey = `summary.${period}`;\n    return I18nService.translate(translationKey, { count });\n  }\n\n  renderHeader = () => {\n    return (\n      <div class=\"header\">\n        <p class=\"title\">{I18nService.translate('renewal.title')}</p>\n        <p class=\"amount\">\n          {formatAmount(this.totalAmount, this.currency)}{' '}\n          <span class=\"per\">/ {this.getFrequencyText().toLowerCase()}</span>\n        </p>\n      </div>\n    );\n  };\n\n  renderInfoRow = (label: string, value: string) => {\n    return (\n      <div class=\"row\">\n        <div class=\"left\">{label}</div>\n        <div class=\"right\">{value}</div>\n      </div>\n    );\n  };\n\n  renderProduct = () => {\n    return this.renderInfoRow(\n      this.subscriptionTitle,\n      formatAmount(this.subscriptionAmount, this.currency),\n    );\n  };\n\n  renderNextRenewal = () => {\n    return this.renderInfoRow(\n      I18nService.translate('renewal.nextRenewal'),\n      formatDateByLocale(this.nextChargeDate, undefined, sessionState.currentLocale),\n    );\n  };\n\n  renderSubtotal = () => {\n    return this.renderInfoRow(\n      I18nService.translate('renewal.subtotal'),\n      formatAmount(this.totalAmount, this.currency),\n    );\n  };\n\n  renderTotal = () => {\n    return (\n      <div class=\"total-row\">\n        <div class=\"left\">{I18nService.translate('renewal.totalToRenew')}</div>\n        <div class=\"right\">{formatAmount(this.totalAmount, this.currency)}</div>\n      </div>\n    );\n  };\n\n  renderDesktop = () => {\n    return (\n      <div class=\"wrapper\">\n        {this.renderHeader()}\n        <div class=\"info\">\n          <div class=\"row\">\n            <div class=\"\">{I18nService.translate('renewal.subscriptionDetails')}</div>\n          </div>\n          {this.renderProduct()}\n          {this.renderNextRenewal()}\n          {this.renderSubtotal()}\n        </div>\n        {this.renderTotal()}\n      </div>\n    );\n  };\n\n  render() {\n    if (\n      this.displayedComponents.includes('header') &&\n      this.displayedComponents.includes('details') &&\n      this.displayedComponents.includes('summary')\n    ) {\n      return this.renderDesktop();\n    }\n    if (this.displayedComponents.includes('header')) {\n      return this.renderHeader();\n    }\n    if (this.displayedComponents.includes('details')) {\n      return (\n        <collapsible-card header={I18nService.translate('summary.details')}>\n          {this.renderProduct()}\n          {this.renderNextRenewal()}\n        </collapsible-card>\n      );\n    }\n    if (this.displayedComponents.includes('summary')) {\n      return (\n        <collapsible-card header={I18nService.translate('summary.summary')}>\n          {this.renderInfoRow(\n            this.subscriptionTitle,\n            '1 x ' + formatAmount(this.subscriptionAmount, this.currency),\n          )}\n          {this.renderSubtotal()}\n          <rebill-divider />\n          {this.renderInfoRow(\n            I18nService.translate('renewal.totalToRenew'),\n            formatAmount(this.totalAmount, this.currency),\n          )}\n        </collapsible-card>\n      );\n    }\n  }\n}\n"]}
+{"version":3,"file":"renewal-summary.js","sourceRoot":"","sources":["../../../../src/components/renewal/renewal-summary/renewal-summary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { sessionState } from '../../../store/session.store';\nimport { formatAmount } from '../../../utils/currency-formatter';\nimport { formatDate as formatDateByLocale } from '../../../utils/date-formatter';\n\n@Component({\n  tag: 'renewal-summary',\n  styleUrl: 'renewal-summary.css',\n  shadow: false,\n})\nexport class RenewalSummary {\n  @State() private forceUpdate = 0;\n  @Prop() displayedComponents: ('header' | 'details' | 'summary')[] = [\n    'header',\n    'details',\n    'summary',\n  ];\n  @Prop() totalAmount!: number;\n  @Prop() subscriptionTitle!: string;\n  @Prop() subscriptionAmount!: number;\n  @Prop() nextChargeDate?: string;\n  @Prop() frequency?: { count: number; period: string };\n  @Prop() currency: string;\n  @Prop() couponCode?: string;\n  @Prop() discountAmount?: number;\n  @Prop() discountPercentage?: number;\n\n  componentWillLoad() {\n    i18n.on('languageChanged', this.handleLanguageChange);\n  }\n\n  disconnectedCallback() {\n    i18n.off('languageChanged', this.handleLanguageChange);\n  }\n\n  private handleLanguageChange = () => {\n    this.forceUpdate = this.forceUpdate + 1;\n  };\n\n  private getFrequencyText(): string {\n    if (!this.frequency || !this.frequency.period) return '';\n\n    const period = this.frequency.period.toLowerCase();\n    const count = this.frequency.count;\n\n    const translationKey = `summary.${period}`;\n    return I18nService.translate(translationKey, { count });\n  }\n\n  private getDiscountAmount(): number {\n    const amountDiscount = Math.max(0, this.discountAmount);\n    if (amountDiscount > 0) {\n      return amountDiscount;\n    }\n\n    const percentage = this.discountPercentage;\n    if (percentage && percentage > 0) {\n      const base = this.totalAmount;\n      const percentageDiscount = (base * percentage) / 100;\n      return Math.max(0, percentageDiscount);\n    }\n\n    return 0;\n  }\n\n  private getFinalAmount(): number {\n    const final = this.totalAmount - this.getDiscountAmount();\n    return Math.max(0, final);\n  }\n\n  private hasDiscount(): boolean {\n    return this.getDiscountAmount() > 0;\n  }\n\n  renderHeader = () => {\n    return (\n      <div class=\"header\">\n        <p class=\"title\">{I18nService.translate('renewal.title')}</p>\n        <p class=\"amount\">\n          <span class=\"total-amount\">{formatAmount(this.getFinalAmount(), this.currency)}</span>{' '}\n          <span class=\"per\">/ {this.getFrequencyText().toLowerCase()}</span>\n        </p>\n      </div>\n    );\n  };\n\n  renderInfoRow = (label: string, value: string) => {\n    return (\n      <div class=\"row\">\n        <div class=\"left\">{label}</div>\n        <div class=\"right\">{value}</div>\n      </div>\n    );\n  };\n\n  renderProduct = () => {\n    return this.renderInfoRow(\n      this.subscriptionTitle,\n      formatAmount(this.subscriptionAmount, this.currency),\n    );\n  };\n\n  renderNextRenewal = () => {\n    return this.renderInfoRow(\n      I18nService.translate('renewal.nextRenewal'),\n      formatDateByLocale(this.nextChargeDate, undefined, sessionState.currentLocale),\n    );\n  };\n\n  renderSubtotal = () => {\n    return this.renderInfoRow(\n      I18nService.translate('renewal.subtotal'),\n      formatAmount(this.totalAmount, this.currency),\n    );\n  };\n\n  private renderDiscount = () => {\n    if (!this.hasDiscount()) return null;\n    return (\n      <div class=\"row\">\n        <div class=\"left\">{I18nService.translate('summary.discount')}</div>\n        <div class=\"right discount-chip-wrapper\">\n          <discount-coupon\n            displayMode=\"readonly\"\n            readonlyCouponCode={this.couponCode || undefined}\n            readonlyDiscountAmount={this.getDiscountAmount()}\n            readonlyCurrency={this.currency}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  renderTotal = () => {\n    return (\n      <div class=\"total-row\">\n        <div class=\"left\">{I18nService.translate('renewal.totalToRenew')}</div>\n        <div class=\"right\">{formatAmount(this.getFinalAmount(), this.currency)}</div>\n      </div>\n    );\n  };\n\n  renderDesktop = () => {\n    return (\n      <div class=\"wrapper\">\n        {this.renderHeader()}\n        <div class=\"info\">\n          <div class=\"row\">\n            <div class=\"\">{I18nService.translate('renewal.subscriptionDetails')}</div>\n          </div>\n          {this.renderProduct()}\n          {this.renderNextRenewal()}\n          {this.renderSubtotal()}\n          {this.renderDiscount()}\n        </div>\n        {this.renderTotal()}\n      </div>\n    );\n  };\n\n  render() {\n    if (\n      this.displayedComponents.includes('header') &&\n      this.displayedComponents.includes('details') &&\n      this.displayedComponents.includes('summary')\n    ) {\n      return this.renderDesktop();\n    }\n    if (this.displayedComponents.includes('header')) {\n      return this.renderHeader();\n    }\n    if (this.displayedComponents.includes('details')) {\n      return (\n        <collapsible-card header={I18nService.translate('summary.details')}>\n          {this.renderProduct()}\n          {this.renderNextRenewal()}\n        </collapsible-card>\n      );\n    }\n    if (this.displayedComponents.includes('summary')) {\n      return (\n        <collapsible-card header={I18nService.translate('summary.summary')}>\n          {this.renderInfoRow(\n            this.subscriptionTitle,\n            '1 x ' + formatAmount(this.subscriptionAmount, this.currency),\n          )}\n          {this.renderSubtotal()}\n          {this.renderDiscount()}\n\n          <rebill-divider />\n          {this.renderInfoRow(\n            I18nService.translate('renewal.totalToRenew'),\n            formatAmount(this.getFinalAmount(), this.currency),\n          )}\n        </collapsible-card>\n      );\n    }\n  }\n}\n"]}

package/dist/collection/components/root-component/root-component.js

@@ -48,7 +48,7 @@ export class RootComponent {
         SessionStore.setDiscount(null);
     }
     render() {
-        return (h("div", { key: '7dfbff39041d70635a330ca7d5b4ed4566124c93' }, h("div", { key: 'e7b0e4ba02e5539ae345dfeb2fe489078527f391', style: { display: 'flex', justifyContent: 'flex-end', padding: '1rem' } }, h("rebill-button", { key: '0876840b9b77efb19217e2c9ab433ba40109d633', onClick: () => this.handleLanguageChange(this.currentLang === LOCALES_ENUM.EN ? LOCALES_ENUM.ES : LOCALES_ENUM.EN) }, this.currentLang === LOCALES_ENUM.EN ? 'Cambiar a Español' : 'Switch to English')), h("rebill-form", { key: '29a5106beab5d5737848fcce20778b61d37b4420', validationSchema: this.validationSchema, initialData: this.formData, onSubmit: e => this.handleSubmit(e), onChange: e => this.handleChange(e), renderForm: ({ submit, formData: _formData, errors }) => (h("rebill-container", { maxWidth: "800px" }, h("h3", null, I18nService.translate('common.welcome')), h("rebill-input-text", { id: "nombre", label: "Nombre", placeholder: "Ingrese su nombre", error: errors.nombre }), h("rebill-input-text", { id: "apellido", label: "Apellido", placeholder: "Ingrese su apellido", error: errors.apellido }), h("rebill-input-select", { disabled: true, id: "pais", label: "Pa\u00EDs", error: errors.pais, options: [
+        return (h("div", { key: '564e1491e1df14c02c46df6840d4f615d83e1d31' }, h("div", { key: '2600d34a558565c7c45310e5349926958e025ef0', style: { display: 'flex', justifyContent: 'flex-end', padding: '1rem' } }, h("rebill-button", { key: '5fad0458517fceafcfab3fa2704206b61e528220', onClick: () => this.handleLanguageChange(this.currentLang === LOCALES_ENUM.EN ? LOCALES_ENUM.ES : LOCALES_ENUM.EN) }, this.currentLang === LOCALES_ENUM.EN ? 'Cambiar a Español' : 'Switch to English')), h("rebill-form", { key: '7cf4b4d03bdaf7169915336b34acb8dc42fd752b', validationSchema: this.validationSchema, initialData: this.formData, onSubmit: e => this.handleSubmit(e), onChange: e => this.handleChange(e), renderForm: ({ submit, formData: _formData, errors }) => (h("rebill-container", { maxWidth: "800px" }, h("h3", null, I18nService.translate('common.welcome')), h("rebill-input-text", { id: "nombre", label: "Nombre", placeholder: "Ingrese su nombre", error: errors.nombre }), h("rebill-input-text", { id: "apellido", label: "Apellido", placeholder: "Ingrese su apellido", error: errors.apellido }), h("rebill-input-select", { disabled: true, id: "pais", label: "Pa\u00EDs", error: errors.pais, options: [
                     { label: 'Argentina', value: 'AR' },
                     { label: 'Brasil', value: 'BR' },
                     { label: 'Chile', value: 'CL' },

package/dist/collection/components/shared/alert/alert.js

@@ -9,7 +9,7 @@ export class Alert {
     size = 'small';
     colorIcon;
     render() {
-        return (h("div", { key: '449549bca5d216b58ea239d67a19a76858779af4', class: `alert ${this.type} ${this.variant} ${this.size}` }, this.icon && (h("div", { key: '5a0ce7d637b631ec581cbd24a37cf12e0e5a26a6', class: "alert-icon" }, h("rebill-icon", { key: '09437e034ee5201a8f2990f6f475c33dcbdf5ea7', name: this.icon, color: this.colorIcon }))), h("div", { key: 'a862b8b916360db9b6610ddc80378f13ee2de6c7', class: "alert-message" }, this.alertTitle && (h("rebill-typography", { key: '12985df5b86f16c565b0f90bfe5b00ce170e345e', variant: this.type === 'coupon' ? 'subtitle3' : 'subtitle-bold', color: this.type === 'error'
+        return (h("div", { key: '5f2e5f47e1af9846ee93b4d6a6f36fdc8854b34b', class: `alert ${this.type} ${this.variant} ${this.size}` }, this.icon && (h("div", { key: 'ac10cfad997eddd08b9d5b3df4f5c23529d8e7e9', class: "alert-icon" }, h("rebill-icon", { key: '4fea4ad1efb0c8e5d24de1fe752aa2c1df9c5406', name: this.icon, color: this.colorIcon }))), h("div", { key: '70f3c1b91ceedac8493173bebf12b5c372d1d1b5', class: "alert-message" }, this.alertTitle && (h("rebill-typography", { key: '7b8b8a54392af33a779da1f92376b34f4a85618f', variant: this.type === 'coupon' ? 'subtitle3' : 'subtitle-bold', color: this.type === 'error'
                 ? COLORS_ENUM.ERROR_DARK
                 : this.type === 'info'
                     ? COLORS_ENUM.INFO_TEXT
@@ -17,7 +17,7 @@ export class Alert {
                         ? COLORS_ENUM.NEUTRALS_700
                         : this.type === 'coupon'
                             ? COLORS_ENUM.GREEN_TEXT
-                            : COLORS_ENUM.GREEN }, this.alertTitle)), this.message && (h("rebill-typography", { key: 'fcd0668eae6132f54fdbd9406304be7dce5bdadd', variant: "body2", color: this.type === 'error'
+                            : COLORS_ENUM.GREEN }, this.alertTitle)), this.message && (h("rebill-typography", { key: 'a6268a91514fc00061c6ea52755c77236ce27d09', variant: "body2", color: this.type === 'error'
                 ? COLORS_ENUM.ERROR_DARK
                 : this.type === 'info'
                     ? COLORS_ENUM.INFO_TEXT

package/dist/collection/components/shared/card/card.js

@@ -4,7 +4,7 @@ export class Card {
     cardTitle;
     cardLabels;
     render() {
-        return (h("div", { key: 'a54a2e5af06759019f69ad85a74f7e94cb2f67e9', class: "card-container" }, h("div", { key: '4253109afa63d5162d4f85d3bdd27600630797b1', class: "card-title" }, h("rebill-typography", { key: 'df9fab8006f8ab3e805fde768f265484f747c1f3', variant: "subtitle-bold" }, this.cardTitle)), h("div", { key: '78b3dbc9704e592f361571b1d9ecb22ce10efa62', class: "card-labels" }, this.cardLabels.map(label => (h("div", { class: "card-label" }, h("rebill-typography", { variant: "body2", color: COLORS_ENUM.TEXT_SECONDARY }, label.label), h("rebill-typography", { variant: "body2", color: COLORS_ENUM.TEXT_PRIMARY }, label.value)))))));
+        return (h("div", { key: '1a82d37bdba31dc63f3b445b9311243ae306dbee', class: "card-container" }, h("div", { key: '9ffd448e17794d7bfbf65080125d59054a217bc2', class: "card-title" }, h("rebill-typography", { key: '3097c063f33f4eefb02ebb3418c75416ce75b1c5', variant: "subtitle-bold" }, this.cardTitle)), h("div", { key: 'b6bbce2f36bf5965297cd6a5891fac955854fcf6', class: "card-labels" }, this.cardLabels.map(label => (h("div", { class: "card-label" }, h("rebill-typography", { variant: "body2", color: COLORS_ENUM.TEXT_SECONDARY }, label.label), h("rebill-typography", { variant: "body2", color: COLORS_ENUM.TEXT_PRIMARY }, label.value)))))));
     }
     static get is() { return "rebill-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/card-carousel/card-carousel.js

@@ -46,7 +46,7 @@ export class CardCarousel {
     }
     render() {
         const currentIcon = this.cardIcons[this.currentIndex];
-        return (h("div", { key: 'd6116f01aa6f054db324a073f2b6e0e468e58148', class: "card-carousel-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'cbfc321610c737a8121884ec4e4b16182e702261', class: "card-carousel" }, h("rebill-icon", { key: `${currentIcon}-${this.currentIndex}`, name: currentIcon, size: this.size, color: this.color, class: "card-icon" })), this.showAllCards && (h("div", { key: 'ecca542fe36118f58f77ccdbc531d420cdccd327', class: "card-indicators" }, this.cardIcons.map((icon, index) => (h("div", { key: icon, class: `indicator ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
+        return (h("div", { key: '263796cd725fdd510c54b685f0d1430c0653a2c8', class: "card-carousel-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '22710173a70058a34850c247774c11611b03a653', class: "card-carousel" }, h("rebill-icon", { key: `${currentIcon}-${this.currentIndex}`, name: currentIcon, size: this.size, color: this.color, class: "card-icon" })), this.showAllCards && (h("div", { key: 'b7afaf99ba7e6c6d8708f4d7e736352343701c09', class: "card-indicators" }, this.cardIcons.map((icon, index) => (h("div", { key: icon, class: `indicator ${index === this.currentIndex ? 'active' : ''}`, onClick: () => {
                 this.currentIndex = index;
             } })))))));
     }

package/dist/collection/components/shared/collapsible-card/collapsible-card.js

@@ -14,7 +14,7 @@ export class CollapsibleCard {
         this.toggled.emit(this.isOpen);
     };
     render() {
-        return (h("div", { key: '70ba239467a88ca0ce6058bcd8020807e71c4022', class: `collapsible-card ${this.variant}` }, h("button", { key: '6d99d6a0f2e56070b4efa1bff7c9d284bdb0c290', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, h("rebill-typography", { key: '697665ffeca15b33eaa22fd91be373ec7e7e6c3e', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: COLORS_ENUM.TEXT_PRIMARY }, this.header), h("span", { key: 'b41772f04b16818c1bf1dbd2bb33a7e90bf60825', class: { chevron: true, open: this.isOpen } }, h("rebill-icon", { key: 'dc46d84a9f2caae5104822e1335a8a8828a10a03', name: "chevron-down", size: "20px", color: "currentColor" }))), h("div", { key: '2a7dc6e7724c6c8586a83173eeca435b6b5630f0', class: { content: true, open: this.isOpen } }, h("slot", { key: '03aad6340006dd225a4b68251605413a9e1f1ce8' }))));
+        return (h("div", { key: '1457cbc26b83000ec71d1b8a9330b36339bcacc3', class: `collapsible-card ${this.variant}` }, h("button", { key: '5f21229da2ab3dbb265a4b80cad04e72364cc934', class: "collapsible-card-header", onClick: this.toggle, "aria-expanded": this.isOpen, type: "button" }, h("rebill-typography", { key: 'c6f347bbc712d4ede42b5c63a81b1145297bf36e', variant: this.variant === 'flat' ? 'subtitle2' : 'overline', color: COLORS_ENUM.TEXT_PRIMARY }, this.header), h("span", { key: '7e53c8c84a60126d856a12199871ab9d328c932f', class: { chevron: true, open: this.isOpen } }, h("rebill-icon", { key: '7f3310ed9e9abcfacd8d0050f26a81ba2771a3ff', name: "chevron-down", size: "20px", color: "currentColor" }))), h("div", { key: '4ab6b819a7305f97c2b4093ee5f313021c73bfc9', class: { content: true, open: this.isOpen } }, h("slot", { key: '68fd3a2c949a723f6703fb1e2b6c0fe6ad4e5877' }))));
     }
     static get is() { return "collapsible-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/divider/divider.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import "./divider.css";
 export class Divider {
     render() {
-        return h("div", { key: '70e5d2a8881fe2ed8779ae91047024132a24ba8d', class: "rebill-divider" });
+        return h("div", { key: 'e473487d16557d2a754a133173d72ca6ce5a7767', class: "rebill-divider" });
     }
     static get is() { return "rebill-divider"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/divider/vertical-divider.js

@@ -9,7 +9,7 @@ export class VerticalDivider {
     connectorActive = false;
     withDot = false;
     render() {
-        return (h("div", { key: 'b951900f772530f556d69f7166b70ea3def62699', class: `rebill-vertical-divider ${this.dashed ? 'dashed' : ''} ${this.connectorActive ? 'connectorActive' : ''} ${this.withDot ? 'with-dot' : ''}`, style: {
+        return (h("div", { key: 'eb4eb689ee3b202277acf9afe8824b0eaf92eee6', class: `rebill-vertical-divider ${this.dashed ? 'dashed' : ''} ${this.connectorActive ? 'connectorActive' : ''} ${this.withDot ? 'with-dot' : ''}`, style: {
                 '--divider-color': colorClassMapper(this.color),
                 '--divider-thickness': this.thickness,
                 '--divider-dashed': this.dashed ? '2 2' : 'none',

package/dist/collection/components/shared/form/form.js

@@ -105,7 +105,7 @@ export class Form {
         await this.submitForm();
     };
     render() {
-        return (h("form", { key: '331c43522b7c8c31db3e10ee93c989f71d52b9c6', onSubmit: e => this.handleSubmit(e), noValidate: true }, this.renderForm ? (this.renderForm({
+        return (h("form", { key: '2aea3b390caf4e34fe9d742d85e9b8015831261d', onSubmit: e => this.handleSubmit(e), noValidate: true }, this.renderForm ? (this.renderForm({
             submit: () => this.submitForm(),
             formData: this.formData,
             errors: this.errors,

package/dist/collection/components/shared/inputs/input-checkbox/input-checkbox.js

@@ -26,7 +26,7 @@ export class InputCheckbox {
         this.input.emit({ id: this.id, value: this.checked });
     };
     render() {
-        return (h("div", { key: 'e7103071f8fc59475d0ea17f5407d3a02f03b791', class: "checkbox-container input-container" }, h("label", { key: 'e0dc39902c17150281aa877f975859c01013561f', class: `checkbox-label input-label ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '1bb94fd686d9f84950c0912d06b5435917113ee9', id: this.id, type: "checkbox", class: `checkbox-element ${this.error ? 'checkbox-error' : ''}`, checked: this.checked, onChange: this.onCheckboxChange, disabled: this.disabled }), h("span", { key: '0e8d7fb08433339f953e891c89995a57579dd44b', class: "label-text" }, this.label)), this.error && h("span", { key: '53870fdc17395c5490e13f1c7fb594f66c1f4aa6', class: "error-message" }, this.error)));
+        return (h("div", { key: 'c74b84596c8a440991d20d71f678504934f2b560', class: "checkbox-container input-container" }, h("label", { key: '994dcb86e31f802e223eabc26ccd14882aee3400', class: `checkbox-label input-label ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '78ac96ee3334ac5de8f79d8a12441cfa391a95e3', id: this.id, type: "checkbox", class: `checkbox-element ${this.error ? 'checkbox-error' : ''}`, checked: this.checked, onChange: this.onCheckboxChange, disabled: this.disabled }), h("span", { key: '4a088e15405522b167c9b7fcb3a1d3df42c798e6', class: "label-text" }, this.label)), this.error && h("span", { key: '0ae539ccbe2d3ee67e6009a757512b6484171a1e', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-checkbox"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-combo/input-combo.js

@@ -166,7 +166,7 @@ export class InputCombo {
     render() {
         const selectedLabel = this.getSelectedOptionLabel();
         const hasSelectValue = this.selectValue !== '';
-        return (h("div", { key: 'acc0186f37b641ea3d432b5c3dc020ffef1948b7', class: "input-container" }, this.label && (h("label", { key: '793f258597ce2a5ebb85aa1a04b841575f609944', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '59b00e15043885b09e14b9c4f5e0d22bcb7e215f', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, h("div", { key: '64bd573a8c8a17183524960a845aa6b18088fdfe', class: "select-section", style: { width: this.selectWidth } }, h("div", { key: '57cbb932a7ec053f1f15ac9ec5a0f7e7981adfce', 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" }, h("span", { key: 'fb572ee0350ec89f05db26e8109da0c0402449ef', class: "select-value" }, selectedLabel), h("div", { key: 'e7a6826e68b2d6ae6a69894b51b10110811d5dd9', class: "icon-wrapper" }, h("rebill-icon", { key: 'e39c6b9d60cc34fce37d0dd0ec2e764b62f4d52e', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (h("div", { key: '383b264b2359af0e64152f122b4fcb793d7d378e', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index) => (h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), h("div", { key: '3ae30dbfc77ac17074107ad7ba4d64176cbf3ad7', class: "combo-divider" }), h("div", { key: 'ece93859123a7618977f7372d5bb4eea5f9ffdc7', class: "input-section" }, h("input", { key: '35a3e5136b2863373c7aac96735aba61bc8090d2', 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 && h("span", { key: '84addbc346d45632fa68942e36339a80ec81c787', class: "error-message" }, this.error)));
+        return (h("div", { key: '78274d3e83b4a14ec044ff3852e833a99feb8348', class: "input-container" }, this.label && (h("label", { key: '1c49d0001d73ada9f2a892bb28438fd44f369828', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'f8fdecad81908c55d33c3c5612afacf122916635', class: `input-combo-wrapper combo-wrapper ${this.disabled ? 'disabled' : ''} ${this.error ? 'error' : ''}` }, h("div", { key: '2b824e4efec1d67539fcc5e3dd3cd750e65e342a', class: "select-section", style: { width: this.selectWidth } }, h("div", { key: 'dc0116959636baf538f158a1c018087cf9c8890a', 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" }, h("span", { key: '0fd9d93421d8fd546771e806c93a29c0200ee408', class: "select-value" }, selectedLabel), h("div", { key: '6a3b3431c75f00bcb97d91e907c982e7abca3435', class: "icon-wrapper" }, h("rebill-icon", { key: 'b473ae6f95bdd29a45dc57b8a617c4311d89f3d3', name: "chevron-up-down", size: "20px", class: "select-icon" }))), this.isOpen && (h("div", { key: '90337b81ac236c22559e7bfd1c21169452e6196a', ref: el => (this.dropdownRef = el), class: "select-dropdown", role: "listbox" }, this.options.map((option, index) => (h("div", { class: `select-option ${this.selectValue === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.selectValue === option.value ? 'true' : 'false' }, option.label)))))), h("div", { key: 'b23f197692e344ba927859c95da58ac610d68239', class: "combo-divider" }), h("div", { key: '53947485ce5b7f58baa9755d2cbbe32d3d2d63dd', class: "input-section" }, h("input", { key: 'a4350c9c44ab5915671ba9ab26ddd98bfe443544', 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 && h("span", { key: 'fc58be7909cf174089b791270720da65050d7e19', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-combo"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-otp/input-otp.js

@@ -96,14 +96,14 @@ export class InputOtp {
         }
     };
     render() {
-        return (h("div", { key: 'd80d5cb0f7ba0d05403a559c0590f1373064e3cf', class: "otp-container" }, h("div", { key: '250b0b334a27fd98f76c2fa9cfb3254cdd4f5453', class: "email-icon" }, h("rebill-icon", { key: 'fa88b7146276d8e846bb73f2a5b654567a5de907', name: "invite" })), h("div", { key: '8bf28b1d9408d83b521a2756d8de13e610eb0d15', class: "otp-input-container", onClick: this.handleFieldClick }, h("div", { key: '54a984d2d0af08683512377f86f8370d6cf2a36c', class: "otp-fields" }, [0, 1, 2, 3, 4, 5].map(index => (h("div", { key: index, style: { display: 'flex', alignItems: 'center' } }, h("div", { class: `otp-field ${this.error ? 'error' : ''}` }, h("input", { type: "text", maxlength: "1", placeholder: this.placeholder, value: this.otpValue[index] || '', onInput: e => this.handleInput(e, index), onClick: () => this.handleInputClick(), onKeyDown: e => this.handleKeyDown(e, index), onPaste: e => this.handlePaste(e), onFocus: e => {
+        return (h("div", { key: '22d1a4a0f52f04672bb16a4473d49d396717c251', class: "otp-container" }, h("div", { key: 'f4ce51dd0fae34b4f0560aeaaaee0e6e9a873077', class: "email-icon" }, h("rebill-icon", { key: 'a5c3c76e49d5bb4713b182d3ba753b17783afc3f', name: "invite" })), h("div", { key: '37e3942600948b3a7ec10b217919dad9e68c9435', class: "otp-input-container", onClick: this.handleFieldClick }, h("div", { key: '4df9d0c3bba7ccfd10da8dc7b412dd3b33c27990', class: "otp-fields" }, [0, 1, 2, 3, 4, 5].map(index => (h("div", { key: index, style: { display: 'flex', alignItems: 'center' } }, h("div", { class: `otp-field ${this.error ? 'error' : ''}` }, h("input", { type: "text", maxlength: "1", placeholder: this.placeholder, value: this.otpValue[index] || '', onInput: e => this.handleInput(e, index), onClick: () => this.handleInputClick(), onKeyDown: e => this.handleKeyDown(e, index), onPaste: e => this.handlePaste(e), onFocus: e => {
                 this.el
                     ?.querySelectorAll('.otp-field')
                     .forEach(field => field.classList.remove('active'));
                 e.target.parentElement?.classList.add('active');
             }, onBlur: e => {
                 e.target.parentElement?.classList.remove('active');
-            } })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: '5b1ef6ae222ebf77db7f390004cc673acd818777', class: "otp-error" }, this.error)));
+            } })), index === 2 && h("div", { class: "otp-separator" }, "-")))))), this.error && h("div", { key: '386db596c1720b9c6837eb2ff877ddd553e78311', class: "otp-error" }, this.error)));
     }
     static get is() { return "input-otp"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-phone/input-phone.js

@@ -233,10 +233,10 @@ export class InputPhone {
         const translatedError = this.translateError(this.error);
         const translatedValidationError = this.translateError(this.validationError);
         const displayError = translatedError || translatedValidationError;
-        return (h("div", { key: '4c2d918c3ab74ad51d73b38d6f46a6ead8d72682', class: "input-container" }, h("div", { key: '98eb3935a957dbafffca5f72c736537bb533b65f', class: inputClasses }, h("div", { key: '710ee9264f5da6467e7e8484084ea4ea1754b8a3', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '633a1f80fef6c8f194235f8e7caeeff5b1118032', class: "flag" }, this.selectedCountry.flag), h("span", { key: 'abdbf7c6fdb491888489bcc919ae41b73c016b7e', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'c8cf27250a6cdea2b4e3ee955c37179ed4a793d4', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: '678d98ca2988fd02cda20ecdeb8936d09c5be2f3', class: "country-dropdown" }, this.searchable && (h("div", { key: '14f05e18b67b12b0617563b3b832adcfc528c9ea', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'd0301d235db091cbd3f04cf0548b9da93febe2bc', class: "search-input-wrapper" }, h("rebill-icon", { key: 'd710e1a3df6664cbbfb14249014a4e21295c7e29', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '684ed183b3748a6e4da7f5a783d3234dd2f335d3', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: '12f252406e3ecf9e0965eae9785d1cccca94e7f8', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '10cfe50d2b05b73d1c5c908d1219408d1695f18b', class: "input-container" }, h("div", { key: 'f74c9646e980ffaf53527f17737c2706998b612d', class: inputClasses }, h("div", { key: 'fb01d51d718603925839be3810c5ae4f3646293b', class: "input-combo-select country-selector", onClick: this.toggleDropdown }, h("span", { key: '4236bf3ad916ae749e2801370b333318d0e232fc', class: "flag" }, this.selectedCountry.flag), h("span", { key: '9d0edd7c8cf05120844ea7b5134a4ac327aa1ced', class: "dial-code" }, this.selectedCountry.dialCode), h("span", { key: 'a08a740944e9c00f4a22e4bb1632029c4946284d', class: `dropdown-arrow ${this.isDropdownOpen ? 'open' : ''}` }, "\u25BC")), this.isDropdownOpen && (h("div", { key: 'f651d9017bac7448cfd55dd2712b67fe0099cf2a', class: "country-dropdown" }, this.searchable && (h("div", { key: '0b5c593a2aa8976a79eb45b159ef7242c6736469', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: 'd44705bca279fbbf1c3992e90014db93a0eda2c2', class: "search-input-wrapper" }, h("rebill-icon", { key: '0bfe2d73b46de9db3fc6a46b62f4720cd8ebbd59', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '4aec9d63677ef103a9e23b833b6361fecf2e6c44', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick }), this.searchTerm && (h("button", { key: 'fc068fa9c0484aa3c1eb35237fc08441854a66e8', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '56e4cd9c246ac490c7d853875243393a35681b1a', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: '6c5b6f8fd3d58a821b503d8f88f75a8390270647', 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 && h("span", { key: '9990ca38ae106410434a39f952cb31266497f4c4', class: "error-message" }, displayError)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: 'f62e8e989586b3af2f72261828f00e56216d5302', name: "x", size: "16px" })))))), this.filteredCountries.length > 0 ? (this.filteredCountries.map(country => (h("div", { key: country.code, class: "country-option", onClick: e => this.selectCountry(country, e) }, h("span", { class: "flag" }, country.flag), h("span", { class: "country-name" }, country.name), h("span", { class: "dial-code" }, country.dialCode))))) : (h("div", { class: "no-results" }, "No se encontraron resultados")))), h("input", { key: 'bd1553158f5eb5a2548f7e037843362e4a9e04c6', 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 && h("span", { key: 'e2f7d553f3f881a26ad5786c1205be08a99449fc', class: "error-message" }, displayError)));
     }
     static get is() { return "rebill-input-phone"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-select/input-select.js

@@ -228,10 +228,10 @@ export class InputSelect {
     render() {
         const selectedLabel = this.getSelectedOptionLabel();
         const hasValue = this.value !== '';
-        return (h("div", { key: '794ce4d8dc36df0e5f10fb9c58d91b4dd0dd7651', class: "input-container" }, this.label && (h("label", { key: '2e7c268755733936dcaa23d62561348999d4a1ce', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '62952ca2fea093777e288db01ed18738ecae39f1', class: `select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}` }, h("div", { key: 'fa4301a9c4d52b6e877d3f0fd2fd8e07a996c7a1', ref: el => (this.triggerRef = el), class: `input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`, style: { backgroundColor: this.backgroundColor }, onClick: this.toggleDropdown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.id}-label` : undefined }, h("span", { key: 'd431ecfccd07748f0dcd83e566641dec6a1a73ea', class: "select-value", style: { fontSize: this.fontSize }, innerHTML: selectedLabel }), h("div", { key: 'e6fc890bba43119c9c9a388d0adbb2121095874e', class: "icon-wrapper" }, this.loading ? (h("div", { class: "spinner" })) : (h("rebill-icon", { name: this.getArrowIcon(), size: "20px", class: `select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}` })))), this.isOpen && (h("div", { key: '5048f31812f8b1ae3ef4d2ba5eab857c6094d988', ref: el => (this.dropdownRef = el), class: `select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`, role: "listbox" }, this.searchable && (h("div", { key: '9fd1e9461adecea83e83adcf9b76b9afac671500', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: '51e372d58b3c3065a66981ea9747bc56b65f8485', class: "search-input-wrapper" }, h("rebill-icon", { key: 'eab1a245456b8553270a84f86727ea8cea3858c3', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '8fed50c8dc7ed32a7e150ac484f8d168361b2060', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick, style: { fontSize: this.fontSize } }), this.searchTerm && (h("button", { key: '8c678d6aff239ea039d21ed4bff44cbae8cfeaf3', type: "button", class: "clear-search", onClick: event => {
+        return (h("div", { key: '23c4562b47db3e895f706d3fc46f0b4ca3381eb2', class: "input-container" }, this.label && (h("label", { key: '5c5aa626f8b85e16dd4623798f517d29145b80b7', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '891a09b90bec6483503c7d24e016e1f018268a9a', class: `select-wrapper ${this.disabled ? 'disabled' : ''} ${this.isOpen ? 'open' : ''}` }, h("div", { key: '6f21d55aad5ab4efab7e857dc4a59bd0fb787986', ref: el => (this.triggerRef = el), class: `input-element select-trigger ${this.error ? 'input-error' : ''} ${!hasValue ? 'placeholder' : ''} ${this.variant === 'underlined' ? 'underlined' : ''}`, style: { backgroundColor: this.backgroundColor }, onClick: this.toggleDropdown, tabIndex: this.disabled ? -1 : 0, role: "combobox", "aria-expanded": this.isOpen.toString(), "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.id}-label` : undefined }, h("span", { key: '537ae49362d7b96233f91aeb899059e190199b17', class: "select-value", style: { fontSize: this.fontSize }, innerHTML: selectedLabel }), h("div", { key: 'd81cc47b9d93b8f4206ef1a9b6c320d0c91f867b', class: "icon-wrapper" }, this.loading ? (h("div", { class: "spinner" })) : (h("rebill-icon", { name: this.getArrowIcon(), size: "20px", class: `select-icon ${this.isOpen && this.arrowIcon === 'down' ? 'rotated' : ''}` })))), this.isOpen && (h("div", { key: '3d00b0028bdd98d99336bd23d98c5f9f4443ca5c', ref: el => (this.dropdownRef = el), class: `select-dropPosition ${this.dropPosition === 'up' ? 'open-up' : 'open-down'}`, role: "listbox" }, this.searchable && (h("div", { key: 'd3b7272792e4083a80a1fb86292b704abc6db660', class: "search-container", onClick: this.handleSearchClick }, h("div", { key: '14785ce1256f9e7f5ba6bfc6b2ae6f83f48b7e73', class: "search-input-wrapper" }, h("rebill-icon", { key: 'b4cd2ef7a511bf046a0aaa85f8010f5f05ff7b46', name: "search", size: "16px", class: "search-icon" }), h("input", { key: '4bfc8b4016b5381679b30bf219d94afa1e273e5e', ref: el => (this.searchInputRef = el), type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: this.handleSearchInput, onClick: this.handleSearchClick, style: { fontSize: this.fontSize } }), this.searchTerm && (h("button", { key: 'b1c3d31391c32297d9dacd96db6d0db47e752c8b', type: "button", class: "clear-search", onClick: event => {
                 event.stopPropagation();
                 this.clearSearch();
-            }, "aria-label": "Clear search" }, h("rebill-icon", { key: '663cfa554151a26e4d296220698afb981350b10d', name: "x", size: "16px" })))))), this.loading && this.filteredOptions.length === 0 ? (h("div", { class: "loading-message", style: { fontSize: this.fontSize } }, h("div", { class: "spinner" }), I18nService.translate('common.loadingOptions'))) : this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("div", { class: `select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, style: { fontSize: this.fontSize }, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.value === option.value ? 'true' : 'false' }, h("span", { innerHTML: option.label }))))) : (h("div", { class: "no-results", style: { fontSize: this.fontSize } }, "No se encontraron resultados"))))), this.error && h("span", { key: 'c5975d29ae5b9233a1aeaa2e392b38b0db55c2e0', class: "error-message" }, this.error)));
+            }, "aria-label": "Clear search" }, h("rebill-icon", { key: 'c3b19f8b59672c5ec127d3c669f383233dedbcd5', name: "x", size: "16px" })))))), this.loading && this.filteredOptions.length === 0 ? (h("div", { class: "loading-message", style: { fontSize: this.fontSize } }, h("div", { class: "spinner" }), I18nService.translate('common.loadingOptions'))) : this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("div", { class: `select-option ${this.value === option.value ? 'selected' : ''} ${this.highlightedIndex === index ? 'highlighted' : ''}`, style: { fontSize: this.fontSize }, onClick: () => this.selectOption(option), role: "option", "aria-selected": this.value === option.value ? 'true' : 'false' }, h("span", { innerHTML: option.label }))))) : (h("div", { class: "no-results", style: { fontSize: this.fontSize } }, "No se encontraron resultados"))))), this.error && h("span", { key: 'cef33371cb5b640b8496e797045ef967f2c7f763', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-select"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/inputs/input-text/input-text.js

@@ -86,10 +86,10 @@ export class InputText {
             'has-left-icon': !!this.leftIcon,
             'has-right-icon': !!this.rightIcon,
         };
-        return (h("div", { key: 'f219b9674d7d95eae0444be32d1d5a99c3d965c2', class: "input-container" }, !isFloating && this.label && (h("label", { key: '42d3e1102accafc272dadf28302b354c7ae61f48', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '432d297f5f00954d290e963e1748c4751f9b35eb', class: wrapperClasses }, this.leftIcon && (h("div", { key: '0402cf30578ae476d0ab78fc06fe80aeb7615af9', class: "icon-left" }, h("rebill-icon", { key: 'e727422130208a04f82a021d18a1dca1ffa63560', name: this.leftIcon }))), h("input", { key: 'a47c36942063b7060616deaf48e770ffe55e2866', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
+        return (h("div", { key: '77c9d0980fb2727bbb92cd95352d5dc6a1222ddb', class: "input-container" }, !isFloating && this.label && (h("label", { key: '9e0191ce3584d46d399fba6dc3727d182df0c00a', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '34abdf2bfb4587a110bbba382e5a572921a0bddc', class: wrapperClasses }, this.leftIcon && (h("div", { key: 'e893a7b7a0e6aa35e5a28acac72642b523be3323', class: "icon-left" }, h("rebill-icon", { key: 'be6eebaf5ddbea7cf5e6f581a28f289f59bd6dd3', name: this.leftIcon }))), h("input", { key: '30d8fa0b19fe4b3723f48b03fbaebc9a854bcf8f', ref: el => (this.inputElement = el), type: "text", class: inputClasses, placeholder: isFloating ? this.label : this.placeholder, value: this.value, onInput: this.onInput, onBlur: this.onBlur, disabled: this.disabled, style: {
                 paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',
                 paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',
-            } }), isFloating && h("label", { key: 'eb37e8a7bbe91b1a9522cc9d2103e2572f7f7386', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: '9ff2d4ee17dc9fac23ab39eaa58f64ae7799a2b4', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: '05a2f57ce643c5741963dba52f15c21bf56e6aa4', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: 'd5b6c523541c1aa3530aa600e64955d6a5bcdb8a', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: '4b9748f639352091a6ce708a52dfba9e9aab74f2', name: this.rightIcon })))), this.error && h("span", { key: 'c1135fd74ea787caad610b185ac41f927fdb7d79', class: "error-message" }, this.error)));
+            } }), isFloating && h("label", { key: '2b410a985ad150cd33b3f6faff82422046c7509c', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'c02818e635da077ebef4b607a435874c151ccf37', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: '05bd2ac74766c544bf83a132651c56eeabb27e54', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: 'b2c6c967af138d90ae8cf456572bd53117859ad2', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: '0a97d6b77588a469d296eade8ee7e5c5a47ce4bb', name: this.rightIcon })))), this.error && h("span", { key: '93caa9f68e587ec23162fa84758deeef1514d9aa', class: "error-message" }, this.error)));
     }
     static get is() { return "rebill-input-text"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/layouts/custom/single-column/checkout-single-column.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { sessionState } from "../../../../../store/session.store";
 export class LayoutCheckoutSingleColumn {
     render() {
-        return (h("div", { key: '468642d8508195f782664ba567da3d73b0b3a47b', class: "checkout-single-column" }, h("header", { key: 'bf8c5875fd0c557746a80ed4dbb0254817b3b32b', class: "checkout-single-column__header" }, h("div", { key: '859b9485b2a6a2aea09dc4b66d6186d6442d4ef0', class: "header-container" }, h("organization-logo", { key: '6a94768c45a3e617ad27a11649d6d475c3063b5b', organization: sessionState.data.organization }))), h("main", { key: '12330c89eb8ad95a8072047d30954b65c53e6542', class: "checkout-single-column__main-content" }, h("slot", { key: '27b3ccad7785c21aec1b3ca206048fdf5ac5c028' })), h("div", { key: '32acdd8bd1811f6a27d7d6011efddde713923704', class: "checkout-single-column__footer-container" }, h("rebill-footer", { key: '495fae111544680a34143272b273360a9498c4d9', class: "checkout-single-column__footer-content" }))));
+        return (h("div", { key: '3e002c176d7f9c8e59f8274d413fed7675c6af2f', class: "checkout-single-column" }, h("header", { key: '3048e200d0382cb75dd4e5ccfca92301f3c4d0e1', class: "checkout-single-column__header" }, h("div", { key: '49dc6e0e0147267ab1e6e93f5248a04657ea2a61', class: "header-container" }, h("organization-logo", { key: '2c3c3c377ba34c1534d50c013896c0ed186cb745', organization: sessionState.data.organization }))), h("main", { key: '1dd65fafd06a0bba85dd343477d8cb732132decd', class: "checkout-single-column__main-content" }, h("slot", { key: '1cdc777463981c3c732817695d102985de61dfe9' })), h("div", { key: '97d8818dbab4842a0d6b7075aed62d2877be0b53', class: "checkout-single-column__footer-container" }, h("rebill-footer", { key: 'ea0d8b4b219cd799678f8c85fd52e97785e1885f', class: "checkout-single-column__footer-content" }))));
     }
     static get is() { return "rebill-checkout-single-column"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/layouts/generics/container.js

@@ -11,7 +11,7 @@ export class Container {
             width: '100%',
             boxSizing: 'border-box',
         };
-        return (h("div", { key: '71a6c0fc91c4e36eff6bdf9f77f4ad99c2891c39', style: style }, h("slot", { key: 'd48b423ac393875256ae49796290c2fd25075e2d' })));
+        return (h("div", { key: '41ee65153152ed89e4a02334f6a6147b0db4a567', style: style }, h("slot", { key: '83ea4bef69607a69d64293d0a70338cc4603683c' })));
     }
     static get is() { return "rebill-container"; }
     static get properties() {

package/dist/collection/components/shared/layouts/generics/flex.js

@@ -15,7 +15,7 @@ export class Flex {
             justifyContent: this.justifyContent,
             width: '100%',
         };
-        return (h("div", { key: '15333acb344990871cb9e2a43f16247ea4dee11f', style: style }, h("slot", { key: '8ad663ba22ddcbfb8f4cc602dc7bf27c660a0fe4' })));
+        return (h("div", { key: 'b143929207ed148206d00ce616e21de20d4740d6', style: style }, h("slot", { key: 'df9cefe2bb568ad39b0ee5a7b87f56d190b2f6a1' })));
     }
     static get is() { return "rebill-flex-container"; }
     static get properties() {

package/dist/collection/components/shared/layouts/generics/grid.js

@@ -13,7 +13,7 @@ export class Grid {
             justifyContent: this.justifyContent,
             width: '100%',
         };
-        return (h("div", { key: '429b1a1844f4548a7ab18df70d2d05bedfdcdf4b', style: style }, h("slot", { key: 'd4b40e3699ac89f61077dbdf3a714689636b88c0' })));
+        return (h("div", { key: 'b59b1bb1ad4b7f7741d348052f2d7e66c257550a', style: style }, h("slot", { key: '5a567054cafbbe92aa22f8b88bc69a85a6a38ba2' })));
     }
     static get is() { return "rebill-grid-container"; }
     static get properties() {

package/dist/collection/components/shared/mode-sandbox/mode-sandbox-mobile.js

@@ -33,7 +33,7 @@ export class RebillTestModeChipMobile {
         return (h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel" }, h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel-header" }, h("rebill-icon", { name: "card-test" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.cardTest'))), h("div", { class: "mode-sandbox-mobile__card-details" }, h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "succes", color: COLORS_ENUM.GREEN }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.successPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, h("rebill-icon", { name: "copy" }))))))), h("div", { class: "mode-sandbox-mobile__card-section" }, h("div", { class: "mode-sandbox-mobile__header-content" }, h("rebill-icon", { name: "rejected", color: COLORS_ENUM.ERROR }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.rejectedPayment'))), h("div", { class: "mode-sandbox-mobile__card-row" }, h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "mode-sandbox-mobile__field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "mode-sandbox-mobile__card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "mode-sandbox-mobile__copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, h("rebill-icon", { name: "copy" })))))))), h("div", { class: "mode-sandbox-mobile__docs-section", onClick: this.handleDocsClick }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('sandbox.docs')), h("rebill-icon", { name: "external-link" }))));
     }
     render() {
-        return (h("div", { key: '671fffb451b5b6944bd9d61eaebe32ee484fc03f', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: 'd1cbefc23ff07ce9baeca18a3fe422b7d6816409', class: "mode-sandbox-mobile__overlay" }), h("div", { key: 'de867cf63760b2d7dcd0fded95d5fe09b7ccfd79', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
+        return (h("div", { key: '7ef3d364e1fc317517d18f6eae976a1d85fe6ac0', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: '967dcd92f52e54b6e6d54b448089a08418539730', class: "mode-sandbox-mobile__overlay" }), h("div", { key: '308e5530604fa517fcbe52a8e700630b04a9d60f', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
     }
     static get is() { return "rebill-mode-sandbox-mobile"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/selectable-card/selectable-card.js

@@ -16,11 +16,11 @@ export class SelectableCard {
         this.selectableCardClick.emit(this.cardKey);
     };
     render() {
-        return (h("button", { key: '5c0c943a5423aa1fdfc9f863d79ca642c9b7ab95', class: {
+        return (h("button", { key: '4c24158fbfb72e9300cb020667c0fa67f88d6775', class: {
                 'selectable-card': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: '1a445dd4149ac71e22db55af4da047ae0df63fa9', class: "icon" }, h("slot", { key: '8e25979ec5567c23844466f2b078dc746cee3690', name: "icon" })), h("span", { key: 'd34e5cc893acb3a03fa05672d7d068a9e7d19dca', class: "label" }, this.label)));
+            }, onClick: this.handleClick, disabled: this.disabled, part: "button", type: "button" }, h("div", { key: '5cb1e550f3e7ac20b1067df1d1071eb02612fa53', class: "icon" }, h("slot", { key: 'c11b6b312f80b180e0b6dde93469d32f8c6ebc06', name: "icon" })), h("span", { key: '60c89e7aa7c9af391c9e2f0de0f20872d1e4e9ca', class: "label" }, this.label)));
     }
     static get is() { return "selectable-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/singlePaymentMethod/singlePaymentMethod.js

@@ -8,14 +8,14 @@ export class SinglePaymentMethod {
     paymentMethodDetails;
     icons = [];
     render() {
-        return (h("div", { key: '0083cbb1efa4d31cdcdad66c40a926da75097b8c', class: "single-payment-method" }, h("div", { key: '8105522c55eff7d35b9ac3c905cde1e849af3ba7', class: "payment-method" }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && h("rebill-icon", { key: 'f322ab93d2741ba0db1c99bfd227207012ff1ce6', name: "card" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry === 'AR' && h("rebill-icon", { key: 'a47cd14a9538f9dd77406ff55b132504b3e2184c', name: "qr-code" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
-            this.currencyCountry !== 'AR' && h("rebill-icon", { key: '96025d544c7542a8cdf5e67ad2b827cef8ae7c65', name: "bank" }), h("rebill-typography", { key: '73a2f8453bf364c19ee8f9af50628fbbc1f3d81c', variant: "body2-small", color: COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, I18nService.translate(this.paymentMethod === PAYMENT_METHOD_ENUM.CARD
+        return (h("div", { key: '156c1e562b2444664488a2380d42a146d931b4d2', class: "single-payment-method" }, h("div", { key: '92438af1d82d60ecd43095ecd2b20e5791531df7', class: "payment-method" }, this.paymentMethod === PAYMENT_METHOD_ENUM.CARD && h("rebill-icon", { key: '0d070da6565d34eaf7d96f68b7bc3a6965a9c0d8', name: "card" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry === 'AR' && h("rebill-icon", { key: '39fca9b18700e74ae5ca04762448b0d97fbbf53a', name: "qr-code" }), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
+            this.currencyCountry !== 'AR' && h("rebill-icon", { key: '3f53faaf50581c921016d058ffa867d08716af96', name: "bank" }), h("rebill-typography", { key: 'ebf2f81bbcc27e0cc32d609991f7ffbdd8bd65d1', variant: "body2-small", color: COLORS_ENUM.NEUTRALS_700, style: { display: 'flex', alignItems: 'center' } }, I18nService.translate(this.paymentMethod === PAYMENT_METHOD_ENUM.CARD
             ? 'paymentMethods.cardDescription'
             : this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER &&
                 this.currencyCountry === 'AR'
                 ? 'paymentMethods.bank_transfer_qr'
-                : `paymentMethods.${this.paymentMethod}`))), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (h("div", { key: '136cb1d4f9d4e1788688ceabaf229b2a5d04fc16', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => h("rebill-icon", { name: iconName, key: iconName }))) : (h("rebill-icon", { name: "card" }))))));
+                : `paymentMethods.${this.paymentMethod}`))), this.paymentMethod === PAYMENT_METHOD_ENUM.BANK_TRANSFER && (h("div", { key: '570bcb9415b1a4d65482c3d52d497c3a9829f98e', class: "icon-container" }, this.icons.length > 0 ? (this.icons.map(iconName => h("rebill-icon", { name: iconName, key: iconName }))) : (h("rebill-icon", { name: "card" }))))));
     }
     static get is() { return "single-payment-method"; }
     static get originalStyleUrls() {

package/dist/collection/components/shared/timeline/timeline-debit-day.js

@@ -242,7 +242,7 @@ export class TimelineDebitDay {
     }
     render() {
         const events = this.buildEvents();
-        return (h("div", { key: 'f8f359f16049d37a4a45254f65964059f8d678ca', class: "timeline-container" }, h("div", { key: '9ba1af80fb3239bb763b09bb6796abd39387d8a4', class: "timeline" }, events.map((event, index) => this.renderEvent(event, index === events.length - 1, index === 0)))));
+        return (h("div", { key: 'ef56072d4c83ca886b0dc7fded2d21cece3c58f8', class: "timeline-container" }, h("div", { key: '420ac37e41eac4cac58cd813fe8d32de218425ba', class: "timeline" }, events.map((event, index) => this.renderEvent(event, index === events.length - 1, index === 0)))));
     }
     static get is() { return "rebill-timeline-debit-day"; }
     static get originalStyleUrls() {