@blerp/design 1.0.83 → 1.0.87

package/dist/index.cjs.js

@@ -29,6 +29,7 @@ var Dropzone = require('react-dropzone');
 var InsertPhotoRoundedIcon = require('@mui/icons-material/InsertPhotoRounded');
 var styles = require('@mui/material/styles');
 var Slide = require('@mui/material/Slide');
+var Fade = require('@mui/material/Fade');
 var Lottie = require('react-lottie');
 var AddRoundedIcon = require('@mui/icons-material/AddRounded');
 var FacebookIcon = require('@mui/icons-material/Facebook');
@@ -96,6 +97,7 @@ var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
 var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
 var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
 var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
+var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
 var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
 var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
 var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
@@ -1591,10 +1593,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       _ref.handleClickThreeDot;
       var handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       isLocked = _ref.isLocked,
       fluid = _ref.fluid;
       _ref.props;
+      var backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor;
       _ref.isPremium;
       var handleClickLock = _ref.handleClickLock,
       handleClickPremium = _ref.handleClickPremium;
@@ -1622,12 +1628,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       actionButtonHovered = _useState6[0],
       setActionButtonHovered = _useState6[1];
 
-  console.log(data);
-
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1637,7 +1642,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1647,7 +1653,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1660,7 +1667,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1705,7 +1713,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       // overflow: "hidden",
       "&:hover": {
         transition: "0.3s",
-        bgcolor: "grey2.main"
+        bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1716,7 +1724,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       left: "0",
       right: "0",
       borderRadius: "8px",
-      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
@@ -1778,7 +1786,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
+  }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -1820,7 +1834,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center"
   }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
@@ -2005,8 +2033,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot = _ref.handleClickThreeDot,
       handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       fluid = _ref.fluid,
+      backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor,
       props = _ref.props,
       isLocked = _ref.isLocked,
       isPremium = _ref.isPremium,
@@ -2029,7 +2061,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -2039,7 +2072,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -2049,7 +2083,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -2062,7 +2097,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2102,13 +2138,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot: handleClickThreeDot,
       handleClickUnsave: handleClickUnsave,
       handleClickTitle: handleClickTitle,
+      biteSubtitle: biteSubtitle,
+      handleSubtitleClick: handleSubtitleClick,
       isLinkTitle: isLinkTitle,
       fluid: fluid,
       props: props,
       isLocked: isLocked,
       isPremium: isPremium,
       handleClickLock: handleClickLock,
-      handleClickPremium: handleClickPremium
+      handleClickPremium: handleClickPremium,
+      backgroundColor: backgroundColor,
+      hoverColor: hoverColor
     });
   }
 
@@ -2118,13 +2158,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       minWidth: fluid && "300px",
       borderRadius: "8px",
       border: "2px transparent",
-      bgcolor: "grey2.main",
+      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
       backgroundOrigin: "border-box",
       backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
       transition: "0.3s",
       "&:hover": {
-        bgcolor: "grey3.main"
+        bgcolor: hoverColor ? hoverColor : "grey3.main"
       }
     }
   }, /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -2185,7 +2225,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+  }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
@@ -2195,7 +2241,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     color: "white.override",
     sx: {
@@ -2213,7 +2259,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     sx: {
       ":hover": {
@@ -2226,7 +2272,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row"
   }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
     onClick: function onClick(e) {
@@ -4183,20 +4243,16 @@ var SnackbarContext = /*#__PURE__*/React__default['default'].createContext({
       horizontal: "center"
     },
     slideDirection: "up",
+    transitionType: "slide",
     severity: "success",
-    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+    autoHideDuration: 5000
   },
   triggerSnackbar: function triggerSnackbar() {
     return null;
   }
 });
 
-var slideTransition = function slideTransition(props) {
-  return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
-    direction: "up"
-  }));
-};
-
 var SnackbarProvider = function SnackbarProvider(props) {
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -4210,9 +4266,11 @@ var SnackbarProvider = function SnackbarProvider(props) {
       horizontal: "center"
     },
     color: "notBlack",
+    transitionType: "slide",
     slideDirection: "up",
     severity: "success",
-    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+    autoHideDuration: 5000
   }),
       _useState4 = _slicedToArray__default['default'](_useState3, 2),
       snackbarValues = _useState4[0],
@@ -4228,11 +4286,15 @@ var SnackbarProvider = function SnackbarProvider(props) {
     } : _ref$position,
         _ref$slideDirection = _ref.slideDirection,
         slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+        _ref$transitionType = _ref.transitionType,
+        transitionType = _ref$transitionType === void 0 ? "slide" : _ref$transitionType,
         _ref$severity = _ref.severity,
         severity = _ref$severity === void 0 ? "success" : _ref$severity,
         color = _ref.color,
         _ref$actionButton = _ref.actionButton,
-        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton;
+        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton,
+        _ref$autoHideDuration = _ref.autoHideDuration,
+        autoHideDuration = _ref$autoHideDuration === void 0 ? 5000 : _ref$autoHideDuration;
 
     if (!color) {
       switch (severity) {
@@ -4255,9 +4317,11 @@ var SnackbarProvider = function SnackbarProvider(props) {
       message: message,
       position: position,
       color: color,
+      transitionType: transitionType,
       slideDirection: slideDirection,
       severity: severity,
-      actionButton: actionButton
+      actionButton: actionButton,
+      autoHideDuration: autoHideDuration
     });
   };
 
@@ -4269,12 +4333,20 @@ var SnackbarProvider = function SnackbarProvider(props) {
     }
   }, /*#__PURE__*/React__default['default'].createElement(Snackbar, {
     anchorOrigin: _objectSpread$2({}, snackbarValues.position),
-    autoHideDuration: 5000,
+    autoHideDuration: snackbarValues.autoHideDuration,
     open: open,
     sx: {
       minWidth: "30%"
     },
-    TransitionComponent: slideTransition,
+    TransitionComponent: snackbarValues.transitionType === "fade" ? function (props) {
+      return /*#__PURE__*/React__default['default'].createElement(Fade__default['default'], _extends__default['default']({}, props, {
+        direction: snackbarValues.slideDirection
+      }));
+    } : function (props) {
+      return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
+        direction: snackbarValues.slideDirection
+      }));
+    },
     onClose: function onClose() {
       return setOpen(false);
     },

package/dist/index.esm.js

@@ -26,6 +26,7 @@ import Dropzone from 'react-dropzone';
 import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Slide from '@mui/material/Slide';
+import Fade from '@mui/material/Fade';
 import Lottie from 'react-lottie';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import FacebookIcon from '@mui/icons-material/Facebook';
@@ -1523,10 +1524,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       _ref.handleClickThreeDot;
       var handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       isLocked = _ref.isLocked,
       fluid = _ref.fluid;
       _ref.props;
+      var backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor;
       _ref.isPremium;
       var handleClickLock = _ref.handleClickLock,
       handleClickPremium = _ref.handleClickPremium;
@@ -1554,12 +1559,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       actionButtonHovered = _useState6[0],
       setActionButtonHovered = _useState6[1];
 
-  console.log(data);
-
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1569,7 +1573,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1579,7 +1584,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1592,7 +1598,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1637,7 +1644,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       // overflow: "hidden",
       "&:hover": {
         transition: "0.3s",
-        bgcolor: "grey2.main"
+        bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -1648,7 +1655,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       left: "0",
       right: "0",
       borderRadius: "8px",
-      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
@@ -1710,7 +1717,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
+  }))), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -1752,7 +1765,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     alignItems: "center"
   }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default.createElement(SaveContainer$1, {
@@ -1937,8 +1964,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot = _ref.handleClickThreeDot,
       handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       fluid = _ref.fluid,
+      backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor,
       props = _ref.props,
       isLocked = _ref.isLocked,
       isPremium = _ref.isPremium,
@@ -1961,7 +1992,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1971,7 +2003,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1981,7 +2014,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1994,7 +2028,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2034,13 +2069,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot: handleClickThreeDot,
       handleClickUnsave: handleClickUnsave,
       handleClickTitle: handleClickTitle,
+      biteSubtitle: biteSubtitle,
+      handleSubtitleClick: handleSubtitleClick,
       isLinkTitle: isLinkTitle,
       fluid: fluid,
       props: props,
       isLocked: isLocked,
       isPremium: isPremium,
       handleClickLock: handleClickLock,
-      handleClickPremium: handleClickPremium
+      handleClickPremium: handleClickPremium,
+      backgroundColor: backgroundColor,
+      hoverColor: hoverColor
     });
   }
 
@@ -2050,13 +2089,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       minWidth: fluid && "300px",
       borderRadius: "8px",
       border: "2px transparent",
-      bgcolor: "grey2.main",
+      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
       backgroundOrigin: "border-box",
       backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
       transition: "0.3s",
       "&:hover": {
-        bgcolor: "grey3.main"
+        bgcolor: hoverColor ? hoverColor : "grey3.main"
       }
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -2117,7 +2156,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
+  }))), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
@@ -2127,7 +2172,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     color: "white.override",
     sx: {
@@ -2145,7 +2190,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     sx: {
       ":hover": {
@@ -2158,7 +2203,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
   }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
     onClick: function onClick(e) {
@@ -4115,20 +4174,16 @@ var SnackbarContext = /*#__PURE__*/React__default.createContext({
       horizontal: "center"
     },
     slideDirection: "up",
+    transitionType: "slide",
     severity: "success",
-    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
+    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null),
+    autoHideDuration: 5000
   },
   triggerSnackbar: function triggerSnackbar() {
     return null;
   }
 });
 
-var slideTransition = function slideTransition(props) {
-  return /*#__PURE__*/React__default.createElement(Slide, _extends({}, props, {
-    direction: "up"
-  }));
-};
-
 var SnackbarProvider = function SnackbarProvider(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -4142,9 +4197,11 @@ var SnackbarProvider = function SnackbarProvider(props) {
       horizontal: "center"
     },
     color: "notBlack",
+    transitionType: "slide",
     slideDirection: "up",
     severity: "success",
-    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
+    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null),
+    autoHideDuration: 5000
   }),
       _useState4 = _slicedToArray(_useState3, 2),
       snackbarValues = _useState4[0],
@@ -4160,11 +4217,15 @@ var SnackbarProvider = function SnackbarProvider(props) {
     } : _ref$position,
         _ref$slideDirection = _ref.slideDirection,
         slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+        _ref$transitionType = _ref.transitionType,
+        transitionType = _ref$transitionType === void 0 ? "slide" : _ref$transitionType,
         _ref$severity = _ref.severity,
         severity = _ref$severity === void 0 ? "success" : _ref$severity,
         color = _ref.color,
         _ref$actionButton = _ref.actionButton,
-        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : _ref$actionButton;
+        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : _ref$actionButton,
+        _ref$autoHideDuration = _ref.autoHideDuration,
+        autoHideDuration = _ref$autoHideDuration === void 0 ? 5000 : _ref$autoHideDuration;
 
     if (!color) {
       switch (severity) {
@@ -4187,9 +4248,11 @@ var SnackbarProvider = function SnackbarProvider(props) {
       message: message,
       position: position,
       color: color,
+      transitionType: transitionType,
       slideDirection: slideDirection,
       severity: severity,
-      actionButton: actionButton
+      actionButton: actionButton,
+      autoHideDuration: autoHideDuration
     });
   };
 
@@ -4201,12 +4264,20 @@ var SnackbarProvider = function SnackbarProvider(props) {
     }
   }, /*#__PURE__*/React__default.createElement(Snackbar, {
     anchorOrigin: _objectSpread$2({}, snackbarValues.position),
-    autoHideDuration: 5000,
+    autoHideDuration: snackbarValues.autoHideDuration,
     open: open,
     sx: {
       minWidth: "30%"
     },
-    TransitionComponent: slideTransition,
+    TransitionComponent: snackbarValues.transitionType === "fade" ? function (props) {
+      return /*#__PURE__*/React__default.createElement(Fade, _extends({}, props, {
+        direction: snackbarValues.slideDirection
+      }));
+    } : function (props) {
+      return /*#__PURE__*/React__default.createElement(Slide, _extends({}, props, {
+        direction: snackbarValues.slideDirection
+      }));
+    },
     onClose: function onClose() {
       return setOpen(false);
     },

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,6 +49,7 @@
     var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
     var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
     var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
+    var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
     var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
     var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
     var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
@@ -1544,10 +1545,14 @@
           _ref.handleClickThreeDot;
           var handleClickUnsave = _ref.handleClickUnsave,
           handleClickTitle = _ref.handleClickTitle,
+          handleSubtitleClick = _ref.handleSubtitleClick,
+          biteSubtitle = _ref.biteSubtitle,
           isLinkTitle = _ref.isLinkTitle,
           isLocked = _ref.isLocked,
           fluid = _ref.fluid;
           _ref.props;
+          var backgroundColor = _ref.backgroundColor,
+          hoverColor = _ref.hoverColor;
           _ref.isPremium;
           var handleClickLock = _ref.handleClickLock,
           handleClickPremium = _ref.handleClickPremium;
@@ -1575,12 +1580,11 @@
           actionButtonHovered = _useState6[0],
           setActionButtonHovered = _useState6[1];
 
-      console.log(data);
-
       var sizeParams;
       var smallSize = {
         width: 300,
-        height: 40,
+        height: 52,
+        smallFontSize: "12px",
         fontSize: "16px",
         imageSize: "40px",
         reactionSpacing: 1,
@@ -1590,7 +1594,8 @@
       };
       var mediumSize = {
         width: 375,
-        height: 48,
+        height: 60,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1600,7 +1605,8 @@
       };
       var largeSize = {
         width: 440,
-        height: 56,
+        height: 72,
+        smallFontSize: "26px",
         fontSize: "20px",
         imageSize: "56px",
         reactionSpacing: 1,
@@ -1613,7 +1619,8 @@
         if (fluid) {
           sizeParams = {
             width: "100%",
-            height: 48,
+            height: 52,
+            smallFontSize: "14px",
             fontSize: "18px",
             imageSize: "48px",
             reactionSpacing: 1,
@@ -1658,7 +1665,7 @@
           // overflow: "hidden",
           "&:hover": {
             transition: "0.3s",
-            bgcolor: "grey2.main"
+            bgcolor: hoverColor ? hoverColor : "grey2.main"
           }
         }
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1669,7 +1676,7 @@
           left: "0",
           right: "0",
           borderRadius: "8px",
-          background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+          background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
           transition: "opacity .15s ease-in-out",
           opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
         }
@@ -1731,7 +1738,13 @@
           height: "30px",
           color: "white.override"
         }
-      }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
+      }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "column",
+        alignItems: "flex-start",
+        sx: {
+          width: "80%"
+        }
+      }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
@@ -1773,7 +1786,21 @@
             handleClickTitle();
           }
         }
-      }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+        textAlign: "left",
+        fontSize: sizeParams.smallFontSize,
+        noWrap: true,
+        marginLeft: "10px",
+        width: "100%",
+        color: "white.override",
+        sx: {},
+        onClick: function onClick(e) {
+          if (handleSubtitleClick) {
+            e.stopPropagation();
+            handleSubtitleClick();
+          }
+        }
+      }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         alignItems: "center"
       }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
@@ -1958,8 +1985,12 @@
           handleClickThreeDot = _ref.handleClickThreeDot,
           handleClickUnsave = _ref.handleClickUnsave,
           handleClickTitle = _ref.handleClickTitle,
+          handleSubtitleClick = _ref.handleSubtitleClick,
+          biteSubtitle = _ref.biteSubtitle,
           isLinkTitle = _ref.isLinkTitle,
           fluid = _ref.fluid,
+          backgroundColor = _ref.backgroundColor,
+          hoverColor = _ref.hoverColor,
           props = _ref.props,
           isLocked = _ref.isLocked,
           isPremium = _ref.isPremium,
@@ -1982,7 +2013,8 @@
       var sizeParams;
       var smallSize = {
         width: 300,
-        height: 40,
+        height: 52,
+        smallFontSize: "12px",
         fontSize: "16px",
         imageSize: "40px",
         reactionSpacing: 1,
@@ -1992,7 +2024,8 @@
       };
       var mediumSize = {
         width: 375,
-        height: 48,
+        height: 60,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2002,7 +2035,8 @@
       };
       var largeSize = {
         width: 440,
-        height: 56,
+        height: 72,
+        smallFontSize: "26px",
         fontSize: "20px",
         imageSize: "56px",
         reactionSpacing: 1,
@@ -2015,7 +2049,8 @@
         if (fluid) {
           sizeParams = {
             width: "100%",
-            height: 48,
+            height: 52,
+            smallFontSize: "14px",
             fontSize: "18px",
             imageSize: "48px",
             reactionSpacing: 1,
@@ -2055,13 +2090,17 @@
           handleClickThreeDot: handleClickThreeDot,
           handleClickUnsave: handleClickUnsave,
           handleClickTitle: handleClickTitle,
+          biteSubtitle: biteSubtitle,
+          handleSubtitleClick: handleSubtitleClick,
           isLinkTitle: isLinkTitle,
           fluid: fluid,
           props: props,
           isLocked: isLocked,
           isPremium: isPremium,
           handleClickLock: handleClickLock,
-          handleClickPremium: handleClickPremium
+          handleClickPremium: handleClickPremium,
+          backgroundColor: backgroundColor,
+          hoverColor: hoverColor
         });
       }
 
@@ -2071,13 +2110,13 @@
           minWidth: fluid && "300px",
           borderRadius: "8px",
           border: "2px transparent",
-          bgcolor: "grey2.main",
+          bgcolor: backgroundColor ? backgroundColor : "grey2.main",
           backgroundOrigin: "border-box",
           backgroundClip: "content-box, border-box",
           boxShadow: "2px 2px 4px 0px #999999a1;",
           transition: "0.3s",
           "&:hover": {
-            bgcolor: "grey3.main"
+            bgcolor: hoverColor ? hoverColor : "grey3.main"
           }
         }
       }, /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -2138,7 +2177,13 @@
           height: "30px",
           color: "white.override"
         }
-      }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+      }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "column",
+        alignItems: "flex-start",
+        sx: {
+          width: "80%"
+        }
+      }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
         href: "/soundbites/".concat(bite._id),
         style: {
           textDecoration: "none",
@@ -2148,7 +2193,7 @@
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
-        width: "80%",
+        width: "100%",
         marginLeft: "10px",
         color: "white.override",
         sx: {
@@ -2166,7 +2211,7 @@
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
-        width: "80%",
+        width: "100%",
         marginLeft: "10px",
         sx: {
           ":hover": {
@@ -2179,7 +2224,21 @@
             handleClickTitle();
           }
         }
-      }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+        textAlign: "left",
+        fontSize: sizeParams.smallFontSize,
+        noWrap: true,
+        marginLeft: "10px",
+        width: "100%",
+        color: "white.override",
+        sx: {},
+        onClick: function onClick(e) {
+          if (handleSubtitleClick) {
+            e.stopPropagation();
+            handleSubtitleClick();
+          }
+        }
+      }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row"
       }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
         onClick: function onClick(e) {
@@ -4136,20 +4195,16 @@
           horizontal: "center"
         },
         slideDirection: "up",
+        transitionType: "slide",
         severity: "success",
-        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+        autoHideDuration: 5000
       },
       triggerSnackbar: function triggerSnackbar() {
         return null;
       }
     });
 
-    var slideTransition = function slideTransition(props) {
-      return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
-        direction: "up"
-      }));
-    };
-
     var SnackbarProvider = function SnackbarProvider(props) {
       var _useState = React.useState(false),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -4163,9 +4218,11 @@
           horizontal: "center"
         },
         color: "notBlack",
+        transitionType: "slide",
         slideDirection: "up",
         severity: "success",
-        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+        autoHideDuration: 5000
       }),
           _useState4 = _slicedToArray__default['default'](_useState3, 2),
           snackbarValues = _useState4[0],
@@ -4181,11 +4238,15 @@
         } : _ref$position,
             _ref$slideDirection = _ref.slideDirection,
             slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+            _ref$transitionType = _ref.transitionType,
+            transitionType = _ref$transitionType === void 0 ? "slide" : _ref$transitionType,
             _ref$severity = _ref.severity,
             severity = _ref$severity === void 0 ? "success" : _ref$severity,
             color = _ref.color,
             _ref$actionButton = _ref.actionButton,
-            actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton;
+            actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton,
+            _ref$autoHideDuration = _ref.autoHideDuration,
+            autoHideDuration = _ref$autoHideDuration === void 0 ? 5000 : _ref$autoHideDuration;
 
         if (!color) {
           switch (severity) {
@@ -4208,9 +4269,11 @@
           message: message,
           position: position,
           color: color,
+          transitionType: transitionType,
           slideDirection: slideDirection,
           severity: severity,
-          actionButton: actionButton
+          actionButton: actionButton,
+          autoHideDuration: autoHideDuration
         });
       };
 
@@ -4222,12 +4285,20 @@
         }
       }, /*#__PURE__*/React__default['default'].createElement(Snackbar, {
         anchorOrigin: _objectSpread$2({}, snackbarValues.position),
-        autoHideDuration: 5000,
+        autoHideDuration: snackbarValues.autoHideDuration,
         open: open,
         sx: {
           minWidth: "30%"
         },
-        TransitionComponent: slideTransition,
+        TransitionComponent: snackbarValues.transitionType === "fade" ? function (props) {
+          return /*#__PURE__*/React__default['default'].createElement(Fade__default['default'], _extends__default['default']({}, props, {
+            direction: snackbarValues.slideDirection
+          }));
+        } : function (props) {
+          return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
+            direction: snackbarValues.slideDirection
+          }));
+        },
         onClose: function onClose() {
           return setOpen(false);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.0.83",
+    "version": "1.0.87",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {