@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/CollectionCard.js

@@ -2,26 +2,92 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var iconsMaterial = require('@mui/icons-material');
 var React = require('react');
-var reactPalette = require('react-palette');
 var index = require('./index.js');
 var PremiumCollectionCard = require('./PremiumCollectionCard.js');
-var styled = require('styled-components');
+var helpers = require('./helpers.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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
-const LineClamp = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"]))); //on background click
-//primary and secondary action buttons
+const AccountCircleIcon = _ref => {
+  let {
+    sx = {}
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: {
+      color: sx.color
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm0 14c-2.03 0-4.43-.82-6.14-2.88C7.55 15.8 9.68 15 12 15s4.45.8 6.14 2.12C16.43 19.18 14.03 20 12 20z"
+  }));
+};
+
+const BookmarkIcon = _ref2 => {
+  let {
+    sx = {},
+    onClick
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    onClick: onClick,
+    style: {
+      color: sx.color,
+      cursor: onClick ? "pointer" : "default"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }));
+};
 
-const CollectionCard = _ref => {
+const BookmarkIconIcon = _ref3 => {
+  let {
+    sx = {},
+    onClick
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    onClick: onClick,
+    style: {
+      color: sx.color,
+      cursor: onClick ? "pointer" : "default"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17 11v6.97l-5-2.14-5 2.14V5h6V3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V11h-2zm4-4h-2v2h-2V7h-2V5h2V3h2v2h2v2z"
+  }));
+};
+
+const VisibilityOffIcon = _ref4 => {
+  let {
+    sx = {}
+  } = _ref4;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: sx.fontSize || 24,
+    height: sx.fontSize || 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: {
+      color: sx.color,
+      marginLeft: sx.marginLeft
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+  }));
+};
+
+const CollectionCard = _ref6 => {
   var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or;
 
   let {
@@ -50,18 +116,18 @@ const CollectionCard = _ref => {
     bottomLeftIcon,
     handleClickBottomLeftIcon,
     premiumDiamondPill
-  } = _ref;
+  } = _ref6;
   const [cardColors, setCardColors] = React.useState(null);
   const {
     data,
     loading,
     error
-  } = reactPalette.usePalette((collection === null || collection === void 0 ? void 0 : collection.visibility) !== "PRIVATE" || isOwner ? 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 : "black");
+  } = helpers.useCustomPalette((collection === null || collection === void 0 ? void 0 : collection.visibility) !== "PRIVATE" || isOwner ? 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 : "black");
 
   const renderProfileImage = () => {
     var _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$ownerObje4, _collection$ownerObje5, _collection$ownerObje6;
 
-    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
       sx: {
         zIndex: "3",
         justifyContent: "center",
@@ -75,7 +141,7 @@ const CollectionCard = _ref => {
         padding: "2px",
         transition: "all .1s ease-in-out"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
       sx: {
         backgroundColor: "notBlack.override",
         width: "20px",
@@ -88,7 +154,7 @@ const CollectionCard = _ref => {
         e.stopPropagation();
         handleClickSecondaryAction();
       }
-    }, collection !== null && collection !== void 0 && (_collection$ownerObje = collection.ownerObject) !== null && _collection$ownerObje !== void 0 && (_collection$ownerObje2 = _collection$ownerObje.profileImage) !== null && _collection$ownerObje2 !== void 0 && (_collection$ownerObje3 = _collection$ownerObje2.original) !== null && _collection$ownerObje3 !== void 0 && _collection$ownerObje3.url ? /*#__PURE__*/React__default['default'].createElement("img", {
+    }, collection !== null && collection !== void 0 && (_collection$ownerObje = collection.ownerObject) !== null && _collection$ownerObje !== void 0 && (_collection$ownerObje2 = _collection$ownerObje.profileImage) !== null && _collection$ownerObje2 !== void 0 && (_collection$ownerObje3 = _collection$ownerObje2.original) !== null && _collection$ownerObje3 !== void 0 && _collection$ownerObje3.url ? /*#__PURE__*/React__default["default"].createElement("img", {
       alt: "profile",
       src: collection === null || collection === void 0 ? void 0 : (_collection$ownerObje4 = collection.ownerObject) === null || _collection$ownerObje4 === void 0 ? void 0 : (_collection$ownerObje5 = _collection$ownerObje4.profileImage) === null || _collection$ownerObje5 === void 0 ? void 0 : (_collection$ownerObje6 = _collection$ownerObje5.original) === null || _collection$ownerObje6 === void 0 ? void 0 : _collection$ownerObje6.url,
       style: {
@@ -98,7 +164,7 @@ const CollectionCard = _ref => {
         borderRadius: "50%",
         pointerEvents: "none"
       }
-    }) : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.AccountCircleRounded, {
+    }) : /*#__PURE__*/React__default["default"].createElement(AccountCircleIcon, {
       sx: {
         fontSize: "16px",
         color: "white.override"
@@ -107,7 +173,7 @@ const CollectionCard = _ref => {
   };
 
   const renderPrimaryActionButton = () => {
-    return primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+    return primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
       sx: {
         width: "16px",
         height: "16px",
@@ -116,7 +182,7 @@ const CollectionCard = _ref => {
           backgroundColor: "grey3.override"
         }
       }
-    }, collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
+    }, collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default["default"].createElement(BookmarkIcon, {
       onClick: e => {
         e.stopPropagation();
         handleClickSave(false);
@@ -125,7 +191,7 @@ const CollectionCard = _ref => {
         fontSize: "16px",
         color: "white.override"
       }
-    }) : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkAddOutlined, {
+    }) : /*#__PURE__*/React__default["default"].createElement(BookmarkIcon, {
       onClick: e => {
         e.stopPropagation();
         handleClickSave(true);
@@ -154,7 +220,7 @@ const CollectionCard = _ref => {
   }
 
   if (isPremium) {
-    return /*#__PURE__*/React__default['default'].createElement(PremiumCollectionCard.PremiumCollectionCard, {
+    return /*#__PURE__*/React__default["default"].createElement(PremiumCollectionCard.Blerp, {
       collection: collection,
       variantSize: variantSize,
       handleClickBackground: handleClickBackground,
@@ -182,26 +248,14 @@ const CollectionCard = _ref => {
     });
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       display: "flex",
       alignItems: "center",
       width: fluid ? "80%" : sizeParams.width,
-      height: fluid ? "80%" : sizeParams.height // ":hover #collection-background-1": {
-      //     transform: "rotate(7deg)",
-      //     height: "91%",
-      //     right: "-11px",
-      //     top: "12px",
-      // },
-      // ":hover #collection-background-2": {
-      //     transform: "rotate(14deg)",
-      //     height: "84%",
-      //     right: "-20px",
-      //     top: "24px",
-      // },
-
+      height: fluid ? "80%" : sizeParams.height
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: () => {
       handleClickBackground();
     },
@@ -224,7 +278,7 @@ const CollectionCard = _ref => {
         top: "24px"
       }
     }
-  }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }, variantSize !== "small" ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       backgroundColor: "white.override",
       borderRadius: "8px",
@@ -234,7 +288,7 @@ const CollectionCard = _ref => {
       top: "0",
       zIndex: "3"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
     id: "collection-background-1",
     sx: {
       backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
@@ -248,7 +302,7 @@ const CollectionCard = _ref => {
       zIndex: "2",
       transition: "0.2s ease-out"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
     id: "collection-background-2",
     sx: {
       backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
@@ -262,7 +316,7 @@ const CollectionCard = _ref => {
       zIndex: "1",
       transition: "0.2s ease-out"
     }
-  }), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && !isOwner ? /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && !isOwner ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       backgroundColor: "grey3.main",
       backgroundSize: "cover",
@@ -278,11 +332,11 @@ const CollectionCard = _ref => {
       position: "absolute",
       zIndex: "3"
     }
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       height: "20%"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       position: "absolute",
@@ -295,18 +349,30 @@ const CollectionCard = _ref => {
       boxSizing: "border-box",
       alignItems: "center"
     }
-  }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, renderPrimaryActionButton()), renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "This collection has been removed or hidden"
-  }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.LockRounded, {
+  }, /*#__PURE__*/React__default["default"].createElement(BookmarkIconIcon, {
     sx: {
       color: "white.override",
       fontSize: "35px"
     }
-  })), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "1",
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      margin: "5px 0",
+      maxWidth: "92%"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
-    textAlign: "center"
-  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(index.Box, {
+    textAlign: "center",
+    sx: {
+      color: "white.override"
+    }
+  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), 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",
@@ -321,7 +387,7 @@ const CollectionCard = _ref => {
       position: "absolute",
       zIndex: "3"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       position: "absolute",
@@ -334,54 +400,67 @@ const CollectionCard = _ref => {
       boxSizing: "border-box",
       alignItems: "center"
     }
-  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Featured on Twitch Bits"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       alignItems: "center"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.TwitchBitIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.TwitchBitIcon, {
     sx: {
       color: "white.override",
       zIndex: "1",
       fontSize: "18px"
     }
-  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Private"
-  }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.LockRounded, {
+  }, /*#__PURE__*/React__default["default"].createElement(BookmarkIconIcon, {
     sx: {
       marginLeft: "4px",
       fontSize: "16px",
       color: "white.override"
     }
-  })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  })), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Unlisted"
-  }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.VisibilityOffRounded, {
+  }, /*#__PURE__*/React__default["default"].createElement(VisibilityOffIcon, {
     sx: {
       marginLeft: "4px",
       fontSize: "16px",
       color: "white.override"
     }
-  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, isLink ? /*#__PURE__*/React__default['default'].createElement("a", {
+  }))), secondaryActionButton ? secondaryActionButton : renderProfileImage(), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "1",
+      WebkitBoxOrient: "vertical",
+      overflow: "hidden",
+      margin: "5px 0",
+      maxWidth: "92%"
+    }
+  }, isLink ? /*#__PURE__*/React__default["default"].createElement("a", {
     href: "/sound-collection/".concat(collection._id),
     style: {
       color: "white",
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
     sx: {
+      color: "white.override",
       ":hover": {
         textDecoration: "underline"
       }
     }
-  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
-    textAlign: "center"
-  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default['default'].createElement(index.Box, {
+    textAlign: "center",
+    sx: {
+      color: "white.override"
+    }
+  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default["default"].createElement(index.Box, {
     sx: {
       backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
       backgroundSize: "cover",
@@ -399,4 +478,4 @@ const CollectionCard = _ref => {
 };
 
 exports.CollectionCard = CollectionCard;
-exports.default = CollectionCard;
+exports["default"] = CollectionCard;