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

Utilities for working with select components.

'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 designSystem = require('@commercetools-uikit/design-system');
require('@commercetools-uikit/utils');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
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');
var Spacings = require('@commercetools-uikit/spacings');
var Text = require('@commercetools-uikit/text');
var CheckboxInput = require('@commercetools-uikit/checkbox-input');

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 omit__default = /*#__PURE__*/_interopDefault(omit);
var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
var Spacings__default = /*#__PURE__*/_interopDefault(Spacings);
var Text__default = /*#__PURE__*/_interopDefault(Text);
var CheckboxInput__default = /*#__PURE__*/_interopDefault(CheckboxInput);

var messages$1 = reactIntl.defineMessages({
  clearButtonLabel: {
    id: 'UIKit.ClearButton.clearButtonLabel',
    description: 'Label for the clear button',
    defaultMessage: 'Clear'
  }
});

const _excluded = ["ref", "onMouseDown"];
function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const ClearIndicator = props => {
  const intl = reactIntl.useIntl();
  const getStyles = props.getStyles,
    _props$innerProps = props.innerProps,
    ref = _props$innerProps.ref,
    onMouseDown = _props$innerProps.onMouseDown,
    restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded),
    selectProps = props.selectProps;
  return jsxRuntime.jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
    ref: ref,
    css: /*#__PURE__*/react.css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designSystem.designTokens.colorNeutral40, ";:hover svg *{fill:", designSystem.designTokens.colorError, ";}" + ("" ), "" ),
    style: getStyles('clearIndicator', props),
    title: intl.formatMessage(messages$1.clearButtonLabel),
    "aria-label": intl.formatMessage(messages$1.clearButtonLabel)
    // overriding the default `aria-hidden` prop value to make the component accessible by keyboard - https://github.com/JedWatson/react-select/issues/4793
    ,
    "aria-hidden": false
    // only onMouseDown and onTouchEnd event handlers are passed by `react-select` to the component by default, which makes it not accessible by keyboard
    ,
    onClick: onMouseDown,
    children: jsxRuntime.jsx(icons.CloseIcon, {
      size: selectProps.isCondensed ? 'small' : 'medium'
    })
  }));
};
ClearIndicator.displayName = 'ClearIndicator';
var ClearIndicator$1 = ClearIndicator;

function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
// see https://github.com/JedWatson/react-select/blob/44e9fb29b230e49a754a2f0d6f30c2250aa45009/src/components/MultiValue.js
const removeProps = ['onClick', 'onTouchEnd', 'onMouseDown'];
const TagRemove = props => {
  const isDisabled = Boolean(props.selectProps.isDisabled || props.selectProps.isReadOnly);
  // when the select input is disabled,
  // we don't want to spread the removeProp event handlers
  const innerProps = isDisabled ? omit__default["default"](props.innerProps, removeProps) : props.innerProps;
  return jsxRuntime.jsx(AccessibleButton__default["default"], _objectSpread$6(_objectSpread$6({
    label: "Remove"
  }, innerProps), {}, {
    children: jsxRuntime.jsx(icons.CloseBoldIcon, {
      color: isDisabled ? 'neutral60' : 'solid',
      size: props.selectProps.isCondensed ? 'small' : 'medium'
    })
  }));
};
TagRemove.displayName = 'TagRemove';
var TagRemove$1 = TagRemove;

function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const DropdownIndicator = props => jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
  children: jsxRuntime.jsx(icons.CaretDownIcon, {
    color: props.isDisabled ? 'neutral60' : undefined,
    size: "small"
  })
}));
DropdownIndicator.displayName = 'DropdownIndicator';
var DropdownIndicator$1 = DropdownIndicator;

function ownKeys$4(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const SearchIconDropdownIndicator = props => {
  return jsxRuntime.jsx(reactSelect.components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
    children: jsxRuntime.jsx(icons.SearchIcon, {
      color: 'neutral60',
      size: props.selectProps.isCondensed ? 'medium' : 'big'
    })
  }));
};
SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;

function ownKeys$3(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getDefaultComponent = type => {
  if (type === 'singleValue') return reactSelect.components.SingleValue;
  if (type === 'placeholder') return reactSelect.components.Placeholder;
  return null;
};
const WrapperWithIcon = props => {
  const DefaultComponent = getDefaultComponent(props.type);
  if (!DefaultComponent) {
    return null;
  }
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [props.selectProps.iconLeft && /*#__PURE__*/react$1.cloneElement(props.selectProps.iconLeft, {
      size: props.selectProps.isCondensed ? '30' : '40'
    }), 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.designTokens.spacing20, ";" + ("" ), "" ),
      children: jsxRuntime.jsx(DefaultComponent, _objectSpread$3({}, props))
    })]
  });
};
WrapperWithIcon.displayName = 'WrapperWithIcon';
var WrapperWithIcon$1 = WrapperWithIcon;
const customComponents = {
  SingleValue: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
    type: "singleValue"
  })),
  Placeholder: props => jsxRuntime.jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
    type: "placeholder"
  }))
};

const NO_VALUE_FALLBACK = '- - - -';
const SELECT_DROPDOWN_OPTION_TYPES = {
  SINGLE_PROPERTY: 'single-property',
  DOUBLE_PROPERTY: 'double-property',
  MULTIPLE_PROPERTIES: 'multiple-properties'
};

function ownKeys$2(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const MultiplePropertiesSelectInputOption = props => {
  const data = props.data;
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
    children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
      scale: "xs",
      children: [jsxRuntime.jsx(Text__default["default"].Detail, {
        fontWeight: "bold",
        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';
const DoublePropertySelectInputOption = props => {
  const data = props.data;
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
  return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
    children: jsxRuntime.jsxs(Spacings__default["default"].Stack, {
      scale: "xs",
      children: [jsxRuntime.jsx(Text__default["default"].Detail, {
        fontWeight: "bold",
        children: data?.label || noValueFallback
      }), jsxRuntime.jsxs(Text__default["default"].Detail, {
        children: ["Key: ", data?.key || noValueFallback]
      })]
    })
  }));
};
DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
const CustomSelectInputOption = props => {
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
  switch (props.optionType) {
    case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
      return jsxRuntime.jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        noValueFallback: noValueFallback
      }));
    case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
      return jsxRuntime.jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        noValueFallback: noValueFallback
      }));
    default:
      return jsxRuntime.jsx(reactSelect.components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        children: jsxRuntime.jsx(Text__default["default"].Detail, {
          children: props.optionInnerProps.data?.label || noValueFallback
        })
      }));
  }
};
CustomSelectInputOption.displayName = 'CustomSelectInputOption';

function ownKeys$1(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const optionStyleCheckboxComponents = appearance => {
  return {
    Option: props => {
      const innerRef = props.innerRef,
        innerProps = props.innerProps,
        label = props.label,
        isDisabled = props.isDisabled,
        isFocused = props.isFocused,
        isSelected = props.isSelected,
        className = props.className,
        data = props.data;
      return jsxRuntime.jsxs("div", _objectSpread$1(_objectSpread$1({
        "data-component": "option",
        ref: innerRef
      }, innerProps), {}, {
        css: /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";", isFocused && `background-color: ${designSystem.designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designSystem.designTokens.fontSize20, ";span{font-size:", designSystem.designTokens.fontSize20, ";}" + ("" ), "" ),
        className: className,
        "aria-disabled": isDisabled,
        children: [jsxRuntime.jsx(CheckboxInput__default["default"], {
          isDisabled: isDisabled,
          isChecked: isSelected,
          onChange: () => {},
          children: jsxRuntime.jsx("span", {
            children: label
          })
        }), appearance === 'filter' && jsxRuntime.jsx("div", {
          css: /*#__PURE__*/react.css("display:flex;align-items:center;font-weight:400;line-height:", designSystem.designTokens.lineHeight05, ";color:", designSystem.designTokens.colorNeutral50, ";" + ("" ), "" ),
          children: data.count
        })]
      }));
    }
  };
};

/**
 * Returns react-select props to be used with the <Select> component, when optionStyle is set to "checkbox"
 */
const optionsStyleCheckboxSelectProps = () => {
  return {
    // selected options should still be visible in the option-list, otherwise you cant toggle them
    hideSelectedOptions: false,
    // don't close the menu on check / uncheck of a checkbox
    closeMenuOnSelect: false
  };
};

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...'
  },
  selectInputAsFilterPlaceholder: {
    id: 'UIKit.SelectInput.selectInputAsFilterPlaceholder',
    description: 'Default input placeholder text when used as filter',
    defaultMessage: 'Search'
  },
  loadingOptions: {
    id: 'UIKit.SelectInput.loadingOptions',
    description: 'Default input loading text',
    defaultMessage: 'Loading...'
  }
});

function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getHorizontalConstraintValue = value => {
  switch (value) {
    case 'auto':
      return 'initial';
    default:
      return designSystem.designTokens[`constraint${value}`] || designSystem.designTokens.constraintScale;
  }
};
const getInputBackgroundColor = props => {
  if (props.appearance === 'quiet') {
    return designSystem.designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designSystem.designTokens.backgroundColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designSystem.designTokens.backgroundColorForInputWhenReadonly;
  }
  return designSystem.designTokens.backgroundColorForInput;
};
const getMultiValueBackgroundColor = props => {
  if (props.isDisabled) return designSystem.designTokens.backgroundColorForInputWhenDisabled;
  if (props.isReadOnly) return designSystem.designTokens.backgroundColorForInputWhenReadonly;
  return designSystem.designTokens.colorPrimary95;
};
const getInputBorderColor = (props, state) => {
  if (props.appearance === 'quiet') {
    return designSystem.designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designSystem.designTokens.borderColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designSystem.designTokens.colorNeutral95;
  }
  if (state.isFocused) {
    return designSystem.designTokens.borderColorForInputWhenFocused;
  }
  if (props.hasError) {
    return designSystem.designTokens.borderColorForInputWhenError;
  }
  if (props.hasWarning) {
    return designSystem.designTokens.borderColorForInputWhenWarning;
  }
  return designSystem.designTokens.borderColorForInput;
};
const getHoverInputBorderColor = props => {
  if (props.appearance === 'quiet') {
    return designSystem.designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designSystem.designTokens.borderColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designSystem.designTokens.colorNeutral95;
  }
  if (props.hasError) {
    return designSystem.designTokens.borderColorForInputWhenError;
  }
  if (props.hasWarning) {
    return designSystem.designTokens.borderColorForInputWhenWarning;
  }
  return designSystem.designTokens.borderColorForInputWhenHovered;
};
const getHoverInputBackgroundColor = props => {
  if (!props.isDisabled && !props.isReadOnly) {
    if (props.appearance === 'quiet') {
      return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
    } else {
      return designSystem.designTokens.backgroundColorForInputWhenHovered;
    }
  }
  return null;
};
const controlStyles = props => (base, state) => {
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
    fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
    backgroundColor: getInputBackgroundColor(props),
    borderColor: getInputBorderColor(props, state),
    borderWidth: (() => {
      if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
        return designSystem.designTokens.borderWidth2;
      }
      return designSystem.designTokens.borderWidth1;
    })(),
    borderRadius: designSystem.designTokens.borderRadiusForInput,
    minHeight: props.isCondensed ? designSystem.designTokens.heightForInputAsSmall : designSystem.designTokens.heightForInput,
    cursor: (() => {
      if (props.isDisabled) return 'not-allowed';
      if (props.isReadOnly) return 'default';
      return 'pointer';
    })(),
    padding: props.appearance === 'quiet' ? `0 ${designSystem.designTokens.spacing20}` : `0 ${designSystem.designTokens.spacing30}`,
    transition: `border-color ${designSystem.designTokens.transitionStandard},
    box-shadow ${designSystem.designTokens.transitionStandard}`,
    outline: 0,
    boxShadow: 'none'
  }, props.horizontalConstraint === 'auto' ? {
    display: 'inline-flex'
  } : {}), {}, {
    '&:focus-within': {
      borderColor: (() => {
        if (!props.isDisabled && !props.isReadOnly) return designSystem.designTokens.borderColorForInputWhenFocused;
        return null;
      })()
    },
    '&:hover': {
      borderColor: getHoverInputBorderColor(props),
      backgroundColor: getHoverInputBackgroundColor(props)
    },
    pointerEvents: 'auto',
    color: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
  });
};
const menuStyles = props => base => {
  return _objectSpread(_objectSpread(_objectSpread({}, base), props.appearance === 'filter' ? {
    position: 'inherit',
    zIndex: 'inherit'
  } : {}), {}, {
    border: `1px solid ${designSystem.designTokens.colorSurface}`,
    borderRadius: designSystem.designTokens.borderRadiusForInput,
    backgroundColor: designSystem.designTokens.backgroundColorForInput,
    boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
    fontSize: designSystem.designTokens.fontSize30,
    fontFamily: 'inherit',
    margin: `${designSystem.designTokens.spacing10} 0 0 0`,
    borderColor: (() => {
      if (props.hasError || props.hasWarning) {
        return designSystem.designTokens.colorSurface;
      }
      return base.borderColorForInput;
    })(),
    width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
    minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designSystem.designTokens.constraint3,
    maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designSystem.designTokens.constraintScale
  });
};
const indicatorSeparatorStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    display: 'none',
    margin: '0',
    padding: '0',
    marginLeft: designSystem.designTokens.spacing10
  });
};
const dropdownIndicatorStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: designSystem.designTokens.fontColorForInput,
    margin: '0',
    padding: '0',
    marginLeft: designSystem.designTokens.spacing20,
    fill: (() => {
      if (props.isDisabled || props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenDisabled;
      if (props.hasError) return designSystem.designTokens.colorError;
      if (props.hasWarning) return designSystem.designTokens.colorWarning;
      return designSystem.designTokens.colorNeutral60;
    })()
  });
};
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
  display: 'flex',
  padding: 0,
  marginLeft: designSystem.designTokens.spacing20
});
const menuListStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    padding: `${designSystem.designTokens.spacing10} 0`,
    borderRadius: designSystem.designTokens.borderRadiusForInput,
    backgroundColor: designSystem.designTokens.backgroundColorForInput
  });
};
const optionStyles = props => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    transition: `border-color ${designSystem.designTokens.transitionStandard},
      background-color ${designSystem.designTokens.transitionStandard},
      color ${designSystem.designTokens.transitionStandard}`,
    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
    lineHeight: designSystem.designTokens.lineHeight40,
    fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
    color: (() => {
      if (state.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
      return designSystem.designTokens.fontColorForInput;
    })(),
    borderRadius: props.appearance === 'filter' && '4px',
    backgroundColor: (() => {
      if (state.isSelected) return designSystem.designTokens.colorPrimary95;
      if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
      return base.backgroundColor;
    })(),
    '&:active': {
      backgroundColor: (() => {
        if (state.isDisabled) return designSystem.designTokens.colorTransparent;
        return designSystem.designTokens.colorPrimary95;
      })()
    }
  });
};
const placeholderStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: (() => {
      if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
        if (props.hasError) {
          return designSystem.designTokens.colorError;
        }
        if (props.hasWarning) {
          return designSystem.designTokens.colorWarning;
        }
      }
      return designSystem.designTokens.colorNeutral60;
    })(),
    width: '100%',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
  });
};
const getInputValueLayout = props => {
  switch (true) {
    case props.appearance === 'filter':
      return 'grid';
    // Display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input
    // Display property should be Flex when there is an iconLeft, also when the input has some values when isMulti.
    // See PR from react select for more insight https://github.com/JedWatson/react-select/pull/4833
    case props.iconLeft && !props.isMulti || props.isMulti && props.hasValue && (props.controlShouldRenderValue ?? true):
      return 'flex';
    default:
      return 'grid';
  }
};
const valueContainerStyles = props => base => {
  return _objectSpread(_objectSpread(_objectSpread({}, base), !props.isMulti && {
    flexWrap: 'nowrap'
  }), {}, {
    padding: '0',
    backgroundColor: 'none',
    overflow: 'hidden',
    display: getInputValueLayout(props),
    fill: props.isDisabled || props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenDisabled : designSystem.designTokens.colorNeutral60
  });
};
const singleValueStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: (() => {
      if (props.isDisabled) {
        return designSystem.designTokens.fontColorForInputWhenDisabled;
      }
      if (props.isReadOnly) {
        return designSystem.designTokens.fontColorForInputWhenReadonly;
      }
      if (props.hasError) return designSystem.designTokens.colorError;
      if (props.hasWarning) return designSystem.designTokens.colorWarning;
      return designSystem.designTokens.fontColorForInput;
    })()
  });
};
const groupStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    padding: 0,
    '&:not(:first-of-type)': {
      borderTop: props.showOptionGroupDivider ? `1px solid ${designSystem.designTokens.colorNeutral90}` : base.borderTop
    }
  });
};
const groupHeadingStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: designSystem.designTokens.fontColorForInputWhenReadonly,
    fontSize: designSystem.designTokens.fontSize20,
    borderBottom: `1px solid ${designSystem.designTokens.colorNeutral90}`,
    textTransform: 'none',
    fontWeight: designSystem.designTokens.fontWeight500,
    padding: `${designSystem.designTokens.spacing20} ${designSystem.designTokens.spacing30}`,
    '&:empty': {
      padding: 0
    }
  });
};
const containerStyles = () => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    fontFamily: 'inherit',
    minHeight: designSystem.designTokens.heightForInputAsSmall,
    borderRadius: designSystem.designTokens.borderRadiusForInput,
    borderColor: state.isFocused ? designSystem.designTokens.borderColorForInputWhenFocused : base.borderColor,
    boxShadow: state.isFocused ? 'none' : base.boxShadow
  });
};
const indicatorsContainerStyles = () => () => ({
  background: 'none',
  display: 'flex',
  alignItems: 'center'
});
const menuPortalStyles = props => base => _objectSpread(_objectSpread({}, base), {}, {
  zIndex: props.menuPortalZIndex
});
const multiValueStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    display: 'flex',
    alignItems: 'center',
    height: props.isCondensed ? 'inherit' : '32px',
    backgroundColor: getMultiValueBackgroundColor(props),
    padding: props.isCondensed ? `0 ${designSystem.designTokens.spacing20} 0 calc(${designSystem.designTokens.spacing05} + ${designSystem.designTokens.spacing10})` : designSystem.designTokens.spacing20,
    border: `1px solid ${designSystem.designTokens.colorNeutral85}`,
    borderRadius: designSystem.designTokens.borderRadius20
  });
};
const multiValueLabelStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    fontSize: props.isCondensed ? designSystem.designTokens.fontSize20 : designSystem.designTokens.fontSize30,
    lineHeight: props.isCondensed ? designSystem.designTokens.lineHeight20 : designSystem.designTokens.lineHeight40,
    color: (() => {
      if (props.isDisabled) return designSystem.designTokens.fontColorForInputWhenDisabled;
      if (props.isReadOnly) return designSystem.designTokens.fontColorForInputWhenReadonly;
      return base.color;
    })(),
    padding: `${props.isCondensed ? '1px' : designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20}`,
    borderRadius: `${designSystem.designTokens.borderRadius2} 0 0 ${designSystem.designTokens.borderRadius2}`,
    border: 'none',
    borderWidth: '1px 0 1px 1px',
    '&:last-child': {
      borderRadius: designSystem.designTokens.borderRadius2,
      borderWidth: designSystem.designTokens.borderWidth1
    }
  });
};
const multiValueRemoveStyles = props => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    borderColor: designSystem.designTokens.colorNeutral,
    padding: `0 ${designSystem.designTokens.spacing10}`,
    borderRadius: `0 ${designSystem.designTokens.borderRadius2} ${designSystem.designTokens.borderRadius2} 0`,
    borderStyle: 'none',
    borderWidth: '0',
    pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
    backgroundColor: designSystem.designTokens.colorNeutral95,
    'svg *': {
      fill: props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : ''
    },
    '&:hover, &:focus': {
      borderColor: designSystem.designTokens.colorWarning,
      backgroundColor: designSystem.designTokens.colorNeutral95,
      'svg *': {
        fill: designSystem.designTokens.colorError
      }
    }
  });
};
function createSelectStyles(props) {
  return {
    control: controlStyles(props),
    menu: menuStyles(props),
    indicatorSeparator: indicatorSeparatorStyles(),
    dropdownIndicator: dropdownIndicatorStyles(props),
    clearIndicator: clearIndicatorStyles(),
    menuList: menuListStyles(),
    menuPortal: menuPortalStyles(props),
    multiValue: multiValueStyles(props),
    multiValueLabel: multiValueLabelStyles(props),
    multiValueRemove: multiValueRemoveStyles(props),
    indicatorsContainer: indicatorsContainerStyles(),
    option: optionStyles(props),
    placeholder: placeholderStyles(props),
    valueContainer: valueContainerStyles(props),
    singleValue: singleValueStyles(props),
    group: groupStyles(props),
    groupHeading: groupHeadingStyles(),
    container: containerStyles()
  };
}

const warnIfMenuPortalPropsAreMissing = props => {
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
  ) ;
};

// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";

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.optionStyleCheckboxComponents = optionStyleCheckboxComponents;
exports.optionsStyleCheckboxSelectProps = optionsStyleCheckboxSelectProps;
exports.version = version;
exports.warnIfMenuPortalPropsAreMissing = warnIfMenuPortalPropsAreMissing;