@blerp/design 1.2.31 → 1.2.33

package/dist/index.cjs.js

@@ -13,13 +13,14 @@ var iconsMaterial = require('@mui/icons-material');
 var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
 var AddRoundedIcon = require('@mui/icons-material/AddRounded');
-var ArrowDropDownRoundedIcon = require('@mui/icons-material/ArrowDropDownRounded');
+require('@mui/icons-material/ArrowDropDownRounded');
 var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
 var FavoriteIcon = require('@mui/icons-material/Favorite');
 var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
 var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
 var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
 var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
@@ -27,7 +28,6 @@ var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
 var reactPalette = require('react-palette');
 var _typeof = require('@babel/runtime/helpers/typeof');
 var KeyboardArrowRightRoundedIcon = require('@mui/icons-material/KeyboardArrowRightRounded');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
 var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
@@ -90,20 +90,19 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
 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);
 var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedIcon);
 var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
 var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
 var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
 var KeyboardArrowRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowRightRoundedIcon);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
 var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
 var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
@@ -1693,11 +1692,15 @@ var UserCard$1 = function UserCard(_ref) {
   }, "created")))));
 };
 
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
   var user = _ref.user,
       onUsernameClick = _ref.onUsernameClick,
       onFollowerClick = _ref.onFollowerClick,
-      onCreatedClick = _ref.onCreatedClick;
+      onCreatedClick = _ref.onCreatedClick,
+      textStyle = _ref.textStyle;
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -1757,7 +1760,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
     collapsed: true,
     user: user
   })), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
+    sx: _objectSpread$6({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -1769,7 +1772,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
       "&:hover": {
         textDecoration: "underline"
       }
-    }
+    }, textStyle)
   }, user === null || user === void 0 ? void 0 : user.username));
 };
 
@@ -1777,270 +1780,284 @@ var _templateObject$g, _templateObject2$a;
 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"
   });
@@ -2076,36 +2093,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['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":
@@ -2278,22 +2295,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 = 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) {
@@ -2386,17 +2403,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 = 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",
@@ -2418,7 +2436,7 @@ var BlerpTopRow = function BlerpTopRow(_ref7) {
   }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
     item: bite,
     hovering: hovering
-  })), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+  })), renderAddContentButton({
     item: bite,
     hovering: hovering,
     hoveringAddTo: hoveringAddTo,
@@ -2431,46 +2449,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['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") {
@@ -2559,9 +2581,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     blacklisted: bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex2 = bite.blacklistContext) === null || _bite$blacklistContex2 === void 0 ? void 0 : _bite$blacklistContex2._id,
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
     count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
-    onClick: function onClick() {
-      return console.log("clicked save");
-    }
+    onClick: onFavoriteClick
   }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
@@ -2611,7 +2631,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     onOptionClicked: onOptionClicked,
     hovering: hovering,
     onPlusClick: handleAddToPlace,
-    selectedOption: selectedOption
+    selectedOption: selectedOption,
+    renderAddContentButton: renderAddContentButton
   }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       transition: "0.3s",
@@ -6172,7 +6193,7 @@ var SnackbarProvider = function SnackbarProvider(props) {
     sx: {
       width: "100%",
       "& svg": {
-        color: "white.override"
+        color: "inherit"
       }
     }
   }, snackbarValues.message)), props.children);