@blerp/design 1.3.17 → 1.4.2

package/dist/esm/NewBlerpTest.js

@@ -1,787 +1,17 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
-import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded';
-import FavoriteIcon from '@mui/icons-material/Favorite';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
-import LayersRoundedIcon from '@mui/icons-material/LayersRounded';
-import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
-import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import React, { useState, useRef } from 'react';
-import styled from 'styled-components';
-import { UsernameWithPopout } from './UsernameWithPopout.js';
-import { Stack, Text, Tooltip, Button } from './index.js';
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import { DiamondIcon, ChannelPointsIcon, TwitchBitIcon, WalkonIcon } from './Icons/Icons.js';
+import React from 'react';
 
-var _templateObject, _templateObject2, _templateObject3;
-const PremiumContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background: ", ";\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"])), props => props.theme.colors.grey7);
-const Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    background: ", ";\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    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
-const HoverScrollText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-const FavoriteIconWithCounter = _ref => {
-  let {
-    saved,
-    count,
-    onClick
-  } = _ref;
-  const formatter = Intl.NumberFormat("en", {
-    notation: "compact"
-  });
-  let savedCount = formatter.format(count);
-  return /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    onClick: onClick
-  }, saved ? /*#__PURE__*/React.createElement(FavoriteIcon, {
-    sx: {
-      fontSize: "17px",
-      marginRight: "6px",
-      transition: "0.3s",
-      cursor: "pointer",
-      opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
-    }
-  }) : /*#__PURE__*/React.createElement(FavoriteBorderIcon, {
-    sx: {
-      fontSize: "17px",
-      marginRight: "6px",
-      transition: "0.3s",
-      cursor: "pointer",
-      opacity: 0.5,
-      "&:hover": {
-        opacity: 1
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: "12px",
-      fontWeight: "400"
-    }
-  }, savedCount));
-};
-const AddedToIcons = _ref2 => {
-  var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
-
-  let {
-    item,
-    hovering,
-    hide = false
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    sx: {
-      transition: "0.3s",
-      opacity: hide ? "0" : hovering ? "0" : "1",
-      alignItems: "start",
-      justifyContent: "end",
-      flexWrap: "wrap",
-      flex: 1
-    }
-  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Added to Universal Extension"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ExtensionRoundedIcon, {
-    sx: {
-      fontSize: "20px",
-      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
-    }
-  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Added to Channel Points"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelPointsIcon, {
-    sx: {
-      fontSize: "20px",
-      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
-    }
-  }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Added to Bits Library"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TwitchBitIcon, {
-    sx: {
-      fontSize: "20px",
-      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
-    }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Added to WalkOn"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(WalkonIcon, {
-    sx: {
-      fontSize: "20px",
-      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
-    }
-  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Added to Group"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LayersRoundedIcon, {
-    sx: {
-      fontSize: "20px",
-      filter: "drop-shadow(0px 0.972222px 1.35px rgba(0,0,0,0.8))"
-    }
-  }))));
-};
-
-const RatingInfoItem = _ref3 => {
-  let {
-    hovering,
-    tooltipText,
-    displayText
-  } = _ref3;
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: tooltipText
-  }, /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontSize: "9px",
-      fontWeight: "600",
-      backgroundColor: "white.override",
-      borderRadius: "2px",
-      border: hovering ? "none" : "4px solid transparent",
-      borderColor: "#000000a7",
-      color: "notBlack.override",
-      margin: "0 4px 4px 0",
-      padding: "1px 2px",
-      height: "auto",
-      width: "fit-content"
-    }
-  }, displayText));
-};
-
-const RatingInfo = _ref4 => {
-  let {
-    bite,
-    hovering
-  } = _ref4;
-  let ratingText = {
-    tooltipText: "",
-    text: ""
-  };
-
-  if ((bite === null || bite === void 0 ? void 0 : bite.sexualSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.sexualLanguage) >= 2) {
-    // ratingText.tooltipText = "Not Safe For Work";
-    // ratingText.text = "NSFW";
-    return /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "start",
-      sx: {
-        transition: "0.2s",
-        flex: 0,
-        flexWrap: "wrap",
-        marginTop: hovering ? "35px" : "0"
-      }
-    }, /*#__PURE__*/React.createElement(RatingInfoItem, {
-      tooltipText: "Not Safe For Work",
-      displayText: "NSFW",
-      hovering: false
-    }));
-  } else if ((bite === null || bite === void 0 ? void 0 : bite.scarySound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.creepySound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.creepyLanguage) >= 2) {
-    // ratingText.tooltipText = "This sound may jumpscare you";
-    // ratingText.text = "SCARY";
-    return /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "start",
-      sx: {
-        transition: "0.2s",
-        flex: 0,
-        flexWrap: "wrap",
-        marginTop: hovering ? "35px" : "0"
-      }
-    }, /*#__PURE__*/React.createElement(RatingInfoItem, {
-      tooltipText: "This sound may jumpscare you",
-      displayText: "SCARY",
-      hovering: false
-    }));
-  } else if ((bite === null || bite === void 0 ? void 0 : bite.drugLanguage) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.drugSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.curseLanguage) >= 2) {
-    // ratingText.tooltipText = "May contain swearing or drug references";
-    // ratingText.text = "EXPLICIT";
-    return /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "start",
-      sx: {
-        transition: "0.2s",
-        flex: 0,
-        flexWrap: "wrap",
-        marginTop: hovering ? "35px" : "0"
-      }
-    }, /*#__PURE__*/React.createElement(RatingInfoItem, {
-      tooltipText: "May contain swearing or drug references",
-      displayText: "EXPLICIT",
-      hovering: false
-    }));
-  } else if ((bite === null || bite === void 0 ? void 0 : bite.violentSound) >= 2 || (bite === null || bite === void 0 ? void 0 : bite.violentLanguage) >= 2) {
-    // ratingText.tooltipText = "May contain violenct references";
-    // ratingText.text = "VIOLENCE";
-    return /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "start",
-      sx: {
-        transition: "0.2s",
-        flex: 0,
-        flexWrap: "wrap",
-        marginTop: hovering ? "35px" : "0"
-      }
-    }, " ", /*#__PURE__*/React.createElement(RatingInfoItem, {
-      tooltipText: "May contain violenct references",
-      displayText: "VIOLENCE",
-      hovering: false
-    }), "   ");
-  } else if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
-    var _bite$newAudienceRati, _bite$newAudienceRati2;
-
-    if (!(bite !== null && bite !== void 0 && (_bite$newAudienceRati = bite.newAudienceRating) !== null && _bite$newAudienceRati !== void 0 && _bite$newAudienceRati.length)) {
-      // unrated
-      ratingText.tooltipText = "Hasn't Been Reviewed";
-      ratingText.text = "UNRATED";
-    }
-
-    return /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      alignItems: "start",
-      sx: {
-        transition: "0.2s",
-        flex: 2,
-        flexWrap: "wrap",
-        marginTop: hovering ? "35px" : "0"
-      }
-    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(rating => {
-      if (rating === "SAFE") {
-        // nothing
-        return /*#__PURE__*/React.createElement(React.Fragment, null);
-      } else if (rating === "NSFW") {
-        // NSFW
-        ratingText.tooltipText = "Not Safe For Work";
-        ratingText.text = "NSFW";
-      } else if (rating === "EXPLICIT") {
-        // EXPLICIT
-        ratingText.tooltipText = "Explicit";
-        ratingText.text = "EXPLICIT";
-      } else if (rating === "DMCA") {
-        // DMCA
-        ratingText.tooltipText = "DMCA";
-        ratingText.text = "DMCA";
-      } else {
-        return /*#__PURE__*/React.createElement(React.Fragment, null);
-      }
-
-      return /*#__PURE__*/React.createElement(RatingInfoItem, {
-        tooltipText: ratingText.tooltipText,
-        displayText: ratingText.text,
-        hovering: hovering
-      });
-    }));
-  } else if (bite !== null && bite !== void 0 && bite.audienceRating) {
-    // what you have now
-    if ((bite === null || bite === void 0 ? void 0 : bite.audienceRating) === "UR") {
-      ratingText.tooltipText = "Hasn't Been Reviewed";
-      ratingText.text = "UNRATED";
-    } else if ((bite === null || bite === void 0 ? void 0 : bite.audienceRating) === "NC17") {
-      ratingText.tooltipText = "Not Safe For Work";
-      ratingText.text = "NSFW";
-    } else {
-      ratingText.tooltipText = null;
-      ratingText.text = null;
-    }
-  } else {
-    // unrated
-    ratingText.tooltipText = "Hasn't Been Reviewed";
-    ratingText.text = "UNRATED";
-  }
-
-  if (!ratingText.tooltipText) return /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    sx: {
-      flex: 0
-    }
-  });
-  return /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "start",
-    sx: {
-      transition: "0.2s",
-      flex: 0,
-      flexWrap: "wrap",
-      marginTop: hovering ? "35px" : "0"
-    }
-  }, /*#__PURE__*/React.createElement(RatingInfoItem, {
-    tooltipText: ratingText.tooltipText,
-    displayText: ratingText.text,
-    hovering: hovering
-  }));
-};
-
-const ReportedWarning = _ref5 => {
-  let {
-    showWarning,
-    blacklisted,
-    saved,
-    count,
-    onClick
-  } = _ref5;
-  const [show, setShow] = useState(showWarning);
-  const [hovering, setHovering] = useState(false);
-
-  const renderInfo = () => {
-    if (blacklisted) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DoNotDisturbRoundedIcon, {
-        sx: {
-          marginBottom: "20px"
-        }
-      }), /*#__PURE__*/React.createElement(Text, {
-        sx: {
-          fontSize: "18px",
-          fontWeight: "600",
-          color: "white.override"
-        }
-      }, "Blocked"), hovering && /*#__PURE__*/React.createElement(Button, {
-        color: "whiteOverride",
-        variant: "outlined",
-        sx: {
-          marginTop: "20px"
-        },
-        onClick: () => {
-          setShow(false);
-        }
-      }, "View"));
-    }
-
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WarningRoundedIcon, {
-      sx: {
-        marginBottom: "20px"
-      }
-    }), /*#__PURE__*/React.createElement(Text, {
-      sx: {
-        fontSize: "18px",
-        fontWeight: "600",
-        color: "white.override",
-        marginBottom: "10px"
-      }
-    }, "Hold Up"), /*#__PURE__*/React.createElement(Text, {
-      sx: {
-        fontSize: "14px",
-        fontWeight: "400",
-        color: "white.override",
-        textAlign: "center"
-      }
-    }, "This content has been", /*#__PURE__*/React.createElement("br", null), " reported and may be unsafe."), hovering && /*#__PURE__*/React.createElement(Button, {
-      color: "whiteOverride",
-      variant: "outlined",
-      sx: {
-        marginTop: "20px"
-      },
-      onClick: () => {
-        setShow(false);
-      }
-    }, "View"));
-  };
-
-  return /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      backgroundColor: "#00000040",
-      backdropFilter: "blur(8px)",
-      padding: "22px",
-      boxSizing: "border-box",
-      zIndex: "10",
-      alignItems: "center",
-      justifyContent: "center",
-      display: show ? "flex" : "none",
-      opacity: show ? "1" : "0",
-      transition: "0.3s"
-    },
-    onMouseEnter: () => {
-      setHovering(true);
-    },
-    onMouseLeave: () => {
-      setHovering(false);
-    }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      position: "absolute",
-      top: "20px",
-      left: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(FavoriteIconWithCounter, {
-    saved: saved,
-    count: count,
-    onClick: onClick
-  })), renderInfo());
-};
-
-const BlerpTopRow = _ref6 => {
-  let {
-    bite,
-    hovering,
-    onPlusClick,
-    onOptionClicked,
-    selectedOption,
-    addToOpen,
-    setAddToOpen,
-    renderAddContentButton,
-    hoveringAddTo,
-    setHovering
-  } = _ref6;
-  return /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    sx: {
-      position: "relative",
-      minHeight: "20px"
-    }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "start",
-    justifyContent: "space-between",
-    sx: {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      overflow: "hidden",
-      transition: "0.2s",
-      pointerEvents: "none"
-    }
-  }, /*#__PURE__*/React.createElement(RatingInfo, {
-    hovering: hovering,
-    bite: bite
-  }), /*#__PURE__*/React.createElement(AddedToIcons, {
-    item: bite,
-    hovering: hovering || hoveringAddTo
-  })), renderAddContentButton({
-    item: bite,
-    hovering: hovering,
-    addToOpen: addToOpen,
-    setAddToOpen: setAddToOpen,
-    hoveringAddTo: hoveringAddTo,
-    setHovering: setHovering,
-    onPlusClick: onPlusClick,
-    onOptionClicked: option => onOptionClicked(option),
-    selectedOption: selectedOption
-  }));
-};
-
-const NewBlerpTest = _ref7 => {
-  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
-
-  let {
-    Waveform,
-    bite,
-    playState,
-    play,
-    onTitleClick = () => {
-      console.log("onTitleClick");
-    },
-    onUsernameClick = () => {
-      console.log("onUsernameClick");
-    },
-    onFavoriteClick = () => {
-      console.log("onFavoriteClick");
-    },
-    onAddToPlace = () => {
-      console.log("onAddToPlace");
-    },
-    onOptionClicked = () => {
-      console.log("onAddToPlace");
-    },
-    selectedOption,
-    trending = false,
-    renderAddContentButton,
-    renderThreeDot,
-    isOwner
-  } = _ref7;
-  const [previewed, setPreviewed] = useState(false);
-  const [hovering, setHovering] = useState(false);
-  const [hoveringAddTo, setHoveringAddTo] = useState(false);
-  const [addToOpen, setAddToOpen] = useState(false);
-  const titleRef = useRef(null);
-  const addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0;
-  const 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.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
-
-  const renderPlayStateIcon = () => {
-    if (playState === "played") {
-      return /*#__PURE__*/React.createElement("svg", {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "84",
-        height: "84",
-        viewBox: "0 0 84 84",
-        fill: "none"
-      }, /*#__PURE__*/React.createElement("g", {
-        filter: "url(#filter0_d_381_451457)"
-      }, /*#__PURE__*/React.createElement("path", {
-        d: "M49.4991 43.6611C50.8996 42.9059 50.8327 41.0394 49.5597 40.2386L38.0648 33.008C36.7329 32.1702 34.9999 33.1272 34.9999 34.7006C34.9999 37.0176 34.9999 39.9606 34.9999 42C34.9999 43.9641 34.9999 46.5476 34.9999 48.6074C34.9999 50.1492 36.6708 51.1099 38.0041 50.3357L49.4991 43.6611ZM42.9099 10.5C25.0949 10.01 10.4999 24.325 10.4999 42H4.23486C2.65986 42 1.88986 43.89 3.00986 44.975L12.7749 54.74C13.4749 55.44 14.5599 55.44 15.2599 54.74L25.0249 44.975C26.1099 43.89 25.3399 42 23.7649 42H17.4999C17.4999 28.35 28.6299 17.325 42.3499 17.5C55.3699 17.675 66.3249 28.63 66.4999 41.65C66.6749 55.335 55.6499 66.5 41.9999 66.5C37.6249 66.5 33.5299 65.31 29.9599 63.315C28.5949 62.545 26.9149 62.825 25.8299 63.945C24.2199 65.555 24.5349 68.32 26.5299 69.44C31.1149 71.995 36.3649 73.5 41.9999 73.5C59.6749 73.5 73.9899 58.905 73.4999 41.09C73.0449 24.675 59.3249 10.955 42.9099 10.5Z",
-        fill: "white"
-      })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-        id: "filter0_d_381_451457",
-        x: "-9.18718",
-        y: "0.487792",
-        width: "94.3661",
-        height: "86.3455",
-        filterUnits: "userSpaceOnUse",
-        "color-interpolation-filters": "sRGB"
-      }, /*#__PURE__*/React.createElement("feFlood", {
-        "flood-opacity": "0",
-        result: "BackgroundImageFix"
-      }), /*#__PURE__*/React.createElement("feColorMatrix", {
-        in: "SourceAlpha",
-        type: "matrix",
-        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-        result: "hardAlpha"
-      }), /*#__PURE__*/React.createElement("feOffset", {
-        dy: "1.66667"
-      }), /*#__PURE__*/React.createElement("feGaussianBlur", {
-        stdDeviation: "5.83333"
-      }), /*#__PURE__*/React.createElement("feComposite", {
-        in2: "hardAlpha",
-        operator: "out"
-      }), /*#__PURE__*/React.createElement("feColorMatrix", {
-        type: "matrix",
-        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.52 0"
-      }), /*#__PURE__*/React.createElement("feBlend", {
-        mode: "normal",
-        in2: "BackgroundImageFix",
-        result: "effect1_dropShadow_381_451457"
-      }), /*#__PURE__*/React.createElement("feBlend", {
-        mode: "normal",
-        in: "SourceGraphic",
-        in2: "effect1_dropShadow_381_451457",
-        result: "shape"
-      }))));
-    }
-
-    if (playState === "playing") {
-      return /*#__PURE__*/React.createElement(PauseRoundedIcon, {
-        sx: {
-          fontSize: "84px"
-        }
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(PlayArrowRoundedIcon, {
-      sx: {
-        fontSize: "84px"
-      }
-    });
-  };
-
-  const handleAddToPlace = added => {
-    onAddToPlace(added);
-  };
-
-  if (!bite) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }
-
-  if (!isOwner && ((bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" || (bite === null || bite === void 0 ? void 0 : bite.redactionType) === "PRIVATE")) {
-    return /*#__PURE__*/React.createElement(PremiumContainer, {
-      style: {
-        background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-      }
-    }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Stack, {
-      sx: {
-        backgroundColor: "grey4.main",
-        width: "100%",
-        height: "100%",
-        borderRadius: "8px",
-        padding: "10px",
-        boxSizing: "border-box",
-        position: "relative",
-        overflow: "hidden",
-        alignItems: "center",
-        justifyContent: "center"
-      }
-    }, /*#__PURE__*/React.createElement(LockRoundedIcon, null), /*#__PURE__*/React.createElement(Text, null, "Private Blerp"))));
-  }
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PremiumContainer, {
+const NewBlerpTest = () => {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
-      background: addedToPlace ? "white" : (bite === null || bite === void 0 ? void 0 : bite.isPremium) && "linear-gradient(315deg, #a839ff 0%, #53c3db 100%)"
-    }
-  }, /*#__PURE__*/React.createElement(ReportedWarning, {
-    showWarning: showWarning,
-    bite: bite,
-    blacklisted: bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex2 = bite.blacklistContext) === null || _bite$blacklistContex2 === void 0 ? void 0 : _bite$blacklistContex2._id,
-    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
-    onClick: onFavoriteClick
-  }), /*#__PURE__*/React.createElement(Container, {
-    isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium,
-    addToOpen: addToOpen
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
-      backgroundSize: "cover",
-      backgroundRepeat: "no-repeat",
-      backgroundColor: "grey4.main",
-      width: "100%",
-      height: "100%",
+      padding: "20px",
+      backgroundColor: "#2a2a2a",
       borderRadius: "8px",
-      padding: "10px",
-      boxSizing: "border-box",
-      position: "relative",
-      overflow: "hidden",
-      alignItems: "center",
-      justifyContent: "space-between",
-      cursor: "pointer"
-    },
-    onMouseEnter: () => {
-      setHovering(true);
-    },
-    onMouseLeave: () => {
-      setHovering(false);
-    }
-  }, /*#__PURE__*/React.createElement(Stack, {
-    id: "blerp-audio-button-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
-    className: "blerp-hover",
-    onClick: () => {
-      play({
-        bite
-      });
-      setPreviewed(true); // play({ bite });
-    },
-    sx: {
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      top: "0",
-      left: "0",
-      backgroundColor: "notBlack.override",
-      transition: "0.3s",
-      opacity: previewed || hovering ? "0.5" : "0",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }), /*#__PURE__*/React.createElement(BlerpTopRow, {
-    bite: bite,
-    onOptionClicked: onOptionClicked,
-    hovering: hovering,
-    onPlusClick: handleAddToPlace,
-    selectedOption: selectedOption,
-    renderAddContentButton: renderAddContentButton,
-    addToOpen: addToOpen,
-    setAddToOpen: setAddToOpen,
-    hoveringAddTo: hoveringAddTo,
-    setHovering: setHovering
-  }), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      transition: "0.3s",
-      opacity: hovering && !hoveringAddTo ? "1" : "0",
-      pointerEvents: "none",
-      zIndex: "3"
-    }
-  }, renderPlayStateIcon()), Waveform({
-    hovering: hovering
-  })), /*#__PURE__*/React.createElement(HoverScrollText, {
-    hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
-    onClick: onTitleClick
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "/soundbites/".concat(bite._id),
-    style: {
-      textDecoration: "none"
-    }
-  }, /*#__PURE__*/React.createElement(Text, {
-    ref: titleRef,
-    sx: {
-      fontSize: "16px",
-      fontWeight: "400",
-      lineHeight: "1"
-    }
-  }, bite === null || bite === void 0 ? void 0 : bite.title)), /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      position: "absolute",
-      right: "0",
-      top: "0",
-      width: "50px",
-      height: "100%",
-      display: "flex",
-      alignItems: "flex-end",
-      justifyContent: "center",
-      background: bite !== null && bite !== void 0 && bite.isPremium ? "linear-gradient(270deg, rgb(49 62 65) 40%, rgba(0,0,0,0) 100%)" : "linear-gradient(270deg, rgba(40,50,51,1) 40%, rgba(0,0,0,0) 100%)"
-    }
-  }, renderThreeDot())), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    alignItems: "center",
-    sx: {
-      width: "100%",
-      justifyContent: "start",
-      postion: "relative"
-    }
-  }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React.createElement(DiamondIcon, {
-    sx: {
-      fontSize: "18px",
-      marginRight: "5px"
-    }
-  }), trending && /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "17",
-    height: "17",
-    viewBox: "5 5 24 24",
-    fill: "none",
-    style: {
-      marginRight: "5px",
-      minWidth: "17px"
-    }
-  }, /*#__PURE__*/React.createElement("g", {
-    filter: "url(#filter0_d_808_2472)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
-    fill: "#FFD400"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M24.0435 17.3064C22.6698 13.7364 17.7785 13.5439 18.9598 8.35512C19.0473 7.97012 18.636 7.67262 18.3035 7.87387C15.1273 9.74637 12.8435 13.5001 14.7598 18.4176C14.9173 18.8201 14.4448 19.1964 14.1035 18.9339C12.5198 17.7351 12.3535 16.0114 12.4935 14.7776C12.546 14.3226 11.951 14.1039 11.6973 14.4801C11.1023 15.3901 10.4985 16.8601 10.4985 19.0739C10.831 23.9739 14.9698 25.4789 16.4573 25.6714C18.5835 25.9426 20.8848 25.5489 22.5385 24.0351C24.3585 22.3464 25.0235 19.6514 24.0435 17.3064ZM15.9235 21.7076C17.1835 21.4014 17.831 20.4914 18.006 19.6864C18.2948 18.4351 17.166 17.2101 17.9273 15.2326C18.216 16.8689 20.8885 17.8926 20.8885 19.6776C20.8585 21.8914 18.461 23.7901 15.9235 21.7076Z",
-    fill: "#FD295C",
-    "fill-opacity": "0.5"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-    id: "filter0_d_808_2472",
-    x: "0.498536",
-    y: "0.809083",
-    width: "33.9966",
-    height: "37.9418",
-    filterUnits: "userSpaceOnUse",
-    "color-interpolation-filters": "sRGB"
-  }, /*#__PURE__*/React.createElement("feFlood", {
-    "flood-opacity": "0",
-    result: "BackgroundImageFix"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    in: "SourceAlpha",
-    type: "matrix",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-    result: "hardAlpha"
-  }), /*#__PURE__*/React.createElement("feOffset", {
-    dy: "3"
-  }), /*#__PURE__*/React.createElement("feGaussianBlur", {
-    stdDeviation: "5"
-  }), /*#__PURE__*/React.createElement("feComposite", {
-    in2: "hardAlpha",
-    operator: "out"
-  }), /*#__PURE__*/React.createElement("feColorMatrix", {
-    type: "matrix",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.51 0"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    mode: "normal",
-    in2: "BackgroundImageFix",
-    result: "effect1_dropShadow_808_2472"
-  }), /*#__PURE__*/React.createElement("feBlend", {
-    mode: "normal",
-    in: "SourceGraphic",
-    in2: "effect1_dropShadow_808_2472",
-    result: "shape"
-  })))), /*#__PURE__*/React.createElement(FavoriteIconWithCounter, {
-    saved: bite === null || bite === void 0 ? void 0 : bite.saved,
-    count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
-    onClick: onFavoriteClick
-  }), /*#__PURE__*/React.createElement(UsernameWithPopout, {
-    onUsernameClick: onUsernameClick,
-    user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
-    collapsed: false
-  }), /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      fontWeight: "300",
-      fontSize: "12px",
-      color: "grey7.main",
-      position: "absolute",
-      right: "12px"
+      color: "white",
+      fontSize: "24px",
+      fontWeight: "bold",
+      textAlign: "center"
     }
-  }, (((bite === null || bite === void 0 ? void 0 : bite.audioDuration) || 1) / 1000).toFixed(0), "s")))));
+  }, "Test is working");
 };
 
-export default NewBlerpTest;
-export { AddedToIcons, FavoriteIconWithCounter, NewBlerpTest };
+export { NewBlerpTest, NewBlerpTest as default };