@blerp/design 1.2.72 → 1.2.74

package/dist/index.umd.js

@@ -1,12 +1,11 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), 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('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/ExtensionRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/LayersRounded'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@mui/icons-material/KeyboardArrowRightRounded'), 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('@mui/icons-material/BookmarkRounded'), require('react-lottie'), require('@mui/icons-material/AddRounded'), 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('@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', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/ExtensionRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/LayersRounded', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@mui/icons-material/KeyboardArrowRightRounded', '@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', '@mui/icons-material/BookmarkRounded', 'react-lottie', '@mui/icons-material/AddRounded', '@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', '@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.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.DoNotDisturbRoundedIcon, global.ExtensionRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.LayersRoundedIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.BookmarkRounded, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, DoNotDisturbRoundedIcon, ExtensionRoundedIcon, FavoriteIcon, FavoriteBorderIcon, LayersRoundedIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, BookmarkRounded, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('core-js/modules/web.dom-collections.iterator.js'), 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('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/ExtensionRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/LayersRounded'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('core-js/modules/web.url.js'), require('core-js/modules/web.url-search-params.js'), 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('@mui/icons-material/BookmarkRounded'), require('react-lottie'), require('@mui/icons-material/AddRounded'), 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('@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', 'core-js/modules/web.dom-collections.iterator.js', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/ExtensionRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/LayersRounded', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@mui/icons-material/KeyboardArrowRightRounded', '@mui/icons-material/KeyboardArrowDownRounded', 'core-js/modules/web.url.js', 'core-js/modules/web.url-search-params.js', '@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', '@mui/icons-material/BookmarkRounded', 'react-lottie', '@mui/icons-material/AddRounded', '@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', '@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, null, null, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.DoNotDisturbRoundedIcon, global.ExtensionRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.LayersRoundedIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, null, null, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.BookmarkRounded, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, web_domCollections_iterator_js, propTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, DoNotDisturbRoundedIcon, ExtensionRoundedIcon, FavoriteIcon, FavoriteBorderIcon, LayersRoundedIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, web_url_js, web_urlSearchParams_js, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, BookmarkRounded, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, 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 }; }
 
-    var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
     var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
@@ -58,22 +57,23 @@
     const BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer$2);
     const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n\n    &:hover p {\n        display: block;\n    }\n    &:hover svg {\n        display: none;\n    }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer$2);
 
-    const BlerpImageRow = ({
-      bite,
-      playingState,
-      primaryActionButton,
-      getUserReactions,
-      handleClickPlay,
-      handleClickSave,
-      isPremium,
-      isLocked,
-      isOwner,
-      handleClickLock,
-      setOpenSave,
-      sizeParams
-    }) => {
+    const BlerpImageRow = _ref => {
       var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
 
+      let {
+        bite,
+        playingState,
+        primaryActionButton,
+        getUserReactions,
+        handleClickPlay,
+        handleClickSave,
+        isPremium,
+        isLocked,
+        isOwner,
+        handleClickLock,
+        setOpenSave,
+        sizeParams
+      } = _ref;
       const [actionButtonHovered, setActionButtonHovered] = React.useState(false);
 
       if (bite.visibility === "PRIVATE" && !isOwner) {
@@ -201,18 +201,19 @@
     var _templateObject$h;
     const 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"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override, props => props.theme.colors.ibisRed);
 
-    const BlerpSavePopup = ({
-      openSave,
-      setOpenSave,
-      sizeParams,
-      unsaveButton,
-      handleClickReaction,
-      bite,
-      handleClickUnsave,
-      handleClickOrganize,
-      organizeButton,
-      anchorRef
-    }) => {
+    const BlerpSavePopup = _ref => {
+      let {
+        openSave,
+        setOpenSave,
+        sizeParams,
+        unsaveButton,
+        handleClickReaction,
+        bite,
+        handleClickUnsave,
+        handleClickOrganize,
+        organizeButton,
+        anchorRef
+      } = _ref;
       return /*#__PURE__*/React__default['default'].createElement(Popover, {
         open: openSave,
         onClose: () => setOpenSave(false),
@@ -338,16 +339,18 @@
     var _templateObject$g;
     const 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"])));
 
-    const BlerpTitleRow = ({
-      bite,
-      title,
-      isLinkTitle,
-      handleClickTitle,
-      isPremium,
-      isLocked,
-      isOwner,
-      sizeParams
-    }) => {
+    const BlerpTitleRow = _ref => {
+      let {
+        bite,
+        title,
+        isLinkTitle,
+        handleClickTitle,
+        isPremium,
+        isLocked,
+        isOwner,
+        sizeParams
+      } = _ref;
+
       if (bite.visibility === "PRIVATE" && !isOwner) {
         return /*#__PURE__*/React__default['default'].createElement(Stack, {
           direction: "row",
@@ -435,9 +438,10 @@
       }, title || bite.title)));
     };
 
-    const PresentGiftIcon = ({
-      sx
-    }) => {
+    const PresentGiftIcon = _ref => {
+      let {
+        sx
+      } = _ref;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -451,9 +455,10 @@
         d: "M9.52851 4.05582C10.2735 4.58225 10.9836 5.27026 11.5238 5.98594C12.064 5.27026 12.7741 4.58225 13.5191 4.05582C14.1172 3.6332 14.7839 3.28121 15.4574 3.11073C16.132 2.93995 16.8833 2.93649 17.5556 3.31973C18.7454 3.99788 19.0667 5.56851 18.5299 6.68922C18.4689 6.81663 18.3996 6.93594 18.3232 7.04762H20.4286C21.3227 7.04762 22.0476 7.77249 22.0476 8.66667V11.0952C22.0476 11.9894 21.3227 12.7143 20.4286 12.7143V18.381C20.4286 19.2751 19.7037 20 18.8095 20H4.2381C3.34392 20 2.61905 19.2751 2.61905 18.381V12.7143C1.72487 12.7143 1 11.9894 1 11.0952V8.66667C1 7.77249 1.72487 7.04762 2.61905 7.04762H4.72438C4.64803 6.93594 4.57873 6.81663 4.5177 6.68922C3.98094 5.56851 4.30225 3.99788 5.49196 3.31973C6.16427 2.93649 6.91562 2.93995 7.59023 3.11073C8.26369 3.28121 8.9304 3.6332 9.52851 4.05582ZM14.7551 7.01891C14.5252 7.03815 14.2932 7.04702 14.0642 7.04762H14.0144C13.5892 7.04651 13.1756 7.01726 12.8071 6.97327C13.2274 6.41385 13.8102 5.8326 14.4534 5.37808C14.9483 5.02841 15.4334 4.78692 15.8547 4.68027C16.2749 4.5739 16.5613 4.61654 16.7539 4.72631C17.0981 4.92251 17.2956 5.51816 17.0697 5.98985C16.9417 6.25716 16.6928 6.48772 16.2844 6.67092C15.8712 6.85625 15.3425 6.96974 14.7551 7.01891ZM10.2405 6.97327C9.87199 7.01726 9.45845 7.04651 9.03317 7.04762H8.98341C8.75442 7.04702 8.52241 7.03815 8.29254 7.01891C7.70512 6.96974 7.17643 6.85625 6.76322 6.67092C6.35477 6.48772 6.10594 6.25716 5.97791 5.98985C5.75199 5.51816 5.94952 4.92251 6.29373 4.72631C6.48631 4.61654 6.77273 4.5739 7.19291 4.68027C7.61423 4.78692 8.09933 5.02841 8.5942 5.37808C9.23744 5.8326 9.82024 6.41385 10.2405 6.97327ZM12.3333 12.7143H18.8095L18.8095 18.381H12.3333V12.7143ZM12.3333 11.0952H18.8095L18.8119 11.0952H20.4286V8.66667L12.3333 8.66667V11.0952ZM10.7143 8.66667V11.0952H4.2381H4.23734H2.61905L2.61905 8.66667L10.7143 8.66667ZM10.7143 12.7143V18.381H4.2381V12.7143H10.7143Z"
       })));
     };
-    const SparkleGiftIcon = ({
-      sx
-    }) => {
+    const SparkleGiftIcon = _ref2 => {
+      let {
+        sx
+      } = _ref2;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -467,9 +472,10 @@
         d: "M19.6022 6.79143L18.904 6.52886C18.2561 6.28566 17.7472 5.76932 17.5075 5.11199L17.2487 4.40356C17.1601 4.16213 16.9326 4 16.679 4C16.4254 4 16.1979 4.16037 16.1093 4.40356L15.8505 5.11199C15.6108 5.76932 15.1018 6.28566 14.454 6.52886L13.7557 6.79143C13.5178 6.88131 13.358 7.11217 13.358 7.36946C13.358 7.62675 13.516 7.85761 13.7557 7.94748L14.454 8.21006C15.1018 8.45325 15.6108 8.9696 15.8505 9.62693L16.1093 10.3354C16.1979 10.5768 16.4254 10.7389 16.679 10.7389C16.9326 10.7389 17.1601 10.5785 17.2487 10.3354L17.5075 9.62693C17.7472 8.9696 18.2561 8.45325 18.904 8.21006L19.6022 7.94748C19.8402 7.85761 20 7.62675 20 7.36946C20 7.11217 19.8419 6.88131 19.6022 6.79143Z"
       })));
     };
-    const PlayOutlineIcon = ({
-      sx
-    }) => {
+    const PlayOutlineIcon = _ref3 => {
+      let {
+        sx
+      } = _ref3;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -482,9 +488,10 @@
         d: "M3.9,1C3.3,1,2.6,1.4,2.6,2.2v11.6c0,1,1.3,1.6,2,1l8.1-5.6c0.8-0.5,0.8-1.8,0-2.3L4.7,1.2     C4.5,1,4.2,1,3.9,1 M3.7-1L3.7-1c0.6,0,1.2,0.2,1.7,0.5l0,0L14,5.6C14.7,6.1,15.2,7,15.2,8c0,1-0.5,1.9-1.2,2.5l-8.6,6     c-0.5,0.3-1,0.5-1.6,0.5c-0.7,0-1.4-0.3-2-0.7c-0.6-0.5-1-1.3-1-2.1V1.8c0-0.9,0.3-1.6,1-2.1C2.3-0.8,3-1,3.7-1z"
       }))));
     };
-    const PlaySolidIcon = ({
-      sx
-    }) => {
+    const PlaySolidIcon = _ref4 => {
+      let {
+        sx
+      } = _ref4;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -496,9 +503,10 @@
         d: "M7.2,4.3c-0.2,0-0.3,0-0.5,0.1C6.4,4.6,6.3,4.8,6.3,5.1v13.8c0,0.4,0.3,0.6,0.4,0.7c0.3,0.2,0.7,0.2,0.9,0    l9.6-6.7c0.2-0.2,0.4-0.4,0.4-0.7c0-0.3,0-0.6-0.2-0.8c-0.1-0.1-0.1-0.1-0.2-0.2L7.7,4.5C7.6,4.4,7.4,4.3,7.2,4.3z"
       })));
     };
-    const TwitchBitIcon = ({
-      sx
-    }) => {
+    const TwitchBitIcon = _ref5 => {
+      let {
+        sx
+      } = _ref5;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -511,9 +519,10 @@
         d: "M12,21c-0.2,0-0.3-0.1-0.5-0.2l-6.8-5.4c-0.3-0.2-0.4-0.6-0.2-1l6.8-11.2C11.6,3.1,11.8,3,12,3c0,0,0,0,0,0    c0.3,0,0.5,0.1,0.6,0.4l6.7,11.2c0.2,0.3,0.1,0.7-0.2,1l-6.7,5.4C12.4,20.9,12.2,21,12,21z M6.2,14.7l5.8,4.6l5.7-4.6L12,5.2    L6.2,14.7z"
       }))));
     };
-    const BlerpCoinsIcon = ({
-      sx
-    }) => {
+    const BlerpCoinsIcon = _ref6 => {
+      let {
+        sx
+      } = _ref6;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -529,9 +538,10 @@
         d: "M11,21c-4.4,0-8-3.6-8-8c0-2.6,1.3-5,3.4-6.5c-2.2,3.2-1.8,7.4,0.9,10.2    c2.7,2.7,7,3.1,10.2,0.9C16,19.7,13.6,21,11,21z"
       })));
     };
-    const ShortcutIcon = ({
-      sx
-    }) => {
+    const ShortcutIcon = _ref7 => {
+      let {
+        sx
+      } = _ref7;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -548,9 +558,10 @@
         d: "M13.7,17H6.3C4.5,17,3,15.5,3,13.7V6.3C3,4.5,4.5,3,6.3,3h7.4C15.5,3,17,4.5,17,6.3    c0,0,0,0,0,0v7.4C17,15.5,15.5,17,13.7,17z M7.8,8.3c-0.1,0-0.2,0-0.3,0.1c-0.6,0.6-0.9,1.5-0.9,2.3c0,1.8,1.5,3.3,3.3,3.3    s3.3-1.5,3.3-3.3c0-1.3-0.7-2.5-1.7-3.3c-0.6-0.6-1.2-1.1-1.2-1.9c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0c-0.1,0-0.3,0.1-0.3,0.2    C9,6.1,8.8,6.9,8.8,7.7C9,8.2,9.3,8.6,9.7,9c0.4,0.3,0.7,0.8,0.8,1.3c0,0.6-0.5,1.1-1.1,1.1h0c-0.6,0-1.1-0.5-1.1-1.1V8.7    c0-0.1,0-0.2-0.1-0.3C8.1,8.4,7.9,8.3,7.8,8.3z"
       })));
     };
-    const LightbulbIcon = ({
-      sx
-    }) => {
+    const LightbulbIcon = _ref8 => {
+      let {
+        sx
+      } = _ref8;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -580,9 +591,10 @@
         d: "M14,18.1H9.7c-0.1,0-0.2,0.1-0.2,0.2v1.1l0,0c0,0.1,0,0.6,0.2,0.9c0.2,0.2,0.8,0.8,0.8,0.8s0.1,0.1,0.2,0.1      h2.2c0.1,0,0.2,0,0.3-0.1c0,0,0.8-0.5,0.8-0.8c0.1-0.2,0.2-0.8,0.2-0.9l0,0v-1.1C14.1,18.1,14,18.1,14,18.1z"
       })))));
     };
-    const TwitchIcon = ({
-      sx
-    }) => {
+    const TwitchIcon = _ref9 => {
+      let {
+        sx
+      } = _ref9;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -619,9 +631,10 @@
         height: "3.7"
       })))))));
     };
-    const BlerpyIcon = ({
-      sx
-    }) => {
+    const BlerpyIcon = _ref10 => {
+      let {
+        sx
+      } = _ref10;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -633,9 +646,10 @@
         d: "M18,10.6c-0.4-1.9,1.3-3.3,0.2-4.8c-1.6-1.9-3.5,0.7-5.2-0.1c-1.1-0.5-2.3-2.2-4-1.6   S7.5,6.9,7,8c-0.9,1.7-4,0.9-4,3.4c0,1.8,2.2,1.8,3.2,3.5c1,1.7-1.2,3.8,0.7,5.4c2.4,2,4.8-2,6.9-2.8l0,0c2.1-0.8,6.5,0.8,7.1-2.3   C21.4,12.7,18.4,12.5,18,10.6z M12.7,14.3c-1.5,0.5-3.2-0.1-4.1-1.4c-0.2-0.3-0.1-0.6,0.1-0.8C8.7,12,8.8,12,8.9,12   c0.9-0.1,1.8-0.3,2.6-0.6c0.9-0.3,1.7-0.7,2.4-1.2c0.3-0.2,0.6-0.1,0.8,0.2c0.1,0.1,0.1,0.2,0.1,0.3C15.1,12.2,14.2,13.7,12.7,14.3   L12.7,14.3z"
       })));
     };
-    const RadarDishIcon = ({
-      sx
-    }) => {
+    const RadarDishIcon = _ref11 => {
+      let {
+        sx
+      } = _ref11;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -655,9 +669,10 @@
         d: "M19.1,4.9c-1.5-1.6-3.7-2.2-5.8-1.8c-0.4,0.1-0.6,0.4-0.6,0.8c0.1,0.4,0.5,0.6,0.8,0.6    c1.7-0.3,3.4,0.2,4.6,1.4c1.2,1.2,1.7,2.9,1.4,4.6c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6    C21.2,8.7,20.6,6.5,19.1,4.9z"
       }))));
     };
-    const ChannelPointsIcon = ({
-      sx
-    }) => {
+    const ChannelPointsIcon = _ref12 => {
+      let {
+        sx
+      } = _ref12;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -677,9 +692,10 @@
         d: "M16.6,11.3l-2.2,0c0-0.5-0.1-0.9-0.4-1.1c-0.4-0.4-1-0.4-1.3-0.4c0,0,0,0,0,0l0-2.2c0,0,0,0,0,0     c1.2,0,2.2,0.4,2.9,1.1C16.1,9,16.7,9.9,16.6,11.3z"
       })))));
     };
-    const GiftIcon = ({
-      sx
-    }) => {
+    const GiftIcon = _ref13 => {
+      let {
+        sx
+      } = _ref13;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("path", {
@@ -688,9 +704,10 @@
         d: "M19.4,7.7h-2c0.2-0.4,0.4-0.8,0.4-1.3c0-1.3-1.1-2.4-2.4-2.4c-1.8,0-2.8,1.4-3.3,2.5C11.5,5.4,10.4,4,8.7,4  C7.3,4,6.2,5.1,6.2,6.4c0,0.5,0.1,0.9,0.4,1.3h-2C4.3,7.7,4,8,4,8.3V12c0,0.3,0.3,0.6,0.6,0.6h0.9v6.9c0,0.3,0.3,0.6,0.6,0.6h11.9  c0.3,0,0.6-0.3,0.6-0.6v-6.9h0.9c0.3,0,0.6-0.3,0.6-0.6V8.3C20,8,19.7,7.7,19.4,7.7z M15.3,5.1c0.7,0,1.3,0.6,1.3,1.3  s-0.6,1.3-1.3,1.3h-2.6C13.1,6.8,13.9,5.1,15.3,5.1z M7.4,6.4c0-0.7,0.6-1.3,1.3-1.3c1.5,0,2.3,1.6,2.6,2.6H8.7  C7.9,7.7,7.4,7.1,7.4,6.4z M5.1,8.9h3.5h2.8v2.6H5.1V8.9z M6.6,12.6h4.8v6.3H6.6V12.6z M17.4,18.9h-4.8v-6.3h4.8V18.9z M18.9,11.4  h-6.3V8.9h2.8h3.5V11.4z"
       }));
     };
-    const WalkonIcon = ({
-      sx
-    }) => {
+    const WalkonIcon = _ref14 => {
+      let {
+        sx
+      } = _ref14;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -702,9 +719,10 @@
         d: "M8.5,3C7.1,3,6,5,6,7.5c0.1,1.7,0.3,3.4,0.6,5.1c0.3,1.8,0.9,3.2,1.9,3.2   s1.8-1,1.8-2.8c0-0.6-0.5-1.6-0.5-2.4c0-1.5,0.9-2.1,0.9-3.5C10.8,4.7,10,3,8.5,3L8.5,3z M15.5,8.1c-1.4,0-2.2,1.7-2.2,4.2   c0,1.4,1,2,0.9,3.5c0,0.8-0.5,1.8-0.5,2.4c0,1.8,0.7,2.8,1.8,2.8s1.7-1.5,1.9-3.2c0.3-1.7,0.5-3.4,0.6-5.1   C18,10.2,16.9,8.1,15.5,8.1L15.5,8.1z"
       })));
     };
-    const PointerFingerIcon = ({
-      sx
-    }) => {
+    const PointerFingerIcon = _ref15 => {
+      let {
+        sx
+      } = _ref15;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -730,9 +748,10 @@
         d: "M8.1,7c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.4,0-0.5L7,5.1C6.8,4.9,6.6,5,6.5,5.1    c-0.1,0.1-0.1,0.4,0,0.5L8.1,7z"
       }))));
     };
-    const UnsafeIcon = ({
-      sx
-    }) => {
+    const UnsafeIcon = _ref16 => {
+      let {
+        sx
+      } = _ref16;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -747,9 +766,10 @@
         d: "M12,21c-1.2-0.5-2.2-1.2-3.2-2c-1.5-1-2.7-2.3-3.7-3.8c-0.6-1.6-1-3.3-1-5    c-0.2-1.5,0-3,0.4-4.4C5.2,4.2,11.3,3,12,3c0.8,0,6.6,1.3,7.6,2.8s0.3,7.1-0.9,9.4c-1,1.5-2.2,2.7-3.6,3.8    C14.2,19.8,13.1,20.5,12,21z M11.8,12L11.8,12l2.4,2.3c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.3,0.2-0.4    c0-0.2-0.1-0.3-0.2-0.4l-2.4-2.3l2.4-2.3c0.1-0.1,0.2-0.3,0.2-0.4c0-0.2-0.1-0.3-0.2-0.4C15,8,14.8,7.9,14.6,7.9    c-0.2,0-0.3,0.1-0.4,0.2l-2.4,2.3L9.5,8.2C9.4,8.1,9.2,8,9.1,8C8.9,8,8.7,8.1,8.6,8.2C8.5,8.3,8.4,8.5,8.4,8.6    c0,0.2,0.1,0.3,0.2,0.4l2.3,2.2l-2.3,2.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2    c0.2,0,0.3-0.1,0.4-0.2L11.8,12L11.8,12z"
       }))));
     };
-    const DiscordIcon = ({
-      sx
-    }) => {
+    const DiscordIcon = _ref17 => {
+      let {
+        sx
+      } = _ref17;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -768,9 +788,10 @@
         d: "M751.7,928.6h-12.1c-1,0-1.8,0.8-1.8,1.9c0,0,0,0,0,0v12.2c0,1,0.8,1.9,1.8,1.9    c0,0,0,0,0,0h10.2l-0.5-1.7l1.2,1.1l1.1,1l1.9,1.7v-16.1C753.5,929.4,752.7,928.6,751.7,928.6    C751.7,928.6,751.7,928.6,751.7,928.6z M748.2,940.4c0,0-0.3-0.4-0.6-0.7c0.7-0.2,1.2-0.5,1.6-1.1c-0.3,0.2-0.7,0.4-1,0.5    c-0.4,0.2-0.9,0.3-1.3,0.4c-0.8,0.1-1.6,0.1-2.3,0c-0.5-0.1-0.9-0.2-1.3-0.4c-0.2-0.1-0.4-0.2-0.7-0.3c0,0-0.1,0-0.1,0    c0,0,0,0,0,0c-0.2-0.1-0.3-0.2-0.3-0.2c0.4,0.5,0.9,0.9,1.6,1.1c-0.3,0.3-0.6,0.7-0.6,0.7c-1.1,0-2.1-0.5-2.7-1.4    c0-1.8,0.5-3.6,1.3-5.2c0.7-0.6,1.6-0.9,2.5-0.9l0.1,0.1c-0.9,0.2-1.7,0.6-2.4,1.2c0,0,0.2-0.1,0.5-0.3c0.6-0.3,1.3-0.5,2-0.6    c0.1,0,0.1,0,0.2,0c0.6-0.1,1.2-0.1,1.8,0c1,0.1,1.9,0.4,2.7,0.9c-0.7-0.5-1.4-0.9-2.2-1.1l0.1-0.1c0.9,0,1.8,0.4,2.5,0.9    c0.8,1.6,1.3,3.4,1.3,5.2C750.3,939.9,749.3,940.4,748.2,940.4z"
       }))));
     };
-    const NewDiscordIcon = ({
-      sx
-    }) => {
+    const NewDiscordIcon = _ref18 => {
+      let {
+        sx
+      } = _ref18;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -794,9 +815,10 @@
         fill: "white"
       })))));
     };
-    const BookmarkAddRounded = ({
-      sx
-    }) => {
+    const BookmarkAddRounded = _ref19 => {
+      let {
+        sx
+      } = _ref19;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -816,9 +838,10 @@
         d: "M14.2,18.6c-0.6,0-1.3-0.5-1.7-0.8l-2.1-1.5l-2.7,1.9c-0.3,0.3-0.8,0.4-1.3,0.3c-0.7-0.2-1-0.8-1-1.3     l0.1-8.2C5.5,8.5,5.7,8,6,7.6c0.5-0.4,1-0.7,1.6-0.7l3.4,0v1.5H7.6c-0.2,0-0.4,0.1-0.6,0.3C7,8.7,7,8.9,7,9.1L6.9,17l3.5-2.5     l3,2.2c0.2,0.1,0.3,0.2,0.5,0.3c0,0,0,0,0,0l0-5.3h1.5v5.3c0,0.6-0.2,1.5-1,1.7C14.3,18.6,14.2,18.6,14.2,18.6z"
       })))));
     };
-    const DiamondIcon = ({
-      sx
-    }) => {
+    const DiamondIcon = _ref20 => {
+      let {
+        sx
+      } = _ref20;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -831,9 +854,10 @@
         d: "M10118.5,660.2c-0.3,0-0.7-0.1-0.9-0.2l-7.5-7.4c-0.7-0.6-0.7-1.5-0.3-2.2l2.5-3.4   c0.6-0.7,1.5-1.1,2.4-1.1h7.7c0.9-0.1,1.8,0.3,2.4,1.1l2.6,3.5c0.4,0.7,0.2,1.6-0.4,2.1l-7.5,7.4   C10119.2,660.1,10118.8,660.2,10118.5,660.2z M10122.7,648.6c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.2,0.5,0.4,0.7   c0.3,0.4,0.5,0.9,0.5,1.4c0,0.2-0.1,0.6-0.2,0.7c-0.4,0.7-1,1.4-1.6,2c-0.8,0.9-1.7,1.7-1.5,1.9l0.2,0.2c0.6,0,3.2-3.2,3.2-3.2   c0.3-0.4,0.5-0.8,0.6-1.3c-0.1-0.7-0.3-1.2-0.7-1.8C10123.3,649.2,10122.9,648.6,10122.7,648.6L10122.7,648.6z"
       })));
     };
-    const BlerpCardIcon = ({
-      sx
-    }) => {
+    const BlerpCardIcon = _ref21 => {
+      let {
+        sx
+      } = _ref21;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -853,9 +877,10 @@
         d: "M12.3,11.4c-0.4,0.2-0.7,0.4-1.1,0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.1-0.1,0.3-0.1,0.4     c0.4,0.6,1.2,0.9,1.9,0.6l0,0c0.7-0.3,1.1-1,1-1.7c0,0,0-0.1,0-0.1C12.6,11.3,12.4,11.3,12.3,11.4z"
       })))));
     };
-    const CrownIcon = ({
-      sx
-    }) => {
+    const CrownIcon = _ref22 => {
+      let {
+        sx
+      } = _ref22;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -867,9 +892,10 @@
         d: "M17.8,17.4H6.2c-0.2,0-0.4,0.2-0.4,0.4v0.9c0,0.2,0.2,0.4,0.4,0.4h11.7   c0.2,0,0.4-0.2,0.4-0.4v-0.9C18.3,17.6,18.1,17.4,17.8,17.4C17.8,17.4,17.8,17.4,17.8,17.4z M19.6,8.4c-0.7,0-1.3,0.6-1.3,1.4   c0,0,0,0,0,0c0,0.2,0,0.4,0.1,0.6l-2,1.2c-0.4,0.3-1,0.1-1.2-0.3c0,0,0,0,0,0l-2.3-4c0.6-0.5,0.7-1.3,0.2-1.9   c-0.5-0.6-1.3-0.7-1.9-0.2C10.6,5.6,10.5,6.4,11,7c0.1,0.1,0.1,0.1,0.2,0.2l-2.3,4c-0.2,0.4-0.8,0.6-1.2,0.3c0,0,0,0,0,0l-2-1.2   c0.3-0.7,0-1.5-0.7-1.8s-1.5,0-1.8,0.7s0,1.5,0.7,1.8c0.2,0.1,0.4,0.1,0.6,0.1c0.1,0,0.1,0,0.2,0l2,5.4h10.8l2-5.4   c0.1,0,0.1,0,0.2,0c0.7,0,1.3-0.6,1.3-1.3C21,9,20.4,8.4,19.6,8.4L19.6,8.4z"
       })));
     };
-    const CogIcon = ({
-      sx
-    }) => {
+    const CogIcon = _ref23 => {
+      let {
+        sx
+      } = _ref23;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -881,9 +907,10 @@
         d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4   l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6   C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0   c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2   c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5   v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4   c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0   c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0   C14.4,10.6,13.3,9.5,12,9.5z"
       })));
     };
-    const ClockIcon = ({
-      sx
-    }) => {
+    const ClockIcon = _ref24 => {
+      let {
+        sx
+      } = _ref24;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -895,9 +922,10 @@
         d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7  c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
       })));
     };
-    const OpenLockIcon = ({
-      sx
-    }) => {
+    const OpenLockIcon = _ref25 => {
+      let {
+        sx
+      } = _ref25;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -908,9 +936,10 @@
         d: "M19.5,3.2c-0.7-0.7-1.7-1-2.9-1c-1.1,0-2,0.4-2.7,1.1c-1.4,1.5-1.4,4.1-1.3,6.7H6.5c-1.4,0-2.5,1.1-2.5,2.4v6.1   c0,1.4,1.1,2.4,2.5,2.4h7.4c1.4,0,2.5-1.1,2.5-2.4v-6.1c0-1.3-1-2.3-2.3-2.4C14,7.8,14,5.4,15,4.4c0.4-0.4,0.9-0.6,1.6-0.6   c0.8,0,1.4,0.2,1.8,0.6c0.8,0.7,0.7,2.2,0.7,3l0,0.2h1.5l0-0.2C20.7,6.3,20.7,4.4,19.5,3.2z M11,15.2l-0.2,0.2v2   c0,0.3-0.3,0.6-0.6,0.6c-0.3,0-0.6-0.3-0.6-0.6v-2l-0.2-0.2C9.1,15,9,14.7,9,14.3v0c0-0.7,0.6-1.2,1.2-1.2c0.3,0,0.6,0.1,0.9,0.4   c0.2,0.2,0.4,0.5,0.4,0.9C11.4,14.7,11.3,15,11,15.2z"
       })));
     };
-    const WindowsIcon = ({
-      sx
-    }) => {
+    const WindowsIcon = _ref26 => {
+      let {
+        sx
+      } = _ref26;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("path", {
@@ -918,9 +947,10 @@
         d: "M3,5.5l7.4-1v7.1H3V5.5z M3,18.5l7.4,1v-7H3V18.5L3,18.5z M11.2,19.6L21,21v-8.5h-9.8V19.6z M11.2,4.4v7.2H21 V3L11.2,4.4z"
       }));
     };
-    const BroomIcon = ({
-      sx
-    }) => {
+    const BroomIcon = _ref27 => {
+      let {
+        sx
+      } = _ref27;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -949,9 +979,10 @@
         d: "M56.8,8.6h-1.7c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h1.7c0.3,0,0.5,0.2,0.5,0.5C57.3,8.4,57.1,8.6,56.8,8.6z"
       }))))));
     };
-    const TikTokIcon = ({
-      sx
-    }) => {
+    const TikTokIcon = _ref28 => {
+      let {
+        sx
+      } = _ref28;
       return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
         sx: sx
       }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -974,21 +1005,23 @@
       })))));
     };
 
-    const BlerpTopRow$2 = ({
-      secondaryActionButton,
-      sizeParams,
-      bite,
-      isOwner,
-      getUserReactions,
-      setOpenSave,
-      handleClickSave,
-      isPremium,
-      isLocked,
-      isBlerpHovered,
-      handleClickThreeDot
-    }) => {
+    const BlerpTopRow$2 = _ref => {
       var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
+      let {
+        secondaryActionButton,
+        sizeParams,
+        bite,
+        isOwner,
+        getUserReactions,
+        setOpenSave,
+        handleClickSave,
+        isPremium,
+        isLocked,
+        isBlerpHovered,
+        handleClickThreeDot
+      } = _ref;
+
       function formatNumber(n) {
         var ranges = [{
           divider: 1e9,
@@ -1237,36 +1270,37 @@
       SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
       LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
     };
-    const Blerp$1 = ({
-      bite,
-      title,
-      variantSize,
-      isSelected,
-      playingState,
-      primaryActionButton,
-      secondaryActionButton,
-      unsaveButton,
-      organizeButton,
-      getUserReactions,
-      handleClickBackground,
-      handleClickPlay,
-      handleClickThreeDot,
-      handleClickSave,
-      handleClickReaction,
-      handleClickUnsave,
-      handleClickTitle,
-      handleClickOrganize,
-      isLinkTitle,
-      isPremium,
-      isLocked,
-      isOwner,
-      props,
-      // passed in function that sets state of the purchase modal
-      handleClickLock,
-      backgroundColor
-    }) => {
+    const Blerp$1 = _ref => {
       var _bite$image, _bite$image$original;
 
+      let {
+        bite,
+        title,
+        variantSize,
+        isSelected,
+        playingState,
+        primaryActionButton,
+        secondaryActionButton,
+        unsaveButton,
+        organizeButton,
+        getUserReactions,
+        handleClickBackground,
+        handleClickPlay,
+        handleClickThreeDot,
+        handleClickSave,
+        handleClickReaction,
+        handleClickUnsave,
+        handleClickTitle,
+        handleClickOrganize,
+        isLinkTitle,
+        isPremium,
+        isLocked,
+        isOwner,
+        props,
+        // passed in function that sets state of the purchase modal
+        handleClickLock,
+        backgroundColor
+      } = _ref;
       const theme = React.useContext(styled.ThemeContext);
       const [openSave, setOpenSave] = React.useState(false);
       const size = useWindowSize();
@@ -1440,36 +1474,17 @@
         handleClickOrganize: handleClickOrganize
       })));
     };
-    Blerp$1.propTypes = {
-      bite: PropTypes__default['default'].object.isRequired,
-      collections: PropTypes__default['default'].array,
-      variantSize: PropTypes__default['default'].string,
-      userSignedIn: PropTypes__default['default'].object,
-      unsaveButton: PropTypes__default['default'].object,
-      isSelected: PropTypes__default['default'].bool.isRequired,
-      playingState: PropTypes__default['default'].string.isRequired,
-      primaryActionButton: PropTypes__default['default'].object,
-      secondaryActionButton: PropTypes__default['default'].object,
-      getUserReactions: PropTypes__default['default'].func.isRequired,
-      createCollection: PropTypes__default['default'].func,
-      handleClickBackground: PropTypes__default['default'].func.isRequired,
-      handleClickPlay: PropTypes__default['default'].func.isRequired,
-      handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-      handleClickSave: PropTypes__default['default'].func.isRequired,
-      handleClickReaction: PropTypes__default['default'].func.isRequired,
-      handleClickUnsave: PropTypes__default['default'].func.isRequired,
-      handleClickTitle: PropTypes__default['default'].func.isRequired
-    };
 
-    const UserCard$1 = ({
-      user,
-      onUsernameClick,
-      onFollowerClick,
-      onCreatedClick,
-      collapsed
-    }) => {
+    const UserCard$1 = _ref => {
       var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
 
+      let {
+        user,
+        onUsernameClick,
+        onFollowerClick,
+        onCreatedClick,
+        collapsed
+      } = _ref;
       const formatter = Intl.NumberFormat("en", {
         notation: "compact"
       });
@@ -1588,14 +1603,15 @@
       }, "created")))));
     };
 
-    const UsernameWithPopout$1 = ({
-      user,
-      onUsernameClick,
-      onFollowerClick,
-      onCreatedClick,
-      textStyle,
-      collapsed = true
-    }) => {
+    const UsernameWithPopout$1 = _ref => {
+      let {
+        user,
+        onUsernameClick,
+        onFollowerClick,
+        onCreatedClick,
+        textStyle,
+        collapsed = true
+      } = _ref;
       const [userCardRef, setUserCardRef] = React.useState(null);
       const openUserCard = Boolean(userCardRef);
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1671,11 +1687,12 @@
     const PremiumContainer$1 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])), props => props.theme.colors.grey7);
     const Container$2 = styled__default['default'].div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
     const HoverScrollText$1 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-    const FavoriteIconWithCounter$1 = ({
-      saved,
-      count,
-      onClick
-    }) => {
+    const FavoriteIconWithCounter$1 = _ref => {
+      let {
+        saved,
+        count,
+        onClick
+      } = _ref;
       const formatter = Intl.NumberFormat("en", {
         notation: "compact"
       });
@@ -1713,13 +1730,14 @@
         }
       }, savedCount));
     };
-    const AddedToIcons$1 = ({
-      item,
-      hovering,
-      hide = false
-    }) => {
+    const AddedToIcons$1 = _ref2 => {
       var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
+      let {
+        item,
+        hovering,
+        hide = false
+      } = _ref2;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
@@ -1768,11 +1786,12 @@
       }))));
     };
 
-    const RatingInfoItem$1 = ({
-      hovering,
-      tooltipText,
-      displayText
-    }) => {
+    const RatingInfoItem$1 = _ref3 => {
+      let {
+        hovering,
+        tooltipText,
+        displayText
+      } = _ref3;
       return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: tooltipText
       }, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -1792,10 +1811,11 @@
       }, displayText));
     };
 
-    const RatingInfo$1 = ({
-      bite,
-      hovering
-    }) => {
+    const RatingInfo$1 = _ref4 => {
+      let {
+        bite,
+        hovering
+      } = _ref4;
       let ratingText = {
         tooltipText: "",
         text: ""
@@ -1885,13 +1905,14 @@
       }));
     };
 
-    const ReportedWarning$1 = ({
-      showWarning,
-      blacklisted,
-      saved,
-      count,
-      onClick
-    }) => {
+    const ReportedWarning$1 = _ref5 => {
+      let {
+        showWarning,
+        blacklisted,
+        saved,
+        count,
+        onClick
+      } = _ref5;
       const [show, setShow] = React.useState(showWarning);
       const [hovering, setHovering] = React.useState(false);
 
@@ -1986,18 +2007,19 @@
       })), renderInfo());
     };
 
-    const BlerpTopRow$1 = ({
-      bite,
-      hovering,
-      onPlusClick,
-      onOptionClicked,
-      selectedOption,
-      addToOpen,
-      setAddToOpen,
-      renderAddContentButton,
-      hoveringAddTo,
-      setHovering
-    }) => {
+    const BlerpTopRow$1 = _ref6 => {
+      let {
+        bite,
+        hovering,
+        onPlusClick,
+        onOptionClicked,
+        selectedOption,
+        addToOpen,
+        setAddToOpen,
+        renderAddContentButton,
+        hoveringAddTo,
+        setHovering
+      } = _ref6;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         justifyContent: "space-between",
@@ -2038,34 +2060,35 @@
       }));
     };
 
-    const NewBlerp$1 = ({
-      Waveform,
-      bite,
-      playState,
-      play,
-      onTitleClick = () => {
-        console.log("onTitleClick");
-      },
-      onUsernameClick = () => {
-        console.log("onUsernameClick");
-      },
-      onFavoriteClick = () => {
-        console.log("onFavoriteClick");
-      },
-      onAddToPlace = () => {
-        console.log("onAddToPlace");
-      },
-      onOptionClicked = () => {
-        console.log("onAddToPlace");
-      },
-      selectedOption,
-      trending = false,
-      renderAddContentButton,
-      renderThreeDot,
-      isOwner
-    }) => {
+    const NewBlerp$1 = _ref7 => {
       var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
+      let {
+        Waveform,
+        bite,
+        playState,
+        play,
+        onTitleClick = () => {
+          console.log("onTitleClick");
+        },
+        onUsernameClick = () => {
+          console.log("onUsernameClick");
+        },
+        onFavoriteClick = () => {
+          console.log("onFavoriteClick");
+        },
+        onAddToPlace = () => {
+          console.log("onAddToPlace");
+        },
+        onOptionClicked = () => {
+          console.log("onAddToPlace");
+        },
+        selectedOption,
+        trending = false,
+        renderAddContentButton,
+        renderThreeDot,
+        isOwner
+      } = _ref7;
       const [previewed, setPreviewed] = React.useState(false);
       const [hovering, setHovering] = React.useState(false);
       const [hoveringAddTo, setHoveringAddTo] = React.useState(false);
@@ -2365,11 +2388,12 @@
     const PremiumContainer = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])), props => props.theme.colors.grey7);
     const Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
     const HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-    const FavoriteIconWithCounter = ({
-      saved,
-      count,
-      onClick
-    }) => {
+    const FavoriteIconWithCounter = _ref => {
+      let {
+        saved,
+        count,
+        onClick
+      } = _ref;
       const formatter = Intl.NumberFormat("en", {
         notation: "compact"
       });
@@ -2407,13 +2431,14 @@
         }
       }, savedCount));
     };
-    const AddedToIcons = ({
-      item,
-      hovering,
-      hide = false
-    }) => {
+    const AddedToIcons = _ref2 => {
       var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
+      let {
+        item,
+        hovering,
+        hide = false
+      } = _ref2;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
@@ -2462,11 +2487,12 @@
       }))));
     };
 
-    const RatingInfoItem = ({
-      hovering,
-      tooltipText,
-      displayText
-    }) => {
+    const RatingInfoItem = _ref3 => {
+      let {
+        hovering,
+        tooltipText,
+        displayText
+      } = _ref3;
       return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: tooltipText
       }, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -2486,10 +2512,11 @@
       }, displayText));
     };
 
-    const RatingInfo = ({
-      bite,
-      hovering
-    }) => {
+    const RatingInfo = _ref4 => {
+      let {
+        bite,
+        hovering
+      } = _ref4;
       let ratingText = {
         tooltipText: "",
         text: ""
@@ -2647,13 +2674,14 @@
       }));
     };
 
-    const ReportedWarning = ({
-      showWarning,
-      blacklisted,
-      saved,
-      count,
-      onClick
-    }) => {
+    const ReportedWarning = _ref5 => {
+      let {
+        showWarning,
+        blacklisted,
+        saved,
+        count,
+        onClick
+      } = _ref5;
       const [show, setShow] = React.useState(showWarning);
       const [hovering, setHovering] = React.useState(false);
 
@@ -2748,18 +2776,19 @@
       })), renderInfo());
     };
 
-    const BlerpTopRow = ({
-      bite,
-      hovering,
-      onPlusClick,
-      onOptionClicked,
-      selectedOption,
-      addToOpen,
-      setAddToOpen,
-      renderAddContentButton,
-      hoveringAddTo,
-      setHovering
-    }) => {
+    const BlerpTopRow = _ref6 => {
+      let {
+        bite,
+        hovering,
+        onPlusClick,
+        onOptionClicked,
+        selectedOption,
+        addToOpen,
+        setAddToOpen,
+        renderAddContentButton,
+        hoveringAddTo,
+        setHovering
+      } = _ref6;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         justifyContent: "space-between",
@@ -2800,34 +2829,35 @@
       }));
     };
 
-    const NewBlerpTest$1 = ({
-      Waveform,
-      bite,
-      playState,
-      play,
-      onTitleClick = () => {
-        console.log("onTitleClick");
-      },
-      onUsernameClick = () => {
-        console.log("onUsernameClick");
-      },
-      onFavoriteClick = () => {
-        console.log("onFavoriteClick");
-      },
-      onAddToPlace = () => {
-        console.log("onAddToPlace");
-      },
-      onOptionClicked = () => {
-        console.log("onAddToPlace");
-      },
-      selectedOption,
-      trending = false,
-      renderAddContentButton,
-      renderThreeDot,
-      isOwner
-    }) => {
+    const NewBlerpTest$1 = _ref7 => {
       var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
+      let {
+        Waveform,
+        bite,
+        playState,
+        play,
+        onTitleClick = () => {
+          console.log("onTitleClick");
+        },
+        onUsernameClick = () => {
+          console.log("onUsernameClick");
+        },
+        onFavoriteClick = () => {
+          console.log("onFavoriteClick");
+        },
+        onAddToPlace = () => {
+          console.log("onAddToPlace");
+        },
+        onOptionClicked = () => {
+          console.log("onAddToPlace");
+        },
+        selectedOption,
+        trending = false,
+        renderAddContentButton,
+        renderThreeDot,
+        isOwner
+      } = _ref7;
       const [previewed, setPreviewed] = React.useState(false);
       const [hovering, setHovering] = React.useState(false);
       const [hoveringAddTo, setHoveringAddTo] = React.useState(false);
@@ -3125,11 +3155,12 @@
 
     var _templateObject$d;
     const BlerpImage$2 = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), props => props.image, props => props.firstImage ? "1" : props.hovering ? "1" : "0.5", props => props.hovering ? "45deg" : "20deg");
-    const GroupCard$1 = ({
-      group
-    }) => {
+    const GroupCard$1 = _ref => {
       var _group$blerps14;
 
+      let {
+        group
+      } = _ref;
       const [hovering, setHovering] = React.useState(false);
       const formatter = Intl.NumberFormat("en", {
         notation: "compact"
@@ -3278,9 +3309,10 @@
     };
 
     const BlerpAudioContext = /*#__PURE__*/React.createContext({});
-    const BlerpAudioContextProvider$1 = ({
-      children
-    }) => {
+    const BlerpAudioContextProvider$1 = _ref => {
+      let {
+        children
+      } = _ref;
       const [selectedBlerp, setSelectedBlerp] = React.useState(null);
       const [playState, setPlayState] = React.useState("stopped");
       const [startTime, setStartTime] = React.useState(0); // const [audioCtx, setAudioCtx] = useState(null);
@@ -3293,14 +3325,16 @@
         await audioRef.current.pause();
       };
 
-      const mplay = async ({
-        bite,
-        gain = 1,
-        startTime = 0,
-        forcePlay = false
-      }) => {
+      const mplay = async _ref2 => {
         var _bite$audio, _bite$audio$mp;
 
+        let {
+          bite,
+          gain = 1,
+          startTime = 0,
+          forcePlay = false
+        } = _ref2;
+
         if (!audioRef.current) {
           audioRef.current = new Audio();
         }
@@ -3410,34 +3444,35 @@
     const PremiumPill = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 0 0 8px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), props => props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a"), props => props.theme.colors.seafoam);
     styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _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"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5, props => props.theme.colors.ibisRed);
     styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n"])));
-    const BlerpListViewPremium$1 = ({
-      bite,
-      variantSize,
-      isSelected,
-      playingState,
-      extraInfoComponent,
-      primaryActionButton,
-      secondaryActionButton,
-      handleClickBackground,
-      handleClickPlay,
-      handleClickSave,
-      handleClickThreeDot,
-      handleClickUnsave,
-      handleClickTitle,
-      handleSubtitleClick,
-      biteSubtitle,
-      isLinkTitle,
-      isLocked,
-      fluid,
-      props,
-      backgroundColor,
-      hoverColor,
-      isPremium,
-      handleClickLock,
-      handleClickPremium
-    }) => {
+    const BlerpListViewPremium$1 = _ref => {
       var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
+      let {
+        bite,
+        variantSize,
+        isSelected,
+        playingState,
+        extraInfoComponent,
+        primaryActionButton,
+        secondaryActionButton,
+        handleClickBackground,
+        handleClickPlay,
+        handleClickSave,
+        handleClickThreeDot,
+        handleClickUnsave,
+        handleClickTitle,
+        handleSubtitleClick,
+        biteSubtitle,
+        isLinkTitle,
+        isLocked,
+        fluid,
+        props,
+        backgroundColor,
+        hoverColor,
+        isPremium,
+        handleClickLock,
+        handleClickPremium
+      } = _ref;
       const [openSave, setOpenSave] = React.useState(false);
       const {
         loading,
@@ -3775,23 +3810,6 @@
         }
       })))), extraInfoComponent && extraInfoComponent);
     };
-    BlerpListViewPremium$1.propTypes = {
-      bite: PropTypes__default['default'].object.isRequired,
-      collections: PropTypes__default['default'].array.isRequired,
-      variantSize: PropTypes__default['default'].string.isRequired,
-      userSignedIn: PropTypes__default['default'].object.isRequired,
-      isSelected: PropTypes__default['default'].bool.isRequired,
-      playingState: PropTypes__default['default'].string.isRequired,
-      actionButton: PropTypes__default['default'].object,
-      getUserReactions: PropTypes__default['default'].func.isRequired,
-      createCollection: PropTypes__default['default'].func.isRequired,
-      handleClickBackground: PropTypes__default['default'].func.isRequired,
-      handleClickPlay: PropTypes__default['default'].func.isRequired,
-      handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-      handleClickSave: PropTypes__default['default'].func.isRequired,
-      handleClickReaction: PropTypes__default['default'].func.isRequired,
-      handleClickUnsave: PropTypes__default['default'].func.isRequired
-    };
 
     var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
     const BlerpImage = styled__default['default'].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), props => props.url);
@@ -3800,34 +3818,35 @@
     const SaveContainer = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\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"])), props => props.theme.colors.white);
     const BlerpImageScrim = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride, SaveContainer);
     styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n"])));
-    const BlerpListView$1 = ({
-      bite,
-      variantSize,
-      isSelected,
-      playingState,
-      extraInfoComponent,
-      primaryActionButton,
-      secondaryActionButton,
-      handleClickBackground,
-      handleClickPlay,
-      handleClickSave,
-      handleClickThreeDot,
-      handleClickUnsave,
-      handleClickTitle,
-      handleSubtitleClick,
-      biteSubtitle,
-      isLinkTitle,
-      fluid,
-      backgroundColor,
-      hoverColor,
-      props,
-      isLocked,
-      isPremium,
-      handleClickLock,
-      handleClickPremium
-    }) => {
+    const BlerpListView$1 = _ref => {
       var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
+      let {
+        bite,
+        variantSize,
+        isSelected,
+        playingState,
+        extraInfoComponent,
+        primaryActionButton,
+        secondaryActionButton,
+        handleClickBackground,
+        handleClickPlay,
+        handleClickSave,
+        handleClickThreeDot,
+        handleClickUnsave,
+        handleClickTitle,
+        handleSubtitleClick,
+        biteSubtitle,
+        isLinkTitle,
+        fluid,
+        backgroundColor,
+        hoverColor,
+        props,
+        isLocked,
+        isPremium,
+        handleClickLock,
+        handleClickPremium
+      } = _ref;
       const [openSave, setOpenSave] = React.useState(false);
       reactPalette.usePalette(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);
       const theme = React.useContext(styled.ThemeContext);
@@ -4119,32 +4138,24 @@
         }
       })))), extraInfoComponent && extraInfoComponent);
     };
-    BlerpListView$1.propTypes = {
-      bite: PropTypes__default['default'].object.isRequired,
-      collections: PropTypes__default['default'].array.isRequired,
-      variantSize: PropTypes__default['default'].string.isRequired,
-      userSignedIn: PropTypes__default['default'].object.isRequired,
-      isSelected: PropTypes__default['default'].bool.isRequired,
-      playingState: PropTypes__default['default'].string.isRequired,
-      actionButton: PropTypes__default['default'].object,
-      getUserReactions: PropTypes__default['default'].func.isRequired,
-      createCollection: PropTypes__default['default'].func.isRequired,
-      handleClickBackground: PropTypes__default['default'].func.isRequired,
-      handleClickPlay: PropTypes__default['default'].func.isRequired,
-      handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-      handleClickSave: PropTypes__default['default'].func.isRequired,
-      handleClickReaction: PropTypes__default['default'].func.isRequired,
-      handleClickUnsave: PropTypes__default['default'].func.isRequired
-    };
 
     var _templateObject$a, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-    const MasterContainer = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), ({
-      sizeParams
-    }) => (sizeParams.height += 2) + "px", ({
-      sizeParams
-    }) => sizeParams.width, ({
-      fluid
-    }) => fluid ? "300px" : "0", props => props.owned ? "102%" : "100%");
+    const MasterContainer = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), _ref => {
+      let {
+        sizeParams
+      } = _ref;
+      return (sizeParams.height += 2) + "px";
+    }, _ref2 => {
+      let {
+        sizeParams
+      } = _ref2;
+      return sizeParams.width;
+    }, _ref3 => {
+      let {
+        fluid
+      } = _ref3;
+      return fluid ? "300px" : "0";
+    }, props => props.owned ? "102%" : "100%");
     const YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
     const TopBox = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), props => props.theme.colors.white);
     const MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), props => props.theme.colors.grey5);
@@ -4158,19 +4169,20 @@
     const SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n    z-index: 5;\n    width: 100%;\n    position: relative;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 4px;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), props => props.theme.colors.notBlackOverride);
     const SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
     const SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), props => props.depth === "1" ? "\n      transform: skewX(-5deg); \n      left: 2px; \n      height: 94%; \n      bottom: 0" : props.depth === "2" ? "\n      transform: skewX(-12deg); \n      left: 5px; \n      height: 83%; \n      width:97%;\n      bottom: 0" : "");
-    const CollectionListViewPremium$1 = ({
-      collection,
-      variantSize,
-      extraInfoComponent,
-      primaryActionButton,
-      secondaryActionButton,
-      handleClickBackground,
-      handleClickTitle,
-      isLinkTitle,
-      fluid
-    }) => {
+    const CollectionListViewPremium$1 = _ref4 => {
       var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
 
+      let {
+        collection,
+        variantSize,
+        extraInfoComponent,
+        primaryActionButton,
+        secondaryActionButton,
+        handleClickBackground,
+        handleClickTitle,
+        isLinkTitle,
+        fluid
+      } = _ref4;
       React.useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
 
       const {
@@ -4465,21 +4477,6 @@
         }), extraInfoComponent && extraInfoComponent)
       );
     };
-    CollectionListViewPremium$1.propTypes = {
-      collection: PropTypes__default['default'].object.isRequired,
-      collections: PropTypes__default['default'].array.isRequired,
-      variantSize: PropTypes__default['default'].string.isRequired,
-      userSignedIn: PropTypes__default['default'].object.isRequired,
-      isSelected: PropTypes__default['default'].bool.isRequired,
-      playingState: PropTypes__default['default'].string.isRequired,
-      actionButton: PropTypes__default['default'].object,
-      getUserReactions: PropTypes__default['default'].func.isRequired,
-      createCollection: PropTypes__default['default'].func.isRequired,
-      handleClickBackground: PropTypes__default['default'].func.isRequired,
-      handleClickSave: PropTypes__default['default'].func.isRequired,
-      handleClickReaction: PropTypes__default['default'].func.isRequired,
-      handleClickUnsave: PropTypes__default['default'].func.isRequired
-    };
 
     let colors = {
       white: "#ffffff",
@@ -4848,18 +4845,21 @@
     const motion3 = props => styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
 
     const EllipsisSpinner = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), p => "".concat(p.size).concat(p.sizeUnit), p => "".concat(p.size).concat(p.sizeUnit), p => p.color, p => motion1(), p => motion2(), p => motion2(), p => motion3());
-    const EllipsisLoader = ({
-      color,
-      size,
-      sizeUnit,
-      style
-    }) => /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
-      color: color,
-      size: size,
-      sizeUnit: sizeUnit,
-      style: { ...style
-      }
-    }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
+    const EllipsisLoader = _ref => {
+      let {
+        color,
+        size,
+        sizeUnit,
+        style
+      } = _ref;
+      return /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
+        color: color,
+        size: size,
+        sizeUnit: sizeUnit,
+        style: { ...style
+        }
+      }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
+    };
     EllipsisLoader.defaultProps = {
       size: 24,
       color: colors.notBlack,
@@ -4878,12 +4878,13 @@
     const BlackToggleInput = styled__default['default'].input(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: transparent;\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n        /* -webkit-transform: translateY(2px);\n        -ms-transform: translateY(2px);\n        transform: translateY(2px); */\n    }\n"])), BlackSlider, BlackSlider, props => props.theme.colors.notBlack, BlackSlider, BlackSlider);
     styled__default['default'].div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 28px;\n    height: 14px;\n    border: 2px solid ", ";\n    border-radius: 14px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.theme.colors.notBlack, BlackToggleInput);
     const LoadingContainer = styled__default['default'].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default['default'](["\n    width: 50px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n"])));
-    const Toggle$1 = ({
-      loading,
-      checked,
-      onClick,
-      disabled
-    }) => {
+    const Toggle$1 = _ref => {
+      let {
+        loading,
+        checked,
+        onClick,
+        disabled
+      } = _ref;
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
         checked: checked,
         disabled: disabled,
@@ -4921,17 +4922,18 @@
     //     }
     // `;
 
-    const NewDropdown$1 = ({
-      buttonTitle,
-      buttonLabel,
-      buttonStyle,
-      paperStyle,
-      buttonVariant,
-      handleOptionClicked,
-      startIcon,
-      endIcon,
-      options
-    }) => {
+    const NewDropdown$1 = _ref => {
+      let {
+        buttonTitle,
+        buttonLabel,
+        buttonStyle,
+        paperStyle,
+        buttonVariant,
+        handleOptionClicked,
+        startIcon,
+        endIcon,
+        options
+      } = _ref;
       const [anchorEl, setAnchorEl] = React.useState(null);
       const open = Boolean(anchorEl);
 
@@ -5051,17 +5053,18 @@
         noWrap: true
       }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))));
     };
-    const Dropdown$1 = ({
-      buttonTitle,
-      buttonLabel,
-      buttonStyle,
-      paperStyle,
-      buttonVariant,
-      handleOptionClicked,
-      startIcon,
-      endIcon,
-      options
-    }) => {
+    const Dropdown$1 = _ref2 => {
+      let {
+        buttonTitle,
+        buttonLabel,
+        buttonStyle,
+        paperStyle,
+        buttonVariant,
+        handleOptionClicked,
+        startIcon,
+        endIcon,
+        options
+      } = _ref2;
       const [anchorEl, setAnchorEl] = React.useState(null);
       const open = Boolean(anchorEl);
 
@@ -5180,15 +5183,16 @@
     const Slider$1 = styled__default['default'].input(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing, props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing);
     const ZoomIcon = styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
 
-    const ImageUploadModal = ({
-      prevImage,
-      updateImage,
-      onClose,
-      title,
-      isCircularImage,
-      isSquareImage,
-      sizeInfo
-    }) => {
+    const ImageUploadModal = _ref => {
+      let {
+        prevImage,
+        updateImage,
+        onClose,
+        title,
+        isCircularImage,
+        isSquareImage,
+        sizeInfo
+      } = _ref;
       const [image, setImage] = React.useState(prevImage);
       const [zoom, setZoom] = React.useState(50);
       const [loading, setLoading] = React.useState(false);
@@ -5351,45 +5355,48 @@
         onDragEnter: () => setDropzoneHovered(true),
         onDragLeave: () => setDropzoneHovered(false),
         onDrop: acceptedFiles => handleImageDrop(acceptedFiles)
-      }, ({
-        getRootProps,
-        getInputProps
-      }) => /*#__PURE__*/React__default['default'].createElement(Stack, {
-        sx: {
-          width: "100%",
-          height: size.width > 600 ? "300px" : "200px",
-          cursor: "pointer",
-          box: "borderBox",
-          justifyContent: "center"
-        }
-      }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
-        style: {
-          height: "100%",
-          display: "flex"
-        }
-      }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
-        color: "grey3",
-        style: {
-          justifyContent: "center",
-          alignItems: "center",
-          width: "100%"
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
-        style: {
-          color: "white",
-          height: "90%",
-          width: "90%"
-        }
-      })) : /*#__PURE__*/React__default['default'].createElement(Text, {
-        sx: {
-          flexWrap: "wrap",
-          width: "80%",
-          alignSelf: "center",
-          textAlign: "center",
-          verticalAlign: "center",
-          margin: "auto"
-        }
-      }, "Click or drop image here to upload."))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, _ref2 => {
+        let {
+          getRootProps,
+          getInputProps
+        } = _ref2;
+        return /*#__PURE__*/React__default['default'].createElement(Stack, {
+          sx: {
+            width: "100%",
+            height: size.width > 600 ? "300px" : "200px",
+            cursor: "pointer",
+            box: "borderBox",
+            justifyContent: "center"
+          }
+        }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
+          style: {
+            height: "100%",
+            display: "flex"
+          }
+        }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
+          color: "grey3",
+          style: {
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%"
+          }
+        }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
+          style: {
+            color: "white",
+            height: "90%",
+            width: "90%"
+          }
+        })) : /*#__PURE__*/React__default['default'].createElement(Text, {
+          sx: {
+            flexWrap: "wrap",
+            width: "80%",
+            alignSelf: "center",
+            textAlign: "center",
+            verticalAlign: "center",
+            margin: "auto"
+          }
+        }, "Click or drop image here to upload.")));
+      })), /*#__PURE__*/React__default['default'].createElement(Stack, {
         alignItems: "center"
       }, image && image.type !== "image/gif" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
@@ -5427,18 +5434,19 @@
 
     var _templateObject$6;
     styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default']([""])));
-    const NewCollectionModal$1 = ({
-      handleCollection,
-      deleteCollectionModal,
-      trigger,
-      collectionToBeEdited,
-      handleChangePremium,
-      onClose,
-      children,
-      isAdmin
-    }) => {
+    const NewCollectionModal$1 = _ref => {
       var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
 
+      let {
+        handleCollection,
+        deleteCollectionModal,
+        trigger,
+        collectionToBeEdited,
+        handleChangePremium,
+        onClose,
+        children,
+        isAdmin
+      } = _ref;
       const [open, setopen] = React.useState(false);
       const [imageFile, setImageFile] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
       const [imageURL, setImageURL] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url);
@@ -6046,19 +6054,21 @@
         autoHideDuration: 5000
       });
 
-      const triggerSnackbar = ({
-        message = "Set a message",
-        position = {
-          vertical: "bottom",
-          horizontal: "center"
-        },
-        slideDirection = "up",
-        transitionType = "slide",
-        severity = "success",
-        color,
-        actionButton = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
-        autoHideDuration = 5000
-      }) => {
+      const triggerSnackbar = _ref => {
+        let {
+          message = "Set a message",
+          position = {
+            vertical: "bottom",
+            horizontal: "center"
+          },
+          slideDirection = "up",
+          transitionType = "slide",
+          severity = "success",
+          color,
+          actionButton = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+          autoHideDuration = 5000
+        } = _ref;
+
         if (!color) {
           switch (severity) {
             case "success":
@@ -6358,10 +6368,11 @@
       palette: darkPalette
     });
 
-    const BlerpTheme = ({
-      mode,
-      children
-    }) => {
+    const BlerpTheme = _ref => {
+      let {
+        mode,
+        children
+      } = _ref;
       const currentTheme = mode === "dark" ? darkTheme : theme; // ...
 
       return /*#__PURE__*/React__default['default'].createElement(styles.ThemeProvider, {
@@ -6375,11 +6386,12 @@
       }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
     };
 
-    const LottieAnimation = ({
-      lotti,
-      width,
-      height
-    }) => {
+    const LottieAnimation = _ref => {
+      let {
+        lotti,
+        width,
+        height
+      } = _ref;
       const defaultOptions = {
         loop: true,
         autoplay: true,
@@ -9149,32 +9161,33 @@
     const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
     const LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
     const LockedScrimBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    /* transition: opacity 0.3s ease-in-out; */\n\n    background-color: ", ";\n\n    opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
-    const PremiumCollectionCard = ({
-      collection,
-      variantSize,
-      handleClickBackground,
-      handleClickSave,
-      handleClickView,
-      handleClickUnlock,
-      handleClickPrimaryAction,
-      handleClickSecondaryAction,
-      primaryActionButton,
-      secondaryActionButton,
-      bottomLeftIcon,
-      handleClickBottomLeftIcon,
-      premiumDiamondPill,
-      fluid,
-      fontSize,
-      isLink,
-      isLocked,
-      overrideViewText,
-      hideUnlockPlatformText,
-      hidePremiumLockIcon,
-      unlockPlatformText,
-      hideCollectionBackground
-    }) => {
+    const PremiumCollectionCard = _ref => {
       var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
 
+      let {
+        collection,
+        variantSize,
+        handleClickBackground,
+        handleClickSave,
+        handleClickView,
+        handleClickUnlock,
+        handleClickPrimaryAction,
+        handleClickSecondaryAction,
+        primaryActionButton,
+        secondaryActionButton,
+        bottomLeftIcon,
+        handleClickBottomLeftIcon,
+        premiumDiamondPill,
+        fluid,
+        fontSize,
+        isLink,
+        isLocked,
+        overrideViewText,
+        hideUnlockPlatformText,
+        hidePremiumLockIcon,
+        unlockPlatformText,
+        hideCollectionBackground
+      } = _ref;
       const [cardColors, setCardColors] = React.useState(null);
       const [collectionHovered, setCollectionHovered] = React.useState(false);
       const {
@@ -9626,35 +9639,36 @@
     const LineClamp = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"]))); //on background click
     //primary and secondary action buttons
 
-    const CollectionCard$1 = ({
-      collection,
-      variantSize,
-      handleClickBackground,
-      handleClickSave,
-      handleClickDrag,
-      handleClickView,
-      handleClickUnlock,
-      handleClickPrimaryAction,
-      handleClickSecondaryAction,
-      primaryActionButton,
-      secondaryActionButton,
-      fluid,
-      fontSize,
-      isLink,
-      isPremium,
-      isLocked,
-      isOwner,
-      overrideViewText,
-      hideUnlockPlatformText,
-      hidePremiumLockIcon,
-      unlockPlatformText,
-      hideCollectionBackground,
-      bottomLeftIcon,
-      handleClickBottomLeftIcon,
-      premiumDiamondPill
-    }) => {
+    const CollectionCard$1 = _ref => {
       var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or;
 
+      let {
+        collection,
+        variantSize,
+        handleClickBackground,
+        handleClickSave,
+        handleClickDrag,
+        handleClickView,
+        handleClickUnlock,
+        handleClickPrimaryAction,
+        handleClickSecondaryAction,
+        primaryActionButton,
+        secondaryActionButton,
+        fluid,
+        fontSize,
+        isLink,
+        isPremium,
+        isLocked,
+        isOwner,
+        overrideViewText,
+        hideUnlockPlatformText,
+        hidePremiumLockIcon,
+        unlockPlatformText,
+        hideCollectionBackground,
+        bottomLeftIcon,
+        handleClickBottomLeftIcon,
+        premiumDiamondPill
+      } = _ref;
       const [cardColors, setCardColors] = React.useState(null);
       const {
         data,
@@ -10002,14 +10016,15 @@
       })));
     };
 
-    const UserProfileHeader = ({
-      followUser,
-      isOwner,
-      userData,
-      openEdit
-    }) => {
+    const UserProfileHeader = _ref => {
       var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
 
+      let {
+        followUser,
+        isOwner,
+        userData,
+        openEdit
+      } = _ref;
       const theme = React.useContext(styled.ThemeContext);
       const [profileColors, setProfileColors] = React.useState(null);
       const size = useWindowSize();
@@ -10252,18 +10267,19 @@
       })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), renderSocialLinks()))));
     };
 
-    const LibraryControls = ({
-      setSort,
-      activeBoard,
-      setSearchTerm,
-      hideSearch,
-      searchTerm,
-      setShowSearch,
-      setActiveBoard,
-      hideLayoutButtons
-    }) => {
+    const LibraryControls = _ref => {
       var _activeBoard$ownerObj;
 
+      let {
+        setSort,
+        activeBoard,
+        setSearchTerm,
+        hideSearch,
+        searchTerm,
+        setShowSearch,
+        setActiveBoard,
+        hideLayoutButtons
+      } = _ref;
       React.useContext(styled.ThemeContext);
       const size = useWindowSize();
       const [anchor, setAnchor] = React.useState(null);
@@ -10535,20 +10551,21 @@
       }))))));
     };
 
-    const UserLibraryHeader = ({
-      sx,
-      tabs,
-      tabSelection,
-      setTabSelection,
-      setShowSearch,
-      setSearchTerm,
-      searchTerm,
-      setActiveBoard,
-      hideSearch,
-      setSort,
-      sort,
-      hideLayoutButtons
-    }) => {
+    const UserLibraryHeader = _ref => {
+      let {
+        sx,
+        tabs,
+        tabSelection,
+        setTabSelection,
+        setShowSearch,
+        setSearchTerm,
+        searchTerm,
+        setActiveBoard,
+        hideSearch,
+        setSort,
+        sort,
+        hideLayoutButtons
+      } = _ref;
       const size = useWindowSize();
       React.useContext(styled.ThemeContext);
       return /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -10626,10 +10643,11 @@
       MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg"
     };
 
-    const ReactionButtons = ({
-      bite,
-      handleClick
-    }) => {
+    const ReactionButtons = _ref => {
+      let {
+        bite,
+        handleClick
+      } = _ref;
       return /*#__PURE__*/React__default['default'].createElement(Grid, {
         display: "grid",
         gridTemplateColumns: "repeat(4, 1fr)",