@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/BlerpListView.js

@@ -2,38 +2,179 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var iconsMaterial = require('@mui/icons-material');
-var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
-var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
-var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
-require('prop-types');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var reactPalette = require('react-palette');
-var styled = require('styled-components');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 var BlerpListViewPremium = require('./BlerpListViewPremium.js');
-var Icons = require('./Icons/Icons.js');
-var index = require('./index.js');
+var helpers = require('./helpers.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 BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
-var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
-var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-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: 8px; */\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 zoomIn = styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    height: 100%;\n    width: 100%;\n    position: absolute;\n    border-radius: 8px;\n    transform: scale(0);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-around;\n    background-color: ", "D3;\n    border: 2px solid ", "D3;\n    backdrop-filter: blur(4px);\n    animation: ", " 0.2s forwards;\n"])), props => props.theme.colors.notBlack, props => props.theme.colors.notBlack, zoomIn);
-const SaveContainer = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\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"])), props => props.theme.colors.white);
-const BlerpImageScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride, SaveContainer);
-styled__default['default'].div(_templateObject6 || (_templateObject6 = _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"])));
-const BlerpListView = _ref => {
-  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
+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 PauseIcon = _ref => {
+  let {
+    size = 30,
+    color = "white"
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "10",
+    y1: "15",
+    x2: "10",
+    y2: "9"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "14",
+    y1: "15",
+    x2: "14",
+    y2: "9"
+  }));
+};
+
+const PlayIcon = _ref2 => {
+  let {
+    size = 30,
+    color = "white"
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React__default["default"].createElement("polygon", {
+    points: "10 8 16 12 10 16 10 8",
+    fill: color
+  }));
+};
+
+const BookmarkFilledIcon = _ref3 => {
+  let {
+    size = 24,
+    color = "#1a1a1a"
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }));
+};
+
+const BookmarkAddIcon = _ref4 => {
+  let {
+    size = 24,
+    color = "#1a1a1a"
+  } = _ref4;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12",
+    y2: "14"
+  }), /*#__PURE__*/React__default["default"].createElement("line", {
+    x1: "9",
+    y1: "11",
+    x2: "15",
+    y2: "11"
+  }));
+};
+
+const MoreHorizIcon = _ref5 => {
+  let {
+    size = 24,
+    color = "#1a1a1a"
+  } = _ref5;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "6",
+    cy: "12",
+    r: "2"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "2"
+  }), /*#__PURE__*/React__default["default"].createElement("circle", {
+    cx: "18",
+    cy: "12",
+    r: "2"
+  }));
+}; // Inline styled button component
+
+
+const IconButton = _ref6 => {
+  let {
+    onClick,
+    style,
+    children
+  } = _ref6;
+  const [isHovered, setIsHovered] = React.useState(false);
+
+  const baseStyle = _objectSpread({
+    backgroundColor: "white",
+    padding: "5px",
+    marginRight: "10px",
+    border: "none",
+    borderRadius: "50%",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "background-color 0.2s"
+  }, style);
+
+  const hoverStyle = isHovered ? {
+    backgroundColor: "#e0e0e0"
+  } : {};
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: onClick,
+    style: _objectSpread(_objectSpread({}, baseStyle), hoverStyle),
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  }, children);
+};
+
+const BlerpListView = _ref7 => {
+  var _bite$image, _bite$image$original, _theme$colors, _bite$image2, _bite$image2$original, _theme$colors2, _theme$colors3;
 
   let {
     bite,
@@ -60,11 +201,21 @@ const BlerpListView = _ref => {
     isPremium,
     handleClickLock,
     handleClickPremium
-  } = _ref;
+  } = _ref7;
   const [openSave, setOpenSave] = React.useState(false);
-  reactPalette.usePalette(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.url);
-  const theme = React.useContext(styled.ThemeContext);
+  const [isBoxHovered, setIsBoxHovered] = React.useState(false);
+  const [isImageHovered, setIsImageHovered] = React.useState(false);
+  const [isScrimHovered, setIsScrimHovered] = React.useState(false);
+  const [isTitleHovered, setIsTitleHovered] = React.useState(false);
+  helpers.useCustomPalette(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.url);
+  const theme = Theme.useBlerpTheme();
   const size = ScreenSizeHook.useWindowSize();
+  const colors = {
+    grey2: "#2a2a2a",
+    grey3: "#3a3a3a",
+    notBlack: "#1a1a1a",
+    white: "#ffffff"
+  };
 
   let sizeParams;
   const smallSize = {
@@ -132,7 +283,7 @@ const BlerpListView = _ref => {
   }
 
   if (isPremium) {
-    return /*#__PURE__*/React__default['default'].createElement(BlerpListViewPremium.BlerpListViewPremium, {
+    return /*#__PURE__*/React__default["default"].createElement(BlerpListViewPremium.BlerpListViewPremium, {
       bite: bite,
       variantSize: variantSize,
       isSelected: isSelected,
@@ -160,198 +311,197 @@ const BlerpListView = _ref => {
     });
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    sx: {
-      width: sizeParams.width,
-      minWidth: fluid && "300px",
-      borderRadius: "8px",
-      border: "2px transparent",
-      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
-      backgroundOrigin: "border-box",
-      backgroundClip: "content-box, border-box",
-      boxShadow: "2px 2px 4px 0px #999999a1;",
-      transition: "0.3s",
-      "&:hover": {
-        bgcolor: hoverColor ? hoverColor : "grey3.main"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  const outerBoxStyle = {
+    width: sizeParams.width,
+    minWidth: fluid ? "300px" : undefined,
+    borderRadius: "8px",
+    border: "2px transparent",
+    backgroundColor: isBoxHovered ? hoverColor || colors.grey3 : backgroundColor || colors.grey2,
+    backgroundOrigin: "border-box",
+    backgroundClip: "content-box, border-box",
+    boxShadow: "2px 2px 4px 0px #999999a1",
+    transition: "0.3s"
+  };
+  const innerBoxStyle = {
+    width: "calc(100% - 4px)",
+    height: sizeParams.height,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: "8px",
+    border: "2px solid transparent",
+    borderRightWidth: "0px",
+    borderLeftWidth: "0px",
+    margin: "0 auto",
+    borderBottomColor: extraInfoComponent ? (theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.grey3) || colors.grey3 : "transparent",
+    transition: "0.3s",
+    position: "relative"
+  };
+  const imageContainerStyle = {
+    height: sizeParams.imageSize,
+    width: sizeParams.imageSize,
+    backgroundImage: "url(".concat(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, ")"),
+    backgroundSize: "cover",
+    borderRadius: "50%",
+    position: "relative",
+    transition: "0.2s",
+    boxShadow: "0px 0px 0px 0px #999999a1",
+    transform: isImageHovered ? "scale(1.1)" : "scale(1)",
+    flexShrink: 0
+  };
+  const scrimStyle = {
+    height: sizeParams.imageSize,
+    width: sizeParams.imageSize,
+    backgroundColor: isScrimHovered ? "".concat((theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.notBlackOverride) || colors.notBlack, "98") : "".concat((theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.notBlackOverride) || colors.notBlack, "10"),
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: "50%",
+    transition: "0.4s",
+    cursor: "pointer"
+  };
+  const titleStyle = {
+    textAlign: "left",
+    fontSize: sizeParams.fontSize,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    width: "100%",
+    marginLeft: "10px",
+    color: colors.white,
+    textDecoration: isTitleHovered && handleClickTitle ? "underline" : "none",
+    cursor: handleClickTitle ? "pointer" : "default",
+    margin: 0,
+    padding: 0,
+    paddingLeft: "10px"
+  };
+  const subtitleStyle = {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    marginLeft: "10px",
+    width: "100%",
+    color: colors.white,
+    cursor: handleSubtitleClick ? "pointer" : "default",
+    margin: 0,
+    padding: 0,
+    paddingLeft: "10px"
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: outerBoxStyle,
+    onMouseEnter: () => setIsBoxHovered(true),
+    onMouseLeave: () => setIsBoxHovered(false)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: e => {
       e.stopPropagation();
       handleClickBackground();
     },
-    sx: {
-      width: "calc(100% - 4px)",
-      height: sizeParams.height,
+    style: innerBoxStyle
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
       display: "flex",
       flexDirection: "row",
+      width: "70%",
       alignItems: "center",
-      justifyContent: "space-between",
-      borderRadius: "8px",
-      border: "2px solid transparent",
-      borderRightWidth: "0px",
-      borderLeftWidth: "0px",
-      margin: "0 auto",
-      borderBottomColor: extraInfoComponent && theme.colors.grey3,
-      transition: "0.3s",
-      position: "relative"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    direction: "row",
-    width: "70%",
-    alignItems: "center",
-    sx: {
       cursor: "pointer"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize,
-      boxShadow: "0px 0px 0px 0px #999999a1;"
-    },
-    url: 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
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImageScrim, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: imageContainerStyle,
+    onMouseEnter: () => setIsImageHovered(true),
+    onMouseLeave: () => setIsImageHovered(false)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: e => {
       if (handleClickPlay) {
         e.stopPropagation();
         handleClickPlay();
       }
+    },
+    style: scrimStyle,
+    onMouseEnter: () => setIsScrimHovered(true),
+    onMouseLeave: () => setIsScrimHovered(false)
+  }, playingState === "playing" ? /*#__PURE__*/React__default["default"].createElement(PauseIcon, {
+    size: 30,
+    color: "white"
+  }) : /*#__PURE__*/React__default["default"].createElement(PlayIcon, {
+    size: 30,
+    color: "white"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      width: "80%",
+      overflow: "hidden"
     }
-  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }) : /*#__PURE__*/React__default['default'].createElement(Icons.PlayOutlineIcon, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    direction: "column",
-    alignItems: "flex-start",
-    sx: {
-      width: "80%"
-    }
-  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+  }, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
       width: "100%"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "100%",
-    marginLeft: "10px",
-    color: "white.override",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
-      }
-    },
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    style: titleStyle,
+    onMouseEnter: () => setIsTitleHovered(true),
+    onMouseLeave: () => setIsTitleHovered(false),
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
     }
-  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "100%",
-    marginLeft: "10px",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
-      }
-    },
+  }, bite.title)) : /*#__PURE__*/React__default["default"].createElement("p", {
+    style: titleStyle,
+    onMouseEnter: () => setIsTitleHovered(true),
+    onMouseLeave: () => setIsTitleHovered(false),
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
     }
-  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    textAlign: "left",
-    fontSize: sizeParams.smallFontSize,
-    noWrap: true,
-    marginLeft: "10px",
-    width: "100%",
-    color: "white.override",
-    sx: {},
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default["default"].createElement("p", {
+    style: subtitleStyle,
     onClick: e => {
       if (handleSubtitleClick) {
         e.stopPropagation();
         handleSubtitleClick();
       }
     }
-  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    direction: "row"
-  }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, biteSubtitle))), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    }
+  }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(IconButton, {
     onClick: e => {
       e.stopPropagation();
       handleClickUnsave();
       setOpenSave(true);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      color: "starling.main",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "grey3.main"
-      }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
-    sx: {
-      color: "notBlack.override"
-    }
-  })) : /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(BookmarkFilledIcon, {
+    size: 24,
+    color: colors.notBlack
+  })) : /*#__PURE__*/React__default["default"].createElement(IconButton, {
     onClick: e => {
       e.stopPropagation();
       handleClickSave();
       setOpenSave(true);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      color: "starling.main",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "grey3.main"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
-    sx: {
-      color: "notBlack.override"
     }
-  })), secondaryActionButton || /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(BookmarkAddIcon, {
+    size: 24,
+    color: colors.notBlack
+  })), secondaryActionButton || /*#__PURE__*/React__default["default"].createElement(IconButton, {
     onClick: e => {
       handleClickThreeDot(e);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "grey3.main"
-      }
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], {
-    sx: {
-      color: "notBlack.override"
     }
+  }, /*#__PURE__*/React__default["default"].createElement(MoreHorizIcon, {
+    size: 24,
+    color: colors.notBlack
   })))), extraInfoComponent && extraInfoComponent);
 };
 
 exports.BlerpListView = BlerpListView;
-exports.default = BlerpListView;
+exports["default"] = BlerpListView;