@blerp/design 1.1.10 → 1.2.1

package/dist/index.cjs.js

@@ -3165,7 +3165,7 @@ var Toggle$1 = function Toggle(_ref) {
       left: "4px",
       color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
       fontSize: checked ? "16px" : "12px",
-      backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+      backgroundColor: checked ? "white.main" : "grey5.main",
       borderRadius: "50%",
       transition: "0.2s"
     }
@@ -3185,7 +3185,7 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 //     }
 // `;
 
-var Dropdown$1 = function Dropdown(_ref) {
+var NewDropdown$1 = function NewDropdown(_ref) {
   var buttonTitle = _ref.buttonTitle,
       buttonLabel = _ref.buttonLabel,
       buttonStyle = _ref.buttonStyle,
@@ -3212,6 +3212,142 @@ var Dropdown$1 = function Dropdown(_ref) {
     setAnchorEl(null);
   };
 
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
+    onClick: function onClick(e) {
+      return handleClick(e);
+    },
+    variant: "contained",
+    color: "waxwing",
+    icon: true,
+    disableElevation: true,
+    sx: _objectSpread$3({
+      borderRadius: "4px",
+      color: "notBlack.main",
+      padding: "14px",
+      position: "relative"
+    }, buttonStyle)
+  }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(Text, {
+    noWrap: true,
+    fontSize: "0.75em",
+    color: "grey4.main",
+    fontWeight: "400",
+    sx: {
+      position: "absolute",
+      top: "-9px",
+      left: "10px",
+      padding: "0 5px",
+      backgroundColor: "inherit"
+    }
+  }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
+  }, startIcon, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React__default['default'].createElement(Text, {
+    noWrap: true,
+    fontSize: "1rem",
+    color: "grey5.main",
+    marginRight: "16px"
+  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
+    sx: {
+      color: "grey5.main"
+    },
+    fontSize: "medium"
+  }))), /*#__PURE__*/React__default['default'].createElement(Menu, {
+    id: "demo-customized-menu",
+    MenuListProps: {
+      "aria-labelledby": "demo-customized-button"
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose,
+    elevation: 0,
+    sx: {
+      top: "10px"
+    },
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    PaperProps: {
+      sx: _objectSpread$3({
+        "& ul": {
+          padding: "0"
+        },
+        width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
+        backgroundColor: "waxwing.main",
+        boxShadow: "0px 0px 20px #0000001a;"
+      }, paperStyle)
+    }
+  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/React__default['default'].createElement(MenuItem, {
+      key: "dropdown-".concat(option.name),
+      selected: buttonTitle === option.name,
+      sx: {
+        borderRadius: "4px",
+        "&.Mui-selected": {
+          backgroundColor: "ibisRed.main"
+        },
+        ":hover": {
+          backgroundColor: "ibisRed.main"
+        },
+        ":hover p": {
+          color: "white.override"
+        },
+        "&.Mui-selected:hover": {
+          backgroundColor: "ibisRed.main"
+        },
+        "&.Mui-selected p": {
+          color: "white.override"
+        }
+      },
+      onClick: function onClick() {
+        handleOptionClicked(option);
+        handleClose();
+      }
+    }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(Text, {
+      noWrap: true
+    }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null));
+  })));
+};
+var Dropdown$1 = function Dropdown(_ref2) {
+  var buttonTitle = _ref2.buttonTitle,
+      buttonLabel = _ref2.buttonLabel,
+      buttonStyle = _ref2.buttonStyle,
+      paperStyle = _ref2.paperStyle;
+      _ref2.buttonVariant;
+      var handleOptionClicked = _ref2.handleOptionClicked,
+      startIcon = _ref2.startIcon,
+      endIcon = _ref2.endIcon,
+      options = _ref2.options;
+
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      anchorEl = _useState4[0],
+      setAnchorEl = _useState4[1];
+
+  var open = Boolean(anchorEl);
+
+  var handleClick = function handleClick(event) {
+    // console.log(options);
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
     onClick: function onClick(e) {
       return handleClick(e);
@@ -4566,8 +4702,9 @@ var theme = styles.createTheme({
       styleOverrides: {
         root: {
           borderRadius: "30px",
-          fontWeight: "bold",
-          letterSpacing: "0.05rem"
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
         }
       },
       variants: [{
@@ -4673,8 +4810,9 @@ var darkTheme = styles.createTheme({
       styleOverrides: {
         root: {
           borderRadius: "30px",
-          fontWeight: "bold",
-          letterSpacing: "0.05rem"
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
         }
       },
       variants: [{
@@ -90143,6 +90281,7 @@ var Blerp = Blerp$1;
 var IconButton = material.IconButton;
 var Toggle = Toggle$1;
 var Dropdown = Dropdown$1;
+var NewDropdown = NewDropdown$1;
 var MenuItem = material.MenuItem;
 var NewCollectionModal = NewCollectionModal$1;
 var CollectionCard = CollectionCard$1;
@@ -90446,6 +90585,7 @@ exports.MenuItem = MenuItem;
 exports.Modal = Modal;
 exports.NewCollectionModal = NewCollectionModal;
 exports.NewDiscordIcon = NewDiscordIcon;
+exports.NewDropdown = NewDropdown;
 exports.OpenLockIcon = OpenLockIcon;
 exports.Pagination = Pagination;
 exports.Paper = Paper;

package/dist/index.esm.js

@@ -3096,7 +3096,7 @@ var Toggle$1 = function Toggle(_ref) {
       left: "4px",
       color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
       fontSize: checked ? "16px" : "12px",
-      backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+      backgroundColor: checked ? "white.main" : "grey5.main",
       borderRadius: "50%",
       transition: "0.2s"
     }
@@ -3116,7 +3116,7 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 //     }
 // `;
 
-var Dropdown$1 = function Dropdown(_ref) {
+var NewDropdown$1 = function NewDropdown(_ref) {
   var buttonTitle = _ref.buttonTitle,
       buttonLabel = _ref.buttonLabel,
       buttonStyle = _ref.buttonStyle,
@@ -3143,6 +3143,142 @@ var Dropdown$1 = function Dropdown(_ref) {
     setAnchorEl(null);
   };
 
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: function onClick(e) {
+      return handleClick(e);
+    },
+    variant: "contained",
+    color: "waxwing",
+    icon: true,
+    disableElevation: true,
+    sx: _objectSpread$3({
+      borderRadius: "4px",
+      color: "notBlack.main",
+      padding: "14px",
+      position: "relative"
+    }, buttonStyle)
+  }, buttonLabel && /*#__PURE__*/React__default.createElement(Text, {
+    noWrap: true,
+    fontSize: "0.75em",
+    color: "grey4.main",
+    fontWeight: "400",
+    sx: {
+      position: "absolute",
+      top: "-9px",
+      left: "10px",
+      padding: "0 5px",
+      backgroundColor: "inherit"
+    }
+  }, buttonLabel), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
+  }, startIcon, /*#__PURE__*/React__default.createElement(Stack, {
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    noWrap: true,
+    fontSize: "1rem",
+    color: "grey5.main",
+    marginRight: "16px"
+  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default.createElement(KeyboardArrowDownRoundedIcon, {
+    sx: {
+      color: "grey5.main"
+    },
+    fontSize: "medium"
+  }))), /*#__PURE__*/React__default.createElement(Menu, {
+    id: "demo-customized-menu",
+    MenuListProps: {
+      "aria-labelledby": "demo-customized-button"
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose,
+    elevation: 0,
+    sx: {
+      top: "10px"
+    },
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    PaperProps: {
+      sx: _objectSpread$3({
+        "& ul": {
+          padding: "0"
+        },
+        width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
+        backgroundColor: "waxwing.main",
+        boxShadow: "0px 0px 20px #0000001a;"
+      }, paperStyle)
+    }
+  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
+      key: "dropdown-".concat(option.name),
+      selected: buttonTitle === option.name,
+      sx: {
+        borderRadius: "4px",
+        "&.Mui-selected": {
+          backgroundColor: "ibisRed.main"
+        },
+        ":hover": {
+          backgroundColor: "ibisRed.main"
+        },
+        ":hover p": {
+          color: "white.override"
+        },
+        "&.Mui-selected:hover": {
+          backgroundColor: "ibisRed.main"
+        },
+        "&.Mui-selected p": {
+          color: "white.override"
+        }
+      },
+      onClick: function onClick() {
+        handleOptionClicked(option);
+        handleClose();
+      }
+    }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(Text, {
+      noWrap: true
+    }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default.createElement(React__default.Fragment, null));
+  })));
+};
+var Dropdown$1 = function Dropdown(_ref2) {
+  var buttonTitle = _ref2.buttonTitle,
+      buttonLabel = _ref2.buttonLabel,
+      buttonStyle = _ref2.buttonStyle,
+      paperStyle = _ref2.paperStyle;
+      _ref2.buttonVariant;
+      var handleOptionClicked = _ref2.handleOptionClicked,
+      startIcon = _ref2.startIcon,
+      endIcon = _ref2.endIcon,
+      options = _ref2.options;
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      anchorEl = _useState4[0],
+      setAnchorEl = _useState4[1];
+
+  var open = Boolean(anchorEl);
+
+  var handleClick = function handleClick(event) {
+    // console.log(options);
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClose = function handleClose() {
+    setAnchorEl(null);
+  };
+
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
     onClick: function onClick(e) {
       return handleClick(e);
@@ -4497,8 +4633,9 @@ var theme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "30px",
-          fontWeight: "bold",
-          letterSpacing: "0.05rem"
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
         }
       },
       variants: [{
@@ -4604,8 +4741,9 @@ var darkTheme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "30px",
-          fontWeight: "bold",
-          letterSpacing: "0.05rem"
+          fontWeight: "600",
+          letterSpacing: "0.05rem",
+          textTransform: "capitalize"
         }
       },
       variants: [{
@@ -90074,6 +90212,7 @@ var Blerp = Blerp$1;
 var IconButton = IconButton$1;
 var Toggle = Toggle$1;
 var Dropdown = Dropdown$1;
+var NewDropdown = NewDropdown$1;
 var MenuItem = MenuItem$1;
 var NewCollectionModal = NewCollectionModal$1;
 var CollectionCard = CollectionCard$1;
@@ -90321,4 +90460,4 @@ var Themes = {
 // };
 // export default returnLibrary();
 
-export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, BroomIcon, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, NewDiscordIcon, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, PresentGiftIcon, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SnackbarContext, SnackbarProvider, SparkleGiftIcon, SpeedDial, Stack, Stepper, Switch, Tab, Table, Tabs, Text, Theme, Themes, TikTokIcon, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };
+export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, BroomIcon, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, NewDiscordIcon, NewDropdown, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, PresentGiftIcon, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SnackbarContext, SnackbarProvider, SparkleGiftIcon, SpeedDial, Stack, Stepper, Switch, Tab, Table, Tabs, Text, Theme, Themes, TikTokIcon, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };

package/dist/index.umd.js

@@ -3117,7 +3117,7 @@
           left: "4px",
           color: checked ? disabled ? "grey4.main" : "seafoam.main" : "transparent",
           fontSize: checked ? "16px" : "12px",
-          backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+          backgroundColor: checked ? "white.main" : "grey5.main",
           borderRadius: "50%",
           transition: "0.2s"
         }
@@ -3137,7 +3137,7 @@
     //     }
     // `;
 
-    var Dropdown$1 = function Dropdown(_ref) {
+    var NewDropdown$1 = function NewDropdown(_ref) {
       var buttonTitle = _ref.buttonTitle,
           buttonLabel = _ref.buttonLabel,
           buttonStyle = _ref.buttonStyle,
@@ -3164,6 +3164,142 @@
         setAnchorEl(null);
       };
 
+      return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
+        onClick: function onClick(e) {
+          return handleClick(e);
+        },
+        variant: "contained",
+        color: "waxwing",
+        icon: true,
+        disableElevation: true,
+        sx: _objectSpread$3({
+          borderRadius: "4px",
+          color: "notBlack.main",
+          padding: "14px",
+          position: "relative"
+        }, buttonStyle)
+      }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(Text, {
+        noWrap: true,
+        fontSize: "0.75em",
+        color: "grey4.main",
+        fontWeight: "400",
+        sx: {
+          position: "absolute",
+          top: "-9px",
+          left: "10px",
+          padding: "0 5px",
+          backgroundColor: "inherit"
+        }
+      }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%"
+      }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        alignItems: "center",
+        overflow: "hidden",
+        width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
+      }, startIcon, /*#__PURE__*/React__default['default'].createElement(Stack, {
+        alignItems: "flex-start"
+      }, /*#__PURE__*/React__default['default'].createElement(Text, {
+        noWrap: true,
+        fontSize: "1rem",
+        color: "grey5.main",
+        marginRight: "16px"
+      }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
+        sx: {
+          color: "grey5.main"
+        },
+        fontSize: "medium"
+      }))), /*#__PURE__*/React__default['default'].createElement(Menu, {
+        id: "demo-customized-menu",
+        MenuListProps: {
+          "aria-labelledby": "demo-customized-button"
+        },
+        anchorEl: anchorEl,
+        open: open,
+        onClose: handleClose,
+        elevation: 0,
+        sx: {
+          top: "10px"
+        },
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          sx: _objectSpread$3({
+            "& ul": {
+              padding: "0"
+            },
+            width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
+            backgroundColor: "waxwing.main",
+            boxShadow: "0px 0px 20px #0000001a;"
+          }, paperStyle)
+        }
+      }, options === null || options === void 0 ? void 0 : options.map(function (option) {
+        return /*#__PURE__*/React__default['default'].createElement(MenuItem, {
+          key: "dropdown-".concat(option.name),
+          selected: buttonTitle === option.name,
+          sx: {
+            borderRadius: "4px",
+            "&.Mui-selected": {
+              backgroundColor: "ibisRed.main"
+            },
+            ":hover": {
+              backgroundColor: "ibisRed.main"
+            },
+            ":hover p": {
+              color: "white.override"
+            },
+            "&.Mui-selected:hover": {
+              backgroundColor: "ibisRed.main"
+            },
+            "&.Mui-selected p": {
+              color: "white.override"
+            }
+          },
+          onClick: function onClick() {
+            handleOptionClicked(option);
+            handleClose();
+          }
+        }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(Text, {
+          noWrap: true
+        }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null));
+      })));
+    };
+    var Dropdown$1 = function Dropdown(_ref2) {
+      var buttonTitle = _ref2.buttonTitle,
+          buttonLabel = _ref2.buttonLabel,
+          buttonStyle = _ref2.buttonStyle,
+          paperStyle = _ref2.paperStyle;
+          _ref2.buttonVariant;
+          var handleOptionClicked = _ref2.handleOptionClicked,
+          startIcon = _ref2.startIcon,
+          endIcon = _ref2.endIcon,
+          options = _ref2.options;
+
+      var _useState3 = React.useState(null),
+          _useState4 = _slicedToArray__default['default'](_useState3, 2),
+          anchorEl = _useState4[0],
+          setAnchorEl = _useState4[1];
+
+      var open = Boolean(anchorEl);
+
+      var handleClick = function handleClick(event) {
+        // console.log(options);
+        setAnchorEl(event.currentTarget);
+      };
+
+      var handleClose = function handleClose() {
+        setAnchorEl(null);
+      };
+
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Button, {
         onClick: function onClick(e) {
           return handleClick(e);
@@ -4518,8 +4654,9 @@
           styleOverrides: {
             root: {
               borderRadius: "30px",
-              fontWeight: "bold",
-              letterSpacing: "0.05rem"
+              fontWeight: "600",
+              letterSpacing: "0.05rem",
+              textTransform: "capitalize"
             }
           },
           variants: [{
@@ -4625,8 +4762,9 @@
           styleOverrides: {
             root: {
               borderRadius: "30px",
-              fontWeight: "bold",
-              letterSpacing: "0.05rem"
+              fontWeight: "600",
+              letterSpacing: "0.05rem",
+              textTransform: "capitalize"
             }
           },
           variants: [{
@@ -90095,6 +90233,7 @@
     var IconButton = material.IconButton;
     var Toggle = Toggle$1;
     var Dropdown = Dropdown$1;
+    var NewDropdown = NewDropdown$1;
     var MenuItem = material.MenuItem;
     var NewCollectionModal = NewCollectionModal$1;
     var CollectionCard = CollectionCard$1;
@@ -90398,6 +90537,7 @@
     exports.Modal = Modal;
     exports.NewCollectionModal = NewCollectionModal;
     exports.NewDiscordIcon = NewDiscordIcon;
+    exports.NewDropdown = NewDropdown;
     exports.OpenLockIcon = OpenLockIcon;
     exports.Pagination = Pagination;
     exports.Paper = Paper;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.1.10",
+    "version": "1.2.1",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {
@@ -17,8 +17,6 @@
         "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
         "@mui/styled-engine-sc": "5.10.16",
         "autoprefixer": "^10.3.4",
-        "braintree-web": "^3.82.0",
-        "braintree-web-drop-in": "^1.32.0",
         "react-avatar-editor": "13.0.0",
         "react-color-extractor": "^1.1.2",
         "react-dropzone": "14.2.3",