@blerp/design 1.2.6 → 1.2.8

package/dist/index.cjs.js

@@ -12,8 +12,10 @@ 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 _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+require('@blerp/wavesurfer');
+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');
@@ -22,9 +24,6 @@ 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');
@@ -92,8 +91,8 @@ 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 _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
 var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
 var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
@@ -101,8 +100,6 @@ var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBor
 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);
@@ -1578,7 +1575,10 @@ Blerp$1.propTypes = {
 var BlerpAudioContext = /*#__PURE__*/React.createContext({});
 var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   var children = _ref.children;
-  var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+  if (typeof window === "undefined") {
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
+  }
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1626,7 +1626,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
     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;
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
 
       return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
         while (1) {
@@ -1685,13 +1685,14 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                   }
                 }, _callee2);
               }));
+              audioCtx = new (window.AudioContext || window.webkitAudioContext)();
               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;
+              _context3.next = 25;
               return audioRef.current.play().then(function () {
                 console.log("playing", bite === null || bite === void 0 ? void 0 : bite.title);
                 setPlayState("playing");
@@ -1699,7 +1700,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
                 setPlayState("stopped");
               });
 
-            case 24:
+            case 25:
               // const playPromise = audioRef.current.play();
               // if (playPromise !== undefined) {
               //     playPromise
@@ -1716,7 +1717,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               // }
               _setSelectedBlerp(bite);
 
-            case 25:
+            case 26:
             case "end":
               return _context3.stop();
           }
@@ -1775,8 +1776,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
           return playState;
         }
       },
-      setStartTime: setStartTime,
-      audioContext: audioCtx
+      setStartTime: setStartTime
     }
   }, children);
 };
@@ -1831,7 +1831,7 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
       setAnchor = _useState2[1];
 
   var open = Boolean(anchor);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(_.Button, {
+  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) {
@@ -1851,7 +1851,7 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
       }
     },
     endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], null)
-  }, "Place"), /*#__PURE__*/React__default['default'].createElement(_.Popover, {
+  }, "Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
     open: open,
     anchorEl: anchor,
     anchorOrigin: {
@@ -1876,13 +1876,13 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         overflowY: "hidden"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }, /*#__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, {
+    return /*#__PURE__*/React__default['default'].createElement(Stack, {
       direction: "row",
       sx: {
         boxSizing: "border-box",
@@ -1909,7 +1909,7 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         if (onOptionClicked) onOptionClicked(option);
         setAnchor(null);
       }
-    }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    }, /*#__PURE__*/React__default['default'].createElement(Text, {
       sx: {
         fontSize: "14px",
         fontWeight: "400"
@@ -1946,7 +1946,7 @@ var AddContentButton = function AddContentButton(_ref2) {
       setActive(false);
     }
   }, [hovering]);
-  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     width: "100%",
     sx: {
@@ -1965,7 +1965,7 @@ var AddContentButton = function AddContentButton(_ref2) {
     style: {
       width: "100%"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.IconButton, {
+  }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
     sx: {
       width: "30px",
       height: "30px",
@@ -1991,7 +1991,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
   var saved = _ref3.saved,
       count = _ref3.count;
       _ref3.onClick;
-  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center"
   }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
@@ -2014,7 +2014,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
         opacity: 0.5
       }
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "400"
@@ -2024,21 +2024,21 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
 
 var AddedToIcons = function AddedToIcons(_ref4) {
   var hovering = _ref4.hovering;
-  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
       transition: "0.3s",
       opacity: hovering ? "1" : "0"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(_.ChannelPointsIcon, {
+  }, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.TwitchBitIcon, {
+  }), /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
     sx: {
       fontSize: "15px"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.WalkonIcon, {
+  }), /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
     sx: {
       fontSize: "15px"
     }
@@ -2062,9 +2062,9 @@ var RatingInfo = function RatingInfo(_ref5) {
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
 
     case "NC17":
-      return /*#__PURE__*/React__default['default'].createElement(_.Tooltip, {
+      return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: "Not Safe For Work"
-      }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      }, /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "9px",
           fontWeight: "600",
@@ -2079,9 +2079,9 @@ var RatingInfo = function RatingInfo(_ref5) {
       }, "NSFW"));
 
     case "UR":
-      return /*#__PURE__*/React__default['default'].createElement(_.Tooltip, {
+      return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: "Hasn't Been Reviewed"
-      }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      }, /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "9px",
           fontWeight: "600",
@@ -2124,57 +2124,98 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
       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
-              });
+    var create = /*#__PURE__*/function () {
+      var _ref7 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+        var _WaveSurfer, _CursorPlugin, mWavesurfer;
+
+        return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                console.log("creating", hovering, wavesurfer, hasRendered);
+
+                if (!(hovering && wavesurfer)) {
+                  _context.next = 5;
+                  break;
+                }
+
+                wavesurfer.load(audio);
+                _context.next = 17;
+                break;
+
+              case 5:
+                if (!(hovering && !wavesurfer && !hasRendered && document.querySelector("#blerp-waveform-".concat(id)) && document.querySelector("#blerp-waveform-".concat(id)).children.length === 0)) {
+                  _context.next = 17;
+                  break;
+                }
+
+                _context.next = 8;
+                return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer')); });
+
+              case 8:
+                _WaveSurfer = _context.sent.default;
+                _context.next = 11;
+                return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@blerp/wavesurfer/src/plugin/cursor')); });
+
+              case 11:
+                _CursorPlugin = _context.sent.default;
+                mWavesurfer = _WaveSurfer.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.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);
+
+              case 17:
+              case "end":
+                return _context.stop();
             }
-          }); // Load audio from URL
-          // mWavesurfer.load(audio);
+          }
+        }, _callee);
+      }));
 
-          setWavesurfer(mWavesurfer);
-          setHasRendered(true);
-        }
-      }
-    }
+      return function create() {
+        return _ref7.apply(this, arguments);
+      };
+    }();
+
+    create();
   }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
   React.useEffect(function () {
     // if (wavesurfer && selectedBlerp?._id === bite?._id) {
@@ -2228,11 +2269,11 @@ var BlerpWaveform = function BlerpWaveform(_ref6) {
   });
 };
 
-var ReportedWarning = function ReportedWarning(_ref8) {
-  var showWarning = _ref8.showWarning,
-      saved = _ref8.saved,
-      count = _ref8.count,
-      onClick = _ref8.onClick;
+var ReportedWarning = function ReportedWarning(_ref9) {
+  var showWarning = _ref9.showWarning,
+      saved = _ref9.saved,
+      count = _ref9.count,
+      onClick = _ref9.onClick;
 
   var _useState9 = React.useState(showWarning),
       _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2250,21 +2291,21 @@ var ReportedWarning = function ReportedWarning(_ref8) {
       sx: {
         marginBottom: "20px"
       }
-    }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    }), /*#__PURE__*/React__default['default'].createElement(Text, {
       sx: {
         fontSize: "18px",
         fontWeight: "600",
         color: "white.override",
         marginBottom: "10px"
       }
-    }, "Hold Up"), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+    }, "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, {
+    }, "This Has Been ", /*#__PURE__*/React__default['default'].createElement("br", null), " Reported ", " Times"), hovering && /*#__PURE__*/React__default['default'].createElement(Button, {
       color: "whiteOverride",
       variant: "outlined",
       sx: {
@@ -2276,7 +2317,7 @@ var ReportedWarning = function ReportedWarning(_ref8) {
     }, "View"));
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       position: "absolute",
       top: "0",
@@ -2300,7 +2341,7 @@ var ReportedWarning = function ReportedWarning(_ref8) {
     onMouseLeave: function onMouseLeave() {
       setHovering(false);
     }
-  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       position: "absolute",
       top: "20px",
@@ -2313,11 +2354,11 @@ var ReportedWarning = function ReportedWarning(_ref8) {
   })), renderInfo());
 };
 
-var NewBlerp$1 = function NewBlerp(_ref9) {
+var NewBlerp$1 = function NewBlerp(_ref10) {
   var _bite$image, _bite$image$original, _bite$ownerObject;
 
-  var bite = _ref9.bite;
-      _ref9.playState;
+  var bite = _ref10.bite;
+      _ref10.playState;
 
   var _useContext2 = React.useContext(BlerpAudioContext),
       play = _useContext2.play,
@@ -2431,7 +2472,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
     onClick: function onClick() {
       return console.log("clicked save");
     }
-  }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }), /*#__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, ")"),
@@ -2455,7 +2496,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
     onMouseLeave: function onMouseLeave() {
       setHovering(false);
     }
-  }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
     className: "blerp-hover",
     onClick: function onClick() {
       console.log("play cliceckkes");
@@ -2476,14 +2517,14 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
       alignItems: "center",
       justifyContent: "center"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }), /*#__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, {
+  }, /*#__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
@@ -2492,7 +2533,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
     onClick: function onClick(option) {
       return handleAddToPlace();
     }
-  }), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       transition: "0.3s",
       opacity: hovering ? "1" : "0",
@@ -2502,7 +2543,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
   }, renderPlayStateIcon()), /*#__PURE__*/React__default['default'].createElement(BlerpWaveform, {
     bite: bite,
     hovering: hovering
-  })), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+  })), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontSize: "16px",
       fontWeight: "400",
@@ -2516,7 +2557,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
       height: "23px",
       margin: "10px 0 5px 0"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -2579,7 +2620,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
   })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: saveCount
-  }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",
@@ -2589,7 +2630,7 @@ var NewBlerp$1 = function NewBlerp(_ref9) {
       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, {
+  }, 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",