@mozaic-ds/web-components 1.2.0 → 1.4.0

package/dist/components/phonenumber/PhoneNumber.svelte

@@ -0,0 +1,905 @@
+<svelte:options
+  customElement={{
+    tag: 'm-phone-number',
+    props: {
+      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
+      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
+      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
+      prefix: { reflect: true, type: 'Boolean', attribute: 'prefix' },
+      flag: { reflect: true, type: 'Boolean', attribute: 'flag' },
+    },
+    extend: customElementForwardEvents,
+  }}
+/>
+
+<script lang="ts">
+  import { customElementForwardEvents } from '../../utils';
+  import {
+    parsePhoneNumberFromString,
+    isValidPhoneNumber,
+    getCountries,
+    getCountryCallingCode,
+    getExampleNumber,
+    type CountryCode,
+  } from 'libphonenumber-js';
+  import examples from 'libphonenumber-js/mobile/examples';
+  import { ChevronDown20 } from '@mozaic-ds/icons-svelte';
+  /**
+   * A phone number input is a specialized input field designed to capture and validate phone numbers, ensuring correct formatting based on country-specific dialing codes. It often includes a country selector that automatically adjusts the international dialing code. This component improves user experience by standardizing phone number entries, reducing errors, and facilitating global compatibility. It is commonly used in registration forms, authentication flows, and contact information fields.
+   *
+   * @event valid {CustomEvent<boolean>} - Emits the validity of the value when the PhoneNumber changes.
+   */
+  interface Props {
+    [key: string]: any;
+    /**
+     * A unique identifier for the phone number input element, used to associate the label with the form element.
+     */
+    id: string;
+    /**
+     * The current value of the phone number input field.
+     */
+    value?: string;
+    /**
+     * Default country code for phone number formatting (e.g., 'FR', 'US', 'PT').
+     */
+    defaultcountry?: CountryCode;
+    /**
+     * A placeholder text to show in the phone number input when it is empty.
+     */
+    placeholder?: string;
+    /**
+     * Determines the size of the phone number input.
+     */
+    size?: 's' | 'm';
+    /**
+     * If `true`, applies an invalid state to the password input.
+     */
+    isinvalid?: boolean;
+    /**
+     * If `true`, disables the input, making it non-interactive.
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the input is read-only (cannot be edited).
+     */
+    readonly?: boolean;
+    /**
+     * If `true`, display the country calling code prefix (+33, +1, etc.).
+     */
+    prefix?: boolean;
+    /**
+     * If `true`, display the country flag selector
+     */
+    flag?: boolean;
+    /**
+     * Locale for displaying country names (e.g., 'fr', 'en', 'es', 'pt').
+     */
+    locale?: string;
+    /**
+     * List of country codes to display in the selector. If not provided, all countries will be shown.
+     */
+    countrycodes?: CountryCode[];
+  }
+
+  let {
+    id,
+    value = $bindable(''),
+    defaultcountry = 'FR',
+    placeholder = '',
+    size = 'm',
+    isinvalid,
+    disabled,
+    readonly,
+    prefix = true,
+    flag = true,
+    locale = 'en',
+    countrycodes,
+    ...attrs
+  }: Props = $props();
+  let element: HTMLElement;
+
+  let phoneNumber: string = $state(value);
+  let selectedCountry: CountryCode = $state('FR' as CountryCode);
+
+  $effect(() => {
+    selectedCountry = defaultcountry;
+    value = phoneNumber;
+  });
+
+  const countries: CountryCode[] = $derived(countrycodes || getCountries());
+
+  const dynamicPlaceholder = () => {
+    if (placeholder) return placeholder;
+    return getExampleNumber(selectedCountry, examples)?.formatNational() ?? '';
+  };
+
+  const getCountryName = (cc: CountryCode) => {
+    try {
+      const dn = new Intl.DisplayNames([locale], { type: 'region' });
+      return dn.of(cc) || cc;
+    } catch {
+      return cc;
+    }
+  };
+
+  const getFlagUrl = (cc: CountryCode) => `https://flagcdn.com/${cc.toLowerCase()}.svg`;
+
+  const valid = () => {
+    if (!phoneNumber) return false;
+    try {
+      return isValidPhoneNumber(phoneNumber, selectedCountry);
+    } catch {
+      return false;
+    }
+  };
+
+  $effect(() => {
+    const event = new CustomEvent('valid', {
+      detail: valid(),
+      bubbles: true,
+      composed: true,
+    });
+    element.dispatchEvent(event);
+  });
+
+  $effect(() => {
+    if (value && value !== phoneNumber) {
+      if (value.startsWith('+')) {
+        try {
+          const parsed = parsePhoneNumberFromString(value, selectedCountry);
+          phoneNumber = parsed ? parsed.formatNational() : value;
+        } catch {
+          phoneNumber = value;
+        }
+      } else {
+        phoneNumber = value;
+      }
+    }
+    if (!value) phoneNumber = '';
+  });
+
+  function handleInput(e: Event) {
+    const input = e.target as HTMLInputElement;
+    const raw = input.value;
+    const sanitized = raw.replace(/[^0-9+\s()-]/g, '');
+    phoneNumber = sanitized;
+    if (sanitized !== raw) input.value = sanitized;
+  }
+</script>
+
+<div id="mc-phone-number-input" class="mc-phone-number-input" bind:this={element}>
+  <div
+    class={[
+      'mc-phone-number-input__select-wrapper',
+      !flag && 'mc-phone-number-input__select-wrapper--hidden',
+    ]}
+  >
+    <select
+      id="selectComponentId"
+      class={['mc-select', 'mc-phone-number-input__select', size !== 'm' && `mc-select--${size}`]}
+      bind:value={selectedCountry}
+      {disabled}
+      name="country-select"
+    >
+      <option value="" selected hidden></option>
+
+      {#each countries as country, index (index)}
+        <option value={country} data-flag={country.toLowerCase()}>
+          {getCountryName(country)} (+{getCountryCallingCode(country)})
+        </option>
+      {/each}
+    </select>
+
+    <div class="mc-phone-number-input__select-display">
+      <div class="mc-phone-number-input__flag">
+        {#if selectedCountry}
+          <img
+            class="mc-phone-number-input__flag-image"
+            src={getFlagUrl(selectedCountry)}
+            alt={getCountryName(selectedCountry)}
+            width="20"
+          />
+        {/if}
+      </div>
+
+      <span class="mc-phone-number-input__chevron">
+        <ChevronDown20 />
+      </span>
+    </div>
+  </div>
+
+  <div
+    class={[
+      'mc-text-input',
+      'mc-phone-number-input__input',
+      size !== 'm' && `mc-text-input--${size}`,
+      (isinvalid || (phoneNumber && !valid())) && 'is-invalid',
+    ]}
+  >
+    {#if prefix}
+      <span class="mc-phone-number-input__country-code">
+        +{getCountryCallingCode(selectedCountry)}
+      </span>
+    {/if}
+
+    <input
+      type="tel"
+      bind:value={phoneNumber}
+      {id}
+      class="mc-phone-number-input__control mc-text-input__control"
+      placeholder={dynamicPlaceholder()}
+      name="phone-number"
+      aria-invalid={isinvalid}
+      {disabled}
+      {readonly}
+      oninput={handleInput}
+      {...attrs}
+    />
+  </div>
+</div>
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+/* stylelint-disable string-no-newline */
+.mc-text-input {
+  transition: box-shadow 200ms ease;
+  background-color: var(--forms-color-background-default, #ffffff);
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--forms-border-radius, 0.25rem);
+  transition: all ease 200ms;
+  color: var(--forms-color-text-default, #000000);
+  display: block;
+  width: 100%;
+  height: 3rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.mc-text-input__control {
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  outline: none;
+}
+.mc-text-input__control[type=number] {
+  /* For Blink & WebKit rendering engines */
+}
+.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+.mc-text-input__control[type=number] {
+  /* For Gecko rendering engine */
+  appearance: textfield;
+}
+.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
+  appearance: none;
+}
+.mc-text-input__control {
+  padding: 0.75rem 0.6875rem;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-regular, 400);
+  flex-grow: 1;
+}
+.mc-text-input__control::placeholder {
+  color: var(--forms-color-placeholder, #666666);
+}
+.mc-text-input__icon {
+  fill: var(--forms-color-icon-default, #666666);
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+}
+.mc-text-input:focus-within {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-text-input:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-text-input:has(input:disabled) {
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  cursor: not-allowed;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+  pointer-events: none;
+}
+.mc-text-input:has(input[readonly]) {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-text-input:has(.mc-text-input__icon) {
+  padding-inline-start: 0.6875rem;
+}
+.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control {
+  padding-inline-start: 0;
+}
+.mc-text-input:has(.mc-controls-options) {
+  padding-inline-end: 0.6875rem;
+}
+.mc-text-input:has(.mc-controls-options) .mc-text-input__control {
+  padding-inline-end: 0;
+}
+.mc-text-input--s {
+  height: 2rem;
+}
+.mc-text-input--s .mc-text-input__control {
+  padding: 0.375rem 0.6875rem;
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+}
+.mc-text-input--s:has(.mc-text-input__icon) {
+  padding-inline-start: 0.4375rem;
+}
+.mc-text-input--s:has(.mc-controls-options) {
+  padding-inline-end: 0.4375rem;
+}
+.mc-text-input.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-text-input.is-invalid:hover:not(:focus-within) {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
+}
+.mc-text-input * {
+  box-sizing: border-box;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-button {
+  color: var(--button-color-filled-standard-font, #ffffff);
+  background-color: var(--button-color-filled-standard-background, #464e63);
+}
+.mc-button:hover {
+  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
+}
+.mc-button:active {
+  background-color: var(--button-color-filled-standard-active-background, #242938);
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button {
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button {
+  display: inline-flex;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  border: 2px solid transparent;
+  border-radius: var(--button-border-radius-s, 0.25rem);
+  transition: all ease 200ms;
+  transition: box-shadow 200ms ease;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: inherit;
+  fill: currentcolor;
+  gap: 0.25rem;
+  cursor: pointer;
+}
+.mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button__icon {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-button--s {
+  padding: 0 calc(0.75rem - 0.125rem);
+  min-height: 2rem;
+  min-width: 2rem;
+}
+.mc-button--s .mc-button__label {
+  font-size: var(--font-size-100, 0.875rem);
+}
+.mc-button--s .mc-button__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--s .mc-button__icon:only-child {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.mc-button--m {
+  padding: 0 calc(1rem - 0.125rem);
+  min-height: 3rem;
+  min-width: 3rem;
+}
+.mc-button--m .mc-button__label {
+  font-size: var(--font-size-150, 1rem);
+}
+.mc-button--m .mc-button__icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--m .mc-button__icon:only-child {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-button--l {
+  padding: 0 calc(1.25rem - 0.125rem);
+  min-height: 4rem;
+  min-width: 4rem;
+}
+.mc-button--l .mc-button__label {
+  font-size: var(--font-size-200, 1.125rem);
+}
+.mc-button--l .mc-button__icon {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--l .mc-button__icon:only-child {
+  width: 2rem;
+  height: 2rem;
+}
+.mc-button--icon-only {
+  padding: 0.25rem;
+}
+.mc-button--outlined {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--accent {
+  color: var(--button-color-filled-accent-font, #ffffff);
+  background-color: var(--button-color-filled-accent-background, #117f03);
+}
+.mc-button--accent:hover {
+  background-color: var(--button-color-filled-accent-hover-background, #006902);
+}
+.mc-button--accent:active {
+  background-color: var(--button-color-filled-accent-active-background, #035010);
+}
+.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--danger {
+  color: var(--button-color-filled-danger-font, #ffffff);
+  background-color: var(--button-color-filled-danger-background, #c61112);
+}
+.mc-button--danger:hover {
+  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
+}
+.mc-button--danger:active {
+  background-color: var(--button-color-filled-danger-active-background, #530000);
+}
+.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--inverse {
+  --focus-color-mid: var(--focus-color-outline-outer, #000000);
+  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
+  color: var(--button-color-filled-inverse-font, #242938);
+  background-color: var(--button-color-filled-inverse-background, #ffffff);
+}
+.mc-button--inverse:hover {
+  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
+}
+.mc-button--inverse:active {
+  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
+}
+.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--icon-button {
+  border-radius: var(--border-radius-full, 100%);
+  padding: 0;
+}
+.mc-button--loading .mc-button__loader {
+  position: absolute;
+  color: currentcolor;
+}
+.mc-button--loading .mc-button__label,
+.mc-button--loading .mc-button__icon {
+  visibility: hidden;
+}
+.mc-button--outlined.mc-button--standard {
+  color: var(--button-color-outlined-standard-font, #242938);
+  border-color: var(--button-color-outlined-standard-border, #8891aa);
+  background-color: var(--button-color-outlined-standard-background, #ffffff);
+}
+.mc-button--outlined.mc-button--standard:hover {
+  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
+}
+.mc-button--outlined.mc-button--standard:active {
+  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
+}
+.mc-button--outlined.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--accent {
+  color: var(--button-color-outlined-accent-font, #117f03);
+  border-color: var(--button-color-outlined-accent-border, #78be20);
+  background-color: var(--button-color-outlined-accent-background, #ffffff);
+}
+.mc-button--outlined.mc-button--accent:hover {
+  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
+}
+.mc-button--outlined.mc-button--accent:active {
+  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
+}
+.mc-button--outlined.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--danger {
+  color: var(--button-color-outlined-danger-font, #c61112);
+  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
+  background-color: var(--button-color-outlined-danger-background, #ffffff);
+}
+.mc-button--outlined.mc-button--danger:hover {
+  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
+}
+.mc-button--outlined.mc-button--danger:active {
+  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
+}
+.mc-button--outlined.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--outlined.mc-button--inverse {
+  color: var(--button-color-outlined-inverse-font, #ffffff);
+  border-color: var(--button-color-outlined-inverse-border, #ffffff);
+  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--outlined.mc-button--inverse:hover {
+  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--outlined.mc-button--inverse:active {
+  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--outlined.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--standard {
+  color: var(--button-color-ghost-standard-font, #242938);
+  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--standard:hover {
+  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
+}
+.mc-button--ghost.mc-button--standard:active {
+  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
+}
+.mc-button--ghost.mc-button--standard:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--accent {
+  color: var(--button-color-ghost-accent-font, #117f03);
+  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--accent:hover {
+  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
+}
+.mc-button--ghost.mc-button--accent:active {
+  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
+}
+.mc-button--ghost.mc-button--accent:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--danger {
+  color: var(--button-color-ghost-danger-font, #c61112);
+  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--danger:hover {
+  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
+}
+.mc-button--ghost.mc-button--danger:active {
+  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
+}
+.mc-button--ghost.mc-button--danger:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+.mc-button--ghost.mc-button--inverse {
+  color: var(--button-color-ghost-inverse-font, #ffffff);
+  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
+}
+.mc-button--ghost.mc-button--inverse:hover {
+  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
+}
+.mc-button--ghost.mc-button--inverse:active {
+  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
+}
+.mc-button--ghost.mc-button--inverse:disabled {
+  background-color: var(--button-state-disabled-background, #d9d9d9);
+  border-color: transparent;
+  color: var(--button-state-disabled-color, #737373);
+  cursor: not-allowed;
+}
+
+.mc-listbox {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 1;
+  padding: 0.5rem;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  pointer-events: none;
+  transition: opacity 0.4s ease, visibility 0ms 0.4s;
+  z-index: var(--overlay-z-index, 2);
+}
+.mc-listbox.is-visible {
+  opacity: 1;
+  pointer-events: all;
+  transition: opacity 0.4s ease, visibility 0ms;
+  visibility: visible;
+}
+.mc-listbox {
+  opacity: 1;
+}
+@media (width >= 680px) {
+  .mc-listbox {
+    position: relative;
+    display: block;
+    padding: 0;
+    background-color: transparent;
+  }
+}
+.mc-listbox__content {
+  border: var(--border-width-s, 0.0625rem) solid var(--color-border-primary, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  width: 100%;
+  z-index: 10;
+  background-color: var(--color-background-primary, #ffffff);
+  pointer-events: all;
+}
+@media (width >= 680px) {
+  .mc-listbox__content {
+    width: 18.75rem;
+  }
+}
+.mc-listbox__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: 4rem;
+}
+@media (width >= 680px) {
+  .mc-listbox__header {
+    display: none;
+  }
+}
+.mc-listbox__title {
+  line-height: var(--line-height-s, 1.3);
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--color-text-tertiary, #666666);
+  text-align: center;
+  margin: 0;
+}
+.mc-listbox__close {
+  position: absolute;
+  right: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.mc-listbox__body {
+  overflow: hidden;
+}
+
+/* stylelint-disable string-no-newline */
+.mc-select {
+  appearance: none;
+  font-family: inherit;
+  transition: box-shadow 200ms ease;
+  font-size: var(--font-size-150, 1rem);
+  line-height: var(--line-height-s, 1.3);
+  height: 3rem;
+  padding: 0 3rem 0 0.75rem;
+  background-position: right 1rem center;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-interactive, %23000000)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  display: block;
+  width: 100%;
+  color: var(--forms-color-text-default, #000000);
+  background-color: var(--forms-color-background-default, #ffffff);
+  text-overflow: ellipsis;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-select:hover {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-select:focus {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-select:disabled {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1rem' width='1rem' fill='var(--forms-color-icon-disabled, %23737373)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E");
+  background-color: var(--forms-color-background-disabled, #d9d9d9);
+  border-color: transparent;
+  cursor: not-allowed;
+  box-shadow: none;
+  color: var(--forms-color-text-disabled, #737373);
+}
+.mc-select--readonly {
+  border-color: var(--forms-color-border-read-only, #cccccc);
+  pointer-events: none;
+}
+.mc-select.is-invalid {
+  border-color: var(--forms-color-border-invalid, #ea302d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
+}
+.mc-select.is-invalid:hover {
+  border-color: var(--forms-color-border-invalid-hover, #c61112);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
+}
+.mc-select--s {
+  font-size: var(--font-size-100, 0.875rem);
+  line-height: var(--line-height-s, 1.3);
+  height: 2rem;
+  padding: 0 2rem 0 0.5rem;
+  background-position: right 0.5rem center;
+}
+
+/* stylelint-enable string-no-newline */
+.mc-phone-number-input {
+  font-family: var(--font-family, LeroyMerlin), sans-serif;
+  display: flex;
+  position: relative;
+  gap: 0.25rem;
+}
+.mc-phone-number-input__country-code {
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--forms-color-text-default, #000000);
+  font-size: var(--font-size-150, 1rem);
+  margin-left: 0.75rem;
+}
+.mc-phone-number-input__flag {
+  width: 1.5rem;
+  height: 1.125rem;
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+}
+.mc-phone-number-input__flag-image {
+  width: 24px;
+  max-height: 18px;
+  border-radius: var(--border-radius-xs, 0.125rem);
+}
+.mc-phone-number-input__chevron {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0.75rem;
+}
+.mc-phone-number-input__select-wrapper {
+  position: relative;
+}
+.mc-phone-number-input__select-wrapper--hidden {
+  display: none;
+}
+.mc-phone-number-input__select {
+  width: 5.75rem;
+  padding: 0;
+  z-index: 2;
+  opacity: 0;
+  position: relative;
+}
+.mc-phone-number-input__select:hover + .mc-phone-number-input__select-display {
+  border-color: var(--forms-color-border-hover, #4d4d4d);
+  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
+}
+.mc-phone-number-input__select :read-only .mc-phone-number-input__chevron {
+  display: none;
+}
+.mc-phone-number-input__select-display {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1;
+  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
+  border-radius: var(--border-radius-s, 0.25rem);
+}
+.mc-phone-number-input__input {
+  gap: 0;
+}
+.mc-phone-number-input__control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.5rem;
+}
+
+.mc-phone-number-input__chevron :global(svg) {
+  height: 100%;
+  width: 100%;
+}</style>