@blerp/design 1.4.6 → 1.4.7

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 (39) hide show
  1. package/dist/cjs/Blerp/BlerpImageRow.js +2 -2
  2. package/dist/cjs/Blerp/BlerpTitleRow.js +3 -3
  3. package/dist/cjs/Blerp/BlerpTopRow.js +16 -5
  4. package/dist/cjs/Blerp.js +0 -13
  5. package/dist/cjs/BlerpListViewPremium.js +5 -5
  6. package/dist/cjs/CollectionCard.js +4 -17
  7. package/dist/cjs/CollectionListViewPremium.js +4 -4
  8. package/dist/cjs/Dropdown.js +6 -6
  9. package/dist/cjs/GroupCard.js +2 -2
  10. package/dist/cjs/ImageUpload.js +4 -4
  11. package/dist/cjs/NewBlerp.js +9 -9
  12. package/dist/cjs/NewCollectionModal.js +10 -10
  13. package/dist/cjs/Theme.js +4 -201
  14. package/dist/cjs/Toggle.js +1 -0
  15. package/dist/cjs/UserCard.js +5 -5
  16. package/dist/cjs/UserPage/UserLibraryHeader.js +5 -100
  17. package/dist/cjs/UserPage/UserProfileHeader.js +3 -297
  18. package/dist/cjs/UsernameWithPopout.js +1 -1
  19. package/dist/cjs/colors.js +1 -2
  20. package/dist/esm/Blerp/BlerpImageRow.js +3 -3
  21. package/dist/esm/Blerp/BlerpTitleRow.js +4 -4
  22. package/dist/esm/Blerp/BlerpTopRow.js +16 -5
  23. package/dist/esm/Blerp.js +1 -13
  24. package/dist/esm/BlerpListViewPremium.js +6 -6
  25. package/dist/esm/CollectionCard.js +5 -18
  26. package/dist/esm/CollectionListViewPremium.js +5 -5
  27. package/dist/esm/Dropdown.js +7 -7
  28. package/dist/esm/GroupCard.js +3 -3
  29. package/dist/esm/ImageUpload.js +5 -5
  30. package/dist/esm/NewBlerp.js +10 -10
  31. package/dist/esm/NewCollectionModal.js +12 -12
  32. package/dist/esm/Theme.js +6 -202
  33. package/dist/esm/Toggle.js +1 -1
  34. package/dist/esm/UserCard.js +6 -6
  35. package/dist/esm/UserPage/UserLibraryHeader.js +5 -95
  36. package/dist/esm/UserPage/UserProfileHeader.js +3 -290
  37. package/dist/esm/UsernameWithPopout.js +2 -2
  38. package/dist/esm/colors.js +1 -2
  39. package/package.json +1 -4
package/dist/cjs/Theme.js CHANGED
@@ -76,20 +76,6 @@ const mainTheme = {
76
76
  bitsFourIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
77
77
  bitsFiveIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
78
78
  };
79
- const fonts = "@font-face {\n font-family: \"Odudo\";\n font-weight: normal;\n font-display: swap;\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.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://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n format(\"woff2\"),\n url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n format(\"woff\");\n}"; // Try to load MUI dynamically, but don't fail if it's not installed
80
-
81
- let createTheme = null;
82
- let MuiThemeProvider = null;
83
-
84
- try {
85
- const mui = require("@mui/material/styles");
86
-
87
- createTheme = mui.createTheme;
88
- MuiThemeProvider = mui.ThemeProvider;
89
- } catch (e) {// MUI not installed, that's fine
90
- // console.log("MUI not detected - using lightweight theme mode");
91
- } // Try to load styled-components, but don't fail if it's not installed
92
-
93
79
 
94
80
  let StyledThemeProvider = null;
95
81
 
@@ -119,188 +105,8 @@ const darkThemeConfig = _objectSpread({
119
105
  icons: icons["default"],
120
106
  palette: colors.darkPalette
121
107
  }, mainTheme); // MUI themes (only created if MUI is available)
122
-
123
- const muiThemeConfig = {
124
- typography: {
125
- fontFamily: "Odudo, Arial"
126
- },
127
- components: {
128
- MuiPopover: {
129
- defaultProps: {
130
- BackdropProps: {
131
- sx: {
132
- backgroundColor: "transparent",
133
- backdropFilter: "none"
134
- }
135
- }
136
- }
137
- },
138
- MuiBackdrop: {
139
- styleOverrides: {
140
- root: {
141
- backgroundColor: "".concat(colors["default"].grey6, "70"),
142
- backdropFilter: "blur(4px)"
143
- }
144
- }
145
- },
146
- MuiSvgIcon: {
147
- styleOverrides: {
148
- root: {
149
- color: colors["default"].notBlack
150
- }
151
- }
152
- },
153
- MuiFilledInput: {
154
- styleOverrides: {
155
- root: {
156
- color: colors["default"].notBlack,
157
- backgroundColor: colors["default"].grey2,
158
- "& textarea": {
159
- color: colors["default"].notBlack
160
- },
161
- ":hover": {
162
- backgroundColor: colors["default"].grey2
163
- },
164
- ":before": {
165
- borderColor: colors["default"].notBlack
166
- },
167
- ":hover:before": {
168
- borderColor: "".concat(colors["default"].notBlack, " !important")
169
- }
170
- }
171
- }
172
- },
173
- MuiInput: {
174
- styleOverrides: {
175
- root: {
176
- color: colors["default"].notBlack,
177
- borderColor: colors["default"].notBlack,
178
- ":before": {
179
- borderColor: colors["default"].notBlack
180
- },
181
- ":hover:before": {
182
- borderColor: "".concat(colors["default"].notBlack, " !important")
183
- }
184
- }
185
- }
186
- },
187
- MuiInputLabel: {
188
- styleOverrides: {
189
- root: {
190
- color: colors["default"].notBlack
191
- }
192
- }
193
- },
194
- MuiTypography: {
195
- styleOverrides: {
196
- root: {
197
- color: colors["default"].notBlack
198
- }
199
- }
200
- },
201
- MuiButton: {
202
- styleOverrides: {
203
- root: {
204
- borderRadius: "30px",
205
- fontWeight: "600",
206
- letterSpacing: "0.05rem",
207
- textTransform: "capitalize"
208
- }
209
- },
210
- variants: [{
211
- props: {
212
- variant: "outlined"
213
- },
214
- style: {
215
- borderWidth: "2px",
216
- "&:hover": {
217
- borderWidth: "2px"
218
- }
219
- }
220
- }]
221
- },
222
- MuiCssBaseline: {
223
- styleOverrides: fonts
224
- }
225
- }
226
- };
227
- const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
228
- mode: "light",
229
- colors: colors.lightColors,
230
- icons: icons["default"],
231
- palette: colors.lightPalette
232
- })) : lightThemeConfig;
233
- const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
234
- components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
235
- MuiTypography: {
236
- styleOverrides: {
237
- root: {
238
- color: colors["default"].white
239
- }
240
- }
241
- },
242
- MuiFilledInput: {
243
- styleOverrides: {
244
- root: {
245
- color: colors["default"].white,
246
- backgroundColor: colors["default"].grey7,
247
- "& textarea": {
248
- color: colors["default"].white
249
- },
250
- ":hover": {
251
- backgroundColor: colors["default"].grey7
252
- },
253
- ":before": {
254
- borderColor: colors["default"].waxwing
255
- },
256
- ":hover:before": {
257
- borderColor: "".concat(colors["default"].white, " !important")
258
- }
259
- }
260
- }
261
- },
262
- MuiInput: {
263
- styleOverrides: {
264
- root: {
265
- color: colors["default"].white,
266
- borderColor: colors["default"].white,
267
- ":before": {
268
- borderColor: colors["default"].waxwing
269
- },
270
- ":hover:before": {
271
- borderColor: "".concat(colors["default"].white, " !important")
272
- }
273
- }
274
- }
275
- },
276
- MuiInputLabel: {
277
- styleOverrides: {
278
- root: {
279
- color: colors["default"].white
280
- }
281
- }
282
- },
283
- MuiSvgIcon: {
284
- styleOverrides: {
285
- root: {
286
- color: colors["default"].white
287
- }
288
- }
289
- },
290
- MuiBackdrop: {
291
- styleOverrides: {
292
- root: {
293
- backgroundColor: "".concat(colors["default"].grey5, "70"),
294
- backdropFilter: "blur(4px)"
295
- }
296
- }
297
- }
298
- }),
299
- mode: "dark",
300
- colors: colors.darkColors,
301
- icons: icons["default"],
302
- palette: colors.darkPalette
303
- })) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
108
+ const theme = lightThemeConfig;
109
+ const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
304
110
 
305
111
  const BlerpThemeContext = /*#__PURE__*/React.createContext(null);
306
112
  const useBlerpTheme = () => {
@@ -314,7 +120,7 @@ const useBlerpTheme = () => {
314
120
  };
315
121
  /**
316
122
  * BlerpTheme - Main theme provider
317
- *
123
+ *
318
124
  * FIXED: Now accepts and passes through customColors to NewThemeProvider
319
125
  * This allows ExtensionTheme and other consumers to override extension colors
320
126
  */
@@ -341,9 +147,7 @@ const BlerpTheme = _ref => {
341
147
  theme: themeValue
342
148
  }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
343
149
 
344
- const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React__default["default"].createElement(MuiThemeProvider, {
345
- theme: currentTheme
346
- }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
150
+ const withMuiTheme = withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
347
151
  // This ensures neo-components get the extension color overrides
348
152
 
349
153
  return /*#__PURE__*/React__default["default"].createElement(ThemeProvider.ThemeProvider, {
@@ -357,7 +161,6 @@ var BlerpTheme$1 = BlerpTheme; // Export fonts for manual injection if needed
357
161
  exports.darkTheme = darkTheme;
358
162
  exports.darkThemeConfig = darkThemeConfig;
359
163
  exports["default"] = BlerpTheme$1;
360
- exports.fonts = fonts;
361
164
  exports.lightThemeConfig = lightThemeConfig;
362
165
  exports.theme = theme;
363
166
  exports.useBlerpTheme = useBlerpTheme;
@@ -111,3 +111,4 @@ const Toggle = _ref2 => {
111
111
  };
112
112
 
113
113
  exports.Toggle = Toggle;
114
+ exports["default"] = Toggle;
@@ -66,7 +66,7 @@ const UserCard = _ref => {
66
66
  flex: 1,
67
67
  marginLeft: "20px"
68
68
  }
69
- }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
69
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
70
70
  sx: {
71
71
  fontSize: "18px",
72
72
  fontWeight: "300",
@@ -94,12 +94,12 @@ const UserCard = _ref => {
94
94
  cursor: "pointer"
95
95
  },
96
96
  onClick: onFollowerClick
97
- }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
97
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
98
98
  sx: {
99
99
  fontSize: "14px",
100
100
  fontWeight: "400"
101
101
  }
102
- }, followerCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
102
+ }, followerCount), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
103
103
  sx: {
104
104
  fontSize: "12px",
105
105
  fontWeight: "300",
@@ -111,12 +111,12 @@ const UserCard = _ref => {
111
111
  cursor: "pointer"
112
112
  },
113
113
  onClick: onCreatedClick
114
- }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
114
+ }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
115
115
  sx: {
116
116
  fontSize: "14px",
117
117
  fontWeight: "400"
118
118
  }
119
- }, createdCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
119
+ }, createdCount), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
120
120
  sx: {
121
121
  fontSize: "12px",
122
122
  fontWeight: "300",
@@ -2,107 +2,12 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var React = require('react');
7
- var ScreenSizeHook = require('../ScreenSizeHook.js');
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');
5
+ // TODO: If this component is needed, import dependencies directly (not from ../index)
12
6
 
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
-
18
- 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; }
19
-
20
- 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; }
21
-
22
- const UserLibraryHeader = _ref => {
23
- let {
24
- sx,
25
- tabs,
26
- tabSelection,
27
- setTabSelection,
28
- setShowSearch,
29
- setSearchTerm,
30
- searchTerm,
31
- setActiveBoard,
32
- hideSearch,
33
- setSort,
34
- sort,
35
- hideLayoutButtons
36
- } = _ref;
37
- const size = ScreenSizeHook.useWindowSize();
38
- return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
39
- sx: _objectSpread({
40
- backgroundColor: "grey2.main",
41
- position: "sticky",
42
- top: size.width >= 1000 ? "80px" : "110px",
43
- zIndex: "5"
44
- }, sx)
45
- }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
46
- direction: "row",
47
- style: {
48
- padding: "20px 10px",
49
- maxWidth: "1300px",
50
- margin: "0 auto",
51
- width: "95%"
52
- }
53
- }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
54
- direction: "row",
55
- width: "100%",
56
- justifyContent: size.width <= 675 ? "center" : "space-between",
57
- alignItems: "center",
58
- flexWrap: "wrap"
59
- }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
60
- direction: "row",
61
- flexWrap: "inherit"
62
- }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(Button.Button, {
63
- key: "tab-".concat(tab),
64
- onClick: () => {
65
- setActiveBoard(null);
66
-
67
- if (tabSelection.includes(tab)) {
68
- let newTabs = tabSelection.filter(item => item !== tab);
69
- setTabSelection(newTabs);
70
- } else {
71
- setTabSelection([...tabSelection, tab]);
72
- }
73
- },
74
- variant: tabSelection.includes(tab) ? "contained" : "outlined",
75
- size: "small",
76
- endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default["default"].createElement("svg", {
77
- width: "18",
78
- height: "18",
79
- viewBox: "0 0 24 24",
80
- fill: "currentColor"
81
- }, /*#__PURE__*/React__default["default"].createElement("path", {
82
- d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
83
- })),
84
- sx: {
85
- fontWeight: "normal",
86
- marginRight: "10px",
87
- marginBottom: "10px",
88
- backgroundColor: tabSelection.includes(tab) && "grey4.main"
89
- },
90
- color: tabSelection.includes(tab) ? "grey3" : "notBlack",
91
- disableElevation: true
92
- }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls["default"], {
93
- currentSort: sort,
94
- setActiveBoard: setActiveBoard,
95
- setSort: value => {
96
- setSort(value); // refetch({ variables: options });
97
- },
98
- searchTerm: searchTerm,
99
- hideSearch: hideSearch,
100
- setSearchTerm: setSearchTerm,
101
- setShowSearch: setShowSearch,
102
- hideLayoutButtons: hideLayoutButtons
103
- }))));
7
+ const UserProfileHeader = () => {
8
+ return null;
104
9
  };
105
10
 
106
- var UserLibraryHeader$1 = UserLibraryHeader;
11
+ var UserProfileHeader$1 = UserProfileHeader;
107
12
 
108
- exports["default"] = UserLibraryHeader$1;
13
+ exports["default"] = UserProfileHeader$1;