@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.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/Delete'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/CloseRounded', '@mui/icons-material/Delete', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.CloseRoundedIcon, global.DeleteIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
5
- }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, _defineProperty, KeyboardArrowDownRoundedIcon, _asyncToGenerator, _regeneratorRuntime, CloseRoundedIcon, DeleteIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/Delete'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/CloseRounded', '@mui/icons-material/Delete', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.CloseRoundedIcon, global.DeleteIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
5
+ }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, _asyncToGenerator, _regeneratorRuntime, CloseRoundedIcon, DeleteIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -16,6 +16,7 @@
16
16
  var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
17
17
  var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
18
18
  var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
19
+ var KeyboardArrowRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowRightRoundedIcon);
19
20
  var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
21
  var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
21
22
  var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
@@ -46,23 +47,23 @@
46
47
  var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
47
48
  var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
48
49
 
49
- var _templateObject$e, _templateObject2$9, _templateObject3$8, _templateObject4$6;
50
- 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) {
50
+ var _templateObject$f, _templateObject2$a, _templateObject3$9, _templateObject4$7;
51
+ 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) {
51
52
  return props.url;
52
53
  });
53
- 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) {
54
+ 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) {
54
55
  return props.theme.colors.whiteOverride;
55
56
  }, function (props) {
56
57
  return props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam);
57
58
  }, function (props) {
58
59
  return props.theme.colors.white;
59
60
  });
60
- 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) {
61
+ 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) {
61
62
  return props.theme.colors.grey6Override;
62
63
  }, function (props) {
63
64
  return props.theme.colors.grey6Override;
64
65
  }, SaveContainer$2);
65
- 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) {
66
+ 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) {
66
67
  return props.theme.colors.grey3;
67
68
  }, function (props) {
68
69
  return props.theme.colors.grey3;
@@ -217,8 +218,8 @@
217
218
  }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, null)))))));
218
219
  };
219
220
 
220
- var _templateObject$d;
221
- 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) {
221
+ var _templateObject$e;
222
+ 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) {
222
223
  return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
223
224
  }, function (props) {
224
225
  return props.theme.colors.ibisRed;
@@ -341,8 +342,8 @@
341
342
  }, "UNSAVE")));
342
343
  };
343
344
 
344
- var _templateObject$c;
345
- 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"])));
345
+ var _templateObject$d;
346
+ 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"])));
346
347
 
347
348
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
348
349
  var bite = _ref.bite,
@@ -1281,7 +1282,7 @@
1281
1282
  handleClickTitle: PropTypes__default['default'].func.isRequired
1282
1283
  };
1283
1284
 
1284
- var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2;
1285
+ var _templateObject$c, _templateObject2$9, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4;
1285
1286
  // _id: "5b237fbafca7167a35619410",
1286
1287
  // title: "Crying",
1287
1288
  // image: {
@@ -1300,29 +1301,24 @@
1300
1301
  // },
1301
1302
  // };
1302
1303
 
1303
- 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) {
1304
+ 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) {
1304
1305
  return props.url;
1305
1306
  });
1306
- 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"])));
1307
- 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) {
1307
+ 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"])));
1308
+ 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) {
1308
1309
  return props.theme.colors.notBlack;
1309
1310
  }, function (props) {
1310
1311
  return props.theme.colors.notBlack;
1311
1312
  }, zoomIn$1);
1312
- 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) {
1313
+ 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) {
1313
1314
  return props.theme.colors.white;
1314
1315
  });
1315
- 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) {
1316
+ 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) {
1316
1317
  return props.theme.colors.notBlackOverride;
1317
1318
  }, function (props) {
1318
1319
  return props.theme.colors.notBlackOverride;
1319
1320
  }, SaveContainer$1);
1320
- 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) {
1321
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1322
- }, function (props) {
1323
- return props.theme.colors.ibisRed;
1324
- });
1325
- 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"])));
1321
+ 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"])));
1326
1322
  var BlerpListView$1 = function BlerpListView(_ref) {
1327
1323
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
1328
1324
 
@@ -1490,7 +1486,13 @@
1490
1486
  height: "30px",
1491
1487
  color: "white.override"
1492
1488
  }
1493
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1489
+ }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1490
+ href: "/soundbites/".concat(bite._id),
1491
+ style: {
1492
+ textDecoration: "none",
1493
+ width: "100%"
1494
+ }
1495
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
1494
1496
  textAlign: "left",
1495
1497
  fontSize: sizeParams.fontSize,
1496
1498
  noWrap: true,
@@ -1508,11 +1510,6 @@
1508
1510
  handleClickTitle();
1509
1511
  }
1510
1512
  }
1511
- }, /*#__PURE__*/React__default['default'].createElement("a", {
1512
- href: "/soundbites/".concat(bite._id),
1513
- style: {
1514
- textDecoration: "none"
1515
- }
1516
1513
  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1517
1514
  textAlign: "left",
1518
1515
  fontSize: sizeParams.fontSize,
@@ -1606,6 +1603,371 @@
1606
1603
  handleClickUnsave: PropTypes__default['default'].func.isRequired
1607
1604
  };
1608
1605
 
1606
+ var _templateObject$b, _templateObject2$8, _templateObject3$7, _templateObject4$5, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
1607
+ 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) {
1608
+ var sizeParams = _ref.sizeParams;
1609
+ return (sizeParams.height += 2) + "px";
1610
+ }, function (_ref2) {
1611
+ var sizeParams = _ref2.sizeParams;
1612
+ return sizeParams.width;
1613
+ }, function (_ref3) {
1614
+ var fluid = _ref3.fluid;
1615
+ return fluid ? "300px" : "0";
1616
+ }, function (props) {
1617
+ return props.owned ? "102%" : "100%";
1618
+ });
1619
+ 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"])));
1620
+ 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) {
1621
+ return props.theme.colors.white;
1622
+ });
1623
+ 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) {
1624
+ return props.theme.colors.grey5;
1625
+ });
1626
+ 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) {
1627
+ return props.theme.colors.grey7;
1628
+ });
1629
+ 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) {
1630
+ return props.url;
1631
+ });
1632
+ 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"])));
1633
+ 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"])));
1634
+ 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
1635
+
1636
+ 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"])));
1637
+ 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) {
1638
+ return props.theme.colors.notBlackOverride;
1639
+ });
1640
+ 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"])));
1641
+ 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) {
1642
+ 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" : "";
1643
+ });
1644
+ var CollectionListViewPremium$1 = function CollectionListViewPremium(_ref4) {
1645
+ var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
1646
+
1647
+ var collection = _ref4.collection,
1648
+ variantSize = _ref4.variantSize,
1649
+ extraInfoComponent = _ref4.extraInfoComponent,
1650
+ primaryActionButton = _ref4.primaryActionButton,
1651
+ secondaryActionButton = _ref4.secondaryActionButton,
1652
+ handleClickBackground = _ref4.handleClickBackground,
1653
+ handleClickTitle = _ref4.handleClickTitle,
1654
+ isLinkTitle = _ref4.isLinkTitle,
1655
+ fluid = _ref4.fluid;
1656
+
1657
+ var _useState = React.useState(false),
1658
+ _useState2 = _slicedToArray__default['default'](_useState, 2);
1659
+ _useState2[0];
1660
+ _useState2[1]; // Will use this exclusively for picking colors from image...no ColorExtractor
1661
+
1662
+
1663
+ 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);
1664
+ _usePalette.loading;
1665
+ var data = _usePalette.data;
1666
+ _usePalette.error;
1667
+
1668
+ var theme = React.useContext(styled.ThemeContext);
1669
+ var size = useWindowSize();
1670
+ console.log("Collleeeeection", collection);
1671
+ var sizeParams;
1672
+ var smallSize = {
1673
+ width: "300px",
1674
+ height: 40,
1675
+ fontSize: "16px",
1676
+ saveBoxSize: "36px",
1677
+ reactionSpacing: 1,
1678
+ reactionPadding: "3px",
1679
+ reactionSize: "20px",
1680
+ buttonSize: "small"
1681
+ };
1682
+ var mediumSize = {
1683
+ width: "375px",
1684
+ height: 48,
1685
+ fontSize: "18px",
1686
+ saveBoxSize: "44px",
1687
+ reactionSpacing: 1,
1688
+ reactionPadding: "3px",
1689
+ reactionSize: "23px",
1690
+ buttonSize: "medium"
1691
+ };
1692
+ var largeSize = {
1693
+ width: "440px",
1694
+ height: 56,
1695
+ fontSize: "20px",
1696
+ saveBoxSize: "52px",
1697
+ reactionSpacing: 1,
1698
+ reactionPadding: "5px",
1699
+ reactionSize: "30px",
1700
+ buttonFontSize: "large"
1701
+ };
1702
+
1703
+ if (!variantSize) {
1704
+ if (fluid) {
1705
+ sizeParams = {
1706
+ width: "100%",
1707
+ height: 48,
1708
+ fontSize: "18px",
1709
+ saveBoxSize: "44px",
1710
+ reactionSpacing: 1,
1711
+ reactionPadding: "3px",
1712
+ reactionSize: "23px",
1713
+ buttonSize: "medium"
1714
+ };
1715
+ } else if (size.width <= 400) {
1716
+ sizeParams = smallSize;
1717
+ } else if (size.width <= 900) {
1718
+ sizeParams = mediumSize;
1719
+ } else if (size.width > 900) {
1720
+ sizeParams = largeSize;
1721
+ }
1722
+ } else {
1723
+ if (variantSize === "small") {
1724
+ sizeParams = smallSize;
1725
+ } else if (variantSize === "medium") {
1726
+ console.log(variantSize);
1727
+ sizeParams = mediumSize;
1728
+ } else if (variantSize === "large") {
1729
+ sizeParams = largeSize;
1730
+ }
1731
+ }
1732
+
1733
+ return (
1734
+ /*#__PURE__*/
1735
+ // 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.
1736
+
1737
+ /* BIG PICTURE OF COMPONENT:
1738
+ Master Container
1739
+ - TopBox (solid white background)
1740
+ - PhotoBackground (if collection has photo)
1741
+ - BlurBackground (always applied)
1742
+ - Gradient Background (default is photo color --> black, fall back is white --> black)
1743
+ - Interaction Box (holds clickable elements)
1744
+ - MidBox (first "shadow")
1745
+ - BackBox (second "shadow")
1746
+ */
1747
+ React__default['default'].createElement(MasterContainer, {
1748
+ owned: collection === null || collection === void 0 ? void 0 : collection.owned,
1749
+ sizeParams: sizeParams,
1750
+ fluid: fluid
1751
+ }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder$1, {
1752
+ id: "yellow-border"
1753
+ }), /*#__PURE__*/React__default['default'].createElement(TopBox, {
1754
+ onClick: function onClick(e) {
1755
+ e.stopPropagation();
1756
+ handleClickBackground();
1757
+ },
1758
+ style: {
1759
+ borderBottomColor: extraInfoComponent && theme.colors.grey3,
1760
+ width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
1761
+ }
1762
+ }, /*#__PURE__*/React__default['default'].createElement(PhotoBackground, {
1763
+ 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
1764
+ }), /*#__PURE__*/React__default['default'].createElement(BlurBackground, null), /*#__PURE__*/React__default['default'].createElement(GradientBackground, {
1765
+ style: {
1766
+ background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
1767
+ }
1768
+ }), /*#__PURE__*/React__default['default'].createElement(InteractionBox, {
1769
+ style: {
1770
+ borderBottomColor: extraInfoComponent && theme.colors.grey3
1771
+ }
1772
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1773
+ direction: "row",
1774
+ justifyContent: "flex-start",
1775
+ alignItems: "center",
1776
+ sx: {
1777
+ position: "relative",
1778
+ width: "calc(100% - 180px)",
1779
+ left: "2px"
1780
+ }
1781
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBox, {
1782
+ style: {
1783
+ width: sizeParams.saveBoxSize,
1784
+ height: sizeParams.saveBoxSize
1785
+ },
1786
+ onClick: function onClick(e) {
1787
+ console.log("handle save/unsave here");
1788
+ }
1789
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTop, {
1790
+ style: {
1791
+ width: sizeParams.saveBoxSize,
1792
+ height: sizeParams.saveBoxSize,
1793
+ background: data.darkVibrant || "#999999"
1794
+ }
1795
+ }, /*#__PURE__*/React__default['default'].createElement(SaveBoxTopDarken, {
1796
+ style: {
1797
+ background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
1798
+ }
1799
+ }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1800
+ sx: {
1801
+ width: "30px",
1802
+ height: "30px",
1803
+ color: "white.override",
1804
+ position: "relative",
1805
+ bottom: "1px"
1806
+ }
1807
+ }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1808
+ sx: {
1809
+ width: "30px",
1810
+ height: "30px",
1811
+ color: "white.override",
1812
+ position: "relative",
1813
+ bottom: "1px"
1814
+ }
1815
+ })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1816
+ depth: "2",
1817
+ style: {
1818
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
1819
+ }
1820
+ }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(SaveBoxShadowSquare, {
1821
+ depth: "1",
1822
+ style: {
1823
+ background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
1824
+ }
1825
+ })), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
1826
+ href: "/sound-collection/".concat(collection._id),
1827
+ style: {
1828
+ textDecoration: "none",
1829
+ width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
1830
+ position: "relative",
1831
+ left: "12px"
1832
+ }
1833
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
1834
+ textAlign: "left",
1835
+ fontSize: sizeParams.fontSize,
1836
+ noWrap: true,
1837
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1838
+ sx: {
1839
+ ":hover": {
1840
+ textDecoration: handleClickTitle ? "underline" : "none"
1841
+ },
1842
+ "@media (max-width: 600px)": {
1843
+ maxWidth: "133px"
1844
+ }
1845
+ },
1846
+ onClick: function onClick(e) {
1847
+ if (handleClickTitle) {
1848
+ e.stopPropagation();
1849
+ handleClickTitle();
1850
+ }
1851
+ }
1852
+ }, collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1853
+ textAlign: "left",
1854
+ fontSize: sizeParams.fontSize,
1855
+ noWrap: true,
1856
+ color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
1857
+ sx: {
1858
+ position: "relative",
1859
+ left: "12px",
1860
+ ":hover": {
1861
+ textDecoration: handleClickTitle ? "underline" : "none"
1862
+ },
1863
+ "@media (max-width: 600px)": {
1864
+ maxWidth: "133px"
1865
+ }
1866
+ },
1867
+ onClick: function onClick(e) {
1868
+ console.log("handle non-linkTitle click here");
1869
+ }
1870
+ }, collection.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1871
+ direction: "row",
1872
+ justifyContent: "flex-end",
1873
+ alignItems: "center",
1874
+ sx: {
1875
+ height: "70%"
1876
+ }
1877
+ }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(Stack, {
1878
+ direction: "row",
1879
+ justifyContent: "space-around",
1880
+ alignItems: "center",
1881
+ sx: {
1882
+ height: "100%",
1883
+ width: "102px",
1884
+ position: "relative"
1885
+ }
1886
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1887
+ sx: {
1888
+ borderRadius: "20px",
1889
+ position: "absolute",
1890
+ top: "0",
1891
+ bottom: "0",
1892
+ left: "0",
1893
+ right: "0",
1894
+ backgroundColor: "notBlack.main",
1895
+ opacity: ".5"
1896
+ }
1897
+ }), /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
1898
+ sx: {
1899
+ opacity: "1",
1900
+ zIndex: "2",
1901
+ color: "white.override",
1902
+ height: "18px"
1903
+ }
1904
+ }), /*#__PURE__*/React__default['default'].createElement(Text, {
1905
+ sx: {
1906
+ zIndex: "2",
1907
+ color: "white.override",
1908
+ fontWeight: "lighter",
1909
+ fontSize: "14px",
1910
+ cursor: "default",
1911
+ position: "relative",
1912
+ right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
1913
+ }
1914
+ }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
1915
+ sx: {
1916
+ zIndex: "2",
1917
+ color: "white.override",
1918
+ height: "14px"
1919
+ }
1920
+ })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1921
+ id: "second-button",
1922
+ onClick: function onClick(e) {
1923
+ console.log("handle secondary button click here");
1924
+ },
1925
+ sx: {
1926
+ padding: "5px",
1927
+ transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
1928
+ "&:hover": {
1929
+ backgroundColor: "grey6.main"
1930
+ }
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(KeyboardArrowRightRoundedIcon__default['default'], {
1944
+ sx: {
1945
+ zIndex: "2",
1946
+ color: "white.override"
1947
+ }
1948
+ }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(MidBox, {
1949
+ id: "mid-box"
1950
+ }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React__default['default'].createElement(BackBox, {
1951
+ id: "back-box"
1952
+ }), extraInfoComponent && extraInfoComponent)
1953
+ );
1954
+ };
1955
+ CollectionListViewPremium$1.propTypes = {
1956
+ collection: PropTypes__default['default'].object.isRequired,
1957
+ collections: PropTypes__default['default'].array.isRequired,
1958
+ variantSize: PropTypes__default['default'].string.isRequired,
1959
+ userSignedIn: PropTypes__default['default'].object.isRequired,
1960
+ isSelected: PropTypes__default['default'].bool.isRequired,
1961
+ playingState: PropTypes__default['default'].string.isRequired,
1962
+ actionButton: PropTypes__default['default'].object,
1963
+ getUserReactions: PropTypes__default['default'].func.isRequired,
1964
+ createCollection: PropTypes__default['default'].func.isRequired,
1965
+ handleClickBackground: PropTypes__default['default'].func.isRequired,
1966
+ handleClickSave: PropTypes__default['default'].func.isRequired,
1967
+ handleClickReaction: PropTypes__default['default'].func.isRequired,
1968
+ handleClickUnsave: PropTypes__default['default'].func.isRequired
1969
+ };
1970
+
1609
1971
  var _templateObject$a, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8;
1610
1972
  // _id: "5b237fbafca7167a35619410",
1611
1973
  // title: "Crying",
@@ -2914,7 +3276,7 @@
2914
3276
  descriptionInput = _useState10[0],
2915
3277
  setDescriptionInput = _useState10[1];
2916
3278
 
2917
- var _useState11 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility),
3279
+ var _useState11 = React.useState((collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility) || "PUBLIC"),
2918
3280
  _useState12 = _slicedToArray__default['default'](_useState11, 2),
2919
3281
  visibility = _useState12[0],
2920
3282
  setVisibility = _useState12[1];
@@ -3288,12 +3650,19 @@
3288
3650
  }, {
3289
3651
  name: "UNLISTED"
3290
3652
  }]
3291
- })), isAdmin && /*#__PURE__*/React__default['default'].createElement(Toggle, {
3653
+ })), isAdmin && /*#__PURE__*/React__default['default'].createElement(Stack, {
3654
+ sx: {
3655
+ width: "40%"
3656
+ }
3657
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
3658
+ marginBottom: "4px",
3659
+ fontSize: "18px"
3660
+ }, "Premium:"), /*#__PURE__*/React__default['default'].createElement(Toggle, {
3292
3661
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
3293
- onChange: function onChange() {
3662
+ onClick: function onClick() {
3294
3663
  return handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium));
3295
3664
  }
3296
- }), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3665
+ })), collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? /*#__PURE__*/React__default['default'].createElement(Stack, {
3297
3666
  sx: {
3298
3667
  width: "40%"
3299
3668
  }
@@ -6589,9 +6958,7 @@
6589
6958
  var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
6590
6959
  //primary and secondary action buttons
6591
6960
 
6592
- 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) {
6593
- return props.isLocked && props.collectionHovered ? "1" : "0";
6594
- });
6961
+ 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"])));
6595
6962
  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"])));
6596
6963
  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) {
6597
6964
  return props.isLocked ? props.collectionHovered ? "90%" : "65%" : "45%";
@@ -6616,6 +6983,8 @@
6616
6983
  variantSize = _ref.variantSize,
6617
6984
  handleClickBackground = _ref.handleClickBackground,
6618
6985
  handleClickSave = _ref.handleClickSave,
6986
+ handleClickView = _ref.handleClickView,
6987
+ handleClickUnlock = _ref.handleClickUnlock,
6619
6988
  primaryActionButton = _ref.primaryActionButton,
6620
6989
  secondaryActionButton = _ref.secondaryActionButton,
6621
6990
  fluid = _ref.fluid,
@@ -6677,7 +7046,8 @@
6677
7046
  return setCardColors(colors);
6678
7047
  }
6679
7048
  }), /*#__PURE__*/React__default['default'].createElement(Box, {
6680
- onClick: function onClick() {
7049
+ onClick: function onClick(e) {
7050
+ e.stopPropagation();
6681
7051
  handleClickBackground();
6682
7052
  },
6683
7053
  sx: {
@@ -6701,11 +7071,13 @@
6701
7071
  height: isLocked ? "" : "84%",
6702
7072
  right: isLocked ? "" : "-20px",
6703
7073
  top: isLocked ? "" : "24px"
7074
+ },
7075
+ ":hover #yellow-border": {
7076
+ opacity: "1"
6704
7077
  }
6705
7078
  }
6706
- }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder, {
6707
- isLocked: isLocked,
6708
- collectionHovered: collectionHovered
7079
+ }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLocked && /*#__PURE__*/React__default['default'].createElement(YellowHoverBorder, {
7080
+ id: "yellow-border"
6709
7081
  }), /*#__PURE__*/React__default['default'].createElement(Box, {
6710
7082
  sx: {
6711
7083
  backgroundColor: "white.override",
@@ -6964,7 +7336,7 @@
6964
7336
  }
6965
7337
  })), /*#__PURE__*/React__default['default'].createElement(Text, {
6966
7338
  sx: {
6967
- color: "white.main",
7339
+ color: "white.override",
6968
7340
  textAlign: "center",
6969
7341
  lineHeight: "1",
6970
7342
  margin: "4px 0",
@@ -6973,6 +7345,10 @@
6973
7345
  }
6974
7346
  }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), /*#__PURE__*/React__default['default'].createElement(Button, {
6975
7347
  disabled: !collectionHovered,
7348
+ onClick: function onClick(e) {
7349
+ e.stopPropagation();
7350
+ handleClickView();
7351
+ },
6976
7352
  variant: "contained",
6977
7353
  sx: {
6978
7354
  width: "70%",
@@ -6982,34 +7358,24 @@
6982
7358
  }
6983
7359
  }, "VIEW SOUNDPACK"), /*#__PURE__*/React__default['default'].createElement(Button, {
6984
7360
  disabled: !collectionHovered,
7361
+ onClick: function onClick(e) {
7362
+ e.stopPropagation();
7363
+ handleClickUnlock();
7364
+ },
6985
7365
  variant: "outlined",
7366
+ color: "whiteOverride",
6986
7367
  sx: {
6987
7368
  width: "50%",
6988
7369
  margin: "6px 0",
6989
7370
  padding: "2px 8px",
6990
- color: "white.main",
6991
- borderColor: "white.main",
6992
7371
  borderWidth: "2px !important",
6993
- overflow: "hidden",
6994
- "&:hover": {
6995
- borderColor: "white.main"
6996
- },
6997
- "&:hover #button-background": {
6998
- position: "absolute",
6999
- top: "0",
7000
- right: "0",
7001
- left: "0",
7002
- bottom: "0",
7003
- borderColor: "white.main",
7004
- backgroundColor: "white.main",
7005
- opacity: ".2"
7006
- }
7372
+ overflow: "hidden"
7007
7373
  }
7008
7374
  }, /*#__PURE__*/React__default['default'].createElement("div", {
7009
7375
  id: "button-background"
7010
7376
  }), /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
7011
7377
  sx: {
7012
- color: "white.main",
7378
+ color: "white.override",
7013
7379
  zIndex: "3",
7014
7380
  height: ".8rem",
7015
7381
  position: "relative",
@@ -7046,7 +7412,9 @@
7046
7412
  variantSize = _ref.variantSize,
7047
7413
  handleClickBackground = _ref.handleClickBackground,
7048
7414
  handleClickSave = _ref.handleClickSave,
7049
- handleClickDrag = _ref.handleClickDrag;
7415
+ handleClickDrag = _ref.handleClickDrag,
7416
+ handleClickView = _ref.handleClickView,
7417
+ handleClickUnlock = _ref.handleClickUnlock;
7050
7418
  _ref.handleClickPrimaryAction;
7051
7419
  var handleClickSecondaryAction = _ref.handleClickSecondaryAction,
7052
7420
  primaryActionButton = _ref.primaryActionButton,
@@ -7168,6 +7536,8 @@
7168
7536
  collection: collection,
7169
7537
  variantSize: variantSize,
7170
7538
  handleClickBackground: handleClickBackground,
7539
+ handleClickView: handleClickView,
7540
+ handleClickUnlock: handleClickUnlock,
7171
7541
  handleClickSave: handleClickSave,
7172
7542
  handleClickDrag: handleClickDrag,
7173
7543
  primaryActionButton: primaryActionButton,
@@ -7297,7 +7667,7 @@
7297
7667
  title: "This collection has been removed or hidden"
7298
7668
  }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.LockRounded, {
7299
7669
  sx: {
7300
- color: "white.main",
7670
+ color: "white.override",
7301
7671
  fontSize: "35px"
7302
7672
  }
7303
7673
  })), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -8258,21 +8628,16 @@
8258
8628
  });
8259
8629
 
8260
8630
  var PremiumBlerpCheckoutModal = function PremiumBlerpCheckoutModal(_ref) {
8261
- var _bite$image, _bite$image$original;
8262
-
8263
8631
  var show = _ref.show,
8264
8632
  price = _ref.price;
8265
- _ref.catalogItem;
8266
- _ref.buttonWeight;
8267
- _ref.uniqueColor;
8268
- _ref.isLocked;
8269
- var salesTax = _ref.salesTax;
8270
- _ref.setPaymentModalOpen;
8633
+ _ref.salesTax;
8271
8634
  var handleClose = _ref.handleClose,
8272
8635
  handleSubmit = _ref.handleSubmit,
8636
+ handleClickPlay = _ref.handleClickPlay,
8637
+ playingState = _ref.playingState,
8273
8638
  bite = _ref.bite,
8274
8639
  clientToken = _ref.clientToken;
8275
- useWindowSize();
8640
+ var size = useWindowSize();
8276
8641
 
8277
8642
  var _useState = React.useState({}),
8278
8643
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8284,104 +8649,109 @@
8284
8649
  dropinInstanceReady = _useState4[0],
8285
8650
  setDropInstanceReady = _useState4[1];
8286
8651
 
8287
- React.useRef();
8288
- var total = price + salesTax;
8289
- 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);
8290
- React.useEffect( /*#__PURE__*/_asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
8291
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
8292
- while (1) {
8293
- switch (_context.prev = _context.next) {
8294
- case 0:
8295
- if (!show) {
8296
- _context.next = 12;
8297
- break;
8298
- }
8299
-
8300
- _context.prev = 1;
8301
- document.getElementById("payment-form");
8302
- _context.next = 5;
8303
- return BrainTreeDropIn$2.create({
8304
- authorization: clientToken,
8305
- selector: "#dropin-container",
8306
- paypal: {
8307
- flow: "vault",
8308
- amount: USDFormat$2.format(price),
8309
- currency: "USD",
8310
- buttonStyle: {
8311
- color: "blue",
8312
- shape: "rect",
8313
- size: "medium"
8314
- }
8315
- },
8316
- displayName: "Premium Blerp",
8317
- paymentRequest: {
8318
- total: {
8319
- label: "Premium Blerp Cart",
8320
- amount: USDFormat$2.format(price)
8321
- },
8322
- // We recommend collecting billing address information, at minimum
8323
- // billing postal code, and passing that billing postal code with all
8324
- // Apple Pay transactions as a best practice.
8325
- requiredBillingContactFields: ["postalAddress"]
8326
- } // googlePay: {
8327
- // googlePayVersion: 2,
8328
- // merchantId: projectConfig.googleMerchantId
8329
- // ? projectConfig.googleMerchantId
8330
- // : null,
8331
- // environment: projectConfig.googleMerchantId ? "PRODUCTION" : "TEST",
8332
- // transactionInfo: {
8333
- // totalPriceStatus: "FINAL",
8334
- // totalPrice: catalogItem.price.toString(),
8335
- // totalPriceLabel: "Blerp Beets",
8336
- // countryCode: "US",
8337
- // currencyCode: "USD",
8338
- // },
8339
- // allowedPaymentMethods: [
8340
- // {
8341
- // type: "CARD",
8342
- // parameters: {
8343
- // // We recommend collecting and passing billing address information with all Google Pay transactions as a best practice.
8344
- // billingAddressRequired: true,
8345
- // billingAddressParameters: {
8346
- // format: "FULL",
8347
- // },
8348
- // },
8349
- // },
8350
- // ],
8351
- // },
8352
- // venmo: {
8353
- // allowDesktop: true,
8354
- // profileId: projectConfig.venmoProfileId,
8355
- // allowNewBrowserTab: true,
8356
- // }, // The `venmo` object requires no properties to instantiate.
8652
+ var total = price.toFixed(2);
8653
+ React.useEffect(function () {
8654
+ var createBraintreeDropIn = /*#__PURE__*/function () {
8655
+ var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
8656
+ return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
8657
+ while (1) {
8658
+ switch (_context.prev = _context.next) {
8659
+ case 0:
8660
+ _context.prev = 0;
8661
+ document.getElementById("payment-form");
8662
+ _context.next = 4;
8663
+ return BrainTreeDropIn$2.create({
8664
+ authorization: clientToken,
8665
+ selector: "#dropin-container",
8666
+ paypal: {
8667
+ flow: "vault",
8668
+ amount: USDFormat$2.format(price),
8669
+ currency: "USD",
8670
+ buttonStyle: {
8671
+ color: "blue",
8672
+ shape: "rect",
8673
+ size: "medium"
8674
+ }
8675
+ },
8676
+ displayName: "Premium Blerp",
8677
+ paymentRequest: {
8678
+ total: {
8679
+ label: "Premium Blerp Cart",
8680
+ amount: USDFormat$2.format(price)
8681
+ },
8682
+ // We recommend collecting billing address information, at minimum
8683
+ // billing postal code, and passing that billing postal code with all
8684
+ // Apple Pay transactions as a best practice.
8685
+ requiredBillingContactFields: ["postalAddress"]
8686
+ } // googlePay: {
8687
+ // googlePayVersion: 2,
8688
+ // merchantId: projectConfig.googleMerchantId
8689
+ // ? projectConfig.googleMerchantId
8690
+ // : null,
8691
+ // environment: projectConfig.googleMerchantId ? "PRODUCTION" : "TEST",
8692
+ // transactionInfo: {
8693
+ // totalPriceStatus: "FINAL",
8694
+ // totalPrice: catalogItem.price.toString(),
8695
+ // totalPriceLabel: "Blerp Beets",
8696
+ // countryCode: "US",
8697
+ // currencyCode: "USD",
8698
+ // },
8699
+ // allowedPaymentMethods: [
8700
+ // {
8701
+ // type: "CARD",
8702
+ // parameters: {
8703
+ // // We recommend collecting and passing billing address information with all Google Pay transactions as a best practice.
8704
+ // billingAddressRequired: true,
8705
+ // billingAddressParameters: {
8706
+ // format: "FULL",
8707
+ // },
8708
+ // },
8709
+ // },
8710
+ // ],
8711
+ // },
8712
+ // venmo: {
8713
+ // allowDesktop: true,
8714
+ // profileId: projectConfig.venmoProfileId,
8715
+ // allowNewBrowserTab: true,
8716
+ // }, // The `venmo` object requires no properties to instantiate.
8717
+
8718
+ }, function (err, dropinInstance) {
8719
+ if (err !== null && err !== void 0 && err.message) ;
8720
+
8721
+ console.log(dropinInstance);
8722
+ setDropInstance(dropinInstance);
8723
+ setDropInstanceReady(true);
8724
+ });
8357
8725
 
8358
- }, function (err, dropinInstance) {
8359
- if (err !== null && err !== void 0 && err.message) ;
8726
+ case 4:
8727
+ _context.next = 11;
8728
+ break;
8360
8729
 
8361
- console.log(dropinInstance);
8362
- setDropInstance(dropinInstance);
8363
- setDropInstanceReady(true);
8364
- });
8730
+ case 7:
8731
+ _context.prev = 7;
8732
+ _context.t0 = _context["catch"](0);
8733
+ console.log(_context.t0); // useToast(`${err}`, "error");
8734
+ // setBeetScreenState("HOME");
8365
8735
 
8366
- case 5:
8367
- _context.next = 12;
8368
- break;
8736
+ return _context.abrupt("return");
8369
8737
 
8370
- case 8:
8371
- _context.prev = 8;
8372
- _context.t0 = _context["catch"](1);
8373
- console.log(_context.t0); // useToast(`${err}`, "error");
8374
- // setBeetScreenState("HOME");
8738
+ case 11:
8739
+ case "end":
8740
+ return _context.stop();
8741
+ }
8742
+ }
8743
+ }, _callee, null, [[0, 7]]);
8744
+ }));
8375
8745
 
8376
- return _context.abrupt("return");
8746
+ return function createBraintreeDropIn() {
8747
+ return _ref2.apply(this, arguments);
8748
+ };
8749
+ }();
8377
8750
 
8378
- case 12:
8379
- case "end":
8380
- return _context.stop();
8381
- }
8382
- }
8383
- }, _callee, null, [[1, 8]]);
8384
- })), [show]);
8751
+ if (show) {
8752
+ createBraintreeDropIn();
8753
+ }
8754
+ }, [show, clientToken, price]);
8385
8755
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
8386
8756
  sx: {
8387
8757
  backgroundColor: "white.main",
@@ -8455,30 +8825,28 @@
8455
8825
  isPremium: true,
8456
8826
  isLinkTitle: true,
8457
8827
  bite: bite,
8458
- isOwner: false // collections={collections}
8459
- ,
8460
- variantSize: "medium" // userSignedIn={userSignedIn}
8461
- ,
8462
- unsaveButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) // isSelected={selectedBlerp?._id === bite2?._id}
8463
- // playingState={playing}
8464
- // getUserReactions={() => getUserReactions()}
8465
- // handleClickOrganize={() => handleClickOrganize()}
8466
- // createCollection={(data) => createCollection(data)}
8467
- // handleClickBackground={(clickedOn) => {
8468
- // if (clickedOn) {
8469
- // setSelectedBlerp(bite2);
8470
- // } else {
8471
- // setSelectedBlerp(null);
8472
- // }
8473
- // }}
8474
- // handleClickPlay={() => handleClickPlay()}
8475
- // handleClickThreeDot={() => handleClickThreeDot()}
8476
- // handleClickSave={() => handleClickSave()}
8477
- // handleClickReaction={(reaction, isRemove) =>
8478
- // handleClickReaction(reaction, isRemove)
8479
- // }
8480
- // handleClickUnsave={() => handleClickUnsave()}
8481
-
8828
+ isOwner: false,
8829
+ variantSize: "medium",
8830
+ unsaveButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
8831
+ playingState: playingState,
8832
+ handleClickBackground: function handleClickBackground() {
8833
+ return null;
8834
+ },
8835
+ handleClickPlay: handleClickPlay,
8836
+ handleClickThreeDot: function handleClickThreeDot() {
8837
+ return null;
8838
+ },
8839
+ handleClickReaction: function handleClickReaction() {
8840
+ return null;
8841
+ },
8842
+ getUserReactions: function getUserReactions() {
8843
+ return null;
8844
+ },
8845
+ handleClickSave: function handleClickSave() {
8846
+ return null;
8847
+ },
8848
+ primaryActionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
8849
+ secondaryActionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
8482
8850
  }), /*#__PURE__*/React__default['default'].createElement(Stack, {
8483
8851
  sx: {
8484
8852
  "@media(max-width: 1100px)": {
@@ -8513,14 +8881,6 @@
8513
8881
  direction: "row",
8514
8882
  alignItems: "center",
8515
8883
  justifyContent: "space-between"
8516
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
8517
- fontSize: "21px"
8518
- }, "Today's Sales Tax"), /*#__PURE__*/React__default['default'].createElement(Text, {
8519
- fontSize: "21px"
8520
- }, " $", salesTax)), /*#__PURE__*/React__default['default'].createElement(Stack, {
8521
- direction: "row",
8522
- alignItems: "center",
8523
- justifyContent: "space-between"
8524
8884
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
8525
8885
  fontSize: "28px"
8526
8886
  }, "Today's Total"), /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -8586,9 +8946,10 @@
8586
8946
  fontWeight: "light",
8587
8947
  textAlign: "justify",
8588
8948
  sx: {
8589
- textAlign: "center"
8949
+ textAlign: size.width > 1100 ? "left" : "center",
8950
+ width: size.width > 1100 ? "50%" : "100%"
8590
8951
  }
8591
- }, "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", {
8952
+ }, "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", {
8592
8953
  href: "/terms-of-sale",
8593
8954
  target: "_blank",
8594
8955
  rel: "noreferrer"
@@ -8622,7 +8983,7 @@
8622
8983
  handleSubmit = _ref.handleSubmit,
8623
8984
  collection = _ref.collection,
8624
8985
  clientToken = _ref.clientToken;
8625
- useWindowSize(); // const [clientToken, setClientToken] = useState(null);
8986
+ var size = useWindowSize(); // const [clientToken, setClientToken] = useState(null);
8626
8987
 
8627
8988
  var _useState = React.useState({}),
8628
8989
  _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -8903,9 +9264,10 @@
8903
9264
  fontWeight: "light",
8904
9265
  textAlign: "justify",
8905
9266
  sx: {
8906
- textAlign: "center"
9267
+ textAlign: size.width > 1100 ? "left" : "center",
9268
+ width: size.width > 1100 ? "50%" : "100%"
8907
9269
  }
8908
- }, "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", {
9270
+ }, "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", {
8909
9271
  href: "/terms-of-sale",
8910
9272
  target: "_blank",
8911
9273
  rel: "noreferrer"
@@ -9230,7 +9592,8 @@
9230
9592
  fontWeight: "light",
9231
9593
  textAlign: "justify",
9232
9594
  sx: {
9233
- textAlign: "center"
9595
+ textAlign: size.width > 1100 ? "left" : "center",
9596
+ width: size.width > 1100 ? "50%" : "100%"
9234
9597
  }
9235
9598
  }, "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", {
9236
9599
  href: "/terms-of-sale",
@@ -9298,6 +9661,7 @@
9298
9661
  var NewCollectionModal = NewCollectionModal$1;
9299
9662
  var CollectionCard = CollectionCard$1;
9300
9663
  var BlerpListView = BlerpListView$1;
9664
+ var CollectionListViewPremium = CollectionListViewPremium$1;
9301
9665
  var BlerpListViewPremium = BlerpListViewPremium$1;
9302
9666
  var BlerpSkeleton = BlerpSkeleton$1;
9303
9667
  var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
@@ -9568,6 +9932,7 @@
9568
9932
  exports.ClockIcon = ClockIcon;
9569
9933
  exports.CogIcon = CogIcon;
9570
9934
  exports.CollectionCard = CollectionCard;
9935
+ exports.CollectionListViewPremium = CollectionListViewPremium;
9571
9936
  exports.CollectionSkeleton = CollectionSkeleton;
9572
9937
  exports.Container = Container;
9573
9938
  exports.CrownIcon = CrownIcon;