@blerp/design 1.2.32 → 1.2.33

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
     typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global._defineProperty, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRoundedIcon, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, _defineProperty, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.AddRoundedIcon, null, global.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global._defineProperty, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRounded, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, _defineProperty, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,7 +35,6 @@
     var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
     var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
     var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
-    var ArrowDropDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDropDownRoundedIcon);
     var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
     var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
     var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
@@ -1726,270 +1725,284 @@
     var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
     var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
       return props.theme.colors.grey7;
-    });
-
-    var AddContentDropdown = function AddContentDropdown(_ref) {
-      var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$discordContext, _item$soundEmotesCont, _options$;
-
-      var item = _ref.item,
-          active = _ref.active,
-          onOptionClicked = _ref.onOptionClicked,
-          selectedOption = _ref.selectedOption;
-      var options = [{
-        name: "Channel Points",
-        value: "CHANNEL_POINTS",
-        added: item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id
-      }, {
-        name: "Bits",
-        value: "BITS",
-        added: item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id
-      }, {
-        name: "WalkOn",
-        value: "WALK_ON",
-        added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
-      }, {
-        name: "Discord",
-        value: "DISCORD",
-        added: item === null || item === void 0 ? void 0 : (_item$discordContext = item.discordContext) === null || _item$discordContext === void 0 ? void 0 : _item$discordContext._id
-      }, {
-        name: "Sound Emotes",
-        value: "SOUND_EMOTES",
-        added: item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id
-      }, {
-        name: "Add To Group",
-        value: "ADD_TO_GROUP",
-        added: false
-      }, {
-        name: "Suggest To...",
-        value: "SUGGEST",
-        added: false
-      }];
-      var anchorRef = React.useRef(null);
-
-      var _useState = React.useState(null),
-          _useState2 = _slicedToArray__default['default'](_useState, 2),
-          anchor = _useState2[0],
-          setAnchor = _useState2[1];
-
-      var open = Boolean(anchor);
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
-        ref: anchorRef,
-        color: "whiteOverride",
-        variant: "outlined",
-        onClick: function onClick(e) {
-          if (active) setAnchor(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
-        },
-        sx: {
-          width: "100%",
-          height: "30px",
-          transition: "0.3s",
-          cursor: active ? "pointer" : "default",
-          justifyContent: "space-between",
-          marginRight: "10px",
-          backgroundColor: "#2C323380",
-          opacity: active ? "1" : "0",
-          whiteSpace: "nowrap",
-          "&:hover": {
-            backgroundColor: "grey3.main"
-          }
-        },
-        endIcon: /*#__PURE__*/React__default['default'].createElement(ArrowDropDownRoundedIcon__default['default'], {
-          sx: {
-            pointerEvents: "none"
-          }
-        })
-      }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) || ((_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.name)), /*#__PURE__*/React__default['default'].createElement(Popover, {
-        open: open,
-        anchorEl: anchor,
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        onClose: function onClose() {
-          setAnchor(null);
-        },
-        PaperProps: {
-          sx: {
-            width: anchor === null || anchor === void 0 ? void 0 : anchor.getBoundingClientRect().width,
-            backgroundColor: "#2C323380",
-            borderRadius: "18px",
-            padding: "35px 0 0 0",
-            boxSizing: "border-box",
-            maxHeight: "160px",
-            overflowY: "hidden"
-          }
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-        sx: {
-          maxHeight: "120px",
-          overflowY: "scroll"
-        }
-      }, options === null || options === void 0 ? void 0 : options.map(function (option) {
-        return /*#__PURE__*/React__default['default'].createElement(Stack, {
-          direction: "row",
-          sx: {
-            boxSizing: "border-box",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "100%",
-            height: "100%",
-            padding: "6px 5px 6px 10px",
-            cursor: "pointer",
-            transition: "0.3s",
-            "&:hover": {
-              backgroundColor: "#474D4F80"
-            },
-            "&:hover #added-to-content-icon": {
-              display: option !== null && option !== void 0 && option.added ? "none" : "block",
-              opacity: "1"
-            },
-            "&:hover #remove-from-content-icon": {
-              display: option !== null && option !== void 0 && option.added ? "block" : "none",
-              opacity: option !== null && option !== void 0 && option.added ? "1" : "0"
-            }
-          },
-          onClick: function onClick() {
-            if (onOptionClicked) onOptionClicked(option);
-            setAnchor(null);
-          }
-        }, /*#__PURE__*/React__default['default'].createElement(Text, {
-          sx: {
-            fontSize: "14px",
-            fontWeight: "400"
-          }
-        }, option.name), /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
-          id: "added-to-content-icon",
-          sx: {
-            transition: "0.3s",
-            opacity: option.added ? "1" : "0"
-          }
-        }), /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CloseRounded, {
-          id: "remove-from-content-icon",
-          sx: {
-            transition: "0.3s",
-            display: "none",
-            opacity: "0"
-          }
-        }));
-      }))));
-    };
-
-    var AddContentButton = function AddContentButton(_ref2) {
-      var _item$whitelistContex2, _item$channelPointsCo2, _item$walkOnContext2, _item$discordContext2;
-
-      var item = _ref2.item,
-          hovering = _ref2.hovering,
-          hoveringAddTo = _ref2.hoveringAddTo,
-          setHoveringAddTo = _ref2.setHoveringAddTo,
-          openPremiumModal = _ref2.openPremiumModal,
-          onOptionClicked = _ref2.onOptionClicked,
-          onPlusClick = _ref2.onPlusClick,
-          selectedOption = _ref2.selectedOption,
-          isUnownedPremium = _ref2.isUnownedPremium;
-      var added = false;
-
-      if (item !== null && item !== void 0 && (_item$whitelistContex2 = item.whitelistContext) !== null && _item$whitelistContex2 !== void 0 && _item$whitelistContex2._id && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "BITS") {
-        added = true;
-      } else if (item !== null && item !== void 0 && (_item$channelPointsCo2 = item.channelPointsContext) !== null && _item$channelPointsCo2 !== void 0 && _item$channelPointsCo2._id && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "CHANNEL_POINTS") {
-        added = true;
-      } else if (item !== null && item !== void 0 && (_item$walkOnContext2 = item.walkOnContext) !== null && _item$walkOnContext2 !== void 0 && _item$walkOnContext2._id && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "WALK_ON") {
-        added = true;
-      } else if (item !== null && item !== void 0 && (_item$discordContext2 = item.discordContext) !== null && _item$discordContext2 !== void 0 && _item$discordContext2._id && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === "DISCORD") {
-        added = true;
-      }
-
-      return /*#__PURE__*/React__default['default'].createElement(Stack, {
-        direction: "row",
-        width: hoveringAddTo ? "100%" : "60%",
-        sx: {
-          justifyContent: "end",
-          transition: "0.5s",
-          boxSizing: "border-box",
-          opacity: hovering ? "1" : "0"
-        },
-        onMouseLeave: function onMouseLeave() {
-          setHoveringAddTo(false);
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
-        item: item,
-        active: hoveringAddTo,
-        onOptionClicked: onOptionClicked,
-        selectedOption: selectedOption
-      }), isUnownedPremium ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
-        sx: {
-          width: "30px",
-          height: "30px",
-          backgroundColor: "white.override",
-          "&:hover .open-lock-icon": {
-            display: "flex !important",
-            opacity: "1 !important"
-          },
-          "&:hover .lock-icon": {
-            display: "none !important",
-            opacity: "0 !important"
-          },
-          "&:hover": {
-            backgroundColor: "grey7.main"
-          }
-        },
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          openPremiumModal();
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
-        className: "lock-icon",
-        sx: {
-          transition: "0.3s",
-          color: "notBlack.override",
-          display: "flex",
-          opacity: "1",
-          fontSize: "17px"
-        }
-      }), /*#__PURE__*/React__default['default'].createElement("div", {
-        className: "open-lock-icon",
-        style: {
-          display: "none",
-          opacity: "0"
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
-        sx: {
-          transition: "0.3s",
-          color: "notBlack.override",
-          fontSize: "17px"
-        }
-      }))) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
-        sx: {
-          width: "30px",
-          height: "30px",
-          backgroundColor: "white.override",
-          "&:hover": {
-            backgroundColor: "grey7.main"
-          }
-        },
-        onMouseEnter: function onMouseEnter(e) {
-          e.stopPropagation();
-          setHoveringAddTo(true);
-        },
-        onClick: function onClick() {
-          return onPlusClick(added);
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
-        sx: {
-          transition: "0.3s",
-          color: "notBlack.override",
-          transform: added && "rotate(45deg)"
-        }
-      })));
-    };
+    }); // const AddContentDropdown = ({
+    //     item,
+    //     active,
+    //     onOptionClicked,
+    //     selectedOption,
+    // }) => {
+    //     const options = [
+    //         {
+    //             name: "Channel Points",
+    //             value: "CHANNEL_POINTS",
+    //             added: item?.channelPointsContext?._id,
+    //         },
+    //         { name: "Bits", value: "BITS", added: item?.whitelistContext?._id },
+    //         { name: "WalkOn", value: "WALK_ON", added: item?.walkOnContext?._id },
+    //         { name: "Discord", value: "DISCORD", added: item?.discordContext?._id },
+    //         {
+    //             name: "Sound Emotes",
+    //             value: "SOUND_EMOTES",
+    //             added: item?.soundEmotesContext?._id,
+    //         },
+    //         {
+    //             name: "Add To Group",
+    //             value: "ADD_TO_GROUP",
+    //             added: false,
+    //         },
+    //         {
+    //             name: "Suggest To...",
+    //             value: "SUGGEST",
+    //             added: false,
+    //         },
+    //     ];
+    //     const anchorRef = useRef(null);
+    //     const [anchor, setAnchor] = useState(null);
+    //     const open = Boolean(anchor);
+    //     return (
+    //         <>
+    //             <Button
+    //                 ref={anchorRef}
+    //                 color="whiteOverride"
+    //                 variant="outlined"
+    //                 onClick={(e) => {
+    //                     if (active) setAnchor(anchorRef?.current);
+    //                 }}
+    //                 sx={{
+    //                     width: "100%",
+    //                     height: "30px",
+    //                     transition: "0.3s",
+    //                     cursor: active ? "pointer" : "default",
+    //                     justifyContent: "space-between",
+    //                     marginRight: "10px",
+    //                     backgroundColor: "#2C323380",
+    //                     opacity: active ? "1" : "0",
+    //                     whiteSpace: "nowrap",
+    //                     "&:hover": {
+    //                         backgroundColor: "grey3.main",
+    //                     },
+    //                 }}
+    //                 endIcon={
+    //                     <ArrowDropDownRoundedIcon sx={{ pointerEvents: "none" }} />
+    //                 }
+    //             >
+    //                 {selectedOption?.name || options[0]?.name}
+    //             </Button>
+    //             <Popover
+    //                 open={open}
+    //                 anchorEl={anchor}
+    //                 anchorOrigin={{
+    //                     vertical: "top",
+    //                     horizontal: "left",
+    //                 }}
+    //                 transformOrigin={{
+    //                     vertical: "top",
+    //                     horizontal: "left",
+    //                 }}
+    //                 onClose={() => {
+    //                     setAnchor(null);
+    //                 }}
+    //                 PaperProps={{
+    //                     sx: {
+    //                         width: anchor?.getBoundingClientRect().width,
+    //                         backgroundColor: "#2C323380",
+    //                         borderRadius: "18px",
+    //                         padding: "35px 0 0 0",
+    //                         boxSizing: "border-box",
+    //                         maxHeight: "160px",
+    //                         overflowY: "hidden",
+    //                     },
+    //                 }}
+    //             >
+    //                 <Stack sx={{ maxHeight: "120px", overflowY: "scroll" }}>
+    //                     {options?.map((option) => (
+    //                         <Stack
+    //                             direction="row"
+    //                             sx={{
+    //                                 boxSizing: "border-box",
+    //                                 justifyContent: "space-between",
+    //                                 alignItems: "center",
+    //                                 width: "100%",
+    //                                 height: "100%",
+    //                                 padding: "6px 5px 6px 10px",
+    //                                 cursor: "pointer",
+    //                                 transition: "0.3s",
+    //                                 "&:hover": {
+    //                                     backgroundColor: "#474D4F80",
+    //                                 },
+    //                                 "&:hover #added-to-content-icon": {
+    //                                     display: option?.added ? "none" : "block",
+    //                                     opacity: "1",
+    //                                 },
+    //                                 "&:hover #remove-from-content-icon": {
+    //                                     display: option?.added ? "block" : "none",
+    //                                     opacity: option?.added ? "1" : "0",
+    //                                 },
+    //                             }}
+    //                             onClick={() => {
+    //                                 if (onOptionClicked) onOptionClicked(option);
+    //                                 setAnchor(null);
+    //                             }}
+    //                         >
+    //                             <Text
+    //                                 sx={{
+    //                                     fontSize: "14px",
+    //                                     fontWeight: "400",
+    //                                 }}
+    //                             >
+    //                                 {option.name}
+    //                             </Text>
+    //                             <CheckRounded
+    //                                 id="added-to-content-icon"
+    //                                 sx={{
+    //                                     transition: "0.3s",
+    //                                     opacity: option.added ? "1" : "0",
+    //                                 }}
+    //                             />
+    //                             <CloseRounded
+    //                                 id="remove-from-content-icon"
+    //                                 sx={{
+    //                                     transition: "0.3s",
+    //                                     display: "none",
+    //                                     opacity: "0",
+    //                                 }}
+    //                             />
+    //                         </Stack>
+    //                     ))}
+    //                 </Stack>
+    //             </Popover>
+    //         </>
+    //     );
+    // };
+    // const AddContentButton = ({
+    //     item,
+    //     hovering,
+    //     hoveringAddTo,
+    //     setHoveringAddTo,
+    //     openPremiumModal,
+    //     onOptionClicked,
+    //     onPlusClick,
+    //     selectedOption,
+    //     isUnownedPremium,
+    // }) => {
+    //     let added = false;
+    //     if (item?.whitelistContext?._id && selectedOption?.value === "BITS") {
+    //         added = true;
+    //     } else if (
+    //         item?.channelPointsContext?._id &&
+    //         selectedOption?.value === "CHANNEL_POINTS"
+    //     ) {
+    //         added = true;
+    //     } else if (
+    //         item?.walkOnContext?._id &&
+    //         selectedOption?.value === "WALK_ON"
+    //     ) {
+    //         added = true;
+    //     } else if (
+    //         item?.discordContext?._id &&
+    //         selectedOption?.value === "DISCORD"
+    //     ) {
+    //         added = true;
+    //     }
+    //     return (
+    //         <Stack
+    //             direction="row"
+    //             width={hoveringAddTo ? "100%" : "60%"}
+    //             sx={{
+    //                 justifyContent: "end",
+    //                 transition: "0.5s",
+    //                 boxSizing: "border-box",
+    //                 opacity: hovering ? "1" : "0",
+    //             }}
+    //             onMouseLeave={() => {
+    //                 setHoveringAddTo(false);
+    //             }}
+    //         >
+    //             <AddContentDropdown
+    //                 item={item}
+    //                 active={hoveringAddTo}
+    //                 onOptionClicked={onOptionClicked}
+    //                 selectedOption={selectedOption}
+    //             />
+    //             {isUnownedPremium ? (
+    //                 <IconButton
+    //                     sx={{
+    //                         width: "30px",
+    //                         height: "30px",
+    //                         backgroundColor: "white.override",
+    //                         "&:hover .open-lock-icon": {
+    //                             display: "flex !important",
+    //                             opacity: "1 !important",
+    //                         },
+    //                         "&:hover .lock-icon": {
+    //                             display: "none !important",
+    //                             opacity: "0 !important",
+    //                         },
+    //                         "&:hover": {
+    //                             backgroundColor: "grey7.main",
+    //                         },
+    //                     }}
+    //                     onClick={(e) => {
+    //                         e.stopPropagation();
+    //                         openPremiumModal();
+    //                     }}
+    //                 >
+    //                     <LockRoundedIcon
+    //                         className="lock-icon"
+    //                         sx={{
+    //                             transition: "0.3s",
+    //                             color: "notBlack.override",
+    //                             display: "flex",
+    //                             opacity: "1",
+    //                             fontSize: "17px",
+    //                         }}
+    //                     />
+    //                     <div
+    //                         className="open-lock-icon"
+    //                         style={{ display: "none", opacity: "0" }}
+    //                     >
+    //                         <OpenLockIcon
+    //                             sx={{
+    //                                 transition: "0.3s",
+    //                                 color: "notBlack.override",
+    //                                 fontSize: "17px",
+    //                             }}
+    //                         />
+    //                     </div>
+    //                 </IconButton>
+    //             ) : (
+    //                 <IconButton
+    //                     sx={{
+    //                         width: "30px",
+    //                         height: "30px",
+    //                         backgroundColor: "white.override",
+    //                         "&:hover": {
+    //                             backgroundColor: "grey7.main",
+    //                         },
+    //                     }}
+    //                     onMouseEnter={(e) => {
+    //                         e.stopPropagation();
+    //                         setHoveringAddTo(true);
+    //                     }}
+    //                     onClick={() => onPlusClick(added)}
+    //                 >
+    //                     <AddRoundedIcon
+    //                         sx={{
+    //                             transition: "0.3s",
+    //                             color: "notBlack.override",
+    //                             transform: added && "rotate(45deg)",
+    //                         }}
+    //                     />
+    //                 </IconButton>
+    //             )}
+    //         </Stack>
+    //     );
+    // };
 
-    var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
-      var saved = _ref3.saved,
-          count = _ref3.count,
-          onClick = _ref3.onClick;
+    var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
+      var saved = _ref.saved,
+          count = _ref.count,
+          onClick = _ref.onClick;
       var formatter = Intl.NumberFormat("en", {
         notation: "compact"
       });
@@ -2025,36 +2038,36 @@
         }
       }, savedCount));
     };
-    var AddedToIcons = function AddedToIcons(_ref4) {
-      var _item$channelPointsCo3, _item$whitelistContex3, _item$walkOnContext3;
+    var AddedToIcons = function AddedToIcons(_ref2) {
+      var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
 
-      var item = _ref4.item,
-          hovering = _ref4.hovering,
-          _ref4$hide = _ref4.hide,
-          hide = _ref4$hide === void 0 ? false : _ref4$hide;
+      var item = _ref2.item,
+          hovering = _ref2.hovering,
+          _ref2$hide = _ref2.hide,
+          hide = _ref2$hide === void 0 ? false : _ref2$hide;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
           transition: "0.3s",
           opacity: hide ? "0" : hovering ? "1" : "0"
         }
-      }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo3 = item.channelPointsContext) === null || _item$channelPointsCo3 === void 0 ? void 0 : _item$channelPointsCo3._id) && /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
+      }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
         sx: {
           fontSize: "15px"
         }
-      }), (item === null || item === void 0 ? void 0 : (_item$whitelistContex3 = item.whitelistContext) === null || _item$whitelistContex3 === void 0 ? void 0 : _item$whitelistContex3._id) && /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
+      }), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
         sx: {
           fontSize: "15px"
         }
-      }), (item === null || item === void 0 ? void 0 : (_item$walkOnContext3 = item.walkOnContext) === null || _item$walkOnContext3 === void 0 ? void 0 : _item$walkOnContext3._id) && /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
+      }), (item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id) && /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
         sx: {
           fontSize: "15px"
         }
       }));
     };
 
-    var RatingInfo = function RatingInfo(_ref5) {
-      var rating = _ref5.rating;
+    var RatingInfo = function RatingInfo(_ref3) {
+      var rating = _ref3.rating;
 
       switch (rating) {
         case "G":
@@ -2227,22 +2240,22 @@
     // };
 
 
-    var ReportedWarning = function ReportedWarning(_ref6) {
-      var showWarning = _ref6.showWarning,
-          blacklisted = _ref6.blacklisted,
-          saved = _ref6.saved,
-          count = _ref6.count,
-          onClick = _ref6.onClick;
+    var ReportedWarning = function ReportedWarning(_ref4) {
+      var showWarning = _ref4.showWarning,
+          blacklisted = _ref4.blacklisted,
+          saved = _ref4.saved,
+          count = _ref4.count,
+          onClick = _ref4.onClick;
 
-      var _useState3 = React.useState(showWarning),
-          _useState4 = _slicedToArray__default['default'](_useState3, 2),
-          show = _useState4[0],
-          setShow = _useState4[1];
+      var _useState = React.useState(showWarning),
+          _useState2 = _slicedToArray__default['default'](_useState, 2),
+          show = _useState2[0],
+          setShow = _useState2[1];
 
-      var _useState5 = React.useState(false),
-          _useState6 = _slicedToArray__default['default'](_useState5, 2),
-          hovering = _useState6[0],
-          setHovering = _useState6[1];
+      var _useState3 = React.useState(false),
+          _useState4 = _slicedToArray__default['default'](_useState3, 2),
+          hovering = _useState4[0],
+          setHovering = _useState4[1];
 
       var renderInfo = function renderInfo() {
         if (blacklisted) {
@@ -2335,17 +2348,18 @@
       })), renderInfo());
     };
 
-    var BlerpTopRow = function BlerpTopRow(_ref7) {
-      var bite = _ref7.bite,
-          hovering = _ref7.hovering,
-          onPlusClick = _ref7.onPlusClick,
-          _onOptionClicked = _ref7.onOptionClicked,
-          selectedOption = _ref7.selectedOption;
+    var BlerpTopRow = function BlerpTopRow(_ref5) {
+      var bite = _ref5.bite,
+          hovering = _ref5.hovering,
+          onPlusClick = _ref5.onPlusClick,
+          _onOptionClicked = _ref5.onOptionClicked,
+          selectedOption = _ref5.selectedOption,
+          renderAddContentButton = _ref5.renderAddContentButton;
 
-      var _useState7 = React.useState(false),
-          _useState8 = _slicedToArray__default['default'](_useState7, 2),
-          hoveringAddTo = _useState8[0],
-          setHoveringAddTo = _useState8[1];
+      var _useState5 = React.useState(false),
+          _useState6 = _slicedToArray__default['default'](_useState5, 2),
+          hoveringAddTo = _useState6[0],
+          setHoveringAddTo = _useState6[1];
 
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
@@ -2367,7 +2381,7 @@
       }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
         item: bite,
         hovering: hovering
-      })), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+      })), renderAddContentButton({
         item: bite,
         hovering: hovering,
         hoveringAddTo: hoveringAddTo,
@@ -2380,46 +2394,50 @@
       }));
     };
 
-    var NewBlerp$1 = function NewBlerp(_ref8) {
+    var NewBlerp$1 = function NewBlerp(_ref6) {
       var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
 
-      var Waveform = _ref8.Waveform,
-          bite = _ref8.bite,
-          playState = _ref8.playState,
-          play = _ref8.play,
-          _ref8$onTitleClick = _ref8.onTitleClick,
-          onTitleClick = _ref8$onTitleClick === void 0 ? function () {
+      var Waveform = _ref6.Waveform,
+          bite = _ref6.bite,
+          playState = _ref6.playState,
+          play = _ref6.play,
+          _ref6$onTitleClick = _ref6.onTitleClick,
+          onTitleClick = _ref6$onTitleClick === void 0 ? function () {
         console.log("onTitleClick");
-      } : _ref8$onTitleClick,
-          _ref8$onUsernameClick = _ref8.onUsernameClick,
-          onUsernameClick = _ref8$onUsernameClick === void 0 ? function () {
+      } : _ref6$onTitleClick,
+          _ref6$onUsernameClick = _ref6.onUsernameClick,
+          onUsernameClick = _ref6$onUsernameClick === void 0 ? function () {
         console.log("onUsernameClick");
-      } : _ref8$onUsernameClick,
-          _ref8$onFavoriteClick = _ref8.onFavoriteClick,
-          onFavoriteClick = _ref8$onFavoriteClick === void 0 ? function () {
+      } : _ref6$onUsernameClick,
+          _ref6$onFavoriteClick = _ref6.onFavoriteClick,
+          onFavoriteClick = _ref6$onFavoriteClick === void 0 ? function () {
         console.log("onFavoriteClick");
-      } : _ref8$onFavoriteClick,
-          _ref8$onAddToPlace = _ref8.onAddToPlace,
-          onAddToPlace = _ref8$onAddToPlace === void 0 ? function () {
+      } : _ref6$onFavoriteClick,
+          _ref6$onAddToPlace = _ref6.onAddToPlace,
+          onAddToPlace = _ref6$onAddToPlace === void 0 ? function () {
         console.log("onAddToPlace");
-      } : _ref8$onAddToPlace,
-          _ref8$onOptionClicked = _ref8.onOptionClicked,
-          onOptionClicked = _ref8$onOptionClicked === void 0 ? function () {
+      } : _ref6$onAddToPlace,
+          _ref6$onOptionClicked = _ref6.onOptionClicked,
+          onOptionClicked = _ref6$onOptionClicked === void 0 ? function () {
         console.log("onAddToPlace");
-      } : _ref8$onOptionClicked,
-          selectedOption = _ref8.selectedOption,
-          _ref8$trending = _ref8.trending,
-          trending = _ref8$trending === void 0 ? false : _ref8$trending;
+      } : _ref6$onOptionClicked,
+          selectedOption = _ref6.selectedOption,
+          _ref6$trending = _ref6.trending,
+          trending = _ref6$trending === void 0 ? false : _ref6$trending,
+          _ref6$renderAddConten = _ref6.renderAddContentButton,
+          renderAddContentButton = _ref6$renderAddConten === void 0 ? function () {
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+      } : _ref6$renderAddConten;
+
+      var _useState7 = React.useState(false),
+          _useState8 = _slicedToArray__default['default'](_useState7, 2),
+          hovering = _useState8[0],
+          setHovering = _useState8[1];
 
       var _useState9 = React.useState(false),
           _useState10 = _slicedToArray__default['default'](_useState9, 2),
-          hovering = _useState10[0],
-          setHovering = _useState10[1];
-
-      var _useState11 = React.useState(false),
-          _useState12 = _slicedToArray__default['default'](_useState11, 2),
-          addedToPlace = _useState12[0],
-          setAddedToPlace = _useState12[1];
+          addedToPlace = _useState10[0],
+          setAddedToPlace = _useState10[1];
 
       var renderPlayStateIcon = function renderPlayStateIcon() {
         if (playState === "played") {
@@ -2558,7 +2576,8 @@
         onOptionClicked: onOptionClicked,
         hovering: hovering,
         onPlusClick: handleAddToPlace,
-        selectedOption: selectedOption
+        selectedOption: selectedOption,
+        renderAddContentButton: renderAddContentButton
       }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
           transition: "0.3s",
@@ -6119,7 +6138,7 @@
         sx: {
           width: "100%",
           "& svg": {
-            color: "white.override"
+            color: "inherit"
           }
         }
       }, snackbarValues.message)), props.children);