@blerp/design 1.2.6 → 1.2.8

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@blerp/wavesurfer'), require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('.'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@blerp/wavesurfer', '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js', '@mui/icons-material/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '.', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.WaveSurfer, global.CursorPlugin, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global._, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, WaveSurfer, CursorPlugin, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, _, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@blerp/wavesurfer'), require('@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@blerp/wavesurfer', '@blerp/wavesurfer/dist/plugin/wavesurfer.cursor.min.js', '@mui/icons-material/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, null, null, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, _asyncToGenerator, _regeneratorRuntime, wavesurfer, wavesurfer_cursor_min_js, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,8 +34,8 @@
     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);
@@ -43,8 +43,6 @@
     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);
@@ -1520,7 +1518,10 @@
     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),
@@ -1568,7 +1569,7 @@
         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) {
@@ -1627,13 +1628,14 @@
                       }
                     }, _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");
@@ -1641,7 +1643,7 @@
                     setPlayState("stopped");
                   });
 
-                case 24:
+                case 25:
                   // const playPromise = audioRef.current.play();
                   // if (playPromise !== undefined) {
                   //     playPromise
@@ -1658,7 +1660,7 @@
                   // }
                   _setSelectedBlerp(bite);
 
-                case 25:
+                case 26:
                 case "end":
                   return _context3.stop();
               }
@@ -1717,8 +1719,7 @@
               return playState;
             }
           },
-          setStartTime: setStartTime,
-          audioContext: audioCtx
+          setStartTime: setStartTime
         }
       }, children);
     };
@@ -1773,7 +1774,7 @@
           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) {
@@ -1793,7 +1794,7 @@
           }
         },
         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: {
@@ -1818,13 +1819,13 @@
             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",
@@ -1851,7 +1852,7 @@
             if (onOptionClicked) onOptionClicked(option);
             setAnchor(null);
           }
-        }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Text, {
           sx: {
             fontSize: "14px",
             fontWeight: "400"
@@ -1888,7 +1889,7 @@
           setActive(false);
         }
       }, [hovering]);
-      return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+      return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         width: "100%",
         sx: {
@@ -1907,7 +1908,7 @@
         style: {
           width: "100%"
         }
-      }), /*#__PURE__*/React__default['default'].createElement(_.IconButton, {
+      }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
         sx: {
           width: "30px",
           height: "30px",
@@ -1933,7 +1934,7 @@
       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'], {
@@ -1956,7 +1957,7 @@
             opacity: 0.5
           }
         }
-      }), /*#__PURE__*/React__default['default'].createElement(_.Text, {
+      }), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontSize: "12px",
           fontWeight: "400"
@@ -1966,21 +1967,21 @@
 
     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"
         }
@@ -2004,9 +2005,9 @@
           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",
@@ -2021,9 +2022,9 @@
           }, "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",
@@ -2066,57 +2067,98 @@
           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 import('@blerp/wavesurfer');
+
+                  case 8:
+                    _WaveSurfer = _context.sent.default;
+                    _context.next = 11;
+                    return import('@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) {
@@ -2170,11 +2212,11 @@
       });
     };
 
-    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),
@@ -2192,21 +2234,21 @@
           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: {
@@ -2218,7 +2260,7 @@
         }, "View"));
       };
 
-      return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+      return /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
           position: "absolute",
           top: "0",
@@ -2242,7 +2284,7 @@
         onMouseLeave: function onMouseLeave() {
           setHovering(false);
         }
-      }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
+      }, /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
           position: "absolute",
           top: "20px",
@@ -2255,11 +2297,11 @@
       })), 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,
@@ -2373,7 +2415,7 @@
         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, ")"),
@@ -2397,7 +2439,7 @@
         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");
@@ -2418,14 +2460,14 @@
           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
@@ -2434,7 +2476,7 @@
         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",
@@ -2444,7 +2486,7 @@
       }, 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",
@@ -2458,7 +2500,7 @@
           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: {
@@ -2521,7 +2563,7 @@
       })))), /*#__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",
@@ -2531,7 +2573,7 @@
           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",

package/package.json

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