@blerp/design 1.2.19 → 1.2.21

package/dist/index.cjs.js

@@ -14,7 +14,7 @@ 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/DoNotDisturbRounded');
+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');
@@ -91,6 +91,7 @@ var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkO
 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);
@@ -1612,7 +1613,9 @@ var UserCard$1 = function UserCard(_ref) {
       position: "absolute",
       bottom: collapsed ? "0" : "5px",
       right: collapsed ? "0" : "5px",
-      fontSize: "17px"
+      fontSize: "17px",
+      backgroundColor: "grey4.main",
+      borderRadius: "50%"
     }
   })), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
@@ -1934,9 +1937,10 @@ var AddContentButton = function AddContentButton(_ref2) {
   var added = false;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
-    width: "100%",
+    width: hoveringAddTo ? "100%" : "60%",
     sx: {
-      transition: "0.3s",
+      justifyContent: "end",
+      transition: "0.5s",
       boxSizing: "border-box",
       opacity: hovering ? "1" : "0"
     },
@@ -2213,6 +2217,7 @@ 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;
@@ -2228,6 +2233,28 @@ var ReportedWarning = function ReportedWarning(_ref6) {
       setHovering = _useState6[1];
 
   var renderInfo = function renderInfo() {
+    if (blacklisted) {
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DoNotDisturbRoundedIcon__default['default'], {
+        sx: {
+          marginBottom: "20px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement(Text, {
+        sx: {
+          fontSize: "18px",
+          fontWeight: "600",
+          color: "white.override"
+        }
+      }, "Blocked"), hovering && /*#__PURE__*/React__default['default'].createElement(Button, {
+        color: "whiteOverride",
+        variant: "outlined",
+        sx: {
+          marginTop: "20px"
+        },
+        onClick: function onClick() {
+          setShow(false);
+        }
+      }, "View"));
+    }
 
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(WarningRoundedIcon__default['default'], {
       sx: {
@@ -2340,13 +2367,30 @@ var BlerpTopRow = function BlerpTopRow(_ref7) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref8) {
-  var _bite$image, _bite$image$original;
+  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,
-      onTitleClick = _ref8.onTitleClick;
+      _ref8$onTitleClick = _ref8.onTitleClick,
+      onTitleClick = _ref8$onTitleClick === void 0 ? function () {
+    console.log("onTitleClick");
+  } : _ref8$onTitleClick,
+      _ref8$onUsernameClick = _ref8.onUsernameClick,
+      onUsernameClick = _ref8$onUsernameClick === void 0 ? function () {
+    console.log("onUsernameClick");
+  } : _ref8$onUsernameClick,
+      _ref8$onFavoriteClick = _ref8.onFavoriteClick,
+      onFavoriteClick = _ref8$onFavoriteClick === void 0 ? function () {
+    console.log("onFavoriteClick");
+  } : _ref8$onFavoriteClick,
+      _ref8$onAddToPlace = _ref8.onAddToPlace,
+      onAddToPlace = _ref8$onAddToPlace === void 0 ? function () {
+    console.log("onAddToPlace");
+  } : _ref8$onAddToPlace,
+      _ref8$trending = _ref8.trending,
+      trending = _ref8$trending === void 0 ? false : _ref8$trending;
 
   var _useState9 = React.useState(false),
       _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2358,11 +2402,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       addedToPlace = _useState12[0],
       setAddedToPlace = _useState12[1];
 
-  var formatter = Intl.NumberFormat("en", {
-    notation: "compact"
-  });
-  var saveCount = formatter.format(bite === null || bite === void 0 ? void 0 : bite.totalSaveCount);
-
   var renderPlayStateIcon = function renderPlayStateIcon() {
     if (playState === "played") {
       return /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -2429,9 +2468,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     });
   };
 
-  var handleAddToPlace = function handleAddToPlace(place) {
+  var handleAddToPlace = function handleAddToPlace(e) {
     setAddedToPlace(true);
-    console.log(place);
+    onAddToPlace(); // console.log(e, place);
+
     setTimeout(function () {
       setAddedToPlace(false);
     }, 2000);
@@ -2446,9 +2486,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
     }
   }, /*#__PURE__*/React__default['default'].createElement(ReportedWarning, {
-    showWarning: false,
+    showWarning: (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$reportedContent = bite.reportedContentIds) === null || _bite$reportedContent === void 0 ? void 0 : _bite$reportedContent.length) > 3,
+    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: saveCount,
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
     onClick: function onClick() {
       return console.log("clicked save");
     }
@@ -2539,7 +2580,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       width: "100%",
       justifyContent: "start"
     }
-  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+  }, trending && /*#__PURE__*/React__default['default'].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -2594,8 +2635,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     result: "shape"
   })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-    count: saveCount
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+    onClick: onFavoriteClick
   }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
+    onUsernameClick: onUsernameClick,
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
   }), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {

package/dist/index.esm.js

@@ -11,7 +11,7 @@ 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/DoNotDisturbRounded';
+import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
@@ -1537,7 +1537,9 @@ var UserCard$1 = function UserCard(_ref) {
       position: "absolute",
       bottom: collapsed ? "0" : "5px",
       right: collapsed ? "0" : "5px",
-      fontSize: "17px"
+      fontSize: "17px",
+      backgroundColor: "grey4.main",
+      borderRadius: "50%"
     }
   })), /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
@@ -1859,9 +1861,10 @@ var AddContentButton = function AddContentButton(_ref2) {
   var added = false;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    width: "100%",
+    width: hoveringAddTo ? "100%" : "60%",
     sx: {
-      transition: "0.3s",
+      justifyContent: "end",
+      transition: "0.5s",
       boxSizing: "border-box",
       opacity: hovering ? "1" : "0"
     },
@@ -2138,6 +2141,7 @@ 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;
@@ -2153,6 +2157,28 @@ var ReportedWarning = function ReportedWarning(_ref6) {
       setHovering = _useState6[1];
 
   var renderInfo = function renderInfo() {
+    if (blacklisted) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DoNotDisturbRoundedIcon, {
+        sx: {
+          marginBottom: "20px"
+        }
+      }), /*#__PURE__*/React__default.createElement(Text, {
+        sx: {
+          fontSize: "18px",
+          fontWeight: "600",
+          color: "white.override"
+        }
+      }, "Blocked"), hovering && /*#__PURE__*/React__default.createElement(Button, {
+        color: "whiteOverride",
+        variant: "outlined",
+        sx: {
+          marginTop: "20px"
+        },
+        onClick: function onClick() {
+          setShow(false);
+        }
+      }, "View"));
+    }
 
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningRoundedIcon, {
       sx: {
@@ -2265,13 +2291,30 @@ var BlerpTopRow = function BlerpTopRow(_ref7) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref8) {
-  var _bite$image, _bite$image$original;
+  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,
-      onTitleClick = _ref8.onTitleClick;
+      _ref8$onTitleClick = _ref8.onTitleClick,
+      onTitleClick = _ref8$onTitleClick === void 0 ? function () {
+    console.log("onTitleClick");
+  } : _ref8$onTitleClick,
+      _ref8$onUsernameClick = _ref8.onUsernameClick,
+      onUsernameClick = _ref8$onUsernameClick === void 0 ? function () {
+    console.log("onUsernameClick");
+  } : _ref8$onUsernameClick,
+      _ref8$onFavoriteClick = _ref8.onFavoriteClick,
+      onFavoriteClick = _ref8$onFavoriteClick === void 0 ? function () {
+    console.log("onFavoriteClick");
+  } : _ref8$onFavoriteClick,
+      _ref8$onAddToPlace = _ref8.onAddToPlace,
+      onAddToPlace = _ref8$onAddToPlace === void 0 ? function () {
+    console.log("onAddToPlace");
+  } : _ref8$onAddToPlace,
+      _ref8$trending = _ref8.trending,
+      trending = _ref8$trending === void 0 ? false : _ref8$trending;
 
   var _useState9 = useState(false),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -2283,11 +2326,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       addedToPlace = _useState12[0],
       setAddedToPlace = _useState12[1];
 
-  var formatter = Intl.NumberFormat("en", {
-    notation: "compact"
-  });
-  var saveCount = formatter.format(bite === null || bite === void 0 ? void 0 : bite.totalSaveCount);
-
   var renderPlayStateIcon = function renderPlayStateIcon() {
     if (playState === "played") {
       return /*#__PURE__*/React__default.createElement("svg", {
@@ -2354,9 +2392,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     });
   };
 
-  var handleAddToPlace = function handleAddToPlace(place) {
+  var handleAddToPlace = function handleAddToPlace(e) {
     setAddedToPlace(true);
-    console.log(place);
+    onAddToPlace(); // console.log(e, place);
+
     setTimeout(function () {
       setAddedToPlace(false);
     }, 2000);
@@ -2371,9 +2410,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
     }
   }, /*#__PURE__*/React__default.createElement(ReportedWarning, {
-    showWarning: false,
+    showWarning: (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$reportedContent = bite.reportedContentIds) === null || _bite$reportedContent === void 0 ? void 0 : _bite$reportedContent.length) > 3,
+    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: saveCount,
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
     onClick: function onClick() {
       return console.log("clicked save");
     }
@@ -2464,7 +2504,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       width: "100%",
       justifyContent: "start"
     }
-  }, /*#__PURE__*/React__default.createElement("svg", {
+  }, trending && /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
@@ -2519,8 +2559,10 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     result: "shape"
   })))), /*#__PURE__*/React__default.createElement(FavoriteIconWithCounter, {
     saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-    count: saveCount
+    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+    onClick: onFavoriteClick
   }), /*#__PURE__*/React__default.createElement(UsernameWithPopout$1, {
+    onUsernameClick: onUsernameClick,
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
   }), /*#__PURE__*/React__default.createElement(Text, {
     sx: {

package/dist/index.umd.js

@@ -1,7 +1,7 @@
 (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/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
     typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@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/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.AddRoundedIcon, global.ArrowDropDownRoundedIcon, null, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+    (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._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
 }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRoundedIcon, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,6 +36,7 @@
     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);
@@ -1557,7 +1558,9 @@
           position: "absolute",
           bottom: collapsed ? "0" : "5px",
           right: collapsed ? "0" : "5px",
-          fontSize: "17px"
+          fontSize: "17px",
+          backgroundColor: "grey4.main",
+          borderRadius: "50%"
         }
       })), /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
@@ -1879,9 +1882,10 @@
       var added = false;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
-        width: "100%",
+        width: hoveringAddTo ? "100%" : "60%",
         sx: {
-          transition: "0.3s",
+          justifyContent: "end",
+          transition: "0.5s",
           boxSizing: "border-box",
           opacity: hovering ? "1" : "0"
         },
@@ -2158,6 +2162,7 @@
 
     var ReportedWarning = function ReportedWarning(_ref6) {
       var showWarning = _ref6.showWarning,
+          blacklisted = _ref6.blacklisted,
           saved = _ref6.saved,
           count = _ref6.count,
           onClick = _ref6.onClick;
@@ -2173,6 +2178,28 @@
           setHovering = _useState6[1];
 
       var renderInfo = function renderInfo() {
+        if (blacklisted) {
+          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DoNotDisturbRoundedIcon__default['default'], {
+            sx: {
+              marginBottom: "20px"
+            }
+          }), /*#__PURE__*/React__default['default'].createElement(Text, {
+            sx: {
+              fontSize: "18px",
+              fontWeight: "600",
+              color: "white.override"
+            }
+          }, "Blocked"), hovering && /*#__PURE__*/React__default['default'].createElement(Button, {
+            color: "whiteOverride",
+            variant: "outlined",
+            sx: {
+              marginTop: "20px"
+            },
+            onClick: function onClick() {
+              setShow(false);
+            }
+          }, "View"));
+        }
 
         return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(WarningRoundedIcon__default['default'], {
           sx: {
@@ -2285,13 +2312,30 @@
     };
 
     var NewBlerp$1 = function NewBlerp(_ref8) {
-      var _bite$image, _bite$image$original;
+      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,
-          onTitleClick = _ref8.onTitleClick;
+          _ref8$onTitleClick = _ref8.onTitleClick,
+          onTitleClick = _ref8$onTitleClick === void 0 ? function () {
+        console.log("onTitleClick");
+      } : _ref8$onTitleClick,
+          _ref8$onUsernameClick = _ref8.onUsernameClick,
+          onUsernameClick = _ref8$onUsernameClick === void 0 ? function () {
+        console.log("onUsernameClick");
+      } : _ref8$onUsernameClick,
+          _ref8$onFavoriteClick = _ref8.onFavoriteClick,
+          onFavoriteClick = _ref8$onFavoriteClick === void 0 ? function () {
+        console.log("onFavoriteClick");
+      } : _ref8$onFavoriteClick,
+          _ref8$onAddToPlace = _ref8.onAddToPlace,
+          onAddToPlace = _ref8$onAddToPlace === void 0 ? function () {
+        console.log("onAddToPlace");
+      } : _ref8$onAddToPlace,
+          _ref8$trending = _ref8.trending,
+          trending = _ref8$trending === void 0 ? false : _ref8$trending;
 
       var _useState9 = React.useState(false),
           _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2303,11 +2347,6 @@
           addedToPlace = _useState12[0],
           setAddedToPlace = _useState12[1];
 
-      var formatter = Intl.NumberFormat("en", {
-        notation: "compact"
-      });
-      var saveCount = formatter.format(bite === null || bite === void 0 ? void 0 : bite.totalSaveCount);
-
       var renderPlayStateIcon = function renderPlayStateIcon() {
         if (playState === "played") {
           return /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -2374,9 +2413,10 @@
         });
       };
 
-      var handleAddToPlace = function handleAddToPlace(place) {
+      var handleAddToPlace = function handleAddToPlace(e) {
         setAddedToPlace(true);
-        console.log(place);
+        onAddToPlace(); // console.log(e, place);
+
         setTimeout(function () {
           setAddedToPlace(false);
         }, 2000);
@@ -2391,9 +2431,10 @@
           background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
         }
       }, /*#__PURE__*/React__default['default'].createElement(ReportedWarning, {
-        showWarning: false,
+        showWarning: (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$reportedContent = bite.reportedContentIds) === null || _bite$reportedContent === void 0 ? void 0 : _bite$reportedContent.length) > 3,
+        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: saveCount,
+        count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
         onClick: function onClick() {
           return console.log("clicked save");
         }
@@ -2484,7 +2525,7 @@
           width: "100%",
           justifyContent: "start"
         }
-      }, /*#__PURE__*/React__default['default'].createElement("svg", {
+      }, trending && /*#__PURE__*/React__default['default'].createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         width: "16",
         height: "16",
@@ -2539,8 +2580,10 @@
         result: "shape"
       })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
         saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-        count: saveCount
+        count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
+        onClick: onFavoriteClick
       }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
+        onUsernameClick: onUsernameClick,
         user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
       }), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {

package/package.json

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