@blerp/design 1.3.16 → 1.4.1

package/dist/esm/BlerpListViewPremium.js

@@ -1,26 +1,50 @@
-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 '@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 _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useState } from 'react';
 import { useWindowSize } from './ScreenSizeHook.js';
 import { PlayOutlineIcon, OpenLockIcon, DiamondIcon } from './Icons/Icons.js';
-import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import { Box, Stack, Text, Tooltip, IconButton } from './index.js';
+import { useCustomPalette } from './helpers.js';
+import { useBlerpTheme } from './Theme.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), props => props.url);
-keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    transform: scale(0);\n  }\n\n  100%{\n    transform: scale(1);\n  }\n"])));
-const SaveContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.div(_templateObject4 || (_templateObject4 = _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    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.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5, props => props.theme.colors.ibisRed);
-styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const Icon = _ref => {
+  let {
+    path,
+    sx,
+    size = "24px"
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    component: "svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    fill: "currentColor",
+    sx: _objectSpread({
+      display: 'inline-block',
+      flexShrink: 0
+    }, sx)
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: path
+  }));
+};
+
+const paths = {
+  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 {
@@ -42,24 +66,19 @@ const BlerpListViewPremium = _ref => {
     isLinkTitle,
     isLocked,
     fluid,
-    props,
     backgroundColor,
     hoverColor,
     isPremium,
     handleClickLock,
     handleClickPremium
-  } = _ref;
-  const [openSave, setOpenSave] = useState(false);
+  } = _ref2;
   const {
-    loading,
-    data,
-    error
-  } = 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);
+    data
+  } = 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 [isBlerpHovered, setIsBlerpHovered] = useState(false);
   const [actionButtonHovered, setActionButtonHovered] = useState(false);
-
   let sizeParams;
   const smallSize = {
     width: 300,
@@ -67,9 +86,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "20px",
     buttonSize: "small"
   };
   const mediumSize = {
@@ -78,9 +94,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
-    reactionSpacing: 1,
-    reactionPadding: "3px",
-    reactionSize: "23px",
     buttonSize: "medium"
   };
   const largeSize = {
@@ -89,9 +102,6 @@ const BlerpListViewPremium = _ref => {
     smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
-    reactionSpacing: 1,
-    reactionPadding: "5px",
-    reactionSize: "30px",
     buttonFontSize: "large"
   };
 
@@ -103,42 +113,28 @@ 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.createElement(Box, {
-    onMouseEnter: e => setIsBlerpHovered(true),
-    onMouseLeave: e => setIsBlerpHovered(false),
+    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"
@@ -147,10 +143,10 @@ const BlerpListViewPremium = _ref => {
   }, /*#__PURE__*/React.createElement(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",
@@ -165,15 +161,11 @@ 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"
     }
@@ -185,27 +177,43 @@ const BlerpListViewPremium = _ref => {
       cursor: "pointer",
       minWidth: "30%"
     }
-  }, /*#__PURE__*/React.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.createElement(BlerpImageScrim, {
-    style: {
+  }, /*#__PURE__*/React.createElement(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.createElement(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.createElement(PauseCircleOutlineRounded, {
+  }, playingState === "playing" ? /*#__PURE__*/React.createElement(Icon, {
+    path: paths.pauseCircle,
+    size: "30px",
     sx: {
-      width: "30px",
-      height: "30px",
       color: "white.override"
     }
   }) : /*#__PURE__*/React.createElement(PlayOutlineIcon, {
@@ -269,7 +277,6 @@ const BlerpListViewPremium = _ref => {
     marginLeft: "10px",
     width: "100%",
     color: "white.override",
-    sx: {},
     onClick: e => {
       if (handleSubtitleClick) {
         e.stopPropagation();
@@ -279,18 +286,31 @@ const BlerpListViewPremium = _ref => {
   }, biteSubtitle))), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     alignItems: "center"
-  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React.createElement(SaveContainer, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
+  }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React.createElement(Box, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickLock) {
-        handleClickLock();
-      }
+      if (handleClickLock) handleClickLock();
     },
     onMouseEnter: () => setActionButtonHovered(true),
-    onMouseLeave: () => setActionButtonHovered(false)
+    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.createElement(Stack, {
     sx: {
       position: "relative",
@@ -305,21 +325,34 @@ const BlerpListViewPremium = _ref => {
     sx: {
       fontSize: "22px",
       position: "relative",
-      bottom: "2px",
-      left: "0px"
+      bottom: "2px"
     }
-  }) : /*#__PURE__*/React.createElement(LockRoundedIcon, {
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    path: paths.lock,
+    size: "16px",
     sx: {
-      fontSize: "16px",
       position: "relative",
       bottom: "1px"
     }
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null), !!handleClickPremium && /*#__PURE__*/React.createElement(PremiumPill, {
-    isLocked: isLocked,
-    isBlerpHovered: isBlerpHovered,
+  })))) : null, !!handleClickPremium && /*#__PURE__*/React.createElement(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.createElement(DiamondIcon, {
     sx: {
@@ -336,12 +369,7 @@ const BlerpListViewPremium = _ref => {
   }, "Premium")), secondaryActionButton || bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React.createElement(IconButton, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickUnsave) {
-        handleClickUnsave();
-      }
-
-      setOpenSave(true);
+      if (handleClickUnsave) handleClickUnsave();
     },
     sx: {
       backgroundColor: "white.override",
@@ -355,19 +383,16 @@ const BlerpListViewPremium = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.bookmark,
+    size: "24px",
     sx: {
       color: "starling.main"
     }
   })) : /*#__PURE__*/React.createElement(IconButton, {
     onClick: e => {
       e.stopPropagation();
-
-      if (handleClickSave) {
-        handleClickSave();
-      }
-
-      setOpenSave(true);
+      if (handleClickSave) handleClickSave();
     },
     sx: {
       backgroundColor: "white.override",
@@ -380,12 +405,13 @@ const BlerpListViewPremium = _ref => {
         color: "white.override"
       }
     }
-  }, /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: paths.bookmarkAdd,
+    size: "24px",
     sx: {
       color: "starling.main"
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
 
-export default BlerpListViewPremium;
-export { BlerpListViewPremium };
+export { BlerpListViewPremium, BlerpListViewPremium as default };

package/dist/esm/BlerpListViewSkeleton.js

@@ -1,17 +1,66 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import React from 'react';
-import styled from 'styled-components';
+import { Box } from './index.js';
+import { useBlerpTheme } from './Theme.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const NewBlerpsSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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.createElement(NewBlerpsSkeleton, {
-    md: 6,
-    lg: 4
-  }, /*#__PURE__*/React.createElement(LeftNewBlerpsBox, null), /*#__PURE__*/React.createElement(RightNewBlerpsBox, null, /*#__PURE__*/React.createElement(NewBlerpsCircle, null), /*#__PURE__*/React.createElement(NewBlerpsCircle, null)));
+  const theme = useBlerpTheme();
+  return /*#__PURE__*/React.createElement(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.createElement(Box, {
+    sx: {
+      height: "38px",
+      width: "38px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "8px",
+      marginLeft: "4px"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "80px",
+      marginRight: "10px"
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      height: "34px",
+      width: "34px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "50%"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      display: "flex",
+      height: "34px",
+      width: "34px",
+      backgroundColor: theme.colors.white,
+      borderRadius: "50%"
+    }
+  })));
 };
 
 export { BlerpListViewSkeleton };

package/dist/esm/BlerpSkeleton.js

@@ -1,13 +1,38 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import React from 'react';
-import styled from 'styled-components';
+import { useBlerpTheme } from './Theme.js';
 
-var _templateObject, _templateObject2, _templateObject3;
-const FeaturedBlerpSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 80%;\n    height: 24px;\n    background: ", ";\n    margin-bottom: 20px;\n"])), props => props.theme.colors.grey2);
 const BlerpSkeleton = () => {
-  return /*#__PURE__*/React.createElement(FeaturedBlerpSkeleton, null, /*#__PURE__*/React.createElement(FeaturedBlerpCircle, null), /*#__PURE__*/React.createElement(FeaturedBlerpTitle, null));
+  var _theme$colors, _theme$colors2, _theme$colors3;
+
+  const theme = useBlerpTheme();
+  return /*#__PURE__*/React.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.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.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.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"
+    }
+  }));
 };
 
 export { BlerpSkeleton };