fis-component 0.1.1 → 0.1.2

package/dist/cjs/types/src/components/Breadcrumb/styles.d.ts

@@ -5,3 +5,4 @@ export declare const ButtonItemSC: import("styled-components/dist/types").IStyle
     $active?: boolean;
 }>> & string;
 export declare const DivIconDotSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DivSeparatorIconSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/types/src/components/Select/Select.stories.d.ts

@@ -16,3 +16,7 @@ export declare const NumberType: import("@storybook/core/csf").AnnotatedStoryFn<
 export declare const CustomMaxHeight: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const TextEllipsis: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
 export declare const PlaceholderDemo: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const SimpleTooltip: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const CustomTooltip: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const SecondaryTooltip: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SingleSelectStoryProps>;
+export declare const MultiSelectWithTooltip: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, MultiSelectStoryProps>;

package/dist/cjs/types/src/components/Select/types.d.ts

@@ -1,6 +1,7 @@
 import { InputLabelProps } from "../Input/InputLabel";
 import { MenuProps } from "../MenuSelect/types";
 import { SelectFieldProps } from "../SelectItem";
+import { TooltipTitleCustom } from "../Tooltip";
 export interface SelectOptionItem<T = string | number> {
     label: string;
     description?: string;
@@ -22,7 +23,12 @@ type BaseSelectProps<T extends string | number> = Partial<InputLabelProps> & Omi
     portal?: boolean;
     maxHeight?: string | number;
     onPopupScroll?: (e: React.UIEvent<HTMLElement>) => void;
+    onOpen?: () => void;
     hideChip?: boolean;
+    /** Tooltip title content */
+    tooltipTitle?: TooltipTitleCustom | React.ReactNode;
+    /** Tooltip variant color */
+    tooltipVariant?: "primary" | "secondary";
 };
 export type SingleSelectProps<T extends string | number> = BaseSelectProps<T> & {
     multi?: false;

package/dist/cjs/types/src/components/SelectItem/styles.d.ts

@@ -2,6 +2,7 @@ import { SelectSize } from ".";
 interface SelectItemProps {
     $size?: SelectSize;
     $disabled?: boolean;
+    $activeDropdown?: boolean;
 }
 export declare const InputSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SelectItemProps>> & string;
 export declare const DivWrapperSC: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectItemProps>> & string;

package/dist/esm/index.js

@@ -60995,9 +60995,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 &&
@@ -61565,12 +61565,12 @@ function PositiveIcon(props) {
 }
 
 function ArrowDownIcon(props) {
-    const { width = 16, height = 16, ...rest } = props;
+    const { width = 20, height = 20, ...rest } = props;
     return (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_11182_21084)", children: jsx("path", { d: "M4.66666 6L8.66666 10L12.6667 6", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11182_21084", children: 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 (jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsx("g", { clipPath: "url(#clip0_11028_8041)", children: jsx("path", { d: "M4.33331 10L8.33331 6L12.3333 10", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_11028_8041", children: jsx("rect", { width: "16", height: "16", fill: "white", transform: "translate(0.333313)" }) }) })] }));
 }
 
@@ -63805,7 +63805,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")};
   }
@@ -63821,16 +63822,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 = forwardRef(({ label, icon, active, onClick, ...rest }, ref) => {
     return (jsxs(ButtonItemSC, { type: "button", ...rest, ref: ref, onClick: onClick, "$active": active, children: [icon && jsx(DivIconSC$3, { children: icon }), label && jsx(SpanLabelSC$1, { children: label })] }));
 });
-const BreadcrumbEllipsis = () => (jsxs(Fragment, { children: [jsx(DivIconDotSC, { children: jsx(DotIcon, {}) }), jsx(SeparatorIcon, {})] }));
+const BreadcrumbEllipsis = () => (jsxs(Fragment, { children: [jsx(DivIconDotSC, { children: jsx(DotIcon, {}) }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }));
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))) }))] }));
+    return (jsxs(DivContainerSC$9, { className: className, children: [items?.[0]?.icon && (jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] })), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React__default.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(DivSeparatorIconSC$1, { children: jsx(SeparatorIcon, {}) })] }, index))) }))] }));
 };
 FISBreadcrumb.displayName = "FISBreadcrumb";
 
@@ -64808,7 +64812,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")};
 
@@ -66529,7 +66533,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")};
 `;
@@ -66540,6 +66544,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;
@@ -66559,8 +66564,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")};
 `;
@@ -67609,9 +67614,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] = useState(searchValue);
+    const [pendingSearch, setPendingSearch] = useState(null);
     useEffect(() => {
         setLocalSearch(searchValue);
     }, [searchValue]);
+    useEffect(() => {
+        if (pendingSearch !== null) {
+            setLocalSearch(pendingSearch);
+            setPendingSearch(null);
+        }
+    }, [groups]);
     const search = localSearch;
     const filteredGroups = useMemo$1(() => {
         let filteredItems = groups.map((group) => ({
@@ -67663,8 +67675,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) {
@@ -67688,7 +67705,7 @@ const FISMenuSelect = ({ placeholder, groups, size = "md", multi = false, select
             onClickMenu?.();
         }
     };
-    return (jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
+    return (jsxs(DivContainerSC$4, { "$maxHeight": maxHeight, className: className, children: [showInput && !combobox && (jsx(DivSearchSC, { children: jsx(FISInputText, { iconPrefix: jsx(SearchIcon, {}), placeholder: placeholder, value: search, onChange: handleSearchChange }) })), loading && (jsxs(DivLoaderSC, { children: [jsx(FISProgressCircular, { size: size, variant: "indeterminate" }), jsx(PTitleSC$2, { children: loadingText })] })), !loading && noData && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoDataIcon, {}) }), jsx(PTitleSC$2, { children: noDataText })] })), !loading && !noData && (shouldShowNoResult || noResult) && (jsxs(DivLoaderSC, { children: [jsx(DivIconDataSC, { children: jsx(NoResultIcon, {}) }), jsx(PTitleSC$2, { children: noResultText })] })), !shouldShowNoResult && !noData && !loading && (jsxs(Fragment, { children: [jsx(MenuContent, { "$removeSelectedGroup": !!removeSelectedGroup, onScroll: onPopupScroll, children: groupsToRender.map((group, index) => (jsxs(DivWrapperSC$4, { children: [index !== 0 && jsx(FISMenuSection, { withDivider: true }), group?.groupLabel && (jsx(FISMenuSection, { label: group?.groupLabel })), group.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => handleItemClick(item), selected: selectedValues.includes(item.value), type: "select" }) }, idx)))] }, index))) }), removeSelectedGroup && (jsx(FixedBottomSection, { children: jsx(DivWrapperSC$4, { children: removeSelectedGroup.items.map((item, idx) => (jsx(FISTooltip, { title: item.label, variant: "primary", children: jsx(FISMenuItem, { title: item.label, description: item.description, size: size, onClickMenu: () => onChangeSelected?.([]), type: "select", iconPrefix: jsx(RemoveIcon, {}), negative: true }) }, idx))) }) }))] }))] }));
 };
 FISMenuSelect.displayName = "FISMenuSelect";
 
@@ -73364,7 +73381,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;
@@ -73611,6 +73628,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")};
@@ -73628,6 +73656,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")};
     }
@@ -73639,7 +73674,8 @@ const FISSelectItem = forwardRef((props, ref) => {
     return (jsx(DivContainerSC, { className: classNames({
             iconPrefix: iconPrefix,
             negative: negative,
-        }), "$size": size, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
+            activeDropdown: activeDropdown,
+        }), "$size": size, "$activeDropdown": activeDropdown, children: jsxs(DivWrapperSC, { children: [iconPrefix && (jsx(DivIconPrefixSC, { "$size": size, children: iconPrefix })), jsx(InputSC, { ...rest, ref: ref, disabled: disabled, "$size": size }), iconSuffix && (jsx(DivIconSuffixSC, { "$size": size, "$disabled": disabled, children: iconSuffix }))] }) }));
 });
 FISSelectItem.displayName = "FISSelectItem";
 
@@ -73647,11 +73683,25 @@ function isMenuSize(value) {
     return value === "sm" || value === "md";
 }
 
-const FISSelect = 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 = 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] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
     const [popperElement, setPopperElement] = useState(null);
+    const [cachedSelectedItem, setCachedSelectedItem] = useState(null);
     const isSelectingRef = useRef(false);
+    const inputRef = useRef(null);
+    // Expose focus and openDropdown methods via ref
+    useImperativeHandle(ref, () => ({
+        ...inputRef.current,
+        openDropdown: () => {
+            if (!disabled && !isOpen) {
+                setIsOpen(true);
+                if (onOpen) {
+                    onOpen();
+                }
+            }
+        },
+    }));
     const popperOptions = useMemo$1(() => ({
         modifiers: [
             { name: "preventOverflow", options: { padding: 0, altAxis: true } },
@@ -73689,17 +73739,39 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
                 : `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 = useCallback(() => {
         if (!disabled) {
             setIsOpen((prev) => !prev);
+            onOpen?.();
         }
-    }, [disabled]);
+    }, [disabled, onOpen]);
     const handleOptionRemove = useCallback((option) => {
         if (multi && Array.isArray(value)) {
             const newValues = value.filter((v) => v !== option.value);
@@ -73794,7 +73866,14 @@ const FISSelect = forwardRef(({ className, style, size = "md", options, value, d
             return () => clearTimeout(timer);
         }
     }, [isOpen, multi]);
-    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: ref, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
+    const renderSelectInput = () => {
+        const selectInput = (jsx(DivInputWrapperSC, { ref: setReferenceElement, onClick: handleToggle, "$hasValue": !!value, children: jsx(FISSelectItem, { ...restProps, onBlur: handleBlur, ref: inputRef, size: size, placeholder: placeholder, iconSuffix: isOpen ? jsx(ArrowUpIcon, {}) : jsx(ArrowDownIcon, {}), value: computedDisplayValue, disabled: disabled, activeDropdown: isOpen, negative: negative }) }));
+        if (tooltipTitle) {
+            return (jsx(FISTooltip, { title: tooltipTitle, variant: tooltipVariant, smartPlacement: true, children: selectInput }));
+        }
+        return selectInput;
+    };
+    return (jsxs(DivWrapperSC$1, { className: className, style: style, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), renderSelectInput(), message && (jsx(SpanHintSC$3, { className: classNames({ disabled, negative, positive }), children: message })), multi && !hideChip && Array.isArray(value) && value.length > 0 && (jsx(SelectedTagsWrapper, { children: jsx(MultipleValue, { options: selectedItems, onRemove: handleOptionRemove }) })), isOpen && (jsx(Portal, { portal: portal, children: jsx(DivDropdownMenuSC, { ref: setPopperElement, style: {
                         ...styles.popper,
                         width: referenceElement?.offsetWidth,
                         zIndex: 9999,
@@ -73885,8 +73964,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 {