@blerp/design 1.3.17 → 1.4.1

package/dist/esm/Blerp.js

@@ -1,13 +1,11 @@
-import 'prop-types';
-import React, { useContext, useState, useRef } from 'react';
-import { ColorExtractor } from 'react-color-extractor';
-import { ThemeContext } from 'styled-components';
+import React, { useState, useRef } from 'react';
 import BlerpImageRow from './Blerp/BlerpImageRow.js';
 import BlerpSavePopup from './Blerp/BlerpSavePopup.js';
 import BlerpTitleRow from './Blerp/BlerpTitleRow.js';
 import BlerpTopRow from './Blerp/BlerpTopRow.js';
 import { Box, Stack } from './index.js';
 import { useWindowSize } from './ScreenSizeHook.js';
+import { useBlerpTheme } from './Theme.js';
 
 const reactionIconUrls = {
   FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
@@ -22,8 +20,6 @@ const reactionIconUrls = {
   LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
 };
 const Blerp = _ref => {
-  var _bite$image, _bite$image$original;
-
   let {
     bite,
     title,
@@ -52,7 +48,7 @@ const Blerp = _ref => {
     handleClickLock,
     backgroundColor
   } = _ref;
-  const theme = useContext(ThemeContext);
+  const theme = useBlerpTheme();
   const [openSave, setOpenSave] = useState(false);
   const size = useWindowSize();
   const [profileColors, setProfileColors] = useState(null);
@@ -174,9 +170,6 @@ const Blerp = _ref => {
       background: profileColors ? "linear-gradient(180deg, ".concat(profileColors[0]).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ", ").concat(theme.colors.grey5Override).concat(isPremium ? isLocked ? isBlerpHovered ? "C4" : "78" : isBlerpHovered ? "" : "C4" : "0", ")") : "",
       backgroundColor: isPremium && !profileColors && "grey5.override"
     }
-  }), /*#__PURE__*/React.createElement(ColorExtractor, {
-    src: 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,
-    getColors: colors => setProfileColors(colors)
   }), /*#__PURE__*/React.createElement(BlerpTopRow, {
     bite: bite,
     isOwner: isOwner,
@@ -226,5 +219,4 @@ const Blerp = _ref => {
   })));
 };
 
-export default Blerp;
-export { Blerp, reactionIconUrls };
+export { Blerp, Blerp as default, reactionIconUrls };

package/dist/esm/BlerpAudioContextProvider.js

@@ -128,5 +128,4 @@ const BlerpAudioContextProvider = _ref => {
   }, children);
 };
 
-export default BlerpAudioContextProvider;
-export { BlerpAudioContext, BlerpAudioContextProvider };
+export { BlerpAudioContext, BlerpAudioContextProvider, BlerpAudioContextProvider as default };

package/dist/esm/BlerpListView.js

@@ -1,26 +1,171 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded } from '@mui/icons-material';
-import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
-import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
-import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-import 'prop-types';
-import React, { useState, useContext } from 'react';
-import { usePalette } from 'react-palette';
-import styled, { keyframes, ThemeContext } from 'styled-components';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useState } from 'react';
 import { useWindowSize } from './ScreenSizeHook.js';
 import { BlerpListViewPremium } from './BlerpListViewPremium.js';
-import { PlayOutlineIcon } from './Icons/Icons.js';
-import { Box, Stack, Text, IconButton } from './index.js';
+import { useCustomPalette } from './helpers.js';
+import { useBlerpTheme } from './Theme.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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(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.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "10",
+    y1: "15",
+    x2: "10",
+    y2: "9"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "14",
+    y1: "15",
+    x2: "14",
+    y2: "9"
+  }));
+};
+
+const PlayIcon = _ref2 => {
+  let {
+    size = 30,
+    color = "white"
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/React.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.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.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.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: "2"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12",
+    y2: "14"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "9",
+    y1: "11",
+    x2: "15",
+    y2: "11"
+  }));
+};
+
+const MoreHorizIcon = _ref5 => {
+  let {
+    size = 24,
+    color = "#1a1a1a"
+  } = _ref5;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: color
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "6",
+    cy: "12",
+    r: "2"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "2"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "18",
+    cy: "12",
+    r: "2"
+  }));
+}; // Inline styled button component
+
+
+const IconButton = _ref6 => {
+  let {
+    onClick,
+    style,
+    children
+  } = _ref6;
+  const [isHovered, setIsHovered] = 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.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,
@@ -47,11 +192,21 @@ const BlerpListView = _ref => {
     isPremium,
     handleClickLock,
     handleClickPremium
-  } = _ref;
+  } = _ref7;
   const [openSave, setOpenSave] = useState(false);
-  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 = useContext(ThemeContext);
+  const [isBoxHovered, setIsBoxHovered] = useState(false);
+  const [isImageHovered, setIsImageHovered] = useState(false);
+  const [isScrimHovered, setIsScrimHovered] = useState(false);
+  const [isTitleHovered, setIsTitleHovered] = useState(false);
+  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 = useBlerpTheme();
   const size = useWindowSize();
+  const colors = {
+    grey2: "#2a2a2a",
+    grey3: "#3a3a3a",
+    notBlack: "#1a1a1a",
+    white: "#ffffff"
+  };
 
   let sizeParams;
   const smallSize = {
@@ -147,84 +302,130 @@ const BlerpListView = _ref => {
     });
   }
 
-  return /*#__PURE__*/React.createElement(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.createElement(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.createElement("div", {
+    style: outerBoxStyle,
+    onMouseEnter: () => setIsBoxHovered(true),
+    onMouseLeave: () => setIsBoxHovered(false)
+  }, /*#__PURE__*/React.createElement("div", {
     onClick: e => {
       e.stopPropagation();
       handleClickBackground();
     },
-    sx: {
-      width: "calc(100% - 4px)",
-      height: sizeParams.height,
+    style: innerBoxStyle
+  }, /*#__PURE__*/React.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.createElement(Stack, {
-    direction: "row",
-    width: "70%",
-    alignItems: "center",
-    sx: {
       cursor: "pointer"
     }
-  }, /*#__PURE__*/React.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.createElement(BlerpImageScrim, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
+  }, /*#__PURE__*/React.createElement("div", {
+    style: imageContainerStyle,
+    onMouseEnter: () => setIsImageHovered(true),
+    onMouseLeave: () => setIsImageHovered(false)
+  }, /*#__PURE__*/React.createElement("div", {
     onClick: e => {
       if (handleClickPlay) {
         e.stopPropagation();
         handleClickPlay();
       }
-    }
-  }, playingState === "playing" ? /*#__PURE__*/React.createElement(PauseCircleOutlineRounded, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }) : /*#__PURE__*/React.createElement(PlayOutlineIcon, {
-    sx: {
-      width: "30px",
-      height: "30px",
-      color: "white.override"
-    }
-  }))), /*#__PURE__*/React.createElement(Stack, {
-    direction: "column",
-    alignItems: "flex-start",
-    sx: {
-      width: "80%"
+    },
+    style: scrimStyle,
+    onMouseEnter: () => setIsScrimHovered(true),
+    onMouseLeave: () => setIsScrimHovered(false)
+  }, playingState === "playing" ? /*#__PURE__*/React.createElement(PauseIcon, {
+    size: 30,
+    color: "white"
+  }) : /*#__PURE__*/React.createElement(PlayIcon, {
+    size: 30,
+    color: "white"
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      width: "80%",
+      overflow: "hidden"
     }
   }, isLinkTitle ? /*#__PURE__*/React.createElement("a", {
     href: "/soundbites/".concat(bite._id),
@@ -232,113 +433,65 @@ const BlerpListView = _ref => {
       textDecoration: "none",
       width: "100%"
     }
-  }, /*#__PURE__*/React.createElement(Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "100%",
-    marginLeft: "10px",
-    color: "white.override",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
-      }
-    },
+  }, /*#__PURE__*/React.createElement("p", {
+    style: titleStyle,
+    onMouseEnter: () => setIsTitleHovered(true),
+    onMouseLeave: () => setIsTitleHovered(false),
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
     }
-  }, bite.title)) : /*#__PURE__*/React.createElement(Text, {
-    textAlign: "left",
-    fontSize: sizeParams.fontSize,
-    noWrap: true,
-    width: "100%",
-    marginLeft: "10px",
-    sx: {
-      ":hover": {
-        textDecoration: handleClickTitle ? "underline" : "none"
-      }
-    },
+  }, bite.title)) : /*#__PURE__*/React.createElement("p", {
+    style: titleStyle,
+    onMouseEnter: () => setIsTitleHovered(true),
+    onMouseLeave: () => setIsTitleHovered(false),
     onClick: e => {
       if (handleClickTitle) {
         e.stopPropagation();
         handleClickTitle();
       }
     }
-  }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Text, {
-    textAlign: "left",
-    fontSize: sizeParams.smallFontSize,
-    noWrap: true,
-    marginLeft: "10px",
-    width: "100%",
-    color: "white.override",
-    sx: {},
+  }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement("p", {
+    style: subtitleStyle,
     onClick: e => {
       if (handleSubtitleClick) {
         e.stopPropagation();
         handleSubtitleClick();
       }
     }
-  }, biteSubtitle))), /*#__PURE__*/React.createElement(Stack, {
-    direction: "row"
+  }, biteSubtitle))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row"
+    }
   }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.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.createElement(BookmarkOutlinedIcon, {
-    sx: {
-      color: "notBlack.override"
     }
+  }, /*#__PURE__*/React.createElement(BookmarkFilledIcon, {
+    size: 24,
+    color: colors.notBlack
   })) : /*#__PURE__*/React.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.createElement(BookmarkAddOutlinedIcon, {
-    sx: {
-      color: "notBlack.override"
     }
+  }, /*#__PURE__*/React.createElement(BookmarkAddIcon, {
+    size: 24,
+    color: colors.notBlack
   })), secondaryActionButton || /*#__PURE__*/React.createElement(IconButton, {
     onClick: e => {
       handleClickThreeDot(e);
-    },
-    sx: {
-      backgroundColor: "white.override",
-      padding: "5px",
-      marginRight: "10px",
-      ":hover": {
-        backgroundColor: "grey3.main"
-      }
-    }
-  }, /*#__PURE__*/React.createElement(MoreHorizRoundedIcon, {
-    sx: {
-      color: "notBlack.override"
     }
+  }, /*#__PURE__*/React.createElement(MoreHorizIcon, {
+    size: 24,
+    color: colors.notBlack
   })))), extraInfoComponent && extraInfoComponent);
 };
 
-export default BlerpListView;
-export { BlerpListView };
+export { BlerpListView, BlerpListView as default };