chakra-react-select - npm Package Compare versions

chakra-react-select

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.3.0 to 4.4.0

dist/cjs/async-creatable-select.js

		@@ -5,17 +5,9 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireWildcard(require("react"));

		var _asyncCreatable = _interopRequireDefault(require("react-select/async-creatable"));

		var _useChakraSelectProps = _interopRequireDefault(require("./use-chakra-select-props"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

		function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null \|\| typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get \|\| desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var AsyncCreatableSelect = /#__PURE__/(0, _react.forwardRef)(function (props, ref) {
		@@ -22,0 +14,0 @@ var chakraSelectProps = (0, _useChakraSelectProps["default"])(props);

dist/cjs/async-select.js

		@@ -5,17 +5,9 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireWildcard(require("react"));

		var _async = _interopRequireDefault(require("react-select/async"));

		var _useChakraSelectProps = _interopRequireDefault(require("./use-chakra-select-props"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

		function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null \|\| typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get \|\| desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var AsyncSelect = /#__PURE__/(0, _react.forwardRef)(function (props, ref) {
		@@ -22,0 +14,0 @@ var chakraSelectProps = (0, _useChakraSelectProps["default"])(props);

dist/cjs/chakra-components/containers.js

		@@ -5,23 +5,16 @@ "use strict";
		exports.ValueContainer = exports.SelectContainer = exports.IndicatorsContainer = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _layout = require("@chakra-ui/layout");

		var _system = require("@chakra-ui/system");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var SelectContainer = function SelectContainer(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isRtl = props.isRtl,
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;

		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isRtl = props.isRtl,
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = _extends({
		@@ -33,3 +26,2 @@ position: "relative",
		} : {});

		var sx = chakraStyles != null && chakraStyles.container ? chakraStyles.container(initialSx, props) : initialSx;
		@@ -45,18 +37,17 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		};

		exports.SelectContainer = SelectContainer;

		var ValueContainer = function ValueContainer(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		isMulti = props.isMulti,
		hasValue = props.hasValue,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles,
		variant = _props$selectProps.variant; // Getting the css from input instead of select
		className = props.className,
		cx = props.cx,
		isMulti = props.isMulti,
		hasValue = props.hasValue,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles,
		variant = _props$selectProps.variant;

		// Getting the css from input instead of select
		// to fit better with each of the variants

		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		@@ -87,11 +78,9 @@ size: size,
		};

		exports.ValueContainer = ValueContainer;

		var IndicatorsContainer = function IndicatorsContainer(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		@@ -111,4 +100,3 @@ display: "flex",
		};

		exports.IndicatorsContainer = IndicatorsContainer;
		//# sourceMappingURL=containers.js.map

126

dist/cjs/chakra-components/control.js

		@@ -5,34 +5,26 @@ "use strict";
		exports["default"] = exports.LoadingIndicator = exports.IndicatorSeparator = exports.DropdownIndicator = exports.DownChevron = exports.CrossIcon = exports.ClearIndicator = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _icon = require("@chakra-ui/icon");

		var _layout = require("@chakra-ui/layout");

		var _spinner = require("@chakra-ui/spinner");

		var _system = require("@chakra-ui/system");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var Control = function Control(props) {
		var className = props.className,
		cx = props.cx,
		children = props.children,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly,
		chakraStyles = _props$selectProps.chakraStyles,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		variant = _props$selectProps.variant;
		cx = props.cx,
		children = props.children,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly,
		chakraStyles = _props$selectProps.chakraStyles,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		variant = _props$selectProps.variant;
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		@@ -44,3 +36,2 @@ focusBorderColor: focusBorderColor,
		});

		var initialSx = _extends({}, inputStyles.field, {
		@@ -55,3 +46,2 @@ display: "flex",
		} : {});

		var sx = chakraStyles != null && chakraStyles.control ? chakraStyles.control(initialSx, props) : initialSx;
		@@ -75,11 +65,9 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({
		};

		var IndicatorSeparator = function IndicatorSeparator(props) {
		var className = props.className,
		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;

		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;
		var initialSx = _extends({
		@@ -90,3 +78,2 @@ opacity: 1
		} : {});

		var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialSx, props) : initialSx;
		@@ -101,2 +88,3 @@ return /#__PURE__/_react["default"].createElement(_layout.Divider, {
		};

		/**
		@@ -107,6 +95,3 @@ * Borrowed from the `@chakra-ui/icons` package to prevent needing it as a dependency
		*/


		exports.IndicatorSeparator = IndicatorSeparator;

		var DownChevron = function DownChevron(props) {
		@@ -118,20 +103,20 @@ return /#__PURE__/_react["default"].createElement(_icon.Icon, props, /#__PURE__/_react["default"].createElement("path", {
		};

		exports.DownChevron = DownChevron;

		var DropdownIndicator = function DropdownIndicator(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		size = _props$selectProps3.size,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor,
		variant = _props$selectProps3.variant;
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		size: size,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor,
		size: size
		variant: variant
		});
		@@ -144,3 +129,2 @@ var iconSizes = {
		var iconSize = iconSizes[size \|\| "md"];

		var initialSx = _extends({}, inputStyles.addon, {
		@@ -162,3 +146,2 @@ display: "flex",
		});

		var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		@@ -180,2 +163,3 @@ var initialIconStyles = {
		};

		/**
		@@ -186,6 +170,3 @@ * Borrowed from Chakra UI source
		*/


		exports.DropdownIndicator = DropdownIndicator;

		var CrossIcon = function CrossIcon(props) {
		@@ -200,17 +181,14 @@ return /#__PURE__/_react["default"].createElement(_icon.Icon, _extends({
		};

		exports.CrossIcon = CrossIcon;

		var ClearIndicator = function ClearIndicator(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		chakraStyles = _props$selectProps4.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		chakraStyles = _props$selectProps4.chakraStyles;
		var closeButtonStyles = (0, _system.useStyleConfig)("CloseButton", {
		size: size
		});

		var initialSx = _extends({}, closeButtonStyles, {
		@@ -224,3 +202,2 @@ marginX: 1,
		});

		var sx = chakraStyles != null && chakraStyles.clearIndicator ? chakraStyles.clearIndicator(initialSx, props) : initialSx;
		@@ -244,17 +221,15 @@ var initialIconStyles = {
		};

		exports.ClearIndicator = ClearIndicator;

		var LoadingIndicator = function LoadingIndicator(props) {
		var className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		chakraStyles = _props$selectProps5.chakraStyles,
		color = props.color,
		emptyColor = props.emptyColor,
		speed = props.speed,
		thickness = props.thickness,
		propsSpinnerSize = props.spinnerSize;
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		chakraStyles = _props$selectProps5.chakraStyles,
		color = props.color,
		emptyColor = props.emptyColor,
		speed = props.speed,
		thickness = props.thickness,
		propsSpinnerSize = props.spinnerSize;
		var spinnerSizes = {
		@@ -284,3 +259,2 @@ sm: "xs",
		};

		exports.LoadingIndicator = LoadingIndicator;
		@@ -287,0 +261,0 @@ var _default = Control;

dist/cjs/chakra-components/index.js

		@@ -5,23 +5,12 @@ "use strict";
		exports["default"] = void 0;

		var _containers = require("./containers");

		var _control = _interopRequireWildcard(require("./control"));

		var _input = _interopRequireDefault(require("./input"));

		var _menu = _interopRequireWildcard(require("./menu"));

		var _multiValue = _interopRequireWildcard(require("./multi-value"));

		var _placeholder = _interopRequireDefault(require("./placeholder"));

		var _singleValue = _interopRequireDefault(require("./single-value"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

		function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null \|\| typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get \|\| desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

		var chakraComponents = {
		@@ -28,0 +17,0 @@ ClearIndicator: _control.ClearIndicator,

dist/cjs/chakra-components/input.js

		@@ -5,35 +5,24 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _layout = require("@chakra-ui/layout");

		var _system = require("@chakra-ui/system");

		var _utils = require("../utils");

		var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		var Input = function Input(props) {
		var className = props.className,
		cx = props.cx,
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;

		cx = props.cx,
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;
		var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
		innerRef = _cleanCommonProps.innerRef,
		isDisabled = _cleanCommonProps.isDisabled,
		isHidden = _cleanCommonProps.isHidden,
		inputClassName = _cleanCommonProps.inputClassName,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);

		innerRef = _cleanCommonProps.innerRef,
		isDisabled = _cleanCommonProps.isDisabled,
		isHidden = _cleanCommonProps.isHidden,
		inputClassName = _cleanCommonProps.inputClassName,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
		var spacingSx = {
		@@ -63,3 +52,2 @@ gridArea: "1 / 2",
		var containerSx = chakraStyles != null && chakraStyles.inputContainer ? chakraStyles.inputContainer(initialContainerSx, props) : initialContainerSx;

		var initialInputSx = _extends({
		@@ -72,3 +60,2 @@ label: "input",
		}, spacingSx);

		var inputSx = chakraStyles != null && chakraStyles.input ? chakraStyles.input(initialInputSx, props) : initialInputSx;
		@@ -93,5 +80,4 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, {
		};

		var _default = Input;
		exports["default"] = _default;
		//# sourceMappingURL=input.js.map

182

dist/cjs/chakra-components/menu.js

		@@ -5,39 +5,28 @@ "use strict";
		exports["default"] = exports.Option = exports.NoOptionsMessage = exports.MenuList = exports.LoadingMessage = exports.GroupHeading = exports.Group = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _icon = _interopRequireDefault(require("@chakra-ui/icon"));

		var _layout = require("@chakra-ui/layout");

		var _menu = require("@chakra-ui/menu");

		var _system = require("@chakra-ui/system");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var alignToControl = function alignToControl(placement) {
		var placementToCSSProp = {
		bottom: "top",
		top: "bottom"
		};
		return placement ? placementToCSSProp[placement] : "top";
		};
		var Menu = function Menu(props) {
		var _initialSx;
		var className = props.className,
		cx = props.cx,
		children = props.children,
		innerProps = props.innerProps,
		innerRef = props.innerRef,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;

		var initialSx = _extends({
		cx = props.cx,
		children = props.children,
		innerProps = props.innerProps,
		innerRef = props.innerRef,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = (_initialSx = {
		position: "absolute"
		}, placement === "bottom" && {
		top: "100%"
		}, placement === "top" && {
		bottom: "100%"
		}, {
		marginY: "8px",
		width: "100%",
		zIndex: 1,
		overflow: "hidden"
		});

		}, _initialSx[alignToControl(placement)] = "100%", _initialSx.marginY = "8px", _initialSx.width = "100%", _initialSx.zIndex = 1, _initialSx);
		var sx = chakraStyles != null && chakraStyles.menu ? chakraStyles.menu(initialSx, props) : initialSx;
		@@ -52,19 +41,16 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		};

		var _default = Menu;
		exports["default"] = _default;

		var MenuList = function MenuList(props) {
		var _inputStyles$field;

		var className = props.className,
		cx = props.cx,
		innerRef = props.innerRef,
		children = props.children,
		maxHeight = props.maxHeight,
		isMulti = props.isMulti,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles;
		cx = props.cx,
		innerRef = props.innerRef,
		children = props.children,
		maxHeight = props.maxHeight,
		isMulti = props.isMulti,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu");
		@@ -74,3 +60,2 @@ var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		});

		var initialSx = _extends({}, menuStyles.list, {
		@@ -80,5 +65,7 @@ minW: "100%",
		overflowY: "auto",
		borderRadius: (_inputStyles$field = inputStyles.field) == null ? void 0 : _inputStyles$field.borderRadius
		borderRadius: (_inputStyles$field = inputStyles.field) == null ? void 0 : _inputStyles$field.borderRadius,
		position: "relative",
		// required for offset[Height, Top] > keyboard scroll
		WebkitOverflowScrolling: "touch"
		});

		var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
		@@ -94,13 +81,12 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		};

		exports.MenuList = MenuList;

		var LoadingMessage = function LoadingMessage(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		size = _props$selectProps2.size,
		chakraStyles = _props$selectProps2.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		size = _props$selectProps2.size,
		chakraStyles = _props$selectProps2.chakraStyles;

		/**
		@@ -111,3 +97,2 @@ * The chakra UI global placeholder color
		*/

		var color = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400");
		@@ -134,13 +119,12 @@ var verticalPaddings = {
		};

		exports.LoadingMessage = LoadingMessage;

		var NoOptionsMessage = function NoOptionsMessage(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles;

		/**
		@@ -151,3 +135,2 @@ * The chakra UI global placeholder color
		*/

		var color = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400");
		@@ -174,16 +157,14 @@ var verticalPaddings = {
		};

		exports.NoOptionsMessage = NoOptionsMessage;

		var Group = function Group(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		theme = props.theme,
		getStyles = props.getStyles,
		Heading = props.Heading,
		headingProps = props.headingProps,
		label = props.label,
		selectProps = props.selectProps,
		innerProps = props.innerProps;
		className = props.className,
		cx = props.cx,
		theme = props.theme,
		getStyles = props.getStyles,
		Heading = props.Heading,
		headingProps = props.headingProps,
		label = props.label,
		selectProps = props.selectProps,
		innerProps = props.innerProps;
		var chakraStyles = selectProps.chakraStyles;
		@@ -203,13 +184,11 @@ var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
		};

		exports.Group = Group;

		var GroupHeading = function GroupHeading(props) {
		var cx = props.cx,
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders,
		chakraStyles = _props$selectProps4.chakraStyles;
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders,
		chakraStyles = _props$selectProps4.chakraStyles;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu");
		@@ -226,3 +205,2 @@ var fontSizes = {
		};

		var initialSx = _extends({}, menuStyles.groupTitle, {
		@@ -238,3 +216,2 @@ fontSize: fontSizes[size \|\| "md"],
		});

		var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
		@@ -248,2 +225,3 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, {
		};

		/**
		@@ -254,6 +232,3 @@ * The `CheckIcon` component from the Chakra UI Menu
		*/


		exports.GroupHeading = GroupHeading;

		var CheckIcon = function CheckIcon(props) {
		@@ -269,19 +244,18 @@ return /#__PURE__/_react["default"].createElement(_icon["default"], _extends({
		};

		var Option = function Option(props) {
		var className = props.className,
		cx = props.cx,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		children = props.children,
		isFocused = props.isFocused,
		isDisabled = props.isDisabled,
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColor = _props$selectProps5.selectedOptionColor,
		chakraStyles = _props$selectProps5.chakraStyles;
		cx = props.cx,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		children = props.children,
		isFocused = props.isFocused,
		isDisabled = props.isDisabled,
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColor = _props$selectProps5.selectedOptionColor,
		chakraStyles = _props$selectProps5.chakraStyles;
		var menuItemStyles = (0, _system.useMultiStyleConfig)("Menu").item;
		@@ -293,2 +267,3 @@ var paddings = {
		};

		/**
		@@ -299,10 +274,9 @@ * Use the same selected color as the border of the select component
		*/
		var selectedBg = (0, _system.useColorModeValue)(selectedOptionColor + ".500", selectedOptionColor + ".300");
		var selectedColor = (0, _system.useColorModeValue)("white", "black");

		var selectedBg = (0, _system.useColorModeValue)(selectedOptionColor + ".500", selectedOptionColor + ".300");
		var selectedColor = (0, _system.useColorModeValue)("white", "black"); // Don't create exta space for the checkmark if using a multi select with
		// Don't create exta space for the checkmark if using a multi select with
		// options that dissapear when they're selected

		var showCheckIcon = selectedOptionStyle === "check" && (!isMulti \|\| hideSelectedOptions === false);
		var shouldHighlight = selectedOptionStyle === "color" && isSelected;

		var initialSx = _extends({}, menuItemStyles, {
		@@ -325,3 +299,2 @@ display: "flex",
		});

		var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
		@@ -346,4 +319,3 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		};

		exports.Option = Option;
		//# sourceMappingURL=menu.js.map

dist/cjs/chakra-components/multi-value.js

		@@ -5,61 +5,47 @@ "use strict";
		exports["default"] = exports.MultiValueRemove = exports.MultiValueLabel = exports.MultiValueContainer = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _icon = require("@chakra-ui/icon");

		var _layout = require("@chakra-ui/layout");

		var _system = require("@chakra-ui/system");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var hasColorScheme = function hasColorScheme(option) {
		return typeof option === "object" && option !== null && "colorScheme" in option;
		};

		var hasIsFixed = function hasIsFixed(option) {
		return typeof option === "object" && option !== null && "isFixed" in option;
		};

		var hasVariant = function hasVariant(option) {
		return typeof option === "object" && option !== null && "variant" in option;
		};

		var MultiValue = function MultiValue(props) {
		var children = props.children,
		className = props.className,
		components = props.components,
		cx = props.cx,
		data = props.data,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		removeProps = props.removeProps,
		selectProps = props.selectProps;
		className = props.className,
		components = props.components,
		cx = props.cx,
		data = props.data,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		removeProps = props.removeProps,
		selectProps = props.selectProps;
		var Container = components.Container,
		Label = components.Label,
		Remove = components.Remove;
		Label = components.Label,
		Remove = components.Remove;
		var chakraStyles = selectProps.chakraStyles,
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		size = selectProps.size;
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		size = selectProps.size;
		var optionColorScheme = "";
		var optionVariant = "";
		var optionIsFixed = false;

		if (hasColorScheme(data) && typeof data.colorScheme === "string") {
		optionColorScheme = data.colorScheme;
		}

		if (hasVariant(data) && typeof data.variant === "string") {
		optionVariant = data.variant;
		}

		if (hasIsFixed(data)) {
		optionIsFixed = !!data.isFixed;
		}

		var tagStyles = (0, _system.useMultiStyleConfig)("Tag", {
		@@ -70,3 +56,2 @@ size: size,
		});

		var containerInitialSx = _extends({}, tagStyles.container, {
		@@ -79,7 +64,5 @@ display: "inline-flex",
		});

		var containerSx = chakraStyles != null && chakraStyles.multiValue ? chakraStyles.multiValue(containerInitialSx, props) : containerInitialSx;
		var labelInitialSx = tagStyles.label;
		var labelSx = chakraStyles != null && chakraStyles.multiValueLabel ? chakraStyles.multiValueLabel(labelInitialSx, props) : labelInitialSx;

		var removeInitialSx = _extends({
		@@ -90,3 +73,2 @@ display: "flex",
		}, tagStyles.closeButton);

		var removeSx = chakraStyles != null && chakraStyles.multiValueRemove ? chakraStyles.multiValueRemove(removeInitialSx, props) : removeInitialSx;
		@@ -125,7 +107,6 @@ return /#__PURE__/_react["default"].createElement(Container, {
		};

		var MultiValueContainer = function MultiValueContainer(props) {
		var children = props.children,
		innerProps = props.innerProps,
		sx = props.sx;
		innerProps = props.innerProps,
		sx = props.sx;
		return /#__PURE__/_react["default"].createElement(_system.chakra.span, _extends({}, innerProps, {
		@@ -135,9 +116,7 @@ sx: sx
		};

		exports.MultiValueContainer = MultiValueContainer;

		var MultiValueLabel = function MultiValueLabel(props) {
		var children = props.children,
		innerProps = props.innerProps,
		sx = props.sx;
		innerProps = props.innerProps,
		sx = props.sx;
		return /#__PURE__/_react["default"].createElement(_system.chakra.span, _extends({}, innerProps, {
		@@ -147,2 +126,3 @@ sx: sx
		};

		/**
		@@ -153,6 +133,3 @@ * Borrowed from Chakra UI Tag source
		*/


		exports.MultiValueLabel = MultiValueLabel;

		var TagCloseIcon = function TagCloseIcon(props) {
		@@ -167,14 +144,11 @@ return /#__PURE__/_react["default"].createElement(_icon.Icon, _extends({
		};

		var MultiValueRemove = function MultiValueRemove(props) {
		var children = props.children,
		innerProps = props.innerProps,
		isFocused = props.isFocused,
		data = props.data,
		sx = props.sx;

		innerProps = props.innerProps,
		isFocused = props.isFocused,
		data = props.data,
		sx = props.sx;
		if (hasIsFixed(data) && data.isFixed) {
		return null;
		}

		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		@@ -187,3 +161,2 @@ role: "button",
		};

		exports.MultiValueRemove = MultiValueRemove;
		@@ -190,0 +163,0 @@ var _default = MultiValue;

dist/cjs/chakra-components/placeholder.js

		@@ -5,19 +5,14 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _layout = require("@chakra-ui/layout");

		var _system = require("@chakra-ui/system");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var Placeholder = function Placeholder(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;

		/**
		@@ -28,3 +23,2 @@ * The chakra UI global placeholder color
		*/

		var placeholderColor = (0, _system.useColorModeValue)("gray.400", "whiteAlpha.400");
		@@ -47,5 +41,4 @@ var initialSx = {
		};

		var _default = Placeholder;
		exports["default"] = _default;
		//# sourceMappingURL=placeholder.js.map

dist/cjs/chakra-components/single-value.js

		@@ -5,18 +5,13 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireDefault(require("react"));

		var _layout = require("@chakra-ui/layout");

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var SingleValue = function SingleValue(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		isDisabled = props.isDisabled,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		isDisabled = props.isDisabled,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		@@ -42,5 +37,4 @@ label: "singleValue",
		};

		var _default = SingleValue;
		exports["default"] = _default;
		//# sourceMappingURL=single-value.js.map

dist/cjs/creatable-select.js

		@@ -5,17 +5,9 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireWildcard(require("react"));

		var _creatable = _interopRequireDefault(require("react-select/creatable"));

		var _useChakraSelectProps = _interopRequireDefault(require("./use-chakra-select-props"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

		function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null \|\| typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get \|\| desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var CreatableSelect = /#__PURE__/(0, _react.forwardRef)(function (props, ref) {
		@@ -22,0 +14,0 @@ var chakraSelectProps = (0, _useChakraSelectProps["default"])(props);

dist/cjs/index.js

		@@ -13,31 +13,16 @@ "use strict";
		exports.useChakraSelectProps = exports.chakraComponents = exports.Select = exports.CreatableSelect = exports.AsyncSelect = exports.AsyncCreatableSelect = void 0;

		require("./module-augmentation");

		var _select = _interopRequireDefault(require("./select"));

		exports.Select = _select["default"];

		var _creatableSelect = _interopRequireDefault(require("./creatable-select"));

		exports.CreatableSelect = _creatableSelect["default"];

		var _asyncSelect = _interopRequireDefault(require("./async-select"));

		exports.AsyncSelect = _asyncSelect["default"];

		var _asyncCreatableSelect = _interopRequireDefault(require("./async-creatable-select"));

		exports.AsyncCreatableSelect = _asyncCreatableSelect["default"];

		var _chakraComponents = _interopRequireDefault(require("./chakra-components"));

		exports.chakraComponents = _chakraComponents["default"];

		var _useChakraSelectProps = _interopRequireDefault(require("./use-chakra-select-props"));

		exports.useChakraSelectProps = _useChakraSelectProps["default"];

		var _reactSelect = require("react-select");

		Object.keys(_reactSelect).forEach(function (key) {
		@@ -49,5 +34,3 @@ if (key === "default" \|\| key === "__esModule") return;
		});

		var _async = require("react-select/async");

		Object.keys(_async).forEach(function (key) {
		@@ -59,5 +42,3 @@ if (key === "default" \|\| key === "__esModule") return;
		});

		var _asyncCreatable = require("react-select/async-creatable");

		Object.keys(_asyncCreatable).forEach(function (key) {
		@@ -69,5 +50,3 @@ if (key === "default" \|\| key === "__esModule") return;
		});

		var _creatable = require("react-select/creatable");

		Object.keys(_creatable).forEach(function (key) {
		@@ -79,4 +58,3 @@ if (key === "default" \|\| key === "__esModule") return;
		});

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		//# sourceMappingURL=index.js.map

dist/cjs/select.js

		@@ -5,17 +5,9 @@ "use strict";
		exports["default"] = void 0;

		var _react = _interopRequireWildcard(require("react"));

		var _reactSelect = _interopRequireDefault(require("react-select"));

		var _useChakraSelectProps = _interopRequireDefault(require("./use-chakra-select-props"));

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

		function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null \|\| typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get \|\| desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		var Select = /#__PURE__/(0, _react.forwardRef)(function (props, ref) {
		@@ -22,0 +14,0 @@ var chakraSelectProps = (0, _useChakraSelectProps["default"])(props);

100

dist/cjs/use-chakra-select-props.js

		@@ -5,47 +5,42 @@ "use strict";
		exports["default"] = void 0;

		var _formControl = require("@chakra-ui/form-control");

		var _system = require("@chakra-ui/system");
		var _chakraComponents = _interopRequireDefault(require("./chakra-components"));

		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "inputId", "tagVariant", "hasStickyGroupHeaders", "selectedOptionStyle", "selectedOptionColor", "variant", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur", "menuIsOpen"];

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		var useChakraSelectProps = function useChakraSelectProps(_ref) {
		var _props$ariaInvalid;

		var _ref$components = _ref.components,
		components = _ref$components === void 0 ? {} : _ref$components,
		theme = _ref.theme,
		_ref$size = _ref.size,
		size = _ref$size === void 0 ? "md" : _ref$size,
		_ref$colorScheme = _ref.colorScheme,
		colorScheme = _ref$colorScheme === void 0 ? "gray" : _ref$colorScheme,
		isDisabled = _ref.isDisabled,
		isInvalid = _ref.isInvalid,
		isReadOnly = _ref.isReadOnly,
		isRequired = _ref.isRequired,
		inputId = _ref.inputId,
		tagVariant = _ref.tagVariant,
		_ref$hasStickyGroupHe = _ref.hasStickyGroupHeaders,
		hasStickyGroupHeaders = _ref$hasStickyGroupHe === void 0 ? false : _ref$hasStickyGroupHe,
		_ref$selectedOptionSt = _ref.selectedOptionStyle,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		_ref$selectedOptionCo = _ref.selectedOptionColor,
		selectedOptionColor = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? "outline" : _ref$variant,
		focusBorderColor = _ref.focusBorderColor,
		errorBorderColor = _ref.errorBorderColor,
		_ref$chakraStyles = _ref.chakraStyles,
		chakraStyles = _ref$chakraStyles === void 0 ? {} : _ref$chakraStyles,
		onFocus = _ref.onFocus,
		onBlur = _ref.onBlur,
		menuIsOpen = _ref.menuIsOpen,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);
		components = _ref$components === void 0 ? {} : _ref$components,
		theme = _ref.theme,
		size = _ref.size,
		_ref$colorScheme = _ref.colorScheme,
		colorScheme = _ref$colorScheme === void 0 ? "gray" : _ref$colorScheme,
		isDisabled = _ref.isDisabled,
		isInvalid = _ref.isInvalid,
		isReadOnly = _ref.isReadOnly,
		isRequired = _ref.isRequired,
		inputId = _ref.inputId,
		tagVariant = _ref.tagVariant,
		_ref$hasStickyGroupHe = _ref.hasStickyGroupHeaders,
		hasStickyGroupHeaders = _ref$hasStickyGroupHe === void 0 ? false : _ref$hasStickyGroupHe,
		_ref$selectedOptionSt = _ref.selectedOptionStyle,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		_ref$selectedOptionCo = _ref.selectedOptionColor,
		selectedOptionColor = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		variant = _ref.variant,
		focusBorderColor = _ref.focusBorderColor,
		errorBorderColor = _ref.errorBorderColor,
		_ref$chakraStyles = _ref.chakraStyles,
		chakraStyles = _ref$chakraStyles === void 0 ? {} : _ref$chakraStyles,
		onFocus = _ref.onFocus,
		onBlur = _ref.onBlur,
		menuIsOpen = _ref.menuIsOpen,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);
		var chakraTheme = (0, _system.useTheme)();
		var _chakraTheme$componen = chakraTheme.components.Input.defaultProps,
		defaultVariant = _chakraTheme$componen.variant,
		defaultSize = _chakraTheme$componen.size;

		@@ -65,13 +60,14 @@ /**
		onBlur: onBlur
		}); // Unless `menuIsOpen` is controlled, disable it if the select is readonly
		});

		// Unless `menuIsOpen` is controlled, disable it if the select is readonly
		var realMenuIsOpen = menuIsOpen != null ? menuIsOpen : inputProps.readOnly ? false : undefined;

		/** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */

		var realSize = size;
		var realSize = size != null ? size : defaultSize === "xs" ? "sm" : defaultSize;
		var sizeOptions = ["sm", "md", "lg"];

		if (!sizeOptions.includes(size)) {
		if (!sizeOptions.includes(realSize)) {
		realSize = "md";
		}

		/**
		@@ -81,7 +77,4 @@ * Ensure that the tag variant used is one of the options, either `subtle`,
		*/


		var realTagVariant = tagVariant;
		var tagVariantOptions = ["subtle", "solid", "outline"];

		if (tagVariant !== undefined) {
		@@ -92,27 +85,20 @@ if (!tagVariantOptions.includes(tagVariant)) {
		}

		/** Ensure that the selected option style is either `color` or `check` */


		var realSelectedOptionStyle = selectedOptionStyle;
		var selectedOptionStyleOptions = ["color", "check"];

		if (!selectedOptionStyleOptions.includes(selectedOptionStyle)) {
		realSelectedOptionStyle = "color";
		}

		/** Ensure that the color used for the selected options is a string */


		var realSelectedOptionColor = selectedOptionColor;

		if (typeof selectedOptionColor !== "string") {
		realSelectedOptionColor = "blue";
		}

		var realVariant = variant;
		var realVariant = variant != null ? variant : defaultVariant;
		var variantOptions = ["outline", "filled", "flushed", "unstyled"];

		if (!variantOptions.includes(variant)) {
		realVariant = "outline";
		if (!variantOptions.includes(realVariant)) {
		realVariant = defaultVariant;
		}

		var select = _extends({
		@@ -145,8 +131,6 @@ // Allow overriding of custom components
		});

		return select;
		};

		var _default = useChakraSelectProps;
		exports["default"] = _default;
		//# sourceMappingURL=use-chakra-select-props.js.map

dist/cjs/utils.js

		@@ -6,7 +6,4 @@ "use strict";
		var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		/**
		@@ -20,20 +17,18 @@ * Borrowed from the original `react-select` package
		var className = props.className,
		clearValue = props.clearValue,
		cx = props.cx,
		getStyles = props.getStyles,
		getValue = props.getValue,
		hasValue = props.hasValue,
		isMulti = props.isMulti,
		isRtl = props.isRtl,
		options = props.options,
		selectOption = props.selectOption,
		selectProps = props.selectProps,
		setValue = props.setValue,
		theme = props.theme,
		innerProps = _objectWithoutPropertiesLoose(props, _excluded);

		clearValue = props.clearValue,
		cx = props.cx,
		getStyles = props.getStyles,
		getValue = props.getValue,
		hasValue = props.hasValue,
		isMulti = props.isMulti,
		isRtl = props.isRtl,
		options = props.options,
		selectOption = props.selectOption,
		selectProps = props.selectProps,
		setValue = props.setValue,
		theme = props.theme,
		innerProps = _objectWithoutPropertiesLoose(props, _excluded);
		return _extends({}, innerProps);
		};

		exports.cleanCommonProps = cleanCommonProps;
		//# sourceMappingURL=utils.js.map

dist/esm/async-creatable-select.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React, { forwardRef } from "react";
		@@ -4,0 +3,0 @@ import AsyncCreatableReactSelect from "react-select/async-creatable";

dist/esm/async-select.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React, { forwardRef } from "react";
		@@ -4,0 +3,0 @@ import AsyncReactSelect from "react-select/async";

dist/esm/chakra-components/containers.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		@@ -8,10 +7,9 @@ import { Box } from "@chakra-ui/layout";
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isRtl = props.isRtl,
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;

		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isRtl = props.isRtl,
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = _extends({
		@@ -23,3 +21,2 @@ position: "relative",
		} : {});

		var sx = chakraStyles != null && chakraStyles.container ? chakraStyles.container(initialSx, props) : initialSx;
		@@ -37,13 +34,14 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		isMulti = props.isMulti,
		hasValue = props.hasValue,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles,
		variant = _props$selectProps.variant; // Getting the css from input instead of select
		className = props.className,
		cx = props.cx,
		isMulti = props.isMulti,
		hasValue = props.hasValue,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles,
		variant = _props$selectProps.variant;

		// Getting the css from input instead of select
		// to fit better with each of the variants

		var inputStyles = useMultiStyleConfig("Input", {
		@@ -76,6 +74,6 @@ size: size,
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		@@ -82,0 +80,0 @@ display: "flex",

109

dist/esm/chakra-components/control.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		@@ -8,20 +7,19 @@ import { Icon } from "@chakra-ui/icon";
		import { useMultiStyleConfig, useStyleConfig } from "@chakra-ui/system";

		var Control = function Control(props) {
		var className = props.className,
		cx = props.cx,
		children = props.children,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly,
		chakraStyles = _props$selectProps.chakraStyles,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		variant = _props$selectProps.variant;
		cx = props.cx,
		children = props.children,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly,
		chakraStyles = _props$selectProps.chakraStyles,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		variant = _props$selectProps.variant;
		var inputStyles = useMultiStyleConfig("Input", {
		@@ -33,3 +31,2 @@ focusBorderColor: focusBorderColor,
		});

		var initialSx = _extends({}, inputStyles.field, {
		@@ -44,3 +41,2 @@ display: "flex",
		} : {});

		var sx = chakraStyles != null && chakraStyles.control ? chakraStyles.control(initialSx, props) : initialSx;
		@@ -64,11 +60,9 @@ return /#__PURE__/React.createElement(Box, _extends({
		};

		export var IndicatorSeparator = function IndicatorSeparator(props) {
		var className = props.className,
		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;

		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;
		var initialSx = _extends({
		@@ -79,3 +73,2 @@ opacity: 1
		} : {});

		var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialSx, props) : initialSx;
		@@ -90,2 +83,3 @@ return /#__PURE__/React.createElement(Divider, {
		};

		/**
		@@ -96,3 +90,2 @@ * Borrowed from the `@chakra-ui/icons` package to prevent needing it as a dependency
		*/

		export var DownChevron = function DownChevron(props) {
		@@ -106,15 +99,17 @@ return /#__PURE__/React.createElement(Icon, props, /#__PURE__/React.createElement("path", {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		size = _props$selectProps3.size,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor,
		variant = _props$selectProps3.variant;
		var inputStyles = useMultiStyleConfig("Input", {
		size: size,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor,
		size: size
		variant: variant
		});
		@@ -127,3 +122,2 @@ var iconSizes = {
		var iconSize = iconSizes[size \|\| "md"];

		var initialSx = _extends({}, inputStyles.addon, {
		@@ -145,3 +139,2 @@ display: "flex",
		});

		var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		@@ -163,2 +156,3 @@ var initialIconStyles = {
		};

		/**
		@@ -169,3 +163,2 @@ * Borrowed from Chakra UI source
		*/

		export var CrossIcon = function CrossIcon(props) {
		@@ -182,12 +175,11 @@ return /#__PURE__/React.createElement(Icon, _extends({
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		chakraStyles = _props$selectProps4.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		chakraStyles = _props$selectProps4.chakraStyles;
		var closeButtonStyles = useStyleConfig("CloseButton", {
		size: size
		});

		var initialSx = _extends({}, closeButtonStyles, {
		@@ -201,3 +193,2 @@ marginX: 1,
		});

		var sx = chakraStyles != null && chakraStyles.clearIndicator ? chakraStyles.clearIndicator(initialSx, props) : initialSx;
		@@ -223,12 +214,12 @@ var initialIconStyles = {
		var className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		chakraStyles = _props$selectProps5.chakraStyles,
		color = props.color,
		emptyColor = props.emptyColor,
		speed = props.speed,
		thickness = props.thickness,
		propsSpinnerSize = props.spinnerSize;
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		chakraStyles = _props$selectProps5.chakraStyles,
		color = props.color,
		emptyColor = props.emptyColor,
		speed = props.speed,
		thickness = props.thickness,
		propsSpinnerSize = props.spinnerSize;
		var spinnerSizes = {
		@@ -235,0 +226,0 @@ sm: "xs",

dist/esm/chakra-components/input.js

		var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		import React from "react";
		@@ -11,19 +8,16 @@ import { Box } from "@chakra-ui/layout";
		import { cleanCommonProps } from "../utils";

		var Input = function Input(props) {
		var className = props.className,
		cx = props.cx,
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;

		cx = props.cx,
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;
		var _cleanCommonProps = cleanCommonProps(props),
		innerRef = _cleanCommonProps.innerRef,
		isDisabled = _cleanCommonProps.isDisabled,
		isHidden = _cleanCommonProps.isHidden,
		inputClassName = _cleanCommonProps.inputClassName,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);

		innerRef = _cleanCommonProps.innerRef,
		isDisabled = _cleanCommonProps.isDisabled,
		isHidden = _cleanCommonProps.isHidden,
		inputClassName = _cleanCommonProps.inputClassName,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
		var spacingSx = {
		@@ -53,3 +47,2 @@ gridArea: "1 / 2",
		var containerSx = chakraStyles != null && chakraStyles.inputContainer ? chakraStyles.inputContainer(initialContainerSx, props) : initialContainerSx;

		var initialInputSx = _extends({
		@@ -62,3 +55,2 @@ label: "input",
		}, spacingSx);

		var inputSx = chakraStyles != null && chakraStyles.input ? chakraStyles.input(initialInputSx, props) : initialInputSx;
		@@ -83,4 +75,3 @@ return /#__PURE__/React.createElement(Box, {
		};

		export default Input;
		//# sourceMappingURL=input.js.map

164

dist/esm/chakra-components/menu.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		@@ -8,25 +7,21 @@ import Icon from "@chakra-ui/icon";
		import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/system";

		var alignToControl = function alignToControl(placement) {
		var placementToCSSProp = {
		bottom: "top",
		top: "bottom"
		};
		return placement ? placementToCSSProp[placement] : "top";
		};
		var Menu = function Menu(props) {
		var _initialSx;
		var className = props.className,
		cx = props.cx,
		children = props.children,
		innerProps = props.innerProps,
		innerRef = props.innerRef,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;

		var initialSx = _extends({
		cx = props.cx,
		children = props.children,
		innerProps = props.innerProps,
		innerRef = props.innerRef,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = (_initialSx = {
		position: "absolute"
		}, placement === "bottom" && {
		top: "100%"
		}, placement === "top" && {
		bottom: "100%"
		}, {
		marginY: "8px",
		width: "100%",
		zIndex: 1,
		overflow: "hidden"
		});

		}, _initialSx[alignToControl(placement)] = "100%", _initialSx.marginY = "8px", _initialSx.width = "100%", _initialSx.zIndex = 1, _initialSx);
		var sx = chakraStyles != null && chakraStyles.menu ? chakraStyles.menu(initialSx, props) : initialSx;
		@@ -41,17 +36,15 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		};

		export default Menu;
		export var MenuList = function MenuList(props) {
		var _inputStyles$field;

		var className = props.className,
		cx = props.cx,
		innerRef = props.innerRef,
		children = props.children,
		maxHeight = props.maxHeight,
		isMulti = props.isMulti,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles;
		cx = props.cx,
		innerRef = props.innerRef,
		children = props.children,
		maxHeight = props.maxHeight,
		isMulti = props.isMulti,
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		size = _props$selectProps.size,
		chakraStyles = _props$selectProps.chakraStyles;
		var menuStyles = useMultiStyleConfig("Menu");
		@@ -61,3 +54,2 @@ var inputStyles = useMultiStyleConfig("Input", {
		});

		var initialSx = _extends({}, menuStyles.list, {
		@@ -67,5 +59,7 @@ minW: "100%",
		overflowY: "auto",
		borderRadius: (_inputStyles$field = inputStyles.field) == null ? void 0 : _inputStyles$field.borderRadius
		borderRadius: (_inputStyles$field = inputStyles.field) == null ? void 0 : _inputStyles$field.borderRadius,
		position: "relative",
		// required for offset[Height, Top] > keyboard scroll
		WebkitOverflowScrolling: "touch"
		});

		var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
		@@ -83,8 +77,9 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		size = _props$selectProps2.size,
		chakraStyles = _props$selectProps2.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		size = _props$selectProps2.size,
		chakraStyles = _props$selectProps2.chakraStyles;

		/**
		@@ -95,3 +90,2 @@ * The chakra UI global placeholder color
		*/

		var color = useColorModeValue("gray.400", "whiteAlpha.400");
		@@ -120,8 +114,9 @@ var verticalPaddings = {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		size = _props$selectProps3.size,
		chakraStyles = _props$selectProps3.chakraStyles;

		/**
		@@ -132,3 +127,2 @@ * The chakra UI global placeholder color
		*/

		var color = useColorModeValue("gray.400", "whiteAlpha.400");
		@@ -157,11 +151,11 @@ var verticalPaddings = {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		theme = props.theme,
		getStyles = props.getStyles,
		Heading = props.Heading,
		headingProps = props.headingProps,
		label = props.label,
		selectProps = props.selectProps,
		innerProps = props.innerProps;
		className = props.className,
		cx = props.cx,
		theme = props.theme,
		getStyles = props.getStyles,
		Heading = props.Heading,
		headingProps = props.headingProps,
		label = props.label,
		selectProps = props.selectProps,
		innerProps = props.innerProps;
		var chakraStyles = selectProps.chakraStyles;
		@@ -183,8 +177,8 @@ var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
		var cx = props.cx,
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders,
		chakraStyles = _props$selectProps4.chakraStyles;
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		size = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders,
		chakraStyles = _props$selectProps4.chakraStyles;
		var menuStyles = useMultiStyleConfig("Menu");
		@@ -201,3 +195,2 @@ var fontSizes = {
		};

		var initialSx = _extends({}, menuStyles.groupTitle, {
		@@ -213,3 +206,2 @@ fontSize: fontSizes[size \|\| "md"],
		});

		var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
		@@ -223,2 +215,3 @@ return /#__PURE__/React.createElement(Box, {
		};

		/**
		@@ -229,3 +222,2 @@ * The `CheckIcon` component from the Chakra UI Menu
		*/

		var CheckIcon = function CheckIcon(props) {
		@@ -241,19 +233,18 @@ return /#__PURE__/React.createElement(Icon, _extends({
		};

		export var Option = function Option(props) {
		var className = props.className,
		cx = props.cx,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		children = props.children,
		isFocused = props.isFocused,
		isDisabled = props.isDisabled,
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColor = _props$selectProps5.selectedOptionColor,
		chakraStyles = _props$selectProps5.chakraStyles;
		cx = props.cx,
		innerRef = props.innerRef,
		innerProps = props.innerProps,
		children = props.children,
		isFocused = props.isFocused,
		isDisabled = props.isDisabled,
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		size = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColor = _props$selectProps5.selectedOptionColor,
		chakraStyles = _props$selectProps5.chakraStyles;
		var menuItemStyles = useMultiStyleConfig("Menu").item;
		@@ -265,2 +256,3 @@ var paddings = {
		};

		/**
		@@ -271,10 +263,9 @@ * Use the same selected color as the border of the select component
		*/
		var selectedBg = useColorModeValue(selectedOptionColor + ".500", selectedOptionColor + ".300");
		var selectedColor = useColorModeValue("white", "black");

		var selectedBg = useColorModeValue(selectedOptionColor + ".500", selectedOptionColor + ".300");
		var selectedColor = useColorModeValue("white", "black"); // Don't create exta space for the checkmark if using a multi select with
		// Don't create exta space for the checkmark if using a multi select with
		// options that dissapear when they're selected

		var showCheckIcon = selectedOptionStyle === "check" && (!isMulti \|\| hideSelectedOptions === false);
		var shouldHighlight = selectedOptionStyle === "color" && isSelected;

		var initialSx = _extends({}, menuItemStyles, {
		@@ -297,3 +288,2 @@ display: "flex",
		});

		var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
		@@ -300,0 +290,0 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {

dist/esm/chakra-components/multi-value.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		@@ -7,49 +6,41 @@ import { Icon } from "@chakra-ui/icon";
		import { chakra, useMultiStyleConfig } from "@chakra-ui/system";

		var hasColorScheme = function hasColorScheme(option) {
		return typeof option === "object" && option !== null && "colorScheme" in option;
		};

		var hasIsFixed = function hasIsFixed(option) {
		return typeof option === "object" && option !== null && "isFixed" in option;
		};

		var hasVariant = function hasVariant(option) {
		return typeof option === "object" && option !== null && "variant" in option;
		};

		var MultiValue = function MultiValue(props) {
		var children = props.children,
		className = props.className,
		components = props.components,
		cx = props.cx,
		data = props.data,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		removeProps = props.removeProps,
		selectProps = props.selectProps;
		className = props.className,
		components = props.components,
		cx = props.cx,
		data = props.data,
		innerProps = props.innerProps,
		isDisabled = props.isDisabled,
		isFocused = props.isFocused,
		removeProps = props.removeProps,
		selectProps = props.selectProps;
		var Container = components.Container,
		Label = components.Label,
		Remove = components.Remove;
		Label = components.Label,
		Remove = components.Remove;
		var chakraStyles = selectProps.chakraStyles,
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		size = selectProps.size;
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		size = selectProps.size;
		var optionColorScheme = "";
		var optionVariant = "";
		var optionIsFixed = false;

		if (hasColorScheme(data) && typeof data.colorScheme === "string") {
		optionColorScheme = data.colorScheme;
		}

		if (hasVariant(data) && typeof data.variant === "string") {
		optionVariant = data.variant;
		}

		if (hasIsFixed(data)) {
		optionIsFixed = !!data.isFixed;
		}

		var tagStyles = useMultiStyleConfig("Tag", {
		@@ -60,3 +51,2 @@ size: size,
		});

		var containerInitialSx = _extends({}, tagStyles.container, {
		@@ -69,7 +59,5 @@ display: "inline-flex",
		});

		var containerSx = chakraStyles != null && chakraStyles.multiValue ? chakraStyles.multiValue(containerInitialSx, props) : containerInitialSx;
		var labelInitialSx = tagStyles.label;
		var labelSx = chakraStyles != null && chakraStyles.multiValueLabel ? chakraStyles.multiValueLabel(labelInitialSx, props) : labelInitialSx;

		var removeInitialSx = _extends({
		@@ -80,3 +68,2 @@ display: "flex",
		}, tagStyles.closeButton);

		var removeSx = chakraStyles != null && chakraStyles.multiValueRemove ? chakraStyles.multiValueRemove(removeInitialSx, props) : removeInitialSx;
		@@ -115,7 +102,6 @@ return /#__PURE__/React.createElement(Container, {
		};

		var MultiValueContainer = function MultiValueContainer(props) {
		var children = props.children,
		innerProps = props.innerProps,
		sx = props.sx;
		innerProps = props.innerProps,
		sx = props.sx;
		return /#__PURE__/React.createElement(chakra.span, _extends({}, innerProps, {
		@@ -125,7 +111,6 @@ sx: sx
		};

		var MultiValueLabel = function MultiValueLabel(props) {
		var children = props.children,
		innerProps = props.innerProps,
		sx = props.sx;
		innerProps = props.innerProps,
		sx = props.sx;
		return /#__PURE__/React.createElement(chakra.span, _extends({}, innerProps, {
		@@ -135,2 +120,3 @@ sx: sx
		};

		/**
		@@ -141,4 +127,2 @@ * Borrowed from Chakra UI Tag source
		*/


		var TagCloseIcon = function TagCloseIcon(props) {
		@@ -153,14 +137,11 @@ return /#__PURE__/React.createElement(Icon, _extends({
		};

		var MultiValueRemove = function MultiValueRemove(props) {
		var children = props.children,
		innerProps = props.innerProps,
		isFocused = props.isFocused,
		data = props.data,
		sx = props.sx;

		innerProps = props.innerProps,
		isFocused = props.isFocused,
		data = props.data,
		sx = props.sx;
		if (hasIsFixed(data) && data.isFixed) {
		return null;
		}

		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		@@ -173,5 +154,4 @@ role: "button",
		};

		export { MultiValueContainer, MultiValueLabel, MultiValueRemove };
		export default MultiValue;
		//# sourceMappingURL=multi-value.js.map

dist/esm/chakra-components/placeholder.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		import { Box } from "@chakra-ui/layout";
		import { useColorModeValue } from "@chakra-ui/system";

		var Placeholder = function Placeholder(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;

		/**
		@@ -18,3 +17,2 @@ * The chakra UI global placeholder color
		*/

		var placeholderColor = useColorModeValue("gray.400", "whiteAlpha.400");
		@@ -37,4 +35,3 @@ var initialSx = {
		};

		export default Placeholder;
		//# sourceMappingURL=placeholder.js.map

dist/esm/chakra-components/single-value.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React from "react";
		import { Box } from "@chakra-ui/layout";

		var SingleValue = function SingleValue(props) {
		var children = props.children,
		className = props.className,
		cx = props.cx,
		isDisabled = props.isDisabled,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		className = props.className,
		cx = props.cx,
		isDisabled = props.isDisabled,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		@@ -33,4 +31,3 @@ label: "singleValue",
		};

		export default SingleValue;
		//# sourceMappingURL=single-value.js.map

dist/esm/creatable-select.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React, { forwardRef } from "react";
		@@ -4,0 +3,0 @@ import CreatableReactSelect from "react-select/creatable";

dist/esm/select.js

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		import React, { forwardRef } from "react";
		@@ -4,0 +3,0 @@ import ReactSelect from "react-select";

dist/esm/use-chakra-select-props.js

		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "inputId", "tagVariant", "hasStickyGroupHeaders", "selectedOptionStyle", "selectedOptionColor", "variant", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur", "menuIsOpen"];

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		import { useFormControl } from "@chakra-ui/form-control";
		import { useTheme } from "@chakra-ui/system";
		import chakraComponents from "./chakra-components";

		var useChakraSelectProps = function useChakraSelectProps(_ref) {
		var _props$ariaInvalid;

		var _ref$components = _ref.components,
		components = _ref$components === void 0 ? {} : _ref$components,
		theme = _ref.theme,
		_ref$size = _ref.size,
		size = _ref$size === void 0 ? "md" : _ref$size,
		_ref$colorScheme = _ref.colorScheme,
		colorScheme = _ref$colorScheme === void 0 ? "gray" : _ref$colorScheme,
		isDisabled = _ref.isDisabled,
		isInvalid = _ref.isInvalid,
		isReadOnly = _ref.isReadOnly,
		isRequired = _ref.isRequired,
		inputId = _ref.inputId,
		tagVariant = _ref.tagVariant,
		_ref$hasStickyGroupHe = _ref.hasStickyGroupHeaders,
		hasStickyGroupHeaders = _ref$hasStickyGroupHe === void 0 ? false : _ref$hasStickyGroupHe,
		_ref$selectedOptionSt = _ref.selectedOptionStyle,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		_ref$selectedOptionCo = _ref.selectedOptionColor,
		selectedOptionColor = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		_ref$variant = _ref.variant,
		variant = _ref$variant === void 0 ? "outline" : _ref$variant,
		focusBorderColor = _ref.focusBorderColor,
		errorBorderColor = _ref.errorBorderColor,
		_ref$chakraStyles = _ref.chakraStyles,
		chakraStyles = _ref$chakraStyles === void 0 ? {} : _ref$chakraStyles,
		onFocus = _ref.onFocus,
		onBlur = _ref.onBlur,
		menuIsOpen = _ref.menuIsOpen,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);
		components = _ref$components === void 0 ? {} : _ref$components,
		theme = _ref.theme,
		size = _ref.size,
		_ref$colorScheme = _ref.colorScheme,
		colorScheme = _ref$colorScheme === void 0 ? "gray" : _ref$colorScheme,
		isDisabled = _ref.isDisabled,
		isInvalid = _ref.isInvalid,
		isReadOnly = _ref.isReadOnly,
		isRequired = _ref.isRequired,
		inputId = _ref.inputId,
		tagVariant = _ref.tagVariant,
		_ref$hasStickyGroupHe = _ref.hasStickyGroupHeaders,
		hasStickyGroupHeaders = _ref$hasStickyGroupHe === void 0 ? false : _ref$hasStickyGroupHe,
		_ref$selectedOptionSt = _ref.selectedOptionStyle,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		_ref$selectedOptionCo = _ref.selectedOptionColor,
		selectedOptionColor = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		variant = _ref.variant,
		focusBorderColor = _ref.focusBorderColor,
		errorBorderColor = _ref.errorBorderColor,
		_ref$chakraStyles = _ref.chakraStyles,
		chakraStyles = _ref$chakraStyles === void 0 ? {} : _ref$chakraStyles,
		onFocus = _ref.onFocus,
		onBlur = _ref.onBlur,
		menuIsOpen = _ref.menuIsOpen,
		props = _objectWithoutPropertiesLoose(_ref, _excluded);
		var chakraTheme = useTheme();
		var _chakraTheme$componen = chakraTheme.components.Input.defaultProps,
		defaultVariant = _chakraTheme$componen.variant,
		defaultSize = _chakraTheme$componen.size;

		@@ -56,13 +54,14 @@ /**
		onBlur: onBlur
		}); // Unless `menuIsOpen` is controlled, disable it if the select is readonly
		});

		// Unless `menuIsOpen` is controlled, disable it if the select is readonly
		var realMenuIsOpen = menuIsOpen != null ? menuIsOpen : inputProps.readOnly ? false : undefined;

		/** Ensure that the size used is one of the options, either `sm`, `md`, or `lg` */

		var realSize = size;
		var realSize = size != null ? size : defaultSize === "xs" ? "sm" : defaultSize;
		var sizeOptions = ["sm", "md", "lg"];

		if (!sizeOptions.includes(size)) {
		if (!sizeOptions.includes(realSize)) {
		realSize = "md";
		}

		/**
		@@ -72,7 +71,4 @@ * Ensure that the tag variant used is one of the options, either `subtle`,
		*/


		var realTagVariant = tagVariant;
		var tagVariantOptions = ["subtle", "solid", "outline"];

		if (tagVariant !== undefined) {
		@@ -83,27 +79,20 @@ if (!tagVariantOptions.includes(tagVariant)) {
		}

		/** Ensure that the selected option style is either `color` or `check` */


		var realSelectedOptionStyle = selectedOptionStyle;
		var selectedOptionStyleOptions = ["color", "check"];

		if (!selectedOptionStyleOptions.includes(selectedOptionStyle)) {
		realSelectedOptionStyle = "color";
		}

		/** Ensure that the color used for the selected options is a string */


		var realSelectedOptionColor = selectedOptionColor;

		if (typeof selectedOptionColor !== "string") {
		realSelectedOptionColor = "blue";
		}

		var realVariant = variant;
		var realVariant = variant != null ? variant : defaultVariant;
		var variantOptions = ["outline", "filled", "flushed", "unstyled"];

		if (!variantOptions.includes(variant)) {
		realVariant = "outline";
		if (!variantOptions.includes(realVariant)) {
		realVariant = defaultVariant;
		}

		var select = _extends({
		@@ -136,7 +125,5 @@ // Allow overriding of custom components
		});

		return select;
		};

		export default useChakraSelectProps;
		//# sourceMappingURL=use-chakra-select-props.js.map

dist/esm/utils.js

		var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];

		function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

		function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

		/**
		@@ -15,18 +12,17 @@ * Borrowed from the original `react-select` package
		var className = props.className,
		clearValue = props.clearValue,
		cx = props.cx,
		getStyles = props.getStyles,
		getValue = props.getValue,
		hasValue = props.hasValue,
		isMulti = props.isMulti,
		isRtl = props.isRtl,
		options = props.options,
		selectOption = props.selectOption,
		selectProps = props.selectProps,
		setValue = props.setValue,
		theme = props.theme,
		innerProps = _objectWithoutPropertiesLoose(props, _excluded);

		clearValue = props.clearValue,
		cx = props.cx,
		getStyles = props.getStyles,
		getValue = props.getValue,
		hasValue = props.hasValue,
		isMulti = props.isMulti,
		isRtl = props.isRtl,
		options = props.options,
		selectOption = props.selectOption,
		selectProps = props.selectProps,
		setValue = props.setValue,
		theme = props.theme,
		innerProps = _objectWithoutPropertiesLoose(props, _excluded);
		return _extends({}, innerProps);
		};
		//# sourceMappingURL=utils.js.map

package.json

		{
		"name": "chakra-react-select",
		"version": "4.3.0",
		"version": "4.4.0",
		"description": "A Chakra UI wrapper for the popular library React Select",
		@@ -49,3 +49,3 @@ "license": "MIT",
		"dependencies": {
		"react-select": "^5.5.0"
		"react-select": "^5.5.7"
		},
		@@ -65,3 +65,3 @@ "peerDependencies": {
		"@babel/cli": "^7.19.3",
		"@babel/core": "^7.19.3",
		"@babel/core": "^7.19.6",
		"@babel/plugin-proposal-class-properties": "^7.18.6",
		@@ -74,15 +74,15 @@ "@babel/preset-env": "^7.19.4",
		"@chakra-ui/icon": "^3.0.11",
		"@chakra-ui/layout": "^2.1.8",
		"@chakra-ui/menu": "^2.1.1",
		"@chakra-ui/layout": "^2.1.9",
		"@chakra-ui/menu": "^2.1.2",
		"@chakra-ui/spinner": "^2.0.10",
		"@chakra-ui/system": "^2.2.12",
		"@emotion/react": "^11.10.4",
		"@emotion/styled": "^11.10.4",
		"@trivago/prettier-plugin-sort-imports": "^3.3.0",
		"@types/react": "^18.0.21",
		"@typescript-eslint/eslint-plugin": "^5.40.0",
		"@typescript-eslint/parser": "^5.40.0",
		"concurrently": "^7.4.0",
		"@chakra-ui/system": "^2.3.0",
		"@emotion/react": "^11.10.5",
		"@emotion/styled": "^11.10.5",
		"@trivago/prettier-plugin-sort-imports": "^3.4.0",
		"@types/react": "^18.0.24",
		"@typescript-eslint/eslint-plugin": "^5.41.0",
		"@typescript-eslint/parser": "^5.41.0",
		"concurrently": "^7.5.0",
		"cross-env": "^7.0.3",
		"eslint": "^8.25.0",
		"eslint": "^8.26.0",
		"eslint-config-airbnb": "^19.0.4",
		@@ -89,0 +89,0 @@ "eslint-config-airbnb-typescript": "^17.0.0",

README.md

		@@ -109,2 +109,4 @@ [cs-ts-demo]: https://img.shields.io/badge/CodeSandbox-TypeScript-047bd4?logo=codesandbox&style=for-the-badge&labelColor=040404&logoColor=DBDBDB "CodeSandbox TypeScript Demo"

		If no `size` is passed, it will default to `defaultProps.size` from the theme for Chakra's `Input` component. If your component theme for `Input` is not modified, it will be `md`.

		```js
		@@ -283,2 +285,4 @@ return (

		If no `variant` is passed, it will default to `defaultProps.variant` from the theme for Chakra's `Input` component. If your component theme for `Input` is not modified, it will be `outline`.

		```js
		@@ -499,18 +503,21 @@ return (

		As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package. Here is a list of all components that will be affected by changes to your global styles:
		As mentioned above, a few of the custom components this package implements either use styles from the global [Chakra component theme](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-component-styles) or are themselves those components. As this package pulls directly from your Chakra theme, any changes you make to those components' themes will propagate to the components in this package.

		\| `react-select` component \| `chakra-ui` component styles \|
		\| ------------------------ \| --------------------------------------------------------------------------------------------------------------- \|
		\| `ClearIndicator` \| [`CloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/close-button.ts) \|
		\| `Control` \| [`Input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/input.ts) \|
		\| `DropdownIndicator` \| [`InputRightAddon`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/input.ts) \|
		\| `GroupHeading` \| [`Menu` group title](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts) \|
		\| `IndicatorSeparator` \| [`Divider`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/divider.ts) \|
		\| `LoadingIndicator` \| [`Spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/spinner.ts) \|
		\| `MenuList` \| [`MenuList`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts) \|
		\| `MultiValueContainer` \| [`Tag`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts) \|
		\| `MultiValueLabel` \| [`TagLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts) \|
		\| `MultiValueRemove` \| [`TagCloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/tag.ts) \|
		\| `Option` \| [`MenuItem`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/theme/src/components/menu.ts) \|
		NOTE: Some of the theme styles are manually overridden when this package implements them. This is necessary for implementing styles for [`size`](#size--options-sm--md--lg--default-md) variants in components that do not natively have them in Chakra's default theme. This mostly concerns components that make up the `Menu`, but there are a few other cases where this exception applies. There is no alternative to this currently, so if your custom theme styles are not being applied correctly please use [`chakraStyles`](#chakrastyles) to style your components instead. `chakraStyles` always takes highest priority in overriding the styles of a component. See #194 for more info.

		Here is a list of all components that will be affected by changes to your theme:

		\| `react-select` component \| `chakra-ui` component styles \|
		\| ------------------------ \| -------------------------------------------------------------------------------------------------------------------------- \|
		\| `ClearIndicator` \| [`CloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/close-button.ts) \|
		\| `Control` \| [`Input`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts) \|
		\| `DropdownIndicator` \| [`InputRightAddon`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts) \|
		\| `GroupHeading` \| [`Menu` group title](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts) \|
		\| `LoadingIndicator` \| [`Spinner`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/spinner.ts) \|
		\| `MenuList` \| [`MenuList`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts) \|
		\| `MultiValueContainer` \| [`Tag`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts) \|
		\| `MultiValueLabel` \| [`TagLabel`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts) \|
		\| `MultiValueRemove` \| [`TagCloseButton`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts) \|
		\| `Option` \| [`MenuItem`](https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts) \|

		In addition to specific component styles, any changes you make to your global color scheme will also be reflected in these custom components.
		@@ -517,0 +524,0 @@

dist/cjs/async-creatable-select.js.map