@blerp/design 0.1.16 → 0.1.17
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 +75 -20
- package/dist/index.esm.js +73 -21
- package/dist/index.umd.js +75 -20
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -487,7 +487,7 @@ var useWindowSize = function useWindowSize() {
|
|
|
487
487
|
return windowSize;
|
|
488
488
|
};
|
|
489
489
|
|
|
490
|
-
var _templateObject$
|
|
490
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2;
|
|
491
491
|
// _id: "5b237fbafca7167a35619410",
|
|
492
492
|
// title: "Crying",
|
|
493
493
|
// image: {
|
|
@@ -506,16 +506,16 @@ var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$
|
|
|
506
506
|
// },
|
|
507
507
|
// };
|
|
508
508
|
|
|
509
|
-
var BlerpImage$1 = styled__default['default'].div(_templateObject$
|
|
509
|
+
var BlerpImage$1 = styled__default['default'].div(_templateObject$7 || (_templateObject$7 = _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) {
|
|
510
510
|
return props.url;
|
|
511
511
|
});
|
|
512
|
-
var zoomIn$1 = styled.keyframes(_templateObject2$
|
|
513
|
-
var ReactionModal = styled__default['default'].div(_templateObject3$
|
|
512
|
+
var zoomIn$1 = styled.keyframes(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
513
|
+
var ReactionModal = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _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 z-index: 5;\n"])), function (props) {
|
|
514
514
|
return props.theme.colors.notBlackOverride;
|
|
515
515
|
}, function (props) {
|
|
516
516
|
return props.theme.colors.notBlackOverride;
|
|
517
517
|
}, zoomIn$1);
|
|
518
|
-
var SaveContainer$1 = styled__default['default'].div(_templateObject4$
|
|
518
|
+
var SaveContainer$1 = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\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"])), function (props) {
|
|
519
519
|
return props.theme.colors.whiteOverride;
|
|
520
520
|
});
|
|
521
521
|
var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _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) {
|
|
@@ -1009,7 +1009,7 @@ Blerp$1.propTypes = {
|
|
|
1009
1009
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
1010
1010
|
};
|
|
1011
1011
|
|
|
1012
|
-
var _templateObject$
|
|
1012
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
1013
1013
|
// _id: "5b237fbafca7167a35619410",
|
|
1014
1014
|
// title: "Crying",
|
|
1015
1015
|
// image: {
|
|
@@ -1028,16 +1028,16 @@ var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$
|
|
|
1028
1028
|
// },
|
|
1029
1029
|
// };
|
|
1030
1030
|
|
|
1031
|
-
var BlerpImage = styled__default['default'].div(_templateObject$
|
|
1031
|
+
var BlerpImage = styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
|
|
1032
1032
|
return props.url;
|
|
1033
1033
|
});
|
|
1034
|
-
var zoomIn = styled.keyframes(_templateObject2$
|
|
1035
|
-
styled__default['default'].div(_templateObject3$
|
|
1034
|
+
var zoomIn = styled.keyframes(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
1035
|
+
styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _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) {
|
|
1036
1036
|
return props.theme.colors.notBlack;
|
|
1037
1037
|
}, function (props) {
|
|
1038
1038
|
return props.theme.colors.notBlack;
|
|
1039
1039
|
}, zoomIn);
|
|
1040
|
-
var SaveContainer = styled__default['default'].div(_templateObject4$
|
|
1040
|
+
var SaveContainer = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\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"])), function (props) {
|
|
1041
1041
|
return props.theme.colors.white;
|
|
1042
1042
|
});
|
|
1043
1043
|
var BlerpImageScrim = styled__default['default'].div(_templateObject5$1 || (_templateObject5$1 = _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: 8px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
|
|
@@ -1560,25 +1560,25 @@ var darkPalette = {
|
|
|
1560
1560
|
}
|
|
1561
1561
|
};
|
|
1562
1562
|
|
|
1563
|
-
var _templateObject$
|
|
1563
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2;
|
|
1564
1564
|
|
|
1565
1565
|
function ownKeys$3(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; }
|
|
1566
1566
|
|
|
1567
1567
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1568
1568
|
|
|
1569
1569
|
var motion1 = function motion1(props) {
|
|
1570
|
-
return styled.keyframes(_templateObject$
|
|
1570
|
+
return styled.keyframes(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n"])));
|
|
1571
1571
|
};
|
|
1572
1572
|
|
|
1573
1573
|
var motion2 = function motion2(props) {
|
|
1574
|
-
return styled.keyframes(_templateObject2$
|
|
1574
|
+
return styled.keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(19px, 0);\n }\n"])));
|
|
1575
1575
|
};
|
|
1576
1576
|
|
|
1577
1577
|
var motion3 = function motion3(props) {
|
|
1578
|
-
return styled.keyframes(_templateObject3$
|
|
1578
|
+
return styled.keyframes(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
|
|
1579
1579
|
};
|
|
1580
1580
|
|
|
1581
|
-
var EllipsisSpinner = styled__default['default'].div(_templateObject4$
|
|
1581
|
+
var EllipsisSpinner = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _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) {
|
|
1582
1582
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
1583
1583
|
}, function (p) {
|
|
1584
1584
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
@@ -1615,19 +1615,19 @@ EllipsisLoader.defaultProps = {
|
|
|
1615
1615
|
}
|
|
1616
1616
|
};
|
|
1617
1617
|
|
|
1618
|
-
var _templateObject$
|
|
1619
|
-
var Slider$1 = styled__default['default'].div(_templateObject$
|
|
1618
|
+
var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
|
|
1619
|
+
var Slider$1 = styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1620
1620
|
return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
|
|
1621
1621
|
}, function (props) {
|
|
1622
1622
|
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
1623
1623
|
});
|
|
1624
|
-
var ToggleInput = styled__default['default'].input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1624
|
+
var ToggleInput = styled__default['default'].input(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1625
1625
|
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
1626
1626
|
}, Slider$1, function (props) {
|
|
1627
1627
|
return props.theme.colors.seafoam;
|
|
1628
1628
|
}, Slider$1, Slider$1);
|
|
1629
|
-
var Switch$1 = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1630
|
-
var BlackSlider = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1629
|
+
var Switch$1 = styled__default['default'].div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1630
|
+
var BlackSlider = styled__default['default'].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1631
1631
|
return props.theme.colors.notBlack;
|
|
1632
1632
|
});
|
|
1633
1633
|
var BlackToggleInput = styled__default['default'].input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: transparent;\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n /* -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px); */\n }\n"])), BlackSlider, BlackSlider, function (props) {
|
|
@@ -2047,6 +2047,55 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
|
|
|
2047
2047
|
}, children))));
|
|
2048
2048
|
};
|
|
2049
2049
|
|
|
2050
|
+
var _templateObject$3, _templateObject2$2, _templateObject3$1;
|
|
2051
|
+
var FeaturedBlerpSkeleton = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 234px;\n width: 220px;\n border: 2px solid ", ";\n border-radius: 8px;\n\n @media (max-width: 900px) {\n height: 190px;\n width: 180px;\n border: 2px solid ", ";\n border-radius: 8px;\n }\n\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2052
|
+
return props.theme.colors.grey2;
|
|
2053
|
+
}, function (props) {
|
|
2054
|
+
return props.theme.colors.grey2;
|
|
2055
|
+
});
|
|
2056
|
+
var FeaturedBlerpCircle = styled__default['default'].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n height: 135px;\n width: 135px;\n border-radius: 50%;\n margin-top: 30px;\n background: ", ";\n\n @media (max-width: 900px) {\n height: 100px;\n width: 100px;\n margin-top: 30px;\n }\n"])), function (props) {
|
|
2057
|
+
return props.theme.colors.grey2;
|
|
2058
|
+
});
|
|
2059
|
+
var FeaturedBlerpTitle = styled__default['default'].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral__default['default'](["\n width: 80%;\n height: 24px;\n background: ", ";\n margin-bottom: 20px;\n"])), function (props) {
|
|
2060
|
+
return props.theme.colors.grey2;
|
|
2061
|
+
});
|
|
2062
|
+
var BlerpSkeleton$1 = function BlerpSkeleton() {
|
|
2063
|
+
return /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpTitle, null));
|
|
2064
|
+
};
|
|
2065
|
+
|
|
2066
|
+
var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4;
|
|
2067
|
+
var NewBlerpsSkeleton = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n height: 44px;\n background: ", ";\n border-radius: 8px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2068
|
+
return props.theme.colors.grey4;
|
|
2069
|
+
});
|
|
2070
|
+
var LeftNewBlerpsBox = styled__default['default'].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n height: 38px;\n width: 38px;\n background-color: ", ";\n border-radius: 8px;\n margin-left: 4px;\n"])), function (props) {
|
|
2071
|
+
return props.theme.colors.white;
|
|
2072
|
+
});
|
|
2073
|
+
var RightNewBlerpsBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 80px;\n margin-right: 10px;\n"])));
|
|
2074
|
+
var NewBlerpsCircle = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n height: 34px;\n width: 34px;\n background-color: ", ";\n border-radius: 50%;\n"])), function (props) {
|
|
2075
|
+
return props.theme.colors.white;
|
|
2076
|
+
});
|
|
2077
|
+
var BlerpListViewSkeleton$1 = function BlerpListViewSkeleton() {
|
|
2078
|
+
return /*#__PURE__*/React__default['default'].createElement(NewBlerpsSkeleton, {
|
|
2079
|
+
md: 6,
|
|
2080
|
+
lg: 4
|
|
2081
|
+
}, /*#__PURE__*/React__default['default'].createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React__default['default'].createElement(RightNewBlerpsBox, null, /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null), /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null)));
|
|
2082
|
+
};
|
|
2083
|
+
|
|
2084
|
+
var _templateObject$1, _templateObject2;
|
|
2085
|
+
var FeaturedCollectionSkeleton = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n height: 200px;\n width: 200px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.7;\n }\n }\n"])));
|
|
2086
|
+
var FeaturedCollectionSquare = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n\n ", ";\n"])), function (props) {
|
|
2087
|
+
return props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n background: ".concat(props.theme.colors.grey6, "; \n transform: skewX(-5deg); \n left: 8px; \n height: 94%; \n bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n transform: skewX(-10deg); \n left: 15px; \n height: 87%; \n bottom: 0") : "background: ".concat(props.theme.colors.ibisRed);
|
|
2088
|
+
});
|
|
2089
|
+
var CollectionSkeleton$1 = function CollectionSkeleton() {
|
|
2090
|
+
return /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2091
|
+
depth: "1"
|
|
2092
|
+
}), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2093
|
+
depth: "2"
|
|
2094
|
+
}), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2095
|
+
depth: "3"
|
|
2096
|
+
}));
|
|
2097
|
+
};
|
|
2098
|
+
|
|
2050
2099
|
var _grey;
|
|
2051
2100
|
|
|
2052
2101
|
var icons = {
|
|
@@ -3262,6 +3311,9 @@ var MenuItem = core.MenuItem;
|
|
|
3262
3311
|
var NewCollectionModal = NewCollectionModal$1;
|
|
3263
3312
|
var CollectionCard = CollectionCard$1;
|
|
3264
3313
|
var BlerpListView = BlerpListView$1;
|
|
3314
|
+
var BlerpSkeleton = BlerpSkeleton$1;
|
|
3315
|
+
var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
|
|
3316
|
+
var CollectionSkeleton = CollectionSkeleton$1;
|
|
3265
3317
|
var InputAdornment = core.InputAdornment; // export const BlerpContextMenu = MBlerpContextMenu;
|
|
3266
3318
|
// export const ListItem = MListItem;
|
|
3267
3319
|
// // export const ListItemText = MListItemText;
|
|
@@ -3511,6 +3563,8 @@ exports.Blerp = Blerp;
|
|
|
3511
3563
|
exports.BlerpCardIcon = BlerpCardIcon;
|
|
3512
3564
|
exports.BlerpCoinsIcon = BlerpCoinsIcon;
|
|
3513
3565
|
exports.BlerpListView = BlerpListView;
|
|
3566
|
+
exports.BlerpListViewSkeleton = BlerpListViewSkeleton;
|
|
3567
|
+
exports.BlerpSkeleton = BlerpSkeleton;
|
|
3514
3568
|
exports.BlerpyIcon = BlerpyIcon;
|
|
3515
3569
|
exports.BookmarkAddRounded = BookmarkAddRounded;
|
|
3516
3570
|
exports.BottomNavigation = BottomNavigation;
|
|
@@ -3525,6 +3579,7 @@ exports.Chip = Chip;
|
|
|
3525
3579
|
exports.ClockIcon = ClockIcon;
|
|
3526
3580
|
exports.CogIcon = CogIcon;
|
|
3527
3581
|
exports.CollectionCard = CollectionCard;
|
|
3582
|
+
exports.CollectionSkeleton = CollectionSkeleton;
|
|
3528
3583
|
exports.Container = Container;
|
|
3529
3584
|
exports.CrownIcon = CrownIcon;
|
|
3530
3585
|
exports.Dialog = Dialog;
|
package/dist/index.esm.js
CHANGED
|
@@ -451,7 +451,7 @@ var useWindowSize = function useWindowSize() {
|
|
|
451
451
|
return windowSize;
|
|
452
452
|
};
|
|
453
453
|
|
|
454
|
-
var _templateObject$
|
|
454
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2;
|
|
455
455
|
// _id: "5b237fbafca7167a35619410",
|
|
456
456
|
// title: "Crying",
|
|
457
457
|
// image: {
|
|
@@ -470,16 +470,16 @@ var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$
|
|
|
470
470
|
// },
|
|
471
471
|
// };
|
|
472
472
|
|
|
473
|
-
var BlerpImage$1 = styled.div(_templateObject$
|
|
473
|
+
var BlerpImage$1 = styled.div(_templateObject$7 || (_templateObject$7 = _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) {
|
|
474
474
|
return props.url;
|
|
475
475
|
});
|
|
476
|
-
var zoomIn$1 = keyframes(_templateObject2$
|
|
477
|
-
var ReactionModal = styled.div(_templateObject3$
|
|
476
|
+
var zoomIn$1 = keyframes(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
477
|
+
var ReactionModal = styled.div(_templateObject3$5 || (_templateObject3$5 = _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 z-index: 5;\n"])), function (props) {
|
|
478
478
|
return props.theme.colors.notBlackOverride;
|
|
479
479
|
}, function (props) {
|
|
480
480
|
return props.theme.colors.notBlackOverride;
|
|
481
481
|
}, zoomIn$1);
|
|
482
|
-
var SaveContainer$1 = styled.div(_templateObject4$
|
|
482
|
+
var SaveContainer$1 = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\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"])), function (props) {
|
|
483
483
|
return props.theme.colors.whiteOverride;
|
|
484
484
|
});
|
|
485
485
|
var BlerpImageScrim$1 = styled.div(_templateObject5$2 || (_templateObject5$2 = _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) {
|
|
@@ -973,7 +973,7 @@ Blerp$1.propTypes = {
|
|
|
973
973
|
handleClickTitle: PropTypes.func.isRequired
|
|
974
974
|
};
|
|
975
975
|
|
|
976
|
-
var _templateObject$
|
|
976
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
977
977
|
// _id: "5b237fbafca7167a35619410",
|
|
978
978
|
// title: "Crying",
|
|
979
979
|
// image: {
|
|
@@ -992,16 +992,16 @@ var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$
|
|
|
992
992
|
// },
|
|
993
993
|
// };
|
|
994
994
|
|
|
995
|
-
var BlerpImage = styled.div(_templateObject$
|
|
995
|
+
var BlerpImage = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
|
|
996
996
|
return props.url;
|
|
997
997
|
});
|
|
998
|
-
var zoomIn = keyframes(_templateObject2$
|
|
999
|
-
styled.div(_templateObject3$
|
|
998
|
+
var zoomIn = keyframes(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
999
|
+
styled.div(_templateObject3$4 || (_templateObject3$4 = _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) {
|
|
1000
1000
|
return props.theme.colors.notBlack;
|
|
1001
1001
|
}, function (props) {
|
|
1002
1002
|
return props.theme.colors.notBlack;
|
|
1003
1003
|
}, zoomIn);
|
|
1004
|
-
var SaveContainer = styled.div(_templateObject4$
|
|
1004
|
+
var SaveContainer = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\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"])), function (props) {
|
|
1005
1005
|
return props.theme.colors.white;
|
|
1006
1006
|
});
|
|
1007
1007
|
var BlerpImageScrim = styled.div(_templateObject5$1 || (_templateObject5$1 = _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: 8px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
|
|
@@ -1524,25 +1524,25 @@ var darkPalette = {
|
|
|
1524
1524
|
}
|
|
1525
1525
|
};
|
|
1526
1526
|
|
|
1527
|
-
var _templateObject$
|
|
1527
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2;
|
|
1528
1528
|
|
|
1529
1529
|
function ownKeys$3(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; }
|
|
1530
1530
|
|
|
1531
1531
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1532
1532
|
|
|
1533
1533
|
var motion1 = function motion1(props) {
|
|
1534
|
-
return keyframes(_templateObject$
|
|
1534
|
+
return keyframes(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n"])));
|
|
1535
1535
|
};
|
|
1536
1536
|
|
|
1537
1537
|
var motion2 = function motion2(props) {
|
|
1538
|
-
return keyframes(_templateObject2$
|
|
1538
|
+
return keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(19px, 0);\n }\n"])));
|
|
1539
1539
|
};
|
|
1540
1540
|
|
|
1541
1541
|
var motion3 = function motion3(props) {
|
|
1542
|
-
return keyframes(_templateObject3$
|
|
1542
|
+
return keyframes(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
|
|
1543
1543
|
};
|
|
1544
1544
|
|
|
1545
|
-
var EllipsisSpinner = styled.div(_templateObject4$
|
|
1545
|
+
var EllipsisSpinner = styled.div(_templateObject4$2 || (_templateObject4$2 = _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) {
|
|
1546
1546
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
1547
1547
|
}, function (p) {
|
|
1548
1548
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
@@ -1579,19 +1579,19 @@ EllipsisLoader.defaultProps = {
|
|
|
1579
1579
|
}
|
|
1580
1580
|
};
|
|
1581
1581
|
|
|
1582
|
-
var _templateObject$
|
|
1583
|
-
var Slider$1 = styled.div(_templateObject$
|
|
1582
|
+
var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
|
|
1583
|
+
var Slider$1 = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1584
1584
|
return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
|
|
1585
1585
|
}, function (props) {
|
|
1586
1586
|
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
1587
1587
|
});
|
|
1588
|
-
var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1588
|
+
var ToggleInput = styled.input(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1589
1589
|
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
1590
1590
|
}, Slider$1, function (props) {
|
|
1591
1591
|
return props.theme.colors.seafoam;
|
|
1592
1592
|
}, Slider$1, Slider$1);
|
|
1593
|
-
var Switch$1 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1594
|
-
var BlackSlider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1593
|
+
var Switch$1 = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1594
|
+
var BlackSlider = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1595
1595
|
return props.theme.colors.notBlack;
|
|
1596
1596
|
});
|
|
1597
1597
|
var BlackToggleInput = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &:checked + ", " {\n background-color: transparent;\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n /* -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px); */\n }\n"])), BlackSlider, BlackSlider, function (props) {
|
|
@@ -2011,6 +2011,55 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
|
|
|
2011
2011
|
}, children))));
|
|
2012
2012
|
};
|
|
2013
2013
|
|
|
2014
|
+
var _templateObject$3, _templateObject2$2, _templateObject3$1;
|
|
2015
|
+
var FeaturedBlerpSkeleton = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 234px;\n width: 220px;\n border: 2px solid ", ";\n border-radius: 8px;\n\n @media (max-width: 900px) {\n height: 190px;\n width: 180px;\n border: 2px solid ", ";\n border-radius: 8px;\n }\n\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2016
|
+
return props.theme.colors.grey2;
|
|
2017
|
+
}, function (props) {
|
|
2018
|
+
return props.theme.colors.grey2;
|
|
2019
|
+
});
|
|
2020
|
+
var FeaturedBlerpCircle = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n height: 135px;\n width: 135px;\n border-radius: 50%;\n margin-top: 30px;\n background: ", ";\n\n @media (max-width: 900px) {\n height: 100px;\n width: 100px;\n margin-top: 30px;\n }\n"])), function (props) {
|
|
2021
|
+
return props.theme.colors.grey2;
|
|
2022
|
+
});
|
|
2023
|
+
var FeaturedBlerpTitle = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n width: 80%;\n height: 24px;\n background: ", ";\n margin-bottom: 20px;\n"])), function (props) {
|
|
2024
|
+
return props.theme.colors.grey2;
|
|
2025
|
+
});
|
|
2026
|
+
var BlerpSkeleton$1 = function BlerpSkeleton() {
|
|
2027
|
+
return /*#__PURE__*/React.createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React.createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React.createElement(FeaturedBlerpTitle, null));
|
|
2028
|
+
};
|
|
2029
|
+
|
|
2030
|
+
var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4;
|
|
2031
|
+
var NewBlerpsSkeleton = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n height: 44px;\n background: ", ";\n border-radius: 8px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2032
|
+
return props.theme.colors.grey4;
|
|
2033
|
+
});
|
|
2034
|
+
var LeftNewBlerpsBox = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n height: 38px;\n width: 38px;\n background-color: ", ";\n border-radius: 8px;\n margin-left: 4px;\n"])), function (props) {
|
|
2035
|
+
return props.theme.colors.white;
|
|
2036
|
+
});
|
|
2037
|
+
var RightNewBlerpsBox = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 80px;\n margin-right: 10px;\n"])));
|
|
2038
|
+
var NewBlerpsCircle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n height: 34px;\n width: 34px;\n background-color: ", ";\n border-radius: 50%;\n"])), function (props) {
|
|
2039
|
+
return props.theme.colors.white;
|
|
2040
|
+
});
|
|
2041
|
+
var BlerpListViewSkeleton$1 = function BlerpListViewSkeleton() {
|
|
2042
|
+
return /*#__PURE__*/React.createElement(NewBlerpsSkeleton, {
|
|
2043
|
+
md: 6,
|
|
2044
|
+
lg: 4
|
|
2045
|
+
}, /*#__PURE__*/React.createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React.createElement(RightNewBlerpsBox, null, /*#__PURE__*/React.createElement(NewBlerpsCircle, null), /*#__PURE__*/React.createElement(NewBlerpsCircle, null)));
|
|
2046
|
+
};
|
|
2047
|
+
|
|
2048
|
+
var _templateObject$1, _templateObject2;
|
|
2049
|
+
var FeaturedCollectionSkeleton = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n position: relative;\n height: 200px;\n width: 200px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.7;\n }\n }\n"])));
|
|
2050
|
+
var FeaturedCollectionSquare = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n\n ", ";\n"])), function (props) {
|
|
2051
|
+
return props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n background: ".concat(props.theme.colors.grey6, "; \n transform: skewX(-5deg); \n left: 8px; \n height: 94%; \n bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n transform: skewX(-10deg); \n left: 15px; \n height: 87%; \n bottom: 0") : "background: ".concat(props.theme.colors.ibisRed);
|
|
2052
|
+
});
|
|
2053
|
+
var CollectionSkeleton$1 = function CollectionSkeleton() {
|
|
2054
|
+
return /*#__PURE__*/React.createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
|
|
2055
|
+
depth: "1"
|
|
2056
|
+
}), /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
|
|
2057
|
+
depth: "2"
|
|
2058
|
+
}), /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
|
|
2059
|
+
depth: "3"
|
|
2060
|
+
}));
|
|
2061
|
+
};
|
|
2062
|
+
|
|
2014
2063
|
var _grey;
|
|
2015
2064
|
|
|
2016
2065
|
var icons = {
|
|
@@ -3226,6 +3275,9 @@ var MenuItem = MenuItem$1;
|
|
|
3226
3275
|
var NewCollectionModal = NewCollectionModal$1;
|
|
3227
3276
|
var CollectionCard = CollectionCard$1;
|
|
3228
3277
|
var BlerpListView = BlerpListView$1;
|
|
3278
|
+
var BlerpSkeleton = BlerpSkeleton$1;
|
|
3279
|
+
var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
|
|
3280
|
+
var CollectionSkeleton = CollectionSkeleton$1;
|
|
3229
3281
|
var InputAdornment = InputAdornment$1; // export const BlerpContextMenu = MBlerpContextMenu;
|
|
3230
3282
|
// export const ListItem = MListItem;
|
|
3231
3283
|
// // export const ListItemText = MListItemText;
|
|
@@ -3464,4 +3516,4 @@ var Themes = {
|
|
|
3464
3516
|
// };
|
|
3465
3517
|
// export default returnLibrary();
|
|
3466
3518
|
|
|
3467
|
-
export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, Chip, ClockIcon, CogIcon, CollectionCard, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SpeedDial, Stack, Stepper, Switch, Table, Tabs, Text, Theme, Themes, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, darkThemeV1, lightThemeV1, mainTheme };
|
|
3519
|
+
export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, Chip, ClockIcon, CogIcon, CollectionCard, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SpeedDial, Stack, Stepper, Switch, Table, Tabs, Text, Theme, Themes, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, darkThemeV1, lightThemeV1, mainTheme };
|
package/dist/index.umd.js
CHANGED
|
@@ -451,7 +451,7 @@
|
|
|
451
451
|
return windowSize;
|
|
452
452
|
};
|
|
453
453
|
|
|
454
|
-
var _templateObject$
|
|
454
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2;
|
|
455
455
|
// _id: "5b237fbafca7167a35619410",
|
|
456
456
|
// title: "Crying",
|
|
457
457
|
// image: {
|
|
@@ -470,16 +470,16 @@
|
|
|
470
470
|
// },
|
|
471
471
|
// };
|
|
472
472
|
|
|
473
|
-
var BlerpImage$1 = styled__default['default'].div(_templateObject$
|
|
473
|
+
var BlerpImage$1 = styled__default['default'].div(_templateObject$7 || (_templateObject$7 = _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) {
|
|
474
474
|
return props.url;
|
|
475
475
|
});
|
|
476
|
-
var zoomIn$1 = styled.keyframes(_templateObject2$
|
|
477
|
-
var ReactionModal = styled__default['default'].div(_templateObject3$
|
|
476
|
+
var zoomIn$1 = styled.keyframes(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
477
|
+
var ReactionModal = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _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 z-index: 5;\n"])), function (props) {
|
|
478
478
|
return props.theme.colors.notBlackOverride;
|
|
479
479
|
}, function (props) {
|
|
480
480
|
return props.theme.colors.notBlackOverride;
|
|
481
481
|
}, zoomIn$1);
|
|
482
|
-
var SaveContainer$1 = styled__default['default'].div(_templateObject4$
|
|
482
|
+
var SaveContainer$1 = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\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"])), function (props) {
|
|
483
483
|
return props.theme.colors.whiteOverride;
|
|
484
484
|
});
|
|
485
485
|
var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _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) {
|
|
@@ -973,7 +973,7 @@
|
|
|
973
973
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
974
974
|
};
|
|
975
975
|
|
|
976
|
-
var _templateObject$
|
|
976
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
977
977
|
// _id: "5b237fbafca7167a35619410",
|
|
978
978
|
// title: "Crying",
|
|
979
979
|
// image: {
|
|
@@ -992,16 +992,16 @@
|
|
|
992
992
|
// },
|
|
993
993
|
// };
|
|
994
994
|
|
|
995
|
-
var BlerpImage = styled__default['default'].div(_templateObject$
|
|
995
|
+
var BlerpImage = styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
|
|
996
996
|
return props.url;
|
|
997
997
|
});
|
|
998
|
-
var zoomIn = styled.keyframes(_templateObject2$
|
|
999
|
-
styled__default['default'].div(_templateObject3$
|
|
998
|
+
var zoomIn = styled.keyframes(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
|
|
999
|
+
styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _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) {
|
|
1000
1000
|
return props.theme.colors.notBlack;
|
|
1001
1001
|
}, function (props) {
|
|
1002
1002
|
return props.theme.colors.notBlack;
|
|
1003
1003
|
}, zoomIn);
|
|
1004
|
-
var SaveContainer = styled__default['default'].div(_templateObject4$
|
|
1004
|
+
var SaveContainer = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\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"])), function (props) {
|
|
1005
1005
|
return props.theme.colors.white;
|
|
1006
1006
|
});
|
|
1007
1007
|
var BlerpImageScrim = styled__default['default'].div(_templateObject5$1 || (_templateObject5$1 = _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: 8px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
|
|
@@ -1524,25 +1524,25 @@
|
|
|
1524
1524
|
}
|
|
1525
1525
|
};
|
|
1526
1526
|
|
|
1527
|
-
var _templateObject$
|
|
1527
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2;
|
|
1528
1528
|
|
|
1529
1529
|
function ownKeys$3(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; }
|
|
1530
1530
|
|
|
1531
1531
|
function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
1532
1532
|
|
|
1533
1533
|
var motion1 = function motion1(props) {
|
|
1534
|
-
return styled.keyframes(_templateObject$
|
|
1534
|
+
return styled.keyframes(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n"])));
|
|
1535
1535
|
};
|
|
1536
1536
|
|
|
1537
1537
|
var motion2 = function motion2(props) {
|
|
1538
|
-
return styled.keyframes(_templateObject2$
|
|
1538
|
+
return styled.keyframes(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(19px, 0);\n }\n"])));
|
|
1539
1539
|
};
|
|
1540
1540
|
|
|
1541
1541
|
var motion3 = function motion3(props) {
|
|
1542
|
-
return styled.keyframes(_templateObject3$
|
|
1542
|
+
return styled.keyframes(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
|
|
1543
1543
|
};
|
|
1544
1544
|
|
|
1545
|
-
var EllipsisSpinner = styled__default['default'].div(_templateObject4$
|
|
1545
|
+
var EllipsisSpinner = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _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) {
|
|
1546
1546
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
1547
1547
|
}, function (p) {
|
|
1548
1548
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
@@ -1579,19 +1579,19 @@
|
|
|
1579
1579
|
}
|
|
1580
1580
|
};
|
|
1581
1581
|
|
|
1582
|
-
var _templateObject$
|
|
1583
|
-
var Slider$1 = styled__default['default'].div(_templateObject$
|
|
1582
|
+
var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
|
|
1583
|
+
var Slider$1 = styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1584
1584
|
return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
|
|
1585
1585
|
}, function (props) {
|
|
1586
1586
|
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
1587
1587
|
});
|
|
1588
|
-
var ToggleInput = styled__default['default'].input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1588
|
+
var ToggleInput = styled__default['default'].input(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$1, function (props) {
|
|
1589
1589
|
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
1590
1590
|
}, Slider$1, function (props) {
|
|
1591
1591
|
return props.theme.colors.seafoam;
|
|
1592
1592
|
}, Slider$1, Slider$1);
|
|
1593
|
-
var Switch$1 = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1594
|
-
var BlackSlider = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1593
|
+
var Switch$1 = styled__default['default'].div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
|
|
1594
|
+
var BlackSlider = styled__default['default'].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
|
|
1595
1595
|
return props.theme.colors.notBlack;
|
|
1596
1596
|
});
|
|
1597
1597
|
var BlackToggleInput = styled__default['default'].input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: transparent;\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n /* -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px); */\n }\n"])), BlackSlider, BlackSlider, function (props) {
|
|
@@ -2011,6 +2011,55 @@
|
|
|
2011
2011
|
}, children))));
|
|
2012
2012
|
};
|
|
2013
2013
|
|
|
2014
|
+
var _templateObject$3, _templateObject2$2, _templateObject3$1;
|
|
2015
|
+
var FeaturedBlerpSkeleton = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 234px;\n width: 220px;\n border: 2px solid ", ";\n border-radius: 8px;\n\n @media (max-width: 900px) {\n height: 190px;\n width: 180px;\n border: 2px solid ", ";\n border-radius: 8px;\n }\n\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2016
|
+
return props.theme.colors.grey2;
|
|
2017
|
+
}, function (props) {
|
|
2018
|
+
return props.theme.colors.grey2;
|
|
2019
|
+
});
|
|
2020
|
+
var FeaturedBlerpCircle = styled__default['default'].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n height: 135px;\n width: 135px;\n border-radius: 50%;\n margin-top: 30px;\n background: ", ";\n\n @media (max-width: 900px) {\n height: 100px;\n width: 100px;\n margin-top: 30px;\n }\n"])), function (props) {
|
|
2021
|
+
return props.theme.colors.grey2;
|
|
2022
|
+
});
|
|
2023
|
+
var FeaturedBlerpTitle = styled__default['default'].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral__default['default'](["\n width: 80%;\n height: 24px;\n background: ", ";\n margin-bottom: 20px;\n"])), function (props) {
|
|
2024
|
+
return props.theme.colors.grey2;
|
|
2025
|
+
});
|
|
2026
|
+
var BlerpSkeleton$1 = function BlerpSkeleton() {
|
|
2027
|
+
return /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpTitle, null));
|
|
2028
|
+
};
|
|
2029
|
+
|
|
2030
|
+
var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4;
|
|
2031
|
+
var NewBlerpsSkeleton = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n height: 44px;\n background: ", ";\n border-radius: 8px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
|
|
2032
|
+
return props.theme.colors.grey4;
|
|
2033
|
+
});
|
|
2034
|
+
var LeftNewBlerpsBox = styled__default['default'].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n height: 38px;\n width: 38px;\n background-color: ", ";\n border-radius: 8px;\n margin-left: 4px;\n"])), function (props) {
|
|
2035
|
+
return props.theme.colors.white;
|
|
2036
|
+
});
|
|
2037
|
+
var RightNewBlerpsBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 80px;\n margin-right: 10px;\n"])));
|
|
2038
|
+
var NewBlerpsCircle = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n height: 34px;\n width: 34px;\n background-color: ", ";\n border-radius: 50%;\n"])), function (props) {
|
|
2039
|
+
return props.theme.colors.white;
|
|
2040
|
+
});
|
|
2041
|
+
var BlerpListViewSkeleton$1 = function BlerpListViewSkeleton() {
|
|
2042
|
+
return /*#__PURE__*/React__default['default'].createElement(NewBlerpsSkeleton, {
|
|
2043
|
+
md: 6,
|
|
2044
|
+
lg: 4
|
|
2045
|
+
}, /*#__PURE__*/React__default['default'].createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React__default['default'].createElement(RightNewBlerpsBox, null, /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null), /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null)));
|
|
2046
|
+
};
|
|
2047
|
+
|
|
2048
|
+
var _templateObject$1, _templateObject2;
|
|
2049
|
+
var FeaturedCollectionSkeleton = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n height: 200px;\n width: 200px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.7;\n }\n }\n"])));
|
|
2050
|
+
var FeaturedCollectionSquare = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n\n ", ";\n"])), function (props) {
|
|
2051
|
+
return props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n background: ".concat(props.theme.colors.grey6, "; \n transform: skewX(-5deg); \n left: 8px; \n height: 94%; \n bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n transform: skewX(-10deg); \n left: 15px; \n height: 87%; \n bottom: 0") : "background: ".concat(props.theme.colors.ibisRed);
|
|
2052
|
+
});
|
|
2053
|
+
var CollectionSkeleton$1 = function CollectionSkeleton() {
|
|
2054
|
+
return /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2055
|
+
depth: "1"
|
|
2056
|
+
}), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2057
|
+
depth: "2"
|
|
2058
|
+
}), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
|
|
2059
|
+
depth: "3"
|
|
2060
|
+
}));
|
|
2061
|
+
};
|
|
2062
|
+
|
|
2014
2063
|
var _grey;
|
|
2015
2064
|
|
|
2016
2065
|
var icons = {
|
|
@@ -3226,6 +3275,9 @@
|
|
|
3226
3275
|
var NewCollectionModal = NewCollectionModal$1;
|
|
3227
3276
|
var CollectionCard = CollectionCard$1;
|
|
3228
3277
|
var BlerpListView = BlerpListView$1;
|
|
3278
|
+
var BlerpSkeleton = BlerpSkeleton$1;
|
|
3279
|
+
var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
|
|
3280
|
+
var CollectionSkeleton = CollectionSkeleton$1;
|
|
3229
3281
|
var InputAdornment = core.InputAdornment; // export const BlerpContextMenu = MBlerpContextMenu;
|
|
3230
3282
|
// export const ListItem = MListItem;
|
|
3231
3283
|
// // export const ListItemText = MListItemText;
|
|
@@ -3475,6 +3527,8 @@
|
|
|
3475
3527
|
exports.BlerpCardIcon = BlerpCardIcon;
|
|
3476
3528
|
exports.BlerpCoinsIcon = BlerpCoinsIcon;
|
|
3477
3529
|
exports.BlerpListView = BlerpListView;
|
|
3530
|
+
exports.BlerpListViewSkeleton = BlerpListViewSkeleton;
|
|
3531
|
+
exports.BlerpSkeleton = BlerpSkeleton;
|
|
3478
3532
|
exports.BlerpyIcon = BlerpyIcon;
|
|
3479
3533
|
exports.BookmarkAddRounded = BookmarkAddRounded;
|
|
3480
3534
|
exports.BottomNavigation = BottomNavigation;
|
|
@@ -3489,6 +3543,7 @@
|
|
|
3489
3543
|
exports.ClockIcon = ClockIcon;
|
|
3490
3544
|
exports.CogIcon = CogIcon;
|
|
3491
3545
|
exports.CollectionCard = CollectionCard;
|
|
3546
|
+
exports.CollectionSkeleton = CollectionSkeleton;
|
|
3492
3547
|
exports.Container = Container;
|
|
3493
3548
|
exports.CrownIcon = CrownIcon;
|
|
3494
3549
|
exports.Dialog = Dialog;
|