@blerp/design 1.1.1 → 1.1.2

package/dist/index.cjs.js

@@ -6,6 +6,7 @@ var material = require('@mui/material');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var PropTypes = require('prop-types');
 var React = require('react');
+var reactColorExtractor = require('react-color-extractor');
 var styled = require('styled-components');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var iconsMaterial = require('@mui/icons-material');
@@ -1315,6 +1316,8 @@ var reactionIconUrls$1 = {
   LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
 };
 var Blerp$1 = function Blerp(_ref) {
+  var _bite$image, _bite$image$original;
+
   var bite = _ref.bite,
       title = _ref.title,
       variantSize = _ref.variantSize,
@@ -1350,8 +1353,8 @@ var Blerp$1 = function Blerp(_ref) {
 
   var _useState3 = React.useState(null),
       _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      profileColors = _useState4[0];
-      _useState4[1];
+      profileColors = _useState4[0],
+      setProfileColors = _useState4[1];
 
   var _useState5 = React.useState(false),
       _useState6 = _slicedToArray__default['default'](_useState5, 2),
@@ -1479,6 +1482,11 @@ var Blerp$1 = function Blerp(_ref) {
       background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
       backgroundColor: isPremium && !profileColors && "grey5.override"
     }
+  }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+    src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
+    getColors: function getColors(colors) {
+      return setProfileColors(colors);
+    }
   }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
     bite: bite,
     isOwner: isOwner,
@@ -7428,7 +7436,7 @@ var LockedScrimBackground = styled__default['default'].div(_templateObject6 || (
   return props.collectionHovered ? "0.5" : "0";
 });
 var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
-  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image3, _collection$image3$or;
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
 
   var collection = _ref.collection,
       variantSize = _ref.variantSize,
@@ -7455,8 +7463,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
-      cardColors = _useState2[0];
-      _useState2[1];
+      cardColors = _useState2[0],
+      setCardColors = _useState2[1];
 
   var _useState3 = React.useState(false),
       _useState4 = _slicedToArray__default['default'](_useState3, 2),
@@ -7498,7 +7506,15 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: fluid ? "80%" : sizeParams.width,
       height: fluid ? "80%" : sizeParams.height
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Box, {
+  }, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+    style: {
+      zIndex: "3"
+    },
+    src: 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,
+    getColors: function getColors(colors) {
+      return setCardColors(colors);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Box, {
     onClick: function onClick(e) {
       e.stopPropagation();
       if (handleClickBackground) handleClickBackground();
@@ -7571,7 +7587,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }), /*#__PURE__*/React__default['default'].createElement(Box, {
     sx: {
-      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #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, ")"),
+      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), 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",
       backgroundPosition: "center",
       backgroundRepeat: "no-repeat",
@@ -7891,7 +7907,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   // What to display when variantSize === "small":
   React__default['default'].createElement(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, ")"),
+      backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
       backgroundSize: "cover",
       backgroundPosition: "center",
       backgroundRepeat: "no-repeat",
@@ -8290,7 +8306,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
 };
 
 var UserProfileHeader = function UserProfileHeader(_ref) {
-  var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag, _userData$profileImag2, _userData$socialLinks2;
+  var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
 
   var followUser = _ref.followUser,
       isOwner = _ref.isOwner,
@@ -8300,8 +8316,8 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
-      profileColors = _useState2[0];
-      _useState2[1];
+      profileColors = _useState2[0],
+      setProfileColors = _useState2[1];
 
   var size = useWindowSize();
 
@@ -8398,7 +8414,12 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
     });
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
+    getColors: function getColors(colors) {
+      return setProfileColors(colors);
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     width: "100%",
     sx: {
       height: "250px",
@@ -8488,7 +8509,7 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
       margin: "0 20px"
     },
     alt: "profile img",
-    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url
+    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
   }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     marginLeft: "20px"
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {

package/dist/index.esm.js

@@ -3,6 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import React__default, { useState, useEffect, useContext, useRef, createRef, cloneElement } from 'react';
+import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import { PauseCircleOutlineRounded, LockRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
@@ -1246,6 +1247,8 @@ var reactionIconUrls$1 = {
   LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
 };
 var Blerp$1 = function Blerp(_ref) {
+  var _bite$image, _bite$image$original;
+
   var bite = _ref.bite,
       title = _ref.title,
       variantSize = _ref.variantSize,
@@ -1281,8 +1284,8 @@ var Blerp$1 = function Blerp(_ref) {
 
   var _useState3 = useState(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      profileColors = _useState4[0];
-      _useState4[1];
+      profileColors = _useState4[0],
+      setProfileColors = _useState4[1];
 
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
@@ -1410,6 +1413,11 @@ var Blerp$1 = function Blerp(_ref) {
       background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
       backgroundColor: isPremium && !profileColors && "grey5.override"
     }
+  }), /*#__PURE__*/React__default.createElement(ColorExtractor, {
+    src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
+    getColors: function getColors(colors) {
+      return setProfileColors(colors);
+    }
   }), /*#__PURE__*/React__default.createElement(BlerpTopRow, {
     bite: bite,
     isOwner: isOwner,
@@ -7359,7 +7367,7 @@ var LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _
   return props.collectionHovered ? "0.5" : "0";
 });
 var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
-  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image3, _collection$image3$or;
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
 
   var collection = _ref.collection,
       variantSize = _ref.variantSize,
@@ -7386,8 +7394,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      cardColors = _useState2[0];
-      _useState2[1];
+      cardColors = _useState2[0],
+      setCardColors = _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -7429,7 +7437,15 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       width: fluid ? "80%" : sizeParams.width,
       height: fluid ? "80%" : sizeParams.height
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(ColorExtractor, {
+    style: {
+      zIndex: "3"
+    },
+    src: 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,
+    getColors: function getColors(colors) {
+      return setCardColors(colors);
+    }
+  }), /*#__PURE__*/React__default.createElement(Box, {
     onClick: function onClick(e) {
       e.stopPropagation();
       if (handleClickBackground) handleClickBackground();
@@ -7502,7 +7518,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     }
   }), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #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, ")"),
+      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), 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",
       backgroundPosition: "center",
       backgroundRepeat: "no-repeat",
@@ -7822,7 +7838,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
   // What to display when variantSize === "small":
   React__default.createElement(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, ")"),
+      backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
       backgroundSize: "cover",
       backgroundPosition: "center",
       backgroundRepeat: "no-repeat",
@@ -8221,7 +8237,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
 };
 
 var UserProfileHeader = function UserProfileHeader(_ref) {
-  var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag, _userData$profileImag2, _userData$socialLinks2;
+  var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
 
   var followUser = _ref.followUser,
       isOwner = _ref.isOwner,
@@ -8231,8 +8247,8 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      profileColors = _useState2[0];
-      _useState2[1];
+      profileColors = _useState2[0],
+      setProfileColors = _useState2[1];
 
   var size = useWindowSize();
 
@@ -8329,7 +8345,12 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
     });
   };
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorExtractor, {
+    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
+    getColors: function getColors(colors) {
+      return setProfileColors(colors);
+    }
+  }), /*#__PURE__*/React__default.createElement(Stack, {
     width: "100%",
     sx: {
       height: "250px",
@@ -8419,7 +8440,7 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
       margin: "0 20px"
     },
     alt: "profile img",
-    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url
+    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
   }), /*#__PURE__*/React__default.createElement(Stack, {
     marginLeft: "20px"
   }, /*#__PURE__*/React__default.createElement(Stack, {

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1268,6 +1268,8 @@
       LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
     };
     var Blerp$1 = function Blerp(_ref) {
+      var _bite$image, _bite$image$original;
+
       var bite = _ref.bite,
           title = _ref.title,
           variantSize = _ref.variantSize,
@@ -1303,8 +1305,8 @@
 
       var _useState3 = React.useState(null),
           _useState4 = _slicedToArray__default['default'](_useState3, 2),
-          profileColors = _useState4[0];
-          _useState4[1];
+          profileColors = _useState4[0],
+          setProfileColors = _useState4[1];
 
       var _useState5 = React.useState(false),
           _useState6 = _slicedToArray__default['default'](_useState5, 2),
@@ -1432,6 +1434,11 @@
           background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
           backgroundColor: isPremium && !profileColors && "grey5.override"
         }
+      }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+        src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
+        getColors: function getColors(colors) {
+          return setProfileColors(colors);
+        }
       }), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
         bite: bite,
         isOwner: isOwner,
@@ -7381,7 +7388,7 @@
       return props.collectionHovered ? "0.5" : "0";
     });
     var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
-      var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image3, _collection$image3$or;
+      var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
 
       var collection = _ref.collection,
           variantSize = _ref.variantSize,
@@ -7408,8 +7415,8 @@
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
-          cardColors = _useState2[0];
-          _useState2[1];
+          cardColors = _useState2[0],
+          setCardColors = _useState2[1];
 
       var _useState3 = React.useState(false),
           _useState4 = _slicedToArray__default['default'](_useState3, 2),
@@ -7451,7 +7458,15 @@
           width: fluid ? "80%" : sizeParams.width,
           height: fluid ? "80%" : sizeParams.height
         }
-      }, /*#__PURE__*/React__default['default'].createElement(Box, {
+      }, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+        style: {
+          zIndex: "3"
+        },
+        src: 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,
+        getColors: function getColors(colors) {
+          return setCardColors(colors);
+        }
+      }), /*#__PURE__*/React__default['default'].createElement(Box, {
         onClick: function onClick(e) {
           e.stopPropagation();
           if (handleClickBackground) handleClickBackground();
@@ -7524,7 +7539,7 @@
         }
       }), /*#__PURE__*/React__default['default'].createElement(Box, {
         sx: {
-          backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #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, ")"),
+          backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), 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",
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
@@ -7844,7 +7859,7 @@
       // What to display when variantSize === "small":
       React__default['default'].createElement(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, ")"),
+          backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
           backgroundSize: "cover",
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
@@ -8243,7 +8258,7 @@
     };
 
     var UserProfileHeader = function UserProfileHeader(_ref) {
-      var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag, _userData$profileImag2, _userData$socialLinks2;
+      var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
 
       var followUser = _ref.followUser,
           isOwner = _ref.isOwner,
@@ -8253,8 +8268,8 @@
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
-          profileColors = _useState2[0];
-          _useState2[1];
+          profileColors = _useState2[0],
+          setProfileColors = _useState2[1];
 
       var size = useWindowSize();
 
@@ -8351,7 +8366,12 @@
         });
       };
 
-      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
+        src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
+        getColors: function getColors(colors) {
+          return setProfileColors(colors);
+        }
+      }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         width: "100%",
         sx: {
           height: "250px",
@@ -8441,7 +8461,7 @@
           margin: "0 20px"
         },
         alt: "profile img",
-        src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url
+        src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
       }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         marginLeft: "20px"
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {

package/package.json

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