@blerp/design 1.0.64 → 1.0.67

package/dist/index.cjs.js

@@ -388,6 +388,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
     variant: "contained",
     color: "seafoam",
     size: "small",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
     onClick: function onClick() {
       return setOpenSave(false);
     }
@@ -401,7 +406,9 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
     sx: {
       ".MuiButton-startIcon": {
         margin: "0"
-      }
+      },
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
     },
     size: "small",
     startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -413,6 +420,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
   }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
     variant: "text",
     color: "grey4",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
     onClick: function onClick() {
       handleClickOrganize();
     }
@@ -420,7 +432,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
 };
 
 var _templateObject$f;
-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"])));
+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"])));
 
 var BlerpTitleRow = function BlerpTitleRow(_ref) {
   var bite = _ref.bite,
@@ -985,7 +997,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     width: "100%",
     justifyContent: "space-between",
     alignItems: "center",
-    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.
+    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.
     ,
     position: sizeParams.buttonSize === "small" && "absolute"
   }, (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) {
       top: "30px",
       left: "10px"
     }
-  }, 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, {
+  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
+    fontSize: "8px",
+    color: isPremium ? "waxwing.main" : "grey5.main",
+    sx: {
+      maxWidth: "24px",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      position: "absolute",
+      top: "56px",
+      right: "4px",
+      opacity: isBlerpHovered ? 1 : 0.6
+    }
+  }, (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, {
     title: "May contain potentially sensitive content",
     sx: {
       wordWrap: "break-word"
@@ -1023,7 +1047,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
       borderRadius: "12px",
       height: "24px",
       position: "relative",
-      left: "4px"
+      left: "2px"
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
@@ -1043,7 +1067,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     },
     sx: {
       color: "notBlack.main",
-      padding: "4px"
+      padding: "2px"
     }
   }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
     fontSize: "small"
@@ -1056,7 +1080,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     },
     sx: {
       color: "notBlack.main",
-      padding: "4px"
+      padding: "2px"
     }
   }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
     fontSize: "small"
@@ -1233,10 +1257,20 @@ var Blerp$1 = function Blerp(_ref) {
     reactionSize: "24px",
     buttonSize: "large"
   };
+  var tinySize = {
+    width: 110,
+    height: 120,
+    fontSize: "10px",
+    imageSize: "60px",
+    reactionSpacing: 0.5,
+    reactionPadding: "1px",
+    reactionSize: "11px",
+    buttonSize: "small"
+  };
   var smallSize = {
     width: 150,
     height: 160,
-    fontSize: "14px",
+    fontSize: "12px",
     imageSize: "90px",
     reactionSpacing: 1,
     reactionPadding: "3px",
@@ -1265,7 +1299,9 @@ var Blerp$1 = function Blerp(_ref) {
   };
 
   if (!variantSize) {
-    if (size.width <= 400) {
+    if (size.width <= 340) {
+      sizeParams = tinySize;
+    } else if (size.width <= 600) {
       sizeParams = smallSize;
     } else if (size.width <= 900) {
       sizeParams = mediumSize;
@@ -1279,6 +1315,8 @@ var Blerp$1 = function Blerp(_ref) {
       sizeParams = mediumSize;
     } else if (variantSize === "large") {
       sizeParams = largeSize;
+    } else if (variantSize === "tiny") {
+      sizeParams = tinySize;
     }
   }
 
@@ -1311,7 +1349,7 @@ var Blerp$1 = function Blerp(_ref) {
       backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
       transition: "0.3s",
       position: "relative",
-      cursor: "inherit",
+      cursor: "pointer",
       "&:hover": {
         bgcolor: isPremium ? "white.main" : "grey2.main",
         border: isPremium ? "none" : "2px solid transparent"

package/dist/index.esm.js

@@ -320,6 +320,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
     variant: "contained",
     color: "seafoam",
     size: "small",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
     onClick: function onClick() {
       return setOpenSave(false);
     }
@@ -333,7 +338,9 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
     sx: {
       ".MuiButton-startIcon": {
         margin: "0"
-      }
+      },
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
     },
     size: "small",
     startIcon: /*#__PURE__*/React__default.createElement(BookmarkRemoveOutlinedIcon, {
@@ -345,6 +352,11 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
   }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default.createElement(Button, {
     variant: "text",
     color: "grey4",
+    sx: {
+      marginTop: "4px",
+      padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+      fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+    },
     onClick: function onClick() {
       handleClickOrganize();
     }
@@ -352,7 +364,7 @@ var BlerpSavePopup = function BlerpSavePopup(_ref) {
 };
 
 var _templateObject$f;
-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"])));
+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"])));
 
 var BlerpTitleRow = function BlerpTitleRow(_ref) {
   var bite = _ref.bite,
@@ -917,7 +929,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     width: "100%",
     justifyContent: "space-between",
     alignItems: "center",
-    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.
+    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.
     ,
     position: sizeParams.buttonSize === "small" && "absolute"
   }, (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) {
       top: "30px",
       left: "10px"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default.createElement(Text, {
+    fontSize: "8px",
+    color: isPremium ? "waxwing.main" : "grey5.main",
+    sx: {
+      maxWidth: "24px",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      position: "absolute",
+      top: "56px",
+      right: "4px",
+      opacity: isBlerpHovered ? 1 : 0.6
+    }
+  }, (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, {
     title: "May contain potentially sensitive content",
     sx: {
       wordWrap: "break-word"
@@ -955,7 +979,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
       borderRadius: "12px",
       height: "24px",
       position: "relative",
-      left: "4px"
+      left: "2px"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
@@ -975,7 +999,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     },
     sx: {
       color: "notBlack.main",
-      padding: "4px"
+      padding: "2px"
     }
   }, /*#__PURE__*/React__default.createElement(BookmarkOutlinedIcon, {
     fontSize: "small"
@@ -988,7 +1012,7 @@ var BlerpTopRow = function BlerpTopRow(_ref) {
     },
     sx: {
       color: "notBlack.main",
-      padding: "4px"
+      padding: "2px"
     }
   }, /*#__PURE__*/React__default.createElement(BookmarkAddRounded, {
     fontSize: "small"
@@ -1165,10 +1189,20 @@ var Blerp$1 = function Blerp(_ref) {
     reactionSize: "24px",
     buttonSize: "large"
   };
+  var tinySize = {
+    width: 110,
+    height: 120,
+    fontSize: "10px",
+    imageSize: "60px",
+    reactionSpacing: 0.5,
+    reactionPadding: "1px",
+    reactionSize: "11px",
+    buttonSize: "small"
+  };
   var smallSize = {
     width: 150,
     height: 160,
-    fontSize: "14px",
+    fontSize: "12px",
     imageSize: "90px",
     reactionSpacing: 1,
     reactionPadding: "3px",
@@ -1197,7 +1231,9 @@ var Blerp$1 = function Blerp(_ref) {
   };
 
   if (!variantSize) {
-    if (size.width <= 400) {
+    if (size.width <= 340) {
+      sizeParams = tinySize;
+    } else if (size.width <= 600) {
       sizeParams = smallSize;
     } else if (size.width <= 900) {
       sizeParams = mediumSize;
@@ -1211,6 +1247,8 @@ var Blerp$1 = function Blerp(_ref) {
       sizeParams = mediumSize;
     } else if (variantSize === "large") {
       sizeParams = largeSize;
+    } else if (variantSize === "tiny") {
+      sizeParams = tinySize;
     }
   }
 
@@ -1243,7 +1281,7 @@ var Blerp$1 = function Blerp(_ref) {
       backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
       transition: "0.3s",
       position: "relative",
-      cursor: "inherit",
+      cursor: "pointer",
       "&:hover": {
         bgcolor: isPremium ? "white.main" : "grey2.main",
         border: isPremium ? "none" : "2px solid transparent"

package/dist/index.umd.js

@@ -341,6 +341,11 @@
         variant: "contained",
         color: "seafoam",
         size: "small",
+        sx: {
+          marginTop: "4px",
+          padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+          fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+        },
         onClick: function onClick() {
           return setOpenSave(false);
         }
@@ -354,7 +359,9 @@
         sx: {
           ".MuiButton-startIcon": {
             margin: "0"
-          }
+          },
+          padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+          fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
         },
         size: "small",
         startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
@@ -366,6 +373,11 @@
       }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(Button, {
         variant: "text",
         color: "grey4",
+        sx: {
+          marginTop: "4px",
+          padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "0px" : undefined,
+          fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
+        },
         onClick: function onClick() {
           handleClickOrganize();
         }
@@ -373,7 +385,7 @@
     };
 
     var _templateObject$f;
-    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"])));
+    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"])));
 
     var BlerpTitleRow = function BlerpTitleRow(_ref) {
       var bite = _ref.bite,
@@ -938,7 +950,7 @@
         width: "100%",
         justifyContent: "space-between",
         alignItems: "center",
-        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.
+        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.
         ,
         position: sizeParams.buttonSize === "small" && "absolute"
       }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -949,7 +961,19 @@
           top: "30px",
           left: "10px"
         }
-      }, 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, {
+      }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(Text, {
+        fontSize: "8px",
+        color: isPremium ? "waxwing.main" : "grey5.main",
+        sx: {
+          maxWidth: "24px",
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          position: "absolute",
+          top: "56px",
+          right: "4px",
+          opacity: isBlerpHovered ? 1 : 0.6
+        }
+      }, (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, {
         title: "May contain potentially sensitive content",
         sx: {
           wordWrap: "break-word"
@@ -976,7 +1000,7 @@
           borderRadius: "12px",
           height: "24px",
           position: "relative",
-          left: "4px"
+          left: "2px"
         }
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
@@ -996,7 +1020,7 @@
         },
         sx: {
           color: "notBlack.main",
-          padding: "4px"
+          padding: "2px"
         }
       }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
         fontSize: "small"
@@ -1009,7 +1033,7 @@
         },
         sx: {
           color: "notBlack.main",
-          padding: "4px"
+          padding: "2px"
         }
       }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddRounded, {
         fontSize: "small"
@@ -1186,10 +1210,20 @@
         reactionSize: "24px",
         buttonSize: "large"
       };
+      var tinySize = {
+        width: 110,
+        height: 120,
+        fontSize: "10px",
+        imageSize: "60px",
+        reactionSpacing: 0.5,
+        reactionPadding: "1px",
+        reactionSize: "11px",
+        buttonSize: "small"
+      };
       var smallSize = {
         width: 150,
         height: 160,
-        fontSize: "14px",
+        fontSize: "12px",
         imageSize: "90px",
         reactionSpacing: 1,
         reactionPadding: "3px",
@@ -1218,7 +1252,9 @@
       };
 
       if (!variantSize) {
-        if (size.width <= 400) {
+        if (size.width <= 340) {
+          sizeParams = tinySize;
+        } else if (size.width <= 600) {
           sizeParams = smallSize;
         } else if (size.width <= 900) {
           sizeParams = mediumSize;
@@ -1232,6 +1268,8 @@
           sizeParams = mediumSize;
         } else if (variantSize === "large") {
           sizeParams = largeSize;
+        } else if (variantSize === "tiny") {
+          sizeParams = tinySize;
         }
       }
 
@@ -1264,7 +1302,7 @@
           backgroundColor: isPremium ? "white.main" : isSelected ? "grey2.main" : "white.main",
           transition: "0.3s",
           position: "relative",
-          cursor: "inherit",
+          cursor: "pointer",
           "&:hover": {
             bgcolor: isPremium ? "white.main" : "grey2.main",
             border: isPremium ? "none" : "2px solid transparent"

package/package.json

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