@blerp/design 1.0.63 → 1.0.66

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 +50 -12
  2. package/dist/index.esm.js +50 -12
  3. package/dist/index.umd.js +50 -12
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -388,6 +388,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
388
388
  variant: "contained",
389
389
  color: "seafoam",
390
390
  size: "small",
391
+ sx: {
392
+ marginTop: "4px",
393
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
394
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
395
+ },
391
396
  onClick: function onClick() {
392
397
  return setOpenSave(false);
393
398
  }
@@ -401,7 +406,9 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
401
406
  sx: {
402
407
  ".MuiButton-startIcon": {
403
408
  margin: "0"
404
- }
409
+ },
410
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
411
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
405
412
  },
406
413
  size: "small",
407
414
  startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -413,6 +420,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
413
420
  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
414
421
  variant: "text",
415
422
  color: "grey4",
423
+ sx: {
424
+ marginTop: "4px",
425
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
426
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
427
+ },
416
428
  onClick: function onClick() {
417
429
  handleClickOrganize();
418
430
  }
@@ -420,7 +432,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
420
432
  };
421
433
 
422
434
  var _templateObject$f;
423
- var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _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"])));
435
+ var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])));
424
436
 
425
437
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
426
438
  var bite = _ref.bite,
@@ -985,7 +997,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
985
997
  width: "100%",
986
998
  justifyContent: "space-between",
987
999
  alignItems: "center",
988
- height: bite.visibility !== "PRIVATE" || isOwner ? "32px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
1000
+ height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
989
1001
  ,
990
1002
  position: sizeParams.buttonSize === "small" && "absolute"
991
1003
  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -996,7 +1008,19 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
996
1008
  top: "30px",
997
1009
  left: "10px"
998
1010
  }
999
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1011
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
1012
+ fontSize: "8px",
1013
+ color: isPremium ? "waxwing.main" : "grey5.main",
1014
+ sx: {
1015
+ maxWidth: "24px",
1016
+ textOverflow: "ellipsis",
1017
+ overflow: "hidden",
1018
+ position: "absolute",
1019
+ top: "56px",
1020
+ right: "4px",
1021
+ opacity: isBlerpHovered ? 1 : 0.6
1022
+ }
1023
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), "s"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1000
1024
  title: "May contain potentially sensitive content",
1001
1025
  sx: {
1002
1026
  wordWrap: "break-word"
@@ -1023,7 +1047,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1023
1047
  borderRadius: "12px",
1024
1048
  height: "24px",
1025
1049
  position: "relative",
1026
- left: "4px"
1050
+ left: "2px"
1027
1051
  }
1028
1052
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1029
1053
  sx: {
@@ -1043,7 +1067,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1043
1067
  },
1044
1068
  sx: {
1045
1069
  color: "notBlack.main",
1046
- padding: "4px"
1070
+ padding: "2px"
1047
1071
  }
1048
1072
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1049
1073
  fontSize: "small"
@@ -1056,7 +1080,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1056
1080
  },
1057
1081
  sx: {
1058
1082
  color: "notBlack.main",
1059
- padding: "4px"
1083
+ padding: "2px"
1060
1084
  }
1061
1085
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
1062
1086
  fontSize: "small"
@@ -1233,10 +1257,20 @@ var Blerp$1 = function Blerp(_ref) {
1233
1257
  reactionSize: "24px",
1234
1258
  buttonSize: "large"
1235
1259
  };
1260
+ var tinySize = {
1261
+ width: 110,
1262
+ height: 120,
1263
+ fontSize: "10px",
1264
+ imageSize: "60px",
1265
+ reactionSpacing: 0.5,
1266
+ reactionPadding: "1px",
1267
+ reactionSize: "11px",
1268
+ buttonSize: "small"
1269
+ };
1236
1270
  var smallSize = {
1237
1271
  width: 150,
1238
1272
  height: 160,
1239
- fontSize: "14px",
1273
+ fontSize: "12px",
1240
1274
  imageSize: "90px",
1241
1275
  reactionSpacing: 1,
1242
1276
  reactionPadding: "3px",
@@ -1265,7 +1299,9 @@ var Blerp$1 = function Blerp(_ref) {
1265
1299
  };
1266
1300
 
1267
1301
  if (!variantSize) {
1268
- if (size.width <= 400) {
1302
+ if (size.width <= 340) {
1303
+ sizeParams = tinySize;
1304
+ } else if (size.width <= 600) {
1269
1305
  sizeParams = smallSize;
1270
1306
  } else if (size.width <= 900) {
1271
1307
  sizeParams = mediumSize;
@@ -1279,6 +1315,8 @@ var Blerp$1 = function Blerp(_ref) {
1279
1315
  sizeParams = mediumSize;
1280
1316
  } else if (variantSize === "large") {
1281
1317
  sizeParams = largeSize;
1318
+ } else if (variantSize === "tiny") {
1319
+ sizeParams = tinySize;
1282
1320
  }
1283
1321
  }
1284
1322
 
@@ -1311,7 +1349,7 @@ var Blerp$1 = function Blerp(_ref) {
1311
1349
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1312
1350
  transition: "0.3s",
1313
1351
  position: "relative",
1314
- cursor: "inherit",
1352
+ cursor: "pointer",
1315
1353
  "&:hover": {
1316
1354
  bgcolor: isPremium ? "white.main" : "grey2.main",
1317
1355
  border: isPremium ? "none" : "2px solid transparent"
@@ -2878,8 +2916,8 @@ var Toggle$1 = function Toggle(_ref) {
2878
2916
  _onClick = _ref.onClick;
2879
2917
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer$1, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
2880
2918
  checked: checked,
2881
- onClick: function onClick() {
2882
- return _onClick();
2919
+ onClick: function onClick(e) {
2920
+ return _onClick(e);
2883
2921
  }
2884
2922
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
2885
2923
  checked: checked,
package/dist/index.esm.js CHANGED
@@ -320,6 +320,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
320
320
  variant: "contained",
321
321
  color: "seafoam",
322
322
  size: "small",
323
+ sx: {
324
+ marginTop: "4px",
325
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
326
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
327
+ },
323
328
  onClick: function onClick() {
324
329
  return setOpenSave(false);
325
330
  }
@@ -333,7 +338,9 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
333
338
  sx: {
334
339
  ".MuiButton-startIcon": {
335
340
  margin: "0"
336
- }
341
+ },
342
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
343
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
337
344
  },
338
345
  size: "small",
339
346
  startIcon: /*#__PURE__*/React__default.createElement(BookmarkRemoveOutlinedIcon, {
@@ -345,6 +352,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
345
352
  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default.createElement(Button, {
346
353
  variant: "text",
347
354
  color: "grey4",
355
+ sx: {
356
+ marginTop: "4px",
357
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
358
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
359
+ },
348
360
  onClick: function onClick() {
349
361
  handleClickOrganize();
350
362
  }
@@ -352,7 +364,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
352
364
  };
353
365
 
354
366
  var _templateObject$f;
355
- var LineClamp$2 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n"])));
367
+ var LineClamp$2 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])));
356
368
 
357
369
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
358
370
  var bite = _ref.bite,
@@ -917,7 +929,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
917
929
  width: "100%",
918
930
  justifyContent: "space-between",
919
931
  alignItems: "center",
920
- height: bite.visibility !== "PRIVATE" || isOwner ? "32px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
932
+ height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
921
933
  ,
922
934
  position: sizeParams.buttonSize === "small" && "absolute"
923
935
  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Text, {
@@ -928,7 +940,19 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
928
940
  top: "30px",
929
941
  left: "10px"
930
942
  }
931
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default.createElement(Tooltip, {
943
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default.createElement(Text, {
944
+ fontSize: "8px",
945
+ color: isPremium ? "waxwing.main" : "grey5.main",
946
+ sx: {
947
+ maxWidth: "24px",
948
+ textOverflow: "ellipsis",
949
+ overflow: "hidden",
950
+ position: "absolute",
951
+ top: "56px",
952
+ right: "4px",
953
+ opacity: isBlerpHovered ? 1 : 0.6
954
+ }
955
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), "s"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default.createElement(Tooltip, {
932
956
  title: "May contain potentially sensitive content",
933
957
  sx: {
934
958
  wordWrap: "break-word"
@@ -955,7 +979,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
955
979
  borderRadius: "12px",
956
980
  height: "24px",
957
981
  position: "relative",
958
- left: "4px"
982
+ left: "2px"
959
983
  }
960
984
  }, /*#__PURE__*/React__default.createElement(Stack, {
961
985
  sx: {
@@ -975,7 +999,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
975
999
  },
976
1000
  sx: {
977
1001
  color: "notBlack.main",
978
- padding: "4px"
1002
+ padding: "2px"
979
1003
  }
980
1004
  }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
981
1005
  fontSize: "small"
@@ -988,7 +1012,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
988
1012
  },
989
1013
  sx: {
990
1014
  color: "notBlack.main",
991
- padding: "4px"
1015
+ padding: "2px"
992
1016
  }
993
1017
  }, /*#__PURE__*/React__default.createElement(BookmarkAddRounded, {
994
1018
  fontSize: "small"
@@ -1165,10 +1189,20 @@ var Blerp$1 = function Blerp(_ref) {
1165
1189
  reactionSize: "24px",
1166
1190
  buttonSize: "large"
1167
1191
  };
1192
+ var tinySize = {
1193
+ width: 110,
1194
+ height: 120,
1195
+ fontSize: "10px",
1196
+ imageSize: "60px",
1197
+ reactionSpacing: 0.5,
1198
+ reactionPadding: "1px",
1199
+ reactionSize: "11px",
1200
+ buttonSize: "small"
1201
+ };
1168
1202
  var smallSize = {
1169
1203
  width: 150,
1170
1204
  height: 160,
1171
- fontSize: "14px",
1205
+ fontSize: "12px",
1172
1206
  imageSize: "90px",
1173
1207
  reactionSpacing: 1,
1174
1208
  reactionPadding: "3px",
@@ -1197,7 +1231,9 @@ var Blerp$1 = function Blerp(_ref) {
1197
1231
  };
1198
1232
 
1199
1233
  if (!variantSize) {
1200
- if (size.width <= 400) {
1234
+ if (size.width <= 340) {
1235
+ sizeParams = tinySize;
1236
+ } else if (size.width <= 600) {
1201
1237
  sizeParams = smallSize;
1202
1238
  } else if (size.width <= 900) {
1203
1239
  sizeParams = mediumSize;
@@ -1211,6 +1247,8 @@ var Blerp$1 = function Blerp(_ref) {
1211
1247
  sizeParams = mediumSize;
1212
1248
  } else if (variantSize === "large") {
1213
1249
  sizeParams = largeSize;
1250
+ } else if (variantSize === "tiny") {
1251
+ sizeParams = tinySize;
1214
1252
  }
1215
1253
  }
1216
1254
 
@@ -1243,7 +1281,7 @@ var Blerp$1 = function Blerp(_ref) {
1243
1281
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1244
1282
  transition: "0.3s",
1245
1283
  position: "relative",
1246
- cursor: "inherit",
1284
+ cursor: "pointer",
1247
1285
  "&:hover": {
1248
1286
  bgcolor: isPremium ? "white.main" : "grey2.main",
1249
1287
  border: isPremium ? "none" : "2px solid transparent"
@@ -2810,8 +2848,8 @@ var Toggle$1 = function Toggle(_ref) {
2810
2848
  _onClick = _ref.onClick;
2811
2849
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading ? /*#__PURE__*/React__default.createElement(LoadingContainer$1, null, /*#__PURE__*/React__default.createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default.createElement(Switch$1, {
2812
2850
  checked: checked,
2813
- onClick: function onClick() {
2814
- return _onClick();
2851
+ onClick: function onClick(e) {
2852
+ return _onClick(e);
2815
2853
  }
2816
2854
  }, /*#__PURE__*/React__default.createElement(ToggleInput, {
2817
2855
  checked: checked,
package/dist/index.umd.js CHANGED
@@ -341,6 +341,11 @@
341
341
  variant: "contained",
342
342
  color: "seafoam",
343
343
  size: "small",
344
+ sx: {
345
+ marginTop: "4px",
346
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
347
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
348
+ },
344
349
  onClick: function onClick() {
345
350
  return setOpenSave(false);
346
351
  }
@@ -354,7 +359,9 @@
354
359
  sx: {
355
360
  ".MuiButton-startIcon": {
356
361
  margin: "0"
357
- }
362
+ },
363
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
364
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
358
365
  },
359
366
  size: "small",
360
367
  startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -366,6 +373,11 @@
366
373
  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
367
374
  variant: "text",
368
375
  color: "grey4",
376
+ sx: {
377
+ marginTop: "4px",
378
+ padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
379
+ fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
380
+ },
369
381
  onClick: function onClick() {
370
382
  handleClickOrganize();
371
383
  }
@@ -373,7 +385,7 @@
373
385
  };
374
386
 
375
387
  var _templateObject$f;
376
- var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _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"])));
388
+ var LineClamp$2 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 0;\n"])));
377
389
 
378
390
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
379
391
  var bite = _ref.bite,
@@ -938,7 +950,7 @@
938
950
  width: "100%",
939
951
  justifyContent: "space-between",
940
952
  alignItems: "center",
941
- height: bite.visibility !== "PRIVATE" || isOwner ? "32px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
953
+ height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
942
954
  ,
943
955
  position: sizeParams.buttonSize === "small" && "absolute"
944
956
  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -949,7 +961,19 @@
949
961
  top: "30px",
950
962
  left: "10px"
951
963
  }
952
- }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
964
+ }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
965
+ fontSize: "8px",
966
+ color: isPremium ? "waxwing.main" : "grey5.main",
967
+ sx: {
968
+ maxWidth: "24px",
969
+ textOverflow: "ellipsis",
970
+ overflow: "hidden",
971
+ position: "absolute",
972
+ top: "56px",
973
+ right: "4px",
974
+ opacity: isBlerpHovered ? 1 : 0.6
975
+ }
976
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), "s"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
953
977
  title: "May contain potentially sensitive content",
954
978
  sx: {
955
979
  wordWrap: "break-word"
@@ -976,7 +1000,7 @@
976
1000
  borderRadius: "12px",
977
1001
  height: "24px",
978
1002
  position: "relative",
979
- left: "4px"
1003
+ left: "2px"
980
1004
  }
981
1005
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
982
1006
  sx: {
@@ -996,7 +1020,7 @@
996
1020
  },
997
1021
  sx: {
998
1022
  color: "notBlack.main",
999
- padding: "4px"
1023
+ padding: "2px"
1000
1024
  }
1001
1025
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
1002
1026
  fontSize: "small"
@@ -1009,7 +1033,7 @@
1009
1033
  },
1010
1034
  sx: {
1011
1035
  color: "notBlack.main",
1012
- padding: "4px"
1036
+ padding: "2px"
1013
1037
  }
1014
1038
  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
1015
1039
  fontSize: "small"
@@ -1186,10 +1210,20 @@
1186
1210
  reactionSize: "24px",
1187
1211
  buttonSize: "large"
1188
1212
  };
1213
+ var tinySize = {
1214
+ width: 110,
1215
+ height: 120,
1216
+ fontSize: "10px",
1217
+ imageSize: "60px",
1218
+ reactionSpacing: 0.5,
1219
+ reactionPadding: "1px",
1220
+ reactionSize: "11px",
1221
+ buttonSize: "small"
1222
+ };
1189
1223
  var smallSize = {
1190
1224
  width: 150,
1191
1225
  height: 160,
1192
- fontSize: "14px",
1226
+ fontSize: "12px",
1193
1227
  imageSize: "90px",
1194
1228
  reactionSpacing: 1,
1195
1229
  reactionPadding: "3px",
@@ -1218,7 +1252,9 @@
1218
1252
  };
1219
1253
 
1220
1254
  if (!variantSize) {
1221
- if (size.width <= 400) {
1255
+ if (size.width <= 340) {
1256
+ sizeParams = tinySize;
1257
+ } else if (size.width <= 600) {
1222
1258
  sizeParams = smallSize;
1223
1259
  } else if (size.width <= 900) {
1224
1260
  sizeParams = mediumSize;
@@ -1232,6 +1268,8 @@
1232
1268
  sizeParams = mediumSize;
1233
1269
  } else if (variantSize === "large") {
1234
1270
  sizeParams = largeSize;
1271
+ } else if (variantSize === "tiny") {
1272
+ sizeParams = tinySize;
1235
1273
  }
1236
1274
  }
1237
1275
 
@@ -1264,7 +1302,7 @@
1264
1302
  backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
1265
1303
  transition: "0.3s",
1266
1304
  position: "relative",
1267
- cursor: "inherit",
1305
+ cursor: "pointer",
1268
1306
  "&:hover": {
1269
1307
  bgcolor: isPremium ? "white.main" : "grey2.main",
1270
1308
  border: isPremium ? "none" : "2px solid transparent"
@@ -2831,8 +2869,8 @@
2831
2869
  _onClick = _ref.onClick;
2832
2870
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer$1, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
2833
2871
  checked: checked,
2834
- onClick: function onClick() {
2835
- return _onClick();
2872
+ onClick: function onClick(e) {
2873
+ return _onClick(e);
2836
2874
  }
2837
2875
  }, /*#__PURE__*/React__default['default'].createElement(ToggleInput, {
2838
2876
  checked: checked,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.63",
3
+ "version": "1.0.66",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {