@itilite/lumina-ui 1.1.5 → 1.1.7

package/dist/atom/RangePicker/RangePicker.mjs

@@ -1,8 +1,10 @@
 import {
   CustomRangePicker,
   RangePicker_default
-} from "../../chunk-E6UPDTDY.mjs";
-import "../../chunk-RZ7V2KQZ.mjs";
+} from "../../chunk-B63IXC6M.mjs";
+import "../../chunk-IQHBVGA4.mjs";
+import "../../chunk-MLCMZRUC.mjs";
+import "../../chunk-QKTMWS4J.mjs";
 import "../../chunk-ZTRM4HZJ.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {

package/dist/atom/Select/Select.d.mts

@@ -13,6 +13,9 @@ interface SelectProps {
     valueSelected?: string | number | null;
     value?: string | number | null;
     onChange?: (value: string | number | null) => void;
+    onSearch?: (searchTerm: string) => void;
+    isLoading?: boolean;
+    disabledTooltip?: string;
     className?: string;
     dropdownClassName?: string;
     optionClassName?: string;
@@ -24,13 +27,13 @@ interface SelectProps {
     id?: string;
     name?: string;
     tabIndex?: number;
-    size?: 'small' | 'default' | 'medium' | 'large';
-    variant?: 'default' | 'filled' | 'outlined';
+    size?: "small" | "default" | "medium" | "large";
+    variant?: "default" | "filled" | "outlined";
     wrapperClassName?: string;
     inputClassName?: string;
     labelClassName?: string;
     height?: string;
-    experience?: 'business' | 'personal';
+    experience?: "business" | "personal";
     disabled?: boolean;
 }
 

package/dist/atom/Select/Select.d.ts

@@ -13,6 +13,9 @@ interface SelectProps {
     valueSelected?: string | number | null;
     value?: string | number | null;
     onChange?: (value: string | number | null) => void;
+    onSearch?: (searchTerm: string) => void;
+    isLoading?: boolean;
+    disabledTooltip?: string;
     className?: string;
     dropdownClassName?: string;
     optionClassName?: string;
@@ -24,13 +27,13 @@ interface SelectProps {
     id?: string;
     name?: string;
     tabIndex?: number;
-    size?: 'small' | 'default' | 'medium' | 'large';
-    variant?: 'default' | 'filled' | 'outlined';
+    size?: "small" | "default" | "medium" | "large";
+    variant?: "default" | "filled" | "outlined";
     wrapperClassName?: string;
     inputClassName?: string;
     labelClassName?: string;
     height?: string;
-    experience?: 'business' | 'personal';
+    experience?: "business" | "personal";
     disabled?: boolean;
 }
 

package/dist/atom/Select/Select.js

@@ -63,7 +63,7 @@ __export(Select_exports, {
   default: () => Select_default
 });
 module.exports = __toCommonJS(Select_exports);
-var import_react = require("react");
+var import_react2 = require("react");
 var import_clsx = __toESM(require("clsx"));
 
 // src/icons/Chevron.tsx
@@ -108,16 +108,13 @@ var CrossV2 = React2.memo(
         width: size,
         height: size,
         fill: "none",
-        viewBox: "0 0 16 16",
-        className
+        viewBox: "0 0 20 20"
       }, rest), {
         children: /* @__PURE__ */ (0, import_jsx_runtime2.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"
           }
         )
       })
@@ -126,8 +123,106 @@ var CrossV2 = React2.memo(
 );
 CrossV2.displayName = "CrossV2";
 
-// src/atom/Select/Select.tsx
+// src/icons/Lock.tsx
+var import_react = __toESM(require("react"));
 var import_jsx_runtime3 = 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_runtime3.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_runtime3.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_runtime4 = 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_runtime4.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_runtime5 = 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_runtime5.jsx)("div", __spreadProps(__spreadValues({ className: LoadingSpinner_module_default.spinnerContainer }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_antd2.Spin,
+    {
+      indicator: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime6 = require("react/jsx-runtime");
 var Select = ({
   label,
   mandatory = false,
@@ -138,6 +233,10 @@ var Select = ({
   value: _valueProp,
   // Rename to avoid potential conflicts with native value attribute
   onChange,
+  onSearch,
+  isLoading = false,
+  disabled = false,
+  disabledTooltip = "",
   className = "",
   dropdownClassName = "",
   optionClassName = "",
@@ -146,7 +245,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,
@@ -166,45 +264,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 {
@@ -229,7 +327,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";
@@ -239,7 +337,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("");
@@ -248,24 +346,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) {
@@ -286,7 +388,7 @@ var Select = ({
     },
     [normalizeValue, onChange, enableSearch]
   );
-  const handleClear = (0, import_react.useCallback)(
+  const handleClear = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       inputValueRef.current = "";
@@ -306,21 +408,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) {
@@ -344,7 +447,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)
@@ -358,7 +461,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;
@@ -370,7 +473,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;
     }
@@ -379,7 +482,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) {
@@ -403,7 +506,7 @@ var Select = ({
     },
     [isOpen, getSelectedOptionIndex]
   );
-  const handleKeyDown = (0, import_react.useCallback)(
+  const handleKeyDown = (0, import_react2.useCallback)(
     (e) => {
       var _a;
       if (!isOpen) return;
@@ -442,7 +545,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",
@@ -450,10 +553,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);
     }
@@ -461,12 +564,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();
@@ -489,17 +592,24 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  const InputWrapper = ({ children }) => {
+    if (disabled && disabledTooltip)
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip_default, { title: disabledTooltip, children });
+    return children;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime3.jsxs)("div", { className: "tw-relative", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "tw-relative", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               ref: inputRef,
@@ -522,7 +632,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",
@@ -542,7 +653,7 @@ var Select = ({
               readOnly: !isFocused || !enableSearch
             }
           ),
-          label && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          label && size !== "small" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             "label",
             {
               htmlFor: id,
@@ -554,47 +665,59 @@ var Select = ({
               ),
               children: [
                 label,
-                mandatory && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
+                mandatory && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime3.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_runtime3.jsx)(CrossV2, { color: "#111827", className: "tw-mr-1" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    Chevron,
-                    {
-                      className: (0, import_clsx.default)("tw-text-gray-400"),
-                      color: "#6B7280"
-                    }
-                  )
-                }
-              )
+              children: [
+                disabled && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Lock, { size: 16 }) }),
+                isLoading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(
+                      CrossV2,
+                      {
+                        color: "#111827",
+                        className: (0, import_clsx.default)({ "tw-mr-1": size !== "small" }),
+                        size: size === "small" ? 12 : 16
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      Chevron,
+                      {
+                        className: (0, import_clsx.default)("tw-text-gray-400"),
+                        color: "#6B7280"
+                      }
+                    )
+                  }
+                )
+              ]
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             className: (0, import_clsx.default)(
@@ -604,7 +727,7 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "div",
               {
                 ref: (el) => optionRefs.current[index] = el,
@@ -615,7 +738,7 @@ var Select = ({
                   // Selected option styling
                   optionClassName
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   "div",
                   {
                     className: (0, import_clsx.default)(
@@ -633,12 +756,12 @@ var Select = ({
                 )
               },
               doubleCharSearch ? option.label : option.value
-            )) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
+            )) : /* @__PURE__ */ (0, import_jsx_runtime6.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;
@@ -671,7 +794,7 @@ 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);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Select

package/dist/atom/Select/Select.mjs

@@ -1,7 +1,9 @@
 import {
   Select,
   Select_default
-} from "../../chunk-RZ7V2KQZ.mjs";
+} from "../../chunk-IQHBVGA4.mjs";
+import "../../chunk-MLCMZRUC.mjs";
+import "../../chunk-QKTMWS4J.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   Select,