@ntbjs/react-components 1.2.0-rc.93 → 1.2.0-rc.95

package/CompactAutocompleteSelect-bf5e8820.js

@@ -0,0 +1,418 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
+var lodash = require('lodash');
+var nanoid = require('nanoid');
+var index = require('./index-1e234d23.js');
+var React = require('react');
+require('./Alert-b41a748e.js');
+require('./Badge-4a2a9f6b.js');
+require('./Popover-938e6bfc.js');
+require('./Tab-88f77a44.js');
+require('./Tabs-e64ecfaa.js');
+var Tooltip = require('./Tooltip-22238771.js');
+require('./VerificationStatusIcon-99a54d5d.js');
+var styled = require('styled-components');
+var Select = require('react-select');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+var reactSelectCreatable_esm = require('./react-select-creatable.esm-31bd2caf.js');
+var close = require('./close-1751121a.js');
+var expandMore = require('./expand-more-d74e2bd2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
+var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  from {\n    background-color: ", ";\n  }\n  to {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
+}, function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
+});
+var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  from {\n    background-color: ", ";\n  }\n  to {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
+}, function (props) {
+  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
+});
+var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  from {\n    opacity: 0\n  }\n  to {\n    opacity: 1\n  }\n"])));
+var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  from {\n    opacity: 1\n  }\n  to {\n    opacity: 0\n  }\n"])));
+var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
+var sharedStyle = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 0.875rem;\n  line-height: 1rem;\n  width: 100%;\n  display: block;\n  box-shadow: 'none';\n  flex-basis: ", ";\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+}, function (props) {
+  return props.$hasLabel ? '66.66%' : '100%';
+});
+var CompactAutocompleteSelect$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  font-family: ", ";\n  ", "\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+}, function (props) {
+  return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
+});
+var Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n  ", ";\n  flex-basis: 33.33%;\n  font-size: 0.875rem;\n  line-height: 1rem;\n  height: 19px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 2px;\n  ", "\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n      cursor: not-allowed;\n    "])));
+});
+var InputContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  height: 19px;\n"])));
+var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n  opacity: 1;\n  pointer-events: none;\n  display: flex;\n  opacity: ", ";\n  animation: ", " 0.5s ease-in-out;\n  transition: opacity 0.5s ease-in-out;\n  margin-right: 5px;\n  ", "\n  > svg {\n    width: 13px;\n  }\n"])), function (props) {
+  return props.fadeIn ? 0 : 1;
+}, function (props) {
+  return props.fadeIn ? fadeOutCheck : fadeInCheck;
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
+});
+var AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
+  return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n      cursor: not-allowed;\n    "])));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
+});
+var AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
+  return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
+});
+var AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n    &&:hover:not(:focus) {\n    ", "\n  }\n"])), sharedStyle, function (props) {
+  return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
+}, function (props) {
+  return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n        background: none !important;\n        cursor: not-allowed;\n      "])));
+});
+var AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), sharedStyle, function (props) {
+  return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
+});
+var Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n\n    height: 22px;\n    min-height: 22px;\n    box-shadow: none;\n    box-sizing: border-box;\n    padding: 1px 3px 0 8.7px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: transparent;\n    ", "\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", "\n    ", "\n        ", "\n  }\n\n  & .dropdown-indicator {\n    display: none;\n  }\n\n  &:hover .dropdown-indicator {\n    display: flex;\n  }\n\n  &&:hover {\n    border-color: transparent;\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    ", ";\n  }\n"])), function (props) {
+  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
+}, function (props) {
+  return props.type && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n        animation: ", " 0.5s ease-in-out;\n      "])), function (props) {
+    return props.type === 'success' ? fadeIn : fadeOut;
+  });
+}, function (props) {
+  return props.type === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFFDE8');
+}, function (props) {
+  return props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
+}, function (props) {
+  return props.type === 'instructions-warning' && props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C');
+}, function (props) {
+  return props.type === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#FBEAE6');
+}, function (props) {
+  return props.isFocused && !props.type === 'instructions-warning' && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
+}, function (props) {
+  return props.type === 'warning' && props.isFocused && props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
+}, function (props) {
+  return props.type === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500'));
+}, function (props) {
+  return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
+}, function (props) {
+  return props.type === 'warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#FFFEBF');
+}, function (props) {
+  return props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#F4E21E');
+}, function (props) {
+  return props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
+});
+var Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    min-height: 22px;\n    height: 22px;\n    display: flex;\n    align-items: center;\n    padding: 6px;\n    cursor: pointer;\n    padding: 1px 13px;\n    ", "\n    ", "\n    ", "\n      ", "\n  }\n  svg {\n    width: 15px;\n    margin: 0 9px 0 0;\n  }\n  a {\n    display: flex;\n    text-decoration: none;\n    color: inherit;\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
+}, function (props) {
+  return props.isFocused && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+}, function (props) {
+  return props.isSelected && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n\n        ", "\n      "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
+}, function (props) {
+  return props.isFocused && props.isSelected && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
+});
+var Placeholder = styled__default["default"](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", "\n    ", ";\n  }\n"])), function (props) {
+  return (props.type === 'error' || props.type === 'warning') && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n        ", "\n      "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
+}, function (props) {
+  return (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6');
+});
+var SingleValue = styled__default["default"](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
+});
+var Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    margin: 0;\n    padding: 0;\n    padding-left: 2px;\n    ", "\n  }\n"])), function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
+});
+var Menu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    ", ";\n  }\n"])), function (props) {
+  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
+});
+var ValueContainer = styled__default["default"](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    padding: 0;\n  }\n"])));
+var ClearIndicator = styled__default["default"](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    display: ", ";\n    padding: 0;\n    cursor: pointer;\n    ", ";\n  }\n"])), function (props) {
+  return props.isFocused ? 'flex' : 'none';
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+});
+var DropdownIndicator = styled__default["default"](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    display: ", ";\n    padding: 0;\n    width: 18px;\n    margin-left: 2px;\n    cursor: pointer;\n    margin-top: 1px;\n    ", ";\n  }\n"])), function (props) {
+  return props.isFocused ? 'flex' : 'none';
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+});
+var DropdownIndicatorIcon = styled__default["default"](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n  width: 12px;\n"])));
+var ClearIndicatorIcon = styled__default["default"](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n  width: 8px;\n  margin-right: 4px;\n  ", ";\n  stroke-width: 2px;\n"])), function (props) {
+  return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+});
+var IndicatorSeparator = styled__default["default"](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n  && {\n    display: ", ";\n    margin: 4px;\n    ", ";\n  }\n"])), function (props) {
+  return props.isFocused ? 'flex' : 'none';
+}, function (props) {
+  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
+});
+
+var _excluded = ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "type", "descriptionToolTip", "loadingIcon", "successIcon"];
+var CompactAutocompleteSelect = React__default["default"].forwardRef(function CompactAutocompleteSelect(_ref, forwardedRef) {
+  var label = _ref.label,
+    availableOptions = _ref.availableOptions,
+    placeholder = _ref.placeholder,
+    selectedOption = _ref.selectedOption,
+    loadOptions = _ref.loadOptions,
+    noOptionsMessageFunc = _ref.noOptionsMessageFunc,
+    createNewOptionMessageFunc = _ref.createNewOptionMessageFunc,
+    onUpdateCallback = _ref.onUpdateCallback,
+    loadingMessageFunc = _ref.loadingMessageFunc,
+    creatable = _ref.creatable,
+    readOnly = _ref.readOnly,
+    edit = _ref.edit,
+    disabled = _ref.disabled,
+    hidden = _ref.hidden,
+    type = _ref.type,
+    descriptionToolTip = _ref.descriptionToolTip,
+    loadingIcon = _ref.loadingIcon,
+    successIcon = _ref.successIcon,
+    props = defaultTheme._objectWithoutProperties(_ref, _excluded);
+  var _useState = React.useState(nanoid.nanoid()),
+    _useState2 = defaultTheme._slicedToArray(_useState, 1),
+    uniqueId = _useState2[0];
+  var _useState3 = React.useState(selectedOption),
+    _useState4 = defaultTheme._slicedToArray(_useState3, 2),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = defaultTheme._slicedToArray(_useState5, 2),
+    focused = _useState6[0],
+    setFocused = _useState6[1];
+  var _useState7 = React.useState(0),
+    _useState8 = defaultTheme._slicedToArray(_useState7, 2),
+    cacheUnique = _useState8[0],
+    setCacheUnique = _useState8[1];
+  var memoizedDescriptionToolTip = React.useMemo(function () {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  var Control$1 = function Control$1(props) {
+    return React__default["default"].createElement(Control, defaultTheme._extends({
+      className: "select-control",
+      edit: edit,
+      type: type
+    }, props));
+  };
+  var ValueContainer$1 = React.useMemo(function () {
+    var valueContainer = function valueContainer(props) {
+      return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ValueContainer, defaultTheme._extends({
+        type: type
+      }, props)));
+    };
+    valueContainer.displayName = 'ValueContainerWrapper';
+    return valueContainer;
+  }, [type]);
+  var Input$1 = React.useMemo(function () {
+    var selectInput = function selectInput(props) {
+      return React__default["default"].createElement(Input, defaultTheme._extends({
+        className: "select-input"
+      }, props));
+    };
+    selectInput.displayName = 'InputWrapper';
+    return selectInput;
+  }, []);
+  var Menu$1 = React.useMemo(function () {
+    var menu = function menu(props) {
+      return React__default["default"].createElement(Menu, defaultTheme._extends({
+        className: "select-menu"
+      }, props));
+    };
+    menu.displayName = 'MenuWrapper';
+    return menu;
+  }, []);
+  var Placeholder$1 = function Placeholder$1(props) {
+    return React__default["default"].createElement(Placeholder, defaultTheme._extends({
+      className: "select-placeholder",
+      type: type
+    }, props));
+  };
+  var Option$1 = function Option$1(props) {
+    return !props.data.link ? React__default["default"].createElement(Option, defaultTheme._extends({
+      className: "menu-item"
+    }, props)) : React__default["default"].createElement(Option, props, React__default["default"].createElement("a", {
+      href: props.data.link
+    }, props.data.icon, props.label));
+  };
+  var SingleValue$1 = function SingleValue$1(props) {
+    return React__default["default"].createElement(SingleValue, defaultTheme._extends({
+      className: "menu-value"
+    }, props));
+  };
+  Option$1.propTypes = process.env.NODE_ENV !== "production" ? {
+    data: index.PropTypes.shape({
+      icon: index.PropTypes.node,
+      link: index.PropTypes.string
+    }),
+    label: index.PropTypes.string
+  } : {};
+  var DropdownIndicator$1 = function DropdownIndicator$1(props) {
+    return React__default["default"].createElement(DropdownIndicator, defaultTheme._extends({
+      className: "dropdown-indicator"
+    }, props), React__default["default"].createElement(DropdownIndicatorIcon, null));
+  };
+  var ClearIndicator$1 = function ClearIndicator$1(props) {
+    return React__default["default"].createElement(ClearIndicator, defaultTheme._extends({
+      className: "clear-indicator"
+    }, props), React__default["default"].createElement(ClearIndicatorIcon, null));
+  };
+  var IndicatorSeparator$1 = function IndicatorSeparator$1(props) {
+    return React__default["default"].createElement(IndicatorSeparator, defaultTheme._extends({
+      className: "indicator-separator"
+    }, props));
+  };
+  var innerComponents = {
+    Control: Control$1,
+    ValueContainer: ValueContainer$1,
+    DropdownIndicator: DropdownIndicator$1,
+    IndicatorSeparator: IndicatorSeparator$1,
+    ClearIndicator: ClearIndicator$1,
+    Option: Option$1,
+    SingleValue: SingleValue$1,
+    Input: Input$1,
+    Placeholder: Placeholder$1,
+    Menu: Menu$1
+  };
+  var sharedSelectProps = {
+    ref: forwardedRef,
+    options: loadOptions ? undefined : availableOptions,
+    value: selected,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    formatCreateLabel: createNewOptionMessageFunc,
+    noOptionsMessage: function noOptionsMessage(input) {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    },
+    focused: focused,
+    isDisabled: disabled || readOnly,
+    components: innerComponents,
+    isClearable: true,
+    isSearchable: true,
+    placeholder: placeholder,
+    id: uniqueId,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onChange: function onChange(selected, actionMeta) {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          if (cacheUnique) {
+            setCacheUnique(cacheUnique + 1);
+          }
+          setSelected(selected);
+          break;
+        case 'select-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'remove-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'pop-value':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'deselect-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+        case 'clear':
+          setSelected(selected);
+          break;
+        default:
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          setSelected(selected);
+          break;
+      }
+    }
+  };
+  if (hidden) return null;
+  var input = function input() {
+    return React__default["default"].createElement(CompactAutocompleteSelect$1, {
+      disabled: disabled
+    }, React__default["default"].createElement(InputContainer, null, label && React__default["default"].createElement(Label, {
+      htmlFor: uniqueId,
+      disabled: disabled
+    }, label, React__default["default"].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? React__default["default"].createElement(AsyncCreatableAutocompleteSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : React__default["default"].createElement(AsyncAutocompleteSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, props, sharedSelectProps)) : creatable ? React__default["default"].createElement(AutocompletCreatableSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : React__default["default"].createElement(AutocompletSelect, defaultTheme._extends({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props))));
+  };
+  return React__default["default"].createElement(React__default["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default["default"].createElement("div", null, React__default["default"].createElement(Tooltip.Tooltip, {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: index.PropTypes.string,
+  placeholder: index.PropTypes.string,
+  availableOptions: index.PropTypes.arrayOf(index.PropTypes.object),
+  selectedOption: index.PropTypes.object,
+  loadOptions: index.PropTypes.any,
+  loadingMessageFunc: index.PropTypes.func,
+  createNewOptionMessageFunc: index.PropTypes.func,
+  noOptionsMessageFunc: index.PropTypes.func,
+  readOnly: index.PropTypes.bool,
+  edit: index.PropTypes.bool,
+  hidden: index.PropTypes.bool,
+  error: index.PropTypes.oneOfType([index.PropTypes.bool, index.PropTypes.string]),
+  warning: index.PropTypes.oneOfType([index.PropTypes.bool, index.PropTypes.string]),
+  onUpdateCallback: index.PropTypes.func,
+  creatable: index.PropTypes.bool,
+  disabled: index.PropTypes.bool,
+  type: index.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  descriptionToolTip: index.PropTypes.string,
+  loadingIcon: index.PropTypes.element,
+  successIcon: index.PropTypes.element
+} : {};
+CompactAutocompleteSelect.defaultProps = {
+  noOptionsMessageFunc: function noOptionsMessageFunc(inputValue) {
+    if (inputValue) {
+      return "No matches for \"".concat(inputValue, "\"");
+    } else {
+      return 'No available options';
+    }
+  },
+  readOnly: false,
+  disabled: false,
+  creatable: true,
+  edit: false,
+  error: false,
+  warning: false,
+  hidden: false,
+  type: '',
+  descriptionToolTip: ''
+};
+
+exports.CompactAutocompleteSelect = CompactAutocompleteSelect;

package/CompactAutocompleteSelectAsync-e76bf873.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
+var React = require('react');
+var styled = require('styled-components');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+var CompactAutocompleteSelectAsync$1 = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n"])), function (props) {
+  return props.theme.primaryFontFamily;
+});
+var AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  font-weight: 500;\n"])));
+
+var CompactAutocompleteSelectAsync = React__default["default"].forwardRef(function CompactAutocompleteSelectAsync(_ref, forwardedRef) {
+  var props = defaultTheme._extends({}, (defaultTheme._objectDestructuringEmpty(_ref), _ref));
+  return React__default["default"].createElement(CompactAutocompleteSelectAsync$1, defaultTheme._extends({
+    ref: forwardedRef
+  }, props), React__default["default"].createElement(AsyncAutocompleteSelect, props));
+});
+CompactAutocompleteSelectAsync.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
+CompactAutocompleteSelectAsync.defaultProps = {};
+
+exports.CompactAutocompleteSelectAsync = CompactAutocompleteSelectAsync;

package/{CompactStarRating-bbe8800b.js → CompactStarRating-017d64cb.js}

@@ -1,14 +1,15 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-cd01e6c2.js');
+var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
+var index = require('./index-1e234d23.js');
 var React = require('react');
-require('./Alert-d69a3f95.js');
-require('./Badge-cbbff6b8.js');
-require('./Popover-c5e425a7.js');
-require('./Tab-e43241f0.js');
-require('./Tabs-21e0079f.js');
-var Tooltip = require('./Tooltip-a68a7e49.js');
-require('./VerificationStatusIcon-3bae6e2f.js');
+require('./Alert-b41a748e.js');
+require('./Badge-4a2a9f6b.js');
+require('./Popover-938e6bfc.js');
+require('./Tab-88f77a44.js');
+require('./Tabs-e64ecfaa.js');
+var Tooltip = require('./Tooltip-22238771.js');
+require('./VerificationStatusIcon-99a54d5d.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -286,24 +287,24 @@ var CompactStarRating = React__default["default"].forwardRef(function CompactSta
   }, input())));
 });
 CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
-  readOnly: defaultTheme.PropTypes.bool,
-  disabled: defaultTheme.PropTypes.bool,
-  edit: defaultTheme.PropTypes.bool,
-  value: defaultTheme.PropTypes.number,
-  type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
-  defaultValue: defaultTheme.PropTypes.number,
-  label: defaultTheme.PropTypes.string,
-  name: defaultTheme.PropTypes.string,
-  icon: defaultTheme.PropTypes.element,
-  iconFill: defaultTheme.PropTypes.element,
-  max: defaultTheme.PropTypes.number,
-  viewEmpty: defaultTheme.PropTypes.bool,
-  onChange: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func,
-  hidden: defaultTheme.PropTypes.bool,
-  loadingIcon: defaultTheme.PropTypes.element,
-  successIcon: defaultTheme.PropTypes.element,
-  descriptionToolTip: defaultTheme.PropTypes.string
+  readOnly: index.PropTypes.bool,
+  disabled: index.PropTypes.bool,
+  edit: index.PropTypes.bool,
+  value: index.PropTypes.number,
+  type: index.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  defaultValue: index.PropTypes.number,
+  label: index.PropTypes.string,
+  name: index.PropTypes.string,
+  icon: index.PropTypes.element,
+  iconFill: index.PropTypes.element,
+  max: index.PropTypes.number,
+  viewEmpty: index.PropTypes.bool,
+  onChange: index.PropTypes.func,
+  onBlur: index.PropTypes.func,
+  hidden: index.PropTypes.bool,
+  loadingIcon: index.PropTypes.element,
+  successIcon: index.PropTypes.element,
+  descriptionToolTip: index.PropTypes.string
 } : {};
 CompactStarRating.defaultProps = {
   label: 'Rating',

package/{CompactTextInput-72224756.js → CompactTextInput-8132e42d.js}

@@ -1,17 +1,18 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-cd01e6c2.js');
+var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
 var lodash = require('lodash');
 var nanoid = require('nanoid');
+var index = require('./index-1e234d23.js');
 var React = require('react');
 var editNote = require('./edit-note-cefe2215.js');
-require('./Alert-d69a3f95.js');
-require('./Badge-cbbff6b8.js');
-require('./Popover-c5e425a7.js');
-require('./Tab-e43241f0.js');
-require('./Tabs-21e0079f.js');
-var Tooltip = require('./Tooltip-a68a7e49.js');
-require('./VerificationStatusIcon-3bae6e2f.js');
+require('./Alert-b41a748e.js');
+require('./Badge-4a2a9f6b.js');
+require('./Popover-938e6bfc.js');
+require('./Tab-88f77a44.js');
+require('./Tabs-e64ecfaa.js');
+var Tooltip = require('./Tooltip-22238771.js');
+require('./VerificationStatusIcon-99a54d5d.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -293,31 +294,31 @@ var CompactTextInput = React__default["default"].forwardRef(function CompactText
   }, React__default["default"].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default["default"].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
 });
 CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
-  label: defaultTheme.PropTypes.string,
-  success: defaultTheme.PropTypes.bool,
-  inputType: defaultTheme.PropTypes.string,
-  name: defaultTheme.PropTypes.string,
-  defaultValue: defaultTheme.PropTypes.string,
-  value: defaultTheme.PropTypes.string,
-  placeholder: defaultTheme.PropTypes.string,
-  link: defaultTheme.PropTypes.string,
-  linkTarget: defaultTheme.PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  linkHandler: defaultTheme.PropTypes.func,
-  activeLinkHandler: defaultTheme.PropTypes.bool,
-  autoSelect: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  disabled: defaultTheme.PropTypes.bool,
-  edit: defaultTheme.PropTypes.bool,
-  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
-  bold: defaultTheme.PropTypes.bool,
-  hidden: defaultTheme.PropTypes.bool,
-  onChange: defaultTheme.PropTypes.func,
-  onFocus: defaultTheme.PropTypes.func,
-  onBlur: defaultTheme.PropTypes.func,
-  type: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
-  descriptionToolTip: defaultTheme.PropTypes.string,
-  loadingIcon: defaultTheme.PropTypes.element,
-  successIcon: defaultTheme.PropTypes.element
+  label: index.PropTypes.string,
+  success: index.PropTypes.bool,
+  inputType: index.PropTypes.string,
+  name: index.PropTypes.string,
+  defaultValue: index.PropTypes.string,
+  value: index.PropTypes.string,
+  placeholder: index.PropTypes.string,
+  link: index.PropTypes.string,
+  linkTarget: index.PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+  linkHandler: index.PropTypes.func,
+  activeLinkHandler: index.PropTypes.bool,
+  autoSelect: index.PropTypes.bool,
+  readOnly: index.PropTypes.bool,
+  disabled: index.PropTypes.bool,
+  edit: index.PropTypes.bool,
+  warning: index.PropTypes.oneOfType([index.PropTypes.bool, index.PropTypes.string]),
+  bold: index.PropTypes.bool,
+  hidden: index.PropTypes.bool,
+  onChange: index.PropTypes.func,
+  onFocus: index.PropTypes.func,
+  onBlur: index.PropTypes.func,
+  type: index.PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
+  descriptionToolTip: index.PropTypes.string,
+  loadingIcon: index.PropTypes.element,
+  successIcon: index.PropTypes.element
 } : {};
 CompactTextInput.defaultProps = {
   inputType: 'text',

package/{ContextMenu-4eb8fdc5.js → ContextMenu-4427ad11.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var defaultTheme = require('./defaultTheme-cd01e6c2.js');
+var defaultTheme = require('./defaultTheme-8bd3e0b9.js');
 var React = require('react');
+var index = require('./index-1e234d23.js');
 var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,7 +26,7 @@ var ContextMenu = React__default["default"].forwardRef(function ContextMenu(_ref
   }), children);
 });
 ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: defaultTheme.PropTypes.any
+  children: index.PropTypes.any
 } : {};
 ContextMenu.defaultProps = {};