@widergy/energy-ui 3.103.0 → 3.103.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.103.2](https://github.com/widergy/energy-ui/compare/v3.103.1...v3.103.2) (2025-09-18)
+
+
+### Bug Fixes
+
+* [AXCH-683] panel button colors ([#688](https://github.com/widergy/energy-ui/issues/688)) ([47e8512](https://github.com/widergy/energy-ui/commit/47e8512319d756ed47ecadd0459249f7be5e724e))
+
+## [3.103.1](https://github.com/widergy/energy-ui/compare/v3.103.0...v3.103.1) (2025-09-18)
+
+
+### Bug Fixes
+
+* [CX-1129] UTCuit field refactor ([#685](https://github.com/widergy/energy-ui/issues/685)) ([8d60b25](https://github.com/widergy/energy-ui/commit/8d60b25af5378b21fd87e93cf9ae25675674b914))
+
 # [3.103.0](https://github.com/widergy/energy-ui/compare/v3.102.3...v3.103.0) (2025-09-10)
 
 

package/dist/components/UTCuit/index.js

@@ -4,182 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _form = require("@widergy/web-utils/lib/form");
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _formTypes = require("../../types/formTypes");
-var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _V = _interopRequireDefault(require("./versions/V0"));
+var _V2 = _interopRequireDefault(require("./versions/V1"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-class UTCuit extends _react.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.default.createElement("div", {
-      className: _stylesModule.default.container
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.fieldContainer
-    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
-      autoComplete: "off",
-      autoFocus: this.props.field.configuration.auto_focus,
-      className: _stylesModule.default.fieldCuit,
-      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
-      fullWidth: true,
-      InputLabelProps: {
-        shrink: this.props.input.value !== 0
-      },
-      InputProps: {
-        type: 'input',
-        inputProps: {
-          'data-testid': prefixDataTestId,
-          '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.default.createElement(_TextField.default, {
-      autoComplete: "off",
-      className: _stylesModule.default.fieldDocument,
-      disabled: this.props.field.configuration.disable_document,
-      error: (0, _form.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.default.createElement(_TextField.default, {
-      autoComplete: "off",
-      className: _stylesModule.default.fieldCuit,
-      error: (0, _form.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.default.createElement(_UTLabel.default, {
-      variant: "small",
-      colorTheme: "error"
-    }, (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : ''));
-  }
-}
+const UTCuit = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0: _V.default,
+    V1: _V2.default
+  }[version];
+  return /*#__PURE__*/_react.default.createElement(Component, props);
+};
 UTCuit.propTypes = {
-  documentDataTestId: _propTypes.string,
-  field: _formTypes.fieldType,
-  input: _formTypes.inputPropTypes,
-  meta: _formTypes.metaPropTypes,
-  prefixDataTestId: _propTypes.string,
-  verificationCodeDataTestId: _propTypes.string
+  version: _propTypes.string
 };
-var _default = exports.default = (0, _WithTheme.default)(null, _theme.retrieveMuiTheme)(UTCuit);
+var _default = exports.default = UTCuit;

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

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _form = require("@widergy/web-utils/lib/form");
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+var _theme = require("./theme");
+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); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class UTCuit extends _react.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.default.createElement("div", {
+      className: _stylesModule.default.container
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.fieldContainer
+    }, /*#__PURE__*/_react.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      autoFocus: this.props.field.configuration.auto_focus,
+      className: _stylesModule.default.fieldCuit,
+      error: (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : '',
+      fullWidth: true,
+      InputLabelProps: {
+        shrink: this.props.input.value !== 0
+      },
+      InputProps: {
+        type: 'input',
+        inputProps: {
+          'data-testid': prefixDataTestId,
+          '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.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      className: _stylesModule.default.fieldDocument,
+      disabled: this.props.field.configuration.disable_document,
+      error: (0, _form.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.default.createElement(_TextField.default, {
+      autoComplete: "off",
+      className: _stylesModule.default.fieldCuit,
+      error: (0, _form.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.default.createElement(_UTLabel.default, {
+      variant: "small",
+      colorTheme: "error"
+    }, (0, _form.shouldShowErrors)(this.props.meta) ? this.props.meta.error : ''));
+  }
+}
+UTCuit.propTypes = {
+  documentDataTestId: _propTypes.string,
+  field: _formTypes.fieldType,
+  input: _formTypes.inputPropTypes,
+  meta: _formTypes.metaPropTypes,
+  prefixDataTestId: _propTypes.string,
+  verificationCodeDataTestId: _propTypes.string
+};
+var _default = exports.default = (0, _WithTheme.default)(null, _theme.retrieveMuiTheme)(UTCuit);

package/dist/components/UTCuit/versions/V0/styles.module.scss

@@ -0,0 +1,21 @@
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.fieldContainer {
+  align-items: baseline;
+  display: flex;
+  width: 100%;
+}
+
+.fieldCuit {
+  width: 25%;
+}
+
+.fieldDocument {
+  margin: 0 10px;
+  width: 50%;
+}

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

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveMuiTheme = void 0;
+var _seamlessImmutable = require("seamless-immutable");
+var _styles = require("@material-ui/core/styles");
+var _colorsModule = _interopRequireDefault(require("../../../../scss/variables/colors.module.scss"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveMuiTheme = theme => (0, _styles.createTheme)({
+  typography: {
+    fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily'])
+  },
+  overrides: {
+    MuiInput: {
+      input: {
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14)),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'color'])
+      },
+      underline: {
+        '&:hover:not($disabled):not($focused):not($error):before': {
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+        },
+        '&$disabled:before': {
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+        },
+        '&:before': {
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
+        },
+        '&$focused:after': {
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
+        },
+        '&:after': {
+          borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
+        },
+        '&$error:after': {
+          borderBottom: "2px solid ".concat(theme.Palette.error['05']),
+          borderBottomColor: theme.Palette.error['05']
+        }
+      }
+    },
+    MuiFormLabel: {
+      root: {
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'color']),
+        '&$error': {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'errorColor'], _colorsModule.default.gray)
+        },
+        '&$focused': {
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'focusedColor'], _colorsModule.default.primary),
+          '&$error': {
+            color: theme.Palette.error['05']
+          }
+        },
+        fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'], 14))
+      }
+    },
+    MuiFormHelperText: {
+      root: {
+        fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
+        color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'color'], theme.Palette.error['05'])
+      }
+    }
+  }
+});
+exports.retrieveMuiTheme = retrieveMuiTheme;

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

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _form = require("@widergy/web-utils/lib/form");
+var _propTypes = require("prop-types");
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTTextInput = _interopRequireDefault(require("../../../UTTextInput"));
+var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
+var _formTypes = require("../../../../types/formTypes");
+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 UTCuit = _ref => {
+  var _field$configuration;
+  let {
+    documentDataTestId,
+    field,
+    input,
+    meta,
+    prefixDataTestId,
+    verificationCodeDataTestId,
+    dni,
+    disableDocument = false
+  } = _ref;
+  const [prefix, setPrefix] = (0, _react.useState)('');
+  const [verificationCode, setVerificationCode] = (0, _react.useState)('');
+  const [document, setDocument] = (0, _react.useState)('');
+  const verificationCodeRef = (0, _react.useRef)(null);
+  const documentRef = (0, _react.useRef)(null);
+  const getDocumentValue = (0, _react.useCallback)(() => {
+    const rawDocumentValue = disableDocument && dni ? dni : document;
+    return rawDocumentValue ? rawDocumentValue.padStart(8, '0') : '';
+  }, [disableDocument, dni, document]);
+  const handleChangeCuit = (0, _react.useCallback)(() => {
+    const documentValue = getDocumentValue();
+    const fullCuit = prefix.concat(documentValue, verificationCode);
+    input.onChange(fullCuit);
+  }, [prefix, document, verificationCode, input, disableDocument, dni]);
+  (0, _react.useEffect)(() => {
+    if (disableDocument && dni && !document) {
+      setDocument(dni.padStart(8, '0'));
+    }
+  }, [disableDocument, dni, document]);
+  const handleOnChangePrefix = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    if (numericValue.length === 0) {
+      setPrefix('');
+    } else if (numericValue[0] === '2') {
+      setPrefix(numericValue);
+    } else {
+      setPrefix('');
+    }
+  }, []);
+  const handleOnChangeDocument = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setDocument(numericValue);
+  }, []);
+  const handleOnChangeVerificationCode = (0, _react.useCallback)(event => {
+    const value = event && event.target ? event.target.value : event;
+    const numericValue = value.replace(/[^0-9]/g, '');
+    setVerificationCode(numericValue);
+  }, []);
+  const handleFocus = (0, _react.useCallback)(() => {
+    const documentValue = getDocumentValue();
+    if (prefix.length === 2 && documentValue.length === 8) {
+      var _verificationCodeRef$;
+      (_verificationCodeRef$ = verificationCodeRef.current) === null || _verificationCodeRef$ === void 0 || _verificationCodeRef$.focus();
+    } else if (prefix.length === 2 && !disableDocument) {
+      var _documentRef$current;
+      (_documentRef$current = documentRef.current) === null || _documentRef$current === void 0 || _documentRef$current.focus();
+    }
+  }, [prefix, document, disableDocument, dni]);
+  (0, _react.useEffect)(() => {
+    handleChangeCuit();
+  }, [handleChangeCuit]);
+  (0, _react.useEffect)(() => {
+    handleFocus();
+  }, [handleFocus]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.container
+  }, (field === null || field === void 0 ? void 0 : field.label) && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: _stylesModule.default.label,
+    variant: "medium"
+  }, field === null || field === void 0 ? void 0 : field.label), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldCuit
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    autofocus: ((_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.auto_focus) || false,
+    dataTestId: prefixDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      name: 'prefix'
+    },
+    maxLength: 2,
+    meta: meta,
+    onChange: handleOnChangePrefix,
+    placeholder: "XX",
+    type: "text",
+    value: prefix || ''
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldDocument
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: documentDataTestId,
+    alwaysShowPlaceholder: !dni,
+    disabled: disableDocument && dni,
+    field: field,
+    value: dni,
+    input: {
+      value: disableDocument && dni ? dni : document,
+      onChange: disableDocument && dni ? () => {} : handleOnChangeDocument,
+      name: 'document'
+    },
+    maxLength: 8,
+    inputRef: !disableDocument ? documentRef : null,
+    meta: meta,
+    placeholder: "XXXXXXXX",
+    type: "numeric"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.fieldCuit
+  }, /*#__PURE__*/_react.default.createElement(_UTTextInput.default, {
+    version: "V1",
+    autoComplete: "off",
+    dataTestId: verificationCodeDataTestId,
+    alwaysShowPlaceholder: true,
+    field: field,
+    input: {
+      value: verificationCode || '',
+      name: 'verificationCode'
+    },
+    onChange: handleOnChangeVerificationCode,
+    maxLength: 1,
+    inputRef: verificationCodeRef,
+    meta: meta,
+    placeholder: "X",
+    type: "text"
+  }))), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    variant: "small",
+    colorTheme: "error"
+  }, (0, _form.shouldShowErrors)(meta) ? meta.error : ''));
+};
+UTCuit.propTypes = {
+  documentDataTestId: _propTypes.string,
+  field: _formTypes.fieldType,
+  input: _formTypes.inputPropTypes,
+  meta: _formTypes.metaPropTypes,
+  prefixDataTestId: _propTypes.string,
+  verificationCodeDataTestId: _propTypes.string,
+  dni: _propTypes.string,
+  disableDocument: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(null, null)(UTCuit);

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

@@ -0,0 +1,25 @@
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.label {
+  margin-bottom: 8px;
+}
+
+.fieldContainer {
+  align-items: baseline;
+  display: flex;
+  width: 100%;
+}
+
+.fieldCuit {
+  width: 25%;
+}
+
+.fieldDocument {
+  margin: 0 10px;
+  width: 50%;
+}

package/dist/components/UTHeader/index.js

@@ -17,6 +17,7 @@ var _theme = require("./theme");
 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); }
+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); }
 var Ellipsis = function Ellipsis(props) {
   return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
     fillRule: "evenodd",
@@ -44,6 +45,7 @@ Edit.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 const UTHeader = _ref => {
+  var _titleProps$variant, _titleProps$weight;
   let {
     actions,
     banner,
@@ -60,7 +62,8 @@ const UTHeader = _ref => {
     taglineDataTestId,
     title,
     titleDataTestId,
-    TitleIcon
+    TitleIcon,
+    titleProps
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const mainAction = actions.find(action => action.main);
@@ -79,13 +82,14 @@ const UTHeader = _ref => {
     variant: "small",
     weight: "medium"
   }, tagline));
-  const Title = renderComponent(title, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    className: _stylesModule.default.title,
+  const Title = renderComponent(title, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+    className: "".concat(_stylesModule.default.title, " ").concat(titleProps.className),
     dataTestId: titleDataTestId,
-    variant: "title2",
-    weight: "medium",
+    variant: (_titleProps$variant = titleProps.variant) !== null && _titleProps$variant !== void 0 ? _titleProps$variant : 'title2',
+    weight: (_titleProps$weight = titleProps.weight) !== null && _titleProps$weight !== void 0 ? _titleProps$weight : 'medium'
+  }, titleProps, {
     withMarkdown: true
-  }, title));
+  }), title));
   const Subtitle = renderComponent(subtitle, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.subtitle,
     colorTheme: "gray",
@@ -172,6 +176,16 @@ UTHeader.propTypes = {
   taglineDataTestId: _propTypes.string,
   title: _propTypes.string,
   titleDataTestId: _propTypes.string,
-  TitleIcon: _propTypes.element
+  TitleIcon: _propTypes.element,
+  titleProps: (0, _propTypes.shape)({
+    align: _propTypes.string,
+    classes: (0, _propTypes.objectOf)(_propTypes.string),
+    className: _propTypes.string,
+    dataTestId: _propTypes.string,
+    markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+    title: _propTypes.string,
+    variant: _propTypes.string,
+    withMarkdown: _propTypes.bool
+  })
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTHeader);

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

@@ -200,7 +200,7 @@ const UTPanel = _ref => {
     onClose: closeMenu,
     withMenuItem: true
   }), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
-    colorTheme: "primary",
+    colorTheme: "secondary",
     dataTestId: secondaryActionDataTestId,
     onClick: secondaryActionAsMenu ? openMenu : undefined,
     variant: "semitransparent"

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

@@ -55,6 +55,7 @@ const UTWorkflowContainer = _ref => {
     taglineDataTestId = workflowContainer.header.tagline,
     title,
     titleDataTestId = workflowContainer.header.title,
+    titleProps = {},
     variant = _constants.VARIANTS.DEFAULT,
     withIcon = false,
     withStepperPadding = true,
@@ -131,7 +132,8 @@ const UTWorkflowContainer = _ref => {
     tagline: title && tagline,
     taglineDataTestId,
     title,
-    titleDataTestId
+    titleDataTestId,
+    titleProps
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.childrenContainer, " ").concat(classes.childrenContainer, " ").concat(variant === _constants.VARIANTS.FULL_WIDTH && "".concat(_stylesModule.default.childrenContainerFullWidth, " ").concat(classes.childrenContainerFullWidth)),
     id: _constants.CHILDREN_CONTAINER_ID + variant
@@ -197,6 +199,16 @@ UTWorkflowContainer.propTypes = {
   taglineDataTestId: _propTypes.string,
   title: _propTypes.string,
   titleDataTestId: _propTypes.string,
+  titleProps: (0, _propTypes.shape)({
+    align: _propTypes.string,
+    classes: (0, _propTypes.objectOf)(_propTypes.string),
+    className: _propTypes.string,
+    dataTestId: _propTypes.string,
+    markdownRenderers: (0, _propTypes.objectOf)(_propTypes.func),
+    title: _propTypes.string,
+    variant: _propTypes.string,
+    withMarkdown: _propTypes.bool
+  }),
   variant: _propTypes.string,
   withIcon: _propTypes.bool,
   withStepperPadding: _propTypes.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.103.0",
+  "version": "3.103.2",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",