@chekinapp/ui 0.0.71 → 0.0.73

package/dist/index.cjs

@@ -76,12 +76,19 @@ __export(index_exports, {
   CopyLinkButton: () => CopyLinkButton,
   CopyString: () => CopyString,
   CustomCheckboxDropdownGroup: () => CustomCheckboxDropdownGroup,
+  DEFAULT_DISPLAY_FORMAT: () => DEFAULT_DISPLAY_FORMAT,
   DEVICE_BREAKPOINTS: () => DEVICE_BREAKPOINTS,
   DashboardCreatableMultiSelect: () => DashboardCreatableMultiSelect,
+  DashboardDateRangePicker: () => DashboardDateRangePicker,
+  DashboardDatepicker: () => DashboardDatepicker,
+  DashboardFileInput: () => DashboardFileInput,
   DashboardInfiniteScrollSelect: () => DashboardInfiniteScrollSelect,
   DashboardInput: () => DashboardInput,
   DashboardMultiSelect: () => DashboardMultiSelect,
   DashboardSelect: () => DashboardSelect,
+  DashboardSelectIconsBox: () => DashboardSelectIconsBox,
+  DashboardTextarea: () => DashboardTextarea,
+  DashboardTimePicker: () => DashboardTimePicker,
   DataTable: () => DataTable,
   DatePicker: () => DatePicker,
   DateTableFilter: () => DateTableFilter,
@@ -317,13 +324,17 @@ __export(index_exports, {
   calendarClassNames: () => calendarClassNames,
   cn: () => cn,
   copyToClipboard: () => copyToClipboard,
+  createDisabledMatchers: () => createDisabledMatchers,
   emptyMediaVariants: () => emptyMediaVariants,
+  formatDate: () => formatDate,
   getErrorMessage: () => getErrorMessage,
   getScrollableAreaState: () => getScrollableAreaState,
   getSidebarState: () => getSidebarState,
   inputVariants: () => inputVariants,
+  isDayBlocked: () => isDayBlocked,
   isNumeric: () => isNumeric,
   labelVariants: () => labelVariants,
+  parseDate: () => parseDate,
   registerUiKitI18n: () => registerUiKitI18n,
   scrollToTop: () => scrollToTop,
   sectionTagVariants: () => sectionTagVariants,
@@ -374,7 +385,8 @@ __export(index_exports, {
   useTimeout: () => useTimeout,
   useTimeoutRef: () => useTimeoutRef,
   useTimer: () => useTimer,
-  useUpdateToast: () => useUpdateToast
+  useUpdateToast: () => useUpdateToast,
+  useValidateDates: () => useValidateDates
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -910,7 +922,19 @@ var switchThumbVariants = (0, import_class_variance_authority4.cva)(
   }
 );
 var Switch = React5.forwardRef(
-  ({ className, size, readOnly, loading, onChange, value, id, label, error, ...props }, ref) => {
+  ({
+    className,
+    size,
+    readOnly,
+    loading,
+    onChange,
+    value,
+    id,
+    label,
+    error,
+    wrapperClassName,
+    ...props
+  }, ref) => {
     const generatedId = React5.useId();
     const fieldId = id || generatedId;
     const switchElement = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -932,8 +956,8 @@ var Switch = React5.forwardRef(
     if (!label && !error) {
       return switchElement;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex items-center gap-3", wrapperClassName), children: [
         switchElement,
         label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
       ] }),
@@ -5530,7 +5554,35 @@ var translation_default2 = {
   would_you_like_to_save_them: "Would you like to save them?",
   save: "Save",
   dont_save: "Don't save",
-  copied_exclamation: "Copied!"
+  copied_exclamation: "Copied!",
+  search_placeholder: "Search\u2026",
+  loading_more: "Loading\u2026",
+  no_options: "No options",
+  select_option: "Select option",
+  clear_all: "Clear all",
+  remove_item: "Remove {{label}}",
+  upload_file: "Upload file",
+  download_attachment: "Download attachment",
+  remove_file: "Remove file",
+  open_calendar: "Open calendar",
+  clear_dates: "Clear dates",
+  select_dates: "Select dates",
+  pick_date_range: "Pick a date range",
+  from: "From",
+  to: "To",
+  pick_month: "Pick a month",
+  pick_date: "Pick a date",
+  month: "Month",
+  day: "Day",
+  year: "Year",
+  done: "Done",
+  wrong_period_of_dates: "Selected period is invalid",
+  date_range_max_days_error_one: "Range cannot exceed {{count}} day",
+  date_range_max_days_error_other: "Range cannot exceed {{count}} days",
+  date_range_min_days_error_one: "Range must be at least {{count}} day",
+  date_range_min_days_error_other: "Range must be at least {{count}} days",
+  past_dates: "Date cannot be before {{minDate}}",
+  future_dates: "Date cannot be after {{maxDate}}"
 };
 
 // src/locales/es/translation.json
@@ -9753,7 +9805,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var import_react76 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var getValueArray = (value) => {
-  if (value) {
+  if (value !== void 0 && value !== null) {
     return Array.isArray(value) ? value : [value];
   }
   return [];
@@ -13651,6 +13703,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 // src/dashboard/input/Input.tsx
 var React53 = __toESM(require("react"), 1);
 var import_lucide_react46 = require("lucide-react");
+var import_react_i18next26 = require("react-i18next");
 
 // src/dashboard/_fieldset/Fieldset.tsx
 var import_jsx_runtime154 = require("react/jsx-runtime");
@@ -13798,6 +13851,7 @@ var DashboardInput = React53.forwardRef(
     const generatedId = React53.useId();
     const inputId = id ?? name ?? generatedId;
     const errorId = `${inputId}-error`;
+    const { t } = (0, import_react_i18next26.useTranslation)();
     const isEmpty = checkIfEmpty({ empty, value, defaultValue });
     const [inputType, setInputType] = React53.useState(type);
     const [isPasswordRevealed, setIsPasswordRevealed] = React53.useState(false);
@@ -13989,7 +14043,7 @@ var DashboardInput = React53.forwardRef(
             {
               "data-testid": `${name}-optional`,
               className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]",
-              children: typeof optional === "string" ? optional : "optional"
+              children: typeof optional === "string" ? optional : t("optional")
             }
           ),
           !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
@@ -14013,6 +14067,10 @@ DashboardInput.displayName = "DashboardInput";
 // src/dashboard/select/Select.tsx
 var React55 = __toESM(require("react"), 1);
 var import_lucide_react47 = require("lucide-react");
+var import_react_i18next29 = require("react-i18next");
+
+// src/dashboard/_select-internals/SelectMenu.tsx
+var import_react_i18next27 = require("react-i18next");
 
 // src/dashboard/_select-internals/utils.ts
 function getOptionIndex2(options, option) {
@@ -14065,7 +14123,8 @@ function SelectMenu({
   emptyContent,
   footer
 }) {
-  const emptyMessage = noOptionsMessage?.();
+  const { t } = (0, import_react_i18next27.useTranslation)();
+  const emptyMessage = noOptionsMessage?.() ?? t("no_options");
   const hasOptions = options.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
     "div",
@@ -14084,8 +14143,7 @@ function SelectMenu({
         menuClassName
       ),
       children: [
-        !hasOptions && emptyMessage && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage }),
-        !hasOptions && !emptyMessage && emptyContent,
+        !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
         options.map((option, index) => {
           const isSelected = isOptionSelected(option, selectedValue, selectedValues);
           const isHighlighted = index === highlightedIndex;
@@ -14127,6 +14185,70 @@ function SelectMenu({
   );
 }
 
+// src/dashboard/_select-internals/SelectMenuPanel.tsx
+var import_react_i18next28 = require("react-i18next");
+var import_jsx_runtime157 = require("react/jsx-runtime");
+function SelectMenuPanel({
+  isOpen,
+  isMobile: isMobile2,
+  onClose,
+  title,
+  description,
+  className,
+  drawerClassName,
+  drawerContentClassName,
+  children
+}) {
+  const { t } = (0, import_react_i18next28.useTranslation)();
+  if (!isOpen) return null;
+  if (isMobile2) {
+    const fallbackTitle = t("select_option");
+    const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
+    const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
+    return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+      Drawer,
+      {
+        open: isOpen,
+        onOpenChange: (next) => {
+          if (!next) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+          DrawerContent,
+          {
+            onClose,
+            lockScroll: false,
+            className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
+              /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
+              /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "flex min-h-0 flex-1 flex-col px-1 pb-4 pt-1",
+                    drawerContentClassName
+                  ),
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+    "div",
+    {
+      className: cn(
+        "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
+        className
+      ),
+      children
+    }
+  );
+}
+
 // src/dashboard/_select-internals/useSelectIds.ts
 var React54 = __toESM(require("react"), 1);
 function useSelectIds2({
@@ -14163,7 +14285,7 @@ function useSelectIds2({
 }
 
 // src/dashboard/select/Select.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime158 = require("react/jsx-runtime");
 function DashboardSelectInternal({
   options = [],
   value,
@@ -14183,6 +14305,7 @@ function DashboardSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14199,6 +14322,9 @@ function DashboardSelectInternal({
   const [isOpen, setIsOpen] = React55.useState(false);
   const [searchValue, setSearchValue] = React55.useState("");
   const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
+  const isMobile2 = useIsMobile();
+  const { t } = (0, import_react_i18next29.useTranslation)();
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
   const hasValue = Boolean(value);
   const isEmpty = !hasValue;
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14216,7 +14342,7 @@ function DashboardSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React55.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14295,7 +14421,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -14307,9 +14433,9 @@ function DashboardSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative w-full min-h-[68px]", children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full min-h-[68px]", children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             "label",
             {
               htmlFor: triggerId,
@@ -14317,8 +14443,8 @@ function DashboardSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -14342,10 +14468,10 @@ function DashboardSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                       import_lucide_react47.ChevronDown,
                       {
                         size: 16,
@@ -14359,7 +14485,7 @@ function DashboardSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -14376,21 +14502,23 @@ function DashboardSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+              SelectMenuPanel,
               {
-                className: cn(
-                  "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                  dropdownClassName
-                ),
+                isOpen,
+                isMobile: isMobile2,
+                onClose: () => setIsOpen(false),
+                title: typeof label === "string" ? label : void 0,
+                className: dropdownClassName,
+                drawerClassName,
                 children: [
-                  searchable && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                  searchable && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                     "input",
                     {
                       ref: searchInputRef,
                       type: "text",
                       value: searchValue,
-                      placeholder: searchPlaceholder,
+                      placeholder: resolvedSearchPlaceholder,
                       onChange: (event) => setSearchValue(event.target.value),
                       onKeyDown: handleSearchKeyDown,
                       autoComplete: "off",
@@ -14399,7 +14527,7 @@ function DashboardSelectInternal({
                       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)]"
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                     SelectMenu,
                     {
                       id: listboxId,
@@ -14424,9 +14552,9 @@ function DashboardSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14446,7 +14574,8 @@ var DashboardSelect = React55.forwardRef(
 // src/dashboard/multi-select/MultiSelect.tsx
 var React56 = __toESM(require("react"), 1);
 var import_lucide_react48 = require("lucide-react");
-var import_jsx_runtime158 = require("react/jsx-runtime");
+var import_react_i18next30 = require("react-i18next");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -14467,6 +14596,7 @@ function DashboardMultiSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14481,12 +14611,15 @@ function DashboardMultiSelectInternal({
 }, ref) {
   const containerRef = React56.useRef(null);
   const inputRef = React56.useRef(null);
+  const mobileSearchInputRef = React56.useRef(null);
   const listRef = React56.useRef(null);
   const optionRefs = React56.useRef([]);
   const [isOpen, setIsOpen] = React56.useState(false);
   const [searchValue, setSearchValue] = React56.useState("");
   const [isFocused, setIsFocused] = React56.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
+  const isMobile2 = useIsMobile();
+  const { t } = (0, import_react_i18next30.useTranslation)();
   const selectedValues = React56.useMemo(() => value ?? [], [value]);
   const hasValue = selectedValues.length > 0;
   const isEmpty = !hasValue;
@@ -14523,7 +14656,7 @@ function DashboardMultiSelectInternal({
       setIsOpen(false);
       setIsFocused(false);
     },
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React56.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14544,6 +14677,11 @@ function DashboardMultiSelectInternal({
       return getFirstEnabledOptionIndex2(filteredOptions);
     });
   }, [isOpen, filteredOptions]);
+  React56.useEffect(() => {
+    if (!isOpen || !isMobile2) return;
+    const frame = window.requestAnimationFrame(() => mobileSearchInputRef.current?.focus());
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen, isMobile2]);
   const openMenu = () => {
     if (isBlocked) return;
     setIsOpen(true);
@@ -14638,7 +14776,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -14651,7 +14789,7 @@ function DashboardMultiSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           "label",
           {
             htmlFor: triggerId,
@@ -14659,7 +14797,7 @@ function DashboardMultiSelectInternal({
             children: topLabel
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           "input",
           {
             type: "hidden",
@@ -14667,8 +14805,8 @@ function DashboardMultiSelectInternal({
             value: selectedValues.map((item) => String(item.value)).join(",")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
             "div",
             {
               id: triggerId,
@@ -14691,13 +14829,13 @@ function DashboardMultiSelectInternal({
               ),
               children: [
                 selectedValues.map(
-                  (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+                  (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
                     "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__ */ (0, import_jsx_runtime158.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
-                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                           "button",
                           {
                             type: "button",
@@ -14706,8 +14844,10 @@ function DashboardMultiSelectInternal({
                               removeOption(option);
                             },
                             className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
-                            "aria-label": `Remove ${typeof option.label === "string" ? option.label : String(option.value)}`,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            "aria-label": t("remove_item", {
+                              label: typeof option.label === "string" ? option.label : String(option.value)
+                            }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -14715,7 +14855,7 @@ function DashboardMultiSelectInternal({
                     String(option.value)
                   )
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -14733,7 +14873,7 @@ function DashboardMultiSelectInternal({
                     onKeyDown: handleInputKeyDown,
                     disabled: isBlocked,
                     readOnly,
-                    placeholder: hasValue ? "" : placeholder ?? "",
+                    placeholder: !hasValue && (isFocused || isOpen) ? placeholder ?? "" : "",
                     autoComplete: "off",
                     className: cn(
                       "m-0 box-border min-w-[40px] 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)]",
@@ -14744,9 +14884,9 @@ function DashboardMultiSelectInternal({
                     "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                  loading && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                  hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+                  loading && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                  hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                     "button",
                     {
                       type: "button",
@@ -14755,11 +14895,11 @@ function DashboardMultiSelectInternal({
                         clearAll();
                       },
                       className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
-                      "aria-label": "Clear all",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                      "aria-label": t("clear_all"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                     RotateArrow,
                     {
                       shouldRotate: isOpen,
@@ -14772,7 +14912,7 @@ function DashboardMultiSelectInternal({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
             Fieldset,
             {
               isFocused: isFocused || isOpen,
@@ -14790,15 +14930,35 @@ function DashboardMultiSelectInternal({
               onClick: handleContainerClick
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+            SelectMenuPanel,
             {
-              className: cn(
-                "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                dropdownClassName
-              ),
+              isOpen,
+              isMobile: isMobile2,
+              onClose: () => {
+                setIsOpen(false);
+                setIsFocused(false);
+              },
+              title: typeof label === "string" ? label : void 0,
+              className: dropdownClassName,
+              drawerClassName,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+                  "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)]"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                   SelectMenu,
                   {
                     id: listboxId,
@@ -14820,7 +14980,7 @@ function DashboardMultiSelectInternal({
                     isMulti: true
                   }
                 ),
-                canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                   "button",
                   {
                     type: "button",
@@ -14833,9 +14993,9 @@ function DashboardMultiSelectInternal({
             }
           )
         ] }),
-        !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-        !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+        !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           FieldErrorMessage,
           {
             id: errorId,
@@ -14853,10 +15013,10 @@ var DashboardMultiSelect = React56.forwardRef(
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
 var React57 = __toESM(require("react"), 1);
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 var DashboardCreatableMultiSelect = React57.forwardRef(
   function DashboardCreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
   }
 );
 
@@ -14864,7 +15024,8 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
 var React58 = __toESM(require("react"), 1);
 var import_lucide_react49 = require("lucide-react");
 var import_react_virtual2 = require("@tanstack/react-virtual");
-var import_jsx_runtime160 = require("react/jsx-runtime");
+var import_react_i18next31 = require("react-i18next");
+var import_jsx_runtime161 = require("react/jsx-runtime");
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -14888,6 +15049,7 @@ function DashboardInfiniteScrollSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14898,7 +15060,7 @@ function DashboardInfiniteScrollSelectInternal({
   canLoadMore,
   isLoadingMore,
   loadMoreItems,
-  loadingMoreText = "Loading\u2026",
+  loadingMoreText,
   onSearchChange,
   itemHeight = DEFAULT_ITEM_HEIGHT,
   listHeight = DEFAULT_LIST_HEIGHT,
@@ -14909,9 +15071,15 @@ function DashboardInfiniteScrollSelectInternal({
   const triggerRef = React58.useRef(null);
   const searchInputRef = React58.useRef(null);
   const scrollRef = React58.useRef(null);
+  const previousHighlightedIndexRef = React58.useRef(-1);
+  const lastLoadMoreOptionsLengthRef = React58.useRef(null);
   const [isOpen, setIsOpen] = React58.useState(false);
   const [searchValue, setSearchValue] = React58.useState("");
   const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
+  const isMobile2 = useIsMobile();
+  const { t } = (0, import_react_i18next31.useTranslation)();
+  const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
+  const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
   const hasValue = Boolean(value);
   const isEmpty = !hasValue;
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14936,34 +15104,41 @@ function DashboardInfiniteScrollSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React58.useEffect(() => {
     if (isBlocked) setIsOpen(false);
   }, [isBlocked]);
   React58.useEffect(() => {
-    if (!isOpen) {
-      setSearchValue("");
-      setHighlightedIndex(-1);
-      return;
-    }
-    const selectedIndex = getOptionIndex2(filteredOptions, value);
-    setHighlightedIndex(
-      selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions)
-    );
-    if (searchable) {
-      const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
-      return () => window.cancelAnimationFrame(frame);
-    }
-  }, [isOpen, filteredOptions, searchable, value]);
+    if (isOpen) return;
+    setSearchValue("");
+    setHighlightedIndex(-1);
+    previousHighlightedIndexRef.current = -1;
+    lastLoadMoreOptionsLengthRef.current = null;
+  }, [isOpen]);
+  React58.useEffect(() => {
+    if (!isOpen) return;
+    setHighlightedIndex((current) => {
+      const option = current >= 0 ? filteredOptions[current] : void 0;
+      if (option && !option.isDisabled) return current;
+      const selectedIndex = getOptionIndex2(filteredOptions, value);
+      return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions);
+    });
+  }, [isOpen, filteredOptions, value]);
+  React58.useEffect(() => {
+    if (!isOpen || !searchable) return;
+    const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen, searchable]);
   const virtualItems = virtualizer.getVirtualItems();
   React58.useEffect(() => {
     if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
     if (virtualItems.length === 0) return;
     const lastItem = virtualItems[virtualItems.length - 1];
-    if (lastItem && lastItem.index >= filteredOptions.length - loadMoreThreshold) {
-      loadMoreItems();
-    }
+    if (!lastItem || lastItem.index < filteredOptions.length - loadMoreThreshold) return;
+    if (lastLoadMoreOptionsLengthRef.current === filteredOptions.length) return;
+    lastLoadMoreOptionsLengthRef.current = filteredOptions.length;
+    loadMoreItems();
   }, [
     canLoadMore,
     filteredOptions.length,
@@ -14974,7 +15149,9 @@ function DashboardInfiniteScrollSelectInternal({
     virtualItems
   ]);
   React58.useEffect(() => {
-    if (!isOpen || highlightedIndex < 0) return;
+    const changed = previousHighlightedIndexRef.current !== highlightedIndex;
+    previousHighlightedIndexRef.current = highlightedIndex;
+    if (!isOpen || highlightedIndex < 0 || !changed) return;
     virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
   }, [highlightedIndex, isOpen, virtualizer]);
   const toggleMenu = () => {
@@ -15026,12 +15203,13 @@ function DashboardInfiniteScrollSelectInternal({
   const handleSearchChange = (event) => {
     const next = event.target.value;
     setSearchValue(next);
+    lastLoadMoreOptionsLengthRef.current = null;
     onSearchChange?.(next);
   };
   const emptyMessage = noOptionsMessage?.();
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -15043,9 +15221,9 @@ function DashboardInfiniteScrollSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             "label",
             {
               htmlFor: triggerId,
@@ -15053,8 +15231,8 @@ function DashboardInfiniteScrollSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -15078,10 +15256,10 @@ function DashboardInfiniteScrollSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                       import_lucide_react49.ChevronDown,
                       {
                         size: 16,
@@ -15095,7 +15273,7 @@ function DashboardInfiniteScrollSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -15112,21 +15290,23 @@ function DashboardInfiniteScrollSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
+              SelectMenuPanel,
               {
-                className: cn(
-                  "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                  dropdownClassName
-                ),
+                isOpen,
+                isMobile: isMobile2,
+                onClose: () => setIsOpen(false),
+                title: typeof label === "string" ? label : void 0,
+                className: dropdownClassName,
+                drawerClassName,
                 children: [
-                  searchable && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  searchable && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                     "input",
                     {
                       ref: searchInputRef,
                       type: "text",
                       value: searchValue,
-                      placeholder: searchPlaceholder,
+                      placeholder: resolvedSearchPlaceholder,
                       onChange: handleSearchChange,
                       onKeyDown: handleSearchKeyDown,
                       autoComplete: "off",
@@ -15135,13 +15315,16 @@ function DashboardInfiniteScrollSelectInternal({
                       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)]"
                     }
                   ) }),
-                  itemCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("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__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children: resolvedLoadingMoreText })
+                  ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                     "div",
                     {
                       ref: scrollRef,
                       className: cn("overflow-y-auto", menuClassName),
                       style: { height: `${measuredListHeight}px` },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                         "div",
                         {
                           id: listboxId,
@@ -15158,7 +15341,7 @@ function DashboardInfiniteScrollSelectInternal({
                             const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
                             const isHighlighted = virtualItem.index === highlightedIndex;
                             const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
-                            return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                               "div",
                               {
                                 "data-index": virtualItem.index,
@@ -15167,10 +15350,10 @@ function DashboardInfiniteScrollSelectInternal({
                                   height: `${virtualItem.size}px`,
                                   transform: `translateY(${virtualItem.start}px)`
                                 },
-                                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("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__ */ (0, import_jsx_runtime160.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { children: loadingMoreText })
-                                ] }) : /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+                                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("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__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 36, width: 36 }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children: resolvedLoadingMoreText })
+                                ] }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
                                   "button",
                                   {
                                     id: getOptionId2(virtualItem.index),
@@ -15189,8 +15372,8 @@ function DashboardInfiniteScrollSelectInternal({
                                       isOptionDisabled && "cursor-default opacity-30"
                                     ),
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "block break-words", children: option?.label }),
-                                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                                      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "block break-words", children: option?.label }),
+                                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                                     ]
                                   }
                                 )
@@ -15206,9 +15389,9 @@ function DashboardInfiniteScrollSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -15225,101 +15408,1986 @@ var DashboardInfiniteScrollSelect = React58.forwardRef(
   DashboardInfiniteScrollSelectInternal
 );
 
-// src/searchable-select/SearchableSelect.tsx
+// src/dashboard/textarea/Textarea.tsx
 var React59 = __toESM(require("react"), 1);
-var import_lucide_react50 = require("lucide-react");
-var import_react_virtual3 = require("@tanstack/react-virtual");
-var import_react82 = require("react");
-var import_jsx_runtime161 = require("react/jsx-runtime");
-var ROW_HEIGHT = 48;
-var DESKTOP_LIST_HEIGHT = 280;
-var MOBILE_LIST_HEIGHT = 420;
-var LOAD_MORE_THRESHOLD = 6;
-function defaultFilter(option, searchValue) {
-  return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
+var import_react_i18next32 = require("react-i18next");
+var import_jsx_runtime162 = require("react/jsx-runtime");
+var LINE_HEIGHT = 20;
+var VERTICAL_PADDING = 32;
+function getEmptyState(empty, value, defaultValue) {
+  if (typeof empty === "boolean") return empty;
+  if (value !== void 0) return !String(value);
+  return !defaultValue;
 }
-var SearchableSelectInternal = ({
-  options,
-  value,
-  onChange,
-  onBlur,
-  onOpenChange,
-  searchValue,
-  onSearchChange,
-  filterOption = defaultFilter,
-  loading,
-  hasNextPage,
-  onLoadMore,
-  variant = "default",
-  label,
-  topLabel,
-  placeholder,
-  searchPlaceholder = "Search...",
-  mobileTitle,
-  getValueLabel,
-  disabled,
-  error,
-  invalid,
-  optional,
-  tooltip,
-  hideErrorMessage,
-  name,
-  className,
-  dropdownClassName,
-  menuClassName,
-  noOptionsMessage,
-  loadingMessage
-}, ref) => {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
-  const reactId = React59.useId();
-  const [open, setOpen] = React59.useState(false);
-  const [internalSearchValue, setInternalSearchValue] = React59.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React59.useState(-1);
-  const containerRef = React59.useRef(null);
-  const triggerRef = React59.useRef(null);
-  const inputRef = React59.useRef(null);
-  const listboxId = `${reactId}-listbox`;
-  const labelId = `${reactId}-label`;
-  const valueId = `${reactId}-value`;
-  const helperTextId = `${reactId}-helper`;
-  const errorId = `${reactId}-error`;
-  const searchInputId = `${reactId}-search`;
-  const effectiveSearchValue = searchValue ?? internalSearchValue;
-  const shouldFilterLocally = !onSearchChange && filterOption !== null;
-  const visibleOptions = React59.useMemo(() => {
-    if (!shouldFilterLocally || !effectiveSearchValue) {
-      return options;
-    }
-    return options.filter((option) => filterOption(option, effectiveSearchValue));
-  }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
-  const selectedIndex = React59.useMemo(
-    () => visibleOptions.findIndex((option) => option.value === value?.value),
-    [value?.value, visibleOptions]
-  );
-  const helperText = placeholder ?? label;
-  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
-  const isBlocked = Boolean(disabled) || Boolean(loading);
-  const triggerError = error ?? invalid;
-  const describedBy = error && !hideErrorMessage ? errorId : void 0;
-  const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
-  useOutsideClick({
-    elementRef: containerRef,
-    onOutsideClick: () => closeSelect(),
-    isDisabled: !open || isMobile2
-  });
-  const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = (0, import_react82.useCallback)(
-    (nextOpen, options2) => {
-      setOpen(nextOpen);
-      handleOnOpenChange?.(nextOpen);
-      if (!nextOpen && options2?.restoreFocus) {
-        triggerRef.current?.focus();
+var DashboardTextarea = React59.forwardRef(
+  function DashboardTextarea2({
+    className,
+    textareaClassName,
+    label,
+    invalid,
+    error,
+    empty,
+    optional,
+    disabled,
+    readOnly,
+    loading,
+    tooltip,
+    name,
+    id,
+    helperText,
+    minRows = 3,
+    maxRows,
+    autosize = true,
+    value,
+    defaultValue,
+    onInput,
+    ...textareaProps
+  }, ref) {
+    const innerRef = React59.useRef(null);
+    const combinedRef = useCombinedRef(ref, innerRef);
+    const reactId = React59.useId();
+    const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
+    const { t } = (0, import_react_i18next32.useTranslation)();
+    const isInvalid = Boolean(invalid || error);
+    const isEmpty = getEmptyState(empty, value, defaultValue);
+    const isBlocked = Boolean(disabled);
+    const resize = React59.useCallback(() => {
+      const el = innerRef.current;
+      if (!el || !autosize) return;
+      el.style.height = "auto";
+      const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
+      const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
+      const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+      el.style.height = `${nextHeight}px`;
+      el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
+    }, [autosize, maxRows, minRows]);
+    React59.useLayoutEffect(() => {
+      resize();
+    }, [resize, value]);
+    const handleInput = (event) => {
+      resize();
+      onInput?.(event);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative block min-h-[88px] w-full",
+          isBlocked && "cursor-not-allowed opacity-50",
+          loading && "cursor-progress opacity-50",
+          className
+        ),
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
+            "label",
+            {
+              htmlFor: textareaId,
+              className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
+              children: [
+                label,
+                tooltip && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+            "textarea",
+            {
+              ref: combinedRef,
+              id: textareaId,
+              name,
+              value,
+              defaultValue,
+              rows: minRows,
+              disabled: isBlocked || loading,
+              readOnly: isBlocked || readOnly,
+              "aria-invalid": isInvalid,
+              "aria-busy": loading,
+              onInput: handleInput,
+              className: cn(
+                "m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
+                "border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
+                !isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
+                isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
+                isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
+                (readOnly || isBlocked) && "cursor-default",
+                isBlocked && "cursor-not-allowed",
+                loading && "cursor-progress",
+                textareaClassName
+              ),
+              style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
+              ...textareaProps
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+            FieldErrorMessage,
+            {
+              id: `${textareaId}-error`,
+              message: error,
+              className: "mt-[1px] text-[14px]"
+            }
+          ),
+          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
+        ]
       }
-    },
-    [handleOnOpenChange]
+    );
+  }
+);
+
+// src/dashboard/datepicker/Datepicker.tsx
+var React60 = __toESM(require("react"), 1);
+var import_lucide_react50 = require("lucide-react");
+var import_react_i18next33 = require("react-i18next");
+var import_jsx_runtime163 = require("react/jsx-runtime");
+var MONTHS_IN_YEAR2 = 12;
+var DEFAULT_MIN_DATE2 = new Date(1920, 0, 1);
+function getMonthLabels2(locale) {
+  const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
+  return Array.from(
+    { length: MONTHS_IN_YEAR2 },
+    (_, monthIndex) => formatter.format(new Date(2024, monthIndex, 1))
   );
-  React59.useEffect(() => {
-    if (isBlocked) {
+}
+var DAY_PATTERN = /^([1-9]|[12]\d|3[01])$/;
+var PARTIAL_DAY_PATTERN = /^[0-9]{0,2}$/;
+var PARTIAL_YEAR_PATTERN = /^[0-9]{0,4}$/;
+var FULL_YEAR_PATTERN = /^(19|20)\d{2}$/;
+function isValidCalendarDate(year, monthIndex, day) {
+  const date = new Date(year, monthIndex, day);
+  return date.getFullYear() === year && date.getMonth() === monthIndex && date.getDate() === day;
+}
+function partsFromDate(date) {
+  if (!date) return { day: "", monthIndex: null, year: "" };
+  return {
+    day: String(date.getDate()),
+    monthIndex: date.getMonth(),
+    year: String(date.getFullYear())
+  };
+}
+function dateFromParts(day, monthIndex, year) {
+  if (!day || monthIndex === null || !year) return null;
+  if (!DAY_PATTERN.test(day) || !FULL_YEAR_PATTERN.test(year)) return null;
+  const dayNum = parseInt(day, 10);
+  const yearNum = parseInt(year, 10);
+  if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
+  return new Date(yearNum, monthIndex, dayNum);
+}
+var DashboardDatepicker = React60.forwardRef(
+  function DashboardDatepicker2({
+    label,
+    value,
+    defaultValue,
+    onChange,
+    name,
+    invalid,
+    error,
+    disabled,
+    readOnly,
+    loading,
+    optional,
+    tooltip,
+    className,
+    monthLabels,
+    dayPlaceholder = "DD",
+    yearPlaceholder = "YYYY",
+    monthPlaceholder,
+    mobilePlaceholder,
+    mobileTitle,
+    doneLabel,
+    hideErrorMessage,
+    helperText,
+    width,
+    locale = "en-US",
+    minDate,
+    maxDate,
+    formatValue
+  }, ref) {
+    const containerRef = React60.useRef(null);
+    const dayInputRef = React60.useRef(null);
+    const monthInputRef = React60.useRef(null);
+    const monthListRef = React60.useRef(null);
+    const yearInputRef = React60.useRef(null);
+    const mobileTriggerRef = React60.useRef(null);
+    const wheelBaseId = React60.useId();
+    const reactId = React60.useId();
+    const baseId = name ?? `dash-datepicker-${reactId}`;
+    const dayId = `${baseId}-day`;
+    const monthId = `${baseId}-month`;
+    const yearId = `${baseId}-year`;
+    const labelId = `${baseId}-label`;
+    const errorId = `${baseId}-error`;
+    const { t } = (0, import_react_i18next33.useTranslation)();
+    const resolvedMonthLabels = React60.useMemo(
+      () => monthLabels ?? getMonthLabels2(locale),
+      [locale, monthLabels]
+    );
+    const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
+    const resolvedDoneLabel = doneLabel ?? t("done");
+    const isControlled = value !== void 0;
+    const initialParts = React60.useMemo(
+      () => partsFromDate(value ?? defaultValue ?? null),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    );
+    const [day, setDay] = React60.useState(initialParts.day);
+    const [monthIndex, setMonthIndex] = React60.useState(
+      initialParts.monthIndex
+    );
+    const [year, setYear] = React60.useState(initialParts.year);
+    const [isMonthOpen, setIsMonthOpen] = React60.useState(false);
+    const [isWheelOpen, setIsWheelOpen] = React60.useState(false);
+    const [focusedField, setFocusedField] = React60.useState(null);
+    const [monthInputValue, setMonthInputValue] = React60.useState("");
+    const [monthHighlightIndex, setMonthHighlightIndex] = React60.useState(-1);
+    const isMobile2 = useIsMobile();
+    React60.useImperativeHandle(ref, () => dayInputRef.current, []);
+    React60.useEffect(() => {
+      if (!isControlled) return;
+      const next = partsFromDate(value ?? null);
+      setDay(next.day);
+      setMonthIndex(next.monthIndex);
+      setYear(next.year);
+    }, [isControlled, value]);
+    React60.useEffect(() => {
+      if (focusedField === "month") return;
+      setMonthInputValue(
+        monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
+      );
+    }, [monthIndex, resolvedMonthLabels, focusedField]);
+    const filteredMonths = React60.useMemo(() => {
+      const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
+      const query = monthInputValue.trim().toLowerCase();
+      const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
+      if (!query || monthInputValue === currentLabel) return all;
+      return all.filter((opt) => opt.label.toLowerCase().includes(query));
+    }, [monthInputValue, monthIndex, resolvedMonthLabels]);
+    React60.useEffect(() => {
+      if (!isMonthOpen) {
+        setMonthHighlightIndex(-1);
+        return;
+      }
+      if (monthIndex !== null) {
+        const currentLabel = resolvedMonthLabels[monthIndex];
+        const index = filteredMonths.findIndex((o) => o.label === currentLabel);
+        if (index >= 0) {
+          setMonthHighlightIndex(index);
+          return;
+        }
+      }
+      setMonthHighlightIndex(filteredMonths.length > 0 ? 0 : -1);
+    }, [isMonthOpen, filteredMonths.length]);
+    const hasAnyValue = Boolean(day) || monthIndex !== null || Boolean(year);
+    const isEmpty = !hasAnyValue;
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
+    const isInvalid = Boolean(invalid || error);
+    const wrapperWidth = toCssSize(width);
+    const currentDate = React60.useMemo(
+      () => dateFromParts(day, monthIndex, year),
+      [day, monthIndex, year]
+    );
+    useOutsideClick({
+      elementRef: containerRef,
+      onOutsideClick: () => setIsMonthOpen(false),
+      isDisabled: !isMonthOpen || isMobile2
+    });
+    const emitChange = React60.useCallback(
+      (nextDay, nextMonth, nextYear) => {
+        if (!onChange) return;
+        const date = dateFromParts(nextDay, nextMonth, nextYear);
+        onChange(date, name);
+      },
+      [name, onChange]
+    );
+    const handleDayChange = (event) => {
+      const next = event.target.value;
+      if (!PARTIAL_DAY_PATTERN.test(next)) return;
+      setDay(next);
+      emitChange(next, monthIndex, year);
+      if (next.length === 2 && DAY_PATTERN.test(next)) {
+        monthInputRef.current?.focus();
+      }
+    };
+    const handleYearChange = (event) => {
+      const next = event.target.value;
+      if (!PARTIAL_YEAR_PATTERN.test(next)) return;
+      setYear(next);
+      emitChange(day, monthIndex, next);
+    };
+    const handleMonthSelect = (index) => {
+      setMonthIndex(index);
+      setMonthInputValue(resolvedMonthLabels[index] ?? "");
+      setIsMonthOpen(false);
+      emitChange(day, index, year);
+      yearInputRef.current?.focus();
+    };
+    const handleMonthInputChange = (event) => {
+      setMonthInputValue(event.target.value);
+      setIsMonthOpen(true);
+      setMonthHighlightIndex(0);
+    };
+    const commitMonthInput = React60.useCallback(() => {
+      const query = monthInputValue.trim().toLowerCase();
+      if (!query) {
+        if (monthIndex !== null) {
+          setMonthIndex(null);
+          emitChange(day, null, year);
+        }
+        setMonthInputValue("");
+        return;
+      }
+      const exactMatch = resolvedMonthLabels.findIndex(
+        (label2) => label2.toLowerCase() === query
+      );
+      if (exactMatch >= 0) {
+        if (exactMatch !== monthIndex) {
+          setMonthIndex(exactMatch);
+          emitChange(day, exactMatch, year);
+        }
+        setMonthInputValue(resolvedMonthLabels[exactMatch]);
+        return;
+      }
+      setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
+    }, [day, emitChange, monthIndex, monthInputValue, resolvedMonthLabels, year]);
+    const handleMonthInputKeyDown = (event) => {
+      if (isBlocked) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setIsMonthOpen(true);
+        setMonthHighlightIndex(
+          (prev) => filteredMonths.length === 0 ? -1 : Math.min(prev + 1, filteredMonths.length - 1)
+        );
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setIsMonthOpen(true);
+        setMonthHighlightIndex((prev) => Math.max(prev - 1, 0));
+        return;
+      }
+      if (event.key === "Enter") {
+        if (!isMonthOpen) return;
+        event.preventDefault();
+        const target = filteredMonths[monthHighlightIndex];
+        if (target) {
+          handleMonthSelect(target.index);
+        } else {
+          commitMonthInput();
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setIsMonthOpen(false);
+        setMonthInputValue(monthIndex !== null ? resolvedMonthLabels[monthIndex] : "");
+        return;
+      }
+      if (event.key === "Tab") {
+        setIsMonthOpen(false);
+      }
+    };
+    const focusDayInput = React60.useCallback(() => {
+      if (isBlocked || readOnly) return;
+      dayInputRef.current?.focus();
+    }, [isBlocked, readOnly]);
+    const openWheel = React60.useCallback(() => {
+      if (isBlocked || readOnly) return;
+      setIsWheelOpen(true);
+    }, [isBlocked, readOnly]);
+    const closeWheel = React60.useCallback(() => {
+      setIsWheelOpen(false);
+      mobileTriggerRef.current?.focus();
+    }, []);
+    const closeMonth = () => setIsMonthOpen(false);
+    const showCoverage = isEmpty && !isFocused && !isMobile2;
+    const wheel = useDatePickerWheel({
+      isOpen: isWheelOpen,
+      value: currentDate,
+      defaultValue: null,
+      minDate,
+      maxDate
+    });
+    const handleWheelDone = React60.useCallback(() => {
+      const next = wheel.draftDate;
+      setDay(String(next.getDate()));
+      setMonthIndex(next.getMonth());
+      setYear(String(next.getFullYear()));
+      onChange?.(next, name);
+      setIsWheelOpen(false);
+      mobileTriggerRef.current?.focus();
+    }, [name, onChange, wheel.draftDate]);
+    const defaultFormatValue = React60.useCallback(
+      (date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
+      [resolvedMonthLabels]
+    );
+    const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
+    const monthListboxId = `${monthId}-listbox`;
+    const getMonthOptionId = (index) => `${monthId}-option-${index}`;
+    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+      "ul",
+      {
+        ref: monthListRef,
+        id: monthListboxId,
+        role: "listbox",
+        "aria-labelledby": labelId,
+        className: "m-0 max-h-[260px] list-none overflow-y-auto p-1",
+        children: filteredMonths.map((option, position) => {
+          const isSelected = option.index === monthIndex;
+          const isHighlighted = position === monthHighlightIndex;
+          return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+            "button",
+            {
+              id: getMonthOptionId(option.index),
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              tabIndex: -1,
+              onMouseDown: (event) => event.preventDefault(),
+              onMouseMove: () => setMonthHighlightIndex(position),
+              onClick: () => handleMonthSelect(option.index),
+              className: cn(
+                "flex w-full items-center justify-start rounded-md border-0 bg-transparent px-3 py-[10px] text-left text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
+                isHighlighted && "bg-[var(--chekin-color-surface-pressed)] text-[var(--chekin-color-brand-blue)]",
+                isSelected && "font-bold"
+              ),
+              children: option.label
+            }
+          ) }, option.index);
+        })
+      }
+    );
+    const subInputClass = cn(
+      "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+      isBlocked && "cursor-not-allowed",
+      loading && "cursor-progress"
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(
+          "relative w-full max-w-[var(--max-field-width)]",
+          disabled && "cursor-not-allowed opacity-50",
+          loading && "cursor-progress",
+          className
+        ),
+        style: wrapperWidth ? { width: wrapperWidth } : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative w-full", children: [
+            isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
+              "button",
+              {
+                ref: mobileTriggerRef,
+                id: dayId,
+                type: "button",
+                "aria-haspopup": "dialog",
+                "aria-expanded": isWheelOpen,
+                "aria-labelledby": labelId,
+                "aria-invalid": isInvalid,
+                "aria-busy": loading,
+                disabled: isBlocked || readOnly,
+                onClick: openWheel,
+                className: cn(
+                  "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+                  triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
+                  (isBlocked || readOnly) && "cursor-not-allowed"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+                      import_lucide_react50.ChevronDown,
+                      {
+                        size: 16,
+                        className: cn(
+                          "transition-transform duration-200",
+                          isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+                    "input",
+                    {
+                      ref: dayInputRef,
+                      id: dayId,
+                      type: "text",
+                      inputMode: "numeric",
+                      autoComplete: "off",
+                      name: name ? `${name}-day` : void 0,
+                      value: day,
+                      placeholder: dayPlaceholder,
+                      disabled: isBlocked,
+                      readOnly,
+                      "aria-invalid": isInvalid,
+                      "aria-labelledby": labelId,
+                      onChange: handleDayChange,
+                      onFocus: () => setFocusedField("day"),
+                      onBlur: () => setFocusedField(null),
+                      maxLength: 2,
+                      className: subInputClass
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("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__ */ (0, import_jsx_runtime163.jsx)(
+                      "input",
+                      {
+                        ref: monthInputRef,
+                        id: monthId,
+                        type: "text",
+                        role: "combobox",
+                        autoComplete: "off",
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": isMonthOpen,
+                        "aria-controls": monthListboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": monthHighlightIndex >= 0 && filteredMonths[monthHighlightIndex] ? getMonthOptionId(filteredMonths[monthHighlightIndex].index) : void 0,
+                        "aria-labelledby": labelId,
+                        "aria-invalid": isInvalid,
+                        name: name ? `${name}-month` : void 0,
+                        value: monthInputValue,
+                        placeholder: resolvedMonthPlaceholder,
+                        disabled: isBlocked,
+                        readOnly,
+                        onChange: handleMonthInputChange,
+                        onFocus: () => {
+                          setFocusedField("month");
+                          if (!isBlocked && !readOnly) {
+                            setIsMonthOpen(true);
+                            monthInputRef.current?.select();
+                          }
+                        },
+                        onBlur: () => {
+                          setFocusedField(null);
+                          commitMonthInput();
+                        },
+                        onClick: () => {
+                          if (!isBlocked && !readOnly) setIsMonthOpen(true);
+                        },
+                        onKeyDown: handleMonthInputKeyDown,
+                        className: cn(
+                          "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-center text-[16px] font-medium leading-5 outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+                          monthIndex !== null ? "text-[var(--chekin-color-brand-navy)]" : "text-[var(--chekin-color-gray-1)]",
+                          (isBlocked || readOnly) && "cursor-not-allowed"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+                      import_lucide_react50.ChevronDown,
+                      {
+                        size: 14,
+                        onMouseDown: (event) => {
+                          event.preventDefault();
+                          if (isBlocked || readOnly) return;
+                          setIsMonthOpen((prev) => !prev);
+                          monthInputRef.current?.focus();
+                        },
+                        className: cn(
+                          "shrink-0 cursor-pointer text-[var(--chekin-color-gray-2)] transition-transform duration-200",
+                          isMonthOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+                      "input",
+                      {
+                        ref: yearInputRef,
+                        id: yearId,
+                        type: "text",
+                        inputMode: "numeric",
+                        autoComplete: "off",
+                        name: name ? `${name}-year` : void 0,
+                        value: year,
+                        placeholder: yearPlaceholder,
+                        disabled: isBlocked,
+                        readOnly,
+                        "aria-invalid": isInvalid,
+                        "aria-labelledby": labelId,
+                        onChange: handleYearChange,
+                        onFocus: () => setFocusedField("year"),
+                        onBlur: () => setFocusedField(null),
+                        maxLength: 4,
+                        className: subInputClass
+                      }
+                    ),
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+                      ThreeDotsLoader,
+                      {
+                        height: 18,
+                        width: 18,
+                        className: "ml-2 text-[var(--chekin-color-gray-2)]"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            showCoverage && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+              "div",
+              {
+                className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
+                onClick: focusDayInput,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+              Fieldset,
+              {
+                isFocused,
+                invalid: isInvalid,
+                isEmpty,
+                isActivated: !isEmpty || isFocused,
+                disabled,
+                loading,
+                readOnly,
+                htmlFor: dayId,
+                labelId,
+                legend: label,
+                label,
+                tooltip,
+                onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
+              }
+            ),
+            isMonthOpen && !isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
+          ] }),
+          isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+            DatePickerContent,
+            {
+              baseId: wheelBaseId,
+              open: isWheelOpen,
+              isMobile: true,
+              label: label ?? t("pick_date"),
+              title: mobileTitle ?? label ?? t("pick_date"),
+              doneLabel: resolvedDoneLabel,
+              monthLabels: wheel.months.map((m) => resolvedMonthLabels[m] ?? ""),
+              days: wheel.days,
+              years: wheel.years,
+              monthIndex: wheel.monthIndex,
+              dayIndex: wheel.dayIndex,
+              yearIndex: wheel.yearIndex,
+              monthScrollTop: wheel.monthScrollTop,
+              dayScrollTop: wheel.dayScrollTop,
+              yearScrollTop: wheel.yearScrollTop,
+              monthListRef: wheel.monthListRef,
+              dayListRef: wheel.dayListRef,
+              yearListRef: wheel.yearListRef,
+              onOpenChange: (next) => next ? openWheel() : closeWheel(),
+              onDone: handleWheelDone,
+              onColumnScroll: wheel.handleColumnScroll,
+              onColumnKeyDown: wheel.handleColumnKeyDown,
+              onOptionSelect: wheel.handleOptionSelect
+            }
+          ),
+          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+            FieldErrorMessage,
+            {
+              id: errorId,
+              message: error,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+
+// src/dashboard/date-range-picker/DateRangePicker.tsx
+var React64 = __toESM(require("react"), 1);
+var import_react_i18next34 = require("react-i18next");
+
+// src/dashboard/date-range-picker/isDayBlocked.ts
+var import_date_fns2 = require("date-fns");
+
+// src/dashboard/date-range-picker/dateUtils.ts
+var import_date_fns = require("date-fns");
+var DEFAULT_DISPLAY_FORMAT = "dd-MM-yyyy";
+var SUPPORTED_FORMATS = ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"];
+var formatDate = (format2 = DEFAULT_DISPLAY_FORMAT) => (date) => (0, import_date_fns.format)(date, format2);
+var parseDate = (displayFormat) => (dateStr) => {
+  if (!dateStr) return void 0;
+  const formats = displayFormat ? Array.from(/* @__PURE__ */ new Set([...SUPPORTED_FORMATS, displayFormat])) : SUPPORTED_FORMATS;
+  for (const format2 of formats) {
+    const parsed = (0, import_date_fns.parse)(dateStr, format2, /* @__PURE__ */ new Date());
+    if ((0, import_date_fns.isValid)(parsed) && (0, import_date_fns.format)(parsed, format2) === dateStr) {
+      return parsed;
+    }
+  }
+  return void 0;
+};
+function toDate(input) {
+  if (input === void 0 || input === null || input === "") return void 0;
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? void 0 : input;
+  const next = new Date(input);
+  return Number.isNaN(next.getTime()) ? void 0 : next;
+}
+function resetTime(date) {
+  const next = toDate(date) ?? /* @__PURE__ */ new Date();
+  next.setHours(0, 0, 0, 0);
+  return next;
+}
+
+// src/dashboard/date-range-picker/isDayBlocked.ts
+var isDayBlocked = ({ minDate, maxDate, maxDays, minDays, datesRange }) => (date) => {
+  const startDate = datesRange?.from ? resetTime(datesRange.from) : null;
+  const endDate = datesRange?.to ? resetTime(datesRange.to) : null;
+  const min = toDate(minDate);
+  const max = toDate(maxDate);
+  if (maxDays) {
+    if (startDate && Math.abs((0, import_date_fns2.differenceInDays)(date, startDate)) + 1 > maxDays) {
+      return true;
+    }
+    if (endDate && Math.abs((0, import_date_fns2.differenceInDays)(date, endDate)) + 1 > maxDays) {
+      return true;
+    }
+  }
+  if (minDays) {
+    if (startDate && !(0, import_date_fns2.isSameDay)(date, startDate) && Math.abs((0, import_date_fns2.differenceInDays)(date, startDate)) < minDays) {
+      return true;
+    }
+    if (endDate && !(0, import_date_fns2.isSameDay)(date, endDate) && Math.abs((0, import_date_fns2.differenceInDays)(date, endDate)) < minDays) {
+      return true;
+    }
+  }
+  if (min && (0, import_date_fns2.isBefore)(date, resetTime(min))) return true;
+  if (max && (0, import_date_fns2.isAfter)(date, resetTime(max))) return true;
+  return false;
+};
+
+// src/dashboard/date-range-picker/createDisabledMatchers.ts
+var createDisabledMatchers = ({
+  disabledDays,
+  minDate,
+  maxDate,
+  maxDays,
+  minDays,
+  datesRange
+}) => {
+  const result = [
+    isDayBlocked({ minDate, maxDate, maxDays, minDays, datesRange })
+  ];
+  if (Array.isArray(disabledDays)) result.push(...disabledDays);
+  else if (disabledDays) result.push(disabledDays);
+  return result;
+};
+
+// src/dashboard/date-range-picker/hooks/useRangeValue.ts
+var React61 = __toESM(require("react"), 1);
+function useRangeValue({
+  value: externalValue,
+  defaultValue,
+  onChange,
+  name
+}) {
+  const isControlled = externalValue !== void 0;
+  const [internalValue, setInternalValue] = React61.useState(
+    defaultValue
+  );
+  const value = isControlled ? externalValue : internalValue;
+  const commit = React61.useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      if (next === void 0) {
+        onChange?.(void 0, name);
+        return;
+      }
+      if (next?.from && next?.to) onChange?.(next, name);
+    },
+    [isControlled, name, onChange]
+  );
+  return { value, commit };
+}
+
+// src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
+var React62 = __toESM(require("react"), 1);
+function useRangeTextInputs({
+  value,
+  format: format2,
+  parse: parse3,
+  onCommit,
+  onBlur
+}) {
+  const [fromText, setFromText] = React62.useState(value?.from ? format2(value.from) : "");
+  const [toText, setToText] = React62.useState(value?.to ? format2(value.to) : "");
+  React62.useEffect(() => {
+    setFromText(value?.from ? format2(value.from) : "");
+    setToText(value?.to ? format2(value.to) : "");
+  }, [format2, value?.from, value?.to]);
+  const handleFromBlur = React62.useCallback(() => {
+    if (!fromText) {
+      const next = { from: void 0, to: value?.to };
+      onCommit(next);
+      onBlur?.(next);
+      return void 0;
+    }
+    const parsed = parse3(fromText);
+    if (parsed) {
+      const next = { from: parsed, to: value?.to };
+      onCommit(next);
+      onBlur?.(next);
+      return parsed;
+    }
+    setFromText(value?.from ? format2(value.from) : "");
+    return void 0;
+  }, [format2, fromText, onBlur, onCommit, parse3, value?.from, value?.to]);
+  const handleToBlur = React62.useCallback(() => {
+    if (!toText) {
+      const next = { from: value?.from, to: void 0 };
+      onCommit(next);
+      onBlur?.(next);
+      return;
+    }
+    const parsed = parse3(toText);
+    if (parsed) {
+      const next = { from: value?.from, to: parsed };
+      onCommit(next);
+      onBlur?.(next);
+      return;
+    }
+    setToText(value?.to ? format2(value.to) : "");
+  }, [format2, onBlur, onCommit, parse3, toText, value?.from, value?.to]);
+  return {
+    fromText,
+    toText,
+    setFromText,
+    setToText,
+    handleFromBlur,
+    handleToBlur
+  };
+}
+
+// src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
+var React63 = __toESM(require("react"), 1);
+function useRangeMonthSync(value) {
+  const isPreloadedRef = React63.useRef(false);
+  const [month, setMonth] = React63.useState(value?.from ?? /* @__PURE__ */ new Date());
+  React63.useEffect(() => {
+    if (value?.from && !isPreloadedRef.current) {
+      setMonth(value.from);
+      isPreloadedRef.current = true;
+    }
+  }, [value?.from]);
+  const syncMonthToValue = React63.useCallback((next) => {
+    isPreloadedRef.current = true;
+    if (next?.from) setMonth(next.from);
+  }, []);
+  const resetPreload = React63.useCallback(() => {
+    isPreloadedRef.current = false;
+  }, []);
+  return { month, setMonth, syncMonthToValue, resetPreload };
+}
+
+// src/dashboard/date-range-picker/utils/rangeSelection.ts
+var import_date_fns3 = require("date-fns");
+function resolveRangeSelection({
+  previous,
+  range,
+  pickedDate
+}) {
+  const startingNewRange = !previous?.from || previous.from && previous.to || range?.to && pickedDate && (0, import_date_fns3.isBefore)(pickedDate, range.to);
+  if (startingNewRange) {
+    return { next: { from: pickedDate, to: void 0 }, shouldClose: false };
+  }
+  const next = range;
+  const shouldClose = Boolean(
+    next?.from && next?.to || pickedDate && range?.from && (0, import_date_fns3.isBefore)(range.from, pickedDate)
+  );
+  return { next, shouldClose };
+}
+
+// src/dashboard/date-range-picker/components/DateRangeInputs.tsx
+var import_lucide_react51 = require("lucide-react");
+var import_jsx_runtime164 = require("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";
+function DateRangeInputs({
+  fromId,
+  toId,
+  name,
+  labelId,
+  fromText,
+  toText,
+  fromPlaceholder = DEFAULT_PLACEHOLDER,
+  toPlaceholder = DEFAULT_PLACEHOLDER,
+  fromInputRef,
+  toInputRef,
+  isEmpty,
+  isFocused,
+  isBlocked,
+  isInvalid,
+  loading,
+  readOnly,
+  hideClearDates,
+  hideCalendarIcon,
+  isOpen,
+  focusedInput,
+  clearLabel,
+  openCalendarLabel,
+  onFromTextChange,
+  onToTextChange,
+  onFromFocus,
+  onToFocus,
+  onFromBlur,
+  onToBlur,
+  onRowClick,
+  onReset,
+  onToggleCalendar
+}) {
+  const inputClass = cn(
+    inputBaseClass,
+    isBlocked && "cursor-not-allowed",
+    loading && "cursor-progress"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
+    "div",
+    {
+      className: cn(
+        "relative box-border flex h-12 w-full items-center rounded-[6px] pr-2 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors duration-200",
+        isEmpty && !isFocused && "bg-[var(--chekin-color-surface-input-empty)]"
+      ),
+      onClick: onRowClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+          "input",
+          {
+            ref: fromInputRef,
+            id: fromId,
+            name: name ? `${name}-from` : void 0,
+            type: "text",
+            autoComplete: "off",
+            placeholder: fromPlaceholder,
+            value: fromText,
+            disabled: isBlocked,
+            readOnly,
+            "aria-invalid": isInvalid,
+            "aria-labelledby": labelId,
+            onChange: (event) => onFromTextChange(event.target.value),
+            onFocus: onFromFocus,
+            onBlur: onFromBlur,
+            className: cn(
+              inputClass,
+              "max-w-[110px] pl-[14px] pr-0",
+              isEmpty && !isFocused && "placeholder:invisible"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "shrink-0 px-2 text-[18px] leading-none text-[var(--chekin-color-gray-2)]",
+              isEmpty && !isFocused && "invisible"
+            ),
+            children: "\u2192"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+          "input",
+          {
+            ref: toInputRef,
+            id: toId,
+            name: name ? `${name}-to` : void 0,
+            type: "text",
+            autoComplete: "off",
+            placeholder: toPlaceholder,
+            value: toText,
+            disabled: isBlocked,
+            readOnly,
+            "aria-invalid": isInvalid,
+            "aria-labelledby": labelId,
+            onChange: (event) => onToTextChange(event.target.value),
+            onFocus: onToFocus,
+            onBlur: onToBlur,
+            className: cn(
+              inputClass,
+              "px-0",
+              isEmpty && !isFocused && "placeholder:invisible"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: isBlocked,
+              onClick: onReset,
+              className: iconButtonClass,
+              "aria-label": clearLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+            }
+          ),
+          !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+            "button",
+            {
+              type: "button",
+              disabled: isBlocked,
+              onClick: onToggleCalendar,
+              "aria-pressed": isOpen,
+              className: cn(
+                "flex h-6 w-6 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 outline-none disabled:cursor-not-allowed",
+                focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
+              ),
+              "aria-label": openCalendarLabel,
+              children: /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
+var import_lucide_react52 = require("lucide-react");
+var import_react_day_picker2 = require("react-day-picker");
+
+// src/dashboard/_calendar/dashboardCalendarClassNames.ts
+var dashboardCalendarClassNames = {
+  root: "relative",
+  months: "relative flex flex-col gap-6 sm:flex-row sm:gap-8",
+  month: "w-full",
+  month_caption: "relative z-0 mb-3 flex h-9 items-center justify-center text-[18px] font-normal capitalize text-[var(--chekin-color-brand-navy)]",
+  caption_label: "px-3 text-[18px] font-normal",
+  nav: "absolute left-0 right-0 top-[4px] z-10 flex justify-between px-[6px] pointer-events-none",
+  button_previous: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
+  button_next: "pointer-events-auto inline-flex h-[26px] w-[26px] items-center justify-center rounded-[2px] border border-[#9696b9] bg-transparent text-[var(--chekin-color-brand-blue)] outline-none transition-colors hover:bg-[#f0f8ff] disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent",
+  weekday: "size-9 p-0 text-[14px] font-normal text-[var(--chekin-color-brand-blue)]",
+  day_button: [
+    "relative mx-auto flex size-9 items-center justify-center whitespace-nowrap rounded-full p-0",
+    "text-[14px] font-light text-[var(--chekin-color-brand-navy)] outline-offset-2",
+    "focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--chekin-color-brand-blue)]/60",
+    "hover:bg-[#f0f8ff]",
+    "group-data-[selected]:bg-[var(--chekin-color-brand-blue)] group-data-[selected]:text-white",
+    "group-data-[disabled]:pointer-events-none group-data-[disabled]:text-[var(--chekin-color-gray-2)] group-data-[disabled]:line-through",
+    "group-data-[outside]:text-[var(--chekin-color-gray-2)]",
+    "group-data-[outside]:group-data-[selected]:text-white",
+    "group-[.range-middle]:rounded-none group-[.range-middle]:bg-transparent",
+    "group-data-[selected]:group-[.range-middle]:bg-[#edf7ff] group-data-[selected]:group-[.range-middle]:text-[var(--chekin-color-brand-navy)]"
+  ].join(" "),
+  day: "group size-9 p-0 text-center text-[14px]",
+  range_start: "range-start",
+  range_end: "range-end",
+  range_middle: "range-middle",
+  today: [
+    "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2",
+    "*:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full",
+    "*:after:bg-[var(--chekin-color-brand-blue)]",
+    "[&[data-selected]:not(.range-middle)>*]:after:bg-white"
+  ].join(" "),
+  outside: "text-[var(--chekin-color-gray-2)]",
+  hidden: "invisible"
+};
+
+// src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var calendarComponents = {
+  Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react52.ArrowLeft, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react52.ArrowRight, { size: 14, strokeWidth: 2, "aria-hidden": "true" })
+};
+function DateRangeCalendar({
+  value,
+  month,
+  onMonthChange,
+  onSelect,
+  numberOfMonths,
+  minDate,
+  maxDate,
+  maxDays,
+  minDays,
+  autoFocus,
+  disabledMatchers,
+  components: customComponents,
+  ...dayPickerProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    import_react_day_picker2.DayPicker,
+    {
+      mode: "range",
+      selected: value,
+      month,
+      onMonthChange,
+      onSelect,
+      numberOfMonths,
+      showOutsideDays: true,
+      startMonth: minDate,
+      endMonth: maxDate,
+      max: maxDays,
+      min: minDays,
+      autoFocus,
+      classNames: dashboardCalendarClassNames,
+      components: { ...calendarComponents, ...customComponents },
+      className: "p-5",
+      disabled: disabledMatchers,
+      ...dayPickerProps
+    }
+  );
+}
+
+// src/dashboard/date-range-picker/components/DateRangePopover.tsx
+var import_jsx_runtime166 = require("react/jsx-runtime");
+function DateRangePopover({
+  isOpen,
+  isMobile: isMobile2,
+  openDirection,
+  drawerTitle,
+  drawerDescription,
+  onClose,
+  children
+}) {
+  if (!isOpen) return null;
+  if (isMobile2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+      Drawer,
+      {
+        open: isOpen,
+        onOpenChange: (next) => {
+          if (!next) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+          DrawerContent,
+          {
+            onClose,
+            lockScroll: false,
+            className: "max-h-[calc(100vh-1rem)]",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
+              /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    "div",
+    {
+      className: cn(
+        "absolute left-0 z-30 w-max overflow-hidden rounded-[3px] border border-[var(--chekin-color-brand-blue)] bg-white shadow-[0_5px_5px_0_rgba(33,72,255,0.1)]",
+        openDirection === "up" ? "bottom-full mb-2" : "top-full mt-1"
+      ),
+      children
+    }
+  );
+}
+
+// src/dashboard/date-range-picker/DateRangePicker.tsx
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var DashboardDateRangePicker = React64.forwardRef(function DashboardDateRangePicker2({
+  label,
+  value: externalValue,
+  defaultValue,
+  onChange,
+  onBlur,
+  name,
+  invalid,
+  error,
+  disabled,
+  readOnly,
+  loading,
+  optional,
+  tooltip,
+  className,
+  displayFormat = DEFAULT_DISPLAY_FORMAT,
+  fromPlaceholder,
+  toPlaceholder,
+  minDate,
+  maxDate,
+  minDays,
+  maxDays,
+  disabledDays,
+  hideClearDates,
+  hideCalendarIcon,
+  hideErrorMessage,
+  helperText,
+  width,
+  numberOfMonths,
+  openDirection = "down",
+  autoFocusOnOpen = true,
+  components: customComponents,
+  ...dayPickerProps
+}, ref) {
+  const containerRef = React64.useRef(null);
+  const fromInputRef = React64.useRef(null);
+  const toInputRef = React64.useRef(null);
+  const reactId = React64.useId();
+  const baseId = name ?? `dash-daterange-${reactId}`;
+  const fromId = `${baseId}-from`;
+  const toId = `${baseId}-to`;
+  const labelId = `${baseId}-label`;
+  const errorId = `${baseId}-error`;
+  const normalizedValue = React64.useMemo(() => {
+    if (externalValue === void 0) return void 0;
+    return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
+  }, [externalValue]);
+  const normalizedDefaultValue = React64.useMemo(() => {
+    if (defaultValue === void 0) return void 0;
+    return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
+  }, [defaultValue]);
+  const { value, commit } = useRangeValue({
+    value: normalizedValue,
+    defaultValue: normalizedDefaultValue,
+    onChange,
+    name
+  });
+  const normalizedMinDate = React64.useMemo(() => toDate(minDate), [minDate]);
+  const normalizedMaxDate = React64.useMemo(() => toDate(maxDate), [maxDate]);
+  const formatter = React64.useMemo(() => formatDate(displayFormat), [displayFormat]);
+  const parser = React64.useMemo(() => parseDate(displayFormat), [displayFormat]);
+  const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({ value, format: formatter, parse: parser, onCommit: commit, onBlur });
+  const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
+  const [isOpen, setIsOpen] = React64.useState(false);
+  const [focusedInput, setFocusedInput] = React64.useState(null);
+  const [autoFocus, setAutoFocus] = React64.useState(false);
+  const isMobile2 = useIsMobile();
+  const { t } = (0, import_react_i18next34.useTranslation)();
+  const drawerTitle = label ?? t("select_dates");
+  const drawerDescription = label ?? t("pick_date_range");
+  const isEmpty = !value?.from && !value?.to;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const isInvalid = Boolean(invalid || error);
+  const isFocused = focusedInput !== null || isOpen;
+  const wrapperWidth = toCssSize(width);
+  const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
+  const closeCalendar = React64.useCallback(() => {
+    setIsOpen(false);
+    setFocusedInput(null);
+    setAutoFocus(false);
+    if (value?.from) setMonth(value.from);
+  }, [setMonth, value?.from]);
+  const openCalendar = React64.useCallback(() => {
+    if (isBlocked || readOnly) return;
+    setIsOpen(true);
+  }, [isBlocked, readOnly]);
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: closeCalendar,
+    isDisabled: !isOpen || isMobile2
+  });
+  const handlePickerChange = React64.useCallback(
+    (range, pickedDate) => {
+      const { next, shouldClose } = resolveRangeSelection({
+        previous: value,
+        range,
+        pickedDate
+      });
+      syncMonthToValue(next);
+      commit(next);
+      if (shouldClose) closeCalendar();
+    },
+    [closeCalendar, commit, syncMonthToValue, value]
+  );
+  const handleReset = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    commit(void 0);
+    setFromText("");
+    setToText("");
+    setMonth(/* @__PURE__ */ new Date());
+  };
+  const disabledMatchers = React64.useMemo(
+    () => createDisabledMatchers({
+      minDate: normalizedMinDate,
+      maxDate: normalizedMaxDate,
+      maxDays,
+      minDays,
+      datesRange: value,
+      disabledDays
+    }),
+    [disabledDays, maxDays, minDays, normalizedMaxDate, normalizedMinDate, value]
+  );
+  const toggleCalendar = () => {
+    if (isOpen) {
+      closeCalendar();
+      return;
+    }
+    openCalendar();
+    if (autoFocusOnOpen) setAutoFocus(true);
+  };
+  React64.useImperativeHandle(
+    ref,
+    () => ({
+      setDateRange: (range) => {
+        syncMonthToValue(range);
+        commit(range);
+        setFromText(range?.from ? formatter(range.from) : "");
+        setToText(range?.to ? formatter(range.to) : "");
+      },
+      focus: () => fromInputRef.current?.focus(),
+      open: openCalendar,
+      close: closeCalendar
+    }),
+    [closeCalendar, commit, formatter, openCalendar, setFromText, setToText, syncMonthToValue]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative w-full max-w-[var(--max-field-width)]",
+        disabled && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress",
+        className
+      ),
+      style: wrapperWidth ? { width: wrapperWidth } : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+            DateRangeInputs,
+            {
+              fromId,
+              toId,
+              name,
+              labelId,
+              fromText,
+              toText,
+              fromPlaceholder,
+              toPlaceholder,
+              fromInputRef,
+              toInputRef,
+              isEmpty,
+              isFocused,
+              isBlocked,
+              isInvalid,
+              loading,
+              readOnly,
+              hideClearDates,
+              hideCalendarIcon,
+              isOpen,
+              focusedInput,
+              clearLabel: t("clear_dates"),
+              openCalendarLabel: t("open_calendar"),
+              onFromTextChange: setFromText,
+              onToTextChange: setToText,
+              onFromFocus: () => {
+                setFocusedInput("from");
+                if (!readOnly && !isBlocked) setIsOpen(true);
+              },
+              onToFocus: () => {
+                setFocusedInput("to");
+                if (!readOnly && !isBlocked) setIsOpen(true);
+              },
+              onFromBlur: () => {
+                setFocusedInput((prev) => prev === "from" ? null : prev);
+                handleFromBlur();
+              },
+              onToBlur: () => {
+                setFocusedInput((prev) => prev === "to" ? null : prev);
+                handleToBlur();
+              },
+              onRowClick: () => {
+                if (isBlocked || readOnly) return;
+                if (!focusedInput) fromInputRef.current?.focus();
+              },
+              onReset: handleReset,
+              onToggleCalendar: toggleCalendar
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+            Fieldset,
+            {
+              isFocused,
+              invalid: isInvalid,
+              isEmpty,
+              isActivated: !isEmpty || isFocused,
+              disabled,
+              loading,
+              readOnly,
+              htmlFor: fromId,
+              labelId,
+              legend: label,
+              label,
+              tooltip
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+            DateRangePopover,
+            {
+              isOpen: isOpen && !isMobile2,
+              isMobile: false,
+              openDirection,
+              drawerTitle,
+              drawerDescription,
+              onClose: closeCalendar,
+              children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+                DateRangeCalendar,
+                {
+                  value,
+                  month,
+                  onMonthChange: setMonth,
+                  onSelect: handlePickerChange,
+                  numberOfMonths: monthsToShow,
+                  minDate: normalizedMinDate,
+                  maxDate: normalizedMaxDate,
+                  maxDays,
+                  minDays,
+                  autoFocus,
+                  disabledMatchers,
+                  components: customComponents,
+                  ...dayPickerProps
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+          DateRangePopover,
+          {
+            isOpen: isOpen && isMobile2,
+            isMobile: true,
+            openDirection,
+            drawerTitle,
+            drawerDescription,
+            onClose: closeCalendar,
+            children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+              DateRangeCalendar,
+              {
+                value,
+                month,
+                onMonthChange: setMonth,
+                onSelect: handlePickerChange,
+                numberOfMonths: monthsToShow,
+                minDate: normalizedMinDate,
+                maxDate: normalizedMaxDate,
+                maxDays,
+                minDays,
+                autoFocus,
+                disabledMatchers,
+                components: customComponents,
+                ...dayPickerProps
+              }
+            )
+          }
+        ),
+        !error && optional && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+        !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+          FieldErrorMessage,
+          {
+            id: errorId,
+            message: error,
+            className: "mt-[1px] text-[14px]"
+          }
+        )
+      ] })
+    }
+  );
+});
+
+// src/dashboard/date-range-picker/useValidateDates.ts
+var React65 = __toESM(require("react"), 1);
+var import_react_i18next35 = require("react-i18next");
+var import_date_fns4 = require("date-fns");
+var import_react_day_picker3 = require("react-day-picker");
+function isAfterMax(date, maxDate) {
+  return (0, import_date_fns4.isAfter)(resetTime(date), resetTime(maxDate));
+}
+function isBeforeMin(date, minDate) {
+  return (0, import_date_fns4.isBefore)(resetTime(date), resetTime(minDate));
+}
+function useValidateDates({
+  minDays,
+  maxDays,
+  minDate,
+  maxDate,
+  disabledDays,
+  onError,
+  onSuccess,
+  displayFormat
+}) {
+  const { t } = (0, import_react_i18next35.useTranslation)();
+  const handleError = useEvent(onError);
+  const handleSuccess = useEvent(onSuccess);
+  const errorFormatter = React65.useMemo(
+    () => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
+    [displayFormat]
+  );
+  const validateDates = React65.useCallback(
+    (dates) => {
+      const startDate = dates?.from;
+      const endDate = dates?.to;
+      if (!startDate || !endDate) return true;
+      if (disabledDays && ((0, import_react_day_picker3.dateMatchModifiers)(startDate, disabledDays, import_react_day_picker3.dateLib) || (0, import_react_day_picker3.dateMatchModifiers)(endDate, disabledDays, import_react_day_picker3.dateLib))) {
+        handleError(t("wrong_period_of_dates"));
+        return false;
+      }
+      if ((0, import_date_fns4.isAfter)(startDate, endDate)) {
+        handleError(t("wrong_period_of_dates"));
+        return false;
+      }
+      if (maxDays && (0, import_date_fns4.differenceInDays)(endDate, startDate) + 1 > maxDays) {
+        handleError(t("date_range_max_days_error", { count: maxDays }));
+        return false;
+      }
+      if (minDays && (0, import_date_fns4.differenceInDays)(endDate, startDate) < minDays) {
+        handleError(t("date_range_min_days_error", { count: minDays }));
+        return false;
+      }
+      const min = toDate(minDate);
+      const max = toDate(maxDate);
+      if (min && isBeforeMin(startDate, min)) {
+        handleError(t("past_dates", { minDate: errorFormatter(resetTime(min)) }));
+        return false;
+      }
+      if (max && (isAfterMax(startDate, max) || isAfterMax(endDate, max))) {
+        handleError(t("future_dates", { maxDate: errorFormatter(resetTime(max)) }));
+        return false;
+      }
+      handleSuccess();
+      return true;
+    },
+    [
+      disabledDays,
+      errorFormatter,
+      handleError,
+      handleSuccess,
+      maxDate,
+      maxDays,
+      minDate,
+      minDays,
+      t
+    ]
+  );
+  return { validateDates };
+}
+
+// src/dashboard/time-picker/TimePicker.tsx
+var React66 = __toESM(require("react"), 1);
+var import_date_fns5 = require("date-fns");
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var SHORT_TIME_FORMAT = "HH:mm";
+function parseTime(value) {
+  return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
+}
+function getRange(settings) {
+  const min = parseTime(settings.minTime);
+  const max = settings.maxTime === "00:00" && settings.addNextDay ? (0, import_date_fns5.addDays)(parseTime(settings.maxTime), 1) : parseTime(settings.maxTime);
+  return { min, max };
+}
+function buildOptions(settings) {
+  const intervalUnit = settings.intervalUnit ?? "M";
+  const interval = settings.interval ?? (intervalUnit === "H" ? 1 : 60);
+  const minTime = settings.minTime ?? "00:00";
+  const maxTime = settings.maxTime ?? (intervalUnit === "H" ? "23:00" : "23:00");
+  const addNextDay = settings.addNextDay !== false;
+  const { min, max } = getRange({ intervalUnit, interval, minTime, maxTime, addNextDay });
+  const options = [];
+  let current = new Date(min.getTime());
+  while (current.getTime() <= max.getTime()) {
+    const text = (0, import_date_fns5.format)(current, SHORT_TIME_FORMAT);
+    options.push({ value: text, label: text });
+    current = intervalUnit === "H" ? (0, import_date_fns5.addHours)(current, interval) : (0, import_date_fns5.addMinutes)(current, interval);
+  }
+  return options;
+}
+var FORMAT_SETTINGS = {
+  time: { intervalUnit: "M", interval: 30, minTime: "00:00", maxTime: "23:30" },
+  timeEach15Minutes: {
+    intervalUnit: "M",
+    interval: 15,
+    minTime: "00:00",
+    maxTime: "23:45"
+  },
+  timeEach30Minutes: {
+    intervalUnit: "M",
+    interval: 30,
+    minTime: "00:00",
+    maxTime: "23:30"
+  },
+  hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
+};
+var DashboardTimePicker = React66.forwardRef(
+  function DashboardTimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
+    const resolvedOptions = React66.useMemo(() => {
+      if (options) return options;
+      const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
+      return buildOptions(settings);
+    }, [formatName, options, timeSettings]);
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
+  }
+);
+
+// src/dashboard/file-input/FileInput.tsx
+var React67 = __toESM(require("react"), 1);
+var import_lucide_react53 = require("lucide-react");
+var import_react_i18next36 = require("react-i18next");
+var import_jsx_runtime169 = require("react/jsx-runtime");
+function defaultFileNameFromUrl(url) {
+  try {
+    const parsed = new URL(url);
+    const segments = parsed.pathname.split("/");
+    return decodeURIComponent(segments[segments.length - 1] ?? url);
+  } catch {
+    return url;
+  }
+}
+function defaultDownload(url) {
+  window.open(url, "_blank", "noopener,noreferrer");
+}
+var DashboardFileInput = React67.forwardRef(
+  function DashboardFileInput2({
+    label,
+    value,
+    onChange,
+    onDownload = defaultDownload,
+    name = "file",
+    placeholder,
+    accept,
+    multiple,
+    disabled,
+    readOnly,
+    loading,
+    invalid,
+    error,
+    optional,
+    tooltip,
+    helperText,
+    hideErrorMessage,
+    className,
+    width,
+    downloadLabel,
+    fileNameFromUrl = defaultFileNameFromUrl
+  }, ref) {
+    const internalRef = React67.useRef(null);
+    const inputRef = useCombinedRef(ref, internalRef);
+    const { t } = (0, import_react_i18next36.useTranslation)();
+    const resolvedLabel = label ?? t("upload_file");
+    const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
+    const reactId = React67.useId();
+    const inputId = `${name || "dash-file"}-${reactId}`;
+    const labelId = `${inputId}-label`;
+    const errorId = `${inputId}-error`;
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const isInvalid = Boolean(invalid || error);
+    const isEmpty = !value;
+    const wrapperWidth = toCssSize(width);
+    const isUrl = typeof value === "string" && value.length > 0;
+    const isFile = typeof File !== "undefined" && value instanceof File;
+    const hasFileChip = isUrl || isFile;
+    const handleFileChange = (event) => {
+      const file = event.target.files?.[0] ?? null;
+      onChange?.(file, event);
+    };
+    const handleClear = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (internalRef.current) internalRef.current.value = "";
+      onChange?.(null);
+    };
+    const handleDownload = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (isUrl) onDownload(value);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          "relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
+          (disabled || readOnly) && "cursor-not-allowed",
+          loading && "cursor-progress",
+          disabled && "opacity-50",
+          className
+        ),
+        style: wrapperWidth ? { width: wrapperWidth } : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              name,
+              type: "file",
+              accept,
+              multiple,
+              disabled: isBlocked || readOnly,
+              onChange: handleFileChange,
+              className: "absolute h-[0.1px] w-[0.1px] opacity-0",
+              "aria-labelledby": labelId,
+              "aria-invalid": isInvalid
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+                "div",
+                {
+                  className: cn(
+                    "relative box-border flex h-12 w-full items-center justify-between gap-2 rounded-[6px] px-4 text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
+                    isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
+                  ),
+                  children: [
+                    hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+                      "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__ */ (0, import_jsx_runtime169.jsxs)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: handleDownload,
+                              className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
+                                /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react53.Download, { size: 15 })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              disabled: isBlocked || readOnly,
+                              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__ */ (0, import_jsx_runtime169.jsx)(
+                                import_lucide_react53.SquareX,
+                                {
+                                  size: 15,
+                                  fill: "#9696b9",
+                                  color: "#f8f8f8",
+                                  strokeWidth: 1.8
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                      loading && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_lucide_react53.Paperclip, { size: 20 })
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+                Fieldset,
+                {
+                  isFocused: false,
+                  invalid: isInvalid,
+                  isEmpty,
+                  isActivated: !isEmpty,
+                  disabled,
+                  loading,
+                  readOnly,
+                  htmlFor: inputId,
+                  labelId,
+                  legend: resolvedLabel,
+                  label: resolvedLabel,
+                  tooltip
+                }
+              )
+            ] }),
+            !error && optional && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+            !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+            error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+              FieldErrorMessage,
+              {
+                id: errorId,
+                message: error,
+                className: "mt-[1px] text-[14px]"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+// src/dashboard/select-icons-box/SelectIconsBox.tsx
+var React68 = __toESM(require("react"), 1);
+var import_jsx_runtime170 = require("react/jsx-runtime");
+function DashboardSelectIconsBox({
+  children,
+  icons,
+  renderIcon,
+  onSelect,
+  columns = 4,
+  iconsColor = "#6B6B95",
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  position = "left",
+  className,
+  boxClassName
+}) {
+  const containerRef = React68.useRef(null);
+  const isControlled = controlledOpen !== void 0;
+  const [internalOpen, setInternalOpen] = React68.useState(defaultOpen);
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const handleToggle = (event) => {
+    if (event.target.closest("[data-icon-box-item]")) return;
+    setOpen(!isOpen);
+  };
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => setOpen(false),
+    isDisabled: !isOpen
+  });
+  const handlePick = (iconName) => {
+    onSelect(iconName);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      onClick: handleToggle,
+      className: cn("relative inline-block", className),
+      children: [
+        children,
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+          "div",
+          {
+            className: cn(
+              "absolute top-full z-30 mt-1 grid max-h-[192px] overflow-y-auto rounded-[6px] bg-white p-6 shadow-[0_15px_15px_0_rgba(33,72,255,0.2)]",
+              position === "left" && "left-0",
+              position === "right" && "right-0",
+              position === "center" && "left-1/2 -translate-x-1/2",
+              boxClassName
+            ),
+            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+            children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+              "button",
+              {
+                type: "button",
+                "data-icon-box-item": true,
+                onClick: () => handlePick(iconName),
+                className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
+                "aria-label": iconName,
+                children: renderIcon(iconName, iconsColor)
+              },
+              iconName
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/searchable-select/SearchableSelect.tsx
+var React69 = __toESM(require("react"), 1);
+var import_lucide_react54 = require("lucide-react");
+var import_react_virtual3 = require("@tanstack/react-virtual");
+var import_react82 = require("react");
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var ROW_HEIGHT = 48;
+var DESKTOP_LIST_HEIGHT = 280;
+var MOBILE_LIST_HEIGHT = 420;
+var LOAD_MORE_THRESHOLD = 6;
+function defaultFilter(option, searchValue) {
+  return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
+}
+var SearchableSelectInternal = ({
+  options,
+  value,
+  onChange,
+  onBlur,
+  onOpenChange,
+  searchValue,
+  onSearchChange,
+  filterOption = defaultFilter,
+  loading,
+  hasNextPage,
+  onLoadMore,
+  variant = "default",
+  label,
+  topLabel,
+  placeholder,
+  searchPlaceholder = "Search...",
+  mobileTitle,
+  getValueLabel,
+  disabled,
+  error,
+  invalid,
+  optional,
+  tooltip,
+  hideErrorMessage,
+  name,
+  className,
+  dropdownClassName,
+  menuClassName,
+  noOptionsMessage,
+  loadingMessage
+}, ref) => {
+  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
+  const reactId = React69.useId();
+  const [open, setOpen] = React69.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React69.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React69.useState(-1);
+  const containerRef = React69.useRef(null);
+  const triggerRef = React69.useRef(null);
+  const inputRef = React69.useRef(null);
+  const listboxId = `${reactId}-listbox`;
+  const labelId = `${reactId}-label`;
+  const valueId = `${reactId}-value`;
+  const helperTextId = `${reactId}-helper`;
+  const errorId = `${reactId}-error`;
+  const searchInputId = `${reactId}-search`;
+  const effectiveSearchValue = searchValue ?? internalSearchValue;
+  const shouldFilterLocally = !onSearchChange && filterOption !== null;
+  const visibleOptions = React69.useMemo(() => {
+    if (!shouldFilterLocally || !effectiveSearchValue) {
+      return options;
+    }
+    return options.filter((option) => filterOption(option, effectiveSearchValue));
+  }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
+  const selectedIndex = React69.useMemo(
+    () => visibleOptions.findIndex((option) => option.value === value?.value),
+    [value?.value, visibleOptions]
+  );
+  const helperText = placeholder ?? label;
+  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
+  const describedBy = error && !hideErrorMessage ? errorId : void 0;
+  const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => closeSelect(),
+    isDisabled: !open || isMobile2
+  });
+  const handleOnOpenChange = useEvent(onOpenChange);
+  const setSelectOpen = (0, import_react82.useCallback)(
+    (nextOpen, options2) => {
+      setOpen(nextOpen);
+      handleOnOpenChange?.(nextOpen);
+      if (!nextOpen && options2?.restoreFocus) {
+        triggerRef.current?.focus();
+      }
+    },
+    [handleOnOpenChange]
+  );
+  React69.useEffect(() => {
+    if (isBlocked) {
       setSelectOpen(false);
       return;
     }
@@ -15331,7 +17399,7 @@ var SearchableSelectInternal = ({
       window.cancelAnimationFrame(frameId);
     };
   }, [isBlocked, open, setSelectOpen]);
-  React59.useEffect(() => {
+  React69.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
       return;
@@ -15399,7 +17467,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -15426,10 +17494,10 @@ var SearchableSelectInternal = ({
       onOptionHover: setHighlightedIndex
     }
   );
-  React59.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  React69.useImperativeHandle(ref, () => triggerRef.current, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -15464,8 +17532,8 @@ var SearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
-          import_lucide_react50.ChevronDown,
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+          import_lucide_react54.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -15475,7 +17543,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       Drawer,
       {
         open,
@@ -15487,13 +17555,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       "div",
       {
         className: cn(
@@ -15505,7 +17573,7 @@ var SearchableSelectInternal = ({
     ) : null
   ] });
 };
-var SearchableSelect = React59.forwardRef(
+var SearchableSelect = React69.forwardRef(
   SearchableSelectInternal
 );
 function SearchableSelectContent({
@@ -15532,9 +17600,9 @@ function SearchableSelectContent({
   onOptionClick,
   onOptionHover
 }) {
-  const listRef = React59.useRef(null);
-  const lastLoadMoreOptionsLengthRef = React59.useRef(null);
-  const previousHighlightedIndexRef = React59.useRef(highlightedIndex);
+  const listRef = React69.useRef(null);
+  const lastLoadMoreOptionsLengthRef = React69.useRef(null);
+  const previousHighlightedIndexRef = React69.useRef(highlightedIndex);
   const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
   const virtualizer = (0, import_react_virtual3.useVirtualizer)({
     count: rowCount,
@@ -15545,7 +17613,7 @@ function SearchableSelectContent({
   const virtualItems = virtualizer.getVirtualItems();
   const emptyMessage = noOptionsMessage?.() ?? "No matches found";
   const loadingText = loadingMessage?.() ?? "Loading...";
-  React59.useEffect(() => {
+  React69.useEffect(() => {
     const lastItem = virtualItems[virtualItems.length - 1];
     const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
     if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
@@ -15553,23 +17621,23 @@ function SearchableSelectContent({
       onLoadMore?.();
     }
   }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
-  React59.useEffect(() => {
+  React69.useEffect(() => {
     const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
-        import_lucide_react50.Search,
+  return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+        import_lucide_react54.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         "input",
         {
           id: inputId,
@@ -15588,7 +17656,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       "div",
       {
         id: listboxId,
@@ -15597,7 +17665,7 @@ function SearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -15605,7 +17673,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -15620,7 +17688,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -15642,7 +17710,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -15728,14 +17796,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 var import_i18next = __toESM(require("i18next"), 1);
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime172 = require("react/jsx-runtime");
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { children: builtMessage }),
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { children: builtMessage }),
     import_i18next.default.t("reach_us_at_email")
   ] });
 }
@@ -15796,12 +17864,19 @@ function toastResponseError(error, options = {}) {
   CopyLinkButton,
   CopyString,
   CustomCheckboxDropdownGroup,
+  DEFAULT_DISPLAY_FORMAT,
   DEVICE_BREAKPOINTS,
   DashboardCreatableMultiSelect,
+  DashboardDateRangePicker,
+  DashboardDatepicker,
+  DashboardFileInput,
   DashboardInfiniteScrollSelect,
   DashboardInput,
   DashboardMultiSelect,
   DashboardSelect,
+  DashboardSelectIconsBox,
+  DashboardTextarea,
+  DashboardTimePicker,
   DataTable,
   DatePicker,
   DateTableFilter,
@@ -16037,13 +18112,17 @@ function toastResponseError(error, options = {}) {
   calendarClassNames,
   cn,
   copyToClipboard,
+  createDisabledMatchers,
   emptyMediaVariants,
+  formatDate,
   getErrorMessage,
   getScrollableAreaState,
   getSidebarState,
   inputVariants,
+  isDayBlocked,
   isNumeric,
   labelVariants,
+  parseDate,
   registerUiKitI18n,
   scrollToTop,
   sectionTagVariants,
@@ -16094,6 +18173,7 @@ function toastResponseError(error, options = {}) {
   useTimeout,
   useTimeoutRef,
   useTimer,
-  useUpdateToast
+  useUpdateToast,
+  useValidateDates
 });
 //# sourceMappingURL=index.cjs.map