@blerp/design 1.4.5 → 1.4.6

package/dist/cjs/PurchaseModals/PremiumSubscriptionCheckoutModal.js

@@ -1,14 +1,16 @@
 'use strict';
 
-var index = require('../index.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
+var Stack = require('../neo-components/Stack.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const NeedToReplace = props => {
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       backgroundColor: "white.main",
       width: "900px",
@@ -36,4 +38,6 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-module.exports = NeedToReplace;
+var NeedToReplace$1 = NeedToReplace;
+
+exports["default"] = NeedToReplace$1;

package/dist/cjs/ReactionButtons.js

@@ -1,8 +1,11 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
-var index = require('./index.js');
 var Theme = require('./Theme.js');
+var Grid = require('./neo-components/Grid.js');
+var Misc = require('./neo-components/Misc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +29,7 @@ const ReactionButtons = _ref => {
   } = _ref;
   const theme = Theme.useBlerpTheme();
   const [hoveredReaction, setHoveredReaction] = React__default["default"].useState(null);
-  return /*#__PURE__*/React__default["default"].createElement(index.Grid, {
+  return /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(4, 1fr)",
     alignItems: "center",
@@ -37,12 +40,12 @@ const ReactionButtons = _ref => {
 
     const isActive = bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction);
     const isHovered = hoveredReaction === reaction;
-    return /*#__PURE__*/React__default["default"].createElement(index.Grid, {
+    return /*#__PURE__*/React__default["default"].createElement(Grid.Grid, {
       key: "".concat(reaction, "-button"),
       gridColumn: "span 1",
       display: "flex",
       justifyContent: "center"
-    }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+    }, /*#__PURE__*/React__default["default"].createElement(Misc.Tooltip, {
       title: reaction
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
@@ -75,4 +78,6 @@ const ReactionButtons = _ref => {
   }));
 };
 
-module.exports = ReactionButtons;
+var ReactionButtons$1 = ReactionButtons;
+
+exports["default"] = ReactionButtons$1;

package/dist/cjs/Theme.js

@@ -8,27 +8,6 @@ var icons = require('./icons.js');
 var colors = require('./colors.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 }; }
 
@@ -99,6 +78,19 @@ const mainTheme = {
 };
 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 {
@@ -115,7 +107,7 @@ const lightThemeConfig = _objectSpread({
   },
   mode: "light",
   colors: colors.lightColors,
-  icons: icons,
+  icons: icons["default"],
   palette: colors.lightPalette
 }, mainTheme);
 const darkThemeConfig = _objectSpread({
@@ -124,11 +116,11 @@ const darkThemeConfig = _objectSpread({
   },
   mode: "dark",
   colors: colors.darkColors,
-  icons: icons,
+  icons: icons["default"],
   palette: colors.darkPalette
 }, mainTheme); // MUI themes (only created if MUI is available)
 
-({
+const muiThemeConfig = {
   typography: {
     fontFamily: "Odudo, Arial"
   },
@@ -231,9 +223,84 @@ const darkThemeConfig = _objectSpread({
       styleOverrides: fonts
     }
   }
-});
-const theme = lightThemeConfig;
-const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
+};
+const theme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
+  mode: "light",
+  colors: colors.lightColors,
+  icons: icons["default"],
+  palette: colors.lightPalette
+})) : lightThemeConfig;
+const darkTheme = createTheme ? createTheme(_objectSpread(_objectSpread({}, muiThemeConfig), {}, {
+  components: _objectSpread(_objectSpread({}, muiThemeConfig.components), {}, {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: colors["default"].white
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          color: colors["default"].white,
+          backgroundColor: colors["default"].grey7,
+          "& textarea": {
+            color: colors["default"].white
+          },
+          ":hover": {
+            backgroundColor: colors["default"].grey7
+          },
+          ":before": {
+            borderColor: colors["default"].waxwing
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors["default"].white, " !important")
+          }
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          color: colors["default"].white,
+          borderColor: colors["default"].white,
+          ":before": {
+            borderColor: colors["default"].waxwing
+          },
+          ":hover:before": {
+            borderColor: "".concat(colors["default"].white, " !important")
+          }
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: colors["default"].white
+        }
+      }
+    },
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          color: colors["default"].white
+        }
+      }
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: "".concat(colors["default"].grey5, "70"),
+          backdropFilter: "blur(4px)"
+        }
+      }
+    }
+  }),
+  mode: "dark",
+  colors: colors.darkColors,
+  icons: icons["default"],
+  palette: colors.darkPalette
+})) : darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
 
 const BlerpThemeContext = /*#__PURE__*/React.createContext(null);
 const useBlerpTheme = () => {
@@ -247,7 +314,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
  */
@@ -262,7 +329,7 @@ const BlerpTheme = _ref => {
   const currentTheme = React.useMemo(() => mode === "dark" ? darkTheme : theme, [mode]); // Memoize the combined theme value (for legacy styled-components)
 
   const themeValue = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, mainTheme), {}, {
-    icons,
+    icons: icons["default"],
     mode: mode === "dark" ? "dark" : "light"
   }, currentTheme), customColors), [mode, currentTheme, customColors]); // Build the inner content with SnackbarProvider
 
@@ -274,7 +341,9 @@ const BlerpTheme = _ref => {
     theme: themeValue
   }, innerContent) : innerContent; // Wrap with MUI ThemeProvider if available
 
-  const withMuiTheme = withStyledTheme; // CRITICAL FIX: Pass customColors through to NewThemeProvider
+  const withMuiTheme = MuiThemeProvider ? /*#__PURE__*/React__default["default"].createElement(MuiThemeProvider, {
+    theme: currentTheme
+  }, 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, {
@@ -283,9 +352,11 @@ const BlerpTheme = _ref => {
   }, withMuiTheme);
 };
 
+var BlerpTheme$1 = BlerpTheme; // Export fonts for manual injection if needed
+
 exports.darkTheme = darkTheme;
 exports.darkThemeConfig = darkThemeConfig;
-exports["default"] = BlerpTheme;
+exports["default"] = BlerpTheme$1;
 exports.fonts = fonts;
 exports.lightThemeConfig = lightThemeConfig;
 exports.theme = theme;

package/dist/cjs/Toggle.js

@@ -52,7 +52,7 @@ const Toggle = _ref2 => {
       flexDirection: "column",
       justifyContent: "center"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(EllipsisLoader.EllipsisLoader, null)) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(EllipsisLoader["default"], null)) : /*#__PURE__*/React__default["default"].createElement("div", {
     role: "switch",
     "aria-checked": isChecked,
     tabIndex: disabled ? -1 : 0,

package/dist/cjs/UserCard.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('./index.js');
+var Stack = require('./neo-components/Stack.js');
+var Text = require('./neo-components/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,7 +25,7 @@ const UserCard = _ref => {
   });
   let followerCount = formatter.format((user === null || user === void 0 ? void 0 : (_user$twitchChannelIn = user.twitchChannelInfo) === null || _user$twitchChannelIn === void 0 ? void 0 : _user$twitchChannelIn.followerCount) || 0);
   let createdCount = formatter.format((user === null || user === void 0 ? void 0 : user.totalCreationCount) || 0);
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       backgroundColor: "grey4.main",
@@ -39,7 +40,7 @@ const UserCard = _ref => {
       border: "1px solid transparent",
       borderColor: collapsed ? (user === null || user === void 0 ? void 0 : user.affiliateJourneyStatuss) === "CHAMPION" ? "#FFFFFF" : (user === null || user === void 0 ? void 0 : user.affiliateJourneyStatuss) === "AFFILIATE" ? "#27AAFF" : "transparent" : "transparent"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       position: "relative"
     }
@@ -60,12 +61,12 @@ const UserCard = _ref => {
 
       e.target.src = "https://cdn.blerp.com/design/web/gamerblerpylarge.png";
     }
-  })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  })), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     sx: {
       flex: 1,
       marginLeft: "20px"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       fontSize: "18px",
       fontWeight: "300",
@@ -81,41 +82,41 @@ const UserCard = _ref => {
       }
     },
     onClick: onUsernameClick
-  }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, user === null || user === void 0 ? void 0 : user.username), !collapsed && /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     sx: {
       alignItems: "center",
       justifyContent: "space-around"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     alignItems: "center",
     sx: {
       cursor: "pointer"
     },
     onClick: onFollowerClick
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, followerCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, followerCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
       color: "grey7.main"
     }
-  }, "followers")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, "followers")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     alignItems: "center",
     sx: {
       cursor: "pointer"
     },
     onClick: onCreatedClick
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, createdCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, createdCount), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",

package/dist/cjs/UserPage/LibraryControls.js

@@ -1,9 +1,18 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var index = require('../index.js');
 var React = require('react');
 var ScreenSizeHook = require('../ScreenSizeHook.js');
+var Stack = require('../neo-components/Stack.js');
+var Text = require('../neo-components/Text.js');
+var Box = require('../neo-components/Box.js');
+var Input = require('../neo-components/Input.js');
+var Button = require('../neo-components/Button.js');
+var Navigation = require('../neo-components/Navigation.js');
+var IconButton = require('../neo-components/IconButton.js');
+var Misc = require('../neo-components/Misc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -159,19 +168,19 @@ const LibraryControls = _ref9 => {
 
   const greyColor = "#888"; // grey6.main equivalent
 
-  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center",
     justifyContent: "space-around",
     marginTop: size.width <= 675 && "20px"
   }, activeBoard && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconPerson, {
     color: iconColor
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, null, activeBoard === null || activeBoard === void 0 ? void 0 : (_activeBoard$ownerObj = activeBoard.ownerObject) === null || _activeBoard$ownerObj === void 0 ? void 0 : _activeBoard$ownerObj.username)), !hideSearch && /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, null, activeBoard === null || activeBoard === void 0 ? void 0 : (_activeBoard$ownerObj = activeBoard.ownerObject) === null || _activeBoard$ownerObj === void 0 ? void 0 : _activeBoard$ownerObj.username)), !hideSearch && /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: {
       display: "flex",
       alignItems: "flex-end"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input.TextField, {
     id: "user-library-search-input",
     placeholder: "Search User Library",
     variant: "standard",
@@ -203,12 +212,12 @@ const LibraryControls = _ref9 => {
         color: "grey6.main",
         borderColor: "grey6.main"
       },
-      startAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+      startAdornment: /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
         position: "center"
       }, /*#__PURE__*/React__default["default"].createElement(IconSearch, {
         color: greyColor
       })),
-      endAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+      endAdornment: /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
         position: "end"
       }, inputValue && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconClose, {
         color: greyColor,
@@ -217,13 +226,13 @@ const LibraryControls = _ref9 => {
           setInputValue("");
           setShowSearch(false);
         }
-      }), /*#__PURE__*/React__default["default"].createElement(index.Button, {
+      }), /*#__PURE__*/React__default["default"].createElement(Button.Button, {
         variant: "text",
         color: "notBlack",
         onClick: () => setShowSearch(true)
       }, "Search")))
     }
-  })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+  })), /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
     id: "library-controls-popover",
     open: openFilter,
     onClose: () => {
@@ -251,7 +260,7 @@ const LibraryControls = _ref9 => {
       vertical: "top",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     onClick: () => setSort("TITLE_ASC"),
     sx: {
@@ -262,10 +271,10 @@ const LibraryControls = _ref9 => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     margin: "0 15px",
     fontSize: "18px"
-  }, "Alphabetical")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, "Alphabetical")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     onClick: () => setSort("CREATEDAT_DESC"),
     sx: {
@@ -276,10 +285,10 @@ const LibraryControls = _ref9 => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     margin: "0 15px",
     fontSize: "18px"
-  }, "Newest")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, "Newest")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     onClick: () => setSort("CREATEDAT_ASC"),
     sx: {
@@ -290,25 +299,25 @@ const LibraryControls = _ref9 => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     margin: "0 15px",
     fontSize: "18px"
-  }, "Oldest"))), !hideLayoutButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, size.width >= 1000 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !activeBoard && /*#__PURE__*/React__default["default"].createElement(index.Button, {
+  }, "Oldest"))), !hideLayoutButtons && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, size.width >= 1000 ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !activeBoard && /*#__PURE__*/React__default["default"].createElement(Button.Button, {
     color: "notBlack",
     ref: filterRef,
     onClick: () => setFilterAnchor(filterRef.current)
-  }, /*#__PURE__*/React__default["default"].createElement(index.Text, null, "Sort"), /*#__PURE__*/React__default["default"].createElement(IconSort, {
+  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, null, "Sort"), /*#__PURE__*/React__default["default"].createElement(IconSort, {
     color: iconColor
-  })), /*#__PURE__*/React__default["default"].createElement(index.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
+  })), /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
     color: iconColor
-  })), /*#__PURE__*/React__default["default"].createElement(index.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
+  })), /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
     color: iconColor
-  }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
     ref: divRef,
     onClick: () => setAnchor(divRef.current)
   }, /*#__PURE__*/React__default["default"].createElement(IconMoreHoriz, {
     color: iconColor
-  })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
+  })), /*#__PURE__*/React__default["default"].createElement(Navigation.Popover, {
     id: "library-controls-popover",
     open: open,
     onClose: () => {
@@ -336,7 +345,7 @@ const LibraryControls = _ref9 => {
       vertical: "top",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -349,11 +358,11 @@ const LibraryControls = _ref9 => {
     }
   }, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
     color: iconColor
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     color: "notBlack.main",
     margin: "0 15px",
     fontSize: "18px"
-  }, "List View")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, "List View")), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -366,13 +375,13 @@ const LibraryControls = _ref9 => {
     }
   }, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
     color: iconColor
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     color: "notBlack.main",
     margin: "0 15px",
     fontSize: "18px"
-  }, "Grid View")), /*#__PURE__*/React__default["default"].createElement(index.Divider, {
+  }, "Grid View")), /*#__PURE__*/React__default["default"].createElement(Misc.Divider, {
     variant: "middle"
-  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     ref: filterRef,
     onClick: () => setFilterAnchor(filterRef.current),
     direction: "row",
@@ -386,11 +395,11 @@ const LibraryControls = _ref9 => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row"
   }, /*#__PURE__*/React__default["default"].createElement(IconSort, {
     color: iconColor
-  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
     fontSize: "18px",
     color: "notBlack.main",
     margin: "0 15px"
@@ -399,4 +408,6 @@ const LibraryControls = _ref9 => {
   }))))));
 };
 
-module.exports = LibraryControls;
+var LibraryControls$1 = LibraryControls;
+
+exports["default"] = LibraryControls$1;

package/dist/cjs/UserPage/UserLibraryHeader.js

@@ -1,10 +1,14 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var index = require('../index.js');
 var ScreenSizeHook = require('../ScreenSizeHook.js');
 var LibraryControls = require('./LibraryControls.js');
+var Box = require('../neo-components/Box.js');
+var Stack = require('../neo-components/Stack.js');
+var Button = require('../neo-components/Button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,14 +35,14 @@ const UserLibraryHeader = _ref => {
     hideLayoutButtons
   } = _ref;
   const size = ScreenSizeHook.useWindowSize();
-  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(Box.Box, {
     sx: _objectSpread({
       backgroundColor: "grey2.main",
       position: "sticky",
       top: size.width >= 1000 ? "80px" : "110px",
       zIndex: "5"
     }, sx)
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     style: {
       padding: "20px 10px",
@@ -46,16 +50,16 @@ const UserLibraryHeader = _ref => {
       margin: "0 auto",
       width: "95%"
     }
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     width: "100%",
     justifyContent: size.width <= 675 ? "center" : "space-between",
     alignItems: "center",
     flexWrap: "wrap"
-  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
     direction: "row",
     flexWrap: "inherit"
-  }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(index.Button, {
+  }, tabs === null || tabs === void 0 ? void 0 : tabs.map(tab => /*#__PURE__*/React__default["default"].createElement(Button.Button, {
     key: "tab-".concat(tab),
     onClick: () => {
       setActiveBoard(null);
@@ -85,7 +89,7 @@ const UserLibraryHeader = _ref => {
     },
     color: tabSelection.includes(tab) ? "grey3" : "notBlack",
     disableElevation: true
-  }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls, {
+  }, tab))), /*#__PURE__*/React__default["default"].createElement(LibraryControls["default"], {
     currentSort: sort,
     setActiveBoard: setActiveBoard,
     setSort: value => {
@@ -99,4 +103,6 @@ const UserLibraryHeader = _ref => {
   }))));
 };
 
-module.exports = UserLibraryHeader;
+var UserLibraryHeader$1 = UserLibraryHeader;
+
+exports["default"] = UserLibraryHeader$1;