@blerp/design 1.2.32 → 1.2.33

package/dist/index.esm.js

@@ -6,11 +6,11 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, CheckRounded, CloseRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
-import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
+import '@mui/icons-material/ArrowDropDownRounded';
 import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
@@ -1705,270 +1705,284 @@ var _templateObject$g, _templateObject2$a;
 var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\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.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\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 = useRef(null);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      anchor = _useState2[0],
-      setAnchor = _useState2[1];
-
-  var open = Boolean(anchor);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__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.createElement(ArrowDropDownRoundedIcon, {
-      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.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.createElement(Stack, {
-    sx: {
-      maxHeight: "120px",
-      overflowY: "scroll"
-    }
-  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
-    return /*#__PURE__*/React__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.createElement(Text, {
-      sx: {
-        fontSize: "14px",
-        fontWeight: "400"
-      }
-    }, option.name), /*#__PURE__*/React__default.createElement(CheckRounded, {
-      id: "added-to-content-icon",
-      sx: {
-        transition: "0.3s",
-        opacity: option.added ? "1" : "0"
-      }
-    }), /*#__PURE__*/React__default.createElement(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.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.createElement(AddContentDropdown, {
-    item: item,
-    active: hoveringAddTo,
-    onOptionClicked: onOptionClicked,
-    selectedOption: selectedOption
-  }), isUnownedPremium ? /*#__PURE__*/React__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.createElement(LockRoundedIcon, {
-    className: "lock-icon",
-    sx: {
-      transition: "0.3s",
-      color: "notBlack.override",
-      display: "flex",
-      opacity: "1",
-      fontSize: "17px"
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "open-lock-icon",
-    style: {
-      display: "none",
-      opacity: "0"
-    }
-  }, /*#__PURE__*/React__default.createElement(OpenLockIcon, {
-    sx: {
-      transition: "0.3s",
-      color: "notBlack.override",
-      fontSize: "17px"
-    }
-  }))) : /*#__PURE__*/React__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.createElement(AddRoundedIcon, {
-    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"
   });
@@ -2004,36 +2018,36 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
     }
   }, 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.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.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.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.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.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.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.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":
@@ -2206,22 +2220,22 @@ var RatingInfo = function RatingInfo(_ref5) {
 // };
 
 
-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 = useState(showWarning),
-      _useState4 = _slicedToArray(_useState3, 2),
-      show = _useState4[0],
-      setShow = _useState4[1];
+  var _useState = useState(showWarning),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hovering = _useState6[0],
-      setHovering = _useState6[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hovering = _useState4[0],
+      setHovering = _useState4[1];
 
   var renderInfo = function renderInfo() {
     if (blacklisted) {
@@ -2314,17 +2328,18 @@ var ReportedWarning = function ReportedWarning(_ref6) {
   })), 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 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      hoveringAddTo = _useState8[0],
-      setHoveringAddTo = _useState8[1];
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hoveringAddTo = _useState6[0],
+      setHoveringAddTo = _useState6[1];
 
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
@@ -2346,7 +2361,7 @@ var BlerpTopRow = function BlerpTopRow(_ref7) {
   }), /*#__PURE__*/React__default.createElement(AddedToIcons, {
     item: bite,
     hovering: hovering
-  })), /*#__PURE__*/React__default.createElement(AddContentButton, {
+  })), renderAddContentButton({
     item: bite,
     hovering: hovering,
     hoveringAddTo: hoveringAddTo,
@@ -2359,46 +2374,50 @@ var BlerpTopRow = function BlerpTopRow(_ref7) {
   }));
 };
 
-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.createElement(React__default.Fragment, null);
+  } : _ref6$renderAddConten;
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      hovering = _useState8[0],
+      setHovering = _useState8[1];
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
-      hovering = _useState10[0],
-      setHovering = _useState10[1];
-
-  var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      addedToPlace = _useState12[0],
-      setAddedToPlace = _useState12[1];
+      addedToPlace = _useState10[0],
+      setAddedToPlace = _useState10[1];
 
   var renderPlayStateIcon = function renderPlayStateIcon() {
     if (playState === "played") {
@@ -2537,7 +2556,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     onOptionClicked: onOptionClicked,
     hovering: hovering,
     onPlusClick: handleAddToPlace,
-    selectedOption: selectedOption
+    selectedOption: selectedOption,
+    renderAddContentButton: renderAddContentButton
   }), /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
       transition: "0.3s",
@@ -6098,7 +6118,7 @@ var SnackbarProvider = function SnackbarProvider(props) {
     sx: {
       width: "100%",
       "& svg": {
-        color: "white.override"
+        color: "inherit"
       }
     }
   }, snackbarValues.message)), props.children);