@blerp/design 1.0.18 → 1.0.19

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/package.json +47 -47
  2. package/dist/index.cjs.js +0 -4468
  3. package/dist/index.esm.js +0 -4339
  4. package/dist/index.umd.js +0 -4430
package/dist/index.umd.js DELETED
@@ -1,4430 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/MoreHorizRounded'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@mui/icons-material/BookmarkAddOutlined'), 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/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('@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')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/CloseRounded', '@mui/icons-material/MoreHorizRounded', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@mui/icons-material/BookmarkAddOutlined', 'react-palette', '@babel/runtime/helpers/typeof', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/Delete', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@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'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.BookmarkRemoveOutlinedIcon, global.CloseRoundedIcon, global.MoreHorizRoundedIcon, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global.BookmarkAddOutlinedIcon, global.reactPalette, global._typeof, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.DeleteIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, 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));
5
- }(this, (function (exports, material, _slicedToArray, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, BookmarkRemoveOutlinedIcon, CloseRoundedIcon, MoreHorizRoundedIcon, PropTypes, React, reactColorExtractor, styled, BookmarkAddOutlinedIcon, reactPalette, _typeof, _defineProperty, KeyboardArrowDownRoundedIcon, _asyncToGenerator, _regeneratorRuntime, DeleteIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon) { 'use strict';
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
10
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
11
- var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
12
- var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
13
- var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
14
- var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
15
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
16
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
18
- var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
19
- var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
- var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
22
- var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
23
- var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
24
- var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
25
- var FileUploadRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(FileUploadRoundedIcon);
26
- var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
27
- var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
28
- var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
29
- var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
30
- var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
31
- var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
32
- var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
33
- var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
34
- var PersonAddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonAddRoundedIcon);
35
- var PinterestIcon__default = /*#__PURE__*/_interopDefaultLegacy(PinterestIcon);
36
- var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon);
37
- var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
38
- var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
39
- var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
40
- var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
41
- var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
42
- var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
43
- var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
44
- var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRoundedIcon);
45
-
46
- var PlayOutlineIcon = function PlayOutlineIcon(_ref) {
47
- var sx = _ref.sx;
48
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
49
- sx: sx
50
- }, /*#__PURE__*/React__default['default'].createElement("g", {
51
- xmlns: "http://www.w3.org/2000/svg",
52
- id: "Icon_awesome-play",
53
- transform: "translate(4 3.999)"
54
- }, /*#__PURE__*/React__default['default'].createElement("g", {
55
- id: "Subtraction_1006"
56
- }, /*#__PURE__*/React__default['default'].createElement("path", {
57
- d: "M3.9,1C3.3,1,2.6,1.4,2.6,2.2v11.6c0,1,1.3,1.6,2,1l8.1-5.6c0.8-0.5,0.8-1.8,0-2.3L4.7,1.2 C4.5,1,4.2,1,3.9,1 M3.7-1L3.7-1c0.6,0,1.2,0.2,1.7,0.5l0,0L14,5.6C14.7,6.1,15.2,7,15.2,8c0,1-0.5,1.9-1.2,2.5l-8.6,6 c-0.5,0.3-1,0.5-1.6,0.5c-0.7,0-1.4-0.3-2-0.7c-0.6-0.5-1-1.3-1-2.1V1.8c0-0.9,0.3-1.6,1-2.1C2.3-0.8,3-1,3.7-1z"
58
- }))));
59
- };
60
- var PlaySolidIcon = function PlaySolidIcon(_ref2) {
61
- var sx = _ref2.sx;
62
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
63
- sx: sx
64
- }, /*#__PURE__*/React__default['default'].createElement("g", {
65
- xmlns: "http://www.w3.org/2000/svg",
66
- id: "Icon_awesome-play_1_",
67
- class: "st5"
68
- }, /*#__PURE__*/React__default['default'].createElement("path", {
69
- class: "st3",
70
- d: "M7.2,4.3c-0.2,0-0.3,0-0.5,0.1C6.4,4.6,6.3,4.8,6.3,5.1v13.8c0,0.4,0.3,0.6,0.4,0.7c0.3,0.2,0.7,0.2,0.9,0 l9.6-6.7c0.2-0.2,0.4-0.4,0.4-0.7c0-0.3,0-0.6-0.2-0.8c-0.1-0.1-0.1-0.1-0.2-0.2L7.7,4.5C7.6,4.4,7.4,4.3,7.2,4.3z"
71
- })));
72
- };
73
- var TwitchBitIcon = function TwitchBitIcon(_ref3) {
74
- var sx = _ref3.sx;
75
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
76
- sx: sx
77
- }, /*#__PURE__*/React__default['default'].createElement("g", {
78
- xmlns: "http://www.w3.org/2000/svg",
79
- id: "Bits"
80
- }, /*#__PURE__*/React__default['default'].createElement("g", {
81
- id: "Path_3931"
82
- }, /*#__PURE__*/React__default['default'].createElement("path", {
83
- class: "st3",
84
- d: "M12,21c-0.2,0-0.3-0.1-0.5-0.2l-6.8-5.4c-0.3-0.2-0.4-0.6-0.2-1l6.8-11.2C11.6,3.1,11.8,3,12,3c0,0,0,0,0,0 c0.3,0,0.5,0.1,0.6,0.4l6.7,11.2c0.2,0.3,0.1,0.7-0.2,1l-6.7,5.4C12.4,20.9,12.2,21,12,21z M6.2,14.7l5.8,4.6l5.7-4.6L12,5.2 L6.2,14.7z"
85
- }))));
86
- };
87
- var BlerpCoinsIcon = function BlerpCoinsIcon(_ref4) {
88
- var sx = _ref4.sx;
89
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
90
- sx: sx
91
- }, /*#__PURE__*/React__default['default'].createElement("g", {
92
- xmlns: "http://www.w3.org/2000/svg",
93
- id: "Group_30665"
94
- }, /*#__PURE__*/React__default['default'].createElement("path", {
95
- id: "Subtraction_383",
96
- class: "st3",
97
- d: "M13.7,17.5c-4,0-7.3-3.3-7.3-7.3c0-4,3.3-7.3,7.3-7.3c4,0,7.3,3.3,7.3,7.3 C21,14.3,17.7,17.5,13.7,17.5z M12.7,6.5c-0.1,0-0.2,0-0.3,0.1c-0.5,0.2-0.7,0.7-0.8,1.2c0,0.2-0.1,0.4-0.2,0.5 c-0.2,0.3-0.5,0.5-0.9,0.6l0,0c-0.5,0.2-0.9,0.3-0.9,1c0,0.5,0.3,0.7,0.7,0.9c0.3,0.2,0.6,0.4,0.8,0.7c0.1,0.3,0.2,0.7,0,1.1 c-0.2,0.5-0.1,1,0.3,1.4c0.2,0.2,0.4,0.2,0.6,0.2c0.6-0.1,1.1-0.4,1.5-0.8c0.3-0.3,0.6-0.5,1-0.7c0.4-0.1,0.8-0.1,1.2-0.1h0.1 c0.9,0,1.7-0.1,1.9-0.9c0.1-0.7-0.3-1-0.7-1.3c-0.3-0.2-0.5-0.5-0.7-0.8c0-0.3,0-0.7,0.1-1c0.1-0.4,0.2-0.8-0.1-1.1 C16.4,7.1,16.2,7,15.9,7c-0.2,0-0.5,0.1-0.7,0.2h0c-0.2,0.1-0.5,0.2-0.7,0.2c-0.1,0-0.2,0-0.3-0.1C14,7.2,13.8,7.1,13.7,7l0,0 C13.4,6.7,13.1,6.5,12.7,6.5z M13.5,11.2c-0.5,0-1.1-0.3-1.4-0.7c-0.1-0.1-0.1-0.2,0-0.3c0-0.1,0.1-0.2,0.2-0.2 c0.4,0,0.8-0.1,1.2-0.3c0.4-0.1,0.8-0.3,1.1-0.6c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0,0.1,0.1,0.2,0.2c0.1,0.7-0.3,1.4-1,1.7 C13.9,11.2,13.7,11.2,13.5,11.2L13.5,11.2z"
98
- }), /*#__PURE__*/React__default['default'].createElement("path", {
99
- id: "Subtraction_384",
100
- class: "st3",
101
- d: "M11,21c-4.4,0-8-3.6-8-8c0-2.6,1.3-5,3.4-6.5c-2.2,3.2-1.8,7.4,0.9,10.2 c2.7,2.7,7,3.1,10.2,0.9C16,19.7,13.6,21,11,21z"
102
- })));
103
- };
104
- var ShortcutIcon = function ShortcutIcon(_ref5) {
105
- var sx = _ref5.sx;
106
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
107
- sx: sx
108
- }, /*#__PURE__*/React__default['default'].createElement("g", {
109
- xmlns: "http://www.w3.org/2000/svg",
110
- id: "Group_27311",
111
- transform: "translate(-0.002 -0.002)"
112
- }, /*#__PURE__*/React__default['default'].createElement("path", {
113
- id: "Subtraction_275",
114
- class: "st3",
115
- d: "M16.1,21H7.9c-2.4,0-4.4-1.7-4.8-4c0.8,1,1.9,1.5,3.2,1.5h8.2c2.3,0,4.1-1.8,4.1-4.1 V6.3C18.5,5,18,3.9,17,3.1c2.3,0.4,4,2.5,4,4.8v8.2C21,18.8,18.8,21,16.1,21z"
116
- }), /*#__PURE__*/React__default['default'].createElement("path", {
117
- id: "Subtraction_379",
118
- class: "st3",
119
- d: "M13.7,17H6.3C4.5,17,3,15.5,3,13.7V6.3C3,4.5,4.5,3,6.3,3h7.4C15.5,3,17,4.5,17,6.3 c0,0,0,0,0,0v7.4C17,15.5,15.5,17,13.7,17z M7.8,8.3c-0.1,0-0.2,0-0.3,0.1c-0.6,0.6-0.9,1.5-0.9,2.3c0,1.8,1.5,3.3,3.3,3.3 s3.3-1.5,3.3-3.3c0-1.3-0.7-2.5-1.7-3.3c-0.6-0.6-1.2-1.1-1.2-1.9c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0c-0.1,0-0.3,0.1-0.3,0.2 C9,6.1,8.8,6.9,8.8,7.7C9,8.2,9.3,8.6,9.7,9c0.4,0.3,0.7,0.8,0.8,1.3c0,0.6-0.5,1.1-1.1,1.1h0c-0.6,0-1.1-0.5-1.1-1.1V8.7 c0-0.1,0-0.2-0.1-0.3C8.1,8.4,7.9,8.3,7.8,8.3z"
120
- })));
121
- };
122
- var LightbulbIcon = function LightbulbIcon(_ref6) {
123
- var sx = _ref6.sx;
124
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
125
- sx: sx
126
- }, /*#__PURE__*/React__default['default'].createElement("g", {
127
- xmlns: "http://www.w3.org/2000/svg"
128
- }, /*#__PURE__*/React__default['default'].createElement("g", {
129
- id: "Layer_3_2_"
130
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
131
- class: "st3",
132
- d: "M11.8,6.9L11.8,6.9c-2.3,0-4.1,1.8-4.1,4C7.7,12,8.1,13.1,8.7,14c0.2,0.2,0.2,0.4,0.3,0.5 c0.2,0.7,0.4,1.4,0.4,2.1c0,0.5,0.4,0.8,0.8,0.8h3.3c0.5,0,0.8-0.4,0.8-0.8l0,0c0-0.8,0.1-1.4,0.2-2.1c0.1-0.3,0.2-0.5,0.4-0.7 c0.6-0.9,0.9-1.9,1-2.9v-0.2C15.8,8.4,14,6.8,11.8,6.9z M14.4,10.9c-0.1,0.8-0.5,1.5-0.8,2.2c-0.2,0.3-0.4,0.7-0.5,1l0,0 c-0.2,0.6-0.2,1.3-0.2,1.8h-1.7c-0.1-0.6-0.3-1.3-0.4-1.8l0-0.1c-0.1-0.3-0.3-0.5-0.5-0.8c-0.5-0.7-0.8-1.5-0.9-2.3 c0-1.4,1.1-2.4,2.4-2.4h0.2c1.3-0.1,2.4,1,2.5,2.3V10.9L14.4,10.9z"
133
- }), /*#__PURE__*/React__default['default'].createElement("path", {
134
- class: "st3",
135
- d: "M19.7,9.4c-0.1,0-0.1,0-0.2,0h-2c-0.5-0.1-0.8,0.3-0.9,0.8c-0.1,0.5,0.3,0.8,0.8,0.9c0.1,0,0.1,0,0.2,0h2 c0.5,0.1,0.8-0.3,0.9-0.8C20.5,9.9,20.1,9.4,19.7,9.4z"
136
- }), /*#__PURE__*/React__default['default'].createElement("path", {
137
- class: "st3",
138
- d: "M18.6,6.3C19,6,19.1,5.6,18.8,5.2S18,4.7,17.7,5l0,0l-1.5,1.3c-0.3,0.3-0.4,0.8-0.1,1.1 c0.2,0.2,0.4,0.3,0.6,0.3s0.4-0.1,0.5-0.2L18.6,6.3z"
139
- }), /*#__PURE__*/React__default['default'].createElement("path", {
140
- class: "st3",
141
- d: "M11.8,6.4c0.5,0,0.8-0.4,0.8-0.8v-2c-0.2-0.5-0.6-0.7-1-0.5c-0.3,0.1-0.5,0.3-0.5,0.6v2 C11.1,6,11.4,6.4,11.8,6.4z"
142
- }), /*#__PURE__*/React__default['default'].createElement("path", {
143
- class: "st3",
144
- d: "M6,10c-0.1,0-0.1,0-0.2,0H4.1c-0.5,0.1-0.8,0.5-0.8,0.9c0,0.4,0.4,0.7,0.8,0.8h1.7c0.5,0.1,0.8-0.3,0.9-0.8 C6.8,10.3,6.4,10,6,10z"
145
- }), /*#__PURE__*/React__default['default'].createElement("path", {
146
- class: "st3",
147
- d: "M7.9,7c0-0.2-0.1-0.5-0.3-0.6l0,0L6.1,5.1C5.7,4.8,5.2,4.9,4.9,5.2C4.6,5.6,4.7,6.1,5.1,6.4l1.5,1.2 c0.2,0.2,0.3,0.2,0.5,0.2C7.5,7.8,7.9,7.4,7.9,7z"
148
- }), /*#__PURE__*/React__default['default'].createElement("path", {
149
- class: "st3",
150
- d: "M14,18.1H9.7c-0.1,0-0.2,0.1-0.2,0.2v1.1l0,0c0,0.1,0,0.6,0.2,0.9c0.2,0.2,0.8,0.8,0.8,0.8s0.1,0.1,0.2,0.1 h2.2c0.1,0,0.2,0,0.3-0.1c0,0,0.8-0.5,0.8-0.8c0.1-0.2,0.2-0.8,0.2-0.9l0,0v-1.1C14.1,18.1,14,18.1,14,18.1z"
151
- })))));
152
- };
153
- var TwitchIcon = function TwitchIcon(_ref7) {
154
- var sx = _ref7.sx;
155
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
156
- sx: sx
157
- }, /*#__PURE__*/React__default['default'].createElement("g", {
158
- xmlns: "http://www.w3.org/2000/svg",
159
- id: "Twitch"
160
- }, /*#__PURE__*/React__default['default'].createElement("g", {
161
- id: "Group_30490_1_",
162
- transform: "translate(4.76 51.928)"
163
- }, /*#__PURE__*/React__default['default'].createElement("g", {
164
- id: "Group_29262_1_"
165
- }, /*#__PURE__*/React__default['default'].createElement("g", {
166
- id: "Group_29258_1_"
167
- }, /*#__PURE__*/React__default['default'].createElement("path", {
168
- id: "Subtraction_13_1_",
169
- class: "st3",
170
- d: "M3-30.8L3-30.8v-3.3h-3.8v-11.5l3.2-3.2h12.2v9l-5.7,5.7H6.1L3-30.8L3-30.8z M5.8-37.9v2.2l2.1-2.3h2.7l2.5-2.5v-7H2.8v9.6H5.8z"
171
- }), /*#__PURE__*/React__default['default'].createElement("g", {
172
- transform: "matrix(1, 0, 0, 1, -4.76, -51.93)"
173
- }, /*#__PURE__*/React__default['default'].createElement("rect", {
174
- id: "Rectangle_2404-2_1_",
175
- x: "11.2",
176
- y: "6.6",
177
- class: "st3",
178
- width: "1.2",
179
- height: "3.7"
180
- })), /*#__PURE__*/React__default['default'].createElement("g", {
181
- transform: "matrix(1, 0, 0, 1, -4.76, -51.93)"
182
- }, /*#__PURE__*/React__default['default'].createElement("rect", {
183
- id: "Rectangle_2405-2_1_",
184
- x: "14.7",
185
- y: "6.6",
186
- class: "st3",
187
- width: "1.2",
188
- height: "3.7"
189
- })))))));
190
- };
191
- var BlerpyIcon = function BlerpyIcon(_ref8) {
192
- var sx = _ref8.sx;
193
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
194
- sx: sx
195
- }, /*#__PURE__*/React__default['default'].createElement("g", {
196
- xmlns: "http://www.w3.org/2000/svg",
197
- id: "Blerpy_1_"
198
- }, /*#__PURE__*/React__default['default'].createElement("path", {
199
- id: "Path_16629",
200
- class: "st3",
201
- d: "M18,10.6c-0.4-1.9,1.3-3.3,0.2-4.8c-1.6-1.9-3.5,0.7-5.2-0.1c-1.1-0.5-2.3-2.2-4-1.6 S7.5,6.9,7,8c-0.9,1.7-4,0.9-4,3.4c0,1.8,2.2,1.8,3.2,3.5c1,1.7-1.2,3.8,0.7,5.4c2.4,2,4.8-2,6.9-2.8l0,0c2.1-0.8,6.5,0.8,7.1-2.3 C21.4,12.7,18.4,12.5,18,10.6z M12.7,14.3c-1.5,0.5-3.2-0.1-4.1-1.4c-0.2-0.3-0.1-0.6,0.1-0.8C8.7,12,8.8,12,8.9,12 c0.9-0.1,1.8-0.3,2.6-0.6c0.9-0.3,1.7-0.7,2.4-1.2c0.3-0.2,0.6-0.1,0.8,0.2c0.1,0.1,0.1,0.2,0.1,0.3C15.1,12.2,14.2,13.7,12.7,14.3 L12.7,14.3z"
202
- })));
203
- };
204
- var RadarDishIcon = function RadarDishIcon(_ref9) {
205
- var sx = _ref9.sx;
206
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
207
- sx: sx
208
- }, /*#__PURE__*/React__default['default'].createElement("g", {
209
- xmlns: "http://www.w3.org/2000/svg",
210
- id: "SharingOutput"
211
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
212
- class: "st3",
213
- d: "M13.6,17.5c-2,1.2-4.6,0.8-6.2-0.8c-1.7-1.7-2-4.3-0.8-6.3C7,9.7,6.8,8.8,6.1,8.4C5.4,8,4.6,8.2,4.2,8.9 c-1.8,3.1-1.3,7.1,1.2,9.7C6.9,20.2,9,21,11,21c1.4,0,2.7-0.4,4-1.1c0.7-0.4,0.9-1.3,0.5-1.9C15.1,17.3,14.3,17.1,13.6,17.5z"
214
- }), /*#__PURE__*/React__default['default'].createElement("path", {
215
- class: "st3",
216
- d: "M9.1,15.6c0.2,0,0.4-0.1,0.5-0.2l2-2c0.5,0.1,1,0,1.3-0.3c0.6-0.6,0.6-1.4,0-2c-0.6-0.6-1.4-0.6-2,0 c-0.4,0.4-0.5,0.9-0.3,1.3l-2,2c-0.3,0.3-0.3,0.7,0,1C8.8,15.5,8.9,15.6,9.1,15.6z"
217
- }), /*#__PURE__*/React__default['default'].createElement("path", {
218
- class: "st3",
219
- d: "M12.6,6.1C12.2,6.2,12,6.6,12,7c0.1,0.4,0.5,0.6,0.8,0.5c1-0.2,2,0.1,2.7,0.8c0.7,0.7,1,1.8,0.8,2.8 c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6c0.3-1.5-0.2-3-1.2-4C15.6,6.3,14.1,5.8,12.6,6.1z"
220
- }), /*#__PURE__*/React__default['default'].createElement("path", {
221
- class: "st3",
222
- d: "M19.1,4.9c-1.5-1.6-3.7-2.2-5.8-1.8c-0.4,0.1-0.6,0.4-0.6,0.8c0.1,0.4,0.5,0.6,0.8,0.6 c1.7-0.3,3.4,0.2,4.6,1.4c1.2,1.2,1.7,2.9,1.4,4.6c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6 C21.2,8.7,20.6,6.5,19.1,4.9z"
223
- }))));
224
- };
225
- var ChannelPointsIcon = function ChannelPointsIcon(_ref10) {
226
- var sx = _ref10.sx;
227
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
228
- sx: sx
229
- }, /*#__PURE__*/React__default['default'].createElement("g", {
230
- xmlns: "http://www.w3.org/2000/svg",
231
- id: "Channel_Points"
232
- }, /*#__PURE__*/React__default['default'].createElement("g", {
233
- id: "Group_25892_1_"
234
- }, /*#__PURE__*/React__default['default'].createElement("g", {
235
- id: "Ellipse_4998_1_"
236
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
237
- class: "st3",
238
- d: "M12,21c-5,0-9-4-9-9c0-5,4-9,9-9s9,4,9,9C21,17,17,21,12,21z M12,5.2c-3.7,0-6.8,3-6.8,6.8 c0,3.7,3,6.8,6.8,6.8s6.7-3,6.7-6.8C18.7,8.3,15.7,5.2,12,5.2z"
239
- }))), /*#__PURE__*/React__default['default'].createElement("g", {
240
- id: "Path_15683_1_"
241
- }, /*#__PURE__*/React__default['default'].createElement("path", {
242
- class: "st3",
243
- d: "M16.6,11.3l-2.2,0c0-0.5-0.1-0.9-0.4-1.1c-0.4-0.4-1-0.4-1.3-0.4c0,0,0,0,0,0l0-2.2c0,0,0,0,0,0 c1.2,0,2.2,0.4,2.9,1.1C16.1,9,16.7,9.9,16.6,11.3z"
244
- })))));
245
- };
246
- var GiftIcon = function GiftIcon(_ref11) {
247
- var sx = _ref11.sx;
248
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
249
- sx: sx
250
- }, /*#__PURE__*/React__default['default'].createElement("path", {
251
- xmlns: "http://www.w3.org/2000/svg",
252
- class: "st3",
253
- d: "M19.4,7.7h-2c0.2-0.4,0.4-0.8,0.4-1.3c0-1.3-1.1-2.4-2.4-2.4c-1.8,0-2.8,1.4-3.3,2.5C11.5,5.4,10.4,4,8.7,4 C7.3,4,6.2,5.1,6.2,6.4c0,0.5,0.1,0.9,0.4,1.3h-2C4.3,7.7,4,8,4,8.3V12c0,0.3,0.3,0.6,0.6,0.6h0.9v6.9c0,0.3,0.3,0.6,0.6,0.6h11.9 c0.3,0,0.6-0.3,0.6-0.6v-6.9h0.9c0.3,0,0.6-0.3,0.6-0.6V8.3C20,8,19.7,7.7,19.4,7.7z M15.3,5.1c0.7,0,1.3,0.6,1.3,1.3 s-0.6,1.3-1.3,1.3h-2.6C13.1,6.8,13.9,5.1,15.3,5.1z M7.4,6.4c0-0.7,0.6-1.3,1.3-1.3c1.5,0,2.3,1.6,2.6,2.6H8.7 C7.9,7.7,7.4,7.1,7.4,6.4z M5.1,8.9h3.5h2.8v2.6H5.1V8.9z M6.6,12.6h4.8v6.3H6.6V12.6z M17.4,18.9h-4.8v-6.3h4.8V18.9z M18.9,11.4 h-6.3V8.9h2.8h3.5V11.4z"
254
- }));
255
- };
256
- var WalkonIcon = function WalkonIcon(_ref12) {
257
- var sx = _ref12.sx;
258
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
259
- sx: sx
260
- }, /*#__PURE__*/React__default['default'].createElement("g", {
261
- xmlns: "http://www.w3.org/2000/svg",
262
- id: "WalkOn"
263
- }, /*#__PURE__*/React__default['default'].createElement("path", {
264
- id: "Icon_metro-steps_1_",
265
- class: "st3",
266
- d: "M8.5,3C7.1,3,6,5,6,7.5c0.1,1.7,0.3,3.4,0.6,5.1c0.3,1.8,0.9,3.2,1.9,3.2 s1.8-1,1.8-2.8c0-0.6-0.5-1.6-0.5-2.4c0-1.5,0.9-2.1,0.9-3.5C10.8,4.7,10,3,8.5,3L8.5,3z M15.5,8.1c-1.4,0-2.2,1.7-2.2,4.2 c0,1.4,1,2,0.9,3.5c0,0.8-0.5,1.8-0.5,2.4c0,1.8,0.7,2.8,1.8,2.8s1.7-1.5,1.9-3.2c0.3-1.7,0.5-3.4,0.6-5.1 C18,10.2,16.9,8.1,15.5,8.1L15.5,8.1z"
267
- })));
268
- };
269
- var PointerFingerIcon = function PointerFingerIcon(_ref13) {
270
- var sx = _ref13.sx;
271
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
272
- sx: sx
273
- }, /*#__PURE__*/React__default['default'].createElement("g", {
274
- xmlns: "http://www.w3.org/2000/svg",
275
- id: "Suggest"
276
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
277
- class: "st3",
278
- d: "M17.1,12.8c-0.6,0-1,0.5-1,1.1h-0.2v-0.6c0,0,0-0.1,0-0.1c0-0.6-0.5-1-1.1-1c-0.6,0-1,0.5-1,1.1v0.6h-0.2 c0,0,0-1.1,0-1.2c0-0.6-0.5-1-1.1-1c-0.6,0-1,0.5-1,1.1v1.1h-0.2V8.5c0,0,0,0,0,0c0-0.6-0.4-1-1-1.1c-0.6,0-1,0.5-1,1.1v7.3 l-0.8-1.1c0,0,0,0,0-0.1c-0.3-0.4-0.9-0.5-1.4-0.2c-0.5,0.4-0.6,1-0.2,1.5l3.2,4.6c0.2,0.3,0.5,0.4,0.8,0.4h5.2 c0.5,0,0.9-0.3,1-0.8l0.8-3.6c0-0.1,0-0.2,0-0.2v-2.5v0c0,0,0-0.1,0-0.1C18.1,13.2,17.6,12.7,17.1,12.8z"
279
- }), /*#__PURE__*/React__default['default'].createElement("path", {
280
- class: "st3",
281
- d: "M12.3,8.4c0,0.2,0.2,0.4,0.4,0.4h1.9c0.2,0,0.4-0.2,0.4-0.4c0-0.2-0.2-0.4-0.4-0.4h-1.9 C12.5,8,12.3,8.2,12.3,8.4z"
282
- }), /*#__PURE__*/React__default['default'].createElement("path", {
283
- class: "st3",
284
- d: "M12.4,7.1c0.1,0,0.2,0,0.2-0.1l1.6-1.4c0.1-0.1,0.2-0.4,0-0.5c-0.1-0.1-0.4-0.2-0.5,0l-1.6,1.4 c-0.1,0.1-0.2,0.4,0,0.5C12.2,7.1,12.3,7.1,12.4,7.1z"
285
- }), /*#__PURE__*/React__default['default'].createElement("path", {
286
- class: "st3",
287
- d: "M10.5,6.1c0.2,0,0.4-0.2,0.4-0.4V3.4c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.4,0.2-0.4,0.4v2.4 C10.2,5.9,10.3,6.1,10.5,6.1z"
288
- }), /*#__PURE__*/React__default['default'].createElement("path", {
289
- class: "st3",
290
- d: "M8.5,8.4C8.5,8.2,8.3,8,8.2,8H6.2C6,8,5.9,8.2,5.9,8.4c0,0.2,0.2,0.4,0.4,0.4h1.9C8.3,8.7,8.5,8.6,8.5,8.4z"
291
- }), /*#__PURE__*/React__default['default'].createElement("path", {
292
- class: "st3",
293
- d: "M8.1,7c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.4,0-0.5L7,5.1C6.8,4.9,6.6,5,6.5,5.1 c-0.1,0.1-0.1,0.4,0,0.5L8.1,7z"
294
- }))));
295
- };
296
- var UnsafeIcon = function UnsafeIcon(_ref14) {
297
- var sx = _ref14.sx;
298
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
299
- sx: sx
300
- }, /*#__PURE__*/React__default['default'].createElement("g", {
301
- xmlns: "http://www.w3.org/2000/svg",
302
- id: "Unsafe"
303
- }, /*#__PURE__*/React__default['default'].createElement("g", {
304
- id: "Group_30027",
305
- transform: "translate(0.001)"
306
- }, /*#__PURE__*/React__default['default'].createElement("path", {
307
- id: "Subtraction_1057",
308
- class: "st3",
309
- d: "M12,21c-1.2-0.5-2.2-1.2-3.2-2c-1.5-1-2.7-2.3-3.7-3.8c-0.6-1.6-1-3.3-1-5 c-0.2-1.5,0-3,0.4-4.4C5.2,4.2,11.3,3,12,3c0.8,0,6.6,1.3,7.6,2.8s0.3,7.1-0.9,9.4c-1,1.5-2.2,2.7-3.6,3.8 C14.2,19.8,13.1,20.5,12,21z M11.8,12L11.8,12l2.4,2.3c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.3,0.2-0.4 c0-0.2-0.1-0.3-0.2-0.4l-2.4-2.3l2.4-2.3c0.1-0.1,0.2-0.3,0.2-0.4c0-0.2-0.1-0.3-0.2-0.4C15,8,14.8,7.9,14.6,7.9 c-0.2,0-0.3,0.1-0.4,0.2l-2.4,2.3L9.5,8.2C9.4,8.1,9.2,8,9.1,8C8.9,8,8.7,8.1,8.6,8.2C8.5,8.3,8.4,8.5,8.4,8.6 c0,0.2,0.1,0.3,0.2,0.4l2.3,2.2l-2.3,2.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2 c0.2,0,0.3-0.1,0.4-0.2L11.8,12L11.8,12z"
310
- }))));
311
- };
312
- var DiscordIcon = function DiscordIcon(_ref15) {
313
- var sx = _ref15.sx;
314
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
315
- sx: sx
316
- }, /*#__PURE__*/React__default['default'].createElement("g", {
317
- xmlns: "http://www.w3.org/2000/svg",
318
- id: "Discord"
319
- }, /*#__PURE__*/React__default['default'].createElement("g", {
320
- id: "Discord_logo",
321
- transform: "translate(-733.648 -925.604)"
322
- }, /*#__PURE__*/React__default['default'].createElement("path", {
323
- id: "Path_4058",
324
- class: "st3",
325
- d: "M743.7,935.3c-0.5,0-0.9,0.5-0.9,1.1c0,0.5,0.5,0.9,1.1,0.9c0.5,0,0.9-0.5,0.9-1 C744.8,935.7,744.3,935.3,743.7,935.3C743.8,935.3,743.7,935.3,743.7,935.3z M747.6,935.3c-0.5,0-0.9,0.5-0.9,1.1 c0,0.5,0.5,0.9,1.1,0.9c0.5,0,0.9-0.5,0.9-1C748.6,935.7,748.1,935.3,747.6,935.3C747.6,935.3,747.6,935.3,747.6,935.3z"
326
- }), /*#__PURE__*/React__default['default'].createElement("path", {
327
- id: "Discord_logo-2",
328
- class: "st3",
329
- d: "M751.7,928.6h-12.1c-1,0-1.8,0.8-1.8,1.9c0,0,0,0,0,0v12.2c0,1,0.8,1.9,1.8,1.9 c0,0,0,0,0,0h10.2l-0.5-1.7l1.2,1.1l1.1,1l1.9,1.7v-16.1C753.5,929.4,752.7,928.6,751.7,928.6 C751.7,928.6,751.7,928.6,751.7,928.6z M748.2,940.4c0,0-0.3-0.4-0.6-0.7c0.7-0.2,1.2-0.5,1.6-1.1c-0.3,0.2-0.7,0.4-1,0.5 c-0.4,0.2-0.9,0.3-1.3,0.4c-0.8,0.1-1.6,0.1-2.3,0c-0.5-0.1-0.9-0.2-1.3-0.4c-0.2-0.1-0.4-0.2-0.7-0.3c0,0-0.1,0-0.1,0 c0,0,0,0,0,0c-0.2-0.1-0.3-0.2-0.3-0.2c0.4,0.5,0.9,0.9,1.6,1.1c-0.3,0.3-0.6,0.7-0.6,0.7c-1.1,0-2.1-0.5-2.7-1.4 c0-1.8,0.5-3.6,1.3-5.2c0.7-0.6,1.6-0.9,2.5-0.9l0.1,0.1c-0.9,0.2-1.7,0.6-2.4,1.2c0,0,0.2-0.1,0.5-0.3c0.6-0.3,1.3-0.5,2-0.6 c0.1,0,0.1,0,0.2,0c0.6-0.1,1.2-0.1,1.8,0c1,0.1,1.9,0.4,2.7,0.9c-0.7-0.5-1.4-0.9-2.2-1.1l0.1-0.1c0.9,0,1.8,0.4,2.5,0.9 c0.8,1.6,1.3,3.4,1.3,5.2C750.3,939.9,749.3,940.4,748.2,940.4z"
330
- }))));
331
- };
332
- var BookmarkAddRounded = function BookmarkAddRounded(_ref16) {
333
- var sx = _ref16.sx;
334
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
335
- sx: sx
336
- }, /*#__PURE__*/React__default['default'].createElement("g", {
337
- xmlns: "http://www.w3.org/2000/svg",
338
- id: "bookmark_add"
339
- }, /*#__PURE__*/React__default['default'].createElement("g", {
340
- id: "Bookmarkopen-StarlingPurple",
341
- transform: "translate(0.75)"
342
- }, /*#__PURE__*/React__default['default'].createElement("path", {
343
- id: "Union_1",
344
- class: "st7",
345
- d: "M13.8,9.7V8.6h-1.1c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7c0,0,0,0,0,0h1.1V6.1 c0-0.4,0.4-0.7,0.8-0.7c0.4,0,0.7,0.3,0.7,0.7v1.1h1.1c0.4,0,0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7c0,0,0,0,0,0h-1.1v1.1 c0,0.4-0.4,0.7-0.8,0.7C14.1,10.4,13.8,10.1,13.8,9.7z"
346
- }), /*#__PURE__*/React__default['default'].createElement("g", {
347
- id: "Path_16725"
348
- }, /*#__PURE__*/React__default['default'].createElement("path", {
349
- class: "st7",
350
- d: "M14.2,18.6c-0.6,0-1.3-0.5-1.7-0.8l-2.1-1.5l-2.7,1.9c-0.3,0.3-0.8,0.4-1.3,0.3c-0.7-0.2-1-0.8-1-1.3 l0.1-8.2C5.5,8.5,5.7,8,6,7.6c0.5-0.4,1-0.7,1.6-0.7l3.4,0v1.5H7.6c-0.2,0-0.4,0.1-0.6,0.3C7,8.7,7,8.9,7,9.1L6.9,17l3.5-2.5 l3,2.2c0.2,0.1,0.3,0.2,0.5,0.3c0,0,0,0,0,0l0-5.3h1.5v5.3c0,0.6-0.2,1.5-1,1.7C14.3,18.6,14.2,18.6,14.2,18.6z"
351
- })))));
352
- };
353
- var DiamondIcon = function DiamondIcon(_ref17) {
354
- var sx = _ref17.sx;
355
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
356
- sx: sx
357
- }, /*#__PURE__*/React__default['default'].createElement("g", {
358
- xmlns: "http://www.w3.org/2000/svg",
359
- id: "Group_32567",
360
- transform: "translate(-10106.58 -641)"
361
- }, /*#__PURE__*/React__default['default'].createElement("path", {
362
- id: "Subtraction_1462",
363
- class: "st0",
364
- d: "M10118.5,660.2c-0.3,0-0.7-0.1-0.9-0.2l-7.5-7.4c-0.7-0.6-0.7-1.5-0.3-2.2l2.5-3.4 c0.6-0.7,1.5-1.1,2.4-1.1h7.7c0.9-0.1,1.8,0.3,2.4,1.1l2.6,3.5c0.4,0.7,0.2,1.6-0.4,2.1l-7.5,7.4 C10119.2,660.1,10118.8,660.2,10118.5,660.2z M10122.7,648.6c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.2,0.5,0.4,0.7 c0.3,0.4,0.5,0.9,0.5,1.4c0,0.2-0.1,0.6-0.2,0.7c-0.4,0.7-1,1.4-1.6,2c-0.8,0.9-1.7,1.7-1.5,1.9l0.2,0.2c0.6,0,3.2-3.2,3.2-3.2 c0.3-0.4,0.5-0.8,0.6-1.3c-0.1-0.7-0.3-1.2-0.7-1.8C10123.3,649.2,10122.9,648.6,10122.7,648.6L10122.7,648.6z"
365
- })));
366
- };
367
- var BlerpCardIcon = function BlerpCardIcon(_ref18) {
368
- var sx = _ref18.sx;
369
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
370
- sx: sx
371
- }, /*#__PURE__*/React__default['default'].createElement("g", {
372
- xmlns: "http://www.w3.org/2000/svg",
373
- id: "Layer_21"
374
- }, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
375
- class: "st3",
376
- d: "M9.8,3H9C8.5,3,8.1,3.2,7.8,3.5L9.8,3z"
377
- }), /*#__PURE__*/React__default['default'].createElement("path", {
378
- class: "st3",
379
- d: "M18.3,3h-3.1c0,0.1,0.1,0.2,0.1,0.3l3.8,14.2c0.1,0.4,0.1,0.9-0.2,1.3c-0.2,0.4-0.6,0.7-1,0.8l-4.6,1.2h4.9 c0.9,0,1.6-0.7,1.6-1.6V4.6C19.9,3.7,19.2,3,18.3,3z"
380
- })), /*#__PURE__*/React__default['default'].createElement("g", null, /*#__PURE__*/React__default['default'].createElement("path", {
381
- class: "st3",
382
- d: "M18.2,17.8L14.3,3.6c0-0.2-0.1-0.3-0.3-0.4c-0.1-0.1-0.3-0.1-0.5-0.1l-9,2.4C4.3,5.6,4.1,6,4.1,6.3L8,20.5 c0.1,0.3,0.4,0.5,0.8,0.4l9-2.4c0.2,0,0.3-0.1,0.4-0.3C18.2,18.1,18.2,18,18.2,17.8z M15.5,13.7c-0.3,1.4-2.3,0.7-3.3,1.1 c-1,0.4-2.1,2.2-3.2,1.3c-0.9-0.8,0.1-1.7-0.3-2.5c-0.4-0.8-1.5-0.8-1.5-1.6c0-1.2,1.4-0.8,1.8-1.6C9.3,9.9,9.2,8.9,10,8.7 c0.8-0.3,1.3,0.5,1.8,0.7c0.8,0.4,1.7-0.9,2.4,0c0.5,0.7-0.2,1.3-0.1,2.2C14.3,12.5,15.7,12.6,15.5,13.7z"
383
- }), /*#__PURE__*/React__default['default'].createElement("path", {
384
- class: "st3",
385
- d: "M12.3,11.4c-0.4,0.2-0.7,0.4-1.1,0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.1-0.1,0.3-0.1,0.4 c0.4,0.6,1.2,0.9,1.9,0.6l0,0c0.7-0.3,1.1-1,1-1.7c0,0,0-0.1,0-0.1C12.6,11.3,12.4,11.3,12.3,11.4z"
386
- })))));
387
- };
388
- var CrownIcon = function CrownIcon(_ref19) {
389
- var sx = _ref19.sx;
390
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
391
- sx: sx
392
- }, /*#__PURE__*/React__default['default'].createElement("g", {
393
- xmlns: "http://www.w3.org/2000/svg",
394
- id: "Crown"
395
- }, /*#__PURE__*/React__default['default'].createElement("path", {
396
- id: "Icon_awesome-crown",
397
- class: "st3",
398
- d: "M17.8,17.4H6.2c-0.2,0-0.4,0.2-0.4,0.4v0.9c0,0.2,0.2,0.4,0.4,0.4h11.7 c0.2,0,0.4-0.2,0.4-0.4v-0.9C18.3,17.6,18.1,17.4,17.8,17.4C17.8,17.4,17.8,17.4,17.8,17.4z M19.6,8.4c-0.7,0-1.3,0.6-1.3,1.4 c0,0,0,0,0,0c0,0.2,0,0.4,0.1,0.6l-2,1.2c-0.4,0.3-1,0.1-1.2-0.3c0,0,0,0,0,0l-2.3-4c0.6-0.5,0.7-1.3,0.2-1.9 c-0.5-0.6-1.3-0.7-1.9-0.2C10.6,5.6,10.5,6.4,11,7c0.1,0.1,0.1,0.1,0.2,0.2l-2.3,4c-0.2,0.4-0.8,0.6-1.2,0.3c0,0,0,0,0,0l-2-1.2 c0.3-0.7,0-1.5-0.7-1.8s-1.5,0-1.8,0.7s0,1.5,0.7,1.8c0.2,0.1,0.4,0.1,0.6,0.1c0.1,0,0.1,0,0.2,0l2,5.4h10.8l2-5.4 c0.1,0,0.1,0,0.2,0c0.7,0,1.3-0.6,1.3-1.3C21,9,20.4,8.4,19.6,8.4L19.6,8.4z"
399
- })));
400
- };
401
- var CogIcon = function CogIcon(_ref20) {
402
- var sx = _ref20.sx;
403
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
404
- sx: sx
405
- }, /*#__PURE__*/React__default['default'].createElement("g", {
406
- xmlns: "http://www.w3.org/2000/svg",
407
- id: "Layer_22"
408
- }, /*#__PURE__*/React__default['default'].createElement("path", {
409
- id: "Settings-IbisRed",
410
- class: "st3",
411
- d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4 l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6 C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0 c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2 c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5 v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4 c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0 c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0 C14.4,10.6,13.3,9.5,12,9.5z"
412
- })));
413
- };
414
- var ClockIcon = function ClockIcon(_ref21) {
415
- var sx = _ref21.sx;
416
- return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
417
- sx: sx
418
- }, /*#__PURE__*/React__default['default'].createElement("g", {
419
- xmlns: "http://www.w3.org/2000/svg",
420
- id: "Layer_23"
421
- }, /*#__PURE__*/React__default['default'].createElement("path", {
422
- id: "icon_datetime_clock",
423
- class: "st0",
424
- d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7 c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
425
- })));
426
- };
427
-
428
- var useWindowSize = function useWindowSize() {
429
- var isClient = (typeof window === "undefined" ? "undefined" : _typeof__default['default'](window)) === "object";
430
-
431
- function getSize() {
432
- return {
433
- width: isClient ? window.innerWidth : undefined,
434
- height: isClient ? window.innerHeight : undefined
435
- };
436
- }
437
-
438
- var _useState = React.useState(getSize),
439
- _useState2 = _slicedToArray__default['default'](_useState, 2),
440
- windowSize = _useState2[0],
441
- setWindowSize = _useState2[1];
442
-
443
- React.useEffect(function () {
444
- if (!isClient) {
445
- return false;
446
- }
447
-
448
- function handleResize() {
449
- setWindowSize(getSize());
450
- }
451
-
452
- window.addEventListener("resize", handleResize);
453
- return function () {
454
- return window.removeEventListener("resize", handleResize);
455
- };
456
- }, []); // Empty array ensures that effect is only run on mount and unmount
457
-
458
- return windowSize;
459
- };
460
-
461
- var _templateObject$9, _templateObject2$7, _templateObject3$6, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$2, _templateObject8;
462
- // _id: "5b237fbafca7167a35619410",
463
- // title: "Crying",
464
- // image: {
465
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
466
- // original: {
467
- // url:
468
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
469
- // },
470
- // },
471
- // audio: {
472
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
473
- // original: {
474
- // url:
475
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
476
- // },
477
- // },
478
- // };
479
-
480
- styled__default['default'].div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral__default['default'](["\n /* width: sizeParams.width,\n height: sizeParams.height, */\n /* display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n border-radius: 8px;\n border: 2px solid; */\n /* border-color: grey2.main;\n background-color: isSelected ? grey2.main : white.main; */\n /* transition: 0.3s;\n position: relative;\n cursor: pointer; */\n /* & hover {\n background-color: grey2.main;\n border: 2px solid transparent;\n } */\n"])));
481
- var BlerpImage$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
482
- return props.url;
483
- });
484
- var zoomIn$1 = styled.keyframes(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
485
- var ReactionModal = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n z-index: 5;\n"])), function (props) {
486
- return props.theme.colors.notBlackOverride;
487
- }, function (props) {
488
- return props.theme.colors.notBlackOverride;
489
- }, zoomIn$1);
490
- var SaveContainer$1 = styled__default['default'].div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
491
- return props.theme.colors.whiteOverride;
492
- });
493
- var BlerpImageScrim$1 = styled__default['default'].div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
494
- return props.theme.colors.notBlackOverride;
495
- }, function (props) {
496
- return props.theme.colors.notBlackOverride;
497
- }, SaveContainer$1);
498
- var ReactionButton$1 = styled__default['default'].div(_templateObject7$2 || (_templateObject7$2 = _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) {
499
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override;
500
- }, function (props) {
501
- return props.theme.colors.ibisRed;
502
- });
503
- var LineClamp = styled__default['default'].div(_templateObject8 || (_templateObject8 = _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"])));
504
- var reactionIconUrls$1 = {
505
- FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
506
- MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg",
507
- NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
508
- SAD: "https://storage.googleapis.com/blerp_products/Icons/Sad%403x.svg ",
509
- SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
510
- ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
511
- HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
512
- TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
513
- SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
514
- LOVE: "https://storage.googleapis.com/blerp_products/Icons/Heart%403x.svg"
515
- };
516
- var Blerp$1 = function Blerp(_ref) {
517
- var _bite$image, _bite$image$original, _bite$topReactions, _bite$topReactions2, _bite$topReactions3, _bite$image2, _bite$image2$original;
518
-
519
- var bite = _ref.bite,
520
- collections = _ref.collections,
521
- variantSize = _ref.variantSize;
522
- _ref.userSignedIn;
523
- var isSelected = _ref.isSelected,
524
- playingState = _ref.playingState,
525
- primaryActionButton = _ref.primaryActionButton,
526
- secondaryActionButton = _ref.secondaryActionButton,
527
- unsaveButton = _ref.unsaveButton,
528
- getUserReactions = _ref.getUserReactions;
529
- _ref.createCollection;
530
- var handleClickBackground = _ref.handleClickBackground,
531
- handleClickPlay = _ref.handleClickPlay,
532
- handleClickThreeDot = _ref.handleClickThreeDot,
533
- handleClickSave = _ref.handleClickSave,
534
- handleClickReaction = _ref.handleClickReaction,
535
- handleClickUnsave = _ref.handleClickUnsave,
536
- handleClickTitle = _ref.handleClickTitle;
537
- _ref.handleClickOrganize;
538
- var handleClickCollection = _ref.handleClickCollection,
539
- isLinkTitle = _ref.isLinkTitle,
540
- isPremium = _ref.isPremium,
541
- isUnlocked = _ref.isUnlocked;
542
- _ref.props;
543
-
544
- var _useState = React.useState(false),
545
- _useState2 = _slicedToArray__default['default'](_useState, 2),
546
- openSave = _useState2[0],
547
- setOpenSave = _useState2[1];
548
-
549
- var _useState3 = React.useState(false),
550
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
551
- openOrganize = _useState4[0],
552
- setOpenOrganize = _useState4[1];
553
-
554
- var size = useWindowSize();
555
-
556
- var _useState5 = React.useState(null),
557
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
558
- profileColors = _useState6[0],
559
- setProfileColors = _useState6[1];
560
-
561
- var _useState7 = React.useState(false),
562
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
563
- isBlerpHovered = _useState8[0],
564
- setIsBlerpHovered = _useState8[1];
565
-
566
- var ranges = [{
567
- divider: 1e9,
568
- suffix: "B"
569
- }, {
570
- divider: 1e6,
571
- suffix: "M"
572
- }, {
573
- divider: 1e3,
574
- suffix: "k"
575
- }]; // console.log(bite?.image?.original?.url, profileColors);
576
-
577
- function formatNumber(n) {
578
- for (var i = 0; i < ranges.length; i++) {
579
- if (n >= ranges[i].divider) {
580
- return (n / ranges[i].divider).toFixed(2).toString() + ranges[i].suffix;
581
- }
582
- }
583
-
584
- return n.toString();
585
- }
586
-
587
- var sizeParams;
588
- var smallSize = {
589
- width: 150,
590
- height: 160,
591
- fontSize: "14px",
592
- imageSize: "90px",
593
- reactionSpacing: 1,
594
- reactionPadding: "3px",
595
- reactionSize: "16px",
596
- buttonSize: "small"
597
- };
598
- var mediumSize = {
599
- width: 180,
600
- height: 190,
601
- fontSize: "18px",
602
- imageSize: "100px",
603
- reactionSpacing: 1,
604
- reactionPadding: "3px",
605
- reactionSize: "20px",
606
- buttonSize: "medium"
607
- };
608
- var largeSize = {
609
- width: 220,
610
- height: 234,
611
- fontSize: "20px",
612
- imageSize: "135px",
613
- reactionSpacing: 1,
614
- reactionPadding: "5px",
615
- reactionSize: "24px",
616
- buttonFontSize: "large"
617
- };
618
-
619
- if (!variantSize) {
620
- if (size.width <= 400) {
621
- sizeParams = smallSize;
622
- } else if (size.width <= 900) {
623
- sizeParams = mediumSize;
624
- } else if (size.width > 900) {
625
- sizeParams = largeSize;
626
- }
627
- } else {
628
- if (variantSize === "small") {
629
- sizeParams = smallSize;
630
- } else if (variantSize === "medium") {
631
- sizeParams = mediumSize;
632
- } else if (variantSize === "large") {
633
- sizeParams = largeSize;
634
- }
635
- }
636
-
637
- var renderCollectionList = function renderCollectionList() {
638
- return collections === null || collections === void 0 ? void 0 : collections.map(function (collection, index) {
639
- return /*#__PURE__*/React__default['default'].createElement(Text, {
640
- onClick: function onClick() {
641
- return handleClickCollection();
642
- },
643
- sx: {
644
- cursor: "pointer",
645
- color: "white.override",
646
- ":hover": {
647
- color: "ibisRed.main"
648
- }
649
- }
650
- }, collection.title);
651
- });
652
- };
653
-
654
- return /*#__PURE__*/React__default['default'].createElement(Box, {
655
- onClick: function onClick(e) {
656
- e.stopPropagation();
657
- handleClickBackground();
658
- },
659
- onMouseEnter: function onMouseEnter(e) {
660
- return setIsBlerpHovered(true);
661
- },
662
- onMouseLeave: function onMouseLeave(e) {
663
- return setIsBlerpHovered(false);
664
- },
665
- sx: {
666
- width: sizeParams.width,
667
- height: sizeParams.height,
668
- display: "flex",
669
- flexDirection: "column",
670
- alignItems: "center",
671
- justifyContent: "flex-start",
672
- borderRadius: "8px",
673
- border: "2px solid",
674
- borderColor: "grey2.main",
675
- overflow: "hidden",
676
- // if the blerp is premium, always give just a simple solid white background for the Stack below to layer on top of.
677
- // If the blerp is not premium, the background changes from white to grey2 if the blerp is selected and/or hovered.
678
- backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
679
- transition: "0.3s",
680
- position: "relative",
681
- cursor: "pointer",
682
- "&:hover": {
683
- bgcolor: isPremium ? "white.main" : "grey2.main",
684
- border: isPremium ? profileColors ? "2px solid ".concat(profileColors[0]) : "2px solid grey" : "2px solid transparent"
685
- },
686
- "& .reaction-icon-blrp": {
687
- transition: "0.3s",
688
- opacity: 0.64
689
- },
690
- "&:hover .reaction-icon-blrp": {
691
- opacity: "1"
692
- },
693
- "& .unsafe-icon-blrp": {
694
- transition: "0.3s",
695
- opacity: 0.5
696
- },
697
- "&:hover .unsafe-icon-blrp": {
698
- opacity: "1"
699
- }
700
- }
701
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
702
- sx: {
703
- position: "absolute",
704
- top: "0",
705
- bottom: "0",
706
- left: "0",
707
- right: "0",
708
- background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0], ", black)") : "white.main",
709
- transition: "opacity .15s ease-in-out",
710
- opacity: isPremium ? isUnlocked ? isBlerpHovered ? ".8" : ".6" : isBlerpHovered ? ".6" : ".2" : "0"
711
- }
712
- }), /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
713
- src: bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url,
714
- getColors: function getColors(colors) {
715
- return setProfileColors(colors);
716
- }
717
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
718
- fontSize: "12px",
719
- color: "notBlack.main",
720
- sx: {
721
- position: "absolute",
722
- top: "30px",
723
- left: "10px"
724
- }
725
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
726
- title: "May contain potentially sensitive content",
727
- sx: {
728
- wordWrap: "break-word"
729
- }
730
- }, /*#__PURE__*/React__default['default'].createElement(IconButton, {
731
- className: "unsafe-icon-blrp",
732
- sx: {
733
- position: "absolute",
734
- top: "30px",
735
- right: "5px",
736
- padding: "0"
737
- }
738
- }, /*#__PURE__*/React__default['default'].createElement(UnsafeIcon, {
739
- sx: {
740
- fontSize: "18px",
741
- color: "ibisRed.main"
742
- }
743
- }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
744
- direction: "row",
745
- width: "100%",
746
- justifyContent: "space-between",
747
- alignItems: "center",
748
- spacing: 2,
749
- position: sizeParams.buttonSize === "small" && "absolute"
750
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
751
- direction: "row",
752
- alignItems: "center"
753
- }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
754
- onClick: function onClick(e) {
755
- e.stopPropagation();
756
- getUserReactions();
757
- setOpenSave(true);
758
- },
759
- sx: {
760
- color: "notBlack.main",
761
- padding: "4px"
762
- }
763
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
764
- fontSize: "small"
765
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
766
- onClick: function onClick(e) {
767
- e.stopPropagation();
768
- getUserReactions();
769
- handleClickSave();
770
- setOpenSave(true);
771
- },
772
- sx: {
773
- color: "notBlack.main",
774
- padding: "4px"
775
- }
776
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
777
- fontSize: "small"
778
- })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default['default'].createElement(Text, {
779
- color: "notBlack.main",
780
- fontWeight: "light",
781
- fontSize: "12px",
782
- marginRight: "8px"
783
- }, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default['default'].createElement(Stack, {
784
- direction: "row",
785
- position: "relative",
786
- width: "40px",
787
- height: "20px"
788
- }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map(function (reaction, index) {
789
- return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
790
- title: reaction
791
- }, /*#__PURE__*/React__default['default'].createElement("img", {
792
- alt: "test",
793
- className: "reaction-icon-blrp",
794
- style: {
795
- width: "20px",
796
- height: "20px",
797
- position: "absolute",
798
- top: 0,
799
- left: "".concat(index * 12, "px"),
800
- zIndex: index
801
- },
802
- src: reactionIconUrls$1[reaction]
803
- }));
804
- }))), /*#__PURE__*/React__default['default'].createElement("div", null, secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(IconButton, {
805
- onClick: function onClick(e) {
806
- handleClickThreeDot(e);
807
- },
808
- sx: {
809
- color: "notBlack.main",
810
- padding: "5px"
811
- }
812
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], null)))), /*#__PURE__*/React__default['default'].createElement(Stack, {
813
- direction: "row",
814
- marginTop: sizeParams.buttonSize === "small" && "28px"
815
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage$1, {
816
- style: {
817
- width: sizeParams.imageSize,
818
- height: sizeParams.imageSize
819
- },
820
- url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
821
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim$1, {
822
- style: {
823
- width: sizeParams.imageSize,
824
- height: sizeParams.imageSize
825
- },
826
- onClick: function onClick() {
827
- return handleClickPlay();
828
- }
829
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
830
- sx: {
831
- width: "50px",
832
- height: "50px",
833
- color: "white.override"
834
- }
835
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
836
- sx: {
837
- width: "40px",
838
- height: "40px",
839
- color: "white.override"
840
- }
841
- }), primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
842
- onClick: function onClick(e) {
843
- e.stopPropagation();
844
- getUserReactions();
845
- !(bite !== null && bite !== void 0 && bite.saved) && handleClickSave();
846
- setOpenSave(true);
847
- }
848
- }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
849
- sx: {
850
- color: "starling.main"
851
- }
852
- }) : /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
853
- sx: {
854
- fontSize: "32px",
855
- color: "starling.main"
856
- }
857
- }))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
858
- direction: "row",
859
- sx: {
860
- width: "80%",
861
- margin: "auto",
862
- textAlign: "center"
863
- }
864
- }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp, {
865
- onClick: function onClick(e) {
866
- if (handleClickTitle) {
867
- e.stopPropagation();
868
- handleClickTitle();
869
- }
870
- }
871
- }, /*#__PURE__*/React__default['default'].createElement("a", {
872
- href: "/soundbites/".concat(bite._id),
873
- style: {
874
- textDecoration: "none"
875
- }
876
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
877
- textAlign: "center",
878
- fontSize: sizeParams.fontSize,
879
- color: "notBlack.main",
880
- sx: {
881
- ":hover": {
882
- textDecoration: handleClickTitle ? "underline" : "none"
883
- }
884
- },
885
- lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
886
- }, bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp, {
887
- onClick: function onClick(e) {
888
- if (handleClickTitle) {
889
- e.stopPropagation();
890
- handleClickTitle();
891
- }
892
- }
893
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
894
- textAlign: "center",
895
- fontSize: sizeParams.fontSize,
896
- color: "notBlack.main",
897
- sx: {
898
- ":hover": {
899
- textDecoration: handleClickTitle ? "underline" : "none"
900
- }
901
- },
902
- lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
903
- }, bite.title))), openSave && /*#__PURE__*/React__default['default'].createElement(ReactionModal, {
904
- open: openSave
905
- }, openOrganize ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
906
- direction: "row",
907
- onClick: function onClick() {
908
- setOpenOrganize(false);
909
- }
910
- }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.KeyboardArrowLeftRounded, {
911
- sx: {
912
- color: "white.override"
913
- }
914
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
915
- color: "white.override"
916
- }, "Add to Collection")), /*#__PURE__*/React__default['default'].createElement(Stack, {
917
- justifyContent: "flex-start",
918
- alignItems: "center",
919
- width: "100%",
920
- height: "70%",
921
- overflow: "auto"
922
- }, renderCollectionList())) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
923
- onClick: function onClick() {
924
- setOpenSave(false);
925
- },
926
- sx: {
927
- color: "white.override",
928
- position: "absolute",
929
- top: "0",
930
- right: "0"
931
- }
932
- }), /*#__PURE__*/React__default['default'].createElement(Grid, {
933
- display: "grid",
934
- gridTemplateColumns: "repeat(5, 1fr)",
935
- alignItems: "center",
936
- marginTop: "16px",
937
- gap: 1
938
- }, Object.keys(reactionIconUrls$1).map(function (reaction) {
939
- var _bite$userReactions, _sizeParams, _sizeParams2, _sizeParams3;
940
-
941
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
942
- key: "".concat(reaction, "-button"),
943
- gridColumn: "span 1",
944
- display: "flex",
945
- justifyContent: "center"
946
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
947
- title: reaction
948
- }, /*#__PURE__*/React__default['default'].createElement(ReactionButton$1, {
949
- active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction),
950
- style: {
951
- padding: (_sizeParams = sizeParams) === null || _sizeParams === void 0 ? void 0 : _sizeParams.reactionPadding,
952
- width: (_sizeParams2 = sizeParams) === null || _sizeParams2 === void 0 ? void 0 : _sizeParams2.reactionSize,
953
- height: (_sizeParams3 = sizeParams) === null || _sizeParams3 === void 0 ? void 0 : _sizeParams3.reactionSize
954
- },
955
- onClick: function onClick() {
956
- var _bite$userReactions2;
957
-
958
- var isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : _bite$userReactions2.reactions.includes(reaction);
959
- handleClickReaction(reaction, isRemove);
960
- setOpenSave(false);
961
- }
962
- }, /*#__PURE__*/React__default['default'].createElement("img", {
963
- alt: "reaction-".concat(reaction),
964
- width: "100%",
965
- height: "100%",
966
- src: reactionIconUrls$1[reaction]
967
- }))));
968
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
969
- justifyContent: "space-around",
970
- alignItems: "center",
971
- direction: "row",
972
- width: "100%"
973
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
974
- variant: "contained",
975
- color: "seafoam",
976
- size: sizeParams.buttonSize,
977
- onClick: function onClick() {
978
- return setOpenSave(false);
979
- }
980
- }, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default['default'].createElement(Button, {
981
- onClick: function onClick() {
982
- handleClickUnsave();
983
- setOpenSave(false);
984
- },
985
- variant: "outlined",
986
- color: "whiteOverride",
987
- sx: {
988
- ".MuiButton-startIcon": {
989
- margin: "0"
990
- }
991
- },
992
- size: sizeParams.buttonSize,
993
- startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
994
- sx: {
995
- color: "white.override",
996
- margin: "0"
997
- }
998
- })
999
- }, "UNSAVE")))));
1000
- };
1001
- Blerp$1.propTypes = {
1002
- bite: PropTypes__default['default'].object.isRequired,
1003
- collections: PropTypes__default['default'].array,
1004
- variantSize: PropTypes__default['default'].string,
1005
- userSignedIn: PropTypes__default['default'].object,
1006
- unsaveButton: PropTypes__default['default'].object,
1007
- isSelected: PropTypes__default['default'].bool.isRequired,
1008
- playingState: PropTypes__default['default'].string.isRequired,
1009
- primaryActionButton: PropTypes__default['default'].object,
1010
- secondaryActionButton: PropTypes__default['default'].object,
1011
- getUserReactions: PropTypes__default['default'].func.isRequired,
1012
- createCollection: PropTypes__default['default'].func,
1013
- handleClickBackground: PropTypes__default['default'].func.isRequired,
1014
- handleClickPlay: PropTypes__default['default'].func.isRequired,
1015
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
1016
- handleClickSave: PropTypes__default['default'].func.isRequired,
1017
- handleClickReaction: PropTypes__default['default'].func.isRequired,
1018
- handleClickUnsave: PropTypes__default['default'].func.isRequired,
1019
- handleClickTitle: PropTypes__default['default'].func.isRequired
1020
- };
1021
-
1022
- var _templateObject$8, _templateObject2$6, _templateObject3$5, _templateObject4$3, _templateObject5$1, _templateObject6$1, _templateObject7$1;
1023
- // _id: "5b237fbafca7167a35619410",
1024
- // title: "Crying",
1025
- // image: {
1026
- // filename: "72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81",
1027
- // original: {
1028
- // url:
1029
- // "https://blerp-content-images-1144.storage.googleapis.com/original/72a3a8e4-1c5e-4fb7-a2fb-6185253f8b81?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=03746d6018c257bf5b34e773fb39d0dd502ee337dcb654c2b0d2dcf1c0bacc704cfae0daf0028a00339e15529a0fbcf613a83760422433f25577db978f704806100ed6c71f7176aaa23fc08c3d99692eec6fda7cdac3eb95ae6e26c65a8495f17e4da4895730c57c9e5f66509ae90f7c00c4da944caab44396f53de1bf0bc7710159f92430f571b47b893bea452da14a1667b373faa8d195f31cd23ea72b3db17d0557e0fded6411fc1564207aede8b6aa768c9fc63323a4af42c496f2a9b3a8290c68e96bf0f39aa097f2c6a0a3b47312b7f3040dc9b77736f6ea55b5fac41140ec6c7e837b827b5210d43a4b6299b55f65dc16da26c1f39f644919ac68ac6c",
1030
- // },
1031
- // },
1032
- // audio: {
1033
- // filename: "4d6796be-a58c-4c12-9949-fd832cbf646d",
1034
- // original: {
1035
- // url:
1036
- // "https://blerp-content-audio-1144.storage.googleapis.com/mp3/4d6796be-a58c-4c12-9949-fd832cbf646d?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=gke-prod%40blerp-cf7ae.iam.gserviceaccount.com%2F20210607%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20210607T172722Z&X-Goog-Expires=518400&X-Goog-SignedHeaders=host&X-Goog-Signature=40f5a61ce407158c9e324a8fb09c459dde051d29ec0f528dc1a6f3ed7e02638a4deaabb980289daa6b0498069718389d8b1a95b10e7097df3f8be2cee452274fdb876f5e553c868de683dc222bcaa19144e6879fbcc84145aa9d6837efea1b8cc06efde3d459f3f721d9a2a7e9d775a36e916809b1e1be999fc7331590affdc7149c7b24da4c48b3096119d7e6f225c4026a82bc16751a8fb1e8129c9ed835db30858306010769db97478305a9224d498b001589baad3e23ad94c1ea7c6d4721f27bcbc24fa75968e8bafcdaf250ff58e16e9b0a47f68cca496d93014a2e792262de6876a8ccc9776da8ffa21c194b9c7228e8748075207335fa91aace2250c0",
1037
- // },
1038
- // },
1039
- // };
1040
-
1041
- var BlerpImage = styled__default['default'].div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 8px;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
1042
- return props.url;
1043
- });
1044
- var zoomIn = styled.keyframes(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n\n 100%{\n transform: scale(1);\n }\n"])));
1045
- styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n height: 100%;\n width: 100%;\n position: absolute;\n border-radius: 8px;\n transform: scale(0);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: ", "D3;\n border: 2px solid ", "D3;\n backdrop-filter: blur(4px);\n animation: ", " 0.2s forwards;\n"])), function (props) {
1046
- return props.theme.colors.notBlack;
1047
- }, function (props) {
1048
- return props.theme.colors.notBlack;
1049
- }, zoomIn);
1050
- var SaveContainer = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 25px;\n height: 25px;\n opacity: 0;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n"])), function (props) {
1051
- return props.theme.colors.white;
1052
- });
1053
- var BlerpImageScrim = styled__default['default'].div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
1054
- return props.theme.colors.notBlackOverride;
1055
- }, function (props) {
1056
- return props.theme.colors.notBlack;
1057
- }, SaveContainer);
1058
- styled__default['default'].div(_templateObject6$1 || (_templateObject6$1 = _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) {
1059
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
1060
- }, function (props) {
1061
- return props.theme.colors.ibisRed;
1062
- });
1063
- styled__default['default'].div(_templateObject7$1 || (_templateObject7$1 = _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"])));
1064
- var BlerpListView$1 = function BlerpListView(_ref) {
1065
- var _bite$image, _bite$image$original, _theme$colors, _bite$image2, _bite$image2$original;
1066
-
1067
- var bite = _ref.bite,
1068
- variantSize = _ref.variantSize;
1069
- _ref.isSelected;
1070
- var playingState = _ref.playingState,
1071
- extraInfoComponent = _ref.extraInfoComponent,
1072
- primaryActionButton = _ref.primaryActionButton,
1073
- secondaryActionButton = _ref.secondaryActionButton,
1074
- handleClickBackground = _ref.handleClickBackground,
1075
- handleClickPlay = _ref.handleClickPlay,
1076
- handleClickSave = _ref.handleClickSave,
1077
- handleClickThreeDot = _ref.handleClickThreeDot,
1078
- handleClickUnsave = _ref.handleClickUnsave,
1079
- handleClickTitle = _ref.handleClickTitle,
1080
- isLinkTitle = _ref.isLinkTitle,
1081
- fluid = _ref.fluid;
1082
- _ref.props;
1083
-
1084
- var _useState = React.useState(false),
1085
- _useState2 = _slicedToArray__default['default'](_useState, 2);
1086
- _useState2[0];
1087
- var setOpenSave = _useState2[1];
1088
-
1089
- var _usePalette = reactPalette.usePalette(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);
1090
- _usePalette.loading;
1091
- var data = _usePalette.data;
1092
- _usePalette.error;
1093
-
1094
- var theme = React.useContext(styled.ThemeContext);
1095
- var size = useWindowSize();
1096
-
1097
- var sizeParams;
1098
- var smallSize = {
1099
- width: 300,
1100
- height: 40,
1101
- fontSize: "16px",
1102
- imageSize: "40px",
1103
- reactionSpacing: 1,
1104
- reactionPadding: "3px",
1105
- reactionSize: "20px",
1106
- buttonSize: "small"
1107
- };
1108
- var meduimSize = {
1109
- width: 375,
1110
- height: 48,
1111
- fontSize: "18px",
1112
- imageSize: "48px",
1113
- reactionSpacing: 1,
1114
- reactionPadding: "3px",
1115
- reactionSize: "23px",
1116
- buttonSize: "medium"
1117
- };
1118
- var largeSize = {
1119
- width: 440,
1120
- height: 56,
1121
- fontSize: "20px",
1122
- imageSize: "56px",
1123
- reactionSpacing: 1,
1124
- reactionPadding: "5px",
1125
- reactionSize: "30px",
1126
- buttonFontSize: "large"
1127
- };
1128
-
1129
- if (!variantSize) {
1130
- if (fluid) {
1131
- sizeParams = {
1132
- width: "100%",
1133
- height: 40,
1134
- fontSize: "18px",
1135
- imageSize: "48px",
1136
- reactionSpacing: 1,
1137
- reactionPadding: "3px",
1138
- reactionSize: "23px",
1139
- buttonSize: "medium"
1140
- };
1141
- } else if (size.width <= 400) {
1142
- sizeParams = smallSize;
1143
- } else if (size.width <= 900) {
1144
- sizeParams = meduimSize;
1145
- } else if (size.width > 900) {
1146
- sizeParams = largeSize;
1147
- }
1148
- } else {
1149
- if (variantSize === "small") {
1150
- sizeParams = smallSize;
1151
- } else if (variantSize === "medium") {
1152
- sizeParams = meduimSize;
1153
- } else if (variantSize === "large") {
1154
- sizeParams = largeSize;
1155
- }
1156
- }
1157
-
1158
- return /*#__PURE__*/React__default['default'].createElement(Box, {
1159
- sx: {
1160
- width: sizeParams.width,
1161
- minWidth: fluid && "300px",
1162
- borderRadius: "8px",
1163
- border: "2px transparent",
1164
- backgroundImage: "linear-gradient(to right, ".concat(data !== null && data !== void 0 && data.muted ? data === null || data === void 0 ? void 0 : data.muted : theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.grey5, ", ").concat(theme.colors.grey5, ")"),
1165
- backgroundOrigin: "border-box",
1166
- backgroundClip: "content-box, border-box",
1167
- "&:hover": {
1168
- transition: "0.3s",
1169
- bgcolor: "grey2.main",
1170
- boxShadow: "0px 0px 20px #000000c1;"
1171
- }
1172
- }
1173
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
1174
- onClick: function onClick(e) {
1175
- e.stopPropagation();
1176
- handleClickBackground();
1177
- },
1178
- sx: {
1179
- width: "calc(100% - 4px)",
1180
- height: sizeParams.height,
1181
- display: "flex",
1182
- flexDirection: "row",
1183
- alignItems: "center",
1184
- justifyContent: "space-between",
1185
- borderRadius: "8px",
1186
- border: "2px solid transparent",
1187
- borderRightWidth: "0px",
1188
- borderLeftWidth: "0px",
1189
- margin: "0 auto",
1190
- borderBottomColor: extraInfoComponent && theme.colors.grey3,
1191
- transition: "0.3s",
1192
- position: "relative"
1193
- }
1194
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1195
- direction: "row",
1196
- width: "70%",
1197
- alignItems: "center",
1198
- sx: {
1199
- cursor: "pointer"
1200
- }
1201
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
1202
- style: {
1203
- width: sizeParams.imageSize,
1204
- height: sizeParams.imageSize
1205
- },
1206
- url: bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url
1207
- }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
1208
- style: {
1209
- width: sizeParams.imageSize,
1210
- height: sizeParams.imageSize
1211
- },
1212
- onClick: function onClick(e) {
1213
- if (handleClickPlay) {
1214
- e.stopPropagation();
1215
- handleClickPlay();
1216
- }
1217
- }
1218
- }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
1219
- sx: {
1220
- width: "30px",
1221
- height: "30px",
1222
- color: "white.override"
1223
- }
1224
- }) : /*#__PURE__*/React__default['default'].createElement(PlayOutlineIcon, {
1225
- sx: {
1226
- width: "30px",
1227
- height: "30px",
1228
- color: "white.override"
1229
- }
1230
- }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
1231
- textAlign: "left",
1232
- fontSize: sizeParams.fontSize,
1233
- noWrap: true,
1234
- width: "80%",
1235
- marginLeft: "10px",
1236
- color: "white.override",
1237
- sx: {
1238
- ":hover": {
1239
- textDecoration: handleClickTitle ? "underline" : "none"
1240
- }
1241
- },
1242
- onClick: function onClick(e) {
1243
- if (handleClickTitle) {
1244
- e.stopPropagation();
1245
- handleClickTitle();
1246
- }
1247
- }
1248
- }, /*#__PURE__*/React__default['default'].createElement("a", {
1249
- href: "/soundbites/".concat(bite._id),
1250
- style: {
1251
- textDecoration: "none",
1252
- color: "white"
1253
- }
1254
- }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
1255
- textAlign: "left",
1256
- fontSize: sizeParams.fontSize,
1257
- noWrap: true,
1258
- width: "80%",
1259
- marginLeft: "10px",
1260
- color: "white.override",
1261
- sx: {
1262
- ":hover": {
1263
- textDecoration: handleClickTitle ? "underline" : "none"
1264
- }
1265
- },
1266
- onClick: function onClick(e) {
1267
- if (handleClickTitle) {
1268
- e.stopPropagation();
1269
- handleClickTitle();
1270
- }
1271
- }
1272
- }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
1273
- direction: "row"
1274
- }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
1275
- onClick: function onClick(e) {
1276
- e.stopPropagation();
1277
- handleClickUnsave();
1278
- setOpenSave(true);
1279
- },
1280
- sx: {
1281
- backgroundColor: "white.override",
1282
- padding: "5px",
1283
- marginRight: "10px",
1284
- ":hover": {
1285
- backgroundColor: "grey3.main"
1286
- }
1287
- }
1288
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1289
- sx: {
1290
- color: "notBlack.override"
1291
- }
1292
- })) : /*#__PURE__*/React__default['default'].createElement(IconButton, {
1293
- onClick: function onClick(e) {
1294
- e.stopPropagation();
1295
- handleClickSave();
1296
- setOpenSave(true);
1297
- },
1298
- sx: {
1299
- backgroundColor: "white.override",
1300
- padding: "5px",
1301
- marginRight: "10px",
1302
- ":hover": {
1303
- backgroundColor: "grey3.main"
1304
- }
1305
- }
1306
- }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
1307
- sx: {
1308
- color: "notBlack.override"
1309
- }
1310
- })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(IconButton, {
1311
- onClick: function onClick(e) {
1312
- handleClickThreeDot(e);
1313
- },
1314
- sx: {
1315
- backgroundColor: "white.override",
1316
- padding: "5px",
1317
- marginRight: "10px",
1318
- ":hover": {
1319
- backgroundColor: "grey3.main"
1320
- }
1321
- }
1322
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
1323
- sx: {
1324
- color: "notBlack.override"
1325
- }
1326
- })))), extraInfoComponent && extraInfoComponent);
1327
- };
1328
- BlerpListView$1.propTypes = {
1329
- bite: PropTypes__default['default'].object.isRequired,
1330
- collections: PropTypes__default['default'].array.isRequired,
1331
- variantSize: PropTypes__default['default'].string.isRequired,
1332
- userSignedIn: PropTypes__default['default'].object.isRequired,
1333
- isSelected: PropTypes__default['default'].bool.isRequired,
1334
- playingState: PropTypes__default['default'].string.isRequired,
1335
- actionButton: PropTypes__default['default'].object,
1336
- getUserReactions: PropTypes__default['default'].func.isRequired,
1337
- createCollection: PropTypes__default['default'].func.isRequired,
1338
- handleClickBackground: PropTypes__default['default'].func.isRequired,
1339
- handleClickPlay: PropTypes__default['default'].func.isRequired,
1340
- handleClickThreeDot: PropTypes__default['default'].func.isRequired,
1341
- handleClickSave: PropTypes__default['default'].func.isRequired,
1342
- handleClickReaction: PropTypes__default['default'].func.isRequired,
1343
- handleClickUnsave: PropTypes__default['default'].func.isRequired
1344
- };
1345
-
1346
- function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
1347
-
1348
- function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1349
-
1350
- var colors = {
1351
- white: "#ffffff",
1352
- waxing: "#F3F3F3",
1353
- waxwing: "#F3F3F3",
1354
- grey2: "#E6E6E6",
1355
- grey3: "#C4C4C4",
1356
- grey4: "#939393",
1357
- grey5: "#6F6F6F",
1358
- grey6: "#444444",
1359
- grey7: "#252525",
1360
- notBlack: "#121212",
1361
- black: "#000000",
1362
- discordGrey: "#2C3034",
1363
- secondaryButtonDarkGrey: "#21000C",
1364
- secondaryButtonGrey: "#8A8587",
1365
- thirdButtonGrey: "#BEBEBC",
1366
- ibisRed: "#FE295C",
1367
- starling: "#3507B4",
1368
- seafoam: "#0FEBC5",
1369
- buntingBlue: "#27AAFF",
1370
- popnYellow: "#FFD400"
1371
- };
1372
- var overrideColors = {
1373
- whiteOverride: colors.white,
1374
- waxwingOverride: colors.waxwing,
1375
- grey2Override: colors.grey2,
1376
- grey3Override: colors.grey3,
1377
- grey4Override: colors.grey4,
1378
- grey5Override: colors.grey5,
1379
- grey6Override: colors.grey6,
1380
- grey7Override: colors.grey7,
1381
- notBlackOverride: colors.notBlack,
1382
- blackOverride: colors.black,
1383
- discordGreyOverride: colors.discordGrey,
1384
- secondaryButtonDarkGreyOverride: colors.secondaryButtonDarkGrey,
1385
- secondaryButtonGreyOverride: colors.secondaryButtonGrey,
1386
- thirdButtonGreyOverride: colors.thirdButtonGrey,
1387
- ibisRedOverride: colors.ibisRed,
1388
- starlingOverride: colors.starling,
1389
- seafoamOverride: colors.seafoam,
1390
- buntingBlueOverride: colors.buntingBlue,
1391
- popnYellowOverride: colors.popnYellow
1392
- };
1393
- var lightColors = _objectSpread$4(_objectSpread$4({}, colors), overrideColors);
1394
- var darkColors = _objectSpread$4({
1395
- white: colors.black,
1396
- waxwing: colors.notBlack,
1397
- grey2: colors.grey7,
1398
- grey3: colors.grey6,
1399
- grey4: colors.grey5,
1400
- grey5: colors.grey4,
1401
- grey6: colors.grey3,
1402
- grey7: colors.grey2,
1403
- notBlack: colors.waxwing,
1404
- notBlackOverride: colors.white,
1405
- secondaryButtonDarkGrey: colors.secondaryButtonGrey,
1406
- secondaryButtonGrey: colors.secondaryButtonGrey,
1407
- thirdButtonGrey: colors.thirdButtonGrey,
1408
- ibisRed: colors.ibisRed,
1409
- starling: colors.starling,
1410
- seafoam: colors.seafoam,
1411
- buntingBlue: colors.buntingBlue,
1412
- popnYellow: colors.popnYellow
1413
- }, overrideColors);
1414
- var lightPalette = {
1415
- primary: {
1416
- light: colors.ibisRed,
1417
- main: colors.ibisRed,
1418
- dark: "#DB0F3F",
1419
- contrastText: "#fff"
1420
- },
1421
- secondary: {
1422
- light: colors.notBlack,
1423
- main: colors.notBlack,
1424
- dark: colors.notBlack,
1425
- contrastText: "#000"
1426
- },
1427
- whiteOverride: {
1428
- light: colors.white,
1429
- main: colors.white,
1430
- dark: colors.white,
1431
- override: colors.white,
1432
- contrastText: "#fff"
1433
- },
1434
- white: {
1435
- light: colors.white,
1436
- main: colors.white,
1437
- dark: colors.white,
1438
- override: colors.white,
1439
- contrastText: "#fff"
1440
- },
1441
- neutral: {
1442
- main: "#64748B",
1443
- contrastText: "#fff"
1444
- },
1445
- waxwing: {
1446
- main: colors.waxing
1447
- },
1448
- grey2: {
1449
- main: colors.grey2
1450
- },
1451
- grey3: {
1452
- main: colors.grey3
1453
- },
1454
- grey4: {
1455
- main: colors.grey4
1456
- },
1457
- grey5: {
1458
- main: colors.grey5
1459
- },
1460
- grey6: {
1461
- main: colors.grey6
1462
- },
1463
- grey7: {
1464
- main: colors.grey7
1465
- },
1466
- notBlack: {
1467
- light: colors.notBlack,
1468
- main: colors.notBlack,
1469
- dark: colors.notBlack,
1470
- override: colors.notBlack,
1471
- contrastText: "#fff"
1472
- },
1473
- ibisRed: {
1474
- main: colors.ibisRed,
1475
- dark: "#DB0F3F"
1476
- },
1477
- seafoam: {
1478
- light: colors.seafoam,
1479
- main: colors.seafoam,
1480
- dark: colors.seafoam,
1481
- contrastText: "#fff"
1482
- },
1483
- buntingBlue: {
1484
- main: colors.buntingBlue
1485
- },
1486
- starling: {
1487
- light: colors.starling,
1488
- main: colors.starling,
1489
- dark: colors.starling,
1490
- contrastText: "#fff"
1491
- },
1492
- popnYellow: {
1493
- main: colors.popnYellow
1494
- }
1495
- };
1496
- var darkPalette = {
1497
- primary: {
1498
- light: colors.ibisRed,
1499
- main: colors.ibisRed,
1500
- dark: colors.ibisRed,
1501
- contrastText: "#fff"
1502
- },
1503
- secondary: {
1504
- light: colors.notBlack,
1505
- main: colors.notBlack,
1506
- dark: colors.notBlack,
1507
- contrastText: "#000"
1508
- },
1509
- whiteOverride: {
1510
- light: colors.white,
1511
- main: colors.white,
1512
- dark: colors.white,
1513
- override: colors.white,
1514
- contrastText: "#fff"
1515
- },
1516
- white: {
1517
- light: "#000000",
1518
- main: "#000000",
1519
- dark: "#000000",
1520
- override: colors.white,
1521
- contrastText: "#fff"
1522
- },
1523
- neutral: {
1524
- main: "#64748B",
1525
- contrastText: "#fff"
1526
- },
1527
- waxwing: {
1528
- main: colors.notBlack
1529
- },
1530
- grey2: {
1531
- main: colors.grey7
1532
- },
1533
- grey3: {
1534
- main: colors.grey6
1535
- },
1536
- grey4: {
1537
- main: colors.grey5
1538
- },
1539
- grey5: {
1540
- main: colors.grey4
1541
- },
1542
- grey6: {
1543
- main: colors.grey3
1544
- },
1545
- grey7: {
1546
- main: colors.grey2
1547
- },
1548
- notBlack: {
1549
- light: colors.waxwing,
1550
- main: colors.waxwing,
1551
- dark: colors.waxwing,
1552
- override: colors.notBlack,
1553
- contrastText: "#000"
1554
- },
1555
- black: {
1556
- main: "#ffffff",
1557
- contrastText: "#000"
1558
- },
1559
- ibisRed: {
1560
- main: colors.ibisRed
1561
- },
1562
- seafoam: {
1563
- light: colors.seafoam,
1564
- main: colors.seafoam,
1565
- dark: colors.seafoam,
1566
- contrastText: "#fff"
1567
- },
1568
- buntingBlue: {
1569
- main: colors.buntingBlue
1570
- },
1571
- starling: {
1572
- light: colors.starling,
1573
- main: colors.starling,
1574
- dark: colors.starling,
1575
- contrastText: "#fff"
1576
- },
1577
- popnYellow: {
1578
- main: colors.popnYellow
1579
- }
1580
- };
1581
-
1582
- var _templateObject$7, _templateObject2$5, _templateObject3$4, _templateObject4$2;
1583
-
1584
- function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
1585
-
1586
- function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1587
-
1588
- var motion1 = function motion1(props) {
1589
- return styled.keyframes(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n"])));
1590
- };
1591
-
1592
- var motion2 = function motion2(props) {
1593
- return styled.keyframes(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(19px, 0);\n }\n"])));
1594
- };
1595
-
1596
- var motion3 = function motion3(props) {
1597
- return styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n"])));
1598
- };
1599
-
1600
- var EllipsisSpinner = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: ", ";\n height: ", ";\n div {\n position: absolute;\n width: 11px;\n height: 11px;\n border-radius: 50%;\n background: ", ";\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n }\n div:nth-child(1) {\n left: 6px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(2) {\n left: 6px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(3) {\n left: 26px;\n animation: ", " 0.6s infinite;\n }\n div:nth-child(4) {\n left: 45px;\n animation: ", " 0.6s infinite;\n }\n"])), function (p) {
1601
- return "".concat(p.size).concat(p.sizeUnit);
1602
- }, function (p) {
1603
- return "".concat(p.size).concat(p.sizeUnit);
1604
- }, function (p) {
1605
- return p.color;
1606
- }, function (p) {
1607
- return motion1();
1608
- }, function (p) {
1609
- return motion2();
1610
- }, function (p) {
1611
- return motion2();
1612
- }, function (p) {
1613
- return motion3();
1614
- });
1615
- var EllipsisLoader = function EllipsisLoader(_ref) {
1616
- var color = _ref.color,
1617
- size = _ref.size,
1618
- sizeUnit = _ref.sizeUnit,
1619
- style = _ref.style;
1620
- return /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
1621
- color: color,
1622
- size: size,
1623
- sizeUnit: sizeUnit,
1624
- style: _objectSpread$3({}, style)
1625
- }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
1626
- };
1627
- EllipsisLoader.defaultProps = {
1628
- size: 24,
1629
- color: colors.notBlack,
1630
- sizeUnit: "px",
1631
- style: {
1632
- width: "60px",
1633
- height: "20px"
1634
- }
1635
- };
1636
-
1637
- var _templateObject$6, _templateObject2$4, _templateObject3$3, _templateObject4$1, _templateObject5, _templateObject6, _templateObject7;
1638
- var Slider$2 = styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 16px;\n width: 16px;\n left: 3px;\n bottom: 2px;\n background-color: ", ";\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 50%;\n }\n"])), function (props) {
1639
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
1640
- }, function (props) {
1641
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
1642
- });
1643
- var ToggleInput = styled__default['default'].input(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: ", ";\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(13px);\n -ms-transform: translateX(13px);\n transform: translateX(13px);\n }\n"])), Slider$2, function (props) {
1644
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
1645
- }, Slider$2, function (props) {
1646
- return props.theme.colors.seafoam;
1647
- }, Slider$2, Slider$2);
1648
- var Switch$1 = styled__default['default'].div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 35px;\n min-width: 35px;\n height: 20px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), ToggleInput);
1649
- var BlackSlider = styled__default['default'].div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: transparent;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n border-radius: 34px;\n\n &:before {\n position: absolute;\n content: \"\";\n height: 14px;\n width: 14px;\n -webkit-transition: 0.2s;\n transition: 0.2s;\n background-color: ", ";\n border-radius: 50%;\n }\n"])), function (props) {
1650
- return props.theme.colors.notBlack;
1651
- });
1652
- var BlackToggleInput = styled__default['default'].input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n &:checked + ", " {\n background-color: transparent;\n }\n &:checked + ", ":before {\n background-color: ", ";\n }\n ut:focus + ", " {\n box-shadow: 0 0 1px #2196f3;\n }\n\n &:checked + ", ":before {\n -webkit-transform: translateX(14px);\n -ms-transform: translateX(14px);\n transform: translateX(14px);\n /* -webkit-transform: translateY(2px);\n -ms-transform: translateY(2px);\n transform: translateY(2px); */\n }\n"])), BlackSlider, BlackSlider, function (props) {
1653
- return props.theme.colors.notBlack;
1654
- }, BlackSlider, BlackSlider);
1655
- styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n display: inline-block;\n place-self: center;\n width: 28px;\n height: 14px;\n border: 2px solid ", ";\n border-radius: 14px;\n\n & ", " {\n opacity: 0;\n width: 0;\n height: 0;\n }\n"])), function (props) {
1656
- return props.theme.colors.notBlack;
1657
- }, BlackToggleInput);
1658
- var LoadingContainer = styled__default['default'].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default['default'](["\n width: 50px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n"])));
1659
- var Toggle$1 = function Toggle(_ref) {
1660
- var loading = _ref.loading,
1661
- checked = _ref.checked,
1662
- _onClick = _ref.onClick;
1663
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
1664
- checked: checked,
1665
- onClick: function onClick() {
1666
- return _onClick();
1667
- }
1668
- }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
1669
- checked: checked,
1670
- onChange: function onChange() {
1671
- return null;
1672
- },
1673
- type: "checkbox"
1674
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
1675
- };
1676
-
1677
- function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
1678
-
1679
- function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
1680
- // box-shadow: 0px 0px 20px #0000001a;
1681
- // div:focus {
1682
- // border: none !important;
1683
- // box-shadow: 0px 0px 20px #0000001a;
1684
- // }
1685
- // & .MuiPaper-root {
1686
- // background-color: ${(props) => props.theme.colors.grey3};
1687
- // }
1688
- // `;
1689
-
1690
- var Dropdown$1 = function Dropdown(_ref) {
1691
- var buttonTitle = _ref.buttonTitle,
1692
- buttonLabel = _ref.buttonLabel,
1693
- buttonStyle = _ref.buttonStyle,
1694
- paperStyle = _ref.paperStyle;
1695
- _ref.buttonVariant;
1696
- var handleOptionClicked = _ref.handleOptionClicked,
1697
- startIcon = _ref.startIcon,
1698
- endIcon = _ref.endIcon,
1699
- options = _ref.options;
1700
-
1701
- var _useState = React.useState(null),
1702
- _useState2 = _slicedToArray__default['default'](_useState, 2),
1703
- anchorEl = _useState2[0],
1704
- setAnchorEl = _useState2[1];
1705
-
1706
- var open = Boolean(anchorEl);
1707
-
1708
- var handleClick = function handleClick(event) {
1709
- // console.log(options);
1710
- setAnchorEl(event.currentTarget);
1711
- };
1712
-
1713
- var handleClose = function handleClose() {
1714
- setAnchorEl(null);
1715
- };
1716
-
1717
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
1718
- onClick: function onClick(e) {
1719
- return handleClick(e);
1720
- },
1721
- variant: "contained",
1722
- color: "waxwing",
1723
- icon: true,
1724
- disableElevation: true,
1725
- sx: {
1726
- borderRadius: "4px",
1727
- color: "notBlack.main",
1728
- paddingRight: "4px",
1729
- paddingLeft: "4px"
1730
- },
1731
- style: buttonStyle
1732
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1733
- direction: "row",
1734
- justifyContent: "space-between",
1735
- alignItems: "center",
1736
- width: "100%"
1737
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1738
- direction: "row",
1739
- alignItems: "center",
1740
- overflow: "hidden",
1741
- width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
1742
- }, startIcon, /*#__PURE__*/React__default['default'].createElement(Stack, {
1743
- alignItems: "flex-start",
1744
- marginLeft: "12px"
1745
- }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(Text, {
1746
- noWrap: true,
1747
- fontSize: "8px",
1748
- color: "grey4.main",
1749
- fontWeight: "light"
1750
- }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(Text, {
1751
- noWrap: true,
1752
- fontSize: "14px",
1753
- color: "grey5.main",
1754
- marginRight: "16px"
1755
- }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
1756
- sx: {
1757
- color: "grey5.main"
1758
- },
1759
- fontSize: "medium"
1760
- }))), /*#__PURE__*/React__default['default'].createElement(Menu, {
1761
- id: "demo-customized-menu",
1762
- MenuListProps: {
1763
- "aria-labelledby": "demo-customized-button"
1764
- },
1765
- anchorEl: anchorEl,
1766
- open: open,
1767
- onClose: handleClose,
1768
- elevation: 0,
1769
- sx: {
1770
- top: "10px"
1771
- },
1772
- anchorOrigin: {
1773
- vertical: "bottom",
1774
- horizontal: "left"
1775
- },
1776
- transformOrigin: {
1777
- vertical: "top",
1778
- horizontal: "left"
1779
- },
1780
- PaperProps: {
1781
- sx: _objectSpread$2({
1782
- "& ul": {
1783
- padding: "0"
1784
- },
1785
- width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
1786
- backgroundColor: "waxwing.main",
1787
- boxShadow: "0px 0px 20px #0000001a;"
1788
- }, paperStyle)
1789
- }
1790
- }, options === null || options === void 0 ? void 0 : options.map(function (option) {
1791
- return /*#__PURE__*/React__default['default'].createElement(MenuItem, {
1792
- key: "dropdown-".concat(option.name),
1793
- selected: buttonTitle === option.name,
1794
- sx: {
1795
- borderRadius: "4px",
1796
- "&.Mui-selected": {
1797
- color: "white.main",
1798
- backgroundColor: "ibisRed.main"
1799
- },
1800
- ":hover": {
1801
- color: "white.main",
1802
- backgroundColor: "ibisRed.main"
1803
- },
1804
- "&.Mui-selected:hover": {
1805
- color: "white.main",
1806
- backgroundColor: "ibisRed.main"
1807
- }
1808
- },
1809
- onClick: function onClick() {
1810
- handleOptionClicked(option);
1811
- handleClose();
1812
- }
1813
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
1814
- noWrap: true
1815
- }, option.name));
1816
- })));
1817
- };
1818
-
1819
- var _templateObject$5, _templateObject2$3, _templateObject3$2;
1820
- var Slider$1 = styled__default['default'].input(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral__default['default'](["\n -webkit-appearance: none;\n align-self: center;\n width: 80%;\n height: 5px;\n border-radius: 5px;\n background: #d3d3d3;\n outline: none;\n opacity: 0.7;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n\n &:focus {\n border: 0px !important;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n background: ", ";\n border: 2px solid ", ";\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 25px;\n height: 25px;\n border-radius: 50%;\n background: ", ";\n border: 2px solid ", ";\n cursor: pointer;\n }\n"])), function (props) {
1821
- return props.theme.colors.ibisRed;
1822
- }, function (props) {
1823
- return props.theme.colors.waxwing;
1824
- }, function (props) {
1825
- return props.theme.colors.ibisRed;
1826
- }, function (props) {
1827
- return props.theme.colors.waxwing;
1828
- });
1829
- styled__default['default'].div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://storage.googleapis.com/blerp_products/Twitch/Assets/Close_Black.svg?folder=true&organizationId=true\");\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n width: 15px;\n height: 15px;\n position: absolute;\n top: 20px;\n right: 20px;\n cursor: pointer;\n"])));
1830
- var ZoomIcon = styled__default['default'].div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral__default['default'](["\n background-image: url(\"https://storage.googleapis.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n background-repeat: no-repeat;\n background-position: left;\n background-size: cover;\n width: 20px;\n height: 20px;\n"])));
1831
-
1832
- var ImageUploadModal = function ImageUploadModal(_ref) {
1833
- var _ref6;
1834
-
1835
- var prevImage = _ref.prevImage,
1836
- updateImage = _ref.updateImage,
1837
- onClose = _ref.onClose,
1838
- title = _ref.title,
1839
- isCircularImage = _ref.isCircularImage,
1840
- isSquareImage = _ref.isSquareImage,
1841
- sizeInfo = _ref.sizeInfo;
1842
-
1843
- var _useState = React.useState(prevImage),
1844
- _useState2 = _slicedToArray__default['default'](_useState, 2),
1845
- image = _useState2[0],
1846
- setImage = _useState2[1];
1847
-
1848
- var _useState3 = React.useState(50),
1849
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
1850
- zoom = _useState4[0],
1851
- setZoom = _useState4[1];
1852
-
1853
- var _useState5 = React.useState(false),
1854
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
1855
- loading = _useState6[0],
1856
- setLoading = _useState6[1];
1857
-
1858
- var _useState7 = React.useState(false),
1859
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
1860
- dropzoneHovered = _useState8[0],
1861
- setDropzoneHovered = _useState8[1];
1862
-
1863
- var size = useWindowSize();
1864
-
1865
- var urlToObject = /*#__PURE__*/function () {
1866
- var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(img) {
1867
- var response, blob, file;
1868
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
1869
- while (1) {
1870
- switch (_context.prev = _context.next) {
1871
- case 0:
1872
- _context.next = 2;
1873
- return fetch(img);
1874
-
1875
- case 2:
1876
- response = _context.sent;
1877
- _context.next = 5;
1878
- return response.blob();
1879
-
1880
- case 5:
1881
- blob = _context.sent;
1882
- file = new File([blob], img, {
1883
- type: blob.type
1884
- });
1885
- setImage(file);
1886
-
1887
- case 8:
1888
- case "end":
1889
- return _context.stop();
1890
- }
1891
- }
1892
- }, _callee);
1893
- }));
1894
-
1895
- return function urlToObject(_x) {
1896
- return _ref2.apply(this, arguments);
1897
- };
1898
- }();
1899
-
1900
- React.useEffect(function () {
1901
- if (prevImage) {
1902
- urlToObject(prevImage);
1903
- }
1904
- }, [prevImage]);
1905
- var imageEditorRef = /*#__PURE__*/React.createRef();
1906
-
1907
- var handleImageDrop = function handleImageDrop(acceptedFiles) {
1908
- if (acceptedFiles[0].type === "image/gif") {
1909
- console.log("hit dat GIF in IF");
1910
- }
1911
-
1912
- setImage(acceptedFiles[0]);
1913
- setDropzoneHovered(false);
1914
- };
1915
-
1916
- var handleGifUpload = /*#__PURE__*/function () {
1917
- var _ref3 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee2() {
1918
- return _regeneratorRuntime__default['default'].wrap(function _callee2$(_context2) {
1919
- while (1) {
1920
- switch (_context2.prev = _context2.next) {
1921
- case 0:
1922
- if (image.name !== prevImage) {
1923
- console.log("does not equal");
1924
- updateImage(image);
1925
- }
1926
-
1927
- onClose();
1928
-
1929
- case 2:
1930
- case "end":
1931
- return _context2.stop();
1932
- }
1933
- }
1934
- }, _callee2);
1935
- }));
1936
-
1937
- return function handleGifUpload() {
1938
- return _ref3.apply(this, arguments);
1939
- };
1940
- }(); // This is called when there is a non-gif photo ready to be uploaded
1941
-
1942
-
1943
- var handleUploadClick = /*#__PURE__*/function () {
1944
- var _ref4 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee3() {
1945
- var canvas, file;
1946
- return _regeneratorRuntime__default['default'].wrap(function _callee3$(_context3) {
1947
- while (1) {
1948
- switch (_context3.prev = _context3.next) {
1949
- case 0:
1950
- if (image) {
1951
- _context3.next = 3;
1952
- break;
1953
- }
1954
-
1955
- alert("You must upload a valid image");
1956
- return _context3.abrupt("return");
1957
-
1958
- case 3:
1959
- if (!(image.size > 8842038)) {
1960
- _context3.next = 6;
1961
- break;
1962
- }
1963
-
1964
- alert("You must update with a valid image less then 7mb");
1965
- return _context3.abrupt("return");
1966
-
1967
- case 6:
1968
- // create a dom element for the photo and creates a data URL (URI)
1969
- setLoading(true);
1970
- canvas = imageEditorRef.current.getImage().toDataURL();
1971
- _context3.next = 10;
1972
- return fetch(canvas) // canvas res is the URL data of the photo. Now the .blob() method reads that data URL (URI), and creates a new Blob (file-like object of immutable data)
1973
- . // canvas res is the URL data of the photo. Now the .blob() method reads that data URL (URI), and creates a new Blob (file-like object of immutable data)
1974
- then(function (res) {
1975
- return res.blob();
1976
- }).then(function (blob) {
1977
- // assign the blob data to the DOM STRING of the DOM element
1978
- window.URL.createObjectURL(blob); // create an image file using the data from the blob, assign the file a name, assign the file type
1979
- // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
1980
-
1981
- // create an image file using the data from the blob, assign the file a name, assign the file type
1982
- // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
1983
- file = new File([blob], image.name + ".JPG", {
1984
- type: image.type
1985
- });
1986
- });
1987
-
1988
- case 10:
1989
- _context3.next = 12;
1990
- return updateImage(file);
1991
-
1992
- case 12:
1993
- setLoading(false);
1994
- onClose();
1995
-
1996
- case 14:
1997
- case "end":
1998
- return _context3.stop();
1999
- }
2000
- }
2001
- }, _callee3);
2002
- }));
2003
-
2004
- return function handleUploadClick() {
2005
- return _ref4.apply(this, arguments);
2006
- };
2007
- }();
2008
-
2009
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
2010
- sx: {
2011
- minHeight: "580px"
2012
- },
2013
- alignItems: "center",
2014
- justifyContent: "space-between"
2015
- }, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
2016
- sx: {
2017
- position: "absolute",
2018
- cursor: "pointer",
2019
- top: "20px",
2020
- right: "20px"
2021
- },
2022
- onClick: function onClick() {
2023
- return onClose();
2024
- }
2025
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2026
- alignItems: "center",
2027
- sx: {
2028
- position: "relative"
2029
- }
2030
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2031
- sx: {
2032
- fontSize: "32px",
2033
- marginbottom: "16px"
2034
- }
2035
- }, title), /*#__PURE__*/React__default['default'].createElement(Text, {
2036
- color: "grey4",
2037
- sx: {
2038
- fontWeight: "lighter",
2039
- marginBottom: "2px"
2040
- }
2041
- }, "Adjust your image below."), /*#__PURE__*/React__default['default'].createElement(Text, {
2042
- color: "grey4",
2043
- sx: {
2044
- fontWeight: "lighter",
2045
- marginBottom: "2px"
2046
- }
2047
- }, sizeInfo)), loading ? /*#__PURE__*/React__default['default'].createElement("div", {
2048
- style: {
2049
- width: "100%",
2050
- height: "300px"
2051
- }
2052
- }, /*#__PURE__*/React__default['default'].createElement(Text, null, "Loading...")) : /*#__PURE__*/React__default['default'].createElement(Stack, {
2053
- sx: {
2054
- minWidth: "300px",
2055
- margin: "0px 0",
2056
- position: "relative",
2057
- backgroundColor: "waxwing.main",
2058
- maxHeight: "250px",
2059
- overflow: "hidden",
2060
- justifyContent: "center",
2061
- alignItems: "center"
2062
- }
2063
- }, image ? image.type !== "image/gif" ? isCircularImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2064
- ref: imageEditorRef,
2065
- width: 250,
2066
- height: 250,
2067
- borderRadius: 125,
2068
- image: image,
2069
- scale: zoom / 50,
2070
- crossOrigin: "anonymous"
2071
- })) : isSquareImage ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2072
- ref: imageEditorRef,
2073
- width: 250,
2074
- height: 250,
2075
- borderRadius: 0,
2076
- image: image,
2077
- scale: zoom / 50,
2078
- crossOrigin: "anonymous"
2079
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(AvatarEditor__default['default'], {
2080
- ref: imageEditorRef,
2081
- width: 650,
2082
- height: 225,
2083
- image: image,
2084
- scale: zoom / 50,
2085
- crossorigin: "anonymous"
2086
- })) : /*#__PURE__*/React__default['default'].createElement("img", {
2087
- src: URL.createObjectURL(image) || image.name,
2088
- width: "250px",
2089
- height: "auto",
2090
- style: {
2091
- alignSelf: "center"
2092
- }
2093
- }) : /*#__PURE__*/React__default['default'].createElement(Dropzone__default['default'], {
2094
- onDragEnter: function onDragEnter() {
2095
- return setDropzoneHovered(true);
2096
- },
2097
- onDragLeave: function onDragLeave() {
2098
- return setDropzoneHovered(false);
2099
- },
2100
- onDrop: function onDrop(acceptedFiles) {
2101
- return handleImageDrop(acceptedFiles);
2102
- }
2103
- }, function (_ref5) {
2104
- var getRootProps = _ref5.getRootProps,
2105
- getInputProps = _ref5.getInputProps;
2106
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
2107
- sx: {
2108
- width: "100%",
2109
- height: size.width > 600 ? "300px" : "200px",
2110
- cursor: "pointer",
2111
- box: "borderBox",
2112
- justifyContent: "center"
2113
- }
2114
- }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
2115
- style: {
2116
- height: "100%",
2117
- display: "flex"
2118
- }
2119
- }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2120
- color: "grey3",
2121
- style: {
2122
- justifyContent: "center",
2123
- alignItems: "center",
2124
- width: "100%"
2125
- }
2126
- }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
2127
- style: {
2128
- color: "white",
2129
- height: "90%",
2130
- width: "90%"
2131
- }
2132
- })) : /*#__PURE__*/React__default['default'].createElement(Text, {
2133
- sx: {
2134
- flexWrap: "wrap",
2135
- width: "80%",
2136
- alignSelf: "center",
2137
- textAlign: "center",
2138
- verticalAlign: "center",
2139
- margin: "auto"
2140
- }
2141
- }, "Click or drop image here to upload.")));
2142
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
2143
- alignItems: "center"
2144
- }, image && image.type !== "image/gif" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2145
- direction: "row",
2146
- style: {
2147
- justifyContent: "space-around"
2148
- }
2149
- }, /*#__PURE__*/React__default['default'].createElement(ZoomIcon, null), /*#__PURE__*/React__default['default'].createElement(Slider$1, {
2150
- type: "range",
2151
- min: "35",
2152
- max: "100",
2153
- value: zoom,
2154
- onChange: function onChange(e) {
2155
- return setZoom(e.target.value);
2156
- }
2157
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(Button, {
2158
- variant: "text",
2159
- color: "notBlack",
2160
- sx: (_ref6 = {
2161
- textDecoration: "none",
2162
- textTransform: "none",
2163
- cursor: "pointer"
2164
- }, _defineProperty__default['default'](_ref6, "textDecoration", "underline"), _defineProperty__default['default'](_ref6, "margin", "20px 0"), _ref6),
2165
- onClick: function onClick() {
2166
- return setImage(image ? null : function () {
2167
- urlToObject(prevImage);
2168
- return image;
2169
- });
2170
- }
2171
- }, image ? "Change Image" : "Cancel"), /*#__PURE__*/React__default['default'].createElement(Button, {
2172
- variant: "contained",
2173
- disableElevation: true,
2174
- onClick: function onClick() {
2175
- image.type === "image/gif" ? handleGifUpload() : handleUploadClick();
2176
- }
2177
- }, "Save Image")));
2178
- };
2179
-
2180
- var _templateObject$4;
2181
- styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default']([""])));
2182
- var NewCollectionModal$1 = function NewCollectionModal(_ref) {
2183
- var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
2184
-
2185
- var handleCollection = _ref.handleCollection,
2186
- deleteCollection = _ref.deleteCollection,
2187
- trigger = _ref.trigger,
2188
- collectionToBeEdited = _ref.collectionToBeEdited;
2189
- _ref.children;
2190
- var isAdmin = _ref.isAdmin;
2191
-
2192
- var _useState = React.useState(false),
2193
- _useState2 = _slicedToArray__default['default'](_useState, 2),
2194
- open = _useState2[0],
2195
- setopen = _useState2[1];
2196
-
2197
- var _useState3 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original),
2198
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
2199
- imageFile = _useState4[0],
2200
- setImageFile = _useState4[1];
2201
-
2202
- var _useState5 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url),
2203
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
2204
- imageURL = _useState6[0],
2205
- setImageURL = _useState6[1];
2206
-
2207
- var _useState7 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.title),
2208
- _useState8 = _slicedToArray__default['default'](_useState7, 2),
2209
- titleInput = _useState8[0],
2210
- setTitleInput = _useState8[1];
2211
-
2212
- var _useState9 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.description),
2213
- _useState10 = _slicedToArray__default['default'](_useState9, 2),
2214
- descriptionInput = _useState10[0],
2215
- setDescriptionInput = _useState10[1];
2216
-
2217
- var _useState11 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.visibility),
2218
- _useState12 = _slicedToArray__default['default'](_useState11, 2),
2219
- visibility = _useState12[0],
2220
- setVisibility = _useState12[1];
2221
-
2222
- var _useState13 = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.price),
2223
- _useState14 = _slicedToArray__default['default'](_useState13, 2),
2224
- price = _useState14[0],
2225
- setPrice = _useState14[1];
2226
-
2227
- var triggerRef = React.useRef();
2228
-
2229
- var _useState15 = React.useState(false),
2230
- _useState16 = _slicedToArray__default['default'](_useState15, 2),
2231
- editImage = _useState16[0],
2232
- setEditImage = _useState16[1];
2233
-
2234
- var _useState17 = React.useState(false),
2235
- _useState18 = _slicedToArray__default['default'](_useState17, 2),
2236
- showDeleteModal = _useState18[0],
2237
- setShowDeleteModal = _useState18[1];
2238
-
2239
- var size = useWindowSize();
2240
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
2241
- ref: triggerRef,
2242
- onClick: function onClick() {
2243
- return setopen(true);
2244
- }
2245
- }) : /*#__PURE__*/React__default['default'].createElement(Button, {
2246
- onClick: function onClick() {
2247
- return setopen(true);
2248
- },
2249
- color: "grey4",
2250
- sx: {
2251
- fontSize: "10px"
2252
- }
2253
- }, "Organize Collection"), /*#__PURE__*/React__default['default'].createElement(Modal, {
2254
- "aria-labelledby": "transition-modal-title",
2255
- "aria-describedby": "transition-modal-description",
2256
- open: open,
2257
- onClose: function onClose() {
2258
- return setopen(false);
2259
- },
2260
- closeAfterTransition: true
2261
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2262
- sx: {
2263
- position: "absolute",
2264
- top: "50%",
2265
- left: "50%",
2266
- transform: "translate(-50%, -50%)",
2267
- width: 600,
2268
- height: 520,
2269
- overflowY: "auto",
2270
- bgcolor: "white.main",
2271
- border: "none",
2272
- boxShadow: 24,
2273
- borderRadius: "8px",
2274
- pt: 2,
2275
- px: 6,
2276
- pb: 3,
2277
- alignItems: "center",
2278
- justifyContent: "flex-start",
2279
- "@media(max-width: 600px)": {
2280
- height: "100vh",
2281
- width: "98vw"
2282
- }
2283
- }
2284
- }, /*#__PURE__*/React__default['default'].createElement(Modal, {
2285
- sx: {
2286
- backdropFilter: "blur(8px)",
2287
- overflow: "scroll"
2288
- },
2289
- open: editImage,
2290
- onClose: function onClose() {
2291
- return setEditImage(false);
2292
- },
2293
- "aria-labelledby": "image-update-modal",
2294
- "aria-describedby": "image-update-modal"
2295
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2296
- sx: {
2297
- position: "absolute",
2298
- height: size.width > 600 ? 600 : "100%",
2299
- overflowY: "auto",
2300
- top: size.width > 600 ? "48%" : "0",
2301
- left: size.width > 600 ? "50%" : "0",
2302
- transform: size.width > 600 ? "translate(-50%, -50%)" : "0",
2303
- width: size.width > 600 ? 275 : "100vw",
2304
- minWidth: "320px",
2305
- bgcolor: "white.main",
2306
- boxShadow: 24,
2307
- borderRadius: size.width > 600 ? "8px" : "0",
2308
- p: size.width > 600 ? 4 : 0,
2309
- padding: size.width > 600 ? "16px 32px 32px" : "16px 0",
2310
- ":focus": {
2311
- border: "none",
2312
- outline: "none"
2313
- }
2314
- }
2315
- }, /*#__PURE__*/React__default['default'].createElement(ImageUploadModal, {
2316
- prevImage: collectionToBeEdited ? imageURL : undefined,
2317
- updateImage: function updateImage(newImage) {
2318
- setImageURL(URL.createObjectURL(newImage));
2319
- setImageFile(newImage);
2320
- },
2321
- width: "150px",
2322
- open: editImage,
2323
- onClose: function onClose() {
2324
- return setEditImage(false);
2325
- },
2326
- title: "Collection Image",
2327
- sizeInfo: "Minimum size is 64px X 64px",
2328
- isSquareImage: true
2329
- }))), /*#__PURE__*/React__default['default'].createElement(Modal, {
2330
- sx: {
2331
- backdropFilter: "blur(8px)"
2332
- },
2333
- open: showDeleteModal,
2334
- onClose: function onClose() {
2335
- return setShowDeleteModal(false);
2336
- },
2337
- "aria-labelledby": "delete-collection-modal",
2338
- "aria-describedby": "delete-collection-modal"
2339
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2340
- sx: {
2341
- height: "auto",
2342
- position: "absolute",
2343
- top: "48%",
2344
- left: "50%",
2345
- transform: "translate(-50%, -50%)",
2346
- bgcolor: "white.main",
2347
- boxShadow: 24,
2348
- borderRadius: "8px",
2349
- p: 4,
2350
- minWidth: "320px",
2351
- maxWidth: "500px",
2352
- padding: "16px 32px 32px",
2353
- alignItems: "center",
2354
- ":focus": {
2355
- border: "none",
2356
- outline: "none"
2357
- }
2358
- }
2359
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2360
- sx: {
2361
- textAlign: "center",
2362
- marginBottom: "16px"
2363
- }
2364
- }, "Are you sure you want to delete this collection? This action can not be reversed!"), /*#__PURE__*/React__default['default'].createElement(Stack, {
2365
- direction: "row",
2366
- sx: {
2367
- width: "100%",
2368
- justifyContent: "space-around"
2369
- }
2370
- }, /*#__PURE__*/React__default['default'].createElement(Button, {
2371
- variant: "outlined",
2372
- onClick: /*#__PURE__*/function () {
2373
- var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(e) {
2374
- return _regeneratorRuntime__default['default'].wrap(function _callee$(_context) {
2375
- while (1) {
2376
- switch (_context.prev = _context.next) {
2377
- case 0:
2378
- e.stopPropagation();
2379
-
2380
- try {
2381
- deleteCollection({
2382
- variables: {
2383
- collectionId: collectionToBeEdited._id
2384
- }
2385
- });
2386
- setShowDeleteModal(false);
2387
- setopen(false);
2388
- } catch (err) {
2389
- console.log(err);
2390
- }
2391
-
2392
- case 2:
2393
- case "end":
2394
- return _context.stop();
2395
- }
2396
- }
2397
- }, _callee);
2398
- }));
2399
-
2400
- return function (_x) {
2401
- return _ref2.apply(this, arguments);
2402
- };
2403
- }()
2404
- }, "Yes - Trash It!"), /*#__PURE__*/React__default['default'].createElement(Button, {
2405
- variant: "outlined",
2406
- color: "seafoam",
2407
- onClick: function onClick() {
2408
- return setShowDeleteModal(false);
2409
- }
2410
- }, "No - Keep It!")))), /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
2411
- sx: {
2412
- color: "notBlack.main",
2413
- position: "absolute",
2414
- right: 10,
2415
- top: 10,
2416
- cursor: "pointer",
2417
- "@media(max-width: 600px)": {
2418
- right: 50,
2419
- top: 30
2420
- }
2421
- },
2422
- onClick: function onClick() {
2423
- return setopen(false);
2424
- }
2425
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2426
- sx: {
2427
- minWidth: "320px"
2428
- }
2429
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2430
- sx: {
2431
- alignSelf: size.width > 600 ? "flex-start" : "center"
2432
- },
2433
- fontSize: "40px",
2434
- margin: size.width > 600 ? "9px 0" : "24px 0 9px"
2435
- }, collectionToBeEdited ? "Edit" : "New", " Collection"), /*#__PURE__*/React__default['default'].createElement(Stack, {
2436
- direction: size.width > 600 ? "row" : "column",
2437
- sx: {
2438
- width: "100%",
2439
- marginTop: "8px",
2440
- minHeight: size.width > 600 ? "272px" : "470px",
2441
- justifyContent: size.width > 600 ? "center" : "space-between"
2442
- }
2443
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2444
- alignItems: "center",
2445
- justifyContent: "flex-start",
2446
- marginRight: size.width > 600 ? size.width > 700 ? "48px" : "32px" : "0"
2447
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2448
- sx: {
2449
- width: "180px",
2450
- position: "relative",
2451
- justifyContent: "flex-start",
2452
- "&:hover": {
2453
- width: "180px",
2454
- background: "notBlack.main"
2455
- }
2456
- }
2457
- }, imageURL ? /*#__PURE__*/React__default['default'].createElement("img", {
2458
- style: {
2459
- objectFit: "cover",
2460
- width: "100%",
2461
- minWidth: "75px",
2462
- height: "auto",
2463
- borderRadius: "8px"
2464
- },
2465
- alt: "uploaded img",
2466
- src: imageURL
2467
- }) : /*#__PURE__*/React__default['default'].createElement(Stack, {
2468
- sx: {
2469
- justifyContent: "center",
2470
- width: "calc(100% - 2px)",
2471
- minWidth: "75px",
2472
- height: "176px",
2473
- borderRadius: "8px",
2474
- border: "1px solid",
2475
- color: "grey3.main"
2476
- }
2477
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2478
- sx: {
2479
- textAlign: "center"
2480
- }
2481
- }, "Click here to upload a photo for this collection")), /*#__PURE__*/React__default['default'].createElement(Stack, {
2482
- sx: {
2483
- position: "absolute",
2484
- justifyContent: "flex-end",
2485
- alignItems: "flex-end",
2486
- top: "0",
2487
- right: "0",
2488
- width: "100%",
2489
- height: "100%",
2490
- backgroundColor: "transparent",
2491
- transition: "0.2s",
2492
- "&:hover div": {
2493
- transition: "0.2s",
2494
- opacity: "1"
2495
- }
2496
- },
2497
- style: {
2498
- borderRadius: "50%",
2499
- zIndex: "6"
2500
- },
2501
- onClick: function onClick() {
2502
- return setEditImage(true);
2503
- }
2504
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2505
- alignItems: "center",
2506
- justifyContent: "center",
2507
- sx: {
2508
- opacity: "0",
2509
- position: "absolute",
2510
- top: "0",
2511
- bottom: "0",
2512
- left: "0",
2513
- right: "0",
2514
- cursor: "pointer",
2515
- width: "100%",
2516
- transition: "opacity .2s",
2517
- background: "black",
2518
- borderRadius: "8px"
2519
- }
2520
- }, /*#__PURE__*/React__default['default'].createElement(FileUploadRoundedIcon__default['default'], {
2521
- sx: {
2522
- color: "white.main",
2523
- fontSize: "40px",
2524
- height: "120px",
2525
- width: "120px"
2526
- }
2527
- }))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
2528
- justifyContent: "space-between",
2529
- sx: {
2530
- // height: "220px",
2531
- width: "64%",
2532
- minWidth: "320px",
2533
- position: "relative",
2534
- top: size.width > 600 ? "-20px" : "0",
2535
- margin: "0 auto"
2536
- }
2537
- }, /*#__PURE__*/React__default['default'].createElement(Input, {
2538
- disabled: !isAdmin && visibility === "PREMIUM",
2539
- color: "notBlack",
2540
- label: "Collection Name",
2541
- value: titleInput,
2542
- onChange: function onChange(e) {
2543
- return setTitleInput(e.target.value);
2544
- },
2545
- variant: "standard",
2546
- sx: {
2547
- margin: "0"
2548
- }
2549
- }), /*#__PURE__*/React__default['default'].createElement(Input, {
2550
- disabled: !isAdmin && visibility === "PREMIUM",
2551
- label: "Add a description",
2552
- variant: "filled",
2553
- color: "notBlack",
2554
- value: descriptionInput,
2555
- onChange: function onChange(e) {
2556
- return setDescriptionInput(e.target.value);
2557
- },
2558
- multiline: true,
2559
- rows: 4,
2560
- sx: {
2561
- fontSize: "16px",
2562
- paddingBottom: "12px",
2563
- marginTop: "18px"
2564
- }
2565
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2566
- direction: "row",
2567
- alignItems: "center",
2568
- justifyContent: "space-between"
2569
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2570
- sx: {
2571
- width: "40%"
2572
- }
2573
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2574
- marginBottom: "4px",
2575
- fontSize: "18px"
2576
- }, "Visibility:"), /*#__PURE__*/React__default['default'].createElement(Dropdown, {
2577
- sx: {
2578
- height: "40px"
2579
- },
2580
- buttonTitle: visibility,
2581
- handleOptionClicked: function handleOptionClicked(option) {
2582
- return setVisibility(option.name);
2583
- },
2584
- options: isAdmin ? [{
2585
- name: "PUBLIC"
2586
- }, {
2587
- name: "PRIVATE"
2588
- }, {
2589
- name: "UNLISTED"
2590
- }, {
2591
- name: "PREMIUM"
2592
- }] : // This is here due to the "disabled" prop not being applicable to a dropdown
2593
- visibility === "PREMIUM" ? [{
2594
- name: "PREMIUM"
2595
- }] : [{
2596
- name: "PUBLIC"
2597
- }, {
2598
- name: "PRIVATE"
2599
- }, {
2600
- name: "UNLISTED"
2601
- }]
2602
- })), visibility === "PREMIUM" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
2603
- sx: {
2604
- width: "40%"
2605
- }
2606
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
2607
- marginBottom: "4px",
2608
- fontSize: "18px"
2609
- }, "Price:"), /*#__PURE__*/React__default['default'].createElement(Input, {
2610
- error: !(price > 0),
2611
- size: "small",
2612
- startAdornment: "$",
2613
- variant: "standard",
2614
- color: "grey6",
2615
- value: price,
2616
- onChange: function onChange(e) {
2617
- setPrice(e.target.value);
2618
- }
2619
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))), /*#__PURE__*/React__default['default'].createElement(Button, {
2620
- color: "primary",
2621
- variant: "contained",
2622
- fontSize: "32px",
2623
- sx: {
2624
- width: "40%",
2625
- minWidth: "200px",
2626
- height: "48px",
2627
- fontWeight: "16px",
2628
- margin: size.width > 600 ? "0px auto 0" : "40px auto 0"
2629
- },
2630
- disableElevation: true,
2631
- onClick: function onClick() {
2632
- // what to do if this modal is being used to edit a collection
2633
- if (collectionToBeEdited) {
2634
- if (visibility !== "PREMIUM" || visibility === "PREMIUM" && price > 0) {
2635
- handleCollection({
2636
- _id: collectionToBeEdited._id,
2637
- image: imageFile,
2638
- title: titleInput,
2639
- description: descriptionInput,
2640
- visibility: visibility,
2641
- price: price
2642
- });
2643
- setopen(false);
2644
- } else {
2645
- console.log("price must be set higher than 0");
2646
- } // what to do if this modal is being used to create a new collection
2647
-
2648
- } else {
2649
- if (visibility !== "PREMIUM" || visibility === "PREMIUM" && price > 0) {
2650
- handleCollection({
2651
- image: imageFile,
2652
- title: titleInput,
2653
- description: descriptionInput,
2654
- visibility: visibility,
2655
- price: visibility === "PREMIUM" ? price : 0
2656
- });
2657
- setopen(false);
2658
- } else {
2659
- console.log("price must be set higher than 0");
2660
- }
2661
- }
2662
- }
2663
- }, collectionToBeEdited ? "Save Changes" : "Create Collection"), /*#__PURE__*/React__default['default'].createElement(Button, {
2664
- color: "primary",
2665
- variant: "text",
2666
- fontSize: "16px",
2667
- disableElevation: true,
2668
- sx: {
2669
- margin: "10px auto"
2670
- },
2671
- onClick: function onClick() {
2672
- if (collectionToBeEdited) {
2673
- setShowDeleteModal(true);
2674
- }
2675
-
2676
- if (!collectionToBeEdited) {
2677
- setopen(false);
2678
- }
2679
- }
2680
- }, collectionToBeEdited ? /*#__PURE__*/React__default['default'].createElement(DeleteIcon__default['default'], {
2681
- sx: {
2682
- color: "ibisRed.main",
2683
- marginRight: "4px"
2684
- }
2685
- }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), collectionToBeEdited ? "Delete Collection" : "Cancel"), /*#__PURE__*/React__default['default'].createElement(Text, {
2686
- fontSize: "14px",
2687
- textAlign: "center",
2688
- fontWeight: "lighter",
2689
- sx: {
2690
- width: "95%"
2691
- }
2692
- }, "By proceeding, you agree to allow Blerp access to the image you choose to upload. Please make sure you have the right to upload the image.")))));
2693
- };
2694
-
2695
- var _templateObject$3, _templateObject2$2, _templateObject3$1;
2696
- var FeaturedBlerpSkeleton = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 234px;\n width: 220px;\n border: 2px solid ", ";\n border-radius: 8px;\n\n @media (max-width: 900px) {\n height: 190px;\n width: 180px;\n border: 2px solid ", ";\n border-radius: 8px;\n }\n\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
2697
- return props.theme.colors.grey2;
2698
- }, function (props) {
2699
- return props.theme.colors.grey2;
2700
- });
2701
- var FeaturedBlerpCircle = styled__default['default'].div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral__default['default'](["\n height: 135px;\n width: 135px;\n border-radius: 50%;\n margin-top: 30px;\n background: ", ";\n\n @media (max-width: 900px) {\n height: 100px;\n width: 100px;\n margin-top: 30px;\n }\n"])), function (props) {
2702
- return props.theme.colors.grey2;
2703
- });
2704
- var FeaturedBlerpTitle = styled__default['default'].div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral__default['default'](["\n width: 80%;\n height: 24px;\n background: ", ";\n margin-bottom: 20px;\n"])), function (props) {
2705
- return props.theme.colors.grey2;
2706
- });
2707
- var BlerpSkeleton$1 = function BlerpSkeleton() {
2708
- return /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpTitle, null));
2709
- };
2710
-
2711
- var _templateObject$2, _templateObject2$1, _templateObject3, _templateObject4;
2712
- var NewBlerpsSkeleton = styled__default['default'].div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 300px;\n height: 44px;\n background: ", ";\n border-radius: 8px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.5;\n }\n }\n"])), function (props) {
2713
- return props.theme.colors.grey4;
2714
- });
2715
- var LeftNewBlerpsBox = styled__default['default'].div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral__default['default'](["\n height: 38px;\n width: 38px;\n background-color: ", ";\n border-radius: 8px;\n margin-left: 4px;\n"])), function (props) {
2716
- return props.theme.colors.white;
2717
- });
2718
- var RightNewBlerpsBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n width: 80px;\n margin-right: 10px;\n"])));
2719
- var NewBlerpsCircle = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n height: 34px;\n width: 34px;\n background-color: ", ";\n border-radius: 50%;\n"])), function (props) {
2720
- return props.theme.colors.white;
2721
- });
2722
- var BlerpListViewSkeleton$1 = function BlerpListViewSkeleton() {
2723
- return /*#__PURE__*/React__default['default'].createElement(NewBlerpsSkeleton, {
2724
- md: 6,
2725
- lg: 4
2726
- }, /*#__PURE__*/React__default['default'].createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React__default['default'].createElement(RightNewBlerpsBox, null, /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null), /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null)));
2727
- };
2728
-
2729
- var _templateObject$1, _templateObject2;
2730
- var FeaturedCollectionSkeleton = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n position: relative;\n height: 200px;\n width: 200px;\n animation: pulse 3s ease-in-out infinite;\n @keyframes pulse {\n 0% {\n opacity: 0.7;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 0.7;\n }\n }\n"])));
2731
- var FeaturedCollectionSquare = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n border-radius: 8px;\n\n ", ";\n"])), function (props) {
2732
- return props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n background: ".concat(props.theme.colors.grey6, "; \n transform: skewX(-5deg); \n left: 8px; \n height: 94%; \n bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n transform: skewX(-10deg); \n left: 15px; \n height: 87%; \n bottom: 0") : "background: ".concat(props.theme.colors.ibisRed);
2733
- });
2734
- var CollectionSkeleton$1 = function CollectionSkeleton() {
2735
- return /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2736
- depth: "1"
2737
- }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2738
- depth: "2"
2739
- }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
2740
- depth: "3"
2741
- }));
2742
- };
2743
-
2744
- var _grey;
2745
-
2746
- var icons = {
2747
- white: {
2748
- account: "https://storage.googleapis.com/blerp_products/Icons/Account-White.svg",
2749
- arrowDown: "https://storage.googleapis.com/blerp_products/Icons/Arrowdown-White.svg",
2750
- arrowLeft: "https://storage.googleapis.com/blerp_products/Icons/Arrowleft-White.svg",
2751
- arrowRight: "https://storage.googleapis.com/blerp_products/Icons/Arrowright-White.svg",
2752
- arrowUp: "https://storage.googleapis.com/blerp_products/Icons/Arrowup-White.svg",
2753
- dashboardArrow: "https://storage.googleapis.com/blerp_products/Icons/ChartArrowUp-White.svg",
2754
- backArrow: "https://storage.googleapis.com/blerp_products/Icons/Backarrow-White.svg",
2755
- bitPrice: "https://storage.googleapis.com/blerp_products/Icons/Bitprice-white.svg",
2756
- blerpBlast: "https://storage.googleapis.com/blerp_products/Icons/Blerpblast-white.svg",
2757
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpssmall-White.svg",
2758
- beetBasket: "https://storage.googleapis.com/blerp_products/Icons/BasketoBeets-White.svg",
2759
- block: "https://storage.googleapis.com/blerp_products/Icons/Blockbig-White.svg",
2760
- discordLogo: "https://storage.googleapis.com/blerp_products/Icons/Discord-Logo-White",
2761
- playSolid: "https://storage.googleapis.com/blerp_products/Icons/Boardssmall-White.svg",
2762
- playOutline: "https://storage.googleapis.com/blerp_products/Icons/Play-White.svg",
2763
- copy: "https://storage.googleapis.com/blerp_products/Icons/Copy-White.svg",
2764
- edit: "https://storage.googleapis.com/blerp_products/Icons/Edit-White.svg",
2765
- heart: "https://storage.googleapis.com/blerp_products/Icons/Favoritessmall-White.svg",
2766
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/TwitchGlitchWhite.svg",
2767
- menu2Bars: "https://storage.googleapis.com/blerp_products/Icons/Menu-White.svg",
2768
- pause: "https://storage.googleapis.com/blerp_products/Icons/Pause-White.svg",
2769
- plus: "https://storage.googleapis.com/blerp_products/Icons/Plus-White.svg",
2770
- questionMarkWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Questionmark-White.svg",
2771
- share: "https://storage.googleapis.com/blerp_products/Icons/Share-White.svg",
2772
- volume: "https://storage.googleapis.com/blerp_products/Icons/Volume-White.svg",
2773
- close: "https://storage.googleapis.com/blerp_products/Web/Navbar/close-button-white.svg",
2774
- wrench: "https://storage.googleapis.com/blerp_products/Icons/Wrench-White.svg",
2775
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-White.svg",
2776
- check: "https://storage.googleapis.com/blerp_products/Icons/Checkmark-White.svg",
2777
- settings: "https://storage.googleapis.com/blerp_products/Twitch/Twitch%20Version%202.0/Settings%20icon%20white.svg",
2778
- walkOn: "https://storage.googleapis.com/blerp_products/Icons/WalkOn-White.svg",
2779
- channelPoints: "https://storage.googleapis.com/blerp_products/Icons/ChannelPoints-White.svg",
2780
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/ShortCut-White.svg",
2781
- swap: "https://storage.googleapis.com/blerp_products/Icons/Swap-White.svg",
2782
- swapVertical: "https://storage.googleapis.com/blerp_products/Icons/SwapVertical-White.svg",
2783
- trash: "https://storage.googleapis.com/blerp_products/Icons/Trash-White.svg",
2784
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-White.svg",
2785
- controlKey: "https://storage.googleapis.com/blerp_products/Icons/Control-White.svg",
2786
- commandKey: "https://storage.googleapis.com/blerp_products/Icons/Command-White.svg",
2787
- altKey: "https://storage.googleapis.com/blerp_products/Icons/Alt-White.svg",
2788
- shiftKey: "https://storage.googleapis.com/blerp_products/Icons/Shift-Grey3.svg",
2789
- stop: "https://storage.googleapis.com/blerp_products/Web/Blerps/stop%20square.svg",
2790
- shareTo: "https://storage.googleapis.com/blerp_products/Icons/Share%20to-White.svg",
2791
- computer: "https://storage.googleapis.com/blerp_products/Icons/SharetoComputer-White.svg",
2792
- obs: "https://storage.googleapis.com/blerp_products/Icons/SharetoOBS-White.svg"
2793
- },
2794
- grey: (_grey = {
2795
- threeDot: "https://storage.googleapis.com/blerp_products/Icons/3dot-Grey.svg",
2796
- blerpFullWordWaterMark: "https://storage.googleapis.com/blerp_products/Icons/Blerpfullwordmark-Grey.svg",
2797
- eyeActive: "https://storage.googleapis.com/blerp_products/Icons/Eyeactive-Grey.svg",
2798
- eyeDeactive: "https://storage.googleapis.com/blerp_products/Icons/Eyedeactive-grey.svg",
2799
- plusWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Pluscircle-Grey.svg",
2800
- beetBasket: "https://storage.googleapis.com/blerp_products/Icons/BasketoBeets-Grey7.svg",
2801
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-Grey5.svg",
2802
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/Shortcut-grey3.svg",
2803
- search: "https://storage.googleapis.com/blerp_products/Icons/Search-Grey3.svg",
2804
- home: "https://storage.googleapis.com/blerp_products/Icons/Home-Grey3.svg",
2805
- heart: "https://storage.googleapis.com/blerp_products/Icons/Heart-Grey3.svg",
2806
- create: "https://storage.googleapis.com/blerp_products/Icons/Create-Grey3.svg",
2807
- library: "https://storage.googleapis.com/blerp_products/Icons/Library-Grey3.svg",
2808
- boards: "https://storage.googleapis.com/blerp_products/Icons/Boards-Grey3.svg",
2809
- tabView: "https://storage.googleapis.com/blerp_products/Icons/TabView-Grey4.svg",
2810
- share: "https://storage.googleapis.com/blerp_products/Icons/Recent-Grey3.svg",
2811
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerp-Grey3.svg",
2812
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-Grey5.svg"
2813
- }, _defineProperty__default['default'](_grey, "tabView", "https://storage.googleapis.com/blerp_products/Icons/TabView-Grey4.svg"), _defineProperty__default['default'](_grey, "controlKey", "https://storage.googleapis.com/blerp_products/Icons/Control-Grey3.svg"), _defineProperty__default['default'](_grey, "commandKey", "https://storage.googleapis.com/blerp_products/Icons/Command-Grey3.svg"), _defineProperty__default['default'](_grey, "altKey", "https://storage.googleapis.com/blerp_products/Icons/Alt-Grey3.svg"), _defineProperty__default['default'](_grey, "shiftKey", "https://storage.googleapis.com/blerp_products/Icons/Shift-Grey3.svg"), _defineProperty__default['default'](_grey, "close", "https://storage.googleapis.com/blerp_products/Icons/Xclose-Grey4.svg"), _defineProperty__default['default'](_grey, "shortcutsOff", "https://storage.googleapis.com/blerp_products/Icons/ShortCutsOff-Grey.svg"), _grey),
2814
- black: {
2815
- computer: "https://storage.googleapis.com/blerp_products/Icons/SharetoComputer-NotBlack.svg",
2816
- audioLevels: "https://storage.googleapis.com/blerp_products/Icons/Audiolevels-NotBlack.svg",
2817
- account: "https://storage.googleapis.com/blerp_products/Icons/Account-Black.svg",
2818
- apps: "https://storage.googleapis.com/blerp_products/Icons/Apps-Black.svg",
2819
- arrowLeft: "https://storage.googleapis.com/blerp_products/Icons/Arrowleft-Black.svg",
2820
- arrowRight: "https://storage.googleapis.com/blerp_products/Icons/Arrowright-Black.svg",
2821
- arrowDown: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
2822
- arrowUp: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
2823
- dashboardArrow: "https://storage.googleapis.com/blerp_products/Icons/ChartArrowUp-NotBlack.svg",
2824
- backArrow: "https://storage.googleapis.com/blerp_products/Icons/Backarrow-Black.svg",
2825
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpssmall-Black.svg",
2826
- block: "https://storage.googleapis.com/blerp_products/Icons/Blockbig-Black.svg",
2827
- discordLogo: "https://storage.googleapis.com/blerp_products/Icons/Discord-Logo-Black",
2828
- playSolid: "https://storage.googleapis.com/blerp_products/Icons/Boardssmall-Black.svg",
2829
- playOutline: "https://storage.googleapis.com/blerp_products/Icons/Play-Black.svg",
2830
- edit: "https://storage.googleapis.com/blerp_products/Icons/Edit-Black.svg",
2831
- heart: "https://storage.googleapis.com/blerp_products/Icons/Favoritessmall-Black.svg",
2832
- menu2Bars: "https://storage.googleapis.com/blerp_products/Icons/Menu-Black.svg",
2833
- pause: "https://storage.googleapis.com/blerp_products/Icons/Pause-Black.svg",
2834
- questionMarkWithCircle: "https://storage.googleapis.com/blerp_products/Icons/Questionmark-Black.svg",
2835
- share: "https://storage.googleapis.com/blerp_products/Icons/Share-Black.svg",
2836
- soundEmotes: "https://storage.googleapis.com/blerp_products/Crm/SoundBars-NotBlack.svg",
2837
- threeBars: "https://storage.googleapis.com/blerp_products/Crm/SoundBars-NotBlack.svg",
2838
- plus: "https://storage.googleapis.com/blerp_products/Crm/Plus-NotBlack.svg",
2839
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/TwitchGlitchBlackOps.svg",
2840
- volume: "https://storage.googleapis.com/blerp_products/Icons/Volume-Black.svg",
2841
- close: "https://storage.googleapis.com/blerp_products/Web/Blerp%20Page/x%20close.svg",
2842
- settings: "https://storage.googleapis.com/blerp_products/Twitch/Twitch%20Version%202.0/Settings%20icon%20Black.svg",
2843
- wrench: "https://storage.googleapis.com/blerp_products/Icons/Wrench-NotBlack.svg",
2844
- beet: "https://storage.googleapis.com/blerp_products/Icons/Beet-NotBlack.svg",
2845
- check: "https://storage.googleapis.com/blerp_products/Icons/Checkmark-Black.svg",
2846
- walkOn: "https://storage.googleapis.com/blerp_products/Icons/WalkOn-NotBlack.svg",
2847
- channelPoints: "https://storage.googleapis.com/blerp_products/Icons/ChannelPoints-NotBlack.svg",
2848
- link: "https://storage.googleapis.com/blerp_products/Icons/Linked-NotBlack.svg",
2849
- unLink: "https://storage.googleapis.com/blerp_products/Icons/Ulinked-NotBlack.svg",
2850
- trash: "https://storage.googleapis.com/blerp_products/Icons/Trash-grey7.svg",
2851
- threeDot: "https://storage.googleapis.com/blerp_products/Icons/3dot-NotBlack.svg",
2852
- error: "https://storage.googleapis.com/blerp_products/Icons/Error-NotBlack.svg",
2853
- reload: "https://storage.googleapis.com/blerp_products/Icons/Reload-NotBlack.svg",
2854
- shortCut: "https://storage.googleapis.com/blerp_products/Icons/Shortcut-Notblack.svg",
2855
- search: "https://storage.googleapis.com/blerp_products/Icons/Search-Notblack.svg",
2856
- home: "https://storage.googleapis.com/blerp_products/Icons/Home-NotBlack.svg",
2857
- create: "https://storage.googleapis.com/blerp_products/Icons/Create-NotBlack.svg",
2858
- library: "https://storage.googleapis.com/blerp_products/Icons/Library-NotBlack.svg",
2859
- boards: "https://storage.googleapis.com/blerp_products/Icons/Board-Notblack.svg",
2860
- swap: "https://storage.googleapis.com/blerp_products/Icons/Swap-Notblack.svg",
2861
- maximize: "https://storage.googleapis.com/blerp_products/Icons/Maximize-NotBlack.svg",
2862
- minimize: "https://storage.googleapis.com/blerp_products/Icons/Minimize-NotBlack.svg",
2863
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-NotBlack.svg",
2864
- controlKey: "https://storage.googleapis.com/blerp_products/Icons/Control-NotBlack.svg",
2865
- commandKey: "https://storage.googleapis.com/blerp_products/Icons/Command-NotBlack.svg",
2866
- altKey: "https://storage.googleapis.com/blerp_products/Icons/Alt-NotBlack.svg",
2867
- shiftKey: "https://storage.googleapis.com/blerp_products/Icons/Shift-NotBlack.svg",
2868
- shareTo: "https://storage.googleapis.com/blerp_products/Icons/Share%20to-Notblack.svg"
2869
- },
2870
- ibis: {
2871
- settings: "https://storage.googleapis.com/blerp_products/Icons/Settings-IbisRed.svg",
2872
- bell: "https://storage.googleapis.com/blerp_products/Icons/Bell-IbisRed.svg",
2873
- audioLevels: "https://storage.googleapis.com/blerp_products/Icons/Audiolevels-Ibis.svg",
2874
- blerpLogo: "https://storage.googleapis.com/blerp_products/Icons/Blerpblip-Ibis.svg",
2875
- error: "https://storage.googleapis.com/blerp_products/Icons/Error-Ibis.svg"
2876
- },
2877
- seafoam: {
2878
- update: "https://storage.googleapis.com/blerp_products/Icons/Update-Seafoam.svg"
2879
- },
2880
- yellow: {
2881
- warning: "https://storage.googleapis.com/blerp_products/Icons/Warning-Yellow.svg"
2882
- },
2883
- starling: {
2884
- tabView: "https://storage.googleapis.com/blerp_products/Icons/Tabview-Starling.svg"
2885
- },
2886
- other: {
2887
- subStarTier1: "https://storage.googleapis.com/blerp_products/Icons/Substartier1-purple.svg",
2888
- subStarTier2: "https://storage.googleapis.com/blerp_products/Icons/Substartier2-purple.svg",
2889
- subStarTier3: "https://storage.googleapis.com/blerp_products/Icons/Substartier3-purple.svg",
2890
- twitchGlitch: "https://storage.googleapis.com/blerp_products/Icons/Twitchglitch-Purple.svg",
2891
- discordLogo: "https://storage.googleapis.com/blerp_products/Web/Landing%20Pages/Discord/Discord%20logo.svg",
2892
- rainbow: "https://storage.googleapis.com/blerp_products/Crm/Overview-Rainbow.svg",
2893
- tabView: "https://storage.googleapis.com/blerp_products/Icons/Tabview-Starling.svg"
2894
- }
2895
- };
2896
-
2897
- function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
2898
-
2899
- function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
2900
- var fonts = "@font-face {\n font-family: \"Odudo\";\n font-weight: normal;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: lighter;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 300;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 400;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: bolder;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 600;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: bold;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n format(\"woff\");\n}\n\n@font-face {\n font-family: \"Odudo\";\n font-weight: 700;\n font-display: swap;\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://storage.googleapis.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n format(\"woff\");\n}";
2901
- var theme = styles.createTheme({
2902
- typography: {
2903
- fontFamily: "Odudo, Arial"
2904
- },
2905
- components: {
2906
- MuiPopover: {
2907
- defaultProps: {
2908
- BackdropProps: {
2909
- sx: {
2910
- backgroundColor: "transparent",
2911
- backdropFilter: "none"
2912
- }
2913
- }
2914
- }
2915
- },
2916
- MuiBackdrop: {
2917
- styleOverrides: {
2918
- root: {
2919
- backgroundColor: "".concat(colors.grey6, "70"),
2920
- backdropFilter: "blur(4px)"
2921
- }
2922
- }
2923
- },
2924
- MuiSvgIcon: {
2925
- styleOverrides: {
2926
- root: {
2927
- color: colors.notBlack
2928
- }
2929
- }
2930
- },
2931
- MuiFilledInput: {
2932
- styleOverrides: {
2933
- root: {
2934
- color: colors.notBlack,
2935
- backgroundColor: colors.grey2,
2936
- "& textarea": {
2937
- color: colors.notBlack
2938
- },
2939
- ":hover": {
2940
- backgroundColor: colors.grey2
2941
- },
2942
- ":before": {
2943
- borderColor: colors.notBlack
2944
- },
2945
- ":hover:before": {
2946
- borderColor: "".concat(colors.notBlack, " !important")
2947
- }
2948
- }
2949
- }
2950
- },
2951
- MuiInput: {
2952
- styleOverrides: {
2953
- root: {
2954
- color: colors.notBlack,
2955
- borderColor: colors.notBlack,
2956
- ":before": {
2957
- borderColor: colors.notBlack
2958
- },
2959
- ":hover:before": {
2960
- borderColor: "".concat(colors.notBlack, " !important")
2961
- }
2962
- }
2963
- }
2964
- },
2965
- MuiInputLabel: {
2966
- styleOverrides: {
2967
- root: {
2968
- color: colors.notBlack
2969
- }
2970
- }
2971
- },
2972
- MuiTypography: {
2973
- styleOverrides: {
2974
- root: {
2975
- color: colors.notBlack
2976
- }
2977
- }
2978
- },
2979
- MuiButton: {
2980
- styleOverrides: {
2981
- root: {
2982
- borderRadius: "30px",
2983
- fontWeight: "bold",
2984
- letterSpacing: "0.05rem"
2985
- }
2986
- },
2987
- variants: [{
2988
- props: {
2989
- variant: "outlined"
2990
- },
2991
- style: {
2992
- borderWidth: "2px",
2993
- "&:hover": {
2994
- borderWidth: "2px"
2995
- }
2996
- }
2997
- }]
2998
- },
2999
- MuiCssBaseline: {
3000
- styleOverrides: "\n ".concat(fonts, "\n ")
3001
- }
3002
- },
3003
- mode: "light",
3004
- colors: lightColors,
3005
- icons: icons,
3006
- palette: lightPalette
3007
- });
3008
- var darkTheme = styles.createTheme({
3009
- typography: {
3010
- fontFamily: "Odudo, Arial"
3011
- },
3012
- components: {
3013
- MuiTypography: {
3014
- styleOverrides: {
3015
- root: {
3016
- color: colors.white
3017
- }
3018
- }
3019
- },
3020
- MuiFilledInput: {
3021
- styleOverrides: {
3022
- root: {
3023
- color: colors.white,
3024
- backgroundColor: colors.grey7,
3025
- "& textarea": {
3026
- color: colors.white
3027
- },
3028
- ":hover": {
3029
- backgroundColor: colors.grey7
3030
- },
3031
- ":before": {
3032
- borderColor: colors.waxwing
3033
- },
3034
- ":hover:before": {
3035
- borderColor: "".concat(colors.white, " !important")
3036
- }
3037
- }
3038
- }
3039
- },
3040
- MuiInput: {
3041
- styleOverrides: {
3042
- root: {
3043
- color: colors.white,
3044
- borderColor: colors.white,
3045
- ":before": {
3046
- borderColor: colors.waxwing
3047
- },
3048
- ":hover:before": {
3049
- borderColor: "".concat(colors.white, " !important")
3050
- }
3051
- }
3052
- }
3053
- },
3054
- MuiInputLabel: {
3055
- styleOverrides: {
3056
- root: {
3057
- color: colors.white
3058
- }
3059
- }
3060
- },
3061
- MuiPopover: {
3062
- defaultProps: {
3063
- BackdropProps: {
3064
- sx: {
3065
- backgroundColor: "transparent",
3066
- backdropFilter: "none"
3067
- }
3068
- }
3069
- }
3070
- },
3071
- MuiBackdrop: {
3072
- styleOverrides: {
3073
- root: {
3074
- backgroundColor: "".concat(colors.grey5, "70"),
3075
- backdropFilter: "blur(4px)"
3076
- }
3077
- }
3078
- },
3079
- MuiSvgIcon: {
3080
- styleOverrides: {
3081
- root: {
3082
- color: colors.white
3083
- }
3084
- }
3085
- },
3086
- MuiButton: {
3087
- styleOverrides: {
3088
- root: {
3089
- borderRadius: "30px",
3090
- fontWeight: "bold",
3091
- letterSpacing: "0.05rem"
3092
- }
3093
- },
3094
- variants: [{
3095
- props: {
3096
- variant: "outlined"
3097
- },
3098
- style: {
3099
- borderWidth: "2px",
3100
- "&:hover": {
3101
- borderWidth: "2px"
3102
- }
3103
- }
3104
- }]
3105
- },
3106
- MuiCssBaseline: {
3107
- styleOverrides: "\n ".concat(fonts, "\n ")
3108
- }
3109
- },
3110
- mode: "dark",
3111
- colors: darkColors,
3112
- icons: icons,
3113
- palette: darkPalette
3114
- });
3115
-
3116
- var BlerpTheme = function BlerpTheme(_ref) {
3117
- var mode = _ref.mode,
3118
- children = _ref.children;
3119
- var currentTheme = mode === "dark" ? darkTheme : theme; // ...
3120
-
3121
- return /*#__PURE__*/React__default['default'].createElement(styles.ThemeProvider, {
3122
- theme: currentTheme
3123
- }, /*#__PURE__*/React__default['default'].createElement(styled.ThemeProvider, {
3124
- theme: _objectSpread$1(_objectSpread$1({}, mainTheme), {}, {
3125
- icons: icons,
3126
- mode: mode === "dark" ? "dark" : "light"
3127
- }, currentTheme)
3128
- }, children));
3129
- };
3130
-
3131
- //primary and secondary action buttons
3132
-
3133
- var CollectionCard$1 = function CollectionCard(_ref) {
3134
- var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$image4, _collection$image4$or;
3135
-
3136
- var collection = _ref.collection,
3137
- variantSize = _ref.variantSize,
3138
- handleClickBackground = _ref.handleClickBackground,
3139
- handleClickSave = _ref.handleClickSave,
3140
- handleClickDrag = _ref.handleClickDrag,
3141
- primaryActionButton = _ref.primaryActionButton,
3142
- secondaryActionButton = _ref.secondaryActionButton,
3143
- fluid = _ref.fluid,
3144
- fontSize = _ref.fontSize,
3145
- isLink = _ref.isLink;
3146
-
3147
- var _useState = React.useState(null),
3148
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3149
- cardColors = _useState2[0],
3150
- setCardColors = _useState2[1];
3151
-
3152
- 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),
3153
- data = _usePalette.data;
3154
- _usePalette.loading;
3155
- _usePalette.error;
3156
-
3157
- var smallSize = {
3158
- size: "small",
3159
- width: "70px",
3160
- height: "70px"
3161
- };
3162
- var largeSize = {
3163
- size: "large",
3164
- width: "200px",
3165
- height: "200px"
3166
- };
3167
- var sizeParams = largeSize;
3168
-
3169
- if (variantSize === "small") {
3170
- sizeParams = smallSize;
3171
- }
3172
-
3173
- return /*#__PURE__*/React__default['default'].createElement(Box, {
3174
- sx: {
3175
- display: "flex",
3176
- alignItems: "center",
3177
- width: fluid ? "80%" : sizeParams.width,
3178
- height: fluid ? "80%" : sizeParams.height,
3179
- ":hover #collection-background-1": {
3180
- transform: "rotate(7deg)",
3181
- height: "91%",
3182
- right: "-11px",
3183
- top: "12px"
3184
- },
3185
- ":hover #collection-background-2": {
3186
- transform: "rotate(14deg)",
3187
- height: "84%",
3188
- right: "-20px",
3189
- top: "24px"
3190
- }
3191
- }
3192
- }, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
3193
- src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
3194
- getColors: function getColors(colors) {
3195
- return setCardColors(colors);
3196
- }
3197
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3198
- onClick: function onClick() {
3199
- handleClickBackground();
3200
- },
3201
- sx: {
3202
- borderRadius: "8px",
3203
- position: "relative",
3204
- width: fluid ? "90%" : sizeParams.width,
3205
- height: fluid ? "90%" : sizeParams.height,
3206
- cursor: "pointer",
3207
- ":hover #collection-background-1": {
3208
- transform: "rotate(7deg)",
3209
- height: "91%",
3210
- right: "-11px",
3211
- top: "12px"
3212
- },
3213
- ":hover #collection-background-2": {
3214
- transform: "rotate(14deg)",
3215
- height: "84%",
3216
- right: "-20px",
3217
- top: "24px"
3218
- }
3219
- }
3220
- }, variantSize !== "small" ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Box, {
3221
- sx: {
3222
- backgroundColor: "white.override",
3223
- borderRadius: "8px",
3224
- width: "100%",
3225
- height: "100%",
3226
- position: "absolute",
3227
- top: "0",
3228
- zIndex: "3"
3229
- }
3230
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3231
- id: "collection-background-1",
3232
- sx: {
3233
- backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
3234
- borderRadius: "8px",
3235
- width: "50%",
3236
- height: "94%",
3237
- position: "absolute",
3238
- transform: "rotate(5deg) scale(1)",
3239
- right: "-8px",
3240
- top: "8px",
3241
- zIndex: "2",
3242
- transition: "0.2s ease-out"
3243
- }
3244
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3245
- id: "collection-background-2",
3246
- sx: {
3247
- backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
3248
- borderRadius: "8px",
3249
- width: "50%",
3250
- height: "89%",
3251
- position: "absolute",
3252
- transform: "rotate(10deg) scale(1)",
3253
- right: "-16px",
3254
- top: "16px",
3255
- zIndex: "1",
3256
- transition: "0.2s ease-out"
3257
- }
3258
- }), /*#__PURE__*/React__default['default'].createElement(Box, {
3259
- sx: {
3260
- backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
3261
- backgroundSize: "cover",
3262
- backgroundPosition: "center",
3263
- backgroundRepeat: "no-repeat",
3264
- width: "100%",
3265
- height: "100%",
3266
- borderRadius: "8px",
3267
- display: "flex",
3268
- justifyContent: "center",
3269
- alignItems: "center",
3270
- position: "absolute",
3271
- zIndex: "3"
3272
- }
3273
- }, primaryActionButton ? primaryActionButton : collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkRounded, {
3274
- onClick: function onClick(e) {
3275
- e.stopPropagation();
3276
- handleClickSave(false);
3277
- },
3278
- sx: {
3279
- position: "absolute",
3280
- top: "5px",
3281
- left: "5px",
3282
- color: "white.override"
3283
- }
3284
- }) : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.BookmarkAddOutlined, {
3285
- onClick: function onClick(e) {
3286
- e.stopPropagation();
3287
- handleClickSave(true);
3288
- },
3289
- sx: {
3290
- position: "absolute",
3291
- top: "5px",
3292
- left: "5px",
3293
- color: "white.override"
3294
- }
3295
- }), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(iconsMaterial.DragIndicatorRounded, {
3296
- onClick: function onClick(e) {
3297
- e.stopPropagation();
3298
- handleClickDrag();
3299
- },
3300
- sx: {
3301
- position: "absolute",
3302
- top: "5px",
3303
- right: "5px",
3304
- color: "white.override",
3305
- transform: "rotate(90deg)"
3306
- }
3307
- }), isLink ? /*#__PURE__*/React__default['default'].createElement("a", {
3308
- href: "/sound-collection/".concat(collection._id),
3309
- style: {
3310
- color: "white",
3311
- textDecoration: "none"
3312
- }
3313
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3314
- fontSize: fontSize ? fontSize : "24px",
3315
- color: "white.override",
3316
- textAlign: "center",
3317
- sx: {
3318
- ":hover": {
3319
- textDecoration: "underline"
3320
- }
3321
- }
3322
- }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
3323
- fontSize: fontSize ? fontSize : "24px",
3324
- color: "white.override",
3325
- textAlign: "center"
3326
- }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(Box, {
3327
- sx: {
3328
- backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
3329
- backgroundSize: "cover",
3330
- backgroundPosition: "center",
3331
- backgroundRepeat: "no-repeat",
3332
- width: "100%",
3333
- height: "100%",
3334
- borderRadius: "8px",
3335
- display: "flex",
3336
- justifyContent: "center",
3337
- alignItems: "center",
3338
- position: "relative"
3339
- }
3340
- })));
3341
- };
3342
-
3343
- var UserProfileHeader = function UserProfileHeader(_ref) {
3344
- var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
3345
-
3346
- var followUser = _ref.followUser,
3347
- isOwner = _ref.isOwner,
3348
- userData = _ref.userData,
3349
- openEdit = _ref.openEdit;
3350
- var theme = React.useContext(styled.ThemeContext);
3351
-
3352
- var _useState = React.useState(null),
3353
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3354
- profileColors = _useState2[0],
3355
- setProfileColors = _useState2[1];
3356
-
3357
- var size = useWindowSize();
3358
-
3359
- var renderSocialLinks = function renderSocialLinks() {
3360
- var _userData$socialLinks;
3361
-
3362
- return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map(function (socialItem, index) {
3363
- var icon;
3364
-
3365
- switch (socialItem.name) {
3366
- case "twitch":
3367
- icon = /*#__PURE__*/React__default['default'].createElement(TwitchIcon, {
3368
- sx: {
3369
- color: "notBlack.main",
3370
- cursor: "pointer",
3371
- ":hover": {
3372
- color: "starling.main"
3373
- }
3374
- }
3375
- });
3376
- break;
3377
-
3378
- case "twitter":
3379
- icon = /*#__PURE__*/React__default['default'].createElement(TwitterIcon__default['default'], {
3380
- sx: {
3381
- color: "notBlack.main",
3382
- cursor: "pointer",
3383
- ":hover": {
3384
- color: "starling.main"
3385
- }
3386
- }
3387
- });
3388
- break;
3389
-
3390
- case "youtube":
3391
- icon = /*#__PURE__*/React__default['default'].createElement(YouTubeIcon__default['default'], {
3392
- sx: {
3393
- color: "notBlack.main",
3394
- cursor: "pointer",
3395
- ":hover": {
3396
- color: "starling.main"
3397
- }
3398
- }
3399
- });
3400
- break;
3401
-
3402
- case "instagram":
3403
- icon = /*#__PURE__*/React__default['default'].createElement(InstagramIcon__default['default'], {
3404
- sx: {
3405
- color: "notBlack.main",
3406
- cursor: "pointer",
3407
- ":hover": {
3408
- color: "starling.main"
3409
- }
3410
- }
3411
- });
3412
- break;
3413
-
3414
- case "pinterest":
3415
- icon = /*#__PURE__*/React__default['default'].createElement(PinterestIcon__default['default'], {
3416
- sx: {
3417
- color: "notBlack.main",
3418
- cursor: "pointer",
3419
- ":hover": {
3420
- color: "starling.main"
3421
- }
3422
- }
3423
- });
3424
- break;
3425
-
3426
- case "facebook":
3427
- icon = /*#__PURE__*/React__default['default'].createElement(FacebookIcon__default['default'], {
3428
- sx: {
3429
- color: "notBlack.main",
3430
- cursor: "pointer",
3431
- ":hover": {
3432
- color: "starling.main"
3433
- }
3434
- }
3435
- });
3436
- break;
3437
- }
3438
-
3439
- return /*#__PURE__*/React__default['default'].createElement("a", {
3440
- key: socialItem.name + index,
3441
- target: "_blank",
3442
- href: socialItem.link,
3443
- style: {
3444
- margin: "5px",
3445
- height: "65%"
3446
- },
3447
- rel: "nofollow noreferrer"
3448
- }, icon);
3449
- });
3450
- };
3451
-
3452
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(reactColorExtractor.ColorExtractor, {
3453
- src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag = userData.profileImage) === null || _userData$profileImag === void 0 ? void 0 : (_userData$profileImag2 = _userData$profileImag.original) === null || _userData$profileImag2 === void 0 ? void 0 : _userData$profileImag2.url,
3454
- getColors: function getColors(colors) {
3455
- return setProfileColors(colors);
3456
- }
3457
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3458
- width: "100%",
3459
- sx: {
3460
- height: "250px",
3461
- justifyContent: size.width <= 600 ? "space-around" : "center",
3462
- alignItems: "center",
3463
- background: userData !== null && userData !== void 0 && (_userData$headerImage = userData.headerImage) !== null && _userData$headerImage !== void 0 && (_userData$headerImage2 = _userData$headerImage.original) !== null && _userData$headerImage2 !== void 0 && _userData$headerImage2.url ? "linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(".concat(userData === null || userData === void 0 ? void 0 : (_userData$headerImage3 = userData.headerImage) === null || _userData$headerImage3 === void 0 ? void 0 : (_userData$headerImage4 = _userData$headerImage3.original) === null || _userData$headerImage4 === void 0 ? void 0 : _userData$headerImage4.url, ")") : "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
3464
- backgroundRepeat: "no-repeat",
3465
- backgroundSize: "cover",
3466
- backgroundPosition: "center",
3467
- position: "relative",
3468
- overflow: "hidden"
3469
- }
3470
- }, isOwner && /*#__PURE__*/React__default['default'].createElement(IconButton, {
3471
- sx: {
3472
- position: "absolute",
3473
- top: "10px",
3474
- right: "10px",
3475
- cursor: "pointer",
3476
- color: "white.main",
3477
- ":hover": {
3478
- color: "notBlack.main",
3479
- backgroundColor: "white.main"
3480
- }
3481
- },
3482
- onClick: function onClick() {
3483
- return openEdit();
3484
- }
3485
- }, /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
3486
- fontSize: "16px"
3487
- })), /*#__PURE__*/React__default['default'].createElement(Stack, {
3488
- direction: "row",
3489
- width: "80%",
3490
- maxWidth: "1300px",
3491
- flexWrap: "wrap",
3492
- margin: "0 auto",
3493
- justifyContent: "space-between",
3494
- alignItems: "flex-end",
3495
- height: "50%"
3496
- }, /*#__PURE__*/React__default['default'].createElement(Box, {
3497
- sx: {
3498
- background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
3499
- boxShadow: "5px 5px 15px #0000009c"
3500
- },
3501
- borderRadius: "8px",
3502
- width: "400px",
3503
- height: "100%"
3504
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3505
- direction: "row",
3506
- height: "100%",
3507
- alignItems: "center",
3508
- position: "relative"
3509
- }, /*#__PURE__*/React__default['default'].createElement(IconButton, {
3510
- sx: {
3511
- position: "absolute",
3512
- padding: "5px",
3513
- top: "5px",
3514
- right: "5px",
3515
- cursor: "pointer",
3516
- color: "white.override",
3517
- fontSize: "12px",
3518
- ":hover": {
3519
- color: "notBlack.main",
3520
- backgroundColor: "white.main"
3521
- }
3522
- },
3523
- onClick: function onClick() {
3524
- isOwner ? openEdit() : followUser({
3525
- variables: {
3526
- record: {
3527
- userIdToFollow: userData._id
3528
- }
3529
- }
3530
- });
3531
- }
3532
- }, isOwner ? /*#__PURE__*/React__default['default'].createElement(ModeEditRoundedIcon__default['default'], {
3533
- fontSize: "small"
3534
- }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default['default'].createElement(PersonRemoveRoundedIcon__default['default'], {
3535
- fontSize: "small"
3536
- }) : /*#__PURE__*/React__default['default'].createElement(PersonAddRoundedIcon__default['default'], {
3537
- fontSize: "small"
3538
- })), /*#__PURE__*/React__default['default'].createElement("img", {
3539
- style: {
3540
- borderRadius: "50%",
3541
- objectFit: "cover",
3542
- width: "90px",
3543
- height: "90px",
3544
- margin: "0 20px"
3545
- },
3546
- alt: "profile img",
3547
- src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url
3548
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3549
- marginLeft: "20px"
3550
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3551
- direction: "row"
3552
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3553
- noWrap: true,
3554
- maxWidth: "200px",
3555
- color: "white.override",
3556
- lineHeight: "51px",
3557
- fontSize: size.width <= 600 ? "30px" : "47px"
3558
- }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default['default'].createElement(Stack, {
3559
- direction: "row",
3560
- divider: /*#__PURE__*/React__default['default'].createElement(Divider, {
3561
- orientation: "vertical",
3562
- flexItem: true,
3563
- sx: {
3564
- borderColor: "white.override",
3565
- margin: "5px"
3566
- }
3567
- })
3568
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3569
- color: "white.override",
3570
- fontSize: "16px"
3571
- }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default['default'].createElement(Text, {
3572
- color: "white.override",
3573
- fontSize: "16px"
3574
- }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
3575
- direction: "row",
3576
- backgroundColor: "grey2.main",
3577
- borderRadius: "8px",
3578
- height: "30%",
3579
- alignItems: "center",
3580
- marginTop: "20px",
3581
- justifyContent: "space-around"
3582
- }, isOwner ? (userData === null || userData === void 0 ? void 0 : (_userData$socialLinks2 = userData.socialLinks) === null || _userData$socialLinks2 === void 0 ? void 0 : _userData$socialLinks2.length) === 0 ? /*#__PURE__*/React__default['default'].createElement(Button, {
3583
- variant: "text",
3584
- onClick: function onClick() {
3585
- return openEdit();
3586
- }
3587
- }, "+ New Social") : /*#__PURE__*/React__default['default'].createElement(IconButton, {
3588
- sx: {
3589
- cursor: "pointer",
3590
- color: "notBlack.main",
3591
- padding: "5px",
3592
- backgroundColor: "grey2.main",
3593
- ":hover": {
3594
- backgroundColor: "white.main"
3595
- }
3596
- },
3597
- onClick: function onClick() {
3598
- return openEdit();
3599
- }
3600
- }, /*#__PURE__*/React__default['default'].createElement(AddRoundedIcon__default['default'], {
3601
- fontSize: "16px"
3602
- })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), renderSocialLinks()))));
3603
- };
3604
-
3605
- var LibraryControls = function LibraryControls(_ref) {
3606
- var _activeBoard$ownerObj;
3607
-
3608
- var setSort = _ref.setSort,
3609
- activeBoard = _ref.activeBoard,
3610
- setSearchTerm = _ref.setSearchTerm,
3611
- hideSearch = _ref.hideSearch;
3612
- _ref.searchTerm;
3613
- var setShowSearch = _ref.setShowSearch;
3614
- _ref.setActiveBoard;
3615
- var hideLayoutButtons = _ref.hideLayoutButtons;
3616
- React.useContext(styled.ThemeContext);
3617
- var size = useWindowSize();
3618
-
3619
- var _useState = React.useState(null),
3620
- _useState2 = _slicedToArray__default['default'](_useState, 2),
3621
- anchor = _useState2[0],
3622
- setAnchor = _useState2[1];
3623
-
3624
- var _useState3 = React.useState(null),
3625
- _useState4 = _slicedToArray__default['default'](_useState3, 2),
3626
- filterAnchor = _useState4[0],
3627
- setFilterAnchor = _useState4[1];
3628
-
3629
- var divRef = React.useRef();
3630
- var filterRef = React.useRef();
3631
-
3632
- var _useState5 = React.useState(""),
3633
- _useState6 = _slicedToArray__default['default'](_useState5, 2),
3634
- inputValue = _useState6[0],
3635
- setInputValue = _useState6[1];
3636
-
3637
- var open = Boolean(anchor);
3638
- var openFilter = Boolean(filterAnchor);
3639
- var timeout = null;
3640
- return /*#__PURE__*/React__default['default'].createElement(Stack, {
3641
- direction: "row",
3642
- alignItems: "center",
3643
- justifyContent: "space-around",
3644
- marginTop: size.width <= 675 && "20px"
3645
- }, activeBoard && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PersonRoundedIcon__default['default'], {
3646
- sx: {
3647
- color: "notBlack.main"
3648
- }
3649
- }), /*#__PURE__*/React__default['default'].createElement(Text, null, activeBoard === null || activeBoard === void 0 ? void 0 : (_activeBoard$ownerObj = activeBoard.ownerObject) === null || _activeBoard$ownerObj === void 0 ? void 0 : _activeBoard$ownerObj.username)), !hideSearch && /*#__PURE__*/React__default['default'].createElement(Box, {
3650
- sx: {
3651
- display: "flex",
3652
- alignItems: "flex-end"
3653
- }
3654
- }, /*#__PURE__*/React__default['default'].createElement(Input, {
3655
- id: "user-library-search-input",
3656
- placeholder: "Search User Library",
3657
- variant: "standard",
3658
- color: "grey6",
3659
- value: inputValue,
3660
- onChange: function onChange(e) {
3661
- setInputValue(e.target.value);
3662
- clearTimeout(timeout); // Make a new timeout set to go off in 1000ms (1 second)
3663
-
3664
- timeout = setTimeout(function () {
3665
- setSearchTerm(e.target.value);
3666
- }, 1000);
3667
- },
3668
- onKeyDown: function onKeyDown(e) {
3669
- // e.preventDefault();
3670
- if (e.key === "Enter") {
3671
- setShowSearch(true);
3672
- }
3673
- },
3674
- sx: {
3675
- maxWidth: "200px",
3676
- "& .MuiInput-root:hover::before": {
3677
- borderColor: "grey6.main"
3678
- },
3679
- "& .MuiInput-root::before": {
3680
- borderColor: "grey5.main"
3681
- }
3682
- },
3683
- InputProps: {
3684
- sx: {
3685
- color: "grey6.main",
3686
- borderColor: "grey6.main"
3687
- },
3688
- startAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
3689
- position: "start"
3690
- }, /*#__PURE__*/React__default['default'].createElement(SearchRoundedIcon__default['default'], {
3691
- sx: {
3692
- color: "grey6.main"
3693
- }
3694
- })),
3695
- endAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
3696
- position: "end"
3697
- }, inputValue && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
3698
- sx: {
3699
- cursor: "pointer",
3700
- color: "grey6.main"
3701
- },
3702
- onClick: function onClick() {
3703
- setSearchTerm("");
3704
- setInputValue("");
3705
- setShowSearch(false);
3706
- }
3707
- }), /*#__PURE__*/React__default['default'].createElement(Button, {
3708
- variant: "text",
3709
- color: "notBlack",
3710
- onClick: function onClick() {
3711
- return setShowSearch(true);
3712
- }
3713
- }, "Search")))
3714
- }
3715
- })), /*#__PURE__*/React__default['default'].createElement(Popover, {
3716
- id: "library-controls-popover",
3717
- open: openFilter,
3718
- onClose: function onClose() {
3719
- setFilterAnchor(null);
3720
- },
3721
- anchorEl: filterAnchor,
3722
- PaperProps: {
3723
- sx: {
3724
- width: "160px",
3725
- display: "flex",
3726
- flexDirection: "column",
3727
- alignItems: "center",
3728
- justifyContent: "space-around",
3729
- boxShadow: "0px 3px 6px #00000029",
3730
- padding: "15px 0",
3731
- backgroundColor: "white.main",
3732
- color: "notBlack.main"
3733
- }
3734
- },
3735
- anchorOrigin: {
3736
- vertical: "bottom",
3737
- horizontal: "right"
3738
- },
3739
- transformOrigin: {
3740
- vertical: "top",
3741
- horizontal: "center"
3742
- }
3743
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3744
- direction: "row",
3745
- onClick: function onClick() {
3746
- return setSort("TITLE_ASC");
3747
- },
3748
- sx: {
3749
- width: "100%",
3750
- cursor: "pointer",
3751
- ":hover": {
3752
- backgroundColor: "ibisRed.main",
3753
- color: "white.override"
3754
- }
3755
- }
3756
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3757
- margin: "0 15px",
3758
- fontSize: "18px"
3759
- }, "Alphabetical")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3760
- direction: "row",
3761
- onClick: function onClick() {
3762
- return setSort("CREATEDAT_DESC");
3763
- },
3764
- sx: {
3765
- width: "100%",
3766
- cursor: "pointer",
3767
- ":hover": {
3768
- backgroundColor: "ibisRed.main",
3769
- color: "white.override"
3770
- }
3771
- }
3772
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3773
- margin: "0 15px",
3774
- fontSize: "18px"
3775
- }, "Newest")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3776
- direction: "row",
3777
- onClick: function onClick() {
3778
- return setSort("CREATEDAT_ASC");
3779
- },
3780
- sx: {
3781
- width: "100%",
3782
- cursor: "pointer",
3783
- ":hover": {
3784
- backgroundColor: "ibisRed.main",
3785
- color: "white.override"
3786
- }
3787
- }
3788
- }, /*#__PURE__*/React__default['default'].createElement(Text, {
3789
- margin: "0 15px",
3790
- fontSize: "18px"
3791
- }, "Oldest"))), !hideLayoutButtons && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, size.width >= 1000 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, !activeBoard && /*#__PURE__*/React__default['default'].createElement(Button, {
3792
- color: "notBlack",
3793
- ref: filterRef,
3794
- onClick: function onClick() {
3795
- return setFilterAnchor(filterRef.current);
3796
- }
3797
- }, /*#__PURE__*/React__default['default'].createElement(Text, null, "Sort"), /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], null)), /*#__PURE__*/React__default['default'].createElement(IconButton, null, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
3798
- sx: {
3799
- color: "notBlack.main"
3800
- }
3801
- })), /*#__PURE__*/React__default['default'].createElement(IconButton, null, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
3802
- sx: {
3803
- color: "notBlack.main"
3804
- }
3805
- }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(IconButton, {
3806
- ref: divRef,
3807
- onClick: function onClick() {
3808
- return setAnchor(divRef.current);
3809
- }
3810
- }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
3811
- sx: {
3812
- color: "notBlack.main"
3813
- }
3814
- })), /*#__PURE__*/React__default['default'].createElement(Popover, {
3815
- id: "library-controls-popover",
3816
- open: open,
3817
- onClose: function onClose() {
3818
- setAnchor(null);
3819
- setFilterAnchor(null);
3820
- },
3821
- anchorEl: anchor,
3822
- PaperProps: {
3823
- sx: {
3824
- width: "190px",
3825
- display: "flex",
3826
- flexDirection: "column",
3827
- alignItems: "center",
3828
- justifyContent: "space-around",
3829
- boxShadow: "0px 3px 6px #00000029",
3830
- padding: "15px 0",
3831
- backgroundColor: "white.main"
3832
- }
3833
- },
3834
- anchorOrigin: {
3835
- vertical: "bottom",
3836
- horizontal: "right"
3837
- },
3838
- transformOrigin: {
3839
- vertical: "top",
3840
- horizontal: "center"
3841
- }
3842
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3843
- direction: "row",
3844
- alignItems: "center",
3845
- sx: {
3846
- width: "80%",
3847
- cursor: "pointer",
3848
- margin: "0 auto",
3849
- ":hover": {
3850
- backgroundColor: "grey2.main"
3851
- }
3852
- }
3853
- }, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
3854
- sx: {
3855
- color: "notBlack.main"
3856
- }
3857
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3858
- color: "notBlack.main",
3859
- margin: "0 15px",
3860
- fontSize: "18px"
3861
- }, "List View")), /*#__PURE__*/React__default['default'].createElement(Stack, {
3862
- direction: "row",
3863
- alignItems: "center",
3864
- sx: {
3865
- width: "80%",
3866
- cursor: "pointer",
3867
- margin: "0 auto",
3868
- ":hover": {
3869
- backgroundColor: "grey2.main"
3870
- }
3871
- }
3872
- }, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
3873
- sx: {
3874
- color: "notBlack.main"
3875
- }
3876
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3877
- color: "notBlack.main",
3878
- margin: "0 15px",
3879
- fontSize: "18px"
3880
- }, "Grid View")), /*#__PURE__*/React__default['default'].createElement(Divider, {
3881
- variant: "middle"
3882
- }), /*#__PURE__*/React__default['default'].createElement(Stack, {
3883
- ref: filterRef,
3884
- onClick: function onClick() {
3885
- return setFilterAnchor(filterRef.current);
3886
- },
3887
- direction: "row",
3888
- alignItems: "center",
3889
- justifyContent: "space-between",
3890
- sx: {
3891
- width: "80%",
3892
- cursor: "pointer",
3893
- margin: "0 auto",
3894
- ":hover": {
3895
- backgroundColor: "grey2.main"
3896
- }
3897
- }
3898
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3899
- direction: "row"
3900
- }, /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], {
3901
- sx: {
3902
- color: "notBlack.main"
3903
- }
3904
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
3905
- fontSize: "18px",
3906
- color: "notBlack.main",
3907
- margin: "0 15px"
3908
- }, "Sort")), /*#__PURE__*/React__default['default'].createElement(ChevronRightRoundedIcon__default['default'], {
3909
- sx: {
3910
- color: "notBlack.main"
3911
- }
3912
- }))))));
3913
- };
3914
-
3915
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
3916
-
3917
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
3918
-
3919
- var UserLibraryHeader = function UserLibraryHeader(_ref) {
3920
- var sx = _ref.sx,
3921
- tabs = _ref.tabs,
3922
- tabSelection = _ref.tabSelection,
3923
- setTabSelection = _ref.setTabSelection,
3924
- setShowSearch = _ref.setShowSearch,
3925
- setSearchTerm = _ref.setSearchTerm,
3926
- searchTerm = _ref.searchTerm,
3927
- setActiveBoard = _ref.setActiveBoard,
3928
- hideSearch = _ref.hideSearch,
3929
- _setSort = _ref.setSort,
3930
- sort = _ref.sort,
3931
- hideLayoutButtons = _ref.hideLayoutButtons;
3932
- var size = useWindowSize();
3933
- var theme = React.useContext(styled.ThemeContext);
3934
- return /*#__PURE__*/React__default['default'].createElement(Box, {
3935
- sx: _objectSpread({
3936
- backgroundColor: "grey2.main",
3937
- position: "sticky",
3938
- top: size.width >= 1000 ? "80px" : "110px",
3939
- zIndex: "5"
3940
- }, sx)
3941
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3942
- direction: "row",
3943
- style: {
3944
- padding: "20px 10px",
3945
- maxWidth: "1300px",
3946
- margin: "0 auto",
3947
- width: "95%"
3948
- }
3949
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3950
- direction: "row",
3951
- width: "100%",
3952
- justifyContent: size.width <= 675 ? "center" : "space-between",
3953
- alignItems: "center",
3954
- flexWrap: "wrap"
3955
- }, /*#__PURE__*/React__default['default'].createElement(Stack, {
3956
- direction: "row"
3957
- }, tabs === null || tabs === void 0 ? void 0 : tabs.map(function (tab) {
3958
- return /*#__PURE__*/React__default['default'].createElement(Button, {
3959
- key: "tab-".concat(tab),
3960
- onClick: function onClick() {
3961
- setShowSearch(null);
3962
- setActiveBoard(null);
3963
- setTabSelection(tab);
3964
- },
3965
- variant: "outlined",
3966
- size: "small",
3967
- sx: {
3968
- marginRight: "10px",
3969
- backgroundColor: tabSelection === tab && "grey3.main",
3970
- ":focus": {
3971
- border: "2px solid ".concat(theme.colors.grey4, " !important")
3972
- }
3973
- },
3974
- color: "grey6"
3975
- }, tab);
3976
- })), /*#__PURE__*/React__default['default'].createElement(LibraryControls, {
3977
- currentSort: sort,
3978
- setActiveBoard: setActiveBoard,
3979
- setSort: function setSort(value) {
3980
- _setSort(value); // refetch({ variables: options });
3981
-
3982
- },
3983
- searchTerm: searchTerm,
3984
- hideSearch: hideSearch,
3985
- setSearchTerm: setSearchTerm,
3986
- setShowSearch: setShowSearch,
3987
- hideLayoutButtons: hideLayoutButtons
3988
- }))));
3989
- };
3990
-
3991
- var _templateObject;
3992
- var ReactionButton = styled__default['default'].div(_templateObject || (_templateObject = _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) {
3993
- return props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5;
3994
- }, function (props) {
3995
- return props.theme.colors.ibisRed;
3996
- });
3997
- var reactionIconUrls = {
3998
- FUNNY: "https://storage.googleapis.com/blerp_products/Icons/Funny%403x.svg",
3999
- HAPPY: "https://storage.googleapis.com/blerp_products/Icons/Happy%403x.svg",
4000
- SCARY: "https://storage.googleapis.com/blerp_products/Icons/Scary%403x.svg",
4001
- SHOCKED: "https://storage.googleapis.com/blerp_products/Icons/Shock.svg",
4002
- TROLL: "https://storage.googleapis.com/blerp_products/Icons/Troll%403x.svg",
4003
- ANGRY: "https://storage.googleapis.com/blerp_products/Icons/Anger%403x.svg",
4004
- NSFW: "https://storage.googleapis.com/blerp_products/Icons/NSFW%403x.svg",
4005
- MUSIC: "https://storage.googleapis.com/blerp_products/Icons/Music%403x.svg"
4006
- };
4007
-
4008
- var ReactionButtons = function ReactionButtons(_ref) {
4009
- var bite = _ref.bite,
4010
- handleClick = _ref.handleClick;
4011
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
4012
- display: "grid",
4013
- gridTemplateColumns: "repeat(4, 1fr)",
4014
- alignItems: "center",
4015
- marginTop: "16px",
4016
- gap: 1
4017
- }, Object.keys(reactionIconUrls).map(function (reaction) {
4018
- var _bite$userReactions, _bite$userReactions$r;
4019
-
4020
- return /*#__PURE__*/React__default['default'].createElement(Grid, {
4021
- key: "".concat(reaction, "-button"),
4022
- gridColumn: "span 1",
4023
- display: "flex",
4024
- justifyContent: "center"
4025
- }, /*#__PURE__*/React__default['default'].createElement(Tooltip, {
4026
- title: reaction
4027
- }, /*#__PURE__*/React__default['default'].createElement(ReactionButton, {
4028
- active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction),
4029
- onClick: function onClick() {
4030
- var _bite$userReactions2, _bite$userReactions2$;
4031
-
4032
- var isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : (_bite$userReactions2$ = _bite$userReactions2.reactions) === null || _bite$userReactions2$ === void 0 ? void 0 : _bite$userReactions2$.includes(reaction);
4033
- handleClick(reaction, isRemove);
4034
- }
4035
- }, /*#__PURE__*/React__default['default'].createElement("img", {
4036
- alt: "reaction-".concat(reaction),
4037
- width: "100%",
4038
- height: "100%",
4039
- src: reactionIconUrls[reaction]
4040
- }))));
4041
- }));
4042
- };
4043
-
4044
- var Theme = BlerpTheme;
4045
- var Box = material.Box;
4046
- var Container = material.Container;
4047
- var Grid = material.Grid;
4048
- var Stack = material.Stack;
4049
- var ImageList = material.ImageList;
4050
- var Autocomplete = material.Autocomplete;
4051
- var Button = material.Button;
4052
- var ButtonGroup = material.ButtonGroup;
4053
- var Checkbox = material.Checkbox;
4054
- var FloatingActionButton = material.Fab;
4055
- var RadioButton = material.Radio;
4056
- var Rating = material.Rating;
4057
- var Select = material.Select;
4058
- var Slider = material.Slider;
4059
- var Switch = material.Switch;
4060
- var Input = material.TextField;
4061
- var BottomNavigation = material.BottomNavigation;
4062
- var Breadcrumbs = material.Breadcrumbs;
4063
- var Drawer = material.Drawer;
4064
- var Link = material.Link;
4065
- var Menu = material.Menu;
4066
- var Pagination = material.Pagination;
4067
- var SpeedDial = material.SpeedDial;
4068
- var Stepper = material.Stepper;
4069
- var Tabs = material.Tabs;
4070
- var Accordion = material.Accordion;
4071
- var AppBar = material.AppBar;
4072
- var Card = material.Card;
4073
- var Paper = material.Paper;
4074
- var Alert = material.Alert;
4075
- var Backdrop = material.Backdrop;
4076
- var Dialog = material.Dialog;
4077
- var LinearProgress = material.LinearProgress;
4078
- var Skeleton = material.Skeleton;
4079
- var Snackbar = material.Snackbar;
4080
- var Avatar = material.Avatar;
4081
- var Badge = material.Badge;
4082
- var Chip = material.Chip;
4083
- var Divider = material.Divider;
4084
- var List = material.List;
4085
- var Table = material.Table;
4086
- var Tooltip = material.Tooltip;
4087
- var Toolbar = material.Toolbar;
4088
- var Text = material.Typography;
4089
- var Modal = material.Modal;
4090
- var Popover = material.Popover;
4091
- var Blerp = Blerp$1;
4092
- var IconButton = material.IconButton;
4093
- var Toggle = Toggle$1;
4094
- var Dropdown = Dropdown$1;
4095
- var MenuItem = material.MenuItem;
4096
- var NewCollectionModal = NewCollectionModal$1;
4097
- var CollectionCard = CollectionCard$1;
4098
- var BlerpListView = BlerpListView$1;
4099
- var BlerpSkeleton = BlerpSkeleton$1;
4100
- var BlerpListViewSkeleton = BlerpListViewSkeleton$1;
4101
- var CollectionSkeleton = CollectionSkeleton$1;
4102
- var InputAdornment = material.InputAdornment; // export const BlerpContextMenu = MBlerpContextMenu;
4103
- // export const ListItem = MListItem;
4104
- // // export const ListItemText = MListItemText;
4105
- // export const ListItemButtonText = MListItemButtonText;
4106
-
4107
- var lightThemeV1 = {
4108
- pandaPink: "#FE295C",
4109
- pandaTeal: "#FE295C",
4110
- pandaNewTeal: "#49bea0",
4111
- darkTeal: "#058063",
4112
- whiteText: "#FFFFFF",
4113
- invertFlyoutBackground: "#170D11",
4114
- flyoutBackground: "#FFFFFF",
4115
- lighterBackground: "#F8F8F8",
4116
- defaultBackground: "#F3F3F3",
4117
- lighterGray: "#BDBDBB",
4118
- iconsActive: "#21000C",
4119
- iconsInActive: "#47463F",
4120
- headerText: "#21000C",
4121
- disabledText: "#BEBEBC",
4122
- lightGray: "#BEBEBC",
4123
- blastZone: "#E1E1E1",
4124
- orangeStatus: "#ff785b",
4125
- darkRedStatus: "#dd1243",
4126
- borderColor: "#bebeb9",
4127
- inputBorderColor: "#bebeb9",
4128
- togglerBackground: "#A04949",
4129
- secondaryText: "#47463F",
4130
- secondarySubtitleText: "#707070",
4131
- biteGray: "#707070",
4132
- secondaryGray: "#706F6B",
4133
- placeholderText: "#BFBFBA",
4134
- activeText: "#21000C",
4135
- primaryText: "#FFFFFF",
4136
- bodyText: "#21000C",
4137
- darkText: "#21000C",
4138
- darkBackground: "#666",
4139
- statusColor: "#DD1243",
4140
- actionBackground: "#E6E6E6",
4141
- focusState: "#27AAFF",
4142
- focusOutline: "#3580B1",
4143
- darkBlue: "#3580B1",
4144
- headerColor: "#170D11",
4145
- headerBackground: "#47463F",
4146
- slidePurple: "#262261",
4147
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4148
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4149
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costLightMode.svg",
4150
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4151
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Right.svg",
4152
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
4153
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
4154
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Left.svg",
4155
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subLightMode.svg",
4156
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconWhite.svg",
4157
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconWhite.svg",
4158
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconWhite.svg",
4159
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconWhite.svg",
4160
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconWhite.svg",
4161
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke.svg",
4162
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20white%20stroke.svg",
4163
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-2.svg",
4164
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
4165
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
4166
- };
4167
- var darkThemeV1 = {
4168
- pandaPink: "#FE295C",
4169
- pandaTeal: "#FE295C",
4170
- pandaNewTeal: "#49bea0",
4171
- darkTeal: "#058063",
4172
- whiteText: "#FFFFFF",
4173
- invertFlyoutBackground: "#FFFFFF",
4174
- flyoutBackground: "#170D11",
4175
- lighterBackground: "#21000C",
4176
- defaultBackground: "#47463F",
4177
- lighterGray: "#BDBDBB",
4178
- iconsActive: "#21000C",
4179
- iconsInActive: "#706F6B",
4180
- headerText: "#21000C",
4181
- disabledText: "#BEBEBC",
4182
- lightGray: "#BEBEBC",
4183
- blastZone: "#E1E1E1",
4184
- orangeStatus: "#ff785b",
4185
- darkRedStatus: "#dd1243",
4186
- borderColor: "#bebeb9",
4187
- inputBorderColor: "#bebeb9",
4188
- togglerBackground: "#A04949",
4189
- secondaryText: "#BDBDBB",
4190
- secondarySubtitleText: "#707070",
4191
- biteGray: "#707070",
4192
- secondaryGray: "#706F6B",
4193
- placeholderText: "#BFBFBA",
4194
- activeText: "#21000C",
4195
- primaryText: "#FFFFFF",
4196
- bodyText: "#FFFFFF",
4197
- darkText: "#FFFFFF",
4198
- darkBackground: "#666",
4199
- statusColor: "#DD1243",
4200
- actionBackground: "#706F6B",
4201
- focusState: "#27AAFF",
4202
- focusOutline: "#27AAFF",
4203
- darkBlue: "#27AAFF",
4204
- headerColor: "#FFF",
4205
- headerBackground: "#47463F",
4206
- slidePurple: "#262261",
4207
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4208
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4209
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costDarkMode.svg",
4210
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4211
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Right.svg",
4212
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Down.svg",
4213
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Up.svg",
4214
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_White_Left.svg",
4215
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subDarkMode.svg",
4216
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconGrey.svg",
4217
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconGrey.svg",
4218
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconGrey.svg",
4219
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconGrey.svg",
4220
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconGrey.svg",
4221
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke-2.svg",
4222
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20grey%20stroke.svg",
4223
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-1.svg",
4224
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20grey%20stroke.svg",
4225
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20grey%20stroke.svg"
4226
- };
4227
- var mainTheme = {
4228
- pandaPink: "#FE295C",
4229
- pandaTeal: "#FE295C",
4230
- pandaNewTeal: "#49bea0",
4231
- darkTeal: "#058063",
4232
- whiteText: "#FFFFFF",
4233
- invertFlyoutBackground: "#170D11",
4234
- flyoutBackground: "#FFFFFF",
4235
- lighterBackground: "#F8F8F8",
4236
- defaultBackground: "#F3F3F3",
4237
- lighterGray: "#BDBDBB",
4238
- iconsActive: "#21000C",
4239
- iconsInActive: "#47463F",
4240
- headerText: "#21000C",
4241
- disabledText: "#BEBEBC",
4242
- lightGray: "#BEBEBC",
4243
- blastZone: "#E1E1E1",
4244
- orangeStatus: "#ff785b",
4245
- darkRedStatus: "#dd1243",
4246
- borderColor: "#bebeb9",
4247
- inputBorderColor: "#bebeb9",
4248
- togglerBackground: "#A04949",
4249
- secondaryText: "#47463F",
4250
- secondarySubtitleText: "#707070",
4251
- biteGray: "#707070",
4252
- secondaryGray: "#706F6B",
4253
- placeholderText: "#BFBFBA",
4254
- activeText: "#21000C",
4255
- primaryText: "#FFFFFF",
4256
- bodyText: "#21000C",
4257
- darkBackground: "#666",
4258
- statusColor: "#DD1243",
4259
- actionBackground: "#E6E6E6",
4260
- focusState: "#27AAFF",
4261
- focusOutline: "#3580B1",
4262
- darkBlue: "#3580B1",
4263
- headerColor: "#170D11",
4264
- headerBackground: "#47463F",
4265
- slidePurple: "#262261",
4266
- lightCloseButton: "https://storage.googleapis.com/blerp-public-images/twitch/white_close_button.svg",
4267
- closeIcon: "https://storage.googleapis.com/blerp-public-images/twitch/dark-close-icon.svg",
4268
- bitCostIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costLightMode.svg",
4269
- whiteCheckMarkIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/checkmark.svg",
4270
- dgRightArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Right.svg",
4271
- dgDownArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
4272
- dgUpArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
4273
- dgLeftArrow: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Left.svg",
4274
- subStarIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subLightMode.svg",
4275
- subOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconWhite.svg",
4276
- subTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconWhite.svg",
4277
- subThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconWhite.svg",
4278
- subFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconWhite.svg",
4279
- subFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconWhite.svg",
4280
- bitsOneIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke.svg",
4281
- bitsTwoIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20white%20stroke.svg",
4282
- bitsThreeIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-2.svg",
4283
- bitsFourIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
4284
- bitsFiveIcon: "https://storage.googleapis.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
4285
- };
4286
- var Themes = {
4287
- mainTheme: mainTheme,
4288
- lightThemeV1: lightThemeV1,
4289
- darkThemeV1: darkThemeV1
4290
- }; // return {
4291
- // Box= Box,
4292
- // Container= Container,
4293
- // Grid= Grid,
4294
- // Stack= Stack,
4295
- // ImageList= ImageList,
4296
- // Autocomplete= Autocomplete,
4297
- // Button= Button,
4298
- // ButtonGroup= ButtonGroup,
4299
- // Checkbox= Checkbox,
4300
- // FloatingActionButton= Fab,
4301
- // RadioButton= Radio,
4302
- // Rating= Rating,
4303
- // Select= Select,
4304
- // Slider= Slider,
4305
- // Switch= Switch,
4306
- // Input= TextField,
4307
- // Toggle= ToggleButton,
4308
- // BottomNavigation= BottomNavigation,
4309
- // Breadcrumbs= Breadcrumbs,
4310
- // Drawer= Drawer,
4311
- // Link= Link,
4312
- // Menu= Menu,
4313
- // Pagination= Pagination,
4314
- // SpeedDial= SpeedDial,
4315
- // Stepper= Stepper,
4316
- // Tabs= Tabs,
4317
- // Accordion= Accordion,
4318
- // AppBar= AppBar,
4319
- // Card= Card,
4320
- // Paper= Paper,
4321
- // Alert= Alert,
4322
- // Backdrop= Backdrop,
4323
- // Dialog= Dialog,
4324
- // LinearProgress= LinearProgress,
4325
- // Skeleton= Skeleton,
4326
- // Snackbar= Snackbar,
4327
- // Avatar= Avatar,
4328
- // Badge= Badge,
4329
- // Chip= Chip,
4330
- // Divider= Divider,
4331
- // List= List,
4332
- // Table= Table,
4333
- // Tooltip= Tooltip,
4334
- // Text= Typography,
4335
- // // you can add here other components that you want to export
4336
- // };
4337
- // };
4338
- // export default returnLibrary();
4339
-
4340
- exports.Accordion = Accordion;
4341
- exports.Alert = Alert;
4342
- exports.AppBar = AppBar;
4343
- exports.Autocomplete = Autocomplete;
4344
- exports.Avatar = Avatar;
4345
- exports.Backdrop = Backdrop;
4346
- exports.Badge = Badge;
4347
- exports.Blerp = Blerp;
4348
- exports.BlerpCardIcon = BlerpCardIcon;
4349
- exports.BlerpCoinsIcon = BlerpCoinsIcon;
4350
- exports.BlerpListView = BlerpListView;
4351
- exports.BlerpListViewSkeleton = BlerpListViewSkeleton;
4352
- exports.BlerpSkeleton = BlerpSkeleton;
4353
- exports.BlerpyIcon = BlerpyIcon;
4354
- exports.BookmarkAddRounded = BookmarkAddRounded;
4355
- exports.BottomNavigation = BottomNavigation;
4356
- exports.Box = Box;
4357
- exports.Breadcrumbs = Breadcrumbs;
4358
- exports.Button = Button;
4359
- exports.ButtonGroup = ButtonGroup;
4360
- exports.Card = Card;
4361
- exports.ChannelPointsIcon = ChannelPointsIcon;
4362
- exports.Checkbox = Checkbox;
4363
- exports.Chip = Chip;
4364
- exports.ClockIcon = ClockIcon;
4365
- exports.CogIcon = CogIcon;
4366
- exports.CollectionCard = CollectionCard;
4367
- exports.CollectionSkeleton = CollectionSkeleton;
4368
- exports.Container = Container;
4369
- exports.CrownIcon = CrownIcon;
4370
- exports.Dialog = Dialog;
4371
- exports.DiamondIcon = DiamondIcon;
4372
- exports.DiscordIcon = DiscordIcon;
4373
- exports.Divider = Divider;
4374
- exports.Drawer = Drawer;
4375
- exports.Dropdown = Dropdown;
4376
- exports.FloatingActionButton = FloatingActionButton;
4377
- exports.GiftIcon = GiftIcon;
4378
- exports.Grid = Grid;
4379
- exports.IconButton = IconButton;
4380
- exports.ImageList = ImageList;
4381
- exports.Input = Input;
4382
- exports.InputAdornment = InputAdornment;
4383
- exports.LightbulbIcon = LightbulbIcon;
4384
- exports.LinearProgress = LinearProgress;
4385
- exports.Link = Link;
4386
- exports.List = List;
4387
- exports.Menu = Menu;
4388
- exports.MenuItem = MenuItem;
4389
- exports.Modal = Modal;
4390
- exports.NewCollectionModal = NewCollectionModal;
4391
- exports.Pagination = Pagination;
4392
- exports.Paper = Paper;
4393
- exports.PlayOutlineIcon = PlayOutlineIcon;
4394
- exports.PlaySolidIcon = PlaySolidIcon;
4395
- exports.PointerFingerIcon = PointerFingerIcon;
4396
- exports.Popover = Popover;
4397
- exports.RadarDishIcon = RadarDishIcon;
4398
- exports.RadioButton = RadioButton;
4399
- exports.Rating = Rating;
4400
- exports.ReactionButtons = ReactionButtons;
4401
- exports.Select = Select;
4402
- exports.ShortcutIcon = ShortcutIcon;
4403
- exports.Skeleton = Skeleton;
4404
- exports.Slider = Slider;
4405
- exports.Snackbar = Snackbar;
4406
- exports.SpeedDial = SpeedDial;
4407
- exports.Stack = Stack;
4408
- exports.Stepper = Stepper;
4409
- exports.Switch = Switch;
4410
- exports.Table = Table;
4411
- exports.Tabs = Tabs;
4412
- exports.Text = Text;
4413
- exports.Theme = Theme;
4414
- exports.Themes = Themes;
4415
- exports.Toggle = Toggle;
4416
- exports.Toolbar = Toolbar;
4417
- exports.Tooltip = Tooltip;
4418
- exports.TwitchBitIcon = TwitchBitIcon;
4419
- exports.TwitchIcon = TwitchIcon;
4420
- exports.UnsafeIcon = UnsafeIcon;
4421
- exports.UserLibraryHeader = UserLibraryHeader;
4422
- exports.UserProfileHeader = UserProfileHeader;
4423
- exports.WalkonIcon = WalkonIcon;
4424
- exports.darkThemeV1 = darkThemeV1;
4425
- exports.lightThemeV1 = lightThemeV1;
4426
- exports.mainTheme = mainTheme;
4427
-
4428
- Object.defineProperty(exports, '__esModule', { value: true });
4429
-
4430
- })));