@blerp/design 0.1.13 → 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 +127 -43
- package/dist/index.esm.js +124 -44
- package/dist/index.umd.js +127 -43
- package/package.json +2 -1
- package/yarn-error.log +0 -630
package/dist/index.cjs.js
CHANGED
|
@@ -440,6 +440,19 @@ var CogIcon = function CogIcon(_ref20) {
|
|
|
440
440
|
d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4 l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6 C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0 c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2 c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5 v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4 c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0 c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0 C14.4,10.6,13.3,9.5,12,9.5z"
|
|
441
441
|
})));
|
|
442
442
|
};
|
|
443
|
+
var ClockIcon = function ClockIcon(_ref21) {
|
|
444
|
+
var sx = _ref21.sx;
|
|
445
|
+
return /*#__PURE__*/React__default['default'].createElement(core.SvgIcon, {
|
|
446
|
+
sx: sx
|
|
447
|
+
}, /*#__PURE__*/React__default['default'].createElement("g", {
|
|
448
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
449
|
+
id: "Layer_23"
|
|
450
|
+
}, /*#__PURE__*/React__default['default'].createElement("path", {
|
|
451
|
+
id: "icon_datetime_clock",
|
|
452
|
+
class: "st0",
|
|
453
|
+
d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7 c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
|
|
454
|
+
})));
|
|
455
|
+
};
|
|
443
456
|
|
|
444
457
|
var useWindowSize = function useWindowSize() {
|
|
445
458
|
var isClient = (typeof window === "undefined" ? "undefined" : _typeof__default['default'](window)) === "object";
|
|
@@ -474,7 +487,7 @@ var useWindowSize = function useWindowSize() {
|
|
|
474
487
|
return windowSize;
|
|
475
488
|
};
|
|
476
489
|
|
|
477
|
-
var _templateObject$
|
|
490
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2;
|
|
478
491
|
// _id: "5b237fbafca7167a35619410",
|
|
479
492
|
// title: "Crying",
|
|
480
493
|
// image: {
|
|
@@ -493,16 +506,16 @@ var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$
|
|
|
493
506
|
// },
|
|
494
507
|
// };
|
|
495
508
|
|
|
496
|
-
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) {
|
|
497
510
|
return props.url;
|
|
498
511
|
});
|
|
499
|
-
var zoomIn$1 = styled.keyframes(_templateObject2$
|
|
500
|
-
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) {
|
|
501
514
|
return props.theme.colors.notBlackOverride;
|
|
502
515
|
}, function (props) {
|
|
503
516
|
return props.theme.colors.notBlackOverride;
|
|
504
517
|
}, zoomIn$1);
|
|
505
|
-
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) {
|
|
506
519
|
return props.theme.colors.whiteOverride;
|
|
507
520
|
});
|
|
508
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) {
|
|
@@ -518,16 +531,18 @@ var ReactionButton$1 = styled__default['default'].div(_templateObject6$2 || (_te
|
|
|
518
531
|
var LineClamp = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
|
|
519
532
|
var reactionIconUrls$1 = {
|
|
520
533
|
FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
|
|
521
|
-
|
|
534
|
+
MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg",
|
|
535
|
+
NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
|
|
536
|
+
SAD: "https://storage.googleapis.com/blerp_products/Icons/Sad%403x.svg ",
|
|
522
537
|
SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
|
|
523
|
-
SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
|
|
524
|
-
TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
|
|
525
538
|
ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
|
|
526
|
-
|
|
527
|
-
|
|
539
|
+
HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
|
|
540
|
+
TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
|
|
541
|
+
SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
|
|
542
|
+
LOVE: "https://storage.googleapis.com/blerp_products/Icons/Heart%403x.svg"
|
|
528
543
|
};
|
|
529
544
|
var Blerp$1 = function Blerp(_ref) {
|
|
530
|
-
var _bite$topReactions, _bite$image, _bite$image$original;
|
|
545
|
+
var _bite$topReactions, _bite$topReactions2, _bite$topReactions3, _bite$image, _bite$image$original;
|
|
531
546
|
|
|
532
547
|
var bite = _ref.bite,
|
|
533
548
|
collections = _ref.collections,
|
|
@@ -592,7 +607,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
592
607
|
imageSize: "90px",
|
|
593
608
|
reactionSpacing: 1,
|
|
594
609
|
reactionPadding: "3px",
|
|
595
|
-
reactionSize: "
|
|
610
|
+
reactionSize: "16px",
|
|
596
611
|
buttonSize: "small"
|
|
597
612
|
};
|
|
598
613
|
var meduimSize = {
|
|
@@ -602,7 +617,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
602
617
|
imageSize: "100px",
|
|
603
618
|
reactionSpacing: 1,
|
|
604
619
|
reactionPadding: "3px",
|
|
605
|
-
reactionSize: "
|
|
620
|
+
reactionSize: "20px",
|
|
606
621
|
buttonSize: "medium"
|
|
607
622
|
};
|
|
608
623
|
var largeSize = {
|
|
@@ -612,7 +627,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
612
627
|
imageSize: "135px",
|
|
613
628
|
reactionSpacing: 1,
|
|
614
629
|
reactionPadding: "5px",
|
|
615
|
-
reactionSize: "
|
|
630
|
+
reactionSize: "24px",
|
|
616
631
|
buttonFontSize: "large"
|
|
617
632
|
};
|
|
618
633
|
|
|
@@ -671,9 +686,22 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
671
686
|
position: "relative",
|
|
672
687
|
cursor: "pointer",
|
|
673
688
|
"&:hover": {
|
|
674
|
-
transition: "0.3s",
|
|
675
689
|
bgcolor: "grey2.main",
|
|
676
690
|
border: "2px solid transparent"
|
|
691
|
+
},
|
|
692
|
+
'& .reaction-icon-blrp': {
|
|
693
|
+
transition: "0.3s",
|
|
694
|
+
opacity: 0.64
|
|
695
|
+
},
|
|
696
|
+
'&:hover .reaction-icon-blrp': {
|
|
697
|
+
opacity: "1"
|
|
698
|
+
},
|
|
699
|
+
'& .unsafe-icon-blrp': {
|
|
700
|
+
transition: "0.3s",
|
|
701
|
+
opacity: 0.5
|
|
702
|
+
},
|
|
703
|
+
'&:hover .unsafe-icon-blrp': {
|
|
704
|
+
opacity: "1"
|
|
677
705
|
}
|
|
678
706
|
}
|
|
679
707
|
}, /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
@@ -690,15 +718,12 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
690
718
|
wordWrap: "break-word"
|
|
691
719
|
}
|
|
692
720
|
}, /*#__PURE__*/React__default['default'].createElement(IconButton, {
|
|
721
|
+
className: "unsafe-icon-blrp",
|
|
693
722
|
sx: {
|
|
694
723
|
position: "absolute",
|
|
695
724
|
top: "30px",
|
|
696
725
|
right: "5px",
|
|
697
|
-
padding: "0"
|
|
698
|
-
opacity: "0.5",
|
|
699
|
-
":hover": {
|
|
700
|
-
opacity: "1"
|
|
701
|
-
}
|
|
726
|
+
padding: "0"
|
|
702
727
|
}
|
|
703
728
|
}, /*#__PURE__*/React__default['default'].createElement(UnsafeIcon, {
|
|
704
729
|
sx: {
|
|
@@ -723,7 +748,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
723
748
|
},
|
|
724
749
|
sx: {
|
|
725
750
|
color: "notBlack.main",
|
|
726
|
-
padding: "
|
|
751
|
+
padding: "4px"
|
|
727
752
|
}
|
|
728
753
|
}, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
|
|
729
754
|
fontSize: "small"
|
|
@@ -736,23 +761,26 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
736
761
|
},
|
|
737
762
|
sx: {
|
|
738
763
|
color: "notBlack.main",
|
|
739
|
-
padding: "
|
|
764
|
+
padding: "4px"
|
|
740
765
|
}
|
|
741
766
|
}, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
|
|
742
767
|
fontSize: "small"
|
|
743
|
-
})), /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
768
|
+
})), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default['default'].createElement(Text, {
|
|
744
769
|
color: "notBlack.main",
|
|
745
770
|
fontWeight: "light",
|
|
746
771
|
fontSize: "12px",
|
|
747
772
|
marginRight: "8px"
|
|
748
|
-
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")),
|
|
773
|
+
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default['default'].createElement(Stack, {
|
|
749
774
|
direction: "row",
|
|
750
775
|
position: "relative",
|
|
751
776
|
width: "40px",
|
|
752
777
|
height: "20px"
|
|
753
|
-
}, bite === null || bite === void 0 ? void 0 : (_bite$
|
|
754
|
-
return /*#__PURE__*/React__default['default'].createElement(
|
|
778
|
+
}, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map(function (reaction, index) {
|
|
779
|
+
return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
|
|
780
|
+
title: reaction
|
|
781
|
+
}, /*#__PURE__*/React__default['default'].createElement("img", {
|
|
755
782
|
alt: "test",
|
|
783
|
+
className: "reaction-icon-blrp",
|
|
756
784
|
style: {
|
|
757
785
|
width: "20px",
|
|
758
786
|
height: "20px",
|
|
@@ -762,7 +790,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
762
790
|
zIndex: index
|
|
763
791
|
},
|
|
764
792
|
src: reactionIconUrls$1[reaction]
|
|
765
|
-
});
|
|
793
|
+
}));
|
|
766
794
|
}))), /*#__PURE__*/React__default['default'].createElement("div", null, secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(IconButton, {
|
|
767
795
|
onClick: function onClick(e) {
|
|
768
796
|
handleClickThreeDot(e);
|
|
@@ -893,7 +921,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
893
921
|
}
|
|
894
922
|
}), /*#__PURE__*/React__default['default'].createElement(Grid, {
|
|
895
923
|
display: "grid",
|
|
896
|
-
gridTemplateColumns: "repeat(
|
|
924
|
+
gridTemplateColumns: "repeat(5, 1fr)",
|
|
897
925
|
alignItems: "center",
|
|
898
926
|
marginTop: "16px",
|
|
899
927
|
gap: 1
|
|
@@ -981,7 +1009,7 @@ Blerp$1.propTypes = {
|
|
|
981
1009
|
handleClickTitle: PropTypes__default['default'].func.isRequired
|
|
982
1010
|
};
|
|
983
1011
|
|
|
984
|
-
var _templateObject$
|
|
1012
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
985
1013
|
// _id: "5b237fbafca7167a35619410",
|
|
986
1014
|
// title: "Crying",
|
|
987
1015
|
// image: {
|
|
@@ -1000,16 +1028,16 @@ var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$
|
|
|
1000
1028
|
// },
|
|
1001
1029
|
// };
|
|
1002
1030
|
|
|
1003
|
-
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) {
|
|
1004
1032
|
return props.url;
|
|
1005
1033
|
});
|
|
1006
|
-
var zoomIn = styled.keyframes(_templateObject2$
|
|
1007
|
-
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) {
|
|
1008
1036
|
return props.theme.colors.notBlack;
|
|
1009
1037
|
}, function (props) {
|
|
1010
1038
|
return props.theme.colors.notBlack;
|
|
1011
1039
|
}, zoomIn);
|
|
1012
|
-
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) {
|
|
1013
1041
|
return props.theme.colors.white;
|
|
1014
1042
|
});
|
|
1015
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) {
|
|
@@ -1532,25 +1560,25 @@ var darkPalette = {
|
|
|
1532
1560
|
}
|
|
1533
1561
|
};
|
|
1534
1562
|
|
|
1535
|
-
var _templateObject$
|
|
1563
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2;
|
|
1536
1564
|
|
|
1537
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; }
|
|
1538
1566
|
|
|
1539
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; }
|
|
1540
1568
|
|
|
1541
1569
|
var motion1 = function motion1(props) {
|
|
1542
|
-
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"])));
|
|
1543
1571
|
};
|
|
1544
1572
|
|
|
1545
1573
|
var motion2 = function motion2(props) {
|
|
1546
|
-
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"])));
|
|
1547
1575
|
};
|
|
1548
1576
|
|
|
1549
1577
|
var motion3 = function motion3(props) {
|
|
1550
|
-
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"])));
|
|
1551
1579
|
};
|
|
1552
1580
|
|
|
1553
|
-
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) {
|
|
1554
1582
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
1555
1583
|
}, function (p) {
|
|
1556
1584
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
@@ -1587,19 +1615,19 @@ EllipsisLoader.defaultProps = {
|
|
|
1587
1615
|
}
|
|
1588
1616
|
};
|
|
1589
1617
|
|
|
1590
|
-
var _templateObject$
|
|
1591
|
-
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) {
|
|
1592
1620
|
return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
|
|
1593
1621
|
}, function (props) {
|
|
1594
1622
|
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
1595
1623
|
});
|
|
1596
|
-
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) {
|
|
1597
1625
|
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
1598
1626
|
}, Slider$1, function (props) {
|
|
1599
1627
|
return props.theme.colors.seafoam;
|
|
1600
1628
|
}, Slider$1, Slider$1);
|
|
1601
|
-
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);
|
|
1602
|
-
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) {
|
|
1603
1631
|
return props.theme.colors.notBlack;
|
|
1604
1632
|
});
|
|
1605
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) {
|
|
@@ -2019,6 +2047,55 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
|
|
|
2019
2047
|
}, children))));
|
|
2020
2048
|
};
|
|
2021
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
|
+
|
|
2022
2099
|
var _grey;
|
|
2023
2100
|
|
|
2024
2101
|
var icons = {
|
|
@@ -3234,6 +3311,9 @@ var MenuItem = core.MenuItem;
|
|
|
3234
3311
|
var NewCollectionModal = NewCollectionModal$1;
|
|
3235
3312
|
var CollectionCard = CollectionCard$1;
|
|
3236
3313
|
var BlerpListView = BlerpListView$1;
|
|
3314
|
+
var BlerpSkeleton = BlerpSkeleton$1;
|
|
3315
|
+
var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
|
|
3316
|
+
var CollectionSkeleton = CollectionSkeleton$1;
|
|
3237
3317
|
var InputAdornment = core.InputAdornment; // export const BlerpContextMenu = MBlerpContextMenu;
|
|
3238
3318
|
// export const ListItem = MListItem;
|
|
3239
3319
|
// // export const ListItemText = MListItemText;
|
|
@@ -3483,6 +3563,8 @@ exports.Blerp = Blerp;
|
|
|
3483
3563
|
exports.BlerpCardIcon = BlerpCardIcon;
|
|
3484
3564
|
exports.BlerpCoinsIcon = BlerpCoinsIcon;
|
|
3485
3565
|
exports.BlerpListView = BlerpListView;
|
|
3566
|
+
exports.BlerpListViewSkeleton = BlerpListViewSkeleton;
|
|
3567
|
+
exports.BlerpSkeleton = BlerpSkeleton;
|
|
3486
3568
|
exports.BlerpyIcon = BlerpyIcon;
|
|
3487
3569
|
exports.BookmarkAddRounded = BookmarkAddRounded;
|
|
3488
3570
|
exports.BottomNavigation = BottomNavigation;
|
|
@@ -3494,8 +3576,10 @@ exports.Card = Card;
|
|
|
3494
3576
|
exports.ChannelPointsIcon = ChannelPointsIcon;
|
|
3495
3577
|
exports.Checkbox = Checkbox;
|
|
3496
3578
|
exports.Chip = Chip;
|
|
3579
|
+
exports.ClockIcon = ClockIcon;
|
|
3497
3580
|
exports.CogIcon = CogIcon;
|
|
3498
3581
|
exports.CollectionCard = CollectionCard;
|
|
3582
|
+
exports.CollectionSkeleton = CollectionSkeleton;
|
|
3499
3583
|
exports.Container = Container;
|
|
3500
3584
|
exports.CrownIcon = CrownIcon;
|
|
3501
3585
|
exports.Dialog = Dialog;
|
package/dist/index.esm.js
CHANGED
|
@@ -404,6 +404,19 @@ var CogIcon = function CogIcon(_ref20) {
|
|
|
404
404
|
d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4 l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6 C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0 c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2 c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5 v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4 c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0 c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0 C14.4,10.6,13.3,9.5,12,9.5z"
|
|
405
405
|
})));
|
|
406
406
|
};
|
|
407
|
+
var ClockIcon = function ClockIcon(_ref21) {
|
|
408
|
+
var sx = _ref21.sx;
|
|
409
|
+
return /*#__PURE__*/React.createElement(SvgIcon, {
|
|
410
|
+
sx: sx
|
|
411
|
+
}, /*#__PURE__*/React.createElement("g", {
|
|
412
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
413
|
+
id: "Layer_23"
|
|
414
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
415
|
+
id: "icon_datetime_clock",
|
|
416
|
+
class: "st0",
|
|
417
|
+
d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7 c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
|
|
418
|
+
})));
|
|
419
|
+
};
|
|
407
420
|
|
|
408
421
|
var useWindowSize = function useWindowSize() {
|
|
409
422
|
var isClient = (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object";
|
|
@@ -438,7 +451,7 @@ var useWindowSize = function useWindowSize() {
|
|
|
438
451
|
return windowSize;
|
|
439
452
|
};
|
|
440
453
|
|
|
441
|
-
var _templateObject$
|
|
454
|
+
var _templateObject$7, _templateObject2$6, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2;
|
|
442
455
|
// _id: "5b237fbafca7167a35619410",
|
|
443
456
|
// title: "Crying",
|
|
444
457
|
// image: {
|
|
@@ -457,16 +470,16 @@ var _templateObject$4, _templateObject2$3, _templateObject3$3, _templateObject4$
|
|
|
457
470
|
// },
|
|
458
471
|
// };
|
|
459
472
|
|
|
460
|
-
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) {
|
|
461
474
|
return props.url;
|
|
462
475
|
});
|
|
463
|
-
var zoomIn$1 = keyframes(_templateObject2$
|
|
464
|
-
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) {
|
|
465
478
|
return props.theme.colors.notBlackOverride;
|
|
466
479
|
}, function (props) {
|
|
467
480
|
return props.theme.colors.notBlackOverride;
|
|
468
481
|
}, zoomIn$1);
|
|
469
|
-
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) {
|
|
470
483
|
return props.theme.colors.whiteOverride;
|
|
471
484
|
});
|
|
472
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) {
|
|
@@ -482,16 +495,18 @@ var ReactionButton$1 = styled.div(_templateObject6$2 || (_templateObject6$2 = _t
|
|
|
482
495
|
var LineClamp = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
|
|
483
496
|
var reactionIconUrls$1 = {
|
|
484
497
|
FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
|
|
485
|
-
|
|
498
|
+
MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg",
|
|
499
|
+
NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
|
|
500
|
+
SAD: "https://storage.googleapis.com/blerp_products/Icons/Sad%403x.svg ",
|
|
486
501
|
SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
|
|
487
|
-
SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
|
|
488
|
-
TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
|
|
489
502
|
ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
|
|
490
|
-
|
|
491
|
-
|
|
503
|
+
HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
|
|
504
|
+
TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
|
|
505
|
+
SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
|
|
506
|
+
LOVE: "https://storage.googleapis.com/blerp_products/Icons/Heart%403x.svg"
|
|
492
507
|
};
|
|
493
508
|
var Blerp$1 = function Blerp(_ref) {
|
|
494
|
-
var _bite$topReactions, _bite$image, _bite$image$original;
|
|
509
|
+
var _bite$topReactions, _bite$topReactions2, _bite$topReactions3, _bite$image, _bite$image$original;
|
|
495
510
|
|
|
496
511
|
var bite = _ref.bite,
|
|
497
512
|
collections = _ref.collections,
|
|
@@ -556,7 +571,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
556
571
|
imageSize: "90px",
|
|
557
572
|
reactionSpacing: 1,
|
|
558
573
|
reactionPadding: "3px",
|
|
559
|
-
reactionSize: "
|
|
574
|
+
reactionSize: "16px",
|
|
560
575
|
buttonSize: "small"
|
|
561
576
|
};
|
|
562
577
|
var meduimSize = {
|
|
@@ -566,7 +581,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
566
581
|
imageSize: "100px",
|
|
567
582
|
reactionSpacing: 1,
|
|
568
583
|
reactionPadding: "3px",
|
|
569
|
-
reactionSize: "
|
|
584
|
+
reactionSize: "20px",
|
|
570
585
|
buttonSize: "medium"
|
|
571
586
|
};
|
|
572
587
|
var largeSize = {
|
|
@@ -576,7 +591,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
576
591
|
imageSize: "135px",
|
|
577
592
|
reactionSpacing: 1,
|
|
578
593
|
reactionPadding: "5px",
|
|
579
|
-
reactionSize: "
|
|
594
|
+
reactionSize: "24px",
|
|
580
595
|
buttonFontSize: "large"
|
|
581
596
|
};
|
|
582
597
|
|
|
@@ -635,9 +650,22 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
635
650
|
position: "relative",
|
|
636
651
|
cursor: "pointer",
|
|
637
652
|
"&:hover": {
|
|
638
|
-
transition: "0.3s",
|
|
639
653
|
bgcolor: "grey2.main",
|
|
640
654
|
border: "2px solid transparent"
|
|
655
|
+
},
|
|
656
|
+
'& .reaction-icon-blrp': {
|
|
657
|
+
transition: "0.3s",
|
|
658
|
+
opacity: 0.64
|
|
659
|
+
},
|
|
660
|
+
'&:hover .reaction-icon-blrp': {
|
|
661
|
+
opacity: "1"
|
|
662
|
+
},
|
|
663
|
+
'& .unsafe-icon-blrp': {
|
|
664
|
+
transition: "0.3s",
|
|
665
|
+
opacity: 0.5
|
|
666
|
+
},
|
|
667
|
+
'&:hover .unsafe-icon-blrp': {
|
|
668
|
+
opacity: "1"
|
|
641
669
|
}
|
|
642
670
|
}
|
|
643
671
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
@@ -654,15 +682,12 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
654
682
|
wordWrap: "break-word"
|
|
655
683
|
}
|
|
656
684
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
685
|
+
className: "unsafe-icon-blrp",
|
|
657
686
|
sx: {
|
|
658
687
|
position: "absolute",
|
|
659
688
|
top: "30px",
|
|
660
689
|
right: "5px",
|
|
661
|
-
padding: "0"
|
|
662
|
-
opacity: "0.5",
|
|
663
|
-
":hover": {
|
|
664
|
-
opacity: "1"
|
|
665
|
-
}
|
|
690
|
+
padding: "0"
|
|
666
691
|
}
|
|
667
692
|
}, /*#__PURE__*/React.createElement(UnsafeIcon, {
|
|
668
693
|
sx: {
|
|
@@ -687,7 +712,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
687
712
|
},
|
|
688
713
|
sx: {
|
|
689
714
|
color: "notBlack.main",
|
|
690
|
-
padding: "
|
|
715
|
+
padding: "4px"
|
|
691
716
|
}
|
|
692
717
|
}, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
|
|
693
718
|
fontSize: "small"
|
|
@@ -700,23 +725,26 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
700
725
|
},
|
|
701
726
|
sx: {
|
|
702
727
|
color: "notBlack.main",
|
|
703
|
-
padding: "
|
|
728
|
+
padding: "4px"
|
|
704
729
|
}
|
|
705
730
|
}, /*#__PURE__*/React.createElement(BookmarkAddRounded, {
|
|
706
731
|
fontSize: "small"
|
|
707
|
-
})), /*#__PURE__*/React.createElement(Text, {
|
|
732
|
+
})), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Text, {
|
|
708
733
|
color: "notBlack.main",
|
|
709
734
|
fontWeight: "light",
|
|
710
735
|
fontSize: "12px",
|
|
711
736
|
marginRight: "8px"
|
|
712
|
-
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")),
|
|
737
|
+
}, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React.createElement(Stack, {
|
|
713
738
|
direction: "row",
|
|
714
739
|
position: "relative",
|
|
715
740
|
width: "40px",
|
|
716
741
|
height: "20px"
|
|
717
|
-
}, bite === null || bite === void 0 ? void 0 : (_bite$
|
|
718
|
-
return /*#__PURE__*/React.createElement(
|
|
742
|
+
}, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map(function (reaction, index) {
|
|
743
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
744
|
+
title: reaction
|
|
745
|
+
}, /*#__PURE__*/React.createElement("img", {
|
|
719
746
|
alt: "test",
|
|
747
|
+
className: "reaction-icon-blrp",
|
|
720
748
|
style: {
|
|
721
749
|
width: "20px",
|
|
722
750
|
height: "20px",
|
|
@@ -726,7 +754,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
726
754
|
zIndex: index
|
|
727
755
|
},
|
|
728
756
|
src: reactionIconUrls$1[reaction]
|
|
729
|
-
});
|
|
757
|
+
}));
|
|
730
758
|
}))), /*#__PURE__*/React.createElement("div", null, secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React.createElement(IconButton, {
|
|
731
759
|
onClick: function onClick(e) {
|
|
732
760
|
handleClickThreeDot(e);
|
|
@@ -857,7 +885,7 @@ var Blerp$1 = function Blerp(_ref) {
|
|
|
857
885
|
}
|
|
858
886
|
}), /*#__PURE__*/React.createElement(Grid, {
|
|
859
887
|
display: "grid",
|
|
860
|
-
gridTemplateColumns: "repeat(
|
|
888
|
+
gridTemplateColumns: "repeat(5, 1fr)",
|
|
861
889
|
alignItems: "center",
|
|
862
890
|
marginTop: "16px",
|
|
863
891
|
gap: 1
|
|
@@ -945,7 +973,7 @@ Blerp$1.propTypes = {
|
|
|
945
973
|
handleClickTitle: PropTypes.func.isRequired
|
|
946
974
|
};
|
|
947
975
|
|
|
948
|
-
var _templateObject$
|
|
976
|
+
var _templateObject$6, _templateObject2$5, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
|
|
949
977
|
// _id: "5b237fbafca7167a35619410",
|
|
950
978
|
// title: "Crying",
|
|
951
979
|
// image: {
|
|
@@ -964,16 +992,16 @@ var _templateObject$3, _templateObject2$2, _templateObject3$2, _templateObject4$
|
|
|
964
992
|
// },
|
|
965
993
|
// };
|
|
966
994
|
|
|
967
|
-
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) {
|
|
968
996
|
return props.url;
|
|
969
997
|
});
|
|
970
|
-
var zoomIn = keyframes(_templateObject2$
|
|
971
|
-
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) {
|
|
972
1000
|
return props.theme.colors.notBlack;
|
|
973
1001
|
}, function (props) {
|
|
974
1002
|
return props.theme.colors.notBlack;
|
|
975
1003
|
}, zoomIn);
|
|
976
|
-
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) {
|
|
977
1005
|
return props.theme.colors.white;
|
|
978
1006
|
});
|
|
979
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) {
|
|
@@ -1496,25 +1524,25 @@ var darkPalette = {
|
|
|
1496
1524
|
}
|
|
1497
1525
|
};
|
|
1498
1526
|
|
|
1499
|
-
var _templateObject$
|
|
1527
|
+
var _templateObject$5, _templateObject2$4, _templateObject3$3, _templateObject4$2;
|
|
1500
1528
|
|
|
1501
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; }
|
|
1502
1530
|
|
|
1503
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; }
|
|
1504
1532
|
|
|
1505
1533
|
var motion1 = function motion1(props) {
|
|
1506
|
-
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"])));
|
|
1507
1535
|
};
|
|
1508
1536
|
|
|
1509
1537
|
var motion2 = function motion2(props) {
|
|
1510
|
-
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"])));
|
|
1511
1539
|
};
|
|
1512
1540
|
|
|
1513
1541
|
var motion3 = function motion3(props) {
|
|
1514
|
-
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"])));
|
|
1515
1543
|
};
|
|
1516
1544
|
|
|
1517
|
-
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) {
|
|
1518
1546
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
1519
1547
|
}, function (p) {
|
|
1520
1548
|
return "".concat(p.size).concat(p.sizeUnit);
|
|
@@ -1551,19 +1579,19 @@ EllipsisLoader.defaultProps = {
|
|
|
1551
1579
|
}
|
|
1552
1580
|
};
|
|
1553
1581
|
|
|
1554
|
-
var _templateObject$
|
|
1555
|
-
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) {
|
|
1556
1584
|
return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
|
|
1557
1585
|
}, function (props) {
|
|
1558
1586
|
return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
|
|
1559
1587
|
});
|
|
1560
|
-
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) {
|
|
1561
1589
|
return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
|
|
1562
1590
|
}, Slider$1, function (props) {
|
|
1563
1591
|
return props.theme.colors.seafoam;
|
|
1564
1592
|
}, Slider$1, Slider$1);
|
|
1565
|
-
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);
|
|
1566
|
-
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) {
|
|
1567
1595
|
return props.theme.colors.notBlack;
|
|
1568
1596
|
});
|
|
1569
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) {
|
|
@@ -1983,6 +2011,55 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
|
|
|
1983
2011
|
}, children))));
|
|
1984
2012
|
};
|
|
1985
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
|
+
|
|
1986
2063
|
var _grey;
|
|
1987
2064
|
|
|
1988
2065
|
var icons = {
|
|
@@ -3198,6 +3275,9 @@ var MenuItem = MenuItem$1;
|
|
|
3198
3275
|
var NewCollectionModal = NewCollectionModal$1;
|
|
3199
3276
|
var CollectionCard = CollectionCard$1;
|
|
3200
3277
|
var BlerpListView = BlerpListView$1;
|
|
3278
|
+
var BlerpSkeleton = BlerpSkeleton$1;
|
|
3279
|
+
var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
|
|
3280
|
+
var CollectionSkeleton = CollectionSkeleton$1;
|
|
3201
3281
|
var InputAdornment = InputAdornment$1; // export const BlerpContextMenu = MBlerpContextMenu;
|
|
3202
3282
|
// export const ListItem = MListItem;
|
|
3203
3283
|
// // export const ListItemText = MListItemText;
|
|
@@ -3436,4 +3516,4 @@ var Themes = {
|
|
|
3436
3516
|
// };
|
|
3437
3517
|
// export default returnLibrary();
|
|
3438
3518
|
|
|
3439
|
-
export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, Chip, 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 };
|