@blerp/design 1.0.111 → 1.0.114

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +28 -16
  2. package/dist/index.esm.js +29 -17
  3. package/dist/index.umd.js +28 -16
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -3069,17 +3069,15 @@ EllipsisLoader.defaultProps = {
3069
3069
  };
3070
3070
 
3071
3071
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3072
- 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) {
3073
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3074
- }, function (props) {
3075
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
3072
+ 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) {
3073
+ return props.theme.colors.grey5;
3076
3074
  });
3077
- 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) {
3078
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3079
- }, Slider$2, function (props) {
3075
+ 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) {
3080
3076
  return props.theme.colors.seafoam;
3081
3077
  }, Slider$2, Slider$2);
3082
- 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);
3078
+ 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) {
3079
+ return props.checked ? props.theme.colors.seafoam : props.theme.colors.grey5;
3080
+ }, ToggleInput);
3083
3081
  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) {
3084
3082
  return props.theme.colors.notBlack;
3085
3083
  });
@@ -3105,7 +3103,18 @@ var Toggle$1 = function Toggle(_ref) {
3105
3103
  return null;
3106
3104
  },
3107
3105
  type: "checkbox"
3108
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
3106
+ }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3107
+ sx: {
3108
+ position: "absolute",
3109
+ top: "2px",
3110
+ left: "3px",
3111
+ color: checked ? "seafoam.main" : "transparent",
3112
+ fontSize: "16px",
3113
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3114
+ borderRadius: "50%",
3115
+ transition: "0.2s"
3116
+ }
3117
+ }))));
3109
3118
  };
3110
3119
 
3111
3120
  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) {
4363
4372
  actionButton: actionButton,
4364
4373
  autoHideDuration: autoHideDuration
4365
4374
  });
4375
+ setTimeout(function () {
4376
+ setOpen(false);
4377
+ }, autoHideDuration);
4366
4378
  };
4367
4379
 
4368
4380
  return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
@@ -7411,7 +7423,7 @@ var _templateObject$4, _templateObject2, _templateObject3, _templateObject4, _te
7411
7423
  //primary and secondary action buttons
7412
7424
 
7413
7425
  var YellowHoverBorder = styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
7414
- var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"])));
7426
+ var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
7415
7427
  var TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), function (props) {
7416
7428
  return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
7417
7429
  });
@@ -7807,7 +7819,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7807
7819
  textDecoration: "none"
7808
7820
  }
7809
7821
  }, /*#__PURE__*/React__default['default'].createElement(LineClamp$1, null, /*#__PURE__*/React__default['default'].createElement(Text, {
7810
- fontSize: fontSize ? fontSize : "21px",
7822
+ fontSize: fontSize ? fontSize : "22px",
7811
7823
  color: "white.override",
7812
7824
  textAlign: "center",
7813
7825
  sx: {
@@ -7820,7 +7832,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7820
7832
  sx: {
7821
7833
  zIndex: isLocked ? "1" : "3"
7822
7834
  },
7823
- fontSize: fontSize ? fontSize : "21px",
7835
+ fontSize: fontSize ? fontSize : "22px",
7824
7836
  color: "white.override",
7825
7837
  textAlign: "center"
7826
7838
  }, collection === null || collection === void 0 ? void 0 : collection.title)), isLocked ? /*#__PURE__*/React__default['default'].createElement(LockedScrim, {
@@ -7916,7 +7928,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7916
7928
  };
7917
7929
 
7918
7930
  var _templateObject$3;
7919
- var LineClamp = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"]))); //on background click
7931
+ var LineClamp = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"]))); //on background click
7920
7932
  //primary and secondary action buttons
7921
7933
 
7922
7934
  var CollectionCard$1 = function CollectionCard(_ref) {
@@ -8203,7 +8215,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8203
8215
  fontSize: "35px"
8204
8216
  }
8205
8217
  })), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(Text, {
8206
- fontSize: fontSize ? fontSize : "24px",
8218
+ fontSize: fontSize ? fontSize : "22px",
8207
8219
  color: "white.override",
8208
8220
  textAlign: "center"
8209
8221
  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -8269,7 +8281,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8269
8281
  textDecoration: "none"
8270
8282
  }
8271
8283
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
8272
- fontSize: fontSize ? fontSize : "24px",
8284
+ fontSize: fontSize ? fontSize : "22px",
8273
8285
  color: "white.override",
8274
8286
  textAlign: "center",
8275
8287
  sx: {
@@ -8278,7 +8290,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8278
8290
  }
8279
8291
  }
8280
8292
  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
8281
- fontSize: fontSize ? fontSize : "24px",
8293
+ fontSize: fontSize ? fontSize : "22px",
8282
8294
  color: "white.override",
8283
8295
  textAlign: "center"
8284
8296
  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default['default'].createElement(Box, {
package/dist/index.esm.js CHANGED
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createRef, clo
6
6
  import { ColorExtractor } from 'react-color-extractor';
7
7
  import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
8
8
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
9
- import { PauseCircleOutlineRounded, LockRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
9
+ import { PauseCircleOutlineRounded, LockRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
10
10
  import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
11
11
  import LockRoundedIcon from '@mui/icons-material/LockRounded';
12
12
  import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -3000,17 +3000,15 @@ EllipsisLoader.defaultProps = {
3000
3000
  };
3001
3001
 
3002
3002
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3003
- 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) {
3004
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3005
- }, function (props) {
3006
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
3003
+ 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) {
3004
+ return props.theme.colors.grey5;
3007
3005
  });
3008
- 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) {
3009
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3010
- }, Slider$2, function (props) {
3006
+ 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) {
3011
3007
  return props.theme.colors.seafoam;
3012
3008
  }, Slider$2, Slider$2);
3013
- 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);
3009
+ 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) {
3010
+ return props.checked ? props.theme.colors.seafoam : props.theme.colors.grey5;
3011
+ }, ToggleInput);
3014
3012
  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) {
3015
3013
  return props.theme.colors.notBlack;
3016
3014
  });
@@ -3036,7 +3034,18 @@ var Toggle$1 = function Toggle(_ref) {
3036
3034
  return null;
3037
3035
  },
3038
3036
  type: "checkbox"
3039
- }), /*#__PURE__*/React__default.createElement(Slider$2, null)));
3037
+ }), /*#__PURE__*/React__default.createElement(Slider$2, null, /*#__PURE__*/React__default.createElement(CheckRounded, {
3038
+ sx: {
3039
+ position: "absolute",
3040
+ top: "2px",
3041
+ left: "3px",
3042
+ color: checked ? "seafoam.main" : "transparent",
3043
+ fontSize: "16px",
3044
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3045
+ borderRadius: "50%",
3046
+ transition: "0.2s"
3047
+ }
3048
+ }))));
3040
3049
  };
3041
3050
 
3042
3051
  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) {
4294
4303
  actionButton: actionButton,
4295
4304
  autoHideDuration: autoHideDuration
4296
4305
  });
4306
+ setTimeout(function () {
4307
+ setOpen(false);
4308
+ }, autoHideDuration);
4297
4309
  };
4298
4310
 
4299
4311
  return /*#__PURE__*/React__default.createElement(SnackbarContext.Provider, {
@@ -7342,7 +7354,7 @@ var _templateObject$4, _templateObject2, _templateObject3, _templateObject4, _te
7342
7354
  //primary and secondary action buttons
7343
7355
 
7344
7356
  var YellowHoverBorder = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
7345
- var LineClamp$1 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"])));
7357
+ var LineClamp$1 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
7346
7358
  var TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), function (props) {
7347
7359
  return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
7348
7360
  });
@@ -7738,7 +7750,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7738
7750
  textDecoration: "none"
7739
7751
  }
7740
7752
  }, /*#__PURE__*/React__default.createElement(LineClamp$1, null, /*#__PURE__*/React__default.createElement(Text, {
7741
- fontSize: fontSize ? fontSize : "21px",
7753
+ fontSize: fontSize ? fontSize : "22px",
7742
7754
  color: "white.override",
7743
7755
  textAlign: "center",
7744
7756
  sx: {
@@ -7751,7 +7763,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7751
7763
  sx: {
7752
7764
  zIndex: isLocked ? "1" : "3"
7753
7765
  },
7754
- fontSize: fontSize ? fontSize : "21px",
7766
+ fontSize: fontSize ? fontSize : "22px",
7755
7767
  color: "white.override",
7756
7768
  textAlign: "center"
7757
7769
  }, collection === null || collection === void 0 ? void 0 : collection.title)), isLocked ? /*#__PURE__*/React__default.createElement(LockedScrim, {
@@ -7847,7 +7859,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
7847
7859
  };
7848
7860
 
7849
7861
  var _templateObject$3;
7850
- var LineClamp = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"]))); //on background click
7862
+ var LineClamp = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"]))); //on background click
7851
7863
  //primary and secondary action buttons
7852
7864
 
7853
7865
  var CollectionCard$1 = function CollectionCard(_ref) {
@@ -8134,7 +8146,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8134
8146
  fontSize: "35px"
8135
8147
  }
8136
8148
  })), /*#__PURE__*/React__default.createElement(LineClamp, null, /*#__PURE__*/React__default.createElement(Text, {
8137
- fontSize: fontSize ? fontSize : "24px",
8149
+ fontSize: fontSize ? fontSize : "22px",
8138
8150
  color: "white.override",
8139
8151
  textAlign: "center"
8140
8152
  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default.createElement(Box, {
@@ -8200,7 +8212,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8200
8212
  textDecoration: "none"
8201
8213
  }
8202
8214
  }, /*#__PURE__*/React__default.createElement(Text, {
8203
- fontSize: fontSize ? fontSize : "24px",
8215
+ fontSize: fontSize ? fontSize : "22px",
8204
8216
  color: "white.override",
8205
8217
  textAlign: "center",
8206
8218
  sx: {
@@ -8209,7 +8221,7 @@ var CollectionCard$1 = function CollectionCard(_ref) {
8209
8221
  }
8210
8222
  }
8211
8223
  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default.createElement(Text, {
8212
- fontSize: fontSize ? fontSize : "24px",
8224
+ fontSize: fontSize ? fontSize : "22px",
8213
8225
  color: "white.override",
8214
8226
  textAlign: "center"
8215
8227
  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default.createElement(Box, {
package/dist/index.umd.js CHANGED
@@ -3021,17 +3021,15 @@
3021
3021
  };
3022
3022
 
3023
3023
  var _templateObject$a, _templateObject2$5, _templateObject3$4, _templateObject4$2, _templateObject5$1, _templateObject6$1, _templateObject7;
3024
- 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) {
3025
- return props.theme.mode === "light" ? props.theme.colors.grey6 : props.theme.colors.grey4;
3026
- }, function (props) {
3027
- return props.theme.mode === "light" ? props.theme.colors.grey4 : props.theme.colors.grey7;
3024
+ 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) {
3025
+ return props.theme.colors.grey5;
3028
3026
  });
3029
- 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) {
3030
- return props.theme.mode === "light" ? props.theme.colors.grey5 : props.theme.colors.grey5;
3031
- }, Slider$2, function (props) {
3027
+ 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) {
3032
3028
  return props.theme.colors.seafoam;
3033
3029
  }, Slider$2, Slider$2);
3034
- 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);
3030
+ 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) {
3031
+ return props.checked ? props.theme.colors.seafoam : props.theme.colors.grey5;
3032
+ }, ToggleInput);
3035
3033
  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) {
3036
3034
  return props.theme.colors.notBlack;
3037
3035
  });
@@ -3057,7 +3055,18 @@
3057
3055
  return null;
3058
3056
  },
3059
3057
  type: "checkbox"
3060
- }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
3058
+ }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.CheckRounded, {
3059
+ sx: {
3060
+ position: "absolute",
3061
+ top: "2px",
3062
+ left: "3px",
3063
+ color: checked ? "seafoam.main" : "transparent",
3064
+ fontSize: "16px",
3065
+ backgroundColor: checked ? "whiteOverride.main" : "grey5.main",
3066
+ borderRadius: "50%",
3067
+ transition: "0.2s"
3068
+ }
3069
+ }))));
3061
3070
  };
3062
3071
 
3063
3072
  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 @@
4315
4324
  actionButton: actionButton,
4316
4325
  autoHideDuration: autoHideDuration
4317
4326
  });
4327
+ setTimeout(function () {
4328
+ setOpen(false);
4329
+ }, autoHideDuration);
4318
4330
  };
4319
4331
 
4320
4332
  return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
@@ -7363,7 +7375,7 @@
7363
7375
  //primary and secondary action buttons
7364
7376
 
7365
7377
  var YellowHoverBorder = styled__default['default'].div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
7366
- var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"])));
7378
+ var LineClamp$1 = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
7367
7379
  var TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), function (props) {
7368
7380
  return props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%";
7369
7381
  });
@@ -7759,7 +7771,7 @@
7759
7771
  textDecoration: "none"
7760
7772
  }
7761
7773
  }, /*#__PURE__*/React__default['default'].createElement(LineClamp$1, null, /*#__PURE__*/React__default['default'].createElement(Text, {
7762
- fontSize: fontSize ? fontSize : "21px",
7774
+ fontSize: fontSize ? fontSize : "22px",
7763
7775
  color: "white.override",
7764
7776
  textAlign: "center",
7765
7777
  sx: {
@@ -7772,7 +7784,7 @@
7772
7784
  sx: {
7773
7785
  zIndex: isLocked ? "1" : "3"
7774
7786
  },
7775
- fontSize: fontSize ? fontSize : "21px",
7787
+ fontSize: fontSize ? fontSize : "22px",
7776
7788
  color: "white.override",
7777
7789
  textAlign: "center"
7778
7790
  }, collection === null || collection === void 0 ? void 0 : collection.title)), isLocked ? /*#__PURE__*/React__default['default'].createElement(LockedScrim, {
@@ -7868,7 +7880,7 @@
7868
7880
  };
7869
7881
 
7870
7882
  var _templateObject$3;
7871
- var LineClamp = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 80%;\n"]))); //on background click
7883
+ var LineClamp = styled__default['default'].div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"]))); //on background click
7872
7884
  //primary and secondary action buttons
7873
7885
 
7874
7886
  var CollectionCard$1 = function CollectionCard(_ref) {
@@ -8155,7 +8167,7 @@
8155
8167
  fontSize: "35px"
8156
8168
  }
8157
8169
  })), /*#__PURE__*/React__default['default'].createElement(LineClamp, null, /*#__PURE__*/React__default['default'].createElement(Text, {
8158
- fontSize: fontSize ? fontSize : "24px",
8170
+ fontSize: fontSize ? fontSize : "22px",
8159
8171
  color: "white.override",
8160
8172
  textAlign: "center"
8161
8173
  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -8221,7 +8233,7 @@
8221
8233
  textDecoration: "none"
8222
8234
  }
8223
8235
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
8224
- fontSize: fontSize ? fontSize : "24px",
8236
+ fontSize: fontSize ? fontSize : "22px",
8225
8237
  color: "white.override",
8226
8238
  textAlign: "center",
8227
8239
  sx: {
@@ -8230,7 +8242,7 @@
8230
8242
  }
8231
8243
  }
8232
8244
  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React__default['default'].createElement(Text, {
8233
- fontSize: fontSize ? fontSize : "24px",
8245
+ fontSize: fontSize ? fontSize : "22px",
8234
8246
  color: "white.override",
8235
8247
  textAlign: "center"
8236
8248
  }, collection === null || collection === void 0 ? void 0 : collection.title)))) : /*#__PURE__*/React__default['default'].createElement(Box, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.111",
3
+ "version": "1.0.114",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {