@widergy/energy-ui 3.59.2 → 3.60.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.60.0](https://github.com/widergy/energy-ui/compare/v3.59.3...v3.60.0) (2025-02-13)
+
+
+### Features
+
+* [AXCH-133] ut field label as title and utpopper ([#575](https://github.com/widergy/energy-ui/issues/575)) ([70baeb5](https://github.com/widergy/energy-ui/commit/70baeb5c99d0fa3eea168b34ff572322f9cd4eaa))
+
+## [3.59.3](https://github.com/widergy/energy-ui/compare/v3.59.2...v3.59.3) (2025-02-13)
+
+
+### Bug Fixes
+
+* [UGMC-907] date range and validations ([#571](https://github.com/widergy/energy-ui/issues/571)) ([9163212](https://github.com/widergy/energy-ui/commit/9163212229edd036516d94038eb49200e1b177c5))
+
 ## [3.59.2](https://github.com/widergy/energy-ui/compare/v3.59.1...v3.59.2) (2025-02-13)
 
 

package/dist/components/UTAttachment/index.js

@@ -11,6 +11,7 @@ var _image = require("@widergy/web-utils/lib/image");
 var _browser = require("@widergy/web-utils/lib/browser");
 var _array = require("@widergy/web-utils/lib/array");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _buttonTypes = require("../../types/buttonTypes");
 var _theme = require("./theme");
 var _constants = require("./constants");
 var _layout = _interopRequireDefault(require("./layout"));
@@ -158,18 +159,22 @@ class AttachmentContainer extends _react.Component {
   render() {
     const {
       acceptedFileTypes,
+      actions,
       classes,
       containerClassname,
       disabled,
       errorClassname,
+      field,
       fieldTypes,
+      hideLabels,
       icon,
       input,
       loadingTextClassname,
       previewClassname,
       previewProps,
       RemoveIcon,
-      removeFileClassname
+      removeFileClassname,
+      titleVariant
     } = this.props;
     const {
       name,
@@ -181,30 +186,35 @@ class AttachmentContainer extends _react.Component {
     const loadingDefaultValue = this.hasDefaultValueToLoad() && !name;
     return /*#__PURE__*/_react.default.createElement(_layout.default, {
       acceptedFileTypes: acceptedFileTypes,
+      actions: actions,
       classes: classes,
       containerClassname: containerClassname,
       disabled: disabled,
       error: error,
       errorClassname: errorClassname,
       errorText: errorText,
+      field: field,
       fieldTypes: fieldTypes,
+      hideLabels: hideLabels,
       icon: icon,
       loading: loading || loadingDefaultValue,
       loadingTextClassname: loadingTextClassname,
       name: name || this.getDefaultAttachment(input.value),
+      onChange: this.onChange,
+      onClick: this.removeValue,
       preview: preview,
       previewClassname: previewClassname,
       previewProps: previewProps,
-      onChange: this.onChange,
-      onClick: this.removeValue,
       removeFileClassname: removeFileClassname,
       RemoveIcon: RemoveIcon,
+      titleVariant: titleVariant,
       uploadingText: loadingDefaultValue ? _constants.DEFAULT_UPLOADING_TEXT : ''
     });
   }
 }
 AttachmentContainer.propTypes = {
   acceptedFileTypes: _propTypes.string,
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   allowedPDFUploadSizes: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     name: _propTypes.string,
     heightInPt: _propTypes.number,
@@ -214,10 +224,12 @@ AttachmentContainer.propTypes = {
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   containerClassname: _propTypes.string,
   customValidation: _propTypes.func,
-  disabled: _propTypes.bool,
   disableResize: _propTypes.bool,
+  disabled: _propTypes.bool,
   errorClassname: _propTypes.string,
+  field: _propTypes.object,
   fieldTypes: (0, _propTypes.arrayOf)(_propTypes.string),
+  hideLabels: _propTypes.string,
   icon: _propTypes.node,
   input: (0, _propTypes.shape)({
     value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.shape)({
@@ -238,7 +250,8 @@ AttachmentContainer.propTypes = {
     maxWidth: _propTypes.number,
     maxHeight: _propTypes.number
   }),
-  sanitize: _propTypes.func
+  sanitize: _propTypes.func,
+  titleVariant: _propTypes.string
 };
 AttachmentContainer.defaultProps = {
   maxFileSize: 99999999

package/dist/components/UTAttachment/layout.js

@@ -4,43 +4,59 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _DeleteForever = _interopRequireDefault(require("@material-ui/icons/DeleteForever"));
 var _files = require("@widergy/web-utils/lib/constants/files");
 var _UTFileInput = _interopRequireDefault(require("../UTFileInput"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
+var _buttonTypes = require("../../types/buttonTypes");
 var _Preview = _interopRequireDefault(require("./components/Preview"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Attachment = _ref => {
+  var _field$configuration;
   let {
     acceptedFileTypes,
-    name,
-    preview,
-    loading,
+    actions,
+    classes,
     containerClassname,
-    previewClassname,
-    removeFileClassname,
-    onClick,
-    onChange,
+    disabled,
     error,
+    errorClassname,
     errorText,
+    field,
     fieldTypes,
-    loadingTextClassname,
-    classes,
-    errorClassname,
+    hideLabels,
     icon,
-    disabled,
-    uploadingText,
+    loading,
+    loadingTextClassname,
+    name,
+    onChange,
+    onClick,
+    preview,
+    previewClassname,
+    previewProps,
+    removeFileClassname,
     RemoveIcon,
-    previewProps
+    titleVariant,
+    uploadingText
   } = _ref;
+  const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && (field === null || field === void 0 ? void 0 : field.title);
   const fieldType = acceptedFileTypes || fieldTypes.map(type => _files.inputFiles[type].inputType).join();
   const Icon = RemoveIcon || _DeleteForever.default;
-  return name && !loading ? /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    className: _stylesModule.default.title,
+    readOnly: field.read_only,
+    size: titleVariant,
+    required: field.required
+  }, field === null || field === void 0 ? void 0 : field.title), name && !loading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.previewContainer, " ").concat(previewClassname)
   }, /*#__PURE__*/_react.default.createElement(_Preview.default, {
     preview: preview,
@@ -73,31 +89,35 @@ const Attachment = _ref => {
     icon: icon,
     disabled: disabled,
     uploadingText: uploadingText
-  });
+  }));
 };
 Attachment.propTypes = {
   acceptedFileTypes: _propTypes.string,
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  containerClassname: _propTypes.string,
+  disabled: _propTypes.bool,
+  error: _propTypes.bool,
+  errorClassname: _propTypes.string,
+  errorText: _propTypes.string,
+  field: _propTypes.object,
+  fieldTypes: (0, _propTypes.arrayOf)(_propTypes.string),
+  hideLabels: _propTypes.bool,
+  icon: _propTypes.node,
+  loading: _propTypes.bool,
+  loadingTextClassname: _propTypes.string,
   name: _propTypes.string,
+  onChange: _propTypes.func,
+  onClick: _propTypes.func,
   preview: (0, _propTypes.shape)({
     src: _propTypes.string,
     type: _propTypes.string
   }),
-  loading: _propTypes.bool,
   previewClassname: _propTypes.string,
-  containerClassname: _propTypes.string,
+  previewProps: _constants.previewPropType,
   removeFileClassname: _propTypes.string,
-  onClick: _propTypes.func,
-  onChange: _propTypes.func,
-  error: _propTypes.bool,
-  errorText: _propTypes.string,
-  fieldTypes: (0, _propTypes.arrayOf)(_propTypes.string),
-  loadingTextClassname: _propTypes.string,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  errorClassname: _propTypes.string,
-  icon: _propTypes.node,
-  uploadingText: _propTypes.string,
-  disabled: _propTypes.bool,
   RemoveIcon: _propTypes.elementType,
-  previewProps: _constants.previewPropType
+  titleVariant: _propTypes.string,
+  uploadingText: _propTypes.string
 };
 var _default = exports.default = Attachment;

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

@@ -25,3 +25,7 @@
   display: flex;
   flex-direction: column;
 }
+
+.title {
+  padding: 8px 0;
+}

package/dist/components/UTBadge/theme.js

@@ -28,6 +28,7 @@ const baseButtonTheme = () => ({
   },
   text: {
     height: '20px',
+    width: '20px',
     padding: '0 6px',
     textAlign: 'center'
   }

package/dist/components/UTBaseInputField/components/ActionAdornment/index.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTTooltip = _interopRequireDefault(require("../../../UTTooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ActionAdornment = _ref => {
@@ -17,13 +18,20 @@ const ActionAdornment = _ref => {
     classNames
   } = _ref;
   if (!action) return null;
-  return /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+  return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+    arrow: false,
+    tippyProps: {
+      appendTo: () => document.body,
+      interactive: false
+    },
+    content: action.tooltip
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     classNames: classNames,
     dataTestId: dataTestId,
     disabled: disabled,
     size: "small",
     variant: "text"
-  }, action), action.text);
+  }, action), action.text)));
 };
 ActionAdornment.propTypes = {
   action: _propTypes.object,

package/dist/components/UTBreadcrumbs/index.js

@@ -154,7 +154,7 @@ const UTBreadcrumbs = _ref => {
       key: "".concat(route, "-").concat(label)
     }, !route && !menuItems || disableMenu ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
       className: _stylesModule.default.label,
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, "}.").concat(index),
+      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(buttonId, ".").concat(index),
       variant: "small",
       weight: "medium"
     }, colorThemesDefinition.label), label) : /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({

package/dist/components/UTCheckList/versions/V1/README.MD

@@ -8,6 +8,7 @@
 
 | Name              | Type             | Default | Description                                                                                                                                      |
 | ----------------- | ---------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| actions           | object           |         | Actions to render within `UTFieldLabel`.                                                                                                         |
 | classNames        | objectOf(string) |         | Custom class names to apply to different elements of the checklist (`root`, `header`, `checkboxesContainer`, `item`, `selectAll`).               |
 | disabled          | bool             | false   | Disables all checkboxes in the checklist when true.                                                                                              |
 |                   |

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
+var _buttonTypes = require("../../../../types/buttonTypes");
 var _utils = require("../../../UTValidation/utils");
 var _constants = require("../../../UTCheckbox/versions/V1/constants");
 var _UTCheckbox = _interopRequireDefault(require("../../../UTCheckbox"));
@@ -20,6 +21,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTCheckList = _ref => {
   let {
+    actions,
     classNames = {},
     dataTestId,
     disabled,
@@ -93,6 +95,7 @@ const UTCheckList = _ref => {
   }, (title || validationData) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.headerContainer, " ").concat(classNames.header)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
     required: required
   }, title), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
     validationData: validationData
@@ -136,6 +139,7 @@ const UTCheckList = _ref => {
   })));
 };
 UTCheckList.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,

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

@@ -8,6 +8,7 @@
 
 | Name               | Type             | Default   | Description                                                                           |
 | ------------------ | ---------------- | --------- | ------------------------------------------------------------------------------------- |
+| actions            | object           |           | Actions to render within `UTFieldLabel`.                                              |
 | checkboxDataTestId | string           |           | Box `data-testid`.                                                                    |
 | classNames         | objectOf(string) |           | Additional class names to apply for further styling.                                  |
 | dataTestId         | string           |           | Whole component `data-testid`.                                                        |
@@ -20,7 +21,6 @@
 | title              | string           |           | Title to display next to the checkbox. Supports markdown when `withMarkdown` is true. |
 | value              | bool             | false     | Indicates if the checkbox is checked.                                                 |
 | variant            | string           | 'default' | Defines the visual variant of the checkbox.                                           |
-| withMarkdown       | bool             | false     | Enables markdown formatting for the `title` prop.                                     |
 
 ## Usage
 

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

@@ -11,6 +11,7 @@ var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTIcon = _interopRequireDefault(require("../../../UTIcon"));
 var _WithTheme = _interopRequireDefault(require("../../../WithTheme"));
 var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../UTTouchableWithoutFeedback"));
+var _buttonTypes = require("../../../../types/buttonTypes");
 var _constants = require("./constants");
 var _theme = require("./theme");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
@@ -20,6 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const UTCheckbox = _ref => {
   let {
+    actions,
     checkboxDataTestId,
     classes: theme,
     classNames,
@@ -32,7 +34,7 @@ const UTCheckbox = _ref => {
     title,
     value = false,
     variant = 'default',
-    withMarkdown
+    withUpperTitle
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const iconName = (0, _react.useMemo)(() => indeterminate ? _constants.INDETERMINATE_ICON : value === true ? _constants.CHECKED_ICON : '', [indeterminate, value]);
@@ -48,7 +50,10 @@ const UTCheckbox = _ref => {
   const BoxContainerComponent = variant === _constants.BUTTON_VARIANT ? 'div' : _UTTouchableWithoutFeedback.default;
   const rootComponentProps = variant === _constants.BUTTON_VARIANT ? touchableProps : {};
   const boxContainerProps = variant === _constants.BUTTON_VARIANT ? {} : touchableProps;
-  return /*#__PURE__*/_react.default.createElement(RootComponent, _extends({
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
+    required: required
+  }, title), /*#__PURE__*/_react.default.createElement(RootComponent, _extends({
     dataTestId: dataTestId,
     className: classes.container
   }, rootComponentProps), /*#__PURE__*/_react.default.createElement(BoxContainerComponent, _extends({
@@ -69,12 +74,12 @@ const UTCheckbox = _ref => {
     size: 16
   })))), /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     className: classes.title,
-    colorTheme: shouldHighlightLabel ? 'accent' : 'dark',
-    required: required,
-    withMarkdown: withMarkdown
-  }, title));
+    highlighted: shouldHighlightLabel,
+    required: required
+  }, title)));
 };
 UTCheckbox.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   checkboxDataTestId: _propTypes.string,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
@@ -92,6 +97,6 @@ UTCheckbox.propTypes = {
   title: _propTypes.string,
   value: _propTypes.bool,
   variant: _propTypes.string,
-  withMarkdown: _propTypes.bool
+  withUpperTitle: _propTypes.bool
 };
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTCheckbox);

package/dist/components/UTDatePicker/index.js

@@ -13,9 +13,11 @@ var _es = _interopRequireDefault(require("dayjs/locale/es"));
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _form = require("@widergy/web-utils/lib/form");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _classesUtils = require("../../utils/classesUtils");
+var _buttonTypes = require("../../types/buttonTypes");
 var _formTypes = require("../../types/formTypes");
+var _classesUtils = require("../../utils/classesUtils");
 var _Day = _interopRequireDefault(require("./components/Day"));
 var _theme = require("./theme");
 var _types = require("./types");
@@ -54,8 +56,9 @@ class CustomUtils extends _dayjs.default {
   }
 }
 const UTDatePicker = _ref => {
-  var _field$configuration, _field$configuration2;
+  var _field$configuration, _field$configuration2, _field$configuration3;
   let {
+    actions,
     classes: themeClasses,
     classNames,
     CustomIcon,
@@ -75,22 +78,29 @@ const UTDatePicker = _ref => {
     placeholder,
     popoverProps,
     range,
+    titleVariant,
     variant,
     withUpperTitle
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
   const onlyPastMonth = ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
+  const avoidFutureDates = ((_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
   const {
-    minDate = undefined,
-    maxDate = undefined
-  } = (onlyPastMonth ? (0, _utils.getPastMonthDates)() : range) || {};
+    minDate,
+    maxDate
+  } = (onlyPastMonth ? (0, _utils.getPastMonthDates)() : avoidFutureDates ? (0, _utils.getMaxDate)() : range) || {};
   const [pickedDate, setPickedDate] = (0, _react.useState)(null);
   const [internalError, setInternalError] = (0, _react.useState)(null);
   const handleChange = date => {
     setPickedDate(date);
     const newValue = (0, _dayjs2.default)(date, _constants.OUTPUT_LABEL_MASK, true);
-    if (newValue.isValid()) input.onChange(newValue.format(configMask));else input.onChange('');
+    if ((0, _utils.isValidDate)({
+      avoidFutureDates,
+      newValue,
+      onlyPastMonth,
+      range
+    })) input.onChange(newValue.format(configMask));else input.onChange('');
   };
   (0, _react.useEffect)(() => {
     if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
@@ -107,8 +117,12 @@ const UTDatePicker = _ref => {
   const OpenerIcon = CustomIcon || CalendarIcon;
   const operenerIconReference = (0, _react.useRef)();
   const errorMessage = (0, _form.shouldShowErrors)(meta) && (internalError || meta.error) || '';
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, withUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: actions,
     className: classes.upperTitle,
+    readOnly: field.read_only,
+    required: field.required,
+    size: titleVariant,
     withMarkdown: true
   }, field.title), /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
     utils: disableToolbar ? _dayjs.default : CustomUtils,
@@ -159,12 +173,13 @@ const UTDatePicker = _ref => {
   }, pickerProps))));
 };
 UTDatePicker.propTypes = {
-  classes: _types.classesPropTypes,
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   classNames: _types.classesPropTypes,
+  classes: _types.classesPropTypes,
   CustomIcon: _propTypes.node,
   dayFormat: _propTypes.string,
-  disabled: _propTypes.bool,
   disableToolbar: _propTypes.bool,
+  disabled: _propTypes.bool,
   field: _formTypes.fieldType,
   iconAnchor: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
@@ -173,6 +188,7 @@ UTDatePicker.propTypes = {
   inputVariant: _propTypes.string,
   invalidDateMessage: _propTypes.string,
   maxDateMessage: _propTypes.string,
+  meta: _formTypes.metaPropTypes,
   minDateMessage: _propTypes.string,
   pickerProps: _propTypes.object,
   placeholder: _propTypes.string,
@@ -181,7 +197,7 @@ UTDatePicker.propTypes = {
     maxDate: _propTypes.string,
     minDate: _propTypes.string
   }),
-  meta: _formTypes.metaPropTypes,
+  titleVariant: _propTypes.string,
   variant: _propTypes.string,
   withUpperTitle: _propTypes.bool
 };

package/dist/components/UTDatePicker/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSelected = exports.getPastMonthDates = exports.dateMatchesFormat = void 0;
+exports.isValidDate = exports.isSelected = exports.getPastMonthDates = exports.getMaxDate = exports.dateMatchesFormat = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
@@ -19,4 +19,32 @@ const getPastMonthDates = () => {
     maxDate: new Date(currentYear, currentMonth, 0)
   };
 };
-exports.getPastMonthDates = getPastMonthDates;
+exports.getPastMonthDates = getPastMonthDates;
+const getMaxDate = () => {
+  const currentDate = new Date();
+  return {
+    maxDate: currentDate
+  };
+};
+exports.getMaxDate = getMaxDate;
+const avoidFutureDatesValidation = date => !(0, _dayjs.default)().isBefore(date);
+const rangeValidation = (date, range) => {
+  const {
+    minDate,
+    maxDate
+  } = range;
+  return date.isBetween(minDate, maxDate, null, '[]');
+};
+const isValidDate = _ref => {
+  let {
+    avoidFutureDates,
+    newValue,
+    onlyPastMonth,
+    range
+  } = _ref;
+  if (avoidFutureDates && !avoidFutureDatesValidation(newValue)) return false;
+  if (onlyPastMonth && !rangeValidation(newValue, getPastMonthDates())) return false;
+  if (range && !rangeValidation(newValue, range)) return false;
+  return newValue.isValid();
+};
+exports.isValidDate = isValidDate;

package/dist/components/UTFieldLabel/index.js

@@ -5,41 +5,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _propTypes = require("prop-types");
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
+var _inputs = require("../../constants/inputs");
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const UTFieldLabel = _ref => {
   let {
+    actions,
     children,
-    colorTheme,
+    className,
     dataTestId,
+    highlighted,
+    readOnly,
     required,
-    className,
-    variant,
+    size = 'large',
     weight
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(!(0, _isEmpty.default)(actions) ? _stylesModule.default.labelWithActions : '')
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.label, " ").concat(className)
   }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-    colorTheme: colorTheme,
+    colorTheme: readOnly ? 'gray' : highlighted ? 'accent' : 'dark',
     dataTestId: dataTestId,
-    variant: variant,
+    variant: _inputs.TITLE_VARIANTS[size],
     withMarkdown: true
   }, children), required && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     colorTheme: "error",
     shade: "04",
-    variant: variant,
+    variant: _inputs.TITLE_VARIANTS[size],
     weight: weight
-  }, _constants.REQUIRED_LABEL));
+  }, _constants.REQUIRED_LABEL)), !(0, _isEmpty.default)(actions) && (0, _isArray.default)(actions) && /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.actionsContainer
+  }, actions.map(action => {
+    var _action$title;
+    return /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
+      arrow: false,
+      key: "".concat((_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.Icon),
+      tippyProps: {
+        appendTo: () => document.body,
+        interactive: false
+      },
+      content: action.tooltip
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, action, action.title)));
+  })));
 };
 UTFieldLabel.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_propTypes.object),
   className: _propTypes.string,
-  colorTheme: _propTypes.string,
   dataTestId: _propTypes.string,
+  highlighted: _propTypes.bool,
+  readOnly: _propTypes.bool,
   required: _propTypes.bool,
-  variant: _propTypes.string,
+  size: _propTypes.string,
   weight: _propTypes.string
 };
 var _default = exports.default = UTFieldLabel;

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

@@ -1,5 +1,19 @@
+.labelWithActions {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%
+}
+
 .label {
   display: flex;
   flex-direction: row;
   grid-gap: 4px;
 }
+
+.actionsContainer {
+  display: flex;
+  gap: 8px;
+}

package/dist/components/UTFileInput/layout.js

@@ -78,7 +78,7 @@ class UTFileInput extends _react.PureComponent {
     }, uploadingText), /*#__PURE__*/_react.default.createElement("div", {
       className: _stylesModule.default.loading
     })) : /*#__PURE__*/_react.default.createElement("div", {
-      className: _stylesModule.default.insideContainer
+      className: "".concat(_stylesModule.default.insideContainer, " ").concat(disabled ? _stylesModule.default.disabled : '')
     }, Icon || /*#__PURE__*/_react.default.createElement(UploadImage, {
       className: "".concat(_stylesModule.default.icon, " ").concat(classes.icon)
     }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {

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

@@ -11,6 +11,14 @@
   right: 0;
   text-align: right;
   top: 0;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+.disabled {
+  opacity: 0.5;
 }
 
 .inputContainer {

package/dist/components/UTIcon/components/EnergyIcons/EnergyIconMessageEdit.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 9H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13H14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 20L12 21L9 18H6C5.20435 18 4.44129 17.6839 3.87868 17.1213C3.31607 16.5587 3 15.7956 3 15V7C3 6.20435 3.31607 5.44129 3.87868 4.87868C4.44129 4.31607 5.20435 4 6 4H18C18.7956 4 19.5587 4.31607 20.1213 4.87868C20.6839 5.44129 21 6.20435 21 7V12.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.9293 15.522C19.0963 15.3549 19.2946 15.2224 19.5129 15.132C19.7311 15.0416 19.965 14.9951 20.2012 14.9951C20.4374 14.9951 20.6713 15.0416 20.8896 15.132C21.1078 15.2224 21.3061 15.3549 21.4731 15.522C21.6402 15.689 21.7727 15.8873 21.8631 16.1055C21.9535 16.3238 22 16.5577 22 16.7939C22 17.0301 21.9535 17.264 21.8631 17.4823C21.7727 17.7005 21.6402 17.8988 21.4731 18.0658L18.5696 20.9951H16V18.4256L18.9293 15.522Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/UTIcon/constants.js

@@ -140,6 +140,33 @@ EnergyIconHome.defaultProps = {
   stroke: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
+var EnergyIconMessageEdit = function EnergyIconMessageEdit(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 9h8M8 13h6M13 20l-1 1-3-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v5.5M18.93 15.522a1.797 1.797 0 0 1 2.933.583 1.8 1.8 0 0 1-.39 1.96l-2.903 2.93H16v-2.57l2.93-2.903Z"
+  }));
+};
+EnergyIconMessageEdit.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+var EnergyIconQuestionFilled = function EnergyIconQuestionFilled(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 2.287a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-10 8c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10Zm8.475-5.655a3.6 3.6 0 1 1 2.857 6.598.5.5 0 0 0-.334.5 1 1 0 0 1-1.996.114 2.5 2.5 0 0 1 1.65-2.495 1.6 1.6 0 1 0-1.855-2.458 1 1 0 0 1-1.594-1.208 3.6 3.6 0 0 1 1.272-1.051ZM10 14.287a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1Z"
+  }));
+};
+EnergyIconQuestionFilled.defaultProps = {
+  width: "20",
+  height: "21",
+  viewBox: "0 0 20 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 var EnergyIconSendFilled = function EnergyIconSendFilled(props) {
   return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
     d: "M20.816 10.742 3.93 2.504a1.086 1.086 0 0 0-.524-.106 1.11 1.11 0 0 0-.508.16c-.152.098-.277.231-.367.387-.086.16-.133.336-.133.52v.027c0 .145.02.285.055.426l1.617 6.48c.024.086.07.165.137.223.07.055.152.094.242.102l7.117.793c.118.015.227.07.309.16a.49.49 0 0 1-.309.808l-7.117.793a.438.438 0 0 0-.379.325l-1.617 6.48a1.712 1.712 0 0 0-.055.422v.031c0 .18.047.36.137.516.086.16.211.293.363.387.157.097.329.152.508.16.184.011.364-.028.524-.106l16.886-8.238c.235-.113.434-.293.57-.516a1.378 1.378 0 0 0 0-1.48 1.426 1.426 0 0 0-.57-.516Zm0 0",
@@ -179,21 +206,6 @@ EnergyIconTruck.defaultProps = {
   stroke: "currentColor",
   xmlns: "http://www.w3.org/2000/svg"
 };
-var EnergyIconQuestionFilled = function EnergyIconQuestionFilled(props) {
-  return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 2.287a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-10 8c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10Zm8.475-5.655a3.6 3.6 0 1 1 2.857 6.598.5.5 0 0 0-.334.5 1 1 0 0 1-1.996.114 2.5 2.5 0 0 1 1.65-2.495 1.6 1.6 0 1 0-1.855-2.458 1 1 0 0 1-1.594-1.208 3.6 3.6 0 0 1 1.272-1.051ZM10 14.287a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1Z"
-  }));
-};
-EnergyIconQuestionFilled.defaultProps = {
-  width: "20",
-  height: "21",
-  viewBox: "0 0 20 21",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-};
 const FILLED_ICON_COLOR = exports.FILLED_ICON_COLOR = 'transparent';
 const DEFAULT_INTERNAL_SHADE = exports.DEFAULT_INTERNAL_SHADE = _Palette.COLOR_SHADES.shade02;
 const DEFAULT_COLOR_THEME = exports.DEFAULT_COLOR_THEME = _Palette.COLOR_THEMES.dark;
@@ -208,7 +220,8 @@ const ENERGY_ICONS = exports.ENERGY_ICONS = {
   EnergyIconCart,
   EnergyIconConsumption,
   EnergyIconHome,
+  EnergyIconMessageEdit,
+  EnergyIconQuestionFilled,
   EnergyIconSendFilled,
-  EnergyIconTruck,
-  EnergyIconQuestionFilled
+  EnergyIconTruck
 };

package/dist/components/UTMenu/index.js

@@ -114,7 +114,7 @@ const UTMenu = _ref => {
       className: classes.scrollBar
     }, scrollBarProps), items === null || items === void 0 ? void 0 : items.map((item, index) => {
       const handleClick = event => {
-        if (item.onClick) item.onClick(event, contextData);else if (onClickItem) onClickItem(event, contextData);
+        if (item.onClick) item.onClick(event, contextData, onClose);else if (onClickItem) onClickItem(event, contextData);
         if (contextData.clickCallback) contextData.clickCallback();
       };
       return ItemComponent ? withMenuItem ? /*#__PURE__*/_react.default.createElement(_MenuItem.default, _extends({

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.ACCEPT_BUTTON_TEXT = void 0;
+exports.SIZES = exports.MENU_LABEL = exports.ACCEPT_BUTTON_TEXT = void 0;
 const SIZES = exports.SIZES = {
   L: 'large',
   M: 'medium'
 };
-const ACCEPT_BUTTON_TEXT = exports.ACCEPT_BUTTON_TEXT = 'Aceptar';
+const ACCEPT_BUTTON_TEXT = exports.ACCEPT_BUTTON_TEXT = 'Aceptar';
+const MENU_LABEL = exports.MENU_LABEL = 'Más';

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

@@ -9,9 +9,11 @@ var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/Swipeab
 require("react-perfect-scrollbar/dist/css/styles.css");
 var _reactPerfectScrollbar = _interopRequireDefault(require("react-perfect-scrollbar"));
 var _propTypes = require("prop-types");
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTButton = _interopRequireDefault(require("../../../UTButton"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTMenu = _interopRequireDefault(require("../../../UTMenu"));
 var _index = _interopRequireDefault(require("../../../UTProgressBar/index.js"));
 var _classesUtils = require("../../../../utils/classesUtils.js");
 var _index2 = _interopRequireDefault(require("../../../WithTheme/index.js"));
@@ -57,6 +59,10 @@ const UTPanel = _ref => {
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
   const [collapseHeader, setCollapseHeader] = (0, _react.useState)(true);
+  const [anchor, setAnchor] = (0, _react.useState)();
+  const openMenu = event => setAnchor(event.currentTarget);
+  const closeMenu = () => setAnchor();
+  const secondaryActionAsMenu = (0, _isArray.default)(headerSecondaryActionButton);
   const {
     closeButton: closeButtonClass,
     headerContainer: headerContainerClass,
@@ -122,10 +128,19 @@ const UTPanel = _ref => {
     colorTheme: "gray"
   }, subtitle))), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.headerRightArea
-  }, !(0, _isEmpty.default)(headerSecondaryActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+  }, !(0, _isEmpty.default)(headerSecondaryActionButton) && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, secondaryActionAsMenu && /*#__PURE__*/_react.default.createElement(_UTMenu.default, {
+    anchor: anchor,
+    iconBefore: true,
+    ItemComponent: _UTButton.default,
+    items: headerSecondaryActionButton,
+    menuPlacement: "bottom-end",
+    onClose: closeMenu,
+    withMenuItem: true
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "primary",
+    onClick: secondaryActionAsMenu ? openMenu : undefined,
     variant: "semitransparent"
-  }, headerSecondaryActionButton), headerSecondaryActionButton.text), !(0, _isEmpty.default)(headerMainActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+  }, !secondaryActionAsMenu && headerSecondaryActionButton), secondaryActionAsMenu ? _constants.MENU_LABEL : headerSecondaryActionButton.text)), !(0, _isEmpty.default)(headerMainActionButton) && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
     colorTheme: "success",
     variant: "filled"
   }, headerMainActionButton), headerMainActionButton.text)))), !(0, _isEmpty.default)(headerItems) && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -8,6 +8,7 @@
 
 | Name                  | Type                                                                      | Default                                                                                                    | Description                                                                                                                          |
 | --------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| actions               | object                                                                    |                                                                                                            | Actions to render within `UTFieldLabel`.                                                                                             |
 | areaCodeDataTestId    | string                                                                    |                                                                                                            | Identifier for the area code input field, useful for testing.                                                                        |
 | areaCodePlaceholder   | string                                                                    |                                                                                                            | Placeholder for the area code input field.                                                                                           |
 | countryCode           | string                                                                    |                                                                                                            | Prefix for the phone number, typically used to display the country code (e.g., "+1" for the US).                                     |

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

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
-var _constants = require("../../../UTBaseInputField/constants");
-var _utils = require("../../../UTValidation/utils");
-var _inputs = require("../../../../constants/inputs");
 var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
+var _buttonTypes = require("../../../../types/buttonTypes");
+var _constants = require("../../../UTBaseInputField/constants");
+var _utils = require("../../../UTValidation/utils");
 var _constants2 = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,6 +20,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const UTPhoneInput = _ref => {
   let {
+    actions,
     areaCodeDataTestId,
     areaCodePlaceholder,
     countryCode,
@@ -110,15 +111,15 @@ const UTPhoneInput = _ref => {
   }, [areaCodeState.code, phoneNumber, withAreaCode, onChange, value]);
   const validationData = validations || areaCodeState.error && (0, _utils.formatErrorToValidation)(areaCodeState.error) || error && (0, _utils.formatErrorToValidation)(error);
   const hasError = (validationData === null || validationData === void 0 ? void 0 : validationData.length) > 0;
-  const titleColorTheme = readOnly ? 'gray' : 'dark';
   const getAreaCodeMaxLength = () => Math.min(maxLength - phoneNumber.length, 4);
   const getPhoneNumberMaxLength = () => withAreaCode ? Math.min(maxLength - areaCodeState.code.length, maxLength - 2) : maxLength;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.container
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
-    colorTheme: titleColorTheme,
+    actions: actions,
+    readOnly: readOnly,
     required: required,
-    variant: _inputs.TITLE_VARIANTS[titleVariant]
+    size: titleVariant
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.inputsContainer
   }, withAreaCode && /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
@@ -177,6 +178,7 @@ const UTPhoneInput = _ref => {
   }));
 };
 UTPhoneInput.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   areaCodeDataTestId: _propTypes.string,
   areaCodePlaceholder: _propTypes.string,
   countryCode: _propTypes.string,

package/dist/components/UTPopper/README.md

@@ -0,0 +1,17 @@
+# UTPopper
+
+## Description
+
+Component meant to be used as a PopUp anchored to other elements
+
+## Props
+
+| Name                    | Type                               | Default | Description                                       |
+| ----------------------- | ---------------------------------- | ------- | ------------------------------------------------- |
+| anchor                  | oneOfType([refType, elementType]), |         | Element to which the popper is anchored           |
+| children,               | object                             |         | Elements to render within the popper              |
+| classes,                | objectOf( string)                  |         | CSS classes                                       |
+| clickAwayListenerProps, | object                             |         | Props handed over to ClickawayListener            |
+| onClose,                | func                               |         | Close function                                    |
+| paperProps,             | object                             |         | Props to hand over to the UTPapper                |
+| ...popperProps          | object                             |         | Spread of props compatible with materialUIs props |

package/dist/components/UTPopper/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
+var _propTypes = require("prop-types");
+var _commonTypes = require("../../types/commonTypes");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const UTPopper = _ref => {
+  let {
+    anchor,
+    children,
+    classes,
+    clickAwayListenerProps,
+    onClose,
+    paperProps,
+    ...popperProps
+  } = _ref;
+  const [open, handleOpenState] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const shouldOpen = !!anchor && !(0, _isEmpty.default)(children);
+    handleOpenState(shouldOpen);
+  }, [anchor, children]);
+  return anchor ? /*#__PURE__*/_react.default.createElement(_core.ClickAwayListener, _extends({
+    onClickAway: onClose
+  }, clickAwayListenerProps), /*#__PURE__*/_react.default.createElement(_core.Popper, _extends({
+    anchorEl: anchor,
+    open: open,
+    transition: true
+  }, popperProps), /*#__PURE__*/_react.default.createElement(_core.Paper, _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.paper
+  }, paperProps), children))) : null;
+};
+UTPopper.propTypes = {
+  anchor: (0, _propTypes.oneOfType)([_commonTypes.refType, _propTypes.elementType]),
+  children: _propTypes.object,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  clickAwayListenerProps: _propTypes.object,
+  onClose: _propTypes.func,
+  paperProps: _propTypes.object,
+  popperProps: _propTypes.object
+};
+var _default = exports.default = UTPopper;

package/dist/components/UTRadioGroup/index.js

@@ -9,9 +9,10 @@ var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormCo
 var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
 var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup"));
 var _propTypes = require("prop-types");
+var _buttonTypes = require("../../types/buttonTypes");
 var _formTypes = require("../../types/formTypes");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
 var _classesUtils = require("../../utils/classesUtils");
 var _theme = require("./theme");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -74,22 +75,25 @@ class UTRadioGroup extends _react.PureComponent {
   render() {
     var _field$configuration;
     const {
+      actions,
       classNames = {},
       classes: themeClasses,
       containerClassName,
       field,
+      hideLabels,
       input,
       options,
       titleProps,
       withUpperTitle
     } = this.props;
-    const shouldShowUpperTitle = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) && withUpperTitle;
+    const shouldShowUpperTitle = ((field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.ignore_title) || hideLabels) && withUpperTitle && (field === null || field === void 0 ? void 0 : field.title);
     const classes = (0, _classesUtils.mergeClasses)(themeClasses, classNames);
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-      className: classes.title
-    }, titleProps, {
-      withMarkdown: true
-    }), field.title), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, shouldShowUpperTitle && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, _extends({
+      actions: actions,
+      className: classes.title,
+      readOnly: field.read_only,
+      required: field.required
+    }, titleProps), field === null || field === void 0 ? void 0 : field.title), /*#__PURE__*/_react.default.createElement(_RadioGroup.default, {
       name: input.name,
       value: input.value || '',
       className: containerClassName,
@@ -107,6 +111,7 @@ UTRadioGroup.defaultProps = {
   valueKey: 'value'
 };
 UTRadioGroup.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
   classes: (0, _propTypes.objectOf)(_propTypes.string),
   className: _propTypes.string,
   classNames: (0, _propTypes.objectOf)(_propTypes.string),
@@ -117,6 +122,7 @@ UTRadioGroup.propTypes = {
   disableRipple: _propTypes.bool,
   divider: _propTypes.bool,
   field: _formTypes.fieldType,
+  hideLabels: _propTypes.bool,
   input: _formTypes.inputPropTypes,
   labelKey: _propTypes.string,
   options: (0, _propTypes.arrayOf)(_propTypes.object),

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

@@ -54,7 +54,6 @@ const UTRating = _ref => {
     className: "".concat(_stylesModule.default.container, " ").concat(classNames.container),
     "data-testid": dataTestId
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
-    colorTheme: "dark",
     required: required
   }, title), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.optionsContainer, " ").concat(classNames.optionsContainer, " ").concat(isMobileOrTablet ? _stylesModule.default.responsive : '')

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

@@ -181,7 +181,7 @@ const UTSelect = _ref => {
     className: "".concat(_stylesModule.default.container, " ").concat(className)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
     required: required,
-    variant: _inputs.TITLE_VARIANTS[titleVariant]
+    size: titleVariant
   }, title), /*#__PURE__*/_react.default.createElement(_lab.Autocomplete, {
     disabled: disabled || readOnly,
     getOptionLabel: option => "".concat(option.name),

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

@@ -13,7 +13,6 @@ var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
 var _UTValidation = _interopRequireWildcard(require("../../../UTValidation"));
 var _constants = require("../../../UTBaseInputField/constants");
 var _utils = require("../../../UTValidation/utils");
-var _inputs = require("../../../../constants/inputs.js");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -58,7 +57,6 @@ const UTTextInput = _ref => {
     validations,
     value = null
   } = _ref;
-  const titleColorTheme = readOnly ? 'gray' : 'dark';
   const validationData = (0, _react.useMemo)(() => !(0, _isEmpty.default)(validations) ? validations : error && (0, _utils.formatErrorToValidation)(error), [error, validations]);
   const leftAdornments = (0, _react.useMemo)(() => {
     const adornments = [];
@@ -111,10 +109,10 @@ const UTTextInput = _ref => {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, " ").concat(classNames.container)
   }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
-    colorTheme: titleColorTheme,
     dataTestId: labelDataTestId,
+    readOnly: readOnly,
     required: required,
-    variant: _inputs.TITLE_VARIANTS[titleVariant]
+    size: titleVariant
   }, title), /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
     alwaysShowPlaceholder: alwaysShowPlaceholder,
     classNames: classNames,

package/dist/index.js

@@ -273,6 +273,12 @@ Object.defineProperty(exports, "UTPopUp", {
     return _UTPopUp.default;
   }
 });
+Object.defineProperty(exports, "UTPopper", {
+  enumerable: true,
+  get: function () {
+    return _UTPopper.default;
+  }
+});
 Object.defineProperty(exports, "UTProductItem", {
   enumerable: true,
   get: function () {
@@ -499,6 +505,7 @@ var _UTPanel = _interopRequireDefault(require("./components/UTPanel"));
 var _UTPasswordField = _interopRequireDefault(require("./components/UTPasswordField"));
 var _UTPhoneInput = _interopRequireDefault(require("./components/UTPhoneInput"));
 var _UTPieChart = _interopRequireDefault(require("./components/UTPieChart"));
+var _UTPopper = _interopRequireDefault(require("./components/UTPopper"));
 var _UTPopUp = _interopRequireDefault(require("./components/UTPopUp"));
 var _UTProductItem = _interopRequireDefault(require("./components/UTProductItem"));
 var _UTProgressBar = _interopRequireDefault(require("./components/UTProgressBar"));

package/dist/types/buttonTypes.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonTypes = void 0;
+var _propTypes = require("prop-types");
+const buttonTypes = exports.buttonTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: (0, _propTypes.objectOf)(_propTypes.string),
+  colorTheme: _propTypes.string,
+  count: _propTypes.number,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  hideTextOnResponsive: _propTypes.bool,
+  Icon: _propTypes.elementType,
+  iconPlacement: _propTypes.string,
+  loading: _propTypes.bool,
+  onClick: _propTypes.func,
+  size: _propTypes.string,
+  type: _propTypes.string,
+  variant: _propTypes.string
+};

package/package.json

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