@widergy/energy-ui 3.92.0 → 3.94.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.94.0](https://github.com/widergy/energy-ui/compare/v3.93.0...v3.94.0) (2025-07-29)
+
+
+### Features
+
+* [PROMI] phone input ([#638](https://github.com/widergy/energy-ui/issues/638)) ([6f4c2a8](https://github.com/widergy/energy-ui/commit/6f4c2a846cc5d1b1c6490d5bae9467604a0a4b48))
+
+# [3.93.0](https://github.com/widergy/energy-ui/compare/v3.92.0...v3.93.0) (2025-07-29)
+
+
+### Features
+
+* add switch version v1 ([#647](https://github.com/widergy/energy-ui/issues/647)) ([e8b39d7](https://github.com/widergy/energy-ui/commit/e8b39d77b71b9d8cb2361ff9c13a17d5f8cff7e6))
+
 # [3.92.0](https://github.com/widergy/energy-ui/compare/v3.91.1...v3.92.0) (2025-07-22)
 
 

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

@@ -115,9 +115,10 @@ const UTCheckList = _ref => {
     version: "V1"
   }), categorizedOptions.map((_ref5, catIndex) => {
     let [category, categoryOptions] = _ref5;
+    const categoryKey = "".concat(category, "-").concat(categoryOptions.map(opt => opt.value).join('-'));
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(_stylesModule.default.categoryContainer, " ").concat(smallVerticalSpacingClass),
-      key: category
+      key: categoryKey
     }, category !== _constants2.NO_CATEGORY && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
       className: _stylesModule.default.categoryTitle,
       colorTheme: "gray",
@@ -133,6 +134,7 @@ const UTCheckList = _ref => {
       disabled: item.disabled || disabled,
       isSimple: isSimple,
       key: item.value,
+      icon: item.icon,
       onChange: () => handleChange(item.value),
       reversed: isSimple ? reversedBasedOnVariant : reversed,
       spacing: horizontalSpacing,
@@ -157,6 +159,7 @@ UTCheckList.propTypes = {
   options: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     checked: _propTypes.bool,
     disabled: _propTypes.bool,
+    icon: _propTypes.string,
     name: _propTypes.string,
     value: _propTypes.string,
     category: _propTypes.string

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

@@ -36,6 +36,7 @@ const UTCheckbox = _ref => {
     meta,
     onChange = () => {},
     required,
+    icon,
     title,
     value = false,
     variant = 'default',
@@ -88,6 +89,7 @@ const UTCheckbox = _ref => {
   })))), CustomComponent || /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     className: classes.title,
     highlighted: shouldHighlightLabel,
+    icon: icon,
     required: required
   }, title), error && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
     className: classes.validation,
@@ -110,6 +112,7 @@ UTCheckbox.propTypes = {
   meta: _formTypes.metaPropTypes.isRequired,
   onChange: _propTypes.func,
   required: _propTypes.bool,
+  icon: _propTypes.string,
   reversed: _propTypes.bool,
   spacing: _propTypes.string,
   title: _propTypes.string,

package/dist/components/UTDataCategory/index.js

@@ -71,7 +71,7 @@ const UTDataCategory = _ref => {
     } = element;
     return /*#__PURE__*/_react.default.createElement(_UTDataElement.default, _extends({
       key: key || index,
-      dataTestId: dataTestId ? "".concat(dataTestId, ".dataElement.").concat(index) : "".concat(dataCategory.dataElement, ".").concat(index),
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(dataCategory.item, ".").concat(index),
       classNames: classes.element
     }, elementsProps, dataElementProps));
   }))));

package/dist/components/UTDataElement/components/MainAction/index.js

@@ -10,7 +10,6 @@ var _testIds = require("../../../../constants/testIds");
 var _UTSwitch = _interopRequireDefault(require("../../../UTSwitch"));
 var _UTButton = _interopRequireDefault(require("../../../UTButton"));
 var _constants = require("../../constants");
-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 {
@@ -23,28 +22,15 @@ const MainAction = _ref => {
     value,
     onClick,
     dataTestId,
-    id,
     ...props
   } = _ref;
-  return type === _constants.ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/_react.default.createElement("div", {
-    className: _stylesModule.default.container
-  }, /*#__PURE__*/_react.default.createElement(_UTSwitch.default, _extends({
-    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
-    input: {
-      onChange,
-      value
-    },
-    field: {
-      key: "".concat(id)
-    }
+  return type === _constants.ACTION_TYPE.SWITCH && onChange ? /*#__PURE__*/_react.default.createElement(_UTSwitch.default, _extends({
+    onChange: onChange,
+    value: value
   }, props, {
-    classNames: {
-      container: _stylesModule.default.switchContainer,
-      slider: _stylesModule.default.slider,
-      sliderContainer: _stylesModule.default.sliderContainer,
-      sliderHover: _stylesModule.default.sliderHover
-    }
-  }))) : type === _constants.ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.switchAction) : undefined,
+    version: "V1"
+  })) : type === _constants.ACTION_TYPE.BUTTON && onClick ? /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(dataElement.buttonAction) : undefined,
     variant: "text",
     onClick: onClick

package/dist/components/UTFieldLabel/index.js

@@ -12,6 +12,7 @@ var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
 var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _inputs = require("../../constants/inputs");
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -22,6 +23,7 @@ const UTFieldLabel = _ref => {
     className,
     dataTestId,
     highlighted,
+    icon,
     readOnly,
     required,
     size = 'large',
@@ -31,12 +33,16 @@ const UTFieldLabel = _ref => {
     className: "".concat(!(0, _isEmpty.default)(actions) ? _stylesModule.default.labelWithActions : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.label, " ").concat(className)
-  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.labelContent
+  }, icon && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    name: icon
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: readOnly ? 'gray' : highlighted ? 'accent' : 'dark',
     dataTestId: dataTestId,
     variant: _inputs.TITLE_VARIANTS[size],
     withMarkdown: true
-  }, children), required && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, children)), required && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "error",
     shade: "04",
     variant: _inputs.TITLE_VARIANTS[size],
@@ -62,6 +68,7 @@ UTFieldLabel.propTypes = {
   className: _propTypes.string,
   dataTestId: _propTypes.string,
   highlighted: _propTypes.bool,
+  icon: _propTypes.string,
   readOnly: _propTypes.bool,
   required: _propTypes.bool,
   size: _propTypes.string,

package/dist/components/UTFieldLabel/styles.module.scss

@@ -17,3 +17,9 @@
   display: flex;
   gap: 8px;
 }
+
+.labelContent {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+}

package/dist/components/UTIcon/components/Flag/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _reactFlagpack = _interopRequireDefault(require("react-flagpack"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const FlagComponent = _ref => {
+  let {
+    className,
+    name,
+    size
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(className, " ").concat(_stylesModule.default.flagContainer),
+    style: {
+      width: size,
+      height: size
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactFlagpack.default, {
+    code: name,
+    className: _stylesModule.default.flag
+  }));
+};
+FlagComponent.propTypes = {
+  className: _propTypes.string,
+  name: _propTypes.string,
+  size: _propTypes.number
+};
+var _default = exports.default = FlagComponent;

package/dist/components/UTIcon/components/Flag/styles.module.scss

@@ -0,0 +1,10 @@
+.flagContainer {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.flag {
+  height: 75% !important;
+  width: 100% !important;
+}

package/dist/components/UTIcon/index.js

@@ -6,11 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _theme = require("./theme");
 var _constants = require("./constants");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 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 UTIcon = _ref => {
@@ -48,7 +46,7 @@ const UTIcon = _ref => {
     size,
     variant
   });
-  const IconComponent = _constants.ENERGY_ICONS[name] || TablerIcons[name];
+  const IconComponent = (0, _theme.getComponent)(name);
   if (!IconComponent) return null;
   return /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
     className: classNames,

package/dist/components/UTIcon/theme.js

@@ -3,11 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.retrieveStyle = exports.retrieveColor = exports.getIconProps = exports.getClassNames = void 0;
+exports.retrieveStyle = exports.retrieveColor = exports.getIconProps = exports.getComponent = exports.getClassNames = void 0;
+var TablerIcons = _interopRequireWildcard(require("@tabler/icons-react"));
 var _componentUtils = require("../../utils/componentUtils");
+var _countries = _interopRequireDefault(require("../../constants/countries"));
+var _Flag = _interopRequireDefault(require("./components/Flag"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const retrieveColor = _ref => {
   var _theme$Palette$action;
   let {
@@ -63,7 +67,8 @@ const getIconProps = _ref2 => {
     ...(internalFill && {
       fill: internalFill
     }),
-    ...(isEnergyIcon ? energyIconProps : defaultIconProps)
+    ...(isEnergyIcon ? energyIconProps : defaultIconProps),
+    name
   };
 };
 exports.getIconProps = getIconProps;
@@ -124,4 +129,14 @@ const retrieveStyle = _ref4 => {
   }, {});
   return variantStyles;
 };
-exports.retrieveStyle = retrieveStyle;
+exports.retrieveStyle = retrieveStyle;
+const getComponent = name => {
+  if (_countries.default.find(_ref5 => {
+    let {
+      code
+    } = _ref5;
+    return code === name;
+  })) return _Flag.default;
+  return _constants.ENERGY_ICONS[name] || TablerIcons[name];
+};
+exports.getComponent = getComponent;

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

@@ -2,7 +2,7 @@
 
 ## Description
 
-`UTPhoneInput` is a configurable phone input component that allows users to input phone numbers, optionally including an area 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.
+`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
 
@@ -11,13 +11,14 @@
 | 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.                                                                                           |
-| countryCode           | string                                                                    |                                                                                                            | Prefix for the phone number, typically used to display the country code (e.g., "+1" for the US).                                     |
+| 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. Should handle concatenated values (`areaCode-phoneNumber`). |
+| 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.                                                                         |
@@ -25,15 +26,32 @@
 | 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 }) | `{ areaCodeWithoutZeroError: 'Ingrese el código sin 0', invalidAreaCodeError: 'Código de área inválido' }` | Translation strings used for error messages related to area code validation.                                                         |
+| 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                                                                    |                                                                                                            | Current value of the phone input in the format `areaCode-phoneNumber`.                                                               |
+| 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.
 
@@ -52,6 +70,20 @@ Errors related to the area code or phone number input can be displayed using the
 
 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
 
-When the `onChange` handler is called, it returns the concatenated value of the area code and phone number in the format: `areaCode-phoneNumber`. If the `withAreaCode` prop is set to `false`, only the phone number will be returned.
+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.

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

@@ -13,22 +13,26 @@ var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
 var _buttonTypes = require("../../../../types/buttonTypes");
 var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
+var _UTSelect = _interopRequireDefault(require("../../../UTSelect"));
+var _countries = _interopRequireDefault(require("../../../../constants/countries"));
 var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const UTPhoneInput = _ref => {
+  var _countries$find;
   let {
     actions,
     areaCodeDataTestId,
     areaCodePlaceholder,
-    countryCode,
     disabled,
     error,
     helpText,
     inputSize,
     maxLength = 10,
     onChange,
+    prefix,
+    prefixDataTestId,
     phoneNumberDataTestId,
     placeholder,
     readOnly,
@@ -43,13 +47,15 @@ const UTPhoneInput = _ref => {
     validationDataTestId,
     validations,
     value,
-    withAreaCode = true
+    withAreaCode = true,
+    editablePrefix = false
   } = _ref;
   const [areaCodeState, setAreaCodeState] = (0, _react.useState)({
     code: '',
     error: ''
   });
   const [blurWithError, setBlurWithError] = (0, _react.useState)(false);
+  const [prefixState, setPrefixState] = (0, _react.useState)((value === null || value === void 0 ? void 0 : value.prefix) || prefix);
   const [phoneNumber, setPhoneNumber] = (0, _react.useState)('');
   const {
     areaCodeWithoutZeroError,
@@ -57,15 +63,22 @@ const UTPhoneInput = _ref => {
     areaCodeMinLenghtError
   } = translations;
   (0, _react.useEffect)(() => {
-    if (value && withAreaCode) {
-      const [code, phone] = value.split('-');
+    const {
+      number: valueNumber
+    } = typeof value === 'string' ? {
+      number: value
+    } : value;
+    if (prefix) {
+      if (valueNumber && valueNumber !== phoneNumber) setPhoneNumber(valueNumber);
+    } else if (valueNumber && withAreaCode) {
+      const [code, phone] = valueNumber.split('-');
       setAreaCodeState(prevState => ({
         ...prevState,
         code: code || ''
       }));
       setPhoneNumber(phone || '');
-    } else if (value && !withAreaCode) {
-      setPhoneNumber(value);
+    } else if (valueNumber && !withAreaCode) {
+      setPhoneNumber(valueNumber);
     }
   }, [value, withAreaCode]);
   const validateAreaCode = code => {
@@ -102,7 +115,12 @@ const UTPhoneInput = _ref => {
     setPhoneNumber(phoneNumberValue);
   }, []);
   (0, _react.useEffect)(() => {
-    if (areaCodeState.code !== '' || phoneNumber !== '') {
+    if (prefix) {
+      if (phoneNumber && (phoneNumber !== (value === null || value === void 0 ? void 0 : value.number) || prefixState !== (value === null || value === void 0 ? void 0 : value.prefix))) onChange({
+        number: phoneNumber,
+        prefix: prefixState
+      });
+    } else if (areaCodeState.code !== '' || phoneNumber !== '') {
       const newValue = withAreaCode ? "".concat(areaCodeState.code, "-").concat(phoneNumber) : phoneNumber;
       if (newValue !== value) {
         onChange(newValue);
@@ -110,7 +128,7 @@ const UTPhoneInput = _ref => {
     } else {
       onChange('');
     }
-  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value]);
+  }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value, prefixState, prefix]);
   const validationData = validations || areaCodeState.error && (0, _utils.formatErrorToValidation)(areaCodeState.error) || error && (0, _utils.formatErrorToValidation)(error);
   const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
   const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
@@ -124,7 +142,40 @@ const UTPhoneInput = _ref => {
     size: titleVariant
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.inputsContainer
-  }, withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+  }, prefix && /*#__PURE__*/_react.default.createElement(_UTSelect.default, {
+    version: "V1",
+    classNames: {
+      container: _stylesModule.default.countryCodeContainer
+    },
+    dataTestId: prefixDataTestId,
+    disabled: disabled || !editablePrefix,
+    options: _countries.default.map(_ref2 => {
+      let {
+        code,
+        prefix: prefixValue
+      } = _ref2;
+      return {
+        name: "".concat(prefixValue, " (").concat(code, ")"),
+        value: prefixValue,
+        icon: code
+      };
+    }),
+    clearable: false,
+    value: prefixState,
+    onChange: setPrefixState,
+    icon: (_countries$find = _countries.default.find(_ref3 => {
+      let {
+        prefix: prefixValue
+      } = _ref3;
+      return prefixValue === prefixState;
+    })) === null || _countries$find === void 0 ? void 0 : _countries$find.code,
+    className: _stylesModule.default.countryCodeSelect,
+    autocompleteProps: {
+      classes: {
+        popper: _stylesModule.default.popper
+      }
+    }
+  }), !prefix && withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: true,
     classNames: {
       container: _stylesModule.default.areaCodeContainer
@@ -149,18 +200,13 @@ const UTPhoneInput = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: true,
     classNames: {
-      container: _stylesModule.default.phoneContainer
+      container: _stylesModule.default.phoneContainer,
+      root: _stylesModule.default.phoneContainerRoot
     },
     dataTestId: phoneNumberDataTestId,
     disabled: disabled,
     error: hasError && !areaCodeState.error,
     inputSize: inputSize,
-    leftAdornments: countryCode && !withAreaCode ? [{
-      name: _constants.COMPONENT_KEYS.PREFIX,
-      props: {
-        text: countryCode
-      }
-    }] : [],
     maxLength: getPhoneNumberMaxLength(),
     onChange: handleChangePhoneNumber,
     placeholder: placeholder,
@@ -184,11 +230,12 @@ UTPhoneInput.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   areaCodeDataTestId: _propTypes.string,
   areaCodePlaceholder: _propTypes.string,
-  countryCode: _propTypes.string,
+  prefix: _propTypes.string,
   disabled: _propTypes.bool,
   error: _propTypes.string,
   helpText: _propTypes.string,
   inputSize: _propTypes.string,
+  prefixDataTestId: _propTypes.string,
   maxLength: _propTypes.number,
   onChange: _propTypes.func,
   phoneNumberDataTestId: _propTypes.string,
@@ -204,6 +251,7 @@ UTPhoneInput.propTypes = {
   validationDataTestId: _propTypes.string,
   validations: _UTValidation.validationDataProptypes,
   value: _propTypes.string,
-  withAreaCode: _propTypes.bool
+  withAreaCode: _propTypes.bool,
+  editablePrefix: _propTypes.bool
 };
 var _default = exports.default = UTPhoneInput;

package/dist/components/UTPhoneInput/versions/V1/styles.module.scss

@@ -6,7 +6,7 @@
 
 .inputsContainer {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   flex-direction: row;
   grid-gap: 8px;
 }
@@ -20,4 +20,17 @@
 .phoneContainer {
   flex: 1 1 auto;
   min-width: 120px;
+  height: 100%;
+}
+
+.countryCodeSelect {
+  width: 180px;
+}
+
+.phoneContainerRoot {
+  height: 100%;
+}
+
+.popper {
+  width: unset !important;
 }

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

@@ -36,6 +36,7 @@ const UTSelect = _ref => {
     errorDataTestId,
     freeWidth = false,
     helpText,
+    icon,
     inputSize,
     itemDataTestId,
     listDataTestId,
@@ -54,7 +55,8 @@ const UTSelect = _ref => {
     titleVariant = _inputs.TITLE_VARIANTS.large,
     value = multiple ? [] : null,
     variant = 'select',
-    withAutoReset = true
+    withAutoReset = true,
+    autocompleteProps = {}
   } = _ref;
   const optionsSortedByCategory = (0, _react.useMemo)(() => {
     if (!options || options.length === 0) return [];
@@ -137,8 +139,9 @@ const UTSelect = _ref => {
     error,
     multiple,
     value,
-    prefix
-  }), [multiple, value, prefix]);
+    prefix,
+    icon
+  }), [multiple, value, prefix, icon]);
   const rightAdornments = (0, _react.useMemo)(() => (0, _utils2.getRightAdornments)({
     action,
     clearable,
@@ -203,7 +206,7 @@ const UTSelect = _ref => {
     options: optionsSortedByCategory,
     PaperComponent: _UTPaper.default,
     renderInput: InputComponentToRender
-  })), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, autocompleteProps)), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "gray",
     variant: "small"
   }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
@@ -228,6 +231,7 @@ UTSelect.propTypes = {
   errorDataTestId: _propTypes.string,
   freeWidth: _propTypes.bool,
   helpText: _propTypes.string,
+  icon: _propTypes.string,
   inputSize: _propTypes.string,
   itemDataTestId: _propTypes.string,
   listDataTestId: _propTypes.string,
@@ -249,6 +253,7 @@ UTSelect.propTypes = {
   titleVariant: _propTypes.string,
   value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.arrayOf)((0, _propTypes.oneOfType)([_propTypes.string, _propTypes.number]))]),
   variant: _propTypes.string,
-  withAutoReset: _propTypes.bool
+  withAutoReset: _propTypes.bool,
+  autocompleteProps: _propTypes.object
 };
 var _default = exports.default = UTSelect;