@itilite/lumina-ui 1.1.5 → 1.1.7

package/dist/index.js

@@ -62,10 +62,12 @@ __export(index_exports, {
   Avatar: () => Avatar_default,
   Button: () => Button_default,
   Checkbox: () => Checkbox_default,
+  LoadingSpinner: () => LoadingSpinner_default,
   Modal: () => Modal_default,
   Radio: () => Radio_default,
   RangePicker: () => RangePicker_default,
   Select: () => Select_default,
+  Slider: () => Slider_default,
   Switch: () => Switch_default,
   Tag: () => Tag_default,
   Tooltip: () => Tooltip_default
@@ -587,7 +589,7 @@ Tag.displayName = "Tag";
 var Tag_default = Tag;
 
 // src/atom/RangePicker/RangePicker.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_clsx9 = __toESM(require("clsx"));
 var import_dayjs = __toESM(require("dayjs"));
 
@@ -639,7 +641,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_clsx8 = __toESM(require("clsx"));
 
 // src/icons/Chevron.tsx
@@ -684,16 +686,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_runtime11.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"
           }
         )
       })
@@ -702,8 +701,66 @@ 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_runtime12 = 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_runtime12.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_runtime12.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/LoadingSpinner/LoadingSpinner.tsx
+var import_icons = require("@ant-design/icons");
+var import_antd8 = 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_runtime13 = 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_runtime13.jsx)("div", __spreadProps(__spreadValues({ className: LoadingSpinner_module_default.spinnerContainer }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_antd8.Spin,
+    {
+      indicator: /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime14 = require("react/jsx-runtime");
 var Select = ({
   label,
   mandatory = false,
@@ -714,6 +771,10 @@ var Select = ({
   value: _valueProp,
   // Rename to avoid potential conflicts with native value attribute
   onChange,
+  onSearch,
+  isLoading = false,
+  disabled = false,
+  disabledTooltip = "",
   className = "",
   dropdownClassName = "",
   optionClassName = "",
@@ -722,7 +783,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,
@@ -742,45 +802,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 {
@@ -805,7 +865,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";
@@ -815,7 +875,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("");
@@ -824,24 +884,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) {
@@ -862,7 +926,7 @@ var Select = ({
     },
     [normalizeValue, onChange, enableSearch]
   );
-  const handleClear = (0, import_react.useCallback)(
+  const handleClear = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       inputValueRef.current = "";
@@ -882,21 +946,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) {
@@ -920,7 +985,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)
@@ -934,7 +999,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;
@@ -946,7 +1011,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;
     }
@@ -955,7 +1020,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) {
@@ -979,7 +1044,7 @@ var Select = ({
     },
     [isOpen, getSelectedOptionIndex]
   );
-  const handleKeyDown = (0, import_react.useCallback)(
+  const handleKeyDown = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       if (!isOpen) return;
@@ -1018,7 +1083,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",
@@ -1026,10 +1091,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);
     }
@@ -1037,12 +1102,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();
@@ -1065,17 +1130,24 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  const InputWrapper = ({ children }) => {
+    if (disabled && disabledTooltip)
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Tooltip_default, { title: disabledTooltip, children });
+    return children;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       style,
-      className: (0, import_clsx8.default)("tw-relative tw-w-full", wrapperClassName),
+      className: (0, import_clsx8.default)("tw-relative tw-w-full", wrapperClassName, {
+        "tw-cursor-not-allowed": disabled
+      }),
       ref: dropdownRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "tw-relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "tw-relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "input",
             {
               ref: inputRef,
@@ -1098,7 +1170,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",
@@ -1118,7 +1191,7 @@ var Select = ({
               readOnly: !isFocused || !enableSearch
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          label && size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "label",
             {
               htmlFor: id,
@@ -1130,47 +1203,59 @@ var Select = ({
               ),
               children: [
                 label,
-                mandatory && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
+                mandatory && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
             "div",
             {
               className: (0, import_clsx8.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_runtime12.jsx)(
-                "div",
-                {
-                  className: (0, import_clsx8.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_runtime12.jsx)(CrossV2, { color: "#111827", className: "tw-mr-1" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    Chevron2,
-                    {
-                      className: (0, import_clsx8.default)("tw-text-gray-400"),
-                      color: "#6B7280"
-                    }
-                  )
-                }
-              )
+              children: [
+                disabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Lock, { size: 16 }) }),
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx8.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_runtime14.jsx)(
+                      CrossV2,
+                      {
+                        color: "#111827",
+                        className: (0, import_clsx8.default)({ "tw-mr-1": size !== "small" }),
+                        size: size === "small" ? 12 : 16
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      Chevron2,
+                      {
+                        className: (0, import_clsx8.default)("tw-text-gray-400"),
+                        color: "#6B7280"
+                      }
+                    )
+                  }
+                )
+              ]
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "div",
           {
             className: (0, import_clsx8.default)(
@@ -1180,7 +1265,7 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "div",
               {
                 ref: (el) => optionRefs.current[index] = el,
@@ -1191,7 +1276,7 @@ var Select = ({
                   // Selected option styling
                   optionClassName
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "div",
                   {
                     className: (0, import_clsx8.default)(
@@ -1209,12 +1294,12 @@ var Select = ({
                 )
               },
               doubleCharSearch ? option.label : option.value
-            )) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            )) : /* @__PURE__ */ (0, import_jsx_runtime14.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;
@@ -1247,10 +1332,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_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CustomRangePicker(props) {
   var _a, _b;
   const {
@@ -1277,8 +1362,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 = () => {
@@ -1309,18 +1394,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) => {
@@ -1491,7 +1576,7 @@ function CustomRangePicker(props) {
       setHoverDate(null);
     }
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isRange) {
       sessionStorage.removeItem("rangePickerStartDate");
       onChangeRef.current(null, [
@@ -1506,7 +1591,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"));
     }
@@ -1571,8 +1656,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_runtime13.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_runtime13.jsx)(
+    const TooltipArrow = (0, import_react3.memo)(() => {
+      return /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)(
         "div",
         {
           style: {
@@ -1583,16 +1668,16 @@ function CustomRangePicker(props) {
         }
       ) });
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime15.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_runtime13.jsx)("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TooltipArrow, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-absolute tw-right-[42%] tw-bottom-[-7px]", children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: (0, import_clsx9.default)("tw-flex-1 tw-max-w-[83vw] tw-mb-2", {
@@ -1600,13 +1685,13 @@ function CustomRangePicker(props) {
           "tw-h-[290px]": !showYearDropdown || days.length <= 35
         }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-text-center tw-mb-4 sm:tw-mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: " tw-flex tw-justify-center tw-items-center tw-gap-4 ", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h3", { className: "tw-typography-footNoteBold tw-text-color-text-default tw-m-0", children: [
               monthName,
               " ",
               !showYearDropdown && ` ${year}`
             ] }),
-            showYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            showYearDropdown && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Select_default,
               {
                 options: yearOptions,
@@ -1628,7 +1713,7 @@ function CustomRangePicker(props) {
               }
             )
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-grid tw-grid-cols-7 tw-mb-2", children: dayNames.map((day) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               className: "tw-py-2 tw-px-0 tw-text-center tw-typography-caption2 tw-text-[#6B7280]",
@@ -1636,9 +1721,9 @@ function CustomRangePicker(props) {
             },
             day
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-grid tw-grid-cols-7", children: days.map((date, index) => {
             if (!date) {
-              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "tw-h-10" }, index);
+              return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-h-10" }, index);
             }
             const isStart = isRange ? isSameDate(date, startDate) : false;
             const isEnd = isRange ? isSameDate(date, endDate) : false;
@@ -1688,8 +1773,8 @@ function CustomRangePicker(props) {
               (0, import_dayjs.default)(startDate),
               "day"
             );
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "tw-relative", children: [
-              (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "tw-relative", children: [
+              (isStart || isEnd) && startDate && endDate && !isSameDay && isRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 "div",
                 {
                   className: (0, import_clsx9.default)(
@@ -1702,8 +1787,8 @@ function CustomRangePicker(props) {
                   )
                 }
               ),
-              isHoveringDate && isHovering && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              isHoveringDate && isHovering && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
                     className: (0, import_clsx9.default)(
@@ -1716,7 +1801,7 @@ function CustomRangePicker(props) {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
                     className: (0, import_clsx9.default)(
@@ -1729,8 +1814,8 @@ function CustomRangePicker(props) {
                   }
                 )
               ] }),
-              isStart && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              isStart && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
                     className: (0, import_clsx9.default)(
@@ -1743,7 +1828,7 @@ function CustomRangePicker(props) {
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "div",
                   {
                     className: (0, import_clsx9.default)(
@@ -1756,7 +1841,7 @@ function CustomRangePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
                   className: (0, import_clsx9.default)(className, pseudoClass, "tw-group", {
@@ -1766,7 +1851,7 @@ function CustomRangePicker(props) {
                   onMouseEnter: () => handleDateHover(date),
                   "data-date": titleDate,
                   children: [
-                    showNightCount && isRange && isHovering && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NightCountTooltip, {}),
+                    showNightCount && isRange && isHovering && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(NightCountTooltip, {}),
                     date.getDate()
                   ]
                 }
@@ -1777,7 +1862,8 @@ function CustomRangePicker(props) {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime15.jsxs)(
     "div",
     {
       className: (0, import_clsx9.default)(
@@ -1788,36 +1874,42 @@ function CustomRangePicker(props) {
         }
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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_clsx9.default)(arrowClasses, "tw-left-1"),
               onClick: () => navigateMonth(-1),
               id: "calendar-previous-month-button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Chevron, { size: "medium" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Chevron,
+                {
+                  size: "medium",
+                  className: "tw-relative -tw-top-0.5 tw-right-0.5"
+                }
+              )
             }
           ),
-          isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "tw-w-10 tw-h-10" }),
-          !isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          isPreviousMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-w-10 tw-h-10" }),
+          !isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime15.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_clsx9.default)(arrowClasses, "tw-mt-[1px] tw-right-1"),
               onClick: () => navigateMonth(1),
               id: "calendar-next-month-button",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime13.jsx)("div", { className: "tw-w-10 tw-h-10" })
+          isNextMonthDisabled() && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "tw-w-10 tw-h-10" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsxs)(
           "div",
           {
             className: (0, import_clsx9.default)("tw-flex tw-w-full", {
@@ -1840,15 +1932,86 @@ function CustomRangePicker(props) {
 }
 CustomRangePicker.displayName = "RangePicker";
 var RangePicker_default = CustomRangePicker;
+
+// src/atom/Slider/Slider.tsx
+var import_antd9 = require("antd");
+var import_clsx10 = __toESM(require("clsx"));
+
+// src/atom/Slider/Slider.module.scss
+var Slider_module_default = { "label": "Slider-module__label___9Uea-", "slider": "Slider-module__slider___JCS-c", "disableFill": "Slider-module__disableFill___rjbsy" };
+
+// src/atom/Slider/Slider.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Slider(props) {
+  const {
+    label = "",
+    className = "",
+    onChange,
+    onAfterChange,
+    defaultValue = [],
+    value,
+    step = 10,
+    range = true,
+    disabled = false,
+    min,
+    max,
+    marks,
+    dots,
+    included,
+    reverse,
+    vertical,
+    tipFormatter,
+    tooltipVisible,
+    tooltipPlacement,
+    disableFill = false
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: Slider_module_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      import_antd9.Slider,
+      {
+        className: (0, import_clsx10.default)(
+          Slider_module_default.slider,
+          className,
+          Slider_module_default[disableFill ? "disableFill" : ""]
+        ),
+        "data-testid": "lumina-slider",
+        range,
+        step,
+        defaultValue,
+        value,
+        onChange,
+        onAfterChange,
+        disabled,
+        min,
+        max,
+        marks,
+        dots,
+        included,
+        reverse,
+        vertical,
+        tooltip: {
+          formatter: tipFormatter,
+          open: tooltipVisible,
+          placement: tooltipPlacement
+        }
+      }
+    )
+  ] });
+}
+Slider.displayName = "Slider";
+var Slider_default = Slider;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
   Button,
   Checkbox,
+  LoadingSpinner,
   Modal,
   Radio,
   RangePicker,
   Select,
+  Slider,
   Switch,
   Tag,
   Tooltip