@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -0,0 +1,105 @@
+# UTSnackbar
+
+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.
+
+---
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
+| `open` | `boolean` | `false` | Controla si el snackbar está visible. |
+| `colorTheme` | `'success' \| 'error' \| 'warning' \| 'info' \| 'white'` | `'success'` | Color de la notificación. Los valores semánticos determinan ícono y paleta. `white` usa colores neutros sin semántica. |
+| `variant` | `'dark' \| 'light'` | `'dark'` | `dark` usa el color del `colorTheme` como fondo con texto blanco. `light` usa un fondo claro con texto oscuro accesible. |
+| `button` | `object` | `undefined` | Configuración del botón de acción primaria. Se hace spread en `UTButton` — incluir `title` y opcionalmente `onClick`. |
+| `secondaryButton` | `object` | `undefined` | Configuración del botón de acción secundaria. Igual que `button`. |
+| `buttonSize` | `'small' \| 'medium' \| 'large'` | `'medium'` | Tamaño de todos los botones de acción. |
+| `description` | `string` | `undefined` | Texto secundario debajo del mensaje principal. |
+| `icon` | `string` | `undefined` | Nombre de ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). |
+| `withoutIcon` | `boolean` | `undefined` | Oculta el ícono. |
+| `position` | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | Posición del snackbar en la pantalla. Determina también la dirección del slide de entrada. |
+| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
+| `onClose` | `function` | `undefined` | Callback al cerrar el snackbar. |
+| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
+| `closeDataTestId` | `string` | `undefined` | Test ID del botón de cierre. |
+| `labelDataTestId` | `string` | `undefined` | Test ID del label del mensaje. |
+| `descriptionDataTestId` | `string` | `undefined` | Test ID del label de descripción. |
+
+---
+
+## Variantes
+
+### Semántico / Dark
+Fondo con el color semántico saturado y texto blanco.
+
+| `colorTheme` | Color de fondo | Ícono |
+| ------------ | -------------- | ----- |
+| `success` | `success[04]` (`#118460`) | circle-check |
+| `error` | `error[04]` (`#E80C2C`) | circle-x |
+| `warning` | `warning[04]` (`#A86600`) | alert-triangle |
+| `info` | `information[04]` (`#037DB4`) | info-circle |
+
+### Semántico / Light
+Fondo claro con texto oscuro accesible.
+
+| `colorTheme` | Color de fondo | Color de texto |
+| ------------ | -------------- | -------------- |
+| `success` | `success[01]` (`#E6F9F3`) | `success[05]` (`#055F43`) |
+| `error` | `error[01]` (`#FFEBEE`) | `error[05]` (`#A0041B`) |
+| `warning` | `warning[01]` (`#FFF9E6`) | `warning[05]` (`#6F4708`) |
+| `info` | `information[01]` (`#EBF8FD`) | `information[05]` (`#035B83`) |
+
+### White
+Sin semántica de color. Útil para notificaciones neutras.
+
+| `variant` | Color de fondo | Color de texto |
+| --------- | -------------- | -------------- |
+| `light` | `#FFFFFF` | `dark[05]` (`#091E42`) |
+| `dark` | `dark[04]` (`#182C49`) | `#FFFFFF` |
+
+---
+
+## Uso básico
+
+```jsx
+import { UTSnackbar } from '@widergy/energy-ui';
+
+const MiComponente = () => (
+  <UTSnackbar
+    colorTheme="success"
+    message="Operación completada exitosamente."
+    open
+  />
+);
+```
+
+## Con botón de acción
+
+```jsx
+<UTSnackbar
+  button={{ title: 'Deshacer', onClick: () => console.log('deshacer') }}
+  colorTheme="error"
+  message="Se eliminaron 3 elementos."
+  onClose={() => setOpen(false)}
+  open={open}
+/>
+```
+
+## Variante neutra (white)
+
+```jsx
+<UTSnackbar
+  colorTheme="white"
+  message="Notificación sin semántica."
+  open
+  variant="light"
+/>
+```
+
+---
+
+## Notas
+
+- Los colores de fondo y texto se resuelven desde `theme.Palette` en tiempo de ejecución, por lo que respetan el tema de cada utility cliente.
+- Los design tokens de componente (`--UT-snackbar-*`) están pendientes de definición por Diseño.

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

@@ -1 +1,128 @@
-import{COLOR_SHADES,COLOR_THEMES as PALETTE_COLOR_THEMES}from"../../constants/Palette";export const COLOR_THEMES={error:"error",info:"info",success:"success",warning:"warning",white:"white"};export const VARIANTS={dark:"dark",light:"light"};export const POSITIONS={bottomLeft:"bottomLeft",bottomRight:"bottomRight",topLeft:"topLeft",topRight:"topRight"};export const DEFAULT_PROPS={colorTheme:COLOR_THEMES.success,open:!1,position:POSITIONS.bottomLeft,variant:VARIANTS.dark};export const 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"};export const LABEL_COLOR_MAP={successDark:{colorTheme:PALETTE_COLOR_THEMES.light,shade:COLOR_SHADES.shade01},errorDark:{colorTheme:PALETTE_COLOR_THEMES.light,shade:COLOR_SHADES.shade01},warningDark:{colorTheme:PALETTE_COLOR_THEMES.light,shade:COLOR_SHADES.shade01},infoDark:{colorTheme:PALETTE_COLOR_THEMES.light,shade:COLOR_SHADES.shade01},successLight:{colorTheme:PALETTE_COLOR_THEMES.success,shade:COLOR_SHADES.shade05},errorLight:{colorTheme:PALETTE_COLOR_THEMES.error,shade:COLOR_SHADES.shade05},warningLight:{colorTheme:PALETTE_COLOR_THEMES.warning,shade:COLOR_SHADES.shade05},infoLight:{colorTheme:PALETTE_COLOR_THEMES.information,shade:COLOR_SHADES.shade05},whiteLight:{colorTheme:PALETTE_COLOR_THEMES.dark,shade:COLOR_SHADES.shade05},whiteDark:{colorTheme:PALETTE_COLOR_THEMES.light,shade:COLOR_SHADES.shade01}};export const 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"}};export const ICON_NAME_MAP={[COLOR_THEMES.error]:"IconCircleX",[COLOR_THEMES.info]:"IconInfoCircle",[COLOR_THEMES.success]:"IconCircleCheck",[COLOR_THEMES.warning]:"IconAlertTriangle",[COLOR_THEMES.white]:"IconInfoCircle"};
+import { COLOR_SHADES, COLOR_THEMES as PALETTE_COLOR_THEMES } from '../../constants/Palette';
+export const COLOR_THEMES = {
+  error: 'error',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  white: 'white'
+};
+export const VARIANTS = {
+  dark: 'dark',
+  light: 'light'
+};
+export const POSITIONS = {
+  bottomLeft: 'bottomLeft',
+  bottomRight: 'bottomRight',
+  topLeft: 'topLeft',
+  topRight: 'topRight'
+};
+export const DEFAULT_PROPS = {
+  colorTheme: COLOR_THEMES.success,
+  open: false,
+  position: POSITIONS.bottomLeft,
+  variant: VARIANTS.dark
+};
+export const 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'
+};
+export const LABEL_COLOR_MAP = {
+  successDark: {
+    colorTheme: PALETTE_COLOR_THEMES.light,
+    shade: COLOR_SHADES.shade01
+  },
+  errorDark: {
+    colorTheme: PALETTE_COLOR_THEMES.light,
+    shade: COLOR_SHADES.shade01
+  },
+  warningDark: {
+    colorTheme: PALETTE_COLOR_THEMES.light,
+    shade: COLOR_SHADES.shade01
+  },
+  infoDark: {
+    colorTheme: PALETTE_COLOR_THEMES.light,
+    shade: COLOR_SHADES.shade01
+  },
+  successLight: {
+    colorTheme: PALETTE_COLOR_THEMES.success,
+    shade: COLOR_SHADES.shade05
+  },
+  errorLight: {
+    colorTheme: PALETTE_COLOR_THEMES.error,
+    shade: COLOR_SHADES.shade05
+  },
+  warningLight: {
+    colorTheme: PALETTE_COLOR_THEMES.warning,
+    shade: COLOR_SHADES.shade05
+  },
+  infoLight: {
+    colorTheme: PALETTE_COLOR_THEMES.information,
+    shade: COLOR_SHADES.shade05
+  },
+  whiteLight: {
+    colorTheme: PALETTE_COLOR_THEMES.dark,
+    shade: COLOR_SHADES.shade05
+  },
+  whiteDark: {
+    colorTheme: PALETTE_COLOR_THEMES.light,
+    shade: COLOR_SHADES.shade01
+  }
+};
+export const 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'
+  }
+};
+export const 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/esm/components/UTSnackbar/index.js

@@ -1 +1,127 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import React from"react";import{bool,func,number,oneOf,string}from"prop-types";import Slide from"@material-ui/core/Slide";import Snackbar from"@material-ui/core/Snackbar";import UTButton from"../UTButton";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{ID_CONSTANTS}from"../../constants/testIds";import{ACTION_BUTTON_CONFIG_MAP,COLOR_THEMES,DEFAULT_PROPS,ICON_NAME_MAP,LABEL_COLOR_MAP,POSITIONS,VARIANT_CLASS_MAP,VARIANTS}from"./constants";import{getAnchorAndTransition}from"./utils";import{retrieveMuiTheme}from"./theme";import{buttonType}from"./types";import styles from"./styles.module.scss";const UTSnackbar=_ref=>{let{button:button,colorTheme:colorTheme=DEFAULT_PROPS.colorTheme,dataTestId:dataTestId,description:description,icon:icon,message:message,onClose:onClose,open:open=DEFAULT_PROPS.open,position:position=DEFAULT_PROPS.position,secondaryButton:secondaryButton,timeDuration:timeDuration,variant:variant=DEFAULT_PROPS.variant,withoutIcon:withoutIcon}=_ref;const handleClose=(_,reason)=>{"clickaway"!==reason&&(null==onClose||onClose())},variantKey="".concat(colorTheme,"-").concat(variant),variantClassKey=VARIANT_CLASS_MAP[variantKey],variantClass=styles[variantClassKey]||"",labelColorConfig=LABEL_COLOR_MAP[variantClassKey]||LABEL_COLOR_MAP.successDark,actionButtonConfig=ACTION_BUTTON_CONFIG_MAP[variantClassKey],iconName=withoutIcon?null:icon||ICON_NAME_MAP[colorTheme],{anchor:anchor,transition:transition}=getAnchorAndTransition(position),testIds={close:dataTestId?"".concat(dataTestId,".close"):void 0,description:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.DESCRIPTION,".").concat(ID_CONSTANTS.LABEL):void 0,icon:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.ICON):void 0,label:dataTestId?"".concat(dataTestId,".").concat(ID_CONSTANTS.LABEL):void 0,primaryButton:dataTestId?"".concat(dataTestId,".button.").concat(ID_CONSTANTS.SECONDARY_ACTION):void 0,secondaryButton:dataTestId?"".concat(dataTestId,".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION):void 0};return React.createElement(Snackbar,{action:[!!secondaryButton&&React.createElement(UTButton,_extends({key:"secondary",colorTheme:actionButtonConfig.colorTheme},secondaryButton,{dataTestId:testIds.secondaryButton}),secondaryButton.title),!!button&&React.createElement(UTButton,_extends({key:"primary",colorTheme:actionButtonConfig.colorTheme},button,{dataTestId:testIds.primaryButton}),button.title),React.createElement(UTButton,{key:"close",colorTheme:actionButtonConfig.closeColorTheme||actionButtonConfig.colorTheme,dataTestId:testIds.close,Icon:"IconX",onClick:handleClose,variant:actionButtonConfig.variant})],anchorOrigin:anchor,autoHideDuration:timeDuration,ContentProps:{className:"".concat(styles.snackbarContent," ").concat(variantClass),classes:{action:styles.action,message:styles.message}},message:React.createElement("div",{className:styles.messageContent},iconName&&React.createElement(UTIcon,{className:styles.icon,colorTheme:labelColorConfig.colorTheme,dataTestId:testIds.icon,name:iconName,shade:labelColorConfig.shade,size:20}),React.createElement("div",{className:styles.textContent},React.createElement(UTLabel,{colorTheme:labelColorConfig.colorTheme,dataTestId:testIds.label,shade:labelColorConfig.shade,variant:"body",weight:"medium",withMarkdown:!0},message),description&&React.createElement(UTLabel,{colorTheme:labelColorConfig.colorTheme,dataTestId:testIds.description,shade:labelColorConfig.shade,variant:"small"},description))),onClose:handleClose,open:open,TransitionComponent:Slide,TransitionProps:transition})};UTSnackbar.propTypes={button:buttonType,colorTheme:oneOf(Object.values(COLOR_THEMES)),dataTestId:string,description:string,icon:string,message:string,onClose:func,open:bool,position:oneOf(Object.values(POSITIONS)),secondaryButton:buttonType,timeDuration:number,variant:oneOf(Object.values(VARIANTS)),withoutIcon:bool};export default WithTheme(void 0,retrieveMuiTheme)(UTSnackbar);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { bool, func, number, oneOf, string } from 'prop-types';
+import Slide from '@material-ui/core/Slide';
+import Snackbar from '@material-ui/core/Snackbar';
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { ID_CONSTANTS } from '../../constants/testIds';
+import { ACTION_BUTTON_CONFIG_MAP, COLOR_THEMES, DEFAULT_PROPS, ICON_NAME_MAP, LABEL_COLOR_MAP, POSITIONS, VARIANT_CLASS_MAP, VARIANTS } from './constants';
+import { getAnchorAndTransition } from './utils';
+import { retrieveMuiTheme } from './theme';
+import { buttonType } from './types';
+import styles from './styles.module.scss';
+const UTSnackbar = _ref => {
+  let {
+    button,
+    colorTheme = DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    icon,
+    message,
+    onClose,
+    open = DEFAULT_PROPS.open,
+    position = DEFAULT_PROPS.position,
+    secondaryButton,
+    timeDuration,
+    variant = 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 = VARIANT_CLASS_MAP[variantKey];
+  const variantClass = styles[variantClassKey] || '';
+  const labelColorConfig = LABEL_COLOR_MAP[variantClassKey] || LABEL_COLOR_MAP.successDark;
+  const actionButtonConfig = ACTION_BUTTON_CONFIG_MAP[variantClassKey];
+  const iconName = withoutIcon ? null : icon || ICON_NAME_MAP[colorTheme];
+  const {
+    anchor,
+    transition
+  } = getAnchorAndTransition(position);
+  const testIds = {
+    close: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    description: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    icon: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined,
+    label: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    primaryButton: dataTestId ? "".concat(dataTestId, ".button.").concat(ID_CONSTANTS.SECONDARY_ACTION) : undefined,
+    secondaryButton: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  };
+  return /*#__PURE__*/React.createElement(Snackbar, {
+    action: [!!secondaryButton && /*#__PURE__*/React.createElement(UTButton, _extends({
+      key: "secondary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, secondaryButton, {
+      dataTestId: testIds.secondaryButton
+    }), secondaryButton.title), !!button && /*#__PURE__*/React.createElement(UTButton, _extends({
+      key: "primary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, button, {
+      dataTestId: testIds.primaryButton
+    }), button.title), /*#__PURE__*/React.createElement(UTButton, {
+      key: "close",
+      colorTheme: actionButtonConfig.closeColorTheme || actionButtonConfig.colorTheme,
+      dataTestId: testIds.close,
+      Icon: "IconX",
+      onClick: handleClose,
+      variant: actionButtonConfig.variant
+    })],
+    anchorOrigin: anchor,
+    autoHideDuration: timeDuration,
+    ContentProps: {
+      className: "".concat(styles.snackbarContent, " ").concat(variantClass),
+      classes: {
+        action: styles.action,
+        message: styles.message
+      }
+    },
+    message: /*#__PURE__*/React.createElement("div", {
+      className: styles.messageContent
+    }, iconName && /*#__PURE__*/React.createElement(UTIcon, {
+      className: styles.icon,
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.icon,
+      name: iconName,
+      shade: labelColorConfig.shade,
+      size: 20
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.textContent
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.label,
+      shade: labelColorConfig.shade,
+      variant: "body",
+      weight: "medium",
+      withMarkdown: true
+    }, message), description && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.description,
+      shade: labelColorConfig.shade,
+      variant: "small"
+    }, description))),
+    onClose: handleClose,
+    open: open,
+    TransitionComponent: Slide,
+    TransitionProps: transition
+  });
+};
+UTSnackbar.propTypes = {
+  button: buttonType,
+  colorTheme: oneOf(Object.values(COLOR_THEMES)),
+  dataTestId: string,
+  description: string,
+  icon: string,
+  message: string,
+  onClose: func,
+  open: bool,
+  position: oneOf(Object.values(POSITIONS)),
+  secondaryButton: buttonType,
+  timeDuration: number,
+  variant: oneOf(Object.values(VARIANTS)),
+  withoutIcon: bool
+};
+export default WithTheme(undefined, retrieveMuiTheme)(UTSnackbar);