@blerp/design 1.3.16 → 1.4.1

package/dist/esm/Blerp/BlerpImageRow.js

@@ -1,19 +1,50 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded } from '@mui/icons-material';
-import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import { Stack, Text, Tooltip } from '../index.js';
+import { Stack, Box, Text, Tooltip } from '../index.js';
+import { useBlerpTheme } from '../Theme.js';
 import { PlayOutlineIcon, OpenLockIcon, BookmarkAddRounded } from '../Icons/Icons.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 150px;\n  width: 150px;\n  background-image: url(", ");\n  background-size: cover;\n  border-radius: 50%;\n  position: relative;\n  transition: 0.2s;\n\n  &:hover {\n    transform: scale(1.1);\n  }\n"])), props => props.url);
-const SaveContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 20px;\n  height: 20px;\n  opacity: 1;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 5px;\n  transition: 0.3s;\n  background-color: ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover svg {\n    color: ", ";\n  }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
-const BlerpImageScrim = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 150px;\n  width: 150px;\n  background-color: ", "70;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  transition: 0.4s;\n\n  &:hover {\n    background-color: ", "98;\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
-const BlerpImageScrimPrivate = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 150px;\n  width: 150px;\n  background-color: ", "70;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  transition: 0.4s;\n\n  &:hover {\n    background-color: ", "98;\n  }\n\n  &:hover ", " {\n    opacity: 1;\n  }\n\n  &:hover p {\n    display: block;\n  }\n  &:hover svg {\n    display: none;\n  }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
+const _excluded = ["path", "sx", "size"];
 
-const BlerpImageRow = _ref => {
+function ownKeys(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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const Icon = _ref => {
+  let {
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: "inline-block",
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  // LockRounded
+  lock: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z",
+  // PauseCircleOutlineRounded
+  pauseCircle: "M13 16h-2V8h2v8zm3-12c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z",
+  // BookmarkOutlined
+  bookmark: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+};
+
+const BlerpImageRow = _ref2 => {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
 
   let {
@@ -29,23 +60,47 @@ const BlerpImageRow = _ref => {
     handleClickLock,
     setOpenSave,
     sizeParams
-  } = _ref;
+  } = _ref2;
   const [actionButtonHovered, setActionButtonHovered] = useState(false);
+  const theme = useBlerpTheme();
 
   if (bite.visibility === "PRIVATE" && !isOwner) {
     return /*#__PURE__*/React.createElement(Stack, {
       direction: "row",
       marginTop: sizeParams.buttonSize === "small" && "28px"
-    }, /*#__PURE__*/React.createElement(BlerpImage, {
-      style: {
+    }, /*#__PURE__*/React.createElement(Box, {
+      sx: {
+        height: sizeParams.imageSize,
         width: sizeParams.imageSize,
-        height: sizeParams.imageSize
+        backgroundSize: "cover",
+        borderRadius: "50%",
+        position: "relative",
+        transition: "0.2s",
+        "&:hover": {
+          transform: "scale(1.1)"
+        }
       }
-    }, /*#__PURE__*/React.createElement(BlerpImageScrimPrivate, {
+    }, /*#__PURE__*/React.createElement(Box, {
       id: "blerp-image-scrim-private",
-      style: {
+      sx: {
+        height: sizeParams.imageSize,
         width: sizeParams.imageSize,
-        height: sizeParams.imageSize
+        backgroundColor: "".concat(theme.colors.grey3, "70"),
+        position: "absolute",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        transition: "0.4s",
+        "&:hover": {
+          backgroundColor: "".concat(theme.colors.grey3, "98")
+        },
+        "&:hover p": {
+          display: "block"
+        },
+        "&:hover svg": {
+          display: "none"
+        }
       }
     }, /*#__PURE__*/React.createElement(Text, {
       sx: {
@@ -55,9 +110,10 @@ const BlerpImageRow = _ref => {
         lineHeight: "20px",
         textAlign: "center"
       }
-    }, "No longer avaliable"), /*#__PURE__*/React.createElement(LockRoundedIcon, {
+    }, "No longer avaliable"), /*#__PURE__*/React.createElement(Icon, {
+      path: paths.lock,
+      size: "25px",
       sx: {
-        fontSize: "25px",
         color: "white.override"
       }
     }))));
@@ -66,22 +122,43 @@ const BlerpImageRow = _ref => {
   return /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     marginTop: sizeParams.buttonSize === "small" && "28px"
-  }, /*#__PURE__*/React.createElement(BlerpImage, {
-    style: {
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      height: sizeParams.imageSize,
       width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    url: (bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.local) || (bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url) || (bite === null || bite === void 0 ? void 0 : (_bite$giphy = bite.giphy) === null || _bite$giphy === void 0 ? void 0 : _bite$giphy.gif)
-  }, /*#__PURE__*/React.createElement(BlerpImageScrim, {
-    style: {
+      backgroundImage: "url(".concat((bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.local) || (bite === null || bite === void 0 ? void 0 : (_bite$image2 = bite.image) === null || _bite$image2 === void 0 ? void 0 : (_bite$image2$original = _bite$image2.original) === null || _bite$image2$original === void 0 ? void 0 : _bite$image2$original.url) || (bite === null || bite === void 0 ? void 0 : (_bite$giphy = bite.giphy) === null || _bite$giphy === void 0 ? void 0 : _bite$giphy.gif), ")"),
+      backgroundSize: "cover",
+      borderRadius: "50%",
+      position: "relative",
+      transition: "0.2s",
+      "&:hover": {
+        transform: "scale(1.1)"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    onClick: () => handleClickPlay(),
+    sx: {
+      height: sizeParams.imageSize,
       width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    onClick: () => handleClickPlay()
-  }, playingState === "playing" ? /*#__PURE__*/React.createElement(PauseCircleOutlineRounded, {
+      backgroundColor: "".concat(theme.colors.grey6Override, "70"),
+      position: "absolute",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: "50%",
+      transition: "0.4s",
+      cursor: "pointer",
+      "&:hover": {
+        backgroundColor: "".concat(theme.colors.grey6Override, "98")
+      },
+      "&:hover .save-container": {
+        opacity: 1
+      }
+    }
+  }, playingState === "playing" ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.pauseCircle,
+    size: "50px",
     sx: {
-      width: "50px",
-      height: "50px",
       color: "white.override"
     }
   }) : /*#__PURE__*/React.createElement(PlayOutlineIcon, {
@@ -90,15 +167,35 @@ const BlerpImageRow = _ref => {
       height: "40px",
       color: "white.override"
     }
-  }), isPremium && isLocked ? /*#__PURE__*/React.createElement(SaveContainer, {
-    isPremium: isPremium,
-    isLocked: isLocked,
+  }), isPremium && isLocked ? /*#__PURE__*/React.createElement(Box, {
+    className: "save-container",
     onClick: e => {
       e.stopPropagation();
       handleClickLock();
     },
     onMouseEnter: () => setActionButtonHovered(true),
-    onMouseLeave: () => setActionButtonHovered(false)
+    onMouseLeave: () => setActionButtonHovered(false),
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: "20px",
+      height: "20px",
+      opacity: 1,
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "5px",
+      transition: "0.3s",
+      backgroundColor: theme.colors.whiteOverride,
+      "&:hover": {
+        backgroundColor: theme.colors.seafoam
+      },
+      "&:hover svg": {
+        color: theme.colors.white
+      }
+    }
   }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
       position: "relative",
@@ -117,14 +214,14 @@ const BlerpImageRow = _ref => {
       bottom: "1px",
       left: "1px"
     }
-  }) : /*#__PURE__*/React.createElement(LockRoundedIcon, {
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    path: paths.lock,
+    size: "16px",
     sx: {
-      fontSize: "16px",
       color: "notBlack.override"
     }
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(SaveContainer, {
-    isPremium: isPremium,
-    isLocked: isLocked,
+  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(Box, {
+    className: "save-container",
     onClick: e => {
       e.stopPropagation();
 
@@ -135,6 +232,27 @@ const BlerpImageRow = _ref => {
         !(bite !== null && bite !== void 0 && bite.saved) && handleClickSave();
         setOpenSave(true);
       }
+    },
+    sx: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      width: "20px",
+      height: "20px",
+      opacity: 1,
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "5px",
+      transition: "0.3s",
+      backgroundColor: theme.colors.whiteOverride,
+      "&:hover": {
+        backgroundColor: isPremium ? theme.colors.starling : theme.colors.seafoam
+      },
+      "&:hover svg": {
+        color: theme.colors.white
+      }
     }
   }, /*#__PURE__*/React.createElement(Stack, {
     sx: {
@@ -147,11 +265,13 @@ const BlerpImageRow = _ref => {
         color: "white.override"
       }
     }
-  }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+  }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.bookmark,
+    size: "18px",
     sx: {
-      fontSize: "18px"
+      color: "inherit"
     }
   }) : /*#__PURE__*/React.createElement(BookmarkAddRounded, null)))))));
 };
 
-export default BlerpImageRow;
+export { BlerpImageRow as default };

package/dist/esm/Blerp/BlerpSavePopup.js

@@ -1,13 +1,19 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import BookmarkRemoveOutlinedIcon from '@mui/icons-material/BookmarkRemoveOutlined';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import React from 'react';
-import styled from 'styled-components';
-import { reactionIconUrls } from '../Blerp.js';
-import { Popover, Grid, Tooltip, Stack, Button } from '../index.js';
+import { Popover, Grid, Tooltip, Box, Stack, Button } from '../index.js';
+import { useBlerpTheme } from '../Theme.js';
 
-var _templateObject;
-const ReactionButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5Override, props => props.theme.colors.ibisRed);
+const reactionIconUrls = {
+  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
+  MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg",
+  NSFW: "https://cdn.blerp.com/blerp_products/Icons/NSFW%403x.svg",
+  SAD: "https://cdn.blerp.com/blerp_products/Icons/Sad.svg",
+  SCARY: "https://cdn.blerp.com/blerp_products/Icons/Scary%403x.svg",
+  ANGRY: "https://cdn.blerp.com/blerp_products/Icons/Anger%403x.svg",
+  HAPPY: "https://cdn.blerp.com/blerp_products/Icons/Happy%403x.svg",
+  TROLL: "https://cdn.blerp.com/blerp_products/Icons/Troll%403x.svg",
+  SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
+  LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
+};
 
 const BlerpSavePopup = _ref => {
   let {
@@ -22,6 +28,7 @@ const BlerpSavePopup = _ref => {
     organizeButton,
     anchorRef
   } = _ref;
+  const theme = useBlerpTheme();
   return /*#__PURE__*/React.createElement(Popover, {
     open: openSave,
     onClose: () => setOpenSave(false),
@@ -47,17 +54,7 @@ const BlerpSavePopup = _ref => {
       vertical: "center",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React.createElement(CloseRoundedIcon, {
-    onClick: () => {
-      setOpenSave(false);
-    },
-    sx: {
-      color: "white.override",
-      position: "absolute",
-      top: "0",
-      right: "0"
-    }
-  }), /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(5, 1fr)",
     alignItems: "center",
@@ -66,6 +63,7 @@ const BlerpSavePopup = _ref => {
   }, Object.keys(reactionIconUrls).map(reaction => {
     var _bite$userReactions;
 
+    const isActive = bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction);
     return /*#__PURE__*/React.createElement(Grid, {
       key: "".concat(reaction, "-button"),
       gridColumn: "span 1",
@@ -73,19 +71,29 @@ const BlerpSavePopup = _ref => {
       justifyContent: "center"
     }, /*#__PURE__*/React.createElement(Tooltip, {
       title: reaction
-    }, /*#__PURE__*/React.createElement(ReactionButton, {
-      active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : _bite$userReactions.reactions.includes(reaction),
-      style: {
-        padding: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionPadding,
-        width: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize,
-        height: sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize
-      },
+    }, /*#__PURE__*/React.createElement(Box, {
       onClick: () => {
         var _bite$userReactions2;
 
         let isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : _bite$userReactions2.reactions.includes(reaction);
         handleClickReaction(reaction, isRemove);
         setOpenSave(false);
+      },
+      sx: {
+        borderRadius: "50%",
+        width: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize) || "30px",
+        height: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionSize) || "30px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.reactionPadding) || "8px",
+        transition: "0.2s",
+        marginRight: 0,
+        cursor: "pointer",
+        backgroundColor: isActive ? theme.colors.ibisRed : theme.colors.grey5Override,
+        "&:hover": {
+          backgroundColor: theme.colors.ibisRed
+        }
       }
     }, /*#__PURE__*/React.createElement("img", {
       alt: "reaction-".concat(reaction),
@@ -144,4 +152,4 @@ const BlerpSavePopup = _ref => {
   }, "Organize")));
 };
 
-export default BlerpSavePopup;
+export { BlerpSavePopup as default };

package/dist/esm/Blerp/BlerpTitleRow.js

@@ -1,10 +1,5 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import React from 'react';
-import styled from 'styled-components';
-import { Stack, Text } from '../index.js';
-
-var _templateObject;
-const LineClamp = styled.div(_templateObject || (_templateObject = _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"])));
+import { Stack, Box, Text } from '../index.js';
 
 const BlerpTitleRow = _ref => {
   let {
@@ -29,17 +24,25 @@ const BlerpTitleRow = _ref => {
         justifyContent: "center",
         margin: "auto"
       }
-    }, /*#__PURE__*/React.createElement(LineClamp, {
+    }, /*#__PURE__*/React.createElement(Box, {
       onClick: e => {
         if (handleClickTitle) {
           e.stopPropagation();
           handleClickTitle();
         }
+      },
+      sx: {
+        display: "-webkit-box",
+        WebkitLineClamp: "2",
+        WebkitBoxOrient: "vertical",
+        margin: 0,
+        textOverflow: "ellipsis",
+        overflow: "hidden"
       }
     }, /*#__PURE__*/React.createElement(Text, {
       textAlign: "center",
       fontSize: sizeParams.fontSize,
-      color: isPremium && !isLocked ? "white.main" : "notBlack.main",
+      color: isPremium && !isLocked ? "white.override" : "white.override",
       sx: {
         ":hover": {
           textDecoration: handleClickTitle ? "underline" : "none"
@@ -61,12 +64,20 @@ const BlerpTitleRow = _ref => {
       justifyContent: "center",
       margin: "auto"
     }
-  }, isLinkTitle ? /*#__PURE__*/React.createElement(LineClamp, {
+  }, isLinkTitle ? /*#__PURE__*/React.createElement(Box, {
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
+    },
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "2",
+      WebkitBoxOrient: "vertical",
+      margin: 0,
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
   }, /*#__PURE__*/React.createElement("a", {
     href: "/soundbites/".concat(bite._id),
@@ -76,7 +87,7 @@ const BlerpTitleRow = _ref => {
   }, /*#__PURE__*/React.createElement(Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
-    color: isPremium ? "white.override" : "notBlack.main",
+    color: isPremium ? "white.override" : "white.override",
     sx: {
       ":hover": {
         textDecoration: handleClickTitle ? "underline" : "none"
@@ -84,17 +95,25 @@ const BlerpTitleRow = _ref => {
       textOverflow: "ellipsis"
     },
     lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
-  }, title || bite.title))) : /*#__PURE__*/React.createElement(LineClamp, {
+  }, title || bite.title))) : /*#__PURE__*/React.createElement(Box, {
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
+    },
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "2",
+      WebkitBoxOrient: "vertical",
+      margin: 0,
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
   }, /*#__PURE__*/React.createElement(Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
-    color: isPremium ? "white.override" : "notBlack.main",
+    color: isPremium ? "white.override" : "white.override",
     sx: {
       ":hover": {
         textDecoration: handleClickTitle ? "underline" : "none"
@@ -105,4 +124,4 @@ const BlerpTitleRow = _ref => {
   }, title || bite.title)));
 };
 
-export default BlerpTitleRow;
+export { BlerpTitleRow as default };

package/dist/esm/Blerp/BlerpTopRow.js

@@ -1,13 +1,82 @@
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
-import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
 import { reactionIconUrls } from '../Blerp.js';
 import { UnsafeIcon, BookmarkAddRounded, DiamondIcon, TwitchBitIcon, ChannelPointsIcon } from '../Icons/Icons.js';
 import { Stack, Text, Tooltip, IconButton } from '../index.js';
 
-const BlerpTopRow = _ref => {
+function ownKeys(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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const IconLock = _ref => {
+  let {
+    sx = {}
+  } = _ref;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: sx.fontSize || "24px"
+    }, sx)
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+  }));
+};
+
+const IconBookmarkFilled = _ref2 => {
+  let {
+    fontSize = "small",
+    sx = {}
+  } = _ref2;
+  const size = fontSize === "small" ? "20px" : "24px";
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: sx
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }));
+};
+
+const IconMoreHoriz = _ref3 => {
+  let {
+    sx = {}
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: "24px"
+    }, sx)
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+  }));
+};
+
+const IconVisibilityOff = _ref4 => {
+  let {
+    sx = {}
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: sx.fontSize || "24px"
+    }, sx)
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+  }));
+};
+
+const BlerpTopRow = _ref5 => {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
   let {
@@ -22,7 +91,7 @@ const BlerpTopRow = _ref => {
     isLocked,
     isBlerpHovered,
     handleClickThreeDot
-  } = _ref;
+  } = _ref5;
 
   function formatNumber(n) {
     var ranges = [{
@@ -50,8 +119,7 @@ const BlerpTopRow = _ref => {
     width: "100%",
     justifyContent: "space-between",
     alignItems: "center",
-    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.
-    ,
+    height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px",
     position: sizeParams.buttonSize === "small" && "absolute"
   }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
@@ -122,7 +190,7 @@ const BlerpTopRow = _ref => {
       color: "notBlack.main",
       padding: "2px"
     }
-  }, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+  }, /*#__PURE__*/React.createElement(IconBookmarkFilled, {
     fontSize: "small"
   })) : /*#__PURE__*/React.createElement(IconButton, {
     onClick: e => {
@@ -152,7 +220,8 @@ const BlerpTopRow = _ref => {
     width: "40px",
     height: "20px"
   }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index) => /*#__PURE__*/React.createElement(Tooltip, {
-    title: reaction
+    title: reaction,
+    key: index
   }, /*#__PURE__*/React.createElement("img", {
     alt: reaction,
     className: "reaction-icon-blrp",
@@ -206,17 +275,17 @@ const BlerpTopRow = _ref => {
     }
   }, bite.visibility === "UNLISTED" && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Unlisted"
-  }, /*#__PURE__*/React.createElement(VisibilityOffRoundedIcon, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconVisibilityOff, {
     sx: {
       fontSize: "15px"
     }
-  })), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
+  }))), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Private"
-  }, /*#__PURE__*/React.createElement(LockRoundedIcon, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconLock, {
     sx: {
       fontSize: "15px"
     }
-  }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React.createElement(React.Fragment, null, isBlerpHovered ? /*#__PURE__*/React.createElement(IconButton, {
+  })))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React.createElement(React.Fragment, null, isBlerpHovered ? /*#__PURE__*/React.createElement(IconButton, {
     onClick: e => {
       handleClickThreeDot(e);
     },
@@ -230,7 +299,7 @@ const BlerpTopRow = _ref => {
         backgroundColor: "grey3.main"
       }
     }
-  }, /*#__PURE__*/React.createElement(MoreHorizRoundedIcon, null)) : /*#__PURE__*/React.createElement(React.Fragment, null))));
+  }, /*#__PURE__*/React.createElement(IconMoreHoriz, null)) : /*#__PURE__*/React.createElement(React.Fragment, null))));
 };
 
-export default BlerpTopRow;
+export { BlerpTopRow as default };