@blerp/design 1.3.16 → 1.4.1

package/dist/cjs/UserCard.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var iconsMaterial = require('@mui/icons-material');
 var React = require('react');
 var index = require('./index.js');
 
@@ -11,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const UserCard = _ref => {
-  var _user$twitchChannelIn, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn2;
+  var _user$twitchChannelIn, _user$profileImage, _user$profileImage$or;
 
   let {
     user,
@@ -25,7 +24,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(index.Stack, {
     direction: "row",
     sx: {
       backgroundColor: "grey4.main",
@@ -40,11 +39,11 @@ 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(index.Stack, {
     sx: {
       position: "relative"
     }
-  }, /*#__PURE__*/React__default['default'].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     style: {
       width: collapsed ? "49px" : "89px",
       height: collapsed ? "49px" : "89px",
@@ -61,30 +60,12 @@ 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__default['default'].createElement(iconsMaterial.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__default['default'].createElement(iconsMaterial.DiamondRounded, {
-    sx: {
-      position: "absolute",
-      bottom: collapsed ? "0" : "5px",
-      right: collapsed ? "0" : "5px",
-      fontSize: "17px",
-      backgroundColor: "grey4.main",
-      borderRadius: "50%"
-    }
-  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       flex: 1,
       marginLeft: "20px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "18px",
       fontWeight: "300",
@@ -100,41 +81,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(index.Stack, {
     direction: "row",
     sx: {
       alignItems: "center",
       justifyContent: "space-around"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     alignItems: "center",
     sx: {
       cursor: "pointer"
     },
     onClick: onFollowerClick
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, followerCount), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, followerCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",
       color: "grey7.main"
     }
-  }, "followers")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, "followers")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     alignItems: "center",
     sx: {
       cursor: "pointer"
     },
     onClick: onCreatedClick
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "14px",
       fontWeight: "400"
     }
-  }, createdCount), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, createdCount), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       fontSize: "12px",
       fontWeight: "300",

package/dist/cjs/UserPage/LibraryControls.js

@@ -1,34 +1,138 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var index = require('../index.js');
-var material = require('@mui/material');
 var React = require('react');
-require('@mui/icons-material/FilterAltRounded');
-var MenuRoundedIcon = require('@mui/icons-material/MenuRounded');
-var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
-require('@mui/icons-material/SettingsRounded');
-var styled = require('styled-components');
-var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
-var SortRoundedIcon = require('@mui/icons-material/SortRounded');
-var ChevronRightRoundedIcon = require('@mui/icons-material/ChevronRightRounded');
 var ScreenSizeHook = require('../ScreenSizeHook.js');
-var PersonRoundedIcon = require('@mui/icons-material/PersonRounded');
-var SearchRoundedIcon = require('@mui/icons-material/SearchRounded');
-var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 
 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);
-var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
-var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
-var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
-var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
-var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
-var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
-var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRoundedIcon);
-var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
 
-const LibraryControls = _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; }
+
+const IconPerson = _ref => {
+  let {
+    color = "currentColor"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
+  }));
+};
+
+const IconSearch = _ref2 => {
+  let {
+    color = "currentColor"
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  }));
+};
+
+const IconClose = _ref3 => {
+  let {
+    color = "currentColor",
+    onClick,
+    style
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color,
+    onClick: onClick,
+    style: _objectSpread({
+      cursor: "pointer"
+    }, style)
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+  }));
+};
+
+const IconMenu = _ref4 => {
+  let {
+    color = "currentColor"
+  } = _ref4;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+  }));
+};
+
+const IconGrid = _ref5 => {
+  let {
+    color = "currentColor"
+  } = _ref5;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z"
+  }));
+};
+
+const IconMoreHoriz = _ref6 => {
+  let {
+    color = "currentColor"
+  } = _ref6;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+  }));
+};
+
+const IconSort = _ref7 => {
+  let {
+    color = "currentColor"
+  } = _ref7;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z"
+  }));
+};
+
+const IconChevronRight = _ref8 => {
+  let {
+    color = "currentColor"
+  } = _ref8;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+  }));
+};
+
+const LibraryControls = _ref9 => {
   var _activeBoard$ownerObj;
 
   let {
@@ -40,8 +144,7 @@ const LibraryControls = _ref => {
     setShowSearch,
     setActiveBoard,
     hideLayoutButtons
-  } = _ref;
-  React.useContext(styled.ThemeContext);
+  } = _ref9;
   const size = ScreenSizeHook.useWindowSize();
   const [anchor, setAnchor] = React.useState(null);
   const [filterAnchor, setFilterAnchor] = React.useState(null);
@@ -50,22 +153,25 @@ const LibraryControls = _ref => {
   const [inputValue, setInputValue] = React.useState("");
   const open = Boolean(anchor);
   const openFilter = Boolean(filterAnchor);
-  let timeout = null;
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  let timeout = null; // Get theme color for icons (you may need to adjust based on your theme setup)
+
+  const iconColor = "#333"; // notBlack.main equivalent
+
+  const greyColor = "#888"; // grey6.main equivalent
+
+  return /*#__PURE__*/React__default["default"].createElement(index.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(PersonRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  }), /*#__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, {
+  }, 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, {
     sx: {
       display: "flex",
       alignItems: "flex-end"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Input, {
     id: "user-library-search-input",
     placeholder: "Search User Library",
     variant: "standard",
@@ -73,14 +179,12 @@ const LibraryControls = _ref => {
     value: inputValue,
     onChange: e => {
       setInputValue(e.target.value);
-      clearTimeout(timeout); // Make a new timeout set to go off in 1000ms (1 second)
-
+      clearTimeout(timeout);
       timeout = setTimeout(() => {
         setSearchTerm(e.target.value);
       }, 1000);
     },
     onKeyDown: e => {
-      // e.preventDefault();
       if (e.key === "Enter") {
         setShowSearch(true);
       }
@@ -99,32 +203,27 @@ const LibraryControls = _ref => {
         color: "grey6.main",
         borderColor: "grey6.main"
       },
-      startAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
-        position: "start"
-      }, /*#__PURE__*/React__default['default'].createElement(SearchRoundedIcon__default['default'], {
-        sx: {
-          color: "grey6.main"
-        }
+      startAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+        position: "center"
+      }, /*#__PURE__*/React__default["default"].createElement(IconSearch, {
+        color: greyColor
       })),
-      endAdornment: /*#__PURE__*/React__default['default'].createElement(material.InputAdornment, {
+      endAdornment: /*#__PURE__*/React__default["default"].createElement(index.Stack, {
         position: "end"
-      }, inputValue && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
-        sx: {
-          cursor: "pointer",
-          color: "grey6.main"
-        },
+      }, inputValue && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconClose, {
+        color: greyColor,
         onClick: () => {
           setSearchTerm("");
           setInputValue("");
           setShowSearch(false);
         }
-      }), /*#__PURE__*/React__default['default'].createElement(index.Button, {
+      }), /*#__PURE__*/React__default["default"].createElement(index.Button, {
         variant: "text",
         color: "notBlack",
         onClick: () => setShowSearch(true)
       }, "Search")))
     }
-  })), /*#__PURE__*/React__default['default'].createElement(index.Popover, {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
     id: "library-controls-popover",
     open: openFilter,
     onClose: () => {
@@ -152,7 +251,7 @@ const LibraryControls = _ref => {
       vertical: "top",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     onClick: () => setSort("TITLE_ASC"),
     sx: {
@@ -163,10 +262,10 @@ const LibraryControls = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     margin: "0 15px",
     fontSize: "18px"
-  }, "Alphabetical")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, "Alphabetical")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     onClick: () => setSort("CREATEDAT_DESC"),
     sx: {
@@ -177,10 +276,10 @@ const LibraryControls = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     margin: "0 15px",
     fontSize: "18px"
-  }, "Newest")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, "Newest")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     onClick: () => setSort("CREATEDAT_ASC"),
     sx: {
@@ -191,29 +290,25 @@ const LibraryControls = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     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(index.Button, {
     color: "notBlack",
     ref: filterRef,
     onClick: () => setFilterAnchor(filterRef.current)
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, null, "Sort"), /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], null)), /*#__PURE__*/React__default['default'].createElement(index.IconButton, null, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  })), /*#__PURE__*/React__default['default'].createElement(index.IconButton, null, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, null, "Sort"), /*#__PURE__*/React__default["default"].createElement(IconSort, {
+    color: iconColor
+  })), /*#__PURE__*/React__default["default"].createElement(index.IconButton, null, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
+    color: iconColor
+  })), /*#__PURE__*/React__default["default"].createElement(index.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, {
     ref: divRef,
     onClick: () => setAnchor(divRef.current)
-  }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  })), /*#__PURE__*/React__default['default'].createElement(index.Popover, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconMoreHoriz, {
+    color: iconColor
+  })), /*#__PURE__*/React__default["default"].createElement(index.Popover, {
     id: "library-controls-popover",
     open: open,
     onClose: () => {
@@ -241,7 +336,7 @@ const LibraryControls = _ref => {
       vertical: "top",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -252,15 +347,13 @@ const LibraryControls = _ref => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(MenuRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconMenu, {
+    color: iconColor
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     color: "notBlack.main",
     margin: "0 15px",
     fontSize: "18px"
-  }, "List View")), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, "List View")), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     sx: {
@@ -271,17 +364,15 @@ const LibraryControls = _ref => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(ViewModuleRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconGrid, {
+    color: iconColor
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     color: "notBlack.main",
     margin: "0 15px",
     fontSize: "18px"
-  }, "Grid View")), /*#__PURE__*/React__default['default'].createElement(index.Divider, {
+  }, "Grid View")), /*#__PURE__*/React__default["default"].createElement(index.Divider, {
     variant: "middle"
-  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     ref: filterRef,
     onClick: () => setFilterAnchor(filterRef.current),
     direction: "row",
@@ -295,20 +386,16 @@ const LibraryControls = _ref => {
         backgroundColor: "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row"
-  }, /*#__PURE__*/React__default['default'].createElement(SortRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconSort, {
+    color: iconColor
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: "18px",
     color: "notBlack.main",
     margin: "0 15px"
-  }, "Sort")), /*#__PURE__*/React__default['default'].createElement(ChevronRightRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.main"
-    }
+  }, "Sort")), /*#__PURE__*/React__default["default"].createElement(IconChevronRight, {
+    color: iconColor
   }))))));
 };
 

package/dist/cjs/UserPage/UserLibraryHeader.js

@@ -1,16 +1,20 @@
 'use strict';
 
-var iconsMaterial = require('@mui/icons-material');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
 var index = require('../index.js');
 var ScreenSizeHook = require('../ScreenSizeHook.js');
 var LibraryControls = require('./LibraryControls.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);
 
+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 UserLibraryHeader = _ref => {
   let {
     sx,
@@ -27,16 +31,14 @@ const UserLibraryHeader = _ref => {
     hideLayoutButtons
   } = _ref;
   const size = ScreenSizeHook.useWindowSize();
-  React.useContext(styled.ThemeContext);
-  return /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    sx: {
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: _objectSpread({
       backgroundColor: "grey2.main",
       position: "sticky",
       top: size.width >= 1000 ? "80px" : "110px",
-      zIndex: "5",
-      ...sx
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      zIndex: "5"
+    }, sx)
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     style: {
       padding: "20px 10px",
@@ -44,16 +46,16 @@ const UserLibraryHeader = _ref => {
       margin: "0 auto",
       width: "95%"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.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(index.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(index.Button, {
     key: "tab-".concat(tab),
     onClick: () => {
       setActiveBoard(null);
@@ -67,7 +69,14 @@ const UserLibraryHeader = _ref => {
     },
     variant: tabSelection.includes(tab) ? "contained" : "outlined",
     size: "small",
-    endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CancelRounded, null),
+    endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default["default"].createElement("svg", {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "currentColor"
+    }, /*#__PURE__*/React__default["default"].createElement("path", {
+      d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+    })),
     sx: {
       fontWeight: "normal",
       marginRight: "10px",
@@ -76,7 +85,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, {
     currentSort: sort,
     setActiveBoard: setActiveBoard,
     setSort: value => {