@chekinapp/ui 0.0.126 → 0.0.127

package/dist/index.js

@@ -12122,7 +12122,7 @@ function Fieldset({
       {
         "aria-hidden": "true",
         className: cn(
-          "pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] transition-colors duration-75",
+          "pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] text-left transition-colors duration-75",
           "border-[var(--chekin-color-gray-3)]",
           isActivated && "border-[var(--chekin-color-gray-2)]",
           isFocused && "border-[var(--chekin-color-brand-blue)]",
@@ -12426,10 +12426,6 @@ Input.displayName = "Input";
 import * as React50 from "react";
 import { useTranslation as useTranslation34 } from "react-i18next";
 
-// src/dashboard/select/Select.tsx
-import * as React49 from "react";
-import { useTranslation as useTranslation33 } from "react-i18next";
-
 // src/dashboard/_select-internals/SelectFieldShell.tsx
 import { useTranslation as useTranslation27 } from "react-i18next";
 import { jsx as jsx144, jsxs as jsxs91 } from "react/jsx-runtime";
@@ -12557,6 +12553,46 @@ function isOptionSelected(option, selectedValue, selectedValues) {
 function defaultIsOptionSelected(option, selectValue) {
   return selectValue.some((item) => item.value === option.value);
 }
+var COUNTRY_ALIASES = [["T\xFCrkiye", ["Turkey", "Turkiye"]]];
+function normalizeSearchText(value) {
+  return value.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+var ALIAS_LOOKUP = COUNTRY_ALIASES.reduce(
+  (acc, [officialName, aliases]) => {
+    const officialLower = normalizeSearchText(officialName);
+    aliases.forEach((alias) => {
+      acc[normalizeSearchText(alias)] = officialLower;
+    });
+    return acc;
+  },
+  {}
+);
+function getOptionSearchText(option) {
+  if (typeof option.label === "string" || typeof option.label === "number") {
+    return String(option.label);
+  }
+  return String(option.value);
+}
+function countriesFilter(option, inputValue) {
+  const input = normalizeSearchText(inputValue.trim());
+  if (!input) {
+    return true;
+  }
+  const label = normalizeSearchText(getOptionSearchText(option));
+  if (label.includes(input)) {
+    return true;
+  }
+  const officialName = ALIAS_LOOKUP[input];
+  if (officialName && label.includes(officialName)) {
+    return true;
+  }
+  for (const [alias, official] of Object.entries(ALIAS_LOOKUP)) {
+    if (alias.includes(input) && label.includes(official)) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/dashboard/_select-internals/slots/DefaultOption.tsx
 import { Check as Check6 } from "lucide-react";
@@ -12906,15 +12942,19 @@ function SelectTrigger({
   labelId,
   valueId,
   describedErrorId,
+  accessibleLabel,
   hasValue,
   isOpen,
   isBlocked,
   disabled,
+  readOnly,
   loading,
   invalid,
   placeholder,
+  showPlaceholderWhenIdle,
   valueLabel,
   leftIcon,
+  hideIndicator,
   onClick,
   onKeyDown,
   onBlur
@@ -12929,7 +12969,8 @@ function SelectTrigger({
       "aria-haspopup": "listbox",
       "aria-expanded": isOpen,
       "aria-controls": listboxId,
-      "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+      "aria-label": accessibleLabel,
+      "aria-labelledby": accessibleLabel ? void 0 : hasValue && valueId ? `${labelId} ${valueId}` : labelId,
       "aria-describedby": describedErrorId,
       "aria-invalid": invalid,
       "aria-busy": loading,
@@ -12941,18 +12982,19 @@ function SelectTrigger({
         "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
         leftIcon ? "pl-10" : "pl-4",
         isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
+        readOnly && !disabled && !loading && "cursor-default",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "!cursor-progress"
       ),
       children: [
         leftIcon && /* @__PURE__ */ jsx149("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-        /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ jsx149("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149(
+        /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: hasValue ? valueLabel : showPlaceholderWhenIdle || isOpen ? placeholder : null }),
+        /* @__PURE__ */ jsx149("span", { className: "flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: !hideIndicator && /* @__PURE__ */ jsx149(
           ChevronDown2,
           {
             size: 16,
             className: cn(
-              "transition-transform duration-200",
+              "pointer-events-none transition-transform duration-200",
               isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
             )
           }
@@ -12972,6 +13014,7 @@ function ComboboxTrigger({
   labelId,
   valueId,
   describedErrorId,
+  accessibleLabel,
   isOpen,
   isFocused,
   isBlocked,
@@ -12985,6 +13028,7 @@ function ComboboxTrigger({
   inputRef,
   inputValue,
   placeholder,
+  showPlaceholderWhenIdle,
   highlightedIndex,
   getOptionId: getOptionId2,
   onInputChange,
@@ -12999,7 +13043,8 @@ function ComboboxTrigger({
   containerClassName,
   inputClassName,
   hideIndicator,
-  autoFocus
+  autoFocus,
+  searchable = true
 }) {
   const { t } = useTranslation30();
   const resolvedPlaceholder = placeholder ?? t("type_to_search");
@@ -13011,7 +13056,8 @@ function ComboboxTrigger({
       "aria-haspopup": "listbox",
       "aria-expanded": isOpen,
       "aria-controls": listboxId,
-      "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+      "aria-label": accessibleLabel,
+      "aria-labelledby": accessibleLabel ? void 0 : hasValue && valueId ? `${labelId} ${valueId}` : labelId,
       "aria-describedby": describedErrorId,
       "aria-invalid": invalid,
       "aria-busy": loading,
@@ -13021,6 +13067,7 @@ function ComboboxTrigger({
         "relative box-border flex w-full cursor-text rounded-[6px] border-0 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
         "min-h-12",
         isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
+        readOnly && !disabled && !loading && "cursor-default",
         disabled && !loading && "cursor-not-allowed",
         loading && "!cursor-progress",
         containerClassName
@@ -13048,8 +13095,8 @@ function ComboboxTrigger({
                   onFocus: onInputFocus,
                   onKeyDown: onInputKeyDown,
                   disabled: isBlocked,
-                  readOnly,
-                  placeholder: isFocused || isOpen ? resolvedPlaceholder : "",
+                  readOnly: readOnly || !searchable,
+                  placeholder: searchable && (showPlaceholderWhenIdle || isFocused || isOpen) ? resolvedPlaceholder : "",
                   autoComplete: "off",
                   autoFocus,
                   "aria-autocomplete": "list",
@@ -13058,7 +13105,9 @@ function ComboboxTrigger({
                   className: cn(
                     "m-0 box-border min-w-0 flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
                     isMulti && "min-w-[40px]",
-                    isBlocked && !loading && "cursor-not-allowed",
+                    !searchable && "sr-only",
+                    readOnly && !disabled && !loading && "cursor-default",
+                    disabled && !loading && "cursor-not-allowed",
                     loading && "!cursor-progress",
                     inputClassName
                   )
@@ -13205,7 +13254,9 @@ function useSelectState(params) {
     onKeyDown,
     onFocus,
     onBlur,
-    isSearchInDropdown
+    onInputChange,
+    isSearchInDropdown,
+    searchable = true
   } = params;
   const inputRef = React48.useRef(null);
   const mobileSearchInputRef = React48.useRef(null);
@@ -13219,8 +13270,10 @@ function useSelectState(params) {
     () => resolveValueLabel(singleSelected, getValueLabel),
     [singleSelected, getValueLabel]
   );
-  const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
-  const [inputValue, setInputValue] = React48.useState(isSearchOnlyInput ? "" : valueLabel);
+  const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
+  const [inputValue, setInputValue] = React48.useState(
+    searchable && !isSearchOnlyInput ? valueLabel : ""
+  );
   const hasValue = selectedOptions.length > 0;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
@@ -13235,9 +13288,10 @@ function useSelectState(params) {
   const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
   const { listboxId, getOptionId: getOptionId2 } = ids;
   React48.useEffect(() => {
+    if (!searchable) return;
     if (isSearchOnlyInput) return;
     if (!isFocused) setInputValue(valueLabel);
-  }, [valueLabel, isFocused, isSearchOnlyInput]);
+  }, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
   React48.useEffect(() => {
     if (!isSearchOnlyInput) return;
     if (!isOpen) {
@@ -13246,7 +13300,7 @@ function useSelectState(params) {
     }
   }, [isOpen, isSearchOnlyInput]);
   const trimmedInput = inputValue.trim();
-  const isFiltering = isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
+  const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
   const filteredOptions = React48.useMemo(() => {
     if (!isFiltering) return options;
     return options.filter((option) => filterOption(option, trimmedInput));
@@ -13277,9 +13331,9 @@ function useSelectState(params) {
   }, [isOpen, filteredOptions, isOptionDisabled]);
   React48.useEffect(() => {
     if (!isOpen || highlightedIndex < 0) return;
-    optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+    optionRefs.current[highlightedIndex]?.scrollIntoView?.({ block: "nearest" });
   }, [highlightedIndex, isOpen]);
-  const inMenuSearchVisible = isMobile3 || Boolean(isSearchInDropdown);
+  const inMenuSearchVisible = searchable && (isMobile3 || Boolean(isSearchInDropdown));
   React48.useEffect(() => {
     if (!isOpen || !inMenuSearchVisible) return;
     const frame = window.requestAnimationFrame(
@@ -13307,7 +13361,9 @@ function useSelectState(params) {
         return;
       }
       onSelectionChange([option], { action: "select" });
-      setInputValue(isSearchInDropdown ? "" : resolveValueLabel(option, getValueLabel));
+      setInputValue(
+        searchable && !isSearchInDropdown ? resolveValueLabel(option, getValueLabel) : ""
+      );
       setIsOpen(false);
       setIsFocused(false);
       inputRef.current?.blur();
@@ -13321,7 +13377,8 @@ function useSelectState(params) {
       closeMenuOnSelect,
       setIsOpen,
       getValueLabel,
-      isSearchInDropdown
+      isSearchInDropdown,
+      searchable
     ]
   );
   const removeOption = React48.useCallback(
@@ -13356,7 +13413,9 @@ function useSelectState(params) {
       return;
     }
     onSelectionChange([newOption], { action: "create" });
-    setInputValue(isSearchInDropdown ? "" : resolveValueLabel(newOption, getValueLabel));
+    setInputValue(
+      searchable && !isSearchInDropdown ? resolveValueLabel(newOption, getValueLabel) : ""
+    );
     setIsOpen(false);
     setIsFocused(false);
     inputRef.current?.blur();
@@ -13370,14 +13429,18 @@ function useSelectState(params) {
     closeMenuOnSelect,
     setIsOpen,
     getValueLabel,
-    isSearchInDropdown
+    isSearchInDropdown,
+    searchable
   ]);
   const handleInputChange = React48.useCallback(
     (event) => {
-      setInputValue(event.target.value);
+      if (!searchable) return;
+      const nextValue = event.target.value;
+      setInputValue(nextValue);
+      onInputChange?.(nextValue);
       if (!isOpen) setIsOpen(true);
     },
-    [isOpen, setIsOpen]
+    [isOpen, onInputChange, searchable, setIsOpen]
   );
   const handleInputFocus = React48.useCallback(
     (event) => {
@@ -13385,11 +13448,11 @@ function useSelectState(params) {
       onFocus?.(event);
       setIsFocused(true);
       if (openMenuOnFocus) setIsOpen(true);
-      if (!isMulti) {
+      if (searchable && !isMulti) {
         requestAnimationFrame(() => inputRef.current?.select());
       }
     },
-    [isBlocked, onFocus, openMenuOnFocus, setIsOpen, isMulti]
+    [isBlocked, onFocus, openMenuOnFocus, setIsOpen, searchable, isMulti]
   );
   const handleContainerClick = React48.useCallback(() => {
     if (isBlocked) return;
@@ -13400,10 +13463,10 @@ function useSelectState(params) {
     (event) => {
       if (containerRef.current?.contains(event.relatedTarget)) return;
       setIsFocused(false);
-      if (!isSearchOnlyInput) setInputValue(valueLabel);
+      if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
       onBlur?.(event);
     },
-    [containerRef, isSearchOnlyInput, valueLabel, onBlur]
+    [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
   );
   const handleInputKeyDown = React48.useCallback(
     (event) => {
@@ -13457,7 +13520,7 @@ function useSelectState(params) {
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        if (!isSearchOnlyInput) setInputValue(valueLabel);
+        if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
         setIsOpen(false);
         inputRef.current?.blur();
       }
@@ -13477,7 +13540,8 @@ function useSelectState(params) {
       selectOption,
       canCreateNewOption,
       createOption,
-      valueLabel
+      valueLabel,
+      searchable
     ]
   );
   const isEmpty = !hasValue && !inputValue;
@@ -13577,10 +13641,12 @@ function DefaultControl(props) {
     labelId,
     valueId,
     describedErrorId,
+    accessibleLabel,
     getOptionId: getOptionId2,
     inputRef,
     inputValue,
     placeholder,
+    showPlaceholderWhenIdle,
     isMulti,
     isOpen,
     isFocused,
@@ -13604,6 +13670,7 @@ function DefaultControl(props) {
     hideIndicator,
     autoFocus,
     leftIcon,
+    searchable,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13617,6 +13684,7 @@ function DefaultControl(props) {
       labelId,
       valueId,
       describedErrorId,
+      accessibleLabel,
       isOpen,
       isFocused,
       isBlocked,
@@ -13630,6 +13698,7 @@ function DefaultControl(props) {
       inputRef,
       inputValue,
       placeholder: placeholderText,
+      showPlaceholderWhenIdle,
       highlightedIndex,
       getOptionId: getOptionId2,
       onInputChange,
@@ -13642,6 +13711,7 @@ function DefaultControl(props) {
       hideIndicator,
       autoFocus,
       leftIcon,
+      searchable,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ jsx152(
         Chip,
         {
@@ -13656,7 +13726,8 @@ function DefaultControl(props) {
 }
 
 // src/dashboard/_select-internals/slots/StaticControl.tsx
-import { jsx as jsx153 } from "react/jsx-runtime";
+import { SquareX as SquareX3 } from "lucide-react";
+import { jsx as jsx153, jsxs as jsxs99 } from "react/jsx-runtime";
 function StaticControl(props) {
   const {
     triggerId,
@@ -13664,6 +13735,7 @@ function StaticControl(props) {
     labelId,
     valueId,
     describedErrorId,
+    accessibleLabel,
     isOpen,
     isBlocked,
     hasValue,
@@ -13672,30 +13744,53 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
+    showPlaceholderWhenIdle,
     onContainerClick,
+    onClear,
+    clearable,
+    clearLabel,
+    hideIndicator,
+    readOnly,
     leftIcon
   } = props;
-  return /* @__PURE__ */ jsx153(
-    SelectTrigger,
-    {
-      triggerId,
-      listboxId,
-      labelId,
-      valueId,
-      describedErrorId,
-      hasValue,
-      isOpen,
-      isBlocked,
-      disabled,
-      loading,
-      invalid,
-      placeholder,
-      valueLabel,
-      leftIcon,
-      onClick: onContainerClick,
-      onKeyDown: () => void 0
-    }
-  );
+  const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
+  return /* @__PURE__ */ jsxs99("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx153(
+      SelectTrigger,
+      {
+        triggerId,
+        listboxId,
+        labelId,
+        valueId,
+        describedErrorId,
+        accessibleLabel,
+        hasValue,
+        isOpen,
+        isBlocked,
+        disabled,
+        readOnly,
+        loading,
+        invalid,
+        placeholder,
+        showPlaceholderWhenIdle,
+        valueLabel,
+        leftIcon,
+        hideIndicator,
+        onClick: onContainerClick,
+        onKeyDown: () => void 0
+      }
+    ),
+    showClear && /* @__PURE__ */ jsx153(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: "absolute right-9 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
+        "aria-label": clearLabel,
+        children: /* @__PURE__ */ jsx153(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+      }
+    )
+  ] });
 }
 
 // src/dashboard/_select-internals/slots/DefaultMenuList.tsx
@@ -13803,6 +13898,10 @@ function mergeComponents(overrides) {
   };
 }
 
+// src/dashboard/select/Select.tsx
+import * as React49 from "react";
+import { useTranslation as useTranslation33 } from "react-i18next";
+
 // src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
 import { useEffect as useEffect39 } from "react";
 function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
@@ -13819,7 +13918,7 @@ function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabl
 }
 
 // src/dashboard/select/Select.tsx
-import { jsx as jsx156, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs100 } from "react/jsx-runtime";
 function SelectInternal(props, ref) {
   const {
     options = [],
@@ -13862,6 +13961,7 @@ function SelectInternal(props, ref) {
     openMenuOnFocus,
     components: userComponents,
     onInputChange,
+    searchable = true,
     searchPosition = "trigger",
     menuHeader,
     onMenuScrollToBottom,
@@ -13869,8 +13969,8 @@ function SelectInternal(props, ref) {
     formatGroupLabel,
     onReset
   } = props;
-  const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
+  const isSearchInDropdown = searchable && searchPosition === "dropdown";
   const clearable = !isMulti ? props.clearable ?? true : true;
   const closeMenuOnSelect = isMulti ? props.closeMenuOnSelect ?? false : void 0;
   const { t } = useTranslation33();
@@ -13929,25 +14029,24 @@ function SelectInternal(props, ref) {
     onKeyDown,
     onFocus,
     onBlur,
-    isSearchInDropdown
+    onInputChange,
+    isSearchInDropdown,
+    searchable
   });
   const components = React49.useMemo(() => {
     const merged = mergeComponents(userComponents);
-    if (isSearchInDropdown && !userComponents?.Control) {
+    if ((isSearchInDropdown || !searchable && !isMulti) && !userComponents?.Control) {
       return { ...merged, Control: StaticControl };
     }
     return merged;
-  }, [userComponents, isSearchInDropdown]);
+  }, [userComponents, isSearchInDropdown, searchable, isMulti]);
   React49.useImperativeHandle(
     ref,
     () => state.containerRef.current
   );
-  const onInputChangeRef = React49.useRef(onInputChange);
-  onInputChangeRef.current = onInputChange;
-  React49.useEffect(() => {
-    onInputChangeRef.current?.(state.inputValue);
-  }, [state.inputValue]);
-  const resolvedLabel = label ?? placeholder;
+  const hasLabel = Boolean(label);
+  const resolvedTitle = label ?? placeholder;
+  const accessibleLabel = !hasLabel && typeof placeholder === "string" ? placeholder : void 0;
   const hasInvalidState = state.hasInvalidState || Boolean(invalid);
   const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
   const handleClear = (event) => {
@@ -13955,7 +14054,7 @@ function SelectInternal(props, ref) {
     onReset?.();
   };
   const { Control, MenuList, CreateOption } = components;
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs100(
     SelectFieldShell,
     {
       containerRef: state.containerRef,
@@ -13982,10 +14081,12 @@ function SelectInternal(props, ref) {
             labelId: state.ids.labelId,
             valueId: state.ids.valueId,
             describedErrorId: state.ids.describedErrorId,
+            accessibleLabel,
             getOptionId: state.ids.getOptionId,
             inputRef: state.inputRef,
             inputValue: state.inputValue,
             placeholder,
+            showPlaceholderWhenIdle: !hasLabel,
             isMulti,
             isOpen: state.isOpen,
             isFocused: state.isFocused,
@@ -14010,6 +14111,7 @@ function SelectInternal(props, ref) {
             hideIndicator,
             autoFocus,
             leftIcon,
+            searchable,
             components
           }
         ),
@@ -14025,15 +14127,15 @@ function SelectInternal(props, ref) {
             readOnly,
             htmlFor: state.ids.triggerId,
             labelId: state.ids.labelId,
-            legend: resolvedLabel,
-            label: resolvedLabel,
+            legend: label,
+            label,
             tooltip,
             onClick: state.handleContainerClick,
             labelClassName: leftIcon ? "pl-[28px]" : void 0,
             className: fieldsetClassName
           }
         ),
-        /* @__PURE__ */ jsxs99(
+        /* @__PURE__ */ jsxs100(
           SelectMenuPanel,
           {
             isOpen: state.isOpen,
@@ -14042,7 +14144,7 @@ function SelectInternal(props, ref) {
               state.closeMenu();
               state.setIsFocused(false);
             },
-            title: resolvedLabel,
+            title: resolvedTitle,
             className: dropdownClassName,
             drawerClassName,
             children: [
@@ -14148,7 +14250,7 @@ function formatPhoneCodeOptionLabel(option) {
 }
 
 // src/dashboard/phone-input/PhoneInput.tsx
-import { jsx as jsx157, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs101 } from "react/jsx-runtime";
 var EMPTY_VALUE = { code: "", number: "" };
 var PhoneInput = React50.forwardRef(
   function PhoneInput2({
@@ -14182,9 +14284,6 @@ var PhoneInput = React50.forwardRef(
     const safeValue = value ?? EMPTY_VALUE;
     const effectiveCode = safeValue.code || defaultCode || "";
     const resolvedLabel = label ?? "";
-    const resolvedPrefixLabel = prefixLabel ?? t("prefix");
-    const isBlocked = Boolean(disabled) || Boolean(loading);
-    const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
     const hasExternalError = Boolean(error);
     const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
     const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
@@ -14229,7 +14328,7 @@ var PhoneInput = React50.forwardRef(
       }
       emitChange({ code: effectiveCode, number: cleanedNumber });
     };
-    return /* @__PURE__ */ jsxs100(
+    return /* @__PURE__ */ jsxs101(
       "div",
       {
         className: cn(
@@ -14259,20 +14358,24 @@ var PhoneInput = React50.forwardRef(
             }
           ),
           topLabel && /* @__PURE__ */ jsx157("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
-          /* @__PURE__ */ jsxs100("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
+          /* @__PURE__ */ jsxs101("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
             /* @__PURE__ */ jsx157(
               Select,
               {
                 options: codeOptions,
                 value: selectedCodeOption,
                 onChange: handleCodeChange,
-                label: resolvedPrefixLabel,
+                label: prefixLabel,
                 placeholder: codePlaceholder,
-                disabled: isCodeBlocked,
+                disabled,
+                readOnly: Boolean(readOnly) || Boolean(codeReadOnly),
                 loading,
                 invalid: hasInvalidState,
                 hideErrorMessage: true,
                 searchPosition: searchable ? "dropdown" : "trigger",
+                searchable,
+                filterOption: countriesFilter,
+                clearable: false,
                 getValueLabel: (option) => option.value,
                 className: "!max-w-none",
                 dropdownClassName: "right-auto w-[280px]"
@@ -14298,7 +14401,9 @@ var PhoneInput = React50.forwardRef(
                 onFocus,
                 onBlur,
                 renderErrorMessage: false,
-                wrapperClassName: "!max-w-none"
+                wrapperClassName: "!max-w-none",
+                contentClassName: readOnly ? "!cursor-default" : void 0,
+                inputClassName: readOnly ? "!cursor-default" : void 0
               }
             )
           ] }),
@@ -14363,7 +14468,7 @@ function useInfiniteScrollContext() {
 }
 
 // src/dashboard/infinite-scroll-select/VirtualMenuList.tsx
-import { jsx as jsx161, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs102 } from "react/jsx-runtime";
 function VirtualMenuList(props) {
   const {
     id,
@@ -14453,7 +14558,7 @@ function VirtualMenuList(props) {
     [onMenuScrollToBottom]
   );
   if (options.length === 0) {
-    return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs101(
+    return /* @__PURE__ */ jsx161("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs102(
       "div",
       {
         role: "status",
@@ -14510,7 +14615,7 @@ function VirtualMenuList(props) {
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ jsxs101(
+                children: isLoaderRow ? /* @__PURE__ */ jsxs102(
                   "div",
                   {
                     role: "status",
@@ -14577,13 +14682,14 @@ function InfiniteScrollSelectInternal(props, ref) {
     listHeight = DEFAULT_LIST_HEIGHT,
     overscan = DEFAULT_OVERSCAN,
     loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
-    getFullSearchOption,
+    getFullSearchOption: getFullSearchOptionProp,
     filterOption: userFilterOption,
     components: userComponents,
     onInputChange: userOnInputChange,
     isMulti = false,
     ...rest
   } = props;
+  const getFullSearchOption = isMulti ? void 0 : getFullSearchOptionProp;
   const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
   const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
   const [inputValue, setInputValue] = React56.useState("");
@@ -14681,7 +14787,7 @@ import * as React58 from "react";
 import { useTranslation as useTranslation37 } from "react-i18next";
 
 // src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
-import { jsx as jsx164, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
 function SelectCheckboxOption(props) {
   const {
     option,
@@ -14694,7 +14800,7 @@ function SelectCheckboxOption(props) {
     onHover,
     innerRef
   } = props;
-  return /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsxs103(
     "button",
     {
       id,
@@ -14725,7 +14831,7 @@ function SelectCheckboxOption(props) {
             className: "pointer-events-none shrink-0"
           }
         ),
-        /* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs103("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsx164("span", { className: "block break-words", children: option.label }),
           option.description && /* @__PURE__ */ jsx164("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
         ] })
@@ -14737,7 +14843,7 @@ function SelectCheckboxOption(props) {
 // src/dashboard/select-checkboxes/CountTrigger.tsx
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { useTranslation as useTranslation36 } from "react-i18next";
-import { jsx as jsx165, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs104 } from "react/jsx-runtime";
 function createCountTrigger(opts) {
   const { valueText, totalCount } = opts;
   function CountTrigger(props) {
@@ -14764,7 +14870,7 @@ function createCountTrigger(opts) {
     const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
     const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
     const isEmpty = !hasValue;
-    return /* @__PURE__ */ jsxs103(
+    return /* @__PURE__ */ jsxs104(
       "button",
       {
         id: triggerId,
@@ -14806,9 +14912,9 @@ function createCountTrigger(opts) {
 }
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
-import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs105 } from "react/jsx-runtime";
 function SelectAllRow({ label, checked, disabled, onToggle }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     "button",
     {
       type: "button",
@@ -14838,7 +14944,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
 // src/dashboard/select-checkboxes/SelectCheckboxes.tsx
 import { Fragment as Fragment16, jsx as jsx167 } from "react/jsx-runtime";
 function hasPaginationProps(props) {
-  return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
+  return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
 }
 function makeTriggerSlot(render) {
   function CustomTrigger(props) {
@@ -14958,6 +15064,7 @@ function SelectCheckboxesInternal(props, ref) {
     components,
     closeMenuOnSelect,
     searchPosition: searchable ? "dropdown" : "trigger",
+    searchable,
     menuHeader,
     onInputChange: handleInputChange,
     isMulti: true
@@ -15059,7 +15166,7 @@ function useTextareaValueState({
 }
 
 // src/dashboard/textarea/Textarea.tsx
-import { jsx as jsx168, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx168, jsxs as jsxs106 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 var Textarea = React60.forwardRef(function Textarea2({
@@ -15128,7 +15235,7 @@ var Textarea = React60.forwardRef(function Textarea2({
     onBlur?.(event);
     syncValueState();
   };
-  return /* @__PURE__ */ jsxs105(
+  return /* @__PURE__ */ jsxs106(
     "div",
     {
       className: cn(
@@ -15138,7 +15245,7 @@ var Textarea = React60.forwardRef(function Textarea2({
         className
       ),
       children: [
-        label && /* @__PURE__ */ jsxs105(
+        label && /* @__PURE__ */ jsxs106(
           "label",
           {
             htmlFor: textareaId,
@@ -15623,7 +15730,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-import { jsx as jsx169, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs107 } from "react/jsx-runtime";
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -15637,7 +15744,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs106(
+  return /* @__PURE__ */ jsx169("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs107(
     "div",
     {
       id,
@@ -15684,7 +15791,7 @@ function AirbnbDatePickerWheelColumn({
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-import { jsx as jsx170, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx170, jsxs as jsxs108 } from "react/jsx-runtime";
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -15706,8 +15813,8 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ jsxs107("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ jsxs107("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+  return /* @__PURE__ */ jsxs108("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ jsxs108("div", { className: "relative overflow-hidden rounded-[24px]", children: [
       /* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
       /* @__PURE__ */ jsx170("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
       /* @__PURE__ */ jsx170(
@@ -15717,7 +15824,7 @@ function AirbnbDatePickerBody({
           className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
         }
       ),
-      /* @__PURE__ */ jsxs107("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+      /* @__PURE__ */ jsxs108("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
         /* @__PURE__ */ jsx170(
           AirbnbDatePickerWheelColumn,
           {
@@ -15818,7 +15925,7 @@ function AirbnbDatePickerContent({
     }
   );
   if (isMobile3) {
-    return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
+    return /* @__PURE__ */ jsx170(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs108(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
@@ -15831,7 +15938,7 @@ function AirbnbDatePickerContent({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs107(
+  return /* @__PURE__ */ jsx170(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs108(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
@@ -15846,7 +15953,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-import { jsx as jsx171, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx171, jsxs as jsxs109 } from "react/jsx-runtime";
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -16208,9 +16315,9 @@ var Datepicker = React62.forwardRef(
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
-          /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
-            isMobile3 ? /* @__PURE__ */ jsxs108(
+        children: /* @__PURE__ */ jsxs109("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
+          /* @__PURE__ */ jsxs109("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ jsxs109(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -16243,7 +16350,7 @@ var Datepicker = React62.forwardRef(
                   ) })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs108(
+            ) : /* @__PURE__ */ jsxs109(
               "div",
               {
                 className: cn(
@@ -16279,7 +16386,7 @@ var Datepicker = React62.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs108("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
+                  /* @__PURE__ */ jsxs109("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
                     /* @__PURE__ */ jsx171(
                       "input",
                       {
@@ -16659,8 +16766,8 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
-import { jsx as jsx172, jsxs as jsxs109 } from "react/jsx-runtime";
+import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
+import { jsx as jsx172, jsxs as jsxs110 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER = "00-00-0000";
 var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
 var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
@@ -16702,7 +16809,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ jsxs109(
+  return /* @__PURE__ */ jsxs110(
     "div",
     {
       className: cn(
@@ -16770,7 +16877,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsxs109("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+        /* @__PURE__ */ jsxs110("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
           !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx172(
             "button",
             {
@@ -16779,7 +16886,7 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ jsx172(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ jsx172(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx172(
@@ -16843,7 +16950,7 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-import { jsx as jsx174, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs111 } from "react/jsx-runtime";
 function DateRangePopover({
   isOpen,
   isMobile: isMobile3,
@@ -16862,7 +16969,7 @@ function DateRangePopover({
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs110(
+        children: /* @__PURE__ */ jsxs111(
           DrawerContent,
           {
             onClose,
@@ -16891,7 +16998,7 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx175, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs112 } from "react/jsx-runtime";
 var DateRangePicker = React66.forwardRef(function DateRangePicker2({
   label,
   value: externalValue,
@@ -17064,8 +17171,8 @@ var DateRangePicker = React66.forwardRef(function DateRangePicker2({
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
-        /* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
+      children: /* @__PURE__ */ jsxs112("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
+        /* @__PURE__ */ jsxs112("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx175(
             DateRangeInputs,
             {
@@ -17346,9 +17453,9 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
 
 // src/dashboard/file-input/FileInput.tsx
 import * as React69 from "react";
-import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
+import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
 import { useTranslation as useTranslation42 } from "react-i18next";
-import { jsx as jsx177, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs113 } from "react/jsx-runtime";
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -17406,7 +17513,7 @@ var FileInput = React69.forwardRef(function FileInput2({
     event.stopPropagation();
     if (isUrl) onDownload(value);
   };
-  return /* @__PURE__ */ jsxs112(
+  return /* @__PURE__ */ jsxs113(
     "label",
     {
       htmlFor: inputId,
@@ -17436,9 +17543,9 @@ var FileInput = React69.forwardRef(function FileInput2({
             "aria-invalid": isInvalid
           }
         ),
-        /* @__PURE__ */ jsxs112("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsxs112("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ jsxs112(
+        /* @__PURE__ */ jsxs113("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsxs113("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ jsxs113(
               "div",
               {
                 className: cn(
@@ -17446,13 +17553,13 @@ var FileInput = React69.forwardRef(function FileInput2({
                   isEmpty && "bg-[var(--empty-field-background)]"
                 ),
                 children: [
-                  hasFileChip ? /* @__PURE__ */ jsxs112(
+                  hasFileChip ? /* @__PURE__ */ jsxs113(
                     "div",
                     {
                       className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
                       onClick: (event) => event.preventDefault(),
                       children: [
-                        isUrl ? /* @__PURE__ */ jsxs112(
+                        isUrl ? /* @__PURE__ */ jsxs113(
                           "button",
                           {
                             type: "button",
@@ -17472,7 +17579,7 @@ var FileInput = React69.forwardRef(function FileInput2({
                             onClick: handleClear,
                             className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                             "aria-label": t("remove_file"),
-                            children: /* @__PURE__ */ jsx177(SquareX4, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ jsx177(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -17518,7 +17625,7 @@ var FileInput = React69.forwardRef(function FileInput2({
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 import * as React70 from "react";
-import { jsx as jsx178, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs114 } from "react/jsx-runtime";
 var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
 var SelectIconsBox = React70.forwardRef(
   function SelectIconsBox2({
@@ -17566,7 +17673,7 @@ var SelectIconsBox = React70.forwardRef(
       );
       focusable?.focus();
     };
-    return /* @__PURE__ */ jsxs113(
+    return /* @__PURE__ */ jsxs114(
       "div",
       {
         ref: combinedContainerRef,
@@ -17670,13 +17777,13 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx179, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs115 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs114("div", { children: [
+  return /* @__PURE__ */ jsxs115("div", { children: [
     /* @__PURE__ */ jsx179("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
@@ -17693,11 +17800,11 @@ function toastResponseError(error, options = {}) {
 
 // src/legacy-fields/textarea/Textarea.tsx
 import { forwardRef as forwardRef73, useId as useId15 } from "react";
-import { jsx as jsx180, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs116 } from "react/jsx-runtime";
 var LegacyTextarea = forwardRef73(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
-    return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsxs116("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx180(
         "textarea",
         {
@@ -17739,7 +17846,7 @@ import { Calendar as Calendar2 } from "lucide-react";
 import * as React71 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
 import { useTranslation as useTranslation43 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs116 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx181, jsxs as jsxs117 } from "react/jsx-runtime";
 var AirbnbFieldTrigger = React71.forwardRef(
   ({
     as = "button",
@@ -17776,9 +17883,9 @@ var AirbnbFieldTrigger = React71.forwardRef(
     const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
     const visibleLabelText = labelText ?? label;
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
-    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs117("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
       /* @__PURE__ */ jsx181("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
+      optionalLabel && /* @__PURE__ */ jsxs117("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
@@ -17798,7 +17905,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs117("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ jsx181(
         Loader24,
@@ -17816,8 +17923,8 @@ var AirbnbFieldTrigger = React71.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs116(Fragment17, { children: [
-      /* @__PURE__ */ jsxs116(
+    const sharedContent = /* @__PURE__ */ jsxs117(Fragment17, { children: [
+      /* @__PURE__ */ jsxs117(
         "span",
         {
           className: cn(
@@ -17863,7 +17970,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
+    return /* @__PURE__ */ jsxs117("div", { className: "w-full", children: [
       topLabel && /* @__PURE__ */ jsx181("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
       as === "button" ? /* @__PURE__ */ jsx181(
         "button",
@@ -17906,7 +18013,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx182, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx182, jsxs as jsxs118 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React72.forwardRef(
   ({
@@ -18022,7 +18129,7 @@ var AirbnbDatePicker = React72.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs118("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx182(
         "input",
         {
@@ -18097,7 +18204,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 import * as React73 from "react";
 import { Eye as Eye2 } from "lucide-react";
 import { useTranslation as useTranslation44 } from "react-i18next";
-import { jsx as jsx183, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx183, jsxs as jsxs119 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React73.forwardRef(
   ({
@@ -18192,7 +18299,7 @@ var AirbnbInput = React73.forwardRef(
     const togglePasswordReveal = () => {
       setIsPasswordRevealed((isRevealed) => !isRevealed);
     };
-    return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
+    return /* @__PURE__ */ jsx183("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs119(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -18284,7 +18391,7 @@ import { ChevronDown as ChevronDown6 } from "lucide-react";
 import * as React78 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx184, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx184, jsxs as jsxs120 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -18303,7 +18410,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs119(
+  return /* @__PURE__ */ jsxs120(
     "div",
     {
       id,
@@ -18479,7 +18586,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx186, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs121 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -18498,7 +18605,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs120(
+  return /* @__PURE__ */ jsxs121(
     "div",
     {
       id,
@@ -18523,7 +18630,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs120(
+        /* @__PURE__ */ jsxs121(
           "div",
           {
             ref: listRef,
@@ -18573,7 +18680,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx187, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs122 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -18597,10 +18704,10 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
+  return /* @__PURE__ */ jsx187(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs122(DrawerContent, { onClose, lockScroll: false, children: [
     /* @__PURE__ */ jsx187(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
     /* @__PURE__ */ jsx187(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
+    /* @__PURE__ */ jsxs122("div", { className: "px-6 pb-4 pt-1", children: [
       /* @__PURE__ */ jsx187(
         AirbnbSelectMobileWheel,
         {
@@ -19043,7 +19150,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx189, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs123 } from "react/jsx-runtime";
 var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -19224,7 +19331,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs122(
+  return /* @__PURE__ */ jsxs123(
     "div",
     {
       ref: containerRef,
@@ -19337,7 +19444,7 @@ var AirbnbSelect = React78.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx190, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs124 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -19385,7 +19492,7 @@ var AirbnbPhoneField = React79.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs124("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ jsx190(
         "input",
@@ -19413,7 +19520,7 @@ var AirbnbPhoneField = React79.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs124("div", { className: "flex items-stretch", children: [
         /* @__PURE__ */ jsx190(
           AirbnbSelect,
           {
@@ -19443,7 +19550,7 @@ var AirbnbPhoneField = React79.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs123(
+            }) => /* @__PURE__ */ jsxs124(
               "button",
               {
                 id,
@@ -19517,7 +19624,7 @@ import * as React80 from "react";
 import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback57 } from "react";
-import { jsx as jsx191, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs125 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -19713,7 +19820,7 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React80.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+  return /* @__PURE__ */ jsxs125("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     /* @__PURE__ */ jsx191(
       AirbnbFieldTrigger,
@@ -19772,7 +19879,7 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+        children: /* @__PURE__ */ jsxs125(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
           /* @__PURE__ */ jsx191(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
           /* @__PURE__ */ jsx191(DrawerDescription, { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx191("div", { className: "px-5 pb-5 pt-1", children: content })
@@ -19845,8 +19952,8 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
+  return /* @__PURE__ */ jsxs125("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs125("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ jsx191(
         Search4,
         {
@@ -19959,11 +20066,11 @@ function getNextEnabledIndex(options, startIndex, step) {
 import * as React81 from "react";
 import { useTranslation as useTranslation45 } from "react-i18next";
 import { Search as Search5, X as X11 } from "lucide-react";
-import { jsx as jsx192, jsxs as jsxs125 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs126 } from "react/jsx-runtime";
 var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation45();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+  return /* @__PURE__ */ jsxs126("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
     /* @__PURE__ */ jsx192(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ jsx192(
       "input",
@@ -20001,7 +20108,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
 import * as React82 from "react";
 import * as SwitchPrimitives2 from "@radix-ui/react-switch";
 import { Check as Check7 } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx193, jsxs as jsxs127 } from "react/jsx-runtime";
 var AirbnbSwitch = React82.forwardRef(
   ({
     className,
@@ -20060,8 +20167,8 @@ var AirbnbSwitch = React82.forwardRef(
     if (!label && !error) {
       return switchElement;
     }
-    return /* @__PURE__ */ jsxs126(Fragment18, { children: [
-      /* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+    return /* @__PURE__ */ jsxs127(Fragment18, { children: [
+      /* @__PURE__ */ jsxs127("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
         switchElement,
         label && /* @__PURE__ */ jsx193(
           Label,
@@ -20396,6 +20503,7 @@ export {
   compressFile,
   compressImage,
   copyToClipboard,
+  countriesFilter,
   createDisabledMatchers,
   emptyMediaVariants,
   findPhoneCode,