@blerp/design 1.4.5 → 1.4.7

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 }; }
 
@@ -97,7 +76,6 @@ const mainTheme = {
   bitsFourIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Blue%20bits%20icon%20white%20stroke.svg",
   bitsFiveIcon: "https://cdn.blerp.com/blerp_products/Twitch/Assets/Variable%20Pricing/Red%20bits%20icon%20white%20stroke.svg"
 };
-const fonts = "@font-face {\n  font-family: \"Odudo\";\n  font-weight: normal;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: lighter;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 300;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Light.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Regular.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bolder;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/Odudo%20V1.3/WEB/odudo-semibold-webfont.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: bold;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}\n\n@font-face {\n  font-family: \"Odudo\";\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.eot\");\n  src: url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff2\")\n      format(\"woff2\"),\n    url(\"https://cdn.blerp.com/blerp-web-images/fonts/web/Odudo-Bold.woff\")\n      format(\"woff\");\n}"; // Try to load MUI dynamically, but don't fail if it's not installed
 
 let StyledThemeProvider = null;
 
@@ -115,7 +93,7 @@ const lightThemeConfig = _objectSpread({
   },
   mode: "light",
   colors: colors.lightColors,
-  icons: icons,
+  icons: icons["default"],
   palette: colors.lightPalette
 }, mainTheme);
 const darkThemeConfig = _objectSpread({
@@ -124,114 +102,9 @@ 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)
-
-({
-  typography: {
-    fontFamily: "Odudo, Arial"
-  },
-  components: {
-    MuiPopover: {
-      defaultProps: {
-        BackdropProps: {
-          sx: {
-            backgroundColor: "transparent",
-            backdropFilter: "none"
-          }
-        }
-      }
-    },
-    MuiBackdrop: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "".concat(colors["default"].grey6, "70"),
-          backdropFilter: "blur(4px)"
-        }
-      }
-    },
-    MuiSvgIcon: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].notBlack
-        }
-      }
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].notBlack,
-          backgroundColor: colors["default"].grey2,
-          "& textarea": {
-            color: colors["default"].notBlack
-          },
-          ":hover": {
-            backgroundColor: colors["default"].grey2
-          },
-          ":before": {
-            borderColor: colors["default"].notBlack
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors["default"].notBlack, " !important")
-          }
-        }
-      }
-    },
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].notBlack,
-          borderColor: colors["default"].notBlack,
-          ":before": {
-            borderColor: colors["default"].notBlack
-          },
-          ":hover:before": {
-            borderColor: "".concat(colors["default"].notBlack, " !important")
-          }
-        }
-      }
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].notBlack
-        }
-      }
-    },
-    MuiTypography: {
-      styleOverrides: {
-        root: {
-          color: colors["default"].notBlack
-        }
-      }
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          borderRadius: "30px",
-          fontWeight: "600",
-          letterSpacing: "0.05rem",
-          textTransform: "capitalize"
-        }
-      },
-      variants: [{
-        props: {
-          variant: "outlined"
-        },
-        style: {
-          borderWidth: "2px",
-          "&:hover": {
-            borderWidth: "2px"
-          }
-        }
-      }]
-    },
-    MuiCssBaseline: {
-      styleOverrides: fonts
-    }
-  }
-});
 const theme = lightThemeConfig;
 const darkTheme = darkThemeConfig; // Create a context for theme access (legacy - for styled-components)
 
@@ -262,7 +135,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
 
@@ -283,10 +156,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.fonts = fonts;
+exports["default"] = BlerpTheme$1;
 exports.lightThemeConfig = lightThemeConfig;
 exports.theme = theme;
 exports.useBlerpTheme = useBlerpTheme;

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,
@@ -111,3 +111,4 @@ const Toggle = _ref2 => {
 };
 
 exports.Toggle = Toggle;
+exports["default"] = Toggle;

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.Text, {
     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.Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, followerCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, followerCount), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     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.Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, createdCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+  }, createdCount), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     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;