@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/Blerp/BlerpImageRow.js

@@ -1,29 +1,59 @@
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var iconsMaterial = require('@mui/icons-material');
-var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var styled = require('styled-components');
 var index = require('../index.js');
+var Theme = require('../Theme.js');
 var Icons = require('../Icons/Icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
-var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const BlerpImage = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\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__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\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__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\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__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\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__default["default"](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__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, _extends__default["default"]({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: "inline-block",
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React__default["default"].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 {
@@ -39,25 +69,49 @@ const BlerpImageRow = _ref => {
     handleClickLock,
     setOpenSave,
     sizeParams
-  } = _ref;
+  } = _ref2;
   const [actionButtonHovered, setActionButtonHovered] = React.useState(false);
+  const theme = Theme.useBlerpTheme();
 
   if (bite.visibility === "PRIVATE" && !isOwner) {
-    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
       direction: "row",
       marginTop: sizeParams.buttonSize === "small" && "28px"
-    }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
-      style: {
+    }, /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(BlerpImageScrimPrivate, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].createElement(index.Text, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
       sx: {
         display: "none",
         fontWeight: "regular",
@@ -65,51 +119,93 @@ const BlerpImageRow = _ref => {
         lineHeight: "20px",
         textAlign: "center"
       }
-    }, "No longer avaliable"), /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+    }, "No longer avaliable"), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      path: paths.lock,
+      size: "25px",
       sx: {
-        fontSize: "25px",
         color: "white.override"
       }
     }))));
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     marginTop: sizeParams.buttonSize === "small" && "28px"
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
-    style: {
+  }, /*#__PURE__*/React__default["default"].createElement(index.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__default['default'].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__default["default"].createElement(index.Box, {
+    onClick: () => handleClickPlay(),
+    sx: {
+      height: sizeParams.imageSize,
       width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    onClick: () => handleClickPlay()
-  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.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__default["default"].createElement(Icon, {
+    path: paths.pauseCircle,
+    size: "50px",
     sx: {
-      width: "50px",
-      height: "50px",
       color: "white.override"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(Icons.PlayOutlineIcon, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Icons.PlayOutlineIcon, {
     sx: {
       width: "40px",
       height: "40px",
       color: "white.override"
     }
-  }), isPremium && isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
-    isPremium: isPremium,
-    isLocked: isLocked,
+  }), isPremium && isLocked ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    className: "save-container",
     onClick: e => {
       e.stopPropagation();
       handleClickLock();
     },
     onMouseEnter: () => setActionButtonHovered(true),
-    onMouseLeave: () => setActionButtonHovered(false)
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    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__default["default"].createElement(index.Stack, {
     sx: {
       position: "relative",
       top: "1px",
@@ -117,9 +213,9 @@ const BlerpImageRow = _ref => {
         color: "white.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Unlock"
-  }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(Icons.OpenLockIcon, {
+  }, actionButtonHovered ? /*#__PURE__*/React__default["default"].createElement(Icons.OpenLockIcon, {
     sx: {
       fontSize: "20px",
       color: "white.override",
@@ -127,14 +223,14 @@ const BlerpImageRow = _ref => {
       bottom: "1px",
       left: "1px"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.lock,
+    size: "16px",
     sx: {
-      fontSize: "16px",
       color: "notBlack.override"
     }
-  })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
-    isPremium: isPremium,
-    isLocked: isLocked,
+  })))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, primaryActionButton ? primaryActionButton : /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    className: "save-container",
     onClick: e => {
       e.stopPropagation();
 
@@ -145,8 +241,29 @@ 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__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "relative",
       top: "1px",
@@ -157,11 +274,13 @@ const BlerpImageRow = _ref => {
         color: "white.override"
       }
     }
-  }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+  }, bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.bookmark,
+    size: "18px",
     sx: {
-      fontSize: "18px"
+      color: "inherit"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(Icons.BookmarkAddRounded, null)))))));
+  }) : /*#__PURE__*/React__default["default"].createElement(Icons.BookmarkAddRounded, null)))))));
 };
 
 module.exports = BlerpImageRow;

package/dist/cjs/Blerp/BlerpSavePopup.js

@@ -1,23 +1,25 @@
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var BookmarkRemoveOutlinedIcon = require('@mui/icons-material/BookmarkRemoveOutlined');
-var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 var React = require('react');
-var styled = require('styled-components');
-var Blerp = require('../Blerp.js');
 var index = require('../index.js');
+var Theme = require('../Theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
-var CloseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseRoundedIcon);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
-const ReactionButton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\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 {
@@ -32,7 +34,8 @@ const BlerpSavePopup = _ref => {
     organizeButton,
     anchorRef
   } = _ref;
-  return /*#__PURE__*/React__default['default'].createElement(index.Popover, {
+  const theme = Theme.useBlerpTheme();
+  return /*#__PURE__*/React__default["default"].createElement(index.Popover, {
     open: openSave,
     onClose: () => setOpenSave(false),
     anchorEl: anchorRef.current,
@@ -57,59 +60,60 @@ const BlerpSavePopup = _ref => {
       vertical: "center",
       horizontal: "center"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(CloseRoundedIcon__default['default'], {
-    onClick: () => {
-      setOpenSave(false);
-    },
-    sx: {
-      color: "white.override",
-      position: "absolute",
-      top: "0",
-      right: "0"
-    }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Grid, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(5, 1fr)",
     alignItems: "center",
     marginTop: "16px",
     gap: 1
-  }, Object.keys(Blerp.reactionIconUrls).map(reaction => {
+  }, Object.keys(reactionIconUrls).map(reaction => {
     var _bite$userReactions;
 
-    return /*#__PURE__*/React__default['default'].createElement(index.Grid, {
+    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__default["default"].createElement(index.Grid, {
       key: "".concat(reaction, "-button"),
       gridColumn: "span 1",
       display: "flex",
       justifyContent: "center"
-    }, /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
       title: reaction
-    }, /*#__PURE__*/React__default['default'].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__default["default"].createElement(index.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__default['default'].createElement("img", {
+    }, /*#__PURE__*/React__default["default"].createElement("img", {
       alt: "reaction-".concat(reaction),
       width: "100%",
       height: "100%",
-      src: Blerp.reactionIconUrls[reaction]
+      src: reactionIconUrls[reaction]
     }))));
-  })), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  })), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     justifyContent: "space-around",
     alignItems: "center",
     direction: "row",
     width: "100%",
     flexWrap: "wrap"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Button, {
     variant: "contained",
     color: "seafoam",
     size: "small",
@@ -119,7 +123,7 @@ const BlerpSavePopup = _ref => {
       fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
     },
     onClick: () => setOpenSave(false)
-  }, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React__default['default'].createElement(index.Button, {
+  }, "DONE"), unsaveButton ? unsaveButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (!bite.isPremium || !bite.owned) && /*#__PURE__*/React__default["default"].createElement(index.Button, {
     onClick: () => {
       handleClickUnsave();
       setOpenSave(false);
@@ -134,13 +138,13 @@ const BlerpSavePopup = _ref => {
       fontSize: (sizeParams === null || sizeParams === void 0 ? void 0 : sizeParams.buttonSize) === "small" ? "10px" : "16px"
     },
     size: "small",
-    startIcon: /*#__PURE__*/React__default['default'].createElement(BookmarkRemoveOutlinedIcon__default['default'], {
+    startIcon: /*#__PURE__*/React__default["default"].createElement(BookmarkRemoveOutlinedIcon, {
       sx: {
         color: "white.override",
         margin: "0"
       }
     })
-  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default['default'].createElement(index.Button, {
+  }, "UNSAVE")), organizeButton ? organizeButton : /*#__PURE__*/React__default["default"].createElement(index.Button, {
     variant: "text",
     color: "grey4",
     sx: {

package/dist/cjs/Blerp/BlerpTitleRow.js

@@ -1,18 +1,11 @@
 'use strict';
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var React = require('react');
-var styled = require('styled-components');
 var index = require('../index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
-const LineClamp = styled__default['default'].div(_templateObject || (_templateObject = _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"])));
 
 const BlerpTitleRow = _ref => {
   let {
@@ -27,7 +20,7 @@ const BlerpTitleRow = _ref => {
   } = _ref;
 
   if (bite.visibility === "PRIVATE" && !isOwner) {
-    return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
       direction: "row",
       sx: {
         width: "90%",
@@ -37,17 +30,25 @@ const BlerpTitleRow = _ref => {
         justifyContent: "center",
         margin: "auto"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(LineClamp, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
       onClick: e => {
         if (handleClickTitle) {
           e.stopPropagation();
           handleClickTitle();
         }
+      },
+      sx: {
+        display: "-webkit-box",
+        WebkitLineClamp: "2",
+        WebkitBoxOrient: "vertical",
+        margin: 0,
+        textOverflow: "ellipsis",
+        overflow: "hidden"
       }
-    }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    }, /*#__PURE__*/React__default["default"].createElement(index.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"
@@ -58,7 +59,7 @@ const BlerpTitleRow = _ref => {
     }, title || bite.title)));
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       width: "90%",
@@ -69,22 +70,30 @@ const BlerpTitleRow = _ref => {
       justifyContent: "center",
       margin: "auto"
     }
-  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(LineClamp, {
+  }, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
+    },
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "2",
+      WebkitBoxOrient: "vertical",
+      margin: 0,
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
-  }, /*#__PURE__*/React__default['default'].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
-    color: isPremium ? "white.override" : "notBlack.main",
+    color: isPremium ? "white.override" : "white.override",
     sx: {
       ":hover": {
         textDecoration: handleClickTitle ? "underline" : "none"
@@ -92,17 +101,25 @@ const BlerpTitleRow = _ref => {
       textOverflow: "ellipsis"
     },
     lineHeight: sizeParams.buttonSize === "small" ? "16px" : "24px"
-  }, title || bite.title))) : /*#__PURE__*/React__default['default'].createElement(LineClamp, {
+  }, title || bite.title))) : /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
+    },
+    sx: {
+      display: "-webkit-box",
+      WebkitLineClamp: "2",
+      WebkitBoxOrient: "vertical",
+      margin: 0,
+      textOverflow: "ellipsis",
+      overflow: "hidden"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
-    color: isPremium ? "white.override" : "notBlack.main",
+    color: isPremium ? "white.override" : "white.override",
     sx: {
       ":hover": {
         textDecoration: handleClickTitle ? "underline" : "none"