@blerp/design 1.2.14 → 1.2.15

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$2, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
+import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$2, Grid as Grid$1, Stack as Stack$2, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded, LockRounded, CheckRounded, CloseRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, CheckRounded, CloseRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
@@ -17,6 +17,7 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import '@mui/icons-material/DoNotDisturbRounded';
+import { Stack as Stack$1, Text as Text$1 } from '.';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -56,8 +57,8 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
 
-var _templateObject$i, _templateObject2$b, _templateObject3$8, _templateObject4$7;
-var BlerpImage$2 = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
+var _templateObject$j, _templateObject2$b, _templateObject3$8, _templateObject4$7;
+var BlerpImage$3 = styled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 var SaveContainer$2 = styled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
@@ -103,7 +104,7 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
     return /*#__PURE__*/React__default.createElement(Stack, {
       direction: "row",
       marginTop: sizeParams.buttonSize === "small" && "28px"
-    }, /*#__PURE__*/React__default.createElement(BlerpImage$2, {
+    }, /*#__PURE__*/React__default.createElement(BlerpImage$3, {
       style: {
         width: sizeParams.imageSize,
         height: sizeParams.imageSize
@@ -133,7 +134,7 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     marginTop: sizeParams.buttonSize === "small" && "28px"
-  }, /*#__PURE__*/React__default.createElement(BlerpImage$2, {
+  }, /*#__PURE__*/React__default.createElement(BlerpImage$3, {
     style: {
       width: sizeParams.imageSize,
       height: sizeParams.imageSize
@@ -227,8 +228,8 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
   }) : /*#__PURE__*/React__default.createElement(BookmarkAddRounded, null)))))));
 };
 
-var _templateObject$h;
-var ReactionButton$1 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
+var _templateObject$i;
+var ReactionButton$1 = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), function (props) {
   return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
 }, function (props) {
   return props.theme.colors.ibisRed;
@@ -371,8 +372,8 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
   }, "Organize")));
 };
 
-var _templateObject$g;
-var LineClamp$2 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
+var _templateObject$h;
+var LineClamp$2 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
 
 var BlerpTitleRow = function BlerpTitleRow(_ref) {
   var bite = _ref.bite,
@@ -1495,14 +1496,104 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes.func.isRequired
 };
 
-var _templateObject$f, _templateObject2$a;
-var PremiumContainer = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    margin: 20px;\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 UserCard$1 = function UserCard(_ref) {
+  var _user$twitchChannelIn, _user$twitchChannelIn2;
+
+  var user = _ref.user;
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    sx: {
+      backgroundColor: "grey3.main",
+      minWidth: "280px",
+      maxWidth: "320px",
+      height: "121px",
+      borderRadius: "12px",
+      alignItems: "center",
+      padding: "16px",
+      boxSizing: "border-box",
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    sx: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default.createElement("img", {
+    style: {
+      width: "89px",
+      height: "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",
+      boxSizing: "border-box"
+    },
+    src: user === null || user === void 0 ? void 0 : user.profileUrl,
+    alt: "profile"
+  }), (user === null || user === void 0 ? void 0 : user.verified) && /*#__PURE__*/React__default.createElement(VerifiedRounded, {
+    sx: {
+      position: "absolute",
+      bottom: "5px",
+      right: "5px",
+      fontSize: "17px"
+    }
+  })), /*#__PURE__*/React__default.createElement(Stack, {
+    sx: {
+      flex: 1,
+      marginLeft: "22px"
+    }
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontSize: "18px",
+      fontWeight: "400",
+      maxWidth: "150px",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      marginBottom: "10px",
+      overflow: "hidden"
+    }
+  }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    sx: {
+      alignItems: "center",
+      justifyContent: "space-around"
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "followers")), /*#__PURE__*/React__default.createElement(Stack, {
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontSize: "14px",
+      fontWeight: "400"
+    }
+  }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default.createElement(Text, {
+    sx: {
+      fontSize: "12px",
+      fontWeight: "300",
+      color: "grey7.main"
+    }
+  }, "created")))));
+};
+
+var _templateObject$g, _templateObject2$a;
+var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
 var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n    background-color: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
   return props.theme.colors.grey7;
 });
 
 var AddContentDropdown = function AddContentDropdown(_ref) {
-  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
+  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$discordContext, _item$soundEmotesCont;
 
   var item = _ref.item,
       active = _ref.active,
@@ -1519,6 +1610,22 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
     name: "WalkOn",
     value: "WALK_ON",
     added: item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id
+  }, {
+    name: "Discord",
+    value: "DISCORD",
+    added: item === null || item === void 0 ? void 0 : (_item$discordContext = item.discordContext) === null || _item$discordContext === void 0 ? void 0 : _item$discordContext._id
+  }, {
+    name: "Sound Emotes",
+    value: "SOUND_EMOTES",
+    added: item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id
+  }, {
+    name: "Add To Group",
+    value: "ADD_TO_GROUP",
+    added: false
+  }, {
+    name: "Suggest To...",
+    value: "SUGGEST",
+    added: false
   }];
   var anchorRef = useRef(null);
 
@@ -1693,11 +1800,12 @@ var AddContentButton = function AddContentButton(_ref2) {
 
 var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
   var saved = _ref3.saved,
-      count = _ref3.count;
-      _ref3.onClick;
+      count = _ref3.count,
+      onClick = _ref3.onClick;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    alignItems: "center"
+    alignItems: "center",
+    onClick: onClick
   }, saved ? /*#__PURE__*/React__default.createElement(FavoriteIcon, {
     sx: {
       fontSize: "16px",
@@ -1725,7 +1833,6 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref3) {
     }
   }, count));
 };
-
 var AddedToIcons = function AddedToIcons(_ref4) {
   var _item$channelPointsCo2, _item$whitelistContex2, _item$walkOnContext2;
 
@@ -1895,7 +2002,7 @@ var ReportedWarning = function ReportedWarning(_ref7) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref8) {
-  var _bite$image, _bite$image$original, _bite$ownerObject;
+  var _bite$image, _bite$image$original, _bite$ownerObject, _bite$ownerObject2;
 
   var Waveform = _ref8.Waveform,
       bite = _ref8.bite,
@@ -1912,6 +2019,12 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       addedToPlace = _useState12[0],
       setAddedToPlace = _useState12[1];
 
+  var _useState13 = useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      userCardRef = _useState14[0],
+      setUserCardRef = _useState14[1];
+
+  var openUserCard = Boolean(userCardRef);
   var formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
@@ -1995,7 +2108,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   }
 
-  return /*#__PURE__*/React__default.createElement(PremiumContainer, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PremiumContainer, {
     style: {
       background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
     }
@@ -2007,7 +2120,6 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       return console.log("clicked save");
     }
   }), /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(Stack, {
-    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     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, ")"),
       backgroundSize: "cover",
@@ -2031,11 +2143,12 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       setHovering(false);
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
+    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     className: "blerp-hover",
     onClick: function onClick() {
       play({
         bite: bite
-      });
+      }); // play({ bite });
     },
     sx: {
       width: "100%",
@@ -2055,7 +2168,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
     justifyContent: "space-between",
     width: "100%",
     sx: {
-      position: "relative"
+      position: "relative",
+      minHeight: "20px"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, null, /*#__PURE__*/React__default.createElement(RatingInfo, {
     rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
@@ -2073,7 +2187,7 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       transition: "0.3s",
       opacity: hovering ? "1" : "0",
       pointerEvents: "none",
-      zIndex: "1"
+      zIndex: "3"
     }
   }, renderPlayStateIcon()), Waveform({
     hovering: hovering
@@ -2163,14 +2277,212 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
       whiteSpace: "nowrap",
       overflow: "hidden",
       margin: "0 10px"
-    }
+    },
+    onClick: function onClick(e) {
+      setUserCardRef(e.target);
+    } // onMouseLeave={() => {
+    //     setUserCardRef(null);
+    // }}
+
   }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main"
     }
-  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s"))));
+  }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default.createElement(Popover, {
+    id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
+    open: openUserCard,
+    anchorEl: userCardRef,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    PaperProps: {
+      // onMouseEnter: (e) => {
+      //     setUserCardRef(e.target);
+      // },
+      sx: {
+        backgroundColor: "transparent"
+      },
+      onMouseLeave: function onMouseLeave() {
+        setUserCardRef(null);
+      }
+    },
+    onClose: function onClose() {
+      return setUserCardRef(null);
+    }
+  }, /*#__PURE__*/React__default.createElement(UserCard$1, {
+    user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
+  })));
+};
+
+var _templateObject$f;
+var BlerpImage$2 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), function (props) {
+  return props.image;
+}, function (props) {
+  return props.firstImage ? "1" : props.hovering ? "1" : "0.5";
+}, function (props) {
+  return props.hovering ? "45deg" : "20deg";
+});
+var GroupCard$1 = function GroupCard(_ref) {
+  var _group$blerps14;
+
+  var group = _ref.group;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hovering = _useState2[0],
+      setHovering = _useState2[1];
+
+  var formatter = Intl.NumberFormat("en", {
+    notation: "compact"
+  });
+  var saveCount = formatter.format(group === null || group === void 0 ? void 0 : group.totalSaveCount);
+
+  var calculateBottom = function calculateBottom(index) {
+    if (hovering) {
+      return "-20px";
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  var calculateLeft = function calculateLeft(index) {
+    var _group$blerps, _group$blerps2, _group$blerps5, _group$blerps8, _group$blerps11;
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps = group.blerps) === null || _group$blerps === void 0 ? void 0 : _group$blerps.length) === 1) {
+      return "25%";
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps2 = group.blerps) === null || _group$blerps2 === void 0 ? void 0 : _group$blerps2.length) === 2) {
+      var _group$blerps4;
+
+      if (hovering) {
+        var _group$blerps3;
+
+        return "".concat((index - 0.05) / (group === null || group === void 0 ? void 0 : (_group$blerps3 = group.blerps) === null || _group$blerps3 === void 0 ? void 0 : _group$blerps3.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.5) / ((group === null || group === void 0 ? void 0 : (_group$blerps4 = group.blerps) === null || _group$blerps4 === void 0 ? void 0 : _group$blerps4.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps5 = group.blerps) === null || _group$blerps5 === void 0 ? void 0 : _group$blerps5.length) === 3) {
+      var _group$blerps7;
+
+      if (hovering) {
+        var _group$blerps6;
+
+        return "".concat((index - 0.35) / (group === null || group === void 0 ? void 0 : (_group$blerps6 = group.blerps) === null || _group$blerps6 === void 0 ? void 0 : _group$blerps6.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.4) / ((group === null || group === void 0 ? void 0 : (_group$blerps7 = group.blerps) === null || _group$blerps7 === void 0 ? void 0 : _group$blerps7.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps8 = group.blerps) === null || _group$blerps8 === void 0 ? void 0 : _group$blerps8.length) === 4) {
+      var _group$blerps10;
+
+      if (hovering) {
+        var _group$blerps9;
+
+        return "".concat((index - 0.6) / (group === null || group === void 0 ? void 0 : (_group$blerps9 = group.blerps) === null || _group$blerps9 === void 0 ? void 0 : _group$blerps9.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps10 = group.blerps) === null || _group$blerps10 === void 0 ? void 0 : _group$blerps10.length) + 2.5) * 100, "%");
+    }
+
+    if ((group === null || group === void 0 ? void 0 : (_group$blerps11 = group.blerps) === null || _group$blerps11 === void 0 ? void 0 : _group$blerps11.length) === 5) {
+      var _group$blerps13;
+
+      if (hovering) {
+        var _group$blerps12;
+
+        return "".concat((index - 0.7) / (group === null || group === void 0 ? void 0 : (_group$blerps12 = group.blerps) === null || _group$blerps12 === void 0 ? void 0 : _group$blerps12.length) * 100, "%");
+      }
+
+      return "".concat((index + 0.2) / ((group === null || group === void 0 ? void 0 : (_group$blerps13 = group.blerps) === null || _group$blerps13 === void 0 ? void 0 : _group$blerps13.length) + 2.5) * 100, "%");
+    }
+
+    return "".concat((index - 2) * 10, "px");
+  };
+
+  return /*#__PURE__*/React__default.createElement(Stack$1, {
+    sx: {
+      minWidth: "250px",
+      maxWidth: "290px",
+      minHeight: "250px",
+      maxHeight: "290px",
+      width: "100%",
+      height: "100%",
+      aspectRatio: "1 / 1",
+      backgroundColor: "grey2.main",
+      borderRadius: "12px",
+      padding: "30px",
+      position: "relative",
+      boxSizing: "border-box",
+      flex: "1",
+      overflow: "hidden"
+    },
+    onMouseEnter: function onMouseEnter() {
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(Stack$1, {
+    height: "100%"
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    sx: {
+      color: "grey5.main",
+      fontSize: "12px",
+      fontWeight: "300"
+    }
+  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default.createElement(Text$1, {
+    sx: {
+      whiteSpace: "nowrap",
+      overflowX: "hidden",
+      textOverflow: "ellipsis",
+      maxWidth: "200px",
+      fontSize: "24px",
+      fontWeight: "600",
+      lineHeight: "1",
+      height: "31px",
+      marginBottom: "5px"
+    }
+  }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default.createElement(Stack$1, {
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(AddedToIcons, {
+    item: group,
+    hovering: true
+  }), /*#__PURE__*/React__default.createElement(FavoriteIconWithCounter, {
+    saved: group === null || group === void 0 ? void 0 : group.saved,
+    count: saveCount
+  })), /*#__PURE__*/React__default.createElement(Stack$1, {
+    direction: "row",
+    sx: {
+      width: "100%",
+      height: "100%",
+      right: "0",
+      bottom: "0"
+    }
+  }, (_group$blerps14 = group.blerps) === null || _group$blerps14 === void 0 ? void 0 : _group$blerps14.map(function (blerp, index) {
+    var _group$blerps15, _blerp$image, _blerp$image$original;
+
+    return /*#__PURE__*/React__default.createElement(BlerpImage$2, {
+      index: index,
+      firstImage: index === ((_group$blerps15 = group.blerps) === null || _group$blerps15 === void 0 ? void 0 : _group$blerps15.length) - 1,
+      hovering: hovering,
+      image: blerp === null || blerp === void 0 ? void 0 : (_blerp$image = blerp.image) === null || _blerp$image === void 0 ? void 0 : (_blerp$image$original = _blerp$image.original) === null || _blerp$image$original === void 0 ? void 0 : _blerp$image$original.url,
+      style: {
+        bottom: calculateBottom(index),
+        left: calculateLeft(index)
+      }
+    });
+  }))));
 };
 
 var BlerpAudioContext = /*#__PURE__*/createContext({});
@@ -2180,7 +2492,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       selectedBlerp = _useState2[0],
-      _setSelectedBlerp = _useState2[1];
+      setSelectedBlerp = _useState2[1];
 
   var _useState3 = useState("stopped"),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -2219,23 +2531,23 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
     };
   }();
 
-  var play = /*#__PURE__*/function () {
+  var mplay = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref3) {
-      var _bite$audio2, _bite$audio2$mp;
+      var _bite$audio, _bite$audio$mp;
 
-      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, _bite$audio, _bite$audio$mp, newGain, audioCtx, gainNode, source;
+      var bite, _ref3$gain, gain, _ref3$startTime, startTime, _ref3$forcePlay, forcePlay, newGain, audioCtx, gainNode, source;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
               bite = _ref3.bite, _ref3$gain = _ref3.gain, gain = _ref3$gain === void 0 ? 1 : _ref3$gain, _ref3$startTime = _ref3.startTime, startTime = _ref3$startTime === void 0 ? 0 : _ref3$startTime, _ref3$forcePlay = _ref3.forcePlay, forcePlay = _ref3$forcePlay === void 0 ? false : _ref3$forcePlay;
-              console.log("astats", startTime, playState);
 
               if (!audioRef.current) {
-                audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url);
+                audioRef.current = new Audio();
               }
 
+              console.log("astats", startTime, playState);
               startTime = audioRef.current.currentTime > 0 ? audioRef.current.currentTime : startTime;
               console.log("play", playState, startTime);
 
@@ -2262,7 +2574,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               return _context3.abrupt("return");
 
             case 12:
-              audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio2 = bite.audio) === null || _bite$audio2 === void 0 ? void 0 : (_bite$audio2$mp = _bite$audio2.mp3) === null || _bite$audio2$mp === void 0 ? void 0 : _bite$audio2$mp.url);
+              audioRef.current = new Audio(bite === null || bite === void 0 ? void 0 : (_bite$audio = bite.audio) === null || _bite$audio === void 0 ? void 0 : (_bite$audio$mp = _bite$audio.mp3) === null || _bite$audio$mp === void 0 ? void 0 : _bite$audio$mp.url);
               audioRef.current.crossOrigin = "anonymous";
               console.log("current time", startTime);
               audioRef.current.currentTime = startTime;
@@ -2317,7 +2629,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
               //             console.log("playing failed witihin", error);
               //         });
               // }
-              _setSelectedBlerp(bite);
+              setSelectedBlerp(bite);
 
             case 27:
             case "end":
@@ -2327,7 +2639,7 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
       }, _callee3);
     }));
 
-    return function play(_x) {
+    return function mplay(_x) {
       return _ref4.apply(this, arguments);
     };
   }();
@@ -2335,29 +2647,35 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
   return /*#__PURE__*/React__default.createElement(BlerpAudioContext.Provider, {
     value: {
       selectedBlerp: selectedBlerp,
-      setSelectedBlerp: function setSelectedBlerp(_ref6) {
-        var bite = _ref6.bite;
-
-        _setSelectedBlerp(bite);
-      },
+      setSelectedBlerp: setSelectedBlerp,
       pause: pause,
-      play: play,
+      play: mplay,
+      // play: async (bite, onPlay) => {
+      //   // const tempBite = {...bite}
+      //   if (bite?._id !== selectedBlerp?._id) {
+      //     setPlayState("playing")
+      //     setSelectedBlerp({...bite})
+      //     return
+      //   }
+      //   if (playState === "playing" && bite?._id === selectedBlerp?._id) {
+      //     setPlayState("paused")
+      //     return 
+      //   }
+      //   if (bite?._id === selectedBlerp?._id) {
+      //     setPlayState("playing")
+      //     return
+      //   }
+      // },
       stop: function () {
         var _stop = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-          var _audioRef$current;
-
           return _regeneratorRuntime.wrap(function _callee4$(_context4) {
             while (1) {
               switch (_context4.prev = _context4.next) {
                 case 0:
-                  setPlayState("stopped");
-                  _context4.next = 3;
-                  return (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.pause();
-
-                case 3:
-                  audioRef.current.currentTime = 0;
+                  setPlayState("stopped"); // await audioRef.current?.pause();
+                  // audioRef.current.currentTime = 0;
 
-                case 4:
+                case 1:
                 case "end":
                   return _context4.stop();
               }
@@ -2371,13 +2689,12 @@ var BlerpAudioContextProvider$1 = function BlerpAudioContextProvider(_ref) {
 
         return stop;
       }(),
-      getPlayState: function getPlayState(_ref7) {
-        var biteId = _ref7.biteId;
-
+      getPlayState: function getPlayState(biteId) {
         if (biteId === (selectedBlerp && selectedBlerp._id)) {
           return playState;
         }
       },
+      setPlayState: setPlayState,
       setStartTime: setStartTime
     }
   }, children);
@@ -91069,7 +91386,7 @@ var Theme = BlerpTheme;
 var Box = Box$1;
 var Container = Container$2;
 var Grid = Grid$1;
-var Stack = Stack$1;
+var Stack = Stack$2;
 var ImageList = ImageList$1;
 var Autocomplete = Autocomplete$1;
 var Button = Button$1;
@@ -91115,6 +91432,8 @@ var Modal = Modal$1;
 var Popover = Popover$1;
 var Blerp = Blerp$1;
 var NewBlerp = NewBlerp$1;
+var GroupCard = GroupCard$1;
+var UserCard = UserCard$1;
 var BlerpAudioContextProvider = BlerpAudioContextProvider$1;
 var IconButton = IconButton$1;
 var Toggle = Toggle$1;
@@ -91367,4 +91686,4 @@ var Themes = {
 // };
 // export default returnLibrary();
 
-export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpAudioContextProvider, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, BroomIcon, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewBlerp, NewCollectionModal, NewDiscordIcon, NewDropdown, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, PresentGiftIcon, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SnackbarContext, SnackbarProvider, SparkleGiftIcon, SpeedDial, Stack, Stepper, Switch, Tab, Table, Tabs, Text, Theme, Themes, TikTokIcon, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };
+export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpAudioContextProvider, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, BroomIcon, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, GroupCard, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewBlerp, NewCollectionModal, NewDiscordIcon, NewDropdown, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, PresentGiftIcon, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SnackbarContext, SnackbarProvider, SparkleGiftIcon, SpeedDial, Stack, Stepper, Switch, Tab, Table, Tabs, Text, Theme, Themes, TikTokIcon, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserCard, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };