@itilite/lumina-ui 1.0.2-alpha → 1.0.3-alpha

package/dist/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.js

@@ -63,14 +63,14 @@ __export(AdvancedDateRangePicker_exports, {
   default: () => AdvancedDateRangePicker_default
 });
 module.exports = __toCommonJS(AdvancedDateRangePicker_exports);
-var import_react2 = require("react");
-var import_clsx = __toESM(require("clsx"));
+var import_react4 = require("react");
+var import_clsx3 = __toESM(require("clsx"));
 var import_dayjs2 = __toESM(require("dayjs"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat.js"));
 var import_isSameOrBefore = __toESM(require("dayjs/plugin/isSameOrBefore.js"));
 
 // src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.module.scss
-var AdvancedDateRangePicker_module_default = { "root": "AdvancedDateRangePicker-module__root___udir8", "inner": "AdvancedDateRangePicker-module__inner___P4OHa", "left": "AdvancedDateRangePicker-module__left___T6E84", "sidebarItem": "AdvancedDateRangePicker-module__sidebarItem___-NXPm", "sidebarItemActive": "AdvancedDateRangePicker-module__sidebarItemActive___5GmBY", "main": "AdvancedDateRangePicker-module__main___G4MU9", "header": "AdvancedDateRangePicker-module__header___mxXEE", "headerGroup": "AdvancedDateRangePicker-module__headerGroup___J7mJB", "headerLabel": "AdvancedDateRangePicker-module__headerLabel___Yvhkr", "timezoneWrapper": "AdvancedDateRangePicker-module__timezoneWrapper___886Qm", "dateTimeWrapper": "AdvancedDateRangePicker-module__dateTimeWrapper___unDQJ", "headerSeparator": "AdvancedDateRangePicker-module__headerSeparator___Vwx6P", "timezoneSelect": "AdvancedDateRangePicker-module__timezoneSelect___f4oln", "dateTimeColumn": "AdvancedDateRangePicker-module__dateTimeColumn___tdDV3", "dateTimeGroup": "AdvancedDateRangePicker-module__dateTimeGroup___azF09", "dateInput": "AdvancedDateRangePicker-module__dateInput___0t9ww", "inputError": "AdvancedDateRangePicker-module__inputError___A5hid", "timeInput": "AdvancedDateRangePicker-module__timeInput___Jalr9", "errorMessage": "AdvancedDateRangePicker-module__errorMessage___gx7ag", "body": "AdvancedDateRangePicker-module__body___f8XYj", "footer": "AdvancedDateRangePicker-module__footer___rsJ2w", "doneBtn": "AdvancedDateRangePicker-module__doneBtn___mt-Sv" };
+var AdvancedDateRangePicker_module_default = { "root": "AdvancedDateRangePicker-module__root___udir8", "inner": "AdvancedDateRangePicker-module__inner___P4OHa", "left": "AdvancedDateRangePicker-module__left___T6E84", "sidebarItem": "AdvancedDateRangePicker-module__sidebarItem___-NXPm", "sidebarItemActive": "AdvancedDateRangePicker-module__sidebarItemActive___5GmBY", "main": "AdvancedDateRangePicker-module__main___G4MU9", "header": "AdvancedDateRangePicker-module__header___mxXEE", "timezoneWrapper": "AdvancedDateRangePicker-module__timezoneWrapper___886Qm", "dateTimeWrapper": "AdvancedDateRangePicker-module__dateTimeWrapper___unDQJ", "headerGroup": "AdvancedDateRangePicker-module__headerGroup___J7mJB", "headerLabel": "AdvancedDateRangePicker-module__headerLabel___Yvhkr", "headerSeparator": "AdvancedDateRangePicker-module__headerSeparator___Vwx6P", "timezoneSelect": "AdvancedDateRangePicker-module__timezoneSelect___f4oln", "timezoneSelectContainer": "AdvancedDateRangePicker-module__timezoneSelectContainer___8SMc4", "timezoneSelectInput": "AdvancedDateRangePicker-module__timezoneSelectInput___ol0-7", "timezoneDisabledBadge": "AdvancedDateRangePicker-module__timezoneDisabledBadge___VBxOd", "inputWrapper": "AdvancedDateRangePicker-module__inputWrapper___bFFNF", "dateTimeColumn": "AdvancedDateRangePicker-module__dateTimeColumn___tdDV3", "dateTimeGroup": "AdvancedDateRangePicker-module__dateTimeGroup___azF09", "dateInput": "AdvancedDateRangePicker-module__dateInput___0t9ww", "inputError": "AdvancedDateRangePicker-module__inputError___A5hid", "timeInput": "AdvancedDateRangePicker-module__timeInput___Jalr9", "errorMessage": "AdvancedDateRangePicker-module__errorMessage___gx7ag", "body": "AdvancedDateRangePicker-module__body___f8XYj", "footer": "AdvancedDateRangePicker-module__footer___rsJ2w", "doneBtn": "AdvancedDateRangePicker-module__doneBtn___mt-Sv" };
 
 // src/atom/AdvancedDateRangePicker/InternalCalendar.tsx
 var import_react = require("react");
@@ -316,14 +316,14 @@ var InternalCalendar = ({
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-py-2 tw-text-center tw-typography-caption2 tw-text-gray-500", children: day }, day)) }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
-        if (!date) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-h-10" }, index);
+        if (!date) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-h-7" }, index);
         const isStart = isSameDate(date, startDate);
         const isEnd = isSameDate(date, endDate);
         const isInRange = isDateBetweenRange(date);
         const isSelected = isDateInRange(date);
         const isDisabled = isDateDisabled(date);
         const isHovering = isSelectingEnd && hoverDate && isSameDate(date, hoverDate);
-        let cellClasses = "tw-relative tw-z-20 tw-h-10 tw-w-10 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
+        let cellClasses = "tw-relative tw-z-20 tw-h-7 tw-w-7 tw-flex tw-items-center tw-justify-center tw-typography-caption1Bold tw-cursor-pointer tw-transition-all ";
         if (isDisabled) {
           cellClasses += "tw-text-gray-300 tw-cursor-not-allowed ";
         } else if (isStart || isEnd) {
@@ -337,9 +337,9 @@ var InternalCalendar = ({
           cellClasses += "tw-border-2 tw-border-gray-400 tw-border-dashed ";
         }
         return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tw-relative tw-flex tw-justify-center", children: [
-          isInRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#f2efec] tw-z-10" }),
-          isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#f2efec] tw-z-10" }),
-          isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#f2efec] tw-z-10" }),
+          isInRange && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-inset-x-0 tw-bg-[#E5E9ED] tw-z-10" }),
+          isStart && endDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-right-0 tw-left-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
+          isEnd && startDate && !isSameDate(startDate, endDate) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "tw-absolute tw-inset-y-1 tw-left-0 tw-right-1/2 tw-bg-[#E5E9ED] tw-z-10" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "div",
             {
@@ -380,8 +380,819 @@ var InternalCalendar = ({
 };
 var InternalCalendar_default = (0, import_react.memo)(InternalCalendar);
 
-// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
+// src/atom/Button/Button.tsx
+var import_antd = require("antd");
+var import_clsx = __toESM(require("clsx"));
+
+// src/atom/Button/Button.module.scss
+var Button_module_default = { "button": "Button-module__button___cLCyl", "size_large": "Button-module__size_large___S-mbU", "shape_circle": "Button-module__shape_circle___sPUS5", "size_normal": "Button-module__size_normal___qJUMj", "size_small": "Button-module__size_small___IUeei", "type_primary": "Button-module__type_primary___Tauz-", "variant_subtle": "Button-module__variant_subtle___BMbbd", "variant_text": "Button-module__variant_text___Pc5Ia", "variant_link": "Button-module__variant_link___Cj1O9", "disabled": "Button-module__disabled___nwPn4", "type_secondary": "Button-module__type_secondary___CLmrA", "type_critical": "Button-module__type_critical___6ILOp", "onHoverUnderline": "Button-module__onHoverUnderline___LOfXo" };
+
+// src/atom/Button/Button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function Button(props) {
+  const {
+    type = "primary",
+    variant = "default",
+    size = "normal",
+    shape = "default",
+    className = "",
+    icon = null,
+    children,
+    onClick,
+    href = "",
+    disabled = false,
+    loading = false,
+    onHoverUnderline = false
+  } = props;
+  const buttonMap = {
+    default: "primary",
+    subtle: "default",
+    text: "text",
+    link: "link"
+  };
+  const sizeMap = {
+    small: "small",
+    normal: "middle",
+    // Map "default" to "middle"
+    large: "large"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_antd.Button,
+    {
+      className: (0, import_clsx.default)(
+        Button_module_default.button,
+        Button_module_default[`size_${size}`],
+        Button_module_default[`variant_${variant}`],
+        Button_module_default[`shape_${shape}`],
+        Button_module_default[`type_${type}`],
+        `size_${size}`,
+        `variant_${variant}`,
+        `shape_${shape}`,
+        `type_${type}`,
+        className,
+        {
+          "tw-cursor-not-allowed": disabled,
+          "tw-opacity-40": disabled
+        },
+        disabled && Button_module_default.disabled,
+        onHoverUnderline && Button_module_default.onHoverUnderline
+      ),
+      "data-testid": "lumina-button",
+      disabled,
+      href: href || void 0,
+      icon,
+      loading,
+      onClick,
+      shape,
+      size: sizeMap[size],
+      type: buttonMap[variant],
+      children
+    }
+  );
+}
+Button.displayName = "Button";
+var Button_default = Button;
+
+// src/atom/Select/Select.tsx
+var import_react3 = require("react");
+var import_clsx2 = __toESM(require("clsx"));
+
+// src/icons/Chevron.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Chevron2 = React2.memo(
+  (_a) => {
+    var _b = _a, { size = 16, color = "#6b7280", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        className
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            fill: color,
+            d: "M11.78 6.22a.75.75 0 00-1.06 0L8 8.94 5.28 6.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"
+          }
+        )
+      })
+    );
+  }
+);
+Chevron2.displayName = "Chevron";
+
+// src/icons/CrossV2.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CrossV2 = React3.memo(
+  (_a) => {
+    var _b = _a, { size = 16, color = "#111827", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "svg",
+      __spreadProps(__spreadValues({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: size,
+        height: size,
+        fill: "none",
+        viewBox: "0 0 20 20"
+      }, rest), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            fill: color,
+            d: "M4.411 4.41a.833.833 0 0 1 1.179 0L10 8.822l4.411-4.41a.833.833 0 1 1 1.179 1.178L11.179 10l4.41 4.41a.833.833 0 0 1-1.178 1.18l-4.41-4.411-4.411 4.41a.833.833 0 1 1-1.179-1.178L8.821 10l-4.41-4.41a.833.833 0 0 1 0-1.18"
+          }
+        )
+      })
+    );
+  }
+);
+CrossV2.displayName = "CrossV2";
+
+// src/icons/Lock.tsx
+var import_react2 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Lock = import_react2.default.memo((_a) => {
+  var _b = _a, { size = 16, color = "#000" } = _b, rest = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "svg",
+    __spreadProps(__spreadValues({
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      fill: "none",
+      viewBox: "0 0 16 16"
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          fill: color,
+          d: "M9 9a1 1 0 11-2 0 1 1 0 012 0zM5 4h-.5A2.5 2.5 0 002 6.5v5A2.5 2.5 0 004.5 14h7a2.5 2.5 0 002.5-2.5v-5A2.5 2.5 0 0011.5 4H11v-.5a3 3 0 00-6 0V4zm1-.5a2 2 0 114 0V4H6v-.5zM11.5 5A1.5 1.5 0 0113 6.5v5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 013 11.5v-5A1.5 1.5 0 014.5 5h7z"
+        }
+      )
+    })
+  );
+});
+
+// src/atom/Tooltip/Tooltip.tsx
+var import_antd2 = require("antd");
+
+// src/atom/Tooltip/Tooltip.module.scss
+var Tooltip_module_default = { "light": "Tooltip-module__light___H5oCc" };
+
+// src/atom/Tooltip/Tooltip.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Tooltip = (_a) => {
+  var _b = _a, {
+    children,
+    title = "",
+    placement = "top",
+    color = "#1F2937",
+    className,
+    mode = "dark"
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "title",
+    "placement",
+    "color",
+    "className",
+    "mode"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_antd2.Tooltip,
+    __spreadProps(__spreadValues({
+      className,
+      color,
+      title,
+      placement,
+      overlayClassName: mode === "light" ? Tooltip_module_default.light : ""
+    }, rest), {
+      children
+    })
+  );
+};
+Tooltip.displayName = "Tooltip";
+var Tooltip_default = Tooltip;
+
+// src/atom/LoadingSpinner/LoadingSpinner.tsx
+var import_icons = require("@ant-design/icons");
+var import_antd3 = require("antd");
+
+// src/atom/LoadingSpinner/LoadingSpinner.module.scss
+var LoadingSpinner_module_default = { "spinnerContainer": "LoadingSpinner-module__spinnerContainer___DiPLf" };
+
+// src/atom/LoadingSpinner/LoadingSpinner.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var sizeMapping = {
+  xs: 16,
+  small: 24,
+  medium: 36,
+  large: 48
+};
+var LoadingSpinner = (_a) => {
+  var _b = _a, { size = "small", color = "#ec5d25" } = _b, rest = __objRest(_b, ["size", "color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", __spreadProps(__spreadValues({ className: LoadingSpinner_module_default.spinnerContainer }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_antd3.Spin,
+    {
+      indicator: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_icons.LoadingOutlined,
+        {
+          style: { fontSize: sizeMapping[size], color },
+          spin: true
+        }
+      )
+    }
+  ) }));
+};
+LoadingSpinner.displayName = "LoadingSpinner";
+var LoadingSpinner_default = LoadingSpinner;
+
+// src/atom/Select/Select.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var InputWrapper = (0, import_react3.memo)(({ children, disabled, disabledTooltip }) => {
+  if (disabled && disabledTooltip)
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tooltip_default, { title: disabledTooltip, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+});
+var OptionItem = (0, import_react3.memo)(({
+  option,
+  index,
+  isSelected,
+  isHighlighted,
+  experience,
+  size,
+  optionClassName,
+  onSelectHandler,
+  onMouseEnterHandler
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      onClick: () => onSelectHandler(option),
+      onMouseEnter: () => onMouseEnterHandler(index),
+      className: (0, import_clsx2.default)(
+        "tw-transition-all tw-duration-150",
+        { "tw-typography-body2": size !== "small" },
+        { "tw-typography-caption1": size === "small" },
+        optionClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "div",
+        {
+          className: (0, import_clsx2.default)(
+            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+          ),
+          children: option.label
+        }
+      )
+    }
+  );
+});
+var Select = ({
+  label,
+  mandatory = false,
+  error = false,
+  options = [],
+  valueSelected = "",
+  // Keep for backward compatibility
+  value: _valueProp,
+  // Rename to avoid potential conflicts with native value attribute
+  onChange,
+  onSearch,
+  isLoading = false,
+  disabled = false,
+  disabledTooltip = "",
+  className = "",
+  dropdownClassName = "",
+  optionClassName = "",
+  style = {},
+  showDisplayValue = false,
+  // New prop to show displayValue instead of label
+  allowClear = true,
+  enableSearch = true,
+  doubleCharSearch = false,
+  id,
+  name,
+  tabIndex,
+  // Add tabIndex prop
+  // Additional styling props
+  size = "default",
+  // 'small', 'default', 'large'
+  variant = "default",
+  // 'default', 'filled', 'outlined'
+  wrapperClassName = "",
+  inputClassName = "",
+  // Custom class for input element specifically
+  labelClassName = "",
+  // Custom class for label element specifically
+  height = "tw-h-12",
+  // Custom height
+  experience = "business"
+}) => {
+  const normalizeValue = (0, import_react3.useCallback)(
+    (val) => {
+      if (val === null || val === void 0) return "";
+      return String(val);
+    },
+    []
+  );
+  const validatedOptions = (0, import_react3.useMemo)(() => {
+    if (!Array.isArray(options)) return [];
+    return options.filter(
+      (opt) => opt && typeof opt === "object" && opt.value !== void 0 && opt.value !== null && opt.label !== void 0
+    );
+  }, [options]);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react3.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react3.useState)("");
+  const [isHovering, setIsHovering] = (0, import_react3.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react3.useState)(-1);
+  const [selectedValue, setSelectedValue] = (0, import_react3.useState)(() => {
+    const initialValue = valueSelected;
+    if (initialValue === null || initialValue === void 0) return "";
+    return String(initialValue);
+  });
+  const inputRef = (0, import_react3.useRef)(null);
+  const inputValueRef = (0, import_react3.useRef)("");
+  const dropdownRef = (0, import_react3.useRef)(null);
+  const optionRefs = (0, import_react3.useRef)([]);
+  const optionListRef = (0, import_react3.useRef)(null);
+  const blurTimeoutRef = (0, import_react3.useRef)(null);
+  const hoverTimeoutRef = (0, import_react3.useRef)(null);
+  const isActive = isFocused || Boolean(selectedValue) || Boolean(valueSelected) || Boolean(searchTerm);
+  const sizeClasses = (0, import_react3.useMemo)(() => {
+    switch (size) {
+      case "small":
+        return {
+          input: "tw-h-6 tw-typography-caption1Bold !tw-rounded-lg",
+          padding: "tw-px-2 tw-py-1",
+          labelActive: "tw-top-0.5 tw-typography-caption2",
+          labelInactive: "tw-top-1.5 tw-typography-caption3"
+        };
+      case "medium":
+        return {
+          input: "tw-h-10 tw-px-4 tw-typography-body2",
+          padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
+          labelActive: "tw-top-1 tw-typography-caption3",
+          labelInactive: "tw-top-2.5 tw-typography-body2"
+        };
+      case "large":
+        return {
+          input: "tw-h-16 tw-px-5 tw-typography-bodyLarge",
+          padding: label ? "tw-pt-8 tw-pb-4" : "tw-py-5",
+          labelActive: "tw-top-1 tw-typography-caption2",
+          labelInactive: "tw-top-5 tw-typography-body1"
+        };
+      default:
+        return {
+          input: height + " tw-px-4 tw-typography-bodyLarge",
+          padding: label ? "tw-pt-6 tw-pb-3" : "tw-py-3",
+          labelActive: "tw-top-1 tw-typography-caption3",
+          labelInactive: "tw-top-3.5 tw-typography-body2"
+        };
+    }
+  }, [size, label, height]);
+  const variantClasses = (0, import_react3.useMemo)(() => {
+    switch (variant) {
+      case "filled":
+        return "tw-bg-gray-50 tw-border-transparent";
+      case "outlined":
+        return "tw-bg-transparent tw-border-2";
+      default:
+        return " tw-border";
+    }
+  }, [variant]);
+  const handleBlur = (0, import_react3.useCallback)(() => {
+    blurTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+      setSearchTerm("");
+      setHighlightedIndex(-1);
+      blurTimeoutRef.current = null;
+      setIsFocused(false);
+    }, 150);
+  }, []);
+  const handleSearchChange = (0, import_react3.useCallback)(
+    (e) => {
+      var _a;
+      const searchValue = doubleCharSearch ? e.target.value.slice(0, 2) || "" : e.target.value;
+      if (doubleCharSearch) {
+        setSearchTerm(searchValue);
+      } else {
+        setSearchTerm(searchValue);
+      }
+      setIsOpen(true);
+      setHighlightedIndex(-1);
+      if (onSearch && typeof onSearch === "function") {
+        onSearch(searchValue);
+      }
+      (_a = optionListRef == null ? void 0 : optionListRef.current) == null ? void 0 : _a.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    },
+    [doubleCharSearch, onSearch]
+  );
+  const handleOptionSelect = (0, import_react3.useCallback)(
+    (option) => {
+      var _a;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      inputValueRef.current = option.label;
+      const normalizedValue = normalizeValue(option.value);
+      setSelectedValue(normalizedValue);
+      setSearchTerm("");
+      setIsOpen(false);
+      if (enableSearch) {
+        setIsFocused(false);
+      }
+      setIsHovering(false);
+      if (onChange) onChange(option.value);
+      if (enableSearch) (_a = inputRef.current) == null ? void 0 : _a.blur();
+    },
+    [normalizeValue, onChange, enableSearch]
+  );
+  const handleClear = (0, import_react3.useCallback)(
+    (e) => {
+      var _a;
+      inputValueRef.current = "";
+      e.stopPropagation();
+      e.preventDefault();
+      setSelectedValue("");
+      setSearchTerm("");
+      if (enableSearch) {
+        setIsOpen(true);
+        setIsFocused(true);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      } else {
+        setIsOpen(false);
+        setIsFocused(false);
+      }
+      if (onChange) onChange(null);
+    },
+    [onChange, enableSearch]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (!validatedOptions.length) {
+      setSelectedValue("");
+      setSearchTerm("");
+      inputValueRef.current = "";
+    }
+  }, [validatedOptions.length]);
+  (0, import_react3.useEffect)(() => {
+    const externalValue = _valueProp !== void 0 ? _valueProp : valueSelected;
+    const newValue = normalizeValue(externalValue);
+    setSelectedValue((prevValue) => {
+      const prevNormalized = normalizeValue(prevValue);
+      return prevNormalized !== newValue ? newValue : prevValue;
+    });
+  }, [valueSelected, _valueProp, normalizeValue]);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        if (blurTimeoutRef.current) {
+          clearTimeout(blurTimeoutRef.current);
+          blurTimeoutRef.current = null;
+        }
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  const getDisplayValue = (0, import_react3.useCallback)(() => {
+    if (selectedValue && (validatedOptions == null ? void 0 : validatedOptions.length) > 0) {
+      const selected = validatedOptions.find(
+        (opt) => normalizeValue(opt.value) === normalizeValue(selectedValue)
+      );
+      if (selected) {
+        return showDisplayValue && selected.displayValue ? selected.displayValue : selected.label;
+      }
+    }
+    if (selectedValue && (!validatedOptions || validatedOptions.length === 0)) {
+      return selectedValue;
+    }
+    return "";
+  }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
+  const displayValue = (0, import_react3.useMemo)(() => getDisplayValue(), [getDisplayValue]);
+  const inputClasses = (0, import_react3.useMemo)(() => {
+    return (0, import_clsx2.default)(
+      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+      sizeClasses.input,
+      sizeClasses.padding,
+      variantClasses,
+      {
+        "tw-bg-white": valueSelected || displayValue || isFocused,
+        "tw-bg-color-gray-5": !valueSelected || !displayValue,
+        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
+      },
+      !label && "tw-flex tw-items-center",
+      {
+        "!tw-border-color-primary": isFocused && experience === "business"
+      },
+      {
+        "!tw-border-[#804D7B]": isFocused && experience === "personal"
+      },
+      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+      "focus:tw-shadow-sm focus:tw-ring-offset-1",
+      className,
+      inputClassName
+    );
+  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
+  const filteredOptions = (0, import_react3.useMemo)(() => {
+    var _a;
+    if (!enableSearch) {
+      return validatedOptions;
+    }
+    (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(0, 0);
+    const updatedFilteredOptions = validatedOptions.filter((option) => {
+      var _a2;
+      return (_a2 = option == null ? void 0 : option.label) == null ? void 0 : _a2.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
+    });
+    return updatedFilteredOptions;
+  }, [validatedOptions, searchTerm, enableSearch]);
+  const getSelectedOptionIndex = (0, import_react3.useCallback)(() => {
+    if (!selectedValue || !filteredOptions.length) {
+      return 0;
+    }
+    const index = filteredOptions.findIndex(
+      (option) => normalizeValue(option.value) === normalizeValue(selectedValue)
+    );
+    return index >= 0 ? index : 0;
+  }, [selectedValue, filteredOptions, normalizeValue]);
+  const handleInputInteraction = (0, import_react3.useCallback)(
+    (_e) => {
+      var _a;
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+        return;
+      }
+      setIsFocused(true);
+      setIsOpen(true);
+      setHighlightedIndex(getSelectedOptionIndex());
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    },
+    [isOpen, getSelectedOptionIndex]
+  );
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      var _a;
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const nextIndex = prev < filteredOptions.length - 1 ? prev + 1 : prev;
+            return nextIndex;
+          });
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setHighlightedIndex((prev) => {
+            const nextIndex = prev > 0 ? prev - 1 : prev;
+            return nextIndex;
+          });
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+            handleOptionSelect(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          setIsFocused(false);
+          setSearchTerm("");
+          setHighlightedIndex(-1);
+          (_a = inputRef.current) == null ? void 0 : _a.blur();
+          break;
+        default:
+          break;
+      }
+    },
+    [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
+      optionRefs.current[highlightedIndex].scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [highlightedIndex]);
+  (0, import_react3.useEffect)(() => {
+    optionRefs.current = [];
+  }, [filteredOptions.length]);
+  const handleMouseEnter = (0, import_react3.useCallback)(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    if (!isHovering) {
+      setIsHovering(true);
+    }
+  }, [isHovering]);
+  const handleMouseLeave = (0, import_react3.useCallback)(() => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsHovering(false);
+    }, 50);
+  }, []);
+  const handleChevronClick = (0, import_react3.useCallback)(
+    (e) => {
+      var _a;
+      e.preventDefault();
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      if (isOpen) {
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        setHighlightedIndex(-1);
+        (_a = inputRef.current) == null ? void 0 : _a.blur();
+      } else {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+        handleInputInteraction();
+      }
+    },
+    [isOpen, handleInputInteraction]
+  );
+  const handleChevronMouseDown = (0, import_react3.useCallback)(
+    (e) => {
+      if (isHovering && selectedValue && allowClear) {
+        handleClear(e);
+      } else {
+        handleChevronClick(e);
+      }
+    },
+    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
+  );
+  const handleOptionClick = (0, import_react3.useCallback)((option) => {
+    handleOptionSelect(option);
+  }, [handleOptionSelect]);
+  const handleOptionMouseEnter = (0, import_react3.useCallback)((index) => {
+    setHighlightedIndex(index);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      style,
+      className: (0, import_clsx2.default)("tw-relative tw-w-full", wrapperClassName, {
+        "tw-cursor-not-allowed": disabled
+      }),
+      ref: dropdownRef,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "tw-relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              id,
+              name,
+              tabIndex,
+              autoComplete: "off",
+              autoCorrect: "off",
+              autoCapitalize: "off",
+              spellCheck: "false",
+              value: isFocused && enableSearch ? searchTerm : displayValue,
+              onChange: enableSearch ? handleSearchChange : void 0,
+              onClick: handleInputInteraction,
+              onKeyDown: handleKeyDown,
+              className: inputClasses,
+              readOnly: !isFocused || !enableSearch
+            }
+          ),
+          label && size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "label",
+            {
+              htmlFor: id,
+              className: (0, import_clsx2.default)(
+                "tw-absolute tw-left-[18px] tw-pointer-events-none tw-transition-all tw-duration-200 tw-ease-out tw-text-gray-500",
+                isActive ? sizeClasses.labelActive : sizeClasses.labelInactive,
+                error && "tw-text-color-text-critical",
+                labelClassName
+              ),
+              children: [
+                label,
+                mandatory && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+            "div",
+            {
+              className: (0, import_clsx2.default)(
+                "tw-absolute tw-right-3 tw--translate-y-1/2 tw-flex tw-items-center",
+                {
+                  "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear),
+                  "tw-top-3 !tw-right-2": size === "small",
+                  "tw-top-1/2": size !== "small"
+                }
+              ),
+              children: [
+                disabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Lock, { size: 16 }) }),
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx2.default)(
+                      "tw-transition-all tw-duration-200 tw-cursor-pointer tw-flex tw-items-center",
+                      // Only rotate chevron when open and not showing clear icon
+                      isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
+                    ),
+                    onMouseDown: handleChevronMouseDown,
+                    children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      CrossV2,
+                      {
+                        color: "#111827",
+                        className: (0, import_clsx2.default)({ "tw-mr-1": size !== "small" }),
+                        size: size === "small" ? 12 : 16
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      Chevron2,
+                      {
+                        className: (0, import_clsx2.default)("tw-text-gray-400"),
+                        color: "#6B7280"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "div",
+          {
+            className: (0, import_clsx2.default)(
+              "tw-absolute tw-z-[100] tw-w-full tw-mt-0 tw-bg-white tw-border tw-border-[#ebe3dd] tw-border-solid tw-rounded-xl tw-shadow-lg tw-overflow-y-auto tw-py-1",
+              { "tw-max-h-60": !doubleCharSearch },
+              { "tw-max-h-44": doubleCharSearch },
+              dropdownClassName
+            ),
+            ref: optionListRef,
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
+              const isHighlighted = index === highlightedIndex;
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                OptionItem,
+                {
+                  option,
+                  index,
+                  isSelected,
+                  isHighlighted,
+                  experience,
+                  size,
+                  optionClassName,
+                  onSelectHandler: handleOptionClick,
+                  onMouseEnterHandler: handleOptionMouseEnter
+                }
+              ) }, doubleCharSearch ? option.label : option.value);
+            }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+          }
+        )
+      ]
+    }
+  ) });
+};
+Select.displayName = "Select";
+var Select_default = Select;
+
+// src/atom/AdvancedDateRangePicker/AdvancedDateRangePicker.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 import_dayjs2.default.extend(import_customParseFormat.default);
 import_dayjs2.default.extend(import_isSameOrBefore.default);
 var DEFAULT_TIME = { hour: "12", minute: "00", period: "PM" };
@@ -517,7 +1328,7 @@ function parseTimeInput(raw) {
 function formatTime(t) {
   return `${t.hour}:${t.minute} ${t.period}`;
 }
-var DateTimeInputGroup = (0, import_react2.memo)(function DateTimeInputGroup2({
+var DateTimeInputGroup = (0, import_react4.memo)(function DateTimeInputGroup2({
   label,
   dateValue,
   timeValue,
@@ -526,27 +1337,30 @@ var DateTimeInputGroup = (0, import_react2.memo)(function DateTimeInputGroup2({
   onDateChange,
   onTimeChange
 }) {
-  const [isDateFocused, setIsDateFocused] = (0, import_react2.useState)(false);
-  const [isTimeFocused, setIsTimeFocused] = (0, import_react2.useState)(false);
+  const [isDateFocused, setIsDateFocused] = (0, import_react4.useState)(false);
+  const [isTimeFocused, setIsTimeFocused] = (0, import_react4.useState)(false);
   const showDateError = dateError && !isDateFocused;
-  const showTimeError = timeError && !isTimeFocused && !showDateError;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.headerGroup, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeColumn, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeGroup, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const showTimeError = timeError && !isTimeFocused;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.headerGroup, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: AdvancedDateRangePicker_module_default.dateTimeColumn, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeGroup, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "input",
           {
             type: "text",
-            placeholder: "DD-MM-YYYY",
+            placeholder: "dd-mm-yyyy",
             value: dateValue,
             onFocus: () => setIsDateFocused(true),
             onBlur: () => setIsDateFocused(false),
             onChange: (e) => onDateChange(e.target.value),
-            className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.dateInput, { [AdvancedDateRangePicker_module_default.inputError]: showDateError })
+            className: (0, import_clsx3.default)(AdvancedDateRangePicker_module_default.dateInput, { [AdvancedDateRangePicker_module_default.inputError]: showDateError })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        showDateError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid date" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.inputWrapper, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "input",
           {
             type: "text",
@@ -555,13 +1369,12 @@ var DateTimeInputGroup = (0, import_react2.memo)(function DateTimeInputGroup2({
             onFocus: () => setIsTimeFocused(true),
             onBlur: () => setIsTimeFocused(false),
             onChange: (e) => onTimeChange(e.target.value),
-            className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.timeInput, { [AdvancedDateRangePicker_module_default.inputError]: showTimeError })
+            className: (0, import_clsx3.default)(AdvancedDateRangePicker_module_default.timeInput, { [AdvancedDateRangePicker_module_default.inputError]: showTimeError })
           }
-        )
-      ] }),
-      showDateError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid date" }),
-      showTimeError && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid time" })
-    ] })
+        ),
+        showTimeError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: AdvancedDateRangePicker_module_default.errorMessage, children: "Enter valid time" })
+      ] })
+    ] }) })
   ] });
 });
 function AdvancedDateRangePicker({
@@ -577,30 +1390,31 @@ function AdvancedDateRangePicker({
   id = "adv-drp",
   defaultTimezone = "UTC",
   isTimezoneDisabled = false,
-  timezoneOptions = []
+  timezoneOptions = [],
+  defaultPreset = "custom"
 }) {
   var _a, _b, _c;
-  const PRESETS = (0, import_react2.useMemo)(() => getPresets(), []);
-  const [startDate, setStartDate] = (0, import_react2.useState)((_a = value == null ? void 0 : value.startDate) != null ? _a : null);
-  const [endDate, setEndDate] = (0, import_react2.useState)((_b = value == null ? void 0 : value.endDate) != null ? _b : null);
-  const [timezone, setTimezone] = (0, import_react2.useState)((_c = value == null ? void 0 : value.timezone) != null ? _c : defaultTimezone);
-  const [fromDateStr, setFromDateStr] = (0, import_react2.useState)(formatForDisplay(startDate));
-  const [toDateStr, setToDateStr] = (0, import_react2.useState)(formatForDisplay(endDate));
-  const [fromTimeStr, setFromTimeStr] = (0, import_react2.useState)(
+  const PRESETS = (0, import_react4.useMemo)(() => getPresets(), []);
+  const [startDate, setStartDate] = (0, import_react4.useState)((_a = value == null ? void 0 : value.startDate) != null ? _a : null);
+  const [endDate, setEndDate] = (0, import_react4.useState)((_b = value == null ? void 0 : value.endDate) != null ? _b : null);
+  const [timezone, setTimezone] = (0, import_react4.useState)((_c = value == null ? void 0 : value.timezone) != null ? _c : defaultTimezone);
+  const [fromDateStr, setFromDateStr] = (0, import_react4.useState)(formatForDisplay(startDate));
+  const [toDateStr, setToDateStr] = (0, import_react4.useState)(formatForDisplay(endDate));
+  const [fromTimeStr, setFromTimeStr] = (0, import_react4.useState)(
     (value == null ? void 0 : value.startTime) ? formatTime(value.startTime) : "12:00 PM"
   );
-  const [toTimeStr, setToTimeStr] = (0, import_react2.useState)(
+  const [toTimeStr, setToTimeStr] = (0, import_react4.useState)(
     (value == null ? void 0 : value.endTime) ? formatTime(value.endTime) : "12:00 PM"
   );
-  const [activePreset, setActivePreset] = (0, import_react2.useState)("custom");
-  const fromDateError = (0, import_react2.useMemo)(() => fromDateStr.length > 0 && (fromDateStr.length < 10 || !validateDateString(fromDateStr)), [fromDateStr]);
-  const toDateError = (0, import_react2.useMemo)(() => toDateStr.length > 0 && (toDateStr.length < 10 || !validateDateString(toDateStr)), [toDateStr]);
-  const fromTimeError = (0, import_react2.useMemo)(() => fromTimeStr.length > 0 && (fromTimeStr.length < 8 || !validateTimeString(fromTimeStr)), [fromTimeStr]);
-  const toTimeError = (0, import_react2.useMemo)(() => toTimeStr.length > 0 && (toTimeStr.length < 8 || !validateTimeString(toTimeStr)), [toTimeStr]);
-  const isReady = (0, import_react2.useMemo)(() => {
+  const [activePreset, setActivePreset] = (0, import_react4.useState)(defaultPreset);
+  const fromDateError = (0, import_react4.useMemo)(() => fromDateStr.length > 0 && (fromDateStr.length < 10 || !validateDateString(fromDateStr)), [fromDateStr]);
+  const toDateError = (0, import_react4.useMemo)(() => toDateStr.length > 0 && (toDateStr.length < 10 || !validateDateString(toDateStr)), [toDateStr]);
+  const fromTimeError = (0, import_react4.useMemo)(() => fromTimeStr.length > 0 && (fromTimeStr.length < 8 || !validateTimeString(fromTimeStr)), [fromTimeStr]);
+  const toTimeError = (0, import_react4.useMemo)(() => toTimeStr.length > 0 && (toTimeStr.length < 8 || !validateTimeString(toTimeStr)), [toTimeStr]);
+  const isReady = (0, import_react4.useMemo)(() => {
     return startDate !== null && endDate !== null && validateDateString(fromDateStr) && validateDateString(toDateStr) && validateTimeString(fromTimeStr) && validateTimeString(toTimeStr) && (0, import_dayjs2.default)(startDate).isSameOrBefore((0, import_dayjs2.default)(endDate), "day");
   }, [startDate, endDate, fromDateStr, toDateStr, fromTimeStr, toTimeStr]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     var _a2, _b2, _c2;
     if (value) {
       setStartDate((_a2 = value.startDate) != null ? _a2 : null);
@@ -610,17 +1424,17 @@ function AdvancedDateRangePicker({
       if (value.endTime) setToTimeStr(formatTime(value.endTime));
     }
   }, [value, defaultTimezone]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setFromDateStr(formatForDisplay(startDate));
   }, [startDate]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setToDateStr(formatForDisplay(endDate));
   }, [endDate]);
-  const rangeValue = (0, import_react2.useMemo)(() => [
+  const rangeValue = (0, import_react4.useMemo)(() => [
     startDate ? startDate.toISOString() : "",
     endDate ? endDate.toISOString() : ""
   ], [startDate, endDate]);
-  const handleRangeChange = (0, import_react2.useCallback)(
+  const handleRangeChange = (0, import_react4.useCallback)(
     (range) => {
       const [s, e] = range;
       if (s) {
@@ -639,7 +1453,7 @@ function AdvancedDateRangePicker({
     },
     []
   );
-  const handlePreset = (0, import_react2.useCallback)(
+  const handlePreset = (0, import_react4.useCallback)(
     (preset) => {
       const [s, e] = preset.getRange();
       setStartDate(s);
@@ -648,7 +1462,7 @@ function AdvancedDateRangePicker({
     },
     []
   );
-  const handleFromDateChange = (0, import_react2.useCallback)((v) => {
+  const handleFromDateChange = (0, import_react4.useCallback)((v) => {
     const masked = applyDateMask(v, fromDateStr);
     setFromDateStr(masked);
     setActivePreset("custom");
@@ -662,7 +1476,7 @@ function AdvancedDateRangePicker({
       }
     }
   }, [fromDateStr, endDate]);
-  const handleToDateChange = (0, import_react2.useCallback)((v) => {
+  const handleToDateChange = (0, import_react4.useCallback)((v) => {
     const masked = applyDateMask(v, toDateStr);
     setToDateStr(masked);
     setActivePreset("custom");
@@ -676,17 +1490,17 @@ function AdvancedDateRangePicker({
       }
     }
   }, [toDateStr, startDate]);
-  const handleFromTimeChange = (0, import_react2.useCallback)((v) => {
+  const handleFromTimeChange = (0, import_react4.useCallback)((v) => {
     const masked = applyTimeMask(v, fromTimeStr);
     setFromTimeStr(masked);
     setActivePreset("custom");
   }, [fromTimeStr]);
-  const handleToTimeChange = (0, import_react2.useCallback)((v) => {
+  const handleToTimeChange = (0, import_react4.useCallback)((v) => {
     const masked = applyTimeMask(v, toTimeStr);
     setToTimeStr(masked);
     setActivePreset("custom");
   }, [toTimeStr]);
-  const handleDone = (0, import_react2.useCallback)(() => {
+  const handleDone = (0, import_react4.useCallback)(() => {
     var _a2, _b2;
     if (!isReady) return;
     const fromTime = (_a2 = parseTimeInput(fromTimeStr)) != null ? _a2 : DEFAULT_TIME;
@@ -699,38 +1513,45 @@ function AdvancedDateRangePicker({
       timezone
     });
   }, [isReady, onChange, startDate, endDate, fromTimeStr, toTimeStr, timezone]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.root, className), id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.inner, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("aside", { className: AdvancedDateRangePicker_module_default.left, children: PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx3.default)(AdvancedDateRangePicker_module_default.root, className), id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.inner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("aside", { className: AdvancedDateRangePicker_module_default.left, children: PRESETS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
           onClick: () => handlePreset(p),
-          className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.sidebarItem, {
+          className: (0, import_clsx3.default)(AdvancedDateRangePicker_module_default.sidebarItem, {
             [AdvancedDateRangePicker_module_default.sidebarItemActive]: activePreset === p.key
           }),
           children: p.label
         },
         p.key
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.main, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: AdvancedDateRangePicker_module_default.header, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)(AdvancedDateRangePicker_module_default.headerGroup, AdvancedDateRangePicker_module_default.timezoneWrapper), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: "Timezone" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "select",
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.main, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("header", { className: AdvancedDateRangePicker_module_default.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.timezoneWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: AdvancedDateRangePicker_module_default.headerLabel, children: "Timezone" }),
+            isTimezoneDisabled ? (
+              /* Disabled state: plain text badge instead of empty dropdown */
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: AdvancedDateRangePicker_module_default.timezoneDisabledBadge, children: timezone })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              Select_default,
               {
                 value: timezone,
-                onChange: (e) => setTimezone(e.target.value),
-                className: AdvancedDateRangePicker_module_default.timezoneSelect,
-                disabled: isTimezoneDisabled,
-                children: timezoneOptions.map((tz) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: tz.value, children: tz.label }, tz.value))
+                onChange: (val) => {
+                  if (val) setTimezone(String(val));
+                },
+                options: timezoneOptions,
+                size: "small",
+                allowClear: false,
+                enableSearch: false,
+                wrapperClassName: AdvancedDateRangePicker_module_default.timezoneSelectContainer,
+                inputClassName: AdvancedDateRangePicker_module_default.timezoneSelectInput
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.headerSeparator }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: AdvancedDateRangePicker_module_default.dateTimeWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               DateTimeInputGroup,
               {
                 label: "From",
@@ -742,8 +1563,7 @@ function AdvancedDateRangePicker({
                 onTimeChange: handleFromTimeChange
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.headerSeparator }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               DateTimeInputGroup,
               {
                 label: "To",
@@ -757,7 +1577,7 @@ function AdvancedDateRangePicker({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: AdvancedDateRangePicker_module_default.body, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: AdvancedDateRangePicker_module_default.body, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           InternalCalendar_default,
           {
             id: `${id}-calendar`,
@@ -771,13 +1591,12 @@ function AdvancedDateRangePicker({
         ) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("footer", { className: AdvancedDateRangePicker_module_default.footer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: AdvancedDateRangePicker_module_default.footer, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Button_default,
       {
-        type: "button",
         onClick: handleDone,
         disabled: disabled || !isReady,
-        className: AdvancedDateRangePicker_module_default.doneBtn,
+        shape: "round",
         children: confirmLabel
       }
     ) })