@blerp/design 1.4.4 → 1.4.6

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 (74) hide show
  1. package/dist/cjs/Blerp/BlerpImageRow.js +22 -15
  2. package/dist/cjs/Blerp/BlerpSavePopup.js +20 -11
  3. package/dist/cjs/Blerp/BlerpTitleRow.js +16 -10
  4. package/dist/cjs/Blerp/BlerpTopRow.js +32 -25
  5. package/dist/cjs/Blerp.js +8 -7
  6. package/dist/cjs/BlerpListViewPremium.js +24 -20
  7. package/dist/cjs/BlerpListViewSkeleton.js +6 -6
  8. package/dist/cjs/CollectionCard.js +29 -25
  9. package/dist/cjs/CollectionListViewPremium.js +16 -13
  10. package/dist/cjs/CollectionSkeleton.js +5 -5
  11. package/dist/cjs/Dropdown.js +27 -24
  12. package/dist/cjs/EllipsisLoader.js +4 -3
  13. package/dist/cjs/GroupCard.js +8 -7
  14. package/dist/cjs/ImageEditor.js +4 -1
  15. package/dist/cjs/ImageUpload.js +23 -16
  16. package/dist/cjs/NewBlerp.js +41 -37
  17. package/dist/cjs/NewCollectionModal.js +27 -22
  18. package/dist/cjs/PremiumCollectionCard.js +10 -8
  19. package/dist/cjs/PurchaseModals/CheckoutModal.js +7 -3
  20. package/dist/cjs/PurchaseModals/PremiumBlerpCheckoutModal.js +7 -3
  21. package/dist/cjs/PurchaseModals/PremiumCollectionCheckoutModal.js +7 -3
  22. package/dist/cjs/PurchaseModals/PremiumSubscriptionCheckoutModal.js +7 -3
  23. package/dist/cjs/ReactionButtons.js +10 -5
  24. package/dist/cjs/Theme.js +8 -27
  25. package/dist/cjs/Toggle.js +1 -1
  26. package/dist/cjs/UserCard.js +13 -12
  27. package/dist/cjs/UserPage/LibraryControls.js +40 -29
  28. package/dist/cjs/UserPage/UserLibraryHeader.js +14 -8
  29. package/dist/cjs/UserPage/UserProfileHeader.js +28 -19
  30. package/dist/cjs/UsernameWithPopout.js +6 -4
  31. package/dist/cjs/colors.js +2 -1
  32. package/dist/cjs/icons.js +4 -1
  33. package/dist/cjs/index.js +135 -216
  34. package/dist/cjs/neo-components/Navigation.js +0 -2
  35. package/dist/cjs/neo-components/withSx.js +0 -1
  36. package/dist/cjs/neo-utils/sxToStyle.js +0 -2
  37. package/dist/esm/Blerp/BlerpImageRow.js +8 -3
  38. package/dist/esm/Blerp/BlerpSavePopup.js +9 -2
  39. package/dist/esm/Blerp/BlerpTitleRow.js +9 -5
  40. package/dist/esm/Blerp/BlerpTopRow.js +10 -5
  41. package/dist/esm/Blerp.js +2 -1
  42. package/dist/esm/BlerpListViewPremium.js +9 -5
  43. package/dist/esm/BlerpListViewSkeleton.js +1 -1
  44. package/dist/esm/CollectionCard.js +10 -6
  45. package/dist/esm/CollectionListViewPremium.js +7 -4
  46. package/dist/esm/CollectionSkeleton.js +1 -1
  47. package/dist/esm/Dropdown.js +10 -7
  48. package/dist/esm/EllipsisLoader.js +3 -2
  49. package/dist/esm/GroupCard.js +4 -3
  50. package/dist/esm/ImageEditor.js +2 -1
  51. package/dist/esm/ImageUpload.js +11 -6
  52. package/dist/esm/NewBlerp.js +13 -9
  53. package/dist/esm/NewCollectionModal.js +16 -11
  54. package/dist/esm/PremiumCollectionCard.js +4 -2
  55. package/dist/esm/PurchaseModals/CheckoutModal.js +4 -2
  56. package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js +4 -2
  57. package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js +4 -2
  58. package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js +4 -2
  59. package/dist/esm/ReactionButtons.js +5 -2
  60. package/dist/esm/Theme.js +5 -24
  61. package/dist/esm/Toggle.js +1 -1
  62. package/dist/esm/UserCard.js +7 -6
  63. package/dist/esm/UserPage/LibraryControls.js +20 -11
  64. package/dist/esm/UserPage/UserLibraryHeader.js +6 -2
  65. package/dist/esm/UserPage/UserProfileHeader.js +12 -5
  66. package/dist/esm/UsernameWithPopout.js +4 -2
  67. package/dist/esm/colors.js +2 -1
  68. package/dist/esm/icons.js +2 -1
  69. package/dist/esm/index.js +44 -129
  70. package/dist/esm/neo-components/Navigation.js +0 -2
  71. package/dist/esm/neo-components/ThemeProvider.js +1 -1
  72. package/dist/esm/neo-components/withSx.js +0 -1
  73. package/dist/esm/neo-utils/sxToStyle.js +0 -2
  74. package/package.json +31 -9
@@ -1,14 +1,16 @@
1
1
  'use strict';
2
2
 
3
- var index = require('../index.js');
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
4
5
  var React = require('react');
6
+ var Stack = require('../neo-components/Stack.js');
5
7
 
6
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
9
 
8
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
9
11
 
10
12
  const NeedToReplace = props => {
11
- return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
13
+ return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
12
14
  sx: {
13
15
  backgroundColor: "white.main",
14
16
  width: "900px",
@@ -36,4 +38,6 @@ const NeedToReplace = props => {
36
38
  }, "Need to replace to remove payment dependencies");
37
39
  };
38
40
 
39
- module.exports = NeedToReplace;
41
+ var NeedToReplace$1 = NeedToReplace;
42
+
43
+ exports["default"] = NeedToReplace$1;
@@ -1,8 +1,11 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
- var index = require('./index.js');
5
6
  var Theme = require('./Theme.js');
7
+ var Grid = require('./neo-components/Grid.js');
8
+ var Misc = require('./neo-components/Misc.js');
6
9
 
7
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
11
 
@@ -26,7 +29,7 @@ const ReactionButtons = _ref => {
26
29
  } = _ref;
27
30
  const theme = Theme.useBlerpTheme();
28
31
  const [hoveredReaction, setHoveredReaction] = React__default["default"].useState(null);
29
- return /*#__PURE__*/React__default["default"].createElement(index.Grid, {
32
+ return /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
30
33
  display: "grid",
31
34
  gridTemplateColumns: "repeat(4, 1fr)",
32
35
  alignItems: "center",
@@ -37,12 +40,12 @@ const ReactionButtons = _ref => {
37
40
 
38
41
  const isActive = 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);
39
42
  const isHovered = hoveredReaction === reaction;
40
- return /*#__PURE__*/React__default["default"].createElement(index.Grid, {
43
+ return /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
41
44
  key: "".concat(reaction, "-button"),
42
45
  gridColumn: "span 1",
43
46
  display: "flex",
44
47
  justifyContent: "center"
45
- }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
48
+ }, /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
46
49
  title: reaction
47
50
  }, /*#__PURE__*/React__default["default"].createElement("div", {
48
51
  style: {
@@ -75,4 +78,6 @@ const ReactionButtons = _ref => {
75
78
  }));
76
79
  };
77
80
 
78
- module.exports = ReactionButtons;
81
+ var ReactionButtons$1 = ReactionButtons;
82
+
83
+ exports["default"] = ReactionButtons$1;
package/dist/cjs/Theme.js CHANGED
@@ -8,27 +8,6 @@ var icons = require('./icons.js');
8
8
  var colors = require('./colors.js');
9
9
  var SnackbarContextProvider = require('./SnackbarContextProvider.js');
10
10
  var ThemeProvider = require('./neo-components/ThemeProvider.js');
11
- require('@babel/runtime/helpers/extends');
12
- require('@babel/runtime/helpers/objectWithoutProperties');
13
- require('./neo-components/Box.js');
14
- require('./neo-components/Stack.js');
15
- require('./neo-components/Grid.js');
16
- require('./neo-components/Container.js');
17
- require('./neo-components/Text.js');
18
- require('./neo-components/Button.js');
19
- require('./neo-components/IconButton.js');
20
- require('./neo-components/Fab.js');
21
- require('./neo-components/ToggleButton.js');
22
- require('./neo-components/Input.js');
23
- require('./neo-components/FormControls.js');
24
- require('./neo-components/Autocomplete.js');
25
- require('./neo-components/Paper.js');
26
- require('./neo-components/Dialog.js');
27
- require('./neo-components/Navigation.js');
28
- require('./neo-components/BottomNavigation.js');
29
- require('./neo-components/Stepper.js');
30
- require('./neo-components/Misc.js');
31
- require('./neo-components/Layout.js');
32
11
 
33
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
34
13
 
@@ -128,7 +107,7 @@ const lightThemeConfig = _objectSpread({
128
107
  },
129
108
  mode: "light",
130
109
  colors: colors.lightColors,
131
- icons: icons,
110
+ icons: icons["default"],
132
111
  palette: colors.lightPalette
133
112
  }, mainTheme);
134
113
  const darkThemeConfig = _objectSpread({
@@ -137,7 +116,7 @@ const darkThemeConfig = _objectSpread({
137
116
  },
138
117
  mode: "dark",
139
118
  colors: colors.darkColors,
140
- icons: icons,
119
+ icons: icons["default"],
141
120
  palette: colors.darkPalette
142
121
  }, mainTheme); // MUI themes (only created if MUI is available)
143
122
 
@@ -248,7 +227,7 @@ const muiThemeConfig = {
248
227
  const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
249
228
  mode: "light",
250
229
  colors: colors.lightColors,
251
- icons: icons,
230
+ icons: icons["default"],
252
231
  palette: colors.lightPalette
253
232
  })) : lightThemeConfig;
254
233
  const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
@@ -319,7 +298,7 @@ const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiT
319
298
  }),
320
299
  mode: "dark",
321
300
  colors: colors.darkColors,
322
- icons: icons,
301
+ icons: icons["default"],
323
302
  palette: colors.darkPalette
324
303
  })) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
325
304
 
@@ -350,7 +329,7 @@ const BlerpTheme = _ref => {
350
329
  const currentTheme = React.useMemo(() => mode === "dark" ? darkTheme : theme, [mode]); // Memoize the combined theme value (for legacy styled-components)
351
330
 
352
331
  const themeValue = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, mainTheme), {}, {
353
- icons,
332
+ icons: icons["default"],
354
333
  mode: mode === "dark" ? "dark" : "light"
355
334
  }, currentTheme), customColors), [mode, currentTheme, customColors]); // Build the inner content with SnackbarProvider
356
335
 
@@ -373,9 +352,11 @@ const BlerpTheme = _ref => {
373
352
  }, withMuiTheme);
374
353
  };
375
354
 
355
+ var BlerpTheme$1 = BlerpTheme; // Export fonts for manual injection if needed
356
+
376
357
  exports.darkTheme = darkTheme;
377
358
  exports.darkThemeConfig = darkThemeConfig;
378
- exports["default"] = BlerpTheme;
359
+ exports["default"] = BlerpTheme$1;
379
360
  exports.fonts = fonts;
380
361
  exports.lightThemeConfig = lightThemeConfig;
381
362
  exports.theme = theme;
@@ -52,7 +52,7 @@ const Toggle = _ref2 => {
52
52
  flexDirection: "column",
53
53
  justifyContent: "center"
54
54
  }
55
- }, /*#__PURE__*/React__default["default"].createElement(EllipsisLoader.EllipsisLoader, null)) : /*#__PURE__*/React__default["default"].createElement("div", {
55
+ }, /*#__PURE__*/React__default["default"].createElement(EllipsisLoader["default"], null)) : /*#__PURE__*/React__default["default"].createElement("div", {
56
56
  role: "switch",
57
57
  "aria-checked": isChecked,
58
58
  tabIndex: disabled ? -1 : 0,
@@ -3,7 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
- var index = require('./index.js');
6
+ var Stack = require('./neo-components/Stack.js');
7
+ var Text = require('./neo-components/Text.js');
7
8
 
8
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
10
 
@@ -24,7 +25,7 @@ const UserCard = _ref => {
24
25
  });
25
26
  let followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
26
27
  let createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
27
- return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
28
+ return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
28
29
  direction: "row",
29
30
  sx: {
30
31
  backgroundColor: "grey4.main",
@@ -39,7 +40,7 @@ const UserCard = _ref => {
39
40
  border: "1px solid transparent",
40
41
  borderColor: collapsed ? (user === null || user === void 0 ? void 0 : user.affiliateJourneyStatuss) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : user.affiliateJourneyStatuss) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
41
42
  }
42
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
43
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
43
44
  sx: {
44
45
  position: "relative"
45
46
  }
@@ -60,12 +61,12 @@ const UserCard = _ref => {
60
61
 
61
62
  e.target.src = "https://cdn.blerp.com/design/web/gamerblerpylarge.png";
62
63
  }
63
- })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
64
+ })), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
64
65
  sx: {
65
66
  flex: 1,
66
67
  marginLeft: "20px"
67
68
  }
68
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
69
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
69
70
  sx: {
70
71
  fontSize: "18px",
71
72
  fontWeight: "300",
@@ -81,41 +82,41 @@ const UserCard = _ref => {
81
82
  }
82
83
  },
83
84
  onClick: onUsernameClick
84
- }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
85
+ }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
85
86
  direction: "row",
86
87
  sx: {
87
88
  alignItems: "center",
88
89
  justifyContent: "space-around"
89
90
  }
90
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
91
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
91
92
  alignItems: "center",
92
93
  sx: {
93
94
  cursor: "pointer"
94
95
  },
95
96
  onClick: onFollowerClick
96
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
97
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
97
98
  sx: {
98
99
  fontSize: "14px",
99
100
  fontWeight: "400"
100
101
  }
101
- }, followerCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
102
+ }, followerCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
102
103
  sx: {
103
104
  fontSize: "12px",
104
105
  fontWeight: "300",
105
106
  color: "grey7.main"
106
107
  }
107
- }, "followers")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
108
+ }, "followers")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
108
109
  alignItems: "center",
109
110
  sx: {
110
111
  cursor: "pointer"
111
112
  },
112
113
  onClick: onCreatedClick
113
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
114
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
114
115
  sx: {
115
116
  fontSize: "14px",
116
117
  fontWeight: "400"
117
118
  }
118
- }, createdCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
119
+ }, createdCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
119
120
  sx: {
120
121
  fontSize: "12px",
121
122
  fontWeight: "300",
@@ -1,9 +1,18 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- var index = require('../index.js');
5
6
  var React = require('react');
6
7
  var ScreenSizeHook = require('../ScreenSizeHook.js');
8
+ var Stack = require('../neo-components/Stack.js');
9
+ var Text = require('../neo-components/Text.js');
10
+ var Box = require('../neo-components/Box.js');
11
+ var Input = require('../neo-components/Input.js');
12
+ var Button = require('../neo-components/Button.js');
13
+ var Navigation = require('../neo-components/Navigation.js');
14
+ var IconButton = require('../neo-components/IconButton.js');
15
+ var Misc = require('../neo-components/Misc.js');
7
16
 
8
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
18
 
@@ -159,19 +168,19 @@ const LibraryControls = _ref9 => {
159
168
 
160
169
  const greyColor = "#888"; // grey6.main equivalent
161
170
 
162
- return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
171
+ return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
163
172
  direction: "row",
164
173
  alignItems: "center",
165
174
  justifyContent: "space-around",
166
175
  marginTop: size.width <= 675 && "20px"
167
176
  }, activeBoard && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconPerson, {
168
177
  color: iconColor
169
- }), /*#__PURE__*/React__default["default"].createElement(index.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(index.Box, {
178
+ }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, 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.Box, {
170
179
  sx: {
171
180
  display: "flex",
172
181
  alignItems: "flex-end"
173
182
  }
174
- }, /*#__PURE__*/React__default["default"].createElement(index.Input, {
183
+ }, /*#__PURE__*/React__default["default"].createElement(Input.TextField, {
175
184
  id: "user-library-search-input",
176
185
  placeholder: "Search User Library",
177
186
  variant: "standard",
@@ -203,12 +212,12 @@ const LibraryControls = _ref9 => {
203
212
  color: "grey6.main",
204
213
  borderColor: "grey6.main"
205
214
  },
206
- startAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
215
+ startAdornment: /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
207
216
  position: "center"
208
217
  }, /*#__PURE__*/React__default["default"].createElement(IconSearch, {
209
218
  color: greyColor
210
219
  })),
211
- endAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
220
+ endAdornment: /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
212
221
  position: "end"
213
222
  }, inputValue && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconClose, {
214
223
  color: greyColor,
@@ -217,13 +226,13 @@ const LibraryControls = _ref9 => {
217
226
  setInputValue("");
218
227
  setShowSearch(false);
219
228
  }
220
- }), /*#__PURE__*/React__default["default"].createElement(index.Button, {
229
+ }), /*#__PURE__*/React__default["default"].createElement(Button.Button, {
221
230
  variant: "text",
222
231
  color: "notBlack",
223
232
  onClick: () => setShowSearch(true)
224
233
  }, "Search")))
225
234
  }
226
- })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
235
+ })), /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
227
236
  id: "library-controls-popover",
228
237
  open: openFilter,
229
238
  onClose: () => {
@@ -251,7 +260,7 @@ const LibraryControls = _ref9 => {
251
260
  vertical: "top",
252
261
  horizontal: "center"
253
262
  }
254
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
263
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
255
264
  direction: "row",
256
265
  onClick: () => setSort("TITLE_ASC"),
257
266
  sx: {
@@ -262,10 +271,10 @@ const LibraryControls = _ref9 => {
262
271
  color: "white.override"
263
272
  }
264
273
  }
265
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
274
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
266
275
  margin: "0 15px",
267
276
  fontSize: "18px"
268
- }, "Alphabetical")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
277
+ }, "Alphabetical")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
269
278
  direction: "row",
270
279
  onClick: () => setSort("CREATEDAT_DESC"),
271
280
  sx: {
@@ -276,10 +285,10 @@ const LibraryControls = _ref9 => {
276
285
  color: "white.override"
277
286
  }
278
287
  }
279
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
288
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
280
289
  margin: "0 15px",
281
290
  fontSize: "18px"
282
- }, "Newest")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
291
+ }, "Newest")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
283
292
  direction: "row",
284
293
  onClick: () => setSort("CREATEDAT_ASC"),
285
294
  sx: {
@@ -290,25 +299,25 @@ const LibraryControls = _ref9 => {
290
299
  color: "white.override"
291
300
  }
292
301
  }
293
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
302
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
294
303
  margin: "0 15px",
295
304
  fontSize: "18px"
296
- }, "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(index.Button, {
305
+ }, "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.Button, {
297
306
  color: "notBlack",
298
307
  ref: filterRef,
299
308
  onClick: () => setFilterAnchor(filterRef.current)
300
- }, /*#__PURE__*/React__default["default"].createElement(index.Text, null, "Sort"), /*#__PURE__*/React__default["default"].createElement(IconSort, {
309
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, null, "Sort"), /*#__PURE__*/React__default["default"].createElement(IconSort, {
301
310
  color: iconColor
302
- })), /*#__PURE__*/React__default["default"].createElement(index.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
311
+ })), /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
303
312
  color: iconColor
304
- })), /*#__PURE__*/React__default["default"].createElement(index.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
313
+ })), /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
305
314
  color: iconColor
306
- }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
315
+ }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
307
316
  ref: divRef,
308
317
  onClick: () => setAnchor(divRef.current)
309
318
  }, /*#__PURE__*/React__default["default"].createElement(IconMoreHoriz, {
310
319
  color: iconColor
311
- })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
320
+ })), /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
312
321
  id: "library-controls-popover",
313
322
  open: open,
314
323
  onClose: () => {
@@ -336,7 +345,7 @@ const LibraryControls = _ref9 => {
336
345
  vertical: "top",
337
346
  horizontal: "center"
338
347
  }
339
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
348
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
340
349
  direction: "row",
341
350
  alignItems: "center",
342
351
  sx: {
@@ -349,11 +358,11 @@ const LibraryControls = _ref9 => {
349
358
  }
350
359
  }, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
351
360
  color: iconColor
352
- }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
361
+ }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
353
362
  color: "notBlack.main",
354
363
  margin: "0 15px",
355
364
  fontSize: "18px"
356
- }, "List View")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
365
+ }, "List View")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
357
366
  direction: "row",
358
367
  alignItems: "center",
359
368
  sx: {
@@ -366,13 +375,13 @@ const LibraryControls = _ref9 => {
366
375
  }
367
376
  }, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
368
377
  color: iconColor
369
- }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
378
+ }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
370
379
  color: "notBlack.main",
371
380
  margin: "0 15px",
372
381
  fontSize: "18px"
373
- }, "Grid View")), /*#__PURE__*/React__default["default"].createElement(index.Divider, {
382
+ }, "Grid View")), /*#__PURE__*/React__default["default"].createElement(Misc.Divider, {
374
383
  variant: "middle"
375
- }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
384
+ }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
376
385
  ref: filterRef,
377
386
  onClick: () => setFilterAnchor(filterRef.current),
378
387
  direction: "row",
@@ -386,11 +395,11 @@ const LibraryControls = _ref9 => {
386
395
  backgroundColor: "grey2.main"
387
396
  }
388
397
  }
389
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
398
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
390
399
  direction: "row"
391
400
  }, /*#__PURE__*/React__default["default"].createElement(IconSort, {
392
401
  color: iconColor
393
- }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
402
+ }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
394
403
  fontSize: "18px",
395
404
  color: "notBlack.main",
396
405
  margin: "0 15px"
@@ -399,4 +408,6 @@ const LibraryControls = _ref9 => {
399
408
  }))))));
400
409
  };
401
410
 
402
- module.exports = LibraryControls;
411
+ var LibraryControls$1 = LibraryControls;
412
+
413
+ exports["default"] = LibraryControls$1;
@@ -1,10 +1,14 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
6
  var React = require('react');
5
- var index = require('../index.js');
6
7
  var ScreenSizeHook = require('../ScreenSizeHook.js');
7
8
  var LibraryControls = require('./LibraryControls.js');
9
+ var Box = require('../neo-components/Box.js');
10
+ var Stack = require('../neo-components/Stack.js');
11
+ var Button = require('../neo-components/Button.js');
8
12
 
9
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
14
 
@@ -31,14 +35,14 @@ const UserLibraryHeader = _ref => {
31
35
  hideLayoutButtons
32
36
  } = _ref;
33
37
  const size = ScreenSizeHook.useWindowSize();
34
- return /*#__PURE__*/React__default["default"].createElement(index.Box, {
38
+ return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
35
39
  sx: _objectSpread({
36
40
  backgroundColor: "grey2.main",
37
41
  position: "sticky",
38
42
  top: size.width >= 1000 ? "80px" : "110px",
39
43
  zIndex: "5"
40
44
  }, sx)
41
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
45
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
42
46
  direction: "row",
43
47
  style: {
44
48
  padding: "20px 10px",
@@ -46,16 +50,16 @@ const UserLibraryHeader = _ref => {
46
50
  margin: "0 auto",
47
51
  width: "95%"
48
52
  }
49
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
53
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
50
54
  direction: "row",
51
55
  width: "100%",
52
56
  justifyContent: size.width <= 675 ? "center" : "space-between",
53
57
  alignItems: "center",
54
58
  flexWrap: "wrap"
55
- }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
59
+ }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
56
60
  direction: "row",
57
61
  flexWrap: "inherit"
58
- }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(index.Button, {
62
+ }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(Button.Button, {
59
63
  key: "tab-".concat(tab),
60
64
  onClick: () => {
61
65
  setActiveBoard(null);
@@ -85,7 +89,7 @@ const UserLibraryHeader = _ref => {
85
89
  },
86
90
  color: tabSelection.includes(tab) ? "grey3" : "notBlack",
87
91
  disableElevation: true
88
- }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls, {
92
+ }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls["default"], {
89
93
  currentSort: sort,
90
94
  setActiveBoard: setActiveBoard,
91
95
  setSort: value => {
@@ -99,4 +103,6 @@ const UserLibraryHeader = _ref => {
99
103
  }))));
100
104
  };
101
105
 
102
- module.exports = UserLibraryHeader;
106
+ var UserLibraryHeader$1 = UserLibraryHeader;
107
+
108
+ exports["default"] = UserLibraryHeader$1;