@blerp/design 1.0.110 → 1.0.113

package/dist/index.cjs.js

@@ -3069,17 +3069,15 @@ EllipsisLoader.defaultProps = {
 };
 
 var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
-var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 16px;\n        width: 16px;\n        left: 3px;\n        bottom: 2px;\n        background-color: ", ";\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        border-radius: 50%;\n    }\n"])), function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
-}, function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
+var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
+  return props.theme.colors.grey5;
 });
-var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(13px);\n        -ms-transform: translateX(13px);\n        transform: translateX(13px);\n    }\n"])), Slider$2, function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
-}, Slider$2, function (props) {
+var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
   return props.theme.colors.seafoam;
 }, Slider$2, Slider$2);
-var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 35px;\n    min-width: 35px;\n    height: 20px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), ToggleInput);
+var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 36px;\n    min-width: 35px;\n    height: 20px;\n    border: 1px solid transparent;\n    border-color: ", ";\n    border-radius: 18px;\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+  return props.checked ? "transparent" : props.theme.colors.grey5;
+}, ToggleInput);
 var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: transparent;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 14px;\n        width: 14px;\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        background-color: ", ";\n        border-radius: 50%;\n    }\n"])), function (props) {
   return props.theme.colors.notBlack;
 });
@@ -3105,7 +3103,18 @@ var Toggle$1 = function Toggle(_ref) {
       return null;
     },
     type: "checkbox"
-  }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
+  }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
+    sx: {
+      position: "absolute",
+      top: "2px",
+      left: "3px",
+      color: checked ? "seafoam.main" : "transparent",
+      fontSize: "16px",
+      backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+      borderRadius: "50%",
+      transition: "0.2s"
+    }
+  }))));
 };
 
 function ownKeys$3(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; }
@@ -4363,6 +4372,9 @@ var SnackbarProvider = function SnackbarProvider(props) {
       actionButton: actionButton,
       autoHideDuration: autoHideDuration
     });
+    setTimeout(function () {
+      setOpen(false);
+    }, autoHideDuration);
   };
 
   return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
@@ -90046,6 +90058,7 @@ var Pagination = material.Pagination;
 var SpeedDial = material.SpeedDial;
 var Stepper = material.Stepper;
 var Tabs = material.Tabs;
+var Tab = material.Tab;
 var Accordion = material.Accordion;
 var AppBar = material.AppBar;
 var Card = material.Card;
@@ -90401,6 +90414,7 @@ exports.SpeedDial = SpeedDial;
 exports.Stack = Stack;
 exports.Stepper = Stepper;
 exports.Switch = Switch;
+exports.Tab = Tab;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Text = Text;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$1, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
+import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$1, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import PropTypes from 'prop-types';
 import * as React from 'react';
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createRef, clo
 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, CancelRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, CheckRounded, 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';
@@ -3000,17 +3000,15 @@ EllipsisLoader.defaultProps = {
 };
 
 var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
-var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 16px;\n        width: 16px;\n        left: 3px;\n        bottom: 2px;\n        background-color: ", ";\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        border-radius: 50%;\n    }\n"])), function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
-}, function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
+var Slider$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
+  return props.theme.colors.grey5;
 });
-var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(13px);\n        -ms-transform: translateX(13px);\n        transform: translateX(13px);\n    }\n"])), Slider$2, function (props) {
-  return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
-}, Slider$2, function (props) {
+var ToggleInput = styled.input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
   return props.theme.colors.seafoam;
 }, Slider$2, Slider$2);
-var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 35px;\n    min-width: 35px;\n    height: 20px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), ToggleInput);
+var Switch$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 36px;\n    min-width: 35px;\n    height: 20px;\n    border: 1px solid transparent;\n    border-color: ", ";\n    border-radius: 18px;\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+  return props.checked ? "transparent" : props.theme.colors.grey5;
+}, ToggleInput);
 var BlackSlider = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: transparent;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 14px;\n        width: 14px;\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        background-color: ", ";\n        border-radius: 50%;\n    }\n"])), function (props) {
   return props.theme.colors.notBlack;
 });
@@ -3036,7 +3034,18 @@ var Toggle$1 = function Toggle(_ref) {
       return null;
     },
     type: "checkbox"
-  }), /*#__PURE__*/React__default.createElement(Slider$2, null)));
+  }), /*#__PURE__*/React__default.createElement(Slider$2, null, /*#__PURE__*/React__default.createElement(CheckRounded, {
+    sx: {
+      position: "absolute",
+      top: "2px",
+      left: "3px",
+      color: checked ? "seafoam.main" : "transparent",
+      fontSize: "16px",
+      backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+      borderRadius: "50%",
+      transition: "0.2s"
+    }
+  }))));
 };
 
 function ownKeys$3(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; }
@@ -4294,6 +4303,9 @@ var SnackbarProvider = function SnackbarProvider(props) {
       actionButton: actionButton,
       autoHideDuration: autoHideDuration
     });
+    setTimeout(function () {
+      setOpen(false);
+    }, autoHideDuration);
   };
 
   return /*#__PURE__*/React__default.createElement(SnackbarContext.Provider, {
@@ -89977,6 +89989,7 @@ var Pagination = Pagination$1;
 var SpeedDial = SpeedDial$1;
 var Stepper = Stepper$1;
 var Tabs = Tabs$1;
+var Tab = Tab$1;
 var Accordion = Accordion$1;
 var AppBar = AppBar$1;
 var Card = Card$1;
@@ -90249,4 +90262,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, 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, 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

@@ -3021,17 +3021,15 @@
     };
 
     var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
-    var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", ";\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 16px;\n        width: 16px;\n        left: 3px;\n        bottom: 2px;\n        background-color: ", ";\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        border-radius: 50%;\n    }\n"])), function (props) {
-      return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
-    }, function (props) {
-      return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
+    var Slider$2 = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: ", "33;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n"])), function (props) {
+      return props.theme.colors.grey5;
     });
-    var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(13px);\n        -ms-transform: translateX(13px);\n        transform: translateX(13px);\n    }\n"])), Slider$2, function (props) {
-      return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
-    }, Slider$2, function (props) {
+    var ToggleInput = styled__default['default'].input(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: ", ";\n    }\n\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", " svg {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n    }\n"])), Slider$2, function (props) {
       return props.theme.colors.seafoam;
     }, Slider$2, Slider$2);
-    var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 35px;\n    min-width: 35px;\n    height: 20px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), ToggleInput);
+    var Switch$1 = styled__default['default'].div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 36px;\n    min-width: 35px;\n    height: 20px;\n    border: 1px solid transparent;\n    border-color: ", ";\n    border-radius: 18px;\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), function (props) {
+      return props.checked ? "transparent" : props.theme.colors.grey5;
+    }, ToggleInput);
     var BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: transparent;\n    -webkit-transition: 0.2s;\n    transition: 0.2s;\n    border-radius: 34px;\n\n    &:before {\n        position: absolute;\n        content: \"\";\n        height: 14px;\n        width: 14px;\n        -webkit-transition: 0.2s;\n        transition: 0.2s;\n        background-color: ", ";\n        border-radius: 50%;\n    }\n"])), function (props) {
       return props.theme.colors.notBlack;
     });
@@ -3057,7 +3055,18 @@
           return null;
         },
         type: "checkbox"
-      }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
+      }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
+        sx: {
+          position: "absolute",
+          top: "2px",
+          left: "3px",
+          color: checked ? "seafoam.main" : "transparent",
+          fontSize: "16px",
+          backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
+          borderRadius: "50%",
+          transition: "0.2s"
+        }
+      }))));
     };
 
     function ownKeys$3(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; }
@@ -4315,6 +4324,9 @@
           actionButton: actionButton,
           autoHideDuration: autoHideDuration
         });
+        setTimeout(function () {
+          setOpen(false);
+        }, autoHideDuration);
       };
 
       return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
@@ -89998,6 +90010,7 @@
     var SpeedDial = material.SpeedDial;
     var Stepper = material.Stepper;
     var Tabs = material.Tabs;
+    var Tab = material.Tab;
     var Accordion = material.Accordion;
     var AppBar = material.AppBar;
     var Card = material.Card;
@@ -90353,6 +90366,7 @@
     exports.Stack = Stack;
     exports.Stepper = Stepper;
     exports.Switch = Switch;
+    exports.Tab = Tab;
     exports.Table = Table;
     exports.Tabs = Tabs;
     exports.Text = Text;

package/package.json

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