@widergy/energy-ui 3.24.0 → 3.26.0

package/dist/components/UTCard/index.js

@@ -56,9 +56,10 @@ class UTCard extends _react.PureComponent {
       classes: themeClasses,
       classNames,
       CustomFooter,
-      expandableIconProps,
+      dataTestId,
       ExpandedIcon,
       expandText,
+      expandableIconProps,
       flat,
       footer,
       header,
@@ -82,11 +83,13 @@ class UTCard extends _react.PureComponent {
     });
     return !isCollapsible ? /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(classes.base, " ").concat(flat && classes.flat, " ").concat(!horizontal && _stylesModule.default.column, " ").concat(classes.base),
+      "data-testid": dataTestId,
       style: style
     }, header && /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.headerContent
     }, header), children, CustomFooter ? /*#__PURE__*/_react.default.createElement(CustomFooter, null) : Footer) : /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(classes.base, " ").concat(flat && classes.flat, " ").concat(_stylesModule.default.column),
+      "data-testid": dataTestId,
       style: style
     }, /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
       onClick: this.handleOnPress,
@@ -118,9 +121,10 @@ UTCard.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   CustomFooter: (0, _propTypes.oneOfType)([_propTypes.element, _propTypes.func]),
-  expandableIconProps: _propTypes.object,
+  dataTestId: _propTypes.string,
   ExpandedIcon: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element]),
   expandText: _propTypes.string,
+  expandableIconProps: _propTypes.object,
   flat: _propTypes.bool,
   footer: _types.cardActionsTypes.footer,
   header: _types.cardActionsTypes.header,

package/dist/components/UTCheckbox/index.js

@@ -36,6 +36,7 @@ const UTCheckbox = _ref => {
     classes: themeClasses = {},
     classNames,
     color = 'primary',
+    checkboxDataTestId,
     CustomCheckedIcon = Checked,
     customRowLabel: CustomRowLabel,
     CustomUncheckedIcon = _ref2 => {
@@ -51,6 +52,7 @@ const UTCheckbox = _ref => {
     input,
     item,
     label,
+    labelDataTestId,
     labelProps = {},
     meta,
     onChange,
@@ -82,6 +84,9 @@ const UTCheckbox = _ref => {
       checkedIcon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomCheckedIcon, {
         className: classes.checkedIcon
       }),
+      inputProps: {
+        'data-testid': checkboxDataTestId
+      },
       icon: useCustomIcons && /*#__PURE__*/_react.default.createElement(CustomUncheckedIcon, {
         className: classes.uncheckedIcon
       }),
@@ -96,6 +101,7 @@ const UTCheckbox = _ref => {
       item: item
     }) : /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: classes.label,
+      dataTestId: labelDataTestId,
       variant: "small",
       withMarkdown: true
     }, labelProps), label),
@@ -115,6 +121,7 @@ UTCheckbox.propTypes = {
   }),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   color: _propTypes.string,
+  checkboxDataTestId: _propTypes.string,
   CustomCheckedIcon: _propTypes.node,
   customRowLabel: (0, _propTypes.oneOfType)([_propTypes.func, _propTypes.element, _propTypes.string]),
   CustomUncheckedIcon: _propTypes.node,
@@ -123,6 +130,7 @@ UTCheckbox.propTypes = {
   input: _formTypes.inputPropTypes,
   item: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.object]),
   label: (0, _propTypes.oneOfType)([_propTypes.number, _propTypes.string]),
+  labelDataTestId: _propTypes.string,
   labelProps: _propTypes.object,
   meta: _formTypes.metaPropTypes,
   onChange: _propTypes.func,

package/dist/components/UTCuit/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 var _form = require("@widergy/web-utils/lib/form");
+var _propTypes = require("prop-types");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _formTypes = require("../../types/formTypes");
@@ -93,55 +94,75 @@ class UTCuit extends _react.PureComponent {
       document,
       verificationCode
     } = this.state;
+    const {
+      documentDataTestId,
+      prefixDataTestId,
+      verificationCodeDataTestId
+    } = this.props;
     this.handleFocus();
     return /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.container
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.fieldContainer
     }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      className: _stylesModule.default.fieldCuit,
-      name: "prefix",
-      label: this.props.field.label,
       autoComplete: "off",
-      placeholder: "XX",
+      autoFocus: this.props.field.configuration.auto_focus,
+      className: _stylesModule.default.fieldCuit,
+      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
       InputLabelProps: {
         shrink: this.props.input.value !== 0
       },
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': prefixDataTestId
+        }
+      },
+      label: this.props.field.label,
+      margin: "none",
+      name: "prefix",
       onChange: this.handleOnChangePrefix,
       onKeyPress: this.handleKeyPress,
-      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
-      value: prefix,
-      InputProps: "input",
-      fullWidth: true,
-      margin: "none",
-      autoFocus: this.props.field.configuration.auto_focus
+      placeholder: "XX",
+      value: prefix
     }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      name: "document",
-      className: _stylesModule.default.fieldDocument,
       autoComplete: "off",
-      placeholder: "XXXXXXXX",
-      onKeyPress: this.handleKeyPress,
+      className: _stylesModule.default.fieldDocument,
       disabled: this.props.field.configuration.disable_document,
       error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
-      value: document,
-      onChange: this.handleOnChangeDocument,
       fullWidth: true,
-      InputProps: "text",
+      InputProps: {
+        type: 'text',
+        inputProps: {
+          'data-testid': documentDataTestId
+        }
+      },
+      inputRef: this.documentRef,
       margin: "none",
-      inputRef: this.documentRef
+      name: "document",
+      onChange: this.handleOnChangeDocument,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "XXXXXXXX",
+      value: document
     }), /*#__PURE__*/_react.default.createElement(_TextField.default, {
       autoComplete: "off",
       className: _stylesModule.default.fieldCuit,
-      name: "verificationCode",
-      placeholder: "X",
-      fullWidth: true,
-      onKeyPress: this.handleKeyPress,
       error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
-      onChange: this.handleOnChangeVerificationCode,
-      value: verificationCode,
-      InputProps: "input",
+      fullWidth: true,
+      inputRef: this.verificationCodeRef,
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': verificationCodeDataTestId
+        }
+      },
       margin: "none",
-      inputRef: this.verificationCodeRef
+      name: "verificationCode",
+      onChange: this.handleOnChangeVerificationCode,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "X",
+      value: verificationCode
     })), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       variant: "small",
       colorTheme: "error"
@@ -149,8 +170,11 @@ class UTCuit extends _react.PureComponent {
   }
 }
 UTCuit.propTypes = {
+  documentDataTestId: _propTypes.string,
+  field: _formTypes.fieldType,
   input: _formTypes.inputPropTypes,
   meta: _formTypes.metaPropTypes,
-  field: _formTypes.fieldType
+  prefixDataTestId: _propTypes.string,
+  verificationCodeDataTestId: _propTypes.string
 };
 var _default = exports.default = (0, _WithTheme.default)(null, _theme.retrieveMuiTheme)(UTCuit);

package/dist/components/UTGoogleAutocomplete/index.js

@@ -25,6 +25,7 @@ const UTGoogleAutocomplete = _ref => {
   let {
     alert,
     classes,
+    dataTestId,
     detailErrorLabel = 'Hubo un error al intentar recuperar el detalle de la dirección seleccionada',
     inputProps,
     minChar = 3,
@@ -90,6 +91,7 @@ const UTGoogleAutocomplete = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_UTAlert.default, {
     content: alert
   }), /*#__PURE__*/_react.default.createElement(_UTTextInput.default, _extends({
+    dataTestId: dataTestId,
     input: {
       value: searchInputValue,
       onChange: handleInputChange

package/dist/components/UTLabel/index.js

@@ -22,8 +22,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const UTLabel = _ref => {
   let {
     children,
-    classes: theme,
     className,
+    classes: theme,
+    dataTestId,
     markdownRenderers,
     title,
     variant,
@@ -36,6 +37,7 @@ const UTLabel = _ref => {
   }), [theme, className]);
   return /*#__PURE__*/_react.default.createElement(_UTSkeleton.default, null, /*#__PURE__*/_react.default.createElement(Component, {
     className: "".concat(classes.root, " ").concat(classes.className).trim(),
+    "data-testid": dataTestId,
     title: title
   }, withMarkdown && /*#__PURE__*/_react.default.createElement(_reactMarkdown.default, {
     children: children,
@@ -51,6 +53,7 @@ UTLabel.defaultProps = _constants.DEFAULT_PROPS;
 UTLabel.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
+  dataTestId: _propTypes.string,
   markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
   title: _propTypes.string,
   variant: _propTypes.string,

package/dist/components/UTOnboarding/index.js

@@ -21,12 +21,14 @@ const UTOnboarding = _ref => {
   var _steps$currentStep$is, _steps$currentStep, _steps$currentStep$hi, _steps$currentStep2, _steps$currentStep3, _steps$currentStep4;
   let {
     classes: themeClasses,
+    closeButtonDataTestId,
     classNames,
     enabled,
     handleComplete,
     handleOnClose,
     options,
     steps,
+    titleDataTestId,
     variant
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [themeClasses, classNames]) || {};
@@ -35,6 +37,17 @@ const UTOnboarding = _ref => {
   const currentStepIsSuggestion = (_steps$currentStep$is = (_steps$currentStep = steps[currentStep]) === null || _steps$currentStep === void 0 ? void 0 : _steps$currentStep.isSuggestion) !== null && _steps$currentStep$is !== void 0 ? _steps$currentStep$is : false;
   const hideFooter = (_steps$currentStep$hi = (_steps$currentStep2 = steps[currentStep]) === null || _steps$currentStep2 === void 0 ? void 0 : _steps$currentStep2.hideFooter) !== null && _steps$currentStep$hi !== void 0 ? _steps$currentStep$hi : false;
   const totalSteps = steps.length;
+
+  // This timeout is here only to get the querySelectors out of the call-stack order, giving the Step component time to render every child inside. This
+  // is necessary to find the html element searched by the selectors.
+  setTimeout(() => {
+    var _skipButton$attribute, _stepTitle$attributes, _skipButton$setAttrib, _stepTitle$setAttribu;
+    const skipButton = document.querySelector('.introjs-skipbutton');
+    const stepTitle = document.querySelector('.introjs-tooltip-title');
+    if (skipButton !== null && skipButton !== void 0 && (_skipButton$attribute = skipButton.attributes) !== null && _skipButton$attribute !== void 0 && _skipButton$attribute['data-testid'] && stepTitle !== null && stepTitle !== void 0 && (_stepTitle$attributes = stepTitle.attributes) !== null && _stepTitle$attributes !== void 0 && _stepTitle$attributes['data-testid']) return;
+    skipButton === null || skipButton === void 0 || (_skipButton$setAttrib = skipButton.setAttribute) === null || _skipButton$setAttrib === void 0 || _skipButton$setAttrib.call(skipButton, 'data-testid', closeButtonDataTestId);
+    stepTitle === null || stepTitle === void 0 || (_stepTitle$setAttribu = stepTitle.setAttribute) === null || _stepTitle$setAttribu === void 0 || _stepTitle$setAttribu.call(stepTitle, 'data-testid', titleDataTestId);
+  }, 1);
   (0, _react.useEffect)(() => {
     setLoading(false);
   }, [steps]);
@@ -113,11 +126,13 @@ const UTOnboarding = _ref => {
 UTOnboarding.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  closeButtonDataTestId: _propTypes.string,
   enabled: _propTypes.bool,
   handleComplete: _propTypes.func,
   handleOnClose: _propTypes.func,
   options: _propTypes.object,
   steps: _propTypes.array,
+  titleDataTestId: _propTypes.string,
   variant: _propTypes.string
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTOnboarding);

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

@@ -19,6 +19,7 @@ const UTPasswordField = _ref => {
     field,
     input,
     classes = {},
+    dataTestId,
     ValidationPassedIcon,
     ValidationFailedIcon,
     NoValueIcon,
@@ -40,6 +41,7 @@ const UTPasswordField = _ref => {
     validationContainer
   } = classes;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, _extends({
+    dataTestId: dataTestId,
     field: field,
     input: input,
     meta: !showValidations ? meta : undefined,
@@ -70,6 +72,7 @@ UTPasswordField.propTypes = {
   field: _formTypes.fieldType,
   input: _formTypes.inputPropTypes,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
   variant: _propTypes.string,
   ValidationPassedIcon: _propTypes.elementType,
   ValidationFailedIcon: _propTypes.elementType,

package/dist/components/UTPhoneInput/index.js

@@ -4,284 +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 _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _CheckCircleOutline = _interopRequireDefault(require("@material-ui/icons/CheckCircleOutline"));
-var _form = require("@widergy/web-utils/lib/form");
-var _array = require("@widergy/web-utils/lib/array");
-var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _formTypes = require("../../types/formTypes");
-var _classesUtils = require("../../utils/classesUtils");
-var _theme = require("./theme");
-var _constants = require("./constants");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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); }
-class UTPhoneInput extends _react.PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "cleanField", () => this.setState({
-      areaCode: '',
-      phoneNumber: ''
-    }));
-    _defineProperty(this, "handleInitializeField", () => {
-      let areaCode;
-      let phoneNumber;
-      const {
-        value
-      } = this.props.input;
-      if (typeof value === 'object' && this.props.childKeys) {
-        areaCode = value[this.props.childKeys[0]];
-        areaCode = typeof areaCode === 'number' ? areaCode.toString() : areaCode;
-        phoneNumber = value[this.props.childKeys[1]];
-        phoneNumber = typeof phoneNumber === 'number' ? phoneNumber.toString() : phoneNumber;
-      } else {
-        const stringValue = value.toString();
-        areaCode = stringValue.slice(0, stringValue.indexOf('-'));
-        phoneNumber = stringValue.slice(stringValue.indexOf('-') + 1);
-      }
-      this.setState({
-        initialized: true
-      });
-      this.setState({
-        areaCode,
-        phoneNumber
-      }, () => this.handleValidateAreaCode(this.state.areaCode));
-    });
-    _defineProperty(this, "handleValidateAreaCode", areaCode => {
-      if (areaCode.slice(0, 1) === '0') {
-        this.setState({
-          error: this.props.errors.codeWithZero,
-          city: undefined
-        });
-      } else {
-        const code = _constants.AREA_CODES.find(element => element.code === areaCode);
-        const error = areaCode.length && !code && this.props.errors.invalidCode;
-        this.setState({
-          error,
-          city: code && code.city
-        }, () => {
-          if (this.state.city && !error) this.handleValidatePhoneNumber(this.state.phoneNumber);
-        });
-      }
-    });
-    _defineProperty(this, "handleCleanPhoneNumber", () => this.setState({
-      phoneNumber: ''
-    }));
-    _defineProperty(this, "handleValidatePhoneNumber", phoneNumber => {
-      if (phoneNumber.slice(0, 1) === '0') {
-        this.setState({
-          error: this.props.errors.phoneWithZero
-        });
-      } else if (phoneNumber.slice(0, 2) === '15') {
-        this.setState({
-          error: this.props.errors.phoneWithFifteen
-        });
-      } else if (phoneNumber.length === 0) {
-        this.setState({
-          error: this.props.errors.numberNotEmpty
-        });
-      } else this.setState({
-        error: undefined
-      });
-    });
-    _defineProperty(this, "handleChangeAreaCode", event => {
-      this.setState({
-        initialized: true
-      });
-      const areaCode = event.target.value.slice(0, 4);
-      if (!areaCode) {
-        this.setState({
-          areaCode
-        }, () => {
-          this.handleChange("".concat(this.state.areaCode).concat(this.state.phoneNumber));
-        });
-      } else {
-        this.setState({
-          areaCode
-        }, () => {
-          this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
-        });
-      }
-      this.handleCleanPhoneNumber();
-      this.handleValidateAreaCode(areaCode);
-    });
-    _defineProperty(this, "handleChangePhone", event => {
-      const phoneNumber = event.target.value.slice(0, 10 - this.state.areaCode.length);
-      this.setState({
-        phoneNumber
-      }, () => {
-        this.handleChange("".concat(this.state.areaCode, "-").concat(this.state.phoneNumber));
-      });
-      this.handleValidatePhoneNumber(phoneNumber);
-    });
-    _defineProperty(this, "handleKeyPress", event => {
-      const regexp = /[0-9]+/g;
-      if (!regexp.test(event.key)) {
-        event.preventDefault();
-      }
-    });
-    _defineProperty(this, "handleChange", initialValue => {
-      let value = initialValue;
-      const {
-        childKeys,
-        field,
-        input
-      } = this.props;
-      if (childKeys) {
-        const splittedPhone = value.split('-');
-        value = {
-          ...(!(0, _array.isEmpty)(splittedPhone[0]) && {
-            [childKeys[0]]: splittedPhone[0]
-          }),
-          ...(!(0, _array.isEmpty)(splittedPhone[1]) && {
-            [childKeys[1]]: splittedPhone[1]
-          })
-        };
-      } else if (field.configuration && field.configuration.without_dash) {
-        value = initialValue.replace('-', '');
-      }
-      input.onChange(value);
-    });
-    this.state = {
-      areaCode: '',
-      phoneNumber: '',
-      city: null,
-      initialized: false
-    };
-  }
-  componentDidMount() {
-    if (this.props.input && this.props.input.value && !this.state.initialized) {
-      this.handleInitializeField();
-    }
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.input && this.props.input.value && !this.state.areaCode && !this.state.initialized) {
-      this.handleInitializeField();
-    }
-    if (this.state.initialized && prevProps.input && prevProps.input.value && this.props.input && (!this.props.input.value || this.props.input.value.length === 0)) {
-      this.cleanField();
-    }
-  }
-  render() {
-    var _field$configuration, _field$configuration2;
-    const {
-      areaCodeFieldProps,
-      phoneNumberFieldProps,
-      field,
-      input,
-      disabled,
-      meta,
-      classes: themeClasses = {},
-      placeholder,
-      label,
-      variant,
-      inputClassName,
-      classNames
-    } = this.props;
-    const {
-      areaCode,
-      city,
-      error,
-      phoneNumber
-    } = this.state;
-    const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.container, " ").concat(this.props.style)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.inputContainer
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.areaCode, " ").concat(_stylesModule.default["".concat(variant, "AreaCode")], " ").concat(classes.areaCodeContainer)
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-      name: "area_code",
-      type: "tel",
-      label: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.area_code_label) || _constants.AREA_CODE_LABEL,
-      placeholder: ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.area_code_placeholder) || _constants.AREA_CODE_PLACEHOLDER,
-      autoComplete: "off",
-      fullWidth: true,
-      margin: "none",
-      onKeyPress: this.handleKeyPress,
-      onFocus: this.handleFocus,
-      onChange: this.handleChangeAreaCode,
-      onBlur: this.handleBlur,
-      value: areaCode,
-      error: Boolean(error || (0, _form.shouldShowErrors)(meta)),
-      disabled: disabled,
-      variant: variant,
-      InputProps: {
-        classes: {
-          input: inputClassName
-        }
-      }
-    }, areaCodeFieldProps)), /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
-      stringContentClassName: classes.tooltip,
-      content: city || ' '
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(_stylesModule.default.icon, "  ").concat(_stylesModule.default["".concat(variant, "Icon")], " ").concat(city && _stylesModule.default.showCheckedIcon)
-    }, /*#__PURE__*/_react.default.createElement(_CheckCircleOutline.default, {
-      tabIndex: "-1",
-      className: "".concat(_stylesModule.default.checkedIcon, " ").concat(classes.areaCodeIcon)
-    })))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.phoneNumber, " ").concat(classes.phoneNumberContainer)
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({
-      name: "phone_number",
-      type: "tel",
-      margin: "none",
-      placeholder: placeholder,
-      label: label,
-      onKeyPress: this.handleKeyPress,
-      autoComplete: "off",
-      fullWidth: true,
-      error: Boolean(error || (0, _form.shouldShowErrors)(meta)),
-      onFocus: input.onFocus,
-      onChange: this.handleChangePhone,
-      disabled: !city || disabled,
-      value: phoneNumber,
-      variant: variant,
-      InputProps: {
-        classes: {
-          input: inputClassName
-        }
-      }
-    }, phoneNumberFieldProps)))), (error || (0, _form.shouldShowErrors)(meta)) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      colorTheme: "error",
-      variant: "small"
-    }, error || meta.error));
-  }
-}
-UTPhoneInput.propTypes = {
-  input: _formTypes.inputPropTypes,
-  meta: _formTypes.metaPropTypes,
-  placeholder: _propTypes.string,
-  disabled: _propTypes.bool,
-  label: _propTypes.string,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  errors: (0, _propTypes.shape)({
-    codeWithZero: _propTypes.string,
-    invalidCode: _propTypes.string,
-    phoneWithFifteen: _propTypes.string,
-    phoneWithZero: _propTypes.string,
-    numberNotEmpty: _propTypes.string
-  }),
-  childKeys: (0, _propTypes.arrayOf)(_propTypes.string),
-  field: _formTypes.fieldType,
-  variant: _propTypes.string,
-  inputClassName: _propTypes.string,
-  areaCodeFieldProps: _propTypes.object,
-  phoneNumberFieldProps: _propTypes.object
+const UTPhoneInput = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
 };
-UTPhoneInput.defaultProps = {
-  classes: {},
-  areaCodeFieldProps: {},
-  phoneNumberFieldProps: {}
+UTPhoneInput.propTypes = {
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle, _theme.retrieveMuiTheme)(UTPhoneInput);
+var _default = exports.default = UTPhoneInput;