import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelpers-97e6d7b1.js';
import React, { useState } from 'react';
import { c as _slicedToArray, k as _typeof } from './_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { K as KEY_CODES } from './key_codes-ff72266d.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from './style-inject.es-1f59c1d0.js';
import { I as Icon, C as CloseIcon } from './index-fc484d02.js';
import { C as Context } from './index-155df85b.js';
import Text from './ui/text.js';
import './index-923d986f.js';

var AutosizeInput_1 = createCommonjsModule(function (module, exports) {

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();



var _react2 = _interopRequireDefault(React);



var _propTypes2 = _interopRequireDefault(PropTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var sizerStyle = {
	position: 'absolute',
	top: 0,
	left: 0,
	visibility: 'hidden',
	height: 0,
	overflow: 'scroll',
	whiteSpace: 'pre'
};

var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];

var cleanInputProps = function cleanInputProps(inputProps) {
	INPUT_PROPS_BLACKLIST.forEach(function (field) {
		return delete inputProps[field];
	});
	return inputProps;
};

var copyStyles = function copyStyles(styles, node) {
	node.style.fontSize = styles.fontSize;
	node.style.fontFamily = styles.fontFamily;
	node.style.fontWeight = styles.fontWeight;
	node.style.fontStyle = styles.fontStyle;
	node.style.letterSpacing = styles.letterSpacing;
	node.style.textTransform = styles.textTransform;
};

var isIE = typeof window !== 'undefined' && window.navigator ? /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent) : false;

var generateId = function generateId() {
	// we only need an auto-generated ID for stylesheet injection, which is only
	// used for IE. so if the browser is not IE, this should return undefined.
	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
};

var AutosizeInput = function (_Component) {
	_inherits(AutosizeInput, _Component);

	function AutosizeInput(props) {
		_classCallCheck(this, AutosizeInput);

		var _this = _possibleConstructorReturn(this, (AutosizeInput.__proto__ || Object.getPrototypeOf(AutosizeInput)).call(this, props));

		_this.inputRef = function (el) {
			_this.input = el;
			if (typeof _this.props.inputRef === 'function') {
				_this.props.inputRef(el);
			}
		};

		_this.placeHolderSizerRef = function (el) {
			_this.placeHolderSizer = el;
		};

		_this.sizerRef = function (el) {
			_this.sizer = el;
		};

		_this.state = {
			inputWidth: props.minWidth,
			inputId: props.id || generateId()
		};
		return _this;
	}

	_createClass(AutosizeInput, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
			this.mounted = true;
			this.copyInputStyles();
			this.updateInputWidth();
		}
	}, {
		key: 'UNSAFE_componentWillReceiveProps',
		value: function UNSAFE_componentWillReceiveProps(nextProps) {
			var id = nextProps.id;

			if (id !== this.props.id) {
				this.setState({ inputId: id || generateId() });
			}
		}
	}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps, prevState) {
			if (prevState.inputWidth !== this.state.inputWidth) {
				if (typeof this.props.onAutosize === 'function') {
					this.props.onAutosize(this.state.inputWidth);
				}
			}
			this.updateInputWidth();
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.mounted = false;
		}
	}, {
		key: 'copyInputStyles',
		value: function copyInputStyles() {
			if (!this.mounted || !window.getComputedStyle) {
				return;
			}
			var inputStyles = this.input && window.getComputedStyle(this.input);
			if (!inputStyles) {
				return;
			}
			copyStyles(inputStyles, this.sizer);
			if (this.placeHolderSizer) {
				copyStyles(inputStyles, this.placeHolderSizer);
			}
		}
	}, {
		key: 'updateInputWidth',
		value: function updateInputWidth() {
			if (!this.mounted || !this.sizer || typeof this.sizer.scrollWidth === 'undefined') {
				return;
			}
			var newInputWidth = void 0;
			if (this.props.placeholder && (!this.props.value || this.props.value && this.props.placeholderIsMinWidth)) {
				newInputWidth = Math.max(this.sizer.scrollWidth, this.placeHolderSizer.scrollWidth) + 2;
			} else {
				newInputWidth = this.sizer.scrollWidth + 2;
			}
			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
			newInputWidth += extraWidth;
			if (newInputWidth < this.props.minWidth) {
				newInputWidth = this.props.minWidth;
			}
			if (newInputWidth !== this.state.inputWidth) {
				this.setState({
					inputWidth: newInputWidth
				});
			}
		}
	}, {
		key: 'getInput',
		value: function getInput() {
			return this.input;
		}
	}, {
		key: 'focus',
		value: function focus() {
			this.input.focus();
		}
	}, {
		key: 'blur',
		value: function blur() {
			this.input.blur();
		}
	}, {
		key: 'select',
		value: function select() {
			this.input.select();
		}
	}, {
		key: 'renderStyles',
		value: function renderStyles() {
			// this method injects styles to hide IE's clear indicator, which messes
			// with input size detection. the stylesheet is only injected when the
			// browser is IE, and can also be disabled by the `injectStyles` prop.
			var injectStyles = this.props.injectStyles;

			return isIE && injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: {
					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
				} }) : null;
		}
	}, {
		key: 'render',
		value: function render() {
			var sizerValue = [this.props.defaultValue, this.props.value, ''].reduce(function (previousValue, currentValue) {
				if (previousValue !== null && previousValue !== undefined) {
					return previousValue;
				}
				return currentValue;
			});

			var wrapperStyle = _extends({}, this.props.style);
			if (!wrapperStyle.display) wrapperStyle.display = 'inline-block';

			var inputStyle = _extends({
				boxSizing: 'content-box',
				width: this.state.inputWidth + 'px'
			}, this.props.inputStyle);

			var inputProps = _objectWithoutProperties(this.props, []);

			cleanInputProps(inputProps);
			inputProps.className = this.props.inputClassName;
			inputProps.id = this.state.inputId;
			inputProps.style = inputStyle;

			return _react2.default.createElement(
				'div',
				{ className: this.props.className, style: wrapperStyle },
				this.renderStyles(),
				_react2.default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
				_react2.default.createElement(
					'div',
					{ ref: this.sizerRef, style: sizerStyle },
					sizerValue
				),
				this.props.placeholder ? _react2.default.createElement(
					'div',
					{ ref: this.placeHolderSizerRef, style: sizerStyle },
					this.props.placeholder
				) : null
			);
		}
	}]);

	return AutosizeInput;
}(React.Component);

AutosizeInput.propTypes = {
	className: _propTypes2.default.string, // className for the outer element
	defaultValue: _propTypes2.default.any, // default field value
	extraWidth: _propTypes2.default.oneOfType([// additional width for input element
	_propTypes2.default.number, _propTypes2.default.string]),
	id: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots
	injectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true
	inputClassName: _propTypes2.default.string, // className for the input element
	inputRef: _propTypes2.default.func, // ref callback for the input element
	inputStyle: _propTypes2.default.object, // css styles for the input element
	minWidth: _propTypes2.default.oneOfType([// minimum width for input element
	_propTypes2.default.number, _propTypes2.default.string]),
	onAutosize: _propTypes2.default.func, // onAutosize handler: function(newWidth) {}
	onChange: _propTypes2.default.func, // onChange handler: function(event) {}
	placeholder: _propTypes2.default.string, // placeholder text
	placeholderIsMinWidth: _propTypes2.default.bool, // don't collapse size to less than the placeholder
	style: _propTypes2.default.object, // css styles for the outer element
	value: _propTypes2.default.any // field value
};
AutosizeInput.defaultProps = {
	minWidth: 1,
	injectStyles: true
};

exports.default = AutosizeInput;
});

var AutosizeInput = unwrapExports(AutosizeInput_1);

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var CloseV3Icon = (({
  styles = {},
  ...props
}) => /*#__PURE__*/React.createElement("svg", _extends({
  width: "14",
  height: "14",
  viewBox: "0 0 14 14",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, props), /*#__PURE__*/React.createElement("path", {
  d: "M7 1a6 6 0 00-6 6h1a5 5 0 015-5V1zm6 6a6 6 0 00-6-6v1a5 5 0 015 5h1zm-6 6a6 6 0 006-6h-1a5 5 0 01-5 5v1zM1 7a6 6 0 006 6v-1a5 5 0 01-5-5H1zm0 0a6 6 0 016-6V0a7 7 0 00-7 7h1zm6 6a6 6 0 01-6-6H0a7 7 0 007 7v-1zm6-6a6 6 0 01-6 6v1a7 7 0 007-7h-1zM7 1a6 6 0 016 6h1a7 7 0 00-7-7v1z",
  fill: "#1B1B1B"
}), /*#__PURE__*/React.createElement("path", {
  d: "M9.357 4.643L4.643 9.357M9.357 9.357L4.643 4.643",
  stroke: "#1B1B1B",
  strokeLinecap: "round",
  strokeLinejoin: "round"
})));

var ChipWrapperMode = variant({
  prop: "mode",
  scale: "chipWrapperModes",
  variants: {
    chipAdded: {}
  }
});
var ChipWrapperVariant = variant({
  prop: "variant",
  scale: "chipWrapperVariants",
  variants: {
    chipAdded: {}
  }
});

// Non customizable CSS props
var inputWrapperStyle = function inputWrapperStyle(props) {
  return {
    borderRadius: props.theme.radii.sm,
    border: "".concat(props.theme.borderWidths.xs, "px solid ").concat(props.theme.colors.grey.haptik),
    backgroundColor: props.theme.colors.grey.pastel,
    boxSizing: "border-box",
    width: "100%",
    transition: "border 0.3s ease, color 0.3s ease",
    outline: "none",
    "&:focus": {
      border: "".concat(props.theme.borderWidths.xs, "px solid ").concat(props.theme.colors.blue.haptik)
    },
    "&:hover": {
      border: "".concat(props.theme.borderWidths.xs, "px solid ").concat(props.theme.colors.blue.haptik)
    },
    position: "relative"
  };
};
var chipStyle = function chipStyle(props) {
  return {
    position: "relative",
    fontSize: props.theme.fontSizes[1],
    border: "".concat(props.theme.borderWidths.xs, "px solid ").concat(props.theme.colors.grey.haptik),
    backgroundColor: props.theme.colors.grey.neon,
    borderRadius: props.theme.radii.lg,
    padding: "2px 6px",
    marginRight: 6,
    marginBottom: 6,
    display: "flex",
    alignItems: "center"
  };
};
var ThemedChipsInputWrapper = styled("div")(inputWrapperStyle, space, color, border, typography, ChipWrapperMode, ChipWrapperVariant);
var chipsContainerStyle = function chipsContainerStyle(props) {
  return {
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap",
    cursor: "text",
    width: "100%",
    "&:not(:first-child)": {
      paddingLeft: 3 * props.theme.space.lg - props.theme.space.md // 38px
    }
  };
};

var ThemedChipsContainer = styled("div")(chipsContainerStyle, space, color, border, typography);
var ThemedChip = styled("div")(chipStyle, space, color, border, typography);

// Customizable CSS props
ThemedChipsInputWrapper.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  variant: "default"
};
ThemedChipsContainer.defaultProps = {
  fontFamily: "\"Proxima Nova\", sans-serif",
  mode: "default",
  variant: "default"
};

var css_248z = ".ChipsInput_chips__f7CZh {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #fff;\n  padding: 4px;\n  padding-right: 8px;\n  min-height: 35px;\n  box-sizing: border-box;\n  cursor: pointer;\n  outline: none;\n  transition: 0.2s ease-out; }\n  .ChipsInput_chips__f7CZh.ChipsInput_error__2U5k8 {\n    border-color: #f44336;\n    background-color: rgba(244, 67, 54, 0.05); }\n\n.ChipsInput_chipsTrack__zpfVc {\n  margin-bottom: -6px;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  cursor: text;\n  width: 100%; }\n\n.ChipsInput_chip__37cGX {\n  display: inline-block;\n  font-size: 12px;\n  border: 1px solid #ddd;\n  background-color: #f2f2f2;\n  color: #333333;\n  border-radius: 8px;\n  padding: 2px 8px;\n  margin-right: 6px;\n  margin-bottom: 6px;\n  display: flex;\n  align-items: center; }\n  .ChipsInput_chip__37cGX svg circle {\n    transition: 0.2s ease-out; }\n  .ChipsInput_chip__37cGX:hover {\n    background-color: rgba(238, 238, 239, 0.2); }\n\n.ChipsInput_deleteChipIcon__2jkAs {\n  margin-left: 6px;\n  width: 18px;\n  height: 18px;\n  cursor: pointer; }\n\n.ChipsInput_themedNewChip__3Atgq {\n  border: none;\n  font-family: \"Proxima Nova\", sans-serif;\n  outline: none; }\n  .ChipsInput_themedNewChipAdded__3rYKv {\n    margin-bottom: 6px; }\n\n.ChipsInput_newChip__3lTpD {\n  margin-right: 6px;\n  margin-bottom: 6px;\n  border: none;\n  padding: 4px 8px;\n  padding-left: 0;\n  line-height: 14px;\n  outline: none;\n  min-width: 80px;\n  font-size: 12px; }\n  .ChipsInput_newChip__3lTpD:focus {\n    border: none; }\n  .ChipsInput_newChip__3lTpD::placeholder {\n    color: #aaa; }\n\n.ChipsInput_disabled__2aL9V {\n  pointer-events: none;\n  cursor: not-allowed; }\n";
var styles = {"chips":"ChipsInput_chips__f7CZh","error":"ChipsInput_error__2U5k8","chipsTrack":"ChipsInput_chipsTrack__zpfVc","chip":"ChipsInput_chip__37cGX","deleteChipIcon":"ChipsInput_deleteChipIcon__2jkAs","themedNewChip":"ChipsInput_themedNewChip__3Atgq","themedNewChipAdded":"ChipsInput_themedNewChipAdded__3rYKv","newChip":"ChipsInput_newChip__3lTpD","disabled":"ChipsInput_disabled__2aL9V"};
styleInject(css_248z);

function useChips(value, inputValue, onChange, setInputValue) {
  var addChip = function addChip(newChipValue) {
    // when the value is a simple array
    if (!value.includes(newChipValue) && newChipValue) {
      var newValue = value.concat([newChipValue]);
      onChange(newValue);
      setInputValue("");
    }
  };
  var deleteChip = function deleteChip(indexToDelete) {
    var newValue = value.filter(function (_, i) {
      return i !== indexToDelete;
    });
    onChange(newValue);
  };
  var handleKeyDown = function handleKeyDown(e) {
    switch (e.keyCode) {
      case KEY_CODES.ENTER:
        addChip(e.target.value);
        break;
      case KEY_CODES.ESC:
        break;
      case KEY_CODES.BACKSPACE:
        if (!inputValue) {
          deleteChip(value.length - 1);
        }
        break;
    }
  };
  return [handleKeyDown, addChip, deleteChip];
}

var ChipsInput = function ChipsInput(_ref) {
  var _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className,
    _ref$onKeyDown = _ref.onKeyDown,
    onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
    _ref$onFocus = _ref.onFocus,
    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
    _ref$onBlur = _ref.onBlur,
    onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
    _ref$onMouseDown = _ref.onMouseDown,
    onMouseDown = _ref$onMouseDown === void 0 ? function () {} : _ref$onMouseDown,
    _ref$innerRef = _ref.innerRef,
    innerRef = _ref$innerRef === void 0 ? /*#__PURE__*/React.createRef() : _ref$innerRef,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? [] : _ref$value,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$focused = _ref.focused,
    focused = _ref$focused === void 0 ? false : _ref$focused,
    _ref$error = _ref.error,
    error = _ref$error === void 0 ? "" : _ref$error,
    _ref$placeholder = _ref.placeholder,
    placeholder = _ref$placeholder === void 0 ? "Type here..." : _ref$placeholder,
    inputRef = _ref.inputRef,
    _ref$disabled = _ref.disabled,
    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
    _ref$onType = _ref.onType,
    onType = _ref$onType === void 0 ? function () {} : _ref$onType,
    _ref$prefixComponent = _ref.prefixComponent,
    prefixComponent = _ref$prefixComponent === void 0 ? null : _ref$prefixComponent,
    _ref$postfixComponent = _ref.postfixComponent,
    postfixComponent = _ref$postfixComponent === void 0 ? null : _ref$postfixComponent,
    _ref$optionKey = _ref.optionKey,
    optionKey = _ref$optionKey === void 0 ? "text" : _ref$optionKey,
    _ref$prefixClassName = _ref.prefixClassName,
    prefixClassName = _ref$prefixClassName === void 0 ? "" : _ref$prefixClassName,
    _ref$typeValue = _ref.typeValue,
    typeValue = _ref$typeValue === void 0 ? "" : _ref$typeValue,
    _ref$themed = _ref.themed,
    themed = _ref$themed === void 0 ? false : _ref$themed,
    _ref$variant = _ref.variant,
    variant = _ref$variant === void 0 ? "default" : _ref$variant;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var focusedClassNameString = focused ? "focused" : "";
  var focusedStyle = focused ? {
    borderColor: primaryColor
  } : {};
  var errorClassName = error ? styles.error : "";
  var _useState = useState(typeValue),
    _useState2 = _slicedToArray(_useState, 2),
    inputValue = _useState2[0],
    setInputValue = _useState2[1];
  var _useChips = useChips(value, inputValue, onChange, setInputValue),
    _useChips2 = _slicedToArray(_useChips, 3),
    onKeyDownChips = _useChips2[0],
    deleteChip = _useChips2[2];
  var handleDelete = React.useCallback(function (i) {
    return function (e) {
      e.stopPropagation();
      e.preventDefault();
      deleteChip(i);
    };
  });
  var handleChange = React.useCallback(function (e) {
    var value = e.target.value;
    setInputValue(value);
    onType(value);
  });
  var handleKeyDown = React.useCallback(function (e) {
    onKeyDownChips(e);
    onKeyDown(e);
  });
  var renderInput = function renderInput() {
    // Since an external plugin is used here, we are adding a class for themed chips input
    var className = !themed ? "".concat(styles.newChip, " ").concat(prefixClassName, "-input") : "".concat(styles.themedNewChip, " ").concat(value.length > 0 && styles.themedNewChipAdded);
    return /*#__PURE__*/React.createElement(AutosizeInput, {
      ref: inputRef,
      inputClassName: className,
      onKeyDown: handleKeyDown,
      onChange: handleChange,
      value: inputValue,
      placeholder: placeholder
    });
  };
  var renderChip = function renderChip(chip, i) {
    var title = _typeof(chip) === "object" ? chip[optionKey] : chip;
    if (themed) {
      return /*#__PURE__*/React.createElement(ThemedChip, {
        key: i
      }, /*#__PURE__*/React.createElement(Text, {
        variant: "body.md"
      }, title), !disabled && /*#__PURE__*/React.createElement("div", {
        onMouseDown: handleDelete(i),
        style: {
          marginLeft: 8
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        src: CloseV3Icon,
        size: Icon.SIZES.SMALL
      })));
    }
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      className: "".concat(styles.chip, " ").concat(prefixClassName, "-chip")
    }, title, !disabled && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixClassName, "-chip-icon"),
      onMouseDown: handleDelete(i)
    }, /*#__PURE__*/React.createElement(Icon, {
      src: CloseIcon,
      className: "".concat(styles.deleteChipIcon, " ").concat(prefixClassName, "-chip-icon-svg")
    })));
  };
  React.useEffect(function () {
    setInputValue(typeValue);
  }, [typeValue]);
  var renderChipsInput = function renderChipsInput() {
    if (themed) {
      var chipsPresent = value.length > 0;
      return /*#__PURE__*/React.createElement(ThemedChipsInputWrapper, {
        tabIndex: "-1",
        ref: innerRef,
        onFocus: onFocus,
        onBlur: onBlur,
        onMouseDown: onMouseDown,
        variant: variant,
        mode: chipsPresent ? "chipAdded" : "default"
      }, prefixComponent, /*#__PURE__*/React.createElement(ThemedChipsContainer, null, chipsPresent ? value.map(renderChip) : null, !disabled ? renderInput() : null), postfixComponent);
    }
    return /*#__PURE__*/React.createElement("div", {
      tabIndex: "-1",
      ref: innerRef,
      style: focusedStyle,
      className: "".concat(styles.chips, " ").concat(prefixClassName, " ").concat(errorClassName, " ").concat(className, " ").concat(focusedClassNameString),
      onFocus: onFocus,
      onBlur: onBlur,
      onMouseDown: onMouseDown
    }, prefixComponent, /*#__PURE__*/React.createElement("div", {
      className: "".concat(styles.chipsTrack, " ").concat(prefixClassName, "-chips")
    }, value.length > 0 ? value.map(renderChip) : null, !disabled ? renderInput() : null), postfixComponent);
  };
  return renderChipsInput();
};
ChipsInput.propTypes = {
  onKeyDown: PropTypes.func,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  onMouseDown: PropTypes.func,
  innerRef: PropTypes.object,
  className: PropTypes.string,
  value: PropTypes.arrayOf(PropTypes.shape({})),
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  onType: PropTypes.func,
  focused: PropTypes.bool,
  error: PropTypes.bool,
  placeholder: PropTypes.string,
  optionKey: PropTypes.string,
  inputRef: PropTypes.object,
  prefixComponent: PropTypes.node,
  postfixComponent: PropTypes.node,
  prefixClassName: PropTypes.string,
  typeValue: PropTypes.string,
  themed: PropTypes.bool,
  variant: PropTypes.string
};
ChipsInput.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ChipsInput",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onKeyDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onMouseDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "innerRef": {
      "defaultValue": {
        "value": "React.createRef()",
        "computed": true
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {}
        }
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"Type here...\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "onType": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixComponent": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "postfixComponent": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "optionKey": {
      "defaultValue": {
        "value": "\"text\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "typeValue": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "variant": {
      "defaultValue": {
        "value": "\"default\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "inputRef": {
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    }
  }
};

export { ChipsInput as C };
