@widergy/mobile-ui 1.14.5 → 1.15.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.15.0](https://github.com/widergy/mobile-ui/compare/v1.14.6...v1.15.0) (2024-07-31)
+
+
+### Features
+
+* new phone input component ([#325](https://github.com/widergy/mobile-ui/issues/325)) ([6c6d20d](https://github.com/widergy/mobile-ui/commit/6c6d20d8395e4d30a1917a5309c325c62a89e79c))
+
+## [1.14.6](https://github.com/widergy/mobile-ui/compare/v1.14.5...v1.14.6) (2024-07-26)
+
+
+### Bug Fixes
+
+* utselectablecard image icon and standarization ([#322](https://github.com/widergy/mobile-ui/issues/322)) ([9ad22ac](https://github.com/widergy/mobile-ui/commit/9ad22acdcdd4263e74469cb4a7ce645161b7f6d5))
+
 ## [1.14.5](https://github.com/widergy/mobile-ui/compare/v1.14.4...v1.14.5) (2024-07-26)
 
 

package/lib/components/UTBaseInputField/components/IconAdornment/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shape, string, elementType, bool } from 'prop-types';
+import { bool, shape, string, elementType, oneOfType } from 'prop-types';
 import { TextPropTypes } from 'deprecated-react-native-prop-types';
 
 import { isUTIcon } from '../../../UTIcon/utils';
@@ -21,7 +21,7 @@ const IconAdornment = ({ Icon, error, inputStyle, changeOnError = false }) => {
 };
 
 IconAdornment.propTypes = {
-  error: string,
+  error: oneOfType([bool, string]),
   Icon: elementType,
   inputStyle: shape({
     root: TextPropTypes.style

package/lib/components/UTBaseInputField/constants.js

@@ -6,13 +6,17 @@ import TooltipAdornment from './components/TooltipAdornment';
 
 export const TYPES = {
   EMAIL: 'email',
+  NUMBER: 'number',
   NUMERIC: 'numeric',
-  PASSWORD: 'password'
+  PASSWORD: 'password',
+  PHONE: 'phone'
 };
 
 export const KEYBOARD_BY_TYPE = {
   [TYPES.EMAIL]: 'email-address',
-  [TYPES.NUMERIC]: 'numeric'
+  [TYPES.NUMBER]: 'number-pad',
+  [TYPES.NUMERIC]: 'numeric',
+  [TYPES.PHONE]: 'phone-pad'
 };
 
 export const COMPONENT_KEYS = {

package/lib/components/UTBaseInputField/index.js

@@ -1,5 +1,5 @@
 import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useState } from 'react';
-import { bool, func, number, string, arrayOf, shape } from 'prop-types';
+import { bool, func, number, string, arrayOf, shape, oneOfType } from 'prop-types';
 import { View, TextInput } from 'react-native';
 import { ViewPropTypes } from 'deprecated-react-native-prop-types';
 
@@ -17,7 +17,7 @@ const UTBaseInputField = forwardRef(
       error,
       inputSize,
       leftAdornments,
-      maxCount,
+      maxLength,
       maxRows,
       onBlur,
       onChange,
@@ -27,6 +27,7 @@ const UTBaseInputField = forwardRef(
       readOnly,
       returnKeyType,
       rightAdornments,
+      showCharacterCount,
       style,
       type,
       value
@@ -54,8 +55,7 @@ const UTBaseInputField = forwardRef(
         if (!inputWidth || !text) return text;
         const charWidth = 8;
         const maxCharsPerLine = Math.floor(inputWidth / charWidth);
-        const maxLength = maxCharsPerLine;
-        return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
+        return text.length > maxCharsPerLine ? `${text.substring(0, maxCharsPerLine - 3)}...` : text;
       },
       [inputWidth]
     );
@@ -97,19 +97,22 @@ const UTBaseInputField = forwardRef(
     const autoCapitalize = type === TYPES.EMAIL ? 'none' : 'sentences';
     const keyboardType = KEYBOARD_BY_TYPE[type] || 'default';
 
-    const renderElement = useCallback(element => {
-      const Component = COMPONENTS_MAPPER[element.name];
-      return Component ? (
-        <Component
-          actionStyle={actionStyle}
-          disabled={disabled}
-          error={error}
-          inputStyle={inputStyle}
-          key={element.name}
-          {...element.props}
-        />
-      ) : null;
-    }, []);
+    const renderElement = useCallback(
+      element => {
+        const Component = COMPONENTS_MAPPER[element.name];
+        return Component ? (
+          <Component
+            actionStyle={actionStyle}
+            disabled={disabled}
+            error={error}
+            inputStyle={inputStyle}
+            key={element.name}
+            {...element.props}
+          />
+        ) : null;
+      },
+      [error]
+    );
 
     return (
       <View style={containerStyle}>
@@ -120,7 +123,7 @@ const UTBaseInputField = forwardRef(
             autoCorrect={false}
             editable={!disabled && !readOnly}
             keyboardType={keyboardType}
-            maxLength={maxCount}
+            maxLength={maxLength}
             multiline={multiline}
             numberOfLines={maxRows}
             onChangeText={onChange}
@@ -139,10 +142,10 @@ const UTBaseInputField = forwardRef(
           />
           {rightAdornments.map(renderElement)}
         </View>
-        {maxCount && (
+        {maxLength && showCharacterCount && (
           <View style={textLengthRowStyle}>
             <UTLabel colorTheme="gray" variant="small">
-              {value?.length || 0}/{maxCount}
+              {value?.length || 0}/{maxLength}
             </UTLabel>
           </View>
         )}
@@ -156,7 +159,7 @@ UTBaseInputField.displayName = 'UTBaseInputField';
 UTBaseInputField.propTypes = {
   alwaysShowPlaceholder: bool,
   disabled: bool,
-  error: string,
+  error: oneOfType([bool, string]),
   inputSize: string,
   leftAdornments: arrayOf(
     shape({
@@ -164,7 +167,7 @@ UTBaseInputField.propTypes = {
       props: shape({})
     })
   ),
-  maxCount: number,
+  maxLength: number,
   maxRows: number,
   onBlur: func,
   onChange: func,
@@ -179,6 +182,7 @@ UTBaseInputField.propTypes = {
       props: shape({})
     })
   ),
+  showCharacterCount: bool,
   style: shape({
     container: ViewPropTypes.style,
     input: ViewPropTypes.style,

package/lib/components/UTPhoneInput/constants.js

@@ -0,0 +1,303 @@
+export const AREA_CODES = [
+  { code: '11', city: 'AMBA' },
+  { code: '220', city: 'MERLO' },
+  { code: '221', city: 'LA PLATA' },
+  { code: '223', city: 'MAR DEL PLATA' },
+  { code: '230', city: 'PILAR ' },
+  { code: '236', city: 'JUNÍN' },
+  { code: '237', city: 'MORENO' },
+  { code: '249', city: 'TANDIL' },
+  { code: '260', city: 'SAN RAFAEL' },
+  { code: '261', city: 'MENDOZA' },
+  { code: '263', city: 'SAN MARTÍN' },
+  { code: '264', city: 'SAN JUAN' },
+  { code: '266', city: 'SAN LUIS' },
+  { code: '280', city: 'TRELEW' },
+  { code: '291', city: 'BAHÍA BLANCA' },
+  { code: '294', city: 'SAN CARLOS DE BARILOCHE' },
+  { code: '297', city: 'COMODORO RIVADAVIA' },
+  { code: '298', city: 'GENERAL ROCA' },
+  { code: '299', city: 'NEUQUÉN' },
+  { code: '336', city: 'SAN NICOLÁS DE LOS ARROYOS ' },
+  { code: '341', city: 'ROSARIO ' },
+  { code: '342', city: 'SANTA FE' },
+  { code: '343', city: 'PARANÁ' },
+  { code: '345', city: 'CONCORDIA' },
+  { code: '348', city: 'BELÉN DE ESCOBAR ' },
+  { code: '351', city: 'CÓRDOBA' },
+  { code: '353', city: 'VILLA MARÍA' },
+  { code: '358', city: 'RÍO CUARTO' },
+  { code: '362', city: 'RESISTENCIA' },
+  { code: '364', city: 'PRESIDENCIA ROQUE SÁENZ PEÑA' },
+  { code: '370', city: 'FORMOSA' },
+  { code: '376', city: 'POSADAS' },
+  { code: '379', city: 'CORRIENTES' },
+  { code: '380', city: 'LA RIOJA' },
+  { code: '381', city: 'SAN MIGUEL DE TUCUMÁN' },
+  { code: '383', city: 'SAN FERNANDO DEL VALLE DE CATAMARCA' },
+  { code: '385', city: 'SANTIAGO DEL ESTERO' },
+  { code: '387', city: 'SALTA' },
+  { code: '388', city: 'SAN SALVADOR DE JUJUY' },
+  { code: '2202', city: 'GONZÁLEZ CATÁN' },
+  { code: '2221', city: 'MAGDALENA ' },
+  { code: '2223', city: 'BRANDSEN ' },
+  { code: '2224', city: 'GLEW ' },
+  { code: '2225', city: 'ALEJANDRO KORN' },
+  { code: '2226', city: 'CAÑUELAS' },
+  { code: '2227', city: 'LOBOS ' },
+  { code: '2229', city: 'JUAN MARÍA GUTIÉRREZ ' },
+  { code: '2241', city: 'CHASCOMÚS' },
+  { code: '2242', city: 'LEZAMA' },
+  { code: '2243', city: 'GENERAL BELGRANO' },
+  { code: '2244', city: 'LAS FLORES' },
+  { code: '2245', city: 'DOLORES' },
+  { code: '2246', city: 'SANTA TERESITA' },
+  { code: '2252', city: 'SAN CLEMENTE DEL TUYÚ' },
+  { code: '2254', city: 'PINAMAR' },
+  { code: '2255', city: 'VILLA GESELL' },
+  { code: '2257', city: 'MAR DE AJÓ' },
+  { code: '2261', city: 'LOBERÍA' },
+  { code: '2262', city: 'NECOCHEA' },
+  { code: '2264', city: 'NICANOR OLIVERA (EST. LA DULCE)' },
+  { code: '2265', city: 'CORONEL VIDAL' },
+  { code: '2266', city: 'BALCARCE' },
+  { code: '2267', city: 'GENERAL JUAN MADARIAGA' },
+  { code: '2268', city: 'MAIPÚ' },
+  { code: '2271', city: 'SAN MIGUEL DEL MONTE' },
+  { code: '2272', city: 'NAVARRO' },
+  { code: '2273', city: 'CARMEN DE ARECO' },
+  { code: '2274', city: 'CARLOS SPEGAZZINI' },
+  { code: '2281', city: 'AZUL' },
+  { code: '2283', city: 'TAPALQUÉ' },
+  { code: '2284', city: 'OLAVARRÍA' },
+  { code: '2285', city: 'LAPRIDA' },
+  { code: '2286', city: 'GENERAL LA MADRID' },
+  { code: '2291', city: 'MIRAMAR' },
+  { code: '2292', city: 'BENITO JUÁREZ' },
+  { code: '2296', city: 'AYACUCHO' },
+  { code: '2297', city: 'RAUCH' },
+  { code: '2302', city: 'GENERAL PICO' },
+  { code: '2314', city: 'SAN CARLOS DE BOLÍVAR' },
+  { code: '2316', city: 'DAIREAUX' },
+  { code: '2317', city: 'NUEVE DE JULIO' },
+  { code: '2320', city: 'JOSÉ C. PAZ' },
+  { code: '2323', city: 'LUJÁN' },
+  { code: '2324', city: 'MERCEDES' },
+  { code: '2325', city: 'SAN ANDRÉS DE GILES' },
+  { code: '2326', city: 'SAN ANTONIO DE ARECO' },
+  { code: '2331', city: 'REALICÓ' },
+  { code: '2333', city: 'QUEMÚ QUEMÚ' },
+  { code: '2334', city: 'EDUARDO CASTEX' },
+  { code: '2335', city: 'CALEUFÚ' },
+  { code: '2336', city: 'HUINCA RENANCÓ' },
+  { code: '2337', city: 'AMÉRICA' },
+  { code: '2338', city: 'VICTORICA' },
+  { code: '2342', city: 'BRAGADO' },
+  { code: '2343', city: 'NORBERTO DE LA RIESTRA' },
+  { code: '2344', city: 'SALADILLO' },
+  { code: '2345', city: '25 DE MAYO' },
+  { code: '2346', city: 'CHIVILCOY' },
+  { code: '2352', city: 'CHACABUCO' },
+  { code: '2353', city: 'GENERAL ARENALES' },
+  { code: '2354', city: 'VEDIA' },
+  { code: '2355', city: 'LINCOLN' },
+  { code: '2356', city: 'GENERAL PINTO' },
+  { code: '2357', city: 'CARLOS TEJEDOR' },
+  { code: '2358', city: 'LOS TOLDOS' },
+  { code: '2392', city: 'TRENQUE LAUQUEN' },
+  { code: '2393', city: 'SALAZAR' },
+  { code: '2394', city: 'TRES LOMAS' },
+  { code: '2395', city: 'CARLOS CASARES' },
+  { code: '2396', city: 'PEHUAJÓ' },
+  { code: '2473', city: 'COLÓN' },
+  { code: '2474', city: 'SALTO' },
+  { code: '2475', city: 'ROJAS' },
+  { code: '2477', city: 'PERGAMINO' },
+  { code: '2478', city: 'ARRECIFES' },
+  { code: '2622', city: 'TUNUYÁN' },
+  { code: '2624', city: 'USPALLATA' },
+  { code: '2625', city: 'GENERAL ALVEAR' },
+  { code: '2626', city: 'LA PAZ' },
+  { code: '2646', city: 'VILLA SAN AGUSTÍN' },
+  { code: '2647', city: 'SAN JOSÉ DE JÁCHAL' },
+  { code: '2648', city: 'CALINGASTA' },
+  { code: '2651', city: 'SAN FRANCISCO DEL MONTE DE ORO' },
+  { code: '2652', city: 'SAN LUIS' },
+  { code: '2655', city: 'LA TOMA' },
+  { code: '2656', city: 'TILISARAO' },
+  { code: '2657', city: 'VILLA MERCEDES' },
+  { code: '2658', city: 'BUENA ESPERANZA' },
+  { code: '2901', city: 'USHUAIA' },
+  { code: '2902', city: 'RÍO TURBIO' },
+  { code: '2903', city: 'RÍO MAYO' },
+  { code: '2920', city: 'VIEDMA' },
+  { code: '2921', city: 'CORONEL DORREGO' },
+  { code: '2922', city: 'CORONEL PRINGLES' },
+  { code: '2923', city: 'PIGÜÉ' },
+  { code: '2924', city: 'DARREGUEIRA' },
+  { code: '2925', city: 'VILLA IRIS' },
+  { code: '2926', city: 'CORONEL SUÁREZ' },
+  { code: '2927', city: 'MÉDANOS' },
+  { code: '2928', city: 'PEDRO LURO ' },
+  { code: '2929', city: 'GUAMINÍ' },
+  { code: '2931', city: 'RÍO COLORADO' },
+  { code: '2932', city: 'PUNTA ALTA' },
+  { code: '2933', city: 'HUANGUELÉN' },
+  { code: '2934', city: 'SAN ANTONIO OESTE' },
+  { code: '2935', city: 'RIVERA' },
+  { code: '2936', city: 'CARHUÉ ' },
+  { code: '2940', city: 'INGENIERO JACOBACCI' },
+  { code: '2942', city: 'ZAPALA' },
+  { code: '2945', city: 'ESQUEL' },
+  { code: '2946', city: 'CHOELE CHOEL' },
+  { code: '2948', city: 'CHOS MALAL' },
+  { code: '2952', city: 'GENERAL ACHA' },
+  { code: '2953', city: 'MACACHÍN' },
+  { code: '2954', city: 'SANTA ROSA' },
+  { code: '2962', city: 'PUERTO SAN JULIÁN' },
+  { code: '2963', city: 'PERITO MORENO' },
+  { code: '2964', city: 'RÍO GRANDE' },
+  { code: '2966', city: 'RÍO GALLEGOS' },
+  { code: '2972', city: 'SAN MARTÍN DE LOS ANDES' },
+  { code: '2982', city: 'ORENSE' },
+  { code: '2983', city: 'TRES ARROYOS' },
+  { code: '3327', city: 'BENAVÍDEZ' },
+  { code: '3329', city: 'SAN PEDRO' },
+  { code: '3382', city: 'RUFINO' },
+  { code: '3385', city: 'LABOULAYE' },
+  { code: '3387', city: 'BUCHARDO' },
+  { code: '3388', city: 'GENERAL VILLEGAS' },
+  { code: '3400', city: 'VILLA CONSTITUCIÓN' },
+  { code: '3401', city: 'EL TRÉBOL' },
+  { code: '3402', city: 'ARROYO SECO' },
+  { code: '3404', city: 'SAN CARLOS CENTRO' },
+  { code: '3405', city: 'SAN JAVIER' },
+  { code: '3406', city: 'SAN JORGE' },
+  { code: '3407', city: 'RAMALLO' },
+  { code: '3408', city: 'SAN CRISTÓBAL' },
+  { code: '3409', city: 'MOISÉS VILLE' },
+  { code: '3435', city: 'NOGOYÁ' },
+  { code: '3436', city: 'VICTORIA' },
+  { code: '3437', city: 'LA PAZ' },
+  { code: '3438', city: 'BOVRIL' },
+  { code: '3442', city: 'CONCEPCIÓN DEL URUGUAY' },
+  { code: '3444', city: 'GUALEGUAY' },
+  { code: '3445', city: 'ROSARIO DEL TALA' },
+  { code: '3446', city: 'GUALEGUAYCHÚ' },
+  { code: '3447', city: 'COLÓN' },
+  { code: '3454', city: 'FEDERAL' },
+  { code: '3455', city: 'VILLAGUAY' },
+  { code: '3456', city: 'CHAJARÍ' },
+  { code: '3458', city: 'SAN JOSÉ DE FELICIANO' },
+  { code: '3460', city: 'SANTA TERESA ' },
+  { code: '3462', city: 'VENADO TUERTO' },
+  { code: '3463', city: 'CANALS' },
+  { code: '3464', city: 'CASILDA' },
+  { code: '3465', city: 'FIRMAT' },
+  { code: '3466', city: 'BARRANCAS' },
+  { code: '3467', city: 'CRUZ ALTA' },
+  { code: '3468', city: 'CORRAL DE BUSTOS' },
+  { code: '3469', city: 'ACEBAL' },
+  { code: '3471', city: 'CAÑADA DE GÓMEZ' },
+  { code: '3472', city: 'MARCOS JUÁREZ' },
+  { code: '3476', city: 'SAN LORENZO' },
+  { code: '3482', city: 'RECONQUISTA' },
+  { code: '3483', city: 'VERA' },
+  { code: '3487', city: 'ZÁRATE' },
+  { code: '3489', city: 'CAMPANA' },
+  { code: '3491', city: 'CERES' },
+  { code: '3492', city: 'RAFAELA' },
+  { code: '3493', city: 'SUNCHALES' },
+  { code: '3496', city: 'ESPERANZA' },
+  { code: '3497', city: 'LLAMBI CAMPBELL' },
+  { code: '3498', city: 'SAN JUSTO' },
+  { code: '3521', city: 'DEÁN FUNES ' },
+  { code: '3522', city: 'VILLA DE MARÍA' },
+  { code: '3524', city: 'VILLA DEL TOTORAL' },
+  { code: '3525', city: 'JESÚS MARÍA' },
+  { code: '3532', city: 'OLIVA' },
+  { code: '3533', city: 'LAS VARILLAS' },
+  { code: '3537', city: 'BELL VILLE' },
+  { code: '3541', city: 'VILLA CARLOS PAZ' },
+  { code: '3542', city: 'SALSACATE' },
+  { code: '3543', city: 'CÓRDOBA (ARGÜELLO)' },
+  { code: '3544', city: 'VILLA DOLORES' },
+  { code: '3546', city: 'SANTA ROSA DE CALAMUCHITA' },
+  { code: '3547', city: 'ALTA GRACIA' },
+  { code: '3548', city: 'LA FALDA' },
+  { code: '3549', city: 'CRUZ DEL EJE' },
+  { code: '3562', city: 'MORTEROS' },
+  { code: '3563', city: 'BALNEARIA' },
+  { code: '3564', city: 'SAN FRANCISCO' },
+  { code: '3571', city: 'RÍO TERCERO' },
+  { code: '3572', city: 'RÍO SEGUNDO' },
+  { code: '3573', city: 'VILLA DEL ROSARIO' },
+  { code: '3574', city: 'RÍO PRIMERO' },
+  { code: '3575', city: 'LA PUERTA' },
+  { code: '3576', city: 'ARROYITO' },
+  { code: '3582', city: 'SAMPACHO' },
+  { code: '3583', city: 'VICUÑA MACKENNA' },
+  { code: '3584', city: 'LA CARLOTA' },
+  { code: '3585', city: 'ADELIA MARÍA' },
+  { code: '3711', city: 'INGENIERO JUÁREZ' },
+  { code: '3715', city: 'LAS LOMITAS' },
+  { code: '3716', city: 'COMANDANTE FONTANA' },
+  { code: '3718', city: 'CLORINDA' },
+  { code: '3721', city: 'CHARADAI' },
+  { code: '3725', city: 'GENERAL JOSÉ DE SAN MARTÍN' },
+  { code: '3731', city: 'CHARATA ' },
+  { code: '3734', city: 'PRESIDENCIA DE LA PLAZA' },
+  { code: '3735', city: 'VILLA ÁNGELA' },
+  { code: '3741', city: 'BERNARDO DE IRIGOYEN' },
+  { code: '3743', city: 'PUERTO RICO' },
+  { code: '3751', city: 'ELDORADO' },
+  { code: '3754', city: 'LEANDRO N. ALEM' },
+  { code: '3755', city: 'OBERÁ' },
+  { code: '3756', city: 'SANTO TOMÉ' },
+  { code: '3757', city: 'PUERTO IGUAZÚ' },
+  { code: '3758', city: 'APÓSTOLES' },
+  { code: '3772', city: 'PASO DE LOS LIBRES' },
+  { code: '3773', city: 'MERCEDES' },
+  { code: '3774', city: 'CURUZÚ CUATIÁ' },
+  { code: '3775', city: 'MONTE CASEROS' },
+  { code: '3777', city: 'GOYA' },
+  { code: '3781', city: 'CAÁ CATÍ' },
+  { code: '3782', city: 'SALADAS' },
+  { code: '3786', city: 'ITUZAINGÓ' },
+  { code: '3821', city: 'CHEPES' },
+  { code: '3825', city: 'CHILECITO' },
+  { code: '3826', city: 'CHAMICAL' },
+  { code: '3827', city: 'AIMOGASTA' },
+  { code: '3832', city: 'RECREO' },
+  { code: '3835', city: 'ANDALGALÁ' },
+  { code: '3837', city: 'TINOGASTA ' },
+  { code: '3838', city: 'SANTA MARÍA' },
+  { code: '3841', city: 'MONTE QUEMADO' },
+  { code: '3843', city: 'QUIMILÍ' },
+  { code: '3844', city: 'AÑATUYA' },
+  { code: '3845', city: 'LORETO' },
+  { code: '3846', city: 'TINTINA' },
+  { code: '3854', city: 'FRÍAS' },
+  { code: '3855', city: 'SUNCHO CORRAL' },
+  { code: '3856', city: 'VILLA OJO DE AGUA' },
+  { code: '3857', city: 'BANDERA' },
+  { code: '3858', city: 'TERMAS DE RÍO HONDO' },
+  { code: '3861', city: 'NUEVA ESPERANZA' },
+  { code: '3862', city: 'TRANCAS' },
+  { code: '3863', city: 'MONTEROS' },
+  { code: '3865', city: 'CONCEPCIÓN' },
+  { code: '3867', city: 'TAFÍ DEL VALLE' },
+  { code: '3868', city: 'CAFAYATE' },
+  { code: '3869', city: 'RANCHILLOS Y SAN MIGUEL ' },
+  { code: '3873', city: 'TARTAGAL' },
+  { code: '3876', city: 'SAN JOSÉ DE METÁN' },
+  { code: '3877', city: 'JOAQUÍN VÍCTOR GONZÁLEZ' },
+  { code: '3878', city: 'ORÁN' },
+  { code: '3885', city: 'LA QUIACA' },
+  { code: '3886', city: 'LIBERTADOR GENERAL SAN MARTÍN' },
+  { code: '3887', city: 'HUMAHUACA' },
+  { code: '3888', city: 'SAN PEDRO DE JUJUY' },
+  { code: '3891', city: 'GRANEROS' },
+  { code: '3892', city: 'AMAICHA DEL VALLE' },
+  { code: '3894', city: 'BURRUYACÚ' }
+];

package/lib/components/UTPhoneInput/index.js

@@ -0,0 +1,296 @@
+import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import { bool, elementType, func, number, shape, string } from 'prop-types';
+
+import UTBaseInputField from '../UTBaseInputField';
+import UTFieldLabel from '../UTFieldLabel';
+import UTLabel from '../UTLabel';
+import UTValidation from '../UTValidation';
+import { formatErrorToValidation } from '../UTValidation/utils';
+import { LABEL_VARIANTS } from '../../constants/inputs';
+import { COMPONENT_KEYS } from '../UTBaseInputField/constants';
+import { validationDataProptypes } from '../UTValidation/constants';
+
+import { AREA_CODES } from './constants';
+import styles from './styles';
+
+class UTPhoneInput extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      areaCode: '',
+      bigFocus: false,
+      areaCodeError: '',
+      firstFocus: false,
+      isValidCode: false,
+      phoneNumber: '',
+      phoneRef: null,
+      secondFocus: false
+    };
+
+    this.handleFirstBlur = this.handleBlur('firstFocus');
+    this.handleSecondBlur = this.handleBlur('secondFocus');
+    this.handleFirstFocus = this.handleFocus('firstFocus');
+    this.handleSecondFocus = this.handleFocus('secondFocus');
+  }
+
+  componentDidMount() {
+    this.updateValue();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { value } = this.props;
+    if (prevProps.value !== value) this.updateValue();
+  }
+
+  changeText = updateFunction => {
+    const { areaCode, phoneNumber } = this.state;
+    const { withAreaCode } = this.props;
+
+    if (withAreaCode && (areaCode || phoneNumber)) {
+      updateFunction(`${areaCode}-${phoneNumber}`);
+    } else if (!withAreaCode) {
+      updateFunction(phoneNumber);
+    } else {
+      updateFunction('');
+    }
+  };
+
+  getAreaCodeState = value => {
+    const {
+      translations: { areaCodeWithoutZeroError, invalidAreaCodeError }
+    } = this.props;
+    let newState = {};
+    if (value && value.slice(0, 1) === '0') {
+      newState = { areaCodeError: areaCodeWithoutZeroError };
+    } else {
+      const code = AREA_CODES.find(element => element.code === value);
+      newState = {
+        areaCodeError: value?.length && !code && invalidAreaCodeError,
+        isValidCode: !!code,
+        phoneNumber: ''
+      };
+    }
+
+    return { ...newState, areaCode: value };
+  };
+
+  handleBlur = keyname => async () => {
+    this.setState({
+      [keyname]: false
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 150));
+
+    const { secondFocus, firstFocus, bigFocus } = this.state;
+    const { onBlur } = this.props;
+
+    if (!secondFocus && !firstFocus && bigFocus) {
+      this.changeText(onBlur);
+      this.setState({
+        bigFocus: false
+      });
+    }
+  };
+
+  handleChangeAreaCode = value => {
+    this.setState(this.getAreaCodeState(value), () => {
+      const { onChange } = this.props;
+      this.changeText(onChange);
+    });
+  };
+
+  handleChangePhone = value => {
+    this.setState({ phoneNumber: value }, () => {
+      const { onChange } = this.props;
+      this.changeText(onChange);
+    });
+  };
+
+  handleFocus = keyname => () => {
+    const { onFocus } = this.props;
+    const { bigFocus } = this.state;
+
+    if (!bigFocus) {
+      onFocus();
+    }
+
+    this.setState({
+      [keyname]: true,
+      bigFocus: true
+    });
+  };
+
+  handleSubmitEditing = () => {
+    const { phoneRef, areaCodeError } = this.state;
+    if (!areaCodeError) {
+      phoneRef.focus();
+    }
+  };
+
+  phoneInputRef = ref => this.setState({ phoneRef: ref });
+
+  updateValue = () => {
+    const { value, withAreaCode } = this.props;
+    if (value) {
+      if (withAreaCode) {
+        const phone = value.split('-');
+        if (phone.length === 2) {
+          const newAreaCodeState = this.getAreaCodeState(phone[0]);
+          this.setState({
+            ...newAreaCodeState,
+            phoneNumber: phone[1]
+          });
+        }
+      } else {
+        this.setState({ phoneNumber: value });
+      }
+    } else {
+      this.setState({
+        areaCode: '',
+        phoneNumber: '',
+        areaCodeError: '',
+        isValidCode: false
+      });
+    }
+  };
+
+  render() {
+    const {
+      areaCodePlaceholder,
+      countryCode,
+      editable,
+      formError,
+      helpText,
+      InputRef,
+      label,
+      labelVariant,
+      maxLength,
+      onSubmitEditing,
+      placeholder,
+      readOnly,
+      required,
+      RightIcon,
+      validations,
+      withAreaCode
+    } = this.props;
+    const { areaCode, areaCodeError, isValidCode, phoneNumber } = this.state;
+
+    const labelColorTheme = readOnly ? 'gray' : 'dark';
+
+    const validationErrors =
+      validations ||
+      (areaCodeError && formatErrorToValidation(areaCodeError)) ||
+      (formError && formatErrorToValidation(formError));
+
+    const hasError = validationErrors?.length > 0;
+
+    return (
+      <View style={styles.container}>
+        {label && (
+          <UTFieldLabel
+            colorTheme={labelColorTheme}
+            required={required}
+            variant={LABEL_VARIANTS[labelVariant]}
+          >
+            {label}
+          </UTFieldLabel>
+        )}
+        <View style={styles.inputsContainer}>
+          {withAreaCode ? (
+            <UTBaseInputField
+              alwaysShowPlaceholder
+              disabled={!editable || readOnly}
+              error={hasError}
+              leftAdornments={[]}
+              maxLength={4}
+              onBlur={this.handleFirstBlur}
+              onChange={this.handleChangeAreaCode}
+              onFocus={this.handleFirstFocus}
+              onSubmitEditing={this.handleSubmitEditing}
+              placeholder={areaCodePlaceholder}
+              ref={InputRef}
+              returnKeyType="next"
+              rightAdornments={[
+                { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } }
+              ]}
+              style={{ container: styles.areaCode }}
+              type="number"
+              value={areaCode}
+            />
+          ) : null}
+          <View style={styles.phoneNumber}>
+            <UTBaseInputField
+              alwaysShowPlaceholder
+              disabled={(withAreaCode && !isValidCode) || !editable || readOnly}
+              error={hasError && !areaCodeError}
+              leftAdornments={
+                countryCode && !withAreaCode
+                  ? [{ name: COMPONENT_KEYS.PREFIX, props: { text: countryCode } }]
+                  : []
+              }
+              maxLength={withAreaCode ? maxLength - (areaCode?.length || 0) : maxLength}
+              onBlur={this.handleSecondBlur}
+              onChange={this.handleChangePhone}
+              onFocus={this.handleSecondFocus}
+              onSubmitEditing={onSubmitEditing}
+              placeholder={placeholder}
+              ref={this.phoneInputRef}
+              returnKeyType="done"
+              rightAdornments={[
+                { name: COMPONENT_KEYS.ICON, props: { Icon: RightIcon, changeOnError: true } }
+              ]}
+              type="number"
+              value={phoneNumber}
+            />
+          </View>
+        </View>
+        {helpText && (
+          <UTLabel colorTheme="gray" variant="small">
+            {helpText}
+          </UTLabel>
+        )}
+        {validationErrors && <UTValidation validationData={validationErrors} />}
+      </View>
+    );
+  }
+}
+
+UTPhoneInput.defaultProps = {
+  labelVariant: 'large',
+  maxLength: 10,
+  translations: {
+    areaCodeWithoutZeroError: 'Ingrese el código sin 0',
+    invalidAreaCodeError: 'Código de área inválido'
+  },
+  withAreaCode: true
+};
+
+UTPhoneInput.propTypes = {
+  areaCodePlaceholder: string,
+  countryCode: string,
+  editable: bool,
+  formError: string,
+  helpText: string,
+  InputRef: func,
+  label: string,
+  labelVariant: string,
+  maxLength: number,
+  onBlur: func,
+  onChange: func,
+  onFocus: func,
+  onSubmitEditing: func,
+  placeholder: string,
+  readOnly: bool,
+  required: bool,
+  RightIcon: elementType,
+  translations: shape({
+    areaCodeWithoutZeroError: string,
+    invalidAreaCodeError: string
+  }),
+  validations: validationDataProptypes,
+  value: string,
+  withAreaCode: bool
+};
+
+export default UTPhoneInput;

package/lib/components/UTPhoneInput/styles.js

@@ -0,0 +1,18 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  areaCode: {
+    flex: 1
+  },
+  container: {
+    gap: 12
+  },
+  inputsContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    gap: 8
+  },
+  phoneNumber: {
+    flex: 2
+  }
+});

package/lib/components/UTSelectableCard/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import { bool, func, shape, string } from 'prop-types';
-import { View } from 'react-native';
+import { bool, func, number, shape, string } from 'prop-types';
+import { Image, View } from 'react-native';
 import merge from 'lodash/merge';
 import { isEmpty } from 'lodash';
 
 import Touchable from '../Touchable';
 import Surface from '../Surface';
 import UTTooltip from '../UTTooltip';
-import Label from '../Label';
 import { useTheme } from '../../theming';
-import Icon from '../Icon';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
 
-import { getUTSelectableCardStyles, ICON_SIZE } from './styles';
+import { getColorTheme, getUTSelectableCardStyles, ICON_SIZE } from './styles';
 
 const UTSelectableCard = ({
   additionalInfo = {},
@@ -19,7 +19,7 @@ const UTSelectableCard = ({
   checkIcon = true,
   description,
   disabled = false,
-  icon,
+  Icon,
   onPress,
   selected = false,
   size = 'medium',
@@ -34,8 +34,7 @@ const UTSelectableCard = ({
     theme?.UTSelectableCard,
     style
   );
-
-  const { selectedColor = 'royalblue', disabledColor = 'gray', baseColor = 'black' } = themedStyles;
+  const colorTheme = getColorTheme(selected, disabled);
 
   return (
     <Surface style={themedStyles.outerContainer}>
@@ -50,72 +49,66 @@ const UTSelectableCard = ({
         ]}
       >
         <View style={themedStyles.container}>
-          {!isEmpty(icon) && (
-            <Icon
-              color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-              height={ICON_SIZE}
-              name={icon.name}
-              size={ICON_SIZE}
-              style={themedStyles.icon}
-              type={icon.type}
-              width={ICON_SIZE}
-            />
-          )}
+          {!isEmpty(Icon) &&
+            (Icon.url ? (
+              <Image
+                source={{ uri: Icon.url }}
+                width={Icon.size || ICON_SIZE}
+                height={Icon.size || ICON_SIZE}
+                style={[themedStyles.image, themedStyles.icon]}
+              />
+            ) : (
+              <UTIcon
+                name={Icon.name}
+                colorTheme={colorTheme}
+                shade={Icon.shade}
+                size={Icon.size || ICON_SIZE}
+                style={themedStyles.icon}
+              />
+            ))}
           <View style={themedStyles.textContainer}>
             <View style={themedStyles.column}>
               <View style={[themedStyles.titleAndTooltip, selected && themedStyles.selectedTitleAndTooltip]}>
-                <Label
-                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
+                <UTLabel
+                  colorTheme={colorTheme}
+                  weight="medium"
+                  variant="subtitle1"
                   style={tooltip && themedStyles.titleMargin}
                 >
                   {titleText}
-                </Label>
+                </UTLabel>
                 {tooltip && (
-                  <UTTooltip content={<Label>{tooltip}</Label>} position="top">
-                    <Icon
-                      color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                      name="help-outline"
-                    />
+                  <UTTooltip content={<UTLabel>{tooltip}</UTLabel>} position="top">
+                    <UTIcon colorTheme={colorTheme} name="IconHelp" />
                   </UTTooltip>
                 )}
               </View>
               {description && (
-                <Label
-                  color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                  medium
-                  style={themedStyles.description}
-                >
+                <UTLabel colorTheme={selected ? 'accent' : 'gray'} style={themedStyles.description}>
                   {description}
-                </Label>
+                </UTLabel>
               )}
             </View>
             {!isEmpty(additionalInfo) && (
               <View style={themedStyles.column}>
                 {!!additionalInfo.title && (
-                  <Label
-                    bold
-                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                    medium
-                    right
-                  >
+                  <UTLabel colorTheme={colorTheme} style={themedStyles.additionalInfo}>
                     {additionalInfo.title}
-                  </Label>
+                  </UTLabel>
                 )}
                 {!!additionalInfo.description && (
-                  <Label
-                    color={selected ? selectedColor : disabled ? disabledColor : baseColor}
-                    medium
-                    right
-                    style={themedStyles.description}
+                  <UTLabel
+                    colorTheme={colorTheme}
+                    style={[themedStyles.description, themedStyles.additionalInfo]}
                   >
                     {additionalInfo.description}
-                  </Label>
+                  </UTLabel>
                 )}
               </View>
             )}
           </View>
           {checkIcon && selected && (
-            <Icon color={selectedColor} name="check" style={themedStyles.checkIcon} />
+            <UTIcon colorTheme="accent" name="IconCheck" style={themedStyles.checkIcon} />
           )}
         </View>
       </Touchable>
@@ -129,7 +122,7 @@ UTSelectableCard.propTypes = {
   checkIcon: bool,
   description: string,
   disabled: bool,
-  icon: shape({ name: string, type: string }),
+  Icon: shape({ name: string, shade: string, size: number }),
   onPress: func,
   selected: bool,
   size: string,

package/lib/components/UTSelectableCard/styles.js

@@ -1,9 +1,12 @@
 import { StyleSheet } from 'react-native';
 
-export const ICON_SIZE = 36;
+export const ICON_SIZE = 40;
 
 export const getUTSelectableCardStyles = (theme = {}) =>
   StyleSheet.create({
+    additionalInfo: {
+      textAlign: 'right'
+    },
     checkIcon: {
       marginLeft: 16
     },
@@ -82,3 +85,5 @@ export const getUTSelectableCardStyles = (theme = {}) =>
       borderWidth: 2
     }
   });
+
+export const getColorTheme = (selected, disabled) => (selected ? 'accent' : disabled ? 'gray' : 'dark');

package/lib/components/UTTextArea/index.js

@@ -5,7 +5,9 @@ import propTypes from '../UTTextInput/versions/V1/proptypes';
 
 import { DEFAULT_PROPS } from './constants';
 
-const UTTextArea = ({ maxRows, ...props }) => <UTTextInput maxRows={maxRows} version="V1" {...props} />;
+const UTTextArea = ({ maxRows, ...props }) => (
+  <UTTextInput showCharacterCount maxRows={maxRows} version="V1" {...props} />
+);
 
 UTTextArea.defaultProps = DEFAULT_PROPS;
 

package/lib/components/UTTextInput/versions/V1/components/TextInputField/index.js

@@ -13,7 +13,7 @@ const TextInputField = ({
   InputRef,
   inputSize,
   LeftIcon,
-  maxCount,
+  maxLength,
   maxRows,
   onBlur,
   onChange,
@@ -24,6 +24,7 @@ const TextInputField = ({
   readOnly,
   returnKeyType,
   RightIcon,
+  showCharacterCount,
   style,
   suffix,
   tooltip,
@@ -49,7 +50,7 @@ const TextInputField = ({
       error={error}
       inputSize={inputSize}
       leftAdornments={leftAdornments}
-      maxCount={maxCount}
+      maxLength={maxLength}
       maxRows={maxRows}
       onBlur={onBlur}
       onChange={onChange}
@@ -60,6 +61,7 @@ const TextInputField = ({
       ref={InputRef}
       returnKeyType={returnKeyType}
       rightAdornments={rightAdornments}
+      showCharacterCount={showCharacterCount}
       style={style}
       type={type}
       value={value}
@@ -77,7 +79,7 @@ TextInputField.propTypes = {
   InputRef: func,
   inputSize: string,
   LeftIcon: elementType,
-  maxCount: number,
+  maxLength: number,
   maxRows: number,
   onBlur: func,
   onChange: func,
@@ -88,6 +90,7 @@ TextInputField.propTypes = {
   readOnly: bool,
   returnKeyType: string,
   RightIcon: elementType,
+  showCharacterCount: bool,
   style: shape({
     container: ViewPropTypes.style,
     input: ViewPropTypes.style,

package/lib/components/UTTextInput/versions/V1/index.js

@@ -22,7 +22,7 @@ const UTTextInput = ({
   label,
   labelVariant,
   LeftIcon,
-  maxCount,
+  maxLength,
   maxRows,
   onBlur,
   onChange,
@@ -34,6 +34,7 @@ const UTTextInput = ({
   required,
   returnKeyType,
   RightIcon,
+  showCharacterCount,
   style,
   suffix,
   tooltip,
@@ -60,7 +61,7 @@ const UTTextInput = ({
         InputRef={InputRef}
         inputSize={inputSize}
         LeftIcon={LeftIcon}
-        maxCount={maxCount}
+        maxLength={maxLength}
         maxRows={maxRows}
         onBlur={onBlur}
         onChange={onChange}
@@ -71,6 +72,7 @@ const UTTextInput = ({
         readOnly={readOnly}
         returnKeyType={returnKeyType}
         RightIcon={RightIcon}
+        showCharacterCount={showCharacterCount}
         style={style}
         suffix={suffix}
         tooltip={tooltip}

package/lib/components/UTTextInput/versions/V1/proptypes.js

@@ -14,7 +14,7 @@ export default {
   label: string,
   labelVariant: string,
   LeftIcon: elementType,
-  maxCount: number,
+  maxLength: number,
   maxRows: number,
   onBlur: func,
   onChange: func,
@@ -26,6 +26,7 @@ export default {
   required: bool,
   returnKeyType: string,
   RightIcon: elementType,
+  showCharacterCount: bool,
   style: shape({
     container: ViewPropTypes.style,
     input: ViewPropTypes.style,

package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/styles.js

@@ -13,7 +13,7 @@ export default StyleSheet.create({
     width: '100%'
   },
   bottomSafeArea: safeArea => ({
-    paddingBottom: safeArea + 16
+    paddingBottom: safeArea
   }),
   bottomNav: {
     backgroundColor: 'white'

package/lib/constants/inputs.js

@@ -0,0 +1,4 @@
+export const LABEL_VARIANTS = {
+  large: 'body',
+  small: 'small'
+};

package/lib/index.js

@@ -62,6 +62,7 @@ export { default as UTStepFeedback } from './components/UTStepFeedback';
 export { default as UTAutocomplete } from './components/UTAutocomplete';
 export { default as UTTracker } from './components/UTTracker';
 export { default as ImageRadio } from './components/ImageRadio';
+export { default as UTPhoneInput } from './components/UTPhoneInput';
 // Loading
 export { default as Loading } from './components/Loading';
 export { default as UTLoading } from './components/UTLoading';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.14.5",
+  "version": "1.15.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [