@widergy/energy-ui 3.163.0 → 3.165.0

package/dist/components/UTSnackbar/constants.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANT_CLASS_MAP = exports.VARIANTS = exports.LABEL_COLOR_MAP = exports.ICON_NAME_MAP = exports.DEFAULT_PROPS = exports.COLOR_THEMES = exports.ACTION_BUTTON_CONFIG_MAP = void 0;
+var _Palette = require("../../constants/Palette");
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  error: 'error',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  white: 'white'
+};
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  light: 'light'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  colorTheme: COLOR_THEMES.success,
+  open: false,
+  topRight: false,
+  variant: VARIANTS.dark
+};
+const VARIANT_CLASS_MAP = exports.VARIANT_CLASS_MAP = {
+  ["".concat(COLOR_THEMES.success, "-").concat(VARIANTS.dark)]: 'successDark',
+  ["".concat(COLOR_THEMES.error, "-").concat(VARIANTS.dark)]: 'errorDark',
+  ["".concat(COLOR_THEMES.warning, "-").concat(VARIANTS.dark)]: 'warningDark',
+  ["".concat(COLOR_THEMES.info, "-").concat(VARIANTS.dark)]: 'infoDark',
+  ["".concat(COLOR_THEMES.success, "-").concat(VARIANTS.light)]: 'successLight',
+  ["".concat(COLOR_THEMES.error, "-").concat(VARIANTS.light)]: 'errorLight',
+  ["".concat(COLOR_THEMES.warning, "-").concat(VARIANTS.light)]: 'warningLight',
+  ["".concat(COLOR_THEMES.info, "-").concat(VARIANTS.light)]: 'infoLight',
+  ["".concat(COLOR_THEMES.white, "-").concat(VARIANTS.light)]: 'whiteLight',
+  ["".concat(COLOR_THEMES.white, "-").concat(VARIANTS.dark)]: 'whiteDark'
+};
+const LABEL_COLOR_MAP = exports.LABEL_COLOR_MAP = {
+  successDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  errorDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  warningDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  infoDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  successLight: {
+    colorTheme: _Palette.COLOR_THEMES.success,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  errorLight: {
+    colorTheme: _Palette.COLOR_THEMES.error,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  warningLight: {
+    colorTheme: _Palette.COLOR_THEMES.warning,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  infoLight: {
+    colorTheme: _Palette.COLOR_THEMES.information,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  whiteLight: {
+    colorTheme: _Palette.COLOR_THEMES.dark,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  whiteDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  }
+};
+const ACTION_BUTTON_CONFIG_MAP = exports.ACTION_BUTTON_CONFIG_MAP = {
+  successDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  errorDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  warningDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  infoDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  successLight: {
+    colorTheme: _Palette.COLOR_THEMES.success,
+    variant: 'text'
+  },
+  errorLight: {
+    colorTheme: _Palette.COLOR_THEMES.error,
+    variant: 'text'
+  },
+  warningLight: {
+    colorTheme: _Palette.COLOR_THEMES.warning,
+    variant: 'text'
+  },
+  infoLight: {
+    colorTheme: _Palette.COLOR_THEMES.information,
+    variant: 'text'
+  },
+  whiteLight: {
+    colorTheme: _Palette.COLOR_THEMES.primary,
+    closeColorTheme: _Palette.COLOR_THEMES.neutral,
+    variant: 'text'
+  },
+  whiteDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  }
+};
+const ICON_NAME_MAP = exports.ICON_NAME_MAP = {
+  [COLOR_THEMES.error]: 'IconCircleX',
+  [COLOR_THEMES.info]: 'IconInfoCircle',
+  [COLOR_THEMES.success]: 'IconCircleCheck',
+  [COLOR_THEMES.warning]: 'IconAlertTriangle',
+  [COLOR_THEMES.white]: 'IconInfoCircle'
+};

package/dist/components/UTSnackbar/index.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
+var _Snackbar = _interopRequireDefault(require("@material-ui/core/Snackbar"));
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTIcon = _interopRequireDefault(require("../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _testIds = require("../../constants/testIds");
+var _constants = require("./constants");
+var _theme = require("./theme");
+var _types = require("./types");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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 UTSnackbar = _ref => {
+  let {
+    button,
+    colorTheme = _constants.DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    icon,
+    message,
+    onClose,
+    open = _constants.DEFAULT_PROPS.open,
+    secondaryButton,
+    timeDuration,
+    topRight = _constants.DEFAULT_PROPS.topRight,
+    variant = _constants.DEFAULT_PROPS.variant,
+    withoutIcon
+  } = _ref;
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') return;
+    onClose === null || onClose === void 0 || onClose();
+  };
+  const variantKey = "".concat(colorTheme, "-").concat(variant);
+  const variantClassKey = _constants.VARIANT_CLASS_MAP[variantKey];
+  const variantClass = _stylesModule.default[variantClassKey] || '';
+  const labelColorConfig = _constants.LABEL_COLOR_MAP[variantClassKey] || _constants.LABEL_COLOR_MAP.successDark;
+  const actionButtonConfig = _constants.ACTION_BUTTON_CONFIG_MAP[variantClassKey];
+  const iconName = withoutIcon ? null : icon || _constants.ICON_NAME_MAP[colorTheme];
+  const anchor = {
+    horizontal: topRight ? 'right' : 'left',
+    vertical: topRight ? 'top' : 'bottom'
+  };
+  const transition = {
+    direction: topRight ? 'left' : 'up'
+  };
+  const testIds = {
+    close: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    description: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.DESCRIPTION, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
+    icon: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.ICON) : undefined,
+    label: dataTestId ? "".concat(dataTestId, ".").concat(_testIds.ID_CONSTANTS.LABEL) : undefined,
+    primaryButton: dataTestId ? "".concat(dataTestId, ".button.").concat(_testIds.ID_CONSTANTS.SECONDARY_ACTION) : undefined,
+    secondaryButton: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(_testIds.ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  };
+  return /*#__PURE__*/_react.default.createElement(_Snackbar.default, {
+    action: [!!secondaryButton && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+      key: "secondary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, secondaryButton, {
+      dataTestId: testIds.secondaryButton
+    }), secondaryButton.title), !!button && /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
+      key: "primary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, button, {
+      dataTestId: testIds.primaryButton
+    }), button.title), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+      key: "close",
+      colorTheme: actionButtonConfig.closeColorTheme || actionButtonConfig.colorTheme,
+      dataTestId: testIds.close,
+      Icon: "IconX",
+      onClick: handleClose,
+      variant: actionButtonConfig.variant
+    })],
+    anchorOrigin: anchor,
+    autoHideDuration: timeDuration,
+    ContentProps: {
+      className: "".concat(_stylesModule.default.snackbarContent, " ").concat(variantClass),
+      classes: {
+        action: _stylesModule.default.action,
+        message: _stylesModule.default.message
+      }
+    },
+    message: /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.messageContent
+    }, iconName && /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+      className: _stylesModule.default.icon,
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.icon,
+      name: iconName,
+      shade: labelColorConfig.shade,
+      size: 20
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: _stylesModule.default.textContent
+    }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.label,
+      shade: labelColorConfig.shade,
+      variant: "body",
+      weight: "medium",
+      withMarkdown: true
+    }, message), description && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.description,
+      shade: labelColorConfig.shade,
+      variant: "small"
+    }, description))),
+    onClose: handleClose,
+    open: open,
+    TransitionComponent: _Slide.default,
+    TransitionProps: transition
+  });
+};
+UTSnackbar.propTypes = {
+  button: _types.buttonType,
+  colorTheme: (0, _propTypes.oneOf)(Object.values(_constants.COLOR_THEMES)),
+  dataTestId: _propTypes.string,
+  description: _propTypes.string,
+  icon: _propTypes.string,
+  message: _propTypes.string,
+  onClose: _propTypes.func,
+  open: _propTypes.bool,
+  secondaryButton: _types.buttonType,
+  timeDuration: _propTypes.number,
+  topRight: _propTypes.bool,
+  variant: (0, _propTypes.oneOf)(Object.values(_constants.VARIANTS)),
+  withoutIcon: _propTypes.bool
+};
+var _default = exports.default = (0, _WithTheme.default)(undefined, _theme.retrieveMuiTheme)(UTSnackbar);

package/dist/components/UTSnackbar/stories/UTSnackbar.stories.js

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WhiteVariants = exports.TopRight = exports.Test = exports.SinIcono = exports.SemanticLight = exports.SemanticDark = exports.Playground = exports.ConMarkdown = exports.ConDescripcion = exports.ConAcciones = exports.ConAccionPrimaria = exports.AllVariants = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _UTButton = _interopRequireDefault(require("../../UTButton"));
+var _ = _interopRequireDefault(require(".."));
+var _constants = require("../constants");
+var _storiesConstants = require("./storiesConstants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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 SEMANTIC_COLOR_THEMES = [_constants.COLOR_THEMES.success, _constants.COLOR_THEMES.error, _constants.COLOR_THEMES.warning, _constants.COLOR_THEMES.info];
+const AllTypesDemo = () => {
+  const [snackState, setSnackState] = (0, _react.useState)({
+    open: false
+  });
+  const show = function (colorTheme) {
+    let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.VARIANTS.dark;
+    return setSnackState({
+      colorTheme,
+      message: "Alerta de tipo: ".concat(colorTheme),
+      open: true,
+      variant
+    });
+  };
+  const handleClose = () => setSnackState(prev => ({
+    ...prev,
+    open: false
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '12px',
+      fontWeight: 600,
+      margin: '0 0 4px'
+    }
+  }, "Dark"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    key: colorTheme,
+    onClick: () => show(colorTheme),
+    size: "small",
+    variant: "outlined"
+  }, colorTheme)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    onClick: () => show(_constants.COLOR_THEMES.white),
+    size: "small",
+    variant: "outlined"
+  }, "white")), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: '12px',
+      fontWeight: 600,
+      margin: '8px 0 4px'
+    }
+  }, "Light"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    key: colorTheme,
+    onClick: () => show(colorTheme, _constants.VARIANTS.light),
+    size: "small",
+    variant: "outlined"
+  }, colorTheme, " light")), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    onClick: () => show(_constants.COLOR_THEMES.white, _constants.VARIANTS.light),
+    size: "small",
+    variant: "outlined"
+  }, "white light")), /*#__PURE__*/_react.default.createElement(_.default, _extends({}, snackState, {
+    onClose: handleClose
+  })));
+};
+var _default = exports.default = {
+  args: {
+    message: 'Operación realizada exitosamente.',
+    open: true,
+    colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+    variant: _constants.DEFAULT_PROPS.variant,
+    topRight: _constants.DEFAULT_PROPS.topRight,
+    withoutIcon: false,
+    icon: undefined,
+    timeDuration: undefined,
+    button: undefined,
+    secondaryButton: undefined,
+    description: undefined
+  },
+  argTypes: _storiesConstants.ARG_TYPES,
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['dataTestId', 'onClose']
+    },
+    docs: {
+      description: {
+        component: 'Componente de notificación tipo Snackbar. Soporta cinco `colorTheme`: los cuatro semánticos (`success`, `error`, `warning`, `info`) y `white` para notificaciones neutras. La prop `variant` controla si el fondo es oscuro o claro.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTSnackbar'
+};
+const Playground = exports.Playground = {
+  name: 'Playground'
+};
+const AllVariants = exports.AllVariants = {
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacé clic en cada botón para ver la variante correspondiente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement(AllTypesDemo, null)
+};
+const SemanticDark = exports.SemanticDark = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Semántico / Dark',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fondo con el color semántico saturado y texto blanco. Cambiá `colorTheme` en el panel de controls para ver los cuatro tipos semánticos.'
+      }
+    }
+  }
+};
+const SemanticLight = exports.SemanticLight = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    variant: _constants.VARIANTS.light
+  },
+  name: 'Semántico / Light',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fondo claro con texto oscuro accesible. Cambiá `colorTheme` para ver los cuatro tipos semánticos.'
+      }
+    }
+  }
+};
+const WhiteVariants = exports.WhiteVariants = {
+  args: {
+    message: 'Notificación sin semántica asociada.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.white,
+    variant: _constants.VARIANTS.light
+  },
+  name: 'White',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Variante neutra sin semántica de color. Con `variant="light"` el fondo es blanco; con `variant="dark"` el fondo es oscuro.'
+      }
+    }
+  }
+};
+const ConAccionPrimaria = exports.ConAccionPrimaria = {
+  args: {
+    button: {
+      title: 'Deshacer'
+    },
+    message: 'Se eliminaron 3 elementos.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.error,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Con Acción Primaria',
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `button` agrega un botón de texto a la derecha del mensaje. Pasar `onClick` dentro del objeto para manejar el evento.'
+      }
+    }
+  }
+};
+const ConAcciones = exports.ConAcciones = {
+  args: {
+    button: {
+      title: 'Confirmar'
+    },
+    secondaryButton: {
+      title: 'Cancelar'
+    },
+    message: 'Se eliminaron 3 elementos.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.error,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Con Acciones Primaria y Secundaria',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `button` y `secondaryButton` se muestran dos botones de acción. Cualquier prop de `UTButton` puede pasarse dentro del objeto para personalizar su comportamiento.'
+      }
+    }
+  }
+};
+const ConDescripcion = exports.ConDescripcion = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    description: 'Los cambios se aplicarán en la próxima sesión.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    variant: _constants.VARIANTS.light
+  },
+  name: 'Con Descripción',
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `description` agrega un texto secundario debajo del mensaje principal con tipografía `small`.'
+      }
+    }
+  }
+};
+const ConMarkdown = exports.ConMarkdown = {
+  args: {
+    message: 'El archivo **reporte_enero.pdf** fue generado *exitosamente*.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    variant: _constants.VARIANTS.light
+  },
+  name: 'Con Markdown',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El campo `message` soporta sintaxis markdown a través de `UTLabel`.'
+      }
+    }
+  }
+};
+const TopRight = exports.TopRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior derecha.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.info,
+    variant: _constants.VARIANTS.dark,
+    topRight: true
+  },
+  name: 'Posición Superior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `topRight: true` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+      }
+    }
+  }
+};
+const SinIcono = exports.SinIcono = {
+  args: {
+    message: 'Notificación sin ícono.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.warning,
+    variant: _constants.VARIANTS.dark,
+    withoutIcon: true
+  },
+  name: 'Sin Ícono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `withoutIcon: true` se oculta el ícono.'
+      }
+    }
+  }
+};
+const Test = exports.Test = {
+  name: 'Test',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Story para el Storybook Test Runner. Renderiza variantes simultáneas para verificar el correcto renderizado.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.default, {
+    colorTheme: _constants.COLOR_THEMES.success,
+    message: "success dark",
+    open: true
+  }), /*#__PURE__*/_react.default.createElement(_.default, {
+    colorTheme: _constants.COLOR_THEMES.error,
+    message: "error light",
+    open: true,
+    variant: _constants.VARIANTS.light
+  }), /*#__PURE__*/_react.default.createElement(_.default, {
+    colorTheme: _constants.COLOR_THEMES.white,
+    message: "white dark",
+    open: true,
+    variant: _constants.VARIANTS.dark
+  }), /*#__PURE__*/_react.default.createElement(_.default, {
+    button: {
+      title: 'Acción'
+    },
+    colorTheme: _constants.COLOR_THEMES.info,
+    description: "Texto secundario de descripci\xF3n",
+    message: "Con descripci\xF3n",
+    open: true
+  }))
+};