rebill-web-components-sdk 1.8.3-beta.3 → 1.8.3-beta.5

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

@@ -1 +1 @@
-{"version":3,"file":"input-text.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-text/input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-text',\n  styleUrl: 'input-text.css',\n  shadow: false,\n})\nexport class InputText {\n  @Element() el: HTMLElement;\n  private inputElement: HTMLInputElement;\n\n  /** Etiqueta que se muestra arriba del input */\n  @Prop() label: string = '';\n  /** Placeholder del input */\n  @Prop() placeholder: string = '';\n  /** Valor del input */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del input */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Icono a la izquierda */\n  @Prop() leftIcon: string;\n  /** Icono a la derecha */\n  @Prop() rightIcon: string;\n  /** Permitir limpiar el input */\n  @Prop() clearable: boolean = false;\n  /** Variacion de estilo del input */\n  @Prop() variant: 'default' | 'floating' = 'default';\n  /** Convertir texto a mayúsculas automáticamente */\n  @Prop() uppercase: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string }>;\n  /** Evento al hacer clic en el icono derecho */\n  @Event() rightIconClick: EventEmitter<{ id: string }>;\n  /** Evento al salir del input */\n  @Event() blur: EventEmitter<{ id: string; value: string }>;\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.value = formData[this.id];\n    }\n  }\n\n  private onInput = (event: Event) => {\n    if (this.disabled) return;\n    const input = event.target as HTMLInputElement;\n    let inputValue = input.value;\n\n    if (this.id === 'email') {\n      inputValue = inputValue.toLowerCase();\n      input.value = inputValue;\n    } else if (this.uppercase) {\n      inputValue = inputValue.toUpperCase();\n      input.value = inputValue;\n    }\n\n    this.value = inputValue;\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onClear = () => {\n    if (this.disabled) return;\n    this.value = '';\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onRightIconClick = () => {\n    if (this.disabled) return;\n    this.rightIconClick.emit({ id: this.id });\n  };\n\n  private onBlur = () => {\n    const trimmedValue = this.value.trim();\n\n    if (trimmedValue !== this.value) {\n      this.value = trimmedValue;\n      this.input.emit({ id: this.id, value: this.value });\n    }\n\n    this.blur.emit({ id: this.id, value: this.value });\n  };\n\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement | null> {\n    return this.inputElement;\n  }\n\n  render() {\n    const isFloating = this.variant === 'floating';\n\n    const inputClasses = {\n      'input-element': true,\n      'input-error': !!this.error,\n    };\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'floating-label': isFloating,\n      'has-left-icon': !!this.leftIcon,\n      'has-right-icon': !!this.rightIcon,\n    };\n\n    return (\n      <div class=\"input-container\">\n        {!isFloating && this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div class={wrapperClasses}>\n          {this.leftIcon && (\n            <div class=\"icon-left\">\n              <rebill-icon name={this.leftIcon}></rebill-icon>\n            </div>\n          )}\n          <input\n            ref={el => (this.inputElement = el)}\n            type=\"text\"\n            class={inputClasses}\n            placeholder={isFloating ? this.label : this.placeholder}\n            value={this.value}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n            disabled={this.disabled}\n            style={{\n              paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',\n              paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',\n            }}\n          />\n          {isFloating && <label class=\"input-label\">{this.label}</label>}\n          {this.clearable && this.value && (\n            <div class=\"icon-right\" onClick={this.onClear}>\n              <rebill-icon name=\"x\"></rebill-icon>\n            </div>\n          )}\n          {this.rightIcon && !this.clearable && (\n            <div class=\"icon-right\" onClick={this.onRightIconClick}>\n              <rebill-icon name={this.rightIcon}></rebill-icon>\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"input-text.js","sourceRoot":"","sources":["../../../../../src/components/shared/inputs/input-text/input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Listen, Method, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'rebill-input-text',\n  styleUrl: 'input-text.css',\n  shadow: false,\n})\nexport class InputText {\n  @Element() el: HTMLElement;\n  private inputElement: HTMLInputElement;\n\n  /** Etiqueta que se muestra arriba del input */\n  @Prop() label: string = '';\n  /** Placeholder del input */\n  @Prop() placeholder: string = '';\n  /** Valor del input */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n  /** Mensaje de error */\n  @Prop() error: string = '';\n  /** ID del input */\n  @Prop() id: string = '';\n  /** Estado deshabilitado */\n  @Prop() disabled: boolean = false;\n  /** Icono a la izquierda */\n  @Prop() leftIcon: string;\n  /** Icono a la derecha */\n  @Prop() rightIcon: string;\n  /** Permitir limpiar el input */\n  @Prop() clearable: boolean = false;\n  /** Variacion de estilo del input */\n  @Prop() variant: 'default' | 'floating' = 'default';\n  /** Convertir texto a mayúsculas automáticamente */\n  @Prop() uppercase: boolean = false;\n  /** Evento al cambiar el valor */\n  @Event() input: EventEmitter<{ id: string; value: string }>;\n  /** Evento al hacer clic en el icono derecho */\n  @Event() rightIconClick: EventEmitter<{ id: string }>;\n  /** Evento al salir del input */\n  @Event() blur: EventEmitter<{ id: string; value: string }>;\n  @Listen('change', { target: 'document' })\n  handleFormChange(event: CustomEvent) {\n    const formData = event.detail;\n    if (formData && this.id in formData) {\n      this.value = formData[this.id];\n    }\n  }\n\n  private onInput = (event: Event) => {\n    if (this.disabled) return;\n    const input = event.target as HTMLInputElement;\n    let inputValue = input.value;\n\n    if (this.id === 'email') {\n      inputValue = inputValue.toLowerCase();\n      input.value = inputValue;\n    } else if (this.uppercase) {\n      inputValue = inputValue.toUpperCase();\n      input.value = inputValue;\n    }\n\n    this.value = inputValue;\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onClear = () => {\n    if (this.disabled) return;\n    this.value = '';\n    this.input.emit({ id: this.id, value: this.value });\n  };\n\n  private onRightIconClick = () => {\n    if (this.disabled) return;\n    this.rightIconClick.emit({ id: this.id });\n  };\n\n  private onBlur = () => {\n    const trimmedValue = this.value.trim();\n\n    if (trimmedValue !== this.value) {\n      this.value = trimmedValue;\n      this.input.emit({ id: this.id, value: this.value });\n    }\n\n    this.blur.emit({ id: this.id, value: this.value });\n  };\n\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement | null> {\n    return this.inputElement;\n  }\n\n  render() {\n    const isFloating = this.variant === 'floating';\n\n    const inputClasses = {\n      'input-element': true,\n      'input-error': !!this.error,\n    };\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'floating-label': isFloating,\n      'has-left-icon': !!this.leftIcon,\n      'has-right-icon': !!this.rightIcon,\n    };\n\n    return (\n      <div class=\"input-container\">\n        {!isFloating && this.label && (\n          <label class={`input-label ${this.disabled ? 'disabled' : ''}`}>{this.label}</label>\n        )}\n        <div class={wrapperClasses}>\n          {this.leftIcon && (\n            <div class=\"icon-left\">\n              <rebill-icon name={this.leftIcon}></rebill-icon>\n            </div>\n          )}\n          <input\n            ref={el => (this.inputElement = el)}\n            type=\"text\"\n            class={inputClasses}\n            placeholder={isFloating ? this.label : this.placeholder}\n            value={this.value}\n            onInput={this.onInput}\n            onBlur={this.onBlur}\n            disabled={this.disabled}\n            style={{\n              paddingLeft: this.leftIcon ? '2.5rem' : '0.75rem',\n              paddingRight: this.clearable || this.rightIcon ? '2.5rem' : '0.75rem',\n            }}\n          />\n          {isFloating && <label class=\"input-text__input-label input-label\">{this.label}</label>}\n          {this.clearable && this.value && (\n            <div class=\"icon-right\" onClick={this.onClear}>\n              <rebill-icon name=\"x\"></rebill-icon>\n            </div>\n          )}\n          {this.rightIcon && !this.clearable && (\n            <div class=\"icon-right\" onClick={this.onRightIconClick}>\n              <rebill-icon name={this.rightIcon}></rebill-icon>\n            </div>\n          )}\n        </div>\n        {this.error && <span class=\"error-message\">{this.error}</span>}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -6,7 +6,7 @@
   align-items: center;
 }
 
-.test-mode-container {
+.mode-sandbox-mobile__test-mode-container {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -15,7 +15,7 @@
   width: 100%;
 }
 
-.overlay {
+.mode-sandbox-mobile__overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -28,7 +28,7 @@
   cursor: pointer;
 }
 
-.test-mode-chip-mobile {
+.mode-sandbox-mobile__test-mode-chip-mobile {
   display: flex;
   width: 100%;
   min-width: auto;
@@ -44,7 +44,7 @@
   z-index: 20;
 }
 
-.chip-content-mobile {
+.mode-sandbox-mobile__chip-content-mobile {
   display: flex;
   align-items: center;
   gap: 2px;
@@ -55,12 +55,17 @@
   margin: 8px;
 }
 
-.test-mode-chip-mobile.expanded .chip-content-mobile {
+.mode-sandbox-mobile__info-icon {
+  display: flex;
+  align-items: center;
+}
+
+.mode-sandbox-mobile__test-mode-chip-mobile.expanded .mode-sandbox-mobile__chip-content-mobile {
   justify-content: flex-end;
   width: 100%;
 }
 
-.cards-dropdown-panel-header {
+.mode-sandbox-mobile__cards-dropdown-panel-header {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -68,7 +73,7 @@
 }
 
 /* Sección de Docs */
-.docs-section {
+.mode-sandbox-mobile__docs-section {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -80,7 +85,7 @@
   margin-top: 8px;
 }
 
-.cards-dropdown-panel {
+.mode-sandbox-mobile__cards-dropdown-panel {
   position: absolute;
   top: 100%;
   left: 0;
@@ -97,20 +102,20 @@
   transform-origin: top center;
 }
 
-.card-section {
+.mode-sandbox-mobile__card-section {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
-.header-content {
+.mode-sandbox-mobile__header-content {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 8px;
 }
 
-.card-details {
+.mode-sandbox-mobile__card-details {
   background: #fafafa;
   border-radius: 8px;
   border: 1px solid #e5e7eb;
@@ -120,7 +125,7 @@
   flex-direction: column;
 }
 
-.card-row {
+.mode-sandbox-mobile__card-row {
   display: flex;
   gap: 12px;
   align-items: stretch;
@@ -133,14 +138,14 @@
   margin: 8px;
 }
 
-.card-value {
+.mode-sandbox-mobile__card-value {
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
 }
 
-.field-value {
+.mode-sandbox-mobile__field-value {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -148,13 +153,13 @@
   max-height: 20px;
 }
 
-.copy-button {
+.mode-sandbox-mobile__copy-button {
   align-items: center;
   margin-left: auto;
   margin-right: 0;
 }
 
-.icon-button {
+.mode-sandbox-mobile__icon-button {
   margin-left: auto;
   margin-right: 16px;
 }

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

@@ -27,13 +27,13 @@ export class RebillTestModeChipMobile {
         window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');
     };
     renderBasicChip() {
-        return (h("div", { class: "chip-content-mobile" }, h("div", { class: "info-icon" }, h("rebill-icon", { name: "circle-info", size: "24px", color: COLORS_ENUM.ORANGE })), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.testMode')), h("div", { class: "icon-button" }, h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, h("rebill-icon", { name: "hamburger" })))));
+        return (h("div", { class: "mode-sandbox-mobile__chip-content-mobile" }, h("div", { class: "mode-sandbox-mobile__info-icon" }, h("rebill-icon", { name: "circle-info", size: "24px", color: COLORS_ENUM.ORANGE })), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, I18nService.translate('sandbox.testMode')), h("div", { class: "mode-sandbox-mobile__icon-button" }, h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, h("rebill-icon", { name: "hamburger" })))));
     }
     renderCardsPanel() {
-        return (h("div", { class: "cards-dropdown-panel" }, h("div", { class: "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: "card-details" }, h("div", { class: "card-section" }, h("div", { class: "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: "card-row" }, h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "field-value field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, h("rebill-icon", { name: "copy" }))))))), h("div", { class: "card-section" }, h("div", { class: "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: "card-row" }, h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cardNumber')), h("div", { class: "field-value" }, h("rebill-icon", { name: "visa" }), h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.exp')), h("div", { class: "field-value" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "01/99"))), h("div", { class: "card-value" }, h("rebill-typography", { variant: "subtitle3", color: COLORS_ENUM.GREY_700 }, I18nService.translate('sandbox.cvv')), h("div", { class: "field-value field-value-with-copy" }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY_DARK }, "123"), h("div", { class: "copy-button" }, h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, h("rebill-icon", { name: "copy" })))))))), h("div", { class: "docs-section", onClick: this.handleDocsClick }, h("rebill-typography", { variant: "subtitle2", color: COLORS_ENUM.PRIMARY }, I18nService.translate('sandbox.docs')), h("rebill-icon", { name: "external-link" }))));
+        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: '9c89ecbf8e6ee940bd56c01cd6d1ade8106cc008', class: `test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: 'df0e79c1765bfa496e25e2ac64a072ed8b806e08', class: "overlay" }), h("div", { key: '005349daa4967dabcb6ce2c8211e60114b606ecc', class: `test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
+        return (h("div", { key: '2051c42d557dcdfc491dc679684aa585e6b8375a', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && h("div", { key: '90291e86c59667a2055457ad99aad90deb8f1dd7', class: "mode-sandbox-mobile__overlay" }), h("div", { key: 'c405adb07262da6175badba97245914469480905', 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/mode-sandbox/mode-sandbox-mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"mode-sandbox-mobile.js","sourceRoot":"","sources":["../../../../src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-mode-sandbox-mobile',\n  styleUrl: 'mode-sandbox-mobile.css',\n  shadow: false,\n})\nexport class RebillTestModeChipMobile {\n  @Element() el: HTMLElement;\n  @State() isPanelVisible = false;\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\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.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  private togglePanel = () => {\n    this.isPanelVisible = !this.isPanelVisible;\n  };\n\n  private handleCopy = (text: string) => {\n    copyToClipboard(text);\n    this.isPanelVisible = false;\n  };\n\n  private handleDocsClick = () => {\n    window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n  };\n\n  private renderBasicChip() {\n    return (\n      <div class=\"chip-content-mobile\">\n        <div class=\"info-icon\">\n          <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n        </div>\n        <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n          {I18nService.translate('sandbox.testMode')}\n        </rebill-typography>\n        <div class=\"icon-button\">\n          <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n            <rebill-icon name=\"hamburger\" />\n          </rebill-button>\n        </div>\n      </div>\n    );\n  }\n\n  private renderCardsPanel() {\n    return (\n      <div class=\"cards-dropdown-panel\">\n        <div class=\"cards-dropdown-panel-header\">\n          <rebill-icon name=\"card-test\" />\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            {I18nService.translate('sandbox.cardTest')}\n          </rebill-typography>\n        </div>\n        <div class=\"card-details\">\n          <div class=\"card-section\">\n            <div class=\"header-content\">\n              <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.successPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"card-row\">\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4539148803436467\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"field-value field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-section\">\n            <div class=\"header-content\">\n              <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.rejectedPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"card-row\">\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4485364739527352\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"field-value field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"docs-section\" onClick={this.handleDocsClick}>\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n            {I18nService.translate('sandbox.docs')}\n          </rebill-typography>\n          <rebill-icon name=\"external-link\" />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div class={`test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}>\n        {this.isPanelVisible && <div class=\"overlay\"></div>}\n        <div class={`test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}>\n          {this.renderBasicChip()}\n        </div>\n        {this.isPanelVisible && this.renderCardsPanel()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mode-sandbox-mobile.js","sourceRoot":"","sources":["../../../../src/components/shared/mode-sandbox/mode-sandbox-mobile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, State } from '@stencil/core';\nimport i18n from '../../../i18n/i18n.config';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { copyToClipboard } from '../../../utils/clipboard';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-mode-sandbox-mobile',\n  styleUrl: 'mode-sandbox-mobile.css',\n  shadow: false,\n})\nexport class RebillTestModeChipMobile {\n  @Element() el: HTMLElement;\n  @State() isPanelVisible = false;\n  @State() currentLanguage: string = I18nService.getCurrentLanguage();\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.currentLanguage = I18nService.getCurrentLanguage();\n  };\n\n  private togglePanel = () => {\n    this.isPanelVisible = !this.isPanelVisible;\n  };\n\n  private handleCopy = (text: string) => {\n    copyToClipboard(text);\n    this.isPanelVisible = false;\n  };\n\n  private handleDocsClick = () => {\n    window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');\n  };\n\n  private renderBasicChip() {\n    return (\n      <div class=\"mode-sandbox-mobile__chip-content-mobile\">\n        <div class=\"mode-sandbox-mobile__info-icon\">\n          <rebill-icon name=\"circle-info\" size=\"24px\" color={COLORS_ENUM.ORANGE} />\n        </div>\n        <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n          {I18nService.translate('sandbox.testMode')}\n        </rebill-typography>\n        <div class=\"mode-sandbox-mobile__icon-button\">\n          <rebill-button variant=\"text\" size=\"small\" onClick={this.togglePanel}>\n            <rebill-icon name=\"hamburger\" />\n          </rebill-button>\n        </div>\n      </div>\n    );\n  }\n\n  private renderCardsPanel() {\n    return (\n      <div class=\"mode-sandbox-mobile__cards-dropdown-panel\">\n        <div class=\"mode-sandbox-mobile__cards-dropdown-panel-header\">\n          <rebill-icon name=\"card-test\" />\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n            {I18nService.translate('sandbox.cardTest')}\n          </rebill-typography>\n        </div>\n        <div class=\"mode-sandbox-mobile__card-details\">\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"succes\" color={COLORS_ENUM.GREEN} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.successPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4539148803436467\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4539148803436467 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"mode-sandbox-mobile__card-section\">\n            <div class=\"mode-sandbox-mobile__header-content\">\n              <rebill-icon name=\"rejected\" color={COLORS_ENUM.ERROR} />\n              <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                {I18nService.translate('sandbox.rejectedPayment')}\n              </rebill-typography>\n            </div>\n            <div class=\"mode-sandbox-mobile__card-row\">\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cardNumber')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-icon name=\"visa\" />\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    4485364739527352\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.exp')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    01/99\n                  </rebill-typography>\n                </div>\n              </div>\n              <div class=\"mode-sandbox-mobile__card-value\">\n                <rebill-typography variant=\"subtitle3\" color={COLORS_ENUM.GREY_700}>\n                  {I18nService.translate('sandbox.cvv')}\n                </rebill-typography>\n                <div class=\"mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy\">\n                  <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY_DARK}>\n                    123\n                  </rebill-typography>\n                  <div class=\"mode-sandbox-mobile__copy-button\">\n                    <rebill-button\n                      variant=\"text\"\n                      size=\"small\"\n                      onClick={() => this.handleCopy('4485364739527352 01/99 123')}\n                    >\n                      <rebill-icon name=\"copy\" />\n                    </rebill-button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"mode-sandbox-mobile__docs-section\" onClick={this.handleDocsClick}>\n          <rebill-typography variant=\"subtitle2\" color={COLORS_ENUM.PRIMARY}>\n            {I18nService.translate('sandbox.docs')}\n          </rebill-typography>\n          <rebill-icon name=\"external-link\" />\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div\n        class={`mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}`}\n      >\n        {this.isPanelVisible && <div class=\"mode-sandbox-mobile__overlay\"></div>}\n        <div\n          class={`mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}`}\n        >\n          {this.renderBasicChip()}\n        </div>\n        {this.isPanelVisible && this.renderCardsPanel()}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/shared/organization-logo/organization-logo.css

@@ -44,12 +44,6 @@
   --rebill-color-grey-100: #aeaeae;
 }
 
-/* Estilos globales para prevenir interferencias de botones de descarga */
-* {
-  /* Prevenir cambios de fondo cuando se presiona cualquier botón */
-  transition: none !important;
-}
-
 /* Proteger elementos específicos de interferencias */
 .qr-container,
 .qr-image,

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

@@ -44,12 +44,6 @@
   --rebill-color-grey-100: #aeaeae;
 }
 
-/* Estilos globales para prevenir interferencias de botones de descarga */
-* {
-  /* Prevenir cambios de fondo cuando se presiona cualquier botón */
-  transition: none !important;
-}
-
 /* Proteger elementos específicos de interferencias */
 .qr-container,
 .qr-image,

package/dist/collection/components/shared/typography/typography.css

@@ -44,12 +44,6 @@
   --rebill-color-grey-100: #aeaeae;
 }
 
-/* Estilos globales para prevenir interferencias de botones de descarga */
-* {
-  /* Prevenir cambios de fondo cuando se presiona cualquier botón */
-  transition: none !important;
-}
-
 /* Proteger elementos específicos de interferencias */
 .qr-container,
 .qr-image,

package/dist/components/CardSkeleton.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
 
-const cardSkeletonCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}*{transition:none !important}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}.iframe-skeleton{display:flex;flex-direction:column;gap:16px}.input-skeleton{width:100%;height:40px;background:var(--rebill-color-border-primary);border-radius:8px;border:1px solid var(--rebill-color-border-primary)}";
+const cardSkeletonCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}.iframe-skeleton{display:flex;flex-direction:column;gap:16px}.input-skeleton{width:100%;height:40px;background:var(--rebill-color-border-primary);border-radius:8px;border:1px solid var(--rebill-color-border-primary)}";
 
 const CardSkeleton = /*@__PURE__*/ proxyCustomElement(class CardSkeleton extends H {
     constructor() {

package/dist/components/CardSkeleton.js.map

@@ -1 +1 @@
-{"file":"CardSkeleton.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gjEAAgjE;;MCO3jE,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;IACvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAG,CAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAG,CAAA,CAC1B;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/payment-method-selector/card-fields/iframe/skeleton/cardSkeleton.css?tag=card-skeleton","src/components/checkout/payment-method-selector/card-fields/iframe/skeleton/CardSkeleton.tsx"],"sourcesContent":["@import '../../../../../../styles/variables.css';\n\n.iframe-skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.input-skeleton {\n  width: 100%;\n  height: 40px;\n  background: var(--rebill-color-border-primary);\n  border-radius: 8px;\n  border: 1px solid var(--rebill-color-border-primary);\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'card-skeleton',\n  styleUrl: './cardSkeleton.css',\n  shadow: false,\n})\nexport class CardSkeleton {\n  render() {\n    return (\n      <div class=\"iframe-skeleton\">\n        <div class=\"input-skeleton\" />\n        <div class=\"input-skeleton\" />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"CardSkeleton.js","mappings":";;AAAA,MAAM,eAAe,GAAG,mhEAAmhE;;MCO9hE,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;IACvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAG,CAAA,EAC9B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAG,CAAA,CAC1B;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkout/payment-method-selector/card-fields/iframe/skeleton/cardSkeleton.css?tag=card-skeleton","src/components/checkout/payment-method-selector/card-fields/iframe/skeleton/CardSkeleton.tsx"],"sourcesContent":["@import '../../../../../../styles/variables.css';\n\n.iframe-skeleton {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.input-skeleton {\n  width: 100%;\n  height: 40px;\n  background: var(--rebill-color-border-primary);\n  border-radius: 8px;\n  border: 1px solid var(--rebill-color-border-primary);\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'card-skeleton',\n  styleUrl: './cardSkeleton.css',\n  shadow: false,\n})\nexport class CardSkeleton {\n  render() {\n    return (\n      <div class=\"iframe-skeleton\">\n        <div class=\"input-skeleton\" />\n        <div class=\"input-skeleton\" />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/address.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './input-select.js';
 import { d as defineCustomElement$2 } from './input-text.js';
 import { d as defineCustomElement$1 } from './typography.js';
 
-const addressCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}*{transition:none !important}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}:host{display:block}.billing-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.address-container{display:flex;flex-direction:column;gap:16px;width:100%}.state-zip-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.state-zip-row rebill-input-select,.state-zip-row rebill-input-text{flex:1}.search-input-container{margin-top:8px}.manual-entry-link-wrapper{margin-top:8px;text-align:left}.manual-entry-link{background:none;border:none;color:var(--rebill-color-primary);cursor:pointer;text-decoration:underline;font-size:14px;padding:4px 8px;transition:color 0.2s ease;text-decoration:none}.manual-entry-link:hover{text-decoration:underline;text-decoration-color:var(--rebill-color-text-secondary)}.same-as-shipping-section{margin:24px 0;padding:16px 0}.shipping-address-section{margin-top:24px;padding-top:24px}";
+const addressCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}:host{display:block}.billing-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.address-container{display:flex;flex-direction:column;gap:16px;width:100%}.state-zip-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.state-zip-row rebill-input-select,.state-zip-row rebill-input-text{flex:1}.search-input-container{margin-top:8px}.manual-entry-link-wrapper{margin-top:8px;text-align:left}.manual-entry-link{background:none;border:none;color:var(--rebill-color-primary);cursor:pointer;text-decoration:underline;font-size:14px;padding:4px 8px;transition:color 0.2s ease;text-decoration:none}.manual-entry-link:hover{text-decoration:underline;text-decoration-color:var(--rebill-color-text-secondary)}.same-as-shipping-section{margin:24px 0;padding:16px 0}.shipping-address-section{margin-top:24px;padding-top:24px}";
 
 const Address = /*@__PURE__*/ proxyCustomElement(class Address extends H {
     constructor() {

package/dist/components/address.js.map

@@ -1 +1 @@
-{"file":"address.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/address/address.css?tag=rebill-address","src/components/checkout/address/address.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n}\n\n.billing-header-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.address-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n\n.state-zip-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n.state-zip-row rebill-input-select,\n.state-zip-row rebill-input-text {\n  flex: 1;\n}\n\n.search-input-container {\n  margin-top: 8px;\n}\n\n.manual-entry-link-wrapper {\n  margin-top: 8px;\n  text-align: left;\n}\n\n.manual-entry-link {\n  background: none;\n  border: none;\n  color: var(--rebill-color-primary);\n  cursor: pointer;\n  text-decoration: underline;\n  font-size: 14px;\n  padding: 4px 8px;\n  transition: color 0.2s ease;\n  text-decoration: none;\n}\n\n.manual-entry-link:hover {\n  text-decoration: underline;\n  text-decoration-color: var(--rebill-color-text-secondary);\n}\n\n.same-as-shipping-section {\n  margin: 24px 0;\n  padding: 16px 0;\n}\n\n.shipping-address-section {\n  margin-top: 24px;\n  padding-top: 24px;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { onChange, sessionState, SessionStore } from '../../../store/session.store';\nimport { AddressComponents } from '../../../utils';\n\n@Component({\n  tag: 'rebill-address',\n  styleUrl: 'address.css',\n  shadow: false,\n})\nexport class Address {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true, reflect: true }) billingView: 'search' | 'form' = 'search';\n  @State() currentBillingStateOptions: { label: string; value: string }[] = [];\n  @State() isLoadingAddress: boolean = false;\n  @Prop() disabled: boolean = false;\n\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n\n  @Prop() errors?: {\n    'billing-country': string;\n    'billing-state': string;\n    'billing-address': string;\n    'billing-city': string;\n    'billing-zip': string;\n  } | null = null;\n\n  private unsubscribeAddressStore?: () => void;\n\n  private translateError(errorKey: string | undefined): string {\n    if (!errorKey) return '';\n    if (errorKey.includes('validation.') || errorKey.includes('paymentErrors.')) {\n      return I18nService.translate(errorKey);\n    }\n    return errorKey;\n  }\n\n  @Event() addressUpdated: EventEmitter<{\n    country: string;\n    state: string;\n    address: string;\n    city: string;\n    zip: string;\n  }>;\n\n  componentDidLoad() {\n    this.unsubscribeAddressStore = onChange('data', () => {\n      const billingAddress = sessionState.data.userInformation.address?.billingAddress;\n\n      if (billingAddress) {\n        const addressData: AddressComponents = {\n          country: billingAddress.country || '',\n          state: billingAddress.state || '',\n          address: billingAddress.address || '',\n          city: billingAddress.city || '',\n          zip: billingAddress.zip || '',\n        };\n\n        this.emitInputEventsForAddress(addressData);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeAddressStore) {\n      this.unsubscribeAddressStore();\n    }\n  }\n\n  private async handleAddressSelected(address: AddressComponents) {\n    this.isLoadingAddress = true;\n\n    // Normalize text function for handling accents and special characters\n    const normalizeText = (text: string) => {\n      return text\n        .toLowerCase()\n        .normalize('NFD')\n        .replace(/[\\u0300-\\u036f]/g, '') // Remove accents\n        .trim();\n    };\n\n    SessionStore.setBillingAddress(address);\n    this.billingView = 'form';\n\n    if (address.country) {\n      await this.loadStatesForCountry(address.country);\n\n      // Compare Google state with API states\n      if (address.state && this.currentBillingStateOptions.length > 0) {\n        const exactMatch = this.currentBillingStateOptions.find(\n          option => option.value.toLowerCase() === address.state.toLowerCase(),\n        );\n\n        const partialMatch = this.currentBillingStateOptions.find(\n          option =>\n            option.value.toLowerCase().includes(address.state.toLowerCase()) ||\n            address.state.toLowerCase().includes(option.value.toLowerCase()),\n        );\n\n        // Try to find matches with common variations\n        const normalizedGoogleState = normalizeText(address.state)\n          .replace('ciudad de ', '')\n          .replace('estado de ', '')\n          .replace('provincia de ', '');\n\n        const normalizedMatch = this.currentBillingStateOptions.find(option => {\n          const normalizedOption = normalizeText(option.value)\n            .replace('ciudad de ', '')\n            .replace('estado de ', '')\n            .replace('provincia de ', '');\n\n          const matches =\n            normalizedOption === normalizedGoogleState ||\n            normalizedOption.startsWith(normalizedGoogleState + ' ') ||\n            normalizedGoogleState.startsWith(normalizedOption + ' ');\n          return matches;\n        });\n\n        if (exactMatch) {\n          address.state = exactMatch.value;\n        } else if (normalizedMatch) {\n          address.state = normalizedMatch.value;\n        } else address.state = partialMatch.value;\n      }\n    }\n    this.addressUpdated.emit({\n      country: address.country || '',\n      address: address.address || '',\n      city: address.city || '',\n      state: address.state || '',\n      zip: address.zip || '',\n    });\n\n    // Use requestAnimationFrame to ensure the form is rendered with the new state options\n    // before emitting events. This ensures the state field can be properly populated.\n    requestAnimationFrame(() => {\n      this.emitInputEventsForAddress(address);\n      setTimeout(() => {\n        this.isLoadingAddress = false;\n      }, 500);\n    });\n  }\n\n  private emitInputEventsForAddress(address: AddressComponents) {\n    // Emit input events for each address field that has a value\n    // This mimics user input to properly clear validation errors\n    const fields = [\n      { id: `billing-country`, value: address.country },\n      { id: `billing-address`, value: address.address },\n      { id: `billing-city`, value: address.city },\n      { id: `billing-state`, value: address.state },\n      { id: `billing-zip`, value: address.zip },\n    ];\n\n    fields.forEach(field => {\n      if (field.value) {\n        this.emitInputEvent(field.id, field.value);\n      }\n    });\n  }\n\n  private emitInputEvent(id: string, value: string) {\n    if (value) {\n      // Create and dispatch a custom input event that the form component can listen to\n      const inputEvent = new CustomEvent('input', {\n        detail: { id, value },\n        bubbles: true,\n        composed: true,\n      });\n      this.el.dispatchEvent(inputEvent);\n    }\n  }\n\n  private async loadStatesForCountry(countryCode: string) {\n    try {\n      const response = await api.data.getStates(countryCode);\n      const statesResponse = response.data;\n      const stateOptions =\n        statesResponse && statesResponse.states\n          ? statesResponse.states.map(state => ({ label: state, value: state }))\n          : [];\n\n      this.currentBillingStateOptions = stateOptions;\n    } catch (error) {\n      this.currentBillingStateOptions = [];\n    }\n  }\n\n  private handleManualEntry = () => {\n    this.billingView = 'form';\n  };\n\n  private handleSearchEntry = () => {\n    this.billingView = 'search';\n  };\n\n  private async handleInput(field: string, value: string) {\n    if (value === undefined) return;\n    SessionStore.setBillingAddress({ [field]: value } as any);\n    // Emit input event to form to sync with form data\n    this.emitInputEvent(`billing-${field}`, value);\n\n    // If country changes, load states for the new country\n    if (field === 'country') {\n      await this.loadStatesForCountry(value);\n      // Clear the current state selection since the country changed\n      SessionStore.setBillingAddress({ state: '' } as any);\n    }\n  }\n\n  private renderAddressHeader() {\n    return (\n      <div class=\"billing-header-row\">\n        <rebill-typography variant=\"body2\">\n          {I18nService.translate('billingAddress.title')}\n        </rebill-typography>\n      </div>\n    );\n  }\n\n  private renderAddressForm() {\n    if (this.billingView === 'search') {\n      const addressError =\n        this.translateError(this.errors?.['billing-address']) ||\n        this.translateError(this.errors?.['billing-country']) ||\n        this.translateError(this.errors?.['billing-state']) ||\n        this.translateError(this.errors?.['billing-city']) ||\n        this.translateError(this.errors?.['billing-zip']) ||\n        '';\n      return (\n        <div>\n          {this.renderAddressHeader()}\n          <rebill-address-search\n            onAddressSelected={e => this.handleAddressSelected(e.detail)}\n            onManualEntryRequested={() => this.handleManualEntry()}\n            error={addressError}\n            disabled={this.disabled}\n          />\n        </div>\n      );\n    }\n\n    const errorsToShow = this.isLoadingAddress ? null : this.errors;\n\n    return (\n      <div>\n        {this.renderAddressHeader()}\n        <rebill-address-form\n          countryOptions={this.countryOptions}\n          stateOptions={this.currentBillingStateOptions}\n          errors={errorsToShow}\n          disabled={this.disabled}\n          onFieldChanged={e => this.handleInput(e.detail.field, e.detail.value)}\n          onSearchRequested={() => this.handleSearchEntry()}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div>\n        {/* Billing Address */}\n        {this.renderAddressForm()}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"address.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","sessionState"],"sources":["src/components/checkout/address/address.css?tag=rebill-address","src/components/checkout/address/address.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n}\n\n.billing-header-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n\n.address-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n\n.state-zip-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n.state-zip-row rebill-input-select,\n.state-zip-row rebill-input-text {\n  flex: 1;\n}\n\n.search-input-container {\n  margin-top: 8px;\n}\n\n.manual-entry-link-wrapper {\n  margin-top: 8px;\n  text-align: left;\n}\n\n.manual-entry-link {\n  background: none;\n  border: none;\n  color: var(--rebill-color-primary);\n  cursor: pointer;\n  text-decoration: underline;\n  font-size: 14px;\n  padding: 4px 8px;\n  transition: color 0.2s ease;\n  text-decoration: none;\n}\n\n.manual-entry-link:hover {\n  text-decoration: underline;\n  text-decoration-color: var(--rebill-color-text-secondary);\n}\n\n.same-as-shipping-section {\n  margin: 24px 0;\n  padding: 16px 0;\n}\n\n.shipping-address-section {\n  margin-top: 24px;\n  padding-top: 24px;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { api } from '../../../api';\nimport { I18nService } from '../../../i18n/i18n.service';\nimport { onChange, sessionState, SessionStore } from '../../../store/session.store';\nimport { AddressComponents } from '../../../utils';\n\n@Component({\n  tag: 'rebill-address',\n  styleUrl: 'address.css',\n  shadow: false,\n})\nexport class Address {\n  @Element() el: HTMLElement;\n  @Prop({ mutable: true, reflect: true }) billingView: 'search' | 'form' = 'search';\n  @State() currentBillingStateOptions: { label: string; value: string }[] = [];\n  @State() isLoadingAddress: boolean = false;\n  @Prop() disabled: boolean = false;\n\n  @Prop() countryOptions: { label: string; value: string }[] = [];\n\n  @Prop() errors?: {\n    'billing-country': string;\n    'billing-state': string;\n    'billing-address': string;\n    'billing-city': string;\n    'billing-zip': string;\n  } | null = null;\n\n  private unsubscribeAddressStore?: () => void;\n\n  private translateError(errorKey: string | undefined): string {\n    if (!errorKey) return '';\n    if (errorKey.includes('validation.') || errorKey.includes('paymentErrors.')) {\n      return I18nService.translate(errorKey);\n    }\n    return errorKey;\n  }\n\n  @Event() addressUpdated: EventEmitter<{\n    country: string;\n    state: string;\n    address: string;\n    city: string;\n    zip: string;\n  }>;\n\n  componentDidLoad() {\n    this.unsubscribeAddressStore = onChange('data', () => {\n      const billingAddress = sessionState.data.userInformation.address?.billingAddress;\n\n      if (billingAddress) {\n        const addressData: AddressComponents = {\n          country: billingAddress.country || '',\n          state: billingAddress.state || '',\n          address: billingAddress.address || '',\n          city: billingAddress.city || '',\n          zip: billingAddress.zip || '',\n        };\n\n        this.emitInputEventsForAddress(addressData);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribeAddressStore) {\n      this.unsubscribeAddressStore();\n    }\n  }\n\n  private async handleAddressSelected(address: AddressComponents) {\n    this.isLoadingAddress = true;\n\n    // Normalize text function for handling accents and special characters\n    const normalizeText = (text: string) => {\n      return text\n        .toLowerCase()\n        .normalize('NFD')\n        .replace(/[\\u0300-\\u036f]/g, '') // Remove accents\n        .trim();\n    };\n\n    SessionStore.setBillingAddress(address);\n    this.billingView = 'form';\n\n    if (address.country) {\n      await this.loadStatesForCountry(address.country);\n\n      // Compare Google state with API states\n      if (address.state && this.currentBillingStateOptions.length > 0) {\n        const exactMatch = this.currentBillingStateOptions.find(\n          option => option.value.toLowerCase() === address.state.toLowerCase(),\n        );\n\n        const partialMatch = this.currentBillingStateOptions.find(\n          option =>\n            option.value.toLowerCase().includes(address.state.toLowerCase()) ||\n            address.state.toLowerCase().includes(option.value.toLowerCase()),\n        );\n\n        // Try to find matches with common variations\n        const normalizedGoogleState = normalizeText(address.state)\n          .replace('ciudad de ', '')\n          .replace('estado de ', '')\n          .replace('provincia de ', '');\n\n        const normalizedMatch = this.currentBillingStateOptions.find(option => {\n          const normalizedOption = normalizeText(option.value)\n            .replace('ciudad de ', '')\n            .replace('estado de ', '')\n            .replace('provincia de ', '');\n\n          const matches =\n            normalizedOption === normalizedGoogleState ||\n            normalizedOption.startsWith(normalizedGoogleState + ' ') ||\n            normalizedGoogleState.startsWith(normalizedOption + ' ');\n          return matches;\n        });\n\n        if (exactMatch) {\n          address.state = exactMatch.value;\n        } else if (normalizedMatch) {\n          address.state = normalizedMatch.value;\n        } else address.state = partialMatch.value;\n      }\n    }\n    this.addressUpdated.emit({\n      country: address.country || '',\n      address: address.address || '',\n      city: address.city || '',\n      state: address.state || '',\n      zip: address.zip || '',\n    });\n\n    // Use requestAnimationFrame to ensure the form is rendered with the new state options\n    // before emitting events. This ensures the state field can be properly populated.\n    requestAnimationFrame(() => {\n      this.emitInputEventsForAddress(address);\n      setTimeout(() => {\n        this.isLoadingAddress = false;\n      }, 500);\n    });\n  }\n\n  private emitInputEventsForAddress(address: AddressComponents) {\n    // Emit input events for each address field that has a value\n    // This mimics user input to properly clear validation errors\n    const fields = [\n      { id: `billing-country`, value: address.country },\n      { id: `billing-address`, value: address.address },\n      { id: `billing-city`, value: address.city },\n      { id: `billing-state`, value: address.state },\n      { id: `billing-zip`, value: address.zip },\n    ];\n\n    fields.forEach(field => {\n      if (field.value) {\n        this.emitInputEvent(field.id, field.value);\n      }\n    });\n  }\n\n  private emitInputEvent(id: string, value: string) {\n    if (value) {\n      // Create and dispatch a custom input event that the form component can listen to\n      const inputEvent = new CustomEvent('input', {\n        detail: { id, value },\n        bubbles: true,\n        composed: true,\n      });\n      this.el.dispatchEvent(inputEvent);\n    }\n  }\n\n  private async loadStatesForCountry(countryCode: string) {\n    try {\n      const response = await api.data.getStates(countryCode);\n      const statesResponse = response.data;\n      const stateOptions =\n        statesResponse && statesResponse.states\n          ? statesResponse.states.map(state => ({ label: state, value: state }))\n          : [];\n\n      this.currentBillingStateOptions = stateOptions;\n    } catch (error) {\n      this.currentBillingStateOptions = [];\n    }\n  }\n\n  private handleManualEntry = () => {\n    this.billingView = 'form';\n  };\n\n  private handleSearchEntry = () => {\n    this.billingView = 'search';\n  };\n\n  private async handleInput(field: string, value: string) {\n    if (value === undefined) return;\n    SessionStore.setBillingAddress({ [field]: value } as any);\n    // Emit input event to form to sync with form data\n    this.emitInputEvent(`billing-${field}`, value);\n\n    // If country changes, load states for the new country\n    if (field === 'country') {\n      await this.loadStatesForCountry(value);\n      // Clear the current state selection since the country changed\n      SessionStore.setBillingAddress({ state: '' } as any);\n    }\n  }\n\n  private renderAddressHeader() {\n    return (\n      <div class=\"billing-header-row\">\n        <rebill-typography variant=\"body2\">\n          {I18nService.translate('billingAddress.title')}\n        </rebill-typography>\n      </div>\n    );\n  }\n\n  private renderAddressForm() {\n    if (this.billingView === 'search') {\n      const addressError =\n        this.translateError(this.errors?.['billing-address']) ||\n        this.translateError(this.errors?.['billing-country']) ||\n        this.translateError(this.errors?.['billing-state']) ||\n        this.translateError(this.errors?.['billing-city']) ||\n        this.translateError(this.errors?.['billing-zip']) ||\n        '';\n      return (\n        <div>\n          {this.renderAddressHeader()}\n          <rebill-address-search\n            onAddressSelected={e => this.handleAddressSelected(e.detail)}\n            onManualEntryRequested={() => this.handleManualEntry()}\n            error={addressError}\n            disabled={this.disabled}\n          />\n        </div>\n      );\n    }\n\n    const errorsToShow = this.isLoadingAddress ? null : this.errors;\n\n    return (\n      <div>\n        {this.renderAddressHeader()}\n        <rebill-address-form\n          countryOptions={this.countryOptions}\n          stateOptions={this.currentBillingStateOptions}\n          errors={errorsToShow}\n          disabled={this.disabled}\n          onFieldChanged={e => this.handleInput(e.detail.field, e.detail.value)}\n          onSearchRequested={() => this.handleSearchEntry()}\n        />\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <div>\n        {/* Billing Address */}\n        {this.renderAddressForm()}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/collapsible-card2.js

@@ -3,7 +3,7 @@ import { C as COLORS_ENUM } from './color-class-mapper.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './typography.js';
 
-const collapsibleCardCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}*{transition:none !important}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}.collapsible-card{border-radius:8px;border:1px solid var(--rebill-color-border);overflow:hidden}.collapsible-card.flat{border-radius:0 0 8px 8px;border:none;background:var(--rebill-color-grey-100)}.collapsible-card-header{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;padding:8px 16px;color:var(--rebill-color-text-primary);background:var(--rebill-color-background-secondary);cursor:pointer;outline:none;transition:background 0.2s}.chevron{display:flex;align-items:center;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron.open{transform:rotate(-180deg)}.chevron svg path{stroke:var(--rebill-color-text-secondary-light)}.content{max-height:0;overflow:hidden;background:var(--rebill-color-background);transition:max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px}.content.open{max-height:500px;padding:16px}";
+const collapsibleCardCss = ":root{--rebill-color-primary:#3b82f6;--rebill-color-primary-light:rgba(59, 130, 246, 0.1);--rebill-color-primary-hover:#2563eb;--rebill-color-primary-dark:#001131;--rebill-color-primary-dark-text:#000000;--rebill-color-primary-dark-hover:#001c4a;--rebill-color-primary-dark-light:rgba(0, 17, 49, 0.1);--rebill-color-error:#ef4444;--rebill-color-error-background:#fef2f2;--rebill-color-error-light:rgba(239, 68, 68, 0.1);--rebill-color-error-dark:#6f101b;--rebill-color-background:#ffffff;--rebill-color-background-left:#fafafa;--rebill-color-background-right:#f4f5f6;--rebill-color-background-secondary:#f7f8fa;--rebill-color-border:#ebedef;--rebill-color-timeline-connector:#c4c8cf;--rebill-color-neutrals-700:#58616e;--rebill-color-neutrals-500:#9ca3af;--rebill-color-border-primary:#e4e4e7;--rebill-color-text-primary:#3b4049;--rebill-color-text-secondary:#6b7280;--rebill-color-grey-700:#7d7d7d;--rebill-color-text-secondary-light:#a1a1aa;--rebill-color-text-on-primary:#ffffff;--rebill-color-disabled:#9ca3af;--rebill-color-shadow:rgba(0, 0, 0, 0.1);--rebill-color-green:#10b981;--rebill-color-green-text:#257c67;--rebill-color-green-light:rgba(183, 233, 221, 0.15);--rebill-color-green-light-2:rgba(183, 233, 221, 1);--rebill-color-info-background:#d5e4ff;--rebill-color-info-border:#0156f6;--rebill-color-info-text:#172b85;--rebill-color-background-secondary-light:#f7f8fa;--rebill-breakpoint-mobile:768px;--rebill-breakpoint-tablet:1024px;--rebill-breakpoint-desktop:1025px;--rebill-color-orange:#ff9400;--rebill-color-black:#1e2025;--rebill-color-grey-300:#3b4049;--rebill-color-grey-100:#aeaeae}.qr-container,.qr-image,.qr-image svg,.qr-image img,[class*='qr-'],[class*='success'],[class*='receipt']{transition:none !important;animation:none !important;will-change:auto !important}button:active,button:focus,button:hover{isolation:isolate}.collapsible-card{border-radius:8px;border:1px solid var(--rebill-color-border);overflow:hidden}.collapsible-card.flat{border-radius:0 0 8px 8px;border:none;background:var(--rebill-color-grey-100)}.collapsible-card-header{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;padding:8px 16px;color:var(--rebill-color-text-primary);background:var(--rebill-color-background-secondary);cursor:pointer;outline:none;transition:background 0.2s}.chevron{display:flex;align-items:center;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.chevron.open{transform:rotate(-180deg)}.chevron svg path{stroke:var(--rebill-color-text-secondary-light)}.content{max-height:0;overflow:hidden;background:var(--rebill-color-background);transition:max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);padding:0 16px}.content.open{max-height:500px;padding:16px}";
 
 const CollapsibleCard = /*@__PURE__*/ proxyCustomElement(class CollapsibleCard extends H {
     constructor() {

package/dist/components/collapsible-card2.js.map

@@ -1 +1 @@
-{"file":"collapsible-card2.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,6uFAA6uF;;MCQ3vF,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;AAElB,IAAA,MAAM;;IAEN,IAAI,GAAY,IAAI;;IAEpB,OAAO,GAAuB,SAAS;AACtC,IAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAE3B,IAAA,OAAO;IAER,MAAM,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AAChC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,MAAM,EAAA,eAAA,EACL,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAC,QAAQ,EAAA,EAEb,CACE,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,WAAW,GAAG,UAAU,EAC3D,KAAK,EAAE,WAAW,CAAC,YAAY,EAE9B,EAAA,IAAI,CAAC,MAAM,CACM,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CAC/D,CACA,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EAC9C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/collapsible-card/collapsible-card.css?tag=collapsible-card","src/components/shared/collapsible-card/collapsible-card.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n.collapsible-card {\n  border-radius: 8px;\n  border: 1px solid var(--rebill-color-border);\n  overflow: hidden;\n}\n\n/* Variante flat - sin bordes redondeados arriba y sin borde */\n.collapsible-card.flat {\n  border-radius: 0 0 8px 8px;\n  border: none;\n  background: var(--rebill-color-grey-100);\n}\n\n.collapsible-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border: none;\n  padding: 8px 16px;\n  color: var(--rebill-color-text-primary);\n  background: var(--rebill-color-background-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: background 0.2s;\n}\n\n.chevron {\n  display: flex;\n  align-items: center;\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.chevron.open {\n  transform: rotate(-180deg);\n}\n\n.chevron svg path {\n  stroke: var(--rebill-color-text-secondary-light);\n}\n\n.content {\n  max-height: 0;\n  overflow: hidden;\n  background: var(--rebill-color-background);\n  transition:\n    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0 16px;\n}\n.content.open {\n  max-height: 500px;\n  padding: 16px;\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'collapsible-card',\n  styleUrl: 'collapsible-card.css',\n  shadow: false,\n})\nexport class CollapsibleCard {\n  /** Texto del header */\n  @Prop() header: string;\n  /** Estado inicial abierto/cerrado */\n  @Prop() open: boolean = true;\n  /** Variante del estilo: 'default' | 'flat' */\n  @Prop() variant: 'default' | 'flat' = 'default';\n  @State() isOpen: boolean = this.open;\n\n  @Event() toggled: EventEmitter<boolean>;\n\n  private toggle = () => {\n    this.isOpen = !this.isOpen;\n    this.toggled.emit(this.isOpen);\n  };\n\n  render() {\n    return (\n      <div class={`collapsible-card ${this.variant}`}>\n        <button\n          class=\"collapsible-card-header\"\n          onClick={this.toggle}\n          aria-expanded={this.isOpen}\n          type=\"button\"\n        >\n          <rebill-typography\n            variant={this.variant === 'flat' ? 'subtitle2' : 'overline'}\n            color={COLORS_ENUM.TEXT_PRIMARY}\n          >\n            {this.header}\n          </rebill-typography>\n          <span class={{ chevron: true, open: this.isOpen }}>\n            <rebill-icon name=\"chevron-down\" size=\"20px\" color=\"currentColor\" />\n          </span>\n        </button>\n        <div class={{ content: true, open: this.isOpen }}>\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"collapsible-card2.js","mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,gtFAAgtF;;MCQ9tF,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;;;;;;;AAElB,IAAA,MAAM;;IAEN,IAAI,GAAY,IAAI;;IAEpB,OAAO,GAAuB,SAAS;AACtC,IAAA,MAAM,GAAY,IAAI,CAAC,IAAI;AAE3B,IAAA,OAAO;IAER,MAAM,GAAG,MAAK;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AAChC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,4DAAK,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAE,EAAA,EAC5C,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,MAAM,EAAA,eAAA,EACL,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAC,QAAQ,EAAA,EAEb,CACE,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,GAAG,WAAW,GAAG,UAAU,EAC3D,KAAK,EAAE,WAAW,CAAC,YAAY,EAE9B,EAAA,IAAI,CAAC,MAAM,CACM,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EAC/C,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,CAAG,CAC/D,CACA,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,EAAA,EAC9C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/collapsible-card/collapsible-card.css?tag=collapsible-card","src/components/shared/collapsible-card/collapsible-card.tsx"],"sourcesContent":["@import '../../../styles/variables.css';\n\n.collapsible-card {\n  border-radius: 8px;\n  border: 1px solid var(--rebill-color-border);\n  overflow: hidden;\n}\n\n/* Variante flat - sin bordes redondeados arriba y sin borde */\n.collapsible-card.flat {\n  border-radius: 0 0 8px 8px;\n  border: none;\n  background: var(--rebill-color-grey-100);\n}\n\n.collapsible-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border: none;\n  padding: 8px 16px;\n  color: var(--rebill-color-text-primary);\n  background: var(--rebill-color-background-secondary);\n  cursor: pointer;\n  outline: none;\n  transition: background 0.2s;\n}\n\n.chevron {\n  display: flex;\n  align-items: center;\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.chevron.open {\n  transform: rotate(-180deg);\n}\n\n.chevron svg path {\n  stroke: var(--rebill-color-text-secondary-light);\n}\n\n.content {\n  max-height: 0;\n  overflow: hidden;\n  background: var(--rebill-color-background);\n  transition:\n    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),\n    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 0 16px;\n}\n.content.open {\n  max-height: 500px;\n  padding: 16px;\n}\n","import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\nimport { COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'collapsible-card',\n  styleUrl: 'collapsible-card.css',\n  shadow: false,\n})\nexport class CollapsibleCard {\n  /** Texto del header */\n  @Prop() header: string;\n  /** Estado inicial abierto/cerrado */\n  @Prop() open: boolean = true;\n  /** Variante del estilo: 'default' | 'flat' */\n  @Prop() variant: 'default' | 'flat' = 'default';\n  @State() isOpen: boolean = this.open;\n\n  @Event() toggled: EventEmitter<boolean>;\n\n  private toggle = () => {\n    this.isOpen = !this.isOpen;\n    this.toggled.emit(this.isOpen);\n  };\n\n  render() {\n    return (\n      <div class={`collapsible-card ${this.variant}`}>\n        <button\n          class=\"collapsible-card-header\"\n          onClick={this.toggle}\n          aria-expanded={this.isOpen}\n          type=\"button\"\n        >\n          <rebill-typography\n            variant={this.variant === 'flat' ? 'subtitle2' : 'overline'}\n            color={COLORS_ENUM.TEXT_PRIMARY}\n          >\n            {this.header}\n          </rebill-typography>\n          <span class={{ chevron: true, open: this.isOpen }}>\n            <rebill-icon name=\"chevron-down\" size=\"20px\" color=\"currentColor\" />\n          </span>\n        </button>\n        <div class={{ content: true, open: this.isOpen }}>\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/input-text.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h } from './index2.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const inputTextCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-label,.floating-label .input-element:not(:placeholder-shown)~.input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}";
+const inputTextCss = ".input-container{display:flex;flex-direction:column}.input-label{font-size:0.875rem;color:var(--rebill-color-text-primary);font-weight:500;margin-bottom:0.375rem}.input-label.disabled{cursor:not-allowed}.input-element{border-radius:var(--input-group-inner-border-radius, 8px);border:1.5px solid var(--rebill-color-border);padding:10px 14px;font-size:0.875rem;color:var(--rebill-color-text-primary);outline:none;transition:border-color 0.2s;background:var(--rebill-color-background);height:38.33px;box-sizing:border-box}.input-element.input-error{border-color:var(--rebill-color-error)}.input-element:disabled{background-color:var(--rebill-color-background);border-color:var(--rebill-color-disabled);color:var(--rebill-color-text-secondary);cursor:not-allowed;opacity:0.7}select.input-element{padding:10px 30px 10px 14px;appearance:none;cursor:pointer}select.input-element:disabled{cursor:not-allowed}.input-element:focus{border-color:var(--rebill-color-primary)}.input-element:disabled:focus{border-color:var(--rebill-color-disabled)}.input-element::placeholder{color:var(--rebill-color-text-secondary-light);font-size:0.875rem;opacity:1}.select-wrapper.disabled .select-icon{color:var(--rebill-color-disabled)}.error-message{color:var(--rebill-color-error);font-size:0.75rem;margin-top:0.375rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-element{width:100%;box-sizing:border-box}.icon-left,.icon-right{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%)}.icon-left{left:0.75rem;color:var(--rebill-color-text-secondary-light)}.icon-right{right:0.75rem;cursor:pointer;color:var(--rebill-color-text-secondary-light)}.input-element.input-error:focus{flex-direction:column;box-shadow:0 0 0 2px var(--rebill-color-error-light)}.floating-label{position:relative}.floating-label .input-text__input-label{position:absolute;top:50%;left:0.75rem;transform:translateY(-50%);color:var(--rebill-color-text-secondary-light);transition:all 0.1s ease-in-out;pointer-events:none}.floating-label .input-element::placeholder{color:transparent}.floating-label .input-element:focus~.input-text__input-label,.floating-label .input-element:not(:placeholder-shown)~.input-text__input-label{top:0;font-size:0.62rem;color:var(--rebill-color-text-secondary);background-color:var(--rebill-color-background);padding:0 4px;left:0.75rem}.floating-label.has-left-icon .input-text__input-label{left:2.5rem}.input-element:disabled{color:var(--rebill-color-neutrals-500)}.input-wrapper:has(.input-element:disabled) .icon-left,.input-wrapper:has(.input-element:disabled) .icon-right{color:var(--rebill-color-text-secondary-light) !important}";
 
 const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends H {
     constructor() {
@@ -100,7 +100,7 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends H {
         return (h("div", { key: 'ae839c43b839fd758395e38d5fe0a72c55a8ee9f', class: "input-container" }, !isFloating && this.label && (h("label", { key: 'fb636004e05ca2b8e76c2081d060e1a9bd2f9c16', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '9eb98685027a407cc996e84bf305982e52c0284c', class: wrapperClasses }, this.leftIcon && (h("div", { key: '571a39e99cb432c3d64d0d0215ae984460df7f4c', class: "icon-left" }, h("rebill-icon", { key: '179a0b6cd7d749ed04d57000336b1ab852f07972', name: this.leftIcon }))), h("input", { key: 'b572b87584c7bada77123da31b221526e277488b', 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: '429c7dcec5eb91009fb641d81b46044968f9926e', class: "input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'd99318529056a6fc248a5a88049f284f4d637201', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: '2a50251d20d1edeadffac9ebe9fb2c5d8d7818bf', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: 'e5bc2350e31b100edee41a17a357418cc36504c0', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: 'a5b39c778c1cc826ca7ee48d045015f5caed7dd0', name: this.rightIcon })))), this.error && h("span", { key: '091b3de24f95ca6911d05521d10736179bcde4f8', class: "error-message" }, this.error)));
+            } }), isFloating && h("label", { key: 'f08d35728ba65ec0e63deda11f2441418ad8c6d1', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (h("div", { key: 'eb160ca725fca0bb8087b1d06565bcd61839678c', class: "icon-right", onClick: this.onClear }, h("rebill-icon", { key: 'fd75c41488a3eb7ad9226a53d524a7ce68617a9f', name: "x" }))), this.rightIcon && !this.clearable && (h("div", { key: '8c90dafb6d714066c5491a3d39d8029824da3b75', class: "icon-right", onClick: this.onRightIconClick }, h("rebill-icon", { key: 'b4ac09f67ac75efb529e55134b2be0794486846c', name: this.rightIcon })))), this.error && h("span", { key: '6143b1e1a982362681bcb6326a815b7b5fb85c67', class: "error-message" }, this.error)));
     }
     static get style() { return inputTextCss; }
 }, [0, "rebill-input-text", {