@itilite/lumina-ui 1.1.5 → 1.1.7

package/dist/atom/RangePicker/RangePicker.js

@@ -63,7 +63,7 @@ __export(RangePicker_exports, {
   default: () => RangePicker_default
 });
 module.exports = __toCommonJS(RangePicker_exports);
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_clsx2 = __toESM(require("clsx"));
 var import_dayjs = __toESM(require("dayjs"));
 
@@ -115,7 +115,7 @@ var Chevron = React.memo(
 var RangePicker_module_default = { "range_start": "RangePicker-module__range_start___hGQp-", "range_end": "RangePicker-module__range_end___JJNib" };
 
 // src/atom/Select/Select.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_clsx = __toESM(require("clsx"));
 
 // src/icons/Chevron.tsx
@@ -160,16 +160,13 @@ var CrossV2 = React3.memo(
         width: size,
         height: size,
         fill: "none",
-        viewBox: "0 0 16 16",
-        className
+        viewBox: "0 0 20 20"
       }, rest), {
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "path",
           {
             fill: color,
-            fillRule: "evenodd",
-            d: "M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z",
-            clipRule: "evenodd"
+            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"
           }
         )
       })
@@ -178,8 +175,106 @@ var CrossV2 = React3.memo(
 );
 CrossV2.displayName = "CrossV2";
 
-// src/atom/Select/Select.tsx
+// src/icons/Lock.tsx
+var import_react = __toESM(require("react"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var Lock = import_react.default.memo((_a) => {
+  var _b = _a, { size = 16, color = "#000" } = _b, rest = __objRest(_b, ["size", "color"]);
+  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"
+    }, rest), {
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.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_antd = 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_runtime5 = 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_runtime5.jsx)(
+    import_antd.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_antd2 = 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_runtime6 = 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_runtime6.jsx)("div", __spreadProps(__spreadValues({ className: LoadingSpinner_module_default.spinnerContainer }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_antd2.Spin,
+    {
+      indicator: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime7 = require("react/jsx-runtime");
 var Select = ({
   label,
   mandatory = false,
@@ -190,6 +285,10 @@ var Select = ({
   value: _valueProp,
   // Rename to avoid potential conflicts with native value attribute
   onChange,
+  onSearch,
+  isLoading = false,
+  disabled = false,
+  disabledTooltip = "",
   className = "",
   dropdownClassName = "",
   optionClassName = "",
@@ -198,7 +297,6 @@ var Select = ({
   // New prop to show displayValue instead of label
   allowClear = true,
   enableSearch = true,
-  // New prop to control search functionality, default true
   doubleCharSearch = false,
   id,
   name,
@@ -218,45 +316,45 @@ var Select = ({
   // Custom height
   experience = "business"
 }) => {
-  const normalizeValue = (0, import_react.useCallback)(
+  const normalizeValue = (0, import_react2.useCallback)(
     (val) => {
       if (val === null || val === void 0) return "";
       return String(val);
     },
     []
   );
-  const validatedOptions = (0, import_react.useMemo)(() => {
+  const validatedOptions = (0, import_react2.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_react.useState)(false);
-  const [isFocused, setIsFocused] = (0, import_react.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react.useState)("");
-  const [isHovering, setIsHovering] = (0, import_react.useState)(false);
-  const [highlightedIndex, setHighlightedIndex] = (0, import_react.useState)(-1);
-  const [selectedValue, setSelectedValue] = (0, import_react.useState)(() => {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react2.useState)("");
+  const [isHovering, setIsHovering] = (0, import_react2.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react2.useState)(-1);
+  const [selectedValue, setSelectedValue] = (0, import_react2.useState)(() => {
     const initialValue = valueSelected;
     if (initialValue === null || initialValue === void 0) return "";
     return String(initialValue);
   });
-  const inputRef = (0, import_react.useRef)(null);
-  const inputValueRef = (0, import_react.useRef)("");
-  const dropdownRef = (0, import_react.useRef)(null);
-  const optionRefs = (0, import_react.useRef)([]);
-  const optionListRef = (0, import_react.useRef)(null);
-  const blurTimeoutRef = (0, import_react.useRef)(null);
-  const hoverTimeoutRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const inputValueRef = (0, import_react2.useRef)("");
+  const dropdownRef = (0, import_react2.useRef)(null);
+  const optionRefs = (0, import_react2.useRef)([]);
+  const optionListRef = (0, import_react2.useRef)(null);
+  const blurTimeoutRef = (0, import_react2.useRef)(null);
+  const hoverTimeoutRef = (0, import_react2.useRef)(null);
   const isActive = isFocused || Boolean(selectedValue) || Boolean(valueSelected) || Boolean(searchTerm);
-  const sizeClasses = (0, import_react.useMemo)(() => {
+  const sizeClasses = (0, import_react2.useMemo)(() => {
     switch (size) {
       case "small":
         return {
-          input: "tw-h-8 tw-px-3 tw-typography-body2",
-          padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
-          labelActive: "tw-top-0 tw-typography-caption4",
-          labelInactive: "tw-top-2 tw-typography-caption3"
+          input: "tw-h-6 tw-px-3 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 {
@@ -281,7 +379,7 @@ var Select = ({
         };
     }
   }, [size, label, height]);
-  const variantClasses = (0, import_react.useMemo)(() => {
+  const variantClasses = (0, import_react2.useMemo)(() => {
     switch (variant) {
       case "filled":
         return "tw-bg-gray-50 tw-border-transparent";
@@ -291,7 +389,7 @@ var Select = ({
         return " tw-border";
     }
   }, [variant]);
-  const handleBlur = (0, import_react.useCallback)(() => {
+  const handleBlur = (0, import_react2.useCallback)(() => {
     blurTimeoutRef.current = setTimeout(() => {
       setIsOpen(false);
       setSearchTerm("");
@@ -300,24 +398,28 @@ var Select = ({
       setIsFocused(false);
     }, 150);
   }, []);
-  const handleSearchChange = (0, import_react.useCallback)(
+  const handleSearchChange = (0, import_react2.useCallback)(
     (e) => {
       var _a;
+      const searchValue = doubleCharSearch ? e.target.value.slice(0, 2) || "" : e.target.value;
       if (doubleCharSearch) {
-        setSearchTerm(e.target.value.slice(0, 2) || "");
+        setSearchTerm(searchValue);
       } else {
-        setSearchTerm(e.target.value);
+        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]
+    [doubleCharSearch, onSearch]
   );
-  const handleOptionSelect = (0, import_react.useCallback)(
+  const handleOptionSelect = (0, import_react2.useCallback)(
     (option) => {
       var _a;
       if (blurTimeoutRef.current) {
@@ -338,7 +440,7 @@ var Select = ({
     },
     [normalizeValue, onChange, enableSearch]
   );
-  const handleClear = (0, import_react.useCallback)(
+  const handleClear = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       inputValueRef.current = "";
@@ -358,21 +460,22 @@ var Select = ({
     },
     [onChange, enableSearch]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!validatedOptions.length) {
       setSelectedValue("");
       setSearchTerm("");
       inputValueRef.current = "";
     }
   }, [validatedOptions.length]);
-  (0, import_react.useEffect)(() => {
-    const newValue = normalizeValue(valueSelected);
+  (0, import_react2.useEffect)(() => {
+    const externalValue = _valueProp !== void 0 ? _valueProp : valueSelected;
+    const newValue = normalizeValue(externalValue);
     setSelectedValue((prevValue) => {
       const prevNormalized = normalizeValue(prevValue);
       return prevNormalized !== newValue ? newValue : prevValue;
     });
-  }, [valueSelected, normalizeValue]);
-  (0, import_react.useEffect)(() => {
+  }, [valueSelected, _valueProp, normalizeValue]);
+  (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (blurTimeoutRef.current) {
@@ -396,7 +499,7 @@ var Select = ({
       }
     };
   }, []);
-  const getDisplayValue = (0, import_react.useCallback)(() => {
+  const getDisplayValue = (0, import_react2.useCallback)(() => {
     if (selectedValue && (validatedOptions == null ? void 0 : validatedOptions.length) > 0) {
       const selected = validatedOptions.find(
         (opt) => normalizeValue(opt.value) === normalizeValue(selectedValue)
@@ -410,7 +513,7 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
-  const filteredOptions = (0, import_react.useMemo)(() => {
+  const filteredOptions = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
       return validatedOptions;
@@ -422,7 +525,7 @@ var Select = ({
     });
     return updatedFilteredOptions;
   }, [validatedOptions, searchTerm, enableSearch]);
-  const getSelectedOptionIndex = (0, import_react.useCallback)(() => {
+  const getSelectedOptionIndex = (0, import_react2.useCallback)(() => {
     if (!selectedValue || !filteredOptions.length) {
       return 0;
     }
@@ -431,7 +534,7 @@ var Select = ({
     );
     return index >= 0 ? index : 0;
   }, [selectedValue, filteredOptions, normalizeValue]);
-  const handleInputInteraction = (0, import_react.useCallback)(
+  const handleInputInteraction = (0, import_react2.useCallback)(
     (_e) => {
       var _a;
       if (blurTimeoutRef.current) {
@@ -455,7 +558,7 @@ var Select = ({
     },
     [isOpen, getSelectedOptionIndex]
   );
-  const handleKeyDown = (0, import_react.useCallback)(
+  const handleKeyDown = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       if (!isOpen) return;
@@ -494,7 +597,7 @@ var Select = ({
     },
     [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
       optionRefs.current[highlightedIndex].scrollIntoView({
         block: "nearest",
@@ -502,10 +605,10 @@ var Select = ({
       });
     }
   }, [highlightedIndex]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
   }, [filteredOptions]);
-  const handleMouseEnter = (0, import_react.useCallback)(() => {
+  const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
     }
@@ -513,12 +616,12 @@ var Select = ({
       setIsHovering(true);
     }
   }, [isHovering]);
-  const handleMouseLeave = (0, import_react.useCallback)(() => {
+  const handleMouseLeave = (0, import_react2.useCallback)(() => {
     hoverTimeoutRef.current = setTimeout(() => {
       setIsHovering(false);
     }, 50);
   }, []);
-  const handleChevronClick = (0, import_react.useCallback)(
+  const handleChevronClick = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       e.preventDefault();
@@ -541,17 +644,24 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const InputWrapper = ({ children }) => {
+    if (disabled && disabledTooltip)
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tooltip_default, { title: disabledTooltip, children });
+    return children;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       style,
-      className: (0, import_clsx.default)("tw-relative tw-w-full", wrapperClassName),
+      className: (0, import_clsx.default)("tw-relative tw-w-full", wrapperClassName, {
+        "tw-cursor-not-allowed": disabled
+      }),
       ref: dropdownRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "tw-relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tw-relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "input",
             {
               ref: inputRef,
@@ -574,7 +684,8 @@ var Select = ({
                 variantClasses,
                 {
                   "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
-                  "tw-bg-color-gray-5": !valueSelected || !getDisplayValue()
+                  "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
+                  "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
                 },
                 // Conditional padding based on label presence
                 !label && "tw-flex tw-items-center",
@@ -594,7 +705,7 @@ var Select = ({
               readOnly: !isFocused || !enableSearch
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          label && size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "label",
             {
               htmlFor: id,
@@ -606,47 +717,59 @@ var Select = ({
               ),
               children: [
                 label,
-                mandatory && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
+                mandatory && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "div",
             {
               className: (0, import_clsx.default)(
-                "tw-absolute tw-right-3 tw-top-1/2 tw--translate-y-1/2 tw-flex tw-items-center",
+                "tw-absolute tw-right-3 tw--translate-y-1/2 tw-flex tw-items-center",
                 {
-                  "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear)
+                  "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear),
+                  "tw-top-3.5 !tw-right-2": size === "small",
+                  "tw-top-1/2": size !== "small"
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "div",
-                {
-                  className: (0, import_clsx.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: (e) => {
-                    if (isHovering && selectedValue && allowClear) {
-                      handleClear(e);
-                    } else {
-                      handleChevronClick(e);
-                    }
-                  },
-                  children: isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CrossV2, { color: "#111827", className: "tw-mr-1" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    Chevron2,
-                    {
-                      className: (0, import_clsx.default)("tw-text-gray-400"),
-                      color: "#6B7280"
-                    }
-                  )
-                }
-              )
+              children: [
+                disabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Lock, { size: 16 }) }),
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx.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: (e) => {
+                      if (isHovering && selectedValue && allowClear) {
+                        handleClear(e);
+                      } else {
+                        handleChevronClick(e);
+                      }
+                    },
+                    children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      CrossV2,
+                      {
+                        color: "#111827",
+                        className: (0, import_clsx.default)({ "tw-mr-1": size !== "small" }),
+                        size: size === "small" ? 12 : 16
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      Chevron2,
+                      {
+                        className: (0, import_clsx.default)("tw-text-gray-400"),
+                        color: "#6B7280"
+                      }
+                    )
+                  }
+                )
+              ]
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: (0, import_clsx.default)(
@@ -656,7 +779,7 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 ref: (el) => optionRefs.current[index] = el,
@@ -667,7 +790,7 @@ var Select = ({
                   // Selected option styling
                   optionClassName
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     className: (0, import_clsx.default)(
@@ -685,12 +808,12 @@ var Select = ({
                 )
               },
               doubleCharSearch ? option.label : option.value
-            )) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            )) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
           }
         )
       ]
     }
-  );
+  ) });
 };
 var arePropsEqual = (prevProps, nextProps) => {
   var _a, _b;
@@ -723,10 +846,10 @@ var arePropsEqual = (prevProps, nextProps) => {
   return true;
 };
 Select.displayName = "Select";
-var Select_default = (0, import_react.memo)(Select, arePropsEqual);
+var Select_default = (0, import_react2.memo)(Select, arePropsEqual);
 
 // src/atom/RangePicker/RangePicker.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CustomRangePicker(props) {
   var _a, _b;
   const {
@@ -753,8 +876,8 @@ function CustomRangePicker(props) {
     showToastError = () => {
     }
   } = props;
-  const onChangeRef = (0, import_react2.useRef)(onChange);
-  (0, import_react2.useEffect)(() => {
+  const onChangeRef = (0, import_react3.useRef)(onChange);
+  (0, import_react3.useEffect)(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
   const getInitialDate = () => {
@@ -785,18 +908,18 @@ function CustomRangePicker(props) {
     }
     return /* @__PURE__ */ new Date();
   };
-  const [currentDate, setCurrentDate] = (0, import_react2.useState)(() => getInitialDate());
-  const [startDate, setStartDate] = (0, import_react2.useState)(
+  const [currentDate, setCurrentDate] = (0, import_react3.useState)(() => getInitialDate());
+  const [startDate, setStartDate] = (0, import_react3.useState)(
     dateRange[0] ? new Date(dateRange[0]) : null
   );
-  const [endDate, setEndDate] = (0, import_react2.useState)(
+  const [endDate, setEndDate] = (0, import_react3.useState)(
     dateRange[0] && dateRange[1] ? new Date(dateRange[1]) : null
   );
-  const [hoverDate, setHoverDate] = (0, import_react2.useState)(null);
-  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react2.useState)(
+  const [hoverDate, setHoverDate] = (0, import_react3.useState)(null);
+  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react3.useState)(
     dateRange[0] && !dateRange[1] ? true : false
   );
-  const [selectedDate, setSelectedDate] = (0, import_react2.useState)(
+  const [selectedDate, setSelectedDate] = (0, import_react3.useState)(
     !isRange && dateRange[0] ? new Date(dateRange[0]) : null
   );
   const getDaysBetween = (start, end) => {
@@ -967,7 +1090,7 @@ function CustomRangePicker(props) {
       setHoverDate(null);
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isRange) {
       sessionStorage.removeItem("rangePickerStartDate");
       onChangeRef.current(null, [
@@ -982,7 +1105,7 @@ function CustomRangePicker(props) {
       );
     }
   }, [startDate, endDate, isRange]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isRange && selectedDate) {
       onChangeRef.current(null, (0, import_dayjs.default)(selectedDate).format("D MMM, YYYY"));
     }
@@ -1047,8 +1170,8 @@ function CustomRangePicker(props) {
   };
   const isSameDay = ((_a = (0, import_dayjs.default)(startDate)) == null ? void 0 : _a.format("D MMM, YYYY")) === ((_b = (0, import_dayjs.default)(endDate)) == null ? void 0 : _b.format("D MMM, YYYY"));
   const NightCountTooltip = () => {
-    const TooltipArrow = (0, import_react2.memo)(() => {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-w-3 tw-h-3 tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-transparent tw-rotate-90", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    const TooltipArrow = (0, import_react3.memo)(() => {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-w-3 tw-h-3 tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-transparent tw-rotate-90", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "div",
         {
           style: {
@@ -1059,16 +1182,16 @@ function CustomRangePicker(props) {
         }
       ) });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tw-absolute tw-bottom-11 tw-py-2 tw-bg-black tw-text-white tw-px-2 tw-rounded-lg tw-z-50 tw-text-xs tw-whitespace-nowrap tw-opacity-0 tw-pointer-events-none group-hover:tw-opacity-100 tw-transition-opacity tw-duration-200", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tw-absolute tw-bottom-11 tw-py-2 tw-bg-black tw-text-white tw-px-2 tw-rounded-lg tw-z-50 tw-text-xs tw-whitespace-nowrap tw-opacity-0 tw-pointer-events-none group-hover:tw-opacity-100 tw-transition-opacity tw-duration-200", children: [
       nightCountText,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipArrow, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipArrow, {}) })
     ] });
   };
   const renderCalendar = (monthDate, isSecondCalendar = false) => {
     const days = generateCalendarDays(monthDate);
     const monthName = monthNames[monthDate.getMonth()];
     const year = monthDate.getFullYear();
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: (0, import_clsx2.default)("tw-flex-1 tw-max-w-[83vw] tw-mb-2", {
@@ -1076,13 +1199,13 @@ function CustomRangePicker(props) {
           "tw-h-[290px]": !showYearDropdown || days.length <= 35
         }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
               monthName,
               " ",
               !showYearDropdown && ` ${year}`
             ] }),
-            showYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            showYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               Select_default,
               {
                 options: yearOptions,
@@ -1104,7 +1227,7 @@ function CustomRangePicker(props) {
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               className: "tw-py-2 tw-px-0 tw-text-center tw-typography-caption2 tw-text-[#6B7280]",
@@ -1112,9 +1235,9 @@ function CustomRangePicker(props) {
             },
             day
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
             if (!date) {
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-h-10" }, index);
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-h-10" }, index);
             }
             const isStart = isRange ? isSameDate(date, startDate) : false;
             const isEnd = isRange ? isSameDate(date, endDate) : false;
@@ -1164,8 +1287,8 @@ function CustomRangePicker(props) {
               (0, import_dayjs.default)(startDate),
               "day"
             );
-            return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tw-relative", children: [
-              (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tw-relative", children: [
+              (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "div",
                 {
                   className: (0, import_clsx2.default)(
@@ -1178,8 +1301,8 @@ function CustomRangePicker(props) {
                   )
                 }
               ),
-              isHoveringDate && isHovering && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              isHoveringDate && isHovering && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: (0, import_clsx2.default)(
@@ -1192,7 +1315,7 @@ function CustomRangePicker(props) {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: (0, import_clsx2.default)(
@@ -1205,8 +1328,8 @@ function CustomRangePicker(props) {
                   }
                 )
               ] }),
-              isStart && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              isStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: (0, import_clsx2.default)(
@@ -1219,7 +1342,7 @@ function CustomRangePicker(props) {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: (0, import_clsx2.default)(
@@ -1232,7 +1355,7 @@ function CustomRangePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: (0, import_clsx2.default)(className, pseudoClass, "tw-group", {
@@ -1242,7 +1365,7 @@ function CustomRangePicker(props) {
                   onMouseEnter: () => handleDateHover(date),
                   "data-date": titleDate,
                   children: [
-                    showNightCount && isRange && isHovering && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NightCountTooltip, {}),
+                    showNightCount && isRange && isHovering && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NightCountTooltip, {}),
                     date.getDate()
                   ]
                 }
@@ -1253,7 +1376,8 @@ function CustomRangePicker(props) {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  const arrowClasses = "tw-relative tw-top-3 sm:tw-top-0 tw-cursor-pointer tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-justify-center hover:tw-bg-gray-100 tw-items-center";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
       className: (0, import_clsx2.default)(
@@ -1264,36 +1388,42 @@ function CustomRangePicker(props) {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tw-flex tw-items-center tw-px-4 tw-justify-between tw-mb-4 tw-absolute tw-right-0 tw-left-0 tw-top-0.5 sm:tw-top-4 tw-w-auto", children: [
-          !isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tw-flex tw-items-center tw-px-4 tw-justify-between tw-mb-4 tw-absolute tw-right-0 tw-left-0 tw-top-0.5 sm:tw-top-4 tw-w-auto", children: [
+          !isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
-              className: "tw-relative tw-top-3 sm:tw-top-0 tw-cursor-pointer tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-justify-center hover:tw-bg-gray-100 tw-items-center",
+              className: (0, import_clsx2.default)(arrowClasses, "tw-left-1"),
               onClick: () => navigateMonth(-1),
               id: "calendar-previous-month-button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Chevron, { size: "medium" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                Chevron,
+                {
+                  size: "medium",
+                  className: "tw-relative -tw-top-0.5 tw-right-0.5"
+                }
+              )
             }
           ),
-          isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-w-10 tw-h-10" }),
-          !isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-w-10 tw-h-10" }),
+          !isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
-              className: "tw-relative tw-top-3 sm:tw-top-0 tw-cursor-pointer tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-justify-center hover:tw-bg-gray-100 tw-items-center",
+              className: (0, import_clsx2.default)(arrowClasses, "tw-mt-[1px] tw-right-1"),
               onClick: () => navigateMonth(1),
               id: "calendar-next-month-button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 Chevron,
                 {
                   size: "medium",
                   onClick: () => navigateMonth(1),
-                  className: "tw-rotate-180"
+                  className: "tw-rotate-180 tw-relative tw-top-0.5 tw-left-0.5"
                 }
               )
             }
           ),
-          isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-w-10 tw-h-10" })
+          isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-w-10 tw-h-10" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "tw-flex tw-items-center tw-justify-between tw-px-6 tw-border-solid tw-border-color-gray-100 tw-border-b tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "tw-flex tw-items-center tw-justify-between tw-px-6 tw-border-solid tw-border-color-gray-100 tw-border-b tw-border-t-0 tw-border-l-0 tw-border-r-0 tw-w-auto", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
           "div",
           {
             className: (0, import_clsx2.default)("tw-flex tw-w-full", {