@widergy/energy-ui 3.173.3 → 3.174.0

package/dist/components/UTWrapperObservation/README.md

@@ -1,91 +0,0 @@
-# UTWrapperObservation
-
-Wrapper que agrega acciones (ícono + tooltip) a un campo de formulario. Muestra todos los botones configurados en `observationWrapperConfiguration`, cambiando el layout según si hay observaciones activas en `field`. Soporta N acciones simultáneas.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `node` | Required | Contenido del campo a envolver. |
-| `dataTestId` | `string` | `undefined` | ID para testing. El container recibe `dataTestId` y cada action icon recibe `${dataTestId}.actionIcon.${config.key}`. |
-| `field` | `objectOf(bool)` | `undefined` | Objeto del campo. Las claves con valor `true` que coincidan con algún `key` en `observationWrapperConfiguration` renderizarán su acción correspondiente. |
-| `observationWrapperConfiguration` | `arrayOf(shape)` | `undefined` | Array de configuraciones para el wrapper. Ver estructura abajo. |
-
-### Estructura de `observationWrapperConfiguration`
-
-Cada objeto del array puede contener:
-
-| Campo | Type | Description |
-|-------|------|-------------|
-| `key` | `string` | Identificador de la acción. Si coincide con una clave `true` en `field`, determina que hay observaciones activas y cambia el layout a gap inline. |
-| `buttonProps` | `object` | Props pasados directamente al componente `UTButton` que se renderiza como ícono de acción. |
-| `action` | `func` | Callback ejecutado al hacer click sobre el botón de acción. |
-| `textTooltip` | `string` | Texto que se muestra en el tooltip al hacer hover sobre el botón. |
-
-## Lógica de renderizado
-
-```
-observationWrapperConfiguration vacío o undefined → retorna children sin wrapping
-sin coincidencias en field → renderiza wrapper con todos los botones en position:absolute (se revelan en hover)
-con al menos una coincidencia en field → renderiza wrapper con gap + todos los botones (se revelan en hover)
-```
-
-## Ejemplos
-
-### Uso básico (con observación activa)
-
-```jsx
-const observationConfig = [
-  {
-    key: 'observation',
-    buttonProps: {
-      children: '2',
-      colorTheme: 'negative',
-      Icon: 'IconMessagePlus',
-      size: 'small'
-    },
-    action: () => console.log('Observación ejecutada'),
-    textTooltip: 'Observar campo'
-  }
-];
-
-<UTWrapperObservation
-  field={{ observation: true }}
-  observationWrapperConfiguration={observationConfig}
->
-  <UTLabel variant="body1">0112 4567890</UTLabel>
-</UTWrapperObservation>
-```
-
-### Sin observación activa (field.observation false)
-
-```jsx
-<UTWrapperObservation
-  field={{ observation: false }}
-  observationWrapperConfiguration={observationConfig}
->
-  <UTLabel variant="body1">0112 4567890</UTLabel>
-</UTWrapperObservation>
-// → renderiza el wrapper con los botones en position:absolute encima del children
-// los botones se revelan al hacer hover
-```
-
-### Múltiples acciones
-
-```jsx
-<UTWrapperObservation
-  field={{ observation: true, review: true }}
-  observationWrapperConfiguration={[
-    { key: 'observation', ... },
-    { key: 'review', ... }
-  ]}
->
-  <UTLabel variant="body1">0112 4567890</UTLabel>
-</UTWrapperObservation>
-// → renderiza children + 2 botones con tooltip
-```
-
-## Componentes relacionados
-
-- **UTButton**: Usado internamente para el botón de acción.
-- **UTTooltip**: Usado para mostrar el `textTooltip` al hacer hover sobre el botón.

package/dist/components/UTWrapperObservation/UTWrapperObservation.stories.js

@@ -1,251 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SinObservacionEnField = exports.SinConfiguracion = exports.Playground = exports.ConObservacion = exports.ConMultiplesAcciones = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-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); } /* eslint-disable no-alert */
-const observationConfig = [{
-  buttonProps: {
-    colorTheme: 'negative',
-    Icon: 'IconMessagePlus',
-    size: 'small'
-  },
-  action: () => alert('Acción de observación ejecutada'),
-  key: 'observation',
-  textTooltip: 'Observar campo'
-}];
-const multipleActionsConfig = [{
-  buttonProps: {
-    colorTheme: 'negative',
-    Icon: 'IconMessagePlus',
-    size: 'small'
-  },
-  action: () => alert('Acción de observación ejecutada'),
-  key: 'observation',
-  textTooltip: 'Observar campo'
-}, {
-  buttonProps: {
-    colorTheme: 'blue',
-    Icon: 'IconFlag',
-    size: 'small'
-  },
-  action: () => alert('Acción de revisión ejecutada'),
-  key: 'review',
-  textTooltip: 'Revisar campo'
-}];
-const FieldContent = () => /*#__PURE__*/_react.default.createElement("div", {
-  style: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px'
-  }
-}, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-  colorTheme: "gray",
-  variant: "caption"
-}, "Tel\xE9fono *"), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-  variant: "body1"
-}, "0112 4567890"));
-var _default = exports.default = {
-  args: {
-    field: {
-      observation: true
-    },
-    observationWrapperConfiguration: observationConfig
-  },
-  argTypes: {
-    field: {
-      control: 'object',
-      description: 'Objeto del campo. Las claves con valor `true` que coincidan con algún `key` en `observationWrapperConfiguration` renderizarán su acción correspondiente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'objectOf(bool)'
-        }
-      }
-    },
-    observationWrapperConfiguration: {
-      control: false,
-      description: 'Array de acciones disponibles para el wrapper. Cada objeto debe tener `key`, `buttonProps`, `action` y `textTooltip`. Todos los botones se muestran siempre; el `key` se usa para detectar si hay observaciones activas en `field` y cambiar el layout.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'arrayOf(shape({ key, buttonProps, action, textTooltip }))'
-        }
-      }
-    },
-    children: {
-      control: false,
-      description: 'Contenido del campo a envolver.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'ReactNode'
-        }
-      }
-    },
-    dataTestId: {
-      control: 'text',
-      description: 'ID para testing. El container recibe `dataTestId` y cada action icon recibe `{dataTestId}.actionIcon.{config.key}`.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    }
-  },
-  component: _.default,
-  parameters: {
-    backgrounds: {
-      default: 'light03',
-      values: [{
-        name: 'light03',
-        value: '#F4F5F7'
-      }]
-    },
-    docs: {
-      description: {
-        component: 'Wrapper que agrega acciones (ícono + tooltip) a un campo de formulario. ' + 'Muestra todos los botones de `observationWrapperConfiguration` siempre que haya al menos uno configurado. ' + 'Si algún `key` de la configuración coincide con una clave `true` en `field`, aplica un gap entre el children y los botones; ' + 'si no hay coincidencias, los botones se posicionan encima del children y se revelan en hover.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTWrapperObservation'
-};
-const ConObservacion = exports.ConObservacion = {
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
-    field: {
-      observation: true
-    },
-    observationWrapperConfiguration: observationConfig
-  },
-  name: 'Con observación activa',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Campo con `field.observation: true` y configuración válida. Se muestra el ícono de observación ' + 'a la derecha del campo. Al hacer hover sobre el ícono aparece el tooltip; al hacer click se ejecuta la acción.'
-      }
-    }
-  }
-};
-const SinObservacionEnField = exports.SinObservacionEnField = {
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
-    field: {
-      observation: false
-    },
-    observationWrapperConfiguration: observationConfig
-  },
-  name: 'Sin observación activa',
-  parameters: {
-    docs: {
-      description: {
-        story: '`field.observation` es `false`. El componente renderiza el wrapper con los botones posicionados encima del children (`position: absolute`). Los botones se revelan al hacer hover.'
-      }
-    }
-  }
-};
-const SinConfiguracion = exports.SinConfiguracion = {
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
-    field: {
-      observation: true
-    },
-    observationWrapperConfiguration: []
-  },
-  name: 'Sin configuración (fallback)',
-  parameters: {
-    docs: {
-      description: {
-        story: '`field.observation: true` pero sin acciones en `observationWrapperConfiguration`. ' + 'El componente devuelve los `children` sin wrapping.'
-      }
-    }
-  }
-};
-const ConMultiplesAcciones = exports.ConMultiplesAcciones = {
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
-    field: {
-      observation: true,
-      review: true
-    },
-    observationWrapperConfiguration: multipleActionsConfig
-  },
-  name: 'Múltiples acciones',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Campo con dos acciones activas (`field.observation: true` y `field.review: true`). ' + 'Se renderiza un botón por cada entrada de `observationWrapperConfiguration` cuya `key` coincida con un valor `true` en `field`.'
-      }
-    }
-  }
-};
-const Playground = exports.Playground = {
-  args: {
-    children: /*#__PURE__*/_react.default.createElement(FieldContent, null),
-    field: {
-      observation: true
-    },
-    configJSON: [{
-      key: 'observation',
-      textTooltip: '2 Campos observados',
-      buttonProps: {
-        colorTheme: 'gray',
-        Icon: 'IconMessagePlus',
-        size: 'small',
-        children: 2,
-        variant: 'semitransparent'
-      }
-    }]
-  },
-  argTypes: {
-    field: {
-      control: {
-        type: 'object'
-      }
-    },
-    configJSON: {
-      control: {
-        type: 'object'
-      },
-      description: 'Array de acciones para el wrapper. Editá el JSON para agregar o quitar botones. El `action` se inyecta automáticamente.',
-      name: 'observationWrapperConfiguration',
-      table: {
-        type: {
-          summary: 'arrayOf(shape({ key, buttonProps, textTooltip }))'
-        }
-      }
-    },
-    observationWrapperConfiguration: {
-      table: {
-        disable: true
-      }
-    }
-  },
-  name: 'Playground',
-  render: _ref => {
-    let {
-      configJSON,
-      ...args
-    } = _ref;
-    return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
-      observationWrapperConfiguration: configJSON === null || configJSON === void 0 ? void 0 : configJSON.map(config => ({
-        ...config,
-        action: () => alert("Acci\xF3n ejecutada: ".concat(config.key))
-      }))
-    }), args.children);
-  }
-};

package/dist/deprecated/UTBarChart/README.md

@@ -1,55 +0,0 @@
-# UTBarChart
-
-### Description
-
-Component that aims to provide an easy and dynamic solution for creating bar charts in React.
-
-### Props
-
-- `barData`: expects an `array` of `arrays` of `objects` representing the information to show as bars in the chart. There are a couple of ways you can pass this information to achieve different looking charts.
-  1. Each element of the main array is an array of objects with a `value` attribute. This will render `n` subsets of bars, being `n` the numbers of arrays in the main array.
-  2. Each element of the main array is an array of objects with a `values` attribute. This will render `n` "stacked" bar values, inside the values attribute, as one bar instead of several.
-- `linearData`: expects an `array` of `objects` which should have a `data` attribute representing all the points conforming the lines in the linear plot, along with the `type`: `dashed`, `solid`, and the `color`.
-- `minBarWidth`: expects a `number`, indicates a minimum width for the bars to take when rendered.
-- `pagination`: expects a `number`, defines the number of elements per page, no pagination as default. If no pagination is specified, scroll will be added if bars need to be smaller than the `minBarWidth` prop to fit.
-- `yAxisTicks`: expects a `number`, defines the y-axis definition.
-- `className`: expects a `string`, represents the style to be applied to the chart container. This prop should be used to give dimensions to the chart! If not style is passed, then nothing will be showed.
-- `xAxisDefinition`: expects and `array` of objects with `mainLabel`, `secondaryLabel` attributes. This will be used to create the x-axis.
-- `barPadding`: expects a `number`, defines the bar padding, relative to the bar width.
-- `barBorderRadius`: expects a `number`, defines the bar top border radius.
-- `onBarClick`: expects a `func`, determines what to do when certain bar is selected. It will receive one argument, the bar data.
-- `gradientGenerator`: expects a `func`, used to render `linearGradients`, if needed, inside the `SVG` tag.
-- `decoratorRenderer`: expects a `func`, used to create an `array` of decorations to be applied to the x-axis. Each decoration could have the following shape:
-  - x: `number` that indicates the index to decorate.
-  - label: `string` that defines the text to be shown as decoration.
-  - position: `string`, defines if the text should be centered relative to its bar.
-  - textAnchor: `string`, defines the text anchor for the text tag.
-  - textProps: `object`, extra props for the text tag.
-  - withLine: `bool`, indicates whether the decoration should have a corresponding vertical line for further indication of its origin.
-- `levels`: expects an `array` of `objects` that should have the following shape:
-  - `value`: `number`, value to set the horizontal line.
-  - `color`: `string`, color for the level line.
-  - `type`: `string`, could be `dashed`, `solid`
-- `title`: `string` indicating the chart title.
-- `labelFormatters`: expects an `object` of `functions` that is used to format both possible y-axis labels. It receives a `number` and should return a `string`. The object should have the following shape: `{ bar: func, linear: func }`, where `bar` is the function applied to the bar y-axis, and `linear` to the linear y-axis.
-- `units`: expects an `object` of `string` of the shape `{ bar: string, linear: string }`, where `bar` is the unit of the bar y-axis, and `linear` of the linear y-axis.
-- `showGrid`: expects a `bool`, flag that indicates whether to show or hide the chart grid.
-- `center`: expects a `bool`, flag that indicates whether right and left margins should have the same dimensions, thus centering the chart.
-- `hideYAxis`: expects a `bool`, flag that indicates whether to show or hide the y-axis.
-- `references`: expects an `object` of `arrays` with the following shape: `{ bar: array, linear: array, levels: array }`. Where every the bar and linear array should have the shape:
-  - `check`: `func` that checks if reference should be displayed.
-  - `id`: `string`, reference identifier.
-  - `className`: styles to be applied to the reference indicator.
-  - `label`: `string`, reference label.
-    The levels reference will always be present, thus, no need for the `check` method.
-- `displayLegendAs`: `string` that indicates whether to show the legend as either `modal` or `block`.
-- `labels`: expects an `object` of `string` to define the texts to be used in the Legend component:
-  - referencesModalButton
-  - referencesModalTitle
-  - showReferencesLabel
-- `selectable`: expects a `bool` that indicates whether bars are selectable.
-- `highlightWidth`: expects a `number` that indicates, relative to the bars width, the size of the highlight outline.
-- `spacingOptions`: expects an `object` of the shape `{ onTopLabelPadding: number, lateralMargin: number, verticalMargin: number, axisPadding: number, marginTop: number, scrollPadding: number }`.
-- `valuesOnTop`: expects a `bool` that indicates that values must be rendered on top of each bar.
-- `NoDataComponent`: expects a `func` that renders a component to show when no bar data is available.
-- `markers`: expects a shape for markers configuration and styling

package/dist/deprecated/UTDialog/README.md

@@ -1,37 +0,0 @@
-# UTDialog component
-
-## Props
-- `ButtonComponent`: _component_ - **Due to different choice on Button (UTButton from Energy or Camuzzi UI) component in each project, it is recieved as prop to give liberty of implementation**.
-- `isOpen`: _bool_ - **Used to indicate if the component should be open**.
-- `onRequestClose`: _func_ - **Callback function for dialog closure**.
-- `title`: _string_ - **Title content - Wrapped inside Mui's `DialogTitle` component**.
-- `acceptButton` & `cancelButton`: _obj_ or _pre rendered component_ - **Object used to describe action buttons wrapped inside Mui's `DialogActions` component. It can also be a pre rendered component.**.
-### Possible object attributes
-> - `onPress`: _func_ - **Callback function for button action**.
-> - `text`: _string_ - **In button text**.
-> - `disabled`: _bool_ - **Used to indicate if button should be disabled**.
-> - `className`: _string_ - **String used to specify the styles that should be applied**.
-> - `config`: _obj_ - **Object used to configure the aspect of the button, which is composed by `UTButton`**.
-- `warningAlert`: _string_ - **String used to specify the alert message to be shown**.
-- `whiteTitle`: _bool_ - **Used to indicate if the title should be colored white**.
-- `withClickAway`: _bool_ - **Used to indicate if Dialog should be closed upon click away**.
-- `contentName`: _string_ - **String passed as `name` prop to Mui's `DialogContent` as ID**.
-- `elevation`: _number_ - **Number passed as `elevation` prop to Mui's `Dialog`**.
-- `roundedCloseButton`: _bool_ - **Used to indicate if Mui's `CloseRoundedIcon` should be used over regular `Close`**.
-- `withCloseButton`: _bool_ - **Used to indicate if Dialog should have a close button, not to be confused with a `cancel` button**.
-- `alertConfig`: _obj_ - **Object used to configure the aspect of the alert, which is composed by `UTLabel`**.
-- `disableEnforceFocus`: _bool_ - **Passed as prop to Mui's `Dialog`**.
-- `disableScrollLock`: _bool_ - **Passed as prop to Mui's `Dialog`**.
-- `disableTypography`: _bool_ - **Passed as prop to Mui's `DialogTitle`**.
-- `customClasses`: _obj_ - **Object used to indicate how should default styles be overriden**.
-### Possible object attributes
-> - `content`: _string_ - **Overrides Mui's `DialogContent` default styles**.
-> - `container`: _string_ - **Overrides Mui's `DialogContent` - `paper` default styles**.
-> - `root`: _tring_ - **Overrides Mui's `DialogContent` - `root` default styles**.
-> - `closeButton`: _string_ - **Overrides Mui's `IconButton` default styles**.
-> - `mainTitle`: _string_ - **Overrides Mui's `DialogTitle` default styles**.
-> - `closeIcon`: _string_ **Overrides either Mui's `Close` or `CloseRoundedIcon` default styles**.
-> - `warning`: _string_ **Overrides own `UTLabel`, used for warnings, default styles**.
-> - `dialogActions`: _string_ **Overrides Mui's `DialogActions` default styles**
-> - **Note that by `default styles` we imply each projects theme styles**.
-

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

@@ -1,26 +0,0 @@
-# UTButton
-
-## Props
-
-
-| Name                   | Type                                                                                                                                                                                                     | Default    | Description                                                            |
-| :----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------ |
-| `additionalMessage`    | `shape({ Icon: elementType, iconProps: shape({ colorTheme: string, size: string }), labelProps: shape({ colorTheme: string, variant: string }), message: string })`                                      |            | Additional message information, including icons and labels.            |
-| `adornment`            | `shape({ alignment: oneOf(['center', 'end', 'start']), position: string, props: object, type: string })`                                                                                                 |            | Adornment object to customize alignment, position, and type.           |
-| `BackgroundImage`      | `elementType`                                                                                                                                                                                            |            | A React component for the background image.                            |
-| `bottomActions`        | `arrayOf(shape({ colorTheme: string, disabled: bool, Icon: elementType, label: string, loading: bool, onClick: func }))`                                                                                 |            | Defines the list of actions to be displayed at the bottom of the card. |
-| `bottomActionsVariant` | `oneOf(['default', 'redirection'])`                                                                                                                                                                      |            | Sets the style variant for bottom actions.                             |
-| `classNames`           | `objectOf(string)`                                                                                                                                                                                       |            | Css classes                                                            |
-| `description`          | `string`                                                                                                                                                                                                 |            | Description text to be displayed.                                      |
-| `descriptionProps`     | `shape({ colorTheme: string, variant: string })`                                                                                                                                                         |            | Props to customize the description's style.                            |
-| `headerActions`        | `arrayOf(shape({ Icon: oneOfType([elementType, string]), iconProps: string, id: oneOfType([number, string]), label: string, loading: bool, onClick: func }))`                                            |            | List of actions available in the header section.                       |
-| `headerActionsProps`   | `shape({ alignment: oneOf(['center', 'end', 'start']), buttonGroupProps: shape({ colorTheme: string, shape: string }), variant: oneOf(['default', 'buttonGroup']) })` |            | Props to configure header actions alignment, button group, etc.        |
-| `hideHeader`           | `bool`                                                                                                                                                                                                   | `false`    | Hides the header section of the card.                                  |
-| `mainAction`           | `func`                                                                                                                                                                                                   |            | Main action function for the card.                                     |
-| `size`                 | `oneOf(['medium', 'small'])`                                                                                                                                                                             | `'medium'` | Size of the card, either small or medium.                              |
-| `status`               | `string`                                                                                                                                                                                                 |            | Status text to be displayed.                                           |
-| `statusLabel`          | `string`                                                                                                                                                                                                 |            | Status label for additional status info.                               |
-| `statusAlignment`      | `oneOf(['center', 'end', 'start'])`                                                                                                                                                                      |            | Alignment of the status element.                                       |
-| `title`                | `string`                                                                                                                                                                                      |            | The title of the card.                                       |
-| `titleProps`           | `shape({ variant: string, weight: string })`                                                                                                                                                             |            | Props to configure the title style.                                    |
-| `withBodyPadding`      | `bool`                                                                                                                                                                                                   | `false`    | Adds padding to the card body if`true`.                                |

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

@@ -1,100 +0,0 @@
-# UTAlert
-
-Componente de alerta tipo Snackbar para mostrar notificaciones al usuario. Soporta cuatro tipos (success, error, info, warning), markdown en el mensaje y posicionamiento configurable. Se usa habitualmente junto al `AlertHandler` singleton para disparar alertas desde cualquier lugar de la aplicación.
-
----
-
-## Props
-
-### `content` (shape)
-
-Objeto que controla el estado y la apariencia de la alerta.
-
-| Campo | Tipo | Default | Descripción |
-| ----- | ---- | ------- | ----------- |
-| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
-| `open` | `boolean` | `false` | Controla si la alerta está visible. |
-| `type` | `'error' \| 'info' \| 'success' \| 'warning'` | `undefined` | Tipo de alerta. Determina el ícono y el color. |
-| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
-| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
-| `onClose` | `function` | `undefined` | Callback ejecutado al cerrar la alerta. |
-
-### Props de nivel superior
-
-| Prop | Tipo | Default | Descripción |
-| ---- | ---- | ------- | ----------- |
-| `withoutIcon` | `boolean` | `undefined` | Si es `true`, oculta el ícono del tipo de alerta. |
-| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
-| `closeDataTestId` | `string` | `undefined` | Identificador de test para el botón de cierre. |
-| `labelDataTestId` | `string` | `undefined` | Identificador de test para el label del mensaje. |
-
----
-
-## Uso básico
-
-```jsx
-import { UTAlert } from '@widergy/energy-ui';
-
-const MiComponente = () => (
-  <UTAlert
-    content={{
-      message: 'Operación completada exitosamente.',
-      open: true,
-      type: 'success'
-    }}
-  />
-);
-```
-
----
-
-## Uso con AlertHandler
-
-El patrón recomendado es inicializar `AlertHandler` una sola vez en el componente raíz y luego llamarlo desde cualquier parte de la aplicación.
-
-```jsx
-import { useEffect, useState } from 'react';
-import { UTAlert, AlertHandler } from '@widergy/energy-ui';
-
-const AppRoot = () => {
-  const [alert, setAlert] = useState();
-
-  useEffect(() => {
-    AlertHandler.init({ setState: setAlert });
-  }, []);
-
-  return (
-    <>
-      <UTAlert content={alert} />
-      {/* resto de la app */}
-    </>
-  );
-};
-
-// Desde cualquier otro componente o servicio:
-AlertHandler.success('Guardado correctamente.');
-AlertHandler.error('Ocurrió un error. Intentá nuevamente.');
-AlertHandler.info('Hay actualizaciones disponibles.');
-AlertHandler.warning('Esta acción no se puede deshacer.');
-```
-
-### Métodos de AlertHandler
-
-| Método | Descripción |
-| ------ | ----------- |
-| `init({ setState, duration })` | Inicializa el handler. `setState` es el setter de React. `duration` es la duración por defecto en ms (default: 5000). |
-| `success(message, topRight?, timeDuration?)` | Muestra una alerta de éxito. |
-| `error(message, topRight?, timeDuration?)` | Muestra una alerta de error. |
-| `info(message, topRight?, timeDuration?)` | Muestra una alerta informativa. |
-| `warning(message, topRight?, timeDuration?)` | Muestra una alerta de advertencia. |
-
----
-
-## Variantes de tipo
-
-| Tipo | Ícono | Descripción |
-| ---- | ----- | ----------- |
-| `success` | CheckCircle | Para operaciones exitosas. |
-| `error` | Error | Para fallas o errores críticos. |
-| `info` | Info | Para notificaciones informativas. |
-| `warning` | Warning | Para acciones que requieren atención. |