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

package/dist/cjs/rebill-address.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"rebill-address.entry.cjs.js","mappings":"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","names":["I18nService","onChange","sessionState","SessionStore","api","h"],"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":"rebill-address.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,opFAAopF;;MCW1pF,OAAO,GAAA,MAAA;;;;;;IAEsB,WAAW,GAAsB,QAAQ;IACxE,0BAA0B,GAAuC,EAAE;IACnE,gBAAgB,GAAY,KAAK;IAClC,QAAQ,GAAY,KAAK;IAEzB,cAAc,GAAuC,EAAE;IAEvD,MAAM,GAMH,IAAI;AAEP,IAAA,uBAAuB;AAEvB,IAAA,cAAc,CAAC,QAA4B,EAAA;AACjD,QAAA,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,EAAE;AACxB,QAAA,IAAI,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;AAC3E,YAAA,OAAOA,wBAAW,CAAC,SAAS,CAAC,QAAQ,CAAC;;AAExC,QAAA,OAAO,QAAQ;;AAGR,IAAA,cAAc;IAQvB,gBAAgB,GAAA;QACd,IAAI,CAAC,uBAAuB,GAAGC,qBAAQ,CAAC,MAAM,EAAE,MAAK;YACnD,MAAM,cAAc,GAAGC,kBAAY,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,cAAc;YAEhF,IAAI,cAAc,EAAE;AAClB,gBAAA,MAAM,WAAW,GAAsB;AACrC,oBAAA,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,EAAE;AACrC,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,IAAI,EAAE;AACjC,oBAAA,OAAO,EAAE,cAAc,CAAC,OAAO,IAAI,EAAE;AACrC,oBAAA,IAAI,EAAE,cAAc,CAAC,IAAI,IAAI,EAAE;AAC/B,oBAAA,GAAG,EAAE,cAAc,CAAC,GAAG,IAAI,EAAE;iBAC9B;AAED,gBAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC;;AAE/C,SAAC,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,uBAAuB,EAAE;YAChC,IAAI,CAAC,uBAAuB,EAAE;;;IAI1B,MAAM,qBAAqB,CAAC,OAA0B,EAAA;AAC5D,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI;;AAG5B,QAAA,MAAM,aAAa,GAAG,CAAC,IAAY,KAAI;AACrC,YAAA,OAAO;AACJ,iBAAA,WAAW;iBACX,SAAS,CAAC,KAAK;AACf,iBAAA,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC;AAC/B,iBAAA,IAAI,EAAE;AACX,SAAC;AAED,QAAAC,yBAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC;AACvC,QAAA,IAAI,CAAC,WAAW,GAAG,MAAM;AAEzB,QAAA,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,MAAM,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC;;AAGhD,YAAA,IAAI,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,0BAA0B,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,0BAA0B,CAAC,IAAI,CACrD,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CACrE;gBAED,MAAM,YAAY,GAAG,IAAI,CAAC,0BAA0B,CAAC,IAAI,CACvD,MAAM,IACJ,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;AAChE,oBAAA,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CACnE;;AAGD,gBAAA,MAAM,qBAAqB,GAAG,aAAa,CAAC,OAAO,CAAC,KAAK;AACtD,qBAAA,OAAO,CAAC,YAAY,EAAE,EAAE;AACxB,qBAAA,OAAO,CAAC,YAAY,EAAE,EAAE;AACxB,qBAAA,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;gBAE/B,MAAM,eAAe,GAAG,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,MAAM,IAAG;AACpE,oBAAA,MAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK;AAChD,yBAAA,OAAO,CAAC,YAAY,EAAE,EAAE;AACxB,yBAAA,OAAO,CAAC,YAAY,EAAE,EAAE;AACxB,yBAAA,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;AAE/B,oBAAA,MAAM,OAAO,GACX,gBAAgB,KAAK,qBAAqB;AAC1C,wBAAA,gBAAgB,CAAC,UAAU,CAAC,qBAAqB,GAAG,GAAG,CAAC;AACxD,wBAAA,qBAAqB,CAAC,UAAU,CAAC,gBAAgB,GAAG,GAAG,CAAC;AAC1D,oBAAA,OAAO,OAAO;AAChB,iBAAC,CAAC;gBAEF,IAAI,UAAU,EAAE;AACd,oBAAA,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK;;qBAC3B,IAAI,eAAe,EAAE;AAC1B,oBAAA,OAAO,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK;;;AAChC,oBAAA,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK;;;AAG7C,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACvB,YAAA,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,EAAE;AAC9B,YAAA,OAAO,EAAE,OAAO,CAAC,OAAO,IAAI,EAAE;AAC9B,YAAA,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,EAAE;AACxB,YAAA,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,EAAE;AAC1B,YAAA,GAAG,EAAE,OAAO,CAAC,GAAG,IAAI,EAAE;AACvB,SAAA,CAAC;;;QAIF,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC;YACvC,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,gBAAgB,GAAG,KAAK;aAC9B,EAAE,GAAG,CAAC;AACT,SAAC,CAAC;;AAGI,IAAA,yBAAyB,CAAC,OAA0B,EAAA;;;AAG1D,QAAA,MAAM,MAAM,GAAG;YACb,EAAE,EAAE,EAAE,CAAiB,eAAA,CAAA,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE;YACjD,EAAE,EAAE,EAAE,CAAiB,eAAA,CAAA,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE;YACjD,EAAE,EAAE,EAAE,CAAc,YAAA,CAAA,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE;YAC3C,EAAE,EAAE,EAAE,CAAe,aAAA,CAAA,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE;YAC7C,EAAE,EAAE,EAAE,CAAa,WAAA,CAAA,EAAE,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE;SAC1C;AAED,QAAA,MAAM,CAAC,OAAO,CAAC,KAAK,IAAG;AACrB,YAAA,IAAI,KAAK,CAAC,KAAK,EAAE;gBACf,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC;;AAE9C,SAAC,CAAC;;IAGI,cAAc,CAAC,EAAU,EAAE,KAAa,EAAA;QAC9C,IAAI,KAAK,EAAE;;AAET,YAAA,MAAM,UAAU,GAAG,IAAI,WAAW,CAAC,OAAO,EAAE;AAC1C,gBAAA,MAAM,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE;AACrB,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC;AACF,YAAA,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC;;;IAI7B,MAAM,oBAAoB,CAAC,WAAmB,EAAA;AACpD,QAAA,IAAI;YACF,MAAM,QAAQ,GAAG,MAAMC,WAAG,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;AACtD,YAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI;AACpC,YAAA,MAAM,YAAY,GAChB,cAAc,IAAI,cAAc,CAAC;kBAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;kBACnE,EAAE;AAER,YAAA,IAAI,CAAC,0BAA0B,GAAG,YAAY;;QAC9C,OAAO,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,0BAA0B,GAAG,EAAE;;;IAIhC,iBAAiB,GAAG,MAAK;AAC/B,QAAA,IAAI,CAAC,WAAW,GAAG,MAAM;AAC3B,KAAC;IAEO,iBAAiB,GAAG,MAAK;AAC/B,QAAA,IAAI,CAAC,WAAW,GAAG,QAAQ;AAC7B,KAAC;AAEO,IAAA,MAAM,WAAW,CAAC,KAAa,EAAE,KAAa,EAAA;QACpD,IAAI,KAAK,KAAK,SAAS;YAAE;QACzBD,yBAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,GAAG,KAAK,EAAS,CAAC;;QAEzD,IAAI,CAAC,cAAc,CAAC,CAAA,QAAA,EAAW,KAAK,CAAE,CAAA,EAAE,KAAK,CAAC;;AAG9C,QAAA,IAAI,KAAK,KAAK,SAAS,EAAE;AACvB,YAAA,MAAM,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;;YAEtCA,yBAAY,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAS,CAAC;;;IAIhD,mBAAmB,GAAA;AACzB,QAAA,QACEE,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7BA,OAAA,CAAA,mBAAA,EAAA,EAAmB,OAAO,EAAC,OAAO,EAAA,EAC/BL,wBAAW,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAC5B,CAChB;;IAIF,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,QAAQ,EAAE;AACjC,YAAA,MAAM,YAAY,GAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,CAAC;gBACrD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC,CAAC;gBACrD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,eAAe,CAAC,CAAC;gBACnD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC,CAAC;gBAClD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC,CAAC;AACjD,gBAAA,EAAE;YACJ,QACEK,OAAA,CAAA,KAAA,EAAA,IAAA,EACG,IAAI,CAAC,mBAAmB,EAAE,EAC3BA,OAAA,CAAA,uBAAA,EAAA,EACE,iBAAiB,EAAE,CAAC,IAAI,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,EAC5D,sBAAsB,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EACtD,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,CAAA,CACE;;AAIV,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM;AAE/D,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,IAAA,EACG,IAAI,CAAC,mBAAmB,EAAE,EAC3BA,OACE,CAAA,qBAAA,EAAA,EAAA,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,YAAY,EAAE,IAAI,CAAC,0BAA0B,EAC7C,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACrE,iBAAiB,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAA,CACjD,CACE;;IAIV,MAAM,GAAA;AACJ,QAAA,QACEA,oEAEG,IAAI,CAAC,iBAAiB,EAAE,CACrB;;;;;;;","names":["I18nService","onChange","sessionState","SessionStore","api","h"],"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/cjs/rebill-address.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-address.entry.cjs.js","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"],"names":["I18nService","onChange","sessionState","SessionStore","api","h"],"mappings":"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"}
+{"version":3,"file":"rebill-address.entry.cjs.js","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"],"names":["I18nService","onChange","sessionState","SessionStore","api","h"],"mappings":"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"}

package/dist/cjs/rebill-checkout.cjs.entry.js

@@ -8,7 +8,7 @@ require('./payment-button-BjbIS9GP.js');
 require('./processing-payment-CsXNuM_Q.js');
 require('./summary-BU0XrMg4.js');
 require('./user-information-static-BJVkZSvL.js');
-require('./organization-logo-Dnfazz63.js');
+require('./organization-logo-x4KEuA72.js');
 var i18n_service = require('./i18n.service-BpElBUDZ.js');
 var requiredFieldsMappers = require('./required-fields-mappers-DugzawRO.js');
 var breakpoint = require('./breakpoint-CWd4pcNv.js');

package/dist/cjs/rebill-icon.rebill-typography.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-icon.rebill-typography.entry.cjs.js","sources":["src/components/shared/icon/icon.tsx","src/components/shared/typography/typography.css?tag=rebill-typography","src/components/shared/typography/typography.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { getAssetURL } from '../../../utils/assets';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-icon',\n  shadow: false,\n})\nexport class Icon {\n  @Prop() name: string = 'card';\n  @Prop() size: string;\n  @Prop() color: COLORS_ENUM | 'currentColor' = 'currentColor';\n\n  @State() svgContent: string = '';\n\n  componentWillLoad() {\n    this.loadIcon();\n  }\n\n  async loadIcon() {\n    if (!this.name) return;\n    try {\n      const iconURL = getAssetURL(`icons/${this.name}.svg`);\n      const response = await fetch(iconURL);\n      if (!response.ok) {\n        console.warn(`Icon not found: ${this.name} at ${iconURL}`);\n        return;\n      }\n      const svgText = await response.text();\n      this.svgContent = svgText;\n    } catch (error) {\n      console.error('Error loading SVG:', error);\n    }\n  }\n\n  render() {\n    const colorValue =\n      this.color === 'currentColor' ? 'currentColor' : colorClassMapper(this.color);\n\n    let processedSvgContent = this.svgContent;\n    if (this.svgContent && this.color !== 'currentColor') {\n      processedSvgContent = this.svgContent\n        .replace(/fill=\"[^\"]*\"/g, `fill=\"${colorValue}\"`)\n        .replace(/stroke=\"[^\"]*\"/g, `stroke=\"${colorValue}\"`)\n        .replace(/fill='[^']*'/g, `fill='${colorValue}'`)\n        .replace(/stroke='[^']*'/g, `stroke='${colorValue}'`);\n    }\n\n    return (\n      <div\n        style={{\n          width: this.size,\n          height: this.size,\n          color: colorValue,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        innerHTML={processedSvgContent}\n      ></div>\n    );\n  }\n}\n","@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n/* Heading styles */\n.typography-h1 {\n  font-size: 6rem;\n  font-weight: 300;\n  line-height: 1.167;\n  letter-spacing: -0.01562em;\n}\n\n.typography-h2 {\n  font-size: 3.75rem;\n  font-weight: 300;\n  line-height: 1.2;\n  letter-spacing: -0.00833em;\n}\n\n.typography-h3 {\n  font-size: 1.375rem;\n  font-weight: 600;\n  font-style: Medium;\n  line-height: 20px;\n  letter-spacing: 0px;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h4 {\n  font-size: 2.125rem;\n  font-weight: 600;\n  line-height: 1.235;\n  letter-spacing: 0.00735em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h5 {\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0;\n}\n\n.typography-h6 {\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.6;\n  letter-spacing: 0.0075em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-subtitle-bold {\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n/* Subtitle styles */\n.typography-subtitle1 {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: 0.00938em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-subtitle2 {\n  font-size: 12px;\n  font-weight: 400;\n}\n.typography-subtitle3 {\n  font-size: 10px;\n  font-weight: 500;\n}\n/* Body styles */\n.typography-body1 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.00938em;\n}\n\n.typography-body2 {\n  font-size: 14px;\n  font-weight: 400 !important;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-body3 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n@media (max-width: 1024px) {\n  .typography-body2 {\n    line-height: 20px;\n  }\n}\n\n/* Button text */\n.typography-button {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.75;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n}\n\n/* Caption */\n.typography-caption {\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.66;\n  letter-spacing: 0.03333em;\n}\n\n/* Overline */\n.typography-overline {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n/* Italic */\n.typography-italic {\n  font-weight: 500;\n  font-style: italic;\n  font-size: 11px;\n  line-height: 24px;\n  letter-spacing: 0%;\n}\n\n.typography-information-text {\n  font-weight: 500;\n  font-size: 11px;\n  line-height: 160%;\n}\n\n/* Alignment */\n.typography-align-left {\n  text-align: left;\n}\n\n.typography-align-center {\n  text-align: center;\n}\n\n.typography-align-right {\n  text-align: right;\n}\n\n.typography-align-justify {\n  text-align: justify;\n}\n\n/* Additional styles */\n.typography-no-wrap {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* .typography-gutter-bottom {\n  margin-bottom: 0.35em;\n} */\n\n.typography-paragraph {\n  margin-bottom: 16px;\n}\n.typography-h4-span {\n  font-size: 34px;\n  font-weight: 500;\n\n  letter-spacing: 0%;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'subtitle-bold'\n  | 'body1'\n  | 'body2'\n  | 'body3'\n  | 'button'\n  | 'caption'\n  | 'overline'\n  | 'italic'\n  | 'information-text'\n  | 'h4-span'\n  | 'subtitle3';\n\n@Component({\n  tag: 'rebill-typography',\n  styleUrl: 'typography.css',\n  shadow: false,\n})\nexport class Typography {\n  @Prop() variant: TypographyVariant = 'body1';\n  @Prop() color?: COLORS_ENUM;\n  @Prop() align?: 'left' | 'center' | 'right' | 'justify';\n  @Prop() noWrap?: boolean;\n  @Prop() gutterBottom?: boolean;\n  @Prop() paragraph?: boolean;\n\n  private getColor = () => colorClassMapper(this.color);\n\n  render() {\n    const Tag = this.getTag();\n    const classes = {\n      [`typography-${this.variant}`]: true,\n      [`typography-align-${this.align}`]: this.align,\n      'typography-no-wrap': this.noWrap,\n      'typography-gutter-bottom': this.gutterBottom,\n      'typography-paragraph': this.paragraph,\n    };\n\n    return (\n      <Tag class={classes} style={{ color: this.getColor() }}>\n        <slot></slot>\n      </Tag>\n    );\n  }\n\n  private getTag(): string {\n    switch (this.variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this.variant;\n      case 'subtitle1':\n      case 'subtitle2':\n      case 'subtitle3':\n        return 'span';\n      case 'body1':\n      case 'body2':\n      case 'body3':\n        return 'span';\n      case 'button':\n        return 'span';\n      case 'caption':\n      case 'overline':\n        return 'span';\n      case 'italic':\n      case 'information-text':\n        return 'span';\n      case 'subtitle-bold':\n        return 'span';\n      case 'h4-span':\n        return 'span';\n      default:\n        return 'p';\n    }\n  }\n}\n"],"names":["getAssetURL","colorClassMapper","h"],"mappings":";;;;;;;MAQa,IAAI,GAAA,MAAA;;;;IACP,IAAI,GAAW,MAAM;AACrB,IAAA,IAAI;IACJ,KAAK,GAAiC,cAAc;IAEnD,UAAU,GAAW,EAAE;IAEhC,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,EAAE;;AAGjB,IAAA,MAAM,QAAQ,GAAA;QACZ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI;YACF,MAAM,OAAO,GAAGA,kBAAW,CAAC,CAAA,MAAA,EAAS,IAAI,CAAC,IAAI,CAAM,IAAA,CAAA,CAAC;AACrD,YAAA,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC;AACrC,YAAA,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE;gBAChB,OAAO,CAAC,IAAI,CAAC,CAAmB,gBAAA,EAAA,IAAI,CAAC,IAAI,CAAO,IAAA,EAAA,OAAO,CAAE,CAAA,CAAC;gBAC1D;;AAEF,YAAA,MAAM,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE;AACrC,YAAA,IAAI,CAAC,UAAU,GAAG,OAAO;;QACzB,OAAO,KAAK,EAAE;AACd,YAAA,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC;;;IAI9C,MAAM,GAAA;QACJ,MAAM,UAAU,GACd,IAAI,CAAC,KAAK,KAAK,cAAc,GAAG,cAAc,GAAGC,iCAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE/E,QAAA,IAAI,mBAAmB,GAAG,IAAI,CAAC,UAAU;QACzC,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,KAAK,cAAc,EAAE;YACpD,mBAAmB,GAAG,IAAI,CAAC;AACxB,iBAAA,OAAO,CAAC,eAAe,EAAE,CAAS,MAAA,EAAA,UAAU,GAAG;AAC/C,iBAAA,OAAO,CAAC,iBAAiB,EAAE,CAAW,QAAA,EAAA,UAAU,GAAG;AACnD,iBAAA,OAAO,CAAC,eAAe,EAAE,CAAS,MAAA,EAAA,UAAU,GAAG;AAC/C,iBAAA,OAAO,CAAC,iBAAiB,EAAE,WAAW,UAAU,CAAA,CAAA,CAAG,CAAC;;QAGzD,QACEC,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,CAAC,IAAI;gBAChB,MAAM,EAAE,IAAI,CAAC,IAAI;AACjB,gBAAA,KAAK,EAAE,UAAU;AACjB,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,QAAQ;AACzB,aAAA,EACD,SAAS,EAAE,mBAAmB,EAAA,CACzB;;;;AC3Db,MAAM,aAAa,GAAG,8/HAA8/H;;MC6BvgI,UAAU,GAAA,MAAA;;;;IACb,OAAO,GAAsB,OAAO;AACpC,IAAA,KAAK;AACL,IAAA,KAAK;AACL,IAAA,MAAM;AACN,IAAA,YAAY;AACZ,IAAA,SAAS;IAET,QAAQ,GAAG,MAAMD,iCAAgB,CAAC,IAAI,CAAC,KAAK,CAAC;IAErD,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE;AACzB,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,CAAC,cAAc,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YACpC,CAAC,CAAA,iBAAA,EAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK;YAC9C,oBAAoB,EAAE,IAAI,CAAC,MAAM;YACjC,0BAA0B,EAAE,IAAI,CAAC,YAAY;YAC7C,sBAAsB,EAAE,IAAI,CAAC,SAAS;SACvC;AAED,QAAA,QACEC,OAAC,CAAA,GAAG,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAA,EACpDA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;IAIF,MAAM,GAAA;AACZ,QAAA,QAAQ,IAAI,CAAC,OAAO;AAClB,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;AACT,YAAA,KAAK,IAAI;gBACP,OAAO,IAAI,CAAC,OAAO;AACrB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;AACd,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,OAAO;AACZ,YAAA,KAAK,OAAO;AACZ,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,QAAQ;AACb,YAAA,KAAK,kBAAkB;AACrB,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,eAAe;AAClB,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,MAAM;AACf,YAAA;AACE,gBAAA,OAAO,GAAG;;;;;;;;;"}
+{"version":3,"file":"rebill-icon.rebill-typography.entry.cjs.js","sources":["src/components/shared/icon/icon.tsx","src/components/shared/typography/typography.css?tag=rebill-typography","src/components/shared/typography/typography.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { getAssetURL } from '../../../utils/assets';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-icon',\n  shadow: false,\n})\nexport class Icon {\n  @Prop() name: string = 'card';\n  @Prop() size: string;\n  @Prop() color: COLORS_ENUM | 'currentColor' = 'currentColor';\n\n  @State() svgContent: string = '';\n\n  componentWillLoad() {\n    this.loadIcon();\n  }\n\n  async loadIcon() {\n    if (!this.name) return;\n    try {\n      const iconURL = getAssetURL(`icons/${this.name}.svg`);\n      const response = await fetch(iconURL);\n      if (!response.ok) {\n        console.warn(`Icon not found: ${this.name} at ${iconURL}`);\n        return;\n      }\n      const svgText = await response.text();\n      this.svgContent = svgText;\n    } catch (error) {\n      console.error('Error loading SVG:', error);\n    }\n  }\n\n  render() {\n    const colorValue =\n      this.color === 'currentColor' ? 'currentColor' : colorClassMapper(this.color);\n\n    let processedSvgContent = this.svgContent;\n    if (this.svgContent && this.color !== 'currentColor') {\n      processedSvgContent = this.svgContent\n        .replace(/fill=\"[^\"]*\"/g, `fill=\"${colorValue}\"`)\n        .replace(/stroke=\"[^\"]*\"/g, `stroke=\"${colorValue}\"`)\n        .replace(/fill='[^']*'/g, `fill='${colorValue}'`)\n        .replace(/stroke='[^']*'/g, `stroke='${colorValue}'`);\n    }\n\n    return (\n      <div\n        style={{\n          width: this.size,\n          height: this.size,\n          color: colorValue,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        innerHTML={processedSvgContent}\n      ></div>\n    );\n  }\n}\n","@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n/* Heading styles */\n.typography-h1 {\n  font-size: 6rem;\n  font-weight: 300;\n  line-height: 1.167;\n  letter-spacing: -0.01562em;\n}\n\n.typography-h2 {\n  font-size: 3.75rem;\n  font-weight: 300;\n  line-height: 1.2;\n  letter-spacing: -0.00833em;\n}\n\n.typography-h3 {\n  font-size: 1.375rem;\n  font-weight: 600;\n  font-style: Medium;\n  line-height: 20px;\n  letter-spacing: 0px;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h4 {\n  font-size: 2.125rem;\n  font-weight: 600;\n  line-height: 1.235;\n  letter-spacing: 0.00735em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h5 {\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0;\n}\n\n.typography-h6 {\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.6;\n  letter-spacing: 0.0075em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-subtitle-bold {\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n/* Subtitle styles */\n.typography-subtitle1 {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: 0.00938em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-subtitle2 {\n  font-size: 12px;\n  font-weight: 400;\n}\n.typography-subtitle3 {\n  font-size: 10px;\n  font-weight: 500;\n}\n/* Body styles */\n.typography-body1 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.00938em;\n}\n\n.typography-body2 {\n  font-size: 14px;\n  font-weight: 400 !important;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-body3 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n@media (max-width: 1024px) {\n  .typography-body2 {\n    line-height: 20px;\n  }\n}\n\n/* Button text */\n.typography-button {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.75;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n}\n\n/* Caption */\n.typography-caption {\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.66;\n  letter-spacing: 0.03333em;\n}\n\n/* Overline */\n.typography-overline {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n/* Italic */\n.typography-italic {\n  font-weight: 500;\n  font-style: italic;\n  font-size: 11px;\n  line-height: 24px;\n  letter-spacing: 0%;\n}\n\n.typography-information-text {\n  font-weight: 500;\n  font-size: 11px;\n  line-height: 160%;\n}\n\n/* Alignment */\n.typography-align-left {\n  text-align: left;\n}\n\n.typography-align-center {\n  text-align: center;\n}\n\n.typography-align-right {\n  text-align: right;\n}\n\n.typography-align-justify {\n  text-align: justify;\n}\n\n/* Additional styles */\n.typography-no-wrap {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* .typography-gutter-bottom {\n  margin-bottom: 0.35em;\n} */\n\n.typography-paragraph {\n  margin-bottom: 16px;\n}\n.typography-h4-span {\n  font-size: 34px;\n  font-weight: 500;\n\n  letter-spacing: 0%;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'subtitle-bold'\n  | 'body1'\n  | 'body2'\n  | 'body3'\n  | 'button'\n  | 'caption'\n  | 'overline'\n  | 'italic'\n  | 'information-text'\n  | 'h4-span'\n  | 'subtitle3';\n\n@Component({\n  tag: 'rebill-typography',\n  styleUrl: 'typography.css',\n  shadow: false,\n})\nexport class Typography {\n  @Prop() variant: TypographyVariant = 'body1';\n  @Prop() color?: COLORS_ENUM;\n  @Prop() align?: 'left' | 'center' | 'right' | 'justify';\n  @Prop() noWrap?: boolean;\n  @Prop() gutterBottom?: boolean;\n  @Prop() paragraph?: boolean;\n\n  private getColor = () => colorClassMapper(this.color);\n\n  render() {\n    const Tag = this.getTag();\n    const classes = {\n      [`typography-${this.variant}`]: true,\n      [`typography-align-${this.align}`]: this.align,\n      'typography-no-wrap': this.noWrap,\n      'typography-gutter-bottom': this.gutterBottom,\n      'typography-paragraph': this.paragraph,\n    };\n\n    return (\n      <Tag class={classes} style={{ color: this.getColor() }}>\n        <slot></slot>\n      </Tag>\n    );\n  }\n\n  private getTag(): string {\n    switch (this.variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this.variant;\n      case 'subtitle1':\n      case 'subtitle2':\n      case 'subtitle3':\n        return 'span';\n      case 'body1':\n      case 'body2':\n      case 'body3':\n        return 'span';\n      case 'button':\n        return 'span';\n      case 'caption':\n      case 'overline':\n        return 'span';\n      case 'italic':\n      case 'information-text':\n        return 'span';\n      case 'subtitle-bold':\n        return 'span';\n      case 'h4-span':\n        return 'span';\n      default:\n        return 'p';\n    }\n  }\n}\n"],"names":["getAssetURL","colorClassMapper","h"],"mappings":"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"}

package/dist/cjs/rebill-icon_2.cjs.entry.js

@@ -54,7 +54,7 @@ const Icon = class {
     }
 };
 
-const typographyCss = ":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;margin:0;padding:0}.typography-h1{font-size:6rem;font-weight:300;line-height:1.167;letter-spacing:-0.01562em}.typography-h2{font-size:3.75rem;font-weight:300;line-height:1.2;letter-spacing:-0.00833em}.typography-h3{font-size:1.375rem;font-weight:600;font-style:Medium;line-height:20px;letter-spacing:0px;margin-bottom:0;margin-top:0}.typography-h4{font-size:2.125rem;font-weight:600;line-height:1.235;letter-spacing:0.00735em;margin-bottom:0;margin-top:0}.typography-h5{font-size:1.5rem;font-weight:400;line-height:1.334;letter-spacing:0}.typography-h6{font-size:1.25rem;font-weight:500;line-height:1.6;letter-spacing:0.0075em;margin-bottom:0;margin-top:0}.typography-subtitle-bold{font-size:14px;font-weight:500;letter-spacing:0;margin-bottom:0;margin-top:0}.typography-subtitle1{font-size:1rem;font-weight:400;line-height:1.75;letter-spacing:0.00938em;margin-bottom:0;margin-top:0}.typography-subtitle2{font-size:12px;font-weight:400}.typography-subtitle3{font-size:10px;font-weight:500}.typography-body1{font-size:16px;font-weight:500;letter-spacing:0.00938em}.typography-body2{font-size:14px;font-weight:400 !important;letter-spacing:0.01071em;margin-bottom:0;margin-top:0}.typography-body3{font-size:16px;font-weight:500;letter-spacing:0.01071em;margin-bottom:0;margin-top:0}@media (max-width: 1024px){.typography-body2{line-height:20px}}.typography-button{font-size:0.875rem;font-weight:500;line-height:1.75;letter-spacing:0.02857em;text-transform:uppercase}.typography-caption{font-size:0.75rem;font-weight:400;line-height:1.66;letter-spacing:0.03333em}.typography-overline{font-size:14px;font-weight:600;line-height:20px}.typography-italic{font-weight:500;font-style:italic;font-size:11px;line-height:24px;letter-spacing:0%}.typography-information-text{font-weight:500;font-size:11px;line-height:160%}.typography-align-left{text-align:left}.typography-align-center{text-align:center}.typography-align-right{text-align:right}.typography-align-justify{text-align:justify}.typography-no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typography-paragraph{margin-bottom:16px}.typography-h4-span{font-size:34px;font-weight:500;letter-spacing:0%;margin-bottom:0;margin-top:0}";
+const typographyCss = ":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;margin:0;padding:0}.typography-h1{font-size:6rem;font-weight:300;line-height:1.167;letter-spacing:-0.01562em}.typography-h2{font-size:3.75rem;font-weight:300;line-height:1.2;letter-spacing:-0.00833em}.typography-h3{font-size:1.375rem;font-weight:600;font-style:Medium;line-height:20px;letter-spacing:0px;margin-bottom:0;margin-top:0}.typography-h4{font-size:2.125rem;font-weight:600;line-height:1.235;letter-spacing:0.00735em;margin-bottom:0;margin-top:0}.typography-h5{font-size:1.5rem;font-weight:400;line-height:1.334;letter-spacing:0}.typography-h6{font-size:1.25rem;font-weight:500;line-height:1.6;letter-spacing:0.0075em;margin-bottom:0;margin-top:0}.typography-subtitle-bold{font-size:14px;font-weight:500;letter-spacing:0;margin-bottom:0;margin-top:0}.typography-subtitle1{font-size:1rem;font-weight:400;line-height:1.75;letter-spacing:0.00938em;margin-bottom:0;margin-top:0}.typography-subtitle2{font-size:12px;font-weight:400}.typography-subtitle3{font-size:10px;font-weight:500}.typography-body1{font-size:16px;font-weight:500;letter-spacing:0.00938em}.typography-body2{font-size:14px;font-weight:400 !important;letter-spacing:0.01071em;margin-bottom:0;margin-top:0}.typography-body3{font-size:16px;font-weight:500;letter-spacing:0.01071em;margin-bottom:0;margin-top:0}@media (max-width: 1024px){.typography-body2{line-height:20px}}.typography-button{font-size:0.875rem;font-weight:500;line-height:1.75;letter-spacing:0.02857em;text-transform:uppercase}.typography-caption{font-size:0.75rem;font-weight:400;line-height:1.66;letter-spacing:0.03333em}.typography-overline{font-size:14px;font-weight:600;line-height:20px}.typography-italic{font-weight:500;font-style:italic;font-size:11px;line-height:24px;letter-spacing:0%}.typography-information-text{font-weight:500;font-size:11px;line-height:160%}.typography-align-left{text-align:left}.typography-align-center{text-align:center}.typography-align-right{text-align:right}.typography-align-justify{text-align:justify}.typography-no-wrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.typography-paragraph{margin-bottom:16px}.typography-h4-span{font-size:34px;font-weight:500;letter-spacing:0%;margin-bottom:0;margin-top:0}";
 
 const Typography = class {
     constructor(hostRef) {

package/dist/cjs/rebill-icon_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"rebill-icon.rebill-typography.entry.cjs.js","mappings":"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","names":["getAssetURL","colorClassMapper","h"],"sources":["src/components/shared/icon/icon.tsx","src/components/shared/typography/typography.css?tag=rebill-typography","src/components/shared/typography/typography.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { getAssetURL } from '../../../utils/assets';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-icon',\n  shadow: false,\n})\nexport class Icon {\n  @Prop() name: string = 'card';\n  @Prop() size: string;\n  @Prop() color: COLORS_ENUM | 'currentColor' = 'currentColor';\n\n  @State() svgContent: string = '';\n\n  componentWillLoad() {\n    this.loadIcon();\n  }\n\n  async loadIcon() {\n    if (!this.name) return;\n    try {\n      const iconURL = getAssetURL(`icons/${this.name}.svg`);\n      const response = await fetch(iconURL);\n      if (!response.ok) {\n        console.warn(`Icon not found: ${this.name} at ${iconURL}`);\n        return;\n      }\n      const svgText = await response.text();\n      this.svgContent = svgText;\n    } catch (error) {\n      console.error('Error loading SVG:', error);\n    }\n  }\n\n  render() {\n    const colorValue =\n      this.color === 'currentColor' ? 'currentColor' : colorClassMapper(this.color);\n\n    let processedSvgContent = this.svgContent;\n    if (this.svgContent && this.color !== 'currentColor') {\n      processedSvgContent = this.svgContent\n        .replace(/fill=\"[^\"]*\"/g, `fill=\"${colorValue}\"`)\n        .replace(/stroke=\"[^\"]*\"/g, `stroke=\"${colorValue}\"`)\n        .replace(/fill='[^']*'/g, `fill='${colorValue}'`)\n        .replace(/stroke='[^']*'/g, `stroke='${colorValue}'`);\n    }\n\n    return (\n      <div\n        style={{\n          width: this.size,\n          height: this.size,\n          color: colorValue,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        innerHTML={processedSvgContent}\n      ></div>\n    );\n  }\n}\n","@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n/* Heading styles */\n.typography-h1 {\n  font-size: 6rem;\n  font-weight: 300;\n  line-height: 1.167;\n  letter-spacing: -0.01562em;\n}\n\n.typography-h2 {\n  font-size: 3.75rem;\n  font-weight: 300;\n  line-height: 1.2;\n  letter-spacing: -0.00833em;\n}\n\n.typography-h3 {\n  font-size: 1.375rem;\n  font-weight: 600;\n  font-style: Medium;\n  line-height: 20px;\n  letter-spacing: 0px;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h4 {\n  font-size: 2.125rem;\n  font-weight: 600;\n  line-height: 1.235;\n  letter-spacing: 0.00735em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h5 {\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0;\n}\n\n.typography-h6 {\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.6;\n  letter-spacing: 0.0075em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-subtitle-bold {\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n/* Subtitle styles */\n.typography-subtitle1 {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: 0.00938em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-subtitle2 {\n  font-size: 12px;\n  font-weight: 400;\n}\n.typography-subtitle3 {\n  font-size: 10px;\n  font-weight: 500;\n}\n/* Body styles */\n.typography-body1 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.00938em;\n}\n\n.typography-body2 {\n  font-size: 14px;\n  font-weight: 400 !important;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-body3 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n@media (max-width: 1024px) {\n  .typography-body2 {\n    line-height: 20px;\n  }\n}\n\n/* Button text */\n.typography-button {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.75;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n}\n\n/* Caption */\n.typography-caption {\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.66;\n  letter-spacing: 0.03333em;\n}\n\n/* Overline */\n.typography-overline {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n/* Italic */\n.typography-italic {\n  font-weight: 500;\n  font-style: italic;\n  font-size: 11px;\n  line-height: 24px;\n  letter-spacing: 0%;\n}\n\n.typography-information-text {\n  font-weight: 500;\n  font-size: 11px;\n  line-height: 160%;\n}\n\n/* Alignment */\n.typography-align-left {\n  text-align: left;\n}\n\n.typography-align-center {\n  text-align: center;\n}\n\n.typography-align-right {\n  text-align: right;\n}\n\n.typography-align-justify {\n  text-align: justify;\n}\n\n/* Additional styles */\n.typography-no-wrap {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* .typography-gutter-bottom {\n  margin-bottom: 0.35em;\n} */\n\n.typography-paragraph {\n  margin-bottom: 16px;\n}\n.typography-h4-span {\n  font-size: 34px;\n  font-weight: 500;\n\n  letter-spacing: 0%;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'subtitle-bold'\n  | 'body1'\n  | 'body2'\n  | 'body3'\n  | 'button'\n  | 'caption'\n  | 'overline'\n  | 'italic'\n  | 'information-text'\n  | 'h4-span'\n  | 'subtitle3';\n\n@Component({\n  tag: 'rebill-typography',\n  styleUrl: 'typography.css',\n  shadow: false,\n})\nexport class Typography {\n  @Prop() variant: TypographyVariant = 'body1';\n  @Prop() color?: COLORS_ENUM;\n  @Prop() align?: 'left' | 'center' | 'right' | 'justify';\n  @Prop() noWrap?: boolean;\n  @Prop() gutterBottom?: boolean;\n  @Prop() paragraph?: boolean;\n\n  private getColor = () => colorClassMapper(this.color);\n\n  render() {\n    const Tag = this.getTag();\n    const classes = {\n      [`typography-${this.variant}`]: true,\n      [`typography-align-${this.align}`]: this.align,\n      'typography-no-wrap': this.noWrap,\n      'typography-gutter-bottom': this.gutterBottom,\n      'typography-paragraph': this.paragraph,\n    };\n\n    return (\n      <Tag class={classes} style={{ color: this.getColor() }}>\n        <slot></slot>\n      </Tag>\n    );\n  }\n\n  private getTag(): string {\n    switch (this.variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this.variant;\n      case 'subtitle1':\n      case 'subtitle2':\n      case 'subtitle3':\n        return 'span';\n      case 'body1':\n      case 'body2':\n      case 'body3':\n        return 'span';\n      case 'button':\n        return 'span';\n      case 'caption':\n      case 'overline':\n        return 'span';\n      case 'italic':\n      case 'information-text':\n        return 'span';\n      case 'subtitle-bold':\n        return 'span';\n      case 'h4-span':\n        return 'span';\n      default:\n        return 'p';\n    }\n  }\n}\n"],"version":3}
+{"file":"rebill-icon.rebill-typography.entry.cjs.js","mappings":"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","names":["getAssetURL","colorClassMapper","h"],"sources":["src/components/shared/icon/icon.tsx","src/components/shared/typography/typography.css?tag=rebill-typography","src/components/shared/typography/typography.tsx"],"sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport { getAssetURL } from '../../../utils/assets';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\n@Component({\n  tag: 'rebill-icon',\n  shadow: false,\n})\nexport class Icon {\n  @Prop() name: string = 'card';\n  @Prop() size: string;\n  @Prop() color: COLORS_ENUM | 'currentColor' = 'currentColor';\n\n  @State() svgContent: string = '';\n\n  componentWillLoad() {\n    this.loadIcon();\n  }\n\n  async loadIcon() {\n    if (!this.name) return;\n    try {\n      const iconURL = getAssetURL(`icons/${this.name}.svg`);\n      const response = await fetch(iconURL);\n      if (!response.ok) {\n        console.warn(`Icon not found: ${this.name} at ${iconURL}`);\n        return;\n      }\n      const svgText = await response.text();\n      this.svgContent = svgText;\n    } catch (error) {\n      console.error('Error loading SVG:', error);\n    }\n  }\n\n  render() {\n    const colorValue =\n      this.color === 'currentColor' ? 'currentColor' : colorClassMapper(this.color);\n\n    let processedSvgContent = this.svgContent;\n    if (this.svgContent && this.color !== 'currentColor') {\n      processedSvgContent = this.svgContent\n        .replace(/fill=\"[^\"]*\"/g, `fill=\"${colorValue}\"`)\n        .replace(/stroke=\"[^\"]*\"/g, `stroke=\"${colorValue}\"`)\n        .replace(/fill='[^']*'/g, `fill='${colorValue}'`)\n        .replace(/stroke='[^']*'/g, `stroke='${colorValue}'`);\n    }\n\n    return (\n      <div\n        style={{\n          width: this.size,\n          height: this.size,\n          color: colorValue,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n        innerHTML={processedSvgContent}\n      ></div>\n    );\n  }\n}\n","@import '../../../styles/variables.css';\n\n:host {\n  display: block;\n  margin: 0;\n  padding: 0;\n}\n\n/* Heading styles */\n.typography-h1 {\n  font-size: 6rem;\n  font-weight: 300;\n  line-height: 1.167;\n  letter-spacing: -0.01562em;\n}\n\n.typography-h2 {\n  font-size: 3.75rem;\n  font-weight: 300;\n  line-height: 1.2;\n  letter-spacing: -0.00833em;\n}\n\n.typography-h3 {\n  font-size: 1.375rem;\n  font-weight: 600;\n  font-style: Medium;\n  line-height: 20px;\n  letter-spacing: 0px;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h4 {\n  font-size: 2.125rem;\n  font-weight: 600;\n  line-height: 1.235;\n  letter-spacing: 0.00735em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-h5 {\n  font-size: 1.5rem;\n  font-weight: 400;\n  line-height: 1.334;\n  letter-spacing: 0;\n}\n\n.typography-h6 {\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.6;\n  letter-spacing: 0.0075em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-subtitle-bold {\n  font-size: 14px;\n  font-weight: 500;\n  letter-spacing: 0;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n/* Subtitle styles */\n.typography-subtitle1 {\n  font-size: 1rem;\n  font-weight: 400;\n  line-height: 1.75;\n  letter-spacing: 0.00938em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n.typography-subtitle2 {\n  font-size: 12px;\n  font-weight: 400;\n}\n.typography-subtitle3 {\n  font-size: 10px;\n  font-weight: 500;\n}\n/* Body styles */\n.typography-body1 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.00938em;\n}\n\n.typography-body2 {\n  font-size: 14px;\n  font-weight: 400 !important;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n.typography-body3 {\n  font-size: 16px;\n  font-weight: 500;\n  letter-spacing: 0.01071em;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n\n@media (max-width: 1024px) {\n  .typography-body2 {\n    line-height: 20px;\n  }\n}\n\n/* Button text */\n.typography-button {\n  font-size: 0.875rem;\n  font-weight: 500;\n  line-height: 1.75;\n  letter-spacing: 0.02857em;\n  text-transform: uppercase;\n}\n\n/* Caption */\n.typography-caption {\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.66;\n  letter-spacing: 0.03333em;\n}\n\n/* Overline */\n.typography-overline {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n/* Italic */\n.typography-italic {\n  font-weight: 500;\n  font-style: italic;\n  font-size: 11px;\n  line-height: 24px;\n  letter-spacing: 0%;\n}\n\n.typography-information-text {\n  font-weight: 500;\n  font-size: 11px;\n  line-height: 160%;\n}\n\n/* Alignment */\n.typography-align-left {\n  text-align: left;\n}\n\n.typography-align-center {\n  text-align: center;\n}\n\n.typography-align-right {\n  text-align: right;\n}\n\n.typography-align-justify {\n  text-align: justify;\n}\n\n/* Additional styles */\n.typography-no-wrap {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* .typography-gutter-bottom {\n  margin-bottom: 0.35em;\n} */\n\n.typography-paragraph {\n  margin-bottom: 16px;\n}\n.typography-h4-span {\n  font-size: 34px;\n  font-weight: 500;\n\n  letter-spacing: 0%;\n  margin-bottom: 0;\n  margin-top: 0;\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { colorClassMapper, COLORS_ENUM } from '../../../utils/color-class-mapper';\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'subtitle-bold'\n  | 'body1'\n  | 'body2'\n  | 'body3'\n  | 'button'\n  | 'caption'\n  | 'overline'\n  | 'italic'\n  | 'information-text'\n  | 'h4-span'\n  | 'subtitle3';\n\n@Component({\n  tag: 'rebill-typography',\n  styleUrl: 'typography.css',\n  shadow: false,\n})\nexport class Typography {\n  @Prop() variant: TypographyVariant = 'body1';\n  @Prop() color?: COLORS_ENUM;\n  @Prop() align?: 'left' | 'center' | 'right' | 'justify';\n  @Prop() noWrap?: boolean;\n  @Prop() gutterBottom?: boolean;\n  @Prop() paragraph?: boolean;\n\n  private getColor = () => colorClassMapper(this.color);\n\n  render() {\n    const Tag = this.getTag();\n    const classes = {\n      [`typography-${this.variant}`]: true,\n      [`typography-align-${this.align}`]: this.align,\n      'typography-no-wrap': this.noWrap,\n      'typography-gutter-bottom': this.gutterBottom,\n      'typography-paragraph': this.paragraph,\n    };\n\n    return (\n      <Tag class={classes} style={{ color: this.getColor() }}>\n        <slot></slot>\n      </Tag>\n    );\n  }\n\n  private getTag(): string {\n    switch (this.variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this.variant;\n      case 'subtitle1':\n      case 'subtitle2':\n      case 'subtitle3':\n        return 'span';\n      case 'body1':\n      case 'body2':\n      case 'body3':\n        return 'span';\n      case 'button':\n        return 'span';\n      case 'caption':\n      case 'overline':\n        return 'span';\n      case 'italic':\n      case 'information-text':\n        return 'span';\n      case 'subtitle-bold':\n        return 'span';\n      case 'h4-span':\n        return 'span';\n      default:\n        return 'p';\n    }\n  }\n}\n"],"version":3}

package/dist/cjs/rebill-input-text.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-g8zyeQAq.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 = class {
     constructor(hostRef) {
@@ -100,7 +100,7 @@ const InputText = class {
         return (index.h("div", { key: 'ae839c43b839fd758395e38d5fe0a72c55a8ee9f', class: "input-container" }, !isFloating && this.label && (index.h("label", { key: 'fb636004e05ca2b8e76c2081d060e1a9bd2f9c16', class: `input-label ${this.disabled ? 'disabled' : ''}` }, this.label)), index.h("div", { key: '9eb98685027a407cc996e84bf305982e52c0284c', class: wrapperClasses }, this.leftIcon && (index.h("div", { key: '571a39e99cb432c3d64d0d0215ae984460df7f4c', class: "icon-left" }, index.h("rebill-icon", { key: '179a0b6cd7d749ed04d57000336b1ab852f07972', name: this.leftIcon }))), index.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 && index.h("label", { key: '429c7dcec5eb91009fb641d81b46044968f9926e', class: "input-label" }, this.label), this.clearable && this.value && (index.h("div", { key: 'd99318529056a6fc248a5a88049f284f4d637201', class: "icon-right", onClick: this.onClear }, index.h("rebill-icon", { key: '2a50251d20d1edeadffac9ebe9fb2c5d8d7818bf', name: "x" }))), this.rightIcon && !this.clearable && (index.h("div", { key: 'e5bc2350e31b100edee41a17a357418cc36504c0', class: "icon-right", onClick: this.onRightIconClick }, index.h("rebill-icon", { key: 'a5b39c778c1cc826ca7ee48d045015f5caed7dd0', name: this.rightIcon })))), this.error && index.h("span", { key: '091b3de24f95ca6911d05521d10736179bcde4f8', class: "error-message" }, this.error)));
+            } }), isFloating && index.h("label", { key: 'f08d35728ba65ec0e63deda11f2441418ad8c6d1', class: "input-text__input-label input-label" }, this.label), this.clearable && this.value && (index.h("div", { key: 'eb160ca725fca0bb8087b1d06565bcd61839678c', class: "icon-right", onClick: this.onClear }, index.h("rebill-icon", { key: 'fd75c41488a3eb7ad9226a53d524a7ce68617a9f', name: "x" }))), this.rightIcon && !this.clearable && (index.h("div", { key: '8c90dafb6d714066c5491a3d39d8029824da3b75', class: "icon-right", onClick: this.onRightIconClick }, index.h("rebill-icon", { key: 'b4ac09f67ac75efb529e55134b2be0794486846c', name: this.rightIcon })))), this.error && index.h("span", { key: '6143b1e1a982362681bcb6326a815b7b5fb85c67', class: "error-message" }, this.error)));
     }
 };
 InputText.style = inputTextCss;

package/dist/cjs/rebill-input-text.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"rebill-input-text.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","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":"rebill-input-text.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-text__input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-text__input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-text__input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-text__input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","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"],"version":3}

package/dist/cjs/rebill-input-text.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"rebill-input-text.entry.cjs.js","sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","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"],"names":["h"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,olFAAolF;;MCO5lF,SAAS,GAAA,MAAA;;;;;;;;AAEZ,IAAA,YAAY;;IAGZ,KAAK,GAAW,EAAE;;IAElB,WAAW,GAAW,EAAE;;IAEQ,KAAK,GAAW,EAAE;;IAElD,KAAK,GAAW,EAAE;;IAElB,EAAE,GAAW,EAAE;;IAEf,QAAQ,GAAY,KAAK;;AAEzB,IAAA,QAAQ;;AAER,IAAA,SAAS;;IAET,SAAS,GAAY,KAAK;;IAE1B,OAAO,GAA2B,SAAS;;IAE3C,SAAS,GAAY,KAAK;;AAEzB,IAAA,KAAK;;AAEL,IAAA,cAAc;;AAEd,IAAA,IAAI;AAEb,IAAA,gBAAgB,CAAC,KAAkB,EAAA;AACjC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM;QAC7B,IAAI,QAAQ,IAAI,IAAI,CAAC,EAAE,IAAI,QAAQ,EAAE;YACnC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;;;AAI1B,IAAA,OAAO,GAAG,CAAC,KAAY,KAAI;QACjC,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B;AAC9C,QAAA,IAAI,UAAU,GAAG,KAAK,CAAC,KAAK;AAE5B,QAAA,IAAI,IAAI,CAAC,EAAE,KAAK,OAAO,EAAE;AACvB,YAAA,UAAU,GAAG,UAAU,CAAC,WAAW,EAAE;AACrC,YAAA,KAAK,CAAC,KAAK,GAAG,UAAU;;AACnB,aAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AACzB,YAAA,UAAU,GAAG,UAAU,CAAC,WAAW,EAAE;AACrC,YAAA,KAAK,CAAC,KAAK,GAAG,UAAU;;AAG1B,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU;AACvB,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACrD,KAAC;IAEO,OAAO,GAAG,MAAK;QACrB,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACrD,KAAC;IAEO,gBAAgB,GAAG,MAAK;QAC9B,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;AAC3C,KAAC;IAEO,MAAM,GAAG,MAAK;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;AAEtC,QAAA,IAAI,YAAY,KAAK,IAAI,CAAC,KAAK,EAAE;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,YAAY;AACzB,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAGrD,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACpD,KAAC;AAGD,IAAA,MAAM,eAAe,GAAA;QACnB,OAAO,IAAI,CAAC,YAAY;;IAG1B,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,UAAU;AAE9C,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC5B;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,gBAAgB,EAAE,UAAU;AAC5B,YAAA,eAAe,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;AAChC,YAAA,gBAAgB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS;SACnC;AAED,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,KACxBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,eAAe,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACrF,EACDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EACvB,IAAI,CAAC,QAAQ,KACZA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAgB,CAC5C,CACP,EACDA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EAAE,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,EACvD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS;AACjD,gBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,GAAG,QAAQ,GAAG,SAAS;AACtE,aAAA,EACD,CAAA,EACD,UAAU,IAAIA,oEAAO,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,KAAK,CAAS,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,KAC3BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC3CA,OAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAa,IAAI,EAAC,GAAG,EAAA,CAAe,CAChC,CACP,EACA,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,KAChCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACpDA,OAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,SAAS,EAAgB,CAAA,CAC7C,CACP,CACG,EACL,IAAI,CAAC,KAAK,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAE,EAAA,IAAI,CAAC,KAAK,CAAQ,CAC1D;;;;;;;"}
+{"version":3,"file":"rebill-input-text.entry.cjs.js","sources":["src/components/shared/inputs/input-text/input-text.css?tag=rebill-input-text","src/components/shared/inputs/input-text/input-text.tsx"],"sourcesContent":["@import '../shared-input.css';\n\n.input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.input-element {\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.icon-left,\n.icon-right {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.icon-left {\n  left: 0.75rem;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.icon-right {\n  right: 0.75rem;\n  cursor: pointer;\n  color: var(--rebill-color-text-secondary-light);\n}\n\n.input-element.input-error:focus {\n  flex-direction: column;\n  box-shadow: 0 0 0 2px var(--rebill-color-error-light);\n}\n\n/* Floating label styles */\n.floating-label {\n  position: relative;\n}\n\n.floating-label .input-text__input-label {\n  position: absolute;\n  top: 50%;\n  left: 0.75rem;\n  transform: translateY(-50%);\n  color: var(--rebill-color-text-secondary-light);\n  transition: all 0.1s ease-in-out;\n  pointer-events: none;\n}\n\n.floating-label .input-element::placeholder {\n  color: transparent;\n}\n\n.floating-label .input-element:focus ~ .input-text__input-label,\n.floating-label .input-element:not(:placeholder-shown) ~ .input-text__input-label {\n  top: 0;\n  font-size: 0.62rem;\n  color: var(--rebill-color-text-secondary);\n  background-color: var(--rebill-color-background);\n  padding: 0 4px;\n  left: 0.75rem;\n}\n\n.floating-label.has-left-icon .input-text__input-label {\n  left: 2.5rem;\n}\n\n/* Disabled state styles */\n.input-element:disabled {\n  color: var(--rebill-color-neutrals-500);\n}\n\n.input-wrapper:has(.input-element:disabled) .icon-left,\n.input-wrapper:has(.input-element:disabled) .icon-right {\n  color: var(--rebill-color-text-secondary-light) !important;\n}\n","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"],"names":["h"],"mappings":"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"}

package/dist/cjs/rebill-mode-sandbox-mobile.cjs.entry.js

@@ -5,7 +5,7 @@ var i18n_service = require('./i18n.service-BpElBUDZ.js');
 var clipboard = require('./clipboard-DrW7DOfh.js');
 var colorClassMapper = require('./color-class-mapper-CtKnrxwI.js');
 
-const modeSandboxMobileCss = ":host{display:flex;position:relative;width:100%;justify-content:center;align-items:center}.test-mode-container{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);z-index:5;animation:fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:auto;cursor:pointer}.test-mode-chip-mobile{display:flex;width:100%;min-width:auto;max-width:100%;height:40px;background:#ffffff;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;position:relative;z-index:20}.chip-content-mobile{display:flex;align-items:center;gap:2px;justify-content:flex-end;min-height:24px;flex-shrink:0;width:100%;margin:8px}.test-mode-chip-mobile.expanded .chip-content-mobile{justify-content:flex-end;width:100%}.cards-dropdown-panel-header{display:flex;align-items:center;gap:8px;padding:8px}.docs-section{display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:0;transition:background-color 0.2s ease;justify-content:flex-end;padding:8px;margin-top:8px}.cards-dropdown-panel{position:absolute;top:100%;left:0;right:0;width:100%;background:#ffffff;border-top:none;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin-top:16px;z-index:25;animation:expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center}.card-section{display:flex;flex-direction:column;justify-content:space-between}.header-content{display:flex;align-items:center;gap:8px;margin:8px}.card-details{background:#fafafa;border-radius:8px;border:1px solid #e5e7eb;margin:8px;min-height:208px;display:flex;flex-direction:column}.card-row{display:flex;gap:12px;align-items:stretch;background:#ffffff;justify-content:space-around;border-radius:8px;border:1px solid #e5e7eb;height:auto;padding:8px;margin:8px}.card-value{display:flex;flex-direction:column;gap:6px;flex:1}.field-value{display:flex;flex-direction:row;align-items:center;gap:8px;max-height:20px}.copy-button{align-items:center;margin-left:auto;margin-right:0}.icon-button{margin-left:auto;margin-right:16px}@keyframes expandDown{from{opacity:0;transform:translateY(-10px) scaleY(0.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
+const modeSandboxMobileCss = ":host{display:flex;position:relative;width:100%;justify-content:center;align-items:center}.mode-sandbox-mobile__test-mode-container{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%}.mode-sandbox-mobile__overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);z-index:5;animation:fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);pointer-events:auto;cursor:pointer}.mode-sandbox-mobile__test-mode-chip-mobile{display:flex;width:100%;min-width:auto;max-width:100%;height:40px;background:#ffffff;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;position:relative;z-index:20}.mode-sandbox-mobile__chip-content-mobile{display:flex;align-items:center;gap:2px;justify-content:flex-end;min-height:24px;flex-shrink:0;width:100%;margin:8px}.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%}.mode-sandbox-mobile__cards-dropdown-panel-header{display:flex;align-items:center;gap:8px;padding:8px}.mode-sandbox-mobile__docs-section{display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:0;transition:background-color 0.2s ease;justify-content:flex-end;padding:8px;margin-top:8px}.mode-sandbox-mobile__cards-dropdown-panel{position:absolute;top:100%;left:0;right:0;width:100%;background:#ffffff;border-top:none;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;margin-top:16px;z-index:25;animation:expandDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:top center}.mode-sandbox-mobile__card-section{display:flex;flex-direction:column;justify-content:space-between}.mode-sandbox-mobile__header-content{display:flex;align-items:center;gap:8px;margin:8px}.mode-sandbox-mobile__card-details{background:#fafafa;border-radius:8px;border:1px solid #e5e7eb;margin:8px;min-height:208px;display:flex;flex-direction:column}.mode-sandbox-mobile__card-row{display:flex;gap:12px;align-items:stretch;background:#ffffff;justify-content:space-around;border-radius:8px;border:1px solid #e5e7eb;height:auto;padding:8px;margin:8px}.mode-sandbox-mobile__card-value{display:flex;flex-direction:column;gap:6px;flex:1}.mode-sandbox-mobile__field-value{display:flex;flex-direction:row;align-items:center;gap:8px;max-height:20px}.mode-sandbox-mobile__copy-button{align-items:center;margin-left:auto;margin-right:0}.mode-sandbox-mobile__icon-button{margin-left:auto;margin-right:16px}@keyframes expandDown{from{opacity:0;transform:translateY(-10px) scaleY(0.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}";
 
 const RebillTestModeChipMobile = class {
     constructor(hostRef) {
@@ -34,13 +34,13 @@ const RebillTestModeChipMobile = class {
         window.open('https://v3.docs.rebill.com/sdk/checkout', '_blank');
     };
     renderBasicChip() {
-        return (index.h("div", { class: "chip-content-mobile" }, index.h("div", { class: "info-icon" }, index.h("rebill-icon", { name: "circle-info", size: "24px", color: colorClassMapper.COLORS_ENUM.ORANGE })), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.testMode')), index.h("div", { class: "icon-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, index.h("rebill-icon", { name: "hamburger" })))));
+        return (index.h("div", { class: "mode-sandbox-mobile__chip-content-mobile" }, index.h("div", { class: "mode-sandbox-mobile__info-icon" }, index.h("rebill-icon", { name: "circle-info", size: "24px", color: colorClassMapper.COLORS_ENUM.ORANGE })), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.testMode')), index.h("div", { class: "mode-sandbox-mobile__icon-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: this.togglePanel }, index.h("rebill-icon", { name: "hamburger" })))));
     }
     renderCardsPanel() {
-        return (index.h("div", { class: "cards-dropdown-panel" }, index.h("div", { class: "cards-dropdown-panel-header" }, index.h("rebill-icon", { name: "card-test" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.cardTest'))), index.h("div", { class: "card-details" }, index.h("div", { class: "card-section" }, index.h("div", { class: "header-content" }, index.h("rebill-icon", { name: "succes", color: colorClassMapper.COLORS_ENUM.GREEN }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.successPayment'))), index.h("div", { class: "card-row" }, index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "field-value field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, index.h("rebill-icon", { name: "copy" }))))))), index.h("div", { class: "card-section" }, index.h("div", { class: "header-content" }, index.h("rebill-icon", { name: "rejected", color: colorClassMapper.COLORS_ENUM.ERROR }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.rejectedPayment'))), index.h("div", { class: "card-row" }, index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "field-value field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, index.h("rebill-icon", { name: "copy" })))))))), index.h("div", { class: "docs-section", onClick: this.handleDocsClick }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY }, i18n_service.I18nService.translate('sandbox.docs')), index.h("rebill-icon", { name: "external-link" }))));
+        return (index.h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel" }, index.h("div", { class: "mode-sandbox-mobile__cards-dropdown-panel-header" }, index.h("rebill-icon", { name: "card-test" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.cardTest'))), index.h("div", { class: "mode-sandbox-mobile__card-details" }, index.h("div", { class: "mode-sandbox-mobile__card-section" }, index.h("div", { class: "mode-sandbox-mobile__header-content" }, index.h("rebill-icon", { name: "succes", color: colorClassMapper.COLORS_ENUM.GREEN }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.successPayment'))), index.h("div", { class: "mode-sandbox-mobile__card-row" }, index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4539148803436467"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "mode-sandbox-mobile__copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4539148803436467 01/99 123') }, index.h("rebill-icon", { name: "copy" }))))))), index.h("div", { class: "mode-sandbox-mobile__card-section" }, index.h("div", { class: "mode-sandbox-mobile__header-content" }, index.h("rebill-icon", { name: "rejected", color: colorClassMapper.COLORS_ENUM.ERROR }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, i18n_service.I18nService.translate('sandbox.rejectedPayment'))), index.h("div", { class: "mode-sandbox-mobile__card-row" }, index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cardNumber')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-icon", { name: "visa" }), index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "4485364739527352"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.exp')), index.h("div", { class: "mode-sandbox-mobile__field-value" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "01/99"))), index.h("div", { class: "mode-sandbox-mobile__card-value" }, index.h("rebill-typography", { variant: "subtitle3", color: colorClassMapper.COLORS_ENUM.GREY_700 }, i18n_service.I18nService.translate('sandbox.cvv')), index.h("div", { class: "mode-sandbox-mobile__field-value mode-sandbox-mobile__field-value-with-copy" }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY_DARK }, "123"), index.h("div", { class: "mode-sandbox-mobile__copy-button" }, index.h("rebill-button", { variant: "text", size: "small", onClick: () => this.handleCopy('4485364739527352 01/99 123') }, index.h("rebill-icon", { name: "copy" })))))))), index.h("div", { class: "mode-sandbox-mobile__docs-section", onClick: this.handleDocsClick }, index.h("rebill-typography", { variant: "subtitle2", color: colorClassMapper.COLORS_ENUM.PRIMARY }, i18n_service.I18nService.translate('sandbox.docs')), index.h("rebill-icon", { name: "external-link" }))));
     }
     render() {
-        return (index.h("div", { key: '9c89ecbf8e6ee940bd56c01cd6d1ade8106cc008', class: `test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && index.h("div", { key: 'df0e79c1765bfa496e25e2ac64a072ed8b806e08', class: "overlay" }), index.h("div", { key: '005349daa4967dabcb6ce2c8211e60114b606ecc', class: `test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
+        return (index.h("div", { key: '2051c42d557dcdfc491dc679684aa585e6b8375a', class: `mode-sandbox-mobile__test-mode-container ${this.isPanelVisible ? 'cards-visible' : ''}` }, this.isPanelVisible && index.h("div", { key: '90291e86c59667a2055457ad99aad90deb8f1dd7', class: "mode-sandbox-mobile__overlay" }), index.h("div", { key: 'c405adb07262da6175badba97245914469480905', class: `mode-sandbox-mobile__test-mode-chip-mobile ${this.isPanelVisible ? 'expanded' : ''}` }, this.renderBasicChip()), this.isPanelVisible && this.renderCardsPanel()));
     }
 };
 RebillTestModeChipMobile.style = modeSandboxMobileCss;