@itilite/lumina-ui 1.1.12 → 1.1.13

package/dist/Avatar-DX2JwvAs.d.mts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AvatarProps {
+    img?: string;
+    className?: string;
+    name: string;
+    height?: number;
+    width?: number;
+    size?: "small" | "normal";
+}
+
+declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { type AvatarProps as A, Avatar as a };

package/dist/Avatar-DX2JwvAs.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+interface AvatarProps {
+    img?: string;
+    className?: string;
+    name: string;
+    height?: number;
+    width?: number;
+    size?: "small" | "normal";
+}
+
+declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
+declare namespace Avatar {
+    var displayName: string;
+}
+
+export { type AvatarProps as A, Avatar as a };

package/dist/Tag-l7I5oeyk.d.mts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+
+interface TagProps {
+    type?: "success" | "warning" | "blue" | "processing" | "failed";
+    className?: string;
+    title?: string;
+    icon?: React.ReactElement;
+    size?: string;
+}
+
+declare const Tag: React$1.FC<TagProps>;
+
+export { type TagProps as T, Tag as a };

package/dist/Tag-l7I5oeyk.d.ts

@@ -0,0 +1,13 @@
+import * as React$1 from 'react';
+
+interface TagProps {
+    type?: "success" | "warning" | "blue" | "processing" | "failed";
+    className?: string;
+    title?: string;
+    icon?: React.ReactElement;
+    size?: string;
+}
+
+declare const Tag: React$1.FC<TagProps>;
+
+export { type TagProps as T, Tag as a };

package/dist/atom/Avatar/Avatar.d.mts

@@ -1,13 +1,5 @@
 import * as React from 'react';
-
-interface AvatarProps {
-    img?: string;
-    className?: string;
-    name: string;
-    height?: number;
-    width?: number;
-    size?: "small" | "normal";
-}
+import { A as AvatarProps } from '../../types-mhQmqhsR.mjs';
 
 declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
 declare namespace Avatar {

package/dist/atom/Avatar/Avatar.d.ts

@@ -1,13 +1,5 @@
 import * as React from 'react';
-
-interface AvatarProps {
-    img?: string;
-    className?: string;
-    name: string;
-    height?: number;
-    width?: number;
-    size?: "small" | "normal";
-}
+import { A as AvatarProps } from '../../types-mhQmqhsR.js';
 
 declare function Avatar({ img, className, name, height, width, size, }: AvatarProps): React.JSX.Element;
 declare namespace Avatar {

package/dist/atom/RangePicker/RangePicker.js

@@ -275,46 +275,6 @@ var LoadingSpinner_default = LoadingSpinner;
 
 // src/atom/Select/Select.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
-  if (disabled && disabledTooltip)
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tooltip_default, { title: disabledTooltip, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
-});
-var OptionItem = (0, import_react2.memo)(({
-  option,
-  index,
-  isSelected,
-  isHighlighted,
-  experience,
-  size,
-  optionClassName,
-  onSelectHandler,
-  onMouseEnterHandler
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      onClick: () => onSelectHandler(option),
-      onMouseEnter: () => onMouseEnterHandler(index),
-      className: (0, import_clsx.default)(
-        "tw-transition-all tw-duration-150",
-        { "tw-typography-body2": size !== "small" },
-        { "tw-typography-caption1": size === "small" },
-        optionClassName
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "div",
-        {
-          className: (0, import_clsx.default)(
-            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
-            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
-          ),
-          children: option.label
-        }
-      )
-    }
-  );
-});
 var Select = ({
   label,
   mandatory = false,
@@ -553,31 +513,6 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
-  const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
-  const inputClasses = (0, import_react2.useMemo)(() => {
-    return (0, import_clsx.default)(
-      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
-      sizeClasses.input,
-      sizeClasses.padding,
-      variantClasses,
-      {
-        "tw-bg-white": valueSelected || displayValue || isFocused,
-        "tw-bg-color-gray-5": !valueSelected || !displayValue,
-        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
-      },
-      !label && "tw-flex tw-items-center",
-      {
-        "!tw-border-color-primary": isFocused && experience === "business"
-      },
-      {
-        "!tw-border-[#804D7B]": isFocused && experience === "personal"
-      },
-      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
-      "focus:tw-shadow-sm focus:tw-ring-offset-1",
-      className,
-      inputClassName
-    );
-  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
   const filteredOptions = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
@@ -672,7 +607,7 @@ var Select = ({
   }, [highlightedIndex]);
   (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
-  }, [filteredOptions.length]);
+  }, [filteredOptions]);
   const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -709,23 +644,12 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const handleChevronMouseDown = (0, import_react2.useCallback)(
-    (e) => {
-      if (isHovering && selectedValue && allowClear) {
-        handleClear(e);
-      } else {
-        handleChevronClick(e);
-      }
-    },
-    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
-  );
-  const handleOptionClick = (0, import_react2.useCallback)((option) => {
-    handleOptionSelect(option);
-  }, [handleOptionSelect]);
-  const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
-    setHighlightedIndex(index);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime7.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,
@@ -749,11 +673,35 @@ var Select = ({
               autoCorrect: "off",
               autoCapitalize: "off",
               spellCheck: "false",
-              value: isFocused && enableSearch ? searchTerm : displayValue,
+              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
               onChange: enableSearch ? handleSearchChange : void 0,
               onClick: handleInputInteraction,
               onKeyDown: handleKeyDown,
-              className: inputClasses,
+              className: (0, import_clsx.default)(
+                "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+                sizeClasses.input,
+                sizeClasses.padding,
+                variantClasses,
+                {
+                  "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
+                  "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",
+                {
+                  "!tw-border-color-primary": isFocused && experience === "business"
+                },
+                {
+                  "!tw-border-[#804D7B]": isFocused && experience === "personal"
+                },
+                error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+                // Add focus state styling
+                "focus:tw-shadow-sm focus:tw-ring-offset-1",
+                className,
+                inputClassName
+                // Put inputClassName last so it can override default classes
+              ),
               readOnly: !isFocused || !enableSearch
             }
           ),
@@ -794,7 +742,13 @@ var Select = ({
                       // Only rotate chevron when open and not showing clear icon
                       isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
                     ),
-                    onMouseDown: handleChevronMouseDown,
+                    onMouseDown: (e) => {
+                      if (isHovering && selectedValue && allowClear) {
+                        handleClear(e);
+                      } else {
+                        handleChevronClick(e);
+                      }
+                    },
                     children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                       CrossV2,
                       {
@@ -825,32 +779,75 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
-              const isHighlighted = index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                OptionItem,
-                {
-                  option,
-                  index,
-                  isSelected,
-                  isHighlighted,
-                  experience,
-                  size,
-                  optionClassName,
-                  onSelectHandler: handleOptionClick,
-                  onMouseEnterHandler: handleOptionMouseEnter
-                }
-              ) }, doubleCharSearch ? option.label : option.value);
-            }) : /* @__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" })
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                ref: (el) => optionRefs.current[index] = el,
+                onClick: () => handleOptionSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                className: (0, import_clsx.default)(
+                  "tw-transition-all tw-duration-150",
+                  { "tw-typography-body2": size !== "small" },
+                  { "tw-typography-caption1": size === "small" },
+                  optionClassName
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx.default)(
+                      "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+                      normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
+                        // Highlighted option styling (keyboard navigation)
+                        index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
+                          // Default option styling
+                          "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+                        )
+                      )
+                    ),
+                    children: option.label
+                  }
+                )
+              },
+              doubleCharSearch ? option.label : option.value
+            )) : /* @__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;
+  const criticalProps = [
+    "value",
+    "valueSelected",
+    "options",
+    "error",
+    "disabled",
+    "label",
+    "mandatory"
+  ];
+  for (const prop of criticalProps) {
+    if (prevProps[prop] !== nextProps[prop]) {
+      return false;
+    }
+  }
+  if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
+    return false;
+  }
+  if (prevProps.options && nextProps.options) {
+    for (let i = 0; i < prevProps.options.length; i++) {
+      const prevOpt = prevProps.options[i];
+      const nextOpt = nextProps.options[i];
+      if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
 Select.displayName = "Select";
-var Select_default = Select;
+var Select_default = (0, import_react2.memo)(Select, arePropsEqual);
 
 // src/atom/RangePicker/RangePicker.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");

package/dist/atom/RangePicker/RangePicker.mjs

@@ -1,11 +1,11 @@
 import {
   CustomRangePicker,
   RangePicker_default
-} from "../../chunk-IIJUGDEJ.mjs";
-import "../../chunk-ZTRM4HZJ.mjs";
-import "../../chunk-GU5F7Z7I.mjs";
+} from "../../chunk-35KDS27M.mjs";
+import "../../chunk-E4FCLHYA.mjs";
 import "../../chunk-MLCMZRUC.mjs";
 import "../../chunk-QKTMWS4J.mjs";
+import "../../chunk-ZTRM4HZJ.mjs";
 import "../../chunk-FWCSY2DS.mjs";
 export {
   CustomRangePicker as RangePicker,

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

@@ -1,3 +1,5 @@
+import * as React$1 from 'react';
+
 interface SelectOption {
     value: string | number;
     label: string;
@@ -36,5 +38,6 @@ interface SelectProps {
 }
 
 declare const Select: React.FC<SelectProps>;
+declare const _default: React$1.NamedExoticComponent<SelectProps>;
 
-export { Select, Select as default };
+export { Select, _default as default };

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

@@ -1,3 +1,5 @@
+import * as React$1 from 'react';
+
 interface SelectOption {
     value: string | number;
     label: string;
@@ -36,5 +38,6 @@ interface SelectProps {
 }
 
 declare const Select: React.FC<SelectProps>;
+declare const _default: React$1.NamedExoticComponent<SelectProps>;
 
-export { Select, Select as default };
+export { Select, _default as default };

package/dist/atom/Select/Select.js

@@ -223,46 +223,6 @@ var LoadingSpinner_default = LoadingSpinner;
 
 // src/atom/Select/Select.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var InputWrapper = (0, import_react2.memo)(({ children, disabled, disabledTooltip }) => {
-  if (disabled && disabledTooltip)
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip_default, { title: disabledTooltip, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children });
-});
-var OptionItem = (0, import_react2.memo)(({
-  option,
-  index,
-  isSelected,
-  isHighlighted,
-  experience,
-  size,
-  optionClassName,
-  onSelectHandler,
-  onMouseEnterHandler
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      onClick: () => onSelectHandler(option),
-      onMouseEnter: () => onMouseEnterHandler(index),
-      className: (0, import_clsx.default)(
-        "tw-transition-all tw-duration-150",
-        { "tw-typography-body2": size !== "small" },
-        { "tw-typography-caption1": size === "small" },
-        optionClassName
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        "div",
-        {
-          className: (0, import_clsx.default)(
-            "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
-            isSelected ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : isHighlighted ? "tw-bg-[#f3f4f6] tw-text-gray-900" : "tw-text-gray-900 hover:tw-bg-[#1118270a]"
-          ),
-          children: option.label
-        }
-      )
-    }
-  );
-});
 var Select = ({
   label,
   mandatory = false,
@@ -501,31 +461,6 @@ var Select = ({
     }
     return "";
   }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
-  const displayValue = (0, import_react2.useMemo)(() => getDisplayValue(), [getDisplayValue]);
-  const inputClasses = (0, import_react2.useMemo)(() => {
-    return (0, import_clsx.default)(
-      "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
-      sizeClasses.input,
-      sizeClasses.padding,
-      variantClasses,
-      {
-        "tw-bg-white": valueSelected || displayValue || isFocused,
-        "tw-bg-color-gray-5": !valueSelected || !displayValue,
-        "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
-      },
-      !label && "tw-flex tw-items-center",
-      {
-        "!tw-border-color-primary": isFocused && experience === "business"
-      },
-      {
-        "!tw-border-[#804D7B]": isFocused && experience === "personal"
-      },
-      error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
-      "focus:tw-shadow-sm focus:tw-ring-offset-1",
-      className,
-      inputClassName
-    );
-  }, [sizeClasses, variantClasses, valueSelected, displayValue, isFocused, disabled, label, experience, error, className, inputClassName]);
   const filteredOptions = (0, import_react2.useMemo)(() => {
     var _a;
     if (!enableSearch) {
@@ -620,7 +555,7 @@ var Select = ({
   }, [highlightedIndex]);
   (0, import_react2.useEffect)(() => {
     optionRefs.current = [];
-  }, [filteredOptions.length]);
+  }, [filteredOptions]);
   const handleMouseEnter = (0, import_react2.useCallback)(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
@@ -657,23 +592,12 @@ var Select = ({
     },
     [isOpen, handleInputInteraction]
   );
-  const handleChevronMouseDown = (0, import_react2.useCallback)(
-    (e) => {
-      if (isHovering && selectedValue && allowClear) {
-        handleClear(e);
-      } else {
-        handleChevronClick(e);
-      }
-    },
-    [isHovering, selectedValue, allowClear, handleClear, handleChevronClick]
-  );
-  const handleOptionClick = (0, import_react2.useCallback)((option) => {
-    handleOptionSelect(option);
-  }, [handleOptionSelect]);
-  const handleOptionMouseEnter = (0, import_react2.useCallback)((index) => {
-    setHighlightedIndex(index);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(InputWrapper, { disabled, disabledTooltip, children: /* @__PURE__ */ (0, import_jsx_runtime6.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,
@@ -697,11 +621,35 @@ var Select = ({
               autoCorrect: "off",
               autoCapitalize: "off",
               spellCheck: "false",
-              value: isFocused && enableSearch ? searchTerm : displayValue,
+              value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
               onChange: enableSearch ? handleSearchChange : void 0,
               onClick: handleInputInteraction,
               onKeyDown: handleKeyDown,
-              className: inputClasses,
+              className: (0, import_clsx.default)(
+                "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
+                sizeClasses.input,
+                sizeClasses.padding,
+                variantClasses,
+                {
+                  "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
+                  "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",
+                {
+                  "!tw-border-color-primary": isFocused && experience === "business"
+                },
+                {
+                  "!tw-border-[#804D7B]": isFocused && experience === "personal"
+                },
+                error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
+                // Add focus state styling
+                "focus:tw-shadow-sm focus:tw-ring-offset-1",
+                className,
+                inputClassName
+                // Put inputClassName last so it can override default classes
+              ),
               readOnly: !isFocused || !enableSearch
             }
           ),
@@ -742,7 +690,13 @@ var Select = ({
                       // Only rotate chevron when open and not showing clear icon
                       isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
                     ),
-                    onMouseDown: handleChevronMouseDown,
+                    onMouseDown: (e) => {
+                      if (isHovering && selectedValue && allowClear) {
+                        handleClear(e);
+                      } else {
+                        handleChevronClick(e);
+                      }
+                    },
                     children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                       CrossV2,
                       {
@@ -773,32 +727,75 @@ var Select = ({
               dropdownClassName
             ),
             ref: optionListRef,
-            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
-              const isSelected = normalizeValue(selectedValue) === normalizeValue(option.value);
-              const isHighlighted = index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: (el) => optionRefs.current[index] = el, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                OptionItem,
-                {
-                  option,
-                  index,
-                  isSelected,
-                  isHighlighted,
-                  experience,
-                  size,
-                  optionClassName,
-                  onSelectHandler: handleOptionClick,
-                  onMouseEnterHandler: handleOptionMouseEnter
-                }
-              ) }, doubleCharSearch ? option.label : option.value);
-            }) : /* @__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" })
+            children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "div",
+              {
+                ref: (el) => optionRefs.current[index] = el,
+                onClick: () => handleOptionSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                className: (0, import_clsx.default)(
+                  "tw-transition-all tw-duration-150",
+                  { "tw-typography-body2": size !== "small" },
+                  { "tw-typography-caption1": size === "small" },
+                  optionClassName
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "div",
+                  {
+                    className: (0, import_clsx.default)(
+                      "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
+                      normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
+                        // Highlighted option styling (keyboard navigation)
+                        index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
+                          // Default option styling
+                          "tw-text-gray-900 hover:tw-bg-[#1118270a]"
+                        )
+                      )
+                    ),
+                    children: option.label
+                  }
+                )
+              },
+              doubleCharSearch ? option.label : option.value
+            )) : /* @__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;
+  const criticalProps = [
+    "value",
+    "valueSelected",
+    "options",
+    "error",
+    "disabled",
+    "label",
+    "mandatory"
+  ];
+  for (const prop of criticalProps) {
+    if (prevProps[prop] !== nextProps[prop]) {
+      return false;
+    }
+  }
+  if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
+    return false;
+  }
+  if (prevProps.options && nextProps.options) {
+    for (let i = 0; i < prevProps.options.length; i++) {
+      const prevOpt = prevProps.options[i];
+      const nextOpt = nextProps.options[i];
+      if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
 Select.displayName = "Select";
-var Select_default = Select;
+var Select_default = (0, import_react2.memo)(Select, arePropsEqual);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Select