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

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

@@ -0,0 +1,669 @@
+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 _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import { customProperties, designTokens } from '@commercetools-uikit/design-system';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
+import PropTypes from 'prop-types';
+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, Fragment as Fragment$1 } from 'react';
+import _Object$values from '@babel/runtime-corejs3/core-js-stable/object/values';
+import Spacings from '@commercetools-uikit/spacings';
+import Text from '@commercetools-uikit/text';
+
+var messages$1 = 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(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$6(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$6(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var ClearIndicator = function ClearIndicator(props) {
+  var intl = useIntl();
+
+  var getStyles = props.getStyles,
+      _props$innerProps = props.innerProps,
+      ref = _props$innerProps.ref,
+      restInnerProps = _objectWithoutProperties(_props$innerProps, _excluded$1);
+
+  return jsx("button", _objectSpread$6(_objectSpread$6({}, restInnerProps), {}, {
+    ref: ref,
+    css: /*#__PURE__*/css("border:none;cursor:pointer;background:none;box-sizing:border-box;text-decoration:none;:hover svg *{fill:", customProperties.colorWarning, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:ClearIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNsZWFyLWluZGljYXRvci5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQmMiLCJmaWxlIjoiY2xlYXItaW5kaWNhdG9yLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgYXMgdmFycyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgQ2xvc2VJY29uIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvaWNvbnMnO1xuaW1wb3J0IG1lc3NhZ2VzIGZyb20gJy4vbWVzc2FnZXMnO1xuXG5jb25zdCBDbGVhckluZGljYXRvciA9IChwcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCB7XG4gICAgZ2V0U3R5bGVzLFxuICAgIGlubmVyUHJvcHM6IHsgcmVmLCAuLi5yZXN0SW5uZXJQcm9wcyB9LFxuICB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgey4uLnJlc3RJbm5lclByb3BzfVxuICAgICAgcmVmPXtyZWZ9XG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICAgIGJhY2tncm91bmQ6IG5vbmU7XG4gICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICBmaWxsOiAke3ZhcnMuY29sb3JXYXJuaW5nfTtcbiAgICAgICAgfVxuICAgICAgYH1cbiAgICAgIHN0eWxlPXtnZXRTdHlsZXMoJ2NsZWFySW5kaWNhdG9yJywgcHJvcHMpfVxuICAgICAgdGl0bGU9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICAgIGFyaWEtbGFiZWw9e2ludGwuZm9ybWF0TWVzc2FnZShtZXNzYWdlcy5jbGVhckJ1dHRvbkxhYmVsKX1cbiAgICA+XG4gICAgICA8Q2xvc2VJY29uIGNvbG9yPVwic29saWRcIiBzaXplPVwibWVkaXVtXCIgLz5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn07XG5cbkNsZWFySW5kaWNhdG9yLmRpc3BsYXlOYW1lID0gJ0NsZWFySW5kaWNhdG9yJztcbkNsZWFySW5kaWNhdG9yLnByb3BUeXBlcyA9IHtcbiAgaW5uZXJQcm9wczogUHJvcFR5cGVzLm9iamVjdCxcbiAgZ2V0U3R5bGVzOiBQcm9wVHlwZXMuZnVuYy5pc1JlcXVpcmVkLFxufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2xlYXJJbmRpY2F0b3I7XG4iXX0= */"),
+    style: getStyles('clearIndicator', props),
+    title: intl.formatMessage(messages$1.clearButtonLabel),
+    "aria-label": intl.formatMessage(messages$1.clearButtonLabel),
+    children: jsx(CloseIcon, {
+      color: "solid",
+      size: "medium"
+    })
+  }));
+};
+
+ClearIndicator.displayName = 'ClearIndicator';
+ClearIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
+  innerProps: PropTypes.object,
+  getStyles: PropTypes.func.isRequired
+} : {};
+var ClearIndicator$1 = ClearIndicator;
+
+function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$5(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$5(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(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(props.innerProps, removeProps) : props.innerProps;
+  return jsx(AccessibleButton, _objectSpread$5(_objectSpread$5({
+    label: "Remove"
+  }, innerProps), {}, {
+    children: jsx(CloseBoldIcon, {
+      color: isDisabled ? 'neutral60' : 'solid',
+      size: "medium"
+    })
+  }));
+};
+
+TagRemove.displayName = 'TagRemove';
+TagRemove.propTypes = process.env.NODE_ENV !== "production" ? {
+  selectProps: PropTypes.shape({
+    isDisabled: PropTypes.bool.isRequired,
+    isReadOnly: PropTypes.bool
+  }).isRequired,
+  innerProps: PropTypes.object
+} : {};
+var TagRemove$1 = TagRemove;
+
+function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$4(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$4(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var DropdownIndicator = function DropdownIndicator(props) {
+  return jsx(components.DropdownIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
+    children: jsx(CaretDownIcon, {
+      color: props.isDisabled ? 'neutral60' : undefined,
+      size: "small"
+    })
+  }));
+};
+
+DropdownIndicator.displayName = 'DropdownIndicator';
+DropdownIndicator.propTypes = process.env.NODE_ENV !== "production" ? {
+  isDisabled: PropTypes.bool
+} : {};
+var DropdownIndicator$1 = DropdownIndicator;
+
+function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$3(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$3(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var SearchIconDropdownIndicator = function SearchIconDropdownIndicator(props) {
+  return jsx(components.DropdownIndicator, _objectSpread$3(_objectSpread$3({}, props), {}, {
+    children: jsx(SearchIcon, {
+      color: 'neutral60',
+      size: "big"
+    })
+  }));
+};
+
+SearchIconDropdownIndicator.displayName = 'SearchIconDropdownIndicator';
+var SearchIconDropdownIndicator$1 = SearchIconDropdownIndicator;
+
+var _excluded = ["children"];
+
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var getDefaultComponent = function getDefaultComponent(type) {
+  if (type === 'singleValue') return components.SingleValue;
+  if (type === 'placeholder') return components.Placeholder;
+  return Fragment$1;
+};
+
+var WrapperWithIcon = function WrapperWithIcon(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = getDefaultComponent(props.type);
+  return jsxs(Fragment, {
+    children: [props.selectProps.iconLeft && /*#__PURE__*/cloneElement(props.selectProps.iconLeft, {
+      size: 'big'
+    }), 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:", customProperties.spacingXl + customProperties.spacingXs, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperWithIcon;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndyYXBwZXItd2l0aC1pY29uLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCZ0IiLCJmaWxlIjoid3JhcHBlci13aXRoLWljb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGcmFnbWVudCwgY2xvbmVFbGVtZW50IH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGN1c3RvbVByb3BlcnRpZXMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IGNvbXBvbmVudHMgYXMgZGVmYXVsdENvbXBvbmVudHMgfSBmcm9tICdyZWFjdC1zZWxlY3QnO1xuXG5jb25zdCBnZXREZWZhdWx0Q29tcG9uZW50ID0gKHR5cGUpID0+IHtcbiAgaWYgKHR5cGUgPT09ICdzaW5nbGVWYWx1ZScpIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5TaW5nbGVWYWx1ZTtcbiAgaWYgKHR5cGUgPT09ICdwbGFjZWhvbGRlcicpIHJldHVybiBkZWZhdWx0Q29tcG9uZW50cy5QbGFjZWhvbGRlcjtcbiAgcmV0dXJuIEZyYWdtZW50O1xufTtcblxuY29uc3QgV3JhcHBlcldpdGhJY29uID0gKHsgY2hpbGRyZW4sIC4uLnByb3BzIH0pID0+IHtcbiAgY29uc3QgQ29tcG9uZW50ID0gZ2V0RGVmYXVsdENvbXBvbmVudChwcm9wcy50eXBlKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICB7cHJvcHMuc2VsZWN0UHJvcHMuaWNvbkxlZnQgJiZcbiAgICAgICAgY2xvbmVFbGVtZW50KHByb3BzLnNlbGVjdFByb3BzLmljb25MZWZ0LCB7XG4gICAgICAgICAgc2l6ZTogJ2JpZycsXG4gICAgICAgIH0pfVxuICAgICAgPHNwYW5cbiAgICAgICAgLy8gcmVhY3Qtc2VsZWN0IHVzZXMgYWJzb2x1dGUgcG9zaXRpb25pbmcgZm9yIHRoZSBTaW5nbGVWYWx1ZS9QbGFjZWhvbGRlclxuICAgICAgICAvLyB0aGUgaWNvbiBoYXMgYSBmaXhlZCBzaXplIG9mIDI0cHggKD09IFNwYWNpbmdzWGwpLCB0aGVyZWZvcmUgd2UgY2FuIHVzZSBhIGZpeGVkIG1hcmdpblxuICAgICAgICAvLyBzcGFjaW5nc1hzIGlzIHRoZSBtYXJnaW4gYmV0d2VlbiB0aGUgaWNvbiBhbmQgdmFsdWVcbiAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgbWFyZ2luLWxlZnQ6ICR7Y3VzdG9tUHJvcGVydGllcy5zcGFjaW5nWGwgK1xuICAgICAgICAgIGN1c3RvbVByb3BlcnRpZXMuc3BhY2luZ1hzfTtcbiAgICAgICAgYH1cbiAgICAgID5cbiAgICAgICAgPENvbXBvbmVudCB7Li4ucHJvcHN9PntjaGlsZHJlbn08L0NvbXBvbmVudD5cbiAgICAgIDwvc3Bhbj5cbiAgICA8Lz5cbiAgKTtcbn07XG5XcmFwcGVyV2l0aEljb24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIHR5cGU6IFByb3BUeXBlcy5vbmVPZihbJ3NpbmdsZVZhbHVlJywgJ3BsYWNlaG9sZGVyJ10pLFxuICBzZWxlY3RQcm9wczogUHJvcFR5cGVzLnNoYXBlKHtcbiAgICBpY29uTGVmdDogUHJvcFR5cGVzLm5vZGUsXG4gIH0pLFxufTtcbldyYXBwZXJXaXRoSWNvbi5kaXNwbGF5TmFtZSA9ICdXcmFwcGVyV2l0aEljb24nO1xuXG5leHBvcnQgZGVmYXVsdCBXcmFwcGVyV2l0aEljb247XG5cbi8qIGVzbGludC1kaXNhYmxlIHJlYWN0L2Rpc3BsYXktbmFtZSAqL1xuY29uc3QgY3VzdG9tQ29tcG9uZW50cyA9IHtcbiAgU2luZ2xlVmFsdWU6IChwcm9wcykgPT4gPFdyYXBwZXJXaXRoSWNvbiB7Li4ucHJvcHN9IHR5cGU9XCJzaW5nbGVWYWx1ZVwiIC8+LFxuICBQbGFjZWhvbGRlcjogKHByb3BzKSA9PiA8V3JhcHBlcldpdGhJY29uIHsuLi5wcm9wc30gdHlwZT1cInBsYWNlaG9sZGVyXCIgLz4sXG59O1xuLyogZXNsaW50LWVuYWJsZSByZWFjdC9kaXNwbGF5LW5hbWUgKi9cblxuZXhwb3J0IHsgY3VzdG9tQ29tcG9uZW50cyB9O1xuIl19 */"),
+      children: jsx(Component, _objectSpread$2(_objectSpread$2({}, props), {}, {
+        children: children
+      }))
+    })]
+  });
+};
+
+WrapperWithIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: PropTypes.node,
+  type: PropTypes.oneOf(['singleValue', 'placeholder']),
+  selectProps: PropTypes.shape({
+    iconLeft: PropTypes.node
+  })
+} : {};
+WrapperWithIcon.displayName = 'WrapperWithIcon';
+var WrapperWithIcon$1 = WrapperWithIcon;
+/* eslint-disable react/display-name */
+
+var customComponents = {
+  SingleValue: function SingleValue(props) {
+    return jsx(WrapperWithIcon, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      type: "singleValue"
+    }));
+  },
+  Placeholder: function Placeholder(props) {
+    return 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(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$1(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var MultiplePropertiesSelectInputOption = function MultiplePropertiesSelectInputOption(props) {
+  var data = props.data;
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxs(Spacings.Stack, {
+      scale: "xs",
+      children: [jsx(Text.Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxs(Text.Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      }), jsxs(Text.Detail, {
+        children: ["ID: ", data.id || noValueFallback]
+      })]
+    })
+  }));
+};
+MultiplePropertiesSelectInputOption.displayName = 'MultiplePropertiesSelectInputOption';
+MultiplePropertiesSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
+  data: PropTypes.shape({
+    label: PropTypes.string,
+    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  }),
+  noValueFallback: PropTypes.string
+} : {};
+var DoublePropertySelectInputOption = function DoublePropertySelectInputOption(props) {
+  var data = props.data;
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+  return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props), {}, {
+    children: jsxs(Spacings.Stack, {
+      scale: "xs",
+      children: [jsx(Text.Detail, {
+        isBold: true,
+        children: data.label || noValueFallback
+      }), jsxs(Text.Detail, {
+        children: ["Key: ", data.key || noValueFallback]
+      })]
+    })
+  }));
+};
+DoublePropertySelectInputOption.displayName = 'DoublePropertySelectInputOption';
+DoublePropertySelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
+  data: PropTypes.shape({
+    label: PropTypes.string,
+    key: PropTypes.string
+  }),
+  noValueFallback: PropTypes.string
+} : {};
+var CustomSelectInputOption = function CustomSelectInputOption(props) {
+  var noValueFallback = props.noValueFallback || NO_VALUE_FALLBACK;
+
+  switch (props.optionType) {
+    case SELECT_DROPDOWN_OPTION_TYPES.MULTIPLE_PROPERTIES:
+      return jsx(MultiplePropertiesSelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        noValueFallback: noValueFallback
+      }));
+
+    case SELECT_DROPDOWN_OPTION_TYPES.DOUBLE_PROPERTY:
+      return jsx(DoublePropertySelectInputOption, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        noValueFallback: noValueFallback
+      }));
+
+    default:
+      return jsx(components.Option, _objectSpread$1(_objectSpread$1({}, props.optionInnerProps), {}, {
+        children: jsx(Text.Detail, {
+          children: props.optionInnerProps.data.label || noValueFallback
+        })
+      }));
+  }
+};
+CustomSelectInputOption.displayName = 'CustomSelectInputOption';
+CustomSelectInputOption.propTypes = process.env.NODE_ENV !== "production" ? {
+  optionType: PropTypes.oneOf(_Object$values(SELECT_DROPDOWN_OPTION_TYPES)),
+  noValueFallback: PropTypes.string,
+  optionInnerProps: PropTypes.shape({
+    data: PropTypes.shape({
+      label: PropTypes.string,
+      key: PropTypes.string,
+      id: PropTypes.string
+    })
+  }).isRequired
+} : {};
+
+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...'
+  },
+  loadingOptions: {
+    id: 'UIKit.SelectInput.loadingOptions',
+    description: 'Default input loading text',
+    defaultMessage: 'Loading...'
+  }
+});
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(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(_context8 = ownKeys(Object(source), true)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context9; _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var controlStyles = function controlStyles(props, theme) {
+  return function (base, state) {
+    var _context;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontSize: overwrittenVars[designTokens.fontSizeForInput],
+      backgroundColor: props.isDisabled ? overwrittenVars[designTokens.backgroundColorForInputWhenDisabled] : overwrittenVars[designTokens.backgroundColorForInput],
+      borderColor: function () {
+        if (props.isDisabled) return overwrittenVars[designTokens.borderColorForInputWhenDisabled];
+        if (state.isFocused) return overwrittenVars[designTokens.borderColorForInputWhenFocused];
+        if (props.hasError) return overwrittenVars[designTokens.borderColorForInputWhenError];
+        if (props.hasWarning) return overwrittenVars[designTokens.borderColorForInputWhenWarning];
+        if (props.isReadOnly) return overwrittenVars[designTokens.borderColorForInputWhenReadonly];
+        return overwrittenVars[designTokens.borderColorForInput];
+      }(),
+      borderRadius: overwrittenVars[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(_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[designTokens.borderColorForInputWhenFocused]);
+          return null;
+        }(),
+        borderColor: function () {
+          if (!props.isDisabled) return overwrittenVars[designTokens.borderColorForInputWhenFocused];
+          return null;
+        }()
+      },
+      '&:hover': {
+        borderColor: function () {
+          if (!props.isDisabled && !props.isReadOnly) return overwrittenVars[designTokens.borderColorForInputWhenFocused];
+          return null;
+        }()
+      },
+      pointerEvents: 'auto',
+      color: props.isDisabled || props.isReadOnly ? overwrittenVars[designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var menuStyles = function menuStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      border: "1px ".concat(overwrittenVars[designTokens.borderColorForInputWhenFocused], " solid"),
+      borderRadius: overwrittenVars[designTokens.borderRadiusForInput],
+      backgroundColor: overwrittenVars[designTokens.backgroundColorForInput],
+      boxShadow: overwrittenVars.shadow7,
+      fontSize: overwrittenVars[designTokens.fontSizeForInput],
+      fontFamily: 'inherit',
+      margin: "".concat(overwrittenVars.spacingXs, " 0 0 0"),
+      borderColor: function () {
+        if (props.hasError) return overwrittenVars[designTokens.borderColorForInputWhenError];
+        if (props.hasWarning) return overwrittenVars[designTokens.borderColorForInputWhenWarning];
+        return base.borderColorForInput;
+      }()
+    });
+  };
+};
+
+var indicatorSeparatorStyles = function indicatorSeparatorStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, 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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designTokens.fontColorForInput],
+      margin: '0',
+      padding: '0',
+      marginLeft: overwrittenVars.spacingXs,
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      padding: '0',
+      borderRadius: overwrittenVars[designTokens.borderRadiusForInput],
+      backgroundColor: overwrittenVars[designTokens.backgroundColorForInput]
+    });
+  };
+};
+
+var optionStyles = function optionStyles(props, theme) {
+  return function (base, state) {
+    var _context2, _context3;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      transition: _concatInstanceProperty(_context2 = _concatInstanceProperty(_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[designTokens.fontColorForInput];
+        if (state.isSelected) return overwrittenVars[designTokens.fontColorForInput];
+        return base.color;
+      }(),
+      backgroundColor: function () {
+        if (state.isSelected) return overwrittenVars[designTokens.backgroundColorForInputWhenSelected];
+        if (state.isFocused) return overwrittenVars[designTokens.backgroundColorForInputWhenHovered];
+        return base.backgroundColor;
+      }(),
+      '&:active': {
+        color: function () {
+          if (!state.isDisabled) return overwrittenVars[designTokens.fontColorForInput];
+          return base.color;
+        }(),
+        backgroundColor: overwrittenVars[designTokens.backgroundColorForInputWhenSelected]
+      }
+    });
+  };
+};
+
+var placeholderStyles = function placeholderStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designTokens.placeholderFontColorForInput],
+      width: '100%',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var valueContainerStyles = function valueContainerStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      padding: '0',
+      backgroundColor: 'none',
+      overflow: 'hidden',
+      fill: props.isDisabled || props.isReadOnly ? overwrittenVars[designTokens.fontColorForInputWhenDisabled] : base.fontColorForInput
+    });
+  };
+};
+
+var singleValueStyles = function singleValueStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: function () {
+        if (props.isDisabled) {
+          return overwrittenVars[designTokens.fontColorForInputWhenDisabled];
+        }
+
+        if (props.isReadOnly) {
+          return overwrittenVars[designTokens.fontColorForInputWhenReadonly];
+        }
+
+        return overwrittenVars[designTokens.fontColorForInput];
+      }()
+    });
+  };
+};
+
+var groupStyles = function groupStyles(props, theme) {
+  return function (base) {
+    var overwrittenVars = _objectSpread(_objectSpread({}, 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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      color: overwrittenVars[designTokens.fontColorForInputWhenReadonly],
+      fontSize: overwrittenVars.fontSizeSmall,
+      textTransform: 'none',
+      fontWeight: 'bold',
+      margin: "0 ".concat(overwrittenVars.spacingXs),
+      padding: _concatInstanceProperty(_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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontFamily: 'inherit',
+      minHeight: overwrittenVars.sizeHeightInput,
+      borderRadius: overwrittenVars[designTokens.borderRadiusForInput],
+      borderColor: state.isFocused ? overwrittenVars[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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      height: customProperties.sizeHeightTag,
+      backgroundColor: overwrittenVars[designTokens.backgroundColorForTag],
+      padding: '0'
+    });
+  };
+};
+
+var multiValueLabelStyles = function multiValueLabelStyles(props, theme) {
+  return function (base) {
+    var _context5, _context6;
+
+    var overwrittenVars = _objectSpread(_objectSpread({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      fontSize: customProperties.fontSizeSmall,
+      color: function () {
+        if (props.isDisabled) return overwrittenVars[designTokens.fontColorForInputWhenDisabled];
+        if (props.isReadOnly) return overwrittenVars[designTokens.fontColorForInputWhenReadonly];
+        return base.color;
+      }(),
+      padding: _concatInstanceProperty(_context5 = "".concat(overwrittenVars.spacingXs, " ")).call(_context5, overwrittenVars.spacingS),
+      borderRadius: _concatInstanceProperty(_context6 = "".concat(overwrittenVars.borderRadiusForTag, " 0 0 ")).call(_context6, overwrittenVars.borderRadiusForTag),
+      border: "1px ".concat(overwrittenVars[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({}, customProperties), theme);
+
+    return _objectSpread(_objectSpread({}, base), {}, {
+      borderColor: overwrittenVars[designTokens.borderColorForTag],
+      padding: "0 ".concat(overwrittenVars.spacingXs),
+      borderRadius: _concatInstanceProperty(_context7 = "0 ".concat(overwrittenVars[designTokens.borderRadiusForTag], " ")).call(_context7, overwrittenVars[designTokens.borderRadiusForTag], " 0"),
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      pointerEvents: state.isDisabled || props.isReadOnly ? 'none' : base.pointerEvents,
+      backgroundColor: overwrittenVars[designTokens.backgroundColorForTag],
+      'svg *': {
+        fill: props.isReadOnly ? overwrittenVars[designTokens.fontColorForInputWhenReadonly] : ''
+      },
+      '&:hover, &:focus': {
+        borderColor: overwrittenVars.borderColorForTagWarning,
+        backgroundColor: overwrittenVars[designTokens.backgroundColorForTag],
+        'svg *': {
+          fill: overwrittenVars[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';
+
+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, version };