@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,290 @@
+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 React, { PureComponent } from 'react';
+import { bool, string, objectOf, shape, object, arrayOf } from 'prop-types';
+import TextField from '@material-ui/core/TextField';
+import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import UTTooltip from '../../../UTTooltip';
+import UTLabel from '../../../UTLabel';
+import WithTheme from '../../../WithTheme';
+import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { AREA_CODES, AREA_CODE_PLACEHOLDER, AREA_CODE_LABEL } from './constants';
+import styles from './styles.module.scss';
+class UTPhoneInput extends 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 = 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 = {
+          ...(!isEmpty(splittedPhone[0]) && {
+            [childKeys[0]]: splittedPhone[0]
+          }),
+          ...(!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 {
+      areaCodeDataTestId,
+      areaCodeFieldProps,
+      phoneNumberFieldProps,
+      field,
+      input,
+      disabled,
+      meta,
+      classes: themeClasses = {},
+      phoneNumberDataTestId,
+      placeholder,
+      label,
+      variant,
+      inputClassName,
+      classNames
+    } = this.props;
+    const {
+      areaCode,
+      city,
+      error,
+      phoneNumber
+    } = this.state;
+    const classes = mergeClasses(themeClasses, classNames);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.container, " ").concat(this.props.style)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.inputContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.areaCode, " ").concat(styles["".concat(variant, "AreaCode")], " ").concat(classes.areaCodeContainer)
+    }, /*#__PURE__*/React.createElement(TextField, _extends({
+      name: "area_code",
+      type: "tel",
+      label: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.area_code_label) || AREA_CODE_LABEL,
+      placeholder: ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.area_code_placeholder) || 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 || shouldShowErrors(meta)),
+      disabled: disabled,
+      variant: variant,
+      InputProps: {
+        classes: {
+          input: inputClassName
+        },
+        inputProps: {
+          'data-testid': areaCodeDataTestId,
+          'data-keyboard': input !== null && input !== void 0 && input.name ? "areaCode-".concat(input === null || input === void 0 ? void 0 : input.name) : null
+        }
+      }
+    }, areaCodeFieldProps)), /*#__PURE__*/React.createElement(UTTooltip, {
+      stringContentClassName: classes.tooltip,
+      content: city || ' '
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(styles.icon, "  ").concat(styles["".concat(variant, "Icon")], " ").concat(city && styles.showCheckedIcon)
+    }, /*#__PURE__*/React.createElement(CheckCircleOutline, {
+      tabIndex: "-1",
+      className: "".concat(styles.checkedIcon, " ").concat(classes.areaCodeIcon)
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(styles.phoneNumber, " ").concat(classes.phoneNumberContainer)
+    }, /*#__PURE__*/React.createElement(TextField, _extends({
+      name: "phone_number",
+      type: "tel",
+      margin: "none",
+      placeholder: placeholder,
+      label: label,
+      onKeyPress: this.handleKeyPress,
+      autoComplete: "off",
+      fullWidth: true,
+      error: Boolean(error || shouldShowErrors(meta)),
+      onFocus: input.onFocus,
+      onChange: this.handleChangePhone,
+      disabled: !city || disabled,
+      value: phoneNumber,
+      variant: variant,
+      InputProps: {
+        classes: {
+          input: inputClassName
+        },
+        inputProps: {
+          'data-testid': phoneNumberDataTestId,
+          'data-keyboard': input !== null && input !== void 0 && input.name ? "phoneNumber-".concat(input === null || input === void 0 ? void 0 : input.name) : null
+        }
+      }
+    }, phoneNumberFieldProps)))), (error || shouldShowErrors(meta)) && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "error",
+      variant: "small"
+    }, error || meta.error));
+  }
+}
+UTPhoneInput.propTypes = {
+  input: inputPropTypes,
+  meta: metaPropTypes,
+  placeholder: string,
+  disabled: bool,
+  label: string,
+  classes: objectOf(string),
+  classNames: objectOf(string),
+  errors: shape({
+    codeWithZero: string,
+    invalidCode: string,
+    phoneWithFifteen: string,
+    phoneWithZero: string,
+    numberNotEmpty: string
+  }),
+  childKeys: arrayOf(string),
+  field: fieldType,
+  variant: string,
+  inputClassName: string,
+  areaCodeFieldProps: object,
+  phoneNumberFieldProps: object,
+  areaCodeDataTestId: string,
+  phoneNumberDataTestId: string
+};
+UTPhoneInput.defaultProps = {
+  classes: {},
+  areaCodeFieldProps: {},
+  phoneNumberFieldProps: {}
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTPhoneInput);

package/dist/esm/components/UTPhoneInput/versions/V0/styles.module.scss

@@ -0,0 +1,79 @@
+@use '../../../../scss/variables/colors.module.scss' as *;
+@use '../../../../scss/variables/fontSizes.module.scss' as *;
+
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.inputContainer {
+  align-items: flex-end;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+.areaCode {
+  align-items: flex-end;
+  display: flex;
+  position: relative;
+}
+
+.outlinedAreaCode {
+  align-items: center;
+}
+
+.phoneNumber {
+  width: calc(100% - 30px - 70px);
+}
+
+.input {
+  appearance: none;
+  border-left: 0;
+  border-top: 0;
+  color: $black;
+  font-style: inherit;
+  margin-top: auto;
+  outline: 0;
+  width: 100%;
+}
+
+.activeInput {
+  border-color: 1px solid $input-primary;
+}
+
+.error {
+  height: 19px;
+}
+
+.smallText {
+  font-size: $small;
+}
+
+.icon {
+  display: flex;
+  margin-top: 15px;
+  opacity: 0;
+  outline: 0;
+  padding: 2px;
+  pointer-events: none;
+}
+
+.outlinedIcon {
+  margin-top: 0;
+}
+
+.checkedIcon {
+  border-radius: 100px;
+  outline: 0;
+  transition: opacity 0.2s ease-in;
+}
+
+.showCheckedIcon {
+  opacity: 1;
+  pointer-events: all;
+}

package/dist/esm/components/UTPhoneInput/versions/V0/theme.js

@@ -0,0 +1,129 @@
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveStyle = _ref => {
+  let {
+    theme
+  } = _ref;
+  return {
+    container: {
+      display: getIn(theme, ['UTTextInput', 'container', 'display'], 'flex'),
+      flexShrink: getIn(theme, ['UTTextInput', 'container', 'flexShrink'], '0'),
+      width: getIn(theme, ['UTTextInput', 'container', 'width'], '100%'),
+      margin: getIn(theme, ['UTTextInput', 'container', 'margin'], '0')
+    },
+    bigInput: {
+      fontSize: getIn(theme, ['UTTextInput', 'bigInput', 'fontSize'], '40px'),
+      textAlign: getIn(theme, ['UTTextInput', 'bigInput', 'textAlign'], 'center')
+    },
+    areaCodeIcon: {
+      fill: getIn(theme, ['UTPhoneInput', 'areaCodeIcon', 'fill'], Colors.primary)
+    },
+    labelIcon: {
+      height: getIn(theme, ['UTTextInput', 'inputIcon', 'height'], '12px'),
+      width: getIn(theme, ['UTTextInput', 'inputIcon', 'width'], 'auto'),
+      fill: getIn(theme, ['UTTextInput', 'inputIcon', 'fill'], Colors.gray),
+      padding: getIn(theme, ['UTTextInput', 'inputIcon', 'padding'], '0px 5px 0px 0px')
+    },
+    labelContainer: {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center'
+    },
+    tooltip: {
+      color: getIn(theme, ['UTPhoneInput', 'tooltip', 'color'], Colors.white)
+    },
+    areaCodeContainer: {
+      minWidth: getIn(theme, ['UTPhoneInput', 'areaCodeContainer', 'minWidth'], 70),
+      width: getIn(theme, ['UTPhoneInput', 'areaCodeContainer', 'width'], '30%')
+    },
+    phoneNumberContainer: {
+      marginLeft: getIn(theme, ['UTPhoneInput', 'phoneNumberContainer', 'marginLeft'], 10)
+    }
+  };
+};
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiFormControl: {
+      root: {
+        minWidth: '70px'
+      }
+    },
+    MuiOutlinedInput: {
+      input: {
+        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+        color: getIn(theme, ['UTTextInput', 'color'])
+      },
+      root: {
+        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(Colors.gray)),
+          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+        },
+        '&$focused $notchedOutline': {
+          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(Colors.primary)),
+          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+        },
+        '&$disabled $notchedOutline': {
+          border: getIn(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(Colors.gray)),
+          borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+        }
+      },
+      notchedOutline: {
+        border: getIn(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(theme.Palette.error['05'])),
+        borderColor: getIn(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
+      }
+    },
+    MuiInput: {
+      input: {
+        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14)),
+        color: getIn(theme, ['UTTextInput', 'color'])
+      },
+      underline: {
+        '&:hover:not($disabled):not($focused):not($error):before': {
+          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(Colors.gray))
+        },
+        '&$disabled:before': {
+          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(Colors.gray))
+        },
+        '&:before': {
+          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(Colors.gray))
+        },
+        '&$focused:after': {
+          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(Colors.primary))
+        },
+        '&:after': {
+          borderBottom: getIn(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(Colors.primary))
+        },
+        '&$error:after': {
+          borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+          borderBottomColor: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiFormLabel: {
+      root: {
+        color: getIn(theme, ['UTTextInput', 'formLabel', 'color']),
+        '&$error': {
+          color: getIn(theme, ['UTTextInput', 'formLabel', 'errorColor'], Colors.gray)
+        },
+        '&$focused': {
+          color: getIn(theme, ['UTTextInput', 'formLabel', 'focusedColor'], Colors.primary),
+          '&$error': {
+            color: theme.Palette.error['05']
+          }
+        },
+        fontFamily: getIn(theme, ['Fonts', 'fontFamily']),
+        fontSize: getIn(theme, ['UTTextInput', 'fontSize'], getIn(theme, ['Fonts', 'medium'], 14))
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: getIn(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
+        color: theme.Palette.error['05']
+      }
+    }
+  }
+});

package/dist/esm/components/UTPhoneInput/versions/V1/README.md

@@ -0,0 +1,89 @@
+# UTPhoneInput
+
+## Description
+
+`UTPhoneInput` is a configurable phone input component that allows users to input phone numbers, optionally including an area code or country code. It supports various customization options such as icons, validation messages, and configurable error handling. The component also handles validation for specific area codes and can work with or without them. The component now supports both string and object value formats for enhanced flexibility.
+
+## Props
+
+| Name                  | Type                                                                      | Default                                                                                                    | Description                                                                                                                          |
+| --------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| actions               | object                                                                    |                                                                                                            | Actions to render within `UTFieldLabel`.                                                                                             |
+| areaCodeDataTestId    | string                                                                    |                                                                                                            | Identifier for the area code input field, useful for testing.                                                                        |
+| areaCodePlaceholder   | string                                                                    |                                                                                                            | Placeholder for the area code input field.                                                                                           |
+| prefix                | string                                                                    |                                                                                                            | Country code prefix for the phone number (e.g., "+54" for Argentina). When provided, enables country code selection functionality.    |
+| prefixDataTestId      | string                                                                    |                                                                                                            | Identifier for the country code select field, useful for testing.                                                                    |
+| disabled              | bool                                                                      | false                                                                                                      | Disables both the area code and phone number input fields.                                                                           |
+| error                 | string                                                                    |                                                                                                            | Error message displayed below the input fields.                                                                                      |
+| inputSize             | string                                                                    |                                                                                                            | Size of the input field. One of: `small`, `large`.                                                                                   |
+| helpText              | string                                                                    |                                                                                                            | Help text displayed below the input fields.                                                                                          |
+| maxLength             | number                                                                    | 10                                                                                                         | Maximum number of characters allowed in the phone number input (excluding the area code).                                            |
+| onChange              | func                                                                      |                                                                                                            | Function called when either the area code or phone number value changes. Returns string format (`areaCode-phoneNumber`) or object format (`{number, prefix}`) when `prefix` is provided. |
+| phoneNumberDataTestId | string                                                                    |                                                                                                            | Identifier for the phone number input field, useful for testing.                                                                     |
+| placeholder           | string                                                                    |                                                                                                            | Placeholder text displayed in the phone number input when it's empty.                                                                |
+| readOnly              | bool                                                                      | false                                                                                                      | Makes the area code and phone number input fields read-only.                                                                         |
+| required              | bool                                                                      | false                                                                                                      | Marks the input fields as required.                                                                                                  |
+| RightIcon             | elementType                                                               |                                                                                                            | Icon displayed on the right side of both the area code and phone number input fields.                                                |
+| title                 | string                                                                    |                                                                                                            | Title displayed above the input fields.                                                                                              |
+| titleVariant          | string                                                                    | 'large'                                                                                                    | Variant of the title, can be `small` or `large`.                                                                                     |
+| translations          | shape({ areaCodeWithoutZeroError: string, invalidAreaCodeError: string, areaCodeMinLenghtError: string }) | `{ areaCodeMinLenghtError: 'El código de área debe contener al menos 2 dígitos.', areaCodeWithoutZeroError: 'El código de área debe comenzar sin 0.', invalidAreaCodeError: 'No pudimos reconocer el código de área ingresado. Intenta con uno diferente.' }` | Translation strings used for error messages related to area code validation.                                                         |
+| validationDataTestId  | string                                                                    |                                                                                                            | Identifier for the validation component, useful for testing.                                                                         |
+| validations           | object                                                                    |                                                                                                            | Object containing validation rules to be applied to the input fields.                                                                |
+| value                 | string \| object                                                          |                                                                                                            | Current value of the phone input. Can be a string in format `areaCode-phoneNumber` or an object `{number, prefix}` when `prefix` is provided. |
+| withAreaCode          | bool                                                                      | true                                                                                                       | If `true`, displays the area code input field. If `false`, only the phone number input is shown.                                     |
+| editablePrefix        | bool                                                                      | false                                                                                                      | If `true`, allows users to edit the country code prefix. When `false`, the prefix is read-only. Only applies when `prefix` is provided. |
+
+### Value Formats
+
+The component supports two value formats depending on the configuration:
+
+#### String Format (Default)
+When `prefix` is not provided, the component uses string format:
+- **Input**: `"11-82712232"` (area code + phone number)
+- **Output**: `"11-82712232"` via `onChange`
+
+#### Object Format (prefix provided)
+When `prefix` is provided, the component uses object format:
+- **Input**: `{number: "1182712232", prefix: "+54"}`
+- **Output**: `{number: "1182712232", prefix: "+54"}` via `onChange`
+
+### Translations
+
+The `translations` prop allows you to customize the error messages displayed when the area code is invalid. It supports the following keys:
+
+- **areaCodeMinLenghtError**: Error message displayed when the area code has less than 2 digits.
+- **areaCodeWithoutZeroError**: Error message displayed when the area code starts with a `0`.
+- **invalidAreaCodeError**: Error message displayed when the area code is invalid.
+
+### titleVariant
+
+The value of `titleVariant` must be one of the following:
+
+- "small"
+- "large"
+
+### Handling Errors
+
+Errors related to the area code or phone number input can be displayed using the `error` prop or through the `validations` prop, which allows more complex validation rules. The component also provides built-in area code validation, which can be customized through the `translations` prop.
+
+### Validations
+
+The `validations` prop allows you to pass an object with validation rules to be applied to both the area code and phone number inputs. For more information on the structure of `validations`, refer to the **UTValidation** component documentation.
+
+### Country Code Selection
+
+When `prefix` is provided, the component displays a country selector with:
+- Country flags using the `react-flagpack` library
+- Phone prefixes for each country
+- Automatic country code detection based on the current value
+- Support for 195 countries with 2 digit ISO code
+- Editable prefix selection when `editablePrefix` is `true`
+
+### Combining the Area Code and Phone Number
+
+The `withAreaCode` prop should not be `true` when `prefix` is provided. When the `onChange` handler is called, it returns the value in the appropriate format:
+
+- **String format**: `areaCode-phoneNumber` (e.g., "11-82712232")
+- **Object format**: `{number: "1182712232", prefix: "+54"}` when `prefix` is provided
+
+If the `withAreaCode` prop is set to `false`, only the phone number will be returned in the appropriate format.