@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

package/cjs/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js

@@ -0,0 +1,268 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var lodash = require('lodash');
+var nanoid = require('nanoid');
+var index$2 = require('../../../node_modules/prop-types/index.js');
+var index = require('../../../node_modules/react/index.js');
+var CompactAutocompleteSelect_styled = require('./CompactAutocompleteSelect.styled.js');
+var Tooltip = require('../../data/Tooltip/Tooltip.js');
+var index$1 = require('../../../_virtual/index.js');
+
+const _excluded = ["label", "availableOptions", "placeholder", "selectedOption", "loadOptions", "noOptionsMessageFunc", "createNewOptionMessageFunc", "onUpdateCallback", "loadingMessageFunc", "creatable", "readOnly", "edit", "disabled", "hidden", "type", "descriptionToolTip", "loadingIcon", "successIcon"];
+const CompactAutocompleteSelect = index["default"].forwardRef(function CompactAutocompleteSelect(_ref, forwardedRef) {
+  let {
+      label,
+      availableOptions,
+      placeholder,
+      selectedOption,
+      loadOptions,
+      noOptionsMessageFunc,
+      createNewOptionMessageFunc,
+      onUpdateCallback,
+      loadingMessageFunc,
+      creatable,
+      readOnly,
+      edit,
+      disabled,
+      hidden,
+      type,
+      descriptionToolTip,
+      loadingIcon,
+      successIcon
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
+  const [selected, setSelected] = index$1.react.exports.useState(selectedOption);
+  const [focused, setFocused] = index$1.react.exports.useState(false);
+  const [cacheUnique, setCacheUnique] = index$1.react.exports.useState(0);
+  const memoizedDescriptionToolTip = index$1.react.exports.useMemo(() => {
+    return descriptionToolTip;
+  }, [descriptionToolTip]);
+  const Control = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.Control, _rollupPluginBabelHelpers["extends"]({
+      className: "select-control",
+      edit: edit,
+      type: type
+    }, props));
+  };
+  const ValueContainer = index$1.react.exports.useMemo(() => {
+    const valueContainer = props => {
+      return index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(CompactAutocompleteSelect_styled.ValueContainer, _rollupPluginBabelHelpers["extends"]({
+        type: type
+      }, props)));
+    };
+    valueContainer.displayName = 'ValueContainerWrapper';
+    return valueContainer;
+  }, [type]);
+  const Input = index$1.react.exports.useMemo(() => {
+    const selectInput = props => {
+      return index["default"].createElement(CompactAutocompleteSelect_styled.Input, _rollupPluginBabelHelpers["extends"]({
+        className: "select-input"
+      }, props));
+    };
+    selectInput.displayName = 'InputWrapper';
+    return selectInput;
+  }, []);
+  const Menu = index$1.react.exports.useMemo(() => {
+    const menu = props => {
+      return index["default"].createElement(CompactAutocompleteSelect_styled.Menu, _rollupPluginBabelHelpers["extends"]({
+        className: "select-menu"
+      }, props));
+    };
+    menu.displayName = 'MenuWrapper';
+    return menu;
+  }, []);
+  const Placeholder = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.Placeholder, _rollupPluginBabelHelpers["extends"]({
+      className: "select-placeholder",
+      type: type
+    }, props));
+  };
+  const Option = props => {
+    return !props.data.link ? index["default"].createElement(CompactAutocompleteSelect_styled.Option, _rollupPluginBabelHelpers["extends"]({
+      className: "menu-item"
+    }, props)) : index["default"].createElement(CompactAutocompleteSelect_styled.Option, props, index["default"].createElement("a", {
+      href: props.data.link
+    }, props.data.icon, props.label));
+  };
+  const SingleValue = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.SingleValue, _rollupPluginBabelHelpers["extends"]({
+      className: "menu-value"
+    }, props));
+  };
+  Option.propTypes = process.env.NODE_ENV !== "production" ? {
+    data: index$2["default"].shape({
+      icon: index$2["default"].node,
+      link: index$2["default"].string
+    }),
+    label: index$2["default"].string
+  } : {};
+  const DropdownIndicator = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.DropdownIndicator, _rollupPluginBabelHelpers["extends"]({
+      className: "dropdown-indicator"
+    }, props), index["default"].createElement(CompactAutocompleteSelect_styled.DropdownIndicatorIcon, null));
+  };
+  const ClearIndicator = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.ClearIndicator, _rollupPluginBabelHelpers["extends"]({
+      className: "clear-indicator"
+    }, props), index["default"].createElement(CompactAutocompleteSelect_styled.ClearIndicatorIcon, null));
+  };
+  const IndicatorSeparator = props => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.IndicatorSeparator, _rollupPluginBabelHelpers["extends"]({
+      className: "indicator-separator"
+    }, props));
+  };
+  const innerComponents = {
+    Control,
+    ValueContainer,
+    DropdownIndicator,
+    IndicatorSeparator,
+    ClearIndicator,
+    Option,
+    SingleValue,
+    Input,
+    Placeholder,
+    Menu
+  };
+  const sharedSelectProps = {
+    ref: forwardedRef,
+    options: loadOptions ? undefined : availableOptions,
+    value: selected,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    formatCreateLabel: createNewOptionMessageFunc,
+    noOptionsMessage: input => {
+      return noOptionsMessageFunc(input.inputValue);
+    },
+    onFocus: () => {
+      setFocused(true);
+    },
+    onBlur: () => {
+      setFocused(false);
+    },
+    focused: focused,
+    isDisabled: disabled || readOnly,
+    components: innerComponents,
+    isClearable: true,
+    isSearchable: true,
+    placeholder: placeholder,
+    id: uniqueId,
+    cacheUniqs: loadOptions ? [cacheUnique] : undefined,
+    onChange: (selected, actionMeta) => {
+      switch (actionMeta.action) {
+        case 'create-option':
+          if (onUpdateCallback) {
+            onUpdateCallback(actionMeta.action, selected.value);
+          }
+          if (loadOptions) {
+            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;
+  const input = () => {
+    return index["default"].createElement(CompactAutocompleteSelect_styled.CompactAutocompleteSelect, {
+      disabled: disabled
+    }, index["default"].createElement(CompactAutocompleteSelect_styled.InputContainer, null, label && index["default"].createElement(CompactAutocompleteSelect_styled.Label, {
+      htmlFor: uniqueId,
+      disabled: disabled
+    }, label, index["default"].createElement(CompactAutocompleteSelect_styled.SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), loadOptions ? creatable ? index["default"].createElement(CompactAutocompleteSelect_styled.AsyncCreatableAutocompleteSelect, _rollupPluginBabelHelpers["extends"]({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : index["default"].createElement(CompactAutocompleteSelect_styled.AsyncAutocompleteSelect, _rollupPluginBabelHelpers["extends"]({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : creatable ? index["default"].createElement(CompactAutocompleteSelect_styled.AutocompletCreatableSelect, _rollupPluginBabelHelpers["extends"]({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props)) : index["default"].createElement(CompactAutocompleteSelect_styled.AutocompletSelect, _rollupPluginBabelHelpers["extends"]({
+      $hasLabel: !lodash.isEmpty(label)
+    }, sharedSelectProps, props))));
+  };
+  return index["default"].createElement(index["default"].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && index["default"].createElement("div", null, index["default"].createElement(Tooltip["default"], {
+    content: memoizedDescriptionToolTip,
+    key: "tooltipTextArea1",
+    placement: "bottom-end",
+    trigger: 'mouseenter',
+    zIndex: 999999
+  }, input())));
+});
+CompactAutocompleteSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: index$2["default"].string,
+  placeholder: index$2["default"].string,
+  availableOptions: index$2["default"].arrayOf(index$2["default"].object),
+  selectedOption: index$2["default"].object,
+  loadOptions: index$2["default"].func,
+  loadingMessageFunc: index$2["default"].func,
+  createNewOptionMessageFunc: index$2["default"].func,
+  noOptionsMessageFunc: index$2["default"].func,
+  readOnly: index$2["default"].bool,
+  edit: index$2["default"].bool,
+  hidden: index$2["default"].bool,
+  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  warning: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
+  onUpdateCallback: index$2["default"].func,
+  creatable: index$2["default"].bool,
+  disabled: index$2["default"].bool,
+  type: index$2["default"].oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  descriptionToolTip: index$2["default"].string,
+  loadingIcon: index$2["default"].element,
+  successIcon: index$2["default"].element
+} : {};
+CompactAutocompleteSelect.defaultProps = {
+  noOptionsMessageFunc: inputValue => {
+    if (inputValue) {
+      return `No matches for "${inputValue}"`;
+    } else {
+      return 'No available options';
+    }
+  },
+  readOnly: false,
+  disabled: false,
+  creatable: true,
+  edit: false,
+  error: false,
+  warning: false,
+  hidden: false,
+  type: '',
+  descriptionToolTip: ''
+};
+var AutocompleteSelect = CompactAutocompleteSelect;
+
+exports["default"] = AutocompleteSelect;

package/cjs/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.styled.js

@@ -0,0 +1,352 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../utils/defaultTheme.js');
+var Select = require('react-select');
+var reactSelectAsyncPaginate = require('react-select-async-paginate');
+var reactSelectCreatable_esm = require('../../../node_modules/react-select/creatable/dist/react-select-creatable.esm.js');
+var close = require('../../../icons/close.svg.js');
+var expandMore = require('../../../icons/expand-more.svg.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6,
+  _t7,
+  _t8,
+  _t9,
+  _t10,
+  _t11,
+  _t12,
+  _t13,
+  _t14,
+  _t15,
+  _t16,
+  _t17,
+  _t18,
+  _t19,
+  _t20,
+  _t21,
+  _t22,
+  _t23,
+  _t24,
+  _t25,
+  _t26,
+  _t27,
+  _t28,
+  _t29,
+  _t30,
+  _t31,
+  _t32,
+  _t33,
+  _t34,
+  _t35,
+  _t36,
+  _t37,
+  _t38,
+  _t39;
+const fadeIn = styled.keyframes(_t || (_t = _`
+  from {
+    background-color: ${0};
+  }
+  to {
+    background-color: ${0};
+  }
+`), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'));
+const fadeOut = styled.keyframes(_t2 || (_t2 = _`
+  from {
+    background-color: ${0};
+  }
+  to {
+    background-color: ${0};
+  }
+`), props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)'), props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)'));
+const fadeInCheck = styled.keyframes(_t3 || (_t3 = _`
+  from {
+    opacity: 0
+  }
+  to {
+    opacity: 1
+  }
+`));
+const fadeOutCheck = styled.keyframes(_t4 || (_t4 = _`
+  from {
+    opacity: 1
+  }
+  to {
+    opacity: 0
+  }
+`));
+const AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm["default"]);
+const sharedStyle = styled.css(_t5 || (_t5 = _`
+  font-family: ${0};
+  font-size: 0.875rem;
+  line-height: 1rem;
+  width: 100%;
+  display: block;
+  box-shadow: 'none';
+  flex-basis: ${0};
+`), props => props.theme.primaryFontFamily, props => props.$hasLabel ? '66.66%' : '100%');
+const CompactAutocompleteSelect = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  font-family: ${0};
+  ${0}
+`), props => props.theme.primaryFontFamily, props => props.disabled && styled.css(_t7 || (_t7 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `)));
+const Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+  ${0};
+  flex-basis: 33.33%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  height: 19px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 2px;
+  ${0}
+`), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.disabled && styled.css(_t9 || (_t9 = _`
+      cursor: not-allowed;
+    `)));
+const InputContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t10 || (_t10 = _`
+  display: flex;
+  width: 100%;
+  height: 19px;
+`));
+const SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
+  opacity: 1;
+  pointer-events: none;
+  display: flex;
+  opacity: ${0};
+  animation: ${0} 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+  margin-right: 5px;
+  ${0}
+  > svg {
+    width: 13px;
+  }
+`), props => props.fadeIn ? 0 : 1, props => props.fadeIn ? fadeOutCheck : fadeInCheck, props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500')));
+const AsyncCreatableAutocompleteSelect = styled__default["default"](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_t12 || (_t12 = _`
+  ${0}
+  ${0}
+    &&:hover:not(:focus) {
+    ${0}
+  }
+`), sharedStyle, props => props.disabled && styled.css(_t13 || (_t13 = _`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `)), props => props.disabled && styled.css(_t14 || (_t14 = _`
+        background: none !important;
+        cursor: not-allowed;
+      `)));
+const AsyncAutocompleteSelect = styled__default["default"](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_t15 || (_t15 = _`
+  ${0}
+  ${0}
+    &&:hover:not(:focus) {
+    ${0}
+  }
+`), sharedStyle, props => props.disabled && styled.css(_t16 || (_t16 = _`
+      opacity: 0.5;
+    `)), props => props.disabled && styled.css(_t17 || (_t17 = _`
+        background: none !important;
+        cursor: not-allowed;
+      `)));
+const AutocompletSelect = styled__default["default"](Select__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+  ${0}
+  ${0}
+    &&:hover:not(:focus) {
+    ${0}
+  }
+`), sharedStyle, props => props.disabled && styled.css(_t19 || (_t19 = _`
+      opacity: 0.5;
+    `)), props => props.disabled && styled.css(_t20 || (_t20 = _`
+        background: none !important;
+        cursor: not-allowed;
+      `)));
+const AutocompletCreatableSelect = styled__default["default"](reactSelectCreatable_esm["default"]).attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+  ${0}
+  ${0}
+`), sharedStyle, props => props.disabled && styled.css(_t22 || (_t22 = _`
+      opacity: 0.5;
+    `)));
+const Control = styled__default["default"](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  && {
+    ${0};
+    ${0};
+
+    height: 22px;
+    min-height: 22px;
+    box-shadow: none;
+    box-sizing: border-box;
+    padding: 1px 3px 0 8.7px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background-color: transparent;
+    ${0}
+
+    ${0};
+
+    ${0};
+
+    ${0};
+
+    ${0};
+
+    ${0}
+    ${0}
+        ${0}
+  }
+
+  & .dropdown-indicator {
+    display: none;
+  }
+
+  &:hover .dropdown-indicator {
+    display: flex;
+  }
+
+  &&:hover {
+    border-color: transparent;
+    ${0};
+
+    ${0};
+
+    ${0};
+
+    ${0};
+  }
+`), props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)'), props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)'), props => props.type && styled.css(_t24 || (_t24 = _`
+        animation: ${0} 0.5s ease-in-out;
+      `), props => props.type === 'success' ? fadeIn : fadeOut), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFFDE8'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'instructions-warning' && props.isFocused && props.theme.themeProp('background-color', '#634e01', '#FFF36C'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#FBEAE6'), props => props.isFocused && !props.type === 'instructions-warning' && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600')), props => props.type === 'warning' && props.isFocused && props.theme.themeProp('border-color', '#F4E21E', '#F4E21E'), props => props.type === 'error' && props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('red-500'), props.theme.getColor('red-500')), props => !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')), props => props.type === 'warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#FFFEBF'), props => props.type === 'instructions-warning' && !props.isFocused && props.theme.themeProp('background', '#806403', '#F4E21E'), props => props.type === 'error' && !props.isFocused && props.theme.themeProp('background', '#901d1d', '#f7d5d0'));
+const Option = styled__default["default"](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+  && {
+    min-height: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    cursor: pointer;
+    padding: 1px 13px;
+    ${0}
+    ${0}
+    ${0}
+      ${0}
+  }
+  svg {
+    width: 15px;
+    margin: 0 9px 0 0;
+  }
+  a {
+    display: flex;
+    text-decoration: none;
+    color: inherit;
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props => props.isFocused && styled.css(_t26 || (_t26 = _`
+        ${0}
+      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))), props => props.isSelected && styled.css(_t27 || (_t27 = _`
+        ${0}
+
+        ${0}
+      `), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => props.isFocused && props.isSelected && styled.css(_t28 || (_t28 = _`
+        ${0}
+      `), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200'))));
+const Placeholder = styled__default["default"](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
+  && {
+    ${0}
+    ${0};
+  }
+`), props => (props.type === 'error' || props.type === 'warning') && styled.css(_t30 || (_t30 = _`
+        ${0}
+      `), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))), props => (props.type === 'error' || props.type === 'warning') && props.theme.themeProp('opacity', '0.6', '0.6'));
+const SingleValue = styled__default["default"](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
+  && {
+    ${0};
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
+const Input = styled__default["default"](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
+  && {
+    margin: 0;
+    padding: 0;
+    padding-left: 2px;
+    ${0}
+  }
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
+const Menu = styled__default["default"](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_t33 || (_t33 = _`
+  && {
+    ${0};
+  }
+`), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')));
+const ValueContainer = styled__default["default"](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_t34 || (_t34 = _`
+  && {
+    padding: 0;
+  }
+`));
+const ClearIndicator = styled__default["default"](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_t35 || (_t35 = _`
+  && {
+    display: ${0};
+    padding: 0;
+    cursor: pointer;
+    ${0};
+  }
+`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
+const DropdownIndicator = styled__default["default"](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_t36 || (_t36 = _`
+  && {
+    display: ${0};
+    padding: 0;
+    width: 18px;
+    margin-left: 2px;
+    cursor: pointer;
+    margin-top: 1px;
+    ${0};
+  }
+`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
+const DropdownIndicatorIcon = styled__default["default"](expandMore.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t37 || (_t37 = _`
+  width: 12px;
+`));
+const ClearIndicatorIcon = styled__default["default"](close.ReactComponent).attrs(defaultTheme.applyDefaultTheme)(_t38 || (_t38 = _`
+  width: 8px;
+  margin-right: 4px;
+  ${0};
+  stroke-width: 2px;
+`), props => props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
+const IndicatorSeparator = styled__default["default"](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_t39 || (_t39 = _`
+  && {
+    display: ${0};
+    margin: 4px;
+    ${0};
+  }
+`), props => props.isFocused ? 'flex' : 'none', props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')));
+
+exports.AsyncAutocompleteSelect = AsyncAutocompleteSelect;
+exports.AsyncCreatableAutocompleteSelect = AsyncCreatableAutocompleteSelect;
+exports.AutocompletCreatableSelect = AutocompletCreatableSelect;
+exports.AutocompletSelect = AutocompletSelect;
+exports.ClearIndicator = ClearIndicator;
+exports.ClearIndicatorIcon = ClearIndicatorIcon;
+exports.CompactAutocompleteSelect = CompactAutocompleteSelect;
+exports.Control = Control;
+exports.DropdownIndicator = DropdownIndicator;
+exports.DropdownIndicatorIcon = DropdownIndicatorIcon;
+exports.IndicatorSeparator = IndicatorSeparator;
+exports.Input = Input;
+exports.InputContainer = InputContainer;
+exports.Label = Label;
+exports.Menu = Menu;
+exports.Option = Option;
+exports.Placeholder = Placeholder;
+exports.SingleValue = SingleValue;
+exports.SuccessContainer = SuccessContainer;
+exports.ValueContainer = ValueContainer;

package/cjs/components/inputs/CompactAutocompleteSelect/inputs/CompactAutocompleteSelect/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect.js');
+
+
+
+exports["default"] = CompactAutocompleteSelect["default"];