@blerp/design 1.2.22 → 1.2.24

package/dist/index.cjs.js

@@ -1782,7 +1782,8 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 
   var item = _ref.item,
       active = _ref.active,
-      onOptionClicked = _ref.onOptionClicked;
+      onOptionClicked = _ref.onOptionClicked,
+      selectedOption = _ref.selectedOption;
   var options = [{
     name: "Channel Points",
     value: "CHANNEL_POINTS",
@@ -1846,7 +1847,7 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         pointerEvents: "none"
       }
     })
-  }, "Last Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
+  }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name), /*#__PURE__*/React__default['default'].createElement(Popover, {
     open: open,
     anchorEl: anchor,
     anchorOrigin: {
@@ -1930,11 +1931,12 @@ var AddContentButton = function AddContentButton(_ref2) {
   var item = _ref2.item,
       hovering = _ref2.hovering,
       hoveringAddTo = _ref2.hoveringAddTo,
-      setHoveringAddTo = _ref2.setHoveringAddTo;
-      _ref2.openPremiumModal;
-      var onOptionClicked = _ref2.onOptionClicked,
-      onPlusClick = _ref2.onPlusClick;
-  var added = false;
+      setHoveringAddTo = _ref2.setHoveringAddTo,
+      openPremiumModal = _ref2.openPremiumModal,
+      onOptionClicked = _ref2.onOptionClicked,
+      onPlusClick = _ref2.onPlusClick,
+      selectedOption = _ref2.selectedOption,
+      isUnownedPremium = _ref2.isUnownedPremium;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     width: hoveringAddTo ? "100%" : "60%",
@@ -1951,7 +1953,49 @@ var AddContentButton = function AddContentButton(_ref2) {
     item: item,
     active: hoveringAddTo,
     onOptionClicked: onOptionClicked
-  }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
+  }), isUnownedPremium ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      backgroundColor: "white.override",
+      "&:hover .open-lock-icon": {
+        display: "flex !important",
+        opacity: "1 !important"
+      },
+      "&:hover .lock-icon": {
+        display: "none !important",
+        opacity: "0 !important"
+      },
+      "&:hover": {
+        backgroundColor: "grey7.main"
+      }
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      openPremiumModal();
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+    className: "lock-icon",
+    sx: {
+      transition: "0.3s",
+      color: "notBlack.override",
+      display: "flex",
+      opacity: "1",
+      fontSize: "17px"
+    }
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "open-lock-icon",
+    style: {
+      display: "none",
+      opacity: "0"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
+    sx: {
+      transition: "0.3s",
+      color: "notBlack.override",
+      fontSize: "17px"
+    }
+  }))) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
     sx: {
       width: "30px",
       height: "30px",
@@ -1969,7 +2013,7 @@ var AddContentButton = function AddContentButton(_ref2) {
     sx: {
       transition: "0.3s",
       color: "notBlack.override",
-      transform: added 
+      transform: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.added) && "rotate(45deg)"
     }
   })));
 };
@@ -4231,6 +4275,7 @@ var colors = {
   ibisRedDark: "#B43757",
   starling: "#3507B4",
   seafoam: "#0FEBC5",
+  seafoamDark: "#30645B",
   buntingBlue: "#27AAFF",
   popnYellow: "#FFD400"
 };
@@ -4257,6 +4302,7 @@ var overrideColors = {
   ibisRedDarkOverride: colors.ibisRedDark,
   starlingOverride: colors.starling,
   seafoamOverride: colors.seafoam,
+  seafoamDarkOverride: colors.seafoamDark,
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
@@ -4281,6 +4327,7 @@ var darkColors = _objectSpread$5({
   ibisRedDark: colors.ibisRedDark,
   starling: colors.starling,
   seafoam: colors.seafoam,
+  seafoamDark: colors.seafoamDark,
   buntingBlue: colors.buntingBlue,
   popnYellow: colors.popnYellow
 }, overrideColors);
@@ -4378,14 +4425,22 @@ var lightPalette = {
     contrastText: "#fff"
   },
   ibisRed: {
-    main: colors.ibisRed,
-    dark: colors.ibisRedDark
+    main: colors.ibisRed
+  },
+  ibisRedDark: {
+    main: colors.ibisRedDark
   },
   seafoam: {
     light: colors.seafoam,
     main: colors.seafoam,
     dark: colors.seafoam,
-    contrastText: "#fff"
+    contrastText: "#000"
+  },
+  seafoamDark: {
+    light: colors.seafoamDark,
+    main: colors.seafoamDark,
+    dark: colors.seafoamDark,
+    contrastText: "#000"
   },
   buntingBlue: {
     light: colors.buntingBlue,
@@ -4502,14 +4557,22 @@ var darkPalette = {
     contrastText: "#000"
   },
   ibisRed: {
-    main: colors.ibisRed,
-    dark: colors.ibisRedDark
+    main: colors.ibisRed
+  },
+  ibisRedDark: {
+    main: colors.ibisRedDark
   },
   seafoam: {
     light: colors.seafoam,
     main: colors.seafoam,
     dark: colors.seafoam,
-    contrastText: "#fff"
+    contrastText: "#000"
+  },
+  seafoamDark: {
+    light: colors.seafoamDark,
+    main: colors.seafoamDark,
+    dark: colors.seafoamDark,
+    contrastText: "#000"
   },
   buntingBlue: {
     light: colors.buntingBlue,

package/dist/index.esm.js

@@ -1706,7 +1706,8 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
 
   var item = _ref.item,
       active = _ref.active,
-      onOptionClicked = _ref.onOptionClicked;
+      onOptionClicked = _ref.onOptionClicked,
+      selectedOption = _ref.selectedOption;
   var options = [{
     name: "Channel Points",
     value: "CHANNEL_POINTS",
@@ -1770,7 +1771,7 @@ var AddContentDropdown = function AddContentDropdown(_ref) {
         pointerEvents: "none"
       }
     })
-  }, "Last Place"), /*#__PURE__*/React__default.createElement(Popover, {
+  }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name), /*#__PURE__*/React__default.createElement(Popover, {
     open: open,
     anchorEl: anchor,
     anchorOrigin: {
@@ -1854,11 +1855,12 @@ var AddContentButton = function AddContentButton(_ref2) {
   var item = _ref2.item,
       hovering = _ref2.hovering,
       hoveringAddTo = _ref2.hoveringAddTo,
-      setHoveringAddTo = _ref2.setHoveringAddTo;
-      _ref2.openPremiumModal;
-      var onOptionClicked = _ref2.onOptionClicked,
-      onPlusClick = _ref2.onPlusClick;
-  var added = false;
+      setHoveringAddTo = _ref2.setHoveringAddTo,
+      openPremiumModal = _ref2.openPremiumModal,
+      onOptionClicked = _ref2.onOptionClicked,
+      onPlusClick = _ref2.onPlusClick,
+      selectedOption = _ref2.selectedOption,
+      isUnownedPremium = _ref2.isUnownedPremium;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     width: hoveringAddTo ? "100%" : "60%",
@@ -1875,7 +1877,49 @@ var AddContentButton = function AddContentButton(_ref2) {
     item: item,
     active: hoveringAddTo,
     onOptionClicked: onOptionClicked
-  }), /*#__PURE__*/React__default.createElement(IconButton, {
+  }), isUnownedPremium ? /*#__PURE__*/React__default.createElement(IconButton, {
+    sx: {
+      width: "30px",
+      height: "30px",
+      backgroundColor: "white.override",
+      "&:hover .open-lock-icon": {
+        display: "flex !important",
+        opacity: "1 !important"
+      },
+      "&:hover .lock-icon": {
+        display: "none !important",
+        opacity: "0 !important"
+      },
+      "&:hover": {
+        backgroundColor: "grey7.main"
+      }
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      openPremiumModal();
+    }
+  }, /*#__PURE__*/React__default.createElement(LockRoundedIcon, {
+    className: "lock-icon",
+    sx: {
+      transition: "0.3s",
+      color: "notBlack.override",
+      display: "flex",
+      opacity: "1",
+      fontSize: "17px"
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "open-lock-icon",
+    style: {
+      display: "none",
+      opacity: "0"
+    }
+  }, /*#__PURE__*/React__default.createElement(OpenLockIcon, {
+    sx: {
+      transition: "0.3s",
+      color: "notBlack.override",
+      fontSize: "17px"
+    }
+  }))) : /*#__PURE__*/React__default.createElement(IconButton, {
     sx: {
       width: "30px",
       height: "30px",
@@ -1893,7 +1937,7 @@ var AddContentButton = function AddContentButton(_ref2) {
     sx: {
       transition: "0.3s",
       color: "notBlack.override",
-      transform: added 
+      transform: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.added) && "rotate(45deg)"
     }
   })));
 };
@@ -4155,6 +4199,7 @@ var colors = {
   ibisRedDark: "#B43757",
   starling: "#3507B4",
   seafoam: "#0FEBC5",
+  seafoamDark: "#30645B",
   buntingBlue: "#27AAFF",
   popnYellow: "#FFD400"
 };
@@ -4181,6 +4226,7 @@ var overrideColors = {
   ibisRedDarkOverride: colors.ibisRedDark,
   starlingOverride: colors.starling,
   seafoamOverride: colors.seafoam,
+  seafoamDarkOverride: colors.seafoamDark,
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
@@ -4205,6 +4251,7 @@ var darkColors = _objectSpread$5({
   ibisRedDark: colors.ibisRedDark,
   starling: colors.starling,
   seafoam: colors.seafoam,
+  seafoamDark: colors.seafoamDark,
   buntingBlue: colors.buntingBlue,
   popnYellow: colors.popnYellow
 }, overrideColors);
@@ -4302,14 +4349,22 @@ var lightPalette = {
     contrastText: "#fff"
   },
   ibisRed: {
-    main: colors.ibisRed,
-    dark: colors.ibisRedDark
+    main: colors.ibisRed
+  },
+  ibisRedDark: {
+    main: colors.ibisRedDark
   },
   seafoam: {
     light: colors.seafoam,
     main: colors.seafoam,
     dark: colors.seafoam,
-    contrastText: "#fff"
+    contrastText: "#000"
+  },
+  seafoamDark: {
+    light: colors.seafoamDark,
+    main: colors.seafoamDark,
+    dark: colors.seafoamDark,
+    contrastText: "#000"
   },
   buntingBlue: {
     light: colors.buntingBlue,
@@ -4426,14 +4481,22 @@ var darkPalette = {
     contrastText: "#000"
   },
   ibisRed: {
-    main: colors.ibisRed,
-    dark: colors.ibisRedDark
+    main: colors.ibisRed
+  },
+  ibisRedDark: {
+    main: colors.ibisRedDark
   },
   seafoam: {
     light: colors.seafoam,
     main: colors.seafoam,
     dark: colors.seafoam,
-    contrastText: "#fff"
+    contrastText: "#000"
+  },
+  seafoamDark: {
+    light: colors.seafoamDark,
+    main: colors.seafoamDark,
+    dark: colors.seafoamDark,
+    contrastText: "#000"
   },
   buntingBlue: {
     light: colors.buntingBlue,

package/dist/index.umd.js

@@ -1727,7 +1727,8 @@
 
       var item = _ref.item,
           active = _ref.active,
-          onOptionClicked = _ref.onOptionClicked;
+          onOptionClicked = _ref.onOptionClicked,
+          selectedOption = _ref.selectedOption;
       var options = [{
         name: "Channel Points",
         value: "CHANNEL_POINTS",
@@ -1791,7 +1792,7 @@
             pointerEvents: "none"
           }
         })
-      }, "Last Place"), /*#__PURE__*/React__default['default'].createElement(Popover, {
+      }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name), /*#__PURE__*/React__default['default'].createElement(Popover, {
         open: open,
         anchorEl: anchor,
         anchorOrigin: {
@@ -1875,11 +1876,12 @@
       var item = _ref2.item,
           hovering = _ref2.hovering,
           hoveringAddTo = _ref2.hoveringAddTo,
-          setHoveringAddTo = _ref2.setHoveringAddTo;
-          _ref2.openPremiumModal;
-          var onOptionClicked = _ref2.onOptionClicked,
-          onPlusClick = _ref2.onPlusClick;
-      var added = false;
+          setHoveringAddTo = _ref2.setHoveringAddTo,
+          openPremiumModal = _ref2.openPremiumModal,
+          onOptionClicked = _ref2.onOptionClicked,
+          onPlusClick = _ref2.onPlusClick,
+          selectedOption = _ref2.selectedOption,
+          isUnownedPremium = _ref2.isUnownedPremium;
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         width: hoveringAddTo ? "100%" : "60%",
@@ -1896,7 +1898,49 @@
         item: item,
         active: hoveringAddTo,
         onOptionClicked: onOptionClicked
-      }), /*#__PURE__*/React__default['default'].createElement(IconButton, {
+      }), isUnownedPremium ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
+        sx: {
+          width: "30px",
+          height: "30px",
+          backgroundColor: "white.override",
+          "&:hover .open-lock-icon": {
+            display: "flex !important",
+            opacity: "1 !important"
+          },
+          "&:hover .lock-icon": {
+            display: "none !important",
+            opacity: "0 !important"
+          },
+          "&:hover": {
+            backgroundColor: "grey7.main"
+          }
+        },
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          openPremiumModal();
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+        className: "lock-icon",
+        sx: {
+          transition: "0.3s",
+          color: "notBlack.override",
+          display: "flex",
+          opacity: "1",
+          fontSize: "17px"
+        }
+      }), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "open-lock-icon",
+        style: {
+          display: "none",
+          opacity: "0"
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(OpenLockIcon, {
+        sx: {
+          transition: "0.3s",
+          color: "notBlack.override",
+          fontSize: "17px"
+        }
+      }))) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
         sx: {
           width: "30px",
           height: "30px",
@@ -1914,7 +1958,7 @@
         sx: {
           transition: "0.3s",
           color: "notBlack.override",
-          transform: added 
+          transform: (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.added) && "rotate(45deg)"
         }
       })));
     };
@@ -4176,6 +4220,7 @@
       ibisRedDark: "#B43757",
       starling: "#3507B4",
       seafoam: "#0FEBC5",
+      seafoamDark: "#30645B",
       buntingBlue: "#27AAFF",
       popnYellow: "#FFD400"
     };
@@ -4202,6 +4247,7 @@
       ibisRedDarkOverride: colors.ibisRedDark,
       starlingOverride: colors.starling,
       seafoamOverride: colors.seafoam,
+      seafoamDarkOverride: colors.seafoamDark,
       buntingBlueOverride: colors.buntingBlue,
       popnYellowOverride: colors.popnYellow
     };
@@ -4226,6 +4272,7 @@
       ibisRedDark: colors.ibisRedDark,
       starling: colors.starling,
       seafoam: colors.seafoam,
+      seafoamDark: colors.seafoamDark,
       buntingBlue: colors.buntingBlue,
       popnYellow: colors.popnYellow
     }, overrideColors);
@@ -4323,14 +4370,22 @@
         contrastText: "#fff"
       },
       ibisRed: {
-        main: colors.ibisRed,
-        dark: colors.ibisRedDark
+        main: colors.ibisRed
+      },
+      ibisRedDark: {
+        main: colors.ibisRedDark
       },
       seafoam: {
         light: colors.seafoam,
         main: colors.seafoam,
         dark: colors.seafoam,
-        contrastText: "#fff"
+        contrastText: "#000"
+      },
+      seafoamDark: {
+        light: colors.seafoamDark,
+        main: colors.seafoamDark,
+        dark: colors.seafoamDark,
+        contrastText: "#000"
       },
       buntingBlue: {
         light: colors.buntingBlue,
@@ -4447,14 +4502,22 @@
         contrastText: "#000"
       },
       ibisRed: {
-        main: colors.ibisRed,
-        dark: colors.ibisRedDark
+        main: colors.ibisRed
+      },
+      ibisRedDark: {
+        main: colors.ibisRedDark
       },
       seafoam: {
         light: colors.seafoam,
         main: colors.seafoam,
         dark: colors.seafoam,
-        contrastText: "#fff"
+        contrastText: "#000"
+      },
+      seafoamDark: {
+        light: colors.seafoamDark,
+        main: colors.seafoamDark,
+        dark: colors.seafoamDark,
+        contrastText: "#000"
       },
       buntingBlue: {
         light: colors.buntingBlue,

package/package.json

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