@blerp/design 1.4.6 → 1.4.7

package/dist/esm/Dropdown.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { Button } from './neo-components/Button.js';
-import { Typography } from './neo-components/Text.js';
+import { Text } from './neo-components/Text.js';
 import { Stack } from './neo-components/Stack.js';
 import { Menu, MenuItem } from './neo-components/Navigation.js';
 
@@ -149,7 +149,7 @@ const NewDropdown = _ref2 => {
         backgroundColor: "rgba(250, 250, 250, 1)"
       }
     }, buttonStyle)
-  }, buttonLabel && /*#__PURE__*/React.createElement(Typography, {
+  }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     fontSize: "11px",
     color: "whiteOverride.main",
@@ -175,7 +175,7 @@ const NewDropdown = _ref2 => {
     gap: 1,
     overflow: "hidden",
     flex: 1
-  }, startIcon, /*#__PURE__*/React.createElement(Typography, {
+  }, startIcon, /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     fontSize: "14px",
     color: "darkscale2.main",
@@ -218,7 +218,7 @@ const NewDropdown = _ref2 => {
     mr: 1,
     alignItems: "center",
     justifyContent: "center"
-  }, option.startImageIcon), /*#__PURE__*/React.createElement(Typography, {
+  }, option.startImageIcon), /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     className: "dropdown-item-text",
     sx: {
@@ -305,7 +305,7 @@ const Dropdown = _ref3 => {
   }, startIcon, /*#__PURE__*/React.createElement(Stack, {
     alignItems: "flex-start",
     overflow: "hidden"
-  }, buttonLabel && /*#__PURE__*/React.createElement(Typography, {
+  }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     fontSize: "10px",
     color: "grey4.main",
@@ -315,7 +315,7 @@ const Dropdown = _ref3 => {
       textTransform: "uppercase",
       marginBottom: "-2px"
     }
-  }, buttonLabel), /*#__PURE__*/React.createElement(Typography, {
+  }, buttonLabel), /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     fontSize: "14px",
     color: "grey5.main",
@@ -358,7 +358,7 @@ const Dropdown = _ref3 => {
     mr: 1,
     alignItems: "center",
     justifyContent: "center"
-  }, option.startImageIcon), /*#__PURE__*/React.createElement(Typography, {
+  }, option.startImageIcon), /*#__PURE__*/React.createElement(Text, {
     noWrap: true,
     className: "dropdown-item-text",
     sx: {

package/dist/esm/GroupCard.js

@@ -2,7 +2,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState } from 'react';
 import { AddedToIcons, FavoriteIconWithCounter } from './NewBlerp.js';
 import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
+import { Text } from './neo-components/Text.js';
 
 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; }
 
@@ -117,13 +117,13 @@ const GroupCard = _ref2 => {
     onMouseLeave: () => setHovering(false)
   }, /*#__PURE__*/React.createElement(Stack, {
     height: "100%"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       color: "grey5.main",
       fontSize: "12px",
       fontWeight: "300"
     }
-  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React.createElement(Typography, {
+  }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React.createElement(Text, {
     sx: {
       whiteSpace: "nowrap",
       overflowX: "hidden",

package/dist/esm/ImageUpload.js

@@ -6,7 +6,7 @@ import ImageEditor from './ImageEditor.js';
 import { useWindowSize } from './ScreenSizeHook.js';
 import { useBlerpTheme } from './Theme.js';
 import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
+import { Text } from './neo-components/Text.js';
 import { Box } from './neo-components/Box.js';
 import { Button } from './neo-components/Button.js';
 
@@ -121,13 +121,13 @@ const ImageUploadModal = _ref2 => {
     }
   }), /*#__PURE__*/React.createElement(Stack, {
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "32px"
     }
-  }, title), /*#__PURE__*/React.createElement(Typography, {
+  }, title), /*#__PURE__*/React.createElement(Text, {
     color: "grey4"
-  }, "Adjust your image below."), /*#__PURE__*/React.createElement(Typography, {
+  }, "Adjust your image below."), /*#__PURE__*/React.createElement(Text, {
     color: "grey4"
   }, sizeInfo)), /*#__PURE__*/React.createElement(Stack, {
     sx: {
@@ -172,7 +172,7 @@ const ImageUploadModal = _ref2 => {
     sx: {
       color: "white"
     }
-  }) : /*#__PURE__*/React.createElement(Typography, {
+  }) : /*#__PURE__*/React.createElement(Text, {
     sx: {
       textAlign: "center",
       width: "80%"

package/dist/esm/NewBlerp.js

@@ -1,10 +1,10 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useState, useRef } from 'react';
 import { UsernameWithPopout } from './UsernameWithPopout.js';
+import { DiamondIcon, ChannelPointsIcon, TwitchBitIcon, WalkonIcon } from './Icons/Icons.js';
 import { Box } from './neo-components/Box.js';
 import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
-import { DiamondIcon, ChannelPointsIcon, TwitchBitIcon, WalkonIcon } from './Icons/Icons.js';
+import { Text } from './neo-components/Text.js';
 import { Tooltip } from './neo-components/Misc.js';
 import { Button } from './neo-components/Button.js';
 
@@ -254,7 +254,7 @@ const FavoriteIconWithCounter = _ref10 => {
       opacity: 0.5,
       color: "#ffffff"
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "400"
@@ -325,7 +325,7 @@ const RatingInfoItem = _ref12 => {
   } = _ref12;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipText
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "9px",
       fontWeight: "600",
@@ -451,7 +451,7 @@ const ReportedWarning = _ref14 => {
         sx: {
           marginBottom: "20px"
         }
-      }), /*#__PURE__*/React.createElement(Typography, {
+      }), /*#__PURE__*/React.createElement(Text, {
         sx: {
           fontSize: "18px",
           fontWeight: "600",
@@ -473,14 +473,14 @@ const ReportedWarning = _ref14 => {
       sx: {
         marginBottom: "20px"
       }
-    }), /*#__PURE__*/React.createElement(Typography, {
+    }), /*#__PURE__*/React.createElement(Text, {
       sx: {
         fontSize: "18px",
         fontWeight: "600",
         color: "white.override",
         marginBottom: "10px"
       }
-    }, "Hold Up"), /*#__PURE__*/React.createElement(Typography, {
+    }, "Hold Up"), /*#__PURE__*/React.createElement(Text, {
       sx: {
         fontSize: "14px",
         fontWeight: "400",
@@ -730,7 +730,7 @@ const NewBlerp = _ref16 => {
         alignItems: "center",
         justifyContent: "center"
       }
-    }, /*#__PURE__*/React.createElement(LockIcon, null), /*#__PURE__*/React.createElement(Typography, null, "Private Blerp"))));
+    }, /*#__PURE__*/React.createElement(LockIcon, null), /*#__PURE__*/React.createElement(Text, null, "Private Blerp"))));
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
@@ -822,7 +822,7 @@ const NewBlerp = _ref16 => {
     style: {
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     ref: titleRef,
     sx: {
       fontSize: "16px",
@@ -916,7 +916,7 @@ const NewBlerp = _ref16 => {
     onUsernameClick: onUsernameClick,
     user: bite === null || bite === void 0 ? void 0 : bite.ownerObject,
     collapsed: false
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontWeight: "300",
       fontSize: "12px",

package/dist/esm/NewCollectionModal.js

@@ -3,12 +3,12 @@ import React, { useState, cloneElement, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import ImageUpload from './ImageUpload.js';
 import { useWindowSize } from './ScreenSizeHook.js';
-import { Button } from './neo-components/Button.js';
-import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
-import { TextField } from './neo-components/Input.js';
 import { Dropdown } from './Dropdown.js';
 import { Toggle } from './Toggle.js';
+import { Button } from './neo-components/Button.js';
+import { Stack } from './neo-components/Stack.js';
+import { Text } from './neo-components/Text.js';
+import { Input } from './neo-components/Input.js';
 
 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; }
 
@@ -178,7 +178,7 @@ const NewCollectionModal = _ref4 => {
     }
   }, /*#__PURE__*/React.createElement(Icon, {
     path: paths.close
-  })), /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement(Text, {
     fontSize: "28px",
     fontWeight: "700",
     fontColor: COLORS.textMain,
@@ -218,7 +218,7 @@ const NewCollectionModal = _ref4 => {
     style: {
       color: COLORS.textMuted
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
@@ -230,7 +230,7 @@ const NewCollectionModal = _ref4 => {
       flex: 1,
       width: "100%"
     }
-  }, /*#__PURE__*/React.createElement(TextField, {
+  }, /*#__PURE__*/React.createElement(Input, {
     label: "Name",
     value: titleInput,
     onChange: e => setTitleInput(e.target.value),
@@ -247,7 +247,7 @@ const NewCollectionModal = _ref4 => {
         backgroundColor: COLORS.bgInput
       }
     }
-  }), /*#__PURE__*/React.createElement(TextField, {
+  }), /*#__PURE__*/React.createElement(Input, {
     label: "Description",
     value: descriptionInput,
     onChange: e => setDescriptionInput(e.target.value),
@@ -270,7 +270,7 @@ const NewCollectionModal = _ref4 => {
     spacing: 2,
     justifyContent: "space-between",
     flexWrap: "wrap"
-  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
@@ -292,7 +292,7 @@ const NewCollectionModal = _ref4 => {
     }, {
       name: "UNLISTED"
     }]
-  })), isAdmin && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+  })), isAdmin && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
@@ -301,13 +301,13 @@ const NewCollectionModal = _ref4 => {
   }, "PREMIUM"), /*#__PURE__*/React.createElement(Toggle, {
     checked: collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium,
     onClick: () => handleChangePremium(!(collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium))
-  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+  })), (collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : collectionToBeEdited.isPremium) && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     fontColor: COLORS.textMuted,
     sx: {
       mb: 1
     }
-  }, "PRICE"), /*#__PURE__*/React.createElement(TextField, {
+  }, "PRICE"), /*#__PURE__*/React.createElement(Input, {
     value: price,
     onChange: e => setPrice(e.target.value),
     size: "small",

package/dist/esm/Theme.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useMemo, useContext, createContext } from 'react';
 import icons from './icons.js';
-import colors, { lightColors, lightPalette, darkColors, darkPalette } from './colors.js';
+import { lightColors, lightPalette, darkColors, darkPalette } from './colors.js';
 import { SnackbarProvider } from './SnackbarContextProvider.js';
 import { ThemeProvider } from './neo-components/ThemeProvider.js';
 
@@ -67,20 +67,6 @@ const mainTheme = {
   bitsFourIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
   bitsFiveIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
 };
-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
-
-let createTheme = null;
-let MuiThemeProvider = null;
-
-try {
-  const mui = require("@mui/material/styles");
-
-  createTheme = mui.createTheme;
-  MuiThemeProvider = mui.ThemeProvider;
-} catch (e) {// MUI not installed, that's fine
-  // console.log("MUI not detected - using lightweight theme mode");
-} // Try to load styled-components, but don't fail if it's not installed
-
 
 let StyledThemeProvider = null;
 
@@ -110,188 +96,8 @@ const darkThemeConfig = _objectSpread({
   icons: icons,
   palette: darkPalette
 }, mainTheme); // MUI themes (only created if MUI is available)
-
-const muiThemeConfig = {
-  typography: {
-    fontFamily: "Odudo, Arial"
-  },
-  components: {
-    MuiPopover: {
-      defaultProps: {
-        BackdropProps: {
-          sx: {
-            backgroundColor: "transparent",
-            backdropFilter: "none"
-          }
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors.grey6, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        root: {
-          color: colors.notBlack
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          color: colors.notBlack,
-          backgroundColor: colors.grey2,
-          "& textarea": {
-            color: colors.notBlack
-          },
-          ":hover": {
-            backgroundColor: colors.grey2
-          },
-          ":before": {
-            borderColor: colors.notBlack
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.notBlack, " !important")
-          }
-        }
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: colors.notBlack,
-          borderColor: colors.notBlack,
-          ":before": {
-            borderColor: colors.notBlack
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.notBlack, " !important")
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors.notBlack
-        }
-      }
-    },
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: colors.notBlack
-        }
-      }
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: "30px",
-          fontWeight: "600",
-          letterSpacing: "0.05rem",
-          textTransform: "capitalize"
-        }
-      },
-      variants: [{
-        props: {
-          variant: "outlined"
-        },
-        style: {
-          borderWidth: "2px",
-          "&:hover": {
-            borderWidth: "2px"
-          }
-        }
-      }]
-    },
-    MuiCssBaseline: {
-      styleOverrides: fonts
-    }
-  }
-};
-const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  mode: "light",
-  colors: lightColors,
-  icons: icons,
-  palette: lightPalette
-})) : lightThemeConfig;
-const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
-  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          color: colors.white,
-          backgroundColor: colors.grey7,
-          "& textarea": {
-            color: colors.white
-          },
-          ":hover": {
-            backgroundColor: colors.grey7
-          },
-          ":before": {
-            borderColor: colors.waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.white, " !important")
-          }
-        }
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: colors.white,
-          borderColor: colors.white,
-          ":before": {
-            borderColor: colors.waxwing
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors.white, " !important")
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        root: {
-          color: colors.white
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors.grey5, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    }
-  }),
-  mode: "dark",
-  colors: darkColors,
-  icons: icons,
-  palette: darkPalette
-})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+const theme = lightThemeConfig;
+const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
 
 const BlerpThemeContext = /*#__PURE__*/createContext(null);
 const useBlerpTheme = () => {
@@ -305,7 +111,7 @@ const useBlerpTheme = () => {
 };
 /**
  * BlerpTheme - Main theme provider
- * 
+ *
  * FIXED: Now accepts and passes through customColors to NewThemeProvider
  * This allows ExtensionTheme and other consumers to override extension colors
  */
@@ -332,9 +138,7 @@ const BlerpTheme = _ref => {
     theme: themeValue
   }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
 
-  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React.createElement(MuiThemeProvider, {
-    theme: currentTheme
-  }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  const withMuiTheme = withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
   // This ensures neo-components get the extension color overrides
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -345,4 +149,4 @@ const BlerpTheme = _ref => {
 
 var BlerpTheme$1 = BlerpTheme; // Export fonts for manual injection if needed
 
-export { darkTheme, darkThemeConfig, BlerpTheme$1 as default, fonts, lightThemeConfig, theme, useBlerpTheme };
+export { darkTheme, darkThemeConfig, BlerpTheme$1 as default, lightThemeConfig, theme, useBlerpTheme };

package/dist/esm/Toggle.js

@@ -101,4 +101,4 @@ const Toggle = _ref2 => {
   }))));
 };
 
-export { Toggle };
+export { Toggle, Toggle as default };

package/dist/esm/UserCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
+import { Text } from './neo-components/Text.js';
 
 const UserCard = _ref => {
   var _user$twitchChannelIn, _user$profileImage, _user$profileImage$or;
@@ -58,7 +58,7 @@ const UserCard = _ref => {
       flex: 1,
       marginLeft: "20px"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "18px",
       fontWeight: "300",
@@ -86,12 +86,12 @@ const UserCard = _ref => {
       cursor: "pointer"
     },
     onClick: onFollowerClick
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, followerCount), /*#__PURE__*/React.createElement(Typography, {
+  }, followerCount), /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
@@ -103,12 +103,12 @@ const UserCard = _ref => {
       cursor: "pointer"
     },
     onClick: onCreatedClick
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, createdCount), /*#__PURE__*/React.createElement(Typography, {
+  }, createdCount), /*#__PURE__*/React.createElement(Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",