@getmicdrop/svelte-components 5.17.4 → 5.18.1

package/dist/recipes/inputs/PhoneInput.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { safeSlide } from "../../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import { ExclamationCircleOutline } from "../../primitives/Icons";
+  import { typography } from "../../tokens/typography";
+  import { formInputSizes } from "../../tokens/sizing";
+  import CountrySelector from "./phoneInput/CountrySelector.svelte";
+  import { COUNTRIES, getCountry, type Country } from "./phoneInput/countryData";
+  import {
+    parseStoredPhone,
+    formatAsYouType,
+    toE164,
+    isValidE164,
+  } from "../../utils/phoneUtils";
+  import type { CountryCode } from "libphonenumber-js/min";
+
+  const defaultLabels = {
+    searchPlaceholder: 'Search...',
+    noResults: 'No countries found',
+    countrySelector: 'Select country',
+    optional: '(optional)',
+  };
+
+  interface Props {
+    value?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    optional?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    errorText?: string;
+    helperText?: string;
+    color?: 'base' | 'red';
+    controlled?: boolean;
+    buttonText?: string | null;
+    buttonDisabled?: boolean;
+    onButtonClick?: ((value: string) => void) | null;
+    defaultCountry?: string;
+    labels?: Partial<typeof defaultLabels>;
+    onchange?: (detail: { value: string; country: string; isValid: boolean }) => void;
+    animateFocus?: boolean;
+    statusText?: string;
+    statusType?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    label = '',
+    id = '',
+    name = '',
+    placeholder = '',
+    required = false,
+    disabled = false,
+    optional = false,
+    size = 'md',
+    errorText = '',
+    helperText = '',
+    color = 'base',
+    controlled = false,
+    buttonText = null,
+    buttonDisabled = false,
+    onButtonClick = null,
+    defaultCountry = 'US',
+    labels: userLabels = {},
+    onchange,
+    animateFocus = true,
+    statusText = '',
+    statusType = '',
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Internal state
+  let selectedCountry = $state<Country>(getCountry(defaultCountry) || COUNTRIES.find((c) => c.code === 'US')!);
+  let nationalDigits = $state('');
+  let displayValue = $state('');
+  let inputElement = $state<HTMLInputElement | null>(null);
+  let hasInitialized = $state(false);
+
+  let hasError = $derived(color === 'red' || Boolean(errorText));
+  let sizeClass = $derived(formInputSizes[size] || formInputSizes.md);
+  let shouldAnimate = $derived(animateFocus && !disabled);
+
+  // Parse incoming value on mount or when value changes externally
+  $effect(() => {
+    const currentValue = value;
+    if (!hasInitialized || currentValue !== lastEmittedValue) {
+      parseIncomingValue(currentValue);
+      hasInitialized = true;
+    }
+  });
+
+  let lastEmittedValue = '';
+
+  function parseIncomingValue(incoming: string) {
+    if (!incoming) {
+      nationalDigits = '';
+      displayValue = '';
+      return;
+    }
+
+    const parsed = parseStoredPhone(incoming);
+    if (parsed) {
+      const country = getCountry(parsed.countryCode);
+      if (country) {
+        selectedCountry = country;
+      }
+      nationalDigits = parsed.nationalNumber;
+      displayValue = formatAsYouType(parsed.countryCode as CountryCode, parsed.nationalNumber);
+    } else {
+      // Can't parse — treat as raw digits
+      nationalDigits = incoming.replace(/\D/g, '');
+      displayValue = nationalDigits;
+    }
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const raw = target.value.replace(/\D/g, '');
+    nationalDigits = raw;
+
+    // Format as-you-type
+    const formatted = formatAsYouType(selectedCountry.code as CountryCode, raw);
+    displayValue = formatted;
+    target.value = formatted;
+
+    // Compute E.164 and emit
+    const e164 = toE164(selectedCountry.code as CountryCode, raw);
+    lastEmittedValue = e164;
+    value = e164;
+
+    const valid = e164 ? isValidE164(e164) : false;
+    onchange?.({ value: e164, country: selectedCountry.code, isValid: valid });
+  }
+
+  function handleCountryChange() {
+    // Re-format existing digits for new country
+    displayValue = formatAsYouType(selectedCountry.code as CountryCode, nationalDigits);
+
+    // Recalculate E.164
+    const e164 = toE164(selectedCountry.code as CountryCode, nationalDigits);
+    lastEmittedValue = e164;
+    value = e164;
+
+    const valid = e164 ? isValidE164(e164) : false;
+    onchange?.({ value: e164, country: selectedCountry.code, isValid: valid });
+
+    // Focus the input after country change
+    inputElement?.focus();
+  }
+
+  // Watch for country changes from the selector
+  $effect(() => {
+    // Trigger on selectedCountry change (read it to create dependency)
+    const _code = selectedCountry.code;
+    if (hasInitialized && nationalDigits) {
+      handleCountryChange();
+    }
+  });
+
+  function handleButtonClick() {
+    if (typeof onButtonClick === 'function') {
+      onButtonClick(value);
+    }
+  }
+
+  export function focus() {
+    inputElement?.focus();
+  }
+
+  export function clear() {
+    nationalDigits = '';
+    displayValue = '';
+    value = '';
+    lastEmittedValue = '';
+  }
+</script>
+
+<div class="flex flex-col gap-2" {...restProps}>
+  {#if label}
+    <div class="flex justify-start items-center gap-1">
+      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
+        {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+      </label>
+      {#if statusText}
+        <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
+      {/if}
+      {#if optional}
+        <span class={typography.smMuted}>{labels.optional}</span>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="relative w-full">
+    <div class="flex items-stretch w-full">
+      <CountrySelector
+        bind:country={selectedCountry}
+        {disabled}
+        {size}
+        labels={{
+          searchPlaceholder: labels.searchPlaceholder,
+          noResults: labels.noResults,
+          countrySelector: labels.countrySelector,
+        }}
+      />
+
+      <div class="relative flex-1 flex items-center">
+        <input
+          bind:this={inputElement}
+          {id}
+          type="tel"
+          {name}
+          {placeholder}
+          value={displayValue}
+          oninput={handleInput}
+          inputmode="tel"
+          autocomplete="tel"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border border-l-0 rounded-r-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {controlled && (buttonText) ? 'pr-20' : ''} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          required={false}
+          {disabled}
+          aria-required={required}
+        />
+
+        {#if controlled && buttonText}
+          <button
+            type="button"
+            onclick={handleButtonClick}
+            disabled={buttonDisabled}
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || errorText ? 'mb-7' : ''}"
+          >
+            <span class="text-sm font-medium">{buttonText}</span>
+          </button>
+        {/if}
+      </div>
+    </div>
+
+    {#if errorText}
+      <div transition:safeSlide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
+        <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
+        <p class={typography.error}>{errorText}</p>
+      </div>
+    {:else if helperText}
+      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
+        <span>{helperText}</span>
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/recipes/inputs/PhoneInput.svelte.d.ts

@@ -0,0 +1,40 @@
+declare const PhoneInput: import("svelte").Component<{
+    [key: string]: unknown;
+    value?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    optional?: boolean;
+    size?: "sm" | "md" | "lg";
+    errorText?: string;
+    helperText?: string;
+    color?: "base" | "red";
+    controlled?: boolean;
+    buttonText?: string | null;
+    buttonDisabled?: boolean;
+    onButtonClick?: ((value: string) => void) | null;
+    defaultCountry?: string;
+    labels?: Partial<{
+        searchPlaceholder: string;
+        noResults: string;
+        countrySelector: string;
+        optional: string;
+    }>;
+    onchange?: (detail: {
+        value: string;
+        country: string;
+        isValid: boolean;
+    }) => void;
+    animateFocus?: boolean;
+    statusText?: string;
+    statusType?: string;
+}, {
+    focus: () => void;
+    clear: () => void;
+}, "value">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;
+//# sourceMappingURL=PhoneInput.svelte.d.ts.map

package/dist/recipes/inputs/PhoneInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/PhoneInput.svelte.ts"],"names":[],"mappings":"AAuPA,QAAA,MAAM,UAAU;;YAhNJ,MAAM;YACN,MAAM;SACT,MAAM;WACJ,MAAM;kBACC,MAAM;eACT,OAAO;eACP,OAAO;eACP,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;gBACb,MAAM;iBACL,MAAM;YACX,MAAM,GAAG,KAAK;iBACT,OAAO;iBACP,MAAM,GAAG,IAAI;qBACT,OAAO;oBACR,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;qBAC/B,MAAM;aACd,OAAO;;;;;MAAsB;eAC3B,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;mBAClE,OAAO;iBACT,MAAM;iBACN,MAAM;;;;WA2LiC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte

@@ -4,6 +4,15 @@
   import { PUBLIC_GOOGLE_MAPS_API_KEY } from '../../../config.js';
   import { typography } from '../../../tokens/typography';
   import { bloom } from '../../../utils/transitions.js';
+
+  const defaultLabels = {
+    anErrorOccurred: 'An error occurred',
+    seeConsoleForDetails: 'see console for details.',
+    errorFetchingPlaceDetails: 'error fetching place details',
+    errorFetchToken: 'error fetch token',
+    errorLoadingGoogleMapsApi: 'Error loading Google Maps API',
+    googleMapsApiKeyRequired: 'Google Maps API key is required',
+  };
 /** Google Places API address component */  interface AddressComponent {    longText: string;    shortText: string;    types: string[];  }  /** Google Places API response data */  interface PlaceData {    formattedAddress?: string;    addressComponents?: AddressComponent[];    text?: string;    [key: string]: unknown;  }  /** Google Places autocomplete suggestion */  interface AutocompleteSuggestion {    placePrediction: {      types: string[];      text: { toString(): string };      toPlace(): PlaceObject;    };  }  /** Google Places place object */  interface PlaceObject {    fetchFields(options: { fields: string[] }): Promise<void>;    toJSON(): PlaceData;  }  /** Google Places API interface */  interface PlacesApiInterface {    AutocompleteSessionToken: new () => AutocompleteSessionToken;    AutocompleteSuggestion: {      fetchAutocompleteSuggestions(request: AutocompleteRequest): Promise<{ suggestions: AutocompleteSuggestion[] }>;    };  }  /** Google Places autocomplete session token */  interface AutocompleteSessionToken {}  /** Autocomplete request parameters */  interface AutocompleteRequest {    input: string;    language: string;    region: string;    sessionToken: AutocompleteSessionToken | string;  }  /** Search result item */  interface SearchResult {    to_place: PlaceObject;    text: string;    originalText?: string;  }
 
   interface Props {
@@ -18,6 +27,7 @@
     mode?: 'full' | 'cityState';
     animateFocus?: boolean;
     disabled?: boolean;
+    labels?: Partial<typeof defaultLabels>;
   }
 
   let {
@@ -32,8 +42,11 @@
     mode = 'full',
     animateFocus = true,
     disabled = false,
+    labels: userLabels = {},
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   let shouldAnimate = $derived(animateFocus && !disabled);
 
   let inputRef: HTMLInputElement;
@@ -131,9 +144,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'see console for details.')
+          (error.message || labels.seeConsoleForDetails)
       );
     }
   };
@@ -156,9 +169,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'error fetching place details')
+          (error.message || labels.errorFetchingPlaceDetails)
       );
     }
 
@@ -175,9 +188,9 @@
     } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
       onError(
-        (error.name || 'An error occurred') +
+        (error.name || labels.anErrorOccurred) +
           ' - ' +
-          (error.message || 'error fetch token')
+          (error.message || labels.errorFetchToken)
       );
       return req;
     }
@@ -236,7 +249,7 @@
     // Initialize Google Maps API
     const initGoogleMaps = async () => {
       if (!PUBLIC_GOOGLE_MAPS_API_KEY) {
-        onError('Google Maps API key is required');
+        onError(labels.googleMapsApiKeyRequired);
         return;
       }
 
@@ -255,9 +268,9 @@
       } catch (e: unknown) {
       const error = e as { name?: string; message?: string };
         onError(
-          (error.name || 'An error occurred') +
+          (error.name || labels.anErrorOccurred) +
             ' - ' +
-            (error.message || 'Error loading Google Maps API')
+            (error.message || labels.errorLoadingGoogleMapsApi)
         );
       }
     };

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts

@@ -1,28 +1,33 @@
-/** Google Places API address component */ interface AddressComponent {
-    longText: string;
-    shortText: string;
-    types: string[];
-}
-/** Google Places API response data */ interface PlaceData {
-    formattedAddress?: string;
-    addressComponents?: AddressComponent[];
-    text?: string;
-    [key: string]: unknown;
-}
-interface Props {
+declare const PlaceAutocomplete: import("svelte").Component<{
     fetchFields?: string[];
     placeholder?: string;
     language?: string;
     region?: string;
     autocomplete?: string;
     initialValue?: string;
-    onResponse?: (data: PlaceData) => void;
+    onResponse?: (data: {
+        [key: string]: unknown;
+        formattedAddress?: string;
+        addressComponents?: {
+            longText: string;
+            shortText: string;
+            types: string[];
+        }[];
+        text?: string;
+    }) => void;
     onError?: (error: string) => void;
-    mode?: 'full' | 'cityState';
+    mode?: "full" | "cityState";
     animateFocus?: boolean;
     disabled?: boolean;
-}
-declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "placeholder">;
+    labels?: Partial<{
+        anErrorOccurred: string;
+        seeConsoleForDetails: string;
+        errorFetchingPlaceDetails: string;
+        errorFetchToken: string;
+        errorLoadingGoogleMapsApi: string;
+        googleMapsApiKeyRequired: string;
+    }>;
+}, {}, "placeholder">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;
 //# sourceMappingURL=PlaceAutocomplete.svelte.d.ts.map

package/dist/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AASA,0CAA0C,CAAE,UAAU,gBAAgB;IAAM,QAAQ,EAAE,MAAM,CAAC;IAAI,SAAS,EAAE,MAAM,CAAC;IAAI,KAAK,EAAE,MAAM,EAAE,CAAC;CAAG;AACzI,sCAAsC,CAAE,UAAU,SAAS;IAAM,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAI,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAAI,IAAI,CAAC,EAAE,MAAM,CAAC;IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CAAG;AAMrL,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8SH,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PlaceAutocomplete.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/inputs/PlaceAutocomplete/PlaceAutocomplete.svelte.ts"],"names":[],"mappings":"AA8UA,QAAA,MAAM,iBAAiB;kBAnTL,MAAM,EAAE;kBACR,MAAM;eACT,MAAM;aACR,MAAM;mBACA,MAAM;mBACN,MAAM;iBACR,CAAC,IAAI;;2BATkM,MAAM;4BAAyB;sBAArK,MAAM;uBAAgB,MAAM;mBAAY,MAAM,EAAE;WAAuI;eAAY,MAAM;KAS1P,KAAK,IAAI;cAC5B,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,MAAM,GAAG,WAAW;mBACZ,OAAO;eACX,OAAO;aACT,OAAO;;;;;;;MAAsB;qBAwSqB,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/recipes/inputs/Search.svelte

@@ -3,6 +3,10 @@
   import { SearchOutline } from "../../primitives/Icons";
   import { typography } from '../../tokens/typography';
 
+  const defaultLabels = {
+    placeholder: 'Search',
+  };
+
   interface Props {
     value?: unknown;
     placeholder?: string;
@@ -18,13 +22,14 @@
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
     [key: string]: unknown;
   }
 
   // API compatible with flowbite-svelte Search
   let {
     value = $bindable(""),
-    placeholder = "Search",
+    placeholder = undefined,
     size = "lg",
     disabled = false,
     id = "",
@@ -37,9 +42,12 @@
     onfocus,
     onblur,
     children,
+    labels: userLabels = {},
     ...restProps
   }: Props = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   const sizes = {
     sm: { icon: "w-3.5 h-3.5", input: `h-8 ${typography.xs} pl-8`, wrapper: "h-8" },
     md: { icon: "w-4 h-4", input: `h-10 ${typography.sm} pl-9`, wrapper: "h-10" },
@@ -82,7 +90,7 @@
     type="search"
     {id}
     {name}
-    {placeholder}
+    placeholder={placeholder ?? labels.placeholder}
     {disabled}
     class="w-full pr-3 bg-gray-50 dark:bg-gray-700 font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     bind:value

package/dist/recipes/inputs/Search.svelte.d.ts

@@ -1,8 +1,9 @@
 import type { Snippet } from 'svelte';
-interface Props {
+declare const Search: import("svelte").Component<{
+    [key: string]: unknown;
     value?: unknown;
     placeholder?: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     disabled?: boolean;
     id?: string;
     name?: string;
@@ -14,9 +15,10 @@ interface Props {
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const Search: import("svelte").Component<Props, {}, "value">;
+    labels?: Partial<{
+        placeholder: string;
+    }>;
+}, {}, "value">;
 type Search = ReturnType<typeof Search>;
 export default Search;
 //# sourceMappingURL=Search.svelte.d.ts.map

package/dist/recipes/inputs/Search.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA0EH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/Search.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsGtC,QAAA,MAAM,MAAM;;YAxFA,OAAO;kBACD,MAAM;WACb,IAAI,GAAG,IAAI,GAAG,IAAI;eACd,OAAO;SACb,MAAM;WACJ,MAAM;YACL,MAAM;cACJ,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;eACrB,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;gBACrB,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAChC,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI;cAC9B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;aAC5B,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;eACzB,OAAO;aACT,OAAO;;MAAsB;eA0EU,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/recipes/inputs/index.d.ts

@@ -3,5 +3,6 @@ export { default as OTPInput } from "./OTPInput.svelte";
 export { default as PasswordInput } from "./PasswordInput.svelte";
 export { default as PasswordStrengthIndicator } from "./PasswordStrengthIndicator/PasswordStrengthIndicator.svelte";
 export { default as PlaceAutocomplete } from "./PlaceAutocomplete/PlaceAutocomplete.svelte";
+export { default as PhoneInput } from "./PhoneInput.svelte";
 export { default as Search } from "./Search.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/recipes/inputs/index.js

@@ -4,4 +4,5 @@ export { default as OTPInput } from './OTPInput.svelte';
 export { default as PasswordInput } from './PasswordInput.svelte';
 export { default as PasswordStrengthIndicator } from './PasswordStrengthIndicator/PasswordStrengthIndicator.svelte';
 export { default as PlaceAutocomplete } from './PlaceAutocomplete/PlaceAutocomplete.svelte';
+export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as Search } from './Search.svelte';