@chekinapp/ui 0.0.105 → 0.0.106

package/dist/index.js

@@ -12166,7 +12166,7 @@ var DashboardInput = React43.forwardRef(
       "div",
       {
         className: cn(
-          "relative block w-full min-h-[68px] max-w-[var(--dashboard-input-max-width,none)]",
+          "relative block w-full max-w-[var(--field-max-width,296px)] min-h-[68px]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           wrapperClassName,
@@ -12366,7 +12366,7 @@ function SelectFieldShell({
       ref: containerRef,
       onBlur,
       className: cn(
-        "relative w-full max-w-[var(--max-field-width)]",
+        "relative w-full max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress",
         className
@@ -12581,7 +12581,8 @@ function SelectMenuPanel({
 }
 
 // src/dashboard/_select-internals/SelectSearchInput.tsx
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { Search as Search3 } from "lucide-react";
+import { jsx as jsx147, jsxs as jsxs94 } from "react/jsx-runtime";
 function SelectSearchInput({
   inputRef,
   value,
@@ -12591,26 +12592,35 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ jsx147("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx147(
-    "input",
-    {
-      ref: inputRef,
-      type: "text",
-      value,
-      placeholder,
-      onChange,
-      onKeyDown,
-      autoComplete: "off",
-      "aria-controls": listboxId,
-      "aria-activedescendant": activeOptionId,
-      className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
-    }
-  ) });
+  return /* @__PURE__ */ jsx147("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs94("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx147(
+      Search3,
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
+      }
+    ),
+    /* @__PURE__ */ jsx147(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        placeholder,
+        onChange,
+        onKeyDown,
+        autoComplete: "off",
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeOptionId,
+        className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-9 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
+      }
+    )
+  ] }) });
 }
 
 // src/dashboard/_select-internals/SelectTrigger.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx148, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs95 } from "react/jsx-runtime";
 function SelectTrigger({
   triggerRef,
   triggerId,
@@ -12631,7 +12641,7 @@ function SelectTrigger({
   onBlur
 }) {
   const isEmpty = !hasValue;
-  return /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsxs95(
     "button",
     {
       id: triggerId,
@@ -12656,7 +12666,7 @@ function SelectTrigger({
       ),
       children: [
         /* @__PURE__ */ jsx148("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ jsxs94("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+        /* @__PURE__ */ jsxs95("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
           loading && /* @__PURE__ */ jsx148(ThreeDotsLoader, { height: 18, width: 18 }),
           /* @__PURE__ */ jsx148(
             ChevronDown2,
@@ -12759,7 +12769,7 @@ function useSelectSearch({
 }
 
 // src/dashboard/select/Select.tsx
-import { jsx as jsx149, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs96 } from "react/jsx-runtime";
 function DashboardSelectInternal({
   options = [],
   value,
@@ -12883,7 +12893,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs95(
+  return /* @__PURE__ */ jsxs96(
     SelectFieldShell,
     {
       containerRef,
@@ -12940,7 +12950,7 @@ function DashboardSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs95(
+        /* @__PURE__ */ jsxs96(
           SelectMenuPanel,
           {
             isOpen,
@@ -12996,13 +13006,13 @@ var DashboardSelect = React47.forwardRef(
 
 // src/dashboard/multi-select/MultiSelect.tsx
 import * as React48 from "react";
-import { SquareX as SquareX3 } from "lucide-react";
+import { Search as Search4, SquareX as SquareX3 } from "lucide-react";
 import { useTranslation as useTranslation32 } from "react-i18next";
 
 // src/dashboard/multi-select/MultiSelectChip.tsx
 import { SquareX as SquareX2 } from "lucide-react";
 import { useTranslation as useTranslation31 } from "react-i18next";
-import { jsx as jsx150, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs97 } from "react/jsx-runtime";
 function MultiSelectChip({
   option,
   readOnly,
@@ -13010,7 +13020,7 @@ function MultiSelectChip({
 }) {
   const { t } = useTranslation31();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ jsxs96("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
+  return /* @__PURE__ */ jsxs97("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
     /* @__PURE__ */ jsx150("span", { className: "whitespace-nowrap", children: option.label }),
     !readOnly && /* @__PURE__ */ jsx150(
       "button",
@@ -13029,7 +13039,7 @@ function MultiSelectChip({
 }
 
 // src/dashboard/multi-select/MultiSelect.tsx
-import { jsx as jsx151, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs98 } from "react/jsx-runtime";
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -13224,7 +13234,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs98(
     SelectFieldShell,
     {
       containerRef,
@@ -13243,7 +13253,7 @@ function DashboardMultiSelectInternal({
       hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
       onBlur: handleInputBlur,
       children: [
-        /* @__PURE__ */ jsxs97(
+        /* @__PURE__ */ jsxs98(
           "div",
           {
             id: triggerId,
@@ -13276,6 +13286,13 @@ function DashboardMultiSelectInternal({
                   String(option.value)
                 )
               ),
+              /* @__PURE__ */ jsx151(
+                Search4,
+                {
+                  "aria-hidden": "true",
+                  className: "h-4 w-4 shrink-0 text-[var(--chekin-color-gray-2)]"
+                }
+              ),
               /* @__PURE__ */ jsx151(
                 "input",
                 {
@@ -13305,7 +13322,7 @@ function DashboardMultiSelectInternal({
                   "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                 }
               ),
-              /* @__PURE__ */ jsxs97("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+              /* @__PURE__ */ jsxs98("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
                 loading && /* @__PURE__ */ jsx151(ThreeDotsLoader, { height: 18, width: 18 }),
                 hasValue && !readOnly && /* @__PURE__ */ jsx151(
                   "button",
@@ -13351,7 +13368,7 @@ function DashboardMultiSelectInternal({
             onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ jsxs97(
+        /* @__PURE__ */ jsxs98(
           SelectMenuPanel,
           {
             isOpen,
@@ -13364,21 +13381,30 @@ function DashboardMultiSelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              isMobile3 && /* @__PURE__ */ jsx151("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx151(
-                "input",
-                {
-                  ref: mobileSearchInputRef,
-                  type: "text",
-                  value: searchValue,
-                  placeholder: placeholder ?? "",
-                  onChange: (event) => setSearchValue(event.target.value),
-                  onKeyDown: handleInputKeyDown,
-                  autoComplete: "off",
-                  "aria-controls": listboxId,
-                  "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
-                  className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
-                }
-              ) }),
+              isMobile3 && /* @__PURE__ */ jsx151("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs98("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx151(
+                  Search4,
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
+                  }
+                ),
+                /* @__PURE__ */ jsx151(
+                  "input",
+                  {
+                    ref: mobileSearchInputRef,
+                    type: "text",
+                    value: searchValue,
+                    placeholder: placeholder ?? "",
+                    onChange: (event) => setSearchValue(event.target.value),
+                    onKeyDown: handleInputKeyDown,
+                    autoComplete: "off",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+                    className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-9 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
+                  }
+                )
+              ] }) }),
               /* @__PURE__ */ jsx151(
                 SelectMenu,
                 {
@@ -13436,7 +13462,7 @@ import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { useTranslation as useTranslation33 } from "react-i18next";
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
-import { jsx as jsx153, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx153, jsxs as jsxs99 } from "react/jsx-runtime";
 function InfiniteScrollList({
   scrollRef,
   listboxId,
@@ -13489,10 +13515,10 @@ function InfiniteScrollList({
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ jsxs98("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+                children: isLoaderRow ? /* @__PURE__ */ jsxs99("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
                   /* @__PURE__ */ jsx153(ThreeDotsLoader, { height: 36, width: 36 }),
                   /* @__PURE__ */ jsx153("span", { children: loadingMoreText })
-                ] }) : /* @__PURE__ */ jsxs98(
+                ] }) : /* @__PURE__ */ jsxs99(
                   "button",
                   {
                     id: getOptionId2(virtualItem.index),
@@ -13527,7 +13553,7 @@ function InfiniteScrollList({
 }
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-import { jsx as jsx154, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs100 } from "react/jsx-runtime";
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -13700,7 +13726,7 @@ function DashboardInfiniteScrollSelectInternal({
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
   const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs100(
     SelectFieldShell,
     {
       containerRef,
@@ -13757,7 +13783,7 @@ function DashboardInfiniteScrollSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs99(
+        /* @__PURE__ */ jsxs100(
           SelectMenuPanel,
           {
             isOpen,
@@ -13779,7 +13805,7 @@ function DashboardInfiniteScrollSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs99("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs100("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
                 /* @__PURE__ */ jsx154(ThreeDotsLoader, { height: 18, width: 18 }),
                 /* @__PURE__ */ jsx154("span", { children: resolvedLoadingMoreText })
               ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx154("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx154(
@@ -13818,7 +13844,7 @@ var DashboardInfiniteScrollSelect = React50.forwardRef(
 // src/dashboard/textarea/Textarea.tsx
 import * as React51 from "react";
 import { useTranslation as useTranslation34 } from "react-i18next";
-import { jsx as jsx155, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx155, jsxs as jsxs101 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 function getEmptyState(empty, value, defaultValue) {
@@ -13875,17 +13901,17 @@ var DashboardTextarea = React51.forwardRef(
       resize();
       onInput?.(event);
     };
-    return /* @__PURE__ */ jsxs100(
+    return /* @__PURE__ */ jsxs101(
       "div",
       {
         className: cn(
-          "relative block min-h-[88px] w-full",
+          "relative block min-h-[88px] w-full max-w-[var(--field-max-width,296px)]",
           isBlocked && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsxs100(
+          label && /* @__PURE__ */ jsxs101(
             "label",
             {
               htmlFor: textareaId,
@@ -14368,7 +14394,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-import { jsx as jsx156, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs102 } from "react/jsx-runtime";
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -14382,7 +14408,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ jsx156("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsx156("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs102(
     "div",
     {
       id,
@@ -14429,7 +14455,7 @@ function AirbnbDatePickerWheelColumn({
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-import { jsx as jsx157, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs103 } from "react/jsx-runtime";
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -14451,8 +14477,8 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ jsxs102("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ jsxs102("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+  return /* @__PURE__ */ jsxs103("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ jsxs103("div", { className: "relative overflow-hidden rounded-[24px]", children: [
       /* @__PURE__ */ jsx157("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__ */ jsx157("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__ */ jsx157(
@@ -14462,7 +14488,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__ */ jsxs102("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+      /* @__PURE__ */ jsxs103("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
         /* @__PURE__ */ jsx157(
           AirbnbDatePickerWheelColumn,
           {
@@ -14563,7 +14589,7 @@ function AirbnbDatePickerContent({
     }
   );
   if (isMobile3) {
-    return /* @__PURE__ */ jsx157(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs102(
+    return /* @__PURE__ */ jsx157(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
@@ -14576,7 +14602,7 @@ function AirbnbDatePickerContent({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx157(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsx157(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
@@ -14591,7 +14617,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-import { jsx as jsx158, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs104 } from "react/jsx-runtime";
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -14917,15 +14943,15 @@ var DashboardDatepicker = React53.forwardRef(
       {
         ref: containerRef,
         className: cn(
-          "relative w-full max-w-[var(--max-field-width)]",
+          "relative w-full max-w-[var(--field-max-width,296px)]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress",
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs103("div", { className: "relative min-h-[68px] w-full", children: [
-          /* @__PURE__ */ jsxs103("div", { className: "relative w-full", children: [
-            isMobile3 ? /* @__PURE__ */ jsxs103(
+        children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ jsxs104(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -14945,7 +14971,7 @@ var DashboardDatepicker = React53.forwardRef(
                 ),
                 children: [
                   /* @__PURE__ */ jsx158("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
-                  /* @__PURE__ */ jsxs103("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                  /* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
                     loading && /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
                     /* @__PURE__ */ jsx158(
                       ChevronDown3,
@@ -14960,7 +14986,7 @@ var DashboardDatepicker = React53.forwardRef(
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs103(
+            ) : /* @__PURE__ */ jsxs104(
               "div",
               {
                 className: cn(
@@ -14989,7 +15015,7 @@ var DashboardDatepicker = React53.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs103("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
+                  /* @__PURE__ */ jsxs104("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
                     /* @__PURE__ */ jsx158(
                       "input",
                       {
@@ -15050,7 +15076,7 @@ var DashboardDatepicker = React53.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs103("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                  /* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
                     /* @__PURE__ */ jsx158(
                       "input",
                       {
@@ -15370,7 +15396,7 @@ function resolveRangeSelection({
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
 import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
-import { jsx as jsx159, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs105 } 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";
@@ -15412,7 +15438,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     "div",
     {
       className: cn(
@@ -15480,7 +15506,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsxs104("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+        /* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
           loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
           !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx159(
             "button",
@@ -15554,7 +15580,7 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-import { jsx as jsx161, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs106 } from "react/jsx-runtime";
 function DateRangePopover({
   isOpen,
   isMobile: isMobile3,
@@ -15573,7 +15599,7 @@ function DateRangePopover({
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs105(
+        children: /* @__PURE__ */ jsxs106(
           DrawerContent,
           {
             onClose,
@@ -15602,7 +15628,7 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx162, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
 var DashboardDateRangePicker = React57.forwardRef(function DashboardDateRangePicker2({
   label,
   value: externalValue,
@@ -15768,14 +15794,14 @@ var DashboardDateRangePicker = React57.forwardRef(function DashboardDateRangePic
     {
       ref: containerRef,
       className: cn(
-        "relative w-full max-w-[var(--max-field-width)]",
+        "relative w-full max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress",
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs106("div", { className: "relative min-h-[68px] w-full", children: [
-        /* @__PURE__ */ jsxs106("div", { className: "relative w-full", children: [
+      children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx162(
             DateRangeInputs,
             {
@@ -16058,7 +16084,7 @@ var DashboardTimePicker = React59.forwardRef(
 import * as React60 from "react";
 import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
 import { useTranslation as useTranslation38 } from "react-i18next";
-import { jsx as jsx164, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs108 } from "react/jsx-runtime";
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -16116,12 +16142,12 @@ var DashboardFileInput = React60.forwardRef(
       event.stopPropagation();
       if (isUrl) onDownload(value);
     };
-    return /* @__PURE__ */ jsxs107(
+    return /* @__PURE__ */ jsxs108(
       "label",
       {
         htmlFor: inputId,
         className: cn(
-          "relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
+          "relative block w-full max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
           (disabled || readOnly) && "cursor-not-allowed",
           loading && "cursor-progress",
           disabled && "opacity-50",
@@ -16145,9 +16171,9 @@ var DashboardFileInput = React60.forwardRef(
               "aria-invalid": isInvalid
             }
           ),
-          /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
-            /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ jsxs107(
+          /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
+            /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ jsxs108(
                 "div",
                 {
                   className: cn(
@@ -16155,13 +16181,13 @@ var DashboardFileInput = React60.forwardRef(
                     isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
                   ),
                   children: [
-                    hasFileChip ? /* @__PURE__ */ jsxs107(
+                    hasFileChip ? /* @__PURE__ */ jsxs108(
                       "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__ */ jsxs107(
+                          isUrl ? /* @__PURE__ */ jsxs108(
                             "button",
                             {
                               type: "button",
@@ -16187,7 +16213,7 @@ var DashboardFileInput = React60.forwardRef(
                         ]
                       }
                     ) : /* @__PURE__ */ jsx164("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                    /* @__PURE__ */ jsxs107("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
                       loading && /* @__PURE__ */ jsx164(ThreeDotsLoader, { height: 18, width: 18 }),
                       /* @__PURE__ */ jsx164(Paperclip, { size: 20 })
                     ] })
@@ -16231,7 +16257,7 @@ var DashboardFileInput = React60.forwardRef(
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 import * as React61 from "react";
-import { jsx as jsx165, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs109 } from "react/jsx-runtime";
 function DashboardSelectIconsBox({
   children,
   icons,
@@ -16267,7 +16293,7 @@ function DashboardSelectIconsBox({
     onSelect(iconName);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs108(
+  return /* @__PURE__ */ jsxs109(
     "div",
     {
       ref: containerRef,
@@ -16367,13 +16393,13 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx166, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs109("div", { children: [
+  return /* @__PURE__ */ jsxs110("div", { children: [
     /* @__PURE__ */ jsx166("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
@@ -16390,11 +16416,11 @@ function toastResponseError(error, options = {}) {
 
 // src/legacy-fields/textarea/Textarea.tsx
 import { forwardRef as forwardRef68, useId as useId15 } from "react";
-import { jsx as jsx167, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx167, jsxs as jsxs111 } from "react/jsx-runtime";
 var LegacyTextarea = forwardRef68(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
-    return /* @__PURE__ */ jsxs110("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsxs111("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx167(
         "textarea",
         {
@@ -16436,7 +16462,7 @@ import { Calendar as Calendar2 } from "lucide-react";
 import * as React62 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
 import { useTranslation as useTranslation39 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs111 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs112 } from "react/jsx-runtime";
 var AirbnbFieldTrigger = React62.forwardRef(
   ({
     as = "button",
@@ -16474,9 +16500,9 @@ var AirbnbFieldTrigger = React62.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__ */ jsxs111("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs112("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
       /* @__PURE__ */ jsx168("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs111("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+      optionalLabel && /* @__PURE__ */ jsxs112("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
         "(",
         optionalLabel,
         ")"
@@ -16497,7 +16523,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs111("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs112("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ jsx168(
         Loader24,
@@ -16515,8 +16541,8 @@ var AirbnbFieldTrigger = React62.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs111(Fragment17, { children: [
-      /* @__PURE__ */ jsxs111(
+    const sharedContent = /* @__PURE__ */ jsxs112(Fragment17, { children: [
+      /* @__PURE__ */ jsxs112(
         "span",
         {
           className: cn(
@@ -16565,7 +16591,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs111("div", { className: "w-full", children: [
+    return /* @__PURE__ */ jsxs112("div", { className: "w-full", children: [
       topLabel && /* @__PURE__ */ jsx168("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
       as === "button" ? /* @__PURE__ */ jsx168(
         "button",
@@ -16608,7 +16634,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx169, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs113 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React63.forwardRef(
   ({
@@ -16725,7 +16751,7 @@ var AirbnbDatePicker = React63.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs112("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs113("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx169(
         "input",
         {
@@ -16957,7 +16983,7 @@ import { ChevronDown as ChevronDown5 } from "lucide-react";
 import * as React69 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx171, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx171, jsxs as jsxs114 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -16976,7 +17002,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs114(
     "div",
     {
       id,
@@ -17152,7 +17178,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx173, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx173, jsxs as jsxs115 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -17171,7 +17197,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs114(
+  return /* @__PURE__ */ jsxs115(
     "div",
     {
       id,
@@ -17196,7 +17222,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs114(
+        /* @__PURE__ */ jsxs115(
           "div",
           {
             ref: listRef,
@@ -17246,7 +17272,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx174, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs116 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -17270,10 +17296,10 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx174(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs115(DrawerContent, { onClose, lockScroll: false, children: [
+  return /* @__PURE__ */ jsx174(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs116(DrawerContent, { onClose, lockScroll: false, children: [
     /* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
     /* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs115("div", { className: "px-6 pb-4 pt-1", children: [
+    /* @__PURE__ */ jsxs116("div", { className: "px-6 pb-4 pt-1", children: [
       /* @__PURE__ */ jsx174(
         AirbnbSelectMobileWheel,
         {
@@ -17718,7 +17744,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx176, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx176, jsxs as jsxs117 } from "react/jsx-runtime";
 var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -17898,7 +17924,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs116(
+  return /* @__PURE__ */ jsxs117(
     "div",
     {
       ref: containerRef,
@@ -18013,7 +18039,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx177, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs118 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -18060,7 +18086,7 @@ var AirbnbPhoneField = React70.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs117("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs118("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx177("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ jsx177(
         "input",
@@ -18088,7 +18114,7 @@ var AirbnbPhoneField = React70.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs117("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs118("div", { className: "flex items-stretch", children: [
         /* @__PURE__ */ jsx177(
           AirbnbSelect,
           {
@@ -18120,7 +18146,7 @@ var AirbnbPhoneField = React70.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs117(
+            }) => /* @__PURE__ */ jsxs118(
               "button",
               {
                 id,
@@ -18195,10 +18221,10 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 import * as React71 from "react";
-import { ChevronDown as ChevronDown6, Search as Search3 } from "lucide-react";
+import { ChevronDown as ChevronDown6, Search as Search5 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback51 } from "react";
-import { jsx as jsx178, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -18395,7 +18421,7 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React71.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs118("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+  return /* @__PURE__ */ jsxs119("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx178("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     /* @__PURE__ */ jsx178(
       AirbnbFieldTrigger,
@@ -18455,7 +18481,7 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs118(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+        children: /* @__PURE__ */ jsxs119(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
           /* @__PURE__ */ jsx178(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
           /* @__PURE__ */ jsx178(DrawerDescription, { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx178("div", { className: "px-5 pb-5 pt-1", children: content })
@@ -18528,10 +18554,10 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs118("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs118("div", { className: "relative mb-2", children: [
+  return /* @__PURE__ */ jsxs119("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs119("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ jsx178(
-        Search3,
+        Search5,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -18641,13 +18667,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React72 from "react";
 import { useTranslation as useTranslation40 } from "react-i18next";
-import { Search as Search4, X as X10 } from "lucide-react";
-import { jsx as jsx179, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Search as Search6, X as X10 } from "lucide-react";
+import { jsx as jsx179, jsxs as jsxs120 } from "react/jsx-runtime";
 var AirbnbSearchInput = React72.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation40();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs119("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx179(Search4, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+  return /* @__PURE__ */ jsxs120("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx179(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ jsx179(
       "input",
       {