diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
index 3287099891..da3450b1e2 100644
--- a/packages/core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -2,7 +2,7 @@ import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import { BaseSizes, SIZES_VALUES } from "../../constants";
 import React, { forwardRef, useCallback, useMemo, useRef, useState, useEffect } from "react";
-import Select, { InputProps, components, createFilter, ActionMeta } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import AsyncSelect from "react-select/async";
 import BaseSelect from "react-select/base";
 import { noop as NOOP } from "lodash-es";
@@ -37,6 +37,10 @@ import {
   DropdownComponentProps
 } from "./Dropdown.types";
 import { VibeComponent, withStaticProps } from "../../types";
+import type { InputProps, ActionMeta } from "react-select";
+
+const Select = ReactSelectPackage.default;
+const { components, createFilter } = ReactSelectPackage;
 
 const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
   sizes?: typeof BaseSizes;
diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts
index 0da8f63a83..a78a1441b2 100644
--- a/packages/core/src/components/Dropdown/Dropdown.types.ts
+++ b/packages/core/src/components/Dropdown/Dropdown.types.ts
@@ -1,4 +1,6 @@
-import {
+import React, { UIEventHandler, WheelEventHandler } from "react";
+import { VibeComponentProps } from "../../types";
+import type {
   ActionMeta,
   FocusEventHandler,
   InputActionMeta,
@@ -8,8 +10,6 @@ import {
   OptionTypeBase,
   SingleValueProps
 } from "react-select";
-import React, { UIEventHandler, WheelEventHandler } from "react";
-import { VibeComponentProps } from "../../types";
 
 export type DropdownOption = any;
 
diff --git a/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx b/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
index dc24fdb4cd..3f62579dd5 100644
--- a/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
+++ b/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
@@ -1,9 +1,11 @@
 import React from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import Icon from "../../../Icon/Icon";
 import { CloseSmall } from "@vibe/icons";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
+const { components } = ReactSelectPackage;
+
 const ClearIndicator = props => {
   const { size } = props;
   return (
diff --git a/packages/core/src/components/Dropdown/components/Control/Control.jsx b/packages/core/src/components/Dropdown/components/Control/Control.jsx
index 2f095c9126..a24762100f 100644
--- a/packages/core/src/components/Dropdown/components/Control/Control.jsx
+++ b/packages/core/src/components/Dropdown/components/Control/Control.jsx
@@ -1,7 +1,9 @@
 import React from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import Tooltip from "../../../Tooltip/Tooltip";
 
+const { components } = ReactSelectPackage;
+
 const Control = props => {
   const { selectProps } = props;
   const control = <components.Control {...props} />;
diff --git a/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx b/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
index 7cc081aad3..9da88b71d6 100644
--- a/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
+++ b/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
@@ -1,9 +1,11 @@
 import React from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import Icon from "../../../Icon/Icon";
 import { DropdownChevronDown } from "@vibe/icons";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
+const { components } = ReactSelectPackage;
+
 const DropdownIndicator = props => {
   const { isDisabled, size } = props;
   return (
diff --git a/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx b/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx
index d287694cdb..01ad29aca5 100644
--- a/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx
+++ b/packages/core/src/components/Dropdown/components/MultiValue/MultiValue.jsx
@@ -1,5 +1,7 @@
 import React from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
+
+const { components } = ReactSelectPackage;
 
 const MultiValue = props => {
   const { Renderer, data } = props;
diff --git a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx b/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
index 783d27700a..2a85f68e76 100644
--- a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
+++ b/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import cx from "classnames";
 import { useHiddenOptionsData } from "../../hooks/useHiddenOptionsData";
 import Counter from "../../../Counter/Counter";
@@ -8,6 +8,7 @@ import DialogContentContainer from "../../../DialogContentContainer/DialogConten
 import Chips from "../../../Chips/Chips";
 import classes from "./MultiValueContainer.module.scss";
 
+const { components } = ReactSelectPackage;
 const DIALOG_OFFSET_Y = 5;
 
 export default function Container({ children, selectProps, ...otherProps }) {
diff --git a/packages/core/src/components/Dropdown/components/menu/menu.jsx b/packages/core/src/components/Dropdown/components/menu/menu.jsx
index e14f63ab78..f33bab4143 100644
--- a/packages/core/src/components/Dropdown/components/menu/menu.jsx
+++ b/packages/core/src/components/Dropdown/components/menu/menu.jsx
@@ -1,8 +1,10 @@
 import cx from "classnames";
 import React from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import styles from "./menu.module.scss";
 
+const { components } = ReactSelectPackage;
+
 const Menu = ({ children, Renderer, selectProps, dropdownMenuWrapperClassName, id, ariaLabel, ...props }) => {
   const rendererProps = {
     children,
diff --git a/packages/core/src/components/Dropdown/components/option/option.jsx b/packages/core/src/components/Dropdown/components/option/option.jsx
index 8e0bb9fa8b..7a6cfc2b48 100644
--- a/packages/core/src/components/Dropdown/components/option/option.jsx
+++ b/packages/core/src/components/Dropdown/components/option/option.jsx
@@ -1,10 +1,12 @@
 import cx from "classnames";
 import React, { useEffect } from "react";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import Tooltip from "../../../Tooltip/Tooltip";
 import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
 import styles from "./option.module.scss";
 
+const { components } = ReactSelectPackage;
+
 const Option = ({ Renderer, data, children, setFocusedOptionId, optionWrapperClassName, ...props }) => {
   const tooltipProps = data?.tooltipProps || {};
   const rendererProps = {
diff --git a/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx b/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
index 11c64610e4..8cb0af3108 100644
--- a/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
+++ b/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
@@ -1,9 +1,11 @@
 import React from "react";
 import cx from "classnames";
-import { components } from "react-select";
+import * as ReactSelectPackage from "react-select";
 import { ChildrenContent } from "../ChildrenContent/ChildrenContent";
 import styles from "./singleValue.module.scss";
 
+const { components } = ReactSelectPackage;
+
 const SingleValue = ({ Renderer, data, children, readOnly, singleValueWrapperClassName, ...props }) => {
   const rendererProps = { children, readOnly, data, ...props };
   const value = Renderer ? (