@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTConsumptionBar/index.js

@@ -1 +1,109 @@
-import React,{useRef,useEffect,useState}from"react";import Tippy from"@tippy.js/react";import{arrayOf,bool,object,number,shape,string}from"prop-types";import UTLabel from"../UTLabel";import ConsumptionBarIndicator from"./components/ConsumptionBarIndicator";import ConsumptionBarIndicatorTop from"./components/ConsumptionBarIndicatorTop";import{UP,DOWN,MIN_LINE_WIDTH}from"./constants";import styles from"./styles.module.scss";const UTConsumptionBar=_ref=>{let{categoryLines:categoryLines,classes:classes,hideAmount:hideAmount=!1,values:values}=_ref;const widthRef=useRef(),[showLabel,setShowLabel]=useState(!0),handleSetShowLabel=()=>{widthRef.current.offsetWidth<MIN_LINE_WIDTH?setShowLabel(!1):setShowLabel(!0)};useEffect(()=>(window.addEventListener("resize",handleSetShowLabel),handleSetShowLabel(),()=>window.removeEventListener("resize",handleSetShowLabel)),[]);const downIndicators=values.filter(value=>value.position===DOWN),upIndicators=values.filter(value=>value.position===UP),maxValue=Math.max(...categoryLines.rates.map(category=>category.range[0])),getLeftPosition=watts=>2500/maxValue*(watts/25),getIndicatorPosition=value=>value<=maxValue&&value>=0?getLeftPosition(value):value<0?0:101.7;return React.createElement("div",{className:styles.estimatedContainer},React.createElement("div",{className:"".concat(styles.container," ").concat(null==classes?void 0:classes.container)},React.createElement("div",{className:"".concat(styles.bar," ").concat(downIndicators.length>0&&styles.colorizedBar),ref:widthRef}),upIndicators.map(indicator=>React.createElement(ConsumptionBarIndicatorTop,{classes:classes,key:indicator.title,left:getIndicatorPosition(indicator.value),title:indicator.title,subtitle:indicator.subtitle})),categoryLines.rates.map(function(){let categoryLine=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},index=arguments.length>1?arguments[1]:void 0,elements=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[];const{range:range,category:category,name:name}=categoryLine,kwh=range[0],barPosition=getLeftPosition(kwh);let nextBarPosition;nextBarPosition=elements.length===index+1?barPosition+4:getLeftPosition(elements[index+1].kwh);const width=(nextBarPosition-barPosition)/2,tippyContent=Number.isInteger(range[1])?"".concat(range[0]," - ").concat(range[1]," kWh"):"".concat(range[0],"+ kWh");return React.createElement("div",{key:category,className:styles.categoryLineContainer,style:{left:"calc(".concat(getLeftPosition(kwh),"%)"),width:"calc(".concat(width,"% + 7px)")}},React.createElement("div",{className:styles.lineContainer},React.createElement("div",{className:styles.line})),React.createElement(Tippy,{content:"Categoría ".concat(name,": ").concat(tippyContent),arrow:!0},React.createElement("span",null,React.createElement(UTLabel,{className:"".concat(styles.categoryLineText," ").concat(null==classes?void 0:classes.categoryLineText),colorTheme:"information",variant:"xsmall",weight:"bold"},showLabel?name:""))))}),downIndicators.map(indicator=>React.createElement(ConsumptionBarIndicator,{classes:classes,className:styles.indicator,hideAmount:hideAmount,key:indicator.title,left:getIndicatorPosition(indicator.value),total:indicator.total,unit:indicator.title,value:indicator.value}))),React.createElement("div",{className:"".concat(styles.finishLine1," ").concat(downIndicators.length>0&&styles.colorizedLine)}))};UTConsumptionBar.propTypes={categoryLines:object,classes:object,hideAmount:bool,values:arrayOf(shape({position:string,subtitle:string,title:string,total:number,value:number}))};export default UTConsumptionBar;
+import React, { useRef, useEffect, useState } from 'react';
+import Tippy from '@tippy.js/react';
+import { arrayOf, bool, object, number, shape, string } from 'prop-types';
+import UTLabel from '../UTLabel';
+import ConsumptionBarIndicator from './components/ConsumptionBarIndicator';
+import ConsumptionBarIndicatorTop from './components/ConsumptionBarIndicatorTop';
+import { UP, DOWN, MIN_LINE_WIDTH } from './constants';
+import styles from './styles.module.scss';
+const UTConsumptionBar = _ref => {
+  let {
+    categoryLines,
+    classes,
+    hideAmount = false,
+    values
+  } = _ref;
+  const widthRef = useRef();
+  const [showLabel, setShowLabel] = useState(true);
+  const handleSetShowLabel = () => {
+    if (widthRef.current.offsetWidth < MIN_LINE_WIDTH) setShowLabel(false);else setShowLabel(true);
+  };
+  useEffect(() => {
+    window.addEventListener('resize', handleSetShowLabel);
+    handleSetShowLabel();
+    return () => window.removeEventListener('resize', handleSetShowLabel);
+  }, []);
+  const downIndicators = values.filter(value => value.position === DOWN);
+  const upIndicators = values.filter(value => value.position === UP);
+  const maxValue = Math.max(...categoryLines.rates.map(category => category.range[0]));
+  const getLeftPosition = watts => 25 * 100 / maxValue * (watts / 25);
+  const getIndicatorPosition = value => value <= maxValue && value >= 0 ? getLeftPosition(value) : value < 0 ? 0 : 101.7;
+  const renderCategoryLines = function () {
+    let categoryLine = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let index = arguments.length > 1 ? arguments[1] : undefined;
+    let elements = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    const {
+      range,
+      category,
+      name
+    } = categoryLine;
+    const kwh = range[0];
+    const barPosition = getLeftPosition(kwh);
+    let nextBarPosition;
+    if (elements.length === index + 1) {
+      nextBarPosition = barPosition + 4;
+    } else {
+      nextBarPosition = getLeftPosition(elements[index + 1].kwh);
+    }
+    const width = (nextBarPosition - barPosition) / 2;
+    const tippyContent = Number.isInteger(range[1]) ? "".concat(range[0], " - ").concat(range[1], " kWh") : "".concat(range[0], "+ kWh");
+    return /*#__PURE__*/React.createElement("div", {
+      key: category,
+      className: styles.categoryLineContainer,
+      style: {
+        left: "calc(".concat(getLeftPosition(kwh), "%)"),
+        width: "calc(".concat(width, "% + 7px)")
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.lineContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.line
+    })), /*#__PURE__*/React.createElement(Tippy, {
+      content: "Categor\xEDa ".concat(name, ": ").concat(tippyContent),
+      arrow: true
+    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTLabel, {
+      className: "".concat(styles.categoryLineText, " ").concat(classes === null || classes === void 0 ? void 0 : classes.categoryLineText),
+      colorTheme: "information",
+      variant: "xsmall",
+      weight: "bold"
+    }, showLabel ? name : ''))));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.estimatedContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(classes === null || classes === void 0 ? void 0 : classes.container)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.bar, " ").concat(downIndicators.length > 0 && styles.colorizedBar),
+    ref: widthRef
+  }), upIndicators.map(indicator => /*#__PURE__*/React.createElement(ConsumptionBarIndicatorTop, {
+    classes: classes,
+    key: indicator.title,
+    left: getIndicatorPosition(indicator.value),
+    title: indicator.title,
+    subtitle: indicator.subtitle
+  })), categoryLines.rates.map(renderCategoryLines), downIndicators.map(indicator => /*#__PURE__*/React.createElement(ConsumptionBarIndicator, {
+    classes: classes,
+    className: styles.indicator,
+    hideAmount: hideAmount,
+    key: indicator.title,
+    left: getIndicatorPosition(indicator.value),
+    total: indicator.total,
+    unit: indicator.title,
+    value: indicator.value
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.finishLine1, " ").concat(downIndicators.length > 0 && styles.colorizedLine)
+  }));
+};
+UTConsumptionBar.propTypes = {
+  categoryLines: object,
+  classes: object,
+  hideAmount: bool,
+  values: arrayOf(shape({
+    position: string,
+    subtitle: string,
+    title: string,
+    total: number,
+    value: number
+  }))
+};
+export default UTConsumptionBar;

package/dist/esm/components/UTCreditCard/constants.js

@@ -1 +1,22 @@
-import{normalizeName,formatCreditCardNumber,formatCVC,formatExpirationDate}from"@widergy/web-utils/lib/normalize";export const fields={NUMBER:"number",EXPIRY:"expiry",CVC:"cvc",NAME:"name"};export const getFormater=(cardField,nameFiled,cvcField,expires)=>({[cardField]:formatCreditCardNumber,[cvcField]:formatCVC,[expires]:formatExpirationDate,[nameFiled]:normalizeName});export const DEFAULT_CHILD_KEYS=["cardNumber","holderName","securityCode","expMonth","expYear","expires"];export const DEFAULT_TEXTS={cardExpDate:"Vencimiento",cardNamePlaceholder:"Nombre completo",cvcTitle:"Cod. seguridad",expiryTitle:"Vencimiento",nameTitle:"Nombre y apellido",numberTitle:"N° de tarjeta"};
+import { normalizeName, formatCreditCardNumber, formatCVC, formatExpirationDate } from '@widergy/web-utils/lib/normalize';
+export const fields = {
+  NUMBER: 'number',
+  EXPIRY: 'expiry',
+  CVC: 'cvc',
+  NAME: 'name'
+};
+export const getFormater = (cardField, nameFiled, cvcField, expires) => ({
+  [cardField]: formatCreditCardNumber,
+  [cvcField]: formatCVC,
+  [expires]: formatExpirationDate,
+  [nameFiled]: normalizeName
+});
+export const DEFAULT_CHILD_KEYS = ['cardNumber', 'holderName', 'securityCode', 'expMonth', 'expYear', 'expires'];
+export const DEFAULT_TEXTS = {
+  cardExpDate: 'Vencimiento',
+  cardNamePlaceholder: 'Nombre completo',
+  cvcTitle: 'Cod. seguridad',
+  expiryTitle: 'Vencimiento',
+  nameTitle: 'Nombre y apellido',
+  numberTitle: 'N° de tarjeta'
+};

package/dist/esm/components/UTCreditCard/index.js

@@ -1 +1,151 @@
-import{bool,string,object,array,func}from"prop-types";import Card from"react-credit-cards";import React,{useReducer,useState}from"react";import UTPasswordField from"../UTPasswordField";import UTTextInput from"../UTTextInput";import{TEST_IDS}from"../../constants/testIds";import{CREDIT_CARD_NAMES}from"../../constants/inputs";import"react-credit-cards/es/styles-compiled.css";import{fields,getFormater,DEFAULT_CHILD_KEYS,DEFAULT_TEXTS}from"./constants";import styles from"./styles.module.scss";const{creditCard:creditCard}=TEST_IDS,UTCreditCard=_ref=>{var _value$expYearField;let{childKeys:childKeys=DEFAULT_CHILD_KEYS,className:className,error:error,onChange:onChange,texts:{cardExpDate:cardExpDate,cardNamePlaceholder:cardNamePlaceholder,cvcTitle:cvcTitle,expiryTitle:expiryTitle,nameTitle:nameTitle,numberTitle:numberTitle}=DEFAULT_TEXTS,unmaskCsc:unmaskCsc,value:value={}}=_ref;const[cardField,nameFiled,cvcField,expMonthField,expYearField,expires]=childKeys,formater=getFormater(cardField,nameFiled,cvcField,expires),[cvcVisibility,setCvcVisibility]=useState(!1),[values,setValues]=useReducer((state,_ref2)=>{let{field:field,newVal:newVal}=_ref2;const formatedValue=formater[field](newVal,state[cardField]),newState={...state,[field]:formatedValue};return field===expires&&(newState[expMonthField]=formatedValue.substring(0,2),newState[expYearField]="20".concat(formatedValue.substring(3,5))),onChange(newState),newState},{[cardField]:"",[nameFiled]:"",[cvcField]:"",[expMonthField]:"",[expYearField]:"",[expires]:value[expMonthField]?"".concat(value[expMonthField],"/").concat(null===(_value$expYearField=value[expYearField])||void 0===_value$expYearField?void 0:_value$expYearField.substring(2,4)):"",...value}),[focused,setFocused]=useState(""),errors=error?JSON.parse(error):{},onChangeField=field=>newVal=>setValues({field:field,newVal:newVal}),CSVComponent=unmaskCsc?UTTextInput:UTPasswordField;return React.createElement("div",{className:"".concat(styles.container," ").concat(className)},React.createElement(Card,{cvc:cvcVisibility||unmaskCsc?values[cvcField]:values[cvcField].replace(/./g,"*"),expiry:values.expiry,focused:focused,locale:{valid:cardExpDate},name:values[nameFiled],number:values[cardField]||"",placeholders:{name:cardNamePlaceholder}}),React.createElement("div",{className:styles.fields},React.createElement(UTTextInput,{autocomplete:"cc-number",dataTestId:creditCard.cardField,error:errors[cardField],name:CREDIT_CARD_NAMES.cardNumber,onChange:onChangeField(cardField),onFocus:()=>setFocused(fields.NUMBER),required:!0,title:numberTitle,validationDataTestId:"".concat(creditCard.cardField,".validation"),value:values[cardField],version:"V1"}),React.createElement("div",{className:styles.row},React.createElement(UTTextInput,{autocomplete:"cc-exp",classNames:{container:styles.inRow},dataTestId:creditCard.expires,error:errors[expires],name:CREDIT_CARD_NAMES.cardExpDate,onChange:onChangeField(expires),onFocus:()=>setFocused(fields.EXPIRY),required:!0,title:expiryTitle,validationDataTestId:"".concat(creditCard.expires,".validation"),value:values[expires],version:"V1"}),React.createElement(CSVComponent,{autocomplete:unmaskCsc?"cc-csc":"off",classNames:{container:styles.inRow},dataTestId:creditCard.cvcField,error:errors[cvcField],name:CREDIT_CARD_NAMES.cardCvc,onChange:onChangeField(cvcField),onFocus:()=>setFocused(fields.CVC),onVisibilityToggle:setCvcVisibility,required:!0,title:cvcTitle,validationDataTestId:"".concat(creditCard.cvcField,".validation"),value:values[cvcField],version:"V1"})),React.createElement(UTTextInput,{autocomplete:"cc-name",dataTestId:creditCard.nameField,error:errors[nameFiled],name:CREDIT_CARD_NAMES.cardName,onChange:onChangeField(nameFiled),required:!0,onFocus:()=>setFocused(fields.NAME),title:nameTitle,validationDataTestId:"".concat(creditCard.nameField,".validation"),value:values[nameFiled],version:"V1"})))};UTCreditCard.propTypes={childKeys:array,className:string,error:object,onChange:func,texts:object,unmaskCsc:bool,value:object};export default UTCreditCard;
+import { bool, string, object, array, func } from 'prop-types';
+import Card from 'react-credit-cards';
+import React, { useReducer, useState } from 'react';
+import UTPasswordField from '../UTPasswordField';
+import UTTextInput from '../UTTextInput';
+import { TEST_IDS } from '../../constants/testIds';
+import { CREDIT_CARD_NAMES } from '../../constants/inputs';
+import 'react-credit-cards/es/styles-compiled.css';
+import { fields, getFormater, DEFAULT_CHILD_KEYS, DEFAULT_TEXTS } from './constants';
+import styles from './styles.module.scss';
+const {
+  creditCard
+} = TEST_IDS;
+const UTCreditCard = _ref => {
+  var _value$expYearField;
+  let {
+    childKeys = DEFAULT_CHILD_KEYS,
+    className,
+    error,
+    onChange,
+    texts: {
+      cardExpDate,
+      cardNamePlaceholder,
+      cvcTitle,
+      expiryTitle,
+      nameTitle,
+      numberTitle
+    } = DEFAULT_TEXTS,
+    unmaskCsc,
+    value = {}
+  } = _ref;
+  const [cardField, nameFiled, cvcField, expMonthField, expYearField, expires] = childKeys;
+  const formater = getFormater(cardField, nameFiled, cvcField, expires);
+  const [cvcVisibility, setCvcVisibility] = useState(false);
+  const [values, setValues] = useReducer((state, _ref2) => {
+    let {
+      field,
+      newVal
+    } = _ref2;
+    const formatedValue = formater[field](newVal, state[cardField]);
+    const newState = {
+      ...state,
+      [field]: formatedValue
+    };
+    if (field === expires) {
+      newState[expMonthField] = formatedValue.substring(0, 2);
+      newState[expYearField] = "20".concat(formatedValue.substring(3, 5));
+    }
+    onChange(newState);
+    return newState;
+  }, {
+    [cardField]: '',
+    [nameFiled]: '',
+    [cvcField]: '',
+    [expMonthField]: '',
+    [expYearField]: '',
+    [expires]: value[expMonthField] ? "".concat(value[expMonthField], "/").concat((_value$expYearField = value[expYearField]) === null || _value$expYearField === void 0 ? void 0 : _value$expYearField.substring(2, 4)) : '',
+    ...value
+  });
+  const [focused, setFocused] = useState('');
+  const errors = error ? JSON.parse(error) : {};
+  const onChangeField = field => newVal => setValues({
+    field,
+    newVal
+  });
+  const CSVComponent = unmaskCsc ? UTTextInput : UTPasswordField;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.container, " ").concat(className)
+  }, /*#__PURE__*/React.createElement(Card, {
+    cvc: cvcVisibility || unmaskCsc ? values[cvcField] : values[cvcField].replace(/./g, '*'),
+    expiry: values.expiry,
+    focused: focused,
+    locale: {
+      valid: cardExpDate
+    },
+    name: values[nameFiled],
+    number: values[cardField] || '',
+    placeholders: {
+      name: cardNamePlaceholder
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.fields
+  }, /*#__PURE__*/React.createElement(UTTextInput, {
+    autocomplete: "cc-number",
+    dataTestId: creditCard.cardField,
+    error: errors[cardField],
+    name: CREDIT_CARD_NAMES.cardNumber,
+    onChange: onChangeField(cardField),
+    onFocus: () => setFocused(fields.NUMBER),
+    required: true,
+    title: numberTitle,
+    validationDataTestId: "".concat(creditCard.cardField, ".validation"),
+    value: values[cardField],
+    version: "V1"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.row
+  }, /*#__PURE__*/React.createElement(UTTextInput, {
+    autocomplete: "cc-exp",
+    classNames: {
+      container: styles.inRow
+    },
+    dataTestId: creditCard.expires,
+    error: errors[expires],
+    name: CREDIT_CARD_NAMES.cardExpDate,
+    onChange: onChangeField(expires),
+    onFocus: () => setFocused(fields.EXPIRY),
+    required: true,
+    title: expiryTitle,
+    validationDataTestId: "".concat(creditCard.expires, ".validation"),
+    value: values[expires],
+    version: "V1"
+  }), /*#__PURE__*/React.createElement(CSVComponent, {
+    autocomplete: unmaskCsc ? 'cc-csc' : 'off',
+    classNames: {
+      container: styles.inRow
+    },
+    dataTestId: creditCard.cvcField,
+    error: errors[cvcField],
+    name: CREDIT_CARD_NAMES.cardCvc,
+    onChange: onChangeField(cvcField),
+    onFocus: () => setFocused(fields.CVC),
+    onVisibilityToggle: setCvcVisibility,
+    required: true,
+    title: cvcTitle,
+    validationDataTestId: "".concat(creditCard.cvcField, ".validation"),
+    value: values[cvcField],
+    version: "V1"
+  })), /*#__PURE__*/React.createElement(UTTextInput, {
+    autocomplete: "cc-name",
+    dataTestId: creditCard.nameField,
+    error: errors[nameFiled],
+    name: CREDIT_CARD_NAMES.cardName,
+    onChange: onChangeField(nameFiled),
+    required: true,
+    onFocus: () => setFocused(fields.NAME),
+    title: nameTitle,
+    validationDataTestId: "".concat(creditCard.nameField, ".validation"),
+    value: values[nameFiled],
+    version: "V1"
+  })));
+};
+UTCreditCard.propTypes = {
+  childKeys: array,
+  className: string,
+  error: object,
+  onChange: func,
+  texts: object,
+  unmaskCsc: bool,
+  value: object
+};
+export default UTCreditCard;

package/dist/esm/components/UTCuit/index.js

@@ -1 +1,19 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const UTCuit=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTCuit.propTypes={version:string};export default UTCuit;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTCuit = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTCuit.propTypes = {
+  version: string
+};
+export default UTCuit;

package/dist/esm/components/UTCuit/theme.js

@@ -1 +1,59 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../scss/variables/colors.module.scss";export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{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:getIn(theme,["UTTextInput","helperText","color"],theme.Palette.error["05"])}}}});
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../scss/variables/colors.module.scss';
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    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: getIn(theme, ['UTTextInput', 'helperText', 'color'], theme.Palette.error['05'])
+      }
+    }
+  }
+});

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

@@ -1 +1,177 @@
-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 TextField from"@material-ui/core/TextField";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import{string}from"prop-types";import UTLabel from"../../../UTLabel";import WithTheme from"../../../WithTheme";import{inputPropTypes,metaPropTypes,fieldType}from"../../../../types/formTypes";import{retrieveMuiTheme}from"./theme";import styles from"./styles.module.scss";class UTCuit extends PureComponent{constructor(props){super(props),_defineProperty(this,"handleChangeCuit",()=>{const{prefix:prefix,document:document,verificationCode:verificationCode}=this.state;this.props.input.onChange(prefix.concat(document,verificationCode))}),_defineProperty(this,"handleKeyPress",event=>{/[0-9]+/g.test(event.key)||event.preventDefault()}),_defineProperty(this,"handleOnChangePrefix",event=>{const prefix=event.target.value.replace(/^[^2-3]/g,"").slice(0,2);this.setState({prefix:prefix},this.handleChangeCuit)}),_defineProperty(this,"handleOnChangeDocument",event=>{const document=event.target.value.slice(0,8);this.setState({document:document},this.handleChangeCuit)}),_defineProperty(this,"handleOnChangeVerificationCode",event=>{const verificationCode=event.target.value.slice(0,1);this.setState({verificationCode:verificationCode},this.handleChangeCuit)}),_defineProperty(this,"handleSetDocument",value=>{this.setState({document:value.padStart(8,"0")})}),_defineProperty(this,"verificationCodeRef",input=>{this.setState({verificationCodeRef:input})}),_defineProperty(this,"documentRef",input=>{this.setState({documentRef:input})}),_defineProperty(this,"handleFocus",()=>{2===this.state.prefix.length&&8===this.state.document.length?this.state.verificationCodeRef.focus():2===this.state.prefix.length&&this.state.documentRef.focus()}),this.state={prefix:"",verificationCode:"",document:"",verificationCodeRef:null,documentRef:null}}componentDidUpdate(){0===this.state.prefix.length&&0===this.state.document.length&&0===this.state.verificationCode.length&&this.props.input&&this.props.input.value&&this.props.field.configuration.disable_document&&this.handleSetDocument(this.props.input.value)}render(){const{prefix:prefix,document:document,verificationCode:verificationCode}=this.state,{documentDataTestId:documentDataTestId,prefixDataTestId:prefixDataTestId,verificationCodeDataTestId:verificationCodeDataTestId,input:{name:name}}=this.props;return this.handleFocus(),React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.fieldContainer},React.createElement(TextField,{autoComplete:"off",autoFocus:this.props.field.configuration.auto_focus,className:styles.fieldCuit,error:shouldShowErrors(this.props.meta)?this.props.meta.error:"",fullWidth:!0,InputLabelProps:{shrink:0!==this.props.input.value},InputProps:{type:"input",inputProps:{"data-testid":prefixDataTestId,"data-keyboard":name?"prefix-".concat(name):null}},label:this.props.field.label,margin:"none",name:"prefix",onChange:this.handleOnChangePrefix,onKeyPress:this.handleKeyPress,placeholder:"XX",value:prefix}),React.createElement(TextField,{autoComplete:"off",className:styles.fieldDocument,disabled:this.props.field.configuration.disable_document,error:shouldShowErrors(this.props.meta)?this.props.meta.error:"",fullWidth:!0,InputProps:{type:"text",inputProps:{"data-testid":documentDataTestId,"data-keyboard":name?"document-".concat(name):null}},inputRef:this.documentRef,margin:"none",name:"document",onChange:this.handleOnChangeDocument,onKeyPress:this.handleKeyPress,placeholder:"XXXXXXXX",value:document}),React.createElement(TextField,{autoComplete:"off",className:styles.fieldCuit,error:shouldShowErrors(this.props.meta)?this.props.meta.error:"",fullWidth:!0,inputRef:this.verificationCodeRef,InputProps:{type:"input",inputProps:{"data-testid":verificationCodeDataTestId,"data-keyboard":name?"verificationCode-".concat(name):null}},margin:"none",name:"verificationCode",onChange:this.handleOnChangeVerificationCode,onKeyPress:this.handleKeyPress,placeholder:"X",value:verificationCode})),React.createElement(UTLabel,{variant:"small",colorTheme:"error"},shouldShowErrors(this.props.meta)?this.props.meta.error:""))}}UTCuit.propTypes={documentDataTestId:string,field:fieldType,input:inputPropTypes,meta:metaPropTypes,prefixDataTestId:string,verificationCodeDataTestId:string};export default WithTheme(null,retrieveMuiTheme)(UTCuit);
+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 TextField from '@material-ui/core/TextField';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import { string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import WithTheme from '../../../WithTheme';
+import { inputPropTypes, metaPropTypes, fieldType } from '../../../../types/formTypes';
+import { retrieveMuiTheme } from './theme';
+import styles from './styles.module.scss';
+class UTCuit extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "handleChangeCuit", () => {
+      const {
+        prefix,
+        document,
+        verificationCode
+      } = this.state;
+      this.props.input.onChange(prefix.concat(document, verificationCode));
+    });
+    _defineProperty(this, "handleKeyPress", event => {
+      const regexp = /[0-9]+/g;
+      if (!regexp.test(event.key)) {
+        event.preventDefault();
+      }
+    });
+    _defineProperty(this, "handleOnChangePrefix", event => {
+      const normalizePrefix = event.target.value.replace(/^[^2-3]/g, '');
+      const prefix = normalizePrefix.slice(0, 2);
+      this.setState({
+        prefix
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleOnChangeDocument", event => {
+      const document = event.target.value.slice(0, 8);
+      this.setState({
+        document
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleOnChangeVerificationCode", event => {
+      const verificationCode = event.target.value.slice(0, 1);
+      this.setState({
+        verificationCode
+      }, this.handleChangeCuit);
+    });
+    _defineProperty(this, "handleSetDocument", value => {
+      this.setState({
+        document: value.padStart(8, '0')
+      });
+    });
+    _defineProperty(this, "verificationCodeRef", input => {
+      this.setState({
+        verificationCodeRef: input
+      });
+    });
+    _defineProperty(this, "documentRef", input => {
+      this.setState({
+        documentRef: input
+      });
+    });
+    _defineProperty(this, "handleFocus", () => {
+      if (this.state.prefix.length === 2 && this.state.document.length === 8) {
+        this.state.verificationCodeRef.focus();
+      } else if (this.state.prefix.length === 2) {
+        this.state.documentRef.focus();
+      }
+    });
+    this.state = {
+      prefix: '',
+      verificationCode: '',
+      document: '',
+      verificationCodeRef: null,
+      documentRef: null
+    };
+  }
+  componentDidUpdate() {
+    if (this.state.prefix.length === 0 && this.state.document.length === 0 && this.state.verificationCode.length === 0 && this.props.input && this.props.input.value && this.props.field.configuration.disable_document) this.handleSetDocument(this.props.input.value);
+  }
+  render() {
+    const {
+      prefix,
+      document,
+      verificationCode
+    } = this.state;
+    const {
+      documentDataTestId,
+      prefixDataTestId,
+      verificationCodeDataTestId,
+      input: {
+        name
+      }
+    } = this.props;
+    this.handleFocus();
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles.container
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.fieldContainer
+    }, /*#__PURE__*/React.createElement(TextField, {
+      autoComplete: "off",
+      autoFocus: this.props.field.configuration.auto_focus,
+      className: styles.fieldCuit,
+      error: shouldShowErrors(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      InputLabelProps: {
+        shrink: this.props.input.value !== 0
+      },
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': prefixDataTestId,
+          'data-keyboard': name ? "prefix-".concat(name) : null
+        }
+      },
+      label: this.props.field.label,
+      margin: "none",
+      name: "prefix",
+      onChange: this.handleOnChangePrefix,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "XX",
+      value: prefix
+    }), /*#__PURE__*/React.createElement(TextField, {
+      autoComplete: "off",
+      className: styles.fieldDocument,
+      disabled: this.props.field.configuration.disable_document,
+      error: shouldShowErrors(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      InputProps: {
+        type: 'text',
+        inputProps: {
+          'data-testid': documentDataTestId,
+          'data-keyboard': name ? "document-".concat(name) : null
+        }
+      },
+      inputRef: this.documentRef,
+      margin: "none",
+      name: "document",
+      onChange: this.handleOnChangeDocument,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "XXXXXXXX",
+      value: document
+    }), /*#__PURE__*/React.createElement(TextField, {
+      autoComplete: "off",
+      className: styles.fieldCuit,
+      error: shouldShowErrors(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      inputRef: this.verificationCodeRef,
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': verificationCodeDataTestId,
+          'data-keyboard': name ? "verificationCode-".concat(name) : null
+        }
+      },
+      margin: "none",
+      name: "verificationCode",
+      onChange: this.handleOnChangeVerificationCode,
+      onKeyPress: this.handleKeyPress,
+      placeholder: "X",
+      value: verificationCode
+    })), /*#__PURE__*/React.createElement(UTLabel, {
+      variant: "small",
+      colorTheme: "error"
+    }, shouldShowErrors(this.props.meta) ? this.props.meta.error : ''));
+  }
+}
+UTCuit.propTypes = {
+  documentDataTestId: string,
+  field: fieldType,
+  input: inputPropTypes,
+  meta: metaPropTypes,
+  prefixDataTestId: string,
+  verificationCodeDataTestId: string
+};
+export default WithTheme(null, retrieveMuiTheme)(UTCuit);

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

@@ -1 +1,59 @@
-import{getIn}from"seamless-immutable";import{createTheme}from"@material-ui/core/styles";import Colors from"../../../../scss/variables/colors.module.scss";export const retrieveMuiTheme=theme=>createTheme({typography:{fontFamily:getIn(theme,["Fonts","fontFamily"])},overrides:{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:getIn(theme,["UTTextInput","helperText","color"],theme.Palette.error["05"])}}}});
+import { getIn } from 'seamless-immutable';
+import { createTheme } from '@material-ui/core/styles';
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const retrieveMuiTheme = theme => createTheme({
+  typography: {
+    fontFamily: getIn(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    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: getIn(theme, ['UTTextInput', 'helperText', 'color'], theme.Palette.error['05'])
+      }
+    }
+  }
+});