@widergy/energy-ui 3.171.0 → 3.171.2

package/dist/esm/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/esm/components/UTButton/theme.js

@@ -106,7 +106,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/esm/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/esm/components/UTCheckbox/versions/V1/theme.js

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

package/dist/esm/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/esm/components/UTDataCategory/theme.js

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

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

@@ -92,7 +92,7 @@ const UTDataElement = _ref => {
   }, IconComponent && /*#__PURE__*/React.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.createElement("div", {
     className: infoClasses
   }, (prefix || title || showBadge) && /*#__PURE__*/React.createElement("div", {

package/dist/esm/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/esm/components/UTDatePicker/versions/V1/stories/UTDatePickerV1.stories.js

@@ -238,4 +238,62 @@ export const WithTitleAndError = {
 };
 export const TestSite = {
   render: () => /*#__PURE__*/React.createElement(TestSiteStory, null)
+};
+export const 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.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=select (default)"), /*#__PURE__*/React.createElement(ControlledWrapper, {
+    variant: "select"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=picker"), /*#__PURE__*/React.createElement(ControlledWrapper, {
+    variant: "picker"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      background: '#f1f5f9',
+      borderRadius: '0.5rem',
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '0.7rem',
+      color: '#94a3b8',
+      fontFamily: 'monospace',
+      marginBottom: 4
+    }
+  }, "variant=picker con valor seleccionado"), /*#__PURE__*/React.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024",
+    variant: "picker"
+  })))
 };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { joinArgTypes } from 'stories/utils';
 import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
 import { DEFAULT_PROPS, VARIANTS, WEIGHTS } from './constants';
@@ -144,4 +145,83 @@ export const 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'
+}];
+export const 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.createElement("div", {
+      style: pageStyle
+    }, HEADINGS.map(_ref => {
+      let {
+        variant,
+        label,
+        heading
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        key: variant,
+        style: blockStyle
+      }, /*#__PURE__*/React.createElement("span", {
+        style: chipStyle
+      }, label), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: variant
+      }, heading), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "small"
+      }, BODY_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "small"
+      }, SMALL_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
+        variant: "xsmall"
+      }, XSMALL_TEXT));
+    }));
+  }
 };

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

@@ -36,16 +36,16 @@ export const VARIANTS_SIZES = {
   [VARIANTS_NAMES.TD]: 'var(--UT-label-size-body, 1rem)'
 };
 export const 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)'
 };
 export const WEIGHTS = {
   thin: 'var(--UT-label-weight-thin, 100)',

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

@@ -63,7 +63,7 @@ export const retrieveStyle = _ref2 => {
       '& h1, & h2, & h3, & h4, & h5, & h6': {
         color: darkTextColor,
         fontWeight: 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': {
@@ -119,9 +119,9 @@ export const retrieveStyle = _ref2 => {
       },
       '& pre': {
         backgroundColor: theme.Palette[COLOR_THEMES.light][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'
@@ -168,7 +168,7 @@ export 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/esm/components/UTRadioGroup/versions/V1/index.js

@@ -5,6 +5,8 @@ import RadioGroup from '@material-ui/core/RadioGroup';
 import { buttonTypes } from '../../../../types/buttonTypes';
 import UTFieldLabel from '../../../UTFieldLabel';
 import UTLabel from '../../../UTLabel';
+import { formatErrorToValidation } from '../../../UTValidation/utils';
+import UTValidation from '../../../UTValidation';
 import Radio from './components/Radio';
 import styles from './styles.module.scss';
 import { NO_CATEGORY } from './constants';
@@ -13,9 +15,13 @@ const UTRadioGroup = _ref => {
     actions,
     classNames = {},
     dataTestId,
+    descriptionProps,
     disabled,
+    error,
+    errorDataTestId,
     horizontalSpacing = 'medium',
     itemDataTestId,
+    nameProps,
     onChange = () => {},
     options,
     required,
@@ -23,8 +29,6 @@ const UTRadioGroup = _ref => {
     title,
     value = null,
     variant,
-    nameProps,
-    descriptionProps,
     verticalSpacing = 'medium'
   } = _ref;
   const categorizedOptions = useMemo(() => {
@@ -47,6 +51,7 @@ const UTRadioGroup = _ref => {
       return categoryA === NO_CATEGORY ? -1 : categoryB === NO_CATEGORY ? 1 : 0;
     });
   }, [options]);
+  const validationData = useMemo(() => error && formatErrorToValidation(error), [error]);
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(styles.container, "  ").concat(classNames.root),
     "data-testid": dataTestId
@@ -80,7 +85,10 @@ const UTRadioGroup = _ref => {
       spacing: horizontalSpacing,
       variant: variant
     }, (item === null || item === void 0 ? void 0 : item.configuration) || {}, item))));
-  })));
+  })), validationData && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: errorDataTestId,
+    validationData: validationData
+  }));
 };
 UTRadioGroup.propTypes = {
   actions: arrayOf(buttonTypes),
@@ -89,6 +97,7 @@ UTRadioGroup.propTypes = {
   descriptionProps: object,
   disabled: bool,
   error: string,
+  errorDataTestId: string,
   horizontalSpacing: string,
   itemDataTestId: string,
   nameProps: object,