@blerp/design 1.0.62 → 1.0.63

package/dist/index.cjs.js

@@ -1402,7 +1402,7 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes__default['default'].func.isRequired
 };
 
-var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
+var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2, _templateObject8$1;
 //     _id: "5b237fbafca7167a35619410",
 //     title: "Crying",
 //     image: {
@@ -1421,7 +1421,7 @@ var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$
 //     },
 // };
 
-var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
+var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\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 zoomIn$1 = styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
@@ -1430,16 +1430,30 @@ styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _tagg
 }, function (props) {
   return props.theme.colors.notBlack;
 }, zoomIn$1);
-var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\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"])), function (props) {
+var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\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        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
+  return "".concat(props.theme.colors.notBlack, "8a");
+}, function (props) {
+  return props.theme.colors.seafoam;
+}, function (props) {
   return props.theme.colors.white;
 });
-var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
+var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), function (props) {
   return props.theme.colors.notBlackOverride;
 }, function (props) {
   return props.theme.colors.notBlackOverride;
-}, SaveContainer$1);
-styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _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"])));
-var BlerpListView$1 = function BlerpListView(_ref) {
+});
+var PremiumPill = styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 0 0 8px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), function (props) {
+  return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
+}, function (props) {
+  return props.theme.colors.seafoam;
+});
+styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\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.grey5;
+}, function (props) {
+  return props.theme.colors.ibisRed;
+});
+styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _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"])));
+var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
   var bite = _ref.bite,
@@ -1451,13 +1465,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       secondaryActionButton = _ref.secondaryActionButton,
       handleClickBackground = _ref.handleClickBackground,
       handleClickPlay = _ref.handleClickPlay,
-      handleClickSave = _ref.handleClickSave,
-      handleClickThreeDot = _ref.handleClickThreeDot,
-      handleClickUnsave = _ref.handleClickUnsave,
+      handleClickSave = _ref.handleClickSave;
+      _ref.handleClickThreeDot;
+      var handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
       isLinkTitle = _ref.isLinkTitle,
+      isLocked = _ref.isLocked,
       fluid = _ref.fluid;
       _ref.props;
+      _ref.isPremium;
+      var handleClickLock = _ref.handleClickLock,
+      handleClickPremium = _ref.handleClickPremium;
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2);
@@ -1466,12 +1484,24 @@ var BlerpListView$1 = function BlerpListView(_ref) {
 
   var _usePalette = reactPalette.usePalette(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);
       _usePalette.loading;
-      _usePalette.data;
+      var data = _usePalette.data;
       _usePalette.error;
 
   var theme = React.useContext(styled.ThemeContext);
   var size = useWindowSize();
 
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      isBlerpHovered = _useState4[0],
+      setIsBlerpHovered = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _slicedToArray__default['default'](_useState5, 2),
+      actionButtonHovered = _useState6[0],
+      setActionButtonHovered = _useState6[1];
+
+  console.log(data);
+
   var sizeParams;
   var smallSize = {
     width: 300,
@@ -1534,21 +1564,41 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   }
 
   return /*#__PURE__*/React__default['default'].createElement(Box, {
+    onMouseEnter: function onMouseEnter(e) {
+      return setIsBlerpHovered(true);
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return setIsBlerpHovered(false);
+    },
     sx: {
       width: sizeParams.width,
+      position: "relative",
       minWidth: fluid && "300px",
       borderRadius: "8px",
       border: "2px transparent",
-      bgcolor: "grey2.main",
+      backgroundImage: "white",
       backgroundOrigin: "border-box",
       backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
-      transition: "0.3s",
+      // overflow: "hidden",
       "&:hover": {
-        bgcolor: "grey3.main"
+        transition: "0.3s",
+        bgcolor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Box, {
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    sx: {
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      borderRadius: "8px",
+      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      transition: "opacity .15s ease-in-out",
+      opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Box, {
     onClick: function onClick(e) {
       e.stopPropagation();
       handleClickBackground();
@@ -1574,13 +1624,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     width: "70%",
     alignItems: "center",
     sx: {
-      cursor: "pointer"
+      cursor: "pointer",
+      minWidth: "30%"
     }
   }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
     style: {
       width: sizeParams.imageSize,
-      height: sizeParams.imageSize,
-      boxShadow: "0px 0px 0px 0px #999999a1;"
+      height: sizeParams.imageSize
     },
     url: 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
   }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
@@ -1606,13 +1656,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
-    href: "/soundbites/".concat(bite._id),
-    style: {
-      textDecoration: "none",
-      width: "100%"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -1630,12 +1674,19 @@ var BlerpListView$1 = function BlerpListView(_ref) {
         handleClickTitle();
       }
     }
+  }, /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none",
+      color: "white"
+    }
   }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
     width: "80%",
     marginLeft: "10px",
+    color: "white.override",
     sx: {
       ":hover": {
         textDecoration: handleClickTitle ? "underline" : "none"
@@ -1648,64 +1699,120 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       }
     }
   }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
-    direction: "row"
-  }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    direction: "row",
+    alignItems: "center"
+  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
+    isLocked: isLocked,
+    isBlerpHovered: isBlerpHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
-      handleClickUnsave();
-      setOpenSave(true);
+
+      if (handleClickLock) {
+        handleClickLock();
+      }
     },
+    onMouseEnter: function onMouseEnter() {
+      return setActionButtonHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setActionButtonHovered(false);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
-      backgroundColor: "white.override",
-      color: "starling.main",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "grey3.main"
+      position: "relative",
+      top: "1px",
+      "& svg": {
+        color: "white.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    title: "Unlock Premium"
+  }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
     sx: {
-      color: "notBlack.override"
+      fontSize: "22px",
+      position: "relative",
+      bottom: "2px",
+      left: "0px"
     }
-  })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
+  }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "16px",
+      position: "relative",
+      bottom: "1px"
+    }
+  })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
+    isLocked: isLocked,
+    isBlerpHovered: isBlerpHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
-      handleClickSave();
+      handleClickPremium();
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
+    sx: {
+      width: "16px",
+      marginRight: "4px",
+      color: "white.main"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Text, {
+    sx: {
+      marginRight: "4px",
+      color: "white.main",
+      fontSize: "12px"
+    }
+  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+
+      if (handleClickUnsave) {
+        handleClickUnsave();
+      }
+
       setOpenSave(true);
     },
     sx: {
       backgroundColor: "white.override",
       color: "starling.main",
       padding: "5px",
-      marginRight: "10px",
+      margin: "0 8px",
       ":hover": {
-        backgroundColor: "grey3.main"
+        backgroundColor: "seafoam.main"
+      },
+      ":hover svg": {
+        color: "white.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
     sx: {
-      color: "notBlack.override"
+      color: "starling.main"
     }
-  })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
+  })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
     onClick: function onClick(e) {
-      handleClickThreeDot(e);
+      e.stopPropagation();
+
+      if (handleClickSave) {
+        handleClickSave();
+      }
+
+      setOpenSave(true);
     },
     sx: {
       backgroundColor: "white.override",
       padding: "5px",
       marginRight: "10px",
       ":hover": {
-        backgroundColor: "grey3.main"
+        backgroundColor: "seafoam.main"
+      },
+      ":hover svg": {
+        color: "white.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
     sx: {
-      color: "notBlack.override"
+      color: "starling.main"
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
-BlerpListView$1.propTypes = {
+BlerpListViewPremium$1.propTypes = {
   bite: PropTypes__default['default'].object.isRequired,
   collections: PropTypes__default['default'].array.isRequired,
   variantSize: PropTypes__default['default'].string.isRequired,
@@ -1723,97 +1830,106 @@ BlerpListView$1.propTypes = {
   handleClickUnsave: PropTypes__default['default'].func.isRequired
 };
 
-var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var MasterContainer = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), function (_ref) {
-  var sizeParams = _ref.sizeParams;
-  return (sizeParams.height += 2) + "px";
-}, function (_ref2) {
-  var sizeParams = _ref2.sizeParams;
-  return sizeParams.width;
-}, function (_ref3) {
-  var fluid = _ref3.fluid;
-  return fluid ? "300px" : "0";
-}, function (props) {
-  return props.owned ? "102%" : "100%";
+var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
+//     _id: "5b237fbafca7167a35619410",
+//     title: "Crying",
+//     image: {
+//         filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
+//         original: {
+//             url:
+//                 "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
+//         },
+//     },
+//     audio: {
+//         filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
+//         original: {
+//             url:
+//                 "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
+//         },
+//     },
+// };
+
+var BlerpImage = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\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 YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
-var TopBox = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
+var zoomIn = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
+styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
+  return props.theme.colors.notBlack;
+}, function (props) {
+  return props.theme.colors.notBlack;
+}, zoomIn);
+var SaveContainer = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\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"])), function (props) {
   return props.theme.colors.white;
 });
-var MidBox = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
-  return props.theme.colors.grey5;
-});
-var BackBox = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n    background-color: blue;\n    background-color: ", ";\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
-  return props.theme.colors.grey7;
-});
-var PhotoBackground = styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 8px;\n    overflow: hidden;\n    background-position: center;\n"])), function (props) {
-  return props.url;
-});
-var BlurBackground = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    backdrop-filter: blur(4px);\n"])));
-var GradientBackground = styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    opacity: 0.7;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    width: 100%;\n    height: 100%;\n"])));
-var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: calc(100% - 4px);\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    margin: 0 auto;\n    transition: 0.2s;\n    position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
-
-var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    border-radius: 4px;\n    transition: 0.2s;\n    box-shadow: 0px 0px 0px 0px #999999a1;\n    cursor: pointer;\n\n    &:hover {\n        transform: scale(1.05);\n    }\n"])));
-var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n    z-index: 5;\n    width: 100%;\n    position: relative;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 4px;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), function (props) {
+var BlerpImageScrim = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
   return props.theme.colors.notBlackOverride;
-});
-var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
-var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), function (props) {
-  return props.depth === "1" ? "\n      transform: skewX(-5deg); \n      left: 2px; \n      height: 94%; \n      bottom: 0" : props.depth === "2" ? "\n      transform: skewX(-12deg); \n      left: 5px; \n      height: 83%; \n      width:97%;\n      bottom: 0" : "";
-});
-var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
-  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
-
-  var collection = _ref4.collection,
-      variantSize = _ref4.variantSize,
-      extraInfoComponent = _ref4.extraInfoComponent,
-      primaryActionButton = _ref4.primaryActionButton,
-      secondaryActionButton = _ref4.secondaryActionButton,
-      handleClickBackground = _ref4.handleClickBackground,
-      handleClickTitle = _ref4.handleClickTitle,
-      isLinkTitle = _ref4.isLinkTitle,
-      fluid = _ref4.fluid;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2);
-      _useState2[0];
-      _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
-
-
-  var _usePalette = 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);
-      _usePalette.loading;
-      var data = _usePalette.data;
-      _usePalette.error;
+}, function (props) {
+  return props.theme.colors.notBlackOverride;
+}, SaveContainer);
+styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _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"])));
+var BlerpListView$1 = function BlerpListView(_ref) {
+  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
-  var theme = React.useContext(styled.ThemeContext);
+  var bite = _ref.bite,
+      variantSize = _ref.variantSize,
+      isSelected = _ref.isSelected,
+      playingState = _ref.playingState,
+      extraInfoComponent = _ref.extraInfoComponent,
+      primaryActionButton = _ref.primaryActionButton,
+      secondaryActionButton = _ref.secondaryActionButton,
+      handleClickBackground = _ref.handleClickBackground,
+      handleClickPlay = _ref.handleClickPlay,
+      handleClickSave = _ref.handleClickSave,
+      handleClickThreeDot = _ref.handleClickThreeDot,
+      handleClickUnsave = _ref.handleClickUnsave,
+      handleClickTitle = _ref.handleClickTitle,
+      isLinkTitle = _ref.isLinkTitle,
+      fluid = _ref.fluid,
+      props = _ref.props,
+      isLocked = _ref.isLocked,
+      isPremium = _ref.isPremium,
+      handleClickLock = _ref.handleClickLock,
+      handleClickPremium = _ref.handleClickPremium;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2);
+      _useState2[0];
+      var setOpenSave = _useState2[1];
+
+  var _usePalette = reactPalette.usePalette(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);
+      _usePalette.loading;
+      _usePalette.data;
+      _usePalette.error;
+
+  var theme = React.useContext(styled.ThemeContext);
   var size = useWindowSize();
-  console.log("Collleeeeection", collection);
+
   var sizeParams;
   var smallSize = {
-    width: "300px",
+    width: 300,
     height: 40,
     fontSize: "16px",
-    saveBoxSize: "36px",
+    imageSize: "40px",
     reactionSpacing: 1,
     reactionPadding: "3px",
     reactionSize: "20px",
     buttonSize: "small"
   };
   var mediumSize = {
-    width: "375px",
+    width: 375,
     height: 48,
     fontSize: "18px",
-    saveBoxSize: "44px",
+    imageSize: "48px",
     reactionSpacing: 1,
     reactionPadding: "3px",
     reactionSize: "23px",
     buttonSize: "medium"
   };
   var largeSize = {
-    width: "440px",
+    width: 440,
     height: 56,
     fontSize: "20px",
-    saveBoxSize: "52px",
+    imageSize: "56px",
     reactionSpacing: 1,
     reactionPadding: "5px",
     reactionSize: "30px",
@@ -1826,7 +1942,7 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
         width: "100%",
         height: 48,
         fontSize: "18px",
-        saveBoxSize: "44px",
+        imageSize: "48px",
         reactionSpacing: 1,
         reactionPadding: "3px",
         reactionSize: "23px",
@@ -1843,237 +1959,211 @@ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
     if (variantSize === "small") {
       sizeParams = smallSize;
     } else if (variantSize === "medium") {
-      console.log(variantSize);
       sizeParams = mediumSize;
     } else if (variantSize === "large") {
       sizeParams = largeSize;
     }
   }
 
-  return (
-    /*#__PURE__*/
-    // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
+  if (isPremium) {
+    return /*#__PURE__*/React__default['default'].createElement(BlerpListViewPremium$1, {
+      bite: bite,
+      variantSize: variantSize,
+      isSelected: isSelected,
+      playingState: playingState,
+      extraInfoComponent: extraInfoComponent,
+      primaryActionButton: primaryActionButton,
+      secondaryActionButton: secondaryActionButton,
+      handleClickBackground: handleClickBackground,
+      handleClickPlay: handleClickPlay,
+      handleClickSave: handleClickSave,
+      handleClickThreeDot: handleClickThreeDot,
+      handleClickUnsave: handleClickUnsave,
+      handleClickTitle: handleClickTitle,
+      isLinkTitle: isLinkTitle,
+      fluid: fluid,
+      props: props,
+      isLocked: isLocked,
+      isPremium: isPremium,
+      handleClickLock: handleClickLock,
+      handleClickPremium: handleClickPremium
+    });
+  }
 
-    /* BIG PICTURE OF COMPONENT: 
-    Master Container
-        - TopBox (solid white background)
-            - PhotoBackground (if collection has photo)
-            - BlurBackground (always applied)
-            - Gradient Background (default is photo color --> black, fall back is white --> black)
-            - Interaction Box (holds clickable elements)
-        - MidBox (first "shadow")
-        - BackBox (second "shadow")
-    */
-    React__default['default'].createElement(MasterContainer, {
-      owned: collection === null || collection === void 0 ? void 0 : collection.owned,
-      sizeParams: sizeParams,
-      fluid: fluid
-    }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
-      id: "yellow-border"
-    }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
-      onClick: function onClick(e) {
-        e.stopPropagation();
-        handleClickBackground();
-      },
-      style: {
-        borderBottomColor: extraInfoComponent && theme.colors.grey3,
-        width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
-      url: 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
-    }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
-      style: {
-        background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
-      style: {
-        borderBottomColor: extraInfoComponent && theme.colors.grey3
+  return /*#__PURE__*/React__default['default'].createElement(Box, {
+    sx: {
+      width: sizeParams.width,
+      minWidth: fluid && "300px",
+      borderRadius: "8px",
+      border: "2px transparent",
+      bgcolor: "grey2.main",
+      backgroundOrigin: "border-box",
+      backgroundClip: "content-box, border-box",
+      boxShadow: "2px 2px 4px 0px #999999a1;",
+      transition: "0.3s",
+      "&:hover": {
+        bgcolor: "grey3.main"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-      direction: "row",
-      justifyContent: "flex-start",
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Box, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleClickBackground();
+    },
+    sx: {
+      width: "calc(100% - 4px)",
+      height: sizeParams.height,
+      display: "flex",
+      flexDirection: "row",
       alignItems: "center",
-      sx: {
-        position: "relative",
-        width: "calc(100% - 180px)",
-        left: "2px"
+      justifyContent: "space-between",
+      borderRadius: "8px",
+      border: "2px solid transparent",
+      borderRightWidth: "0px",
+      borderLeftWidth: "0px",
+      margin: "0 auto",
+      borderBottomColor: extraInfoComponent && theme.colors.grey3,
+      transition: "0.3s",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    width: "70%",
+    alignItems: "center",
+    sx: {
+      cursor: "pointer"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize,
+      boxShadow: "0px 0px 0px 0px #999999a1;"
+    },
+    url: 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
+  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
+    style: {
+      width: sizeParams.imageSize,
+      height: sizeParams.imageSize
+    },
+    onClick: function onClick(e) {
+      if (handleClickPlay) {
+        e.stopPropagation();
+        handleClickPlay();
       }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize
-      },
-      onClick: function onClick(e) {
-        console.log("handle save/unsave here");
+    }
+  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      color: "white.override"
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      color: "white.override"
+    }
+  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+    href: "/soundbites/".concat(bite._id),
+    style: {
+      textDecoration: "none",
+      width: "100%"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "80%",
+    marginLeft: "10px",
+    color: "white.override",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize,
-        background: data.darkVibrant || "#999999"
+    },
+    onClick: function onClick(e) {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
       }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
-      style: {
-        background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
+    }
+  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    noWrap: true,
+    width: "80%",
+    marginLeft: "10px",
+    sx: {
+      ":hover": {
+        textDecoration: handleClickTitle ? "underline" : "none"
       }
-    }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
-      sx: {
-        width: "30px",
-        height: "30px",
-        color: "white.override",
-        position: "relative",
-        bottom: "1px"
+    },
+    onClick: function onClick(e) {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
       }
-    }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
-      sx: {
-        width: "30px",
-        height: "30px",
-        color: "white.override",
-        position: "relative",
-        bottom: "1px"
+    }
+  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row"
+  }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleClickUnsave();
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      color: "starling.main",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
       }
-    })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
-      depth: "2",
-      style: {
-        background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
-      }
-    }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
-      depth: "1",
-      style: {
-        background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
-      }
-    })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
-      href: "/sound-collection/".concat(collection._id),
-      style: {
-        textDecoration: "none",
-        width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
-        position: "relative",
-        left: "12px"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(Text, {
-      textAlign: "left",
-      fontSize: sizeParams.fontSize,
-      noWrap: true,
-      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
-      sx: {
-        ":hover": {
-          textDecoration: handleClickTitle ? "underline" : "none"
-        },
-        "@media (max-width: 600px)": {
-          maxWidth: "133px"
-        }
-      },
-      onClick: function onClick(e) {
-        if (handleClickTitle) {
-          e.stopPropagation();
-          handleClickTitle();
-        }
-      }
-    }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
-      textAlign: "left",
-      fontSize: sizeParams.fontSize,
-      noWrap: true,
-      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
-      sx: {
-        position: "relative",
-        left: "12px",
-        ":hover": {
-          textDecoration: handleClickTitle ? "underline" : "none"
-        },
-        "@media (max-width: 600px)": {
-          maxWidth: "133px"
-        }
-      },
-      onClick: function onClick(e) {
-        console.log("handle non-linkTitle click here");
-      }
-    }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
-      direction: "row",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      sx: {
-        height: "70%"
-      }
-    }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
-      direction: "row",
-      justifyContent: "space-around",
-      alignItems: "center",
-      sx: {
-        height: "100%",
-        width: "102px",
-        position: "relative"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-      sx: {
-        borderRadius: "20px",
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        backgroundColor: "notBlack.main",
-        opacity: ".5"
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
-      sx: {
-        opacity: "1",
-        zIndex: "2",
-        color: "white.override",
-        height: "18px"
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(Text, {
-      sx: {
-        zIndex: "2",
-        color: "white.override",
-        fontWeight: "lighter",
-        fontSize: "14px",
-        cursor: "default",
-        position: "relative",
-        right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
-      }
-    }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
-      sx: {
-        zIndex: "2",
-        color: "white.override",
-        height: "14px"
-      }
-    })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
-      id: "second-button",
-      onClick: function onClick(e) {
-        console.log("handle secondary button click here");
-      },
-      sx: {
-        padding: "5px",
-        transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
-        "&:hover": {
-          backgroundColor: "grey6.main"
-        }
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-      sx: {
-        borderRadius: "20px",
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        backgroundColor: "notBlack.main",
-        opacity: ".5"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+    sx: {
+      color: "notBlack.override"
+    }
+  })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleClickSave();
+      setOpenSave(true);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      color: "starling.main",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
       }
-    }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
-      sx: {
-        zIndex: "2",
-        color: "white.override"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
+    sx: {
+      color: "notBlack.override"
+    }
+  })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    onClick: function onClick(e) {
+      handleClickThreeDot(e);
+    },
+    sx: {
+      backgroundColor: "white.override",
+      padding: "5px",
+      marginRight: "10px",
+      ":hover": {
+        backgroundColor: "grey3.main"
       }
-    }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
-      id: "mid-box"
-    }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
-      id: "back-box"
-    }), extraInfoComponent && extraInfoComponent)
-  );
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
+    sx: {
+      color: "notBlack.override"
+    }
+  })))), extraInfoComponent && extraInfoComponent);
 };
-CollectionListViewPremium$1.propTypes = {
-  collection: PropTypes__default['default'].object.isRequired,
+BlerpListView$1.propTypes = {
+  bite: PropTypes__default['default'].object.isRequired,
   collections: PropTypes__default['default'].array.isRequired,
   variantSize: PropTypes__default['default'].string.isRequired,
   userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2083,142 +2173,104 @@ CollectionListViewPremium$1.propTypes = {
   getUserReactions: PropTypes__default['default'].func.isRequired,
   createCollection: PropTypes__default['default'].func.isRequired,
   handleClickBackground: PropTypes__default['default'].func.isRequired,
+  handleClickPlay: PropTypes__default['default'].func.isRequired,
+  handleClickThreeDot: PropTypes__default['default'].func.isRequired,
   handleClickSave: PropTypes__default['default'].func.isRequired,
   handleClickReaction: PropTypes__default['default'].func.isRequired,
   handleClickUnsave: PropTypes__default['default'].func.isRequired
 };
 
-var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
-//     _id: "5b237fbafca7167a35619410",
-//     title: "Crying",
-//     image: {
-//         filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
-//         original: {
-//             url:
-//                 "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
-//         },
-//     },
-//     audio: {
-//         filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
-//         original: {
-//             url:
-//                 "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
-//         },
-//     },
-// };
-
-var BlerpImage = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\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 zoomIn = styled.keyframes(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
-  return props.theme.colors.notBlack;
-}, function (props) {
-  return props.theme.colors.notBlack;
-}, zoomIn);
-var SaveContainer = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\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        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
-  return "".concat(props.theme.colors.notBlack, "8a");
-}, function (props) {
-  return props.theme.colors.seafoam;
+var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var MasterContainer = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), function (_ref) {
+  var sizeParams = _ref.sizeParams;
+  return (sizeParams.height += 2) + "px";
+}, function (_ref2) {
+  var sizeParams = _ref2.sizeParams;
+  return sizeParams.width;
+}, function (_ref3) {
+  var fluid = _ref3.fluid;
+  return fluid ? "300px" : "0";
 }, function (props) {
+  return props.owned ? "102%" : "100%";
+});
+var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
+var TopBox = styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
   return props.theme.colors.white;
 });
-var BlerpImageScrim = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), function (props) {
-  return props.theme.colors.notBlackOverride;
-}, function (props) {
-  return props.theme.colors.notBlackOverride;
+var MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
+  return props.theme.colors.grey5;
 });
-var PremiumPill = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 4px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), function (props) {
-  return props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a");
-}, function (props) {
-  return props.theme.colors.seafoam;
+var BackBox = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n    background-color: blue;\n    background-color: ", ";\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
+  return props.theme.colors.grey7;
 });
-styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\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.grey5;
-}, function (props) {
-  return props.theme.colors.ibisRed;
+var PhotoBackground = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 8px;\n    overflow: hidden;\n    background-position: center;\n"])), function (props) {
+  return props.url;
 });
-styled__default['default'].div(_templateObject8 || (_templateObject8 = _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"])));
-var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
-  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
-
-  var bite = _ref.bite,
-      variantSize = _ref.variantSize;
-      _ref.isSelected;
-      var playingState = _ref.playingState,
-      extraInfoComponent = _ref.extraInfoComponent,
-      primaryActionButton = _ref.primaryActionButton,
-      secondaryActionButton = _ref.secondaryActionButton,
-      handleClickBackground = _ref.handleClickBackground,
-      handleClickPlay = _ref.handleClickPlay,
-      handleClickSave = _ref.handleClickSave;
-      _ref.handleClickThreeDot;
-      var handleClickUnsave = _ref.handleClickUnsave,
-      handleClickTitle = _ref.handleClickTitle,
-      isLinkTitle = _ref.isLinkTitle,
-      isLocked = _ref.isLocked,
-      fluid = _ref.fluid;
-      _ref.props;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2);
-      _useState2[0];
-      var setOpenSave = _useState2[1];
+var BlurBackground = styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    backdrop-filter: blur(4px);\n"])));
+var GradientBackground = styled__default['default'].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    opacity: 0.7;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    width: 100%;\n    height: 100%;\n"])));
+var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: calc(100% - 4px);\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    margin: 0 auto;\n    transition: 0.2s;\n    position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
 
-  var _usePalette = reactPalette.usePalette(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);
-      _usePalette.loading;
-      var data = _usePalette.data;
-      _usePalette.error;
-
-  var theme = React.useContext(styled.ThemeContext);
-  var size = useWindowSize();
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      isBlerpHovered = _useState4[0],
-      setIsBlerpHovered = _useState4[1];
+var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    border-radius: 4px;\n    transition: 0.2s;\n    box-shadow: 0px 0px 0px 0px #999999a1;\n    cursor: pointer;\n\n    &:hover {\n        transform: scale(1.05);\n    }\n"])));
+var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n    z-index: 5;\n    width: 100%;\n    position: relative;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 4px;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), function (props) {
+  return props.theme.colors.notBlackOverride;
+});
+var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
+var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), function (props) {
+  return props.depth === "1" ? "\n      transform: skewX(-5deg); \n      left: 2px; \n      height: 94%; \n      bottom: 0" : props.depth === "2" ? "\n      transform: skewX(-12deg); \n      left: 5px; \n      height: 83%; \n      width:97%;\n      bottom: 0" : "";
+});
+var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
 
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray__default['default'](_useState5, 2),
-      actionButtonHovered = _useState6[0],
-      setActionButtonHovered = _useState6[1];
+  var collection = _ref4.collection,
+      variantSize = _ref4.variantSize,
+      extraInfoComponent = _ref4.extraInfoComponent,
+      primaryActionButton = _ref4.primaryActionButton,
+      secondaryActionButton = _ref4.secondaryActionButton,
+      handleClickBackground = _ref4.handleClickBackground,
+      handleClickTitle = _ref4.handleClickTitle,
+      isLinkTitle = _ref4.isLinkTitle,
+      fluid = _ref4.fluid;
 
-  console.log(data);
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2);
+      _useState2[0];
+      _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
 
-  var handleClickLock = function handleClickLock(bite) {
-    console.log("route to purchase modal with id: ".concat(bite));
-  };
 
-  var handleClickPremium = function handleClickPremium(bite) {
-    console.log("route to purchase modal with id: ".concat(bite));
-  };
+  var _usePalette = 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);
+      _usePalette.loading;
+      var data = _usePalette.data;
+      _usePalette.error;
 
+  var theme = React.useContext(styled.ThemeContext);
+  var size = useWindowSize();
+  console.log("Collleeeeection", collection);
   var sizeParams;
   var smallSize = {
-    width: 300,
+    width: "300px",
     height: 40,
     fontSize: "16px",
-    imageSize: "40px",
+    saveBoxSize: "36px",
     reactionSpacing: 1,
     reactionPadding: "3px",
     reactionSize: "20px",
     buttonSize: "small"
   };
   var mediumSize = {
-    width: 375,
+    width: "375px",
     height: 48,
     fontSize: "18px",
-    imageSize: "48px",
+    saveBoxSize: "44px",
     reactionSpacing: 1,
     reactionPadding: "3px",
     reactionSize: "23px",
     buttonSize: "medium"
   };
   var largeSize = {
-    width: 440,
+    width: "440px",
     height: 56,
     fontSize: "20px",
-    imageSize: "56px",
+    saveBoxSize: "52px",
     reactionSpacing: 1,
     reactionPadding: "5px",
     reactionSize: "30px",
@@ -2231,7 +2283,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
         width: "100%",
         height: 48,
         fontSize: "18px",
-        imageSize: "48px",
+        saveBoxSize: "44px",
         reactionSpacing: 1,
         reactionPadding: "3px",
         reactionSize: "23px",
@@ -2248,252 +2300,237 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
     if (variantSize === "small") {
       sizeParams = smallSize;
     } else if (variantSize === "medium") {
+      console.log(variantSize);
       sizeParams = mediumSize;
     } else if (variantSize === "large") {
       sizeParams = largeSize;
     }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(Box, {
-    onMouseEnter: function onMouseEnter(e) {
-      return setIsBlerpHovered(true);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return setIsBlerpHovered(false);
-    },
-    sx: {
-      width: sizeParams.width,
-      position: "relative",
-      minWidth: fluid && "300px",
-      borderRadius: "8px",
-      border: "2px transparent",
-      backgroundImage: "white",
-      backgroundOrigin: "border-box",
-      backgroundClip: "content-box, border-box",
-      boxShadow: "2px 2px 4px 0px #999999a1;",
-      // overflow: "hidden",
-      "&:hover": {
-        transition: "0.3s",
-        bgcolor: "grey2.main"
+  return (
+    /*#__PURE__*/
+    // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
+
+    /* BIG PICTURE OF COMPONENT: 
+    Master Container
+        - TopBox (solid white background)
+            - PhotoBackground (if collection has photo)
+            - BlurBackground (always applied)
+            - Gradient Background (default is photo color --> black, fall back is white --> black)
+            - Interaction Box (holds clickable elements)
+        - MidBox (first "shadow")
+        - BackBox (second "shadow")
+    */
+    React__default['default'].createElement(MasterContainer, {
+      owned: collection === null || collection === void 0 ? void 0 : collection.owned,
+      sizeParams: sizeParams,
+      fluid: fluid
+    }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
+      id: "yellow-border"
+    }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        handleClickBackground();
+      },
+      style: {
+        borderBottomColor: extraInfoComponent && theme.colors.grey3,
+        width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
       }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    sx: {
-      position: "absolute",
-      top: "0",
-      bottom: "0",
-      left: "0",
-      right: "0",
-      borderRadius: "8px",
-      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
-      transition: "opacity .15s ease-in-out",
-      opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(Box, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      handleClickBackground();
-    },
-    sx: {
-      width: "calc(100% - 4px)",
-      height: sizeParams.height,
-      display: "flex",
-      flexDirection: "row",
+    }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
+      url: 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
+    }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
+      style: {
+        background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
+      style: {
+        borderBottomColor: extraInfoComponent && theme.colors.grey3
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+      direction: "row",
+      justifyContent: "flex-start",
       alignItems: "center",
-      justifyContent: "space-between",
-      borderRadius: "8px",
-      border: "2px solid transparent",
-      borderRightWidth: "0px",
-      borderLeftWidth: "0px",
-      margin: "0 auto",
-      borderBottomColor: extraInfoComponent && theme.colors.grey3,
-      transition: "0.3s",
-      position: "relative"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    direction: "row",
-    width: "70%",
-    alignItems: "center",
-    sx: {
-      cursor: "pointer",
-      minWidth: "30%"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    url: 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
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    onClick: function onClick(e) {
-      if (handleClickPlay) {
-        e.stopPropagation();
-        handleClickPlay();
+      sx: {
+        position: "relative",
+        width: "calc(100% - 180px)",
+        left: "2px"
       }
-    }
-  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "80%",
-    marginLeft: "10px",
-    color: "white.override",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
+    }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
+      style: {
+        width: sizeParams.saveBoxSize,
+        height: sizeParams.saveBoxSize
+      },
+      onClick: function onClick(e) {
+        console.log("handle save/unsave here");
       }
-    },
-    onClick: function onClick(e) {
-      if (handleClickTitle) {
-        e.stopPropagation();
-        handleClickTitle();
+    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
+      style: {
+        width: sizeParams.saveBoxSize,
+        height: sizeParams.saveBoxSize,
+        background: data.darkVibrant || "#999999"
       }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("a", {
-    href: "/soundbites/".concat(bite._id),
-    style: {
-      textDecoration: "none",
-      color: "white"
-    }
-  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "80%",
-    marginLeft: "10px",
-    color: "white.override",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
+    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
+      style: {
+        background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
       }
-    },
-    onClick: function onClick(e) {
-      if (handleClickTitle) {
-        e.stopPropagation();
-        handleClickTitle();
+    }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+      sx: {
+        width: "30px",
+        height: "30px",
+        color: "white.override",
+        position: "relative",
+        bottom: "1px"
       }
-    }
-  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
-    direction: "row",
-    alignItems: "center"
-  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      handleClickLock();
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setActionButtonHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setActionButtonHovered(false);
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
-    sx: {
-      position: "relative",
-      top: "1px",
-      "& svg": {
-        color: "white.main"
+    }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
+      sx: {
+        width: "30px",
+        height: "30px",
+        color: "white.override",
+        position: "relative",
+        bottom: "1px"
       }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Unlock"
-  }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
-    sx: {
-      fontSize: "22px",
-      position: "relative",
-      bottom: "2px",
-      left: "0px"
-    }
-  }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
-    sx: {
-      fontSize: "16px",
-      position: "relative",
-      bottom: "1px"
-    }
-  })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      handleClickPremium();
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
-    sx: {
-      width: "16px",
-      marginRight: "4px",
-      color: "white.main"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
-      marginRight: "4px",
-      color: "white.main",
-      fontSize: "12px"
-    }
-  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      handleClickUnsave();
-      setOpenSave(true);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      color: "starling.main",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "seafoam.main"
+    })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
+      depth: "2",
+      style: {
+        background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
+      }
+    }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
+      depth: "1",
+      style: {
+        background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
+      }
+    })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+      href: "/sound-collection/".concat(collection._id),
+      style: {
+        textDecoration: "none",
+        width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
+        position: "relative",
+        left: "12px"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Text, {
+      textAlign: "left",
+      fontSize: sizeParams.fontSize,
+      noWrap: true,
+      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
+      sx: {
+        ":hover": {
+          textDecoration: handleClickTitle ? "underline" : "none"
+        },
+        "@media (max-width: 600px)": {
+          maxWidth: "133px"
+        }
       },
-      ":hover svg": {
-        color: "white.main"
+      onClick: function onClick(e) {
+        if (handleClickTitle) {
+          e.stopPropagation();
+          handleClickTitle();
+        }
       }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
-    sx: {
-      color: "starling.main"
-    }
-  })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      handleClickSave();
-      setOpenSave(true);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "seafoam.main"
+    }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
+      textAlign: "left",
+      fontSize: sizeParams.fontSize,
+      noWrap: true,
+      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
+      sx: {
+        position: "relative",
+        left: "12px",
+        ":hover": {
+          textDecoration: handleClickTitle ? "underline" : "none"
+        },
+        "@media (max-width: 600px)": {
+          maxWidth: "133px"
+        }
       },
-      ":hover svg": {
-        color: "white.main"
+      onClick: function onClick(e) {
+        console.log("handle non-linkTitle click here");
       }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
-    sx: {
-      color: "starling.main"
-    }
-  })))), extraInfoComponent && extraInfoComponent);
+    }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      direction: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      sx: {
+        height: "70%"
+      }
+    }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
+      direction: "row",
+      justifyContent: "space-around",
+      alignItems: "center",
+      sx: {
+        height: "100%",
+        width: "102px",
+        position: "relative"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+      sx: {
+        borderRadius: "20px",
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        left: "0",
+        right: "0",
+        backgroundColor: "notBlack.main",
+        opacity: ".5"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
+      sx: {
+        opacity: "1",
+        zIndex: "2",
+        color: "white.override",
+        height: "18px"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(Text, {
+      sx: {
+        zIndex: "2",
+        color: "white.override",
+        fontWeight: "lighter",
+        fontSize: "14px",
+        cursor: "default",
+        position: "relative",
+        right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
+      }
+    }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+      sx: {
+        zIndex: "2",
+        color: "white.override",
+        height: "14px"
+      }
+    })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
+      id: "second-button",
+      onClick: function onClick(e) {
+        console.log("handle secondary button click here");
+      },
+      sx: {
+        padding: "5px",
+        transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
+        "&:hover": {
+          backgroundColor: "grey6.main"
+        }
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+      sx: {
+        borderRadius: "20px",
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        left: "0",
+        right: "0",
+        backgroundColor: "notBlack.main",
+        opacity: ".5"
+      }
+    }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
+      sx: {
+        zIndex: "2",
+        color: "white.override"
+      }
+    }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
+      id: "mid-box"
+    }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
+      id: "back-box"
+    }), extraInfoComponent && extraInfoComponent)
+  );
 };
-BlerpListViewPremium$1.propTypes = {
-  bite: PropTypes__default['default'].object.isRequired,
+CollectionListViewPremium$1.propTypes = {
+  collection: PropTypes__default['default'].object.isRequired,
   collections: PropTypes__default['default'].array.isRequired,
   variantSize: PropTypes__default['default'].string.isRequired,
   userSignedIn: PropTypes__default['default'].object.isRequired,
@@ -2503,8 +2540,6 @@ BlerpListViewPremium$1.propTypes = {
   getUserReactions: PropTypes__default['default'].func.isRequired,
   createCollection: PropTypes__default['default'].func.isRequired,
   handleClickBackground: PropTypes__default['default'].func.isRequired,
-  handleClickPlay: PropTypes__default['default'].func.isRequired,
-  handleClickThreeDot: PropTypes__default['default'].func.isRequired,
   handleClickSave: PropTypes__default['default'].func.isRequired,
   handleClickReaction: PropTypes__default['default'].func.isRequired,
   handleClickUnsave: PropTypes__default['default'].func.isRequired