@blerp/design 1.3.17 → 1.4.1

package/dist/cjs/Blerp/BlerpTopRow.js

@@ -1,9 +1,6 @@
 'use strict';
 
-var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
-var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
-var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var Blerp = require('../Blerp.js');
 var Icons = require('../Icons/Icons.js');
@@ -11,13 +8,82 @@ var index = require('../index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
-var MoreHorizRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizRoundedIcon);
-var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const BlerpTopRow = _ref => {
+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 IconLock = _ref => {
+  let {
+    sx = {}
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: sx.fontSize || "24px"
+    }, sx)
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "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-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+  }));
+};
+
+const IconBookmarkFilled = _ref2 => {
+  let {
+    fontSize = "small",
+    sx = {}
+  } = _ref2;
+  const size = fontSize === "small" ? "20px" : "24px";
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: sx
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+  }));
+};
+
+const IconMoreHoriz = _ref3 => {
+  let {
+    sx = {}
+  } = _ref3;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: "24px"
+    }, sx)
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "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 IconVisibilityOff = _ref4 => {
+  let {
+    sx = {}
+  } = _ref4;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    style: _objectSpread({
+      fontSize: sx.fontSize || "24px"
+    }, sx)
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
+  }));
+};
+
+const BlerpTopRow = _ref5 => {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
   let {
@@ -32,7 +98,7 @@ const BlerpTopRow = _ref => {
     isLocked,
     isBlerpHovered,
     handleClickThreeDot
-  } = _ref;
+  } = _ref5;
 
   function formatNumber(n) {
     var ranges = [{
@@ -55,15 +121,14 @@ const BlerpTopRow = _ref => {
     return n.toString();
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     width: "100%",
     justifyContent: "space-between",
     alignItems: "center",
-    height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px" // makes the top row absolute for small size only. Effictively, this spaces the blerp image beneath it correctly.
-    ,
+    height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px",
     position: sizeParams.buttonSize === "small" && "absolute"
-  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: "12px",
     color: isPremium && !isLocked ? "white.main" : "notBlack.main",
     sx: {
@@ -71,7 +136,7 @@ const BlerpTopRow = _ref => {
       top: "30px",
       left: "10px"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React__default["default"].createElement(index.Text, {
     fontSize: "8px",
     color: isPremium ? "waxwing.main" : "grey5.main",
     sx: {
@@ -83,12 +148,12 @@ const BlerpTopRow = _ref => {
       right: "8px",
       opacity: isBlerpHovered ? 1 : 0.78
     }
-  }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, (Number(bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(1), sizeParams.buttonSize === "small" ? "s" : "sec"), (bite === null || bite === void 0 ? void 0 : bite.listingType) === "UNSAFE" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "May contain potentially sensitive content",
     sx: {
       wordWrap: "break-word"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     className: "unsafe-icon-blrp",
     sx: {
       position: "absolute",
@@ -96,12 +161,12 @@ const BlerpTopRow = _ref => {
       right: "5px",
       padding: "0"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.UnsafeIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.UnsafeIcon, {
     sx: {
       fontSize: "18px",
       color: "ibisRed.main"
     }
-  }))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -112,7 +177,7 @@ const BlerpTopRow = _ref => {
       position: "relative",
       left: "2px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       backgroundColor: "white.main",
       opacity: ".4",
@@ -122,7 +187,7 @@ const BlerpTopRow = _ref => {
       left: "0",
       right: "0"
     }
-  }), bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  }), bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     onClick: e => {
       e.stopPropagation();
       getUserReactions();
@@ -132,9 +197,9 @@ const BlerpTopRow = _ref => {
       color: "notBlack.main",
       padding: "2px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(BookmarkOutlinedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement(IconBookmarkFilled, {
     fontSize: "small"
-  })) : /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  })) : /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     onClick: e => {
       e.stopPropagation();
       getUserReactions();
@@ -145,9 +210,9 @@ const BlerpTopRow = _ref => {
       color: "notBlack.main",
       padding: "2px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.BookmarkAddRounded, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.BookmarkAddRounded, {
     fontSize: "small"
-  })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default['default'].createElement(index.Text, {
+  })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React__default["default"].createElement(index.Text, {
     color: "notBlack.main",
     fontWeight: "light",
     fontSize: "12px",
@@ -155,15 +220,16 @@ const BlerpTopRow = _ref => {
     sx: {
       zIndex: "1"
     }
-  }, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, formatNumber((bite === null || bite === void 0 ? void 0 : bite.totalSaveCount) > 0 ? bite === null || bite === void 0 ? void 0 : bite.totalSaveCount : "")), !!(bite !== null && bite !== void 0 && (_bite$topReactions2 = bite.topReactions) !== null && _bite$topReactions2 !== void 0 && _bite$topReactions2.length) && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     position: "relative",
     width: "40px",
     height: "20px"
-  }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index$1) => /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
-    title: reaction
-  }, /*#__PURE__*/React__default['default'].createElement("img", {
+  }, bite === null || bite === void 0 ? void 0 : (_bite$topReactions3 = bite.topReactions) === null || _bite$topReactions3 === void 0 ? void 0 : _bite$topReactions3.map((reaction, index$1) => /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
+    title: reaction,
+    key: index$1
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
     alt: reaction,
     className: "reaction-icon-blrp",
     style: {
@@ -174,59 +240,59 @@ const BlerpTopRow = _ref => {
       zIndex: index$1
     },
     src: Blerp.reactionIconUrls[reaction]
-  })))), isPremium ? /*#__PURE__*/React__default['default'].createElement(Icons.DiamondIcon, {
+  })))), isPremium ? /*#__PURE__*/React__default["default"].createElement(Icons.DiamondIcon, {
     sx: {
       width: "16px",
       marginRight: "4px",
       zIndex: "1"
     }
-  }) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null))), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null))), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
     justifyContent: "space-between"
-  }, bite.edgeType === "NewTwitchBiteEdge" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, bite.edgeType === "NewTwitchBiteEdge" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Featured on Twitch Bits"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       alignItems: "center",
       margin: "5px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.TwitchBitIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.TwitchBitIcon, {
     sx: {
       zIndex: "1",
       fontSize: "18px"
     }
-  }))), bite.edgeType === "ChannelPointsBiteEdge" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), bite.edgeType === "ChannelPointsBiteEdge" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Featured on Twitch Channel Points"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       alignItems: "center",
       margin: "5px"
     }
-  }, /*#__PURE__*/React__default['default'].createElement(Icons.ChannelPointsIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(Icons.ChannelPointsIcon, {
     sx: {
       zIndex: "1",
       fontSize: "18px"
     }
-  }))), (bite.visibility !== "PUBLIC" || !isOwner) && /*#__PURE__*/React__default['default'].createElement("div", null), bite.visibility !== "PUBLIC" && /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }))), (bite.visibility !== "PUBLIC" || !isOwner) && /*#__PURE__*/React__default["default"].createElement("div", null), bite.visibility !== "PUBLIC" && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     sx: {
       alignItems: "center",
       margin: "5px"
     }
-  }, bite.visibility === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }, bite.visibility === "UNLISTED" && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Unlisted"
-  }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(IconVisibilityOff, {
     sx: {
       fontSize: "15px"
     }
-  })), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React__default['default'].createElement(index.Tooltip, {
+  }))), bite.visibility === "PRIVATE" && isOwner && /*#__PURE__*/React__default["default"].createElement(index.Tooltip, {
     title: "Private"
-  }, /*#__PURE__*/React__default['default'].createElement(LockRoundedIcon__default['default'], {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(IconLock, {
     sx: {
       fontSize: "15px"
     }
-  }))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isBlerpHovered ? /*#__PURE__*/React__default['default'].createElement(index.IconButton, {
+  })))), secondaryActionButton ? secondaryActionButton : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isBlerpHovered ? /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     onClick: e => {
       handleClickThreeDot(e);
     },
@@ -240,7 +306,7 @@ const BlerpTopRow = _ref => {
         backgroundColor: "grey3.main"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(MoreHorizRoundedIcon__default['default'], null)) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null))));
+  }, /*#__PURE__*/React__default["default"].createElement(IconMoreHoriz, null)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null))));
 };
 
 module.exports = BlerpTopRow;

package/dist/cjs/Blerp.js

@@ -2,16 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('prop-types');
 var React = require('react');
-var reactColorExtractor = require('react-color-extractor');
-var styled = require('styled-components');
 var BlerpImageRow = require('./Blerp/BlerpImageRow.js');
 var BlerpSavePopup = require('./Blerp/BlerpSavePopup.js');
 var BlerpTitleRow = require('./Blerp/BlerpTitleRow.js');
 var BlerpTopRow = require('./Blerp/BlerpTopRow.js');
 var index = require('./index.js');
 var ScreenSizeHook = require('./ScreenSizeHook.js');
+var Theme = require('./Theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,8 +28,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,
@@ -60,7 +56,7 @@ const Blerp = _ref => {
     handleClickLock,
     backgroundColor
   } = _ref;
-  const theme = React.useContext(styled.ThemeContext);
+  const theme = Theme.useBlerpTheme();
   const [openSave, setOpenSave] = React.useState(false);
   const size = ScreenSizeHook.useWindowSize();
   const [profileColors, setProfileColors] = React.useState(null);
@@ -140,7 +136,7 @@ const Blerp = _ref => {
     }
   }
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.Box, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Box, {
     id: "blerp-component-".concat(bite._id),
     onClick: e => {
       e.stopPropagation();
@@ -171,7 +167,7 @@ const Blerp = _ref => {
         border: isPremium ? "none" : "2px solid transparent"
       }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     sx: {
       position: "absolute",
       top: "0",
@@ -182,10 +178,7 @@ 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__default['default'].createElement(reactColorExtractor.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__default['default'].createElement(BlerpTopRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTopRow, {
     bite: bite,
     isOwner: isOwner,
     sizeParams: sizeParams,
@@ -197,7 +190,7 @@ const Blerp = _ref => {
     secondaryActionButton: secondaryActionButton,
     isBlerpHovered: isBlerpHovered,
     handleClickThreeDot: handleClickThreeDot
-  }), /*#__PURE__*/React__default['default'].createElement(BlerpImageRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpImageRow, {
     bite: bite,
     isOwner: isOwner,
     sizeParams: sizeParams,
@@ -211,7 +204,7 @@ const Blerp = _ref => {
     isBlerpHovered: isBlerpHovered,
     handleClickPlay: handleClickPlay,
     handleClickLock: handleClickLock
-  }), /*#__PURE__*/React__default['default'].createElement(BlerpTitleRow, {
+  }), /*#__PURE__*/React__default["default"].createElement(BlerpTitleRow, {
     bite: bite,
     title: title,
     isLinkTitle: isLinkTitle,
@@ -220,7 +213,7 @@ const Blerp = _ref => {
     isLocked: isLocked,
     isOwner: isOwner,
     sizeParams: sizeParams
-  }), openSave && /*#__PURE__*/React__default['default'].createElement(BlerpSavePopup, {
+  }), openSave && /*#__PURE__*/React__default["default"].createElement(BlerpSavePopup, {
     bite: bite,
     anchorRef: anchorRef,
     setOpenSave: setOpenSave,
@@ -235,5 +228,5 @@ const Blerp = _ref => {
 };
 
 exports.Blerp = Blerp;
-exports.default = Blerp;
+exports["default"] = Blerp;
 exports.reactionIconUrls = reactionIconUrls;

package/dist/cjs/BlerpAudioContextProvider.js

@@ -99,7 +99,7 @@ const BlerpAudioContextProvider = _ref => {
     setSelectedBlerp(bite);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(BlerpAudioContext.Provider, {
+  return /*#__PURE__*/React__default["default"].createElement(BlerpAudioContext.Provider, {
     value: {
       selectedBlerp: selectedBlerp,
       setSelectedBlerp: setSelectedBlerp,
@@ -138,4 +138,4 @@ const BlerpAudioContextProvider = _ref => {
 
 exports.BlerpAudioContext = BlerpAudioContext;
 exports.BlerpAudioContextProvider = BlerpAudioContextProvider;
-exports.default = BlerpAudioContextProvider;
+exports["default"] = BlerpAudioContextProvider;