@blerp/design 1.3.16 → 1.4.1

package/dist/cjs/CollectionListViewPremium.js

@@ -2,61 +2,60 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
-var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
-var KeyboardArrowRightRoundedIcon = require('@mui/icons-material/KeyboardArrowRightRounded');
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-require('prop-types');
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var reactPalette = require('react-palette');
-var styled = require('styled-components');
 var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
+var helpers = require('./helpers.js');
+var Theme = require('./Theme.js');
 var Icons = require('./Icons/Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
-var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
-var KeyboardArrowRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowRightRoundedIcon);
-var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-const MasterContainer = styled__default['default'].div(_templateObject || (_templateObject = _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"])), _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__default["default"](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__default['default'].div(_templateObject2 || (_templateObject2 = _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"])));
-const TopBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _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"])), props => props.theme.colors.white);
-const MidBox = styled__default['default'].div(_templateObject4 || (_templateObject4 = _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"])), props => props.theme.colors.grey5);
-const BackBox = styled__default['default'].div(_templateObject5 || (_templateObject5 = _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"])), props => props.theme.colors.grey7);
-const PhotoBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _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"])), props => props.url);
-const BlurBackground = styled__default['default'].div(_templateObject7 || (_templateObject7 = _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"])));
-const 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"])));
-const 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
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
 
-const 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"])));
-const 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"])), props => props.theme.colors.notBlackOverride);
-const 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"])));
-const 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"])), 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__default["default"].createElement(index.Box, _extends__default["default"]({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React__default["default"].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,
@@ -68,26 +67,19 @@ const CollectionListViewPremium = _ref4 => {
     handleClickTitle,
     isLinkTitle,
     fluid
-  } = _ref4;
-  React.useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
-
+  } = _ref2;
+  const [isHovered, setIsHovered] = React.useState(false);
   const {
-    loading,
-    data,
-    error
-  } = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
-  const theme = React.useContext(styled.ThemeContext);
+    data
+  } = helpers.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 = Theme.useBlerpTheme();
   const size = ScreenSizeHook.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 = {
@@ -95,9 +87,6 @@ const CollectionListViewPremium = _ref4 => {
     height: 48,
     fontSize: "18px",
     saveBoxSize: "44px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "23px",
     buttonSize: "medium"
   };
   const largeSize = {
@@ -105,264 +94,346 @@ 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__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, {
-      id: "yellow-border"
-    }), /*#__PURE__*/React__default['default'].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__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(index.Stack, {
-      direction: "row",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      sx: {
-        position: "relative",
-        width: "calc(100% - 180px)",
-        left: "2px"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize
-      },
-      onClick: e => {
-        console.log("handle save/unsave here");
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
-      style: {
-        width: sizeParams.saveBoxSize,
-        height: sizeParams.saveBoxSize,
-        background: data.darkVibrant || "#999999"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
-      style: {
-        background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
-      }
-    }), 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"
-      }
-    }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
-      sx: {
-        width: "30px",
-        height: "30px",
-        color: "white.override",
-        position: "relative",
-        bottom: "1px"
-      }
-    })), !(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(index.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__default['default'].createElement(index.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__default["default"].createElement("div", {
+    style: masterContainerStyle,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: yellowHoverBorderStyle
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    onClick: e => {
+      e.stopPropagation();
+      if (handleClickBackground) handleClickBackground();
+    },
+    style: topBoxStyle
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: photoBackgroundStyle
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: blurBackgroundStyle
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: gradientBackgroundStyle
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: interactionBoxStyle
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    direction: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    sx: {
+      position: "relative",
+      width: "calc(100% - 180px)",
+      left: "2px"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      position: "relative",
+      borderRadius: "4px",
+      cursor: "pointer",
+      width: sizeParams.saveBoxSize,
+      height: sizeParams.saveBoxSize
+    },
+    onClick: e => {
+      e.stopPropagation(); // Handle save logic
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: saveBoxTopStyle
+  }, /*#__PURE__*/React__default["default"].createElement(index.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__default["default"].createElement(Icon, {
+    path: paths.bookmark,
+    sx: bookmarkIconStyle,
+    size: "30px"
+  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.bookmarkAdd,
+    sx: bookmarkIconStyle,
+    size: "30px"
+  })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: getSaveBoxShadowSquareStyle("2")
+  }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: getSaveBoxShadowSquareStyle("1")
+  })), 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(index.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__default['default'].createElement(index.Stack, {
-      direction: "row",
-      justifyContent: "flex-end",
-      alignItems: "center",
-      sx: {
-        height: "70%"
-      }
-    }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-      direction: "row",
-      justifyContent: "space-around",
-      alignItems: "center",
-      sx: {
-        height: "100%",
-        width: "102px",
-        position: "relative"
-      }
-    }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-      sx: {
-        borderRadius: "20px",
-        position: "absolute",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
-        backgroundColor: "notBlack.main",
-        opacity: ".5"
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
-      sx: {
-        opacity: "1",
-        zIndex: "2",
-        color: "white.override",
-        height: "18px"
-      }
-    }), /*#__PURE__*/React__default['default'].createElement(index.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"
+    },
+    onClick: e => {
+      if (handleClickTitle) {
+        e.stopPropagation();
+        handleClickTitle();
       }
-    })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
-      id: "second-button",
-      onClick: e => {
-        console.log("handle secondary button click here");
+    }
+  }, collection.title)) : /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(index.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.title)), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    direction: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    sx: {
+      height: "70%"
+    }
+  }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    direction: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+    sx: {
+      height: "100%",
+      width: "102px",
+      position: "relative"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    sx: {
+      borderRadius: "20px",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: "notBlack.main",
+      opacity: ".5"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Icons.DiamondIcon, {
+    sx: {
+      opacity: "1",
+      zIndex: "2",
+      color: "white.override",
+      height: "18px"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(index.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(Icon, {
+    path: paths.lock,
+    size: "14px",
+    sx: {
+      zIndex: "2",
+      color: "white.override"
+    }
+  })), secondaryActionButton || /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+    },
+    sx: _objectSpread(_objectSpread({}, secondButtonStyle), {}, {
+      "&:hover": {
+        backgroundColor: "grey6.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(index.Stack, {
+    sx: {
+      borderRadius: "20px",
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: "notBlack.main",
+      opacity: ".5"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.arrowRight,
+    size: "24px",
+    sx: {
+      zIndex: "2",
+      color: "white.override"
+    }
+  }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: midBoxStyle
+  }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: backBoxStyle
+  }), extraInfoComponent && extraInfoComponent);
 };
 
 exports.CollectionListViewPremium = CollectionListViewPremium;
-exports.default = CollectionListViewPremium;
+exports["default"] = CollectionListViewPremium;