diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index d7c57d2..ac274d1 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -3,12 +3,8 @@ import type { IconProps } from "@chakra-ui/icon";
import { Icon } from "@chakra-ui/icon";
import { Box, Divider } from "@chakra-ui/layout";
import { Spinner } from "@chakra-ui/spinner";
+import { useMultiStyleConfig, useStyleConfig } from "@chakra-ui/system";
import type { SystemStyleObject } from "@chakra-ui/system";
-import {
- createStylesContext,
- useMultiStyleConfig,
- useStyleConfig,
-} from "@chakra-ui/system";
import type {
ClearIndicatorProps,
ControlProps,
@@ -19,8 +15,6 @@ import type {
} from "react-select";
import type { SizeProps } from "../types";
-const [InputStylesProvider, useInputStyles] = createStylesContext("Input");
-
const Control = <
Option,
IsMulti extends boolean,
@@ -46,7 +40,7 @@ const Control = <
},
} = props;
- const inputStyles = useMultiStyleConfig("Input", {
+ const { field: fieldStyles } = useMultiStyleConfig("Input", {
focusBorderColor,
errorBorderColor,
size,
@@ -59,7 +53,7 @@ const Control = <
};
const initialStyles: SystemStyleObject = {
- ...inputStyles.field,
+ ...fieldStyles,
display: "flex",
padding: 0,
overflow: "hidden",
@@ -72,28 +66,26 @@ const Control = <
: initialStyles;
return (
-
-
- {children}
-
-
+
+ {children}
+
);
};
@@ -154,10 +146,20 @@ export const DropdownIndicator = <
className,
cx,
innerProps,
- selectProps: { size, chakraStyles, useBasicStyles },
+ selectProps: {
+ size,
+ chakraStyles,
+ useBasicStyles,
+ focusBorderColor,
+ errorBorderColor,
+ },
} = props;
- const { addon } = useInputStyles();
+ const { addon: addonStyles } = useMultiStyleConfig("Input", {
+ focusBorderColor,
+ errorBorderColor,
+ size,
+ });
const iconSizes: SizeProps = {
sm: "16px",
@@ -167,7 +169,7 @@ export const DropdownIndicator = <
const iconSize = iconSizes[size || "md"];
const initialStyles: SystemStyleObject = {
- ...addon,
+ ...addonStyles,
display: "flex",
alignItems: "center",
justifyContent: "center",
diff --git a/src/chakra-components/menu.tsx b/src/chakra-components/menu.tsx
index c47702d..47ec450 100644
--- a/src/chakra-components/menu.tsx
+++ b/src/chakra-components/menu.tsx
@@ -5,7 +5,6 @@ import { Box } from "@chakra-ui/layout";
import { MenuIcon } from "@chakra-ui/menu";
import type { SystemStyleObject } from "@chakra-ui/system";
import {
- createStylesContext,
useColorModeValue,
useMultiStyleConfig,
useTheme,
@@ -21,8 +20,6 @@ import type {
} from "react-select";
import type { SizeProps, ThemeObject } from "../types";
-const [MenuStylesProvider, useMenuStyles] = createStylesContext("Menu");
-
const Menu =