@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/Theme.js

@@ -2,20 +2,146 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styles = require('@mui/material/styles');
-var styled = require('styled-components');
 var icons = require('./icons.js');
 var colors = require('./colors.js');
-var index = require('./index.js');
 var SnackbarContextProvider = require('./SnackbarContextProvider.js');
+var ThemeProvider = require('./neo-components/ThemeProvider.js');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/objectWithoutProperties');
+require('./neo-components/Box.js');
+require('./neo-components/Stack.js');
+require('./neo-components/Grid.js');
+require('./neo-components/Container.js');
+require('./neo-components/Text.js');
+require('./neo-components/Button.js');
+require('./neo-components/IconButton.js');
+require('./neo-components/Fab.js');
+require('./neo-components/ToggleButton.js');
+require('./neo-components/Input.js');
+require('./neo-components/FormControls.js');
+require('./neo-components/Autocomplete.js');
+require('./neo-components/Paper.js');
+require('./neo-components/Dialog.js');
+require('./neo-components/Navigation.js');
+require('./neo-components/BottomNavigation.js');
+require('./neo-components/Stepper.js');
+require('./neo-components/Misc.js');
+require('./neo-components/Layout.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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}";
-const theme = styles.createTheme({
+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; }
+
+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; }
+const mainTheme = {
+  pandaPink: "#FE295C",
+  pandaTeal: "#FE295C",
+  pandaNewTeal: "#49bea0",
+  darkTeal: "#058063",
+  whiteText: "#FFFFFF",
+  invertFlyoutBackground: "#170D11",
+  flyoutBackground: "#FFFFFF",
+  lighterBackground: "#F8F8F8",
+  defaultBackground: "#F3F3F3",
+  lighterGray: "#BDBDBB",
+  iconsActive: "#21000C",
+  iconsInActive: "#47463F",
+  headerText: "#21000C",
+  disabledText: "#BEBEBC",
+  lightGray: "#BEBEBC",
+  blastZone: "#E1E1E1",
+  orangeStatus: "#ff785b",
+  darkRedStatus: "#dd1243",
+  borderColor: "#bebeb9",
+  inputBorderColor: "#bebeb9",
+  togglerBackground: "#A04949",
+  secondaryText: "#47463F",
+  secondarySubtitleText: "#707070",
+  biteGray: "#707070",
+  secondaryGray: "#706F6B",
+  placeholderText: "#BFBFBA",
+  activeText: "#21000C",
+  primaryText: "#FFFFFF",
+  bodyText: "#21000C",
+  darkBackground: "#666",
+  statusColor: "#DD1243",
+  actionBackground: "#E6E6E6",
+  focusState: "#27AAFF",
+  focusOutline: "#3580B1",
+  darkBlue: "#3580B1",
+  headerColor: "#170D11",
+  headerBackground: "#47463F",
+  slidePurple: "#262261",
+  lightCloseButton: "https://cdn.blerp.com/blerp-public-images/twitch/white_close_button.svg",
+  closeIcon: "https://cdn.blerp.com/blerp-public-images/twitch/dark-close-icon.svg",
+  bitCostIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20costLightMode.svg",
+  whiteCheckMarkIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/checkmark.svg",
+  dgRightArrow: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Right.svg",
+  dgDownArrow: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Down.svg",
+  dgUpArrow: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Up.svg",
+  dgLeftArrow: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Arrows/Chevron_DarkGrey_Left.svg",
+  subStarIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/active%20subLightMode.svg",
+  subOneIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/greySubPlusBitsIconWhite.svg",
+  subTwoIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/PurpleSubPlusBitsIconWhite.svg",
+  subThreeIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/MintSubPlusBitsIconWhite.svg",
+  subFourIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/BlueSubPlusBitsIconWhite.svg",
+  subFiveIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/RedSubPlusBitsIconWhite.svg",
+  bitsOneIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/grey%20bits%20icon%20white%20stroke.svg",
+  bitsTwoIcon: "https://cdn.blerp.com/blerp-products/Twitch/Assets/Variable%20Pricing/Purple%20bits%20icon%20white%20stroke.svg",
+  bitsThreeIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Mint%20bits%20icon%20white%20stroke-2.svg",
+  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;
+
+try {
+  const styledComponents = require("styled-components");
+
+  StyledThemeProvider = styledComponents.ThemeProvider;
+} catch (e) {// styled-components not installed, that's fine
+} // Pure theme configs (no MUI dependency)
+
+
+const lightThemeConfig = _objectSpread({
+  typography: {
+    fontFamily: "Odudo, Arial"
+  },
+  mode: "light",
+  colors: colors.lightColors,
+  icons: icons,
+  palette: colors.lightPalette
+}, mainTheme);
+const darkThemeConfig = _objectSpread({
+  typography: {
+    fontFamily: "Odudo, Arial"
+  },
+  mode: "dark",
+  colors: colors.darkColors,
+  icons: icons,
+  palette: colors.darkPalette
+}, mainTheme); // MUI themes (only created if MUI is available)
+
+const muiThemeConfig = {
   typography: {
     fontFamily: "Odudo, Arial"
   },
@@ -33,7 +159,7 @@ const theme = styles.createTheme({
     MuiBackdrop: {
       styleOverrides: {
         root: {
-          backgroundColor: "".concat(colors['default'].grey6, "70"),
+          backgroundColor: "".concat(colors["default"].grey6, "70"),
           backdropFilter: "blur(4px)"
         }
       }
@@ -41,26 +167,26 @@ const theme = styles.createTheme({
     MuiSvgIcon: {
       styleOverrides: {
         root: {
-          color: colors['default'].notBlack
+          color: colors["default"].notBlack
         }
       }
     },
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          color: colors['default'].notBlack,
-          backgroundColor: colors['default'].grey2,
+          color: colors["default"].notBlack,
+          backgroundColor: colors["default"].grey2,
           "& textarea": {
-            color: colors['default'].notBlack
+            color: colors["default"].notBlack
           },
           ":hover": {
-            backgroundColor: colors['default'].grey2
+            backgroundColor: colors["default"].grey2
           },
           ":before": {
-            borderColor: colors['default'].notBlack
+            borderColor: colors["default"].notBlack
           },
           ":hover:before": {
-            borderColor: "".concat(colors['default'].notBlack, " !important")
+            borderColor: "".concat(colors["default"].notBlack, " !important")
           }
         }
       }
@@ -68,13 +194,13 @@ const theme = styles.createTheme({
     MuiInput: {
       styleOverrides: {
         root: {
-          color: colors['default'].notBlack,
-          borderColor: colors['default'].notBlack,
+          color: colors["default"].notBlack,
+          borderColor: colors["default"].notBlack,
           ":before": {
-            borderColor: colors['default'].notBlack
+            borderColor: colors["default"].notBlack
           },
           ":hover:before": {
-            borderColor: "".concat(colors['default'].notBlack, " !important")
+            borderColor: "".concat(colors["default"].notBlack, " !important")
           }
         }
       }
@@ -82,14 +208,14 @@ const theme = styles.createTheme({
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: colors['default'].notBlack
+          color: colors["default"].notBlack
         }
       }
     },
     MuiTypography: {
       styleOverrides: {
         root: {
-          color: colors['default'].notBlack
+          color: colors["default"].notBlack
         }
       }
     },
@@ -115,42 +241,41 @@ const theme = styles.createTheme({
       }]
     },
     MuiCssBaseline: {
-      styleOverrides: "\n                ".concat(fonts, "\n            ")
+      styleOverrides: fonts
     }
-  },
+  }
+};
+const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
   mode: "light",
   colors: colors.lightColors,
   icons: icons,
   palette: colors.lightPalette
-});
-const darkTheme = styles.createTheme({
-  typography: {
-    fontFamily: "Odudo, Arial"
-  },
-  components: {
+})) : lightThemeConfig;
+const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
+  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
     MuiTypography: {
       styleOverrides: {
         root: {
-          color: colors['default'].white
+          color: colors["default"].white
         }
       }
     },
     MuiFilledInput: {
       styleOverrides: {
         root: {
-          color: colors['default'].white,
-          backgroundColor: colors['default'].grey7,
+          color: colors["default"].white,
+          backgroundColor: colors["default"].grey7,
           "& textarea": {
-            color: colors['default'].white
+            color: colors["default"].white
           },
           ":hover": {
-            backgroundColor: colors['default'].grey7
+            backgroundColor: colors["default"].grey7
           },
           ":before": {
-            borderColor: colors['default'].waxwing
+            borderColor: colors["default"].waxwing
           },
           ":hover:before": {
-            borderColor: "".concat(colors['default'].white, " !important")
+            borderColor: "".concat(colors["default"].white, " !important")
           }
         }
       }
@@ -158,13 +283,13 @@ const darkTheme = styles.createTheme({
     MuiInput: {
       styleOverrides: {
         root: {
-          color: colors['default'].white,
-          borderColor: colors['default'].white,
+          color: colors["default"].white,
+          borderColor: colors["default"].white,
           ":before": {
-            borderColor: colors['default'].waxwing
+            borderColor: colors["default"].waxwing
           },
           ":hover:before": {
-            borderColor: "".concat(colors['default'].white, " !important")
+            borderColor: "".concat(colors["default"].white, " !important")
           }
         }
       }
@@ -172,84 +297,86 @@ const darkTheme = styles.createTheme({
     MuiInputLabel: {
       styleOverrides: {
         root: {
-          color: colors['default'].white
-        }
-      }
-    },
-    MuiPopover: {
-      defaultProps: {
-        BackdropProps: {
-          sx: {
-            backgroundColor: "transparent",
-            backdropFilter: "none"
-          }
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors['default'].grey5, "70"),
-          backdropFilter: "blur(4px)"
+          color: colors["default"].white
         }
       }
     },
     MuiSvgIcon: {
       styleOverrides: {
         root: {
-          color: colors['default'].white
+          color: colors["default"].white
         }
       }
     },
-    MuiButton: {
+    MuiBackdrop: {
       styleOverrides: {
         root: {
-          borderRadius: "30px",
-          fontWeight: "600",
-          letterSpacing: "0.05rem",
-          textTransform: "capitalize"
-        }
-      },
-      variants: [{
-        props: {
-          variant: "outlined"
-        },
-        style: {
-          borderWidth: "2px",
-          "&:hover": {
-            borderWidth: "2px"
-          }
+          backgroundColor: "".concat(colors["default"].grey5, "70"),
+          backdropFilter: "blur(4px)"
         }
-      }]
-    },
-    MuiCssBaseline: {
-      styleOverrides: "\n                ".concat(fonts, "\n            ")
+      }
     }
-  },
+  }),
   mode: "dark",
   colors: colors.darkColors,
   icons: icons,
   palette: colors.darkPalette
-});
+})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+
+const BlerpThemeContext = /*#__PURE__*/React.createContext(null);
+const useBlerpTheme = () => {
+  const context = React.useContext(BlerpThemeContext);
+
+  if (!context) {
+    throw new Error("useBlerpTheme must be used within BlerpTheme");
+  }
+
+  return context;
+};
+/**
+ * BlerpTheme - Main theme provider
+ * 
+ * FIXED: Now accepts and passes through customColors to NewThemeProvider
+ * This allows ExtensionTheme and other consumers to override extension colors
+ */
 
 const BlerpTheme = _ref => {
   let {
     mode,
+    customColors = {},
     children
   } = _ref;
-  const currentTheme = mode === "dark" ? darkTheme : theme; // ...
+  // Memoize theme selection
+  const currentTheme = React.useMemo(() => mode === "dark" ? darkTheme : theme, [mode]); // Memoize the combined theme value (for legacy styled-components)
 
-  return /*#__PURE__*/React__default['default'].createElement(styles.ThemeProvider, {
+  const themeValue = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, mainTheme), {}, {
+    icons,
+    mode: mode === "dark" ? "dark" : "light"
+  }, currentTheme), customColors), [mode, currentTheme, customColors]); // Build the inner content with SnackbarProvider
+
+  const innerContent = /*#__PURE__*/React__default["default"].createElement(BlerpThemeContext.Provider, {
+    value: themeValue
+  }, /*#__PURE__*/React__default["default"].createElement(SnackbarContextProvider.SnackbarProvider, null, children)); // Wrap with styled-components ThemeProvider if available
+
+  const withStyledTheme = StyledThemeProvider ? /*#__PURE__*/React__default["default"].createElement(StyledThemeProvider, {
+    theme: themeValue
+  }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
+
+  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React__default["default"].createElement(MuiThemeProvider, {
     theme: currentTheme
-  }, /*#__PURE__*/React__default['default'].createElement(styled.ThemeProvider, {
-    theme: { ...index.mainTheme,
-      icons: icons,
-      mode: mode === "dark" ? "dark" : "light",
-      ...currentTheme
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(SnackbarContextProvider.SnackbarProvider, null, children)));
+  }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  // This ensures neo-components get the extension color overrides
+
+  return /*#__PURE__*/React__default["default"].createElement(ThemeProvider.ThemeProvider, {
+    mode: mode === "dark" ? "dark" : "light",
+    customColors: customColors
+  }, withMuiTheme);
 };
 
 exports.darkTheme = darkTheme;
-exports.default = BlerpTheme;
+exports.darkThemeConfig = darkThemeConfig;
+exports["default"] = BlerpTheme;
+exports.fonts = fonts;
+exports.lightThemeConfig = lightThemeConfig;
 exports.theme = theme;
+exports.useBlerpTheme = useBlerpTheme;

package/dist/cjs/Toggle.js

@@ -2,56 +2,110 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var iconsMaterial = require('@mui/icons-material');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
 var EllipsisLoader = require('./EllipsisLoader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const Slider = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), props => props.theme.colors.grey5);
-const ToggleInput = styled__default['default'].input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider, props => props.disabled ? "#7b7b7b" : props.theme.colors.seafoam, Slider, Slider);
-const Switch = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    cursor: ", ";\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: ", ";\n    height: ", ";\n    border: ", ";\n    border-color: ", ";\n    border-radius: 18px;\n    opacity: ", ";\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.disabled ? "default" : "pointer", props => props.checked ? "38px" : "36px", props => props.checked ? "22px" : "20px", props => props.checked ? "0px" : "1px solid transparent", props => props.checked ? "transparent" : props.theme.colors.grey5, props => props.disabled ? "0.5" : "1", ToggleInput);
-const BlackSlider = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: transparent;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 14px;\n        width: 14px;\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        background-color: ", ";\n        border-radius: 50%;\n    }\n"])), props => props.theme.colors.notBlack);
-const BlackToggleInput = styled__default['default'].input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: transparent;\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n        /* -webkit-transform: translateY(2px);\n        -ms-transform: translateY(2px);\n        transform: translateY(2px); */\n    }\n"])), BlackSlider, BlackSlider, props => props.theme.colors.notBlack, BlackSlider, BlackSlider);
-styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 28px;\n    height: 14px;\n    border: 2px solid ", ";\n    border-radius: 14px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.theme.colors.notBlack, BlackToggleInput);
-const LoadingContainer = styled__default['default'].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default['default'](["\n    width: 50px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n"])));
-const Toggle = _ref => {
+
+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; }
+
+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; }
+/**
+ * Inline SVG replacement for CheckRounded
+ */
+
+const CheckIcon = _ref => {
+  let {
+    style
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    viewBox: "0 0 24 24",
+    style: _objectSpread({
+      fill: "currentColor"
+    }, style)
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+  }));
+};
+
+const Toggle = _ref2 => {
+  var _theme$colors, _theme$colors2, _theme$colors3, _theme$colors4, _theme$colors5;
+
   let {
     loading,
     checked,
     onClick,
-    disabled
-  } = _ref;
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader.EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch, {
-    checked: checked,
-    disabled: disabled,
+    disabled,
+    theme
+  } = _ref2;
+  // Coerce to boolean to avoid undefined issues
+  const isChecked = Boolean(checked);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, loading ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: "50px",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(EllipsisLoader.EllipsisLoader, null)) : /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "switch",
+    "aria-checked": isChecked,
+    tabIndex: disabled ? -1 : 0,
+    style: {
+      cursor: disabled ? "default" : "pointer",
+      position: "relative",
+      display: "inline-block",
+      placeSelf: "center",
+      width: isChecked ? "38px" : "36px",
+      height: isChecked ? "22px" : "20px",
+      border: isChecked ? "0px" : "1px solid",
+      borderColor: isChecked ? "transparent" : (theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.grey5) || "#ccc",
+      borderRadius: "18px",
+      opacity: disabled ? "0.5" : "1"
+    },
     onClick: e => {
       if (!disabled && onClick) {
+        e.preventDefault();
+        e.stopPropagation();
         onClick(e);
       }
+    },
+    onKeyDown: e => {
+      if (!disabled && onClick && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        onClick(e);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: isChecked ? disabled ? "#7b7b7b" : (theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.seafoam) || "#2ecc71" : "rgba(204, 204, 204, 0.2)",
+      transition: "background-color 0.2s ease-out",
+      borderRadius: "34px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
-    checked: checked,
-    disabled: disabled,
-    onChange: () => null,
-    type: "checkbox"
-  }), /*#__PURE__*/React__default['default'].createElement(Slider, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
-    sx: {
+  }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
+    style: {
       position: "absolute",
-      top: checked ? "3px" : "4px",
+      top: isChecked ? "3px" : "4px",
       left: "4px",
-      color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
-      fontSize: checked ? "16px" : "12px",
-      backgroundColor: checked ? "white.main" : "grey5.main",
+      color: isChecked ? disabled ? (theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.grey4) || "#999" : (theme === null || theme === void 0 ? void 0 : (_theme$colors4 = theme.colors) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.seafoam) || "#2ecc71" : "transparent",
+      width: isChecked ? "16px" : "12px",
+      height: isChecked ? "16px" : "12px",
+      backgroundColor: isChecked ? "#fff" : (theme === null || theme === void 0 ? void 0 : (_theme$colors5 = theme.colors) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.grey5) || "#ccc",
       borderRadius: "50%",
-      transition: "0.2s"
+      transition: "transform 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out, background-color 0.2s ease-out",
+      transform: isChecked ? "translateX(14px)" : "translateX(0)",
+      padding: isChecked ? "0px" : "2px",
+      boxSizing: "border-box"
     }
   }))));
 };