@commercetools-uikit/select-utils/dist/commercetools-uikit-select-utils.esm.js

Utilities for working with select components.

import { defineMessages, useIntl } from 'react-intl';
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import { designTokens } from '@commercetools-uikit/design-system';
import { warning } from '@commercetools-uikit/utils';
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
import { css } from '@emotion/react';
import { CloseIcon, CloseBoldIcon, CaretDownIcon, SearchIcon } from '@commercetools-uikit/icons';
import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
import omit from 'lodash/omit';
import AccessibleButton from '@commercetools-uikit/accessible-button';
import { components } from 'react-select';
import { cloneElement } from 'react';
import Spacings from '@commercetools-uikit/spacings';
import Text from '@commercetools-uikit/text';
import CheckboxInput from '@commercetools-uikit/checkbox-input';

var messages$1 = 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(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const ClearIndicator = props => {
  const intl = 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 jsx("button", _objectSpread$7(_objectSpread$7({}, restInnerProps), {}, {
    ref: ref,
    css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;fill:", designTokens.colorNeutral40, ";:hover svg *{fill:", designTokens.colorError, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEJjIiwiZmlsZSI6ImNsZWFyLWluZGljYXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIFJlZiwgSlNYIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBDbGVhckluZGljYXRvclByb3BzIH0gZnJvbSAncmVhY3Qtc2VsZWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuaW1wb3J0IHsgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbnR5cGUgVElubmVyUHJvcHMgPSB7XG4gIHJlZjogUmVmPEhUTUxCdXR0b25FbGVtZW50Pjtcbn0gJiBKU1guSW50cmluc2ljRWxlbWVudHNbJ2J1dHRvbiddO1xuXG5leHBvcnQgdHlwZSBUQ2xlYXJJbmRpY2F0b3JQcm9wcyA9IHtcbiAgaW5uZXJQcm9wczogVElubmVyUHJvcHM7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8Q2xlYXJJbmRpY2F0b3JQcm9wcz47XG5cbmNvbnN0IENsZWFySW5kaWNhdG9yID0gKHByb3BzOiBUQ2xlYXJJbmRpY2F0b3JQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCB7XG4gICAgZ2V0U3R5bGVzLFxuICAgIGlubmVyUHJvcHM6IHsgcmVmLCBvbk1vdXNlRG93biwgLi4ucmVzdElubmVyUHJvcHMgfSxcbiAgICBzZWxlY3RQcm9wcyxcbiAgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIHsuLi5yZXN0SW5uZXJQcm9wc31cbiAgICAgIHJlZj17cmVmfVxuICAgICAgY3NzPXtjc3NgXG4gICAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICBiYWNrZ3JvdW5kOiBub25lO1xuICAgICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgICB0ZXh0LWRlY29yYXRpb246IG5vbmU7XG4gICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDQwfTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke2Rlc2lnblRva2Vucy5jb2xvckVycm9yfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHN0eWxlPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpIGFzIENTU1Byb3BlcnRpZXN9XG4gICAgICB0aXRsZT17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLmNsZWFyQnV0dG9uTGFiZWwpfVxuICAgICAgYXJpYS1sYWJlbD17aW50bC5mb3JtYXRNZXNzYWdlKG1lc3NhZ2VzLmNsZWFyQnV0dG9uTGFiZWwpfVxuICAgICAgLy8gb3ZlcnJpZGluZyB0aGUgZGVmYXVsdCBgYXJpYS1oaWRkZW5gIHByb3AgdmFsdWUgdG8gbWFrZSB0aGUgY29tcG9uZW50IGFjY2Vzc2libGUgYnkga2V5Ym9hcmQgLSBodHRwczovL2dpdGh1Yi5jb20vSmVkV2F0c29uL3JlYWN0LXNlbGVjdC9pc3N1ZXMvNDc5M1xuICAgICAgYXJpYS1oaWRkZW49e2ZhbHNlfVxuICAgICAgLy8gb25seSBvbk1vdXNlRG93biBhbmQgb25Ub3VjaEVuZCBldmVudCBoYW5kbGVycyBhcmUgcGFzc2VkIGJ5IGByZWFjdC1zZWxlY3RgIHRvIHRoZSBjb21wb25lbnQgYnkgZGVmYXVsdCwgd2hpY2ggbWFrZXMgaXQgbm90IGFjY2Vzc2libGUgYnkga2V5Ym9hcmRcbiAgICAgIG9uQ2xpY2s9e29uTW91c2VEb3dufVxuICAgID5cbiAgICAgIDxDbG9zZUljb24gc2l6ZT17c2VsZWN0UHJvcHMuaXNDb25kZW5zZWQgPyAnc21hbGwnIDogJ21lZGl1bSd9IC8+XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5DbGVhckluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdDbGVhckluZGljYXRvcic7XG5cbmV4cG9ydCBkZWZhdWx0IENsZWFySW5kaWNhdG9yO1xuIl19 */"),
    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: jsx(CloseIcon, {
      size: selectProps.isCondensed ? 'small' : 'medium'
    })
  }));
};
ClearIndicator.displayName = 'ClearIndicator';
var ClearIndicator$1 = ClearIndicator;

function ownKeys$6(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(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(props.innerProps, removeProps) : props.innerProps;
  return jsx(AccessibleButton, _objectSpread$6(_objectSpread$6({
    label: "Remove"
  }, innerProps), {}, {
    children: jsx(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(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const DropdownIndicator = props => jsx(components.DropdownIndicator, _objectSpread$5(_objectSpread$5({}, props), {}, {
  children: jsx(CaretDownIcon, {
    color: props.isDisabled ? 'neutral60' : undefined,
    size: "small"
  })
}));
DropdownIndicator.displayName = 'DropdownIndicator';
var DropdownIndicator$1 = DropdownIndicator;

function ownKeys$4(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$4(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$4(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const SearchIconDropdownIndicator = props => {
  return jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
    children: jsx(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(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$3(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$3(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const getDefaultComponent = type => {
  if (type === 'singleValue') return components.SingleValue;
  if (type === 'placeholder') return components.Placeholder;
  return null;
};
const WrapperWithIcon = props => {
  const DefaultComponent = getDefaultComponent(props.type);
  if (!DefaultComponent) {
    return null;
  }
  return jsxs(Fragment, {
    children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
      size: props.selectProps.isCondensed ? '30' : '40'
    }), 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__*/css("margin-left:", designTokens.spacing20, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRGdCIiwiZmlsZSI6IndyYXBwZXItd2l0aC1pY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNsb25lRWxlbWVudCwgdHlwZSBKU1ggfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7XG4gIGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMsXG4gIHR5cGUgU2luZ2xlVmFsdWVQcm9wcyxcbiAgdHlwZSBQbGFjZWhvbGRlclByb3BzLFxufSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuaW1wb3J0IHsgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmV4cG9ydCB0eXBlIFRTaW5nbGVWYWx1ZVdyYXBwZXJXaXRoSWNvblByb3BzID0ge1xuICB0eXBlOiAnc2luZ2xlVmFsdWUnO1xufSAmIFRTZWxlY3RJbnB1dEN1c3RvbUNvbXBvbmVudFByb3BzPFNpbmdsZVZhbHVlUHJvcHM+O1xuZXhwb3J0IHR5cGUgVFBsYWNlaG9sZGVyV3JhcHBlcldpdGhJY29uUHJvcHMgPSB7XG4gIHR5cGU6ICdwbGFjZWhvbGRlcic7XG59ICYgVFNlbGVjdElucHV0Q3VzdG9tQ29tcG9uZW50UHJvcHM8UGxhY2Vob2xkZXJQcm9wcz47XG5leHBvcnQgdHlwZSBUV3JhcHBlcldpdGhJY29uUHJvcHM8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPiA9XG4gIFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnXG4gICAgPyBUU2luZ2xlVmFsdWVXcmFwcGVyV2l0aEljb25Qcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFRQbGFjZWhvbGRlcldyYXBwZXJXaXRoSWNvblByb3BzXG4gICAgOiBuZXZlcjtcbmV4cG9ydCB0eXBlIFREZWZhdWx0Q29tcG9uZW50PFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4gPSAoXG4gIHByb3BzOiBUeXBlIGV4dGVuZHMgJ3NpbmdsZVZhbHVlJ1xuICAgID8gU2luZ2xlVmFsdWVQcm9wc1xuICAgIDogVHlwZSBleHRlbmRzICdwbGFjZWhvbGRlcidcbiAgICA/IFBsYWNlaG9sZGVyUHJvcHNcbiAgICA6IG5ldmVyXG4pID0+IEpTWC5FbGVtZW50O1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gPFR5cGUgZXh0ZW5kcyAnc2luZ2xlVmFsdWUnIHwgJ3BsYWNlaG9sZGVyJz4oXG4gIHR5cGU6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlsndHlwZSddXG4pOiBURGVmYXVsdENvbXBvbmVudDxUeXBlPiB8IG51bGwgPT4ge1xuICBpZiAodHlwZSA9PT0gJ3NpbmdsZVZhbHVlJylcbiAgICByZXR1cm4gZGVmYXVsdENvbXBvbmVudHMuU2luZ2xlVmFsdWUgYXMgVERlZmF1bHRDb21wb25lbnQ8VHlwZT47XG4gIGlmICh0eXBlID09PSAncGxhY2Vob2xkZXInKVxuICAgIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlciBhcyBURGVmYXVsdENvbXBvbmVudDxUeXBlPjtcbiAgcmV0dXJuIG51bGw7XG59O1xuXG5jb25zdCBXcmFwcGVyV2l0aEljb24gPSA8VHlwZSBleHRlbmRzICdzaW5nbGVWYWx1ZScgfCAncGxhY2Vob2xkZXInPihcbiAgcHJvcHM6IFRXcmFwcGVyV2l0aEljb25Qcm9wczxUeXBlPlxuKSA9PiB7XG4gIGNvbnN0IERlZmF1bHRDb21wb25lbnQgPSBnZXREZWZhdWx0Q29tcG9uZW50PFR5cGU+KHByb3BzLnR5cGUpO1xuXG4gIGlmICghRGVmYXVsdENvbXBvbmVudCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge3Byb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0ICYmXG4gICAgICAgIGNsb25lRWxlbWVudChwcm9wcy5zZWxlY3RQcm9wcy5pY29uTGVmdCwge1xuICAgICAgICAgIHNpemU6IHByb3BzLnNlbGVjdFByb3BzLmlzQ29uZGVuc2VkID8gJzMwJyA6ICc0MCcsXG4gICAgICAgIH0pfVxuICAgICAgPHNwYW5cbiAgICAgICAgLy8gcmVhY3Qtc2VsZWN0IHVzZXMgYWJzb2x1dGUgcG9zaXRpb25pbmcgZm9yIHRoZSBTaW5nbGVWYWx1ZS9QbGFjZWhvbGRlclxuICAgICAgICAvLyB0aGUgaWNvbiBoYXMgYSBmaXhlZCBzaXplIG9mIDI0cHggKD09IFNwYWNpbmdzWGwpLCB0aGVyZWZvcmUgd2UgY2FuIHVzZSBhIGZpeGVkIG1hcmdpblxuICAgICAgICAvLyBzcGFjaW5nc1hzIGlzIHRoZSBtYXJnaW4gYmV0d2VlbiB0aGUgaWNvbiBhbmQgdmFsdWVcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgICAgIGB9XG4gICAgICA+XG4gICAgICAgIHsvKiBAdHMtaWdub3JlICovfVxuICAgICAgICA8RGVmYXVsdENvbXBvbmVudCB7Li4ucHJvcHN9IC8+XG4gICAgICA8L3NwYW4+XG4gICAgPC8+XG4gICk7XG59O1xuXG5XcmFwcGVyV2l0aEljb24uZGlzcGxheU5hbWUgPSAnV3JhcHBlcldpdGhJY29uJztcblxuZXhwb3J0IGRlZmF1bHQgV3JhcHBlcldpdGhJY29uO1xuXG5jb25zdCBjdXN0b21Db21wb25lbnRzID0ge1xuICBTaW5nbGVWYWx1ZTogKHByb3BzOiBUV3JhcHBlcldpdGhJY29uUHJvcHM8J3NpbmdsZVZhbHVlJz4pID0+IChcbiAgICA8V3JhcHBlcldpdGhJY29uPCdzaW5nbGVWYWx1ZSc+IHsuLi5wcm9wc30gdHlwZT1cInNpbmdsZVZhbHVlXCIgLz5cbiAgKSxcbiAgUGxhY2Vob2xkZXI6IChwcm9wczogVFdyYXBwZXJXaXRoSWNvblByb3BzPCdwbGFjZWhvbGRlcic+KSA9PiAoXG4gICAgPFdyYXBwZXJXaXRoSWNvbjwncGxhY2Vob2xkZXInPiB7Li4ucHJvcHN9IHR5cGU9XCJwbGFjZWhvbGRlclwiIC8+XG4gICksXG59O1xuXG5leHBvcnQgeyBjdXN0b21Db21wb25lbnRzIH07XG4iXX0= */"),
      children: jsx(DefaultComponent, _objectSpread$3({}, props))
    })]
  });
};
WrapperWithIcon.displayName = 'WrapperWithIcon';
var WrapperWithIcon$1 = WrapperWithIcon;
const customComponents = {
  SingleValue: props => jsx(WrapperWithIcon, _objectSpread$3(_objectSpread$3({}, props), {}, {
    type: "singleValue"
  })),
  Placeholder: props => 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(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const MultiplePropertiesSelectInputOption = props => {
  const data = props.data;
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
    children: jsxs(Spacings.Stack, {
      scale: "xs",
      children: [jsx(Text.Detail, {
        fontWeight: "bold",
        children: data?.label || noValueFallback
      }), jsxs(Text.Detail, {
        children: ["Key: ", data?.key || noValueFallback]
      }), jsxs(Text.Detail, {
        children: ["ID: ", data?.id || noValueFallback]
      })]
    })
  }));
};
MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
const DoublePropertySelectInputOption = props => {
  const data = props.data;
  const noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
  return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props), {}, {
    children: jsxs(Spacings.Stack, {
      scale: "xs",
      children: [jsx(Text.Detail, {
        fontWeight: "bold",
        children: data?.label || noValueFallback
      }), jsxs(Text.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 jsx(MultiplePropertiesSelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        noValueFallback: noValueFallback
      }));
    case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
      return jsx(DoublePropertySelectInputOption, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        noValueFallback: noValueFallback
      }));
    default:
      return jsx(components.Option, _objectSpread$2(_objectSpread$2({}, props.optionInnerProps), {}, {
        children: jsx(Text.Detail, {
          children: props.optionInnerProps.data?.label || noValueFallback
        })
      }));
  }
};
CustomSelectInputOption.displayName = 'CustomSelectInputOption';

function ownKeys$1(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$1(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(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 jsxs("div", _objectSpread$1(_objectSpread$1({
        "data-component": "option",
        ref: innerRef
      }, innerProps), {}, {
        css: /*#__PURE__*/css("padding:", designTokens.spacing10, " ", designTokens.spacing20, ";", isFocused && `background-color: ${designTokens.backgroundColorForInputWhenHovered};`, " display:flex;justify-content:space-between;font-size:", designTokens.fontSize20, ";span{font-size:", designTokens.fontSize20, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUNrQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
        className: className,
        "aria-disabled": isDisabled,
        children: [jsx(CheckboxInput, {
          isDisabled: isDisabled,
          isChecked: isSelected,
          onChange: () => {},
          children: jsx("span", {
            children: label
          })
        }), appearance === 'filter' && jsx("div", {
          css: /*#__PURE__*/css("display:flex;align-items:center;font-weight:400;line-height:", designTokens.lineHeight05, ";color:", designTokens.colorNeutral50, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Option;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm9wdGlvbnMtc3R5bGUtY2hlY2tib3gtY29tcG9uZW50cy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNERzQiIsImZpbGUiOiJvcHRpb25zLXN0eWxlLWNoZWNrYm94LWNvbXBvbmVudHMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBQcm9wcyBhcyBSZWFjdFNlbGVjdFByb3BzLCBPcHRpb25Qcm9wcyB9IGZyb20gJ3JlYWN0LXNlbGVjdCc7XG5pbXBvcnQgQ2hlY2tib3hJbnB1dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jaGVja2JveC1pbnB1dCc7XG5pbXBvcnQgdHlwZSB7IFRTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvc2VsZWN0LWlucHV0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG4vKipcbiAqIFJldHVybnMgY3VzdG9tIGNvbXBvbmVudHMgdG8gYmUgdXNlZCB3aXRoIHJlYWN0LXNlbGVjdCwgd2hlbiBvcHRpb25TdHlsZSBpcyBzZXQgdG8gXCJjaGVja2JveFwiXG4gKi9cbnR5cGUgT3B0aW9uVHlwZSA9IHtcbiAgbGFiZWw6IFJlYWN0Tm9kZTtcbiAgdmFsdWU6IHN0cmluZztcbiAgY291bnQ6IG51bWJlcjtcbn07XG5cbmV4cG9ydCBjb25zdCBvcHRpb25TdHlsZUNoZWNrYm94Q29tcG9uZW50cyA9IChcbiAgYXBwZWFyYW5jZTogVFNlbGVjdElucHV0UHJvcHNbJ2FwcGVhcmFuY2UnXVxuKSA9PiB7XG4gIHJldHVybiB7XG4gICAgT3B0aW9uOiAocHJvcHM6IE9wdGlvblByb3BzPE9wdGlvblR5cGU+KSA9PiB7XG4gICAgICBjb25zdCB7XG4gICAgICAgIGlubmVyUmVmLFxuICAgICAgICBpbm5lclByb3BzLFxuICAgICAgICBsYWJlbCxcbiAgICAgICAgaXNEaXNhYmxlZCxcbiAgICAgICAgaXNGb2N1c2VkLFxuICAgICAgICBpc1NlbGVjdGVkLFxuICAgICAgICBjbGFzc05hbWUsXG4gICAgICAgIGRhdGEsXG4gICAgICB9ID0gcHJvcHM7XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXZcbiAgICAgICAgICBkYXRhLWNvbXBvbmVudD1cIm9wdGlvblwiXG4gICAgICAgICAgcmVmPXtpbm5lclJlZn1cbiAgICAgICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICAgICAgICBjc3M9e2Nzc2BcbiAgICAgICAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcxMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfTtcbiAgICAgICAgICAgICR7aXNGb2N1c2VkICYmXG4gICAgICAgICAgICBgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZH07YH1cbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gICAgICAgICAgICBmb250LXNpemU6ICR7ZGVzaWduVG9rZW5zLmZvbnRTaXplMjB9O1xuICAgICAgICAgICAgc3BhbiB7XG4gICAgICAgICAgICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemUyMH07XG4gICAgICAgICAgICB9XG4gICAgICAgICAgYH1cbiAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICBhcmlhLWRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICA+XG4gICAgICAgICAgPENoZWNrYm94SW5wdXRcbiAgICAgICAgICAgIGlzRGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgICAgICBpc0NoZWNrZWQ9e2lzU2VsZWN0ZWR9XG4gICAgICAgICAgICBvbkNoYW5nZT17KCkgPT4ge319XG4gICAgICAgICAgPlxuICAgICAgICAgICAgPHNwYW4+e2xhYmVsfTwvc3Bhbj5cbiAgICAgICAgICA8L0NoZWNrYm94SW5wdXQ+XG4gICAgICAgICAge2FwcGVhcmFuY2UgPT09ICdmaWx0ZXInICYmIChcbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcbiAgICAgICAgICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgICAgICAgICAgIGZvbnQtd2VpZ2h0OiA0MDA7XG4gICAgICAgICAgICAgICAgbGluZS1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLmxpbmVIZWlnaHQwNX07XG4gICAgICAgICAgICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDUwfTtcbiAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgID5cbiAgICAgICAgICAgICAge2RhdGEuY291bnR9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICApfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfSxcbiAgfSBhcyBSZWFjdFNlbGVjdFByb3BzWydjb21wb25lbnRzJ107XG59O1xuXG4vKipcbiAqIFJldHVybnMgcmVhY3Qtc2VsZWN0IHByb3BzIHRvIGJlIHVzZWQgd2l0aCB0aGUgPFNlbGVjdD4gY29tcG9uZW50LCB3aGVuIG9wdGlvblN0eWxlIGlzIHNldCB0byBcImNoZWNrYm94XCJcbiAqL1xuZXhwb3J0IGNvbnN0IG9wdGlvbnNTdHlsZUNoZWNrYm94U2VsZWN0UHJvcHMgPSAoKSA9PiB7XG4gIHJldHVybiB7XG4gICAgLy8gc2VsZWN0ZWQgb3B0aW9ucyBzaG91bGQgc3RpbGwgYmUgdmlzaWJsZSBpbiB0aGUgb3B0aW9uLWxpc3QsIG90aGVyd2lzZSB5b3UgY2FudCB0b2dnbGUgdGhlbVxuICAgIGhpZGVTZWxlY3RlZE9wdGlvbnM6IGZhbHNlLFxuICAgIC8vIGRvbid0IGNsb3NlIHRoZSBtZW51IG9uIGNoZWNrIC8gdW5jaGVjayBvZiBhIGNoZWNrYm94XG4gICAgY2xvc2VNZW51T25TZWxlY3Q6IGZhbHNlLFxuICB9O1xufTtcbiJdfQ== */"),
          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 = 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(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const getHorizontalConstraintValue = value => {
  switch (value) {
    case 'auto':
      return 'initial';
    default:
      return designTokens[`constraint${value}`] || designTokens.constraintScale;
  }
};
const getInputBackgroundColor = props => {
  if (props.appearance === 'quiet') {
    return designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designTokens.backgroundColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designTokens.backgroundColorForInputWhenReadonly;
  }
  return designTokens.backgroundColorForInput;
};
const getMultiValueBackgroundColor = props => {
  if (props.isDisabled) return designTokens.backgroundColorForInputWhenDisabled;
  if (props.isReadOnly) return designTokens.backgroundColorForInputWhenReadonly;
  return designTokens.colorPrimary95;
};
const getInputBorderColor = (props, state) => {
  if (props.appearance === 'quiet') {
    return designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designTokens.borderColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designTokens.colorNeutral95;
  }
  if (state.isFocused) {
    return designTokens.borderColorForInputWhenFocused;
  }
  if (props.hasError) {
    return designTokens.borderColorForInputWhenError;
  }
  if (props.hasWarning) {
    return designTokens.borderColorForInputWhenWarning;
  }
  return designTokens.borderColorForInput;
};
const getHoverInputBorderColor = props => {
  if (props.appearance === 'quiet') {
    return designTokens.colorTransparent;
  }
  if (props.isDisabled) {
    return designTokens.borderColorForInputWhenDisabled;
  }
  if (props.isReadOnly) {
    return designTokens.colorNeutral95;
  }
  if (props.hasError) {
    return designTokens.borderColorForInputWhenError;
  }
  if (props.hasWarning) {
    return designTokens.borderColorForInputWhenWarning;
  }
  return 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 designTokens.backgroundColorForInputWhenHovered;
    }
  }
  return null;
};
const controlStyles = props => (base, state) => {
  return _objectSpread(_objectSpread(_objectSpread({}, base), {}, {
    fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
    backgroundColor: getInputBackgroundColor(props),
    borderColor: getInputBorderColor(props, state),
    borderWidth: (() => {
      if (props.hasWarning || props.hasError || state.isFocused || props.appearance === 'quiet') {
        return designTokens.borderWidth2;
      }
      return designTokens.borderWidth1;
    })(),
    borderRadius: designTokens.borderRadiusForInput,
    minHeight: props.isCondensed ? designTokens.heightForInputAsSmall : designTokens.heightForInput,
    cursor: (() => {
      if (props.isDisabled) return 'not-allowed';
      if (props.isReadOnly) return 'default';
      return 'pointer';
    })(),
    padding: props.appearance === 'quiet' ? `0 ${designTokens.spacing20}` : `0 ${designTokens.spacing30}`,
    transition: `border-color ${designTokens.transitionStandard},
    box-shadow ${designTokens.transitionStandard}`,
    outline: 0,
    boxShadow: 'none'
  }, props.horizontalConstraint === 'auto' ? {
    display: 'inline-flex'
  } : {}), {}, {
    '&:focus-within': {
      borderColor: (() => {
        if (!props.isDisabled && !props.isReadOnly) return designTokens.borderColorForInputWhenFocused;
        return null;
      })()
    },
    '&:hover': {
      borderColor: getHoverInputBorderColor(props),
      backgroundColor: getHoverInputBackgroundColor(props)
    },
    pointerEvents: 'auto',
    color: props.isDisabled || props.isReadOnly ? designTokens.fontColorForInputWhenDisabled : base.fontColorForInput
  });
};
const menuStyles = props => base => {
  return _objectSpread(_objectSpread(_objectSpread({}, base), props.appearance === 'filter' ? {
    position: 'inherit',
    zIndex: 'inherit'
  } : {}), {}, {
    border: `1px solid ${designTokens.colorSurface}`,
    borderRadius: designTokens.borderRadiusForInput,
    backgroundColor: designTokens.backgroundColorForInput,
    boxShadow: props.appearance === 'filter' ? 'none' : '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
    fontSize: designTokens.fontSize30,
    fontFamily: 'inherit',
    margin: `${designTokens.spacing10} 0 0 0`,
    borderColor: (() => {
      if (props.hasError || props.hasWarning) {
        return designTokens.colorSurface;
      }
      return base.borderColorForInput;
    })(),
    width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
    minWidth: props.minMenuWidth ? getHorizontalConstraintValue(props.minMenuWidth) : designTokens.constraint3,
    maxWidth: props.maxMenuWidth ? getHorizontalConstraintValue(props.maxMenuWidth) : designTokens.constraintScale
  });
};
const indicatorSeparatorStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    display: 'none',
    margin: '0',
    padding: '0',
    marginLeft: designTokens.spacing10
  });
};
const dropdownIndicatorStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: designTokens.fontColorForInput,
    margin: '0',
    padding: '0',
    marginLeft: designTokens.spacing20,
    fill: (() => {
      if (props.isDisabled || props.isReadOnly) return designTokens.fontColorForInputWhenDisabled;
      if (props.hasError) return designTokens.colorError;
      if (props.hasWarning) return designTokens.colorWarning;
      return designTokens.colorNeutral60;
    })()
  });
};
const clearIndicatorStyles = () => base => _objectSpread(_objectSpread({}, base), {}, {
  display: 'flex',
  padding: 0,
  marginLeft: designTokens.spacing20
});
const menuListStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    padding: `${designTokens.spacing10} 0`,
    borderRadius: designTokens.borderRadiusForInput,
    backgroundColor: designTokens.backgroundColorForInput
  });
};
const optionStyles = props => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    transition: `border-color ${designTokens.transitionStandard},
      background-color ${designTokens.transitionStandard},
      color ${designTokens.transitionStandard}`,
    padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
    lineHeight: designTokens.lineHeight40,
    fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
    cursor: state.isDisabled ? 'not-allowed' : 'pointer',
    color: (() => {
      if (state.isDisabled) return designTokens.fontColorForInputWhenDisabled;
      return designTokens.fontColorForInput;
    })(),
    borderRadius: props.appearance === 'filter' && '4px',
    backgroundColor: (() => {
      if (state.isSelected) return designTokens.colorPrimary95;
      if (state.isFocused) return designTokens.backgroundColorForInputWhenHovered;
      return base.backgroundColor;
    })(),
    '&:active': {
      backgroundColor: (() => {
        if (state.isDisabled) return designTokens.colorTransparent;
        return designTokens.colorPrimary95;
      })()
    }
  });
};
const placeholderStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: (() => {
      if (props.appearance === 'quiet' && !props.isReadOnly && !props.isDisabled) {
        if (props.hasError) {
          return designTokens.colorError;
        }
        if (props.hasWarning) {
          return designTokens.colorWarning;
        }
      }
      return designTokens.colorNeutral60;
    })(),
    width: '100%',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    fill: props.isDisabled || props.isReadOnly ? 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 ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60
  });
};
const singleValueStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: (() => {
      if (props.isDisabled) {
        return designTokens.fontColorForInputWhenDisabled;
      }
      if (props.isReadOnly) {
        return designTokens.fontColorForInputWhenReadonly;
      }
      if (props.hasError) return designTokens.colorError;
      if (props.hasWarning) return designTokens.colorWarning;
      return designTokens.fontColorForInput;
    })()
  });
};
const groupStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    padding: 0,
    '&:not(:first-of-type)': {
      borderTop: props.showOptionGroupDivider ? `1px solid ${designTokens.colorNeutral90}` : base.borderTop
    }
  });
};
const groupHeadingStyles = () => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    color: designTokens.fontColorForInputWhenReadonly,
    fontSize: designTokens.fontSize20,
    borderBottom: `1px solid ${designTokens.colorNeutral90}`,
    textTransform: 'none',
    fontWeight: designTokens.fontWeight500,
    padding: `${designTokens.spacing20} ${designTokens.spacing30}`,
    '&:empty': {
      padding: 0
    }
  });
};
const containerStyles = () => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    fontFamily: 'inherit',
    minHeight: designTokens.heightForInputAsSmall,
    borderRadius: designTokens.borderRadiusForInput,
    borderColor: state.isFocused ? 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 ${designTokens.spacing20} 0 calc(${designTokens.spacing05} + ${designTokens.spacing10})` : designTokens.spacing20,
    border: `1px solid ${designTokens.colorNeutral85}`,
    borderRadius: designTokens.borderRadius20
  });
};
const multiValueLabelStyles = props => base => {
  return _objectSpread(_objectSpread({}, base), {}, {
    fontSize: props.isCondensed ? designTokens.fontSize20 : designTokens.fontSize30,
    lineHeight: props.isCondensed ? designTokens.lineHeight20 : designTokens.lineHeight40,
    color: (() => {
      if (props.isDisabled) return designTokens.fontColorForInputWhenDisabled;
      if (props.isReadOnly) return designTokens.fontColorForInputWhenReadonly;
      return base.color;
    })(),
    padding: `${props.isCondensed ? '1px' : designTokens.spacing10} ${designTokens.spacing20}`,
    borderRadius: `${designTokens.borderRadius2} 0 0 ${designTokens.borderRadius2}`,
    border: 'none',
    borderWidth: '1px 0 1px 1px',
    '&:last-child': {
      borderRadius: designTokens.borderRadius2,
      borderWidth: designTokens.borderWidth1
    }
  });
};
const multiValueRemoveStyles = props => (base, state) => {
  return _objectSpread(_objectSpread({}, base), {}, {
    borderColor: designTokens.colorNeutral,
    padding: `0 ${designTokens.spacing10}`,
    borderRadius: `0 ${designTokens.borderRadius2} ${designTokens.borderRadius2} 0`,
    borderStyle: 'none',
    borderWidth: '0',
    pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
    backgroundColor: designTokens.colorNeutral95,
    'svg *': {
      fill: props.isReadOnly ? designTokens.fontColorForInputWhenReadonly : ''
    },
    '&:hover, &:focus': {
      borderColor: designTokens.colorWarning,
      backgroundColor: designTokens.colorNeutral95,
      'svg *': {
        fill: 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 getMessage = componentName => `${componentName}: use \`menuPortalZIndex\` in conjunction with \`menuPortalTarget\``;
const warnIfMenuPortalPropsAreMissing = props => {
  if (typeof props.menuPortalZIndex !== 'undefined' && props.menuPortalZIndex !== 1 // 1 is the value passed in default props
  ) {
    process.env.NODE_ENV !== "production" ? warning(props.menuPortalTarget, getMessage(props.componentName)) : void 0;
  }
};

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

export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, optionStyleCheckboxComponents, optionsStyleCheckboxSelectProps, version, warnIfMenuPortalPropsAreMissing };