@blerp/design 1.3.17 → 1.4.1

package/dist/esm/CollectionListViewPremium.js

@@ -1,48 +1,50 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
-import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
-import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import 'prop-types';
-import React, { useState, useContext } from 'react';
-import { usePalette } from 'react-palette';
-import styled, { ThemeContext } from 'styled-components';
-import { Stack, Text, IconButton } from './index.js';
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState } from 'react';
+import { Stack, Box, Text, IconButton } from './index.js';
 import { useWindowSize } from './ScreenSizeHook.js';
+import { useCustomPalette } from './helpers.js';
+import { useBlerpTheme } from './Theme.js';
 import { DiamondIcon } from './Icons/Icons.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-const MasterContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), _ref => {
-  let {
-    sizeParams
-  } = _ref;
-  return (sizeParams.height += 2) + "px";
-}, _ref2 => {
-  let {
-    sizeParams
-  } = _ref2;
-  return sizeParams.width;
-}, _ref3 => {
+const _excluded = ["path", "sx", "size"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const Icon = _ref => {
   let {
-    fluid
-  } = _ref3;
-  return fluid ? "300px" : "0";
-}, props => props.owned ? "102%" : "100%");
-const YellowHoverBorder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
-const TopBox = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.white);
-const MidBox = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.grey5);
-const BackBox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.grey7);
-const PhotoBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), props => props.url);
-const BlurBackground = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"])));
-const GradientBackground = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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"])));
-const InteractionBox = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-const SaveBox = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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"])));
-const SaveBoxTop = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.notBlackOverride);
-const SaveBoxTopDarken = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
-const SaveBoxShadowSquare = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), props => 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" : "");
-const CollectionListViewPremium = _ref4 => {
-  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  bookmark: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z",
+  bookmarkAdd: "M21 7V5h2V3h-2V1h-2v2h-2v2h2v2h2zm-4 7V5c0-1.1-.9-2-2-2H7c-1.1 0-2 .9-2 2v16l7-3 7 3v-7h-2z",
+  arrowRight: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",
+  lock: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
+};
+const CollectionListViewPremium = _ref2 => {
+  var _collection$image, _collection$image$ori, _theme$colors, _theme$colors2, _theme$colors3, _collection$image2, _collection$image2$or;
 
   let {
     collection,
@@ -54,26 +56,19 @@ const CollectionListViewPremium = _ref4 => {
     handleClickTitle,
     isLinkTitle,
     fluid
-  } = _ref4;
-  useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
-
+  } = _ref2;
+  const [isHovered, setIsHovered] = useState(false);
   const {
-    loading,
-    data,
-    error
-  } = 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 = useContext(ThemeContext);
+    data
+  } = useCustomPalette(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 = useBlerpTheme();
   const size = useWindowSize();
-  console.log("Collleeeeection", collection);
   let sizeParams;
   const smallSize = {
     width: "300px",
     height: 40,
     fontSize: "16px",
     saveBoxSize: "36px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "20px",
     buttonSize: "small"
   };
   const mediumSize = {
@@ -81,9 +76,6 @@ const CollectionListViewPremium = _ref4 => {
     height: 48,
     fontSize: "18px",
     saveBoxSize: "44px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "23px",
     buttonSize: "medium"
   };
   const largeSize = {
@@ -91,264 +83,345 @@ const CollectionListViewPremium = _ref4 => {
     height: 56,
     fontSize: "20px",
     saveBoxSize: "52px",
-    reactionSpacing: 1,
-    reactionPadding: "5px",
-    reactionSize: "30px",
     buttonFontSize: "large"
   };
 
   if (!variantSize) {
     if (fluid) {
-      sizeParams = {
-        width: "100%",
-        height: 48,
-        fontSize: "18px",
-        saveBoxSize: "44px",
-        reactionSpacing: 1,
-        reactionPadding: "3px",
-        reactionSize: "23px",
-        buttonSize: "medium"
-      };
+      sizeParams = _objectSpread(_objectSpread({}, mediumSize), {}, {
+        width: "100%"
+      });
     } else if (size.width <= 400) {
       sizeParams = smallSize;
     } else if (size.width <= 900) {
       sizeParams = mediumSize;
-    } else if (size.width > 900) {
+    } else {
       sizeParams = largeSize;
     }
   } else {
-    if (variantSize === "small") {
-      sizeParams = smallSize;
-    } else if (variantSize === "medium") {
-      console.log(variantSize);
-      sizeParams = mediumSize;
-    } else if (variantSize === "large") {
-      sizeParams = largeSize;
-    }
-  }
+    sizeParams = variantSize === "small" ? smallSize : variantSize === "large" ? largeSize : mediumSize;
+  } // Styles
 
-  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.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.createElement(YellowHoverBorder, {
-      id: "yellow-border"
-    }), /*#__PURE__*/React.createElement(TopBox, {
-      onClick: e => {
-        e.stopPropagation();
-        handleClickBackground();
-      },
-      style: {
-        borderBottomColor: extraInfoComponent && theme.colors.grey3,
-        width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
-      }
-    }, /*#__PURE__*/React.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.createElement(BlurBackground, null), /*#__PURE__*/React.createElement(GradientBackground, {
-      style: {
-        background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
-      }
-    }), /*#__PURE__*/React.createElement(InteractionBox, {
-      style: {
-        borderBottomColor: extraInfoComponent && theme.colors.grey3
-      }
-    }, /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      sx: {
-        position: "relative",
-        width: "calc(100% - 180px)",
-        left: "2px"
-      }
-    }, /*#__PURE__*/React.createElement(SaveBox, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize
-      },
-      onClick: e => {
-        console.log("handle save/unsave here");
-      }
-    }, /*#__PURE__*/React.createElement(SaveBoxTop, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize,
-        background: data.darkVibrant || "#999999"
-      }
-    }, /*#__PURE__*/React.createElement(SaveBoxTopDarken, {
-      style: {
-        background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
-      }
-    }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
-      sx: {
-        width: "30px",
-        height: "30px",
-        color: "white.override",
-        position: "relative",
-        bottom: "1px"
-      }
-    }) : /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
-      sx: {
-        width: "30px",
-        height: "30px",
-        color: "white.override",
-        position: "relative",
-        bottom: "1px"
-      }
-    })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.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.createElement(SaveBoxShadowSquare, {
-      depth: "1",
-      style: {
-        background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
-      }
-    })), isLinkTitle ? /*#__PURE__*/React.createElement("a", {
-      href: "/sound-collection/".concat(collection._id),
-      style: {
-        textDecoration: "none",
-        width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
-        position: "relative",
-        left: "12px"
-      }
-    }, /*#__PURE__*/React.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: e => {
-        if (handleClickTitle) {
-          e.stopPropagation();
-          handleClickTitle();
-        }
-      }
-    }, collection.title)) : /*#__PURE__*/React.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"
-        }
+  const masterContainerStyle = {
+    display: "flex",
+    height: sizeParams.height + 2 + "px",
+    width: sizeParams.width,
+    minWidth: fluid ? "300px" : "0",
+    borderRadius: "8px",
+    boxShadow: "2px 2px 4px 0px #999999a1",
+    position: "relative"
+  };
+  const yellowHoverBorderStyle = {
+    position: "absolute",
+    height: "113%",
+    width: "102%",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    border: "3px solid rgb(255, 225, 76)",
+    borderRadius: "14px",
+    transition: "opacity 0.2s ease-in-out",
+    opacity: isHovered ? 1 : 0,
+    pointerEvents: "none"
+  };
+  const topBoxStyle = {
+    zIndex: 3,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: (theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.white) || "#ffffff",
+    height: "100%",
+    borderRadius: "8px",
+    transition: "0.2s",
+    position: "relative",
+    overflow: "hidden",
+    width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%",
+    cursor: "pointer"
+  };
+  const midBoxStyle = {
+    zIndex: 2,
+    position: "absolute",
+    backgroundColor: (theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.grey5) || "#e0e0e0",
+    width: isHovered ? "96%" : "95%",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "0.2s"
+  };
+  const backBoxStyle = {
+    backgroundColor: (theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.grey7) || "#616161",
+    position: "absolute",
+    width: isHovered ? collection !== null && collection !== void 0 && collection.owned ? "102%" : "100%" : "100%",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    borderRadius: "8px",
+    transition: "0.2s"
+  };
+  const photoBackgroundStyle = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    backgroundImage: "url(".concat(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, ")"),
+    backgroundSize: "cover",
+    borderRadius: "8px",
+    backgroundPosition: "center"
+  };
+  const blurBackgroundStyle = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    borderRadius: "8px",
+    backdropFilter: "blur(4px)"
+  };
+  const gradientBackgroundStyle = {
+    width: "100%",
+    height: "100%",
+    opacity: 0.7,
+    position: "absolute",
+    borderRadius: "8px",
+    background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
+  };
+  const interactionBoxStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "calc(100% - 4px)",
+    height: "100%",
+    borderRadius: "8px",
+    position: "relative"
+  };
+  const saveBoxTopStyle = {
+    zIndex: 5,
+    width: sizeParams.saveBoxSize,
+    height: sizeParams.saveBoxSize,
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "4px",
+    transition: "0.4s",
+    background: data.darkVibrant || "#999999"
+  };
+
+  const getSaveBoxShadowSquareStyle = depth => ({
+    position: "absolute",
+    height: depth === "1" ? "94%" : "83%",
+    width: depth === "1" ? "100%" : "97%",
+    borderRadius: "4px",
+    transform: depth === "1" ? "skewX(-5deg)" : "skewX(-12deg)",
+    left: depth === "1" ? "2px" : "5px",
+    bottom: 0,
+    background: depth === "1" ? "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))") : "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
+  });
+
+  const secondButtonStyle = {
+    opacity: isHovered ? 1 : 0,
+    marginLeft: isHovered ? "5px" : "0px",
+    marginRight: isHovered ? "10px" : "15px",
+    padding: "5px",
+    transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out"
+  };
+  const bookmarkIconStyle = {
+    width: "30px",
+    height: "30px",
+    color: "white.override",
+    position: "relative",
+    bottom: "1px"
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: masterContainerStyle,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement("div", {
+    style: yellowHoverBorderStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: e => {
+      e.stopPropagation();
+      if (handleClickBackground) handleClickBackground();
+    },
+    style: topBoxStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    style: photoBackgroundStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    style: blurBackgroundStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    style: gradientBackgroundStyle
+  }), /*#__PURE__*/React.createElement("div", {
+    style: interactionBoxStyle
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    sx: {
+      position: "relative",
+      width: "calc(100% - 180px)",
+      left: "2px"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: "relative",
+      borderRadius: "4px",
+      cursor: "pointer",
+      width: sizeParams.saveBoxSize,
+      height: sizeParams.saveBoxSize
+    },
+    onClick: e => {
+      e.stopPropagation(); // Handle save logic
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: saveBoxTopStyle
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      borderRadius: "4px",
+      background: "linear-gradient(rgba(0,0,0,0), #000000)"
+    }
+  }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.bookmark,
+    sx: bookmarkIconStyle,
+    size: "30px"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    path: paths.bookmarkAdd,
+    sx: bookmarkIconStyle,
+    size: "30px"
+  })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement("div", {
+    style: getSaveBoxShadowSquareStyle("2")
+  }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement("div", {
+    style: getSaveBoxShadowSquareStyle("1")
+  })), isLinkTitle ? /*#__PURE__*/React.createElement("a", {
+    href: "/sound-collection/".concat(collection._id),
+    style: {
+      textDecoration: "none",
+      width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
+      position: "relative",
+      left: "12px"
+    }
+  }, /*#__PURE__*/React.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"
       },
-      onClick: e => {
-        console.log("handle non-linkTitle click here");
+      "@media (max-width: 600px)": {
+        maxWidth: "133px"
       }
-    }, collection.title)), /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      sx: {
-        height: "70%"
-      }
-    }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      justifyContent: "space-around",
-      alignItems: "center",
-      sx: {
-        height: "100%",
-        width: "102px",
-        position: "relative"
-      }
-    }, /*#__PURE__*/React.createElement(Stack, {
-      sx: {
-        borderRadius: "20px",
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        backgroundColor: "notBlack.main",
-        opacity: ".5"
-      }
-    }), /*#__PURE__*/React.createElement(DiamondIcon, {
-      sx: {
-        opacity: "1",
-        zIndex: "2",
-        color: "white.override",
-        height: "18px"
-      }
-    }), /*#__PURE__*/React.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.createElement(LockRoundedIcon, {
-      sx: {
-        zIndex: "2",
-        color: "white.override",
-        height: "14px"
+    },
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
       }
-    })), secondaryActionButton || /*#__PURE__*/React.createElement(IconButton, {
-      id: "second-button",
-      onClick: e => {
-        console.log("handle secondary button click here");
+    }
+  }, collection.title)) : /*#__PURE__*/React.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: "none"
       },
-      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"
-        }
+      "@media (max-width: 600px)": {
+        maxWidth: "133px"
       }
-    }, /*#__PURE__*/React.createElement(Stack, {
-      sx: {
-        borderRadius: "20px",
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        backgroundColor: "notBlack.main",
-        opacity: ".5"
-      }
-    }), /*#__PURE__*/React.createElement(KeyboardArrowRightRoundedIcon, {
-      sx: {
-        zIndex: "2",
-        color: "white.override"
+    }
+  }, collection.title)), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    sx: {
+      height: "70%"
+    }
+  }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    sx: {
+      height: "100%",
+      width: "102px",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      borderRadius: "20px",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: "notBlack.main",
+      opacity: ".5"
+    }
+  }), /*#__PURE__*/React.createElement(DiamondIcon, {
+    sx: {
+      opacity: "1",
+      zIndex: "2",
+      color: "white.override",
+      height: "18px"
+    }
+  }), /*#__PURE__*/React.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.createElement(Icon, {
+    path: paths.lock,
+    size: "14px",
+    sx: {
+      zIndex: "2",
+      color: "white.override"
+    }
+  })), secondaryActionButton || /*#__PURE__*/React.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+    },
+    sx: _objectSpread(_objectSpread({}, secondButtonStyle), {}, {
+      "&:hover": {
+        backgroundColor: "grey6.main"
       }
-    }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement(MidBox, {
-      id: "mid-box"
-    }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement(BackBox, {
-      id: "back-box"
-    }), extraInfoComponent && extraInfoComponent)
-  );
+    })
+  }, /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      borderRadius: "20px",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: "notBlack.main",
+      opacity: ".5"
+    }
+  }), /*#__PURE__*/React.createElement(Icon, {
+    path: paths.arrowRight,
+    size: "24px",
+    sx: {
+      zIndex: "2",
+      color: "white.override"
+    }
+  }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement("div", {
+    style: midBoxStyle
+  }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement("div", {
+    style: backBoxStyle
+  }), extraInfoComponent && extraInfoComponent);
 };
 
-export default CollectionListViewPremium;
-export { CollectionListViewPremium };
+export { CollectionListViewPremium, CollectionListViewPremium as default };