@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/NewBlerp.js

@@ -2,93 +2,279 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
-var ExtensionRoundedIcon = require('@mui/icons-material/ExtensionRounded');
-var FavoriteIcon = require('@mui/icons-material/Favorite');
-var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
-var LayersRoundedIcon = require('@mui/icons-material/LayersRounded');
-var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
-var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
-var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
 var UsernameWithPopout = require('./UsernameWithPopout.js');
 var index = require('./index.js');
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
 var Icons = require('./Icons/Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
-var ExtensionRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExtensionRoundedIcon);
-var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
-var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
-var LayersRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersRoundedIcon);
-var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
-var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
-var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-
-var _templateObject, _templateObject2, _templateObject3;
-const PremiumContainer = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])), props => props.theme.colors.grey7);
-const Container = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
-const HoverScrollText = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-const FavoriteIconWithCounter = _ref => {
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const DoNotDisturbIcon = _ref => {
+  let {
+    sx
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z",
+    fill: "currentColor"
+  }));
+};
+
+const ExtensionIcon = _ref2 => {
+  let {
+    sx
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z",
+    fill: "currentColor"
+  }));
+};
+
+const FavoriteIcon = _ref3 => {
+  let {
+    sx
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z",
+    fill: "currentColor"
+  }));
+};
+
+const FavoriteBorderIcon = _ref4 => {
+  let {
+    sx
+  } = _ref4;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z",
+    fill: "currentColor"
+  }));
+};
+
+const LayersIcon = _ref5 => {
+  let {
+    sx
+  } = _ref5;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z",
+    fill: "currentColor"
+  }));
+};
+
+const PauseIcon = _ref6 => {
+  let {
+    sx
+  } = _ref6;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "84",
+    height: "84",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+    fill: "currentColor"
+  }));
+};
+
+const PlayArrowIcon = _ref7 => {
+  let {
+    sx
+  } = _ref7;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "84",
+    height: "84",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M8 5v14l11-7z",
+    fill: "currentColor"
+  }));
+};
+
+const WarningIcon = _ref8 => {
+  let {
+    sx
+  } = _ref8;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+    fill: "currentColor"
+  }));
+};
+
+const LockIcon = _ref9 => {
+  let {
+    sx
+  } = _ref9;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z",
+    fill: "currentColor"
+  }));
+}; // Styles converted from styled-components to sx prop objects
+
+
+const premiumContainerStyles = {
+  overflow: "hidden",
+  minWidth: "210px",
+  maxWidth: "260px",
+  width: "100%",
+  maxHeight: "322px",
+  flex: 1,
+  minHeight: "272px",
+  aspectRatio: "260 / 322",
+  gap: "10px",
+  borderRadius: "18px",
+  boxSizing: "border-box",
+  padding: "2px",
+  position: "relative",
+  transition: "0.3s"
+};
+
+const getContainerStyles = (addToOpen, isPremium) => ({
+  backgroundColor: addToOpen ? "grey5.main" : "grey7.main",
+  background: isPremium ? "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233" : undefined,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  position: "relative",
+  height: "100%",
+  padding: "10px",
+  borderRadius: "17px",
+  boxSizing: "border-box",
+  transition: "0.3s"
+});
+
+const getHoverScrollTextStyles = shouldScroll => ({
+  width: "100%",
+  maxWidth: "280px",
+  minWidth: "190px",
+  height: "23px",
+  overflow: "hidden",
+  lineHeight: "30px",
+  boxSizing: "border-box",
+  position: "relative",
+  margin: "10px 0 5px 0",
+  cursor: "pointer",
+  "& p, & span": {
+    cursor: "default",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    transform: "translateX(0)",
+    transition: "1s"
+  },
+  "&:hover p, &:hover span": {
+    transform: shouldScroll ? "translateX(calc(180px - 100%))" : undefined,
+    textDecoration: "underline",
+    cursor: "pointer"
+  }
+});
+
+const FavoriteIconWithCounter = _ref10 => {
   let {
     saved,
     count,
     onClick
-  } = _ref;
+  } = _ref10;
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
   let savedCount = formatter.format(count);
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     onClick: onClick
-  }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
+  }, saved ? /*#__PURE__*/React__default["default"].createElement(FavoriteIcon, {
     sx: {
       fontSize: "17px",
       marginRight: "6px",
       transition: "0.3s",
       cursor: "pointer",
       opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
+      color: "#ffffff"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
+  }) : /*#__PURE__*/React__default["default"].createElement(FavoriteBorderIcon, {
     sx: {
       fontSize: "17px",
       marginRight: "6px",
       transition: "0.3s",
       cursor: "pointer",
       opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
+      color: "#ffffff"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "400"
     }
   }, savedCount));
 };
-const AddedToIcons = _ref2 => {
+const AddedToIcons = _ref11 => {
   var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
   let {
     item,
     hovering,
     hide = false
-  } = _ref2;
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  } = _ref11;
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       transition: "0.3s",
@@ -98,37 +284,37 @@ const AddedToIcons = _ref2 => {
       flexWrap: "wrap",
       flex: 1
     }
-  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Added to Universal Extension"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ExtensionRoundedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ExtensionIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Added to Channel Points"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.ChannelPointsIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.ChannelPointsIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Added to Bits Library"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.TwitchBitIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.TwitchBitIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Added to WalkOn"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Icons.WalkonIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Icons.WalkonIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Added to Group"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LayersRoundedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(LayersIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
@@ -136,15 +322,15 @@ const AddedToIcons = _ref2 => {
   }))));
 };
 
-const RatingInfoItem = _ref3 => {
+const RatingInfoItem = _ref12 => {
   let {
     hovering,
     tooltipText,
     displayText
-  } = _ref3;
-  return /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  } = _ref12;
+  return /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: tooltipText
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "9px",
       fontWeight: "600",
@@ -161,11 +347,11 @@ const RatingInfoItem = _ref3 => {
   }, displayText));
 };
 
-const RatingInfo = _ref4 => {
+const RatingInfo = _ref13 => {
   let {
     bite,
     hovering
-  } = _ref4;
+  } = _ref13;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -175,12 +361,11 @@ const RatingInfo = _ref4 => {
     var _bite$newAudienceRati, _bite$newAudienceRati2;
 
     if (!(bite !== null && bite !== void 0 && (_bite$newAudienceRati = bite.newAudienceRating) !== null && _bite$newAudienceRati !== void 0 && _bite$newAudienceRati.length)) {
-      // unrated
       ratingText.tooltipText = "Hasn't Been Reviewed";
       ratingText.text = "UNRATED";
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
       direction: "row",
       alignItems: "start",
       sx: {
@@ -189,34 +374,34 @@ const RatingInfo = _ref4 => {
         flexWrap: "wrap",
         marginTop: hovering ? "35px" : "0"
       }
-    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(rating => {
+    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map((rating, index) => {
       if (rating === "SAFE") {
-        // nothing
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: index
+        });
       } else if (rating === "NSFW") {
-        // NSFW
         ratingText.tooltipText = "Not Safe For Work";
         ratingText.text = "NSFW";
       } else if (rating === "EXPLICIT") {
-        // EXPLICIT
         ratingText.tooltipText = "Explicit";
         ratingText.text = "EXPLICIT";
       } else if (rating === "DMCA") {
-        // DMCA
         ratingText.tooltipText = "DMCA";
         ratingText.text = "DMCA";
       } else {
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: index
+        });
       }
 
-      return /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+      return /*#__PURE__*/React__default["default"].createElement(RatingInfoItem, {
+        key: index,
         tooltipText: ratingText.tooltipText,
         displayText: ratingText.text,
         hovering: hovering
       });
     }));
   } else if (bite !== null && bite !== void 0 && bite.audienceRating) {
-    // what you have now
     if ((bite === null || bite === void 0 ? void 0 : bite.audienceRating) === "UR") {
       ratingText.tooltipText = "Hasn't Been Reviewed";
       ratingText.text = "UNRATED";
@@ -228,18 +413,17 @@ const RatingInfo = _ref4 => {
       ratingText.text = null;
     }
   } else {
-    // unrated
     ratingText.tooltipText = "Hasn't Been Reviewed";
     ratingText.text = "UNRATED";
   }
 
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       flex: 0
     }
   });
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "start",
     sx: {
@@ -248,37 +432,37 @@ const RatingInfo = _ref4 => {
       flexWrap: "wrap",
       marginTop: hovering ? "35px" : "0"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+  }, /*#__PURE__*/React__default["default"].createElement(RatingInfoItem, {
     tooltipText: ratingText.tooltipText,
     displayText: ratingText.text,
     hovering: hovering
   }));
 };
 
-const ReportedWarning = _ref5 => {
+const ReportedWarning = _ref14 => {
   let {
     showWarning,
     blacklisted,
     saved,
     count,
     onClick
-  } = _ref5;
+  } = _ref14;
   const [show, setShow] = React.useState(showWarning);
   const [hovering, setHovering] = React.useState(false);
 
   const renderInfo = () => {
     if (blacklisted) {
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DoNotDisturbRoundedIcon__default['default'], {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DoNotDisturbIcon, {
         sx: {
           marginBottom: "20px"
         }
-      }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
         sx: {
           fontSize: "18px",
           fontWeight: "600",
           color: "white.override"
         }
-      }, "Blocked"), hovering && /*#__PURE__*/React__default['default'].createElement(index.Button, {
+      }, "Blocked"), hovering && /*#__PURE__*/React__default["default"].createElement(index.Button, {
         color: "whiteOverride",
         variant: "outlined",
         sx: {
@@ -290,25 +474,25 @@ const ReportedWarning = _ref5 => {
       }, "View"));
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(WarningRoundedIcon__default['default'], {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(WarningIcon, {
       sx: {
         marginBottom: "20px"
       }
-    }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
       sx: {
         fontSize: "18px",
         fontWeight: "600",
         color: "white.override",
         marginBottom: "10px"
       }
-    }, "Hold Up"), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    }, "Hold Up"), /*#__PURE__*/React__default["default"].createElement(index.Text, {
       sx: {
         fontSize: "14px",
         fontWeight: "400",
         color: "white.override",
         textAlign: "center"
       }
-    }, "This content has been", /*#__PURE__*/React__default['default'].createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React__default['default'].createElement(index.Button, {
+    }, "This content has been", /*#__PURE__*/React__default["default"].createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React__default["default"].createElement(index.Button, {
       color: "whiteOverride",
       variant: "outlined",
       sx: {
@@ -320,7 +504,7 @@ const ReportedWarning = _ref5 => {
     }, "View"));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "absolute",
       top: "0",
@@ -344,20 +528,20 @@ const ReportedWarning = _ref5 => {
     onMouseLeave: () => {
       setHovering(false);
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "absolute",
       top: "20px",
       left: "20px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+  }, /*#__PURE__*/React__default["default"].createElement(FavoriteIconWithCounter, {
     saved: saved,
     count: count,
     onClick: onClick
   })), renderInfo());
 };
 
-const BlerpTopRow = _ref6 => {
+const BlerpTopRow = _ref15 => {
   let {
     bite,
     hovering,
@@ -369,8 +553,8 @@ const BlerpTopRow = _ref6 => {
     renderAddContentButton,
     hoveringAddTo,
     setHovering
-  } = _ref6;
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  } = _ref15;
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     justifyContent: "space-between",
     width: "100%",
@@ -378,7 +562,7 @@ const BlerpTopRow = _ref6 => {
       position: "relative",
       minHeight: "20px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "start",
     justifyContent: "space-between",
@@ -391,10 +575,10 @@ const BlerpTopRow = _ref6 => {
       transition: "0.2s",
       pointerEvents: "none"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+  }, /*#__PURE__*/React__default["default"].createElement(RatingInfo, {
     hovering: hovering,
     bite: bite
-  }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+  }), /*#__PURE__*/React__default["default"].createElement(AddedToIcons, {
     item: bite,
     hovering: hovering || hoveringAddTo
   })), renderAddContentButton({
@@ -410,8 +594,8 @@ const BlerpTopRow = _ref6 => {
   }));
 };
 
-const NewBlerp = _ref7 => {
-  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+const NewBlerp = _ref16 => {
+  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _titleRef$current, _titleRef$current$get, _bite$blacklistContex2, _bite$image, _bite$image$original;
 
   let {
     Waveform,
@@ -439,7 +623,7 @@ const NewBlerp = _ref7 => {
     renderThreeDot,
     isOwner,
     defaultHovering = false
-  } = _ref7;
+  } = _ref16;
   const [previewed, setPreviewed] = React.useState(false);
   const [hovering, setHovering] = React.useState(defaultHovering);
   const [hoveringAddTo, setHoveringAddTo] = React.useState(defaultHovering);
@@ -450,48 +634,48 @@ const NewBlerp = _ref7 => {
 
   const renderPlayStateIcon = () => {
     if (playState === "played") {
-      return /*#__PURE__*/React__default['default'].createElement("svg", {
+      return /*#__PURE__*/React__default["default"].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: "84",
         height: "84",
         viewBox: "0 0 84 84",
         fill: "none"
-      }, /*#__PURE__*/React__default['default'].createElement("g", {
+      }, /*#__PURE__*/React__default["default"].createElement("g", {
         filter: "url(#filter0_d_381_451457)"
-      }, /*#__PURE__*/React__default['default'].createElement("path", {
+      }, /*#__PURE__*/React__default["default"].createElement("path", {
         d: "M49.4991 43.6611C50.8996 42.9059 50.8327 41.0394 49.5597 40.2386L38.0648 33.008C36.7329 32.1702 34.9999 33.1272 34.9999 34.7006C34.9999 37.0176 34.9999 39.9606 34.9999 42C34.9999 43.9641 34.9999 46.5476 34.9999 48.6074C34.9999 50.1492 36.6708 51.1099 38.0041 50.3357L49.4991 43.6611ZM42.9099 10.5C25.0949 10.01 10.4999 24.325 10.4999 42H4.23486C2.65986 42 1.88986 43.89 3.00986 44.975L12.7749 54.74C13.4749 55.44 14.5599 55.44 15.2599 54.74L25.0249 44.975C26.1099 43.89 25.3399 42 23.7649 42H17.4999C17.4999 28.35 28.6299 17.325 42.3499 17.5C55.3699 17.675 66.3249 28.63 66.4999 41.65C66.6749 55.335 55.6499 66.5 41.9999 66.5C37.6249 66.5 33.5299 65.31 29.9599 63.315C28.5949 62.545 26.9149 62.825 25.8299 63.945C24.2199 65.555 24.5349 68.32 26.5299 69.44C31.1149 71.995 36.3649 73.5 41.9999 73.5C59.6749 73.5 73.9899 58.905 73.4999 41.09C73.0449 24.675 59.3249 10.955 42.9099 10.5Z",
         fill: "white"
-      })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("filter", {
+      })), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("filter", {
         id: "filter0_d_381_451457",
         x: "-9.18718",
         y: "0.487792",
         width: "94.3661",
         height: "86.3455",
         filterUnits: "userSpaceOnUse",
-        "color-interpolation-filters": "sRGB"
-      }, /*#__PURE__*/React__default['default'].createElement("feFlood", {
-        "flood-opacity": "0",
+        colorInterpolationFilters: "sRGB"
+      }, /*#__PURE__*/React__default["default"].createElement("feFlood", {
+        floodOpacity: "0",
         result: "BackgroundImageFix"
-      }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+      }), /*#__PURE__*/React__default["default"].createElement("feColorMatrix", {
         in: "SourceAlpha",
         type: "matrix",
         values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
         result: "hardAlpha"
-      }), /*#__PURE__*/React__default['default'].createElement("feOffset", {
+      }), /*#__PURE__*/React__default["default"].createElement("feOffset", {
         dy: "1.66667"
-      }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+      }), /*#__PURE__*/React__default["default"].createElement("feGaussianBlur", {
         stdDeviation: "5.83333"
-      }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+      }), /*#__PURE__*/React__default["default"].createElement("feComposite", {
         in2: "hardAlpha",
         operator: "out"
-      }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+      }), /*#__PURE__*/React__default["default"].createElement("feColorMatrix", {
         type: "matrix",
         values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0"
-      }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+      }), /*#__PURE__*/React__default["default"].createElement("feBlend", {
         mode: "normal",
         in2: "BackgroundImageFix",
         result: "effect1_dropShadow_381_451457"
-      }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+      }), /*#__PURE__*/React__default["default"].createElement("feBlend", {
         mode: "normal",
         in: "SourceGraphic",
         in2: "effect1_dropShadow_381_451457",
@@ -500,14 +684,14 @@ const NewBlerp = _ref7 => {
     }
 
     if (playState === "playing") {
-      return /*#__PURE__*/React__default['default'].createElement(PauseRoundedIcon__default['default'], {
+      return /*#__PURE__*/React__default["default"].createElement(PauseIcon, {
         sx: {
           fontSize: "84px"
         }
       });
     }
 
-    return /*#__PURE__*/React__default['default'].createElement(PlayArrowRoundedIcon__default['default'], {
+    return /*#__PURE__*/React__default["default"].createElement(PlayArrowIcon, {
       sx: {
         fontSize: "84px"
       }
@@ -519,15 +703,26 @@ const NewBlerp = _ref7 => {
   };
 
   if (!bite) {
-    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
-  }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  } // Calculate if title should scroll on hover
+
+
+  const shouldScrollTitle = ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190; // Calculate premium container background
+
+  const getPremiumContainerBackground = () => {
+    if (addedToPlace) return "white";
+    if (bite !== null && bite !== void 0 && bite.isPremium) return "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)";
+    return "grey7.main";
+  };
 
   if (!isOwner && ((bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" || (bite === null || bite === void 0 ? void 0 : bite.redactionType) === "PRIVATE")) {
-    return /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
-      style: {
-        background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(Container, null, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+      sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
+        background: getPremiumContainerBackground()
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+      sx: getContainerStyles(false, false)
+    }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
       sx: {
         backgroundColor: "grey4.main",
         width: "100%",
@@ -540,24 +735,23 @@ const NewBlerp = _ref7 => {
         alignItems: "center",
         justifyContent: "center"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], null), /*#__PURE__*/React__default['default'].createElement(index.Text, null, "Private Blerp"))));
+    }, /*#__PURE__*/React__default["default"].createElement(LockIcon, null), /*#__PURE__*/React__default["default"].createElement(index.Text, null, "Private Blerp"))));
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PremiumContainer, {
-    style: {
-      background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(ReportedWarning, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
+      background: getPremiumContainerBackground()
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(ReportedWarning, {
     showWarning: showWarning,
     bite: bite,
     blacklisted: bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex2 = bite.blacklistContext) === null || _bite$blacklistContex2 === void 0 ? void 0 : _bite$blacklistContex2._id,
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
     onClick: onFavoriteClick
-  }), /*#__PURE__*/React__default['default'].createElement(Container, {
-    isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium,
-    addToOpen: addToOpen
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: getContainerStyles(addToOpen, bite === null || bite === void 0 ? void 0 : bite.isPremium)
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
       backgroundSize: "cover",
@@ -583,14 +777,14 @@ const NewBlerp = _ref7 => {
         return;
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     className: "blerp-hover",
     onClick: () => {
       play({
         bite
       });
-      setPreviewed(true); // play({ bite });
+      setPreviewed(true);
     },
     sx: {
       width: "100%",
@@ -605,7 +799,7 @@ const NewBlerp = _ref7 => {
       alignItems: "center",
       justifyContent: "center"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow, {
     bite: bite,
     onOptionClicked: onOptionClicked,
     hovering: hovering,
@@ -616,7 +810,7 @@ const NewBlerp = _ref7 => {
     setAddToOpen: setAddToOpen,
     hoveringAddTo: hoveringAddTo,
     setHovering: setHovering
-  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       transition: "0.3s",
       opacity: hovering && !hoveringAddTo || defaultHovering ? "1" : "0",
@@ -625,22 +819,22 @@ const NewBlerp = _ref7 => {
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
-  })), /*#__PURE__*/React__default['default'].createElement(HoverScrollText, {
-    hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
+  })), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: getHoverScrollTextStyles(shouldScrollTitle),
     onClick: onTitleClick
-  }, /*#__PURE__*/React__default['default'].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     ref: titleRef,
     sx: {
       fontSize: "16px",
       fontWeight: "400",
       lineHeight: "1"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "absolute",
       right: "0",
@@ -652,20 +846,20 @@ const NewBlerp = _ref7 => {
       justifyContent: "center",
       background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
     }
-  }, renderThreeDot())), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, renderThreeDot())), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
       width: "100%",
       justifyContent: "start",
-      postion: "relative"
+      position: "relative"
     }
-  }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
+  }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default["default"].createElement(Icons.DiamondIcon, {
     sx: {
       fontSize: "18px",
       marginRight: "5px"
     }
-  }), trending && /*#__PURE__*/React__default['default'].createElement("svg", {
+  }), trending && /*#__PURE__*/React__default["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "17",
     height: "17",
@@ -675,59 +869,59 @@ const NewBlerp = _ref7 => {
       marginRight: "5px",
       minWidth: "17px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement("g", {
+  }, /*#__PURE__*/React__default["default"].createElement("g", {
     filter: "url(#filter0_d_808_2472)"
-  }, /*#__PURE__*/React__default['default'].createElement("path", {
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
     fill: "#FFD400"
-  }), /*#__PURE__*/React__default['default'].createElement("path", {
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
     d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
     fill: "#FD295C",
-    "fill-opacity": "0.5"
-  })), /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("filter", {
+    fillOpacity: "0.5"
+  })), /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("filter", {
     id: "filter0_d_808_2472",
     x: "0.498536",
     y: "0.809083",
     width: "33.9966",
     height: "37.9418",
     filterUnits: "userSpaceOnUse",
-    "color-interpolation-filters": "sRGB"
-  }, /*#__PURE__*/React__default['default'].createElement("feFlood", {
-    "flood-opacity": "0",
+    colorInterpolationFilters: "sRGB"
+  }, /*#__PURE__*/React__default["default"].createElement("feFlood", {
+    floodOpacity: "0",
     result: "BackgroundImageFix"
-  }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+  }), /*#__PURE__*/React__default["default"].createElement("feColorMatrix", {
     in: "SourceAlpha",
     type: "matrix",
     values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
     result: "hardAlpha"
-  }), /*#__PURE__*/React__default['default'].createElement("feOffset", {
+  }), /*#__PURE__*/React__default["default"].createElement("feOffset", {
     dy: "3"
-  }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+  }), /*#__PURE__*/React__default["default"].createElement("feGaussianBlur", {
     stdDeviation: "5"
-  }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+  }), /*#__PURE__*/React__default["default"].createElement("feComposite", {
     in2: "hardAlpha",
     operator: "out"
-  }), /*#__PURE__*/React__default['default'].createElement("feColorMatrix", {
+  }), /*#__PURE__*/React__default["default"].createElement("feColorMatrix", {
     type: "matrix",
     values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.51 0"
-  }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+  }), /*#__PURE__*/React__default["default"].createElement("feBlend", {
     mode: "normal",
     in2: "BackgroundImageFix",
     result: "effect1_dropShadow_808_2472"
-  }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+  }), /*#__PURE__*/React__default["default"].createElement("feBlend", {
     mode: "normal",
     in: "SourceGraphic",
     in2: "effect1_dropShadow_808_2472",
     result: "shape"
-  })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+  })))), /*#__PURE__*/React__default["default"].createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+    count: (bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) || 0,
     onClick: onFavoriteClick
-  }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout.UsernameWithPopout, {
+  }), /*#__PURE__*/React__default["default"].createElement(UsernameWithPopout.UsernameWithPopout, {
     onUsernameClick: onUsernameClick,
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
     collapsed: false
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",
@@ -741,4 +935,4 @@ const NewBlerp = _ref7 => {
 exports.AddedToIcons = AddedToIcons;
 exports.FavoriteIconWithCounter = FavoriteIconWithCounter;
 exports.NewBlerp = NewBlerp;
-exports.default = NewBlerp;
+exports["default"] = NewBlerp;