import React, { useRef } from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from '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 Text$1 from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import '../index-9efc6429.js';
import { u as useInput } from '../useInput-33ea83d6.js';
import { Label } from '../ui/label.js';
import { T as TextInput } from '../TextInput-023a1470.js';

var css = ".Text_text__bC4ty {\n  flex: 1;\n  position: relative; }\n\n.Text_textWithMargin__cLdsB {\n  margin-right: 16px;\n  outline: none; }\n\n.Text_textActive__2CsGe .Text_textLabel__svN-B {\n  color: #124fa0; }\n\n.Text_textActive__2CsGe .Text_textInputWrapper___tssz {\n  border-color: #124fa0;\n  background-color: rgba(18, 79, 160, 0.05); }\n\n.Text_textError__c9bS_ .Text_textLabel__svN-B {\n  color: #f44336; }\n\n.Text_textError__c9bS_ .Text_textInputWrapper___tssz {\n  border-color: #f44336;\n  background-color: rgba(244, 67, 54, 0.05); }\n\n.Text_emojiIcon__Vppvp {\n  cursor: pointer; }\n\n.Text_textLabelWrapper__1CQ2P {\n  display: flex;\n  align-items: center;\n  margin-bottom: 6px; }\n\n.Text_textLabel__svN-B {\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.Text_speakerIcon__1Vlwm {\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  .Text_speakerIcon__1Vlwm:hover {\n    opacity: 1; }\n  .Text_speakerIcon__1Vlwm #Text_wave3__WPCeW {\n    opacity: 0; }\n  .Text_speakerIcon__1Vlwm svg path {\n    transition: 1s ease-out; }\n  .Text_speakerIcon__1Vlwm.Text_speaking__2d56A {\n    opacity: 1; }\n    .Text_speakerIcon__1Vlwm.Text_speaking__2d56A svg {\n      overflow: visible; }\n      .Text_speakerIcon__1Vlwm.Text_speaking__2d56A svg path {\n        fill: #0d3872; }\n    .Text_speakerIcon__1Vlwm.Text_speaking__2d56A svg #wave1 {\n      animation: Text_soundwave__2D42v 1s ease-out infinite;\n      animation-delay: 0.2s; }\n    .Text_speakerIcon__1Vlwm.Text_speaking__2d56A svg #wave2 {\n      animation: Text_soundwave__2D42v 1s ease-out infinite;\n      animation-delay: 0.4s; }\n    .Text_speakerIcon__1Vlwm.Text_speaking__2d56A svg #wave3 {\n      animation: Text_soundwave__2D42v 1s ease-out infinite;\n      animation-delay: 0.6s; }\n\n.Text_textHint__3G0qQ {\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.Text_inputWrapper__dbWLO {\n  display: flex;\n  align-items: center;\n  margin-bottom: 8px; }\n\n.Text_textInputWrapper___tssz {\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  .Text_textInputWrapper___tssz.Text_disabled__2zejI {\n    pointer-events: none;\n    background-color: #eee; }\n\n.Text_textInput__3KJ_o {\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  .Text_textInput__3KJ_o.Text_multiline__A2kXG {\n    min-height: 64px; }\n  .Text_textInput__3KJ_o.Text_disabled__2zejI {\n    color: #999; }\n  .Text_textInput__3KJ_o:not(.Text_multiline__A2kXG) {\n    height: auto !important; }\n  .Text_textInput__3KJ_o::placeholder {\n    color: #000;\n    opacity: 0.3; }\n\n.Text_textInputSubtext__TMZ95 {\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.Text_textInputSubtextCount__12bUy {\n  opacity: 0.5; }\n\n.Text_textInputSubtextError__hKV5p {\n  color: #ff0c0c;\n  opacity: 0.8; }\n\n@keyframes Text_soundwave__2D42v {\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":"Text_text__bC4ty","textWithMargin":"Text_textWithMargin__cLdsB","textActive":"Text_textActive__2CsGe","textLabel":"Text_textLabel__svN-B","textInputWrapper":"Text_textInputWrapper___tssz","textError":"Text_textError__c9bS_","emojiIcon":"Text_emojiIcon__Vppvp","textLabelWrapper":"Text_textLabelWrapper__1CQ2P","speakerIcon":"Text_speakerIcon__1Vlwm","wave3":"Text_wave3__WPCeW","speaking":"Text_speaking__2d56A","soundwave":"Text_soundwave__2D42v","textHint":"Text_textHint__3G0qQ","inputWrapper":"Text_inputWrapper__dbWLO","disabled":"Text_disabled__2zejI","textInput":"Text_textInput__3KJ_o","multiline":"Text_multiline__A2kXG","textInputSubtext":"Text_textInputSubtext__TMZ95","textInputSubtextCount":"Text_textInputSubtextCount__12bUy","textInputSubtextError":"Text_textInputSubtextError__hKV5p"};
styleInject(css);

var PrePostFixWrapper = styled("div")({
  position: "absolute",
  top: 0,
  height: "100%",
  display: "flex",
  alignItems: "center",
  transition: "transform 0.3s ease"
});
var PrefixComponentWrapper = styled(PrePostFixWrapper)({
  left: "8px"
});
var PostfixComponentWrapper = styled(PrePostFixWrapper)({
  right: "8px"
});

var Text = function Text(_ref) {
  var value = _ref.value,
      onChange = _ref.onChange,
      label = _ref.label,
      placeholder = _ref.placeholder,
      className = _ref.className,
      prefixClassName = _ref.prefixClassName,
      error = _ref.error,
      tooltip = _ref.tooltip,
      prefixComponent = _ref.prefixIcon,
      postfixComponent = _ref.postfixIcon,
      onFocus = _ref.onFocus,
      onBlur = _ref.onBlur,
      onKeyDown = _ref.onKeyDown,
      disabled = _ref.disabled,
      multiline = _ref.multiline,
      innerRef = _ref.innerRef,
      themed = _ref.themed,
      style = _ref.style,
      size = _ref.size;

  var _TextInputDOM = useRef();

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

  var errorClassName = error ? "error" : "";
  var disabledClassName = disabled ? "disabled" : "";
  var handleRef = React.useCallback(function (ref) {
    _TextInputDOM.current = ref;
    if (typeof innerRef === "function") innerRef(ref);else innerRef.current = ref;
  });
  var PrefixComponent = prefixComponent ? React.createElement(PrefixComponentWrapper, null, prefixComponent) : null;
  var PostfixComponent = postfixComponent ? React.createElement(PostfixComponentWrapper, null, postfixComponent) : null;
  return React.createElement("div", {
    className: "".concat(styles.text, " ").concat(prefixClassName, " ").concat(className, " ").concat(errorClassName, " ").concat(disabledClassName),
    "data-testid": "text"
  }, React.createElement(Label, {
    focused: focused,
    error: error,
    className: "".concat(styles.dropdownLabel, " ").concat(prefixClassName, "-label"),
    disabled: disabled,
    tooltip: tooltip,
    themed: themed
  }, React.createElement("span", {
    "data-testid": "labelText"
  }, label)), React.createElement(TextInput, {
    inputRef: handleRef,
    prefixClassName: prefixClassName,
    className: "".concat(prefixClassName, "-textinput"),
    onFocus: handleFocus,
    onBlur: handleBlur,
    onKeyDown: onKeyDown,
    onChange: onChange,
    onClick: setFocused,
    focused: focused,
    active: focused,
    value: value,
    placeholder: placeholder,
    disabled: disabled,
    error: error,
    multiline: multiline,
    themed: themed,
    label: label,
    style: style,
    size: size,
    prefixComponent: themed && PrefixComponent,
    postfixComponent: themed && PostfixComponent
  }), themed && error && React.createElement(Text$1, {
    variant: "h4.semi-bold",
    color: "red.haptik"
  }, error));
};

Text.propTypes = {
  /** Place Holder Text for an Empty Text Field */
  placeholder: PropTypes.string,

  /** Classname for the Parent element */
  className: PropTypes.string,

  /** Value of the Text Field */
  value: PropTypes.string,

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

  /** Error to be displayed (if any) */
  error: PropTypes.string,

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

  /** A classname prepended on parent */
  prefixClassName: PropTypes.string,

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

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

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

  /** Disable Flag for input */
  disabled: PropTypes.bool,

  /** Tooltip to help user with the input fields */
  tooltip: PropTypes.string,

  /** If you want to render a textarea instead */
  multiline: PropTypes.bool,

  /** Passing Ref for input field reference */
  innerRef: PropTypes.func,

  /** Flag to determine if text input is themed */
  themed: PropTypes.bool,

  /** Overrides styles of the core input element */
  style: PropTypes.object,

  /** Size of dropdown */
  size: PropTypes.string,

  /** component to be rendered before input box */
  prefixIcon: PropTypes.node,

  /** component to be rendered after input box */
  postfixIcon: PropTypes.node
};
Text.defaultProps = {
  placeholder: "",
  className: "",
  value: "",
  label: "",
  error: "",
  tooltip: "",
  size: "",
  disabled: false,
  multiline: false,
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  onKeyDown: function onKeyDown() {},
  innerRef: function innerRef() {},
  themed: false,
  style: {}
};
Text.classNames = {
  $prefix: "Prefix ClassName added to the Parent",
  "$prefix-label": "Added to the Label Component",
  "$prefix-textinput": "Added to the Text Input Component",
  "$prefix-input": "Added to the input DOM Node"
};
Text.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Text",
  "props": {
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Place Holder Text for an Empty Text Field"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Classname for the Parent element"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Value of the Text Field"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for the input"
    },
    "error": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Error to be displayed (if any)"
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Tooltip to help user with the input fields"
    },
    "size": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Size of dropdown"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Disable Flag for input"
    },
    "multiline": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If you want to render a textarea instead"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange Callback"
    },
    "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"
    },
    "onKeyDown": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onKeyDown Callback"
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "Passing Ref for input field reference"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Flag to determine if text input is themed"
    },
    "style": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Overrides styles of the core input element"
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "A classname prepended on parent"
    },
    "prefixIcon": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "component to be rendered before input box"
    },
    "postfixIcon": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": "component to be rendered after input box"
    }
  }
};

export default Text;
