@commercetools-uikit/select-utils 0.0.0-canary-2021830134526

package/dist/commercetools-uikit-select-utils.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-select-utils.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-select-utils.cjs.dev.js");
+}

package/dist/commercetools-uikit-select-utils.cjs.prod.js

@@ -0,0 +1,661 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var designSystem = require('@commercetools-uikit/design-system');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+require('prop-types');
+var react = require('@emotion/react');
+var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var omit = require('lodash/omit');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var reactSelect = require('react-select');
+var react$1 = require('react');
+require('@babel/runtime-corejs3/core-js-stable/object/values');
+var Spacings = require('@commercetools-uikit/spacings');
+var Text = require('@commercetools-uikit/text');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
+var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
+var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
+var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
+var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
+var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var omit__default = /*#__PURE__*/_interopDefault(omit);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
+var Text__default = /*#__PURE__*/_interopDefault(Text);
+
+var messages$1 = reactIntl.defineMessages({
+  clearButtonLabel: {
+    id: 'UIKit.ClearButton.clearButtonLabel',
+    description: 'Label for the clear button',
+    defaultMessage: 'Clear'
+  }
+});
+
+var _excluded$1 = ["ref"];
+
+function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$6(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var ClearIndicator = function ClearIndicator(props) {
+  var intl = reactIntl.useIntl();
+
+  var getStyles = props.getStyles,
+      _props$innerProps = props.innerProps,
+      ref = _props$innerProps.ref,
+      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded$1);
+
+  return jsxRuntime.jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
+    ref: ref,
+    css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", designSystem.customProperties.colorWarning, ";}" + ("" ), "" ),
+    style: getStyles('clearIndicator', props),
+    title: intl.formatMessage(messages$1.clearButtonLabel),
+    "aria-label": intl.formatMessage(messages$1.clearButtonLabel),
+    children: jsxRuntime.jsx(icons.CloseIcon, {
+      color: "solid",
+      size: "medium"
+    })
+  }));
+};
+
+ClearIndicator.displayName = 'ClearIndicator';
+ClearIndicator.propTypes = {};
+var ClearIndicator$1 = ClearIndicator;
+
+function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$5(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
+
+var TagRemove = function TagRemove(props) {
+  var isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly); // when the select input is disabled,
+  // we don't want to spread the removeProp event handlers
+
+  var innerProps = isDisabled ? omit__default['default'](props.innerProps, removeProps) : props.innerProps;
+  return jsxRuntime.jsx(AccessibleButton__default['default'], _objectSpread$5(_objectSpread$5({
+    label: "Remove"
+  }, innerProps), {}, {
+    children: jsxRuntime.jsx(icons.CloseBoldIcon, {
+      color: isDisabled ? 'neutral60' : 'solid',
+      size: "medium"
+    })
+  }));
+};
+
+TagRemove.displayName = 'TagRemove';
+TagRemove.propTypes = {};
+var TagRemove$1 = TagRemove;
+
+function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$4(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var DropdownIndicator = function DropdownIndicator(props) {
+  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: jsxRuntime.jsx(icons.CaretDownIcon, {
+      color: props.isDisabled ? 'neutral60' : undefined,
+      size: "small"
+    })
+  }));
+};
+
+DropdownIndicator.displayName = 'DropdownIndicator';
+DropdownIndicator.propTypes = {};
+var DropdownIndicator$1 = DropdownIndicator;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
+  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: jsxRuntime.jsx(icons.SearchIcon, {
+      color: 'neutral60',
+      size: "big"
+    })
+  }));
+};
+
+SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
+var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
+
+var _excluded = ["children"];
+
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var getDefaultComponent = function getDefaultComponent(type) {
+  if (type === 'singleValue') return reactSelect.components.SingleValue;
+  if (type === 'placeholder') return reactSelect.components.Placeholder;
+  return react$1.Fragment;
+};
+
+var WrapperWithIcon = function WrapperWithIcon(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = getDefaultComponent(props.type);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
+      size: 'big'
+    }), jsxRuntime.jsx("span", {
+      // react-select uses absolute positioning for the SingleValue/Placeholder
+      // the icon has a fixed size of 24px (== SpacingsXl), therefore we can use a fixed margin
+      // spacingsXs is the margin between the icon and value
+      css: /*#__PURE__*/react.css("margin-left:", designSystem.customProperties.spacingXl + designSystem.customProperties.spacingXs, ";" + ("" ), "" ),
+      children: jsxRuntime.jsx(Component, _objectSpread$2(_objectSpread$2({}, props), {}, {
+        children: children
+      }))
+    })]
+  });
+};
+
+WrapperWithIcon.propTypes = {};
+WrapperWithIcon.displayName = 'WrapperWithIcon';
+var WrapperWithIcon$1 = WrapperWithIcon;
+/* eslint-disable react/display-name */
+
+var customComponents = {
+  SingleValue: function SingleValue(props) {
+    return jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      type: "singleValue"
+    }));
+  },
+  Placeholder: function Placeholder(props) {
+    return jsxRuntime.jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      type: "placeholder"
+    }));
+  }
+};
+
+var NO_VALUE_FALLBACK = '- - - -';
+var SELECT_DROPDOWN_OPTION_TYPES = {
+  SINGLE_PROPERTY: 'single-property',
+  DOUBLE_PROPERTY: 'double-property',
+  MULTIPLE_PROPERTIES: 'multiple-properties'
+};
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default['default'](_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInputOption(props) {
+  var data = props.data;
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
+      scale: "xs",
+      children: [jsxRuntime.jsx(Text__default['default'].Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxRuntime.jsxs(Text__default['default'].Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      }), jsxRuntime.jsxs(Text__default['default'].Detail, {
+        children: ["ID: ", data.id || noValueFallback]
+      })]
+    })
+  }));
+};
+MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
+MultiplePropertiesSelectInputOption.propTypes = {};
+var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
+  var data = props.data;
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxRuntime.jsxs(Spacings__default['default'].Stack, {
+      scale: "xs",
+      children: [jsxRuntime.jsx(Text__default['default'].Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxRuntime.jsxs(Text__default['default'].Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      })]
+    })
+  }));
+};
+DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
+DoublePropertySelectInputOption.propTypes = {};
+var CustomSelectInputOption = function CustomSelectInputOption(props) {
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+
+  switch (props.optionType) {
+    case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
+      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        noValueFallback: noValueFallback
+      }));
+
+    case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
+      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        noValueFallback: noValueFallback
+      }));
+
+    default:
+      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        children: jsxRuntime.jsx(Text__default['default'].Detail, {
+          children: props.optionInnerProps.data.label || noValueFallback
+        })
+      }));
+  }
+};
+CustomSelectInputOption.displayName = 'CustomSelectInputOption';
+CustomSelectInputOption.propTypes = {};
+
+var messages = reactIntl.defineMessages({
+  createLabel: {
+    id: 'UIKit.CreatableSelectInput.createLabel',
+    description: 'Text of dropdown when creating option',
+    defaultMessage: 'Create "{inputValue}"'
+  },
+  noOptionsMessageWithInputValue: {
+    id: 'UIKit.SelectInput.noOptionsMessageWithInputValue',
+    description: 'Text of dropdown when no options match search text',
+    defaultMessage: 'No options'
+  },
+  noOptionsMessageWithoutInputValue: {
+    id: 'UIKit.SelectInput.noOptionsMessageWithoutInputValue',
+    description: 'Text of dropdown when no options exist',
+    defaultMessage: 'No options'
+  },
+  placeholder: {
+    id: 'UIKit.SelectInput.placeholder',
+    description: 'Default input placeholder text',
+    defaultMessage: 'Select...'
+  },
+  loadingOptions: {
+    id: 'UIKit.SelectInput.loadingOptions',
+    description: 'Default input loading text',
+    defaultMessage: 'Loading...'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default['default'](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default['default'](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context8; _forEachInstanceProperty__default['default'](_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context9; _forEachInstanceProperty__default['default'](_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+
+var controlStyles = function controlStyles(props, theme) {
+  return function (base, state) {
+    var _context;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontSize: overwrittenVars[designSystem.designTokens.fontSizeForInput],
+      backgroundColor: props.isDisabled ? overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenDisabled] : overwrittenVars[designSystem.designTokens.backgroundColorForInput],
+      borderColor: function () {
+        if (props.isDisabled) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenDisabled];
+        if (state.isFocused) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused];
+        if (props.hasError) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenError];
+        if (props.hasWarning) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenWarning];
+        if (props.isReadOnly) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenReadonly];
+        return overwrittenVars[designSystem.designTokens.borderColorForInput];
+      }(),
+      borderRadius: overwrittenVars[designSystem.designTokens.borderRadiusForInput],
+      minHeight: overwrittenVars.sizeHeightInput,
+      cursor: function () {
+        if (props.isDisabled) return 'not-allowed';
+        if (props.isReadOnly) return 'default';
+        return 'pointer';
+      }(),
+      padding: "0 ".concat(overwrittenVars.spacingS),
+      transition: _concatInstanceProperty__default['default'](_context = "border-color ".concat(overwrittenVars.transitionStandard, ",\n    box-shadow ")).call(_context, overwrittenVars.transitionStandard),
+      outline: 0,
+      boxShadow: 'none',
+      '&:focus-within': {
+        boxShadow: function () {
+          if (!props.isDisabled) return "inset 0 0 0 2px ".concat(overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused]);
+          return null;
+        }(),
+        borderColor: function () {
+          if (!props.isDisabled) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused];
+          return null;
+        }()
+      },
+      '&:hover': {
+        borderColor: function () {
+          if (!props.isDisabled && !props.isReadOnly) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused];
+          return null;
+        }()
+      },
+      pointerEvents: 'auto',
+      color: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var menuStyles = function menuStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      border: "1px ".concat(overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused], " solid"),
+      borderRadius: overwrittenVars[designSystem.designTokens.borderRadiusForInput],
+      backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForInput],
+      boxShadow: overwrittenVars.shadow7,
+      fontSize: overwrittenVars[designSystem.designTokens.fontSizeForInput],
+      fontFamily: 'inherit',
+      margin: "".concat(overwrittenVars.spacingXs, " 0 0 0"),
+      borderColor: function () {
+        if (props.hasError) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenError];
+        if (props.hasWarning) return overwrittenVars[designSystem.designTokens.borderColorForInputWhenWarning];
+        return base.borderColorForInput;
+      }()
+    });
+  };
+};
+
+var indicatorSeparatorStyles = function indicatorSeparatorStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      display: 'none',
+      margin: '0',
+      padding: '0',
+      marginLeft: overwrittenVars.spacingXs
+    });
+  };
+};
+
+var dropdownIndicatorStyles = function dropdownIndicatorStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designSystem.designTokens.fontColorForInput],
+      margin: '0',
+      padding: '0',
+      marginLeft: overwrittenVars.spacingXs,
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var clearIndicatorStyles = function clearIndicatorStyles() {
+  return function (base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      display: 'flex',
+      padding: 0
+    });
+  };
+};
+
+var menuListStyles = function menuListStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      padding: '0',
+      borderRadius: overwrittenVars[designSystem.designTokens.borderRadiusForInput],
+      backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForInput]
+    });
+  };
+};
+
+var optionStyles = function optionStyles(props, theme) {
+  return function (base, state) {
+    var _context2, _context3;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      transition: _concatInstanceProperty__default['default'](_context2 = _concatInstanceProperty__default['default'](_context3 = "border-color ".concat(overwrittenVars.transitionStandard, ",\n      background-color ")).call(_context3, overwrittenVars.transitionStandard, ",\n      color ")).call(_context2, overwrittenVars.transitionStandard),
+      paddingLeft: overwrittenVars.spacingS,
+      paddingRight: overwrittenVars.spacingS,
+      color: function () {
+        if (!state.isDisabled) return overwrittenVars[designSystem.designTokens.fontColorForInput];
+        if (state.isSelected) return overwrittenVars[designSystem.designTokens.fontColorForInput];
+        return base.color;
+      }(),
+      backgroundColor: function () {
+        if (state.isSelected) return overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenSelected];
+        if (state.isFocused) return overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenHovered];
+        return base.backgroundColor;
+      }(),
+      '&:active': {
+        color: function () {
+          if (!state.isDisabled) return overwrittenVars[designSystem.designTokens.fontColorForInput];
+          return base.color;
+        }(),
+        backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForInputWhenSelected]
+      }
+    });
+  };
+};
+
+var placeholderStyles = function placeholderStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designSystem.designTokens.placeholderFontColorForInput],
+      width: '100%',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var valueContainerStyles = function valueContainerStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      padding: '0',
+      backgroundColor: 'none',
+      overflow: 'hidden',
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var singleValueStyles = function singleValueStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: function () {
+        if (props.isDisabled) {
+          return overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled];
+        }
+
+        if (props.isReadOnly) {
+          return overwrittenVars[designSystem.designTokens.fontColorForInputWhenReadonly];
+        }
+
+        return overwrittenVars[designSystem.designTokens.fontColorForInput];
+      }()
+    });
+  };
+};
+
+var groupStyles = function groupStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      padding: 0,
+      '&:not(:first-of-type)': {
+        borderTop: props.showOptionGroupDivider ? "1px solid ".concat(overwrittenVars.colorNeutral) : base.borderTop
+      }
+    });
+  };
+};
+
+var groupHeadingStyles = function groupHeadingStyles(props, theme) {
+  return function (base) {
+    var _context4;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designSystem.designTokens.fontColorForInputWhenReadonly],
+      fontSize: overwrittenVars.fontSizeSmall,
+      textTransform: 'none',
+      fontWeight: 'bold',
+      margin: "0 ".concat(overwrittenVars.spacingXs),
+      padding: _concatInstanceProperty__default['default'](_context4 = "".concat(overwrittenVars.spacingS, " ")).call(_context4, overwrittenVars.spacingXs),
+      '&:empty': {
+        padding: 0
+      }
+    });
+  };
+};
+
+var containerStyles = function containerStyles(props, theme) {
+  return function (base, state) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontFamily: 'inherit',
+      minHeight: overwrittenVars.sizeHeightInput,
+      borderRadius: overwrittenVars[designSystem.designTokens.borderRadiusForInput],
+      borderColor: state.isFocused ? overwrittenVars[designSystem.designTokens.borderColorForInputWhenFocused] : base.borderColor,
+      boxShadow: state.isFocused ? 'none' : base.boxShadow
+    });
+  };
+};
+
+var indicatorsContainerStyles = function indicatorsContainerStyles() {
+  return function () {
+    return {
+      background: 'none',
+      display: 'flex',
+      alignItems: 'center'
+    };
+  };
+};
+
+var menuPortalStyles = function menuPortalStyles(props) {
+  return function (base) {
+    return _objectSpread(_objectSpread({}, base), {}, {
+      zIndex: props.menuPortalZIndex
+    });
+  };
+};
+
+var multiValueStyles = function multiValueStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      height: designSystem.customProperties.sizeHeightTag,
+      backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForTag],
+      padding: '0'
+    });
+  };
+};
+
+var multiValueLabelStyles = function multiValueLabelStyles(props, theme) {
+  return function (base) {
+    var _context5, _context6;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontSize: designSystem.customProperties.fontSizeSmall,
+      color: function () {
+        if (props.isDisabled) return overwrittenVars[designSystem.designTokens.fontColorForInputWhenDisabled];
+        if (props.isReadOnly) return overwrittenVars[designSystem.designTokens.fontColorForInputWhenReadonly];
+        return base.color;
+      }(),
+      padding: _concatInstanceProperty__default['default'](_context5 = "".concat(overwrittenVars.spacingXs, " ")).call(_context5, overwrittenVars.spacingS),
+      borderRadius: _concatInstanceProperty__default['default'](_context6 = "".concat(overwrittenVars.borderRadiusForTag, " 0 0 ")).call(_context6, overwrittenVars.borderRadiusForTag),
+      border: "1px ".concat(overwrittenVars[designSystem.designTokens.borderColorForTag], " solid"),
+      borderWidth: '1px 0 1px 1px',
+      '&:last-child': {
+        borderRadius: overwrittenVars.borderRadiusForTag,
+        borderWidth: '1px'
+      }
+    });
+  };
+};
+
+var multiValueRemoveStyles = function multiValueRemoveStyles(props, theme) {
+  return function (base, state) {
+    var _context7;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, designSystem.customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      borderColor: overwrittenVars[designSystem.designTokens.borderColorForTag],
+      padding: "0 ".concat(overwrittenVars.spacingXs),
+      borderRadius: _concatInstanceProperty__default['default'](_context7 = "0 ".concat(overwrittenVars[designSystem.designTokens.borderRadiusForTag], " ")).call(_context7, overwrittenVars[designSystem.designTokens.borderRadiusForTag], " 0"),
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
+      backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForTag],
+      'svg *': {
+        fill: props.isReadOnly ? overwrittenVars[designSystem.designTokens.fontColorForInputWhenReadonly] : ''
+      },
+      '&:hover, &:focus': {
+        borderColor: overwrittenVars.borderColorForTagWarning,
+        backgroundColor: overwrittenVars[designSystem.designTokens.backgroundColorForTag],
+        'svg *': {
+          fill: overwrittenVars[designSystem.designTokens.borderColorForTagWarning]
+        }
+      }
+    });
+  };
+};
+
+function createSelectStyles(props, theme) {
+  return {
+    control: controlStyles(props, theme),
+    menu: menuStyles(props, theme),
+    indicatorSeparator: indicatorSeparatorStyles(props, theme),
+    dropdownIndicator: dropdownIndicatorStyles(props, theme),
+    clearIndicator: clearIndicatorStyles(props, theme),
+    menuList: menuListStyles(props, theme),
+    menuPortal: menuPortalStyles(props, theme),
+    multiValue: multiValueStyles(props, theme),
+    multiValueLabel: multiValueLabelStyles(props, theme),
+    multiValueRemove: multiValueRemoveStyles(props, theme),
+    indicatorsContainer: indicatorsContainerStyles(props, theme),
+    option: optionStyles(props, theme),
+    placeholder: placeholderStyles(props, theme),
+    valueContainer: valueContainerStyles(props, theme),
+    singleValue: singleValueStyles(props, theme),
+    group: groupStyles(props, theme),
+    groupHeading: groupHeadingStyles(props, theme),
+    container: containerStyles(props, theme)
+  };
+}
+
+// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
+var version = '0.0.0-canary-2021830134526';
+
+exports.ClearIndicator = ClearIndicator$1;
+exports.CustomSelectInputOption = CustomSelectInputOption;
+exports.DoublePropertySelectInputOption = DoublePropertySelectInputOption;
+exports.DropdownIndicator = DropdownIndicator$1;
+exports.MultiplePropertiesSelectInputOption = MultiplePropertiesSelectInputOption;
+exports.SELECT_DROPDOWN_OPTION_TYPES = SELECT_DROPDOWN_OPTION_TYPES;
+exports.SearchIconDropdownIndicator = SearchIconDropdownIndicator$1;
+exports.TagRemove = TagRemove$1;
+exports.ValueWrapperWithIcon = WrapperWithIcon$1;
+exports.createSelectStyles = createSelectStyles;
+exports.customComponentsWithIcons = customComponents;
+exports.messages = messages;
+exports.version = version;