@blerp/design 1.2.17 → 1.2.19

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/DoNotDisturbRounded'), 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/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '@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, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, 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, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, _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';
+    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));
+}(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 }; }
 
@@ -1002,7 +1002,7 @@
       })))));
     };
 
-    var BlerpTopRow = function BlerpTopRow(_ref) {
+    var BlerpTopRow$1 = function BlerpTopRow(_ref) {
       var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
       var secondaryActionButton = _ref.secondaryActionButton,
@@ -1446,7 +1446,7 @@
         getColors: function getColors(colors) {
           return setProfileColors(colors);
         }
-      }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+      }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow$1, {
         bite: bite,
         isOwner: isOwner,
         sizeParams: sizeParams,
@@ -1521,14 +1521,15 @@
       var user = _ref.user,
           onUsernameClick = _ref.onUsernameClick,
           onFollowerClick = _ref.onFollowerClick,
-          onCreatedClick = _ref.onCreatedClick;
+          onCreatedClick = _ref.onCreatedClick,
+          collapsed = _ref.collapsed;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
-          backgroundColor: "grey3.main",
+          backgroundColor: "grey4.main",
           minWidth: "280px",
           maxWidth: "320px",
-          height: "121px",
+          height: collapsed ? "69px" : "121px",
           borderRadius: "12px",
           alignItems: "center",
           padding: "16px",
@@ -1541,12 +1542,12 @@
         }
       }, /*#__PURE__*/React__default['default'].createElement("img", {
         style: {
-          width: "89px",
-          height: "89px",
+          width: collapsed ? "49px" : "89px",
+          height: collapsed ? "49px" : "89px",
           borderRadius: "50%",
           border: "2px solid transparent",
           borderColor: (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.twitchJourneyStatus) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.twitchJourneyStatus) === "AFFILIATE" ? "#27AAFF" : "transparent",
-          padding: "6px",
+          padding: collapsed ? "3px" : "6px",
           boxSizing: "border-box"
         },
         src: user === null || user === void 0 ? void 0 : user.profileUrl,
@@ -1554,8 +1555,8 @@
       }), (user === null || user === void 0 ? void 0 : user.verified) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VerifiedRounded, {
         sx: {
           position: "absolute",
-          bottom: "5px",
-          right: "5px",
+          bottom: collapsed ? "0" : "5px",
+          right: collapsed ? "0" : "5px",
           fontSize: "17px"
         }
       })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1570,7 +1571,7 @@
           maxWidth: "150px",
           whiteSpace: "nowrap",
           textOverflow: "ellipsis",
-          marginBottom: "10px",
+          marginBottom: !collapsed && "10px",
           overflow: "hidden",
           cursor: "pointer",
           transition: "0.3s",
@@ -1579,7 +1580,7 @@
           }
         },
         onClick: onUsernameClick
-      }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         sx: {
           alignItems: "center",
@@ -1634,6 +1635,84 @@
       }, "created")))));
     };
 
+    var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
+      var user = _ref.user,
+          onUsernameClick = _ref.onUsernameClick,
+          onFollowerClick = _ref.onFollowerClick,
+          onCreatedClick = _ref.onCreatedClick;
+
+      var _useState = React.useState(null),
+          _useState2 = _slicedToArray__default['default'](_useState, 2),
+          userCardRef = _useState2[0],
+          setUserCardRef = _useState2[1];
+
+      var openUserCard = Boolean(userCardRef);
+      return /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        onClick: function onClick(e) {
+          setUserCardRef(e.target);
+        },
+        onMouseEnter: function onMouseEnter(e) {
+          // setTimeout(() => {
+          // }, [500]);
+          setUserCardRef(e.target);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          setUserCardRef(null);
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(Popover, {
+        open: openUserCard,
+        anchorEl: userCardRef,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        disablePortal: true,
+        hideBackdrop: true,
+        sx: {
+          pointerEvents: "none"
+        },
+        PaperProps: {
+          // onMouseEnter: (e) => {
+          //     setUserCardRef(e.target);
+          // },
+          sx: {
+            pointerEvents: "auto",
+            backgroundColor: "transparent",
+            borderRadius: "12px"
+          },
+          onMouseLeave: function onMouseLeave(e) {
+            setUserCardRef(null);
+          }
+        } // onClose={() => setUserCardRef(null)}
+
+      }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
+        onUsernameClick: onUsernameClick,
+        onFollowerClick: onFollowerClick,
+        onCreatedClick: onCreatedClick,
+        collapsed: true,
+        user: user
+      })), /*#__PURE__*/React__default['default'].createElement(Text, {
+        sx: {
+          fontWeight: "300",
+          fontSize: "12px",
+          color: "grey7.main",
+          maxWidth: "95px",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          margin: "0 10px",
+          cursor: "pointer",
+          "&:hover": {
+            textDecoration: "underline"
+          }
+        }
+      }, user === null || user === void 0 ? void 0 : user.username));
+    };
+
     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) {
@@ -1695,10 +1774,11 @@
           height: "30px",
           transition: "0.3s",
           cursor: active ? "pointer" : "default",
-          opacity: active ? "1" : "0",
           justifyContent: "space-between",
           marginRight: "10px",
           backgroundColor: "#2C323380",
+          opacity: active ? "1" : "0",
+          whiteSpace: "nowrap",
           "&:hover": {
             backgroundColor: "grey3.main"
           }
@@ -1790,40 +1870,28 @@
 
     var AddContentButton = function AddContentButton(_ref2) {
       var item = _ref2.item,
-          hovering = _ref2.hovering;
+          hovering = _ref2.hovering,
+          hoveringAddTo = _ref2.hoveringAddTo,
+          setHoveringAddTo = _ref2.setHoveringAddTo;
           _ref2.openPremiumModal;
-          var onOptionClicked = _ref2.onOptionClicked;
-
-      var _useState3 = React.useState(false),
-          _useState4 = _slicedToArray__default['default'](_useState3, 2),
-          active = _useState4[0],
-          setActive = _useState4[1];
-
-      React.useEffect(function () {
-        if (hovering === false) {
-          setActive(false);
-        }
-      }, [hovering]);
+          var onOptionClicked = _ref2.onOptionClicked,
+          onPlusClick = _ref2.onPlusClick;
+      var added = false;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         width: "100%",
         sx: {
-          position: "absolute",
-          top: "0px",
-          left: "0px",
           transition: "0.3s",
-          padding: "10px",
           boxSizing: "border-box",
           opacity: hovering ? "1" : "0"
+        },
+        onMouseLeave: function onMouseLeave() {
+          setHoveringAddTo(false);
         }
-      }, active ? /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
+      }, /*#__PURE__*/React__default['default'].createElement(AddContentDropdown, {
         item: item,
-        active: active,
+        active: hoveringAddTo,
         onOptionClicked: onOptionClicked
-      }) : /*#__PURE__*/React__default['default'].createElement("div", {
-        style: {
-          width: "100%"
-        }
       }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
         sx: {
           width: "30px",
@@ -1833,15 +1901,16 @@
             backgroundColor: "grey7.main"
           }
         },
-        onClick: function onClick(e) {
+        onMouseEnter: function onMouseEnter(e) {
           e.stopPropagation();
-          setActive(!active);
-        }
+          setHoveringAddTo(true);
+        },
+        onClick: onPlusClick
       }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
         sx: {
           transition: "0.3s",
           color: "notBlack.override",
-          transform: active && "rotate(45deg)"
+          transform: added 
         }
       })));
     };
@@ -1850,6 +1919,10 @@
       var saved = _ref3.saved,
           count = _ref3.count,
           onClick = _ref3.onClick;
+      var formatter = Intl.NumberFormat("en", {
+        notation: "compact"
+      });
+      var savedCount = formatter.format(count);
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         alignItems: "center",
@@ -1879,7 +1952,7 @@
           fontSize: "12px",
           fontWeight: "400"
         }
-      }, count));
+      }, savedCount));
     };
     var AddedToIcons = function AddedToIcons(_ref4) {
       var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
@@ -1963,22 +2036,141 @@
           return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
       }
     }; // const BlerpWaveform = ({ hovering, bite }) => {
+    //     const id = bite?._id;
+    //     const audio = bite?.audio?.mp3?.url;
+    //     const { play, getPlayState, selectedBlerp } = useContext(BlerpAudioContext);
+    //     const [hasRendered, setHasRendered] = useState(false);
+    //     const [wavesurfer, setWavesurfer] = useState(null);
+    //     useEffect(() => {
+    //         const create = async () => {
+    //             console.log("creating", hovering, wavesurfer, hasRendered);
+    //             if (hovering && wavesurfer) {
+    //                 wavesurfer.load(audio);
+    //             } else if (
+    //                 hovering &&
+    //                 !wavesurfer &&
+    //                 !hasRendered &&
+    //                 document.querySelector(`#blerp-waveform-${id}`) &&
+    //                 document.querySelector(`#blerp-waveform-${id}`).children
+    //                     .length === 0
+    //             ) {
+    //                 const WaveSurfer = (await import("@blerp/wavesurfer")).default;
+    //                 const CursorPlugin = (
+    //                     await import("@blerp/wavesurfer/src/plugin/cursor")
+    //                 ).default;
+    //                 let mWavesurfer = WaveSurfer.create({
+    //                     container: document.querySelector(`#blerp-waveform-${id}`),
+    //                     barWidth: 2,
+    //                     barHeight: 1.5, // the height of the wave
+    //                     barGap: 2, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
+    //                     progressColor: "#ffffff",
+    //                     hoverColor: "#ffffff99",
+    //                     barRadius: 2,
+    //                     height: 30,
+    //                     hideScrollBar: true,
+    //                     plugins: [
+    //                         CursorPlugin.create({
+    //                             showTime: false,
+    //                             opacity: 0,
+    //                             customShowTimeStyle: {
+    //                                 "background-color": "#000",
+    //                                 color: "#fff",
+    //                                 padding: "2px",
+    //                                 "font-size": "10px",
+    //                             },
+    //                         }),
+    //                     ],
+    //                 });
+    //                 mWavesurfer.on("error", function (e) {
+    //                     console.warn(e);
+    //                 });
+    //                 mWavesurfer?.on("seek", (prog) => {
+    //                     if (prog) {
+    //                         console.log("SEEEEEEK", prog, bite);
+    //                         mWavesurfer?.setMute(true);
+    //                         mWavesurfer?.play();
+    //                         play({
+    //                             bite: bite,
+    //                             startTime: mWavesurfer?.getCurrentTime(),
+    //                             forcePlay: true,
+    //                         });
+    //                     }
+    //                 });
+    //                 // Load audio from URL
+    //                 // mWavesurfer.load(audio);
+    //                 setWavesurfer(mWavesurfer);
+    //                 setHasRendered(true);
+    //             }
+    //         };
+    //         create();
+    //     }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
+    //     useEffect(() => {
+    //         // if (wavesurfer && selectedBlerp?._id === bite?._id) {
+    //         //     wavesurfer?.on("seek", (prog) => {
+    //         //         if (prog) {
+    //         //             console.log("SEEEEEEK", prog, selectedBlerp);
+    //         //             play({
+    //         //                 bite: bite,
+    //         //                 startTime: wavesurfer?.getCurrentTime(),
+    //         //             });
+    //         //             wavesurfer?.setMute(true);
+    //         //             wavesurfer?.play();
+    //         //         }
+    //         //     });
+    //         // } else {
+    //         //     wavesurfer?.un("seek");
+    //         // }
+    //         if (getPlayState({ biteId: bite?._id }) === "playing") {
+    //             wavesurfer?.setMute(true);
+    //             wavesurfer?.play();
+    //             // Play button
+    //             // console.log(wavesurfer.play());
+    //         }
+    //         if (getPlayState({ biteId: bite?._id }) === "paused") {
+    //             wavesurfer?.setMute(true);
+    //             wavesurfer?.pause();
+    //             // Play button
+    //             // console.log(wavesurfer.play());
+    //         }
+    //         if (getPlayState({ biteId: bite?._id }) === "stopped") {
+    //             wavesurfer?.setMute(true);
+    //             console.log("stop");
+    //             wavesurfer?.stop();
+    //             // Play button
+    //             // console.log(wavesurfer.play());
+    //         }
+    //     }, [bite, getPlayState, wavesurfer]);
+    //     return (
+    //         <div
+    //             id={`blerp-waveform-${id}`}
+    //             style={{
+    //                 height: "30px",
+    //                 width: "100%",
+    //                 transition: "0.3s",
+    //                 opacity: hovering ? "1" : "0",
+    //             }}
+    //         >
+    //             {/* <!-- Here be the waveform --> */}
+    //         </div>
+    //     );
+    // };
 
-    var ReportedWarning = function ReportedWarning(_ref7) {
-      var showWarning = _ref7.showWarning,
-          saved = _ref7.saved,
-          count = _ref7.count,
-          onClick = _ref7.onClick;
 
-      var _useState5 = React.useState(showWarning),
-          _useState6 = _slicedToArray__default['default'](_useState5, 2),
-          show = _useState6[0],
-          setShow = _useState6[1];
+    var ReportedWarning = function ReportedWarning(_ref6) {
+      var showWarning = _ref6.showWarning,
+          saved = _ref6.saved,
+          count = _ref6.count,
+          onClick = _ref6.onClick;
 
-      var _useState7 = React.useState(false),
-          _useState8 = _slicedToArray__default['default'](_useState7, 2),
-          hovering = _useState8[0],
-          setHovering = _useState8[1];
+      var _useState3 = React.useState(showWarning),
+          _useState4 = _slicedToArray__default['default'](_useState3, 2),
+          show = _useState4[0],
+          setShow = _useState4[1];
+
+      var _useState5 = React.useState(false),
+          _useState6 = _slicedToArray__default['default'](_useState5, 2),
+          hovering = _useState6[0],
+          setHovering = _useState6[1];
 
       var renderInfo = function renderInfo() {
 
@@ -2049,8 +2241,51 @@
       })), renderInfo());
     };
 
+    var BlerpTopRow = function BlerpTopRow(_ref7) {
+      var bite = _ref7.bite,
+          hovering = _ref7.hovering,
+          onPlusClick = _ref7.onPlusClick,
+          _onOptionClicked = _ref7.onOptionClicked;
+
+      var _useState7 = React.useState(false),
+          _useState8 = _slicedToArray__default['default'](_useState7, 2),
+          hoveringAddTo = _useState8[0],
+          setHoveringAddTo = _useState8[1];
+
+      return /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        sx: {
+          position: "relative",
+          minHeight: "20px"
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+        sx: {
+          transition: "0.3s",
+          opacity: hoveringAddTo ? "0" : "1",
+          width: hoveringAddTo ? "0%" : "100%" // display: hoveringAddTo && "none",
+
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+        rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
+      }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
+        item: bite,
+        hovering: hovering
+      })), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
+        item: bite,
+        hovering: hovering,
+        hoveringAddTo: hoveringAddTo,
+        setHoveringAddTo: setHoveringAddTo,
+        onPlusClick: onPlusClick,
+        onOptionClicked: function onOptionClicked(option) {
+          return _onOptionClicked(option);
+        }
+      }));
+    };
+
     var NewBlerp$1 = function NewBlerp(_ref8) {
-      var _bite$image, _bite$image$original, _bite$ownerObject, _bite$ownerObject2;
+      var _bite$image, _bite$image$original;
 
       var Waveform = _ref8.Waveform,
           bite = _ref8.bite,
@@ -2068,12 +2303,6 @@
           addedToPlace = _useState12[0],
           setAddedToPlace = _useState12[1];
 
-      var _useState13 = React.useState(null),
-          _useState14 = _slicedToArray__default['default'](_useState13, 2),
-          userCardRef = _useState14[0],
-          setUserCardRef = _useState14[1];
-
-      var openUserCard = Boolean(userCardRef);
       var formatter = Intl.NumberFormat("en", {
         notation: "compact"
       });
@@ -2212,25 +2441,13 @@
           alignItems: "center",
           justifyContent: "center"
         }
-      }), /*#__PURE__*/React__default['default'].createElement(Stack, {
-        direction: "row",
-        justifyContent: "space-between",
-        width: "100%",
-        sx: {
-          position: "relative",
-          minHeight: "20px"
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(Stack, null, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
-        rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
-      }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
-        item: bite,
-        hovering: hovering
-      })), /*#__PURE__*/React__default['default'].createElement("div", null)), /*#__PURE__*/React__default['default'].createElement(AddContentButton, {
-        item: bite,
+      }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
+        bite: bite,
+        onOptionClicked: function onOptionClicked() {
+          return null;
+        },
         hovering: hovering,
-        onOptionClicked: function onOptionClicked(option) {
-          return handleAddToPlace(option);
-        }
+        onPlusClick: handleAddToPlace
       }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
           transition: "0.3s",
@@ -2323,66 +2540,9 @@
       })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
         saved: bite === null || bite === void 0 ? void 0 : bite.saved,
         count: saveCount
-      }), /*#__PURE__*/React__default['default'].createElement(Stack, {
-        direction: "row",
-        onClick: function onClick(e) {
-          setUserCardRef(e.target);
-        },
-        onMouseEnter: function onMouseEnter(e) {
-          setTimeout(function () {
-            setUserCardRef(e.target);
-          }, [500]);
-        },
-        onMouseLeave: function onMouseLeave(e) {
-          setUserCardRef(null);
-        }
-      }, /*#__PURE__*/React__default['default'].createElement(Popover, {
-        open: openUserCard,
-        anchorEl: userCardRef,
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        disablePortal: true,
-        hideBackdrop: true,
-        sx: {
-          pointerEvents: "none"
-        },
-        PaperProps: {
-          // onMouseEnter: (e) => {
-          //     setUserCardRef(e.target);
-          // },
-          id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
-          sx: {
-            pointerEvents: "auto",
-            backgroundColor: "transparent"
-          },
-          onMouseLeave: function onMouseLeave(e) {
-            setUserCardRef(null);
-          }
-        } // onClose={() => setUserCardRef(null)}
-
-      }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
+      }), /*#__PURE__*/React__default['default'].createElement(UsernameWithPopout$1, {
         user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
-      })), /*#__PURE__*/React__default['default'].createElement(Text, {
-        sx: {
-          fontWeight: "300",
-          fontSize: "12px",
-          color: "grey7.main",
-          maxWidth: "95px",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          margin: "0 10px",
-          cursor: "pointer",
-          "&:hover": {
-            textDecoration: "underline"
-          }
-        }
-      }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default['default'].createElement(Text, {
+      }), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           fontWeight: "300",
           fontSize: "12px",
@@ -91504,6 +91664,7 @@
     var NewBlerp = NewBlerp$1;
     var GroupCard = GroupCard$1;
     var UserCard = UserCard$1;
+    var UsernameWithPopout = UsernameWithPopout$1;
     var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
     var IconButton = material.IconButton;
     var Toggle = Toggle$1;
@@ -91859,6 +92020,7 @@
     exports.UserCard = UserCard;
     exports.UserLibraryHeader = UserLibraryHeader;
     exports.UserProfileHeader = UserProfileHeader;
+    exports.UsernameWithPopout = UsernameWithPopout;
     exports.WalkonIcon = WalkonIcon;
     exports.WindowsIcon = WindowsIcon;
     exports.darkThemeV1 = darkThemeV1;

package/package.json

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