@widergy/energy-ui 3.164.0 → 3.165.1

package/dist/components/UTSnackbar/index.js

@@ -0,0 +1,134 @@
+"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 _utils = require("./utils");
+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,
+    position = _constants.DEFAULT_PROPS.position,
+    secondaryButton,
+    timeDuration,
+    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,
+    transition
+  } = (0, _utils.getAnchorAndTransition)(position);
+  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,
+  position: (0, _propTypes.oneOf)(Object.values(_constants.POSITIONS)),
+  secondaryButton: _types.buttonType,
+  timeDuration: _propTypes.number,
+  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,350 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WhiteVariants = exports.TopRight = exports.TopLeft = exports.Test = exports.SinIcono = exports.SemanticLight = exports.SemanticDark = exports.Playground = exports.ConMarkdown = exports.ConDescripcion = exports.ConAcciones = exports.ConAccionPrimaria = exports.BottomRight = 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,
+    position: _constants.DEFAULT_PROPS.position,
+    variant: _constants.DEFAULT_PROPS.variant,
+    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,
+    position: _constants.POSITIONS.topRight,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Posición Superior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topRight"` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+      }
+    }
+  }
+};
+const BottomRight = exports.BottomRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina inferior derecha.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.success,
+    position: _constants.POSITIONS.bottomRight,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Posición Inferior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="bottomRight"` el snackbar aparece en la esquina inferior derecha con slide desde abajo.'
+      }
+    }
+  }
+};
+const TopLeft = exports.TopLeft = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior izquierda.',
+    open: true,
+    colorTheme: _constants.COLOR_THEMES.warning,
+    position: _constants.POSITIONS.topLeft,
+    variant: _constants.VARIANTS.dark
+  },
+  name: 'Posición Superior Izquierda',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topLeft"` el snackbar aparece en la esquina superior izquierda con slide desde arriba.'
+      }
+    }
+  }
+};
+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
+  }))
+};

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

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = void 0;
+var _utils = require("stories/utils");
+var _constants = require("../constants");
+const ARG_TYPES = exports.ARG_TYPES = {
+  button: {
+    control: 'object',
+    description: 'Configuración del botón de acción primaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'shape'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tipo de color de la notificación. `success`, `error`, `warning` e `info` usan colores semánticos con ícono asociado. `white` usa colores neutros sin semántica.',
+    options: Object.values(_constants.COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: _constants.COLOR_THEMES.success
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.COLOR_THEMES))
+      }
+    }
+  },
+  icon: {
+    control: 'text',
+    description: 'Nombre del ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). Si no se indica, se usa el ícono correspondiente al `colorTheme`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  description: {
+    control: 'text',
+    description: 'Texto secundario debajo del mensaje principal.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  dataTestId: {
+    control: false,
+    description: 'Identificador de test raíz. Los sub-elementos derivan su testId automáticamente: `.icon`, `.label`, `.description.label`, `.close`, `.button.secondaryAction`, `.secondaryButton.tertiaryAction`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  message: {
+    control: 'text',
+    description: 'Mensaje principal a mostrar. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  onClose: {
+    control: false,
+    description: 'Callback ejecutado al cerrar el snackbar.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  open: {
+    control: 'boolean',
+    description: 'Controla si el snackbar está visible.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  secondaryButton: {
+    control: 'object',
+    description: 'Configuración del botón de acción secundaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'shape'
+      }
+    }
+  },
+  timeDuration: {
+    control: 'number',
+    description: 'Duración en milisegundos antes del cierre automático.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  position: {
+    control: 'select',
+    description: 'Posición del snackbar en la pantalla.',
+    options: Object.values(_constants.POSITIONS),
+    table: {
+      defaultValue: {
+        summary: _constants.POSITIONS.bottomLeft
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.POSITIONS))
+      }
+    }
+  },
+  variant: {
+    control: 'inline-radio',
+    description: '`dark` usa el color del `colorTheme` como fondo con texto blanco; `light` usa una versión clara con texto oscuro accesible.',
+    options: Object.values(_constants.VARIANTS),
+    table: {
+      defaultValue: {
+        summary: _constants.VARIANTS.dark
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.VARIANTS))
+      }
+    }
+  },
+  withoutIcon: {
+    control: 'boolean',
+    description: 'Si es `true`, oculta el ícono.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};