@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/BlerpListViewPremium.js

@@ -2,38 +2,60 @@
 
 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');
-require('@mui/icons-material/MoreHorizRounded');
-require('prop-types');
+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 reactPalette = require('react-palette');
-var styled = require('styled-components');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
 var Icons = require('./Icons/Icons.js');
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
 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 _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 LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-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);
-styled.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-const SaveContainer = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    /* position: absolute; */\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\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        cursor: pointer;\n    }\n\n    &:hover svg {\n        color: ", ";\n    }\n"])), props => "".concat(props.theme.colors.notBlack, "8a"), props => props.theme.colors.seafoam, props => props.theme.colors.override);
-const BlerpImageScrim = styled__default['default'].div(_templateObject4 || (_templateObject4 = _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    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride);
-const PremiumPill = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 0 0 8px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), props => props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a"), props => props.theme.colors.seafoam);
-styled__default['default'].div(_templateObject6 || (_templateObject6 = _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.grey5, props => props.theme.colors.ibisRed);
-styled__default['default'].div(_templateObject7 || (_templateObject7 = _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 BlerpListViewPremium = _ref => {
+const _excluded = ["path", "sx", "size"];
+
+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 = {
+  pauseCircle: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-.83 0-1.5-.67-1.5-1.5v-6c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5zm-4 0c-.83 0-1.5-.67-1.5-1.5v-6c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5zm8 0c-.83 0-1.5-.67-1.5-1.5v-6c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v6c0 .83-.67 1.5-1.5 1.5z",
+  bookmark: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z",
+  bookmarkAdd: "M17 11V3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V11h-2zm4-2h-2v2h-2V9h-2V7h2V5h2v2h2v2z",
+  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",
+  more: "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 BlerpListViewPremium = _ref2 => {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
   let {
@@ -55,24 +77,19 @@ const BlerpListViewPremium = _ref => {
     isLinkTitle,
     isLocked,
     fluid,
-    props,
     backgroundColor,
     hoverColor,
     isPremium,
     handleClickLock,
     handleClickPremium
-  } = _ref;
-  const [openSave, setOpenSave] = React.useState(false);
+  } = _ref2;
   const {
-    loading,
-    data,
-    error
-  } = 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);
+    data
+  } = 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 [isBlerpHovered, setIsBlerpHovered] = React.useState(false);
   const [actionButtonHovered, setActionButtonHovered] = React.useState(false);
-
   let sizeParams;
   const smallSize = {
     width: 300,
@@ -80,9 +97,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "20px",
     buttonSize: "small"
   };
   const mediumSize = {
@@ -91,9 +105,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "23px",
     buttonSize: "medium"
   };
   const largeSize = {
@@ -102,9 +113,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
-    reactionSpacing: 1,
-    reactionPadding: "5px",
-    reactionSize: "30px",
     buttonFontSize: "large"
   };
 
@@ -116,60 +124,46 @@ const BlerpListViewPremium = _ref => {
         smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
-        reactionSpacing: 1,
-        reactionPadding: "3px",
-        reactionSize: "23px",
         buttonSize: "medium"
       };
     } else if (size.width <= 400) {
       sizeParams = smallSize;
     } else if (size.width <= 900) {
       sizeParams = mediumSize;
-    } else if (size.width > 900) {
+    } else {
       sizeParams = largeSize;
     }
   } else {
-    if (variantSize === "small") {
-      sizeParams = smallSize;
-    } else if (variantSize === "medium") {
-      sizeParams = mediumSize;
-    } else if (variantSize === "large") {
-      sizeParams = largeSize;
-    }
+    sizeParams = variantSize === "small" ? smallSize : variantSize === "medium" ? mediumSize : largeSize;
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Box, {
-    onMouseEnter: e => setIsBlerpHovered(true),
-    onMouseLeave: e => setIsBlerpHovered(false),
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    onMouseEnter: () => setIsBlerpHovered(true),
+    onMouseLeave: () => setIsBlerpHovered(false),
     sx: {
       width: sizeParams.width,
       position: "relative",
       minWidth: fluid && "300px",
       borderRadius: "8px",
-      border: "2px transparent",
-      backgroundImage: "white",
-      backgroundOrigin: "border-box",
-      backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
-      // overflow: "hidden",
       "&:hover": {
         transition: "0.3s",
         bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "absolute",
-      top: "0",
-      bottom: "0",
-      left: "0",
-      right: "0",
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
       borderRadius: "8px",
       background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       e.stopPropagation();
       handleClickBackground();
@@ -178,19 +172,15 @@ const BlerpListViewPremium = _ref => {
       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.colors.grey3,
+      borderBottom: extraInfoComponent ? "1px solid ".concat(theme.colors.grey3) : "none",
       transition: "0.3s",
       position: "relative"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     width: "70%",
     alignItems: "center",
@@ -198,42 +188,58 @@ const BlerpListViewPremium = _ref => {
       cursor: "pointer",
       minWidth: "30%"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BlerpImage, {
-    style: {
-      width: sizeParams.imageSize,
-      height: sizeParams.imageSize
-    },
-    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: {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      height: sizeParams.imageSize,
       width: sizeParams.imageSize,
-      height: 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",
+      "&:hover": {
+        transform: "scale(1.1)"
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       if (handleClickPlay) {
         e.stopPropagation();
         handleClickPlay();
       }
+    },
+    sx: {
+      height: sizeParams.imageSize,
+      width: sizeParams.imageSize,
+      backgroundColor: "".concat(theme.colors.notBlackOverride, "10"),
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      borderRadius: "50%",
+      transition: "0.4s",
+      "&:hover": {
+        backgroundColor: "".concat(theme.colors.notBlackOverride, "98")
+      }
     }
-  }, playingState === "playing" ? /*#__PURE__*/React__default['default'].createElement(iconsMaterial.PauseCircleOutlineRounded, {
+  }, playingState === "playing" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.pauseCircle,
+    size: "30px",
     sx: {
-      width: "30px",
-      height: "30px",
       color: "white.override"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(Icons.PlayOutlineIcon, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Icons.PlayOutlineIcon, {
     sx: {
       width: "30px",
       height: "30px",
       color: "white.override"
     }
-  }))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "column",
     alignItems: "flex-start",
     sx: {
       width: "80%"
     }
-  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, isLinkTitle ? /*#__PURE__*/React__default["default"].createElement(index.Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -251,13 +257,13 @@ const BlerpListViewPremium = _ref => {
         handleClickTitle();
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
       color: "white"
     }
-  }, bite.title)) : /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, bite.title)) : /*#__PURE__*/React__default["default"].createElement(index.Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -275,36 +281,48 @@ const BlerpListViewPremium = _ref => {
         handleClickTitle();
       }
     }
-  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, 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: {},
     onClick: e => {
       if (handleSubtitleClick) {
         e.stopPropagation();
         handleSubtitleClick();
       }
     }
-  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, biteSubtitle))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center"
-  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
+  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickLock) {
-        handleClickLock();
-      }
+      if (handleClickLock) handleClickLock();
     },
     onMouseEnter: () => setActionButtonHovered(true),
-    onMouseLeave: () => setActionButtonHovered(false)
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    onMouseLeave: () => setActionButtonHovered(false),
+    sx: {
+      width: "25px",
+      height: "25px",
+      borderRadius: "50%",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "5px",
+      transition: "0.3s",
+      backgroundColor: "".concat(theme.colors.notBlack, "8a"),
+      "&:hover": {
+        backgroundColor: theme.colors.seafoam,
+        cursor: "pointer"
+      },
+      "&:hover svg": {
+        color: theme.colors.override
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "relative",
       top: "1px",
@@ -312,49 +330,57 @@ const BlerpListViewPremium = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Unlock Premium"
-  }, actionButtonHovered ? /*#__PURE__*/React__default['default'].createElement(Icons.OpenLockIcon, {
+  }, actionButtonHovered ? /*#__PURE__*/React__default["default"].createElement(Icons.OpenLockIcon, {
     sx: {
       fontSize: "22px",
       position: "relative",
-      bottom: "2px",
-      left: "0px"
+      bottom: "2px"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.lock,
+    size: "16px",
     sx: {
-      fontSize: "16px",
       position: "relative",
       bottom: "1px"
     }
-  })))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), !!handleClickPremium && /*#__PURE__*/React__default['default'].createElement(PremiumPill, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
+  })))) : null, !!handleClickPremium && /*#__PURE__*/React__default["default"].createElement(index.Box, {
     onClick: e => {
       e.stopPropagation();
       handleClickPremium();
+    },
+    sx: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "20px",
+      height: "25px",
+      width: "75px",
+      padding: "0 4px",
+      margin: "0 0 0 8px",
+      cursor: "pointer",
+      backgroundColor: isLocked ? "".concat(theme.colors.notBlack, "8a") : "".concat(theme.colors.notBlack, "9a"),
+      "&:hover": {
+        backgroundColor: theme.colors.seafoam
+      }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.DiamondIcon, {
     sx: {
       width: "16px",
       marginRight: "4px",
       color: "white.override"
     }
-  }), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     sx: {
       marginRight: "4px",
       color: "white.override",
       fontSize: "12px"
     }
-  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickUnsave) {
-        handleClickUnsave();
-      }
-
-      setOpenSave(true);
+      if (handleClickUnsave) handleClickUnsave();
     },
     sx: {
       backgroundColor: "white.override",
@@ -368,19 +394,16 @@ const BlerpListViewPremium = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.bookmark,
+    size: "24px",
     sx: {
       color: "starling.main"
     }
-  })) : /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  })) : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickSave) {
-        handleClickSave();
-      }
-
-      setOpenSave(true);
+      if (handleClickSave) handleClickSave();
     },
     sx: {
       backgroundColor: "white.override",
@@ -393,7 +416,9 @@ const BlerpListViewPremium = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkAddOutlinedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    path: paths.bookmarkAdd,
+    size: "24px",
     sx: {
       color: "starling.main"
     }
@@ -401,4 +426,4 @@ const BlerpListViewPremium = _ref => {
 };
 
 exports.BlerpListViewPremium = BlerpListViewPremium;
-exports.default = BlerpListViewPremium;
+exports["default"] = BlerpListViewPremium;

package/dist/cjs/BlerpListViewSkeleton.js

@@ -2,26 +2,73 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var React = require('react');
-var styled = require('styled-components');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const NewBlerpsSkeleton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 300px;\n    height: 44px;\n    background: ", ";\n    border-radius: 8px;\n    animation: pulse 3s ease-in-out infinite;\n    @keyframes pulse {\n        0% {\n            opacity: 0.5;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0.5;\n        }\n    }\n"])), props => props.theme.colors.grey4);
-const LeftNewBlerpsBox = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    height: 38px;\n    width: 38px;\n    background-color: ", ";\n    border-radius: 8px;\n    margin-left: 4px;\n"])), props => props.theme.colors.white);
-const RightNewBlerpsBox = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    width: 80px;\n    margin-right: 10px;\n"])));
-const NewBlerpsCircle = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    height: 34px;\n    width: 34px;\n    background-color: ", ";\n    border-radius: 50%;\n"])), props => props.theme.colors.white);
 const BlerpListViewSkeleton = () => {
-  return /*#__PURE__*/React__default['default'].createElement(NewBlerpsSkeleton, {
-    md: 6,
-    lg: 4
-  }, /*#__PURE__*/React__default['default'].createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React__default['default'].createElement(RightNewBlerpsBox, null, /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null), /*#__PURE__*/React__default['default'].createElement(NewBlerpsCircle, null)));
+  const theme = Theme.useBlerpTheme();
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "300px",
+      height: "44px",
+      background: theme.colors.grey4,
+      borderRadius: "8px",
+      animation: "pulse 3s ease-in-out infinite",
+      "@keyframes pulse": {
+        "0%": {
+          opacity: 0.5
+        },
+        "50%": {
+          opacity: 1
+        },
+        "100%": {
+          opacity: 0.5
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      height: "38px",
+      width: "38px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "8px",
+      marginLeft: "4px"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "80px",
+      marginRight: "10px"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "flex",
+      height: "34px",
+      width: "34px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "50%"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      display: "flex",
+      height: "34px",
+      width: "34px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "50%"
+    }
+  })));
 };
 
 exports.BlerpListViewSkeleton = BlerpListViewSkeleton;

package/dist/cjs/BlerpSkeleton.js

@@ -2,22 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var React = require('react');
-var styled = require('styled-components');
+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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2, _templateObject3;
-const FeaturedBlerpSkeleton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n    height: 234px;\n    width: 220px;\n    border: 2px solid ", ";\n    border-radius: 8px;\n\n    @media (max-width: 900px) {\n        height: 190px;\n        width: 180px;\n        border: 2px solid ", ";\n        border-radius: 8px;\n    }\n\n    animation: pulse 3s ease-in-out infinite;\n    @keyframes pulse {\n        0% {\n            opacity: 0.5;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0.5;\n        }\n    }\n"])), props => props.theme.colors.grey2, props => props.theme.colors.grey2);
-const FeaturedBlerpCircle = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    height: 135px;\n    width: 135px;\n    border-radius: 50%;\n    margin-top: 30px;\n    background: ", ";\n\n    @media (max-width: 900px) {\n        height: 100px;\n        width: 100px;\n        margin-top: 30px;\n    }\n"])), props => props.theme.colors.grey2);
-const FeaturedBlerpTitle = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n    width: 80%;\n    height: 24px;\n    background: ", ";\n    margin-bottom: 20px;\n"])), props => props.theme.colors.grey2);
 const BlerpSkeleton = () => {
-  return /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React__default['default'].createElement(FeaturedBlerpTitle, null));
+  var _theme$colors, _theme$colors2, _theme$colors3;
+
+  const theme = Theme.useBlerpTheme();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "space-between",
+      height: window.innerWidth <= 900 ? "190px" : "234px",
+      width: window.innerWidth <= 900 ? "180px" : "220px",
+      border: "2px solid ".concat((theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.grey7) || "#313131ff"),
+      borderRadius: "8px",
+      animation: "pulse 3s ease-in-out infinite"
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("style", null, "\n                    @keyframes pulse {\n                        0% {\n                            opacity: 0.5;\n                        }\n                        50% {\n                            opacity: 1;\n                        }\n                        100% {\n                            opacity: 0.5;\n                        }\n                    }\n                "), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      height: window.innerWidth <= 900 ? "100px" : "135px",
+      width: window.innerWidth <= 900 ? "100px" : "135px",
+      borderRadius: "50%",
+      marginTop: "30px",
+      background: (theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.grey7) || "#313131ff"
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: "80%",
+      height: "24px",
+      background: (theme === null || theme === void 0 ? void 0 : (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.grey7) || "#313131ff",
+      marginBottom: "20px"
+    }
+  }));
 };
 
 exports.BlerpSkeleton = BlerpSkeleton;