@blerp/design 1.3.17 → 1.4.2

package/dist/esm/Theme.js

@@ -1,13 +1,138 @@
-import React from 'react';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
-import { ThemeProvider as ThemeProvider$1 } from 'styled-components';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useContext, useMemo, createContext } from 'react';
 import icons from './icons.js';
-import colors, { lightColors, lightPalette, darkColors, darkPalette } from './colors.js';
-import { mainTheme } from './index.js';
+import colors, { darkColors, darkPalette, lightColors, lightPalette } from './colors.js';
 import { SnackbarProvider } from './SnackbarContextProvider.js';
+import { ThemeProvider } from './neo-components/ThemeProvider.js';
+import '@babel/runtime/helpers/extends';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import './neo-components/Box.js';
+import './neo-components/Stack.js';
+import './neo-components/Grid.js';
+import './neo-components/Container.js';
+import './neo-components/Text.js';
+import './neo-components/Button.js';
+import './neo-components/IconButton.js';
+import './neo-components/Fab.js';
+import './neo-components/ToggleButton.js';
+import './neo-components/Input.js';
+import './neo-components/FormControls.js';
+import './neo-components/Autocomplete.js';
+import './neo-components/Paper.js';
+import './neo-components/Dialog.js';
+import './neo-components/Navigation.js';
+import './neo-components/BottomNavigation.js';
+import './neo-components/Stepper.js';
+import './neo-components/Misc.js';
+import './neo-components/Layout.js';
 
-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 = 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(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: lightColors,
+  icons: icons,
+  palette: lightPalette
+}, mainTheme);
+const darkThemeConfig = _objectSpread({
+  typography: {
+    fontFamily: "Odudo, Arial"
+  },
+  mode: "dark",
+  colors: darkColors,
+  icons: icons,
+  palette: darkPalette
+}, mainTheme); // MUI themes (only created if MUI is available)
+
+const muiThemeConfig = {
   typography: {
     fontFamily: "Odudo, Arial"
   },
@@ -107,19 +232,18 @@ const theme = createTheme({
       }]
     },
     MuiCssBaseline: {
-      styleOverrides: "\n                ".concat(fonts, "\n            ")
+      styleOverrides: fonts
     }
-  },
+  }
+};
+const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
   mode: "light",
   colors: lightColors,
   icons: icons,
   palette: lightPalette
-});
-const darkTheme = createTheme({
-  typography: {
-    fontFamily: "Odudo, Arial"
-  },
-  components: {
+})) : lightThemeConfig;
+const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
+  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
     MuiTypography: {
       styleOverrides: {
         root: {
@@ -168,24 +292,6 @@ const darkTheme = createTheme({
         }
       }
     },
-    MuiPopover: {
-      defaultProps: {
-        BackdropProps: {
-          sx: {
-            backgroundColor: "transparent",
-            backdropFilter: "none"
-          }
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors.grey5, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    },
     MuiSvgIcon: {
       styleOverrides: {
         root: {
@@ -193,54 +299,69 @@ const darkTheme = createTheme({
         }
       }
     },
-    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.grey5, "70"),
+          backdropFilter: "blur(4px)"
         }
-      }]
-    },
-    MuiCssBaseline: {
-      styleOverrides: "\n                ".concat(fonts, "\n            ")
+      }
     }
-  },
+  }),
   mode: "dark",
   colors: darkColors,
   icons: icons,
   palette: darkPalette
-});
+})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+
+const BlerpThemeContext = /*#__PURE__*/createContext(null);
+const useBlerpTheme = () => {
+  const context = 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 = useMemo(() => mode === "dark" ? darkTheme : theme, [mode]); // Memoize the combined theme value (for legacy styled-components)
 
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
+  const themeValue = 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.createElement(BlerpThemeContext.Provider, {
+    value: themeValue
+  }, /*#__PURE__*/React.createElement(SnackbarProvider, null, children)); // Wrap with styled-components ThemeProvider if available
+
+  const withStyledTheme = StyledThemeProvider ? /*#__PURE__*/React.createElement(StyledThemeProvider, {
+    theme: themeValue
+  }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
+
+  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React.createElement(MuiThemeProvider, {
     theme: currentTheme
-  }, /*#__PURE__*/React.createElement(ThemeProvider$1, {
-    theme: { ...mainTheme,
-      icons: icons,
-      mode: mode === "dark" ? "dark" : "light",
-      ...currentTheme
-    }
-  }, /*#__PURE__*/React.createElement(SnackbarProvider, null, children)));
+  }, withStyledTheme) : withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  // This ensures neo-components get the extension color overrides
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    mode: mode === "dark" ? "dark" : "light",
+    customColors: customColors
+  }, withMuiTheme);
 };
 
-export default BlerpTheme;
-export { darkTheme, theme };
+export { darkTheme, darkThemeConfig, BlerpTheme as default, fonts, lightThemeConfig, theme, useBlerpTheme };

package/dist/esm/Toggle.js

@@ -1,47 +1,102 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { CheckRounded } from '@mui/icons-material';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
-import styled from 'styled-components';
 import { EllipsisLoader } from './EllipsisLoader.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const Slider = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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(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.createElement("svg", {
+    viewBox: "0 0 24 24",
+    style: _objectSpread({
+      fill: "currentColor"
+    }, style)
+  }, /*#__PURE__*/React.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.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(LoadingContainer, null, /*#__PURE__*/React.createElement(EllipsisLoader, null)) : /*#__PURE__*/React.createElement(Switch, {
-    checked: checked,
-    disabled: disabled,
+    disabled,
+    theme
+  } = _ref2;
+  // Coerce to boolean to avoid undefined issues
+  const isChecked = Boolean(checked);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50px",
+      height: "100%",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  }, /*#__PURE__*/React.createElement(EllipsisLoader, null)) : /*#__PURE__*/React.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.createElement(ToggleInput, {
-    checked: checked,
-    disabled: disabled,
-    onChange: () => null,
-    type: "checkbox"
-  }), /*#__PURE__*/React.createElement(Slider, null, /*#__PURE__*/React.createElement(CheckRounded, {
-    sx: {
+  }, /*#__PURE__*/React.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.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"
     }
   }))));
 };

package/dist/esm/UserCard.js

@@ -1,9 +1,8 @@
-import { VerifiedRounded, DiamondRounded } from '@mui/icons-material';
 import React from 'react';
 import { Stack, Text } from './index.js';
 
 const UserCard = _ref => {
-  var _user$twitchChannelIn, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn2;
+  var _user$twitchChannelIn, _user$profileImage, _user$profileImage$or;
 
   let {
     user,
@@ -53,24 +52,6 @@ const UserCard = _ref => {
 
       e.target.src = "https://cdn.blerp.com/design/web/gamerblerpylarge.png";
     }
-  }), (user === null || user === void 0 ? void 0 : (_user$twitchChannelIn2 = user.twitchChannelInfo) === null || _user$twitchChannelIn2 === void 0 ? void 0 : _user$twitchChannelIn2.broadcasterType) === "partner" && /*#__PURE__*/React.createElement(VerifiedRounded, {
-    sx: {
-      position: "absolute",
-      bottom: collapsed ? "0" : "5px",
-      right: collapsed ? "0" : "5px",
-      fontSize: "17px",
-      backgroundColor: "grey4.main",
-      borderRadius: "50%"
-    }
-  }), (user === null || user === void 0 ? void 0 : user.premiumBlerpUserStatus) === "ACTIVE" && /*#__PURE__*/React.createElement(DiamondRounded, {
-    sx: {
-      position: "absolute",
-      bottom: collapsed ? "0" : "5px",
-      right: collapsed ? "0" : "5px",
-      fontSize: "17px",
-      backgroundColor: "grey4.main",
-      borderRadius: "50%"
-    }
   })), /*#__PURE__*/React.createElement(Stack, {
     sx: {
       flex: 1,