@widergy/energy-ui 3.171.0 → 3.171.2

package/CHANGELOG.md

@@ -1,9 +1,25 @@
-# [3.171.0](https://github.com/widergy/energy-ui/compare/v3.170.0...v3.171.0) (2026-06-22)
+## [3.171.2](https://github.com/widergy/energy-ui/compare/v3.171.1...v3.171.2) (2026-06-27)
 
 
-### Features
+### Bug Fixes
+
+* [DIS-1103] mejoras ut select + ut date picker ([#804](https://github.com/widergy/energy-ui/issues/804)) ([d43e768](https://github.com/widergy/energy-ui/commit/d43e768a8d05c0983ea319ed6756c3ade4ebdacb))
+
+## [3.171.1](https://github.com/widergy/energy-ui/compare/v3.171.0...v3.171.1) (2026-06-23)
+
+### Correcciones
+
+* Se corrigió un problema en el componente de selección de opciones que impedía mostrar correctamente los mensajes de error de validación. [#827](https://github.com/widergy/Energy-UI/pull/827) [OUG-999](https://widergy.atlassian.net/browse/OUG-999)
+
+### Novedades y Mejoras
+
+* Mejoras internas de la plataforma. [`accb722`](https://github.com/widergy/Energy-UI/commit/accb722)
+
+# [3.171.0](https://github.com/widergy/energy-ui/compare/v3.170.0...v3.171.0) (2026-06-22)
+
+### Novedades y Mejoras
 
-* disabled prop in sidebar utpanel ([#826](https://github.com/widergy/energy-ui/issues/826)) ([f7ce127](https://github.com/widergy/energy-ui/commit/f7ce127d78e5c49d0a8b9a80eae8d2dae02c381d))
+* Ahora es posible deshabilitar elementos individuales del panel lateral, impidiendo su acceso cuando no están disponibles o no corresponden al contexto del usuario. [#826](https://github.com/widergy/Energy-UI/pull/826) [AXCH-1778](https://widergy.atlassian.net/browse/AXCH-1778)
 
 # [3.170.0](https://github.com/widergy/energy-ui/compare/v3.169.0...v3.170.0) (2026-06-22)
 

package/dist/components/UTBanner/stories/UTBanner.stories.js

@@ -66,7 +66,12 @@ var _default = exports.default = {
       description: 'Nombre del ícono (string) o componente React. Ej: "IconAlertCircle".'
     },
     iconProps: {
-      control: false
+      control: false,
+      description: 'Props adicionales que se pasan al componente Icon.'
+    },
+    classNames: {
+      control: false,
+      description: 'Clases CSS adicionales para personalizar el componente.'
     },
     onClose: {
       control: false
@@ -97,6 +102,16 @@ var _default = exports.default = {
     }
   },
   component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classNames']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar mensajes de notificación con soporte para icono, título, descripción, texto de ayuda, categoría y botones de acción. Soporta múltiples variantes de color y tamaño, y layouts horizontal y vertical.'
+      }
+    }
+  },
   title: 'Energy-UI/UTBanner'
 };
 const Playground = exports.Playground = {};

package/dist/components/UTBaseInputField/theme.js

@@ -37,6 +37,7 @@ const getBackgroundColor = _ref => {
   if (readOnly) return 'transparent';
   if (variant === 'gray') return theme.Palette.light['04'];
   if (variant === 'transparent' && error) return theme.Palette.error['01'];
+  if (variant === 'transparent') return 'transparent';
   if (disabled) return theme.Palette.light['03'];
   return theme.Palette.light['01'];
 };
@@ -141,22 +142,22 @@ const retrieveStyle = _ref4 => {
       borderWidth: '1px'
     },
     focusedRoot: {
-      backgroundColor: theme.Palette.light['01'],
+      backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01'],
       '&:hover': {
-        backgroundColor: theme.Palette.light['01']
+        backgroundColor: variant === 'transparent' ? theme.Palette.light['03'] : theme.Palette.light['01']
       }
     },
     withValueRoot: {
       ...(variant === 'transparent' && !error && {
-        backgroundColor: actionPalette['01']
+        backgroundColor: 'transparent'
       })
     },
     focusedInputContainer: {
-      ...(!error && {
+      ...(variant !== 'transparent' && !error && {
         borderColor: "".concat(actionPalette['04'], " !important"),
         borderWidth: '2px'
       }),
-      ...(error && {
+      ...(variant !== 'transparent' && error && {
         borderColor: "".concat(theme.Palette.error['04'], " !important")
       })
     },

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

@@ -40,13 +40,13 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
 
 .smallChildrenContainer {
   @extend %childrenContainer;
-  grid-gap: var(--UT-button-gap-sm, 8px);
+  grid-gap: var(--UT-button-gap-sm, 0.5rem);
 }
 
 .largeChildrenContainer,
 .mediumChildrenContainer {
   @extend %childrenContainer;
-  grid-gap: var(--UT-button-gap-md, 8px);
+  grid-gap: var(--UT-button-gap-md, 0.5rem);
 }
 
 .loading {
@@ -54,15 +54,15 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
 }
 
 .paddingLarge {
-  padding: var(--UT-button-padding-md, 12px) var(--UT-button-padding-lg, 16px);
+  padding: var(--UT-button-padding-md, 0.75rem) var(--UT-button-padding-lg, 1rem);
 }
 
 .paddingMedium {
-  padding: var(--UT-button-padding-sm, 8px) var(--UT-button-padding-md, 12px);
+  padding: var(--UT-button-padding-sm, 0.5rem) var(--UT-button-padding-md, 0.75rem);
 }
 
 .paddingSmall {
-  padding: var(--UT-button-padding-xs, 4px) var(--UT-button-padding-sm, 8px);
+  padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
 }
 
 .hideTextOnResponsive {
@@ -74,33 +74,33 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
 
   &.paddingLarge {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-md, 12px);
+      padding: var(--UT-button-padding-md, 0.75rem);
     }
   }
 
   &.paddingMedium {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-sm, 8px);
+      padding: var(--UT-button-padding-sm, 0.5rem);
     }
   }
 
   &.paddingSmall {
     @media #{$mobile} {
-      padding: var(--UT-button-padding-xs, 4px);
+      padding: var(--UT-button-padding-xs, 0.25rem);
     }
   }
 }
 
 .noChildren {
   &.paddingLarge {
-    padding: var(--UT-button-padding-md, 12px);
+    padding: var(--UT-button-padding-md, 0.75rem);
   }
 
   &.paddingMedium {
-    padding: var(--UT-button-padding-sm, 8px);
+    padding: var(--UT-button-padding-sm, 0.5rem);
   }
 
   &.paddingSmall {
-    padding: var(--UT-button-padding-xs, 4px);
+    padding: var(--UT-button-padding-xs, 0.25rem);
   }
 }

package/dist/components/UTButton/theme.js

@@ -113,7 +113,7 @@ const baseButtonTheme = theme => {
   var _theme$UTButton;
   return {
     root: {
-      borderRadius: 'var(--UT-button-radius, 4px)',
+      borderRadius: 'var(--UT-button-radius, 0.25rem)',
       boxShadow: 'none',
       minWidth: 'auto',
       textTransform: 'none',

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

@@ -8,7 +8,7 @@ $rounded-border-radius: 100px;
 
 .squareContainer {
   @extend %container;
-  border-radius: var(--UT-buttonGroup-radius, 8px);
+  border-radius: var(--UT-buttonGroup-radius, 0.5rem);
 
   & > button {
     border: none !important;

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

@@ -78,7 +78,10 @@ const conditionalStyles = _ref => {
     content: {
       ...(reversed && {
         flexDirection: 'row-reverse',
-        justifyContent: 'space-between'
+        justifyContent: 'space-between',
+        ...(variant === _constants.BUTTON_VARIANT && {
+          width: '100%'
+        })
       })
     },
     iconContainer: {

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

@@ -7,7 +7,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  grid-gap: var(--UT-dataCategory-title-gap, 8px);
+  grid-gap: var(--UT-dataCategory-title-gap, 0.5rem);
   width: 100%;
 }
 

package/dist/components/UTDataCategory/theme.js

@@ -27,7 +27,7 @@ const retrieveStyle = _ref => {
   return {
     area: {
       ...areaBackgroundColor,
-      padding: 'var(--UT-dataCategory-padding, 16px)',
+      padding: 'var(--UT-dataCategory-padding, 1rem)',
       borderRadius: 8
     }
   };

package/dist/components/UTDataElement/index.js

@@ -100,7 +100,7 @@ const UTDataElement = _ref => {
   }, IconComponent && /*#__PURE__*/_react.default.createElement(IconComponent, _extends({
     name: Icon,
     colorTheme: "gray",
-    size: "var(--UT-dataElement-icon-size, 24px)"
+    size: "var(--UT-dataElement-icon-size, 1.5rem)"
   }, iconProps)), /*#__PURE__*/_react.default.createElement("div", {
     className: infoClasses
   }, (prefix || title || showBadge) && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -4,13 +4,13 @@
 }
 
 .paddingSmall {
-  padding-bottom: var(--UT-dataElement-padding-sm, 8px);
-  padding-top: var(--UT-dataElement-padding-sm, 8px);
+  padding-bottom: var(--UT-dataElement-padding-sm, 0.5rem);
+  padding-top: var(--UT-dataElement-padding-sm, 0.5rem);
 }
 
 .paddingMedium {
-  padding-bottom: var(--UT-dataElement-padding-md, 16px);
-  padding-top: var(--UT-dataElement-padding-md, 16px);
+  padding-bottom: var(--UT-dataElement-padding-md, 1rem);
+  padding-top: var(--UT-dataElement-padding-md, 1rem);
 }
 
 .content {
@@ -25,31 +25,31 @@
 }
 
 .spacingSmall {
-  grid-gap: var(--UT-dataElement-gap-sm, 8px);
+  grid-gap: var(--UT-dataElement-gap-sm, 0.5rem);
 }
 
 .spacingMedium {
-  grid-gap: var(--UT-dataElement-gap-md, 16px);
+  grid-gap: var(--UT-dataElement-gap-md, 1rem);
 }
 
 .info {
   display: flex;
   flex: 1;
   flex-direction: row;
-  grid-gap: var(--UT-dataElement-content-gap-x, 8px);
+  grid-gap: var(--UT-dataElement-content-gap-x, 0.5rem);
   justify-content: space-between;
 }
 
 .vertical {
   flex-direction: column;
-  grid-gap: var(--UT-dataElement-content-gap-y, 8px);
+  grid-gap: var(--UT-dataElement-content-gap-y, 0.5rem);
 }
 
 .topInfo {
   align-items: center;
   display: flex;
   flex-direction: row;
-  grid-gap: var(--UT-dataElement-content-gap-x, 8px);
+  grid-gap: var(--UT-dataElement-content-gap-x, 0.5rem);
 }
 
 .iconCollapseButton {

package/dist/components/UTDatePicker/versions/V1/stories/UTDatePickerV1.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithTitleRequired = exports.WithTitleAndError = exports.WithTitle = exports.WithRange = exports.WithHelpText = exports.TestSite = exports.Selected = exports.ReadOnlyEmpty = exports.ReadOnly = exports.Playground = exports.Focus = exports.Error = exports.Disabled = exports.Default = void 0;
+exports.default = exports.WithTitleRequired = exports.WithTitleAndError = exports.WithTitle = exports.WithRange = exports.WithHelpText = exports.TestSite = exports.Selected = exports.ReadOnlyEmpty = exports.ReadOnly = exports.Playground = exports.PickerVariant = exports.Focus = exports.Error = exports.Disabled = exports.Default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = require("prop-types");
 var _ = _interopRequireDefault(require("../../.."));
@@ -246,4 +246,62 @@ const WithTitleAndError = exports.WithTitleAndError = {
 };
 const TestSite = exports.TestSite = {
   render: () => /*#__PURE__*/_react.default.createElement(TestSiteStory, null)
+};
+const PickerVariant = exports.PickerVariant = {
+  name: 'Variant — Picker',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Variante picker: fondo transparente en default, `light03` al hacer foco, sin borde. Ideal para usar sobre cards o fondos con color. Comparado con la variante select (fondo blanco con borde).'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=select (default)"), /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    variant: "select"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=picker"), /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    variant: "picker"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=picker con valor seleccionado"), /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024",
+    variant: "picker"
+  })))
 };

package/dist/components/UTLabel/UTLabel.stories.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Default = void 0;
+exports.default = exports.HeadingBlocks = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("stories/utils");
 var _Palette = require("../../constants/Palette");
 var _constants = require("./constants");
@@ -151,4 +152,83 @@ const Default = exports.Default = {
     shade: '05'
   },
   name: 'Playground'
+};
+const BODY_TEXT = 'El sistema de diseño provee tokens de tipografía que garantizan consistencia visual en todos los productos. Cada nivel de heading tiene un line-height proporcional a su tamaño para una lectura cómoda.';
+const SMALL_TEXT = 'Los valores de consumo se actualizan cada 15 minutos y se almacenan durante 24 meses para análisis histórico.';
+const XSMALL_TEXT = 'Última actualización: 26/05/2026 · Fuente: medidor digital · ID lectura: 00487-A';
+const HEADINGS = [{
+  variant: 'title1',
+  label: 'Title 1 — H1',
+  heading: 'Gestión de energía para utilities modernas que operan en múltiples regiones del país'
+}, {
+  variant: 'title2',
+  label: 'Title 2 — H2',
+  heading: 'Seguimiento de consumo en tiempo real con integración a sistemas de medición inteligente'
+}, {
+  variant: 'title3',
+  label: 'Title 3 — H3',
+  heading: 'Configuración de alertas, notificaciones y umbrales de consumo por categoría de usuario'
+}, {
+  variant: 'subtitle1',
+  label: 'Subtitle 1 — H4',
+  heading: 'Parámetros de medición avanzada para clientes residenciales de alta demanda energética'
+}, {
+  variant: 'subtitle2',
+  label: 'Subtitle 2 — H5',
+  heading: 'Detalles del período de facturación correspondiente al bimestre actual del servicio eléctrico'
+}];
+const HeadingBlocks = exports.HeadingBlocks = {
+  name: 'Bloques heading + texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cada categoría de heading junto a párrafos de body, small y xsmall para verificar jerarquía y line-height.'
+      }
+    }
+  },
+  render: () => {
+    const pageStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '3rem',
+      maxWidth: '560px',
+      padding: '2rem'
+    };
+    const blockStyle = {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.75rem',
+      borderLeft: '3px solid #e2e8f0',
+      paddingLeft: '1rem'
+    };
+    const chipStyle = {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: '0.25rem'
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: pageStyle
+    }, HEADINGS.map(_ref => {
+      let {
+        variant,
+        label,
+        heading
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: variant,
+        style: blockStyle
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: chipStyle
+      }, label), /*#__PURE__*/_react.default.createElement(_.default, {
+        variant: variant
+      }, heading), /*#__PURE__*/_react.default.createElement(_.default, {
+        variant: "small"
+      }, BODY_TEXT), /*#__PURE__*/_react.default.createElement(_.default, {
+        variant: "small"
+      }, SMALL_TEXT), /*#__PURE__*/_react.default.createElement(_.default, {
+        variant: "xsmall"
+      }, XSMALL_TEXT));
+    }));
+  }
 };

package/dist/components/UTLabel/constants.js

@@ -42,16 +42,16 @@ const VARIANTS_SIZES = exports.VARIANTS_SIZES = {
   [VARIANTS_NAMES.TD]: 'var(--UT-label-size-body, 1rem)'
 };
 const VARIANTS_LINE_HEIGHT = exports.VARIANTS_LINE_HEIGHT = {
-  [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-lh-heading, 100%)',
-  [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-lh-heading, 100%)',
-  [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-lh-heading, 100%)',
-  [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-lh-heading, 100%)',
-  [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-lh-body, 1.375rem)',
-  [VARIANTS_NAMES.BODY]: 'var(--UT-label-lh-body, 1.375rem)',
-  [VARIANTS_NAMES.SMALL]: 'var(--UT-label-lh-small, 1.25rem)',
-  [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-lh-xsmall, 1.125rem)',
-  [VARIANTS_NAMES.TH]: 'var(--UT-label-lh-body, 1.375rem)',
-  [VARIANTS_NAMES.TD]: 'var(--UT-label-lh-body, 1.375rem)'
+  [VARIANTS_NAMES.TITLE1]: 'var(--UT-label-lh-heading, 1.2)',
+  [VARIANTS_NAMES.TITLE2]: 'var(--UT-label-lh-heading, 1.2)',
+  [VARIANTS_NAMES.TITLE3]: 'var(--UT-label-lh-heading, 1.2)',
+  [VARIANTS_NAMES.SUBTITLE1]: 'var(--UT-label-lh-subheading, 1.4)',
+  [VARIANTS_NAMES.SUBTITLE2]: 'var(--UT-label-lh-subheading, 1.4)',
+  [VARIANTS_NAMES.BODY]: 'var(--UT-label-lh-body, 1.4)',
+  [VARIANTS_NAMES.SMALL]: 'var(--UT-label-lh-small, 1.4)',
+  [VARIANTS_NAMES.XSMALL]: 'var(--UT-label-lh-xsmall, 1.5)',
+  [VARIANTS_NAMES.TH]: 'var(--UT-label-lh-body, 1.4)',
+  [VARIANTS_NAMES.TD]: 'var(--UT-label-lh-body, 1.4)'
 };
 const WEIGHTS = exports.WEIGHTS = {
   thin: 'var(--UT-label-weight-thin, 100)',

package/dist/components/UTLabel/theme.js

@@ -71,7 +71,7 @@ const retrieveStyle = _ref2 => {
       '& h1, & h2, & h3, & h4, & h5, & h6': {
         color: darkTextColor,
         fontWeight: _constants.WEIGHTS.medium,
-        lineHeight: 'var(--UT-label-lh-heading, 1)',
+        lineHeight: 'var(--UT-label-lh-heading, 1.2)',
         margin: '0 0 var(--UT-label-markdown-margin-md, 8px) 0'
       },
       '& h1': {
@@ -127,9 +127,9 @@ const retrieveStyle = _ref2 => {
       },
       '& pre': {
         backgroundColor: theme.Palette[_Palette.COLOR_THEMES.light][_Palette.COLOR_SHADES.shade03],
-        borderRadius: 'var(--UT-radius-md, 8px)',
+        borderRadius: 'var(--UT-radius-md, 0.5rem)',
         fontSize: 'var(--UT-label-size-small, 0.875em)',
-        lineHeight: 'var(--UT-label-lh-small, 1.25em)',
+        lineHeight: 'var(--UT-label-lh-small, 1.4)',
         margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0',
         padding: 'var(--UT-label-markdown-padding-sm, 12px) var(--UT-label-markdown-padding-md, 16px)',
         whiteSpace: 'pre-wrap'
@@ -176,7 +176,7 @@ const retrieveStyle = _ref2 => {
         fontSize: 'var(--UT-label-size-xsmall, 0.75em)'
       },
       '& img, & video, & audio': {
-        borderRadius: 'var(--UT-radius-md, 8px)',
+        borderRadius: 'var(--UT-radius-md, 0.5rem)',
         margin: '0 0 var(--UT-label-markdown-margin-xl, 24px) 0'
       },
       '& .contains-task-list': {

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

@@ -10,6 +10,8 @@ var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup")
 var _buttonTypes = require("../../../../types/buttonTypes");
 var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
 var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _utils = require("../../../UTValidation/utils");
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
 var _Radio = _interopRequireDefault(require("./components/Radio"));
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 var _constants = require("./constants");
@@ -21,9 +23,13 @@ const UTRadioGroup = _ref => {
     actions,
     classNames = {},
     dataTestId,
+    descriptionProps,
     disabled,
+    error,
+    errorDataTestId,
     horizontalSpacing = 'medium',
     itemDataTestId,
+    nameProps,
     onChange = () => {},
     options,
     required,
@@ -31,8 +37,6 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    nameProps,
-    descriptionProps,
     verticalSpacing = 'medium'
   } = _ref;
   const categorizedOptions = (0, _react.useMemo)(() => {
@@ -55,6 +59,7 @@ const UTRadioGroup = _ref => {
       return categoryA === _constants.NO_CATEGORY ? -1 : categoryB === _constants.NO_CATEGORY ? 1 : 0;
     });
   }, [options]);
+  const validationData = (0, _react.useMemo)(() => error && (0, _utils.formatErrorToValidation)(error), [error]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_stylesModule.default.container, "  ").concat(classNames.root),
     "data-testid": dataTestId
@@ -88,7 +93,10 @@ const UTRadioGroup = _ref => {
       spacing: horizontalSpacing,
       variant: variant
     }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
-  })));
+  })), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
 };
 UTRadioGroup.propTypes = {
   actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
@@ -97,6 +105,7 @@ UTRadioGroup.propTypes = {
   descriptionProps: _propTypes.object,
   disabled: _propTypes.bool,
   error: _propTypes.string,
+  errorDataTestId: _propTypes.string,
   horizontalSpacing: _propTypes.string,
   itemDataTestId: _propTypes.string,
   nameProps: _propTypes.object,