@blerp/design 1.3.17 → 1.4.1

package/dist/esm/NewBlerp.js

@@ -1,29 +1,229 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
-import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import LayersRoundedIcon from '@mui/icons-material/LayersRounded';
-import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
-import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useRef } from 'react';
-import styled from 'styled-components';
 import { UsernameWithPopout } from './UsernameWithPopout.js';
-import { Stack, Text, Tooltip, Button } from './index.js';
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import { Box, Stack, Text, Tooltip, Button } from './index.js';
 import { DiamondIcon, ChannelPointsIcon, TwitchBitIcon, WalkonIcon } from './Icons/Icons.js';
 
-var _templateObject, _templateObject2, _templateObject3;
-const PremiumContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(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.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "17",
+    height: "17",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "84",
+    height: "84",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z",
+    fill: "currentColor"
+  }));
+};
+
+const PlayArrowIcon = _ref7 => {
+  let {
+    sx
+  } = _ref7;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "84",
+    height: "84",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 5v14l11-7z",
+    fill: "currentColor"
+  }));
+};
+
+const WarningIcon = _ref8 => {
+  let {
+    sx
+  } = _ref8;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: sx
+  }, /*#__PURE__*/React.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"
   });
@@ -39,9 +239,7 @@ const FavoriteIconWithCounter = _ref => {
       transition: "0.3s",
       cursor: "pointer",
       opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
+      color: "#ffffff"
     }
   }) : /*#__PURE__*/React.createElement(FavoriteBorderIcon, {
     sx: {
@@ -50,9 +248,7 @@ const FavoriteIconWithCounter = _ref => {
       transition: "0.3s",
       cursor: "pointer",
       opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
+      color: "#ffffff"
     }
   }), /*#__PURE__*/React.createElement(Text, {
     sx: {
@@ -61,14 +257,14 @@ const FavoriteIconWithCounter = _ref => {
     }
   }, 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;
+  } = _ref11;
   return /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     sx: {
@@ -81,7 +277,7 @@ const AddedToIcons = _ref2 => {
     }
   }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Added to Universal Extension"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExtensionRoundedIcon, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExtensionIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
@@ -109,7 +305,7 @@ const AddedToIcons = _ref2 => {
     }
   }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Added to Group"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LayersRoundedIcon, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LayersIcon, {
     sx: {
       fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
@@ -117,12 +313,12 @@ const AddedToIcons = _ref2 => {
   }))));
 };
 
-const RatingInfoItem = _ref3 => {
+const RatingInfoItem = _ref12 => {
   let {
     hovering,
     tooltipText,
     displayText
-  } = _ref3;
+  } = _ref12;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipText
   }, /*#__PURE__*/React.createElement(Text, {
@@ -142,11 +338,11 @@ const RatingInfoItem = _ref3 => {
   }, displayText));
 };
 
-const RatingInfo = _ref4 => {
+const RatingInfo = _ref13 => {
   let {
     bite,
     hovering
-  } = _ref4;
+  } = _ref13;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -156,7 +352,6 @@ 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";
     }
@@ -170,34 +365,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.createElement(React.Fragment, null);
+        return /*#__PURE__*/React.createElement(React.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.createElement(React.Fragment, null);
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        });
       }
 
       return /*#__PURE__*/React.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";
@@ -209,7 +404,6 @@ const RatingInfo = _ref4 => {
       ratingText.text = null;
     }
   } else {
-    // unrated
     ratingText.tooltipText = "Hasn't Been Reviewed";
     ratingText.text = "UNRATED";
   }
@@ -236,20 +430,20 @@ const RatingInfo = _ref4 => {
   }));
 };
 
-const ReportedWarning = _ref5 => {
+const ReportedWarning = _ref14 => {
   let {
     showWarning,
     blacklisted,
     saved,
     count,
     onClick
-  } = _ref5;
+  } = _ref14;
   const [show, setShow] = useState(showWarning);
   const [hovering, setHovering] = useState(false);
 
   const renderInfo = () => {
     if (blacklisted) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DoNotDisturbRoundedIcon, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DoNotDisturbIcon, {
         sx: {
           marginBottom: "20px"
         }
@@ -271,7 +465,7 @@ const ReportedWarning = _ref5 => {
       }, "View"));
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningRoundedIcon, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningIcon, {
       sx: {
         marginBottom: "20px"
       }
@@ -338,7 +532,7 @@ const ReportedWarning = _ref5 => {
   })), renderInfo());
 };
 
-const BlerpTopRow = _ref6 => {
+const BlerpTopRow = _ref15 => {
   let {
     bite,
     hovering,
@@ -350,7 +544,7 @@ const BlerpTopRow = _ref6 => {
     renderAddContentButton,
     hoveringAddTo,
     setHovering
-  } = _ref6;
+  } = _ref15;
   return /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justifyContent: "space-between",
@@ -391,8 +585,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,
@@ -420,7 +614,7 @@ const NewBlerp = _ref7 => {
     renderThreeDot,
     isOwner,
     defaultHovering = false
-  } = _ref7;
+  } = _ref16;
   const [previewed, setPreviewed] = useState(false);
   const [hovering, setHovering] = useState(defaultHovering);
   const [hoveringAddTo, setHoveringAddTo] = useState(defaultHovering);
@@ -449,9 +643,9 @@ const NewBlerp = _ref7 => {
         width: "94.3661",
         height: "86.3455",
         filterUnits: "userSpaceOnUse",
-        "color-interpolation-filters": "sRGB"
+        colorInterpolationFilters: "sRGB"
       }, /*#__PURE__*/React.createElement("feFlood", {
-        "flood-opacity": "0",
+        floodOpacity: "0",
         result: "BackgroundImageFix"
       }), /*#__PURE__*/React.createElement("feColorMatrix", {
         in: "SourceAlpha",
@@ -481,14 +675,14 @@ const NewBlerp = _ref7 => {
     }
 
     if (playState === "playing") {
-      return /*#__PURE__*/React.createElement(PauseRoundedIcon, {
+      return /*#__PURE__*/React.createElement(PauseIcon, {
         sx: {
           fontSize: "84px"
         }
       });
     }
 
-    return /*#__PURE__*/React.createElement(PlayArrowRoundedIcon, {
+    return /*#__PURE__*/React.createElement(PlayArrowIcon, {
       sx: {
         fontSize: "84px"
       }
@@ -501,14 +695,25 @@ const NewBlerp = _ref7 => {
 
   if (!bite) {
     return /*#__PURE__*/React.createElement(React.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.createElement(PremiumContainer, {
-      style: {
-        background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-      }
-    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
+    return /*#__PURE__*/React.createElement(Box, {
+      sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
+        background: getPremiumContainerBackground()
+      })
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: getContainerStyles(false, false)
+    }, /*#__PURE__*/React.createElement(Stack, {
       sx: {
         backgroundColor: "grey4.main",
         width: "100%",
@@ -521,13 +726,13 @@ const NewBlerp = _ref7 => {
         alignItems: "center",
         justifyContent: "center"
       }
-    }, /*#__PURE__*/React.createElement(LockRoundedIcon, null), /*#__PURE__*/React.createElement(Text, null, "Private Blerp"))));
+    }, /*#__PURE__*/React.createElement(LockIcon, null), /*#__PURE__*/React.createElement(Text, null, "Private Blerp"))));
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PremiumContainer, {
-    style: {
-      background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-    }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+    sx: _objectSpread(_objectSpread({}, premiumContainerStyles), {}, {
+      background: getPremiumContainerBackground()
+    })
   }, /*#__PURE__*/React.createElement(ReportedWarning, {
     showWarning: showWarning,
     bite: bite,
@@ -535,9 +740,8 @@ const NewBlerp = _ref7 => {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
     onClick: onFavoriteClick
-  }), /*#__PURE__*/React.createElement(Container, {
-    isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium,
-    addToOpen: addToOpen
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: getContainerStyles(addToOpen, bite === null || bite === void 0 ? void 0 : bite.isPremium)
   }, /*#__PURE__*/React.createElement(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, ")"),
@@ -571,7 +775,7 @@ const NewBlerp = _ref7 => {
       play({
         bite
       });
-      setPreviewed(true); // play({ bite });
+      setPreviewed(true);
     },
     sx: {
       width: "100%",
@@ -606,8 +810,8 @@ const NewBlerp = _ref7 => {
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
-  })), /*#__PURE__*/React.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.createElement(Box, {
+    sx: getHoverScrollTextStyles(shouldScrollTitle),
     onClick: onTitleClick
   }, /*#__PURE__*/React.createElement("a", {
     href: "/soundbites/".concat(bite._id),
@@ -639,7 +843,7 @@ const NewBlerp = _ref7 => {
     sx: {
       width: "100%",
       justifyContent: "start",
-      postion: "relative"
+      position: "relative"
     }
   }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React.createElement(DiamondIcon, {
     sx: {
@@ -664,7 +868,7 @@ const NewBlerp = _ref7 => {
   }), /*#__PURE__*/React.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"
+    fillOpacity: "0.5"
   })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
     id: "filter0_d_808_2472",
     x: "0.498536",
@@ -672,9 +876,9 @@ const NewBlerp = _ref7 => {
     width: "33.9966",
     height: "37.9418",
     filterUnits: "userSpaceOnUse",
-    "color-interpolation-filters": "sRGB"
+    colorInterpolationFilters: "sRGB"
   }, /*#__PURE__*/React.createElement("feFlood", {
-    "flood-opacity": "0",
+    floodOpacity: "0",
     result: "BackgroundImageFix"
   }), /*#__PURE__*/React.createElement("feColorMatrix", {
     in: "SourceAlpha",
@@ -702,7 +906,7 @@ const NewBlerp = _ref7 => {
     result: "shape"
   })))), /*#__PURE__*/React.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.createElement(UsernameWithPopout, {
     onUsernameClick: onUsernameClick,
@@ -719,5 +923,4 @@ const NewBlerp = _ref7 => {
   }, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
 };
 
-export default NewBlerp;
-export { AddedToIcons, FavoriteIconWithCounter, NewBlerp };
+export { AddedToIcons, FavoriteIconWithCounter, NewBlerp, NewBlerp as default };