chakra-react-select - npm Package Compare versions

chakra-react-select

Package Overview

Dependencies

128

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 4.7.5 to 5.0.0-rc.0

dist/cjs/anatomy.js

dist/cjs/anatomy.js.map

dist/esm/anatomy.js

dist/esm/anatomy.js.map

dist/types/anatomy.d.ts

dist/cjs/chakra-components/containers.js

		@@ -8,3 +8,2 @@ "use strict";
		var _system = require("@chakra-ui/system");
		var _utils = require("../utils");
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		@@ -20,3 +19,5 @@ 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); }
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		@@ -27,3 +28,3 @@ position: "relative",
		cursor: "not-allowed"
		} : {});
		} : {}, crsStyles.container);
		var sx = chakraStyles != null && chakraStyles.container ? chakraStyles.container(initialSx, props) : initialSx;
		@@ -46,20 +47,11 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		controlShouldRenderValue = _props$selectProps.controlShouldRenderValue;
		var size = (0, _utils.useSize)(sizeProp);
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		controlShouldRenderValue = selectProps.controlShouldRenderValue;

		// Getting the css from input instead of select
		// Getting the styles from input instead of select
		// to fit better with each of the variants
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var initialSx = {
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", _extends({}, selectProps, props));
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: isMulti && hasValue && controlShouldRenderValue ? "flex" : "grid",
		@@ -74,3 +66,3 @@ alignItems: "center",
		overflow: "hidden"
		};
		}, crsStyles.valueContainer);
		var sx = chakraStyles != null && chakraStyles.valueContainer ? chakraStyles.valueContainer(initialSx, props) : initialSx;
		@@ -91,4 +83,6 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: "flex",
		@@ -98,3 +92,3 @@ alignItems: "center",
		flexShrink: 0
		};
		}, crsStyles.indicatorsContainer);
		var sx = chakraStyles != null && chakraStyles.indicatorsContainer ? chakraStyles.indicatorsContainer(initialSx, props) : initialSx;
		@@ -101,0 +95,0 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {

124

dist/cjs/chakra-components/control.js

		@@ -24,17 +24,7 @@ "use strict";
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly;
		var size = (0, _utils.useSize)(sizeProp);
		var _useMultiStyleConfig = (0, _system.useMultiStyleConfig)("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		}),
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		isInvalid = selectProps.isInvalid,
		isReadOnly = selectProps.isReadOnly;
		var _useMultiStyleConfig = (0, _system.useMultiStyleConfig)("Input", _extends({}, selectProps, props)),
		_useMultiStyleConfig$ = _useMultiStyleConfig.field,
		@@ -44,2 +34,3 @@ height = _useMultiStyleConfig$.height,
		fieldStyles = _objectWithoutPropertiesLoose(_useMultiStyleConfig$, _excluded);
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));

		@@ -66,3 +57,3 @@ /**
		pointerEvents: "none"
		} : {});
		} : {}, crsStyles.control);
		var sx = chakraStyles != null && chakraStyles.control ? chakraStyles.control(initialSx, props) : initialSx;
		@@ -79,7 +70,6 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({
		}, innerProps, {
		"data-focus": isFocused ? true : undefined,
		"data-focus-visible": isFocused ? true : undefined,
		"data-invalid": isInvalid ? true : undefined,
		"data-disabled": isDisabled ? true : undefined,
		"aria-readonly": isReadOnly ? true : undefined
		"data-readonly": isReadOnly ? true : undefined
		}), children);
		@@ -90,11 +80,9 @@ };
		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		opacity: 1
		}, useBasicStyles \|\| variant !== "outline" ? {
		opacity: 1,
		display: "none"
		} : {});
		}, crsStyles.indicatorSeparator);
		var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialSx, props) : initialSx;
		@@ -113,6 +101,11 @@ return /#__PURE__/_react["default"].createElement(_layout.Divider, {
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
		*/
		var DownChevron = exports.DownChevron = function DownChevron(props) {
		return /#__PURE__/_react["default"].createElement(_icon.Icon, props, /#__PURE__/_react["default"].createElement("path", {
		return /#__PURE__/_react["default"].createElement(_icon.Icon, _extends({
		role: "presentation",
		focusable: "false",
		"aria-hidden": "true"
		}, props), /#__PURE__/_react["default"].createElement("path", {
		fill: "currentColor",
		@@ -127,23 +120,6 @@ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		sizeProp = _props$selectProps3.size,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor,
		variant = _props$selectProps3.variant;
		var size = (0, _utils.useSize)(sizeProp);
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var iconSizes = {
		sm: "16px",
		md: "20px",
		lg: "24px"
		};
		var iconSize = iconSizes[size];
		var initialSx = _extends({}, inputStyles.addon, {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: "flex",
		@@ -153,19 +129,13 @@ alignItems: "center",
		height: "100%",
		borderRadius: 0,
		borderWidth: 0,
		fontSize: iconSize
		}, useBasicStyles && {
		background: "transparent",
		padding: 0,
		width: 6,
		marginRight: 2,
		marginLeft: 1,
		cursor: "inherit"
		});
		var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		var initialIconStyles = {
		fontSize: "xl"
		}, crsStyles.dropdownIndicator);
		var dropdownIndicatorSx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		var initialIconStyles = _extends({
		height: "1em",
		width: "1em"
		};
		var iconSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
		}, crsStyles.downChevron);
		var downChevronSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		@@ -176,5 +146,5 @@ className: cx({
		}, className),
		sx: sx
		sx: dropdownIndicatorSx
		}), children \|\| /#__PURE__/_react["default"].createElement(DownChevron, {
		sx: iconSx
		sx: downChevronSx
		}));
		@@ -186,3 +156,3 @@ };
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
		*/
		@@ -203,9 +173,6 @@ var CrossIcon = exports.CrossIcon = function CrossIcon(props) {
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		chakraStyles = _props$selectProps4.chakraStyles,
		sizeProp = _props$selectProps4.size;
		var size = (0, _utils.useSize)(sizeProp);
		var closeButtonStyles = (0, _system.useStyleConfig)("CloseButton", {
		size: size
		});
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var closeButtonStyles = (0, _system.useStyleConfig)("CloseButton", selectProps);
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, closeButtonStyles, {
		@@ -218,8 +185,8 @@ marginX: 1,
		cursor: "pointer"
		});
		}, crsStyles.clearIndicator);
		var sx = chakraStyles != null && chakraStyles.clearIndicator ? chakraStyles.clearIndicator(initialSx, props) : initialSx;
		var initialIconStyles = {
		var initialIconStyles = _extends({
		width: "1em",
		height: "1em"
		};
		}, crsStyles.crossIcon);
		var iconSx = chakraStyles != null && chakraStyles.crossIcon ? chakraStyles.crossIcon(initialIconStyles, props) : initialIconStyles;
		@@ -242,5 +209,3 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		chakraStyles = _props$selectProps5.chakraStyles,
		sizeProp = _props$selectProps5.size,
		selectProps = props.selectProps,
		color = props.color,
		@@ -251,2 +216,4 @@ emptyColor = props.emptyColor,
		propsSpinnerSize = props.spinnerSize;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = (0, _utils.useSize)(sizeProp);
		@@ -259,5 +226,6 @@ var spinnerSizes = {
		var spinnerSize = spinnerSizes[size];
		var initialSx = {
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		marginRight: 3
		};
		}, crsStyles.loadingIndicator);
		var sx = chakraStyles != null && chakraStyles.loadingIndicator ? chakraStyles.loadingIndicator(initialSx, props) : initialSx;
		@@ -264,0 +232,0 @@ return /#__PURE__/_react["default"].createElement(_spinner.Spinner, _extends({

dist/cjs/chakra-components/input.js

		@@ -17,6 +17,6 @@ "use strict";
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		isReadOnly = selectProps.isReadOnly,
		isRequired = selectProps.isRequired;
		var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
		@@ -36,3 +36,4 @@ innerRef = _cleanCommonProps.innerRef,
		};
		var initialContainerSx = {
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialContainerSx = _extends({
		flex: "1 1 auto",
		@@ -55,3 +56,3 @@ display: "inline-grid",
		}, spacingSx)
		};
		}, crsStyles.inputContainer);
		var containerSx = chakraStyles != null && chakraStyles.inputContainer ? chakraStyles.inputContainer(initialContainerSx, props) : initialContainerSx;
		@@ -62,3 +63,3 @@ var initialInputSx = _extends({
		width: "100%"
		}, spacingSx);
		}, spacingSx, crsStyles.input);
		var inputSx = chakraStyles != null && chakraStyles.input ? chakraStyles.input(initialInputSx, props) : initialInputSx;
		@@ -65,0 +66,0 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, {

146

dist/cjs/chakra-components/menu.js

		@@ -10,3 +10,5 @@ "use strict";
		var _utils = require("../utils");
		var _excluded = ["data"];
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		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; }
		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); }
		@@ -21,3 +23,3 @@ var alignToControl = function alignToControl(placement) {
		var Menu = function Menu(props) {
		var _initialSx;
		var _extends2;
		var className = props.className,
		@@ -29,6 +31,8 @@ cx = props.cx,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = (_initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends((_extends2 = {
		position: "absolute"
		}, _initialSx[alignToControl(placement)] = "100%", _initialSx.marginY = "8px", _initialSx.width = "100%", _initialSx.zIndex = 1, _initialSx);
		}, _extends2[alignToControl(placement)] = "100%", _extends2.marginY = "8px", _extends2.width = "100%", _extends2.zIndex = 1, _extends2), crsStyles.menu);
		var sx = chakraStyles != null && chakraStyles.menu ? chakraStyles.menu(initialSx, props) : initialSx;
		@@ -53,9 +57,5 @@ return /#__PURE__/_react["default"].createElement(_menu.Menu, null, /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu");
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu", _extends({}, selectProps, props));

		@@ -65,10 +65,4 @@ // We're pulling in the border radius from the theme for the input component
		// was changed to being pulled from a theme variable instead of being hardcoded
		var size = (0, _utils.useSize)(sizeProp);
		var inputStyles = (0, _system.useMultiStyleConfig)("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var fieldStyles = inputStyles.field;
		var fieldStyles = (0, _system.useMultiStyleConfig)("Input", _extends({}, selectProps, props)).field;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuStyles.list, {
		@@ -84,5 +78,6 @@ minW: "100%",
		WebkitOverflowScrolling: "touch"
		});
		}, crsStyles.menuList);
		var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		role: "listbox",
		className: cx({
		@@ -101,5 +96,5 @@ "menu-list": true,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		sizeProp = _props$selectProps2.size;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = (0, _utils.useSize)(sizeProp);
		@@ -111,3 +106,4 @@ var verticalPaddings = {
		};
		var initialSx = {
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		color: "chakra-subtle-text",
		@@ -117,3 +113,3 @@ textAlign: "center",
		fontSize: size
		};
		}, crsStyles.loadingMessage);
		var sx = chakraStyles != null && chakraStyles.loadingMessage ? chakraStyles.loadingMessage(initialSx, props) : initialSx;
		@@ -133,5 +129,5 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		sizeProp = _props$selectProps3.size;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = (0, _utils.useSize)(sizeProp);
		@@ -143,3 +139,4 @@ var verticalPaddings = {
		};
		var initialSx = {
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		color: "chakra-subtle-text",
		@@ -149,3 +146,3 @@ textAlign: "center",
		fontSize: size
		};
		}, crsStyles.noOptionsMessage);
		var sx = chakraStyles != null && chakraStyles.noOptionsMessage ? chakraStyles.noOptionsMessage(initialSx, props) : initialSx;
		@@ -173,3 +170,5 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		var chakraStyles = selectProps.chakraStyles;
		var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = crsStyles.group \|\| {};
		var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group(initialSx, props) : initialSx;
		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		@@ -191,8 +190,9 @@ className: cx({
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		chakraStyles = _props$selectProps4.chakraStyles,
		sizeProp = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu");
		selectProps = props.selectProps;
		var _cleanCommonProps = (0, _utils.cleanCommonProps)(props),
		data = _cleanCommonProps.data,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var menuStyles = (0, _system.useMultiStyleConfig)("Menu", _extends({}, selectProps, props));
		var size = (0, _utils.useSize)(sizeProp);
		@@ -209,14 +209,10 @@ var fontSizes = {
		};
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuStyles.groupTitle, {
		fontSize: fontSizes[size],
		padding: paddings[size],
		margin: 0,
		borderBottomWidth: hasStickyGroupHeaders ? "1px" : 0,
		position: hasStickyGroupHeaders ? "sticky" : "static",
		top: -2,
		bg: menuStyles.list.bg,
		zIndex: 1
		});
		margin: 0
		}, crsStyles.groupHeading);
		var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
		return /#__PURE__/_react["default"].createElement(_layout.Box, {
		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		className: cx({
		@@ -226,3 +222,3 @@ "group-heading": true
		sx: sx
		}, children);
		}));
		};
		@@ -254,16 +250,21 @@
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		chakraStyles = _props$selectProps5.chakraStyles,
		sizeProp = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColorScheme = _props$selectProps5.selectedOptionColorScheme;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size,
		isMulti = selectProps.isMulti,
		hideSelectedOptions = selectProps.hideSelectedOptions,
		selectedOptionStyle = selectProps.selectedOptionStyle,
		selectedOptionColorScheme = selectProps.selectedOptionColorScheme;
		var size = (0, _utils.useSize)(sizeProp);
		var menuItemStyles = (0, _system.useMultiStyleConfig)("Menu").item;
		var paddings = {
		sm: "0.3rem 0.6rem",
		md: "0.4rem 0.8rem",
		lg: "0.5rem 1rem"
		var menuItemStyles = (0, _system.useMultiStyleConfig)("Menu", selectProps).item;
		var horizontalPaddingOptions = {
		sm: "0.6rem",
		md: "0.8rem",
		lg: "1rem"
		};
		var verticalPaddingOptions = {
		sm: "0.3rem",
		md: "0.4rem",
		lg: "0.5rem"
		};

		@@ -281,3 +282,4 @@ /**
		var showCheckIcon = selectedOptionStyle === "check" && (!isMulti \|\| hideSelectedOptions === false);
		var shouldHighlight = selectedOptionStyle === "color" && isSelected;
		var shouldHighlight = selectedOptionStyle === "color";
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuItemStyles, {
		@@ -289,15 +291,16 @@ display: "flex",
		fontSize: size,
		padding: paddings[size]
		}, isFocused && menuItemStyles._focus, shouldHighlight && {
		bg: selectedBg,
		color: selectedColor,
		_active: {
		bg: selectedBg
		paddingX: horizontalPaddingOptions[size],
		paddingY: verticalPaddingOptions[size]
		}, shouldHighlight && {
		_selected: {
		bg: selectedBg,
		color: selectedColor,
		_active: {
		bg: selectedBg
		}
		}
		}, isDisabled && menuItemStyles._disabled, isDisabled && {
		_active: {}
		});
		}, crsStyles.option);
		var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
		return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {
		role: "button",
		role: "option",
		className: cx({
		@@ -311,4 +314,5 @@ option: true,
		ref: innerRef,
		"data-disabled": isDisabled ? true : undefined,
		"aria-disabled": isDisabled ? true : undefined
		"data-focus": isFocused ? true : undefined,
		"aria-disabled": isDisabled ? true : undefined,
		"aria-selected": isSelected
		}), showCheckIcon && /#__PURE__/_react["default"].createElement(_menu.MenuIcon, {
		@@ -315,0 +319,0 @@ fontSize: "0.8em",

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

		@@ -9,3 +9,2 @@ "use strict";
		var _system = require("@chakra-ui/system");
		var _utils = require("../utils");
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		@@ -39,5 +38,3 @@ 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); }
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		sizeProp = selectProps.size;
		var size = (0, _utils.useSize)(sizeProp);
		tagVariant = selectProps.tagVariant;
		var optionColorScheme = "";
		@@ -55,7 +52,7 @@ var optionVariant = "";
		}
		var tagStyles = (0, _system.useMultiStyleConfig)("Tag", {
		size: size,
		var tagStyles = (0, _system.useMultiStyleConfig)("Tag", _extends({}, selectProps, props, {
		colorScheme: optionColorScheme \|\| colorScheme,
		variant: optionVariant \|\| tagVariant \|\| (optionIsFixed ? "solid" : "subtle")
		});
		}));
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var containerInitialSx = _extends({}, tagStyles.container, {
		@@ -67,3 +64,3 @@ display: "flex",
		margin: "0.125rem"
		});
		}, crsStyles.multiValue);
		var containerSx = chakraStyles != null && chakraStyles.multiValue ? chakraStyles.multiValue(containerInitialSx, props) : containerInitialSx;
		@@ -74,3 +71,3 @@ var labelInitialSx = _extends({}, tagStyles.label, {
		whiteSpace: "nowrap"
		});
		}, crsStyles.multiValueLabel);
		var labelSx = chakraStyles != null && chakraStyles.multiValueLabel ? chakraStyles.multiValueLabel(labelInitialSx, props) : labelInitialSx;
		@@ -81,3 +78,3 @@ var removeInitialSx = _extends({}, tagStyles.closeButton, {
		justifyContent: "center"
		});
		}, crsStyles.multiValueRemove);
		var removeSx = chakraStyles != null && chakraStyles.multiValueRemove ? chakraStyles.multiValueRemove(removeInitialSx, props) : removeInitialSx;
		@@ -159,3 +156,2 @@ return /#__PURE__/_react["default"].createElement(Container, {
		sx: sx,
		"data-focus": isFocused ? true : undefined,
		"data-focus-visible": isFocused ? true : undefined
		@@ -162,0 +158,0 @@ }), children \|\| /#__PURE__/_react["default"].createElement(TagCloseIcon, null));

dist/cjs/chakra-components/placeholder.js

		@@ -7,2 +7,3 @@ "use strict";
		var _layout = require("@chakra-ui/layout");
		var _system = require("@chakra-ui/system");
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		@@ -15,4 +16,6 @@ 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); }
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		gridArea: "1 / 1 / 2 / 3",
		@@ -22,3 +25,3 @@ color: "chakra-placeholder-color",
		userSelect: "none"
		};
		}, crsStyles.placeholder);
		var sx = chakraStyles != null && chakraStyles.placeholder ? chakraStyles.placeholder(initialSx, props) : initialSx;
		@@ -25,0 +28,0 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({}, innerProps, {

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

		@@ -7,2 +7,3 @@ "use strict";
		var _layout = require("@chakra-ui/layout");
		var _system = require("@chakra-ui/system");
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		@@ -16,4 +17,6 @@ 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); }
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = (0, _system.useMultiStyleConfig)("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		gridArea: "1 / 1 / 2 / 3",
		@@ -25,3 +28,3 @@ mx: "0.125rem",
		whiteSpace: "nowrap"
		};
		}, crsStyles.singleValue);
		var sx = chakraStyles != null && chakraStyles.singleValue ? chakraStyles.singleValue(initialSx, props) : initialSx;
		@@ -28,0 +31,0 @@ return /#__PURE__/_react["default"].createElement(_layout.Box, _extends({

dist/cjs/index.js

		@@ -11,6 +11,7 @@ "use strict";
		useChakraSelectProps: true,
		chakraReactSelectAnatomy: true,
		useAsync: true,
		useCreatable: true
		};
		exports.useCreatable = exports.useChakraSelectProps = exports.useAsync = exports.chakraComponents = exports.Select = exports.CreatableSelect = exports.AsyncSelect = exports.AsyncCreatableSelect = void 0;
		exports.useCreatable = exports.useChakraSelectProps = exports.useAsync = exports.chakraReactSelectAnatomy = exports.chakraComponents = exports.Select = exports.CreatableSelect = exports.AsyncSelect = exports.AsyncCreatableSelect = void 0;
		require("./module-augmentation");
		@@ -29,2 +30,4 @@ var _select = _interopRequireDefault(require("./select/select"));
		exports.useChakraSelectProps = _useChakraSelectProps["default"];
		var _anatomy = _interopRequireDefault(require("./anatomy"));
		exports.chakraReactSelectAnatomy = _anatomy["default"];
		var _reactSelect = require("react-select");
		@@ -31,0 +34,0 @@ Object.keys(_reactSelect).forEach(function (key) {

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

		@@ -8,3 +8,3 @@ "use strict";
		var _chakraComponents = _interopRequireDefault(require("./chakra-components"));
		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "required", "isRequired", "inputId", "tagVariant", "selectedOptionStyle", "selectedOptionColorScheme", "selectedOptionColor", "variant", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur", "menuIsOpen"];
		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "required", "isRequired", "inputId", "tagVariant", "selectedOptionStyle", "selectedOptionColorScheme", "variant", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur", "menuIsOpen"];
		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
		@@ -14,3 +14,3 @@ 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 useChakraSelectProps = function useChakraSelectProps(_ref) {
		var _props$ariaInvalid;
		var _chakraTheme$componen, _ref3, _props$ariaInvalid;
		var _ref$components = _ref.components,
		@@ -31,4 +31,4 @@ components = _ref$components === void 0 ? {} : _ref$components,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		selectedOptionColorScheme = _ref.selectedOptionColorScheme,
		selectedOptionColor = _ref.selectedOptionColor,
		_ref$selectedOptionCo = _ref.selectedOptionColorScheme,
		selectedOptionColorScheme = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		variant = _ref.variant,
		@@ -44,3 +44,6 @@ focusBorderColor = _ref.focusBorderColor,
		var chakraTheme = (0, _system.useTheme)();
		var defaultVariant = chakraTheme.components.Input.defaultProps.variant;
		var defaultInputVariant = chakraTheme.components.Input.defaultProps.variant;
		var _ref2 = ((_chakraTheme$componen = chakraTheme.components.ChakraReactSelect) == null ? void 0 : _chakraTheme$componen.defaultProps) \|\| {},
		defaultVariant = _ref2.variant,
		defaultSize = _ref2.size;

		@@ -69,8 +72,2 @@ // Combine the props passed into the component with the props that can be set
		}

		// Ensure that the color used for the selected options is a string
		var realSelectedOptionColorScheme = selectedOptionColorScheme \|\| selectedOptionColor \|\| "blue";
		if (typeof realSelectedOptionColorScheme !== "string") {
		realSelectedOptionColorScheme = "blue";
		}
		var select = _extends({
		@@ -81,7 +78,7 @@ // Allow overriding of custom components
		colorScheme: colorScheme,
		size: size,
		tagVariant: tagVariant,
		selectedOptionStyle: realSelectedOptionStyle,
		selectedOptionColorScheme: realSelectedOptionColorScheme,
		variant: variant != null ? variant : defaultVariant,
		selectedOptionColorScheme: selectedOptionColorScheme,
		size: size != null ? size : defaultSize,
		variant: (_ref3 = variant != null ? variant : defaultVariant) != null ? _ref3 : defaultInputVariant,
		chakraStyles: chakraStyles,
		@@ -88,0 +85,0 @@ focusBorderColor: focusBorderColor,

dist/cjs/utils.js

		@@ -15,3 +15,3 @@ "use strict";
		*
		* @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
		* @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
		*/
		@@ -18,0 +18,0 @@ var cleanCommonProps = exports.cleanCommonProps = function cleanCommonProps(props) {

dist/esm/chakra-components/containers.js

		@@ -5,3 +5,2 @@ 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 { useMultiStyleConfig } from "@chakra-ui/system";
		import { useSize } from "../utils";
		export var SelectContainer = function SelectContainer(props) {
		@@ -15,3 +14,5 @@ var children = props.children,
		hasValue = props.hasValue,
		chakraStyles = props.selectProps.chakraStyles;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		@@ -22,3 +23,3 @@ position: "relative",
		cursor: "not-allowed"
		} : {});
		} : {}, crsStyles.container);
		var sx = chakraStyles != null && chakraStyles.container ? chakraStyles.container(initialSx, props) : initialSx;
		@@ -41,20 +42,11 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		controlShouldRenderValue = _props$selectProps.controlShouldRenderValue;
		var size = useSize(sizeProp);
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		controlShouldRenderValue = selectProps.controlShouldRenderValue;

		// Getting the css from input instead of select
		// Getting the styles from input instead of select
		// to fit better with each of the variants
		var inputStyles = useMultiStyleConfig("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var initialSx = {
		var inputStyles = useMultiStyleConfig("Input", _extends({}, selectProps, props));
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: isMulti && hasValue && controlShouldRenderValue ? "flex" : "grid",
		@@ -69,3 +61,3 @@ alignItems: "center",
		overflow: "hidden"
		};
		}, crsStyles.valueContainer);
		var sx = chakraStyles != null && chakraStyles.valueContainer ? chakraStyles.valueContainer(initialSx, props) : initialSx;
		@@ -86,4 +78,6 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: "flex",
		@@ -93,3 +87,3 @@ alignItems: "center",
		flexShrink: 0
		};
		}, crsStyles.indicatorsContainer);
		var sx = chakraStyles != null && chakraStyles.indicatorsContainer ? chakraStyles.indicatorsContainer(initialSx, props) : initialSx;
		@@ -96,0 +90,0 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {

124

dist/esm/chakra-components/control.js

		@@ -19,17 +19,7 @@ var _excluded = ["height", "h"];
		menuIsOpen = props.menuIsOpen,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor,
		isInvalid = _props$selectProps.isInvalid,
		isReadOnly = _props$selectProps.isReadOnly;
		var size = useSize(sizeProp);
		var _useMultiStyleConfig = useMultiStyleConfig("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		}),
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		isInvalid = selectProps.isInvalid,
		isReadOnly = selectProps.isReadOnly;
		var _useMultiStyleConfig = useMultiStyleConfig("Input", _extends({}, selectProps, props)),
		_useMultiStyleConfig$ = _useMultiStyleConfig.field,
		@@ -39,2 +29,3 @@ height = _useMultiStyleConfig$.height,
		fieldStyles = _objectWithoutPropertiesLoose(_useMultiStyleConfig$, _excluded);
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));

		@@ -61,3 +52,3 @@ /**
		pointerEvents: "none"
		} : {});
		} : {}, crsStyles.control);
		var sx = chakraStyles != null && chakraStyles.control ? chakraStyles.control(initialSx, props) : initialSx;
		@@ -74,7 +65,6 @@ return /#__PURE__/React.createElement(Box, _extends({
		}, innerProps, {
		"data-focus": isFocused ? true : undefined,
		"data-focus-visible": isFocused ? true : undefined,
		"data-invalid": isInvalid ? true : undefined,
		"data-disabled": isDisabled ? true : undefined,
		"aria-readonly": isReadOnly ? true : undefined
		"data-readonly": isReadOnly ? true : undefined
		}), children);
		@@ -85,11 +75,9 @@ };
		cx = props.cx,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		useBasicStyles = _props$selectProps2.useBasicStyles,
		variant = _props$selectProps2.variant;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		opacity: 1
		}, useBasicStyles \|\| variant !== "outline" ? {
		opacity: 1,
		display: "none"
		} : {});
		}, crsStyles.indicatorSeparator);
		var sx = chakraStyles != null && chakraStyles.indicatorSeparator ? chakraStyles.indicatorSeparator(initialSx, props) : initialSx;
		@@ -108,6 +96,11 @@ return /#__PURE__/React.createElement(Divider, {
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
		*/
		export var DownChevron = function DownChevron(props) {
		return /#__PURE__/React.createElement(Icon, props, /#__PURE__/React.createElement("path", {
		return /#__PURE__/React.createElement(Icon, _extends({
		role: "presentation",
		focusable: "false",
		"aria-hidden": "true"
		}, props), /#__PURE__/React.createElement("path", {
		fill: "currentColor",
		@@ -122,23 +115,6 @@ d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		useBasicStyles = _props$selectProps3.useBasicStyles,
		sizeProp = _props$selectProps3.size,
		focusBorderColor = _props$selectProps3.focusBorderColor,
		errorBorderColor = _props$selectProps3.errorBorderColor,
		variant = _props$selectProps3.variant;
		var size = useSize(sizeProp);
		var inputStyles = useMultiStyleConfig("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var iconSizes = {
		sm: "16px",
		md: "20px",
		lg: "24px"
		};
		var iconSize = iconSizes[size];
		var initialSx = _extends({}, inputStyles.addon, {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		display: "flex",
		@@ -148,19 +124,13 @@ alignItems: "center",
		height: "100%",
		borderRadius: 0,
		borderWidth: 0,
		fontSize: iconSize
		}, useBasicStyles && {
		background: "transparent",
		padding: 0,
		width: 6,
		marginRight: 2,
		marginLeft: 1,
		cursor: "inherit"
		});
		var sx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		var initialIconStyles = {
		fontSize: "xl"
		}, crsStyles.dropdownIndicator);
		var dropdownIndicatorSx = chakraStyles != null && chakraStyles.dropdownIndicator ? chakraStyles.dropdownIndicator(initialSx, props) : initialSx;
		var initialIconStyles = _extends({
		height: "1em",
		width: "1em"
		};
		var iconSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
		}, crsStyles.downChevron);
		var downChevronSx = chakraStyles != null && chakraStyles.downChevron ? chakraStyles.downChevron(initialIconStyles, props) : initialIconStyles;
		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		@@ -171,5 +141,5 @@ className: cx({
		}, className),
		sx: sx
		sx: dropdownIndicatorSx
		}), children \|\| /#__PURE__/React.createElement(DownChevron, {
		sx: iconSx
		sx: downChevronSx
		}));
		@@ -181,3 +151,3 @@ };
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
		*/
		@@ -198,9 +168,6 @@ export var CrossIcon = function CrossIcon(props) {
		innerProps = props.innerProps,
		_props$selectProps4 = props.selectProps,
		chakraStyles = _props$selectProps4.chakraStyles,
		sizeProp = _props$selectProps4.size;
		var size = useSize(sizeProp);
		var closeButtonStyles = useStyleConfig("CloseButton", {
		size: size
		});
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var closeButtonStyles = useStyleConfig("CloseButton", selectProps);
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, closeButtonStyles, {
		@@ -213,8 +180,8 @@ marginX: 1,
		cursor: "pointer"
		});
		}, crsStyles.clearIndicator);
		var sx = chakraStyles != null && chakraStyles.clearIndicator ? chakraStyles.clearIndicator(initialSx, props) : initialSx;
		var initialIconStyles = {
		var initialIconStyles = _extends({
		width: "1em",
		height: "1em"
		};
		}, crsStyles.crossIcon);
		var iconSx = chakraStyles != null && chakraStyles.crossIcon ? chakraStyles.crossIcon(initialIconStyles, props) : initialIconStyles;
		@@ -237,5 +204,3 @@ return /#__PURE__/React.createElement(Box, _extends({
		innerProps = props.innerProps,
		_props$selectProps5 = props.selectProps,
		chakraStyles = _props$selectProps5.chakraStyles,
		sizeProp = _props$selectProps5.size,
		selectProps = props.selectProps,
		color = props.color,
		@@ -246,2 +211,4 @@ emptyColor = props.emptyColor,
		propsSpinnerSize = props.spinnerSize;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = useSize(sizeProp);
		@@ -254,5 +221,6 @@ var spinnerSizes = {
		var spinnerSize = spinnerSizes[size];
		var initialSx = {
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		marginRight: 3
		};
		}, crsStyles.loadingIndicator);
		var sx = chakraStyles != null && chakraStyles.loadingIndicator ? chakraStyles.loadingIndicator(initialSx, props) : initialSx;
		@@ -259,0 +227,0 @@ return /#__PURE__/React.createElement(Spinner, _extends({

dist/esm/chakra-components/input.js

		@@ -6,3 +6,3 @@ var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
		import { Box } from "@chakra-ui/layout";
		import { chakra } from "@chakra-ui/system";
		import { chakra, useMultiStyleConfig } from "@chakra-ui/system";
		import { cleanCommonProps } from "../utils";
		@@ -13,6 +13,6 @@ var Input = function Input(props) {
		value = props.value,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		isReadOnly = _props$selectProps.isReadOnly,
		isRequired = _props$selectProps.isRequired;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		isReadOnly = selectProps.isReadOnly,
		isRequired = selectProps.isRequired;
		var _cleanCommonProps = cleanCommonProps(props),
		@@ -32,3 +32,4 @@ innerRef = _cleanCommonProps.innerRef,
		};
		var initialContainerSx = {
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialContainerSx = _extends({
		flex: "1 1 auto",
		@@ -51,3 +52,3 @@ display: "inline-grid",
		}, spacingSx)
		};
		}, crsStyles.inputContainer);
		var containerSx = chakraStyles != null && chakraStyles.inputContainer ? chakraStyles.inputContainer(initialContainerSx, props) : initialContainerSx;
		@@ -58,3 +59,3 @@ var initialInputSx = _extends({
		width: "100%"
		}, spacingSx);
		}, spacingSx, crsStyles.input);
		var inputSx = chakraStyles != null && chakraStyles.input ? chakraStyles.input(initialInputSx, props) : initialInputSx;
		@@ -61,0 +62,0 @@ return /#__PURE__/React.createElement(Box, {

148

dist/esm/chakra-components/menu.js

		@@ -0,1 +1,3 @@
		var _excluded = ["data"];
		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; }
		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); }
		@@ -6,3 +8,3 @@ import React from "react";
		import { useColorModeValue, useMultiStyleConfig } from "@chakra-ui/system";
		import { useSize } from "../utils";
		import { cleanCommonProps, useSize } from "../utils";
		var alignToControl = function alignToControl(placement) {
		@@ -16,3 +18,3 @@ var placementToCSSProp = {
		var Menu = function Menu(props) {
		var _initialSx;
		var _extends2;
		var className = props.className,
		@@ -24,6 +26,8 @@ cx = props.cx,
		placement = props.placement,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = (_initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends((_extends2 = {
		position: "absolute"
		}, _initialSx[alignToControl(placement)] = "100%", _initialSx.marginY = "8px", _initialSx.width = "100%", _initialSx.zIndex = 1, _initialSx);
		}, _extends2[alignToControl(placement)] = "100%", _extends2.marginY = "8px", _extends2.width = "100%", _extends2.zIndex = 1, _extends2), crsStyles.menu);
		var sx = chakraStyles != null && chakraStyles.menu ? chakraStyles.menu(initialSx, props) : initialSx;
		@@ -48,9 +52,5 @@ return /#__PURE__/React.createElement(ChakraMenu, null, /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps = props.selectProps,
		chakraStyles = _props$selectProps.chakraStyles,
		sizeProp = _props$selectProps.size,
		variant = _props$selectProps.variant,
		focusBorderColor = _props$selectProps.focusBorderColor,
		errorBorderColor = _props$selectProps.errorBorderColor;
		var menuStyles = useMultiStyleConfig("Menu");
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var menuStyles = useMultiStyleConfig("Menu", _extends({}, selectProps, props));

		@@ -60,10 +60,4 @@ // We're pulling in the border radius from the theme for the input component
		// was changed to being pulled from a theme variable instead of being hardcoded
		var size = useSize(sizeProp);
		var inputStyles = useMultiStyleConfig("Input", {
		size: size,
		variant: variant,
		focusBorderColor: focusBorderColor,
		errorBorderColor: errorBorderColor
		});
		var fieldStyles = inputStyles.field;
		var fieldStyles = useMultiStyleConfig("Input", _extends({}, selectProps, props)).field;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuStyles.list, {
		@@ -79,5 +73,6 @@ minW: "100%",
		WebkitOverflowScrolling: "touch"
		});
		}, crsStyles.menuList);
		var sx = chakraStyles != null && chakraStyles.menuList ? chakraStyles.menuList(initialSx, props) : initialSx;
		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		role: "listbox",
		className: cx({
		@@ -96,5 +91,5 @@ "menu-list": true,
		innerProps = props.innerProps,
		_props$selectProps2 = props.selectProps,
		chakraStyles = _props$selectProps2.chakraStyles,
		sizeProp = _props$selectProps2.size;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = useSize(sizeProp);
		@@ -106,3 +101,4 @@ var verticalPaddings = {
		};
		var initialSx = {
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		color: "chakra-subtle-text",
		@@ -112,3 +108,3 @@ textAlign: "center",
		fontSize: size
		};
		}, crsStyles.loadingMessage);
		var sx = chakraStyles != null && chakraStyles.loadingMessage ? chakraStyles.loadingMessage(initialSx, props) : initialSx;
		@@ -128,5 +124,5 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		innerProps = props.innerProps,
		_props$selectProps3 = props.selectProps,
		chakraStyles = _props$selectProps3.chakraStyles,
		sizeProp = _props$selectProps3.size;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var size = useSize(sizeProp);
		@@ -138,3 +134,4 @@ var verticalPaddings = {
		};
		var initialSx = {
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		color: "chakra-subtle-text",
		@@ -144,3 +141,3 @@ textAlign: "center",
		fontSize: size
		};
		}, crsStyles.noOptionsMessage);
		var sx = chakraStyles != null && chakraStyles.noOptionsMessage ? chakraStyles.noOptionsMessage(initialSx, props) : initialSx;
		@@ -168,3 +165,5 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		var chakraStyles = selectProps.chakraStyles;
		var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group({}, props) : {};
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = crsStyles.group \|\| {};
		var sx = chakraStyles != null && chakraStyles.group ? chakraStyles.group(initialSx, props) : initialSx;
		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		@@ -186,8 +185,9 @@ className: cx({
		className = props.className,
		children = props.children,
		_props$selectProps4 = props.selectProps,
		chakraStyles = _props$selectProps4.chakraStyles,
		sizeProp = _props$selectProps4.size,
		hasStickyGroupHeaders = _props$selectProps4.hasStickyGroupHeaders;
		var menuStyles = useMultiStyleConfig("Menu");
		selectProps = props.selectProps;
		var _cleanCommonProps = cleanCommonProps(props),
		data = _cleanCommonProps.data,
		innerProps = _objectWithoutPropertiesLoose(_cleanCommonProps, _excluded);
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size;
		var menuStyles = useMultiStyleConfig("Menu", _extends({}, selectProps, props));
		var size = useSize(sizeProp);
		@@ -204,14 +204,10 @@ var fontSizes = {
		};
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuStyles.groupTitle, {
		fontSize: fontSizes[size],
		padding: paddings[size],
		margin: 0,
		borderBottomWidth: hasStickyGroupHeaders ? "1px" : 0,
		position: hasStickyGroupHeaders ? "sticky" : "static",
		top: -2,
		bg: menuStyles.list.bg,
		zIndex: 1
		});
		margin: 0
		}, crsStyles.groupHeading);
		var sx = chakraStyles != null && chakraStyles.groupHeading ? chakraStyles.groupHeading(initialSx, props) : initialSx;
		return /#__PURE__/React.createElement(Box, {
		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		className: cx({
		@@ -221,3 +217,3 @@ "group-heading": true
		sx: sx
		}, children);
		}));
		};
		@@ -249,16 +245,21 @@
		isSelected = props.isSelected,
		_props$selectProps5 = props.selectProps,
		chakraStyles = _props$selectProps5.chakraStyles,
		sizeProp = _props$selectProps5.size,
		isMulti = _props$selectProps5.isMulti,
		hideSelectedOptions = _props$selectProps5.hideSelectedOptions,
		selectedOptionStyle = _props$selectProps5.selectedOptionStyle,
		selectedOptionColorScheme = _props$selectProps5.selectedOptionColorScheme;
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles,
		sizeProp = selectProps.size,
		isMulti = selectProps.isMulti,
		hideSelectedOptions = selectProps.hideSelectedOptions,
		selectedOptionStyle = selectProps.selectedOptionStyle,
		selectedOptionColorScheme = selectProps.selectedOptionColorScheme;
		var size = useSize(sizeProp);
		var menuItemStyles = useMultiStyleConfig("Menu").item;
		var paddings = {
		sm: "0.3rem 0.6rem",
		md: "0.4rem 0.8rem",
		lg: "0.5rem 1rem"
		var menuItemStyles = useMultiStyleConfig("Menu", selectProps).item;
		var horizontalPaddingOptions = {
		sm: "0.6rem",
		md: "0.8rem",
		lg: "1rem"
		};
		var verticalPaddingOptions = {
		sm: "0.3rem",
		md: "0.4rem",
		lg: "0.5rem"
		};

		@@ -276,3 +277,4 @@ /**
		var showCheckIcon = selectedOptionStyle === "check" && (!isMulti \|\| hideSelectedOptions === false);
		var shouldHighlight = selectedOptionStyle === "color" && isSelected;
		var shouldHighlight = selectedOptionStyle === "color";
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({}, menuItemStyles, {
		@@ -284,15 +286,16 @@ display: "flex",
		fontSize: size,
		padding: paddings[size]
		}, isFocused && menuItemStyles._focus, shouldHighlight && {
		bg: selectedBg,
		color: selectedColor,
		_active: {
		bg: selectedBg
		paddingX: horizontalPaddingOptions[size],
		paddingY: verticalPaddingOptions[size]
		}, shouldHighlight && {
		_selected: {
		bg: selectedBg,
		color: selectedColor,
		_active: {
		bg: selectedBg
		}
		}
		}, isDisabled && menuItemStyles._disabled, isDisabled && {
		_active: {}
		});
		}, crsStyles.option);
		var sx = chakraStyles != null && chakraStyles.option ? chakraStyles.option(initialSx, props) : initialSx;
		return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {
		role: "button",
		role: "option",
		className: cx({
		@@ -306,4 +309,5 @@ option: true,
		ref: innerRef,
		"data-disabled": isDisabled ? true : undefined,
		"aria-disabled": isDisabled ? true : undefined
		"data-focus": isFocused ? true : undefined,
		"aria-disabled": isDisabled ? true : undefined,
		"aria-selected": isSelected
		}), showCheckIcon && /#__PURE__/React.createElement(MenuIcon, {
		@@ -310,0 +314,0 @@ fontSize: "0.8em",

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

		@@ -6,3 +6,2 @@ 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 { chakra, useMultiStyleConfig } from "@chakra-ui/system";
		import { useSize } from "../utils";
		var hasColorScheme = function hasColorScheme(option) {
		@@ -34,5 +33,3 @@ return typeof option === "object" && option !== null && "colorScheme" in option && typeof option.colorScheme === "string";
		colorScheme = selectProps.colorScheme,
		tagVariant = selectProps.tagVariant,
		sizeProp = selectProps.size;
		var size = useSize(sizeProp);
		tagVariant = selectProps.tagVariant;
		var optionColorScheme = "";
		@@ -50,7 +47,7 @@ var optionVariant = "";
		}
		var tagStyles = useMultiStyleConfig("Tag", {
		size: size,
		var tagStyles = useMultiStyleConfig("Tag", _extends({}, selectProps, props, {
		colorScheme: optionColorScheme \|\| colorScheme,
		variant: optionVariant \|\| tagVariant \|\| (optionIsFixed ? "solid" : "subtle")
		});
		}));
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var containerInitialSx = _extends({}, tagStyles.container, {
		@@ -62,3 +59,3 @@ display: "flex",
		margin: "0.125rem"
		});
		}, crsStyles.multiValue);
		var containerSx = chakraStyles != null && chakraStyles.multiValue ? chakraStyles.multiValue(containerInitialSx, props) : containerInitialSx;
		@@ -69,3 +66,3 @@ var labelInitialSx = _extends({}, tagStyles.label, {
		whiteSpace: "nowrap"
		});
		}, crsStyles.multiValueLabel);
		var labelSx = chakraStyles != null && chakraStyles.multiValueLabel ? chakraStyles.multiValueLabel(labelInitialSx, props) : labelInitialSx;
		@@ -76,3 +73,3 @@ var removeInitialSx = _extends({}, tagStyles.closeButton, {
		justifyContent: "center"
		});
		}, crsStyles.multiValueRemove);
		var removeSx = chakraStyles != null && chakraStyles.multiValueRemove ? chakraStyles.multiValueRemove(removeInitialSx, props) : removeInitialSx;
		@@ -154,3 +151,2 @@ return /#__PURE__/React.createElement(Container, {
		sx: sx,
		"data-focus": isFocused ? true : undefined,
		"data-focus-visible": isFocused ? true : undefined
		@@ -157,0 +153,0 @@ }), children \|\| /#__PURE__/React.createElement(TagCloseIcon, null));

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 { useMultiStyleConfig } from "@chakra-ui/system";
		var Placeholder = function Placeholder(props) {
		@@ -9,4 +10,6 @@ var children = props.children,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		gridArea: "1 / 1 / 2 / 3",
		@@ -16,3 +19,3 @@ color: "chakra-placeholder-color",
		userSelect: "none"
		};
		}, crsStyles.placeholder);
		var sx = chakraStyles != null && chakraStyles.placeholder ? chakraStyles.placeholder(initialSx, props) : initialSx;
		@@ -19,0 +22,0 @@ return /#__PURE__/React.createElement(Box, _extends({}, innerProps, {

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";
		import { useMultiStyleConfig } from "@chakra-ui/system";
		var SingleValue = function SingleValue(props) {
		@@ -10,4 +11,6 @@ var children = props.children,
		innerProps = props.innerProps,
		chakraStyles = props.selectProps.chakraStyles;
		var initialSx = {
		selectProps = props.selectProps;
		var chakraStyles = selectProps.chakraStyles;
		var crsStyles = useMultiStyleConfig("ChakraReactSelect", _extends({}, selectProps, props));
		var initialSx = _extends({
		gridArea: "1 / 1 / 2 / 3",
		@@ -19,3 +22,3 @@ mx: "0.125rem",
		whiteSpace: "nowrap"
		};
		}, crsStyles.singleValue);
		var sx = chakraStyles != null && chakraStyles.singleValue ? chakraStyles.singleValue(initialSx, props) : initialSx;
		@@ -22,0 +25,0 @@ return /#__PURE__/React.createElement(Box, _extends({

dist/esm/index.js

		@@ -8,2 +8,3 @@ import "./module-augmentation";
		export { default as useChakraSelectProps } from "./use-chakra-select-props";
		export { default as chakraReactSelectAnatomy } from "./anatomy";
		// Forward all available exports from the original `react-select` package
		@@ -10,0 +11,0 @@ export * from "react-select";

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

		@@ -1,2 +0,2 @@
		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "required", "isRequired", "inputId", "tagVariant", "selectedOptionStyle", "selectedOptionColorScheme", "selectedOptionColor", "variant", "focusBorderColor", "errorBorderColor", "chakraStyles", "onFocus", "onBlur", "menuIsOpen"];
		var _excluded = ["components", "theme", "size", "colorScheme", "isDisabled", "isInvalid", "isReadOnly", "required", "isRequired", "inputId", "tagVariant", "selectedOptionStyle", "selectedOptionColorScheme", "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); }
		@@ -8,3 +8,3 @@ 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 _chakraTheme$componen, _ref3, _props$ariaInvalid;
		var _ref$components = _ref.components,
		@@ -25,4 +25,4 @@ components = _ref$components === void 0 ? {} : _ref$components,
		selectedOptionStyle = _ref$selectedOptionSt === void 0 ? "color" : _ref$selectedOptionSt,
		selectedOptionColorScheme = _ref.selectedOptionColorScheme,
		selectedOptionColor = _ref.selectedOptionColor,
		_ref$selectedOptionCo = _ref.selectedOptionColorScheme,
		selectedOptionColorScheme = _ref$selectedOptionCo === void 0 ? "blue" : _ref$selectedOptionCo,
		variant = _ref.variant,
		@@ -38,3 +38,6 @@ focusBorderColor = _ref.focusBorderColor,
		var chakraTheme = useTheme();
		var defaultVariant = chakraTheme.components.Input.defaultProps.variant;
		var defaultInputVariant = chakraTheme.components.Input.defaultProps.variant;
		var _ref2 = ((_chakraTheme$componen = chakraTheme.components.ChakraReactSelect) == null ? void 0 : _chakraTheme$componen.defaultProps) \|\| {},
		defaultVariant = _ref2.variant,
		defaultSize = _ref2.size;

		@@ -63,8 +66,2 @@ // Combine the props passed into the component with the props that can be set
		}

		// Ensure that the color used for the selected options is a string
		var realSelectedOptionColorScheme = selectedOptionColorScheme \|\| selectedOptionColor \|\| "blue";
		if (typeof realSelectedOptionColorScheme !== "string") {
		realSelectedOptionColorScheme = "blue";
		}
		var select = _extends({
		@@ -75,7 +72,7 @@ // Allow overriding of custom components
		colorScheme: colorScheme,
		size: size,
		tagVariant: tagVariant,
		selectedOptionStyle: realSelectedOptionStyle,
		selectedOptionColorScheme: realSelectedOptionColorScheme,
		variant: variant != null ? variant : defaultVariant,
		selectedOptionColorScheme: selectedOptionColorScheme,
		size: size != null ? size : defaultSize,
		variant: (_ref3 = variant != null ? variant : defaultVariant) != null ? _ref3 : defaultInputVariant,
		chakraStyles: chakraStyles,
		@@ -82,0 +79,0 @@ focusBorderColor: focusBorderColor,

dist/esm/utils.js

		@@ -11,3 +11,3 @@ var _excluded = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
		*
		* @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
		* @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
		*/
		@@ -14,0 +14,0 @@ export var cleanCommonProps = function cleanCommonProps(props) {

dist/types/chakra-components/control.d.ts

		@@ -8,3 +8,4 @@ import type { IconProps } from "@chakra-ui/icon";
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/main/packages/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/icons/src/ChevronDown.tsx}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/select/src/select.tsx#L168-L179}
		*/
		@@ -16,3 +17,3 @@ export declare const DownChevron: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
		*
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/13c6d2e08b61e179773be4722bb81173dd599306/packages/close-button/src/close-button.tsx#L14}
		* @see {@link https://github.com/chakra-ui/chakra-ui/blob/61f965a/packages/components/close-button/src/close-button.tsx#L12-L21}
		*/
		@@ -19,0 +20,0 @@ export declare const CrossIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

dist/types/index.d.ts

		@@ -8,2 +8,3 @@ import "./module-augmentation";
		export { default as useChakraSelectProps } from "./use-chakra-select-props";
		export { default as chakraReactSelectAnatomy } from "./anatomy";
		export type { SelectComponent } from "./select/select";
		@@ -13,3 +14,3 @@ export type { CreatableSelectComponent } from "./select/creatable-select";
		export type { AsyncCreatableSelectComponent } from "./select/async-creatable-select";
		export type { SizeProps, Size, TagVariant, SelectedOptionStyle, StylesFunction, ChakraStylesConfig, OptionBase, } from "./types";
		export type { SizeProps, Size, TagVariant, SelectedOptionStyle, ColorScheme, StylesFunction, ChakraStylesConfig, OptionBase, } from "./types";
		export * from "react-select";
		@@ -16,0 +17,0 @@ export { useAsync } from "react-select/async";

dist/types/module-augmentation.d.ts

		import type { SystemStyleObject } from "@chakra-ui/system";
		import type { GroupBase, StylesConfig, ThemeConfig } from "react-select";
		import type { ChakraStylesConfig, SelectedOptionStyle, SizeProp, TagVariant, Variant } from "./types";
		import type { ChakraStylesConfig, ColorScheme, SelectedOptionStyle, SizeProp, TagVariant, Variant } from "./types";
		/**
		@@ -55,4 +55,4 @@ * This is necessary for the module `react-select/base` to be seen by TypeScript.
		*
		* - The `FormLabel` will show a required indicator
		* - The form element (e.g, Input) will have `aria-required` set to true
		* - The hidden input element will get the required attribute, triggering native form validation on submit
		* - The combobox input will have `aria-required` set to true
		*
		@@ -73,3 +73,3 @@ * @see {@link https://chakra-ui.com/docs/components/input/props}
		*/
		colorScheme?: string;
		colorScheme?: ColorScheme;
		/**
		@@ -88,12 +88,2 @@ * The `variant` prop that will be forwarded to your `MultiValue` component
		/**
		* Passing `true` for this prop will make the group headers
		* `position: sticky` and keep them stuck to the top while their
		* corresponding group is in view.
		*
		* @defaultValue `false`
		* @deprecated This prop should probably not have existed and will be
		* removed soon.
		*/
		hasStickyGroupHeaders?: boolean;
		/**
		* Whether to style a selected option by highlighting it in a solid color
		@@ -117,8 +107,4 @@ * or adding a check mark next to it like the chakra `Menu` component.
		*/
		selectedOptionColorScheme?: string;
		selectedOptionColorScheme?: ColorScheme;
		/**
		* @deprecated Replaced by {@link selectedOptionColorScheme}
		*/
		selectedOptionColor?: string;
		/**
		* The color value to style the border of the `Control` with when the
		@@ -150,11 +136,2 @@ * select is focused.
		/**
		* If passed, the dropdown indicator will be styled the same as Chakra UI's
		* `Select` component.
		*
		* @defaultValue `false`
		* @see {@link https://github.com/csandman/chakra-react-select#usebasicstyles--default-false}
		* @see {@link https://chakra-ui.com/docs/components/select}
		*/
		useBasicStyles?: boolean;
		/**
		* The main style variant of the `Select` component. This will use styles
		@@ -161,0 +138,0 @@ * from Chakra's `Input` component and any custom variants you have added to

dist/types/types.d.ts

		@@ -1,2 +0,2 @@
		import type { Pseudos, ResponsiveObject, SystemStyleObject } from "@chakra-ui/system";
		import type { Pseudos, ResponsiveObject, SystemStyleObject, ThemeTypings } from "@chakra-ui/system";
		import type { ClearIndicatorProps, ContainerProps, ControlProps, DropdownIndicatorProps, GroupBase, GroupHeadingProps, GroupProps, IndicatorSeparatorProps, IndicatorsContainerProps, InputProps, LoadingIndicatorProps, MenuListProps, MenuProps, MultiValueProps, NoticeProps, OptionProps, PlaceholderProps, SingleValueProps, ValueContainerProps } from "react-select";
		@@ -19,5 +19,6 @@ /**
		export type SizeProp = Size \| ResponsiveObject<Size> \| Size[];
		export type TagVariant = "subtle" \| "solid" \| "outline" \| (string & {});
		export type TagVariant = ThemeTypings["components"]["Tag"]["variants"];
		export type SelectedOptionStyle = "color" \| "check";
		export type Variant = "outline" \| "filled" \| "flushed" \| "unstyled" \| (string & {});
		export type Variant = ThemeTypings["components"]["Input"]["variants"];
		export type ColorScheme = ThemeTypings["colorSchemes"];
		export type StylesFunction<ComponentProps> = (provided: SystemStyleObject, state: ComponentProps) => SystemStyleObject;
		@@ -24,0 +25,0 @@ export interface ChakraStylesConfig<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> {

dist/types/use-chakra-select-props.d.ts

		import type { GroupBase, Props } from "react-select";
		declare const useChakraSelectProps: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ components, theme, size, colorScheme, isDisabled, isInvalid, isReadOnly, required, isRequired, inputId, tagVariant, selectedOptionStyle, selectedOptionColorScheme, selectedOptionColor, variant, focusBorderColor, errorBorderColor, chakraStyles, onFocus, onBlur, menuIsOpen, ...props }: Props<Option, IsMulti, Group>) => Props<Option, IsMulti, Group>;
		declare const useChakraSelectProps: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ components, theme, size, colorScheme, isDisabled, isInvalid, isReadOnly, required, isRequired, inputId, tagVariant, selectedOptionStyle, selectedOptionColorScheme, variant, focusBorderColor, errorBorderColor, chakraStyles, onFocus, onBlur, menuIsOpen, ...props }: Props<Option, IsMulti, Group>) => Props<Option, IsMulti, Group>;
		export default useChakraSelectProps;

dist/types/utils.d.ts

		@@ -8,5 +8,5 @@ import type { CommonPropsAndClassName, GroupBase } from "react-select";
		*
		* @see {@link https://github.com/JedWatson/react-select/blob/edf5265ee0158c026c9e8527a6d0490a5ac2ef23/packages/react-select/src/utils.ts#L75-L110}
		* @see {@link https://github.com/JedWatson/react-select/blob/2f94e8d/packages/react-select/src/utils.ts#L79-L110}
		*/
		export declare const cleanCommonProps: <Option, IsMulti extends boolean, Group extends GroupBase<Option>, AdditionalProps>(props: Partial<CommonPropsAndClassName<Option, IsMulti, Group>> & AdditionalProps) => Omit<AdditionalProps, keyof CommonPropsAndClassName<Option, IsMulti, Group>>;
		export declare const useSize: (size: SizeProp \| undefined) => Size;

package.json

		{
		"name": "chakra-react-select",
		"version": "4.7.5",
		"version": "5.0.0-rc.0",
		"description": "A Chakra UI wrapper for the popular library React Select",
		@@ -51,2 +51,3 @@ "license": "MIT",
		"peerDependencies": {
		"@chakra-ui/anatomy": "^2.0.0",
		"@chakra-ui/form-control": "^2.0.0",
		@@ -66,7 +67,6 @@ "@chakra-ui/icon": "^3.0.0",
		"@babel/core": "^7.23.0",
		"@babel/plugin-proposal-class-properties": "^7.18.6",
		"@babel/preset-env": "^7.22.20",
		"@babel/preset-react": "^7.22.15",
		"@babel/preset-typescript": "^7.23.0",
		"@chakra-ui/babel-plugin": "^1.0.8",
		"@chakra-ui/anatomy": "^2.2.1",
		"@chakra-ui/form-control": "^2.1.1",
		@@ -73,0 +73,0 @@ "@chakra-ui/icon": "^3.2.0",

124

README.md

		@@ -68,2 +68,3 @@ [cs-ts-demo]:
		- [Theme Styles](#theme-styles)
		- [Extending the Theme](#extending-the-theme)
		- [`className`](#classname)
		@@ -685,2 +686,125 @@ - [TypeScript Support](#typescript-support)

		### Extending the Theme

		As of `v5.0.0`, it is now possible to customize your Select instances globally
		by extending the Chakra theme! These theme styles are layered on top of the
		theme styles pulled from other Chakra components, for backwards compatibility's
		sake, but will always override those. They will also be overridden by any styles
		passed into [`chakraStyles`](#chakrastyles), so it's somewhat of the middle
		layer of styles.

		The theme styles can be defined using Chakra's
		[multipart component style config](https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components).

		There are a few ways these theme styles can be written, either with static style
		objects/functions, or with the `createMultiStyleConfigHelpers` function which
		gives you a couple other helper functions to define your styles in a more
		type-safe way. The documentation on these style definitions is a bit sparse, so
		I highly recommend looking at the source code for some of the built in Chakra
		component themes for further examples:

		- `Input` -
		https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/input.ts
		- `Tag` -
		https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/tag.ts
		- `Menu` -
		https://github.com/chakra-ui/chakra-ui/blob/main/packages/components/theme/src/components/menu.ts

		Every key that can be used in the `chakraStyles` object can also be used for the
		theme styles. Here's an example of how it can be implemented:

		```tsx
		import { createMultiStyleConfigHelpers, extendTheme } from "@chakra-ui/react";
		import { chakraReactSelectAnatomy } from "chakra-react-select";

		const { defineMultiStyleConfig, definePartsStyle } =
		createMultiStyleConfigHelpers(chakraReactSelectAnatomy.keys);

		const ChakraReactSelect = defineMultiStyleConfig({
		baseStyle: definePartsStyle({
		clearIndicator: {},
		container: {},
		control: {},
		dropdownIndicator: {},
		downChevron: {},
		crossIcon: {},
		group: {},
		groupHeading: {},
		indicatorsContainer: {},
		indicatorSeparator: {},
		input: {},
		inputContainer: {},
		loadingIndicator: {},
		loadingMessage: {},
		menu: {},
		menuList: {},
		multiValue: {},
		multiValueLabel: {},
		multiValueRemove: {},
		noOptionsMessage: {},
		option: {},
		placeholder: {},
		singleValue: {},
		valueContainer: {},
		}),
		sizes: {
		sm: definePartsStyle((props) => {
		// All of the select props are passed into these style functions
		// and can be used to modify your final styles.
		const { colorScheme: c } = props;

		return {
		control: {
		bg: `colors.${c}.100`,
		},
		};
		}),
		md: definePartsStyle({
		control: {},
		// ...
		}),
		lg: definePartsStyle({
		control: {},
		// ...
		}),
		},
		variants: {
		outline: definePartsStyle({
		control: {},
		// ...
		}),
		filled: definePartsStyle({
		// ...
		}),
		flushed: definePartsStyle({
		// ...
		}),
		unstyled: definePartsStyle({
		// ...
		}),
		},
		defaultProps: {
		size: "md",
		variant: "outline",
		},
		});

		const theme = extendTheme({
		components: {
		ChakraReactSelect,
		},
		});

		const Root = () => {
		return (
		<ChakraProvider theme={theme}>
		<App />
		</ChakraProvider>
		);
		};
		```

		When calling `createMultiStyleConfigHelpers` you should only include the keys
		for the theme styles actually intend to use

		### `className`
		@@ -687,0 +811,0 @@

dist/cjs/chakra-components/containers.js.map