@widergy/energy-ui 3.172.0 → 3.172.1

package/CHANGELOG.md

@@ -1,9 +1,19 @@
+## [3.172.1](https://github.com/widergy/energy-ui/compare/v3.172.0...v3.172.1) (2026-07-03)
+
+
+### Bug Fixes
+
+* [DIS-1108] ajustes utbutton ([#824](https://github.com/widergy/energy-ui/issues/824)) ([46b1ef8](https://github.com/widergy/energy-ui/commit/46b1ef8e07217bd75451b962236f98790c544f4b))
+
 # [3.172.0](https://github.com/widergy/energy-ui/compare/v3.171.3...v3.172.0) (2026-07-02)
 
+### Novedades y Mejoras
 
-### Features
+* En los selectores desplegables, ahora es posible fijar una opción al pie de la lista que permanece siempre visible, incluso al filtrar por búsqueda o al no encontrar resultados. [#830](https://github.com/widergy/Energy-UI/pull/830) [AXCH-1900](https://widergy.atlassian.net/browse/AXCH-1900)
+
+### Correcciones
 
-* [AXCH-1900] fixed bottom option in utselectv1 ([#830](https://github.com/widergy/energy-ui/issues/830)) ([c331ebf](https://github.com/widergy/energy-ui/commit/c331ebfb0cc2d2f02617943ae8ef36c566579793))
+* Mejoras internas de la plataforma. [`56be941`](https://github.com/widergy/Energy-UI/commit/56be941)
 
 ## [3.171.3](https://github.com/widergy/energy-ui/compare/v3.171.2...v3.171.3) (2026-06-29)
 

package/dist/components/UTButton/constants.js

@@ -24,6 +24,8 @@ const ICON_PLACEMENTS = exports.ICON_PLACEMENTS = {
 const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
   colorTheme: 'secondary',
   disabled: false,
+  fullHeight: false,
+  fullWidth: false,
   hideTextOnResponsive: false,
   iconPlacement: ICON_PLACEMENTS.left,
   loading: false,

package/dist/components/UTButton/index.js

@@ -29,6 +29,8 @@ const UTButton = _ref => {
     count,
     dataTestId,
     disabled,
+    fullHeight,
+    fullWidth,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -58,7 +60,6 @@ const UTButton = _ref => {
   } = (0, _react.useMemo)(() => (0, _utils.getIconProps)({
     className: icon,
     colorTheme,
-    hasContent: !!children,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -66,7 +67,7 @@ const UTButton = _ref => {
     RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
   const LeftIconToShow = LeftIconComponent && /*#__PURE__*/_react.default.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
   const RightIconToShow = RightIconComponent && /*#__PURE__*/_react.default.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
@@ -80,7 +81,7 @@ const UTButton = _ref => {
   }), children), RightIconToShow);
   return /*#__PURE__*/_react.default.createElement(_Button.default, {
     classes: materialButtonClasses,
-    className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
+    className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(fullHeight && _stylesModule.default.fullHeight, "\n        ").concat(fullWidth && _stylesModule.default.fullWidth, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -98,6 +99,8 @@ UTButton.propTypes = {
   count: _propTypes.number,
   dataTestId: _propTypes.string,
   disabled: _propTypes.bool,
+  fullHeight: _propTypes.bool,
+  fullWidth: _propTypes.bool,
   hideTextOnResponsive: _propTypes.bool,
   /**
    * @deprecated Use LeftIcon or RightIcon instead.

package/dist/components/UTButton/stories/UTButtonSizes.stories.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Small = exports.Medium = exports.Large = void 0;
+exports.default = exports.Small = exports.Medium = exports.Large = exports.FullHeight = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _ = _interopRequireDefault(require(".."));
 var _storiesConstants = require("./storiesConstants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -37,4 +38,18 @@ const Large = exports.Large = {
     children: 'Large Size',
     size: 'large'
   }
+};
+const FullHeight = exports.FullHeight = {
+  args: {
+    children: 'Full Height',
+    fullHeight: true
+  },
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      height: 80,
+      border: '1px dashed #ccc',
+      padding: 8
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, args))
 };

package/dist/components/UTButton/stories/storiesConstants.js

@@ -93,6 +93,30 @@ const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
       }
     }
   },
+  fullHeight: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullHeight
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullWidth: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.fullWidth
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
   hideTextOnResponsive: {
     control: 'boolean',
     description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -222,6 +246,8 @@ const COMMON_ARGS = exports.COMMON_ARGS = {
   colorTheme: _constants.DEFAULT_PROPS.colorTheme,
   dataTestId: 'customButtonId',
   disabled: _constants.DEFAULT_PROPS.disabled,
+  fullHeight: _constants.DEFAULT_PROPS.fullHeight,
+  fullWidth: _constants.DEFAULT_PROPS.fullWidth,
   hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
   loading: _constants.DEFAULT_PROPS.loading,
   size: _constants.DEFAULT_PROPS.size,

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

@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
   padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
 }
 
+.fullHeight {
+  min-height: unset;
+  height: 100%;
+}
+
+.fullWidth {
+  min-width: unset;
+  width: 100%;
+}
+
 .hideTextOnResponsive {
   .textContainer {
     @media #{$mobile} {

package/dist/components/UTButton/theme.js

@@ -50,7 +50,7 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(actionColorName === _constants.COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
+      border: "1px solid ".concat(lightTheme['04']),
       fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],

package/dist/components/UTButton/utils.js

@@ -15,7 +15,6 @@ const buildSingleIconProps = _ref => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     size,
@@ -24,7 +23,7 @@ const buildSingleIconProps = _ref => {
   if (!Icon) return null;
   return {
     IconComponent: (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon,
-    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? _stylesModule.default.icon : _stylesModule.default["iconOnly".concat((0, _componentUtils.capitalize)(size))], "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
+    className: "\n      ".concat(_stylesModule.default.baseIcon, "\n      ").concat(className, "\n      ").concat(_stylesModule.default.icon, "\n      ").concat(hideTextOnResponsive ? _stylesModule.default["adaptableIcon".concat((0, _componentUtils.capitalize)(size))] : '', "\n    "),
     ...((0, _componentUtils.isUTIcon)(Icon) ? {
       colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
@@ -35,7 +34,6 @@ const getIconProps = _ref2 => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -49,7 +47,6 @@ const getIconProps = _ref2 => {
   const commonParams = {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     size,
     variant

package/dist/components/UTDataCategory/theme.js

@@ -11,7 +11,7 @@ const backgroundColor = function (theme, area) {
   const colorTheme = areaProps.colorTheme || _Palette.COLOR_THEMES.light;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const areaColor = actionPaletteColors[colorTheme];
-  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? '03' : '01');
+  const shade = areaProps.shade || (_Palette.COLOR_THEMES.light === colorTheme ? _Palette.COLOR_SHADES.shade03 : _Palette.COLOR_SHADES.shade01);
   return {
     backgroundColor: area ? areaColor[shade] : 'transparent'
   };

package/dist/components/UTDataElement/README.md

@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
 
 ```javascript
 <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
+```

package/dist/components/UTTracker/UTTracker.stories.js

@@ -0,0 +1,332 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutTitle = exports.WithoutDetailsTab = exports.FlatMode = exports.ErrorVariant = exports.Default = exports.CardMode = exports.AllVariants = exports.AllModes = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("stories/utils");
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+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 subSteps = [{
+  id: 1,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 2,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 3,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}];
+const defaultSteps = [{
+  id: 1,
+  subSteps,
+  title: 'Solicitud confirmada'
+}, {
+  id: 2,
+  subSteps,
+  title: 'En preparación'
+}, {
+  id: 3,
+  title: 'En camino'
+}, {
+  description: 'Fecha estimada 07 de agosto',
+  id: 4,
+  title: 'Entregado'
+}];
+var _default = exports.default = {
+  args: {
+    currentStep: 2,
+    description: 'Hora estimada de entrega 7:00 PM',
+    detailsTab: {
+      enabled: true,
+      title: 'Ver Detalle'
+    },
+    mode: _constants.CARD,
+    steps: defaultSteps,
+    subtitle: '',
+    title: 'Pedido en curso',
+    variant: _constants.STANDARD
+  },
+  argTypes: {
+    classes: {
+      control: false,
+      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Objeto de clases CSS para override de estilos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: 'Número del paso activo actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del subtítulo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    detailsTab: {
+      control: 'object',
+      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ enabled: boolean, title: string }'
+        }
+      }
+    },
+    mode: {
+      control: 'inline-radio',
+      description: 'Determina el modo visual del componente.',
+      options: [_constants.CARD, _constants.FLAT],
+      table: {
+        defaultValue: {
+          summary: _constants.CARD
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)([_constants.CARD, _constants.FLAT])
+        }
+      }
+    },
+    steps: {
+      control: 'object',
+      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Determina la variante visual del componente.',
+      options: [_constants.STANDARD, _constants.ERROR],
+      table: {
+        defaultValue: {
+          summary: _constants.STANDARD
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)([_constants.STANDARD, _constants.ERROR])
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTTracker'
+};
+const Default = exports.Default = {
+  name: 'Playground'
+};
+const CardMode = exports.CardMode = {
+  args: {
+    mode: _constants.CARD,
+    variant: _constants.STANDARD
+  },
+  name: 'Modo Card',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
+      }
+    }
+  }
+};
+const FlatMode = exports.FlatMode = {
+  args: {
+    mode: _constants.FLAT,
+    variant: _constants.STANDARD
+  },
+  name: 'Modo Flat',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
+      }
+    }
+  }
+};
+const ErrorVariant = exports.ErrorVariant = {
+  args: {
+    description: 'Quería recargas catalíticas y pedí normales',
+    mode: _constants.CARD,
+    subtitle: 'Me equivoqué en el pedido',
+    variant: _constants.ERROR
+  },
+  name: 'Variante Error',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
+      }
+    }
+  }
+};
+const WithoutDetailsTab = exports.WithoutDetailsTab = {
+  args: {
+    detailsTab: undefined,
+    mode: _constants.CARD,
+    variant: _constants.STANDARD
+  },
+  name: 'Sin Pestaña de Detalle',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
+      }
+    }
+  }
+};
+const WithoutTitle = exports.WithoutTitle = {
+  args: {
+    mode: _constants.CARD,
+    title: undefined,
+    variant: _constants.STANDARD
+  },
+  name: 'Sin Título',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin título.'
+      }
+    }
+  }
+};
+const AllModes = exports.AllModes = {
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, [_constants.CARD, _constants.FLAT].map(mode => /*#__PURE__*/_react.default.createElement("div", {
+    key: mode,
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    mode: mode,
+    title: "Modo: ".concat(mode)
+  }))))),
+  name: 'Todos los Modos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
+      }
+    }
+  }
+};
+const AllVariants = exports.AllVariants = {
+  render: args => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    description: "Hora estimada de entrega 7:00 PM",
+    subtitle: "",
+    title: "Variante: standard",
+    variant: _constants.STANDARD
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
+    subtitle: "Me equivoqu\xE9 en el pedido",
+    title: "Variante: error",
+    variant: _constants.ERROR
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
+      }
+    }
+  }
+};

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

@@ -18,6 +18,8 @@ export const ICON_PLACEMENTS = {
 export const DEFAULT_PROPS = {
   colorTheme: 'secondary',
   disabled: false,
+  fullHeight: false,
+  fullWidth: false,
   hideTextOnResponsive: false,
   iconPlacement: ICON_PLACEMENTS.left,
   loading: false,

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

@@ -21,6 +21,8 @@ const UTButton = _ref => {
     count,
     dataTestId,
     disabled,
+    fullHeight,
+    fullWidth,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -50,7 +52,6 @@ const UTButton = _ref => {
   } = useMemo(() => getIconProps({
     className: icon,
     colorTheme,
-    hasContent: !!children,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -58,7 +59,7 @@ const UTButton = _ref => {
     RightIcon,
     size,
     variant
-  }), [colorTheme, children, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
+  }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
   const LeftIconToShow = LeftIconComponent && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
   const RightIconToShow = RightIconComponent && /*#__PURE__*/React.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
   const counterColorTheme = getCounterColorTheme(colorTheme, variant);
@@ -72,7 +73,7 @@ const UTButton = _ref => {
   }), children), RightIconToShow);
   return /*#__PURE__*/React.createElement(Button, {
     classes: materialButtonClasses,
-    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
+    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(fullHeight && styles.fullHeight, "\n        ").concat(fullWidth && styles.fullWidth, "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
     "data-testid": dataTestId,
     disabled: disabled || loading,
     onClick: onClick,
@@ -90,6 +91,8 @@ UTButton.propTypes = {
   count: number,
   dataTestId: string,
   disabled: bool,
+  fullHeight: bool,
+  fullWidth: bool,
   hideTextOnResponsive: bool,
   /**
    * @deprecated Use LeftIcon or RightIcon instead.

package/dist/esm/components/UTButton/stories/UTButtonSizes.stories.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import UTButton from '..';
 import { COMMON_ARG_TYPES, COMMON_ARGS, COMMON_PARAMETERS } from './storiesConstants';
 export default {
@@ -30,4 +31,18 @@ export const Large = {
     children: 'Large Size',
     size: 'large'
   }
+};
+export const FullHeight = {
+  args: {
+    children: 'Full Height',
+    fullHeight: true
+  },
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      height: 80,
+      border: '1px dashed #ccc',
+      padding: 8
+    }
+  }, /*#__PURE__*/React.createElement(UTButton, args))
 };

package/dist/esm/components/UTButton/stories/storiesConstants.js

@@ -88,6 +88,30 @@ export const COMMON_ARG_TYPES = {
       }
     }
   },
+  fullHeight: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.fullHeight
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  fullWidth: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
+    table: {
+      defaultValue: {
+        summary: DEFAULT_PROPS.fullWidth
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
   hideTextOnResponsive: {
     control: 'boolean',
     description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
@@ -217,6 +241,8 @@ export const COMMON_ARGS = {
   colorTheme: DEFAULT_PROPS.colorTheme,
   dataTestId: 'customButtonId',
   disabled: DEFAULT_PROPS.disabled,
+  fullHeight: DEFAULT_PROPS.fullHeight,
+  fullWidth: DEFAULT_PROPS.fullWidth,
   hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
   loading: DEFAULT_PROPS.loading,
   size: DEFAULT_PROPS.size,

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

@@ -65,6 +65,16 @@ $small-icon: var(--UT-button-icon-size-sm, 1.25rem);
   padding: var(--UT-button-padding-xs, 0.25rem) var(--UT-button-padding-sm, 0.5rem);
 }
 
+.fullHeight {
+  min-height: unset;
+  height: 100%;
+}
+
+.fullWidth {
+  min-width: unset;
+  width: 100%;
+}
+
 .hideTextOnResponsive {
   .textContainer {
     @media #{$mobile} {

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

@@ -44,7 +44,7 @@ export const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(actionColorName === COLORS_MAPPER.secondary ? neutralTheme['05'] : lightTheme['04']),
+      border: "1px solid ".concat(lightTheme['04']),
       fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
         backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],

package/dist/esm/components/UTButton/utils.js

@@ -8,7 +8,6 @@ const buildSingleIconProps = _ref => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     size,
@@ -17,7 +16,7 @@ const buildSingleIconProps = _ref => {
   if (!Icon) return null;
   return {
     IconComponent: isUTIcon(Icon) ? UTIcon : Icon,
-    className: "\n      ".concat(styles.baseIcon, "\n      ").concat(className, "\n      ").concat(hasContent ? styles.icon : styles["iconOnly".concat(capitalize(size))], "\n      ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n    "),
+    className: "\n      ".concat(styles.baseIcon, "\n      ").concat(className, "\n      ").concat(styles.icon, "\n      ").concat(hideTextOnResponsive ? styles["adaptableIcon".concat(capitalize(size))] : '', "\n    "),
     ...(isUTIcon(Icon) ? {
       colorTheme: getButtonElementColorTheme(colorTheme, variant),
       name: Icon
@@ -28,7 +27,6 @@ export const getIconProps = _ref2 => {
   let {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     Icon,
     iconPlacement,
@@ -42,7 +40,6 @@ export const getIconProps = _ref2 => {
   const commonParams = {
     className,
     colorTheme,
-    hasContent,
     hideTextOnResponsive,
     size,
     variant

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

@@ -1,11 +1,11 @@
-import { COLOR_THEMES } from '../../constants/Palette';
+import { COLOR_THEMES, COLOR_SHADES } from '../../constants/Palette';
 export const backgroundColor = function (theme, area) {
   var _theme$Palette;
   let areaProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const colorTheme = areaProps.colorTheme || COLOR_THEMES.light;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
   const areaColor = actionPaletteColors[colorTheme];
-  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? '03' : '01');
+  const shade = areaProps.shade || (COLOR_THEMES.light === colorTheme ? COLOR_SHADES.shade03 : COLOR_SHADES.shade01);
   return {
     backgroundColor: area ? areaColor[shade] : 'transparent'
   };

package/dist/esm/components/UTDataElement/README.md

@@ -134,4 +134,4 @@ If the component has any `children`, it will automatically become collapsible wi
 
 ```javascript
 <UTDataElement area title="Highlighted Item" Data="Important information" Icon="IconStar" />
-```
+```

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

@@ -0,0 +1,325 @@
+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); }
+import React from 'react';
+import { joinArgTypes } from 'stories/utils';
+import { CARD, ERROR, FLAT, STANDARD } from './constants';
+import UTTracker from '.';
+const subSteps = [{
+  id: 1,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 2,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}, {
+  id: 3,
+  subtitle: '02 noviembre 2023, 4:38 PM',
+  title: 'Description Step'
+}];
+const defaultSteps = [{
+  id: 1,
+  subSteps,
+  title: 'Solicitud confirmada'
+}, {
+  id: 2,
+  subSteps,
+  title: 'En preparación'
+}, {
+  id: 3,
+  title: 'En camino'
+}, {
+  description: 'Fecha estimada 07 de agosto',
+  id: 4,
+  title: 'Entregado'
+}];
+export default {
+  args: {
+    currentStep: 2,
+    description: 'Hora estimada de entrega 7:00 PM',
+    detailsTab: {
+      enabled: true,
+      title: 'Ver Detalle'
+    },
+    mode: CARD,
+    steps: defaultSteps,
+    subtitle: '',
+    title: 'Pedido en curso',
+    variant: STANDARD
+  },
+  argTypes: {
+    classes: {
+      control: false,
+      description: 'Objeto de clases CSS para personalizar estilos internos vía theming.',
+      table: {
+        defaultValue: {
+          summary: '{}'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    classNames: {
+      control: false,
+      description: 'Objeto de clases CSS para override de estilos internos.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'objectOf(string)'
+        }
+      }
+    },
+    currentStep: {
+      control: 'number',
+      description: 'Número del paso activo actualmente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    description: {
+      control: 'text',
+      description: 'Texto descriptivo que aparece debajo del subtítulo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    detailsTab: {
+      control: 'object',
+      description: 'Configuración de la pestaña de detalle. `enabled` habilita el botón de colapsar; `title` es el texto del botón.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: '{ enabled: boolean, title: string }'
+        }
+      }
+    },
+    mode: {
+      control: 'inline-radio',
+      description: 'Determina el modo visual del componente.',
+      options: [CARD, FLAT],
+      table: {
+        defaultValue: {
+          summary: CARD
+        },
+        type: {
+          summary: joinArgTypes([CARD, FLAT])
+        }
+      }
+    },
+    steps: {
+      control: 'object',
+      description: 'Array de pasos a mostrar. Cada paso puede tener `id`, `title`, `subtitle`, `description` y `subSteps`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'arrayOf({ id, title, subtitle, description, subSteps })'
+        }
+      }
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtítulo que aparece junto al banner de error cuando `variant` es `error`.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Título del componente. En modo `flat` con `detailsTab` habilitado actúa como botón de colapsar.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    variant: {
+      control: 'inline-radio',
+      description: 'Determina la variante visual del componente.',
+      options: [STANDARD, ERROR],
+      table: {
+        defaultValue: {
+          summary: STANDARD
+        },
+        type: {
+          summary: joinArgTypes([STANDARD, ERROR])
+        }
+      }
+    }
+  },
+  component: UTTracker,
+  parameters: {
+    controls: {
+      exclude: ['classes']
+    },
+    docs: {
+      description: {
+        component: 'Componente para mostrar el seguimiento de un proceso paso a paso. Soporta dos modos visuales (`card` y `flat`), variantes de estado (`standard` y `error`), pasos con sub-pasos, y una pestaña de detalle colapsable.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTTracker'
+};
+export const Default = {
+  name: 'Playground'
+};
+export const CardMode = {
+  args: {
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Modo Card',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `card`, con sombra y fondo blanco. Incluye la pestaña de detalle al pie.'
+      }
+    }
+  }
+};
+export const FlatMode = {
+  args: {
+    mode: FLAT,
+    variant: STANDARD
+  },
+  name: 'Modo Flat',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker en modo `flat`, con fondo transparente. El título actúa como botón de colapsar cuando `detailsTab` está habilitado.'
+      }
+    }
+  }
+};
+export const ErrorVariant = {
+  args: {
+    description: 'Quería recargas catalíticas y pedí normales',
+    mode: CARD,
+    subtitle: 'Me equivoqué en el pedido',
+    variant: ERROR
+  },
+  name: 'Variante Error',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker con `variant="error"`. Muestra el banner de error con `subtitle` y `description`.'
+      }
+    }
+  }
+};
+export const WithoutDetailsTab = {
+  args: {
+    detailsTab: undefined,
+    mode: CARD,
+    variant: STANDARD
+  },
+  name: 'Sin Pestaña de Detalle',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin la pestaña de detalle colapsable. Las esquinas inferiores quedan redondeadas.'
+      }
+    }
+  }
+};
+export const WithoutTitle = {
+  args: {
+    mode: CARD,
+    title: undefined,
+    variant: STANDARD
+  },
+  name: 'Sin Título',
+  parameters: {
+    docs: {
+      description: {
+        story: 'UTTracker sin título.'
+      }
+    }
+  }
+};
+export const AllModes = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, [CARD, FLAT].map(mode => /*#__PURE__*/React.createElement("div", {
+    key: mode,
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    mode: mode,
+    title: "Modo: ".concat(mode)
+  }))))),
+  name: 'Todos los Modos',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de los dos modos disponibles: `card` y `flat`.'
+      }
+    }
+  }
+};
+export const AllVariants = {
+  render: args => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '24px',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Hora estimada de entrega 7:00 PM",
+    subtitle: "",
+    title: "Variante: standard",
+    variant: STANDARD
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minWidth: '300px'
+    }
+  }, /*#__PURE__*/React.createElement(UTTracker, _extends({}, args, {
+    description: "Quer\xEDa recargas catal\xEDticas y ped\xED normales",
+    subtitle: "Me equivoqu\xE9 en el pedido",
+    title: "Variante: error",
+    variant: ERROR
+  })))),
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparativa de las dos variantes disponibles: `standard` y `error`.'
+      }
+    }
+  }
+};

package/package.json

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