Fix react select import since it is a commonJS module

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;

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;
 

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 (

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} />;

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 (

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;

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 }) {

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,

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 = {

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 ? (