@blerp/design 1.0.68 → 1.0.72

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 +25 -17
  2. package/dist/index.esm.js +25 -17
  3. package/dist/index.umd.js +25 -17
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -432,7 +432,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
432
432
  };
433
433
 
434
434
  var _templateObject$f;
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"])));
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 margin: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
436
436
 
437
437
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
438
438
  var bite = _ref.bite,
@@ -448,10 +448,12 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
448
448
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
449
449
  direction: "row",
450
450
  sx: {
451
- width: "80%",
452
- margin: "auto",
451
+ width: "90%",
453
452
  textAlign: "center",
454
- zIndex: "1"
453
+ zIndex: "1",
454
+ overflow: "hidden",
455
+ justifyContent: "center",
456
+ margin: "auto"
455
457
  }
456
458
  }, /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
457
459
  onClick: function onClick(e) {
@@ -467,7 +469,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
467
469
  sx: {
468
470
  ":hover": {
469
471
  textDecoration: handleClickTitle ? "underline" : "none"
470
- }
472
+ },
473
+ textOverflow: "ellipsis"
471
474
  },
472
475
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
473
476
  }, title || bite.title)));
@@ -476,10 +479,13 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
476
479
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
477
480
  direction: "row",
478
481
  sx: {
479
- width: "80%",
480
- margin: "auto",
482
+ width: "90%",
481
483
  textAlign: "center",
482
- zIndex: "1"
484
+ zIndex: "1",
485
+ overflow: "hidden",
486
+ padding: "4px 0",
487
+ justifyContent: "center",
488
+ margin: "auto"
483
489
  }
484
490
  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
485
491
  onClick: function onClick(e) {
@@ -500,7 +506,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
500
506
  sx: {
501
507
  ":hover": {
502
508
  textDecoration: handleClickTitle ? "underline" : "none"
503
- }
509
+ },
510
+ textOverflow: "ellipsis"
504
511
  },
505
512
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
506
513
  }, title || bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
@@ -517,7 +524,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
517
524
  sx: {
518
525
  ":hover": {
519
526
  textDecoration: handleClickTitle ? "underline" : "none"
520
- }
527
+ },
528
+ textOverflow: "ellipsis"
521
529
  },
522
530
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
523
531
  }, title || bite.title)));
@@ -1012,15 +1020,15 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1012
1020
  fontSize: "8px",
1013
1021
  color: isPremium ? "waxwing.main" : "grey5.main",
1014
1022
  sx: {
1015
- maxWidth: "24px",
1023
+ maxWidth: sizeParams.buttonSize === "small" ? "26px" : "40px",
1016
1024
  textOverflow: "ellipsis",
1017
1025
  overflow: "hidden",
1018
1026
  position: "absolute",
1019
- top: "56px",
1020
- right: "4px",
1021
- opacity: isBlerpHovered ? 1 : 0.6
1027
+ top: "26px",
1028
+ right: "8px",
1029
+ opacity: isBlerpHovered ? 1 : 0.78
1022
1030
  }
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, {
1031
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1024
1032
  title: "May contain potentially sensitive content",
1025
1033
  sx: {
1026
1034
  wordWrap: "break-word"
@@ -1029,7 +1037,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
1029
1037
  className: "unsafe-icon-blrp",
1030
1038
  sx: {
1031
1039
  position: "absolute",
1032
- top: "30px",
1040
+ top: !(bite !== null && bite !== void 0 && bite.audioDuration) ? "30px" : "42px",
1033
1041
  right: "5px",
1034
1042
  padding: "0"
1035
1043
  }
@@ -1259,7 +1267,7 @@ var Blerp$1 = function Blerp(_ref) {
1259
1267
  };
1260
1268
  var tinySize = {
1261
1269
  width: 110,
1262
- height: 120,
1270
+ height: 124,
1263
1271
  fontSize: "10px",
1264
1272
  imageSize: "60px",
1265
1273
  reactionSpacing: 0.5,
package/dist/index.esm.js CHANGED
@@ -364,7 +364,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
364
364
  };
365
365
 
366
366
  var _templateObject$f;
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"])));
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 margin: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
368
368
 
369
369
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
370
370
  var bite = _ref.bite,
@@ -380,10 +380,12 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
380
380
  return /*#__PURE__*/React__default.createElement(Stack, {
381
381
  direction: "row",
382
382
  sx: {
383
- width: "80%",
384
- margin: "auto",
383
+ width: "90%",
385
384
  textAlign: "center",
386
- zIndex: "1"
385
+ zIndex: "1",
386
+ overflow: "hidden",
387
+ justifyContent: "center",
388
+ margin: "auto"
387
389
  }
388
390
  }, /*#__PURE__*/React__default.createElement(LineClamp$2, {
389
391
  onClick: function onClick(e) {
@@ -399,7 +401,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
399
401
  sx: {
400
402
  ":hover": {
401
403
  textDecoration: handleClickTitle ? "underline" : "none"
402
- }
404
+ },
405
+ textOverflow: "ellipsis"
403
406
  },
404
407
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
405
408
  }, title || bite.title)));
@@ -408,10 +411,13 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
408
411
  return /*#__PURE__*/React__default.createElement(Stack, {
409
412
  direction: "row",
410
413
  sx: {
411
- width: "80%",
412
- margin: "auto",
414
+ width: "90%",
413
415
  textAlign: "center",
414
- zIndex: "1"
416
+ zIndex: "1",
417
+ overflow: "hidden",
418
+ padding: "4px 0",
419
+ justifyContent: "center",
420
+ margin: "auto"
415
421
  }
416
422
  }, isLinkTitle ? /*#__PURE__*/React__default.createElement(LineClamp$2, {
417
423
  onClick: function onClick(e) {
@@ -432,7 +438,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
432
438
  sx: {
433
439
  ":hover": {
434
440
  textDecoration: handleClickTitle ? "underline" : "none"
435
- }
441
+ },
442
+ textOverflow: "ellipsis"
436
443
  },
437
444
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
438
445
  }, title || bite.title))) : /*#__PURE__*/React__default.createElement(LineClamp$2, {
@@ -449,7 +456,8 @@ var BlerpTitleRow = function BlerpTitleRow(_ref) {
449
456
  sx: {
450
457
  ":hover": {
451
458
  textDecoration: handleClickTitle ? "underline" : "none"
452
- }
459
+ },
460
+ textOverflow: "ellipsis"
453
461
  },
454
462
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
455
463
  }, title || bite.title)));
@@ -944,15 +952,15 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
944
952
  fontSize: "8px",
945
953
  color: isPremium ? "waxwing.main" : "grey5.main",
946
954
  sx: {
947
- maxWidth: "24px",
955
+ maxWidth: sizeParams.buttonSize === "small" ? "26px" : "40px",
948
956
  textOverflow: "ellipsis",
949
957
  overflow: "hidden",
950
958
  position: "absolute",
951
- top: "56px",
952
- right: "4px",
953
- opacity: isBlerpHovered ? 1 : 0.6
959
+ top: "26px",
960
+ right: "8px",
961
+ opacity: isBlerpHovered ? 1 : 0.78
954
962
  }
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, {
963
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default.createElement(Tooltip, {
956
964
  title: "May contain potentially sensitive content",
957
965
  sx: {
958
966
  wordWrap: "break-word"
@@ -961,7 +969,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
961
969
  className: "unsafe-icon-blrp",
962
970
  sx: {
963
971
  position: "absolute",
964
- top: "30px",
972
+ top: !(bite !== null && bite !== void 0 && bite.audioDuration) ? "30px" : "42px",
965
973
  right: "5px",
966
974
  padding: "0"
967
975
  }
@@ -1191,7 +1199,7 @@ var Blerp$1 = function Blerp(_ref) {
1191
1199
  };
1192
1200
  var tinySize = {
1193
1201
  width: 110,
1194
- height: 120,
1202
+ height: 124,
1195
1203
  fontSize: "10px",
1196
1204
  imageSize: "60px",
1197
1205
  reactionSpacing: 0.5,
package/dist/index.umd.js CHANGED
@@ -385,7 +385,7 @@
385
385
  };
386
386
 
387
387
  var _templateObject$f;
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"])));
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 margin: 0;\n text-overflow: ellipsis;\n overflow: hidden;\n"])));
389
389
 
390
390
  var BlerpTitleRow = function BlerpTitleRow(_ref) {
391
391
  var bite = _ref.bite,
@@ -401,10 +401,12 @@
401
401
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
402
402
  direction: "row",
403
403
  sx: {
404
- width: "80%",
405
- margin: "auto",
404
+ width: "90%",
406
405
  textAlign: "center",
407
- zIndex: "1"
406
+ zIndex: "1",
407
+ overflow: "hidden",
408
+ justifyContent: "center",
409
+ margin: "auto"
408
410
  }
409
411
  }, /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
410
412
  onClick: function onClick(e) {
@@ -420,7 +422,8 @@
420
422
  sx: {
421
423
  ":hover": {
422
424
  textDecoration: handleClickTitle ? "underline" : "none"
423
- }
425
+ },
426
+ textOverflow: "ellipsis"
424
427
  },
425
428
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
426
429
  }, title || bite.title)));
@@ -429,10 +432,13 @@
429
432
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
430
433
  direction: "row",
431
434
  sx: {
432
- width: "80%",
433
- margin: "auto",
435
+ width: "90%",
434
436
  textAlign: "center",
435
- zIndex: "1"
437
+ zIndex: "1",
438
+ overflow: "hidden",
439
+ padding: "4px 0",
440
+ justifyContent: "center",
441
+ margin: "auto"
436
442
  }
437
443
  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
438
444
  onClick: function onClick(e) {
@@ -453,7 +459,8 @@
453
459
  sx: {
454
460
  ":hover": {
455
461
  textDecoration: handleClickTitle ? "underline" : "none"
456
- }
462
+ },
463
+ textOverflow: "ellipsis"
457
464
  },
458
465
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
459
466
  }, title || bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp$2, {
@@ -470,7 +477,8 @@
470
477
  sx: {
471
478
  ":hover": {
472
479
  textDecoration: handleClickTitle ? "underline" : "none"
473
- }
480
+ },
481
+ textOverflow: "ellipsis"
474
482
  },
475
483
  lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
476
484
  }, title || bite.title)));
@@ -965,15 +973,15 @@
965
973
  fontSize: "8px",
966
974
  color: isPremium ? "waxwing.main" : "grey5.main",
967
975
  sx: {
968
- maxWidth: "24px",
976
+ maxWidth: sizeParams.buttonSize === "small" ? "26px" : "40px",
969
977
  textOverflow: "ellipsis",
970
978
  overflow: "hidden",
971
979
  position: "absolute",
972
- top: "56px",
973
- right: "4px",
974
- opacity: isBlerpHovered ? 1 : 0.6
980
+ top: "26px",
981
+ right: "8px",
982
+ opacity: isBlerpHovered ? 1 : 0.78
975
983
  }
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, {
984
+ }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
977
985
  title: "May contain potentially sensitive content",
978
986
  sx: {
979
987
  wordWrap: "break-word"
@@ -982,7 +990,7 @@
982
990
  className: "unsafe-icon-blrp",
983
991
  sx: {
984
992
  position: "absolute",
985
- top: "30px",
993
+ top: !(bite !== null && bite !== void 0 && bite.audioDuration) ? "30px" : "42px",
986
994
  right: "5px",
987
995
  padding: "0"
988
996
  }
@@ -1212,7 +1220,7 @@
1212
1220
  };
1213
1221
  var tinySize = {
1214
1222
  width: 110,
1215
- height: 120,
1223
+ height: 124,
1216
1224
  fontSize: "10px",
1217
1225
  imageSize: "60px",
1218
1226
  reactionSpacing: 0.5,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.0.68",
3
+ "version": "1.0.72",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {