@blerp/design 1.0.103 → 1.0.106

package/dist/index.cjs.js

@@ -7416,7 +7416,7 @@ var TopPill = styled__default['default'].div(_templateObject3 || (_templateObjec
   return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
 });
 var TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-  return props.theme.colors.notBlack;
+  return props.theme.colors.notBlackOverride;
 });
 var LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
   return !props.collectionHovered ? "0" : "1";
@@ -7624,13 +7624,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7639,7 +7639,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     },
     onClick: function onClick(e) {
@@ -7653,13 +7653,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7672,7 +7672,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     },
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     }
   })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -7685,14 +7685,14 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       height: ".6em",
       position: "relative",
       left: "4px"
     }
   }), /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       fontWeight: "lighter",
       fontSize: ".8em"
     }
@@ -7702,7 +7702,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       top: "8px",
       right: "5px",
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       paddingRight: "8px",
       opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
       transition: "opacity .2s ease-in-out"
@@ -7713,7 +7713,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7761,7 +7761,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7781,8 +7781,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }, /*#__PURE__*/React__default['default'].createElement(PresentGiftIcon, {
     onClick: function onClick(e) {
-      e.stopPropagation(); // NEEDS TO DIRECT TO CREATOR'S PROFILE
-
+      e.stopPropagation();
       handleClickBottomLeftIcon();
     },
     sx: {
@@ -7790,12 +7789,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: "100%",
       height: "100%",
       color: "white.override",
-      backgroundColor: "transparent",
-      zIndex: "3",
+      // backgroundColor: "grey4.main",
+      zIndex: "4",
       borderRadius: "50%",
       opacity: "1",
       "&:hover": {
-        // backgroundColor: "grey4.main",
+        padding: "4px",
+        backgroundColor: "grey7.override",
         opacity: "1"
       }
     }
@@ -7942,7 +7942,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       hideUnlockPlatformText = _ref.hideUnlockPlatformText,
       hidePremiumLockIcon = _ref.hidePremiumLockIcon,
       unlockPlatformText = _ref.unlockPlatformText,
-      hideCollectionBackground = _ref.hideCollectionBackground;
+      hideCollectionBackground = _ref.hideCollectionBackground,
+      bottomLeftIcon = _ref.bottomLeftIcon,
+      handleClickBottomLeftIcon = _ref.handleClickBottomLeftIcon;
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8071,7 +8073,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       hideUnlockPlatformText: hideUnlockPlatformText,
       hidePremiumLockIcon: hidePremiumLockIcon,
       unlockPlatformText: unlockPlatformText,
-      hideCollectionBackground: hideCollectionBackground
+      hideCollectionBackground: hideCollectionBackground,
+      bottomLeftIcon: bottomLeftIcon,
+      handleClickBottomLeftIcon: handleClickBottomLeftIcon
     });
   }
 

package/dist/index.esm.js

@@ -7347,7 +7347,7 @@ var TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplate
   return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
 });
 var TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-  return props.theme.colors.notBlack;
+  return props.theme.colors.notBlackOverride;
 });
 var LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
   return !props.collectionHovered ? "0" : "1";
@@ -7555,13 +7555,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7570,7 +7570,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(BookmarkRounded, {
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     },
     onClick: function onClick(e) {
@@ -7584,13 +7584,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       left: "2px",
       width: "28px",
       height: "28px",
-      color: "white.main",
+      color: "white.override",
       borderRadius: "50%",
       alignItems: "center",
       justifyContent: "center",
       opacity: isLocked ? "1" : "0",
       "&:hover": {
-        backgroundColor: "white.main"
+        backgroundColor: "white.override"
       },
       ":hover svg": {
         color: "starling.main"
@@ -7603,7 +7603,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     },
     sx: {
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       opacity: isLocked ? "1" : "0"
     }
   })), /*#__PURE__*/React__default.createElement(Stack, {
@@ -7616,14 +7616,14 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(DiamondIcon, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       height: ".6em",
       position: "relative",
       left: "4px"
     }
   }), /*#__PURE__*/React__default.createElement(Text, {
     sx: {
-      color: "white.main",
+      color: "white.override",
       fontWeight: "lighter",
       fontSize: ".8em"
     }
@@ -7633,7 +7633,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       top: "8px",
       right: "5px",
       height: ".6em",
-      color: "white.main",
+      color: "white.override",
       paddingRight: "8px",
       opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
       transition: "opacity .2s ease-in-out"
@@ -7644,7 +7644,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7692,7 +7692,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
-      zIndex: "3",
+      zIndex: "4",
       justifyContent: "center",
       alignItems: "center",
       position: "absolute",
@@ -7712,8 +7712,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(PresentGiftIcon, {
     onClick: function onClick(e) {
-      e.stopPropagation(); // NEEDS TO DIRECT TO CREATOR'S PROFILE
-
+      e.stopPropagation();
       handleClickBottomLeftIcon();
     },
     sx: {
@@ -7721,12 +7720,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: "100%",
       height: "100%",
       color: "white.override",
-      backgroundColor: "transparent",
-      zIndex: "3",
+      // backgroundColor: "grey4.main",
+      zIndex: "4",
       borderRadius: "50%",
       opacity: "1",
       "&:hover": {
-        // backgroundColor: "grey4.main",
+        padding: "4px",
+        backgroundColor: "grey7.override",
         opacity: "1"
       }
     }
@@ -7873,7 +7873,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       hideUnlockPlatformText = _ref.hideUnlockPlatformText,
       hidePremiumLockIcon = _ref.hidePremiumLockIcon,
       unlockPlatformText = _ref.unlockPlatformText,
-      hideCollectionBackground = _ref.hideCollectionBackground;
+      hideCollectionBackground = _ref.hideCollectionBackground,
+      bottomLeftIcon = _ref.bottomLeftIcon,
+      handleClickBottomLeftIcon = _ref.handleClickBottomLeftIcon;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8002,7 +8004,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       hideUnlockPlatformText: hideUnlockPlatformText,
       hidePremiumLockIcon: hidePremiumLockIcon,
       unlockPlatformText: unlockPlatformText,
-      hideCollectionBackground: hideCollectionBackground
+      hideCollectionBackground: hideCollectionBackground,
+      bottomLeftIcon: bottomLeftIcon,
+      handleClickBottomLeftIcon: handleClickBottomLeftIcon
     });
   }
 

package/dist/index.umd.js

@@ -7368,7 +7368,7 @@
       return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
     });
     var TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), function (props) {
-      return props.theme.colors.notBlack;
+      return props.theme.colors.notBlackOverride;
     });
     var LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), function (props) {
       return !props.collectionHovered ? "0" : "1";
@@ -7576,13 +7576,13 @@
           left: "2px",
           width: "28px",
           height: "28px",
-          color: "white.main",
+          color: "white.override",
           borderRadius: "50%",
           alignItems: "center",
           justifyContent: "center",
           opacity: isLocked ? "1" : "0",
           "&:hover": {
-            backgroundColor: "white.main"
+            backgroundColor: "white.override"
           },
           ":hover svg": {
             color: "starling.main"
@@ -7591,7 +7591,7 @@
       }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
         sx: {
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           opacity: isLocked ? "1" : "0"
         },
         onClick: function onClick(e) {
@@ -7605,13 +7605,13 @@
           left: "2px",
           width: "28px",
           height: "28px",
-          color: "white.main",
+          color: "white.override",
           borderRadius: "50%",
           alignItems: "center",
           justifyContent: "center",
           opacity: isLocked ? "1" : "0",
           "&:hover": {
-            backgroundColor: "white.main"
+            backgroundColor: "white.override"
           },
           ":hover svg": {
             color: "starling.main"
@@ -7624,7 +7624,7 @@
         },
         sx: {
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           opacity: isLocked ? "1" : "0"
         }
       })), /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -7637,14 +7637,14 @@
         alignItems: "center"
       }, /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
         sx: {
-          color: "white.main",
+          color: "white.override",
           height: ".6em",
           position: "relative",
           left: "4px"
         }
       }), /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
-          color: "white.main",
+          color: "white.override",
           fontWeight: "lighter",
           fontSize: ".8em"
         }
@@ -7654,7 +7654,7 @@
           top: "8px",
           right: "5px",
           height: ".6em",
-          color: "white.main",
+          color: "white.override",
           paddingRight: "8px",
           opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
           transition: "opacity .2s ease-in-out"
@@ -7665,7 +7665,7 @@
         }
       }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
-          zIndex: "3",
+          zIndex: "4",
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
@@ -7713,7 +7713,7 @@
         }
       })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
-          zIndex: "3",
+          zIndex: "4",
           justifyContent: "center",
           alignItems: "center",
           position: "absolute",
@@ -7733,8 +7733,7 @@
         }
       }, /*#__PURE__*/React__default['default'].createElement(PresentGiftIcon, {
         onClick: function onClick(e) {
-          e.stopPropagation(); // NEEDS TO DIRECT TO CREATOR'S PROFILE
-
+          e.stopPropagation();
           handleClickBottomLeftIcon();
         },
         sx: {
@@ -7742,12 +7741,13 @@
           width: "100%",
           height: "100%",
           color: "white.override",
-          backgroundColor: "transparent",
-          zIndex: "3",
+          // backgroundColor: "grey4.main",
+          zIndex: "4",
           borderRadius: "50%",
           opacity: "1",
           "&:hover": {
-            // backgroundColor: "grey4.main",
+            padding: "4px",
+            backgroundColor: "grey7.override",
             opacity: "1"
           }
         }
@@ -7894,7 +7894,9 @@
           hideUnlockPlatformText = _ref.hideUnlockPlatformText,
           hidePremiumLockIcon = _ref.hidePremiumLockIcon,
           unlockPlatformText = _ref.unlockPlatformText,
-          hideCollectionBackground = _ref.hideCollectionBackground;
+          hideCollectionBackground = _ref.hideCollectionBackground,
+          bottomLeftIcon = _ref.bottomLeftIcon,
+          handleClickBottomLeftIcon = _ref.handleClickBottomLeftIcon;
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8023,7 +8025,9 @@
           hideUnlockPlatformText: hideUnlockPlatformText,
           hidePremiumLockIcon: hidePremiumLockIcon,
           unlockPlatformText: unlockPlatformText,
-          hideCollectionBackground: hideCollectionBackground
+          hideCollectionBackground: hideCollectionBackground,
+          bottomLeftIcon: bottomLeftIcon,
+          handleClickBottomLeftIcon: handleClickBottomLeftIcon
         });
       }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.0.103",
+    "version": "1.0.106",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {