@blerp/design 1.2.3 → 1.2.5

package/dist/index.cjs.js

@@ -12,6 +12,19 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var iconsMaterial = require('@mui/icons-material');
 var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
+var WaveSurfer = require('@blerp/wavesurfer');
+var CursorPlugin = require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js');
+var AddRoundedIcon = require('@mui/icons-material/AddRounded');
+var ArrowDropDownRoundedIcon = require('@mui/icons-material/ArrowDropDownRounded');
+var FavoriteIcon = require('@mui/icons-material/Favorite');
+var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
+var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
+var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
+var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
+require('@mui/icons-material/DoNotDisturbRounded');
+var _ = require('.');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
 var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
 var reactPalette = require('react-palette');
@@ -22,8 +35,6 @@ var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDow
 var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
 var _extends = require('@babel/runtime/helpers/extends');
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var AvatarEditor = require('react-avatar-editor');
 var Dropzone = require('react-dropzone');
 var InsertPhotoRoundedIcon = require('@mui/icons-material/InsertPhotoRounded');
@@ -31,7 +42,6 @@ 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');
 var InstagramIcon = require('@mui/icons-material/Instagram');
 var ModeEditRoundedIcon = require('@mui/icons-material/ModeEditRounded');
@@ -82,6 +92,17 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
 var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
+var WaveSurfer__default = /*#__PURE__*/_interopDefaultLegacy(WaveSurfer);
+var CursorPlugin__default = /*#__PURE__*/_interopDefaultLegacy(CursorPlugin);
+var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
+var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
+var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
+var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
+var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
+var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
+var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
 var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
@@ -91,15 +112,12 @@ var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(K
 var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
 var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
-var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 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);
 var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
 var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
@@ -118,11 +136,11 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
 var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
 var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
 
-var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
-var BlerpImage$2 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
+var _templateObject$i, _templateObject2$b, _templateObject3$8, _templateObject4$7;
+var BlerpImage$2 = styled__default['default'].div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
-var SaveContainer$2 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
+var SaveContainer$2 = styled__default['default'].div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
   return props.theme.colors.whiteOverride;
 }, function (props) {
   return props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam);
@@ -289,8 +307,8 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
   }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, null)))))));
 };
 
-var _templateObject$g;
-var ReactionButton$1 = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
+var _templateObject$h;
+var ReactionButton$1 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
   return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
 }, function (props) {
   return props.theme.colors.ibisRed;
@@ -433,8 +451,8 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
   }, "Organize")));
 };
 
-var _templateObject$f;
-var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
+var _templateObject$g;
+var LineClamp$2 = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
 
 var BlerpTitleRow = function BlerpTitleRow(_ref) {
   var bite = _ref.bite,
@@ -1557,6 +1575,1029 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes__default['default'].func.isRequired
 };
 
+var BlerpAudioContext = /*#__PURE__*/React.createContext({});
+var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
+  var children = _ref.children;
+  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      selectedBlerp = _useState2[0],
+      _setSelectedBlerp = _useState2[1];
+
+  var _useState3 = React.useState("stopped"),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      playState = _useState4[0],
+      setPlayState = _useState4[1];
+
+  var _useState5 = React.useState(0),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2);
+      _useState6[0];
+      var setStartTime = _useState6[1]; // const [audioCtx, setAudioCtx] = useState(null);
+  // Refs
+
+
+  var audioRef = React.useRef(new Audio());
+
+  var pause = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+      return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setPlayState("paused");
+              _context.next = 3;
+              return audioRef.current.pause();
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function pause() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var play = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3(_ref3) {
+      var _bite$audio, _bite$audio$mp;
+
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, gainNode, source;
+
+      return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              bite = _ref3.bite, _ref3$gain = _ref3.gain, gain = _ref3$gain === void 0 ? 1 : _ref3$gain, _ref3$startTime = _ref3.startTime, startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime, _ref3$forcePlay = _ref3.forcePlay, forcePlay = _ref3$forcePlay === void 0 ? false : _ref3$forcePlay;
+              console.log("astats", startTime, playState);
+              startTime = audioRef.current.currentTime > 0 ? audioRef.current.currentTime : startTime;
+              console.log("play", playState, startTime);
+
+              if (!((bite === null || bite === void 0 ? void 0 : bite._id) !== (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id) && playState === "playing")) {
+                _context3.next = 8;
+                break;
+              }
+
+              _context3.next = 7;
+              return audioRef.current.pause();
+
+            case 7:
+              if (!forcePlay) {
+                startTime = 0;
+              }
+
+            case 8:
+              if (!(playState === "playing" && (bite === null || bite === void 0 ? void 0 : bite._id) === (selectedBlerp === null || selectedBlerp === void 0 ? void 0 : selectedBlerp._id))) {
+                _context3.next = 11;
+                break;
+              }
+
+              pause();
+              return _context3.abrupt("return");
+
+            case 11:
+              audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url);
+              audioRef.current.crossOrigin = "anonymous";
+              console.log("current time", startTime);
+              audioRef.current.currentTime = startTime;
+              newGain = gain;
+              audioRef.current.onended = /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
+                return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
+                  while (1) {
+                    switch (_context2.prev = _context2.next) {
+                      case 0:
+                        console.log("ended");
+                        setPlayState("played");
+                        _context2.next = 4;
+                        return audioRef.current.pause();
+
+                      case 4:
+                        audioRef.current.currentTime = 0;
+
+                      case 5:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }
+                }, _callee2);
+              }));
+              gainNode = audioCtx.createGain(); // gainNode.gain.value = 2 // value between 0 and 2 https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API
+
+              gainNode.gain.setValueAtTime(newGain, 0);
+              source = audioCtx.createMediaElementSource(audioRef.current);
+              source.connect(gainNode);
+              gainNode.connect(audioCtx.destination);
+              _context3.next = 24;
+              return audioRef.current.play().then(function () {
+                console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
+                setPlayState("playing");
+              }).catch(function (e) {
+                setPlayState("stopped");
+              });
+
+            case 24:
+              // const playPromise = audioRef.current.play();
+              // if (playPromise !== undefined) {
+              //     playPromise
+              //         .then((_) => {
+              //             // Automatic playback started!
+              //             // Show playing UI.
+              //             setPlayState("playing");
+              //         })
+              //         .catch((error) => {
+              //             // Auto-play was prevented
+              //             // Show paused UI.
+              //             console.log("playing failed witihin", error);
+              //         });
+              // }
+              _setSelectedBlerp(bite);
+
+            case 25:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function play(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
+    value: {
+      selectedBlerp: selectedBlerp,
+      setSelectedBlerp: function setSelectedBlerp(_ref6) {
+        var bite = _ref6.bite;
+
+        _setSelectedBlerp(bite);
+      },
+      pause: pause,
+      play: play,
+      stop: function () {
+        var _stop = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee4() {
+          var _audioRef$current;
+
+          return _regeneratorRuntime__default['default'].wrap(function _callee4$(_context4) {
+            while (1) {
+              switch (_context4.prev = _context4.next) {
+                case 0:
+                  setPlayState("stopped");
+                  _context4.next = 3;
+                  return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
+
+                case 3:
+                  audioRef.current.currentTime = 0;
+
+                case 4:
+                case "end":
+                  return _context4.stop();
+              }
+            }
+          }, _callee4);
+        }));
+
+        function stop() {
+          return _stop.apply(this, arguments);
+        }
+
+        return stop;
+      }(),
+      getPlayState: function getPlayState(_ref7) {
+        var biteId = _ref7.biteId;
+
+        if (biteId === (selectedBlerp && selectedBlerp._id)) {
+          return playState;
+        }
+      },
+      setStartTime: setStartTime,
+      audioContext: audioCtx
+    }
+  }, children);
+};
+
+var _templateObject$f, _templateObject2$a;
+var PremiumContainer = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\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    margin: 20px;\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"])));
+var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\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"])), function (props) {
+  return props.theme.colors.grey7;
+});
+
+var AddContentDropdown = function AddContentDropdown(_ref) {
+  var _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [{
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: true
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }, {
+    name: "Place 1",
+    value: "PLACE_1",
+    added: false
+  }] : _ref$options,
+      active = _ref.active,
+      onOptionClicked = _ref.onOptionClicked;
+
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      anchor = _useState2[0],
+      setAnchor = _useState2[1];
+
+  var open = Boolean(anchor);
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(_.Button, {
+    color: "whiteOverride",
+    variant: "outlined",
+    onClick: function onClick(e) {
+      if (active) setAnchor(e.target);
+    },
+    sx: {
+      width: "100%",
+      height: "30px",
+      transition: "0.3s",
+      cursor: active ? "pointer" : "default",
+      opacity: active ? "1" : "0",
+      justifyContent: "space-between",
+      marginRight: "10px",
+      backgroundColor: "#2C323380",
+      "&:hover": {
+        backgroundColor: "grey3.main"
+      }
+    },
+    endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], null)
+  }, "Place"), /*#__PURE__*/React__default['default'].createElement(_.Popover, {
+    open: open,
+    anchorEl: anchor,
+    anchorOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    onClose: function onClose() {
+      setAnchor(null);
+    },
+    PaperProps: {
+      sx: {
+        width: anchor === null || anchor === void 0 ? void 0 : anchor.getBoundingClientRect().width,
+        backgroundColor: "#2C323380",
+        borderRadius: "18px",
+        padding: "35px 0 0 0",
+        boxSizing: "border-box",
+        maxHeight: "160px",
+        overflowY: "hidden"
+      }
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    sx: {
+      maxHeight: "120px",
+      overflowY: "scroll"
+    }
+  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+      direction: "row",
+      sx: {
+        boxSizing: "border-box",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        padding: "6px 5px 6px 10px",
+        cursor: "pointer",
+        transition: "0.3s",
+        "&:hover": {
+          backgroundColor: "#474D4F80"
+        },
+        "&:hover #added-to-content-icon": {
+          display: option !== null && option !== void 0 && option.added ? "none" : "block",
+          opacity: "1"
+        },
+        "&:hover #remove-from-content-icon": {
+          display: option !== null && option !== void 0 && option.added ? "block" : "none",
+          opacity: option !== null && option !== void 0 && option.added ? "1" : "0"
+        }
+      },
+      onClick: function onClick() {
+        if (onOptionClicked) onOptionClicked(option);
+        setAnchor(null);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      sx: {
+        fontSize: "14px",
+        fontWeight: "400"
+      }
+    }, option.name), /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
+      id: "added-to-content-icon",
+      sx: {
+        transition: "0.3s",
+        opacity: option.added ? "1" : "0"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CloseRounded, {
+      id: "remove-from-content-icon",
+      sx: {
+        transition: "0.3s",
+        display: "none",
+        opacity: "0"
+      }
+    }));
+  }))));
+};
+
+var AddContentButton = function AddContentButton(_ref2) {
+  var hovering = _ref2.hovering;
+      _ref2.openPremiumModal;
+      var onClick = _ref2.onClick;
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      active = _useState4[0],
+      setActive = _useState4[1];
+
+  React.useEffect(function () {
+    if (hovering === false) {
+      setActive(false);
+    }
+  }, [hovering]);
+  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    width: "100%",
+    sx: {
+      position: "absolute",
+      top: "0px",
+      left: "0px",
+      transition: "0.3s",
+      padding: "10px",
+      boxSizing: "border-box",
+      opacity: hovering ? "1" : "0"
+    }
+  }, active ? /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
+    active: active,
+    onOptionClicked: onClick
+  }) : /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.IconButton, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      backgroundColor: "white.override",
+      "&:hover": {
+        backgroundColor: "grey7.main"
+      }
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setActive(!active);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
+    sx: {
+      transition: "0.3s",
+      color: "notBlack.override",
+      transform: active && "rotate(45deg)"
+    }
+  })));
+};
+
+var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
+  var saved = _ref3.saved,
+      count = _ref3.count;
+      _ref3.onClick;
+  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    alignItems: "center"
+  }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
+    sx: {
+      fontSize: "16px",
+      marginRight: "6px",
+      transition: "0.3s",
+      cursor: "pointer",
+      "&:hover": {
+        opacity: 0.5
+      }
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
+    sx: {
+      fontSize: "16px",
+      marginRight: "6px",
+      transition: "0.3s",
+      cursor: "pointer",
+      "&:hover": {
+        opacity: 0.5
+      }
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "400"
+    }
+  }, count));
+};
+
+var AddedToIcons = function AddedToIcons(_ref4) {
+  var hovering = _ref4.hovering;
+  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    sx: {
+      transition: "0.3s",
+      opacity: hovering ? "1" : "0"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.ChannelPointsIcon, {
+    sx: {
+      fontSize: "15px"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.TwitchBitIcon, {
+    sx: {
+      fontSize: "15px"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.WalkonIcon, {
+    sx: {
+      fontSize: "15px"
+    }
+  }));
+};
+
+var RatingInfo = function RatingInfo(_ref5) {
+  var rating = _ref5.rating;
+
+  switch (rating) {
+    case "G":
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+
+    case "PG":
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+
+    case "PG13":
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+
+    case "R":
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+
+    case "NC17":
+      return /*#__PURE__*/React__default['default'].createElement(_.Tooltip, {
+        title: "Not Safe For Work"
+      }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+        sx: {
+          fontSize: "9px",
+          fontWeight: "600",
+          backgroundColor: "white.override",
+          borderRadius: "2px",
+          color: "notBlack.override",
+          padding: "1px 2px",
+          height: "14px",
+          width: "fit-content",
+          marginBottom: "12px"
+        }
+      }, "NSFW"));
+
+    case "UR":
+      return /*#__PURE__*/React__default['default'].createElement(_.Tooltip, {
+        title: "Hasn't Been Reviewed"
+      }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+        sx: {
+          fontSize: "9px",
+          fontWeight: "600",
+          backgroundColor: "white.override",
+          borderRadius: "2px",
+          color: "notBlack.override",
+          padding: "1px 2px",
+          height: "14px",
+          width: "fit-content",
+          marginBottom: "12px"
+        }
+      }, "UNRATED"));
+
+    default:
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+  }
+};
+
+var BlerpWaveform = function BlerpWaveform(_ref6) {
+  var _bite$audio, _bite$audio$mp;
+
+  var hovering = _ref6.hovering,
+      bite = _ref6.bite;
+  var id = bite === null || bite === void 0 ? void 0 : bite._id;
+  var audio = bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url;
+
+  var _useContext = React.useContext(BlerpAudioContext),
+      play = _useContext.play,
+      getPlayState = _useContext.getPlayState;
+      _useContext.selectedBlerp;
+
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      hasRendered = _useState6[0],
+      setHasRendered = _useState6[1];
+
+  var _useState7 = React.useState(null),
+      _useState8 = _slicedToArray__default['default'](_useState7, 2),
+      wavesurfer = _useState8[0],
+      setWavesurfer = _useState8[1];
+
+  React.useEffect(function () {
+    if (hovering && wavesurfer) {
+      wavesurfer.load(audio);
+    } else if (hovering && !wavesurfer && !hasRendered) {
+      if (!hasRendered && document.querySelector("#blerp-audio-button-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id))) {
+        if (document.querySelector("#blerp-waveform-".concat(id)).children.length === 0) {
+          console.log("Creating Wave");
+          var mWavesurfer = WaveSurfer__default['default'].create({
+            container: document.querySelector("#blerp-waveform-".concat(id)),
+            barWidth: 2,
+            barHeight: 1.5,
+            // the height of the wave
+            barGap: 2,
+            // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+            progressColor: "#ffffff",
+            hoverColor: "#ffffff99",
+            barRadius: 2,
+            height: 30,
+            hideScrollBar: true,
+            plugins: [CursorPlugin__default['default'].create({
+              showTime: false,
+              opacity: 0,
+              customShowTimeStyle: {
+                "background-color": "#000",
+                color: "#fff",
+                padding: "2px",
+                "font-size": "10px"
+              }
+            })]
+          });
+          mWavesurfer.on("error", function (e) {
+            console.warn(e);
+          });
+          mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.on("seek", function (prog) {
+            if (prog) {
+              console.log("SEEEEEEK", prog, bite);
+              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.setMute(true);
+              mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.play();
+              play({
+                bite: bite,
+                startTime: mWavesurfer === null || mWavesurfer === void 0 ? void 0 : mWavesurfer.getCurrentTime(),
+                forcePlay: true
+              });
+            }
+          }); // Load audio from URL
+          // mWavesurfer.load(audio);
+
+          setWavesurfer(mWavesurfer);
+          setHasRendered(true);
+        }
+      }
+    }
+  }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
+  React.useEffect(function () {
+    // if (wavesurfer && selectedBlerp?._id === bite?._id) {
+    //     wavesurfer?.on("seek", (prog) => {
+    //         if (prog) {
+    //             console.log("SEEEEEEK", prog, selectedBlerp);
+    //             play({
+    //                 bite: bite,
+    //                 startTime: wavesurfer?.getCurrentTime(),
+    //             });
+    //             wavesurfer?.setMute(true);
+    //             wavesurfer?.play();
+    //         }
+    //     });
+    // } else {
+    //     wavesurfer?.un("seek");
+    // }
+    if (getPlayState({
+      biteId: bite === null || bite === void 0 ? void 0 : bite._id
+    }) === "playing") {
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.play(); // Play button
+      // console.log(wavesurfer.play());
+    }
+
+    if (getPlayState({
+      biteId: bite === null || bite === void 0 ? void 0 : bite._id
+    }) === "paused") {
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.pause(); // Play button
+      // console.log(wavesurfer.play());
+    }
+
+    if (getPlayState({
+      biteId: bite === null || bite === void 0 ? void 0 : bite._id
+    }) === "stopped") {
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.setMute(true);
+      console.log("stop");
+      wavesurfer === null || wavesurfer === void 0 ? void 0 : wavesurfer.stop(); // Play button
+      // console.log(wavesurfer.play());
+    }
+  }, [bite, getPlayState, wavesurfer]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    id: "blerp-waveform-".concat(id),
+    style: {
+      height: "30px",
+      width: "100%",
+      transition: "0.3s",
+      opacity: hovering ? "1" : "0"
+    }
+  });
+};
+
+var ReportedWarning = function ReportedWarning(_ref8) {
+  var showWarning = _ref8.showWarning,
+      saved = _ref8.saved,
+      count = _ref8.count,
+      onClick = _ref8.onClick;
+
+  var _useState9 = React.useState(showWarning),
+      _useState10 = _slicedToArray__default['default'](_useState9, 2),
+      show = _useState10[0],
+      setShow = _useState10[1];
+
+  var _useState11 = React.useState(false),
+      _useState12 = _slicedToArray__default['default'](_useState11, 2),
+      hovering = _useState12[0],
+      setHovering = _useState12[1];
+
+  var renderInfo = function renderInfo() {
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(WarningRoundedIcon__default['default'], {
+      sx: {
+        marginBottom: "20px"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      sx: {
+        fontSize: "18px",
+        fontWeight: "600",
+        color: "white.override",
+        marginBottom: "10px"
+      }
+    }, "Hold Up"), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      sx: {
+        fontSize: "14px",
+        fontWeight: "400",
+        color: "white.override",
+        textAlign: "center"
+      }
+    }, "This Has Been ", /*#__PURE__*/React__default['default'].createElement("br", null), " Reported ", " Times"), hovering && /*#__PURE__*/React__default['default'].createElement(_.Button, {
+      color: "whiteOverride",
+      variant: "outlined",
+      sx: {
+        marginTop: "20px"
+      },
+      onClick: function onClick() {
+        setShow(false);
+      }
+    }, "View"));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    sx: {
+      position: "absolute",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      backgroundColor: "#00000040",
+      backdropFilter: "blur(8px)",
+      padding: "22px",
+      boxSizing: "border-box",
+      zIndex: "10",
+      alignItems: "center",
+      justifyContent: "center",
+      display: show ? "flex" : "none",
+      opacity: show ? "1" : "0",
+      transition: "0.3s"
+    },
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    sx: {
+      position: "absolute",
+      top: "20px",
+      left: "20px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+    saved: saved,
+    count: count,
+    onClick: onClick
+  })), renderInfo());
+};
+
+var NewBlerp$1 = function NewBlerp(_ref9) {
+  var _bite$image, _bite$image$original, _bite$ownerObject;
+
+  var bite = _ref9.bite;
+      _ref9.playState;
+
+  var _useContext2 = React.useContext(BlerpAudioContext),
+      play = _useContext2.play,
+      getPlayState = _useContext2.getPlayState;
+      _useContext2.stop;
+
+  var _useState13 = React.useState(false),
+      _useState14 = _slicedToArray__default['default'](_useState13, 2),
+      hovering = _useState14[0],
+      setHovering = _useState14[1];
+
+  var _useState15 = React.useState(false),
+      _useState16 = _slicedToArray__default['default'](_useState15, 2),
+      addedToPlace = _useState16[0],
+      setAddedToPlace = _useState16[1];
+
+  var formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  var saveCount = formatter.format(bite === null || bite === void 0 ? void 0 : bite.totalSaveCount);
+
+  var renderPlayStateIcon = function renderPlayStateIcon() {
+    var playState = getPlayState({
+      biteId: bite === null || bite === void 0 ? void 0 : bite._id
+    });
+
+    if (playState === "played") {
+      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", {
+        filter: "url(#filter0_d_381_451457)"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        d: "M49.4991 43.6611C50.7996 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", {
+        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",
+        result: "BackgroundImageFix"
+      }), /*#__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", {
+        dy: "1.66667"
+      }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+        stdDeviation: "5.83333"
+      }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+        in2: "hardAlpha",
+        operator: "out"
+      }), /*#__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", {
+        mode: "normal",
+        in2: "BackgroundImageFix",
+        result: "effect1_dropShadow_381_451457"
+      }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "effect1_dropShadow_381_451457",
+        result: "shape"
+      }))));
+    }
+
+    if (playState === "playing") {
+      return /*#__PURE__*/React__default['default'].createElement(PauseRoundedIcon__default['default'], {
+        sx: {
+          fontSize: "84px"
+        }
+      });
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement(PlayArrowRoundedIcon__default['default'], {
+      sx: {
+        fontSize: "84px"
+      }
+    });
+  };
+
+  var handleAddToPlace = function handleAddToPlace(place) {
+    setAddedToPlace(true);
+    setTimeout(function () {
+      setAddedToPlace(false);
+    }, 2000);
+  };
+
+  if (!bite) {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+  }
+
+  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(ReportedWarning, {
+    showWarning: false,
+    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
+    count: saveCount,
+    onClick: function onClick() {
+      return console.log("clicked save");
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
+    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",
+      backgroundRepeat: "no-repeat",
+      backgroundColor: "orange",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      padding: "6px",
+      boxSizing: "border-box",
+      position: "relative",
+      overflow: "hidden",
+      alignItems: "center",
+      justifyContent: "space-between",
+      cursor: "pointer"
+    },
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    className: "blerp-hover",
+    onClick: function onClick() {
+      console.log("play cliceckkes");
+      play({
+        bite: bite
+      });
+    },
+    sx: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: "0",
+      left: "0",
+      backgroundColor: "notBlack.override",
+      transition: "0.3s",
+      opacity: hovering ? "0.5" : "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    width: "100%",
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, null, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+    rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
+  }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+    hovering: hovering
+  })), /*#__PURE__*/React__default['default'].createElement("div", null)), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+    hovering: hovering,
+    onClick: function onClick(option) {
+      return handleAddToPlace();
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    sx: {
+      transition: "0.3s",
+      opacity: hovering ? "1" : "0",
+      pointerEvents: "none",
+      zIndex: "1"
+    }
+  }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
+    bite: bite,
+    hovering: hovering
+  })), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      fontSize: "16px",
+      fontWeight: "400",
+      maxWidth: "260px",
+      minWidth: "180px",
+      width: "100%",
+      whiteSpace: "nowrap",
+      overflowX: "hidden",
+      overflowY: "auto",
+      lineHeight: "1",
+      height: "23px",
+      margin: "10px 0 5px 0"
+    }
+  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+    direction: "row",
+    alignItems: "center",
+    sx: {
+      width: "100%",
+      justifyContent: "start"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "5 5 24 24",
+    fill: "none",
+    style: {
+      marginRight: "5px"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    filter: "url(#filter0_d_808_2472)"
+  }, /*#__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.7885 17.8926 20.7885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
+    fill: "#FFD400"
+  }), /*#__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.7885 17.8926 20.7885 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", {
+    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",
+    result: "BackgroundImageFix"
+  }), /*#__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", {
+    dy: "3"
+  }), /*#__PURE__*/React__default['default'].createElement("feGaussianBlur", {
+    stdDeviation: "5"
+  }), /*#__PURE__*/React__default['default'].createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /*#__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", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_808_2472"
+  }), /*#__PURE__*/React__default['default'].createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_808_2472",
+    result: "shape"
+  })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
+    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
+    count: saveCount
+  }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main",
+      maxWidth: "95px",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      margin: "0 10px"
+    }
+  }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    sx: {
+      fontWeight: "300",
+      fontSize: "12px",
+      color: "grey7.main"
+    }
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))));
+};
+
 var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
 var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
@@ -90288,6 +91329,8 @@ var Text = material.Typography;
 var Modal = material.Modal;
 var Popover = material.Popover;
 var Blerp = Blerp$1;
+var NewBlerp = NewBlerp$1;
+var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
 var IconButton = material.IconButton;
 var Toggle = Toggle$1;
 var Dropdown = Dropdown$1;
@@ -90547,6 +91590,7 @@ exports.Avatar = Avatar;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Blerp = Blerp;
+exports.BlerpAudioContextProvider = BlerpAudioContextProvider;
 exports.BlerpCardIcon = BlerpCardIcon;
 exports.BlerpCoinsIcon = BlerpCoinsIcon;
 exports.BlerpListView = BlerpListView;
@@ -90593,6 +91637,7 @@ exports.List = List;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.NewBlerp = NewBlerp;
 exports.NewCollectionModal = NewCollectionModal;
 exports.NewDiscordIcon = NewDiscordIcon;
 exports.NewDropdown = NewDropdown;