@blerp/design 1.1.2 → 1.1.3

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.
package/dist/index.cjs.js CHANGED
@@ -118,7 +118,7 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
118
118
  var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
119
119
  var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
120
120
 
121
- var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
121
+ var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
122
122
  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) {
123
123
  return props.url;
124
124
  });
@@ -129,7 +129,7 @@ var SaveContainer$2 = styled__default['default'].div(_templateObject2$a || (_tem
129
129
  }, function (props) {
130
130
  return props.theme.colors.white;
131
131
  });
132
- 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) {
132
+ 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) {
133
133
  return props.theme.colors.grey6Override;
134
134
  }, function (props) {
135
135
  return props.theme.colors.grey6Override;
@@ -1341,7 +1341,8 @@ var Blerp$1 = function Blerp(_ref) {
1341
1341
  isLocked = _ref.isLocked,
1342
1342
  isOwner = _ref.isOwner;
1343
1343
  _ref.props;
1344
- var handleClickLock = _ref.handleClickLock;
1344
+ var handleClickLock = _ref.handleClickLock,
1345
+ backgroundColor = _ref.backgroundColor;
1345
1346
  var theme = React.useContext(styled.ThemeContext);
1346
1347
 
1347
1348
  var _useState = React.useState(false),
@@ -1462,7 +1463,7 @@ var Blerp$1 = function Blerp(_ref) {
1462
1463
  overflow: "hidden",
1463
1464
  // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
1464
1465
  // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
1465
- backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1466
+ backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1466
1467
  transition: "0.3s",
1467
1468
  position: "relative",
1468
1469
  cursor: "pointer",
@@ -1556,12 +1557,12 @@ Blerp$1.propTypes = {
1556
1557
  handleClickTitle: PropTypes__default['default'].func.isRequired
1557
1558
  };
1558
1559
 
1559
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1560
+ var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1560
1561
  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) {
1561
1562
  return props.url;
1562
1563
  });
1563
1564
  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"])));
1564
- 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) {
1565
+ 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) {
1565
1566
  return "".concat(props.theme.colors.notBlack, "8a");
1566
1567
  }, function (props) {
1567
1568
  return props.theme.colors.seafoam;
@@ -1987,12 +1988,12 @@ BlerpListViewPremium$1.propTypes = {
1987
1988
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1988
1989
  };
1989
1990
 
1990
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1991
+ var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1991
1992
  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) {
1992
1993
  return props.url;
1993
1994
  });
1994
1995
  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"])));
1995
- 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) {
1996
+ 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) {
1996
1997
  return props.theme.colors.notBlack;
1997
1998
  }, function (props) {
1998
1999
  return props.theme.colors.notBlack;
@@ -2351,7 +2352,7 @@ BlerpListView$1.propTypes = {
2351
2352
  handleClickUnsave: PropTypes__default['default'].func.isRequired
2352
2353
  };
2353
2354
 
2354
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2355
+ var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2355
2356
  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) {
2356
2357
  var sizeParams = _ref.sizeParams;
2357
2358
  return (sizeParams.height += 2) + "px";
@@ -2365,7 +2366,7 @@ var MasterContainer = styled__default['default'].div(_templateObject$c || (_temp
2365
2366
  return props.owned ? "102%" : "100%";
2366
2367
  });
2367
2368
  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"])));
2368
- 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) {
2369
+ 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) {
2369
2370
  return props.theme.colors.white;
2370
2371
  });
2371
2372
  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) {
@@ -2993,7 +2994,7 @@ var darkPalette = {
2993
2994
  }
2994
2995
  };
2995
2996
 
2996
- var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
2997
+ var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
2997
2998
 
2998
2999
  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; }
2999
3000
 
@@ -3008,7 +3009,7 @@ var motion2 = function motion2(props) {
3008
3009
  };
3009
3010
 
3010
3011
  var motion3 = function motion3(props) {
3011
- 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"])));
3012
+ 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"])));
3012
3013
  };
3013
3014
 
3014
3015
  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 +3049,14 @@ EllipsisLoader.defaultProps = {
3048
3049
  }
3049
3050
  };
3050
3051
 
3051
- var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3052
+ var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3052
3053
  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) {
3053
3054
  return props.theme.colors.grey5;
3054
3055
  });
3055
3056
  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) {
3056
3057
  return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
3057
3058
  }, Slider$2, Slider$2);
3058
- 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) {
3059
+ 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) {
3059
3060
  return props.disabled ? "default" : "pointer";
3060
3061
  }, function (props) {
3061
3062
  return props.checked ? "38px" : "36px";
@@ -3256,7 +3257,7 @@ var Dropdown$1 = function Dropdown(_ref) {
3256
3257
  })));
3257
3258
  };
3258
3259
 
3259
- var _templateObject$9, _templateObject2$4, _templateObject3$3;
3260
+ var _templateObject$9, _templateObject2$4;
3260
3261
  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) {
3261
3262
  return props.theme.colors.ibisRed;
3262
3263
  }, function (props) {
@@ -3266,8 +3267,7 @@ var Slider$1 = styled__default['default'].input(_templateObject$9 || (_templateO
3266
3267
  }, function (props) {
3267
3268
  return props.theme.colors.waxwing;
3268
3269
  });
3269
- 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"])));
3270
- 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"])));
3270
+ 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"])));
3271
3271
 
3272
3272
  var ImageUploadModal = function ImageUploadModal(_ref) {
3273
3273
  var _ref6;
package/dist/index.esm.js CHANGED
@@ -49,7 +49,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
49
49
  import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
50
50
  import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
51
51
 
52
- var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
52
+ var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
53
53
  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) {
54
54
  return props.url;
55
55
  });
@@ -60,7 +60,7 @@ var SaveContainer$2 = styled.div(_templateObject2$a || (_templateObject2$a = _ta
60
60
  }, function (props) {
61
61
  return props.theme.colors.white;
62
62
  });
63
- 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) {
63
+ 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) {
64
64
  return props.theme.colors.grey6Override;
65
65
  }, function (props) {
66
66
  return props.theme.colors.grey6Override;
@@ -1272,7 +1272,8 @@ var Blerp$1 = function Blerp(_ref) {
1272
1272
  isLocked = _ref.isLocked,
1273
1273
  isOwner = _ref.isOwner;
1274
1274
  _ref.props;
1275
- var handleClickLock = _ref.handleClickLock;
1275
+ var handleClickLock = _ref.handleClickLock,
1276
+ backgroundColor = _ref.backgroundColor;
1276
1277
  var theme = useContext(ThemeContext);
1277
1278
 
1278
1279
  var _useState = useState(false),
@@ -1393,7 +1394,7 @@ var Blerp$1 = function Blerp(_ref) {
1393
1394
  overflow: "hidden",
1394
1395
  // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
1395
1396
  // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
1396
- backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1397
+ backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1397
1398
  transition: "0.3s",
1398
1399
  position: "relative",
1399
1400
  cursor: "pointer",
@@ -1487,12 +1488,12 @@ Blerp$1.propTypes = {
1487
1488
  handleClickTitle: PropTypes.func.isRequired
1488
1489
  };
1489
1490
 
1490
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1491
+ var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1491
1492
  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) {
1492
1493
  return props.url;
1493
1494
  });
1494
1495
  keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1495
- 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) {
1496
+ 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) {
1496
1497
  return "".concat(props.theme.colors.notBlack, "8a");
1497
1498
  }, function (props) {
1498
1499
  return props.theme.colors.seafoam;
@@ -1918,12 +1919,12 @@ BlerpListViewPremium$1.propTypes = {
1918
1919
  handleClickUnsave: PropTypes.func.isRequired
1919
1920
  };
1920
1921
 
1921
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1922
+ var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1922
1923
  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) {
1923
1924
  return props.url;
1924
1925
  });
1925
1926
  var zoomIn = keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1926
- 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) {
1927
+ 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) {
1927
1928
  return props.theme.colors.notBlack;
1928
1929
  }, function (props) {
1929
1930
  return props.theme.colors.notBlack;
@@ -2282,7 +2283,7 @@ BlerpListView$1.propTypes = {
2282
2283
  handleClickUnsave: PropTypes.func.isRequired
2283
2284
  };
2284
2285
 
2285
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2286
+ var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2286
2287
  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) {
2287
2288
  var sizeParams = _ref.sizeParams;
2288
2289
  return (sizeParams.height += 2) + "px";
@@ -2296,7 +2297,7 @@ var MasterContainer = styled.div(_templateObject$c || (_templateObject$c = _tagg
2296
2297
  return props.owned ? "102%" : "100%";
2297
2298
  });
2298
2299
  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"])));
2299
- 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) {
2300
+ 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) {
2300
2301
  return props.theme.colors.white;
2301
2302
  });
2302
2303
  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) {
@@ -2924,7 +2925,7 @@ var darkPalette = {
2924
2925
  }
2925
2926
  };
2926
2927
 
2927
- var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
2928
+ var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
2928
2929
 
2929
2930
  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; }
2930
2931
 
@@ -2939,7 +2940,7 @@ var motion2 = function motion2(props) {
2939
2940
  };
2940
2941
 
2941
2942
  var motion3 = function motion3(props) {
2942
- return keyframes(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
2943
+ return keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
2943
2944
  };
2944
2945
 
2945
2946
  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 +2980,14 @@ EllipsisLoader.defaultProps = {
2979
2980
  }
2980
2981
  };
2981
2982
 
2982
- var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
2983
+ var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
2983
2984
  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) {
2984
2985
  return props.theme.colors.grey5;
2985
2986
  });
2986
2987
  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) {
2987
2988
  return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
2988
2989
  }, Slider$2, Slider$2);
2989
- 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) {
2990
+ 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) {
2990
2991
  return props.disabled ? "default" : "pointer";
2991
2992
  }, function (props) {
2992
2993
  return props.checked ? "38px" : "36px";
@@ -3187,7 +3188,7 @@ var Dropdown$1 = function Dropdown(_ref) {
3187
3188
  })));
3188
3189
  };
3189
3190
 
3190
- var _templateObject$9, _templateObject2$4, _templateObject3$3;
3191
+ var _templateObject$9, _templateObject2$4;
3191
3192
  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) {
3192
3193
  return props.theme.colors.ibisRed;
3193
3194
  }, function (props) {
@@ -3197,8 +3198,7 @@ var Slider$1 = styled.input(_templateObject$9 || (_templateObject$9 = _taggedTem
3197
3198
  }, function (props) {
3198
3199
  return props.theme.colors.waxwing;
3199
3200
  });
3200
- 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"])));
3201
- 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"])));
3201
+ 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"])));
3202
3202
 
3203
3203
  var ImageUploadModal = function ImageUploadModal(_ref) {
3204
3204
  var _ref6;
package/dist/index.umd.js CHANGED
@@ -70,7 +70,7 @@
70
70
  var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
71
71
  var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
72
72
 
73
- var _templateObject$h, _templateObject2$a, _templateObject3$9, _templateObject4$7;
73
+ var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
74
74
  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) {
75
75
  return props.url;
76
76
  });
@@ -81,7 +81,7 @@
81
81
  }, function (props) {
82
82
  return props.theme.colors.white;
83
83
  });
84
- 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) {
84
+ 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) {
85
85
  return props.theme.colors.grey6Override;
86
86
  }, function (props) {
87
87
  return props.theme.colors.grey6Override;
@@ -1293,7 +1293,8 @@
1293
1293
  isLocked = _ref.isLocked,
1294
1294
  isOwner = _ref.isOwner;
1295
1295
  _ref.props;
1296
- var handleClickLock = _ref.handleClickLock;
1296
+ var handleClickLock = _ref.handleClickLock,
1297
+ backgroundColor = _ref.backgroundColor;
1297
1298
  var theme = React.useContext(styled.ThemeContext);
1298
1299
 
1299
1300
  var _useState = React.useState(false),
@@ -1414,7 +1415,7 @@
1414
1415
  overflow: "hidden",
1415
1416
  // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
1416
1417
  // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
1417
- backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1418
+ backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1418
1419
  transition: "0.3s",
1419
1420
  position: "relative",
1420
1421
  cursor: "pointer",
@@ -1508,12 +1509,12 @@
1508
1509
  handleClickTitle: PropTypes__default['default'].func.isRequired
1509
1510
  };
1510
1511
 
1511
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1512
+ var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
1512
1513
  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) {
1513
1514
  return props.url;
1514
1515
  });
1515
1516
  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"])));
1516
- 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) {
1517
+ 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) {
1517
1518
  return "".concat(props.theme.colors.notBlack, "8a");
1518
1519
  }, function (props) {
1519
1520
  return props.theme.colors.seafoam;
@@ -1939,12 +1940,12 @@
1939
1940
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1940
1941
  };
1941
1942
 
1942
- var _templateObject$d, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1943
+ var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
1943
1944
  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) {
1944
1945
  return props.url;
1945
1946
  });
1946
1947
  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"])));
1947
- 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) {
1948
+ 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) {
1948
1949
  return props.theme.colors.notBlack;
1949
1950
  }, function (props) {
1950
1951
  return props.theme.colors.notBlack;
@@ -2303,7 +2304,7 @@
2303
2304
  handleClickUnsave: PropTypes__default['default'].func.isRequired
2304
2305
  };
2305
2306
 
2306
- var _templateObject$c, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2307
+ var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
2307
2308
  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) {
2308
2309
  var sizeParams = _ref.sizeParams;
2309
2310
  return (sizeParams.height += 2) + "px";
@@ -2317,7 +2318,7 @@
2317
2318
  return props.owned ? "102%" : "100%";
2318
2319
  });
2319
2320
  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"])));
2320
- 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) {
2321
+ 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) {
2321
2322
  return props.theme.colors.white;
2322
2323
  });
2323
2324
  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) {
@@ -2945,7 +2946,7 @@
2945
2946
  }
2946
2947
  };
2947
2948
 
2948
- var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
2949
+ var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
2949
2950
 
2950
2951
  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; }
2951
2952
 
@@ -2960,7 +2961,7 @@
2960
2961
  };
2961
2962
 
2962
2963
  var motion3 = function motion3(props) {
2963
- 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"])));
2964
+ 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"])));
2964
2965
  };
2965
2966
 
2966
2967
  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 +3001,14 @@
3000
3001
  }
3001
3002
  };
3002
3003
 
3003
- var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3004
+ var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3004
3005
  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) {
3005
3006
  return props.theme.colors.grey5;
3006
3007
  });
3007
3008
  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) {
3008
3009
  return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
3009
3010
  }, Slider$2, Slider$2);
3010
- 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) {
3011
+ 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) {
3011
3012
  return props.disabled ? "default" : "pointer";
3012
3013
  }, function (props) {
3013
3014
  return props.checked ? "38px" : "36px";
@@ -3208,7 +3209,7 @@
3208
3209
  })));
3209
3210
  };
3210
3211
 
3211
- var _templateObject$9, _templateObject2$4, _templateObject3$3;
3212
+ var _templateObject$9, _templateObject2$4;
3212
3213
  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) {
3213
3214
  return props.theme.colors.ibisRed;
3214
3215
  }, function (props) {
@@ -3218,8 +3219,7 @@
3218
3219
  }, function (props) {
3219
3220
  return props.theme.colors.waxwing;
3220
3221
  });
3221
- 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"])));
3222
- 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"])));
3222
+ 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"])));
3223
3223
 
3224
3224
  var ImageUploadModal = function ImageUploadModal(_ref) {
3225
3225
  var _ref6;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {