@blerp/design 1.0.27 → 1.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +563 -197
  2. package/dist/index.esm.js +562 -198
  3. package/dist/index.umd.js +566 -201
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -16,6 +16,7 @@ var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined')
16
16
  var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
17
17
  var reactPalette = require('react-palette');
18
18
  var _typeof = require('@babel/runtime/helpers/typeof');
19
+ var KeyboardArrowRightRoundedIcon = require('@mui/icons-material/KeyboardArrowRightRounded');
19
20
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
20
21
  var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
21
22
  var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -61,6 +62,7 @@ var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIco
61
62
  var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
62
63
  var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
63
64
  var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
65
+ var KeyboardArrowRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowRightRoundedIcon);
64
66
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
65
67
  var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
66
68
  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
@@ -91,23 +93,23 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
91
93
  var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
92
94
  var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
93
95
 
94
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6;
95
- var BlerpImage$2 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
96
+ var _templateObject$f, _templateObject2$a, _templateObject3$9, _templateObject4$7;
97
+ var BlerpImage$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _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) {
96
98
  return props.url;
97
99
  });
98
- var SaveContainer$2 = styled__default['default'].div(_templateObject2$9 || (_templateObject2$9 = _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\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), function (props) {
100
+ var SaveContainer$2 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _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\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), function (props) {
99
101
  return props.theme.colors.whiteOverride;
100
102
  }, function (props) {
101
103
  return props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam);
102
104
  }, function (props) {
103
105
  return props.theme.colors.white;
104
106
  });
105
- var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
107
+ var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
106
108
  return props.theme.colors.grey6Override;
107
109
  }, function (props) {
108
110
  return props.theme.colors.grey6Override;
109
111
  }, SaveContainer$2);
110
- var BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), function (props) {
112
+ var BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4$7 || (_templateObject4$7 = _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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), function (props) {
111
113
  return props.theme.colors.grey3;
112
114
  }, function (props) {
113
115
  return props.theme.colors.grey3;
@@ -262,8 +264,8 @@ var BlerpImageRow = function BlerpImageRow(_ref) {
262
264
  }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, null)))))));
263
265
  };
264
266
 
265
- var _templateObject$d;
266
- var ReactionButton$1 = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
267
+ var _templateObject$e;
268
+ var ReactionButton$1 = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
267
269
  return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
268
270
  }, function (props) {
269
271
  return props.theme.colors.ibisRed;
@@ -386,8 +388,8 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
386
388
  }, "UNSAVE")));
387
389
  };
388
390
 
389
- var _templateObject$c;
390
- var LineClamp$2 = styled__default['default'].div(_templateObject$c || (_templateObject$c = _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"])));
391
+ var _templateObject$d;
392
+ var LineClamp$2 = styled__default['default'].div(_templateObject$d || (_templateObject$d = _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"])));
391
393
 
392
394
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
393
395
  var bite = _ref.bite,
@@ -1326,7 +1328,7 @@ Blerp$1.propTypes = {
1326
1328
  handleClickTitle: PropTypes__default['default'].func.isRequired
1327
1329
  };
1328
1330
 
1329
- var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2;
1331
+ var _templateObject$c, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1330
1332
  // _id: "5b237fbafca7167a35619410",
1331
1333
  // title: "Crying",
1332
1334
  // image: {
@@ -1345,29 +1347,24 @@ var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$
1345
1347
  // },
1346
1348
  // };
1347
1349
 
1348
- var BlerpImage$1 = styled__default['default'].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n /* border-radius: 8px; */\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1350
+ var BlerpImage$1 = styled__default['default'].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n /* border-radius: 8px; */\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1349
1351
  return props.url;
1350
1352
  });
1351
- var zoomIn$1 = styled.keyframes(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1352
- styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
1353
+ var zoomIn$1 = styled.keyframes(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1354
+ styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _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) {
1353
1355
  return props.theme.colors.notBlack;
1354
1356
  }, function (props) {
1355
1357
  return props.theme.colors.notBlack;
1356
1358
  }, zoomIn$1);
1357
- var SaveContainer$1 = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _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) {
1359
+ var SaveContainer$1 = styled__default['default'].div(_templateObject4$6 || (_templateObject4$6 = _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) {
1358
1360
  return props.theme.colors.white;
1359
1361
  });
1360
- var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\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) {
1362
+ var BlerpImageScrim$1 = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "10;\n /* position: absolute; */\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\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) {
1361
1363
  return props.theme.colors.notBlackOverride;
1362
1364
  }, function (props) {
1363
1365
  return props.theme.colors.notBlackOverride;
1364
1366
  }, SaveContainer$1);
1365
- styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n transition: 0.2s;\n margin-right: 0;\n cursor: pointer;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
1366
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1367
- }, function (props) {
1368
- return props.theme.colors.ibisRed;
1369
- });
1370
- 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"])));
1367
+ styled__default['default'].div(_templateObject6$4 || (_templateObject6$4 = _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"])));
1371
1368
  var BlerpListView$1 = function BlerpListView(_ref) {
1372
1369
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1373
1370
 
@@ -1535,7 +1532,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1535
1532
  height: "30px",
1536
1533
  color: "white.override"
1537
1534
  }
1538
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1535
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1536
+ href: "/soundbites/".concat(bite._id),
1537
+ style: {
1538
+ textDecoration: "none",
1539
+ width: "100%"
1540
+ }
1541
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
1539
1542
  textAlign: "left",
1540
1543
  fontSize: sizeParams.fontSize,
1541
1544
  noWrap: true,
@@ -1553,11 +1556,6 @@ var BlerpListView$1 = function BlerpListView(_ref) {
1553
1556
  handleClickTitle();
1554
1557
  }
1555
1558
  }
1556
- }, /*#__PURE__*/React__default['default'].createElement("a", {
1557
- href: "/soundbites/".concat(bite._id),
1558
- style: {
1559
- textDecoration: "none"
1560
- }
1561
1559
  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1562
1560
  textAlign: "left",
1563
1561
  fontSize: sizeParams.fontSize,
@@ -1651,6 +1649,371 @@ BlerpListView$1.propTypes = {
1651
1649
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1652
1650
  };
1653
1651
 
1652
+ var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1653
+ var MasterContainer = styled__default['default'].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n display: flex;\n /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n height: ", ";\n width: ", ";\n min-width: ", ";\n border-radius: 8px;\n background-origin: border-box;\n background-clip: content-box, border-box;\n box-shadow: 2px 2px 4px 0px #999999a1;\n position: relative;\n\n #second-button {\n opacity: 0;\n margin-left: 0px;\n margin-right: 15px;\n }\n\n :hover #yellow-border {\n opacity: 1;\n }\n :hover #second-button {\n opacity: 1;\n margin-left: 5px;\n margin-right: 10px;\n }\n :hover #mid-box {\n width: 96%;\n }\n :hover #back-box {\n width: ", ";\n }\n"])), function (_ref) {
1654
+ var sizeParams = _ref.sizeParams;
1655
+ return (sizeParams.height += 2) + "px";
1656
+ }, function (_ref2) {
1657
+ var sizeParams = _ref2.sizeParams;
1658
+ return sizeParams.width;
1659
+ }, function (_ref3) {
1660
+ var fluid = _ref3.fluid;
1661
+ return fluid ? "300px" : "0";
1662
+ }, function (props) {
1663
+ return props.owned ? "102%" : "100%";
1664
+ });
1665
+ var YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 113%;\n width: 102%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 3px solid rgb(255, 225, 76);\n border-radius: 14px;\n transition: opacity 0.2s ease-in-out;\n opacity: 0;\n"])));
1666
+ var TopBox = styled__default['default'].div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral__default['default'](["\n z-index: 3;\n border: 2px transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ", ";\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n position: relative;\n overflow: hidden;\n"])), function (props) {
1667
+ return props.theme.colors.white;
1668
+ });
1669
+ var MidBox = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n z-index: 2;\n position: absolute;\n background-color: ", ";\n width: 95%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1670
+ return props.theme.colors.grey5;
1671
+ });
1672
+ var BackBox = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral__default['default'](["\n background-color: blue;\n background-color: ", ";\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n transition: 0.2s;\n overflow: hidden;\n"])), function (props) {
1673
+ return props.theme.colors.grey7;
1674
+ });
1675
+ var PhotoBackground = styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n overflow: hidden;\n background-position: center;\n"])), function (props) {
1676
+ return props.url;
1677
+ });
1678
+ var BlurBackground = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n backdrop-filter: blur(4px);\n"])));
1679
+ var GradientBackground = styled__default['default'].div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n opacity: 0.7;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 8px;\n width: 100%;\n height: 100%;\n"])));
1680
+ var InteractionBox = styled__default['default'].div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: calc(100% - 4px);\n height: 100%;\n border-radius: 8px;\n border-right-width: 0px;\n border-left-width: 0px;\n margin: 0 auto;\n transition: 0.2s;\n position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
1681
+
1682
+ var SaveBox = styled__default['default'].div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n border-radius: 4px;\n transition: 0.2s;\n box-shadow: 0px 0px 0px 0px #999999a1;\n cursor: pointer;\n\n &:hover {\n transform: scale(1.05);\n }\n"])));
1683
+ var SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n z-index: 5;\n width: 100%;\n position: relative;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n"])), function (props) {
1684
+ return props.theme.colors.notBlackOverride;
1685
+ });
1686
+ var SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n opacity: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n border-radius: 4px;\n"])));
1687
+ var SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n ", ";\n"])), function (props) {
1688
+ return props.depth === "1" ? "\n transform: skewX(-5deg); \n left: 2px; \n height: 94%; \n bottom: 0" : props.depth === "2" ? "\n transform: skewX(-12deg); \n left: 5px; \n height: 83%; \n width:97%;\n bottom: 0" : "";
1689
+ });
1690
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1691
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1692
+
1693
+ var collection = _ref4.collection,
1694
+ variantSize = _ref4.variantSize,
1695
+ extraInfoComponent = _ref4.extraInfoComponent,
1696
+ primaryActionButton = _ref4.primaryActionButton,
1697
+ secondaryActionButton = _ref4.secondaryActionButton,
1698
+ handleClickBackground = _ref4.handleClickBackground,
1699
+ handleClickTitle = _ref4.handleClickTitle,
1700
+ isLinkTitle = _ref4.isLinkTitle,
1701
+ fluid = _ref4.fluid;
1702
+
1703
+ var _useState = React.useState(false),
1704
+ _useState2 = _slicedToArray__default['default'](_useState, 2);
1705
+ _useState2[0];
1706
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1707
+
1708
+
1709
+ var _usePalette = reactPalette.usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
1710
+ _usePalette.loading;
1711
+ var data = _usePalette.data;
1712
+ _usePalette.error;
1713
+
1714
+ var theme = React.useContext(styled.ThemeContext);
1715
+ var size = useWindowSize();
1716
+ console.log("Collleeeeection", collection);
1717
+ var sizeParams;
1718
+ var smallSize = {
1719
+ width: "300px",
1720
+ height: 40,
1721
+ fontSize: "16px",
1722
+ saveBoxSize: "36px",
1723
+ reactionSpacing: 1,
1724
+ reactionPadding: "3px",
1725
+ reactionSize: "20px",
1726
+ buttonSize: "small"
1727
+ };
1728
+ var mediumSize = {
1729
+ width: "375px",
1730
+ height: 48,
1731
+ fontSize: "18px",
1732
+ saveBoxSize: "44px",
1733
+ reactionSpacing: 1,
1734
+ reactionPadding: "3px",
1735
+ reactionSize: "23px",
1736
+ buttonSize: "medium"
1737
+ };
1738
+ var largeSize = {
1739
+ width: "440px",
1740
+ height: 56,
1741
+ fontSize: "20px",
1742
+ saveBoxSize: "52px",
1743
+ reactionSpacing: 1,
1744
+ reactionPadding: "5px",
1745
+ reactionSize: "30px",
1746
+ buttonFontSize: "large"
1747
+ };
1748
+
1749
+ if (!variantSize) {
1750
+ if (fluid) {
1751
+ sizeParams = {
1752
+ width: "100%",
1753
+ height: 48,
1754
+ fontSize: "18px",
1755
+ saveBoxSize: "44px",
1756
+ reactionSpacing: 1,
1757
+ reactionPadding: "3px",
1758
+ reactionSize: "23px",
1759
+ buttonSize: "medium"
1760
+ };
1761
+ } else if (size.width <= 400) {
1762
+ sizeParams = smallSize;
1763
+ } else if (size.width <= 900) {
1764
+ sizeParams = mediumSize;
1765
+ } else if (size.width > 900) {
1766
+ sizeParams = largeSize;
1767
+ }
1768
+ } else {
1769
+ if (variantSize === "small") {
1770
+ sizeParams = smallSize;
1771
+ } else if (variantSize === "medium") {
1772
+ console.log(variantSize);
1773
+ sizeParams = mediumSize;
1774
+ } else if (variantSize === "large") {
1775
+ sizeParams = largeSize;
1776
+ }
1777
+ }
1778
+
1779
+ return (
1780
+ /*#__PURE__*/
1781
+ // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
1782
+
1783
+ /* BIG PICTURE OF COMPONENT:
1784
+ Master Container
1785
+ - TopBox (solid white background)
1786
+ - PhotoBackground (if collection has photo)
1787
+ - BlurBackground (always applied)
1788
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
1789
+ - Interaction Box (holds clickable elements)
1790
+ - MidBox (first "shadow")
1791
+ - BackBox (second "shadow")
1792
+ */
1793
+ React__default['default'].createElement(MasterContainer, {
1794
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1795
+ sizeParams: sizeParams,
1796
+ fluid: fluid
1797
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
1798
+ id: "yellow-border"
1799
+ }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
1800
+ onClick: function onClick(e) {
1801
+ e.stopPropagation();
1802
+ handleClickBackground();
1803
+ },
1804
+ style: {
1805
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
1806
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1807
+ }
1808
+ }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
1809
+ url: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url
1810
+ }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
1811
+ style: {
1812
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1813
+ }
1814
+ }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
1815
+ style: {
1816
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
1817
+ }
1818
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1819
+ direction: "row",
1820
+ justifyContent: "flex-start",
1821
+ alignItems: "center",
1822
+ sx: {
1823
+ position: "relative",
1824
+ width: "calc(100% - 180px)",
1825
+ left: "2px"
1826
+ }
1827
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
1828
+ style: {
1829
+ width: sizeParams.saveBoxSize,
1830
+ height: sizeParams.saveBoxSize
1831
+ },
1832
+ onClick: function onClick(e) {
1833
+ console.log("handle save/unsave here");
1834
+ }
1835
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
1836
+ style: {
1837
+ width: sizeParams.saveBoxSize,
1838
+ height: sizeParams.saveBoxSize,
1839
+ background: data.darkVibrant || "#999999"
1840
+ }
1841
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
1842
+ style: {
1843
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
1844
+ }
1845
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1846
+ sx: {
1847
+ width: "30px",
1848
+ height: "30px",
1849
+ color: "white.override",
1850
+ position: "relative",
1851
+ bottom: "1px"
1852
+ }
1853
+ }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1854
+ sx: {
1855
+ width: "30px",
1856
+ height: "30px",
1857
+ color: "white.override",
1858
+ position: "relative",
1859
+ bottom: "1px"
1860
+ }
1861
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1862
+ depth: "2",
1863
+ style: {
1864
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1865
+ }
1866
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1867
+ depth: "1",
1868
+ style: {
1869
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1870
+ }
1871
+ })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1872
+ href: "/sound-collection/".concat(collection._id),
1873
+ style: {
1874
+ textDecoration: "none",
1875
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1876
+ position: "relative",
1877
+ left: "12px"
1878
+ }
1879
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
1880
+ textAlign: "left",
1881
+ fontSize: sizeParams.fontSize,
1882
+ noWrap: true,
1883
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1884
+ sx: {
1885
+ ":hover": {
1886
+ textDecoration: handleClickTitle ? "underline" : "none"
1887
+ },
1888
+ "@media (max-width: 600px)": {
1889
+ maxWidth: "133px"
1890
+ }
1891
+ },
1892
+ onClick: function onClick(e) {
1893
+ if (handleClickTitle) {
1894
+ e.stopPropagation();
1895
+ handleClickTitle();
1896
+ }
1897
+ }
1898
+ }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1899
+ textAlign: "left",
1900
+ fontSize: sizeParams.fontSize,
1901
+ noWrap: true,
1902
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1903
+ sx: {
1904
+ position: "relative",
1905
+ left: "12px",
1906
+ ":hover": {
1907
+ textDecoration: handleClickTitle ? "underline" : "none"
1908
+ },
1909
+ "@media (max-width: 600px)": {
1910
+ maxWidth: "133px"
1911
+ }
1912
+ },
1913
+ onClick: function onClick(e) {
1914
+ console.log("handle non-linkTitle click here");
1915
+ }
1916
+ }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1917
+ direction: "row",
1918
+ justifyContent: "flex-end",
1919
+ alignItems: "center",
1920
+ sx: {
1921
+ height: "70%"
1922
+ }
1923
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
1924
+ direction: "row",
1925
+ justifyContent: "space-around",
1926
+ alignItems: "center",
1927
+ sx: {
1928
+ height: "100%",
1929
+ width: "102px",
1930
+ position: "relative"
1931
+ }
1932
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1933
+ sx: {
1934
+ borderRadius: "20px",
1935
+ position: "absolute",
1936
+ top: "0",
1937
+ bottom: "0",
1938
+ left: "0",
1939
+ right: "0",
1940
+ backgroundColor: "notBlack.main",
1941
+ opacity: ".5"
1942
+ }
1943
+ }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1944
+ sx: {
1945
+ opacity: "1",
1946
+ zIndex: "2",
1947
+ color: "white.override",
1948
+ height: "18px"
1949
+ }
1950
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
1951
+ sx: {
1952
+ zIndex: "2",
1953
+ color: "white.override",
1954
+ fontWeight: "lighter",
1955
+ fontSize: "14px",
1956
+ cursor: "default",
1957
+ position: "relative",
1958
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
1959
+ }
1960
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1961
+ sx: {
1962
+ zIndex: "2",
1963
+ color: "white.override",
1964
+ height: "14px"
1965
+ }
1966
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1967
+ id: "second-button",
1968
+ onClick: function onClick(e) {
1969
+ console.log("handle secondary button click here");
1970
+ },
1971
+ sx: {
1972
+ padding: "5px",
1973
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
1974
+ "&:hover": {
1975
+ backgroundColor: "grey6.main"
1976
+ }
1977
+ }
1978
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1979
+ sx: {
1980
+ borderRadius: "20px",
1981
+ position: "absolute",
1982
+ top: "0",
1983
+ bottom: "0",
1984
+ left: "0",
1985
+ right: "0",
1986
+ backgroundColor: "notBlack.main",
1987
+ opacity: ".5"
1988
+ }
1989
+ }), /*#__PURE__*/React__default['default'].createElement(KeyboardArrowRightRoundedIcon__default['default'], {
1990
+ sx: {
1991
+ zIndex: "2",
1992
+ color: "white.override"
1993
+ }
1994
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
1995
+ id: "mid-box"
1996
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
1997
+ id: "back-box"
1998
+ }), extraInfoComponent && extraInfoComponent)
1999
+ );
2000
+ };
2001
+ CollectionListViewPremium$1.propTypes = {
2002
+ collection: PropTypes__default['default'].object.isRequired,
2003
+ collections: PropTypes__default['default'].array.isRequired,
2004
+ variantSize: PropTypes__default['default'].string.isRequired,
2005
+ userSignedIn: PropTypes__default['default'].object.isRequired,
2006
+ isSelected: PropTypes__default['default'].bool.isRequired,
2007
+ playingState: PropTypes__default['default'].string.isRequired,
2008
+ actionButton: PropTypes__default['default'].object,
2009
+ getUserReactions: PropTypes__default['default'].func.isRequired,
2010
+ createCollection: PropTypes__default['default'].func.isRequired,
2011
+ handleClickBackground: PropTypes__default['default'].func.isRequired,
2012
+ handleClickSave: PropTypes__default['default'].func.isRequired,
2013
+ handleClickReaction: PropTypes__default['default'].func.isRequired,
2014
+ handleClickUnsave: PropTypes__default['default'].func.isRequired
2015
+ };
2016
+
1654
2017
  var _templateObject$a, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
1655
2018
  // _id: "5b237fbafca7167a35619410",
1656
2019
  // title: "Crying",
@@ -2959,7 +3322,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
2959
3322
  descriptionInput = _useState10[0],
2960
3323
  setDescriptionInput = _useState10[1];
2961
3324
 
2962
- var _useState11 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility),
3325
+ var _useState11 = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility) || "PUBLIC"),
2963
3326
  _useState12 = _slicedToArray__default['default'](_useState11, 2),
2964
3327
  visibility = _useState12[0],
2965
3328
  setVisibility = _useState12[1];
@@ -3333,12 +3696,19 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
3333
3696
  }, {
3334
3697
  name: "UNLISTED"
3335
3698
  }]
3336
- })), isAdmin && /*#__PURE__*/React__default['default'].createElement(Toggle, {
3699
+ })), isAdmin && /*#__PURE__*/React__default['default'].createElement(Stack, {
3700
+ sx: {
3701
+ width: "40%"
3702
+ }
3703
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
3704
+ marginBottom: "4px",
3705
+ fontSize: "18px"
3706
+ }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(Toggle, {
3337
3707
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
3338
- onChange: function onChange() {
3708
+ onClick: function onClick() {
3339
3709
  return handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3340
3710
  }
3341
- }), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3711
+ })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3342
3712
  sx: {
3343
3713
  width: "40%"
3344
3714
  }
@@ -6634,9 +7004,7 @@ var JiggleLock = {
6634
7004
  var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
6635
7005
  //primary and secondary action buttons
6636
7006
 
6637
- var YellowHoverBorder = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) {
6638
- return props.isLocked && props.collectionHovered ? "1" : "0";
6639
- });
7007
+ var YellowHoverBorder = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
6640
7008
  var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _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"])));
6641
7009
  var TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), function (props) {
6642
7010
  return props.isLocked ? props.collectionHovered ? "90%" : "65%" : "45%";
@@ -6661,6 +7029,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
6661
7029
  variantSize = _ref.variantSize,
6662
7030
  handleClickBackground = _ref.handleClickBackground,
6663
7031
  handleClickSave = _ref.handleClickSave,
7032
+ handleClickView = _ref.handleClickView,
7033
+ handleClickUnlock = _ref.handleClickUnlock,
6664
7034
  primaryActionButton = _ref.primaryActionButton,
6665
7035
  secondaryActionButton = _ref.secondaryActionButton,
6666
7036
  fluid = _ref.fluid,
@@ -6722,7 +7092,8 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
6722
7092
  return setCardColors(colors);
6723
7093
  }
6724
7094
  }), /*#__PURE__*/React__default['default'].createElement(Box, {
6725
- onClick: function onClick() {
7095
+ onClick: function onClick(e) {
7096
+ e.stopPropagation();
6726
7097
  handleClickBackground();
6727
7098
  },
6728
7099
  sx: {
@@ -6746,11 +7117,13 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
6746
7117
  height: isLocked ? "" : "84%",
6747
7118
  right: isLocked ? "" : "-20px",
6748
7119
  top: isLocked ? "" : "24px"
7120
+ },
7121
+ ":hover #yellow-border": {
7122
+ opacity: "1"
6749
7123
  }
6750
7124
  }
6751
- }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder, {
6752
- isLocked: isLocked,
6753
- collectionHovered: collectionHovered
7125
+ }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLocked && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder, {
7126
+ id: "yellow-border"
6754
7127
  }), /*#__PURE__*/React__default['default'].createElement(Box, {
6755
7128
  sx: {
6756
7129
  backgroundColor: "white.override",
@@ -7009,7 +7382,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7009
7382
  }
7010
7383
  })), /*#__PURE__*/React__default['default'].createElement(Text, {
7011
7384
  sx: {
7012
- color: "white.main",
7385
+ color: "white.override",
7013
7386
  textAlign: "center",
7014
7387
  lineHeight: "1",
7015
7388
  margin: "4px 0",
@@ -7018,6 +7391,10 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7018
7391
  }
7019
7392
  }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), /*#__PURE__*/React__default['default'].createElement(Button, {
7020
7393
  disabled: !collectionHovered,
7394
+ onClick: function onClick(e) {
7395
+ e.stopPropagation();
7396
+ handleClickView();
7397
+ },
7021
7398
  variant: "contained",
7022
7399
  sx: {
7023
7400
  width: "70%",
@@ -7027,34 +7404,24 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7027
7404
  }
7028
7405
  }, "VIEW SOUNDPACK"), /*#__PURE__*/React__default['default'].createElement(Button, {
7029
7406
  disabled: !collectionHovered,
7407
+ onClick: function onClick(e) {
7408
+ e.stopPropagation();
7409
+ handleClickUnlock();
7410
+ },
7030
7411
  variant: "outlined",
7412
+ color: "whiteOverride",
7031
7413
  sx: {
7032
7414
  width: "50%",
7033
7415
  margin: "6px 0",
7034
7416
  padding: "2px 8px",
7035
- color: "white.main",
7036
- borderColor: "white.main",
7037
7417
  borderWidth: "2px !important",
7038
- overflow: "hidden",
7039
- "&:hover": {
7040
- borderColor: "white.main"
7041
- },
7042
- "&:hover #button-background": {
7043
- position: "absolute",
7044
- top: "0",
7045
- right: "0",
7046
- left: "0",
7047
- bottom: "0",
7048
- borderColor: "white.main",
7049
- backgroundColor: "white.main",
7050
- opacity: ".2"
7051
- }
7418
+ overflow: "hidden"
7052
7419
  }
7053
7420
  }, /*#__PURE__*/React__default['default'].createElement("div", {
7054
7421
  id: "button-background"
7055
7422
  }), /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
7056
7423
  sx: {
7057
- color: "white.main",
7424
+ color: "white.override",
7058
7425
  zIndex: "3",
7059
7426
  height: ".8rem",
7060
7427
  position: "relative",
@@ -7091,7 +7458,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
7091
7458
  variantSize = _ref.variantSize,
7092
7459
  handleClickBackground = _ref.handleClickBackground,
7093
7460
  handleClickSave = _ref.handleClickSave,
7094
- handleClickDrag = _ref.handleClickDrag;
7461
+ handleClickDrag = _ref.handleClickDrag,
7462
+ handleClickView = _ref.handleClickView,
7463
+ handleClickUnlock = _ref.handleClickUnlock;
7095
7464
  _ref.handleClickPrimaryAction;
7096
7465
  var handleClickSecondaryAction = _ref.handleClickSecondaryAction,
7097
7466
  primaryActionButton = _ref.primaryActionButton,
@@ -7213,6 +7582,8 @@ var CollectionCard$1 = function CollectionCard(_ref) {
7213
7582
  collection: collection,
7214
7583
  variantSize: variantSize,
7215
7584
  handleClickBackground: handleClickBackground,
7585
+ handleClickView: handleClickView,
7586
+ handleClickUnlock: handleClickUnlock,
7216
7587
  handleClickSave: handleClickSave,
7217
7588
  handleClickDrag: handleClickDrag,
7218
7589
  primaryActionButton: primaryActionButton,
@@ -7342,7 +7713,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
7342
7713
  title: "This collection has been removed or hidden"
7343
7714
  }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.LockRounded, {
7344
7715
  sx: {
7345
- color: "white.main",
7716
+ color: "white.override",
7346
7717
  fontSize: "35px"
7347
7718
  }
7348
7719
  })), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -8303,21 +8674,16 @@ var USDFormat$2 = new Intl.NumberFormat("en-US", {
8303
8674
  });
8304
8675
 
8305
8676
  var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8306
- var _bite$image, _bite$image$original;
8307
-
8308
8677
  var show = _ref.show,
8309
8678
  price = _ref.price;
8310
- _ref.catalogItem;
8311
- _ref.buttonWeight;
8312
- _ref.uniqueColor;
8313
- _ref.isLocked;
8314
- var salesTax = _ref.salesTax;
8315
- _ref.setPaymentModalOpen;
8679
+ _ref.salesTax;
8316
8680
  var handleClose = _ref.handleClose,
8317
8681
  handleSubmit = _ref.handleSubmit,
8682
+ handleClickPlay = _ref.handleClickPlay,
8683
+ playingState = _ref.playingState,
8318
8684
  bite = _ref.bite,
8319
8685
  clientToken = _ref.clientToken;
8320
- useWindowSize();
8686
+ var size = useWindowSize();
8321
8687
 
8322
8688
  var _useState = React.useState({}),
8323
8689
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8329,104 +8695,109 @@ var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8329
8695
  dropinInstanceReady = _useState4[0],
8330
8696
  setDropInstanceReady = _useState4[1];
8331
8697
 
8332
- React.useRef();
8333
- var total = price + salesTax;
8334
- console.log("MODALBITE:", bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url);
8335
- React.useEffect( /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
8336
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
8337
- while (1) {
8338
- switch (_context.prev = _context.next) {
8339
- case 0:
8340
- if (!show) {
8341
- _context.next = 12;
8342
- break;
8343
- }
8344
-
8345
- _context.prev = 1;
8346
- document.getElementById("payment-form");
8347
- _context.next = 5;
8348
- return BrainTreeDropIn$2.create({
8349
- authorization: clientToken,
8350
- selector: "#dropin-container",
8351
- paypal: {
8352
- flow: "vault",
8353
- amount: USDFormat$2.format(price),
8354
- currency: "USD",
8355
- buttonStyle: {
8356
- color: "blue",
8357
- shape: "rect",
8358
- size: "medium"
8359
- }
8360
- },
8361
- displayName: "Premium Blerp",
8362
- paymentRequest: {
8363
- total: {
8364
- label: "Premium Blerp Cart",
8365
- amount: USDFormat$2.format(price)
8366
- },
8367
- // We recommend collecting billing address information, at minimum
8368
- // billing postal code, and passing that billing postal code with all
8369
- // Apple Pay transactions as a best practice.
8370
- requiredBillingContactFields: ["postalAddress"]
8371
- } // googlePay: {
8372
- // googlePayVersion: 2,
8373
- // merchantId: projectConfig.googleMerchantId
8374
- // ? projectConfig.googleMerchantId
8375
- // : null,
8376
- // environment: projectConfig.googleMerchantId ? "PRODUCTION" : "TEST",
8377
- // transactionInfo: {
8378
- // totalPriceStatus: "FINAL",
8379
- // totalPrice: catalogItem.price.toString(),
8380
- // totalPriceLabel: "Blerp Beets",
8381
- // countryCode: "US",
8382
- // currencyCode: "USD",
8383
- // },
8384
- // allowedPaymentMethods: [
8385
- // {
8386
- // type: "CARD",
8387
- // parameters: {
8388
- // // We recommend collecting and passing billing address information with all Google Pay transactions as a best practice.
8389
- // billingAddressRequired: true,
8390
- // billingAddressParameters: {
8391
- // format: "FULL",
8392
- // },
8393
- // },
8394
- // },
8395
- // ],
8396
- // },
8397
- // venmo: {
8398
- // allowDesktop: true,
8399
- // profileId: projectConfig.venmoProfileId,
8400
- // allowNewBrowserTab: true,
8401
- // }, // The `venmo` object requires no properties to instantiate.
8698
+ var total = price.toFixed(2);
8699
+ React.useEffect(function () {
8700
+ var createBraintreeDropIn = /*#__PURE__*/function () {
8701
+ var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
8702
+ return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
8703
+ while (1) {
8704
+ switch (_context.prev = _context.next) {
8705
+ case 0:
8706
+ _context.prev = 0;
8707
+ document.getElementById("payment-form");
8708
+ _context.next = 4;
8709
+ return BrainTreeDropIn$2.create({
8710
+ authorization: clientToken,
8711
+ selector: "#dropin-container",
8712
+ paypal: {
8713
+ flow: "vault",
8714
+ amount: USDFormat$2.format(price),
8715
+ currency: "USD",
8716
+ buttonStyle: {
8717
+ color: "blue",
8718
+ shape: "rect",
8719
+ size: "medium"
8720
+ }
8721
+ },
8722
+ displayName: "Premium Blerp",
8723
+ paymentRequest: {
8724
+ total: {
8725
+ label: "Premium Blerp Cart",
8726
+ amount: USDFormat$2.format(price)
8727
+ },
8728
+ // We recommend collecting billing address information, at minimum
8729
+ // billing postal code, and passing that billing postal code with all
8730
+ // Apple Pay transactions as a best practice.
8731
+ requiredBillingContactFields: ["postalAddress"]
8732
+ } // googlePay: {
8733
+ // googlePayVersion: 2,
8734
+ // merchantId: projectConfig.googleMerchantId
8735
+ // ? projectConfig.googleMerchantId
8736
+ // : null,
8737
+ // environment: projectConfig.googleMerchantId ? "PRODUCTION" : "TEST",
8738
+ // transactionInfo: {
8739
+ // totalPriceStatus: "FINAL",
8740
+ // totalPrice: catalogItem.price.toString(),
8741
+ // totalPriceLabel: "Blerp Beets",
8742
+ // countryCode: "US",
8743
+ // currencyCode: "USD",
8744
+ // },
8745
+ // allowedPaymentMethods: [
8746
+ // {
8747
+ // type: "CARD",
8748
+ // parameters: {
8749
+ // // We recommend collecting and passing billing address information with all Google Pay transactions as a best practice.
8750
+ // billingAddressRequired: true,
8751
+ // billingAddressParameters: {
8752
+ // format: "FULL",
8753
+ // },
8754
+ // },
8755
+ // },
8756
+ // ],
8757
+ // },
8758
+ // venmo: {
8759
+ // allowDesktop: true,
8760
+ // profileId: projectConfig.venmoProfileId,
8761
+ // allowNewBrowserTab: true,
8762
+ // }, // The `venmo` object requires no properties to instantiate.
8763
+
8764
+ }, function (err, dropinInstance) {
8765
+ if (err !== null && err !== void 0 && err.message) ;
8766
+
8767
+ console.log(dropinInstance);
8768
+ setDropInstance(dropinInstance);
8769
+ setDropInstanceReady(true);
8770
+ });
8402
8771
 
8403
- }, function (err, dropinInstance) {
8404
- if (err !== null && err !== void 0 && err.message) ;
8772
+ case 4:
8773
+ _context.next = 11;
8774
+ break;
8405
8775
 
8406
- console.log(dropinInstance);
8407
- setDropInstance(dropinInstance);
8408
- setDropInstanceReady(true);
8409
- });
8776
+ case 7:
8777
+ _context.prev = 7;
8778
+ _context.t0 = _context["catch"](0);
8779
+ console.log(_context.t0); // useToast(`${err}`, "error");
8780
+ // setBeetScreenState("HOME");
8410
8781
 
8411
- case 5:
8412
- _context.next = 12;
8413
- break;
8782
+ return _context.abrupt("return");
8414
8783
 
8415
- case 8:
8416
- _context.prev = 8;
8417
- _context.t0 = _context["catch"](1);
8418
- console.log(_context.t0); // useToast(`${err}`, "error");
8419
- // setBeetScreenState("HOME");
8784
+ case 11:
8785
+ case "end":
8786
+ return _context.stop();
8787
+ }
8788
+ }
8789
+ }, _callee, null, [[0, 7]]);
8790
+ }));
8420
8791
 
8421
- return _context.abrupt("return");
8792
+ return function createBraintreeDropIn() {
8793
+ return _ref2.apply(this, arguments);
8794
+ };
8795
+ }();
8422
8796
 
8423
- case 12:
8424
- case "end":
8425
- return _context.stop();
8426
- }
8427
- }
8428
- }, _callee, null, [[1, 8]]);
8429
- })), [show]);
8797
+ if (show) {
8798
+ createBraintreeDropIn();
8799
+ }
8800
+ }, [show, clientToken, price]);
8430
8801
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
8431
8802
  sx: {
8432
8803
  backgroundColor: "white.main",
@@ -8500,30 +8871,28 @@ var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8500
8871
  isPremium: true,
8501
8872
  isLinkTitle: true,
8502
8873
  bite: bite,
8503
- isOwner: false // collections={collections}
8504
- ,
8505
- variantSize: "medium" // userSignedIn={userSignedIn}
8506
- ,
8507
- unsaveButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) // isSelected={selectedBlerp?._id === bite2?._id}
8508
- // playingState={playing}
8509
- // getUserReactions={() => getUserReactions()}
8510
- // handleClickOrganize={() => handleClickOrganize()}
8511
- // createCollection={(data) => createCollection(data)}
8512
- // handleClickBackground={(clickedOn) => {
8513
- // if (clickedOn) {
8514
- // setSelectedBlerp(bite2);
8515
- // } else {
8516
- // setSelectedBlerp(null);
8517
- // }
8518
- // }}
8519
- // handleClickPlay={() => handleClickPlay()}
8520
- // handleClickThreeDot={() => handleClickThreeDot()}
8521
- // handleClickSave={() => handleClickSave()}
8522
- // handleClickReaction={(reaction, isRemove) =>
8523
- // handleClickReaction(reaction, isRemove)
8524
- // }
8525
- // handleClickUnsave={() => handleClickUnsave()}
8526
-
8874
+ isOwner: false,
8875
+ variantSize: "medium",
8876
+ unsaveButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
8877
+ playingState: playingState,
8878
+ handleClickBackground: function handleClickBackground() {
8879
+ return null;
8880
+ },
8881
+ handleClickPlay: handleClickPlay,
8882
+ handleClickThreeDot: function handleClickThreeDot() {
8883
+ return null;
8884
+ },
8885
+ handleClickReaction: function handleClickReaction() {
8886
+ return null;
8887
+ },
8888
+ getUserReactions: function getUserReactions() {
8889
+ return null;
8890
+ },
8891
+ handleClickSave: function handleClickSave() {
8892
+ return null;
8893
+ },
8894
+ primaryActionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
8895
+ secondaryActionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
8527
8896
  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
8528
8897
  sx: {
8529
8898
  "@media(max-width: 1100px)": {
@@ -8558,14 +8927,6 @@ var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8558
8927
  direction: "row",
8559
8928
  alignItems: "center",
8560
8929
  justifyContent: "space-between"
8561
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
8562
- fontSize: "21px"
8563
- }, "Today's Sales Tax"), /*#__PURE__*/React__default['default'].createElement(Text, {
8564
- fontSize: "21px"
8565
- }, " $", salesTax)), /*#__PURE__*/React__default['default'].createElement(Stack, {
8566
- direction: "row",
8567
- alignItems: "center",
8568
- justifyContent: "space-between"
8569
8930
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
8570
8931
  fontSize: "28px"
8571
8932
  }, "Today's Total"), /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -8631,9 +8992,10 @@ var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8631
8992
  fontWeight: "light",
8632
8993
  textAlign: "justify",
8633
8994
  sx: {
8634
- textAlign: "center"
8995
+ textAlign: size.width > 1100 ? "left" : "center",
8996
+ width: size.width > 1100 ? "50%" : "100%"
8635
8997
  }
8636
- }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum saepe voluptatibus illo sapiente! Accusantium amet architecto consectetur aliquid iste, nulla officiis minus. Minus libero impedit recusandae sint! Molestiae, ipsum recusandae? ", /*#__PURE__*/React__default['default'].createElement("br", null), "By purchasing, you agree to the preceding subscription terms and our", " ", /*#__PURE__*/React__default['default'].createElement("a", {
8998
+ }, "You will be charged for a Premium Blerp minus applied offers plus applicable taxes. By purchasing, you agree to our purchasing", " ", /*#__PURE__*/React__default['default'].createElement("a", {
8637
8999
  href: "/terms-of-sale",
8638
9000
  target: "_blank",
8639
9001
  rel: "noreferrer"
@@ -8667,7 +9029,7 @@ var PremiumCollectionCheckoutModal = function PremiumCollectionCheckoutModal(_re
8667
9029
  handleSubmit = _ref.handleSubmit,
8668
9030
  collection = _ref.collection,
8669
9031
  clientToken = _ref.clientToken;
8670
- useWindowSize(); // const [clientToken, setClientToken] = useState(null);
9032
+ var size = useWindowSize(); // const [clientToken, setClientToken] = useState(null);
8671
9033
 
8672
9034
  var _useState = React.useState({}),
8673
9035
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8948,9 +9310,10 @@ var PremiumCollectionCheckoutModal = function PremiumCollectionCheckoutModal(_re
8948
9310
  fontWeight: "light",
8949
9311
  textAlign: "justify",
8950
9312
  sx: {
8951
- textAlign: "center"
9313
+ textAlign: size.width > 1100 ? "left" : "center",
9314
+ width: size.width > 1100 ? "50%" : "100%"
8952
9315
  }
8953
- }, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum saepe voluptatibus illo sapiente! Accusantium amet architecto consectetur aliquid iste, nulla officiis minus. Minus libero impedit recusandae sint! Molestiae, ipsum recusandae? ", /*#__PURE__*/React__default['default'].createElement("br", null), "By purchasing, you agree to the preceding subscription terms and our", " ", /*#__PURE__*/React__default['default'].createElement("a", {
9316
+ }, "You will be charged for a Premium SoundPack minus applied offers plus applicable taxes. By purchasing, you agree to our purchasing", " ", /*#__PURE__*/React__default['default'].createElement("a", {
8954
9317
  href: "/terms-of-sale",
8955
9318
  target: "_blank",
8956
9319
  rel: "noreferrer"
@@ -9275,7 +9638,8 @@ var PremiumSubscriptionCheckoutModal = function PremiumSubscriptionCheckoutModal
9275
9638
  fontWeight: "light",
9276
9639
  textAlign: "justify",
9277
9640
  sx: {
9278
- textAlign: "center"
9641
+ textAlign: size.width > 1100 ? "left" : "center",
9642
+ width: size.width > 1100 ? "50%" : "100%"
9279
9643
  }
9280
9644
  }, "You will be charged $2.99/month for Blerp Premium minus applied offers plus applicable taxes. Your subscription will auto-renew until you cancel. Cancel at any time by visiting your Account.", /*#__PURE__*/React__default['default'].createElement("br", null), "By subscribing, you agree to the preceding subscription terms and our", " ", /*#__PURE__*/React__default['default'].createElement("a", {
9281
9645
  href: "/terms-of-sale",
@@ -9343,6 +9707,7 @@ var MenuItem = material.MenuItem;
9343
9707
  var NewCollectionModal = NewCollectionModal$1;
9344
9708
  var CollectionCard = CollectionCard$1;
9345
9709
  var BlerpListView = BlerpListView$1;
9710
+ var CollectionListViewPremium = CollectionListViewPremium$1;
9346
9711
  var BlerpListViewPremium = BlerpListViewPremium$1;
9347
9712
  var BlerpSkeleton = BlerpSkeleton$1;
9348
9713
  var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
@@ -9613,6 +9978,7 @@ exports.Chip = Chip;
9613
9978
  exports.ClockIcon = ClockIcon;
9614
9979
  exports.CogIcon = CogIcon;
9615
9980
  exports.CollectionCard = CollectionCard;
9981
+ exports.CollectionListViewPremium = CollectionListViewPremium;
9616
9982
  exports.CollectionSkeleton = CollectionSkeleton;
9617
9983
  exports.Container = Container;
9618
9984
  exports.CrownIcon = CrownIcon;