@itcase/ui 1.1.6 → 1.1.8

package/dist/components/Select.js

@@ -1,77 +1,42 @@
-'use strict';
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var index$1 = require('./Icon.js');
-var Select$1 = require('react-select');
-var clsx = require('clsx');
-var ReactDOM = require('react-dom');
-var floatingUi_dom = require('../floating-ui.dom-C34fOuI9.js');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var index$2 = require('./Badge.js');
-var index$3 = require('./Text.js');
-var index$4 = require('./Group.js');
-var index$5 = require('./Divider.js');
-require('react-inlinesvg');
-require('./Link.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/size.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../hooks/useStyles.js');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
-require('../context/UIContext.js');
-require('../hooks/useMediaQueries.js');
-require('react-responsive');
-require('lodash/castArray');
-require('../constants/componentProps/borderColor.js');
-require('../constants/componentProps/borderType.js');
-require('../constants/componentProps/iconSize.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/strokeColor.js');
-require('./Tooltip.js');
-require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/textSize.js');
-require('../constants/componentProps/textColorActive.js');
-require('../constants/componentProps/textColorHover.js');
-require('../constants/componentProps/direction.js');
-require('../constants/componentProps/stacking.js');
-require('../constants/componentProps/width.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var Select__default = /*#__PURE__*/_interopDefault(Select$1);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+import * as React from 'react';
+import React__default, { forwardRef, useContext, useLayoutEffect, useEffect, useRef, useState, createContext, useMemo, useCallback, Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { I as Icon } from '../Icon-Dn2eEZvb.js';
+import Select$1, { components as components$1 } from 'react-select';
+import clsx from 'clsx';
+import { createPortal } from 'react-dom';
+import { a as autoUpdate } from '../floating-ui.dom-BQ7wiYTi.js';
+import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
+import { Badge } from './Badge.js';
+import { T as Text } from '../Text-BcGbRc14.js';
+import { G as Group$2 } from '../Group-fbVPmr8W.js';
+import { D as Divider } from '../Divider-BlBwMHgl.js';
+import '../Link-ByBzBRDH.js';
+import '../jsx-runtime-ClDdVO4Q.js';
+import '../hooks/useStyles.js';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'react-inlinesvg';
+import './Tooltip.js';
+import './Title.js';
+import '../constants/componentProps/fill.js';
+import '../constants/componentProps/textAlign.js';
+import '../constants/componentProps/textColor.js';
+import '../constants/componentProps/textGradient.js';
+import '../constants/componentProps/textStyle.js';
+import '../constants/componentProps/textWeight.js';
+import '../constants/componentProps/titleSize.js';
+import '../constants/componentProps/type.js';
+import '../constants/componentProps/wrap.js';
+import 'lodash/castArray';
+import '../constants/componentProps/size.js';
+import '../constants/componentProps/textSize.js';
+import '../constants/componentProps/shape.js';
 
 const SelectClearIndicator = props => {
   const {
@@ -79,17 +44,17 @@ const SelectClearIndicator = props => {
     clearIconFill,
     clearIconStroke
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ClearIndicator, props, clearIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+  return /*#__PURE__*/React__default.createElement(components$1.ClearIndicator, props, clearIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     SvgImage: clearIcon,
     iconFill: clearIconFill,
     iconStroke: clearIconStroke
   }) : props.children);
 };
 SelectClearIndicator.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    clearIcon: PropTypes__default.default.string,
-    clearIconFill: PropTypes__default.default.string,
-    clearIconStroke: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    clearIcon: PropTypes.string,
+    clearIconFill: PropTypes.string,
+    clearIconStroke: PropTypes.string
   })
 };
 SelectClearIndicator.__docgenInfo = {
@@ -159,7 +124,7 @@ function toPrimitive(t, r) {
 
 function toPropertyKey(t) {
   var i = toPrimitive(t, "string");
-  return "symbol" == _typeof(i) ? i : String(i);
+  return "symbol" == _typeof(i) ? i : i + "";
 }
 
 function _defineProperty(obj, key, value) {
@@ -2459,14 +2424,14 @@ var syncFallback = function syncFallback(create) {
   return create();
 };
 
-var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
-var useInsertionEffectWithLayoutFallback = useInsertionEffect || React__namespace.useLayoutEffect;
+var useInsertionEffectWithLayoutFallback = useInsertionEffect || React.useLayoutEffect;
 
 var isBrowser$1 = typeof document !== 'undefined';
 var hasOwn = {}.hasOwnProperty;
 
-var EmotionCacheContext = /* #__PURE__ */React__namespace.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
 // and we could have a special build just for that
@@ -2484,9 +2449,9 @@ EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
   // $FlowFixMe
-  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
     // the cache will never be null in the browser
-    var cache = React.useContext(EmotionCacheContext);
+    var cache = useContext(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
@@ -2494,7 +2459,7 @@ var withEmotionCache = function withEmotionCache(func) {
 if (!isBrowser$1) {
   withEmotionCache = function withEmotionCache(func) {
     return function (props) {
-      var cache = React.useContext(EmotionCacheContext);
+      var cache = useContext(EmotionCacheContext);
 
       if (cache === null) {
         // yes, we're potentially creating this on every render
@@ -2505,7 +2470,7 @@ if (!isBrowser$1) {
         cache = createCache({
           key: 'css'
         });
-        return /*#__PURE__*/React__namespace.createElement(EmotionCacheContext.Provider, {
+        return /*#__PURE__*/React.createElement(EmotionCacheContext.Provider, {
           value: cache
         }, func(props, cache));
       } else {
@@ -2515,7 +2480,7 @@ if (!isBrowser$1) {
   };
 }
 
-var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
+var ThemeContext = /* #__PURE__ */React.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'EmotionThemeContext';
@@ -2611,7 +2576,7 @@ var Insertion$1 = function Insertion(_ref) {
       next = next.next;
     }
 
-    return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref2.nonce = cache.sheet.nonce, _ref2));
   }
@@ -2638,7 +2603,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles(registeredStyles, undefined, React__namespace.useContext(ThemeContext));
+  var serialized = serializeStyles(registeredStyles, undefined, React.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -2659,11 +2624,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion$1, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion$1, {
     cache: cache,
     serialized: serialized,
     isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/React__namespace.createElement(WrappedComponent, newProps));
+  }), /*#__PURE__*/React.createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2809,7 +2774,7 @@ var jsx = function jsx(type, props) {
 
   if (props == null || !hasOwn.call(props, 'css')) {
     // $FlowFixMe
-    return React__namespace.createElement.apply(undefined, args);
+    return React.createElement.apply(undefined, args);
   }
 
   var argsLength = args.length;
@@ -2822,7 +2787,7 @@ var jsx = function jsx(type, props) {
   } // $FlowFixMe
 
 
-  return React__namespace.createElement.apply(null, createElementArgArray);
+  return React.createElement.apply(null, createElementArgArray);
 };
 
 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
@@ -2840,7 +2805,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles([styles], undefined, React__namespace.useContext(ThemeContext));
+  var serialized = serializeStyles([styles], undefined, React.useContext(ThemeContext));
 
   if (!isBrowser$1) {
     var _ref;
@@ -2865,7 +2830,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       return null;
     }
 
-    return /*#__PURE__*/React__namespace.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/React.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref.nonce = cache.sheet.nonce, _ref));
   } // yes, i know these hooks are used conditionally
@@ -2874,7 +2839,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   // so it's not actually breaking anything
 
 
-  var sheetRef = React__namespace.useRef();
+  var sheetRef = React.useRef();
   useInsertionEffectWithLayoutFallback(function () {
     var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
 
@@ -3041,7 +3006,7 @@ var Insertion = function Insertion(_ref) {
   if (!isBrowser$1 && rules.length !== 0) {
     var _ref2;
 
-    return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
+    return /*#__PURE__*/React.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
       return serialized.name;
     }).join(' '), _ref2.dangerouslySetInnerHTML = {
       __html: rules
@@ -3086,11 +3051,11 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var content = {
     css: css,
     cx: cx,
-    theme: React__namespace.useContext(ThemeContext)
+    theme: React.useContext(ThemeContext)
   };
   var ele = props.children(content);
   hasRendered = true;
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Insertion, {
     cache: cache,
     serializedArr: serializedArr
   }), ele);
@@ -3200,7 +3165,7 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
-var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
 
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 // ==============================
@@ -3678,7 +3643,7 @@ var menuCSS = function menuCSS(_ref2, unstyled) {
     marginTop: spacing.menuGutter
   });
 };
-var PortalPlacementContext = /*#__PURE__*/React.createContext(null);
+var PortalPlacementContext = /*#__PURE__*/createContext(null);
 
 // NOTE: internal only
 var MenuPlacer = function MenuPlacer(props) {
@@ -3689,14 +3654,14 @@ var MenuPlacer = function MenuPlacer(props) {
     menuPosition = props.menuPosition,
     menuShouldScrollIntoView = props.menuShouldScrollIntoView,
     theme = props.theme;
-  var _ref3 = React.useContext(PortalPlacementContext) || {},
+  var _ref3 = useContext(PortalPlacementContext) || {},
     setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = React.useRef(null);
-  var _useState = React.useState(maxMenuHeight),
+  var ref = useRef(null);
+  var _useState = useState(maxMenuHeight),
     _useState2 = _slicedToArray(_useState, 2),
     maxHeight = _useState2[0],
     setMaxHeight = _useState2[1];
-  var _useState3 = React.useState(null),
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
     placement = _useState4[0],
     setPlacement = _useState4[1];
@@ -3839,22 +3804,22 @@ var MenuPortal = function MenuPortal(props) {
     innerProps = props.innerProps,
     menuPlacement = props.menuPlacement,
     menuPosition = props.menuPosition;
-  var menuPortalRef = React.useRef(null);
-  var cleanupRef = React.useRef(null);
-  var _useState5 = React.useState(coercePlacement(menuPlacement)),
+  var menuPortalRef = useRef(null);
+  var cleanupRef = useRef(null);
+  var _useState5 = useState(coercePlacement(menuPlacement)),
     _useState6 = _slicedToArray(_useState5, 2),
     placement = _useState6[0],
     setPortalPlacement = _useState6[1];
-  var portalPlacementContext = React.useMemo(function () {
+  var portalPlacementContext = useMemo(function () {
     return {
       setPortalPlacement: setPortalPlacement
     };
   }, []);
-  var _useState7 = React.useState(null),
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
     computedPosition = _useState8[0],
     setComputedPosition = _useState8[1];
-  var updateComputedPosition = React.useCallback(function () {
+  var updateComputedPosition = useCallback(function () {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
@@ -3869,13 +3834,13 @@ var MenuPortal = function MenuPortal(props) {
   index(function () {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = React.useCallback(function () {
+  var runAutoUpdate = useCallback(function () {
     if (typeof cleanupRef.current === 'function') {
       cleanupRef.current();
       cleanupRef.current = null;
     }
     if (controlElement && menuPortalRef.current) {
-      cleanupRef.current = floatingUi_dom.autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
+      cleanupRef.current = autoUpdate(controlElement, menuPortalRef.current, updateComputedPosition, {
         elementResize: 'ResizeObserver' in window
       });
     }
@@ -3883,7 +3848,7 @@ var MenuPortal = function MenuPortal(props) {
   index(function () {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = React.useCallback(function (menuPortalElement) {
+  var setMenuPortalElement = useCallback(function (menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
@@ -3903,7 +3868,7 @@ var MenuPortal = function MenuPortal(props) {
   }), innerProps), children);
   return jsx(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /*#__PURE__*/ReactDOM.createPortal(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /*#__PURE__*/createPortal(menuWrapper, appendTo) : menuWrapper);
 };
 
 // ==============================
@@ -4734,12 +4699,12 @@ var LiveRegion = function LiveRegion(props) {
   var ariaLive = selectProps['aria-live'];
 
   // Update aria live message configuration when prop changes
-  var messages = React.useMemo(function () {
+  var messages = useMemo(function () {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
 
   // Update aria live selected option when prop changes
-  var ariaSelected = React.useMemo(function () {
+  var ariaSelected = useMemo(function () {
     var message = '';
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option,
@@ -4770,7 +4735,7 @@ var LiveRegion = function LiveRegion(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
-  var ariaFocused = React.useMemo(function () {
+  var ariaFocused = useMemo(function () {
     var focusMsg = '';
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -4789,7 +4754,7 @@ var LiveRegion = function LiveRegion(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice]);
-  var ariaResults = React.useMemo(function () {
+  var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus({
@@ -4803,7 +4768,7 @@ var LiveRegion = function LiveRegion(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options, screenReaderStatus, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === 'initial-input-focus';
-  var ariaGuidance = React.useMemo(function () {
+  var ariaGuidance = useMemo(function () {
     var guidanceMsg = '';
     if (messages.guidance) {
       var context = focusedValue ? 'value' : menuIsOpen ? 'menu' : 'input';
@@ -4819,7 +4784,7 @@ var LiveRegion = function LiveRegion(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx(React.Fragment, null, jsx("span", {
+  var ScreenReaderText = jsx(Fragment, null, jsx("span", {
     id: "aria-selection"
   }, ariaSelected), jsx("span", {
     id: "aria-focused"
@@ -4828,7 +4793,7 @@ var LiveRegion = function LiveRegion(props) {
   }, ariaResults), jsx("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx(React.Fragment, null, jsx(A11yText$1, {
+  return jsx(Fragment, null, jsx(A11yText$1, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText$1, {
     "aria-live": ariaLive,
@@ -5188,11 +5153,11 @@ function useScrollCapture(_ref) {
     onBottomLeave = _ref.onBottomLeave,
     onTopArrive = _ref.onTopArrive,
     onTopLeave = _ref.onTopLeave;
-  var isBottom = React.useRef(false);
-  var isTop = React.useRef(false);
-  var touchStart = React.useRef(0);
-  var scrollTarget = React.useRef(null);
-  var handleEventDelta = React.useCallback(function (event, delta) {
+  var isBottom = useRef(false);
+  var isTop = useRef(false);
+  var touchStart = useRef(0);
+  var scrollTarget = useRef(null);
+  var handleEventDelta = useCallback(function (event, delta) {
     if (scrollTarget.current === null) return;
     var _scrollTarget$current = scrollTarget.current,
       scrollTop = _scrollTarget$current.scrollTop,
@@ -5237,18 +5202,18 @@ function useScrollCapture(_ref) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = React.useCallback(function (event) {
+  var onWheel = useCallback(function (event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = React.useCallback(function (event) {
+  var onTouchStart = useCallback(function (event) {
     // set touch start so we can calculate touchmove delta
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = React.useCallback(function (event) {
+  var onTouchMove = useCallback(function (event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = React.useCallback(function (el) {
+  var startListening = useCallback(function (el) {
     // bail early if no element is available to attach to
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
@@ -5258,14 +5223,14 @@ function useScrollCapture(_ref) {
     el.addEventListener('touchstart', onTouchStart, notPassive);
     el.addEventListener('touchmove', onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = React.useCallback(function (el) {
+  var stopListening = useCallback(function (el) {
     // bail early if no element is available to detach from
     if (!el) return;
     el.removeEventListener('wheel', onWheel, false);
     el.removeEventListener('touchstart', onTouchStart, false);
     el.removeEventListener('touchmove', onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -5318,9 +5283,9 @@ function useScrollLock(_ref) {
   var isEnabled = _ref.isEnabled,
     _ref$accountForScroll = _ref.accountForScrollbars,
     accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = React.useRef({});
-  var scrollTarget = React.useRef(null);
-  var addScrollLock = React.useCallback(function (touchScrollTarget) {
+  var originalStyles = useRef({});
+  var scrollTarget = useRef(null);
+  var addScrollLock = useCallback(function (touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -5363,7 +5328,7 @@ function useScrollLock(_ref) {
     // increment active scroll locks
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = React.useCallback(function (touchScrollTarget) {
+  var removeScrollLock = useCallback(function (touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -5390,7 +5355,7 @@ function useScrollLock(_ref) {
       }
     }
   }, [accountForScrollbars]);
-  React.useEffect(function () {
+  useEffect(function () {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -5440,7 +5405,7 @@ function ScrollManager(_ref) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx(React.Fragment, null, lockEnabled && jsx("div", {
+  return jsx(Fragment, null, lockEnabled && jsx("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -6725,7 +6690,7 @@ var Select = /*#__PURE__*/function (_Component) {
       });
       if (!isSearchable) {
         // use a dummy input to maintain focus/blur functionality
-        return /*#__PURE__*/React__namespace.createElement(DummyInput, _extends({
+        return /*#__PURE__*/React.createElement(DummyInput, _extends({
           id: id,
           innerRef: this.getInputRef,
           onBlur: this.onInputBlur,
@@ -6738,7 +6703,7 @@ var Select = /*#__PURE__*/function (_Component) {
           value: ""
         }, ariaAttributes));
       }
-      return /*#__PURE__*/React__namespace.createElement(Input, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(Input, _extends({}, commonProps, {
         autoCapitalize: "none",
         autoComplete: "off",
         autoCorrect: "off",
@@ -6779,7 +6744,7 @@ var Select = /*#__PURE__*/function (_Component) {
         focusedValue = _this$state5.focusedValue,
         isFocused = _this$state5.isFocused;
       if (!this.hasValue() || !controlShouldRenderValue) {
-        return inputValue ? null : /*#__PURE__*/React__namespace.createElement(Placeholder, _extends({}, commonProps, {
+        return inputValue ? null : /*#__PURE__*/React.createElement(Placeholder, _extends({}, commonProps, {
           key: "placeholder",
           isDisabled: isDisabled,
           isFocused: isFocused,
@@ -6792,7 +6757,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return selectValue.map(function (opt, index) {
           var isOptionFocused = opt === focusedValue;
           var key = "".concat(_this3.getOptionLabel(opt), "-").concat(_this3.getOptionValue(opt));
-          return /*#__PURE__*/React__namespace.createElement(MultiValue, _extends({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MultiValue, _extends({}, commonProps, {
             components: {
               Container: MultiValueContainer,
               Label: MultiValueLabel,
@@ -6821,7 +6786,7 @@ var Select = /*#__PURE__*/function (_Component) {
         return null;
       }
       var singleValue = selectValue[0];
-      return /*#__PURE__*/React__namespace.createElement(SingleValue, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SingleValue, _extends({}, commonProps, {
         data: singleValue,
         isDisabled: isDisabled
       }), this.formatOptionLabel(singleValue, 'value'));
@@ -6844,7 +6809,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onClearIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(ClearIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(ClearIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isFocused: isFocused
       }));
@@ -6863,7 +6828,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var innerProps = {
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(LoadingIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6881,7 +6846,7 @@ var Select = /*#__PURE__*/function (_Component) {
       var commonProps = this.commonProps;
       var isDisabled = this.props.isDisabled;
       var isFocused = this.state.isFocused;
-      return /*#__PURE__*/React__namespace.createElement(IndicatorSeparator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(IndicatorSeparator, _extends({}, commonProps, {
         isDisabled: isDisabled,
         isFocused: isFocused
       }));
@@ -6900,7 +6865,7 @@ var Select = /*#__PURE__*/function (_Component) {
         onTouchEnd: this.onDropdownIndicatorTouchEnd,
         'aria-hidden': 'true'
       };
-      return /*#__PURE__*/React__namespace.createElement(DropdownIndicator, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
         innerProps: innerProps,
         isDisabled: isDisabled,
         isFocused: isFocused
@@ -6965,7 +6930,7 @@ var Select = /*#__PURE__*/function (_Component) {
           'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
         };
 
-        return /*#__PURE__*/React__namespace.createElement(Option, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(Option, _extends({}, commonProps, {
           innerProps: innerProps,
           data: data,
           isDisabled: isDisabled,
@@ -6987,7 +6952,7 @@ var Select = /*#__PURE__*/function (_Component) {
               groupIndex = item.index;
             var groupId = "".concat(_this4.getElementId('group'), "-").concat(groupIndex);
             var headingId = "".concat(groupId, "-heading");
-            return /*#__PURE__*/React__namespace.createElement(Group, _extends({}, commonProps, {
+            return /*#__PURE__*/React.createElement(Group, _extends({}, commonProps, {
               key: groupId,
               data: _data,
               options: options,
@@ -7009,13 +6974,13 @@ var Select = /*#__PURE__*/function (_Component) {
           inputValue: inputValue
         });
         if (message === null) return null;
-        menuUI = /*#__PURE__*/React__namespace.createElement(LoadingMessage, commonProps, message);
+        menuUI = /*#__PURE__*/React.createElement(LoadingMessage, commonProps, message);
       } else {
         var _message = noOptionsMessage({
           inputValue: inputValue
         });
         if (_message === null) return null;
-        menuUI = /*#__PURE__*/React__namespace.createElement(NoOptionsMessage, commonProps, _message);
+        menuUI = /*#__PURE__*/React.createElement(NoOptionsMessage, commonProps, _message);
       }
       var menuPlacementProps = {
         minMenuHeight: minMenuHeight,
@@ -7024,12 +6989,12 @@ var Select = /*#__PURE__*/function (_Component) {
         menuPosition: menuPosition,
         menuShouldScrollIntoView: menuShouldScrollIntoView
       };
-      var menuElement = /*#__PURE__*/React__namespace.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
+      var menuElement = /*#__PURE__*/React.createElement(MenuPlacer, _extends({}, commonProps, menuPlacementProps), function (_ref4) {
         var ref = _ref4.ref,
           _ref4$placerProps = _ref4.placerProps,
           placement = _ref4$placerProps.placement,
           maxHeight = _ref4$placerProps.maxHeight;
-        return /*#__PURE__*/React__namespace.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
+        return /*#__PURE__*/React.createElement(Menu, _extends({}, commonProps, menuPlacementProps, {
           innerRef: ref,
           innerProps: {
             onMouseDown: _this4.onMenuMouseDown,
@@ -7037,13 +7002,13 @@ var Select = /*#__PURE__*/function (_Component) {
           },
           isLoading: isLoading,
           placement: placement
-        }), /*#__PURE__*/React__namespace.createElement(ScrollManager, {
+        }), /*#__PURE__*/React.createElement(ScrollManager, {
           captureEnabled: captureMenuScroll,
           onTopArrive: onMenuScrollToTop,
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
-          return /*#__PURE__*/React__namespace.createElement(MenuList, _extends({}, commonProps, {
+          return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
               scrollTargetRef(instance);
@@ -7063,7 +7028,7 @@ var Select = /*#__PURE__*/function (_Component) {
       // positioning behaviour is almost identical for portalled and fixed,
       // so we use the same component. the actual portalling logic is forked
       // within the component based on `menuPosition`
-      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React__namespace.createElement(MenuPortal, _extends({}, commonProps, {
+      return menuPortalTarget || menuPosition === 'fixed' ? /*#__PURE__*/React.createElement(MenuPortal, _extends({}, commonProps, {
         appendTo: menuPortalTarget,
         controlElement: this.controlRef,
         menuPlacement: menuPlacement,
@@ -7082,7 +7047,7 @@ var Select = /*#__PURE__*/function (_Component) {
         required = _this$props13.required;
       var selectValue = this.state.selectValue;
       if (required && !this.hasValue() && !isDisabled) {
-        return /*#__PURE__*/React__namespace.createElement(RequiredInput$1, {
+        return /*#__PURE__*/React.createElement(RequiredInput$1, {
           name: name,
           onFocus: this.onValueInputFocus
         });
@@ -7093,29 +7058,29 @@ var Select = /*#__PURE__*/function (_Component) {
           var value = selectValue.map(function (opt) {
             return _this5.getOptionValue(opt);
           }).join(delimiter);
-          return /*#__PURE__*/React__namespace.createElement("input", {
+          return /*#__PURE__*/React.createElement("input", {
             name: name,
             type: "hidden",
             value: value
           });
         } else {
           var input = selectValue.length > 0 ? selectValue.map(function (opt, i) {
-            return /*#__PURE__*/React__namespace.createElement("input", {
+            return /*#__PURE__*/React.createElement("input", {
               key: "i-".concat(i),
               name: name,
               type: "hidden",
               value: _this5.getOptionValue(opt)
             });
-          }) : /*#__PURE__*/React__namespace.createElement("input", {
+          }) : /*#__PURE__*/React.createElement("input", {
             name: name,
             type: "hidden",
             value: ""
           });
-          return /*#__PURE__*/React__namespace.createElement("div", null, input);
+          return /*#__PURE__*/React.createElement("div", null, input);
         }
       } else {
         var _value = selectValue[0] ? this.getOptionValue(selectValue[0]) : '';
-        return /*#__PURE__*/React__namespace.createElement("input", {
+        return /*#__PURE__*/React.createElement("input", {
           name: name,
           type: "hidden",
           value: _value
@@ -7133,7 +7098,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused = _this$state6.isFocused,
         selectValue = _this$state6.selectValue;
       var focusableOptions = this.getFocusableOptions();
-      return /*#__PURE__*/React__namespace.createElement(LiveRegion$1, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(LiveRegion$1, _extends({}, commonProps, {
         id: this.getElementId('live-region'),
         ariaSelection: ariaSelection,
         focusedOption: focusedOption,
@@ -7159,7 +7124,7 @@ var Select = /*#__PURE__*/function (_Component) {
         menuIsOpen = _this$props14.menuIsOpen;
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
-      return /*#__PURE__*/React__namespace.createElement(SelectContainer, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
         className: className,
         innerProps: {
           id: id,
@@ -7167,7 +7132,7 @@ var Select = /*#__PURE__*/function (_Component) {
         },
         isDisabled: isDisabled,
         isFocused: isFocused
-      }), this.renderLiveRegion(), /*#__PURE__*/React__namespace.createElement(Control, _extends({}, commonProps, {
+      }), this.renderLiveRegion(), /*#__PURE__*/React.createElement(Control, _extends({}, commonProps, {
         innerRef: this.getControlRef,
         innerProps: {
           onMouseDown: this.onControlMouseDown,
@@ -7176,9 +7141,9 @@ var Select = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         isFocused: isFocused,
         menuIsOpen: menuIsOpen
-      }), /*#__PURE__*/React__namespace.createElement(ValueContainer, _extends({}, commonProps, {
+      }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
         isDisabled: isDisabled
-      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React__namespace.createElement(IndicatorsContainer, _extends({}, commonProps, {
+      }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
         isDisabled: isDisabled
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());
     }
@@ -7245,7 +7210,7 @@ var Select = /*#__PURE__*/function (_Component) {
     }
   }]);
   return Select;
-}(React.Component);
+}(Component);
 Select.defaultProps = defaultProps;
 
 var _excluded$1 = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
@@ -7264,38 +7229,38 @@ function useStateManager(_ref) {
     propsOnMenuOpen = _ref.onMenuOpen,
     propsValue = _ref.value,
     restSelectProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _useState = React.useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
+  var _useState = useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
     _useState2 = _slicedToArray(_useState, 2),
     stateInputValue = _useState2[0],
     setStateInputValue = _useState2[1];
-  var _useState3 = React.useState(propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen),
+  var _useState3 = useState(propsMenuIsOpen !== undefined ? propsMenuIsOpen : defaultMenuIsOpen),
     _useState4 = _slicedToArray(_useState3, 2),
     stateMenuIsOpen = _useState4[0],
     setStateMenuIsOpen = _useState4[1];
-  var _useState5 = React.useState(propsValue !== undefined ? propsValue : defaultValue),
+  var _useState5 = useState(propsValue !== undefined ? propsValue : defaultValue),
     _useState6 = _slicedToArray(_useState5, 2),
     stateValue = _useState6[0],
     setStateValue = _useState6[1];
-  var onChange = React.useCallback(function (value, actionMeta) {
+  var onChange = useCallback(function (value, actionMeta) {
     if (typeof propsOnChange === 'function') {
       propsOnChange(value, actionMeta);
     }
     setStateValue(value);
   }, [propsOnChange]);
-  var onInputChange = React.useCallback(function (value, actionMeta) {
+  var onInputChange = useCallback(function (value, actionMeta) {
     var newValue;
     if (typeof propsOnInputChange === 'function') {
       newValue = propsOnInputChange(value, actionMeta);
     }
     setStateInputValue(newValue !== undefined ? newValue : value);
   }, [propsOnInputChange]);
-  var onMenuOpen = React.useCallback(function () {
+  var onMenuOpen = useCallback(function () {
     if (typeof propsOnMenuOpen === 'function') {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = React.useCallback(function () {
+  var onMenuClose = useCallback(function () {
     if (typeof propsOnMenuClose === 'function') {
       propsOnMenuClose();
     }
@@ -7369,16 +7334,16 @@ function useCreatable(_ref) {
     isMulti = restSelectProps.isMulti,
     value = restSelectProps.value,
     name = restSelectProps.name;
-  var newOption = React.useMemo(function () {
+  var newOption = useMemo(function () {
     return isValidNewOption(inputValue, cleanValue(value), propsOptions, {
       getOptionValue: getOptionValue$1$1,
       getOptionLabel: getOptionLabel$1$1
     }) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : undefined;
   }, [formatCreateLabel, getNewOptionData, getOptionLabel$1$1, getOptionValue$1$1, inputValue, isValidNewOption, propsOptions, value]);
-  var options = React.useMemo(function () {
+  var options = useMemo(function () {
     return (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(propsOptions)) : [].concat(_toConsumableArray(propsOptions), [newOption]) : propsOptions;
   }, [allowCreateWhileLoading, createOptionPosition, isLoading, newOption, propsOptions]);
-  var onChange = React.useCallback(function (newValue, actionMeta) {
+  var onChange = useCallback(function (newValue, actionMeta) {
     if (actionMeta.action !== 'select-option') {
       return propsOnChange(newValue, actionMeta);
     }
@@ -7403,10 +7368,10 @@ function useCreatable(_ref) {
   });
 }
 
-var CreatableSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
   var creatableProps = useStateManager(props);
   var selectProps = useCreatable(creatableProps);
-  return /*#__PURE__*/React__namespace.createElement(Select, _extends({
+  return /*#__PURE__*/React.createElement(Select, _extends({
     ref: ref
   }, selectProps));
 });
@@ -7421,15 +7386,15 @@ const SelectControl = props => {
     inputBorderColor,
     inputBorderColorHover
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, before, /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Control, Object.assign({}, props, {
-    className: clsx__default.default('select__control', inputFill, inputShape, inputBorderColor && `border-color_${inputBorderColor}`, inputBorderColorHover && `border-color_hover_${inputBorderColorHover}`)
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, before, /*#__PURE__*/React__default.createElement(components$1.Control, Object.assign({}, props, {
+    className: clsx('select__control', inputFill, inputShape, inputBorderColor && `border-color_${inputBorderColor}`, inputBorderColorHover && `border-color_hover_${inputBorderColorHover}`)
   })), after);
 };
 SelectControl.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    inputFill: PropTypes__default.default.string,
-    inputShape: PropTypes__default.default.string,
-    set: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    inputFill: PropTypes.string,
+    inputShape: PropTypes.string,
+    set: PropTypes.string
   })
 };
 SelectControl.__docgenInfo = {
@@ -7469,7 +7434,7 @@ const SelectIndicatorsContainer = props => {
     showBadge,
     value
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__namespace.default.createElement(index$2.Badge, {
+  return /*#__PURE__*/React__default.createElement(components$1.IndicatorsContainer, props, showBadge && value?.length > 0 ? /*#__PURE__*/React__default.createElement(Badge, {
     appearance: badgeAppearance,
     size: badgeSize,
     textSize: badgeTextSize,
@@ -7489,18 +7454,18 @@ const SelectDropdownIndicator = props => {
     dropdownIconFill,
     dropdownIconStroke
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+  return /*#__PURE__*/React__default.createElement(components$1.DropdownIndicator, props, dropdownIcon ? /*#__PURE__*/React__default.createElement(Icon, {
     SvgImage: dropdownIcon,
     iconFill: dropdownIconFill,
     iconStroke: dropdownIconStroke
   }) : props.children);
 };
 SelectDropdownIndicator.propTypes = {
-  selectProps: PropTypes__default.default.shape({
+  selectProps: PropTypes.shape({
     // "dropdownIcon" is SvgImage(file.svg)
-    dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
-    dropdownIconFill: PropTypes__default.default.string,
-    dropdownIconStroke: PropTypes__default.default.string
+    dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    dropdownIconFill: PropTypes.string,
+    dropdownIconStroke: PropTypes.string
   })
 };
 SelectDropdownIndicator.__docgenInfo = {
@@ -7545,16 +7510,16 @@ const SelectGroupHeading = props => {
     headingTextSize,
     headingTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.GroupHeading, Object.assign({}, props, {
-    className: clsx__default.default('select__menu-group-heading', headingFill, headingFillHover)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.GroupHeading, Object.assign({}, props, {
+    className: clsx('select__menu-group-heading', headingFill, headingFillHover)
+  }), /*#__PURE__*/React__default.createElement(Text, {
     size: headingTextSize,
     textWeight: headingTextWeight,
     textColor: headingTextColor
   }, props.data.label));
 };
 SelectGroupHeading.propTypes = {
-  selectProps: PropTypes__default.default.shape({})
+  selectProps: PropTypes.shape({})
 };
 SelectGroupHeading.__docgenInfo = {
   "description": "",
@@ -7578,17 +7543,17 @@ const SelectInput = props => {
     inputTextColor,
     inputCaretColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Input, Object.assign({}, props, {
-    className: clsx__default.default(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`)
+  return /*#__PURE__*/React__default.createElement(components$1.Input, Object.assign({}, props, {
+    className: clsx(inputTextSize && `text_size_${inputTextSize}`, inputTextColor && `text-color_${inputTextColor}`, inputCaretColor && `caret-color_${inputCaretColor}`)
   }));
 };
 SelectInput.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    inputTextSize: PropTypes__default.default.string,
-    inputTextColor: PropTypes__default.default.string,
-    inputCaretColor: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    inputTextSize: PropTypes.string,
+    inputTextColor: PropTypes.string,
+    inputCaretColor: PropTypes.string
   }),
-  children: PropTypes__default.default.any
+  children: PropTypes.any
 };
 SelectInput.__docgenInfo = {
   "description": "",
@@ -7632,18 +7597,18 @@ const SelectMenu = props => {
     menuAfter,
     menuBefore
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Menu, Object.assign({}, props, {
-    className: clsx__default.default(elevation && `elevation_${elevation}`)
-  }), menuBefore, props.selectProps.fetchingData ? /*#__PURE__*/React__namespace.default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement(components$1.Menu, Object.assign({}, props, {
+    className: clsx(elevation && `elevation_${elevation}`)
+  }), menuBefore, props.selectProps.fetchingData ? /*#__PURE__*/React__default.createElement("span", {
     className: "fetching"
-  }, "Fetching data...") : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, props.children), menuAfter);
+  }, "Fetching data...") : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, props.children), menuAfter);
 };
 SelectMenu.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    fetchingData: PropTypes__default.default.any,
-    set: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    fetchingData: PropTypes.any,
+    set: PropTypes.string
   }),
-  children: PropTypes__default.default.any
+  children: PropTypes.any
 };
 SelectMenu.__docgenInfo = {
   "description": "",
@@ -7682,7 +7647,7 @@ const SelectMultiValueContainer = props => {
     multipleItemFill,
     multipleItemFillHover
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueContainer, props, /*#__PURE__*/React__namespace.default.createElement(index$4.Group, {
+  return /*#__PURE__*/React__default.createElement(components$1.MultiValueContainer, props, /*#__PURE__*/React__default.createElement(Group$2, {
     className: "select__multi-value-wrapper",
     direction: "horizontal",
     alignItems: "center",
@@ -7702,7 +7667,7 @@ const SelectMultiValueLabel = props => {
     multipleItemTextSize,
     multipleItemTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueLabel, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.MultiValueLabel, props, /*#__PURE__*/React__default.createElement(Text, {
     size: multipleItemTextSize,
     textColor: multipleItemTextColor
   }, props.data.label));
@@ -7719,7 +7684,7 @@ const SelectMultiValueRemove = props => {
     multipleItemIcon,
     multipleItemIconFill
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.MultiValueRemove, props, /*#__PURE__*/React__namespace.default.createElement(index$1.Icon, {
+  return /*#__PURE__*/React__default.createElement(components$1.MultiValueRemove, props, /*#__PURE__*/React__default.createElement(Icon, {
     SvgImage: multipleItemIcon,
     iconFill: multipleItemIconFill
   }));
@@ -7740,20 +7705,20 @@ const SelectNoOptions = props => {
     noOptionsTextColor,
     noOptionsText
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.NoOptionsMessage, Object.assign({}, props, {
-    className: clsx__default.default(optionFill, optionBorder, optionBorderType)
-  }), /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.NoOptionsMessage, Object.assign({}, props, {
+    className: clsx(optionFill, optionBorder, optionBorderType)
+  }), /*#__PURE__*/React__default.createElement(Text, {
     size: noOptionsTextSize,
     textColor: noOptionsTextColor
   }, noOptionsText));
 };
 SelectNoOptions.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    noOptionsTextSize: PropTypes__default.default.string,
-    noOptionsTextColor: PropTypes__default.default.string,
-    noOptionsText: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    noOptionsTextSize: PropTypes.string,
+    noOptionsTextColor: PropTypes.string,
+    noOptionsText: PropTypes.string
   }),
-  children: PropTypes__default.default.any
+  children: PropTypes.any
 };
 SelectNoOptions.__docgenInfo = {
   "description": "",
@@ -7814,15 +7779,15 @@ const SelectOption = props => {
     optionBefore,
     optionAfter
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Option, Object.assign({}, props, {
-    className: clsx__default.default('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
-  }), optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.Option, Object.assign({}, props, {
+    className: clsx('select__menu-list-item', isSelected && 'select__menu-list-item_state_selected', menuItemSize && `select__menu-list-item_size_${menuItemSize}`, optionFill, optionBorder, optionBorderType, optionFillHover, optionShape)
+  }), optionBefore, /*#__PURE__*/React__default.createElement(Text, {
     className: "select__menu-list-item_option",
     size: optionTextSize,
     textColor: optionTextColor
-  }, label), isSelected && /*#__PURE__*/React__namespace.default.createElement("div", {
+  }, label), isSelected && /*#__PURE__*/React__default.createElement("div", {
     className: "select__menu-list-item_selected"
-  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__namespace.default.createElement(index$5.Divider, {
+  }, optionSelected), optionAfter, showDivider && /*#__PURE__*/React__default.createElement(Divider, {
     direction: dividerDirection,
     fill: dividerFill,
     size: dividerSize,
@@ -7830,16 +7795,16 @@ const SelectOption = props => {
   }));
 };
 SelectOption.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    optionFill: PropTypes__default.default.string,
-    optionTextSize: PropTypes__default.default.string,
-    optionTextColor: PropTypes__default.default.string,
-    optionShape: PropTypes__default.default.string,
-    optionBefore: PropTypes__default.default.any,
-    optionAfter: PropTypes__default.default.any
+  selectProps: PropTypes.shape({
+    optionFill: PropTypes.string,
+    optionTextSize: PropTypes.string,
+    optionTextColor: PropTypes.string,
+    optionShape: PropTypes.string,
+    optionBefore: PropTypes.any,
+    optionAfter: PropTypes.any
   }),
-  label: PropTypes__default.default.string,
-  isSelected: PropTypes__default.default.any
+  label: PropTypes.string,
+  isSelected: PropTypes.any
 };
 SelectOption.__docgenInfo = {
   "description": "",
@@ -7901,17 +7866,17 @@ const SelectPlaceholder = props => {
     placeholderTextSize,
     placeholderTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.Placeholder, props, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.Placeholder, props, /*#__PURE__*/React__default.createElement(Text, {
     size: placeholderTextSize,
     textColor: placeholderTextColor
   }, props.children));
 };
 SelectPlaceholder.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    placeholderTextSize: PropTypes__default.default.string,
-    placeholderTextColor: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    placeholderTextSize: PropTypes.string,
+    placeholderTextColor: PropTypes.string
   }),
-  children: PropTypes__default.default.any
+  children: PropTypes.any
 };
 SelectPlaceholder.__docgenInfo = {
   "description": "",
@@ -7953,18 +7918,18 @@ const SelectSingleValue = props => {
     inputTextSize,
     inputTextColor
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.SingleValue, props, data.optionBefore, /*#__PURE__*/React__namespace.default.createElement(index$3.Text, {
+  return /*#__PURE__*/React__default.createElement(components$1.SingleValue, props, data.optionBefore, /*#__PURE__*/React__default.createElement(Text, {
     size: inputTextSize,
     textColor: inputTextColor
   }, props.children), data.optionAfter);
 };
 SelectSingleValue.propTypes = {
-  selectProps: PropTypes__default.default.shape({
-    inputTextSize: PropTypes__default.default.string,
-    inputTextColor: PropTypes__default.default.string
+  selectProps: PropTypes.shape({
+    inputTextSize: PropTypes.string,
+    inputTextColor: PropTypes.string
   }),
-  children: PropTypes__default.default.any,
-  data: PropTypes__default.default.object
+  children: PropTypes.any,
+  data: PropTypes.object
 };
 SelectSingleValue.__docgenInfo = {
   "description": "",
@@ -8010,13 +7975,13 @@ const SelectValueContainer = props => {
     inputBefore,
     inputAfter
   } = props.selectProps;
-  return /*#__PURE__*/React__namespace.default.createElement(Select$1.components.ValueContainer, props, inputBefore, props.children, inputAfter);
+  return /*#__PURE__*/React__default.createElement(components$1.ValueContainer, props, inputBefore, props.children, inputAfter);
 };
 SelectValueContainer.propTypes = {
-  children: PropTypes__default.default.any,
-  selectProps: PropTypes__default.default.shape({
-    inputBefore: PropTypes__default.default.any,
-    inputAfter: PropTypes__default.default.any
+  children: PropTypes.any,
+  selectProps: PropTypes.shape({
+    inputBefore: PropTypes.any,
+    inputAfter: PropTypes.any
   })
 };
 SelectValueContainer.__docgenInfo = {
@@ -8051,8 +8016,8 @@ SelectValueContainer.__docgenInfo = {
   }
 };
 
-const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(function SelectContainer(props, ref) {
-  const clearStyle = React.useMemo(() => new Proxy({}, {
+const SelectContainer = /*#__PURE__*/React__default.forwardRef(function SelectContainer(props, ref) {
+  const clearStyle = useMemo(() => new Proxy({}, {
     get: (target, propKey) => () => {}
   }), []);
   const {
@@ -8106,107 +8071,107 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     value,
     onChange
   } = props;
-  const defaultRef = React.useRef(null);
+  const defaultRef = useRef(null);
   const selectRef = ref || defaultRef;
-  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
-  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass(props, {
     prefix: 'select_shape_',
     propsKey: 'shape'
   });
-  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const sizeClass = useDeviceTargetClass(props, {
     prefix: 'select_size_',
     propsKey: 'size'
   });
-  const optionFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionFillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'optionFill'
   });
-  const optionFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionFillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'optionFillHover'
   });
-  const optionBorderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionBorderClass = useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'optionBorder'
   });
-  const optionBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionBorderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'optionBorderType'
   });
-  const optionTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionTextSizeClass = useDeviceTargetClass(props, {
     propsKey: 'optionTextSize'
   });
-  const optionTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionTextColorClass = useDeviceTargetClass(props, {
     propsKey: 'optionTextColor'
   });
-  const optionShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const optionShapeClass = useDeviceTargetClass(props, {
     propsKey: 'optionShape'
   });
-  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputFillClass = useDeviceTargetClass(props, {
     prefix: 'select__control_fill_',
     propsKey: 'inputFill'
   });
-  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputShapeClass = useDeviceTargetClass(props, {
     prefix: 'select__control_shape_',
     propsKey: 'inputShape'
   });
-  const inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputTextSizeClass = useDeviceTargetClass(props, {
     propsKey: 'inputTextSize'
   });
-  const inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputTextColorClass = useDeviceTargetClass(props, {
     propsKey: 'inputTextColor'
   });
-  const multipleItemTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const multipleItemTextSizeClass = useDeviceTargetClass(props, {
     propsKey: 'multipleItemTextSize'
   });
-  const multipleItemTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const multipleItemTextColorClass = useDeviceTargetClass(props, {
     propsKey: 'multipleItemTextColor'
   });
-  const inputBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputBorderColorClass = useDeviceTargetClass(props, {
     propsKey: 'inputBorderColor'
   });
-  const inputBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputBorderColorHoverClass = useDeviceTargetClass(props, {
     propsKey: 'inputBorderColorHover'
   });
-  const noOptionsTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const noOptionsTextSizeClass = useDeviceTargetClass(props, {
     propsKey: 'noOptionsTextSize'
   });
-  const noOptionsTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const noOptionsTextColorClass = useDeviceTargetClass(props, {
     propsKey: 'noOptionsTextColor'
   });
-  const inputCaretColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputCaretColorClass = useDeviceTargetClass(props, {
     propsKey: 'inputCaretColor'
   });
-  const headingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const headingFillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'headingFill'
   });
-  const headingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const headingFillHoverClass = useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'headingFillHover'
   });
-  const headingTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const headingTextSizeClass = useDeviceTargetClass(props, {
     propsKey: 'headingTextSize'
   });
-  const headingTextWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const headingTextWeightClass = useDeviceTargetClass(props, {
     propsKey: 'headingTextWeight'
   });
-  const headingTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const headingTextColorClass = useDeviceTargetClass(props, {
     propsKey: 'headingTextColor'
   });
-  const SelectComponent = React.useMemo(() => isCreatable ? CreatableSelect$1 : Select__default.default, [isCreatable]);
-  React.useEffect(() => {
+  const SelectComponent = useMemo(() => isCreatable ? CreatableSelect$1 : Select$1, [isCreatable]);
+  useEffect(() => {
     const onClickOutside = event => {
       const isTargetSelectContainer = event.target.hasClass && event.target.hasClass('select_state_hide-value-container');
       const isTargetInsideController = selectRef.current.controlRef.contains(event.target);
@@ -8224,13 +8189,13 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
     };
   }, []);
   const selectAppearanceItem = selectConfig.appearance[appearance] || {};
-  return /*#__PURE__*/React__namespace.default.createElement(SelectComponent, {
+  return /*#__PURE__*/React__default.createElement(SelectComponent, {
     after: after,
     badgeAppearance: badgeAppearance,
     badgeSize: badgeSize,
     badgeTextSize: badgeTextSize,
     before: before,
-    className: clsx__default.default(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass || selectAppearanceItem.size && `select_size_${selectAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
+    className: clsx(className, 'select', fillClass, fillHoverClass, shapeClass, borderColorClass, sizeClass || selectAppearanceItem.size && `select_size_${selectAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`),
     classNamePrefix: "select",
     clearIcon: clearIcon,
     clearIconFill: clearIconFill,
@@ -8321,27 +8286,27 @@ const SelectContainer = /*#__PURE__*/React__namespace.default.forwardRef(functio
   });
 });
 SelectContainer.propTypes = {
-  className: PropTypes__default.default.string,
+  className: PropTypes.string,
   // "clearIcon" is SvgImage(file.svg)
-  clearIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
-  clearIconFill: PropTypes__default.default.string,
-  clearIconStroke: PropTypes__default.default.string,
-  closeMenuOnSelect: PropTypes__default.default.bool,
+  clearIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  clearIconFill: PropTypes.string,
+  clearIconStroke: PropTypes.string,
+  closeMenuOnSelect: PropTypes.bool,
   // "dropdownIcon" is SvgImage(file.svg)
-  dropdownIcon: PropTypes__default.default.oneOfType([PropTypes__default.default.func, PropTypes__default.default.element]),
-  dropdownIconFill: PropTypes__default.default.string,
-  dropdownIconStroke: PropTypes__default.default.string,
-  filterOption: PropTypes__default.default.func,
-  initialValue: PropTypes__default.default.any,
-  inputAfter: PropTypes__default.default.any,
-  inputBefore: PropTypes__default.default.any,
-  isClearable: PropTypes__default.default.bool,
-  isSearchable: PropTypes__default.default.bool,
-  noOptionsText: PropTypes__default.default.string,
-  openMenuOnClick: PropTypes__default.default.func,
-  options: PropTypes__default.default.arrayOf(PropTypes__default.default.object),
-  set: PropTypes__default.default.string,
-  onChange: PropTypes__default.default.func
+  dropdownIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+  dropdownIconFill: PropTypes.string,
+  dropdownIconStroke: PropTypes.string,
+  filterOption: PropTypes.func,
+  initialValue: PropTypes.any,
+  inputAfter: PropTypes.any,
+  inputBefore: PropTypes.any,
+  isClearable: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  noOptionsText: PropTypes.string,
+  openMenuOnClick: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.object),
+  set: PropTypes.string,
+  onChange: PropTypes.func
 };
 SelectContainer.defaultProps = {
   animationOpen: 'select_animation_open',
@@ -8522,19 +8487,4 @@ const selectConfig = {
   }
 };
 
-exports.Select = SelectContainer;
-exports.SelectClearIndicator = SelectClearIndicator;
-exports.SelectControl = SelectControl;
-exports.SelectDropdownIndicator = SelectDropdownIndicator;
-exports.SelectGroupHeading = SelectGroupHeading;
-exports.SelectIndicatorsContainer = SelectIndicatorsContainer;
-exports.SelectInput = SelectInput;
-exports.SelectMenu = SelectMenu;
-exports.SelectMultiValueContainer = SelectMultiValueContainer;
-exports.SelectMultiValueLabel = SelectMultiValueLabel;
-exports.SelectMultiValueRemove = SelectMultiValueRemove;
-exports.SelectOption = SelectOption;
-exports.SelectPlaceholder = SelectPlaceholder;
-exports.SelectSingleValue = SelectSingleValue;
-exports.SelectValueContainer = SelectValueContainer;
-exports.selectConfig = selectConfig;
+export { SelectContainer as Select, SelectClearIndicator, SelectControl, SelectDropdownIndicator, SelectGroupHeading, SelectIndicatorsContainer, SelectInput, SelectMenu, SelectMultiValueContainer, SelectMultiValueLabel, SelectMultiValueRemove, SelectOption, SelectPlaceholder, SelectSingleValue, SelectValueContainer, selectConfig };