@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,6 +1,11 @@
1
1
  import React from 'react';
2
- import { Popover, Grid, Tooltip, Box, Stack, Button } from '../index.js';
3
2
  import { useBlerpTheme } from '../Theme.js';
3
+ import { Popover } from '../neo-components/Navigation.js';
4
+ import { Grid } from '../neo-components/Grid.js';
5
+ import { Tooltip } from '../neo-components/Misc.js';
6
+ import { Box } from '../neo-components/Box.js';
7
+ import { Stack } from '../neo-components/Stack.js';
8
+ import { Button } from '../neo-components/Button.js';
4
9
 
5
10
  const reactionIconUrls = {
6
11
  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
@@ -152,4 +157,6 @@ const BlerpSavePopup = _ref => {
152
157
  }, "Organize")));
153
158
  };
154
159
 
155
- export { BlerpSavePopup as default };
160
+ var BlerpSavePopup$1 = BlerpSavePopup;
161
+
162
+ export { BlerpSavePopup$1 as default };
@@ -1,5 +1,7 @@
1
1
  import React from 'react';
2
- import { Stack, Box, Text } from '../index.js';
2
+ import { Stack } from '../neo-components/Stack.js';
3
+ import { Box } from '../neo-components/Box.js';
4
+ import { Typography } from '../neo-components/Text.js';
3
5
 
4
6
  const BlerpTitleRow = _ref => {
5
7
  let {
@@ -39,7 +41,7 @@ const BlerpTitleRow = _ref => {
39
41
  textOverflow: "ellipsis",
40
42
  overflow: "hidden"
41
43
  }
42
- }, /*#__PURE__*/React.createElement(Text, {
44
+ }, /*#__PURE__*/React.createElement(Typography, {
43
45
  textAlign: "center",
44
46
  fontSize: sizeParams.fontSize,
45
47
  color: isPremium && !isLocked ? "white.override" : "white.override",
@@ -84,7 +86,7 @@ const BlerpTitleRow = _ref => {
84
86
  style: {
85
87
  textDecoration: "none"
86
88
  }
87
- }, /*#__PURE__*/React.createElement(Text, {
89
+ }, /*#__PURE__*/React.createElement(Typography, {
88
90
  textAlign: "center",
89
91
  fontSize: sizeParams.fontSize,
90
92
  color: isPremium ? "white.override" : "white.override",
@@ -110,7 +112,7 @@ const BlerpTitleRow = _ref => {
110
112
  textOverflow: "ellipsis",
111
113
  overflow: "hidden"
112
114
  }
113
- }, /*#__PURE__*/React.createElement(Text, {
115
+ }, /*#__PURE__*/React.createElement(Typography, {
114
116
  textAlign: "center",
115
117
  fontSize: sizeParams.fontSize,
116
118
  color: isPremium ? "white.override" : "white.override",
@@ -124,4 +126,6 @@ const BlerpTitleRow = _ref => {
124
126
  }, title || bite.title)));
125
127
  };
126
128
 
127
- export { BlerpTitleRow as default };
129
+ var BlerpTitleRow$1 = BlerpTitleRow;
130
+
131
+ export { BlerpTitleRow$1 as default };
@@ -2,7 +2,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React from 'react';
3
3
  import { reactionIconUrls } from '../Blerp.js';
4
4
  import { UnsafeIcon, BookmarkAddRounded, DiamondIcon, TwitchBitIcon, ChannelPointsIcon } from '../Icons/Icons.js';
5
- import { Stack, Text, Tooltip, IconButton } from '../index.js';
5
+ import { Stack } from '../neo-components/Stack.js';
6
+ import { Typography } from '../neo-components/Text.js';
7
+ import { Tooltip } from '../neo-components/Misc.js';
8
+ import { IconButton } from '../neo-components/IconButton.js';
6
9
 
7
10
  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; }
8
11
 
@@ -121,7 +124,7 @@ const BlerpTopRow = _ref5 => {
121
124
  alignItems: "center",
122
125
  height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px",
123
126
  position: sizeParams.buttonSize === "small" && "absolute"
124
- }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
127
+ }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
125
128
  fontSize: "12px",
126
129
  color: isPremium && !isLocked ? "white.main" : "notBlack.main",
127
130
  sx: {
@@ -129,7 +132,7 @@ const BlerpTopRow = _ref5 => {
129
132
  top: "30px",
130
133
  left: "10px"
131
134
  }
132
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React.createElement(Text, {
135
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React.createElement(Typography, {
133
136
  fontSize: "8px",
134
137
  color: isPremium ? "waxwing.main" : "grey5.main",
135
138
  sx: {
@@ -205,7 +208,7 @@ const BlerpTopRow = _ref5 => {
205
208
  }
206
209
  }, /*#__PURE__*/React.createElement(BookmarkAddRounded, {
207
210
  fontSize: "small"
208
- })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Text, {
211
+ })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Typography, {
209
212
  color: "notBlack.main",
210
213
  fontWeight: "light",
211
214
  fontSize: "12px",
@@ -302,4 +305,6 @@ const BlerpTopRow = _ref5 => {
302
305
  }, /*#__PURE__*/React.createElement(IconMoreHoriz, null)) : /*#__PURE__*/React.createElement(React.Fragment, null))));
303
306
  };
304
307
 
305
- export { BlerpTopRow as default };
308
+ var BlerpTopRow$1 = BlerpTopRow;
309
+
310
+ export { BlerpTopRow$1 as default };
package/dist/esm/Blerp.js CHANGED
@@ -3,9 +3,10 @@ import BlerpImageRow from './Blerp/BlerpImageRow.js';
3
3
  import BlerpSavePopup from './Blerp/BlerpSavePopup.js';
4
4
  import BlerpTitleRow from './Blerp/BlerpTitleRow.js';
5
5
  import BlerpTopRow from './Blerp/BlerpTopRow.js';
6
- import { Box, Stack } from './index.js';
7
6
  import { useWindowSize } from './ScreenSizeHook.js';
8
7
  import { useBlerpTheme } from './Theme.js';
8
+ import { Box } from './neo-components/Box.js';
9
+ import { Stack } from './neo-components/Stack.js';
9
10
 
10
11
  const reactionIconUrls = {
11
12
  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
@@ -4,9 +4,13 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
4
4
  import React, { useState } from 'react';
5
5
  import { useWindowSize } from './ScreenSizeHook.js';
6
6
  import { PlayOutlineIcon, OpenLockIcon, DiamondIcon } from './Icons/Icons.js';
7
- import { Box, Stack, Text, Tooltip, IconButton } from './index.js';
8
7
  import { useCustomPalette } from './helpers.js';
9
8
  import { useBlerpTheme } from './Theme.js';
9
+ import { Box } from './neo-components/Box.js';
10
+ import { Stack } from './neo-components/Stack.js';
11
+ import { Typography } from './neo-components/Text.js';
12
+ import { Tooltip } from './neo-components/Misc.js';
13
+ import { IconButton } from './neo-components/IconButton.js';
10
14
 
11
15
  const _excluded = ["path", "sx", "size"];
12
16
 
@@ -228,7 +232,7 @@ const BlerpListViewPremium = _ref2 => {
228
232
  sx: {
229
233
  width: "80%"
230
234
  }
231
- }, isLinkTitle ? /*#__PURE__*/React.createElement(Text, {
235
+ }, isLinkTitle ? /*#__PURE__*/React.createElement(Typography, {
232
236
  textAlign: "left",
233
237
  fontSize: sizeParams.fontSize,
234
238
  noWrap: true,
@@ -252,7 +256,7 @@ const BlerpListViewPremium = _ref2 => {
252
256
  textDecoration: "none",
253
257
  color: "white"
254
258
  }
255
- }, bite.title)) : /*#__PURE__*/React.createElement(Text, {
259
+ }, bite.title)) : /*#__PURE__*/React.createElement(Typography, {
256
260
  textAlign: "left",
257
261
  fontSize: sizeParams.fontSize,
258
262
  noWrap: true,
@@ -270,7 +274,7 @@ const BlerpListViewPremium = _ref2 => {
270
274
  handleClickTitle();
271
275
  }
272
276
  }
273
- }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Text, {
277
+ }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Typography, {
274
278
  textAlign: "left",
275
279
  fontSize: sizeParams.smallFontSize,
276
280
  noWrap: true,
@@ -360,7 +364,7 @@ const BlerpListViewPremium = _ref2 => {
360
364
  marginRight: "4px",
361
365
  color: "white.override"
362
366
  }
363
- }), /*#__PURE__*/React.createElement(Text, {
367
+ }), /*#__PURE__*/React.createElement(Typography, {
364
368
  sx: {
365
369
  marginRight: "4px",
366
370
  color: "white.override",
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { Box } from './index.js';
3
2
  import { useBlerpTheme } from './Theme.js';
3
+ import { Box } from './neo-components/Box.js';
4
4
 
5
5
  const BlerpListViewSkeleton = () => {
6
6
  const theme = useBlerpTheme();
@@ -1,8 +1,12 @@
1
1
  import React, { useState } from 'react';
2
- import { Box, Stack, Tooltip, Text, IconButton } from './index.js';
3
- import { Blerp } from './PremiumCollectionCard.js';
2
+ import PremiumCollectionCard from './PremiumCollectionCard.js';
4
3
  import { useCustomPalette } from './helpers.js';
4
+ import { Box } from './neo-components/Box.js';
5
+ import { Stack } from './neo-components/Stack.js';
6
+ import { Tooltip } from './neo-components/Misc.js';
7
+ import { Typography } from './neo-components/Text.js';
5
8
  import { TwitchBitIcon } from './Icons/Icons.js';
9
+ import { IconButton } from './neo-components/IconButton.js';
6
10
 
7
11
  const AccountCircleIcon = _ref => {
8
12
  let {
@@ -212,7 +216,7 @@ const CollectionCard = _ref6 => {
212
216
  }
213
217
 
214
218
  if (isPremium) {
215
- return /*#__PURE__*/React.createElement(Blerp, {
219
+ return /*#__PURE__*/React.createElement(PremiumCollectionCard, {
216
220
  collection: collection,
217
221
  variantSize: variantSize,
218
222
  handleClickBackground: handleClickBackground,
@@ -357,7 +361,7 @@ const CollectionCard = _ref6 => {
357
361
  margin: "5px 0",
358
362
  maxWidth: "92%"
359
363
  }
360
- }, /*#__PURE__*/React.createElement(Text, {
364
+ }, /*#__PURE__*/React.createElement(Typography, {
361
365
  fontSize: fontSize ? fontSize : "22px",
362
366
  color: "white.override",
363
367
  textAlign: "center",
@@ -435,7 +439,7 @@ const CollectionCard = _ref6 => {
435
439
  color: "white",
436
440
  textDecoration: "none"
437
441
  }
438
- }, /*#__PURE__*/React.createElement(Text, {
442
+ }, /*#__PURE__*/React.createElement(Typography, {
439
443
  fontSize: fontSize ? fontSize : "22px",
440
444
  color: "white.override",
441
445
  textAlign: "center",
@@ -445,7 +449,7 @@ const CollectionCard = _ref6 => {
445
449
  textDecoration: "underline"
446
450
  }
447
451
  }
448
- }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Text, {
452
+ }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Typography, {
449
453
  fontSize: fontSize ? fontSize : "22px",
450
454
  color: "white.override",
451
455
  textAlign: "center",
@@ -2,11 +2,14 @@ import _extends from '@babel/runtime/helpers/extends';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
4
4
  import React, { useState } from 'react';
5
- import { Stack, Box, Text, IconButton } from './index.js';
6
5
  import { useWindowSize } from './ScreenSizeHook.js';
7
6
  import { useCustomPalette } from './helpers.js';
8
7
  import { useBlerpTheme } from './Theme.js';
8
+ import { Stack } from './neo-components/Stack.js';
9
+ import { Box } from './neo-components/Box.js';
10
+ import { Typography } from './neo-components/Text.js';
9
11
  import { DiamondIcon } from './Icons/Icons.js';
12
+ import { IconButton } from './neo-components/IconButton.js';
10
13
 
11
14
  const _excluded = ["path", "sx", "size"];
12
15
 
@@ -305,7 +308,7 @@ const CollectionListViewPremium = _ref2 => {
305
308
  position: "relative",
306
309
  left: "12px"
307
310
  }
308
- }, /*#__PURE__*/React.createElement(Text, {
311
+ }, /*#__PURE__*/React.createElement(Typography, {
309
312
  textAlign: "left",
310
313
  fontSize: sizeParams.fontSize,
311
314
  noWrap: true,
@@ -324,7 +327,7 @@ const CollectionListViewPremium = _ref2 => {
324
327
  handleClickTitle();
325
328
  }
326
329
  }
327
- }, collection.title)) : /*#__PURE__*/React.createElement(Text, {
330
+ }, collection.title)) : /*#__PURE__*/React.createElement(Typography, {
328
331
  textAlign: "left",
329
332
  fontSize: sizeParams.fontSize,
330
333
  noWrap: true,
@@ -373,7 +376,7 @@ const CollectionListViewPremium = _ref2 => {
373
376
  color: "white.override",
374
377
  height: "18px"
375
378
  }
376
- }), /*#__PURE__*/React.createElement(Text, {
379
+ }), /*#__PURE__*/React.createElement(Typography, {
377
380
  sx: {
378
381
  zIndex: "2",
379
382
  color: "white.override",
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React from 'react';
3
- import { Box } from './index.js';
4
3
  import { useBlerpTheme } from './Theme.js';
4
+ import { Box } from './neo-components/Box.js';
5
5
 
6
6
  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; }
7
7
 
@@ -1,6 +1,9 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React, { useState, useRef, useEffect, useCallback } from 'react';
3
- import { Button, Text, Stack, Menu, MenuItem } from './index.js';
3
+ import { Button } from './neo-components/Button.js';
4
+ import { Typography } from './neo-components/Text.js';
5
+ import { Stack } from './neo-components/Stack.js';
6
+ import { Menu, MenuItem } from './neo-components/Navigation.js';
4
7
 
5
8
  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; }
6
9
 
@@ -146,7 +149,7 @@ const NewDropdown = _ref2 => {
146
149
  backgroundColor: "rgba(250, 250, 250, 1)"
147
150
  }
148
151
  }, buttonStyle)
149
- }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
152
+ }, buttonLabel && /*#__PURE__*/React.createElement(Typography, {
150
153
  noWrap: true,
151
154
  fontSize: "11px",
152
155
  color: "whiteOverride.main",
@@ -172,7 +175,7 @@ const NewDropdown = _ref2 => {
172
175
  gap: 1,
173
176
  overflow: "hidden",
174
177
  flex: 1
175
- }, startIcon, /*#__PURE__*/React.createElement(Text, {
178
+ }, startIcon, /*#__PURE__*/React.createElement(Typography, {
176
179
  noWrap: true,
177
180
  fontSize: "14px",
178
181
  color: "darkscale2.main",
@@ -215,7 +218,7 @@ const NewDropdown = _ref2 => {
215
218
  mr: 1,
216
219
  alignItems: "center",
217
220
  justifyContent: "center"
218
- }, option.startImageIcon), /*#__PURE__*/React.createElement(Text, {
221
+ }, option.startImageIcon), /*#__PURE__*/React.createElement(Typography, {
219
222
  noWrap: true,
220
223
  className: "dropdown-item-text",
221
224
  sx: {
@@ -302,7 +305,7 @@ const Dropdown = _ref3 => {
302
305
  }, startIcon, /*#__PURE__*/React.createElement(Stack, {
303
306
  alignItems: "flex-start",
304
307
  overflow: "hidden"
305
- }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
308
+ }, buttonLabel && /*#__PURE__*/React.createElement(Typography, {
306
309
  noWrap: true,
307
310
  fontSize: "10px",
308
311
  color: "grey4.main",
@@ -312,7 +315,7 @@ const Dropdown = _ref3 => {
312
315
  textTransform: "uppercase",
313
316
  marginBottom: "-2px"
314
317
  }
315
- }, buttonLabel), /*#__PURE__*/React.createElement(Text, {
318
+ }, buttonLabel), /*#__PURE__*/React.createElement(Typography, {
316
319
  noWrap: true,
317
320
  fontSize: "14px",
318
321
  color: "grey5.main",
@@ -355,7 +358,7 @@ const Dropdown = _ref3 => {
355
358
  mr: 1,
356
359
  alignItems: "center",
357
360
  justifyContent: "center"
358
- }, option.startImageIcon), /*#__PURE__*/React.createElement(Text, {
361
+ }, option.startImageIcon), /*#__PURE__*/React.createElement(Typography, {
359
362
  noWrap: true,
360
363
  className: "dropdown-item-text",
361
364
  sx: {
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React from 'react';
3
- import { Box } from './index.js';
4
3
  import colors from './colors.js';
4
+ import { Box } from './neo-components/Box.js';
5
5
 
6
6
  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; }
7
7
 
@@ -82,5 +82,6 @@ EllipsisLoader.defaultProps = {
82
82
  height: "20px"
83
83
  }
84
84
  };
85
+ var EllipsisLoader$1 = EllipsisLoader;
85
86
 
86
- export { EllipsisLoader, EllipsisLoader as default };
87
+ export { EllipsisLoader, EllipsisLoader$1 as default };
@@ -1,7 +1,8 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React, { useState } from 'react';
3
- import { Stack, Text } from './index.js';
4
3
  import { AddedToIcons, FavoriteIconWithCounter } from './NewBlerp.js';
4
+ import { Stack } from './neo-components/Stack.js';
5
+ import { Typography } from './neo-components/Text.js';
5
6
 
6
7
  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; }
7
8
 
@@ -116,13 +117,13 @@ const GroupCard = _ref2 => {
116
117
  onMouseLeave: () => setHovering(false)
117
118
  }, /*#__PURE__*/React.createElement(Stack, {
118
119
  height: "100%"
119
- }, /*#__PURE__*/React.createElement(Text, {
120
+ }, /*#__PURE__*/React.createElement(Typography, {
120
121
  sx: {
121
122
  color: "grey5.main",
122
123
  fontSize: "12px",
123
124
  fontWeight: "300"
124
125
  }
125
- }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React.createElement(Text, {
126
+ }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React.createElement(Typography, {
126
127
  sx: {
127
128
  whiteSpace: "nowrap",
128
129
  overflowX: "hidden",
@@ -236,5 +236,6 @@ const ImageEditor = /*#__PURE__*/forwardRef((_ref, ref) => {
236
236
  }, "Failed to load image"));
237
237
  });
238
238
  ImageEditor.displayName = 'ImageEditor';
239
+ var ImageEditor$1 = ImageEditor;
239
240
 
240
- export { ImageEditor as default };
241
+ export { ImageEditor$1 as default };
@@ -1,11 +1,14 @@
1
1
  import _extends from '@babel/runtime/helpers/extends';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
4
- import { Stack, Text, Box, Button } from './index.js';
5
4
  import React, { useState, useRef, useEffect, createRef } from 'react';
6
5
  import ImageEditor from './ImageEditor.js';
7
6
  import { useWindowSize } from './ScreenSizeHook.js';
8
7
  import { useBlerpTheme } from './Theme.js';
8
+ import { Stack } from './neo-components/Stack.js';
9
+ import { Typography } from './neo-components/Text.js';
10
+ import { Box } from './neo-components/Box.js';
11
+ import { Button } from './neo-components/Button.js';
9
12
 
10
13
  const _excluded = ["path", "sx", "size"];
11
14
 
@@ -118,13 +121,13 @@ const ImageUploadModal = _ref2 => {
118
121
  }
119
122
  }), /*#__PURE__*/React.createElement(Stack, {
120
123
  alignItems: "center"
121
- }, /*#__PURE__*/React.createElement(Text, {
124
+ }, /*#__PURE__*/React.createElement(Typography, {
122
125
  sx: {
123
126
  fontSize: "32px"
124
127
  }
125
- }, title), /*#__PURE__*/React.createElement(Text, {
128
+ }, title), /*#__PURE__*/React.createElement(Typography, {
126
129
  color: "grey4"
127
- }, "Adjust your image below."), /*#__PURE__*/React.createElement(Text, {
130
+ }, "Adjust your image below."), /*#__PURE__*/React.createElement(Typography, {
128
131
  color: "grey4"
129
132
  }, sizeInfo)), /*#__PURE__*/React.createElement(Stack, {
130
133
  sx: {
@@ -169,7 +172,7 @@ const ImageUploadModal = _ref2 => {
169
172
  sx: {
170
173
  color: "white"
171
174
  }
172
- }) : /*#__PURE__*/React.createElement(Text, {
175
+ }) : /*#__PURE__*/React.createElement(Typography, {
173
176
  sx: {
174
177
  textAlign: "center",
175
178
  width: "80%"
@@ -214,4 +217,6 @@ const ImageUploadModal = _ref2 => {
214
217
  }, "Save Image")));
215
218
  };
216
219
 
217
- export { ImageUploadModal as default };
220
+ var ImageUpload = ImageUploadModal;
221
+
222
+ export { ImageUpload as default };
@@ -1,8 +1,12 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React, { useState, useRef } from 'react';
3
3
  import { UsernameWithPopout } from './UsernameWithPopout.js';
4
- import { Box, Stack, Text, Tooltip, Button } from './index.js';
4
+ import { Box } from './neo-components/Box.js';
5
+ import { Stack } from './neo-components/Stack.js';
6
+ import { Typography } from './neo-components/Text.js';
5
7
  import { DiamondIcon, ChannelPointsIcon, TwitchBitIcon, WalkonIcon } from './Icons/Icons.js';
8
+ import { Tooltip } from './neo-components/Misc.js';
9
+ import { Button } from './neo-components/Button.js';
6
10
 
7
11
  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; }
8
12
 
@@ -250,7 +254,7 @@ const FavoriteIconWithCounter = _ref10 => {
250
254
  opacity: 0.5,
251
255
  color: "#ffffff"
252
256
  }
253
- }), /*#__PURE__*/React.createElement(Text, {
257
+ }), /*#__PURE__*/React.createElement(Typography, {
254
258
  sx: {
255
259
  fontSize: "12px",
256
260
  fontWeight: "400"
@@ -321,7 +325,7 @@ const RatingInfoItem = _ref12 => {
321
325
  } = _ref12;
322
326
  return /*#__PURE__*/React.createElement(Tooltip, {
323
327
  title: tooltipText
324
- }, /*#__PURE__*/React.createElement(Text, {
328
+ }, /*#__PURE__*/React.createElement(Typography, {
325
329
  sx: {
326
330
  fontSize: "9px",
327
331
  fontWeight: "600",
@@ -447,7 +451,7 @@ const ReportedWarning = _ref14 => {
447
451
  sx: {
448
452
  marginBottom: "20px"
449
453
  }
450
- }), /*#__PURE__*/React.createElement(Text, {
454
+ }), /*#__PURE__*/React.createElement(Typography, {
451
455
  sx: {
452
456
  fontSize: "18px",
453
457
  fontWeight: "600",
@@ -469,14 +473,14 @@ const ReportedWarning = _ref14 => {
469
473
  sx: {
470
474
  marginBottom: "20px"
471
475
  }
472
- }), /*#__PURE__*/React.createElement(Text, {
476
+ }), /*#__PURE__*/React.createElement(Typography, {
473
477
  sx: {
474
478
  fontSize: "18px",
475
479
  fontWeight: "600",
476
480
  color: "white.override",
477
481
  marginBottom: "10px"
478
482
  }
479
- }, "Hold Up"), /*#__PURE__*/React.createElement(Text, {
483
+ }, "Hold Up"), /*#__PURE__*/React.createElement(Typography, {
480
484
  sx: {
481
485
  fontSize: "14px",
482
486
  fontWeight: "400",
@@ -726,7 +730,7 @@ const NewBlerp = _ref16 => {
726
730
  alignItems: "center",
727
731
  justifyContent: "center"
728
732
  }
729
- }, /*#__PURE__*/React.createElement(LockIcon, null), /*#__PURE__*/React.createElement(Text, null, "Private Blerp"))));
733
+ }, /*#__PURE__*/React.createElement(LockIcon, null), /*#__PURE__*/React.createElement(Typography, null, "Private Blerp"))));
730
734
  }
731
735
 
732
736
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
@@ -818,7 +822,7 @@ const NewBlerp = _ref16 => {
818
822
  style: {
819
823
  textDecoration: "none"
820
824
  }
821
- }, /*#__PURE__*/React.createElement(Text, {
825
+ }, /*#__PURE__*/React.createElement(Typography, {
822
826
  ref: titleRef,
823
827
  sx: {
824
828
  fontSize: "16px",
@@ -912,7 +916,7 @@ const NewBlerp = _ref16 => {
912
916
  onUsernameClick: onUsernameClick,
913
917
  user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
914
918
  collapsed: false
915
- }), /*#__PURE__*/React.createElement(Text, {
919
+ }), /*#__PURE__*/React.createElement(Typography, {
916
920
  sx: {
917
921
  fontWeight: "300",
918
922
  fontSize: "12px",
@@ -1,9 +1,14 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import React, { useState, cloneElement, useEffect } from 'react';
3
3
  import ReactDOM from 'react-dom';
4
- import ImageUploadModal from './ImageUpload.js';
5
- import { Button, Stack, Text, Input, Dropdown, Toggle } from './index.js';
4
+ import ImageUpload from './ImageUpload.js';
6
5
  import { useWindowSize } from './ScreenSizeHook.js';
6
+ import { Button } from './neo-components/Button.js';
7
+ import { Stack } from './neo-components/Stack.js';
8
+ import { Typography } from './neo-components/Text.js';
9
+ import { TextField } from './neo-components/Input.js';
10
+ import { Dropdown } from './Dropdown.js';
11
+ import { Toggle } from './Toggle.js';
7
12
 
8
13
  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; }
9
14
 
@@ -173,7 +178,7 @@ const NewCollectionModal = _ref4 => {
173
178
  }
174
179
  }, /*#__PURE__*/React.createElement(Icon, {
175
180
  path: paths.close
176
- })), /*#__PURE__*/React.createElement(Text, {
181
+ })), /*#__PURE__*/React.createElement(Typography, {
177
182
  fontSize: "28px",
178
183
  fontWeight: "700",
179
184
  fontColor: COLORS.textMain,
@@ -213,7 +218,7 @@ const NewCollectionModal = _ref4 => {
213
218
  style: {
214
219
  color: COLORS.textMuted
215
220
  }
216
- }), /*#__PURE__*/React.createElement(Text, {
221
+ }), /*#__PURE__*/React.createElement(Typography, {
217
222
  fontSize: "12px",
218
223
  fontColor: COLORS.textMuted,
219
224
  sx: {
@@ -225,7 +230,7 @@ const NewCollectionModal = _ref4 => {
225
230
  flex: 1,
226
231
  width: "100%"
227
232
  }
228
- }, /*#__PURE__*/React.createElement(Input, {
233
+ }, /*#__PURE__*/React.createElement(TextField, {
229
234
  label: "Name",
230
235
  value: titleInput,
231
236
  onChange: e => setTitleInput(e.target.value),
@@ -242,7 +247,7 @@ const NewCollectionModal = _ref4 => {
242
247
  backgroundColor: COLORS.bgInput
243
248
  }
244
249
  }
245
- }), /*#__PURE__*/React.createElement(Input, {
250
+ }), /*#__PURE__*/React.createElement(TextField, {
246
251
  label: "Description",
247
252
  value: descriptionInput,
248
253
  onChange: e => setDescriptionInput(e.target.value),
@@ -265,7 +270,7 @@ const NewCollectionModal = _ref4 => {
265
270
  spacing: 2,
266
271
  justifyContent: "space-between",
267
272
  flexWrap: "wrap"
268
- }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
273
+ }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
269
274
  fontSize: "12px",
270
275
  fontColor: COLORS.textMuted,
271
276
  sx: {
@@ -287,7 +292,7 @@ const NewCollectionModal = _ref4 => {
287
292
  }, {
288
293
  name: "UNLISTED"
289
294
  }]
290
- })), isAdmin && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
295
+ })), isAdmin && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
291
296
  fontSize: "12px",
292
297
  fontColor: COLORS.textMuted,
293
298
  sx: {
@@ -296,13 +301,13 @@ const NewCollectionModal = _ref4 => {
296
301
  }, "PREMIUM"), /*#__PURE__*/React.createElement(Toggle, {
297
302
  checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
298
303
  onClick: () => handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium))
299
- })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
304
+ })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
300
305
  fontSize: "12px",
301
306
  fontColor: COLORS.textMuted,
302
307
  sx: {
303
308
  mb: 1
304
309
  }
305
- }, "PRICE"), /*#__PURE__*/React.createElement(Input, {
310
+ }, "PRICE"), /*#__PURE__*/React.createElement(TextField, {
306
311
  value: price,
307
312
  onChange: e => setPrice(e.target.value),
308
313
  size: "small",
@@ -358,7 +363,7 @@ const NewCollectionModal = _ref4 => {
358
363
  width: isMobile ? "100vw" : "340px",
359
364
  border: "1px solid ".concat(COLORS.border)
360
365
  }
361
- }, /*#__PURE__*/React.createElement(ImageUploadModal, {
366
+ }, /*#__PURE__*/React.createElement(ImageUpload, {
362
367
  prevImage: collectionToBeEdited ? imageURL : undefined,
363
368
  updateImage: newImage => {
364
369
  setImageURL(URL.createObjectURL(newImage));
@@ -3,10 +3,11 @@ import BlerpImageRow from './Blerp/BlerpImageRow.js';
3
3
  import BlerpSavePopup from './Blerp/BlerpSavePopup.js';
4
4
  import BlerpTitleRow from './Blerp/BlerpTitleRow.js';
5
5
  import BlerpTopRow from './Blerp/BlerpTopRow.js';
6
- import { Box, Stack } from './index.js';
7
6
  import { useWindowSize } from './ScreenSizeHook.js';
8
7
  import { extractDominantColor } from './helpers.js';
9
8
  import { useBlerpTheme } from './Theme.js';
9
+ import { Box } from './neo-components/Box.js';
10
+ import { Stack } from './neo-components/Stack.js';
10
11
 
11
12
  const Blerp = _ref => {
12
13
  var _bite$image2, _bite$image2$original;
@@ -221,5 +222,6 @@ const Blerp = _ref => {
221
222
  handleClickOrganize: handleClickOrganize
222
223
  })));
223
224
  };
225
+ var PremiumCollectionCard = Blerp;
224
226
 
225
- export { Blerp, Blerp as default };
227
+ export { Blerp, PremiumCollectionCard as default };