@blerp/design 1.1.1 → 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 +51 -30
- package/dist/index.esm.js +51 -30
- package/dist/index.umd.js +54 -34
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -6,6 +6,7 @@ var material = require('@mui/material');
|
|
|
6
6
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
7
7
|
var PropTypes = require('prop-types');
|
|
8
8
|
var React = require('react');
|
|
9
|
+
var reactColorExtractor = require('react-color-extractor');
|
|
9
10
|
var styled = require('styled-components');
|
|
10
11
|
var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
|
|
11
12
|
var iconsMaterial = require('@mui/icons-material');
|
|
@@ -117,7 +118,7 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
|
|
|
117
118
|
var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
|
|
118
119
|
var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
|
|
119
120
|
|
|
120
|
-
var _templateObject$h, _templateObject2$a, _templateObject3$
|
|
121
|
+
var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
|
|
121
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) {
|
|
122
123
|
return props.url;
|
|
123
124
|
});
|
|
@@ -128,7 +129,7 @@ var SaveContainer$2 = styled__default['default'].div(_templateObject2$a || (_tem
|
|
|
128
129
|
}, function (props) {
|
|
129
130
|
return props.theme.colors.white;
|
|
130
131
|
});
|
|
131
|
-
var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
132
133
|
return props.theme.colors.grey6Override;
|
|
133
134
|
}, function (props) {
|
|
134
135
|
return props.theme.colors.grey6Override;
|
|
@@ -1315,6 +1316,8 @@ var reactionIconUrls$1 = {
|
|
|
1315
1316
|
LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
|
|
1316
1317
|
};
|
|
1317
1318
|
var Blerp$1 = function Blerp(_ref) {
|
|
1319
|
+
var _bite$image, _bite$image$original;
|
|
1320
|
+
|
|
1318
1321
|
var bite = _ref.bite,
|
|
1319
1322
|
title = _ref.title,
|
|
1320
1323
|
variantSize = _ref.variantSize,
|
|
@@ -1338,7 +1341,8 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1338
1341
|
isLocked = _ref.isLocked,
|
|
1339
1342
|
isOwner = _ref.isOwner;
|
|
1340
1343
|
_ref.props;
|
|
1341
|
-
var handleClickLock = _ref.handleClickLock
|
|
1344
|
+
var handleClickLock = _ref.handleClickLock,
|
|
1345
|
+
backgroundColor = _ref.backgroundColor;
|
|
1342
1346
|
var theme = React.useContext(styled.ThemeContext);
|
|
1343
1347
|
|
|
1344
1348
|
var _useState = React.useState(false),
|
|
@@ -1350,8 +1354,8 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1350
1354
|
|
|
1351
1355
|
var _useState3 = React.useState(null),
|
|
1352
1356
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
1353
|
-
profileColors = _useState4[0]
|
|
1354
|
-
_useState4[1];
|
|
1357
|
+
profileColors = _useState4[0],
|
|
1358
|
+
setProfileColors = _useState4[1];
|
|
1355
1359
|
|
|
1356
1360
|
var _useState5 = React.useState(false),
|
|
1357
1361
|
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
@@ -1459,7 +1463,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1459
1463
|
overflow: "hidden",
|
|
1460
1464
|
// if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
|
|
1461
1465
|
// If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
|
|
1462
|
-
backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1466
|
+
backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1463
1467
|
transition: "0.3s",
|
|
1464
1468
|
position: "relative",
|
|
1465
1469
|
cursor: "pointer",
|
|
@@ -1479,6 +1483,11 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1479
1483
|
background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
|
|
1480
1484
|
backgroundColor: isPremium && !profileColors && "grey5.override"
|
|
1481
1485
|
}
|
|
1486
|
+
}), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
1487
|
+
src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
|
|
1488
|
+
getColors: function getColors(colors) {
|
|
1489
|
+
return setProfileColors(colors);
|
|
1490
|
+
}
|
|
1482
1491
|
}), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
|
|
1483
1492
|
bite: bite,
|
|
1484
1493
|
isOwner: isOwner,
|
|
@@ -1548,12 +1557,12 @@ Blerp$1.propTypes = {
|
|
|
1548
1557
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
1549
1558
|
};
|
|
1550
1559
|
|
|
1551
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$
|
|
1560
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
|
|
1552
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) {
|
|
1553
1562
|
return props.url;
|
|
1554
1563
|
});
|
|
1555
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"])));
|
|
1556
|
-
var SaveContainer$1 = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
1557
1566
|
return "".concat(props.theme.colors.notBlack, "8a");
|
|
1558
1567
|
}, function (props) {
|
|
1559
1568
|
return props.theme.colors.seafoam;
|
|
@@ -1979,12 +1988,12 @@ BlerpListViewPremium$1.propTypes = {
|
|
|
1979
1988
|
handleClickUnsave: PropTypes__default['default'].func.isRequired
|
|
1980
1989
|
};
|
|
1981
1990
|
|
|
1982
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$
|
|
1991
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
|
|
1983
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) {
|
|
1984
1993
|
return props.url;
|
|
1985
1994
|
});
|
|
1986
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"])));
|
|
1987
|
-
styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
1988
1997
|
return props.theme.colors.notBlack;
|
|
1989
1998
|
}, function (props) {
|
|
1990
1999
|
return props.theme.colors.notBlack;
|
|
@@ -2343,7 +2352,7 @@ BlerpListView$1.propTypes = {
|
|
|
2343
2352
|
handleClickUnsave: PropTypes__default['default'].func.isRequired
|
|
2344
2353
|
};
|
|
2345
2354
|
|
|
2346
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$
|
|
2355
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
2347
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) {
|
|
2348
2357
|
var sizeParams = _ref.sizeParams;
|
|
2349
2358
|
return (sizeParams.height += 2) + "px";
|
|
@@ -2357,7 +2366,7 @@ var MasterContainer = styled__default['default'].div(_templateObject$c || (_temp
|
|
|
2357
2366
|
return props.owned ? "102%" : "100%";
|
|
2358
2367
|
});
|
|
2359
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"])));
|
|
2360
|
-
var TopBox = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
2361
2370
|
return props.theme.colors.white;
|
|
2362
2371
|
});
|
|
2363
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) {
|
|
@@ -2985,7 +2994,7 @@ var darkPalette = {
|
|
|
2985
2994
|
}
|
|
2986
2995
|
};
|
|
2987
2996
|
|
|
2988
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$
|
|
2997
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
|
|
2989
2998
|
|
|
2990
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; }
|
|
2991
3000
|
|
|
@@ -3000,7 +3009,7 @@ var motion2 = function motion2(props) {
|
|
|
3000
3009
|
};
|
|
3001
3010
|
|
|
3002
3011
|
var motion3 = function motion3(props) {
|
|
3003
|
-
return styled.keyframes(_templateObject3$
|
|
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"])));
|
|
3004
3013
|
};
|
|
3005
3014
|
|
|
3006
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) {
|
|
@@ -3040,14 +3049,14 @@ EllipsisLoader.defaultProps = {
|
|
|
3040
3049
|
}
|
|
3041
3050
|
};
|
|
3042
3051
|
|
|
3043
|
-
var _templateObject$a, _templateObject2$5, _templateObject3$
|
|
3052
|
+
var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
3044
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) {
|
|
3045
3054
|
return props.theme.colors.grey5;
|
|
3046
3055
|
});
|
|
3047
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) {
|
|
3048
3057
|
return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
|
|
3049
3058
|
}, Slider$2, Slider$2);
|
|
3050
|
-
var Switch$1 = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
3051
3060
|
return props.disabled ? "default" : "pointer";
|
|
3052
3061
|
}, function (props) {
|
|
3053
3062
|
return props.checked ? "38px" : "36px";
|
|
@@ -3248,7 +3257,7 @@ var Dropdown$1 = function Dropdown(_ref) {
|
|
|
3248
3257
|
})));
|
|
3249
3258
|
};
|
|
3250
3259
|
|
|
3251
|
-
var _templateObject$9, _templateObject2$4
|
|
3260
|
+
var _templateObject$9, _templateObject2$4;
|
|
3252
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) {
|
|
3253
3262
|
return props.theme.colors.ibisRed;
|
|
3254
3263
|
}, function (props) {
|
|
@@ -3258,8 +3267,7 @@ var Slider$1 = styled__default['default'].input(_templateObject$9 || (_templateO
|
|
|
3258
3267
|
}, function (props) {
|
|
3259
3268
|
return props.theme.colors.waxwing;
|
|
3260
3269
|
});
|
|
3261
|
-
styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://cdn.blerp.com/blerp_products/
|
|
3262
|
-
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"])));
|
|
3263
3271
|
|
|
3264
3272
|
var ImageUploadModal = function ImageUploadModal(_ref) {
|
|
3265
3273
|
var _ref6;
|
|
@@ -7428,7 +7436,7 @@ var LockedScrimBackground = styled__default['default'].div(_templateObject6 || (
|
|
|
7428
7436
|
return props.collectionHovered ? "0.5" : "0";
|
|
7429
7437
|
});
|
|
7430
7438
|
var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
7431
|
-
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$
|
|
7439
|
+
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
|
|
7432
7440
|
|
|
7433
7441
|
var collection = _ref.collection,
|
|
7434
7442
|
variantSize = _ref.variantSize,
|
|
@@ -7455,8 +7463,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7455
7463
|
|
|
7456
7464
|
var _useState = React.useState(null),
|
|
7457
7465
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
7458
|
-
cardColors = _useState2[0]
|
|
7459
|
-
_useState2[1];
|
|
7466
|
+
cardColors = _useState2[0],
|
|
7467
|
+
setCardColors = _useState2[1];
|
|
7460
7468
|
|
|
7461
7469
|
var _useState3 = React.useState(false),
|
|
7462
7470
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
@@ -7498,7 +7506,15 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7498
7506
|
width: fluid ? "80%" : sizeParams.width,
|
|
7499
7507
|
height: fluid ? "80%" : sizeParams.height
|
|
7500
7508
|
}
|
|
7501
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
7509
|
+
}, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
7510
|
+
style: {
|
|
7511
|
+
zIndex: "3"
|
|
7512
|
+
},
|
|
7513
|
+
src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
|
|
7514
|
+
getColors: function getColors(colors) {
|
|
7515
|
+
return setCardColors(colors);
|
|
7516
|
+
}
|
|
7517
|
+
}), /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
7502
7518
|
onClick: function onClick(e) {
|
|
7503
7519
|
e.stopPropagation();
|
|
7504
7520
|
if (handleClickBackground) handleClickBackground();
|
|
@@ -7571,7 +7587,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7571
7587
|
}
|
|
7572
7588
|
}), /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
7573
7589
|
sx: {
|
|
7574
|
-
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7590
|
+
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
|
|
7575
7591
|
backgroundSize: "cover",
|
|
7576
7592
|
backgroundPosition: "center",
|
|
7577
7593
|
backgroundRepeat: "no-repeat",
|
|
@@ -7891,7 +7907,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7891
7907
|
// What to display when variantSize === "small":
|
|
7892
7908
|
React__default['default'].createElement(Box, {
|
|
7893
7909
|
sx: {
|
|
7894
|
-
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7910
|
+
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
|
|
7895
7911
|
backgroundSize: "cover",
|
|
7896
7912
|
backgroundPosition: "center",
|
|
7897
7913
|
backgroundRepeat: "no-repeat",
|
|
@@ -8290,7 +8306,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
|
|
|
8290
8306
|
};
|
|
8291
8307
|
|
|
8292
8308
|
var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
8293
|
-
var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$
|
|
8309
|
+
var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
|
|
8294
8310
|
|
|
8295
8311
|
var followUser = _ref.followUser,
|
|
8296
8312
|
isOwner = _ref.isOwner,
|
|
@@ -8300,8 +8316,8 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8300
8316
|
|
|
8301
8317
|
var _useState = React.useState(null),
|
|
8302
8318
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
8303
|
-
profileColors = _useState2[0]
|
|
8304
|
-
_useState2[1];
|
|
8319
|
+
profileColors = _useState2[0],
|
|
8320
|
+
setProfileColors = _useState2[1];
|
|
8305
8321
|
|
|
8306
8322
|
var size = useWindowSize();
|
|
8307
8323
|
|
|
@@ -8398,7 +8414,12 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8398
8414
|
});
|
|
8399
8415
|
};
|
|
8400
8416
|
|
|
8401
|
-
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(
|
|
8417
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
8418
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
|
|
8419
|
+
getColors: function getColors(colors) {
|
|
8420
|
+
return setProfileColors(colors);
|
|
8421
|
+
}
|
|
8422
|
+
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
8402
8423
|
width: "100%",
|
|
8403
8424
|
sx: {
|
|
8404
8425
|
height: "250px",
|
|
@@ -8488,7 +8509,7 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8488
8509
|
margin: "0 20px"
|
|
8489
8510
|
},
|
|
8490
8511
|
alt: "profile img",
|
|
8491
|
-
src: userData === null || userData === void 0 ? void 0 : (_userData$
|
|
8512
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
|
|
8492
8513
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
8493
8514
|
marginLeft: "20px"
|
|
8494
8515
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|
package/dist/index.esm.js
CHANGED
|
@@ -3,6 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import React__default, { useState, useEffect, useContext, useRef, createRef, cloneElement } from 'react';
|
|
6
|
+
import { ColorExtractor } from 'react-color-extractor';
|
|
6
7
|
import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
|
|
7
8
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
8
9
|
import { PauseCircleOutlineRounded, LockRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
|
|
@@ -48,7 +49,7 @@ import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
|
|
|
48
49
|
import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
|
|
49
50
|
import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
|
|
50
51
|
|
|
51
|
-
var _templateObject$h, _templateObject2$a, _templateObject3$
|
|
52
|
+
var _templateObject$h, _templateObject2$a, _templateObject3$8, _templateObject4$7;
|
|
52
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) {
|
|
53
54
|
return props.url;
|
|
54
55
|
});
|
|
@@ -59,7 +60,7 @@ var SaveContainer$2 = styled.div(_templateObject2$a || (_templateObject2$a = _ta
|
|
|
59
60
|
}, function (props) {
|
|
60
61
|
return props.theme.colors.white;
|
|
61
62
|
});
|
|
62
|
-
var BlerpImageScrim$2 = styled.div(_templateObject3$
|
|
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) {
|
|
63
64
|
return props.theme.colors.grey6Override;
|
|
64
65
|
}, function (props) {
|
|
65
66
|
return props.theme.colors.grey6Override;
|
|
@@ -1246,6 +1247,8 @@ var reactionIconUrls$1 = {
|
|
|
1246
1247
|
LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
|
|
1247
1248
|
};
|
|
1248
1249
|
var Blerp$1 = function Blerp(_ref) {
|
|
1250
|
+
var _bite$image, _bite$image$original;
|
|
1251
|
+
|
|
1249
1252
|
var bite = _ref.bite,
|
|
1250
1253
|
title = _ref.title,
|
|
1251
1254
|
variantSize = _ref.variantSize,
|
|
@@ -1269,7 +1272,8 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1269
1272
|
isLocked = _ref.isLocked,
|
|
1270
1273
|
isOwner = _ref.isOwner;
|
|
1271
1274
|
_ref.props;
|
|
1272
|
-
var handleClickLock = _ref.handleClickLock
|
|
1275
|
+
var handleClickLock = _ref.handleClickLock,
|
|
1276
|
+
backgroundColor = _ref.backgroundColor;
|
|
1273
1277
|
var theme = useContext(ThemeContext);
|
|
1274
1278
|
|
|
1275
1279
|
var _useState = useState(false),
|
|
@@ -1281,8 +1285,8 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1281
1285
|
|
|
1282
1286
|
var _useState3 = useState(null),
|
|
1283
1287
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
1284
|
-
profileColors = _useState4[0]
|
|
1285
|
-
_useState4[1];
|
|
1288
|
+
profileColors = _useState4[0],
|
|
1289
|
+
setProfileColors = _useState4[1];
|
|
1286
1290
|
|
|
1287
1291
|
var _useState5 = useState(false),
|
|
1288
1292
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
@@ -1390,7 +1394,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1390
1394
|
overflow: "hidden",
|
|
1391
1395
|
// if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
|
|
1392
1396
|
// If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
|
|
1393
|
-
backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1397
|
+
backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1394
1398
|
transition: "0.3s",
|
|
1395
1399
|
position: "relative",
|
|
1396
1400
|
cursor: "pointer",
|
|
@@ -1410,6 +1414,11 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
1410
1414
|
background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
|
|
1411
1415
|
backgroundColor: isPremium && !profileColors && "grey5.override"
|
|
1412
1416
|
}
|
|
1417
|
+
}), /*#__PURE__*/React__default.createElement(ColorExtractor, {
|
|
1418
|
+
src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
|
|
1419
|
+
getColors: function getColors(colors) {
|
|
1420
|
+
return setProfileColors(colors);
|
|
1421
|
+
}
|
|
1413
1422
|
}), /*#__PURE__*/React__default.createElement(BlerpTopRow, {
|
|
1414
1423
|
bite: bite,
|
|
1415
1424
|
isOwner: isOwner,
|
|
@@ -1479,12 +1488,12 @@ Blerp$1.propTypes = {
|
|
|
1479
1488
|
handleClickTitle: PropTypes.func.isRequired
|
|
1480
1489
|
};
|
|
1481
1490
|
|
|
1482
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$
|
|
1491
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
|
|
1483
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) {
|
|
1484
1493
|
return props.url;
|
|
1485
1494
|
});
|
|
1486
1495
|
keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
1487
|
-
var SaveContainer$1 = styled.div(_templateObject3$
|
|
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) {
|
|
1488
1497
|
return "".concat(props.theme.colors.notBlack, "8a");
|
|
1489
1498
|
}, function (props) {
|
|
1490
1499
|
return props.theme.colors.seafoam;
|
|
@@ -1910,12 +1919,12 @@ BlerpListViewPremium$1.propTypes = {
|
|
|
1910
1919
|
handleClickUnsave: PropTypes.func.isRequired
|
|
1911
1920
|
};
|
|
1912
1921
|
|
|
1913
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$
|
|
1922
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
|
|
1914
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) {
|
|
1915
1924
|
return props.url;
|
|
1916
1925
|
});
|
|
1917
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"])));
|
|
1918
|
-
styled.div(_templateObject3$
|
|
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) {
|
|
1919
1928
|
return props.theme.colors.notBlack;
|
|
1920
1929
|
}, function (props) {
|
|
1921
1930
|
return props.theme.colors.notBlack;
|
|
@@ -2274,7 +2283,7 @@ BlerpListView$1.propTypes = {
|
|
|
2274
2283
|
handleClickUnsave: PropTypes.func.isRequired
|
|
2275
2284
|
};
|
|
2276
2285
|
|
|
2277
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$
|
|
2286
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
2278
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) {
|
|
2279
2288
|
var sizeParams = _ref.sizeParams;
|
|
2280
2289
|
return (sizeParams.height += 2) + "px";
|
|
@@ -2288,7 +2297,7 @@ var MasterContainer = styled.div(_templateObject$c || (_templateObject$c = _tagg
|
|
|
2288
2297
|
return props.owned ? "102%" : "100%";
|
|
2289
2298
|
});
|
|
2290
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"])));
|
|
2291
|
-
var TopBox = styled.div(_templateObject3$
|
|
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) {
|
|
2292
2301
|
return props.theme.colors.white;
|
|
2293
2302
|
});
|
|
2294
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) {
|
|
@@ -2916,7 +2925,7 @@ var darkPalette = {
|
|
|
2916
2925
|
}
|
|
2917
2926
|
};
|
|
2918
2927
|
|
|
2919
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$
|
|
2928
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
|
|
2920
2929
|
|
|
2921
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; }
|
|
2922
2931
|
|
|
@@ -2931,7 +2940,7 @@ var motion2 = function motion2(props) {
|
|
|
2931
2940
|
};
|
|
2932
2941
|
|
|
2933
2942
|
var motion3 = function motion3(props) {
|
|
2934
|
-
return keyframes(_templateObject3$
|
|
2943
|
+
return keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
|
|
2935
2944
|
};
|
|
2936
2945
|
|
|
2937
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) {
|
|
@@ -2971,14 +2980,14 @@ EllipsisLoader.defaultProps = {
|
|
|
2971
2980
|
}
|
|
2972
2981
|
};
|
|
2973
2982
|
|
|
2974
|
-
var _templateObject$a, _templateObject2$5, _templateObject3$
|
|
2983
|
+
var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
2975
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) {
|
|
2976
2985
|
return props.theme.colors.grey5;
|
|
2977
2986
|
});
|
|
2978
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) {
|
|
2979
2988
|
return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
|
|
2980
2989
|
}, Slider$2, Slider$2);
|
|
2981
|
-
var Switch$1 = styled.div(_templateObject3$
|
|
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) {
|
|
2982
2991
|
return props.disabled ? "default" : "pointer";
|
|
2983
2992
|
}, function (props) {
|
|
2984
2993
|
return props.checked ? "38px" : "36px";
|
|
@@ -3179,7 +3188,7 @@ var Dropdown$1 = function Dropdown(_ref) {
|
|
|
3179
3188
|
})));
|
|
3180
3189
|
};
|
|
3181
3190
|
|
|
3182
|
-
var _templateObject$9, _templateObject2$4
|
|
3191
|
+
var _templateObject$9, _templateObject2$4;
|
|
3183
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) {
|
|
3184
3193
|
return props.theme.colors.ibisRed;
|
|
3185
3194
|
}, function (props) {
|
|
@@ -3189,8 +3198,7 @@ var Slider$1 = styled.input(_templateObject$9 || (_templateObject$9 = _taggedTem
|
|
|
3189
3198
|
}, function (props) {
|
|
3190
3199
|
return props.theme.colors.waxwing;
|
|
3191
3200
|
});
|
|
3192
|
-
styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n background-image: url(\"https://cdn.blerp.com/blerp_products/
|
|
3193
|
-
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"])));
|
|
3194
3202
|
|
|
3195
3203
|
var ImageUploadModal = function ImageUploadModal(_ref) {
|
|
3196
3204
|
var _ref6;
|
|
@@ -7359,7 +7367,7 @@ var LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _
|
|
|
7359
7367
|
return props.collectionHovered ? "0.5" : "0";
|
|
7360
7368
|
});
|
|
7361
7369
|
var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
7362
|
-
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$
|
|
7370
|
+
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
|
|
7363
7371
|
|
|
7364
7372
|
var collection = _ref.collection,
|
|
7365
7373
|
variantSize = _ref.variantSize,
|
|
@@ -7386,8 +7394,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7386
7394
|
|
|
7387
7395
|
var _useState = useState(null),
|
|
7388
7396
|
_useState2 = _slicedToArray(_useState, 2),
|
|
7389
|
-
cardColors = _useState2[0]
|
|
7390
|
-
_useState2[1];
|
|
7397
|
+
cardColors = _useState2[0],
|
|
7398
|
+
setCardColors = _useState2[1];
|
|
7391
7399
|
|
|
7392
7400
|
var _useState3 = useState(false),
|
|
7393
7401
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
@@ -7429,7 +7437,15 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7429
7437
|
width: fluid ? "80%" : sizeParams.width,
|
|
7430
7438
|
height: fluid ? "80%" : sizeParams.height
|
|
7431
7439
|
}
|
|
7432
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
7440
|
+
}, /*#__PURE__*/React__default.createElement(ColorExtractor, {
|
|
7441
|
+
style: {
|
|
7442
|
+
zIndex: "3"
|
|
7443
|
+
},
|
|
7444
|
+
src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
|
|
7445
|
+
getColors: function getColors(colors) {
|
|
7446
|
+
return setCardColors(colors);
|
|
7447
|
+
}
|
|
7448
|
+
}), /*#__PURE__*/React__default.createElement(Box, {
|
|
7433
7449
|
onClick: function onClick(e) {
|
|
7434
7450
|
e.stopPropagation();
|
|
7435
7451
|
if (handleClickBackground) handleClickBackground();
|
|
@@ -7502,7 +7518,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7502
7518
|
}
|
|
7503
7519
|
}), /*#__PURE__*/React__default.createElement(Box, {
|
|
7504
7520
|
sx: {
|
|
7505
|
-
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7521
|
+
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
|
|
7506
7522
|
backgroundSize: "cover",
|
|
7507
7523
|
backgroundPosition: "center",
|
|
7508
7524
|
backgroundRepeat: "no-repeat",
|
|
@@ -7822,7 +7838,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
|
7822
7838
|
// What to display when variantSize === "small":
|
|
7823
7839
|
React__default.createElement(Box, {
|
|
7824
7840
|
sx: {
|
|
7825
|
-
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7841
|
+
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
|
|
7826
7842
|
backgroundSize: "cover",
|
|
7827
7843
|
backgroundPosition: "center",
|
|
7828
7844
|
backgroundRepeat: "no-repeat",
|
|
@@ -8221,7 +8237,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
|
|
|
8221
8237
|
};
|
|
8222
8238
|
|
|
8223
8239
|
var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
8224
|
-
var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$
|
|
8240
|
+
var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
|
|
8225
8241
|
|
|
8226
8242
|
var followUser = _ref.followUser,
|
|
8227
8243
|
isOwner = _ref.isOwner,
|
|
@@ -8231,8 +8247,8 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8231
8247
|
|
|
8232
8248
|
var _useState = useState(null),
|
|
8233
8249
|
_useState2 = _slicedToArray(_useState, 2),
|
|
8234
|
-
profileColors = _useState2[0]
|
|
8235
|
-
_useState2[1];
|
|
8250
|
+
profileColors = _useState2[0],
|
|
8251
|
+
setProfileColors = _useState2[1];
|
|
8236
8252
|
|
|
8237
8253
|
var size = useWindowSize();
|
|
8238
8254
|
|
|
@@ -8329,7 +8345,12 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8329
8345
|
});
|
|
8330
8346
|
};
|
|
8331
8347
|
|
|
8332
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(
|
|
8348
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorExtractor, {
|
|
8349
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
|
|
8350
|
+
getColors: function getColors(colors) {
|
|
8351
|
+
return setProfileColors(colors);
|
|
8352
|
+
}
|
|
8353
|
+
}), /*#__PURE__*/React__default.createElement(Stack, {
|
|
8333
8354
|
width: "100%",
|
|
8334
8355
|
sx: {
|
|
8335
8356
|
height: "250px",
|
|
@@ -8419,7 +8440,7 @@ var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
|
8419
8440
|
margin: "0 20px"
|
|
8420
8441
|
},
|
|
8421
8442
|
alt: "profile img",
|
|
8422
|
-
src: userData === null || userData === void 0 ? void 0 : (_userData$
|
|
8443
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
|
|
8423
8444
|
}), /*#__PURE__*/React__default.createElement(Stack, {
|
|
8424
8445
|
marginLeft: "20px"
|
|
8425
8446
|
}, /*#__PURE__*/React__default.createElement(Stack, {
|
package/dist/index.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
|
|
5
|
-
}(this, (function (exports, material, _slicedToArray, PropTypes, React, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
|
|
2
|
+
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')) :
|
|
3
|
+
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) :
|
|
4
|
+
(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));
|
|
5
|
+
}(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';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -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$
|
|
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$
|
|
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;
|
|
@@ -1268,6 +1268,8 @@
|
|
|
1268
1268
|
LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
|
|
1269
1269
|
};
|
|
1270
1270
|
var Blerp$1 = function Blerp(_ref) {
|
|
1271
|
+
var _bite$image, _bite$image$original;
|
|
1272
|
+
|
|
1271
1273
|
var bite = _ref.bite,
|
|
1272
1274
|
title = _ref.title,
|
|
1273
1275
|
variantSize = _ref.variantSize,
|
|
@@ -1291,7 +1293,8 @@
|
|
|
1291
1293
|
isLocked = _ref.isLocked,
|
|
1292
1294
|
isOwner = _ref.isOwner;
|
|
1293
1295
|
_ref.props;
|
|
1294
|
-
var handleClickLock = _ref.handleClickLock
|
|
1296
|
+
var handleClickLock = _ref.handleClickLock,
|
|
1297
|
+
backgroundColor = _ref.backgroundColor;
|
|
1295
1298
|
var theme = React.useContext(styled.ThemeContext);
|
|
1296
1299
|
|
|
1297
1300
|
var _useState = React.useState(false),
|
|
@@ -1303,8 +1306,8 @@
|
|
|
1303
1306
|
|
|
1304
1307
|
var _useState3 = React.useState(null),
|
|
1305
1308
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
1306
|
-
profileColors = _useState4[0]
|
|
1307
|
-
_useState4[1];
|
|
1309
|
+
profileColors = _useState4[0],
|
|
1310
|
+
setProfileColors = _useState4[1];
|
|
1308
1311
|
|
|
1309
1312
|
var _useState5 = React.useState(false),
|
|
1310
1313
|
_useState6 = _slicedToArray__default['default'](_useState5, 2),
|
|
@@ -1412,7 +1415,7 @@
|
|
|
1412
1415
|
overflow: "hidden",
|
|
1413
1416
|
// if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
|
|
1414
1417
|
// If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
|
|
1415
|
-
backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1418
|
+
backgroundColor: backgroundColor ? backgroundColor : isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
|
|
1416
1419
|
transition: "0.3s",
|
|
1417
1420
|
position: "relative",
|
|
1418
1421
|
cursor: "pointer",
|
|
@@ -1432,6 +1435,11 @@
|
|
|
1432
1435
|
background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
|
|
1433
1436
|
backgroundColor: isPremium && !profileColors && "grey5.override"
|
|
1434
1437
|
}
|
|
1438
|
+
}), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
1439
|
+
src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
|
|
1440
|
+
getColors: function getColors(colors) {
|
|
1441
|
+
return setProfileColors(colors);
|
|
1442
|
+
}
|
|
1435
1443
|
}), /*#__PURE__*/React__default['default'].createElement(BlerpTopRow, {
|
|
1436
1444
|
bite: bite,
|
|
1437
1445
|
isOwner: isOwner,
|
|
@@ -1501,12 +1509,12 @@
|
|
|
1501
1509
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
1502
1510
|
};
|
|
1503
1511
|
|
|
1504
|
-
var _templateObject$e, _templateObject2$9, _templateObject3$
|
|
1512
|
+
var _templateObject$e, _templateObject2$9, _templateObject3$7, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$2;
|
|
1505
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) {
|
|
1506
1514
|
return props.url;
|
|
1507
1515
|
});
|
|
1508
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"])));
|
|
1509
|
-
var SaveContainer$1 = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
1510
1518
|
return "".concat(props.theme.colors.notBlack, "8a");
|
|
1511
1519
|
}, function (props) {
|
|
1512
1520
|
return props.theme.colors.seafoam;
|
|
@@ -1932,12 +1940,12 @@
|
|
|
1932
1940
|
handleClickUnsave: PropTypes__default['default'].func.isRequired
|
|
1933
1941
|
};
|
|
1934
1942
|
|
|
1935
|
-
var _templateObject$d, _templateObject2$8, _templateObject3$
|
|
1943
|
+
var _templateObject$d, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
|
|
1936
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) {
|
|
1937
1945
|
return props.url;
|
|
1938
1946
|
});
|
|
1939
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"])));
|
|
1940
|
-
styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
1941
1949
|
return props.theme.colors.notBlack;
|
|
1942
1950
|
}, function (props) {
|
|
1943
1951
|
return props.theme.colors.notBlack;
|
|
@@ -2296,7 +2304,7 @@
|
|
|
2296
2304
|
handleClickUnsave: PropTypes__default['default'].func.isRequired
|
|
2297
2305
|
};
|
|
2298
2306
|
|
|
2299
|
-
var _templateObject$c, _templateObject2$7, _templateObject3$
|
|
2307
|
+
var _templateObject$c, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
2300
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) {
|
|
2301
2309
|
var sizeParams = _ref.sizeParams;
|
|
2302
2310
|
return (sizeParams.height += 2) + "px";
|
|
@@ -2310,7 +2318,7 @@
|
|
|
2310
2318
|
return props.owned ? "102%" : "100%";
|
|
2311
2319
|
});
|
|
2312
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"])));
|
|
2313
|
-
var TopBox = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
2314
2322
|
return props.theme.colors.white;
|
|
2315
2323
|
});
|
|
2316
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) {
|
|
@@ -2938,7 +2946,7 @@
|
|
|
2938
2946
|
}
|
|
2939
2947
|
};
|
|
2940
2948
|
|
|
2941
|
-
var _templateObject$b, _templateObject2$6, _templateObject3$
|
|
2949
|
+
var _templateObject$b, _templateObject2$6, _templateObject3$4, _templateObject4$3;
|
|
2942
2950
|
|
|
2943
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; }
|
|
2944
2952
|
|
|
@@ -2953,7 +2961,7 @@
|
|
|
2953
2961
|
};
|
|
2954
2962
|
|
|
2955
2963
|
var motion3 = function motion3(props) {
|
|
2956
|
-
return styled.keyframes(_templateObject3$
|
|
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"])));
|
|
2957
2965
|
};
|
|
2958
2966
|
|
|
2959
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) {
|
|
@@ -2993,14 +3001,14 @@
|
|
|
2993
3001
|
}
|
|
2994
3002
|
};
|
|
2995
3003
|
|
|
2996
|
-
var _templateObject$a, _templateObject2$5, _templateObject3$
|
|
3004
|
+
var _templateObject$a, _templateObject2$5, _templateObject3$3, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
|
|
2997
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) {
|
|
2998
3006
|
return props.theme.colors.grey5;
|
|
2999
3007
|
});
|
|
3000
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) {
|
|
3001
3009
|
return props.disabled ? "#7b7b7b" : props.theme.colors.seafoam;
|
|
3002
3010
|
}, Slider$2, Slider$2);
|
|
3003
|
-
var Switch$1 = styled__default['default'].div(_templateObject3$
|
|
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) {
|
|
3004
3012
|
return props.disabled ? "default" : "pointer";
|
|
3005
3013
|
}, function (props) {
|
|
3006
3014
|
return props.checked ? "38px" : "36px";
|
|
@@ -3201,7 +3209,7 @@
|
|
|
3201
3209
|
})));
|
|
3202
3210
|
};
|
|
3203
3211
|
|
|
3204
|
-
var _templateObject$9, _templateObject2$4
|
|
3212
|
+
var _templateObject$9, _templateObject2$4;
|
|
3205
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) {
|
|
3206
3214
|
return props.theme.colors.ibisRed;
|
|
3207
3215
|
}, function (props) {
|
|
@@ -3211,8 +3219,7 @@
|
|
|
3211
3219
|
}, function (props) {
|
|
3212
3220
|
return props.theme.colors.waxwing;
|
|
3213
3221
|
});
|
|
3214
|
-
styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://cdn.blerp.com/blerp_products/
|
|
3215
|
-
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"])));
|
|
3216
3223
|
|
|
3217
3224
|
var ImageUploadModal = function ImageUploadModal(_ref) {
|
|
3218
3225
|
var _ref6;
|
|
@@ -7381,7 +7388,7 @@
|
|
|
7381
7388
|
return props.collectionHovered ? "0.5" : "0";
|
|
7382
7389
|
});
|
|
7383
7390
|
var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
|
|
7384
|
-
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$
|
|
7391
|
+
var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
|
|
7385
7392
|
|
|
7386
7393
|
var collection = _ref.collection,
|
|
7387
7394
|
variantSize = _ref.variantSize,
|
|
@@ -7408,8 +7415,8 @@
|
|
|
7408
7415
|
|
|
7409
7416
|
var _useState = React.useState(null),
|
|
7410
7417
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
7411
|
-
cardColors = _useState2[0]
|
|
7412
|
-
_useState2[1];
|
|
7418
|
+
cardColors = _useState2[0],
|
|
7419
|
+
setCardColors = _useState2[1];
|
|
7413
7420
|
|
|
7414
7421
|
var _useState3 = React.useState(false),
|
|
7415
7422
|
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
@@ -7451,7 +7458,15 @@
|
|
|
7451
7458
|
width: fluid ? "80%" : sizeParams.width,
|
|
7452
7459
|
height: fluid ? "80%" : sizeParams.height
|
|
7453
7460
|
}
|
|
7454
|
-
}, /*#__PURE__*/React__default['default'].createElement(
|
|
7461
|
+
}, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
7462
|
+
style: {
|
|
7463
|
+
zIndex: "3"
|
|
7464
|
+
},
|
|
7465
|
+
src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
|
|
7466
|
+
getColors: function getColors(colors) {
|
|
7467
|
+
return setCardColors(colors);
|
|
7468
|
+
}
|
|
7469
|
+
}), /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
7455
7470
|
onClick: function onClick(e) {
|
|
7456
7471
|
e.stopPropagation();
|
|
7457
7472
|
if (handleClickBackground) handleClickBackground();
|
|
@@ -7524,7 +7539,7 @@
|
|
|
7524
7539
|
}
|
|
7525
7540
|
}), /*#__PURE__*/React__default['default'].createElement(Box, {
|
|
7526
7541
|
sx: {
|
|
7527
|
-
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7542
|
+
backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
|
|
7528
7543
|
backgroundSize: "cover",
|
|
7529
7544
|
backgroundPosition: "center",
|
|
7530
7545
|
backgroundRepeat: "no-repeat",
|
|
@@ -7844,7 +7859,7 @@
|
|
|
7844
7859
|
// What to display when variantSize === "small":
|
|
7845
7860
|
React__default['default'].createElement(Box, {
|
|
7846
7861
|
sx: {
|
|
7847
|
-
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$
|
|
7862
|
+
backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
|
|
7848
7863
|
backgroundSize: "cover",
|
|
7849
7864
|
backgroundPosition: "center",
|
|
7850
7865
|
backgroundRepeat: "no-repeat",
|
|
@@ -8243,7 +8258,7 @@
|
|
|
8243
8258
|
};
|
|
8244
8259
|
|
|
8245
8260
|
var UserProfileHeader = function UserProfileHeader(_ref) {
|
|
8246
|
-
var _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$
|
|
8261
|
+
var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
|
|
8247
8262
|
|
|
8248
8263
|
var followUser = _ref.followUser,
|
|
8249
8264
|
isOwner = _ref.isOwner,
|
|
@@ -8253,8 +8268,8 @@
|
|
|
8253
8268
|
|
|
8254
8269
|
var _useState = React.useState(null),
|
|
8255
8270
|
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
8256
|
-
profileColors = _useState2[0]
|
|
8257
|
-
_useState2[1];
|
|
8271
|
+
profileColors = _useState2[0],
|
|
8272
|
+
setProfileColors = _useState2[1];
|
|
8258
8273
|
|
|
8259
8274
|
var size = useWindowSize();
|
|
8260
8275
|
|
|
@@ -8351,7 +8366,12 @@
|
|
|
8351
8366
|
});
|
|
8352
8367
|
};
|
|
8353
8368
|
|
|
8354
|
-
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(
|
|
8369
|
+
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
|
|
8370
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
|
|
8371
|
+
getColors: function getColors(colors) {
|
|
8372
|
+
return setProfileColors(colors);
|
|
8373
|
+
}
|
|
8374
|
+
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
8355
8375
|
width: "100%",
|
|
8356
8376
|
sx: {
|
|
8357
8377
|
height: "250px",
|
|
@@ -8441,7 +8461,7 @@
|
|
|
8441
8461
|
margin: "0 20px"
|
|
8442
8462
|
},
|
|
8443
8463
|
alt: "profile img",
|
|
8444
|
-
src: userData === null || userData === void 0 ? void 0 : (_userData$
|
|
8464
|
+
src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
|
|
8445
8465
|
}), /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
8446
8466
|
marginLeft: "20px"
|
|
8447
8467
|
}, /*#__PURE__*/React__default['default'].createElement(Stack, {
|