@widergy/energy-ui 3.22.4 → 3.23.0

package/dist/components/UTTextArea/versions/V0/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _normalize = require("@widergy/web-utils/lib/normalize");
+var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _formTypes = require("../../../../types/formTypes");
+var _constants = require("./constants");
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTTextArea = _ref => {
+  let {
+    classes,
+    classNames = {},
+    disabled,
+    field,
+    HelpIcon,
+    inputProps = {},
+    onBlur,
+    onChange,
+    onFocus,
+    placeholder,
+    title = '',
+    tooltip,
+    value
+  } = _ref;
+  const {
+    container,
+    icon,
+    textarea,
+    label,
+    textAreaContainer
+  } = classNames;
+  const {
+    character_count_limit: characterCountLimit
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+  const handleOnChange = _ref2 => {
+    let {
+      target
+    } = _ref2;
+    return onChange(characterCountLimit ? (0, _normalize.maxLength)(characterCountLimit)(target.value) : target.value);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.titleContainer
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(label, " ").concat(_stylesModule.default.label),
+    withMarkdown: true
+  }, title)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.textAreaContainer, " ").concat(textAreaContainer)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.componentWrapper
+  }, /*#__PURE__*/_react.default.createElement("textarea", _extends({}, inputProps, {
+    className: "".concat(_stylesModule.default.textarea, " ").concat(textarea, " ").concat(classes.textarea),
+    onChange: handleOnChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    value: value,
+    disabled: disabled,
+    placeholder: placeholder
+  })), characterCountLimit && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.characterCount,
+    colorTheme: value.length === characterCountLimit ? 'error' : value.length >= characterCountLimit * _constants.LIMIT_WARNING_FACTOR ? 'warning' : 'dark'
+  }, "".concat(value.length, "/").concat(characterCountLimit))), tooltip && /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    content: tooltip,
+    tippyProps: _constants.tippyProps
+  }, /*#__PURE__*/_react.default.createElement("div", null, HelpIcon || /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+    className: "".concat(icon, " ").concat(classes.icon)
+  })))));
+};
+UTTextArea.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.shape)({
+    container: _propTypes.string,
+    icon: _propTypes.string,
+    label: _propTypes.string,
+    textarea: _propTypes.string,
+    textAreaContainer: _propTypes.string
+  }),
+  disabled: _propTypes.bool,
+  field: _formTypes.fieldType,
+  HelpIcon: _propTypes.elementType,
+  inputProps: _formTypes.inputPropTypes,
+  onBlur: _propTypes.func,
+  onChange: _propTypes.func,
+  onFocus: _propTypes.func,
+  placeholder: _propTypes.string,
+  title: _propTypes.string,
+  tooltip: _propTypes.string,
+  value: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTTextArea);

package/dist/components/UTTextArea/{theme.js → versions/V0/theme.js}

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   var _theme$UTTextArea, _theme$UTTextArea2, _theme$UTTextArea3, _theme$UTTextArea4, _theme$Fonts, _theme$UTTextArea5, _theme$UTTextArea6, _theme$UTTextArea7, _theme$UTTextArea8, _theme$UTTextArea9, _theme$UTTextArea10, _theme$UTTextArea11, _theme$UTTextArea12, _theme$UTTextArea13, _theme$UTTextArea14, _theme$UTTextArea15, _theme$UTTextArea16, _theme$UTTextArea17, _theme$UTTextArea18, _theme$UTTextArea19, _theme$UTTextArea20;

package/dist/components/UTTextArea/versions/V1/README.md

@@ -0,0 +1,33 @@
+# UTTextArea
+
+## Description
+
+`UTTextArea` is a multi-line text input component that extends `UTTextInput`. It is pre-configured to handle multiple rows of text and automatically displays the character count.
+
+## Props
+
+`UTTextArea` inherits all the props from `UTTextInput` and predefines some of them for convenience.
+
+| Name               | Type   | Default | Description                                                       |
+| ------------------ | ------ | ------- | ----------------------------------------------------------------- |
+| maxRows            | number | 4       | The number of rows the text area will display.                    |
+| showCharacterCount | bool   | true    | Whether to display the character count. Always `true` by default. |
+| ...                | ...    | ...     | Inherits all other props from `UTTextInput`.                      |
+
+## Usage
+
+### Basic Example
+
+```javascript
+<UTTextArea placeholder="Enter your text here..." />
+```
+
+### Example with Custom Rows
+
+```javascript
+<UTTextArea maxRows={6} placeholder="Enter a longer text here..." />
+```
+
+## Notes
+
+For more detailed information on inherited props, refer to the documentation for `UTTextInput`.

package/dist/components/UTTextArea/versions/V1/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _V = require("../../../UTTextInput/versions/V1");
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const UTTextArea = props => /*#__PURE__*/_react.default.createElement(_UTTextInput.default, _extends({
+  showCharacterCount: true,
+  maxRows: 4,
+  version: "V1"
+}, props));
+UTTextArea.propTypes = _V.propTypes;
+var _default = exports.default = UTTextArea;

package/dist/components/UTTextInput/index.js

@@ -4,208 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
-var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
-var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
-var _form = require("@widergy/web-utils/lib/form");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
-var _formTypes = require("../../types/formTypes");
-var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-var _theme = require("./theme");
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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); }
-const preventDefault = event => {
-  if (event.key === 'Enter') {
-    event.preventDefault();
-  }
+const UTTextInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
-class UTTextInput extends _react.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleClickShowPassword", () => {
-      this.setState(prevState => ({
-        visible: !prevState.visible
-      }));
-    });
-    this.state = {
-      visible: false
-    };
-  }
-  render() {
-    const {
-      adornmentInside,
-      autofocus,
-      bigInput,
-      captionLabel,
-      classes,
-      containerClassName,
-      disabled,
-      field,
-      id,
-      input,
-      inputClassName,
-      inputObjectKey,
-      label,
-      labelRootClassName,
-      meta,
-      onChangeText,
-      PasswordInvisibleIcon,
-      PasswordVisibleIcon,
-      placeholder,
-      preventEnterSubmit,
-      preventFocus,
-      tippyProps,
-      tooltip,
-      type,
-      variant,
-      ...others
-    } = this.props;
-    const handleChange = event => {
-      if (preventFocus) event.preventDefault();
-      input.onChange(onChangeText(event.target.value));
-    };
-    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 === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
-      Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
-      onClick: this.handleClickShowPassword,
-      variant: "text"
-    }) : adornment;
-    const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
-    const errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
-    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
-    const TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-      id: fieldId,
-      placeholder: placeholder,
-      variant: variant,
-      label: Icon ? /*#__PURE__*/_react.default.createElement("div", {
-        className: classes.labelContainer
-      }, /*#__PURE__*/_react.default.createElement(Icon, {
-        className: classes.labelIcon
-      }), /*#__PURE__*/_react.default.createElement("div", null, label)) : label,
-      onKeyPress: preventEnterSubmit ? preventDefault : undefined,
-      error: (0, _form.shouldShowErrors)(meta),
-      FormHelperTextProps: {
-        component: 'div'
-      },
-      helperText: errorMessage || helperText ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-        className: _stylesModule.default.helperText,
-        colorTheme: errorMessage ? 'error' : 'gray',
-        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,
-        endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
-          position: "end",
-          className: "".concat(adornmentInside && _stylesModule.default.adornmentInside)
-        }, endAction),
-        type: type === _constants.INPUT_TYPES.PASSWORD ? !this.state.visible ? _constants.INPUT_TYPES.PASSWORD : _constants.INPUT_TYPES.TEXT : type || _constants.INPUT_TYPES.TEXT,
-        classes: {
-          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === _constants.INPUT_TYPES.NUMBER && _stylesModule.default.numberType, "\n              ").concat(inputClassName, "\n            ")
-        }
-      },
-      InputLabelProps: {
-        classes: {
-          root: labelRootClassName
-        },
-        htmlFor: fieldId
-      }
-    }, textFieldPropsToForward));
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && _stylesModule.default.containerWithTooltip)
-    }, tooltip ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, TextInput, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
-      tippyProps: tippyProps,
-      content: tooltip
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _stylesModule.default.tooltipIconContainer
-    }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
-      className: "".concat(classes.tooltipIcon, " ").concat(_stylesModule.default.tooltipIcon)
-    })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/(0, _react.isValidElement)(outsideIcon) && /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.iconContainer
-    }, outsideIcon), TextInput));
-  }
-}
 UTTextInput.propTypes = {
-  adornmentInside: _propTypes.bool,
-  autofocus: _propTypes.bool,
-  bigInput: _propTypes.bool,
-  captionLabel: _propTypes.string,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  containerClassName: _propTypes.string,
-  disabled: _propTypes.bool,
-  field: _propTypes.object,
-  id: _propTypes.string,
-  input: _formTypes.inputPropTypes.isRequired,
-  inputClassName: _propTypes.string,
-  inputObjectKey: _propTypes.string,
-  label: _propTypes.string,
-  labelRootClassName: _propTypes.string,
-  meta: _formTypes.metaPropTypes,
-  onChangeText: _propTypes.func,
-  PasswordInvisibleIcon: _propTypes.elementType,
-  PasswordVisibleIcon: _propTypes.elementType,
-  placeholder: _propTypes.string,
-  preventEnterSubmit: _propTypes.bool,
-  preventFocus: _propTypes.bool,
-  tippyProps: _propTypes.object,
-  tooltip: _propTypes.string,
-  type: _propTypes.string,
-  variant: _propTypes.string
-};
-UTTextInput.defaultProps = {
-  adornmentInside: false,
-  autofocus: false,
-  classes: {},
-  meta: {},
-  onChangeText: val => val,
-  PasswordInvisibleIcon: _VisibilityOff.default,
-  PasswordVisibleIcon: _Visibility.default,
-  preventEnterSubmit: false
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTTextInput);
+var _default = exports.default = UTTextInput;

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

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+var _VisibilityOff = _interopRequireDefault(require("@material-ui/icons/VisibilityOff"));
+var _HelpOutline = _interopRequireDefault(require("@material-ui/icons/HelpOutline"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+var _form = require("@widergy/web-utils/lib/form");
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
+var _formTypes = require("../../../../types/formTypes");
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _constants = require("./constants");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _theme = require("./theme");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const preventDefault = event => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+  }
+};
+class UTTextInput extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleClickShowPassword", () => {
+      this.setState(prevState => ({
+        visible: !prevState.visible
+      }));
+    });
+    this.state = {
+      visible: false
+    };
+  }
+  render() {
+    const {
+      adornmentInside,
+      autofocus,
+      bigInput,
+      captionLabel,
+      classes,
+      containerClassName,
+      disabled,
+      field,
+      id,
+      input,
+      inputClassName,
+      inputObjectKey,
+      label,
+      labelRootClassName,
+      meta,
+      onChangeText,
+      PasswordInvisibleIcon,
+      PasswordVisibleIcon,
+      placeholder,
+      preventEnterSubmit,
+      preventFocus,
+      tippyProps,
+      tooltip,
+      type,
+      variant,
+      ...others
+    } = this.props;
+    const handleChange = event => {
+      if (preventFocus) event.preventDefault();
+      input.onChange(onChangeText(event.target.value));
+    };
+    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 === _constants.INPUT_TYPES.PASSWORD ? /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      Icon: this.state.visible ? PasswordVisibleIcon : PasswordInvisibleIcon,
+      onClick: this.handleClickShowPassword,
+      variant: "text"
+    }) : adornment;
+    const value = inputObjectKey ? input.value[inputObjectKey] : input.value;
+    const errorMessage = (0, _form.shouldShowErrors)(meta) && meta.error || captionLabel || '';
+    const fieldId = id || field !== null && field !== void 0 && field.id ? "".concat(id || field.id) : undefined;
+    const TextInput = /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
+      id: fieldId,
+      placeholder: placeholder,
+      variant: variant,
+      label: Icon ? /*#__PURE__*/_react.default.createElement("div", {
+        className: classes.labelContainer
+      }, /*#__PURE__*/_react.default.createElement(Icon, {
+        className: classes.labelIcon
+      }), /*#__PURE__*/_react.default.createElement("div", null, label)) : label,
+      onKeyPress: preventEnterSubmit ? preventDefault : undefined,
+      error: (0, _form.shouldShowErrors)(meta),
+      FormHelperTextProps: {
+        component: 'div'
+      },
+      helperText: errorMessage || helperText ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+        className: _stylesModule.default.helperText,
+        colorTheme: errorMessage ? 'error' : 'gray',
+        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,
+        endAdornment: endAction && /*#__PURE__*/_react.default.createElement(_InputAdornment.default, {
+          position: "end",
+          className: "".concat(adornmentInside && _stylesModule.default.adornmentInside)
+        }, endAction),
+        type: type === _constants.INPUT_TYPES.PASSWORD ? !this.state.visible ? _constants.INPUT_TYPES.PASSWORD : _constants.INPUT_TYPES.TEXT : type || _constants.INPUT_TYPES.TEXT,
+        classes: {
+          input: "\n              ".concat(bigInput && classes.bigInput, "\n              ").concat(type === _constants.INPUT_TYPES.NUMBER && _stylesModule.default.numberType, "\n              ").concat(inputClassName, "\n            ")
+        }
+      },
+      InputLabelProps: {
+        classes: {
+          root: labelRootClassName
+        },
+        htmlFor: fieldId
+      }
+    }, textFieldPropsToForward));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(classes.container, " ").concat(containerClassName, " ").concat(tooltip && _stylesModule.default.containerWithTooltip)
+    }, tooltip ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, TextInput, /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      tippyProps: tippyProps,
+      content: tooltip
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: _stylesModule.default.tooltipIconContainer
+    }, /*#__PURE__*/_react.default.createElement(_HelpOutline.default, {
+      className: "".concat(classes.tooltipIcon, " ").concat(_stylesModule.default.tooltipIcon)
+    })))) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/(0, _react.isValidElement)(outsideIcon) && /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.iconContainer
+    }, outsideIcon), TextInput));
+  }
+}
+UTTextInput.propTypes = {
+  adornmentInside: _propTypes.bool,
+  autofocus: _propTypes.bool,
+  bigInput: _propTypes.bool,
+  captionLabel: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  containerClassName: _propTypes.string,
+  disabled: _propTypes.bool,
+  field: _propTypes.object,
+  id: _propTypes.string,
+  input: _formTypes.inputPropTypes.isRequired,
+  inputClassName: _propTypes.string,
+  inputObjectKey: _propTypes.string,
+  label: _propTypes.string,
+  labelRootClassName: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
+  onChangeText: _propTypes.func,
+  PasswordInvisibleIcon: _propTypes.elementType,
+  PasswordVisibleIcon: _propTypes.elementType,
+  placeholder: _propTypes.string,
+  preventEnterSubmit: _propTypes.bool,
+  preventFocus: _propTypes.bool,
+  tippyProps: _propTypes.object,
+  tooltip: _propTypes.string,
+  type: _propTypes.string,
+  variant: _propTypes.string
+};
+UTTextInput.defaultProps = {
+  adornmentInside: false,
+  autofocus: false,
+  classes: {},
+  meta: {},
+  onChangeText: val => val,
+  PasswordInvisibleIcon: _VisibilityOff.default,
+  PasswordVisibleIcon: _Visibility.default,
+  preventEnterSubmit: false
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTTextInput);

package/dist/components/UTTextInput/{styles.module.scss → versions/V0/styles.module.scss}

@@ -1,5 +1,5 @@
 // sass-lint:disable no-vendor-prefixes
-@import '../../scss/variables/colors.module.scss';
+@import '../../../../scss/variables/colors.module.scss';
 
 .iconContainer {
   align-items: center;

package/dist/components/UTTextInput/{theme.js → versions/V0/theme.js}

@@ -7,7 +7,7 @@ exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
 var _merge = _interopRequireDefault(require("lodash/merge"));
-var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const retrieveStyle = _ref => {
   let {