import '../_commonjsHelpers-97e6d7b1.js';
import React, { useRef } from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import '../index-91504e81.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { u as useInput } from '../useInput-33ea83d6.js';
import { Label } from '../ui/label.js';
import '../index-489aa75d.js';
import { C as ChipsInput } from '../ChipsInput-2401862e.js';

var css = ".Chips_text__1eZKw {\n  margin-bottom: 24px;\n  flex: 1;\n  position: relative; }\n\n.Chips_textWithMargin__3Lxtl {\n  margin-right: 16px;\n  outline: none; }\n\n.Chips_textActive__2ot2b .Chips_textLabel__1ipz0 {\n  color: #124fa0; }\n\n.Chips_textActive__2ot2b .Chips_textInputWrapper__2ne7D {\n  border-color: #124fa0;\n  background-color: rgba(18, 79, 160, 0.05); }\n\n.Chips_textError__29QQA .Chips_textLabel__1ipz0 {\n  color: #f44336; }\n\n.Chips_textError__29QQA .Chips_textInputWrapper__2ne7D {\n  border-color: #f44336;\n  background-color: rgba(244, 67, 54, 0.05); }\n\n.Chips_emojiIcon__Nsz90 {\n  cursor: pointer; }\n\n.Chips_textLabelWrapper__1AMMV {\n  display: flex;\n  align-items: center;\n  margin-bottom: 6px; }\n\n.Chips_textLabel__1ipz0 {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 2px;\n  transition: 0.2s ease-out;\n  margin-right: 8px; }\n\n.Chips_speakerIcon__AjyVN {\n  cursor: pointer;\n  color: #666;\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  transition: 0.2s ease-out;\n  opacity: 0.6; }\n  .Chips_speakerIcon__AjyVN:hover {\n    opacity: 1; }\n  .Chips_speakerIcon__AjyVN #Chips_wave3__2LOcR {\n    opacity: 0; }\n  .Chips_speakerIcon__AjyVN svg path {\n    transition: 1s ease-out; }\n  .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s {\n    opacity: 1; }\n    .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s svg {\n      overflow: visible; }\n      .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s svg path {\n        fill: #0d3872; }\n    .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s svg #wave1 {\n      animation: Chips_soundwave__1maqD 1s ease-out infinite;\n      animation-delay: 0.2s; }\n    .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s svg #wave2 {\n      animation: Chips_soundwave__1maqD 1s ease-out infinite;\n      animation-delay: 0.4s; }\n    .Chips_speakerIcon__AjyVN.Chips_speaking__1NO1s svg #wave3 {\n      animation: Chips_soundwave__1maqD 1s ease-out infinite;\n      animation-delay: 0.6s; }\n\n.Chips_textHint__1pEeU {\n  display: block;\n  color: #999;\n  font-size: 13px;\n  font-weight: 400;\n  margin-bottom: 8px;\n  margin-left: 2px;\n  margin-top: -6px;\n  transition: 0.2s ease-out; }\n\n.Chips_inputWrapper__1l22B {\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px; }\n\n.Chips_textInputWrapper__2ne7D {\n  flex: 1;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  background-color: #fff;\n  transition: 0.2s ease-out; }\n  .Chips_textInputWrapper__2ne7D.Chips_disabled__2dmBB {\n    pointer-events: none;\n    background-color: #eee; }\n\n.Chips_textInput__2PoCK {\n  border: none !important;\n  outline: none !important;\n  padding: 4px 8px !important;\n  width: 100%;\n  box-sizing: border-box;\n  font-size: 14px !important;\n  resize: none;\n  background-color: transparent !important;\n  box-shadow: none !important; }\n  .Chips_textInput__2PoCK.Chips_multiline__1l5uV {\n    min-height: 64px; }\n  .Chips_textInput__2PoCK.Chips_disabled__2dmBB {\n    color: #999; }\n  .Chips_textInput__2PoCK:not(.Chips_multiline__1l5uV) {\n    height: auto !important; }\n  .Chips_textInput__2PoCK::placeholder {\n    color: #000;\n    opacity: 0.3; }\n\n.Chips_textInputSubtext__3KG9o {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 4px;\n  font-size: 12px;\n  position: absolute;\n  bottom: 0;\n  transform: translate3d(0, 100%, 0);\n  padding-top: 4px; }\n\n.Chips_textInputSubtextCount__1BppG {\n  opacity: 0.5; }\n\n.Chips_textInputSubtextError__3kF58 {\n  color: #ff0c0c;\n  opacity: 0.8; }\n\n@keyframes Chips_soundwave__1maqD {\n  0% {\n    opacity: 0;\n    transform: translate3d(-5px, 0, 0); }\n  50% {\n    opacity: 1;\n    transform: translate3d(5px, 0, 0); }\n  100% {\n    opacity: 0;\n    transform: translate3d(10px, 0, 0); } }\n";
var styles = {"text":"Chips_text__1eZKw","textWithMargin":"Chips_textWithMargin__3Lxtl","textActive":"Chips_textActive__2ot2b","textLabel":"Chips_textLabel__1ipz0","textInputWrapper":"Chips_textInputWrapper__2ne7D","textError":"Chips_textError__29QQA","emojiIcon":"Chips_emojiIcon__Nsz90","textLabelWrapper":"Chips_textLabelWrapper__1AMMV","speakerIcon":"Chips_speakerIcon__AjyVN","wave3":"Chips_wave3__2LOcR","speaking":"Chips_speaking__1NO1s","soundwave":"Chips_soundwave__1maqD","textHint":"Chips_textHint__1pEeU","inputWrapper":"Chips_inputWrapper__1l22B","disabled":"Chips_disabled__2dmBB","textInput":"Chips_textInput__2PoCK","multiline":"Chips_multiline__1l5uV","textInputSubtext":"Chips_textInputSubtext__3KG9o","textInputSubtextCount":"Chips_textInputSubtextCount__1BppG","textInputSubtextError":"Chips_textInputSubtextError__3kF58"};
styleInject(css);

var Text = function Text(_ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? "" : _ref$value,
      _ref$onChange = _ref.onChange,
      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
      _ref$label = _ref.label,
      label = _ref$label === void 0 ? "" : _ref$label,
      _ref$placeholder = _ref.placeholder,
      placeholder = _ref$placeholder === void 0 ? "Type here..." : _ref$placeholder,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? "" : _ref$className,
      _ref$prefixClassName = _ref.prefixClassName,
      prefixClassName = _ref$prefixClassName === void 0 ? "" : _ref$prefixClassName,
      _ref$error = _ref.error,
      error = _ref$error === void 0 ? "" : _ref$error,
      _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$disabled = _ref.disabled,
      disabled = _ref$disabled === void 0 ? false : _ref$disabled;

  var _TextInputDOM = useRef();

  var _useInput = useInput(_TextInputDOM, onFocus, onBlur),
      focused = _useInput.focused,
      setFocused = _useInput.setFocused,
      handleFocus = _useInput.handleFocus,
      handleBlur = _useInput.handleBlur;

  var errorClassName = error ? "".concat(prefixClassName, "-error") : "";
  return React.createElement("div", {
    className: "".concat(styles.text, " ").concat(prefixClassName, " ").concat(className),
    "data-testid": "chips"
  }, React.createElement(Label, {
    focused: focused,
    error: error,
    className: "".concat(styles.dropdownLabel, " ").concat(prefixClassName, "-label ").concat(errorClassName)
  }, label), React.createElement(ChipsInput, {
    className: "".concat(errorClassName),
    prefixClassName: "".concat(prefixClassName, "-chipsInput"),
    inputRef: _TextInputDOM,
    onFocus: handleFocus,
    onBlur: handleBlur,
    onChange: onChange,
    onClick: setFocused,
    focused: focused,
    active: focused,
    value: value,
    placeholder: placeholder,
    disabled: disabled
  }));
};

Text.propTypes = {
  /** Placeholder for the Input */
  placeholder: PropTypes.string,

  /** ClassName for the Chips element */
  className: PropTypes.string,

  /** Value of the Chips Input */
  value: PropTypes.string,

  /** Label for the Chips */
  label: PropTypes.string,

  /** Error for Chips */
  error: PropTypes.string,

  /** onChange Callback */
  onChange: PropTypes.func,

  /** PrefixClassName for The Chips */
  prefixClassName: PropTypes.string,

  /** onFocus Callback */
  onFocus: PropTypes.func,

  /** onBlur Callback */
  onBlur: PropTypes.func,

  /** Bool to toggle Enable/Disable */
  disabled: PropTypes.bool
};
Text.classNames = {
  $prefix: "Prefix ClassName",
  "$prefix-label": "Prefix ClassName applied to the Label",
  "$prefix-chipsInput": "Prefix ClassName applied to the input element"
};
Text.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Text",
  "props": {
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Value of the Chips Input"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange Callback"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for the Chips"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"Type here...\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Placeholder for the Input"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "ClassName for the Chips element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "PrefixClassName for The Chips"
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Error for Chips"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onFocus Callback"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onBlur Callback"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Bool to toggle Enable/Disable"
    }
  }
};

export default Text;
