@getmicdrop/svelte-components 5.18.0 → 5.19.0

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte

@@ -1,297 +1,240 @@
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import { ChevronDownOutline } from "../../../primitives/Icons";
-  import { portal as portalAction } from "../../../utils/portal.js";
-  import { typography } from "../../../tokens/typography";
-  import { bloom } from "../../../utils/transitions.js";
-  import { COUNTRIES, getSuggestedCountries, type Country } from "./countryData";
-
-  interface Props {
-    country?: Country;
-    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    labels?: {
-      searchPlaceholder?: string;
-      noResults?: string;
-      countrySelector?: string;
-      suggested?: string;
-      allCountries?: string;
-    };
-  }
-
-  const defaultLabels = {
-    searchPlaceholder: 'Search countries...',
-    noResults: 'No countries found',
-    countrySelector: 'Select country',
-    suggested: 'Suggested',
-    allCountries: 'All countries',
-  };
-
-  let {
-    country = $bindable(COUNTRIES.find((c) => c.code === 'US')!),
-    disabled = false,
-    size = "md",
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let isOpen = $state(false);
-  let searchQuery = $state('');
-  let triggerElement = $state<HTMLButtonElement | null>(null);
-  let dropdownElement = $state<HTMLDivElement | null>(null);
-  let searchInputElement = $state<HTMLInputElement | null>(null);
-  let focusedIndex = $state(-1);
-  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
-
-  const instanceId = Math.random().toString(36).substring(2, 9);
-  const suggestedCountries = getSuggestedCountries();
-
-  let filteredCountries = $derived.by(() => {
-    if (!searchQuery) return COUNTRIES;
-    const q = searchQuery.toLowerCase();
-    return COUNTRIES.filter(
-      (c) =>
-        c.name.toLowerCase().includes(q) ||
-        c.dialCode.includes(q) ||
-        c.code.toLowerCase().includes(q)
-    );
-  });
-
-  let showSuggested = $derived(!searchQuery);
-
-  // Build flat list of visible items for keyboard nav
-  let flatItems = $derived.by(() => {
-    const items: Country[] = [];
-    if (showSuggested) {
-      items.push(...suggestedCountries);
-    }
-    items.push(...filteredCountries);
-    return items;
-  });
-
-  const sizeMap = {
-    sm: 'h-9 px-2 text-sm gap-1',
-    md: 'h-10 px-2.5 text-sm gap-1.5',
-    lg: 'h-12 px-3 text-base gap-2',
-  } as const;
-
-  let sizeClass = $derived(sizeMap[size] || sizeMap.md);
-
-  function updateDropdownPosition() {
-    if (!triggerElement) return;
-    const rect = triggerElement.getBoundingClientRect();
-    dropdownPosition = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: Math.max(280, rect.width),
-    };
-  }
-
-  async function toggle() {
-    if (disabled) return;
-    isOpen = !isOpen;
-    if (isOpen) {
-      searchQuery = '';
-      focusedIndex = -1;
-      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
-      await tick();
-      updateDropdownPosition();
-      searchInputElement?.focus();
-    }
-  }
-
-  function handleOtherSelectOpened(event: Event) {
-    const customEvent = event as CustomEvent<{ instanceId: string }>;
-    if (customEvent.detail.instanceId !== instanceId && isOpen) {
-      close();
-    }
-  }
-
-  function close() {
-    isOpen = false;
-    searchQuery = '';
-    focusedIndex = -1;
-  }
-
-  function selectCountry(c: Country) {
-    country = c;
-    close();
-    triggerElement?.focus();
-  }
-
-  function handleKeydown(event: KeyboardEvent) {
-    if (disabled) return;
-
-    switch (event.key) {
-      case "Enter":
-        event.preventDefault();
-        if (isOpen && focusedIndex >= 0 && focusedIndex < flatItems.length) {
-          selectCountry(flatItems[focusedIndex]);
-        } else if (!isOpen) {
-          toggle();
-        }
-        break;
-      case "ArrowDown":
-        event.preventDefault();
-        if (!isOpen) {
-          toggle();
-        } else {
-          focusedIndex = Math.min(focusedIndex + 1, flatItems.length - 1);
-          scrollToFocused();
-        }
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        if (isOpen) {
-          focusedIndex = Math.max(focusedIndex - 1, 0);
-          scrollToFocused();
-        }
-        break;
-      case "Escape":
-        event.preventDefault();
-        close();
-        triggerElement?.focus();
-        break;
-      case "Tab":
-        close();
-        break;
-    }
-  }
-
-  function scrollToFocused() {
-    tick().then(() => {
-      const el = dropdownElement?.querySelector(`[data-index="${focusedIndex}"]`);
-      el?.scrollIntoView({ block: 'nearest' });
-    });
-  }
-
-  function handleClickOutside(event: MouseEvent) {
-    if (!isOpen) return;
-    const target = event.target as Node;
-    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(target);
-    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(target);
-    if (clickedOutsideTrigger && clickedOutsideDropdown) {
-      close();
-    }
-  }
-
-  onMount(() => {
-    document.addEventListener("click", handleClickOutside, true);
-    window.addEventListener("select-opened", handleOtherSelectOpened);
-    window.addEventListener("scroll", updateDropdownPosition, true);
-    window.addEventListener("resize", updateDropdownPosition);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutside, true);
-      window.removeEventListener("select-opened", handleOtherSelectOpened);
-      window.removeEventListener("scroll", updateDropdownPosition, true);
-      window.removeEventListener("resize", updateDropdownPosition);
-    };
-  });
-
-  let itemIndex = 0;
-  function resetIndex() {
-    itemIndex = 0;
-  }
-  function nextIndex() {
-    return itemIndex++;
-  }
-</script>
-
-<div class="relative shrink-0">
-  <button
-    type="button"
-    bind:this={triggerElement}
-    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
-    {disabled}
-    aria-haspopup="listbox"
-    aria-expanded={isOpen}
-    aria-label={labels.countrySelector}
-    onclick={toggle}
-    onkeydown={handleKeydown}
-  >
-    <span class="text-lg leading-none">{country.flag}</span>
-    <span class={`${typography.sm} whitespace-nowrap`}>{country.dialCode}</span>
-    <ChevronDownOutline class="w-3 h-3 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-  </button>
-
-  {#if isOpen}
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <div
-      bind:this={dropdownElement}
-      use:portalAction
-      class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
-      style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
-      role="listbox"
-      tabindex="-1"
-      aria-label={labels.countrySelector}
-      transition:bloom={{ origin: "top left" }}
-    >
-      <!-- Search -->
-      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
-        <input
-          bind:this={searchInputElement}
-          type="text"
-          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 {typography.sm} placeholder-gray-400 dark:placeholder-gray-500"
-          placeholder={labels.searchPlaceholder}
-          bind:value={searchQuery}
-          onkeydown={handleKeydown}
-        />
-      </div>
-
-      <!-- List -->
-      <div class="max-h-60 overflow-y-auto py-1">
-        {resetIndex()}
-
-        {#if showSuggested}
-          <div class="px-3 py-1.5">
-            <span class="text-xs font-semibold uppercase tracking-wider {typography.textMuted}">{labels.suggested}</span>
-          </div>
-          {#each suggestedCountries as c}
-            {@const idx = nextIndex()}
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <li
-              class="flex items-center gap-3 px-3 py-2 cursor-pointer {typography.sm} transition-colors {c.code === country.code ? 'bg-blue-50 dark:bg-blue-900/30' : ''} {idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
-              role="option"
-              aria-selected={c.code === country.code}
-              data-index={idx}
-              onclick={() => selectCountry(c)}
-              onmouseenter={() => (focusedIndex = idx)}
-            >
-              <span class="text-lg leading-none">{c.flag}</span>
-              <span class="flex-1">{c.name}</span>
-              <span class={typography.textMuted}>{c.dialCode}</span>
-            </li>
-          {/each}
-
-          <div class="border-t border-gray-200 dark:border-gray-600 mx-3 my-1"></div>
-          <div class="px-3 py-1.5">
-            <span class="text-xs font-semibold uppercase tracking-wider {typography.textMuted}">{labels.allCountries}</span>
-          </div>
-        {/if}
-
-        {#each filteredCountries as c}
-          {@const idx = nextIndex()}
-          <!-- svelte-ignore a11y_click_events_have_key_events -->
-          <li
-            class="flex items-center gap-3 px-3 py-2 cursor-pointer {typography.sm} transition-colors {c.code === country.code ? 'bg-blue-50 dark:bg-blue-900/30' : ''} {idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
-            role="option"
-            aria-selected={c.code === country.code}
-            data-index={idx}
-            onclick={() => selectCountry(c)}
-            onmouseenter={() => (focusedIndex = idx)}
-          >
-            <span class="text-lg leading-none">{c.flag}</span>
-            <span class="flex-1">{c.name}</span>
-            <span class={typography.textMuted}>{c.dialCode}</span>
-          </li>
-        {:else}
-          <div class="px-3 py-4 text-center {typography.textMuted}">
-            {labels.noResults}
-          </div>
-        {/each}
-      </div>
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../../../primitives/Icons";
+  import { typography } from "../../../tokens/typography";
+  import { bloom } from "../../../utils/transitions.js";
+  import { COUNTRIES, type Country } from "./countryData";
+
+  interface Props {
+    country?: Country;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    labels?: {
+      searchPlaceholder?: string;
+      noResults?: string;
+      countrySelector?: string;
+    };
+  }
+
+  const defaultLabels = {
+    searchPlaceholder: 'Search...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+  };
+
+  let {
+    country = $bindable(COUNTRIES.find((c) => c.code === 'US')!),
+    disabled = false,
+    size = "md",
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let isOpen = $state(false);
+  let searchQuery = $state('');
+  let triggerElement = $state<HTMLButtonElement | null>(null);
+  let dropdownElement = $state<HTMLDivElement | null>(null);
+  let searchInputElement = $state<HTMLInputElement | null>(null);
+  let focusedIndex = $state(-1);
+  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
+
+  const instanceId = Math.random().toString(36).substring(2, 9);
+
+  let filteredCountries = $derived.by(() => {
+    if (!searchQuery) return COUNTRIES;
+    const q = searchQuery.toLowerCase();
+    return COUNTRIES.filter(
+      (c) =>
+        c.name.toLowerCase().includes(q) ||
+        c.dialCode.includes(q) ||
+        c.code.toLowerCase().includes(q)
+    );
+  });
+
+  const sizeMap = {
+    sm: 'h-9 px-2 text-sm gap-1',
+    md: 'h-10 px-2.5 text-sm gap-1.5',
+    lg: 'h-12 px-3 text-base gap-2',
+  } as const;
+
+  let sizeClass = $derived(sizeMap[size] || sizeMap.md);
+
+  function updateDropdownPosition() {
+    if (!triggerElement) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: Math.max(280, rect.width),
+    };
+  }
+
+  async function toggle() {
+    if (disabled) return;
+    isOpen = !isOpen;
+    if (isOpen) {
+      searchQuery = '';
+      focusedIndex = -1;
+      window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      await tick();
+      updateDropdownPosition();
+      searchInputElement?.focus();
+    }
+  }
+
+  function handleOtherSelectOpened(event: Event) {
+    const customEvent = event as CustomEvent<{ instanceId: string }>;
+    if (customEvent.detail.instanceId !== instanceId && isOpen) {
+      close();
+    }
+  }
+
+  function close() {
+    isOpen = false;
+    searchQuery = '';
+    focusedIndex = -1;
+  }
+
+  function selectCountry(c: Country) {
+    country = c;
+    close();
+    triggerElement?.focus();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+          selectCountry(filteredCountries[focusedIndex]);
+        } else if (!isOpen) {
+          toggle();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        if (!isOpen) {
+          toggle();
+        } else {
+          focusedIndex = Math.min(focusedIndex + 1, filteredCountries.length - 1);
+          scrollToFocused();
+        }
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (isOpen) {
+          focusedIndex = Math.max(focusedIndex - 1, 0);
+          scrollToFocused();
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        close();
+        triggerElement?.focus();
+        break;
+      case "Tab":
+        close();
+        break;
+    }
+  }
+
+  function scrollToFocused() {
+    tick().then(() => {
+      const el = dropdownElement?.querySelector(`[data-index="${focusedIndex}"]`);
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+
+  function handleClickOutside(event: MouseEvent) {
+    if (!isOpen) return;
+    const target = event.target as Node;
+    const clickedOutsideTrigger = triggerElement && !triggerElement.contains(target);
+    const clickedOutsideDropdown = !dropdownElement || !dropdownElement.contains(target);
+    if (clickedOutsideTrigger && clickedOutsideDropdown) {
+      close();
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener("click", handleClickOutside, true);
+    window.addEventListener("select-opened", handleOtherSelectOpened);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    window.addEventListener("resize", updateDropdownPosition);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside, true);
+      window.removeEventListener("select-opened", handleOtherSelectOpened);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+      window.removeEventListener("resize", updateDropdownPosition);
+    };
+  });
+</script>
+
+<div class="relative shrink-0">
+  <button
+    type="button"
+    bind:this={triggerElement}
+    class="flex items-center {sizeClass} bg-gray-50 dark:bg-gray-800 border border-r-0 rounded-l-lg cursor-pointer transition-colors text-left focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    aria-label={labels.countrySelector}
+    onclick={toggle}
+    onkeydown={handleKeydown}
+  >
+    <span class="text-lg leading-none">{country.flag}</span>
+    <span class={`${typography.sm} whitespace-nowrap`}>{country.dialCode}</span>
+    <ChevronDownOutline class="w-3 h-3 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      bind:this={dropdownElement}
+      class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg overflow-hidden"
+      style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+      role="listbox"
+      tabindex="-1"
+      aria-label={labels.countrySelector}
+      transition:bloom={{ origin: "top left" }}
+    >
+      <!-- Search -->
+      <div class="p-2 border-b border-gray-200 dark:border-gray-600">
+        <input
+          bind:this={searchInputElement}
+          type="text"
+          class="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-400 dark:placeholder-gray-500"
+          placeholder={labels.searchPlaceholder}
+          bind:value={searchQuery}
+          onkeydown={handleKeydown}
+        />
+      </div>
+
+      <!-- List -->
+      <div class="max-h-60 overflow-y-auto py-1">
+        {#each filteredCountries as c, idx}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class={`flex items-center gap-3 px-3 py-2 cursor-pointer ${typography.sm} transition-colors ${c.code === country.code ? '' : typography.textMuted} ${idx === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+            role="option"
+            aria-selected={c.code === country.code}
+            data-index={idx}
+            onclick={() => selectCountry(c)}
+            onmouseenter={() => (focusedIndex = idx)}
+          >
+            <span class="text-lg leading-none">{c.flag}</span>
+            <span class="flex-1">{c.name}</span>
+            <span class={typography.textMuted}>{c.dialCode}</span>
+          </li>
+        {:else}
+          <div class={`px-3 py-4 text-center ${typography.textMuted}`}>
+            {labels.noResults}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts

@@ -7,8 +7,6 @@ interface Props {
         searchPlaceholder?: string;
         noResults?: string;
         countrySelector?: string;
-        suggested?: string;
-        allCountries?: string;
     };
 }
 declare const CountrySelector: import("svelte").Component<Props, {}, "country">;

package/dist/recipes/inputs/phoneInput/CountrySelector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/CountrySelector.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAAoC,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7E,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;CACH;AAyPH,QAAA,MAAM,eAAe,kDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CountrySelector.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/CountrySelector.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,OAAO,EAAE,MAAM,eAAe,CAAC;AAGtD,UAAU,KAAK;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE;QACP,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH;AA0MH,QAAA,MAAM,eAAe,kDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/recipes/inputs/phoneInput/countryData.d.ts

@@ -10,8 +10,6 @@ export interface Country {
     /** Priority for shared dial codes (lower = higher priority) */
     priority?: number;
 }
-/** Countries pinned to the top of the selector */
-export declare const SUGGESTED_CODES: string[];
 export declare const COUNTRIES: Country[];
 /** Get a country by ISO code */
 export declare function getCountry(code: string): Country | undefined;

package/dist/recipes/inputs/phoneInput/countryData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"countryData.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/countryData.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,eAAO,MAAM,eAAe,UAAiC,CAAC;AAE9D,eAAO,MAAM,SAAS,EAAE,OAAO,EAwM9B,CAAC;AAEF,gCAAgC;AAChC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE5D;AAED,8DAA8D;AAC9D,wBAAgB,qBAAqB,IAAI,OAAO,EAAE,CAEjD"}
+{"version":3,"file":"countryData.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/phoneInput/countryData.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,8BAA8B;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,EAwM9B,CAAC;AAEF,gCAAgC;AAChC,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE5D;AAKD,8DAA8D;AAC9D,wBAAgB,qBAAqB,IAAI,OAAO,EAAE,CAEjD"}

package/dist/recipes/inputs/phoneInput/countryData.js

@@ -1,6 +1,5 @@
-/** Countries pinned to the top of the selector */
-export const SUGGESTED_CODES = ['US', 'CA', 'GB', 'MX', 'AU'];
 export const COUNTRIES = [
+    { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', priority: 0 },
     { code: 'AF', name: 'Afghanistan', dialCode: '+93', flag: '🇦🇫' },
     { code: 'AL', name: 'Albania', dialCode: '+355', flag: '🇦🇱' },
     { code: 'DZ', name: 'Algeria', dialCode: '+213', flag: '🇩🇿' },
@@ -190,7 +189,6 @@ export const COUNTRIES = [
     { code: 'UA', name: 'Ukraine', dialCode: '+380', flag: '🇺🇦' },
     { code: 'AE', name: 'United Arab Emirates', dialCode: '+971', flag: '🇦🇪' },
     { code: 'GB', name: 'United Kingdom', dialCode: '+44', flag: '🇬🇧' },
-    { code: 'US', name: 'United States', dialCode: '+1', flag: '🇺🇸', priority: 0 },
     { code: 'UY', name: 'Uruguay', dialCode: '+598', flag: '🇺🇾' },
     { code: 'UZ', name: 'Uzbekistan', dialCode: '+998', flag: '🇺🇿' },
     { code: 'VU', name: 'Vanuatu', dialCode: '+678', flag: '🇻🇺' },
@@ -205,6 +203,8 @@ export const COUNTRIES = [
 export function getCountry(code) {
     return COUNTRIES.find((c) => c.code === code);
 }
+/** Country codes pinned to top of the country selector */
+const SUGGESTED_CODES = ['US', 'CA', 'GB', 'AU'];
 /** Get the suggested countries (pinned to top of selector) */
 export function getSuggestedCountries() {
     return SUGGESTED_CODES.map((code) => COUNTRIES.find((c) => c.code === code)).filter(Boolean);