fis-component 0.1.0 → 0.1.2

package/dist/cjs/index.js

@@ -61015,9 +61015,9 @@ const ButtonStyled = styled.button `
           `}
 
           &:disabled {
-            background-color: ${getTheme("com/button/disable/background-color-transparent")};
-            border-color: ${getTheme("com/button/disable/stroke-color")};
+            background-color: ${getTheme("com/button/disable/background-color")};
             color: ${getTheme("com/button/disable/icon-color")} !important;
+            border: none;
           }
 
           ${props.$loading &&
@@ -61585,12 +61585,12 @@ function PositiveIcon(props) {
 }
 
 function ArrowDownIcon(props) {
-    const { width = 16, height = 16, ...rest } = props;
+    const { width = 20, height = 20, ...rest } = props;
     return (jsxRuntime.jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_11182_21084)", children: jsxRuntime.jsx("path", { d: "M4.66666 6L8.66666 10L12.6667 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_11182_21084", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.666656)" }) }) })] }));
 }
 
 function ArrowUpIcon(props) {
-    const { width = 16, height = 16, ...rest } = props;
+    const { width = 20, height = 20, ...rest } = props;
     return (jsxRuntime.jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_11028_8041)", children: jsxRuntime.jsx("path", { d: "M4.33331 10L8.33331 6L12.3333 10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_11028_8041", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.333313)" }) }) })] }));
 }
 
@@ -63825,7 +63825,8 @@ const ButtonItemSC = styled.button `
 
   &:focus-visible {
     background-color: ${getTheme("com/focus-mark/background-color")};
-    box-shadow: 0 0 0 ${getTheme("sem/dimension/stroke-width/divider/lg")}
+    box-shadow:
+      0 0 0 ${getTheme("sem/dimension/stroke-width/divider/lg")}
         ${getTheme("com/focus-mark/color-gap-spacing")},
       0 0 0 4px ${getTheme("com/focus-mark/color-stroke")};
   }
@@ -63841,16 +63842,19 @@ const DivIconDotSC = styled.div `
   gap: ${getTheme("com/breadcrumbs/module/horizontal-gap")};
   border-radius: ${getTheme("com/breadcrumbs/module/corner-radius")};
 `;
+const DivSeparatorIconSC$1 = styled.div `
+  color: ${getTheme("com/breadcrumbs/separated-icon/color-icon")};
+`;
 
 const MAX_VISIBLE_ITEMS = 4;
 const BreadcrumbItem = React.forwardRef(({ label, icon, active, onClick, ...rest }, ref) => {
     return (jsxRuntime.jsxs(ButtonItemSC, { type: "button", ...rest, ref: ref, onClick: onClick, "$active": active, children: [icon && jsxRuntime.jsx(DivIconSC$3, { children: icon }), label && jsxRuntime.jsx(SpanLabelSC$1, { children: label })] }));
 });
-const BreadcrumbEllipsis = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DivIconDotSC, { children: jsxRuntime.jsx(DotIcon, {}) }), jsxRuntime.jsx(SeparatorIcon, {})] }));
+const BreadcrumbEllipsis = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DivIconDotSC, { children: jsxRuntime.jsx(DotIcon, {}) }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }));
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxRuntime.jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))) }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(DivSeparatorIconSC$1, { children: jsxRuntime.jsx(SeparatorIcon, {}) })] }, index))) }))] }));
 };
 FISBreadcrumb.displayName = "FISBreadcrumb";
 
@@ -64828,7 +64832,7 @@ const DivContainerSC$7 = styled.div `
       color: ${getTheme("com/input/field/negative/icon/color-icon/default")};
     }
 
-    &:hover {
+    &:hover:not(:has(${InputSC$2}:disabled)):not(:has(.icon-suffix:hover)) {
       outline-color: ${getTheme("com/input/field/negative/border/hover")};
       background-color: ${getTheme("com/input/field/negative/background/hover")};
 
@@ -66112,7 +66116,7 @@ const FISInputArea = React.forwardRef((props, ref) => {
                     "input-area-lg": size === "lg",
                     "input-area-icon": iconSuffix,
                     negative,
-                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: mergeRefs(ref, inputRef), disabled: disabled, className: classNames({
+                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: mergeRefs(ref, inputRef), disabled: disabled, maxLength: maxLength, className: classNames({
                             negative,
                             "input-area-lg": size === "lg",
                             "input-area-icon": iconSuffix,
@@ -66549,7 +66553,7 @@ const DivContainerSC$4 = styled.div `
   padding-bottom: ${getTheme("com/menu/bottom-padding")};
   padding-left: ${getTheme("com/menu/left-padding")};
   padding-right: ${getTheme("com/menu/right-padding")};
-  gap: ${getTheme("com/menu/item/horizontal-gap")};
+  /* gap: ${getTheme("com/menu/item/horizontal-gap")}; */
   background-color: ${getTheme("com/menu/background-color")};
   box-shadow: ${getTheme("Elevation/Level-2")};
 `;
@@ -66560,6 +66564,7 @@ const DivLoaderSC = styled.div `
   align-items: center;
   justify-content: center;
   gap: ${getTheme("com/menu/item/horizontal-gap")};
+  height: ${getTheme("com/menu/height")};
 `;
 const DivIconDataSC = styled.div `
   display: flex;
@@ -66579,8 +66584,8 @@ styled.div `
 const DivWrapperSC$4 = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${getTheme("com/menu/item/horizontal-gap")};
-  /* min-width: ${getTheme("com/menu/item/min-width")}; */
+  /* gap: ${getTheme("com/menu/item/horizontal-gap")}; */
+  min-width: ${getTheme("com/menu/item/min-width")};
   min-height: ${getTheme("com/menu/item/size-md/min-height")};
   background-color: ${getTheme("com/menu/item/action/background-color/default")};
 `;
@@ -67629,9 +67634,16 @@ FISMenuSection.displayName = "FISMenuSection";
 
 const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, selectedValues = [], onChangeSelected, searchValue = "", onSearchChange, loading = false, noData = false, noResult = false, combobox, className, onClickMenu, loadingText = "Data loading...", noDataText = "No data", noResultText = "No result", removeSelectedText = "Remove selected", selectedGroupLabel = "Selected", maxHeight, onPopupScroll, }) => {
     const [localSearch, setLocalSearch] = React.useState(searchValue);
+    const [pendingSearch, setPendingSearch] = React.useState(null);
     React.useEffect(() => {
         setLocalSearch(searchValue);
     }, [searchValue]);
+    React.useEffect(() => {
+        if (pendingSearch !== null) {
+            setLocalSearch(pendingSearch);
+            setPendingSearch(null);
+        }
+    }, [groups]);
     const search = localSearch;
     const filteredGroups = React.useMemo(() => {
         let filteredItems = groups.map((group) => ({
@@ -67683,8 +67695,13 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
     const shouldShowNoResult = hasSearch && !hasFilteredResult;
     const handleSearchChange = (e) => {
         const value = e.target.value;
-        setLocalSearch(value);
-        onSearchChange?.(value);
+        if (onSearchChange) {
+            setPendingSearch(value);
+            onSearchChange(value);
+        }
+        else {
+            setLocalSearch(value);
+        }
     };
     const handleItemClick = (item) => {
         if (multi) {
@@ -67708,7 +67725,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsxRuntime.jsx(DivSearchSC, { children: jsxRuntime.jsx(FISInputText, { iconPrefix: jsxRuntime.jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), loading && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsxRuntime.jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoDataIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxRuntime.jsxs(DivLoaderSC, { children: [jsxRuntime.jsx(DivIconDataSC, { children: jsxRuntime.jsx(NoResultIcon, {}) }), jsxRuntime.jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxRuntime.jsxs(DivWrapperSC$4, { children: [index !== 0 && jsxRuntime.jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsxRuntime.jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsxRuntime.jsx(FixedBottomSection, { children: jsxRuntime.jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsxRuntime.jsx(FISTooltip, { title: item.label, variant: "primary", children: jsxRuntime.jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsxRuntime.jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -73384,7 +73401,7 @@ const DivInputWrapperSC = styled.div `
     `}
 `;
 const DivDropdownMenuSC = styled.div `
-  /* margin-top: ${getTheme("com/select/vertical-gap")}; */
+  margin-top: ${getTheme("com/select/vertical-gap")};
 `;
 const SelectedTagsWrapper = styled.div `
   display: flex;
@@ -73631,6 +73648,17 @@ const DivContainerSC = styled.div `
     }
   }
 
+  &.activeDropdown {
+    outline-color: ${getTheme("com/select/field/default/border/active")};
+    background-color: ${getTheme("com/select/field/default/background/active")};
+    box-shadow: 0 0 0 ${getTheme("com/actived-mark/gap-spacing")}
+      ${getTheme("com/actived-mark/color-gap-spacing")};
+
+    ${DivIconPrefixSC} {
+      color: ${getTheme("com/select/field/default/icon/color-icon/active")};
+    }
+  }
+
   // Design chưa có negative
   &.negative {
     outline-color: ${getTheme("com/input/field/negative/border/default")};
@@ -73648,6 +73676,13 @@ const DivContainerSC = styled.div `
         ${getTheme("com/actived-mark/color-gap-spacing-negative")};
     }
 
+    &.activeDropdown {
+      outline-color: ${getTheme("com/input/field/negative/border/active")};
+      background-color: ${getTheme("com/input/field/negative/background/active")};
+      box-shadow: 0 0 0 ${getTheme("com/actived-mark/gap-spacing")}
+        ${getTheme("com/actived-mark/color-gap-spacing-negative")};
+    }
+
     &::placeholder {
       color: ${getTheme("com/input/field/negative/label/color-text/placeholder")};
     }
@@ -73659,7 +73694,8 @@ const FISSelectItem = React.forwardRef((props, ref) => {
     return (jsxRuntime.jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
             negative: negative,
-        }), "$size": size, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+            activeDropdown: activeDropdown,
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxRuntime.jsxs(DivWrapperSC, { children: [iconPrefix && (jsxRuntime.jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsxRuntime.jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
@@ -73667,11 +73703,25 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = React.forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholder, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, onPopupScroll, hideChip, ...restProps }, ref) => {
+const FISSelect = React.forwardRef(({ className, style, size = "md", options, value, disabled = false, textLabel = "", iconLabel, required, negative, message, positive, multi, placeholder, placeholderSearch, loading, onChange, renderOption, onClickIconLabel, displayValue, multiDisplayText, searchValue, onSearchChange, portal, maxHeight, onPopupScroll, onOpen, hideChip, tooltipTitle, tooltipVariant = "primary", ...restProps }, ref) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [referenceElement, setReferenceElement] = React.useState(null);
     const [popperElement, setPopperElement] = React.useState(null);
+    const [cachedSelectedItem, setCachedSelectedItem] = React.useState(null);
     const isSelectingRef = React.useRef(false);
+    const inputRef = React.useRef(null);
+    // Expose focus and openDropdown methods via ref
+    React.useImperativeHandle(ref, () => ({
+        ...inputRef.current,
+        openDropdown: () => {
+            if (!disabled && !isOpen) {
+                setIsOpen(true);
+                if (onOpen) {
+                    onOpen();
+                }
+            }
+        },
+    }));
     const popperOptions = React.useMemo(() => ({
         modifiers: [
             { name: "preventOverflow", options: { padding: 0, altAxis: true } },
@@ -73709,17 +73759,39 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
                 : `Selected ${count.toString().padStart(2, "0")} option${count !== 1 ? "s" : ""}`;
         }
         else {
-            const firstItem = selectedItems[0];
-            if (!firstItem)
-                return "";
-            return displayValue?.(firstItem) || firstItem.label;
+            if (value) {
+                const firstItem = selectedItems[0];
+                if (firstItem) {
+                    if (!cachedSelectedItem ||
+                        cachedSelectedItem.value !== firstItem.value) {
+                        setCachedSelectedItem(firstItem);
+                    }
+                    return displayValue?.(firstItem) || firstItem.label;
+                }
+                if (cachedSelectedItem) {
+                    return (displayValue?.(cachedSelectedItem) || cachedSelectedItem.label);
+                }
+                if (displayValue) {
+                    return displayValue({ label: String(value), value });
+                }
+                return String(value);
+            }
+            return "";
         }
-    }, [multi, value, multiDisplayText, selectedItems, displayValue]);
+    }, [
+        multi,
+        value,
+        multiDisplayText,
+        selectedItems,
+        displayValue,
+        cachedSelectedItem,
+    ]);
     const handleToggle = React.useCallback(() => {
         if (!disabled) {
             setIsOpen((prev) => !prev);
+            onOpen?.();
         }
-    }, [disabled]);
+    }, [disabled, onOpen]);
     const handleOptionRemove = React.useCallback((option) => {
         if (multi && Array.isArray(value)) {
             const newValues = value.filter((v) => v !== option.value);
@@ -73814,7 +73886,14 @@ const FISSelect = React.forwardRef(({ className, style, size = "md", options, va
             return () => clearTimeout(timer);
         }
     }, [isOpen, multi]);
-    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    const renderSelectInput = () => {
+        const selectInput = (jsxRuntime.jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsxRuntime.jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: inputRef, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsxRuntime.jsx(ArrowUpIcon, {}) : jsxRuntime.jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }));
+        if (tooltipTitle) {
+            return (jsxRuntime.jsx(FISTooltip, { title: tooltipTitle, variant: tooltipVariant, smartPlacement: true, children: selectInput }));
+        }
+        return selectInput;
+    };
+    return (jsxRuntime.jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsxRuntime.jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsxRuntime.jsx(SelectedTagsWrapper, { children: jsxRuntime.jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsxRuntime.jsx(Portal, { portal: portal, children: jsxRuntime.jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,
@@ -73905,8 +73984,11 @@ const PaginationAntdSC = styled(Pagination) `
   &.ant-pagination-disabled .ant-pagination-next,
   &.ant-pagination-disabled .ant-pagination-prev {
     color: ${getTheme("com/button/disable/icon-color")} !important;
-    border-color: ${getTheme("com/button/disable/stroke-color")} !important;
     background-color: transparent !important;
+
+    button {
+      border: none !important;
+    }
   }
 
   &.ant-pagination-disabled .ant-pagination-item-active {