@widergy/energy-ui 3.121.3 → 3.122.1

package/dist/components/UTFilterGrouping/stories/utils.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.idBelongsToNonStartItem = exports.idBelongsToHoverableItem = exports.idBelongsToCollapsedItem = exports.delay = exports.createExistingIds = void 0;
+var _testIds = require("../../../constants/testIds");
+var _constants = _interopRequireDefault(require("./constants.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  CUSTOM_SEARCH_ACTION,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  EXPANDED_PANEL_CONTENT_CATEGORY,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  EXPAND_BUTTON,
+  PERSISTENT_FILTER,
+  POPPER,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  USER_FILTER
+} = _testIds.ID_CONSTANTS;
+const {
+  MISC
+} = _constants.default;
+const {
+  INDEX_PLACEHOLDER
+} = MISC;
+
+/**
+ * @fileoverview Utility functions for UTFilterGrouping stories
+ * @module UTFilterGrouping/stories/utils
+ */
+
+/**
+ * Formats a test ID string by replacing template placeholders with actual values
+ *
+ * @function testIdQuickFormat
+ * @param {string} testId - The test ID string containing placeholders in the format {{key}}
+ * @param {Object} replaceOptions - An object containing key-value pairs for replacement
+ * @returns {string} The formatted test ID with placeholders replaced by actual values
+ *
+ * @example
+ * testIdQuickFormat('filter.{{category}}.{{index}}', { category: 'energy', index: '0' })
+ * // Returns: 'filter.energy.0'
+ */
+const testIdQuickFormat = (testId, replaceOptions) => {
+  const idElementsArray = testId.split('.');
+  Object.entries(replaceOptions).forEach(_ref => {
+    let [key, value] = _ref;
+    if (idElementsArray.includes("{{".concat(key, "}}"))) {
+      const keyIndex = idElementsArray.indexOf("{{".concat(key, "}}"));
+      idElementsArray.splice(keyIndex, 1, value);
+    }
+  });
+  const finalId = idElementsArray.join('.');
+  return finalId;
+};
+
+/**
+ * Creates a promise that resolves after a specified delay
+ *
+ * @function delay
+ * @param {number} ms - The number of milliseconds to delay
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ *
+ * @example
+ * await delay(1000);
+ */
+
+const delay = ms => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+
+/**
+ * Creates a flattened collection of test IDs based on categories and ID templates.
+ * For each category and ID template, generates IDs with filter indices. If all generated
+ * IDs for a template are identical (no {{index}} placeholder), returns a single ID string;
+ * otherwise returns an array of indexed IDs.
+ *
+ * @function createExistingIds
+ * @param {Array<Object>} categories - Array of category objects, each containing:
+ * @param {Object<string, string>} idsList - Object containing ID template strings with placeholders
+ *   (e.g., {{category}}, {{index}})
+ * @returns {Array<string|Array<string>>} Flattened array containing single ID strings
+ *
+ * @example
+ * const categories = [
+ *   { category: 'energy', filters: [{}, {}] },
+ *   { category: 'water', filters: [{}] }
+ * ];
+ * const idsList = {
+ *   checkbox: 'filter.{{category}}.checkbox.{{index}}',
+ *   label: 'filter.{{category}}.label'
+ * };
+ * createExistingIds(categories, idsList)
+ * // Returns: [
+ * //   'filter.energy.label',
+ * //   'filter.water.checkbox.0',
+ * //   'filter.water.label'
+ * // ]
+ */
+exports.delay = delay;
+const createExistingIds = (categories, idsList) => {
+  const test = categories.map(_ref2 => {
+    let {
+      category,
+      filters
+    } = _ref2;
+    return Object.values(idsList).map(value => {
+      if (!value.includes(INDEX_PLACEHOLDER)) {
+        return testIdQuickFormat(value, {
+          category
+        });
+      }
+      const clientIdsWithIndex = [...filters].filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return pinned;
+      }).map((_, i) => value.includes(CLIENT_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      const userIdsWithIndex = [...filters].filter(_ref4 => {
+        let {
+          pinned
+        } = _ref4;
+        return !pinned;
+      }).map((_, i) => value.includes(USER_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      return [...clientIdsWithIndex, ...userIdsWithIndex];
+    });
+  }).flat(Infinity).filter(Boolean);
+  return test;
+};
+
+/**
+ * Determines if a test ID belongs to an item that requires hovering to be visible or interactive.
+ * This includes tooltips, poppers, and certain buttons that appear on hover.
+ *
+ * @function idBelongsToHoverableItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item requires hovering, false otherwise
+ */
+exports.createExistingIds = createExistingIds;
+const idBelongsToHoverableItem = item => item.includes(POPPER) || item.includes(DELETE_BUTTON) || item.includes(EDIT_BUTTON) || item.includes(COLLAPSE_BUTTON) || item.includes(SEARCH_BUTTON) || item.includes(DELETE_BUTTON_TOOLTIP) || item.includes(EDIT_BUTTON_TOOLTIP) || item.includes(COLLAPSE_BUTTON_TOOLTIP) || item.includes(SEARCH_BUTTON_TOOLTIP) || item.includes(CUSTOM_SEARCH_ACTION) || item.includes(COLLAPSE_BUTTON) && item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);
+
+/**
+ * Determines if a test ID belongs to a collapsed item that needs to be expanded.
+ * Specifically checks for expand button elements.
+ *
+ * @function idBelongsToCollapsedItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is an expand button, false otherwise
+ */
+exports.idBelongsToHoverableItem = idBelongsToHoverableItem;
+const idBelongsToCollapsedItem = item => item.includes(EXPAND_BUTTON);
+
+/**
+ * Determines if a test ID belongs to an item that is not in its initial/start state.
+ * Currently checks for search field elements which may not be visible initially.
+ *
+ * @function idBelongsToNonStartItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is not in start state, false otherwise
+ */
+exports.idBelongsToCollapsedItem = idBelongsToCollapsedItem;
+const idBelongsToNonStartItem = item => item.includes(SEARCH_FIELD) || item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) || item.includes(PERSISTENT_FILTER);
+exports.idBelongsToNonStartItem = idBelongsToNonStartItem;

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

@@ -0,0 +1,251 @@
+@keyframes slideInFromRight {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+%actionsContainer {
+  animation-fill-mode: forwards;
+  display: none;
+}
+
+%animatedActionsContainer {
+  animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  grid-gap: 8px;
+}
+
+%textWithEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+%actionButton {
+  min-width: fit-content;
+  padding: 4px;
+}
+
+.filterGroupingContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  .panelRoot {
+    &Right {
+      order: 1 !important;
+    }
+
+    &Left {
+      order: -1 !important;
+    }
+  }
+
+  .paper {
+    align-items: flex-start;
+    box-shadow: none !important;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    order: 2 !important;
+    overflow: hidden !important;
+    padding: 24px 12px;
+    position: relative !important;
+    transition: width 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
+    width: 56px;
+
+    .collapsedPanelContentExpandButton {
+      padding: 4px !important;
+    }
+
+    &Open {
+      padding: 0;
+      width: 256px;
+    }
+
+    .expandedPanelContent {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: 0 16px;
+      position: relative;
+      width: 100%;
+
+      .expandedPanelContentHeader {
+        align-items: center;
+        display: flex;
+        grid-gap: 8px;
+        justify-content: space-between;
+        padding: 24px 0;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+
+        &SearchOpen {
+          border: 1px solid transparent;
+          padding: 16px 0;
+        }
+        
+        .expandedPanelContentTitle {
+          @extend %textWithEllipsis;
+        }
+
+        .expandedPanelContentActions {
+          display: flex;
+          flex-wrap: nowrap;
+          grid-gap: 8px;
+
+          .expandedPanelContentActionsContainer {
+            @extend %actionsContainer;
+          }
+        }
+        
+        &:hover,
+        &[data-test-hover="true"] {
+          .expandedPanelContentActionsContainer {
+            @extend %animatedActionsContainer;
+          }
+        }
+        
+        .expandedPanelContentAction {
+          @extend %actionButton;
+        }
+      }
+
+      .expandedPanelContentCategory {
+        padding: 16px 0;
+
+        .expandedPanelContentCategoryHeader {
+          align-items: center;
+          border-radius: 4px;
+          display: flex;
+          grid-gap: 8px;
+          padding: 12px 8px;
+
+          svg {
+            transition: transform 0.3s ease-in-out;
+          }
+
+          .collapsedCategoryIcon {
+            transform: rotate(-90deg);
+          }
+
+          .ExpandedPanelContentCategoryHeaderAvatar {
+            border-radius: 8px;
+          }
+        }
+
+        .expandedPanelContentUserFiltersExpanded {
+          max-height: 1000px;
+          opacity: 1;
+          overflow: hidden;
+          transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                      opacity 0.2s ease-in-out;
+        }
+
+        .expandedPanelContentUserFiltersCollapsed {
+          max-height: 0;
+          opacity: 0;
+          overflow: hidden;
+          transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                      opacity 0.2s ease-in-out;
+        }
+
+        .expandedPanelContentCategoryEmpty {
+          align-items: center;
+          border-radius: 8px;
+          display: flex;
+          flex-direction: column;
+          grid-gap: 8px;
+          justify-content: center;
+          padding: 12px 8px;
+
+          .expandedPanelContentCategoryEmptyText {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            grid-gap: 4px;
+            justify-content: center;
+          }
+        }
+
+        .expandedPanelContentCategoryItem {
+          align-items: center;
+          border-radius: 4px;
+          box-sizing: border-box;
+          display: flex;
+          grid-gap: 8px;
+          justify-content: space-between;
+          min-height: 44px;
+          padding: 6px 8px;
+          width: 100%;
+          
+          .expandedPanelContentCategoryItemTitleContainer {
+            align-items: center;
+            display: flex;
+            flex-grow: 1;
+            grid-gap: 8px;
+            overflow: hidden;
+
+            .hoverableContainer {
+            flex-grow: 1;
+              overflow: hidden; 
+            }
+          }
+
+          .expandedPanelContentCategoryItemTitleLabel {
+            @extend %textWithEllipsis;
+          }
+
+          .expandedPanelContentCategoryItemActionsContainer {
+            @extend %actionsContainer;
+          }
+          
+          &:hover,
+        &[data-test-hover="true"] {
+            .expandedPanelContentCategoryItemActionsContainer {
+              @extend %animatedActionsContainer;
+            }
+          }
+
+          .expandedPanelContentCategoryItemAction {
+            @extend %actionButton;
+          }
+        }
+      }
+    }
+  }
+}
+
+.popper {
+  max-width: 272px;
+  z-index: 1300;
+
+  &Right {
+    left: -4px !important;
+  }
+
+  &Left {
+    left: 4px !important;
+  }
+
+  .expandedPanelContentPopperContent {
+    align-items: flex-start;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    grid-gap: 4px;
+    justify-content: center;
+    padding: 16px;
+  }
+}

package/dist/components/UTFilterGrouping/theme.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+var _get = _interopRequireDefault(require("lodash/get"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const retrieveStyle = _ref => {
+  let {
+    theme,
+    position
+  } = _ref;
+  return {
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    },
+    expandedPanelContentCategoryEmpty: {
+      backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryEmpty', 'backgroundColor'], "".concat(theme.Palette.light['03']))
+    },
+    expandedPanelContentCategoryHeader: {
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItem: {
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItem', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItemSelected: {
+      backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor'], "".concat(theme.Palette.accent['01'])),
+      '&:hover': {
+        backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor', '&:hover'], "".concat(theme.Palette.accent['01'], " !important"))
+      }
+    },
+    expandedPanelContentHeader: {
+      backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    expandedPanelContentPopperContent: {
+      backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'expandedPanelContent', 'expandedPanelContentPopperContent', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    paper: {
+      backgroundColor: (0, _get.default)(theme, ['UTFilterGrouping', 'closedPanelBar', 'backgroundColor'], "".concat(theme.Palette.light['01'], " !important")),
+      borderRight: position === _constants.PANEL_POSITIONS.LEFT ? (0, _get.default)(theme, ['UTFilterGrouping', 'borderRight'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none',
+      borderLeft: position === _constants.PANEL_POSITIONS.RIGHT ? (0, _get.default)(theme, ['UTFilterGrouping', 'borderLeft'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none'
+    },
+    perfectScrollbar: {
+      width: (0, _get.default)(theme, ['UTFilterGrouping', 'perfectScrollbar', 'width'], '100%')
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/components/UTFilterGrouping/types.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.refType = exports.filtersType = exports.filterParamsType = exports.customSearchActionType = exports.categoryType = exports.categoryConfigType = exports.categoriesType = exports.avatarPaletteType = void 0;
+var _propTypes = require("prop-types");
+const customSearchActionType = exports.customSearchActionType = (0, _propTypes.shape)({
+  dataTestId: _propTypes.string,
+  Icon: _propTypes.string,
+  onClick: _propTypes.func,
+  size: _propTypes.string
+});
+const refType = exports.refType = (0, _propTypes.shape)({
+  current: (0, _propTypes.shape)({
+    popperInstance: (0, _propTypes.shape)({
+      update: _propTypes.func
+    })
+  })
+});
+const filterParamsType = exports.filterParamsType = (0, _propTypes.shape)({
+  key: _propTypes.string,
+  values: (0, _propTypes.arrayOf)(_propTypes.string)
+});
+const filtersType = exports.filtersType = (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+  backoffice_user_id: _propTypes.string,
+  category: _propTypes.string,
+  description: _propTypes.string,
+  filter_params: (0, _propTypes.arrayOf)(filterParamsType),
+  id: _propTypes.number,
+  name: _propTypes.string,
+  order: _propTypes.number,
+  pinned: _propTypes.bool,
+  visible: _propTypes.bool
+}));
+const categoryType = exports.categoryType = (0, _propTypes.shape)({
+  category: _propTypes.string,
+  filters: filtersType,
+  id: _propTypes.number,
+  name: _propTypes.string
+});
+const categoriesType = exports.categoriesType = (0, _propTypes.arrayOf)(categoryType);
+const avatarPaletteType = exports.avatarPaletteType = (0, _propTypes.shape)({
+  backgroundColor: _propTypes.string,
+  color: _propTypes.string,
+  colorTheme: _propTypes.string
+});
+const categoryConfigType = exports.categoryConfigType = (0, _propTypes.objectOf)((0, _propTypes.shape)({
+  avatarPalette: avatarPaletteType,
+  icon: _propTypes.string
+}));

package/dist/components/UTFilterGrouping/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleAnimationEnd = void 0;
+/**
+ * Handles animation-end-event by updating Tippy popper instances.
+ *
+ * This function updates the popper instances for both the search button and collapse button
+ * Tippy tooltips after an animation completes. This ensures that the tooltip positions are
+ * recalculated and properly aligned after any layout changes caused by the animation.
+ *
+ * @param {React.MutableRefObject} searchButtonTippyRef - Reference to the search button's Tippy instance
+ * @param {React.MutableRefObject} collapseButtonTippyRef - Reference to the collapse button's Tippy instance
+ * @returns {void}
+ */
+const handleAnimationEnd = (searchButtonTippyRef, collapseButtonTippyRef) => {
+  var _searchButtonTippyRef, _collapseButtonTippyR;
+  if ((_searchButtonTippyRef = searchButtonTippyRef.current) !== null && _searchButtonTippyRef !== void 0 && _searchButtonTippyRef.popperInstance) {
+    searchButtonTippyRef.current.popperInstance.update();
+  }
+  if ((_collapseButtonTippyR = collapseButtonTippyRef.current) !== null && _collapseButtonTippyR !== void 0 && _collapseButtonTippyR.popperInstance) {
+    collapseButtonTippyRef.current.popperInstance.update();
+  }
+};
+exports.handleAnimationEnd = handleAnimationEnd;

package/dist/components/UTGraph/UTGraph.stories.js

@@ -10,7 +10,7 @@ var _UTGraph = require("./UTGraph.storiesdata");
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var _default = exports.default = {
-  title: 'UTGraph',
+  title: 'Energy-UI/UTGraph',
   component: _.default,
   render: args => /*#__PURE__*/_react.default.createElement("div", {
     style: {

package/dist/components/UTIcon/UTIcon.mdx

@@ -0,0 +1,17 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
+
+import * as UTIconStories from './UTIcon.stories';
+
+<Meta of={UTIconStories} />
+
+<Title>UTIcon</Title>
+
+## Deprecation Notice
+
+The `color` prop is deprecated and will be removed in a future release. Please use `colorTheme` instead.
+
+## Props
+
+<Description of={UTIconStories} />
+
+<ArgTypes />

package/dist/components/UTIcon/UTIcon.stories.js

@@ -126,7 +126,8 @@ var _default = exports.default = {
         }
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTIcon'
 };
 const Default = exports.Default = {
   name: 'Playground',

package/dist/components/UTIcon/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _iconTypes = require("../../types/iconTypes");
 var _theme = require("./theme");
 var _constants = require("./constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -53,22 +53,5 @@ const UTIcon = _ref => {
     "data-testid": dataTestId
   }, iconProps));
 };
-UTIcon.propTypes = {
-  area: _propTypes.bool,
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  className: _propTypes.string,
-  /**
-   * @deprecated The "color" prop is deprecated and will be removed in a future release. Please use "colorTheme" instead.
-   */
-  color: _propTypes.string,
-  colorTheme: _propTypes.string,
-  dataTestId: _propTypes.string,
-  fillShade: _propTypes.string,
-  fillTheme: _propTypes.string,
-  name: _propTypes.string,
-  shade: _propTypes.string,
-  size: _propTypes.number,
-  theme: _propTypes.object,
-  variant: _propTypes.string
-};
+UTIcon.propTypes = _iconTypes.iconPropTypes;
 var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTIcon);

package/dist/components/UTKpi/UTKpi.stories.js

@@ -201,7 +201,8 @@ var _default = exports.default = {
         component: 'Este componente se usa para mostrar KPIs con un título, un valor principal y un valor secundario. También puede mostrar un estado con un icono, una variante y un texto.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTKpi'
 };
 const Default = exports.Default = {
   name: 'Playground',

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

@@ -126,7 +126,8 @@ var _default = exports.default = {
         component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTLabel'
 };
 const Default = exports.Default = {
   args: {

package/dist/components/UTPanel/UTPanel.stories.js

@@ -389,7 +389,8 @@ var _default = exports.default = {
         component: 'Componente Panel con dos versiones disponibles. V0 es una versión básica con funcionalidad de drawer. V1 es una versión avanzada con múltiples características como workflow, header items, botones de acción, etc.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTPanel'
 }; // V0 Stories
 const V0Default = exports.V0Default = {
   args: {

package/dist/components/UTRadioGroup/UTRadioGroup.stories.js

@@ -215,7 +215,8 @@ var _default = exports.default = {
         component: 'UTRadioGroup es un componente personalizable que renderiza un grupo de botones de radio, permitiendo a los usuarios seleccionar una sola opción de una lista proporcionada. Soporta características como visualización de errores, opciones dinámicas y diferentes variantes. Además, permite agrupar opciones por categoría, con las opciones sin agrupar apareciendo primero.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTRadioGroup'
 };
 const Default = exports.Default = {
   render: args => {