npm - @blerp/design - Versions diffs - 1.1.2 → 1.1.4 - Mend

@blerp/design 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -18,6 +18,7 @@ var reactPalette = require('react-palette');
 var _typeof = require('@babel/runtime/helpers/typeof');
 var KeyboardArrowRightRoundedIcon = require('@mui/icons-material/KeyboardArrowRightRounded');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('@mui/system');
 var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
 var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
@@ -118,7 +119,7 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
 var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
 var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
-var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
+var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
 var BlerpImage$2 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
@@ -129,7 +130,7 @@ var SaveContainer$2 = styled__default['default'].div(_templateObject2$a || (_tem
 }, function (props) {
   return props.theme.colors.white;
 });
-var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
+var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
   return props.theme.colors.grey6Override;
 }, function (props) {
   return props.theme.colors.grey6Override;
@@ -1341,7 +1342,8 @@ var Blerp$1 = function Blerp(_ref) {
       isLocked = _ref.isLocked,
       isOwner = _ref.isOwner;
       _ref.props;
-      var handleClickLock = _ref.handleClickLock;
+      var handleClickLock = _ref.handleClickLock,
+      backgroundColor = _ref.backgroundColor;
   var theme = React.useContext(styled.ThemeContext);
   var _useState = React.useState(false),
@@ -1462,7 +1464,7 @@ var Blerp$1 = function Blerp(_ref) {
       overflow: "hidden",
       // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
       // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
-      backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
+      backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
       transition: "0.3s",
       position: "relative",
       cursor: "pointer",
@@ -1556,12 +1558,12 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes__default['default'].func.isRequired
 };
-var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
+var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
 var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-var SaveContainer$1 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
+var SaveContainer$1 = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
   return "".concat(props.theme.colors.notBlack, "8a");
 }, function (props) {
   return props.theme.colors.seafoam;
@@ -1987,12 +1989,12 @@ BlerpListViewPremium$1.propTypes = {
   handleClickUnsave: PropTypes__default['default'].func.isRequired
 };
-var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
+var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
 var BlerpImage = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 var zoomIn = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
+styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
   return props.theme.colors.notBlack;
 }, function (props) {
   return props.theme.colors.notBlack;
@@ -2351,7 +2353,7 @@ BlerpListView$1.propTypes = {
   handleClickUnsave: PropTypes__default['default'].func.isRequired
 };
-var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var MasterContainer = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), function (_ref) {
   var sizeParams = _ref.sizeParams;
   return (sizeParams.height += 2) + "px";
@@ -2365,7 +2367,7 @@ var MasterContainer = styled__default['default'].div(_templateObject$c || (_temp
   return props.owned ? "102%" : "100%";
 });
 var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
-var TopBox = styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
+var TopBox = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
   return props.theme.colors.white;
 });
 var MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
@@ -2719,7 +2721,6 @@ CollectionListViewPremium$1.propTypes = {
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var colors = {
   white: "#ffffff",
   waxing: "#F3F3F3",
@@ -2840,6 +2841,10 @@ var lightPalette = {
     main: colors.waxing,
     override: colors.waxing
   },
+  grey1: {
+    main: colors.grey1,
+    override: colors.grey1
+  },
   grey2: {
     main: colors.grey2,
     override: colors.grey2
@@ -2864,6 +2869,14 @@ var lightPalette = {
     main: colors.grey7,
     override: colors.grey7
   },
+  grey8: {
+    main: colors.grey8,
+    override: colors.grey8
+  },
+  grey9: {
+    main: colors.grey9,
+    override: colors.grey9
+  },
   notBlack: {
     light: colors.notBlack,
     main: colors.notBlack,
@@ -2932,29 +2945,41 @@ var darkPalette = {
     main: colors.notBlack,
     override: colors.waxwing
   },
+  grey1: {
+    main: colors.grey9Dark,
+    override: colors.grey1Dark
+  },
   grey2: {
-    main: colors.grey7,
-    override: colors.grey2
+    main: colors.grey8Dark,
+    override: colors.grey2Dark
   },
   grey3: {
-    main: colors.grey6,
-    override: colors.grey3
+    main: colors.grey7Dark,
+    override: colors.grey3Dark
   },
   grey4: {
-    main: colors.grey5,
-    override: colors.grey4
+    main: colors.grey6Dark,
+    override: colors.grey4Dark
   },
   grey5: {
-    main: colors.grey4,
-    override: colors.grey5
+    main: colors.grey5Dark,
+    override: colors.grey5Dark
   },
   grey6: {
-    main: colors.grey3,
-    override: colors.grey6
+    main: colors.grey4Dark,
+    override: colors.grey6Dark
   },
   grey7: {
-    main: colors.grey2,
-    override: colors.grey7
+    main: colors.grey3Dark,
+    override: colors.grey7Dark
+  },
+  grey8: {
+    main: colors.grey2Dark,
+    override: colors.grey8Dark
+  },
+  grey9: {
+    main: colors.grey1Dark,
+    override: colors.grey9Dark
   },
   notBlack: {
     light: colors.waxwing,
@@ -2993,7 +3018,7 @@ var darkPalette = {
   }
 };
-var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
+var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -3008,7 +3033,7 @@ var motion2 = function motion2(props) {
 };
 var motion3 = function motion3(props) {
-  return styled.keyframes(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
+  return styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
 };
 var EllipsisSpinner = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), function (p) {
@@ -3048,14 +3073,14 @@ EllipsisLoader.defaultProps = {
   }
 };
-var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
+var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
 var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
   return props.theme.colors.grey5;
 });
 var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
   return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
 }, Slider$2, Slider$2);
-var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+var Switch$1 = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
   return props.disabled ? "default" : "pointer";
 }, function (props) {
   return props.checked ? "38px" : "36px";
@@ -3256,7 +3281,7 @@ var Dropdown$1 = function Dropdown(_ref) {
   })));
 };
-var _templateObject$9, _templateObject2$4, _templateObject3$3;
+var _templateObject$9, _templateObject2$4;
 var Slider$1 = styled__default['default'].input(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), function (props) {
   return props.theme.colors.ibisRed;
 }, function (props) {
@@ -3266,8 +3291,7 @@ var Slider$1 = styled__default['default'].input(_templateObject$9 || (_templateO
 }, function (props) {
   return props.theme.colors.waxwing;
 });
-styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Twitch/Assets/Close_Black.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    cursor: pointer;\n"])));
-var ZoomIcon = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
+var ZoomIcon = styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
 var ImageUploadModal = function ImageUploadModal(_ref) {
   var _ref6;

package/dist/index.esm.js CHANGED Viewed

@@ -15,6 +15,7 @@ import { usePalette } from 'react-palette';
 import _typeof from '@babel/runtime/helpers/typeof';
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import '@mui/system';
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
@@ -49,7 +50,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
-var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
+var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
 var BlerpImage$2 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
@@ -60,7 +61,7 @@ var SaveContainer$2 = styled.div(_templateObject2$a || (_templateObject2$a = _ta
 }, function (props) {
   return props.theme.colors.white;
 });
-var BlerpImageScrim$2 = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
+var BlerpImageScrim$2 = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
   return props.theme.colors.grey6Override;
 }, function (props) {
   return props.theme.colors.grey6Override;
@@ -1272,7 +1273,8 @@ var Blerp$1 = function Blerp(_ref) {
       isLocked = _ref.isLocked,
       isOwner = _ref.isOwner;
       _ref.props;
-      var handleClickLock = _ref.handleClickLock;
+      var handleClickLock = _ref.handleClickLock,
+      backgroundColor = _ref.backgroundColor;
   var theme = useContext(ThemeContext);
   var _useState = useState(false),
@@ -1393,7 +1395,7 @@ var Blerp$1 = function Blerp(_ref) {
       overflow: "hidden",
       // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
       // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
-      backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
+      backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
       transition: "0.3s",
       position: "relative",
       cursor: "pointer",
@@ -1487,12 +1489,12 @@ Blerp$1.propTypes = {
   handleClickTitle: PropTypes.func.isRequired
 };
-var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
+var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
 var BlerpImage$1 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-var SaveContainer$1 = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
+var SaveContainer$1 = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
   return "".concat(props.theme.colors.notBlack, "8a");
 }, function (props) {
   return props.theme.colors.seafoam;
@@ -1918,12 +1920,12 @@ BlerpListViewPremium$1.propTypes = {
   handleClickUnsave: PropTypes.func.isRequired
 };
-var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
+var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
 var BlerpImage = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
   return props.url;
 });
 var zoomIn = keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
+styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
   return props.theme.colors.notBlack;
 }, function (props) {
   return props.theme.colors.notBlack;
@@ -2282,7 +2284,7 @@ BlerpListView$1.propTypes = {
   handleClickUnsave: PropTypes.func.isRequired
 };
-var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 var MasterContainer = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), function (_ref) {
   var sizeParams = _ref.sizeParams;
   return (sizeParams.height += 2) + "px";
@@ -2296,7 +2298,7 @@ var MasterContainer = styled.div(_templateObject$c || (_templateObject$c = _tagg
   return props.owned ? "102%" : "100%";
 });
 var YellowHoverBorder$1 = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
-var TopBox = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
+var TopBox = styled.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
   return props.theme.colors.white;
 });
 var MidBox = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
@@ -2650,7 +2652,6 @@ CollectionListViewPremium$1.propTypes = {
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var colors = {
   white: "#ffffff",
   waxing: "#F3F3F3",
@@ -2771,6 +2772,10 @@ var lightPalette = {
     main: colors.waxing,
     override: colors.waxing
   },
+  grey1: {
+    main: colors.grey1,
+    override: colors.grey1
+  },
   grey2: {
     main: colors.grey2,
     override: colors.grey2
@@ -2795,6 +2800,14 @@ var lightPalette = {
     main: colors.grey7,
     override: colors.grey7
   },
+  grey8: {
+    main: colors.grey8,
+    override: colors.grey8
+  },
+  grey9: {
+    main: colors.grey9,
+    override: colors.grey9
+  },
   notBlack: {
     light: colors.notBlack,
     main: colors.notBlack,
@@ -2863,29 +2876,41 @@ var darkPalette = {
     main: colors.notBlack,
     override: colors.waxwing
   },
+  grey1: {
+    main: colors.grey9Dark,
+    override: colors.grey1Dark
+  },
   grey2: {
-    main: colors.grey7,
-    override: colors.grey2
+    main: colors.grey8Dark,
+    override: colors.grey2Dark
   },
   grey3: {
-    main: colors.grey6,
-    override: colors.grey3
+    main: colors.grey7Dark,
+    override: colors.grey3Dark
   },
   grey4: {
-    main: colors.grey5,
-    override: colors.grey4
+    main: colors.grey6Dark,
+    override: colors.grey4Dark
   },
   grey5: {
-    main: colors.grey4,
-    override: colors.grey5
+    main: colors.grey5Dark,
+    override: colors.grey5Dark
   },
   grey6: {
-    main: colors.grey3,
-    override: colors.grey6
+    main: colors.grey4Dark,
+    override: colors.grey6Dark
   },
   grey7: {
-    main: colors.grey2,
-    override: colors.grey7
+    main: colors.grey3Dark,
+    override: colors.grey7Dark
+  },
+  grey8: {
+    main: colors.grey2Dark,
+    override: colors.grey8Dark
+  },
+  grey9: {
+    main: colors.grey1Dark,
+    override: colors.grey9Dark
   },
   notBlack: {
     light: colors.waxwing,
@@ -2924,7 +2949,7 @@ var darkPalette = {
   }
 };
-var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
+var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -2939,7 +2964,7 @@ var motion2 = function motion2(props) {
 };
 var motion3 = function motion3(props) {
-  return keyframes(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
+  return keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
 };
 var EllipsisSpinner = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), function (p) {
@@ -2979,14 +3004,14 @@ EllipsisLoader.defaultProps = {
   }
 };
-var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
+var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
 var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
   return props.theme.colors.grey5;
 });
 var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
   return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
 }, Slider$2, Slider$2);
-var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+var Switch$1 = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
   return props.disabled ? "default" : "pointer";
 }, function (props) {
   return props.checked ? "38px" : "36px";
@@ -3187,7 +3212,7 @@ var Dropdown$1 = function Dropdown(_ref) {
   })));
 };
-var _templateObject$9, _templateObject2$4, _templateObject3$3;
+var _templateObject$9, _templateObject2$4;
 var Slider$1 = styled.input(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), function (props) {
   return props.theme.colors.ibisRed;
 }, function (props) {
@@ -3197,8 +3222,7 @@ var Slider$1 = styled.input(_templateObject$9 || (_templateObject$9 = _taggedTem
 }, function (props) {
   return props.theme.colors.waxwing;
 });
-styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Twitch/Assets/Close_Black.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    cursor: pointer;\n"])));
-var ZoomIcon = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
+var ZoomIcon = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
 var ImageUploadModal = function ImageUploadModal(_ref) {
   var _ref6;

package/dist/index.umd.js CHANGED Viewed

@@ -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('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';
+    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/system'), 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/system', '@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, null, 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, system, 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 }; }
@@ -70,7 +70,7 @@
     var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
     var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
-    var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
+    var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
     var BlerpImage$2 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
       return props.url;
     });
@@ -81,7 +81,7 @@
     }, function (props) {
       return props.theme.colors.white;
     });
-    var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
+    var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), function (props) {
       return props.theme.colors.grey6Override;
     }, function (props) {
       return props.theme.colors.grey6Override;
@@ -1293,7 +1293,8 @@
           isLocked = _ref.isLocked,
           isOwner = _ref.isOwner;
           _ref.props;
-          var handleClickLock = _ref.handleClickLock;
+          var handleClickLock = _ref.handleClickLock,
+          backgroundColor = _ref.backgroundColor;
       var theme = React.useContext(styled.ThemeContext);
       var _useState = React.useState(false),
@@ -1414,7 +1415,7 @@
           overflow: "hidden",
           // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
           // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
-          backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
+          backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
           transition: "0.3s",
           position: "relative",
           cursor: "pointer",
@@ -1508,12 +1509,12 @@
       handleClickTitle: PropTypes__default['default'].func.isRequired
     };
-    var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
+    var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
     var BlerpImage$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
       return props.url;
     });
     styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-    var SaveContainer$1 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
+    var SaveContainer$1 = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 1;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), function (props) {
       return "".concat(props.theme.colors.notBlack, "8a");
     }, function (props) {
       return props.theme.colors.seafoam;
@@ -1939,12 +1940,12 @@
       handleClickUnsave: PropTypes__default['default'].func.isRequired
     };
-    var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
+    var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
     var BlerpImage = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), function (props) {
       return props.url;
     });
     var zoomIn = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-    styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
+    styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), function (props) {
       return props.theme.colors.notBlack;
     }, function (props) {
       return props.theme.colors.notBlack;
@@ -2303,7 +2304,7 @@
       handleClickUnsave: PropTypes__default['default'].func.isRequired
     };
-    var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+    var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
     var MasterContainer = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), function (_ref) {
       var sizeParams = _ref.sizeParams;
       return (sizeParams.height += 2) + "px";
@@ -2317,7 +2318,7 @@
       return props.owned ? "102%" : "100%";
     });
     var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
-    var TopBox = styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
+    var TopBox = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), function (props) {
       return props.theme.colors.white;
     });
     var MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), function (props) {
@@ -2671,7 +2672,6 @@
     function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
     function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
     var colors = {
       white: "#ffffff",
       waxing: "#F3F3F3",
@@ -2792,6 +2792,10 @@
         main: colors.waxing,
         override: colors.waxing
       },
+      grey1: {
+        main: colors.grey1,
+        override: colors.grey1
+      },
       grey2: {
         main: colors.grey2,
         override: colors.grey2
@@ -2816,6 +2820,14 @@
         main: colors.grey7,
         override: colors.grey7
       },
+      grey8: {
+        main: colors.grey8,
+        override: colors.grey8
+      },
+      grey9: {
+        main: colors.grey9,
+        override: colors.grey9
+      },
       notBlack: {
         light: colors.notBlack,
         main: colors.notBlack,
@@ -2884,29 +2896,41 @@
         main: colors.notBlack,
         override: colors.waxwing
       },
+      grey1: {
+        main: colors.grey9Dark,
+        override: colors.grey1Dark
+      },
       grey2: {
-        main: colors.grey7,
-        override: colors.grey2
+        main: colors.grey8Dark,
+        override: colors.grey2Dark
       },
       grey3: {
-        main: colors.grey6,
-        override: colors.grey3
+        main: colors.grey7Dark,
+        override: colors.grey3Dark
       },
       grey4: {
-        main: colors.grey5,
-        override: colors.grey4
+        main: colors.grey6Dark,
+        override: colors.grey4Dark
       },
       grey5: {
-        main: colors.grey4,
-        override: colors.grey5
+        main: colors.grey5Dark,
+        override: colors.grey5Dark
       },
       grey6: {
-        main: colors.grey3,
-        override: colors.grey6
+        main: colors.grey4Dark,
+        override: colors.grey6Dark
       },
       grey7: {
-        main: colors.grey2,
-        override: colors.grey7
+        main: colors.grey3Dark,
+        override: colors.grey7Dark
+      },
+      grey8: {
+        main: colors.grey2Dark,
+        override: colors.grey8Dark
+      },
+      grey9: {
+        main: colors.grey1Dark,
+        override: colors.grey9Dark
       },
       notBlack: {
         light: colors.waxwing,
@@ -2945,7 +2969,7 @@
       }
     };
-    var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
+    var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
     function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -2960,7 +2984,7 @@
     };
     var motion3 = function motion3(props) {
-      return styled.keyframes(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
+      return styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
     };
     var EllipsisSpinner = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), function (p) {
@@ -3000,14 +3024,14 @@
       }
     };
-    var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
+    var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
     var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
       return props.theme.colors.grey5;
     });
     var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
       return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
     }, Slider$2, Slider$2);
-    var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+    var Switch$1 = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
       return props.disabled ? "default" : "pointer";
     }, function (props) {
       return props.checked ? "38px" : "36px";
@@ -3208,7 +3232,7 @@
       })));
     };
-    var _templateObject$9, _templateObject2$4, _templateObject3$3;
+    var _templateObject$9, _templateObject2$4;
     var Slider$1 = styled__default['default'].input(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), function (props) {
       return props.theme.colors.ibisRed;
     }, function (props) {
@@ -3218,8 +3242,7 @@
     }, function (props) {
       return props.theme.colors.waxwing;
     });
-    styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Twitch/Assets/Close_Black.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-size: cover;\n    background-position: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 20px;\n    right: 20px;\n    cursor: pointer;\n"])));
-    var ZoomIcon = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
+    var ZoomIcon = styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
     var ImageUploadModal = function ImageUploadModal(_ref) {
       var _ref6;

package/package.json CHANGED Viewed

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