@blerp/design 1.2.73 → 1.2.75

package/dist/esm/PremiumCollectionCard.js

@@ -0,0 +1,498 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import BookmarkRounded from '@mui/icons-material/BookmarkRounded';
+import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
+import React, { useState } from 'react';
+import { ColorExtractor } from 'react-color-extractor';
+import { usePalette } from 'react-palette';
+import { Box, Stack, Text, Button } from './index.js';
+import styled from 'styled-components';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import LottieAnimation from './Lotties/LottieAnimation.js';
+import JiggleLock from './Lotties/JiggleLock.json.js';
+import { DiamondIcon, PresentGiftIcon } from './Icons/Icons.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+//primary and secondary action buttons
+
+const YellowHoverBorder = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 105%;\n    width: 105%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 4px solid rgb(255, 225, 76);\n    border-radius: 20px;\n    transition: opacity 0.3s ease-in-out;\n    /* Opacity should be changed to \"1\" onHover of this component's parent */\n    opacity: 0;\n"])));
+const LineClamp = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"])));
+const TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 32px;\n    width: ", ";\n    position: absolute;\n    top: 8px;\n    left: 8px;\n    border-radius: 20px;\n    overflow: hidden;\n    transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
+const TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
+const LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
+const LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    /* transition: opacity 0.3s ease-in-out; */\n\n    background-color: ", ";\n\n    opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
+const PremiumCollectionCard = _ref => {
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
+
+  let {
+    collection,
+    variantSize,
+    handleClickBackground,
+    handleClickSave,
+    handleClickView,
+    handleClickUnlock,
+    handleClickPrimaryAction,
+    handleClickSecondaryAction,
+    primaryActionButton,
+    secondaryActionButton,
+    bottomLeftIcon,
+    handleClickBottomLeftIcon,
+    premiumDiamondPill,
+    fluid,
+    fontSize,
+    isLink,
+    isLocked,
+    overrideViewText,
+    hideUnlockPlatformText,
+    hidePremiumLockIcon,
+    unlockPlatformText,
+    hideCollectionBackground
+  } = _ref;
+  const [cardColors, setCardColors] = useState(null);
+  const [collectionHovered, setCollectionHovered] = useState(false);
+  const {
+    data,
+    loading,
+    error
+  } = usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
+  const smallSize = {
+    size: "small",
+    width: "70px",
+    height: "70px"
+  };
+  const largeSize = {
+    size: "large",
+    width: "200px",
+    height: "200px"
+  };
+  let sizeParams = largeSize;
+
+  if (variantSize === "small") {
+    sizeParams = smallSize;
+  }
+
+  return /*#__PURE__*/React.createElement(Box, {
+    onMouseOver: () => setCollectionHovered(true),
+    onMouseLeave: () => setCollectionHovered(false),
+    sx: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      width: fluid ? "80%" : sizeParams.width,
+      height: fluid ? "80%" : sizeParams.height
+    }
+  }, /*#__PURE__*/React.createElement(ColorExtractor, {
+    style: {
+      zIndex: "3"
+    },
+    src: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url,
+    getColors: colors => setCardColors(colors)
+  }), /*#__PURE__*/React.createElement(Box, {
+    onClick: e => {
+      e.stopPropagation();
+      if (handleClickBackground) handleClickBackground();
+    },
+    sx: {
+      borderRadius: "8px",
+      position: "relative",
+      width: fluid ? "90%" : sizeParams.width,
+      height: fluid ? "90%" : sizeParams.height,
+      cursor: "pointer",
+      "& #collection-background-1,#collection-background-2": {
+        transform: isLocked ? "rotate(0deg)" : "",
+        right: isLocked ? "0" : ""
+      },
+      ":hover #collection-background-1": {
+        transform: isLocked ? "" : "rotate(7deg)",
+        height: isLocked ? "" : "91%",
+        right: isLocked ? "" : "-11px",
+        top: isLocked ? "" : "12px"
+      },
+      ":hover #collection-background-2": {
+        transform: isLocked ? "" : "rotate(14deg)",
+        height: isLocked ? "" : "84%",
+        right: isLocked ? "" : "-20px",
+        top: isLocked ? "" : "24px"
+      },
+      ":hover #yellow-border": {
+        opacity: "1"
+      }
+    }
+  }, variantSize !== "small" ? /*#__PURE__*/React.createElement(React.Fragment, null, isLocked && /*#__PURE__*/React.createElement(YellowHoverBorder, {
+    id: "yellow-border"
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundColor: "transparent",
+      borderRadius: "12px",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      top: "0",
+      zIndex: "3"
+    }
+  }), !hideCollectionBackground && /*#__PURE__*/React.createElement(Box, {
+    id: "collection-background-1",
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.muted || "#444444", ", #444444)"),
+      borderRadius: "12px",
+      width: "50%",
+      height: "94%",
+      position: "absolute",
+      transform: "rotate(5deg) scale(1)",
+      right: "-8px",
+      top: "8px",
+      zIndex: "2",
+      transition: "0.2s ease-out"
+    }
+  }), !hideCollectionBackground && /*#__PURE__*/React.createElement(Box, {
+    id: "collection-background-2",
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.darkMuted || "#252525", ", #252525)"),
+      borderRadius: "12px",
+      width: "50%",
+      height: "89%",
+      position: "absolute",
+      transform: "rotate(10deg) scale(1)",
+      right: "-16px",
+      top: "16px",
+      zIndex: "1",
+      transition: "0.2s ease-out"
+    }
+  }), /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.vibrant || "#000000", "9a, #0000007a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image3 = collection.image) === null || _collection$image3 === void 0 ? void 0 : (_collection$image3$or = _collection$image3.original) === null || _collection$image3$or === void 0 ? void 0 : _collection$image3$or.url, ")"),
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      width: "100%",
+      height: "100%",
+      borderRadius: "12px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      zIndex: "3",
+      overflow: "hidden"
+    }
+  }, !isLocked ? /*#__PURE__*/React.createElement(Box, {
+    sx: {
+      backgroundImage: "linear-gradient(".concat(data.muted || "#000000", "7a, #0000007a)"),
+      zIndex: "3",
+      paddingBottom: "8px",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      overflow: "hidden",
+      transition: "opacity .3s ease-in-out",
+      opacity: collectionHovered ? "1" : "0"
+    }
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null), premiumDiamondPill ? premiumDiamondPill : /*#__PURE__*/React.createElement(TopPill, {
+    style: {
+      zIndex: "3"
+    },
+    collectionHovered: collectionHovered,
+    isLocked: isLocked
+  }, /*#__PURE__*/React.createElement(TopPillBackground, null), primaryActionButton ? primaryActionButton : collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "absolute",
+      top: "2px",
+      left: "2px",
+      width: "28px",
+      height: "28px",
+      color: "white.override",
+      borderRadius: "50%",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: isLocked ? "1" : "0",
+      "&:hover": {
+        backgroundColor: "white.override"
+      },
+      ":hover svg": {
+        color: "starling.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkRounded, {
+    sx: {
+      height: ".6em",
+      color: "white.override",
+      opacity: isLocked ? "1" : "0"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      handleClickSave(false);
+    }
+  })) : /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "absolute",
+      top: "2px",
+      left: "2px",
+      width: "28px",
+      height: "28px",
+      color: "white.override",
+      borderRadius: "50%",
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: isLocked ? "1" : "0",
+      "&:hover": {
+        backgroundColor: "white.override"
+      },
+      ":hover svg": {
+        color: "starling.main"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
+    onClick: e => {
+      e.stopPropagation();
+      handleClickSave(true);
+    },
+    sx: {
+      height: ".6em",
+      color: "white.override",
+      opacity: isLocked ? "1" : "0"
+    }
+  })), /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      zIndex: "1",
+      position: "relative",
+      right: "4px"
+    },
+    direction: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(DiamondIcon, {
+    sx: {
+      color: "white.override",
+      height: ".6em",
+      position: "relative",
+      left: "4px"
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: "white.override",
+      fontWeight: "lighter",
+      fontSize: ".8em"
+    }
+  }, "Premium")), !hidePremiumLockIcon && /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(LockRoundedIcon, {
+    sx: {
+      position: "absolute",
+      top: "8px",
+      right: "5px",
+      height: ".6em",
+      color: "white.override",
+      paddingRight: "8px",
+      opacity: isLocked ? collectionHovered ? "0" : "1" : "0",
+      transition: "opacity .2s ease-in-out"
+    },
+    onClick: e => {
+      e.stopPropagation();
+      handleClickSave(false);
+    }
+  }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      zIndex: "4",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      width: "28px",
+      height: "28px",
+      borderRadius: "50%",
+      top: "8px",
+      right: "8px",
+      padding: "2px",
+      transition: "all .1s ease-in-out",
+      "&:hover": {
+        width: "30px",
+        height: "30px",
+        top: "7px",
+        right: "7px"
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    onClick: e => {
+      e.stopPropagation(); // NEEDS TO DIRECT TO CREATOR'S PROFILE
+
+      handleClickSecondaryAction();
+    },
+    sx: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      backgroundColor: "notBlack.override",
+      zIndex: "3",
+      borderRadius: "50%",
+      opacity: ".7",
+      "&:hover": {
+        backgroundColor: "ibisRed.main",
+        opacity: "1"
+      }
+    }
+  }), /*#__PURE__*/React.createElement("img", {
+    src: (collection === null || collection === void 0 ? void 0 : (_collection$ownerObje = collection.ownerObject) === null || _collection$ownerObje === void 0 ? void 0 : (_collection$ownerObje2 = _collection$ownerObje.profileImage) === null || _collection$ownerObje2 === void 0 ? void 0 : (_collection$ownerObje3 = _collection$ownerObje2.original) === null || _collection$ownerObje3 === void 0 ? void 0 : _collection$ownerObje3.url) || "https://cdn.blerp.com/design/web/account-white-check.svg",
+    style: {
+      width: "100%",
+      height: "100%",
+      zIndex: "5",
+      borderRadius: "50%",
+      pointerEvents: "none"
+    }
+  })), bottomLeftIcon ? bottomLeftIcon : /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      zIndex: "4",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      width: "20px",
+      height: "20px",
+      borderRadius: "50%",
+      bottom: "8px",
+      right: "8px",
+      padding: "2px",
+      transition: "all .1s ease-in-out",
+      "&:hover": {
+        width: "24px",
+        height: "24px",
+        bottom: "8px",
+        right: "8px"
+      }
+    },
+    onClick: e => {
+      e.stopPropagation();
+      handleClickBottomLeftIcon();
+    }
+  }, /*#__PURE__*/React.createElement(PresentGiftIcon, {
+    sx: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      color: "white.override",
+      // backgroundColor: "grey4.main",
+      zIndex: "4",
+      borderRadius: "50%",
+      opacity: "1",
+      "&:hover": {
+        padding: "4px",
+        backgroundColor: "grey7.override",
+        opacity: "1"
+      }
+    }
+  })), isLink ? /*#__PURE__*/React.createElement("a", {
+    href: "/sound-collection/".concat(collection._id),
+    style: {
+      color: "white",
+      textDecoration: "none"
+    }
+  }, /*#__PURE__*/React.createElement(LineClamp, null, /*#__PURE__*/React.createElement(Text, {
+    fontSize: fontSize ? fontSize : "22px",
+    color: "white.override",
+    textAlign: "center",
+    sx: {
+      zIndex: isLocked ? "1" : "3",
+      ":hover": {
+        textDecoration: "underline"
+      }
+    }
+  }, collection === null || collection === void 0 ? void 0 : collection.title))) : /*#__PURE__*/React.createElement(LineClamp, null, /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      zIndex: isLocked ? "1" : "3"
+    },
+    fontSize: fontSize ? fontSize : "22px",
+    color: "white.override",
+    textAlign: "center"
+  }, collection === null || collection === void 0 ? void 0 : collection.title)), isLocked ? /*#__PURE__*/React.createElement(LockedScrim, {
+    collectionHovered: collectionHovered
+  }, /*#__PURE__*/React.createElement(LockedScrimBackground, {
+    collectionHovered: collectionHovered
+  }), /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      position: "absolute",
+      bottom: "104px"
+    }
+  }, /*#__PURE__*/React.createElement(LottieAnimation, {
+    lotti: JiggleLock,
+    height: 60,
+    width: 240,
+    style: {
+      margin: "0px -64px"
+    }
+  })), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: "white.override",
+      textAlign: "center",
+      lineHeight: "1",
+      margin: "4px 0",
+      zIndex: "3",
+      fontSize: ".8rem"
+    }
+  }, unlockPlatformText) : /*#__PURE__*/React.createElement(Text, {
+    sx: {
+      color: "white.override",
+      textAlign: "center",
+      lineHeight: "1",
+      margin: "4px 0",
+      zIndex: "3",
+      fontSize: ".8rem"
+    }
+  }, "Unlock to share ", /*#__PURE__*/React.createElement("br", null), "across platforms")), handleClickView && /*#__PURE__*/React.createElement(Button, {
+    disabled: !collectionHovered,
+    onClick: e => {
+      e.stopPropagation();
+      handleClickView();
+    },
+    variant: "contained",
+    sx: {
+      width: "70%",
+      fontSize: ".8rem",
+      padding: "4px 8px",
+      margin: "4px 0"
+    }
+  }, overrideViewText || "VIEW SOUNDPACK"), handleClickUnlock && /*#__PURE__*/React.createElement(Button, {
+    disabled: !collectionHovered,
+    onClick: e => {
+      e.stopPropagation();
+      handleClickUnlock();
+    },
+    variant: "outlined",
+    color: "whiteOverride",
+    sx: {
+      width: "50%",
+      margin: "6px 0",
+      padding: "2px 8px",
+      borderWidth: "2px !important",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "button-background"
+  }), /*#__PURE__*/React.createElement(LockRoundedIcon, {
+    sx: {
+      color: "white.override",
+      zIndex: "3",
+      height: ".8rem",
+      position: "relative",
+      bottom: "1px"
+    }
+  }), "UNLOCK")) : /*#__PURE__*/React.createElement(React.Fragment, null))) :
+  /*#__PURE__*/
+  // What to display when variantSize === "small":
+  React.createElement(Box, {
+    sx: {
+      backgroundImage: "linear-gradient(".concat(cardColors ? cardColors[0] : "#000000", "7a, #0000004a), url(").concat(collection === null || collection === void 0 ? void 0 : (_collection$image4 = collection.image) === null || _collection$image4 === void 0 ? void 0 : (_collection$image4$or = _collection$image4.original) === null || _collection$image4$or === void 0 ? void 0 : _collection$image4$or.url, ")"),
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+      width: "100%",
+      height: "100%",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "relative"
+    }
+  })));
+};
+
+export default PremiumCollectionCard;
+export { PremiumCollectionCard };

package/dist/esm/PurchaseModals/CheckoutModal.js

@@ -0,0 +1,33 @@
+import { Stack } from '../index.js';
+import React from 'react';
+
+const NeedToReplace = props => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      backgroundColor: "white.main",
+      width: "900px",
+      height: "550px",
+      padding: "32px 56px",
+      borderRadius: "8px",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      justifyContent: "space-between",
+      transform: "translate(-50%, -50%)",
+      "@media(max-width: 1100px)": {
+        overflowY: "scroll",
+        width: "550px",
+        height: "90vh",
+        maxHeight: "800px"
+      },
+      "@media(max-width: 900px)": {
+        width: "100%",
+        height: "100%",
+        maxHeight: "100vh",
+        padding: "32px 0px"
+      }
+    }
+  }, "Need to replace to remove payment dependencies");
+};
+
+export default NeedToReplace;

package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js

@@ -0,0 +1,33 @@
+import { Stack } from '../index.js';
+import React from 'react';
+
+const NeedToReplace = props => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      backgroundColor: "white.main",
+      width: "900px",
+      height: "550px",
+      padding: "32px 56px",
+      borderRadius: "8px",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      justifyContent: "space-between",
+      transform: "translate(-50%, -50%)",
+      "@media(max-width: 1100px)": {
+        overflowY: "scroll",
+        width: "550px",
+        height: "90vh",
+        maxHeight: "800px"
+      },
+      "@media(max-width: 900px)": {
+        width: "100%",
+        height: "100%",
+        maxHeight: "100vh",
+        padding: "32px 0px"
+      }
+    }
+  }, "Need to replace to remove payment dependencies");
+};
+
+export default NeedToReplace;

package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js

@@ -0,0 +1,33 @@
+import { Stack } from '../index.js';
+import React from 'react';
+
+const NeedToReplace = props => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      backgroundColor: "white.main",
+      width: "900px",
+      height: "550px",
+      padding: "32px 56px",
+      borderRadius: "8px",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      justifyContent: "space-between",
+      transform: "translate(-50%, -50%)",
+      "@media(max-width: 1100px)": {
+        overflowY: "scroll",
+        width: "550px",
+        height: "90vh",
+        maxHeight: "800px"
+      },
+      "@media(max-width: 900px)": {
+        width: "100%",
+        height: "100%",
+        maxHeight: "100vh",
+        padding: "32px 0px"
+      }
+    }
+  }, "Need to replace to remove payment dependencies");
+};
+
+export default NeedToReplace;

package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js

@@ -0,0 +1,33 @@
+import { Stack } from '../index.js';
+import React from 'react';
+
+const NeedToReplace = props => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    sx: {
+      backgroundColor: "white.main",
+      width: "900px",
+      height: "550px",
+      padding: "32px 56px",
+      borderRadius: "8px",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      justifyContent: "space-between",
+      transform: "translate(-50%, -50%)",
+      "@media(max-width: 1100px)": {
+        overflowY: "scroll",
+        width: "550px",
+        height: "90vh",
+        maxHeight: "800px"
+      },
+      "@media(max-width: 900px)": {
+        width: "100%",
+        height: "100%",
+        maxHeight: "100vh",
+        padding: "32px 0px"
+      }
+    }
+  }, "Need to replace to remove payment dependencies");
+};
+
+export default NeedToReplace;

package/dist/esm/ReactionButtons.js

@@ -0,0 +1,57 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled from 'styled-components';
+import { Grid, Tooltip } from './index.js';
+
+var _templateObject;
+const ReactionButton = styled.div(_templateObject || (_templateObject = _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);
+const reactionIconUrls = {
+  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
+  HAPPY: "https://cdn.blerp.com/blerp_products/Icons/Happy%403x.svg",
+  SCARY: "https://cdn.blerp.com/blerp_products/Icons/Scary%403x.svg",
+  SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
+  TROLL: "https://cdn.blerp.com/blerp_products/Icons/Troll%403x.svg",
+  ANGRY: "https://cdn.blerp.com/blerp_products/Icons/Anger%403x.svg",
+  NSFW: "https://cdn.blerp.com/blerp_products/Icons/NSFW%403x.svg",
+  MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg"
+};
+
+const ReactionButtons = _ref => {
+  let {
+    bite,
+    handleClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Grid, {
+    display: "grid",
+    gridTemplateColumns: "repeat(4, 1fr)",
+    alignItems: "center",
+    marginTop: "16px",
+    gap: 1
+  }, Object.keys(reactionIconUrls).map(reaction => {
+    var _bite$userReactions, _bite$userReactions$r;
+
+    return /*#__PURE__*/React.createElement(Grid, {
+      key: "".concat(reaction, "-button"),
+      gridColumn: "span 1",
+      display: "flex",
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      title: reaction
+    }, /*#__PURE__*/React.createElement(ReactionButton, {
+      active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction),
+      onClick: () => {
+        var _bite$userReactions2, _bite$userReactions2$;
+
+        let isRemove = bite === null || bite === void 0 ? void 0 : (_bite$userReactions2 = bite.userReactions) === null || _bite$userReactions2 === void 0 ? void 0 : (_bite$userReactions2$ = _bite$userReactions2.reactions) === null || _bite$userReactions2$ === void 0 ? void 0 : _bite$userReactions2$.includes(reaction);
+        handleClick(reaction, isRemove);
+      }
+    }, /*#__PURE__*/React.createElement("img", {
+      alt: "reaction-".concat(reaction),
+      width: "100%",
+      height: "100%",
+      src: reactionIconUrls[reaction]
+    }))));
+  }));
+};
+
+export default ReactionButtons;