@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/PremiumCollectionCard.js

@@ -2,496 +2,233 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var BookmarkRounded = require('@mui/icons-material/BookmarkRounded');
-var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
 var React = require('react');
-var reactColorExtractor = require('react-color-extractor');
-var reactPalette = require('react-palette');
+var BlerpImageRow = require('./Blerp/BlerpImageRow.js');
+var BlerpSavePopup = require('./Blerp/BlerpSavePopup.js');
+var BlerpTitleRow = require('./Blerp/BlerpTitleRow.js');
+var BlerpTopRow = require('./Blerp/BlerpTopRow.js');
 var index = require('./index.js');
-var styled = require('styled-components');
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-var Icons = require('./Icons/Icons.js');
+var ScreenSizeHook = require('./ScreenSizeHook.js');
+var helpers = require('./helpers.js');
+var Theme = require('./Theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var BookmarkRounded__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRounded);
-var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-//primary and secondary action buttons
-
-const YellowHoverBorder = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n  position: absolute;\n  height: 105%;\n  width: 105%;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border: 4px solid rgb(255, 225, 76);\n  border-radius: 20px;\n  transition: opacity 0.3s ease-in-out;\n  /* Opacity should be changed to \"1\" onHover of this component's parent */\n  opacity: 0;\n"])));
-const LineClamp = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 5px 0;\n  max-width: 92%;\n"])));
-const TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  width: ", ";\n  position: absolute;\n  top: 8px;\n  left: 8px;\n  border-radius: 20px;\n  overflow: hidden;\n  transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
-const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n  height: 32px;\n  width: 100%;\n  position: absolute;\n  background-color: ", ";\n  opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
-const LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n  z-index: -1;\n  padding-bottom: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  align-items: center;\n  z-index: 1;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: \"hidden\";\n  transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n  opacity: ", ";\n  backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
-const LockedScrimBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  /* transition: opacity 0.3s ease-in-out; */\n\n  background-color: ", ";\n\n  opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
-const PremiumCollectionCard = _ref => {
-  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
+const Blerp = _ref => {
+  var _bite$image2, _bite$image2$original;
 
   let {
-    collection,
+    bite,
+    title,
     variantSize,
-    handleClickBackground,
-    handleClickSave,
-    handleClickView,
-    handleClickUnlock,
-    handleClickPrimaryAction,
-    handleClickSecondaryAction,
+    isSelected,
+    playingState,
     primaryActionButton,
     secondaryActionButton,
-    bottomLeftIcon,
-    handleClickBottomLeftIcon,
-    premiumDiamondPill,
-    fluid,
-    fontSize,
-    isLink,
+    unsaveButton,
+    organizeButton,
+    getUserReactions,
+    handleClickBackground,
+    handleClickPlay,
+    handleClickThreeDot,
+    handleClickSave,
+    handleClickReaction,
+    handleClickUnsave,
+    handleClickTitle,
+    handleClickOrganize,
+    isLinkTitle,
+    isPremium,
     isLocked,
-    overrideViewText,
-    hideUnlockPlatformText,
-    hidePremiumLockIcon,
-    unlockPlatformText,
-    hideCollectionBackground
+    isOwner,
+    props,
+    // passed in function that sets state of the purchase modal
+    handleClickLock,
+    backgroundColor
   } = _ref;
-  const [cardColors, setCardColors] = React.useState(null);
-  const [collectionHovered, setCollectionHovered] = React.useState(false);
-  const {
-    data,
-    loading,
-    error
-  } = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
+  const theme = Theme.useBlerpTheme();
+  const [openSave, setOpenSave] = React.useState(false);
+  const size = ScreenSizeHook.useWindowSize();
+  const [profileColors, setProfileColors] = React.useState(null);
+  const [isBlerpHovered, setIsBlerpHovered] = React.useState(false);
+  const anchorRef = React.useRef(); // Extract color when image URL changes
+
+  React.useEffect(() => {
+    var _bite$image, _bite$image$original;
+
+    if (bite !== null && bite !== void 0 && (_bite$image = bite.image) !== null && _bite$image !== void 0 && (_bite$image$original = _bite$image.original) !== null && _bite$image$original !== void 0 && _bite$image$original.url) {
+      helpers.extractDominantColor(bite.image.original.url, setProfileColors);
+    }
+  }, [bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url]); // console.log(bite?.image?.original?.url, profileColors);
+
+  let sizeParams = {
+    width: 220,
+    height: 234,
+    fontSize: "20px",
+    imageSize: "135px",
+    reactionSpacing: 1,
+    reactionPadding: "5px",
+    reactionSize: "24px",
+    buttonSize: "large"
+  };
+  const tinySize = {
+    width: 124,
+    height: 124,
+    fontSize: "10px",
+    imageSize: "60px",
+    reactionSpacing: 0.5,
+    reactionPadding: "1px",
+    reactionSize: "11px",
+    buttonSize: "small"
+  };
   const smallSize = {
-    size: "small",
-    width: "70px",
-    height: "70px"
+    width: 150,
+    height: 160,
+    fontSize: "12px",
+    imageSize: "90px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "16px",
+    buttonSize: "small"
+  };
+  const mediumSize = {
+    width: 180,
+    height: 190,
+    fontSize: "18px",
+    imageSize: "100px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "20px",
+    buttonSize: "medium"
   };
   const largeSize = {
-    size: "large",
-    width: "200px",
-    height: "200px"
+    width: 220,
+    height: 234,
+    fontSize: "20px",
+    imageSize: "135px",
+    reactionSpacing: 1,
+    reactionPadding: "5px",
+    reactionSize: "24px",
+    buttonSize: "large"
   };
-  let sizeParams = largeSize;
 
-  if (variantSize === "small") {
-    sizeParams = smallSize;
+  if (!variantSize) {
+    if (size.width <= 340) {
+      sizeParams = tinySize;
+    } else if (size.width <= 600) {
+      sizeParams = smallSize;
+    } else if (size.width <= 900) {
+      sizeParams = mediumSize;
+    } else if (size.width > 900) {
+      sizeParams = largeSize;
+    }
+  } else {
+    if (variantSize === "small") {
+      sizeParams = smallSize;
+    } else if (variantSize === "medium") {
+      sizeParams = mediumSize;
+    } else if (variantSize === "large") {
+      sizeParams = largeSize;
+    } else if (variantSize === "tiny") {
+      sizeParams = tinySize;
+    }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    onMouseOver: () => setCollectionHovered(true),
-    onMouseLeave: () => setCollectionHovered(false),
-    sx: {
-      position: "relative",
-      display: "flex",
-      alignItems: "center",
-      width: fluid ? "80%" : sizeParams.width,
-      height: fluid ? "80%" : sizeParams.height
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
-    style: {
-      zIndex: "3"
-    },
-    src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
-    getColors: colors => setCardColors(colors)
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  if (!bite) {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    id: "blerp-component-".concat(bite === null || bite === void 0 ? void 0 : bite._id),
     onClick: e => {
       e.stopPropagation();
-      if (handleClickBackground) handleClickBackground();
+      handleClickBackground();
     },
+    ref: anchorRef,
+    onMouseEnter: e => setIsBlerpHovered(true),
+    onMouseLeave: e => setIsBlerpHovered(false),
     sx: {
+      width: isPremium ? sizeParams.width + 4 : sizeParams.width,
+      height: isPremium ? sizeParams.height + 4 : sizeParams.height,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "flex-start",
       borderRadius: "8px",
+      border: isPremium ? "none" : "2px solid",
+      borderColor: "grey2.main",
+      overflow: "hidden",
+      // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
+      // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
+      backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
+      transition: "0.3s",
       position: "relative",
-      width: fluid ? "90%" : sizeParams.width,
-      height: fluid ? "90%" : sizeParams.height,
       cursor: "pointer",
-      "& #collection-background-1,#collection-background-2": {
-        transform: isLocked ? "rotate(0deg)" : "",
-        right: isLocked ? "0" : ""
-      },
-      ":hover #collection-background-1": {
-        transform: isLocked ? "" : "rotate(7deg)",
-        height: isLocked ? "" : "91%",
-        right: isLocked ? "" : "-11px",
-        top: isLocked ? "" : "12px"
-      },
-      ":hover #collection-background-2": {
-        transform: isLocked ? "" : "rotate(14deg)",
-        height: isLocked ? "" : "84%",
-        right: isLocked ? "" : "-20px",
-        top: isLocked ? "" : "24px"
-      },
-      ":hover #yellow-border": {
-        opacity: "1"
+      "&:hover": {
+        bgcolor: isPremium ? "white.main" : "grey2.main",
+        border: isPremium ? "none" : "2px solid transparent"
       }
     }
-  }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLocked && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder, {
-    id: "yellow-border"
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    sx: {
-      backgroundColor: "transparent",
-      borderRadius: "12px",
-      width: "100%",
-      height: "100%",
-      position: "absolute",
-      top: "0",
-      zIndex: "3"
-    }
-  }), !hideCollectionBackground && /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    id: "collection-background-1",
-    sx: {
-      backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
-      borderRadius: "12px",
-      width: "50%",
-      height: "94%",
-      position: "absolute",
-      transform: "rotate(5deg) scale(1)",
-      right: "-8px",
-      top: "8px",
-      zIndex: "2",
-      transition: "0.2s ease-out"
-    }
-  }), !hideCollectionBackground && /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    id: "collection-background-2",
-    sx: {
-      backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
-      borderRadius: "12px",
-      width: "50%",
-      height: "89%",
-      position: "absolute",
-      transform: "rotate(10deg) scale(1)",
-      right: "-16px",
-      top: "16px",
-      zIndex: "1",
-      transition: "0.2s ease-out"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
-      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat",
-      width: "100%",
-      height: "100%",
-      borderRadius: "12px",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      zIndex: "3",
-      overflow: "hidden"
-    }
-  }, !isLocked ? /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    sx: {
-      backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a)"),
-      zIndex: "3",
-      paddingBottom: "8px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "flex-end",
-      alignItems: "center",
       position: "absolute",
       top: "0",
       bottom: "0",
       left: "0",
       right: "0",
-      overflow: "hidden",
-      transition: "opacity .3s ease-in-out",
-      opacity: collectionHovered ? "1" : "0"
-    }
-  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), premiumDiamondPill ? premiumDiamondPill : /*#__PURE__*/React__default['default'].createElement(TopPill, {
-    style: {
-      zIndex: "3"
-    },
-    collectionHovered: collectionHovered,
-    isLocked: isLocked
-  }, /*#__PURE__*/React__default['default'].createElement(TopPillBackground, null), primaryActionButton ? primaryActionButton : collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      position: "absolute",
-      top: "2px",
-      left: "2px",
-      width: "28px",
-      height: "28px",
-      color: "white.override",
-      borderRadius: "50%",
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: isLocked ? "1" : "0",
-      "&:hover": {
-        backgroundColor: "white.override"
-      },
-      ":hover svg": {
-        color: "starling.main"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkRounded__default['default'], {
-    sx: {
-      height: ".6em",
-      color: "white.override",
-      opacity: isLocked ? "1" : "0"
-    },
-    onClick: e => {
-      e.stopPropagation();
-      handleClickSave(false);
-    }
-  })) : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      position: "absolute",
-      top: "2px",
-      left: "2px",
-      width: "28px",
-      height: "28px",
-      color: "white.override",
-      borderRadius: "50%",
-      alignItems: "center",
-      justifyContent: "center",
-      opacity: isLocked ? "1" : "0",
-      "&:hover": {
-        backgroundColor: "white.override"
-      },
-      ":hover svg": {
-        color: "starling.main"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
-    onClick: e => {
-      e.stopPropagation();
-      handleClickSave(true);
-    },
-    sx: {
-      height: ".6em",
-      color: "white.override",
-      opacity: isLocked ? "1" : "0"
-    }
-  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      zIndex: "1",
-      position: "relative",
-      right: "4px"
-    },
-    direction: "row",
-    alignItems: "center"
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
-    sx: {
-      color: "white.override",
-      height: ".6em",
-      position: "relative",
-      left: "4px"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
-      color: "white.override",
-      fontWeight: "lighter",
-      fontSize: ".8em"
-    }
-  }, "Premium")), !hidePremiumLockIcon && /*#__PURE__*/React__default['default'].createElement(index.Stack, null, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
-    sx: {
-      position: "absolute",
-      top: "8px",
-      right: "5px",
-      height: ".6em",
-      color: "white.override",
-      paddingRight: "8px",
-      opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
-      transition: "opacity .2s ease-in-out"
-    },
-    onClick: e => {
-      e.stopPropagation();
-      handleClickSave(false);
-    }
-  }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      zIndex: "4",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      width: "28px",
-      height: "28px",
-      borderRadius: "50%",
-      top: "8px",
-      right: "8px",
-      padding: "2px",
-      transition: "all .1s ease-in-out",
-      "&:hover": {
-        width: "30px",
-        height: "30px",
-        top: "7px",
-        right: "7px"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    onClick: e => {
-      e.stopPropagation(); // NEEDS TO DIRECT TO CREATOR'S PROFILE
-
-      handleClickSecondaryAction();
-    },
-    sx: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      backgroundColor: "notBlack.override",
-      zIndex: "3",
-      borderRadius: "50%",
-      opacity: ".7",
-      "&:hover": {
-        backgroundColor: "ibisRed.main",
-        opacity: "1"
-      }
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("img", {
-    src: (collection === null || collection === void 0 ? void 0 : (_collection$ownerObje = collection.ownerObject) === null || _collection$ownerObje === void 0 ? void 0 : (_collection$ownerObje2 = _collection$ownerObje.profileImage) === null || _collection$ownerObje2 === void 0 ? void 0 : (_collection$ownerObje3 = _collection$ownerObje2.original) === null || _collection$ownerObje3 === void 0 ? void 0 : _collection$ownerObje3.url) || "https://cdn.blerp.com/design/web/account-white-check.svg",
-    style: {
-      width: "100%",
-      height: "100%",
-      zIndex: "5",
-      borderRadius: "50%",
-      pointerEvents: "none"
-    }
-  })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    sx: {
-      zIndex: "4",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "absolute",
-      width: "20px",
-      height: "20px",
-      borderRadius: "50%",
-      bottom: "8px",
-      right: "8px",
-      padding: "2px",
-      transition: "all .1s ease-in-out",
-      "&:hover": {
-        width: "24px",
-        height: "24px",
-        bottom: "8px",
-        right: "8px"
-      }
-    },
-    onClick: e => {
-      e.stopPropagation();
-      handleClickBottomLeftIcon();
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.PresentGiftIcon, {
-    sx: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      color: "white.override",
-      // backgroundColor: "grey4.main",
-      zIndex: "4",
-      borderRadius: "50%",
-      opacity: "1",
-      "&:hover": {
-        padding: "4px",
-        backgroundColor: "grey7.override",
-        opacity: "1"
-      }
-    }
-  })), isLink ? /*#__PURE__*/React__default['default'].createElement("a", {
-    href: "/sound-collection/".concat(collection._id),
-    style: {
-      color: "white",
-      textDecoration: "none"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    fontSize: fontSize ? fontSize : "22px",
-    color: "white.override",
-    textAlign: "center",
-    sx: {
-      zIndex: isLocked ? "1" : "3",
-      ":hover": {
-        textDecoration: "underline"
-      }
-    }
-  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
-      zIndex: isLocked ? "1" : "3"
-    },
-    fontSize: fontSize ? fontSize : "22px",
-    color: "white.override",
-    textAlign: "center"
-  }, collection === null || collection === void 0 ? void 0 : collection.title)), isLocked ? /*#__PURE__*/React__default['default'].createElement(LockedScrim, {
-    collectionHovered: collectionHovered
-  }, /*#__PURE__*/React__default['default'].createElement(LockedScrimBackground, {
-    collectionHovered: collectionHovered
-  }), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
-      color: "white.override",
-      textAlign: "center",
-      lineHeight: "1",
-      margin: "4px 0",
-      zIndex: "3",
-      fontSize: ".8rem"
-    }
-  }, unlockPlatformText) : /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    sx: {
-      color: "white.override",
-      textAlign: "center",
-      lineHeight: "1",
-      margin: "4px 0",
-      zIndex: "3",
-      fontSize: ".8rem"
-    }
-  }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms")), handleClickView && /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    disabled: !collectionHovered,
-    onClick: e => {
-      e.stopPropagation();
-      handleClickView();
-    },
-    variant: "contained",
-    sx: {
-      width: "70%",
-      fontSize: ".8rem",
-      padding: "4px 8px",
-      margin: "4px 0"
-    }
-  }, overrideViewText || "VIEW SOUNDPACK"), handleClickUnlock && /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    disabled: !collectionHovered,
-    onClick: e => {
-      e.stopPropagation();
-      handleClickUnlock();
-    },
-    variant: "outlined",
-    color: "whiteOverride",
-    sx: {
-      width: "50%",
-      margin: "6px 0",
-      padding: "2px 8px",
-      borderWidth: "2px !important",
-      overflow: "hidden"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    id: "button-background"
-  }), /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
-    sx: {
-      color: "white.override",
-      zIndex: "3",
-      height: ".8rem",
-      position: "relative",
-      bottom: "1px"
-    }
-  }), "UNLOCK")) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null))) :
-  /*#__PURE__*/
-  // What to display when variantSize === "small":
-  React__default['default'].createElement(index.Box, {
-    sx: {
-      backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat",
-      width: "100%",
-      height: "100%",
-      borderRadius: "8px",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      position: "relative"
-    }
+      transition: "background .15s ease-in-out",
+      background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
+      backgroundColor: isPremium && !profileColors && "grey5.override"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow, {
+    bite: bite,
+    isOwner: isOwner,
+    sizeParams: sizeParams,
+    getUserReactions: getUserReactions,
+    setOpenSave: setOpenSave,
+    handleClickSave: handleClickSave,
+    isPremium: isPremium,
+    isLocked: isLocked,
+    secondaryActionButton: secondaryActionButton,
+    isBlerpHovered: isBlerpHovered,
+    handleClickThreeDot: handleClickThreeDot
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow, {
+    bite: bite,
+    isOwner: isOwner,
+    sizeParams: sizeParams,
+    getUserReactions: getUserReactions,
+    setOpenSave: setOpenSave,
+    playingState: playingState,
+    handleClickSave: handleClickSave,
+    isPremium: isPremium,
+    isLocked: isLocked,
+    primaryActionButton: primaryActionButton,
+    isBlerpHovered: isBlerpHovered,
+    handleClickPlay: handleClickPlay,
+    handleClickLock: handleClickLock
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow, {
+    bite: bite,
+    title: title,
+    isLinkTitle: isLinkTitle,
+    handleClickTitle: handleClickTitle,
+    isPremium: isPremium,
+    isLocked: isLocked,
+    isOwner: isOwner,
+    sizeParams: sizeParams
+  }), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup, {
+    bite: bite,
+    anchorRef: anchorRef,
+    setOpenSave: setOpenSave,
+    openSave: openSave,
+    sizeParams: sizeParams,
+    unsaveButton: unsaveButton,
+    organizeButton: organizeButton,
+    handleClickReaction: handleClickReaction,
+    handleClickUnsave: handleClickUnsave,
+    handleClickOrganize: handleClickOrganize
   })));
 };
 
-exports.PremiumCollectionCard = PremiumCollectionCard;
-exports.default = PremiumCollectionCard;
+exports.Blerp = Blerp;
+exports["default"] = Blerp;