@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTTextInput/UTTextInput.stories.js

@@ -0,0 +1,431 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import Search from '@material-ui/icons/Search';
+import Lock from '@material-ui/icons/Lock';
+import Visibility from '@material-ui/icons/Visibility';
+import UTTextInput from '.';
+export default {
+  title: 'Energy-UI/UTTextInput',
+  component: UTTextInput,
+  args: {
+    version: 'V1',
+    placeholder: 'Ingresá un valor...'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Texto del label que aparece sobre el campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor actual del campo.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback al cambiar el valor.',
+      table: {
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el campo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Muestra el valor sin permitir edición.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Muestra el indicador `*` junto al label.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error o `true` para mostrar estado de error.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | bool'
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda debajo del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Límite de caracteres. Si se combina con `showCharacterCount`, muestra el contador.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    showCharacterCount: {
+      control: 'boolean',
+      description: 'Muestra el contador de caracteres (requiere `maxLength`).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    inputSize: {
+      control: 'select',
+      description: 'Tamaño del campo. Afecta el padding interno.',
+      options: ['medium', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: "'medium' | 'small'"
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del label.',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: "'large' | 'small'"
+        }
+      }
+    },
+    prefix: {
+      control: 'text',
+      description: 'Texto prefijo dentro del campo (ej: `$`, `+54`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    suffix: {
+      control: 'text',
+      description: 'Texto sufijo dentro del campo (ej: `kg`, `m²`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip de ayuda sobre el ícono de información.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Tipo de input HTML. `numeric` filtra solo números.',
+      options: ['text', 'password', 'email', 'numeric'],
+      table: {
+        defaultValue: {
+          summary: 'text'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    LeftIcon: {
+      control: false,
+      description: 'Componente ícono que se muestra a la izquierda.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    },
+    RightIcon: {
+      control: false,
+      description: 'Componente ícono que se muestra a la derecha.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTTextInput es el campo de texto estándar del design system. V1 combina UTFieldLabel + UTBaseInputField con soporte completo para adornos, validaciones y tokens de diseño.'
+      }
+    }
+  }
+};
+const Stateful = args => {
+  var _args$value;
+  const [value, setValue] = useState((_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '');
+  return /*#__PURE__*/React.createElement(UTTextInput, _extends({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+export const Playground = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+export const Default = {
+  args: {
+    placeholder: 'Ingresá un valor...',
+    version: 'V1'
+  }
+};
+export const ConTitulo = {
+  args: {
+    title: 'Nombre completo',
+    placeholder: 'Ej: Juan Pérez',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+export const Requerido = {
+  args: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    required: true,
+    version: 'V1'
+  }
+};
+export const ConError = {
+  args: {
+    title: 'Email',
+    value: 'correo-invalido',
+    error: 'El formato del email no es válido.',
+    version: 'V1'
+  },
+  name: 'Con error'
+};
+export const Deshabilitado = {
+  args: {
+    title: 'Email',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+export const SoloLectura = {
+  args: {
+    title: 'Email',
+    value: 'usuario@empresa.com',
+    readOnly: true,
+    version: 'V1'
+  },
+  name: 'Solo lectura'
+};
+export const ConTextoDeAyuda = {
+  args: {
+    title: 'Contraseña',
+    placeholder: 'Mínimo 8 caracteres',
+    helpText: 'Usá mayúsculas, minúsculas y al menos un número.',
+    version: 'V1'
+  },
+  name: 'Con texto de ayuda'
+};
+export const ConContadorDeCaracteres = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Nombre',
+    placeholder: 'Ingresá tu nombre',
+    maxLength: 50,
+    showCharacterCount: true,
+    version: 'V1'
+  },
+  name: 'Con contador de caracteres'
+};
+export const ConPrefix = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Monto',
+    placeholder: '0,00',
+    prefix: '$',
+    version: 'V1'
+  },
+  name: 'Con prefijo'
+};
+export const ConSuffix = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Peso',
+    placeholder: '0',
+    suffix: 'kg',
+    version: 'V1'
+  },
+  name: 'Con sufijo'
+};
+export const ConIconoIzquierdo = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Búsqueda',
+    placeholder: 'Buscá...',
+    LeftIcon: Search,
+    version: 'V1'
+  },
+  name: 'Con ícono izquierdo'
+};
+export const ConIconoDerecho = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: '••••••••',
+    type: 'password',
+    RightIcon: Visibility,
+    version: 'V1'
+  },
+  name: 'Con ícono derecho'
+};
+export const ConTooltip = {
+  args: {
+    title: 'CUIT',
+    placeholder: '20-12345678-9',
+    tooltip: 'Ingresá tu CUIT sin guiones. Se validará el formato automáticamente.',
+    version: 'V1'
+  },
+  name: 'Con tooltip'
+};
+export const Pequeno = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Código',
+    placeholder: 'ABC-123',
+    inputSize: 'small',
+    titleVariant: 'small',
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+export const Contrasena = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: 'Ingresá tu contraseña',
+    type: 'password',
+    RightIcon: Lock,
+    version: 'V1'
+  },
+  name: 'Contraseña'
+};
+export const SoloNumeros = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Número de teléfono',
+    placeholder: '11 1234-5678',
+    type: 'numeric',
+    version: 'V1'
+  },
+  name: 'Solo números'
+};

package/dist/esm/components/UTTextInput/index.js

@@ -1 +1,19 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const UTTextInput=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTTextInput.propTypes={version:string};export default UTTextInput;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTTextInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTTextInput.propTypes = {
+  version: string
+};
+export default UTTextInput;

package/dist/esm/components/UTTextInput/versions/V0/constants.js

@@ -1 +1,5 @@
-export const INPUT_TYPES={PASSWORD:"password",TEXT:"text",NUMBER:"number"};
+export const INPUT_TYPES = {
+  PASSWORD: 'password',
+  TEXT: 'text',
+  NUMBER: 'number'
+};

package/dist/esm/components/UTTextInput/versions/V0/index.js

@@ -1 +1,225 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import HelpOutline from"@material-ui/icons/HelpOutline";import InputAdornment from"@material-ui/core/InputAdornment";import React,{Fragment,PureComponent,isValidElement}from"react";import TextField from"@material-ui/core/TextField";import Visibility from"@material-ui/icons/Visibility";import VisibilityOff from"@material-ui/icons/VisibilityOff";import{bool,elementType,func,object,objectOf,string}from"prop-types";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import UTButton from"../../../UTButton";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";import{inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import styles from"./styles.module.scss";import{INPUT_TYPES}from"./constants";import{retrieveStyle,retrieveMuiTheme}from"./theme";const preventDefault=event=>{"Enter"===event.key&&event.preventDefault()};class UTTextInput extends PureComponent{constructor(props){super(props),_defineProperty(this,"handleClickShowPassword",()=>{this.setState(prevState=>({visible:!prevState.visible}))}),this.state={visible:!1}}render(){const{actionDataTestId:actionDataTestId,adornmentInside:adornmentInside,autofocus:autofocus,bigInput:bigInput,captionLabel:captionLabel,classes:classes,containerClassName:containerClassName,dataTestId:dataTestId,disabled:disabled,field:field,helperTextDataTestId:helperTextDataTestId,id:id,input:input,inputClassName:inputClassName,inputObjectKey:inputObjectKey,label:label,labelDataTestId:labelDataTestId,labelRootClassName:labelRootClassName,meta:meta,onChangeText:onChangeText,placeholder:placeholder,PasswordInvisibleIcon:PasswordInvisibleIcon,PasswordVisibleIcon:PasswordVisibleIcon,preventEnterSubmit:preventEnterSubmit,preventFocus:preventFocus,tippyProps:tippyProps,tooltip:tooltip,tooltipContentDataTestId:tooltipContentDataTestId,tooltipIconDataTestId:tooltipIconDataTestId,type:type,variant:variant,...others}=this.props,{icon:Icon,outsideIcon:outsideIcon,adornment:adornment,helperText:helperText}=(null==field?void 0:field.configuration)||{},{base:base,selectedOptionsIds:selectedOptionsIds,retrieveStyle:rs,retrieveMuiTheme:rmt,Component:Component,muiTheme:muiTheme,...textFieldPropsToForward}=others,endAction=type===INPUT_TYPES.PASSWORD?React.createElement(UTButton,{dataTestId:actionDataTestId,Icon:this.state.visible?PasswordVisibleIcon:PasswordInvisibleIcon,onClick:this.handleClickShowPassword,variant:"text"}):adornment,value=inputObjectKey?input.value[inputObjectKey]:input.value,errorMessage=shouldShowErrors(meta)&&meta.error||captionLabel||"",fieldId=id||null!=field&&field.id?"".concat(id||field.id):void 0,TextInput=React.createElement(TextField,_extends({id:fieldId,"data-testid":dataTestId,placeholder:placeholder,variant:variant,label:Icon?React.createElement("div",{className:classes.labelContainer},React.createElement(Icon,{className:classes.labelIcon}),React.createElement("div",null,label)):label,onKeyPress:preventEnterSubmit?preventDefault:void 0,error:shouldShowErrors(meta),FormHelperTextProps:{component:"div"},helperText:errorMessage||helperText?React.createElement(UTLabel,{className:styles.helperText,colorTheme:errorMessage?"error":"gray",dataTestId:helperTextDataTestId,variant:"small",withMarkdown:!0},errorMessage||helperText):void 0,disabled:disabled,onChange:event=>{var _event$target$value,_event$target;preventFocus&&event.preventDefault(),input.onChange(onChangeText(null!==(_event$target$value=null==event||null===(_event$target=event.target)||void 0===_event$target?void 0:_event$target.value)&&void 0!==_event$target$value?_event$target$value:event))},onClick:event=>{preventFocus&&(event.preventDefault(),event.target.blur())},value:value,fullWidth:!0,autoFocus:autofocus,margin:"none",autoComplete:"off",InputProps:{id:fieldId,inputProps:{"data-testid":dataTestId,"data-keyboard":(null==input?void 0:input.name)||null},endAdornment:endAction&&React.createElement(InputAdornment,{position:"end",className:"".concat(adornmentInside&&styles.adornmentInside)},endAction),type:type===INPUT_TYPES.PASSWORD?this.state.visible?INPUT_TYPES.TEXT:INPUT_TYPES.PASSWORD:type||INPUT_TYPES.TEXT,classes:{input:"\n              ".concat(bigInput&&classes.bigInput,"\n              ").concat(type===INPUT_TYPES.NUMBER&&styles.numberType,"\n              ").concat(inputClassName,"\n            ")}},InputLabelProps:{classes:{root:labelRootClassName},htmlFor:fieldId,"data-testid":labelDataTestId}},textFieldPropsToForward));return React.createElement("div",{className:"".concat(classes.container," ").concat(containerClassName," ").concat(tooltip&&styles.containerWithTooltip)},tooltip?React.createElement(Fragment,null,TextInput,React.createElement(UTTooltip,{content:tooltip,dataTestId:tooltipContentDataTestId,tippyProps:tippyProps},React.createElement("span",{className:styles.tooltipIconContainer,"data-testid":tooltipIconDataTestId},React.createElement(HelpOutline,{className:"".concat(classes.tooltipIcon," ").concat(styles.tooltipIcon)})))):React.createElement(Fragment,null,isValidElement(outsideIcon)&&React.createElement("div",{className:styles.iconContainer},outsideIcon),TextInput))}}UTTextInput.propTypes={actionDataTestId:string,adornmentInside:bool,autofocus:bool,bigInput:bool,captionLabel:string,classes:objectOf(string),containerClassName:string,dataTestId:string,disabled:bool,field:object,helperTextDataTestId:string,id:string,input:inputPropTypes.isRequired,inputClassName:string,inputObjectKey:string,label:string,labelDataTestId:string,labelRootClassName:string,meta:metaPropTypes,onChangeText:func,PasswordInvisibleIcon:elementType,PasswordVisibleIcon:elementType,placeholder:string,preventEnterSubmit:bool,preventFocus:bool,tippyProps:object,tooltip:string,tooltipContentDataTestId:string,tooltipIconDataTestId:string,type:string,variant:string},UTTextInput.defaultProps={adornmentInside:!1,autofocus:!1,classes:{},meta:{},onChangeText:val=>val,PasswordInvisibleIcon:VisibilityOff,PasswordVisibleIcon:Visibility,preventEnterSubmit:!1};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTTextInput);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import React, { Fragment, PureComponent, isValidElement } from 'react';
+import TextField from '@material-ui/core/TextField';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import { bool, elementType, func, object, objectOf, string } from 'prop-types';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+import { inputPropTypes, metaPropTypes } from '../../../../types/formTypes';
+import styles from './styles.module.scss';
+import { INPUT_TYPES } from './constants';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+const preventDefault = event => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
+};
+class UTTextInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleClickShowPassword", () => {
+      this.setState(prevState => ({
+        visible: !prevState.visible
+      }));
+    });
+    this.state = {
+      visible: false
+    };
+  }
+  render() {
+    const {
+      actionDataTestId,
+      adornmentInside,
+      autofocus,
+      bigInput,
+      captionLabel,
+      classes,
+      containerClassName,
+      dataTestId,
+      disabled,
+      field,
+      helperTextDataTestId,
+      id,
+      input,
+      inputClassName,
+      inputObjectKey,
+      label,
+      labelDataTestId,
+      labelRootClassName,
+      meta,
+      onChangeText,
+      placeholder,
+      PasswordInvisibleIcon,
+      PasswordVisibleIcon,
+      preventEnterSubmit,
+      preventFocus,
+      tippyProps,
+      tooltip,
+      tooltipContentDataTestId,
+      tooltipIconDataTestId,
+      type,
+      variant,
+      ...others
+    } = this.props;
+    const handleChange = event => {
+      var _event$target$value, _event$target;
+      if (preventFocus) event.preventDefault();
+      input.onChange(onChangeText((_event$target$value = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) !== null && _event$target$value !== void 0 ? _event$target$value : event));
+    };
+    const handleClick = event => {
+      if (preventFocus) {
+        event.preventDefault();
+        event.target.blur();
+      }
+    };
+    const {
+      icon: Icon,
+      outsideIcon,
+      adornment,
+      helperText
+    } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+
+    // TODO. These props were forwarded to the inner dom element and they were
+    // causing errors and warnings. I quit them from the  "..." spread to TextField.
+    // Deeper analysis should be done when refactoring the component to match
+    // design requirements.
+    const {
+      base,
+      selectedOptionsIds,
+      retrieveStyle: rs,
+      retrieveMuiTheme: rmt,
+      Component,
+      muiTheme,
+      ...textFieldPropsToForward
+    } = others;
+    const endAction = type === INPUT_TYPES.PASSWORD ? /*#__PURE__*/React.createElement(UTButton, {
+      dataTestId: actionDataTestId,
+      Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
+      onClick: this.handleClickShowPassword,
+      variant: "text"
+    }) : adornment;
+    const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
+    const errorMessage = shouldShowErrors(meta) && meta.error || captionLabel || '';
+    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
+    const TextInput = /*#__PURE__*/React.createElement(TextField, _extends({
+      id: fieldId,
+      "data-testid": dataTestId,
+      placeholder: placeholder,
+      variant: variant,
+      label: Icon ? /*#__PURE__*/React.createElement("div", {
+        className: classes.labelContainer
+      }, /*#__PURE__*/React.createElement(Icon, {
+        className: classes.labelIcon
+      }), /*#__PURE__*/React.createElement("div", null, label)) : label,
+      onKeyPress: preventEnterSubmit ? preventDefault : undefined,
+      error: shouldShowErrors(meta),
+      FormHelperTextProps: {
+        component: 'div'
+      },
+      helperText: errorMessage || helperText ? /*#__PURE__*/React.createElement(UTLabel, {
+        className: styles.helperText,
+        colorTheme: errorMessage ? 'error' : 'gray',
+        dataTestId: helperTextDataTestId,
+        variant: "small",
+        withMarkdown: true
+      }, errorMessage || helperText) : undefined,
+      disabled: disabled,
+      onChange: handleChange,
+      onClick: handleClick,
+      value: value,
+      fullWidth: true,
+      autoFocus: autofocus,
+      margin: "none",
+      autoComplete: "off",
+      InputProps: {
+        id: fieldId,
+        inputProps: {
+          'data-testid': dataTestId,
+          'data-keyboard': (input === null || input === void 0 ? void 0 : input.name) || null
+        },
+        endAdornment: endAction && /*#__PURE__*/React.createElement(InputAdornment, {
+          position: "end",
+          className: "".concat(adornmentInside && styles.adornmentInside)
+        }, endAction),
+        type: type === INPUT_TYPES.PASSWORD ? !this.state.visible ? INPUT_TYPES.PASSWORD : INPUT_TYPES.TEXT : type || INPUT_TYPES.TEXT,
+        classes: {
+          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === INPUT_TYPES.NUMBER && styles.numberType, "\n              ").concat(inputClassName, "\n            ")
+        }
+      },
+      InputLabelProps: {
+        classes: {
+          root: labelRootClassName
+        },
+        htmlFor: fieldId,
+        'data-testid': labelDataTestId
+      }
+    }, textFieldPropsToForward));
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && styles.containerWithTooltip)
+    }, tooltip ? /*#__PURE__*/React.createElement(Fragment, null, TextInput, /*#__PURE__*/React.createElement(UTTooltip, {
+      content: tooltip,
+      dataTestId: tooltipContentDataTestId,
+      tippyProps: tippyProps
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles.tooltipIconContainer,
+      "data-testid": tooltipIconDataTestId
+    }, /*#__PURE__*/React.createElement(HelpOutline, {
+      className: "".concat(classes.tooltipIcon, " ").concat(styles.tooltipIcon)
+    })))) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/isValidElement(outsideIcon) && /*#__PURE__*/React.createElement("div", {
+      className: styles.iconContainer
+    }, outsideIcon), TextInput));
+  }
+}
+UTTextInput.propTypes = {
+  actionDataTestId: string,
+  adornmentInside: bool,
+  autofocus: bool,
+  bigInput: bool,
+  captionLabel: string,
+  classes: objectOf(string),
+  containerClassName: string,
+  dataTestId: string,
+  disabled: bool,
+  field: object,
+  helperTextDataTestId: string,
+  id: string,
+  input: inputPropTypes.isRequired,
+  inputClassName: string,
+  inputObjectKey: string,
+  label: string,
+  labelDataTestId: string,
+  labelRootClassName: string,
+  meta: metaPropTypes,
+  onChangeText: func,
+  PasswordInvisibleIcon: elementType,
+  PasswordVisibleIcon: elementType,
+  placeholder: string,
+  preventEnterSubmit: bool,
+  preventFocus: bool,
+  tippyProps: object,
+  tooltip: string,
+  tooltipContentDataTestId: string,
+  tooltipIconDataTestId: string,
+  type: string,
+  variant: string
+};
+UTTextInput.defaultProps = {
+  adornmentInside: false,
+  autofocus: false,
+  classes: {},
+  meta: {},
+  onChangeText: val => val,
+  PasswordInvisibleIcon: VisibilityOff,
+  PasswordVisibleIcon: Visibility,
+  preventEnterSubmit: false
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTTextInput);