@blerp/design 1.0.46 → 1.0.50

package/dist/index.cjs.js

@@ -38,6 +38,7 @@ var PinterestIcon = require('@mui/icons-material/Pinterest');
 var TwitterIcon = require('@mui/icons-material/Twitter');
 var YouTubeIcon = require('@mui/icons-material/YouTube');
 var PersonRemoveRoundedIcon = require('@mui/icons-material/PersonRemoveRounded');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 require('@mui/icons-material/FilterAltRounded');
 var MenuRoundedIcon = require('@mui/icons-material/MenuRounded');
 var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
@@ -82,6 +83,7 @@ var PinterestIcon__default = /*#__PURE__*/_interopDefaultLegacy(PinterestIcon);
 var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon);
 var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
 var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
 var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
 var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
@@ -2999,7 +3001,8 @@ var ImageUploadModal = function ImageUploadModal(_ref) {
             case 5:
               blob = _context.sent;
               file = new File([blob], img, {
-                type: blob.type
+                type: blob.type,
+                size: blob.type
               });
               setImage(file);
 
@@ -3099,8 +3102,9 @@ var ImageUploadModal = function ImageUploadModal(_ref) {
 
                 // create an image file using the data from the blob, assign the file a name, assign the file type
                 // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
-                file = new File([blob], image.name + ".JPG", {
-                  type: image.type
+                file = new File([blob], image.name, {
+                  type: image.type,
+                  size: image.size
                 });
               });
 
@@ -8317,7 +8321,7 @@ var UserLibraryHeader = function UserLibraryHeader(_ref) {
       sort = _ref.sort,
       hideLayoutButtons = _ref.hideLayoutButtons;
   var size = useWindowSize();
-  var theme = React.useContext(styled.ThemeContext);
+  React.useContext(styled.ThemeContext);
   return /*#__PURE__*/React__default['default'].createElement(Box, {
     sx: _objectSpread({
       backgroundColor: "grey2.main",
@@ -8345,20 +8349,27 @@ var UserLibraryHeader = function UserLibraryHeader(_ref) {
     return /*#__PURE__*/React__default['default'].createElement(Button, {
       key: "tab-".concat(tab),
       onClick: function onClick() {
-        setShowSearch(null);
         setActiveBoard(null);
-        setTabSelection(tab);
+
+        if (tabSelection.includes(tab)) {
+          var newTabs = tabSelection.filter(function (item) {
+            return item !== tab;
+          });
+          setTabSelection(newTabs);
+        } else {
+          setTabSelection([].concat(_toConsumableArray__default['default'](tabSelection), [tab]));
+        }
       },
-      variant: "outlined",
+      variant: tabSelection.includes(tab) ? "contained" : "outlined",
       size: "small",
+      endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CancelRounded, null),
       sx: {
+        fontWeight: "normal",
         marginRight: "10px",
-        backgroundColor: tabSelection === tab && "grey3.main",
-        ":focus": {
-          border: "2px solid ".concat(theme.colors.grey4, " !important")
-        }
+        backgroundColor: tabSelection.includes(tab) && "grey4.main"
       },
-      color: "grey6"
+      color: tabSelection.includes(tab) ? "grey3" : "notBlack",
+      disableElevation: true
     }, tab);
   })), /*#__PURE__*/React__default['default'].createElement(LibraryControls, {
     currentSort: sort,

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import React, { useState, useEffect, useContext, useRef, createRef, cloneElement
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded, LockRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -34,6 +34,7 @@ import PinterestIcon from '@mui/icons-material/Pinterest';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import YouTubeIcon from '@mui/icons-material/YouTube';
 import PersonRemoveRoundedIcon from '@mui/icons-material/PersonRemoveRounded';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import '@mui/icons-material/FilterAltRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
@@ -2953,7 +2954,8 @@ var ImageUploadModal = function ImageUploadModal(_ref) {
             case 5:
               blob = _context.sent;
               file = new File([blob], img, {
-                type: blob.type
+                type: blob.type,
+                size: blob.type
               });
               setImage(file);
 
@@ -3053,8 +3055,9 @@ var ImageUploadModal = function ImageUploadModal(_ref) {
 
                 // create an image file using the data from the blob, assign the file a name, assign the file type
                 // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
-                file = new File([blob], image.name + ".JPG", {
-                  type: image.type
+                file = new File([blob], image.name, {
+                  type: image.type,
+                  size: image.size
                 });
               });
 
@@ -8271,7 +8274,7 @@ var UserLibraryHeader = function UserLibraryHeader(_ref) {
       sort = _ref.sort,
       hideLayoutButtons = _ref.hideLayoutButtons;
   var size = useWindowSize();
-  var theme = useContext(ThemeContext);
+  useContext(ThemeContext);
   return /*#__PURE__*/React.createElement(Box, {
     sx: _objectSpread({
       backgroundColor: "grey2.main",
@@ -8299,20 +8302,27 @@ var UserLibraryHeader = function UserLibraryHeader(_ref) {
     return /*#__PURE__*/React.createElement(Button, {
       key: "tab-".concat(tab),
       onClick: function onClick() {
-        setShowSearch(null);
         setActiveBoard(null);
-        setTabSelection(tab);
+
+        if (tabSelection.includes(tab)) {
+          var newTabs = tabSelection.filter(function (item) {
+            return item !== tab;
+          });
+          setTabSelection(newTabs);
+        } else {
+          setTabSelection([].concat(_toConsumableArray(tabSelection), [tab]));
+        }
       },
-      variant: "outlined",
+      variant: tabSelection.includes(tab) ? "contained" : "outlined",
       size: "small",
+      endIcon: tabSelection.includes(tab) && /*#__PURE__*/React.createElement(CancelRounded, null),
       sx: {
+        fontWeight: "normal",
         marginRight: "10px",
-        backgroundColor: tabSelection === tab && "grey3.main",
-        ":focus": {
-          border: "2px solid ".concat(theme.colors.grey4, " !important")
-        }
+        backgroundColor: tabSelection.includes(tab) && "grey4.main"
       },
-      color: "grey6"
+      color: tabSelection.includes(tab) ? "grey3" : "notBlack",
+      disableElevation: true
     }, tab);
   })), /*#__PURE__*/React.createElement(LibraryControls, {
     currentSort: sort,

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -37,6 +37,7 @@
     var TwitterIcon__default = /*#__PURE__*/_interopDefaultLegacy(TwitterIcon);
     var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
     var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
+    var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
     var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
     var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
     var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
@@ -2954,7 +2955,8 @@
                 case 5:
                   blob = _context.sent;
                   file = new File([blob], img, {
-                    type: blob.type
+                    type: blob.type,
+                    size: blob.type
                   });
                   setImage(file);
 
@@ -3054,8 +3056,9 @@
 
                     // create an image file using the data from the blob, assign the file a name, assign the file type
                     // Adding ".JPG" is totally janky, but since the database currently reads the file type from the name of the file (not the image.type), and since we are changing the image.name to match the url of the image, an error will be thrown if we do not declare a file type at the end.
-                    file = new File([blob], image.name + ".JPG", {
-                      type: image.type
+                    file = new File([blob], image.name, {
+                      type: image.type,
+                      size: image.size
                     });
                   });
 
@@ -8272,7 +8275,7 @@
           sort = _ref.sort,
           hideLayoutButtons = _ref.hideLayoutButtons;
       var size = useWindowSize();
-      var theme = React.useContext(styled.ThemeContext);
+      React.useContext(styled.ThemeContext);
       return /*#__PURE__*/React__default['default'].createElement(Box, {
         sx: _objectSpread({
           backgroundColor: "grey2.main",
@@ -8300,20 +8303,27 @@
         return /*#__PURE__*/React__default['default'].createElement(Button, {
           key: "tab-".concat(tab),
           onClick: function onClick() {
-            setShowSearch(null);
             setActiveBoard(null);
-            setTabSelection(tab);
+
+            if (tabSelection.includes(tab)) {
+              var newTabs = tabSelection.filter(function (item) {
+                return item !== tab;
+              });
+              setTabSelection(newTabs);
+            } else {
+              setTabSelection([].concat(_toConsumableArray__default['default'](tabSelection), [tab]));
+            }
           },
-          variant: "outlined",
+          variant: tabSelection.includes(tab) ? "contained" : "outlined",
           size: "small",
+          endIcon: tabSelection.includes(tab) && /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CancelRounded, null),
           sx: {
+            fontWeight: "normal",
             marginRight: "10px",
-            backgroundColor: tabSelection === tab && "grey3.main",
-            ":focus": {
-              border: "2px solid ".concat(theme.colors.grey4, " !important")
-            }
+            backgroundColor: tabSelection.includes(tab) && "grey4.main"
           },
-          color: "grey6"
+          color: tabSelection.includes(tab) ? "grey3" : "notBlack",
+          disableElevation: true
         }, tab);
       })), /*#__PURE__*/React__default['default'].createElement(LibraryControls, {
         currentSort: sort,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.0.46",
+    "version": "1.0.50",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {