@blerp/design 1.2.72 → 1.2.74

package/dist/index.cjs.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var material = require('@mui/material');
-var PropTypes = require('prop-types');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('prop-types');
 var React = require('react');
 var reactColorExtractor = require('react-color-extractor');
 var styled = require('styled-components');
@@ -24,6 +25,8 @@ var MoreHorizRoundedIcon = require('@mui/icons-material/MoreHorizRounded');
 var reactPalette = require('react-palette');
 var KeyboardArrowRightRoundedIcon = require('@mui/icons-material/KeyboardArrowRightRounded');
 var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
+require('core-js/modules/web.url.js');
+require('core-js/modules/web.url-search-params.js');
 var CloseRoundedIcon = require('@mui/icons-material/CloseRounded');
 var FileUploadRoundedIcon = require('@mui/icons-material/FileUploadRounded');
 var _extends = require('@babel/runtime/helpers/extends');
@@ -57,7 +60,6 @@ var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
@@ -109,22 +111,23 @@ const SaveContainer$2 = styled__default['default'].div(_templateObject2$c || (_t
 const BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\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\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer$2);
 const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-color: ", "70;\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\n    &:hover ", " {\n        opacity: 1;\n    }\n\n    &:hover p {\n        display: block;\n    }\n    &:hover svg {\n        display: none;\n    }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer$2);
 
-const BlerpImageRow = ({
-  bite,
-  playingState,
-  primaryActionButton,
-  getUserReactions,
-  handleClickPlay,
-  handleClickSave,
-  isPremium,
-  isLocked,
-  isOwner,
-  handleClickLock,
-  setOpenSave,
-  sizeParams
-}) => {
+const BlerpImageRow = _ref => {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
 
+  let {
+    bite,
+    playingState,
+    primaryActionButton,
+    getUserReactions,
+    handleClickPlay,
+    handleClickSave,
+    isPremium,
+    isLocked,
+    isOwner,
+    handleClickLock,
+    setOpenSave,
+    sizeParams
+  } = _ref;
   const [actionButtonHovered, setActionButtonHovered] = React.useState(false);
 
   if (bite.visibility === "PRIVATE" && !isOwner) {
@@ -252,18 +255,19 @@ const BlerpImageRow = ({
 var _templateObject$h;
 const ReactionButton$1 = styled__default['default'].div(_templateObject$h || (_templateObject$h = _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.grey5Override, props => props.theme.colors.ibisRed);
 
-const BlerpSavePopup = ({
-  openSave,
-  setOpenSave,
-  sizeParams,
-  unsaveButton,
-  handleClickReaction,
-  bite,
-  handleClickUnsave,
-  handleClickOrganize,
-  organizeButton,
-  anchorRef
-}) => {
+const BlerpSavePopup = _ref => {
+  let {
+    openSave,
+    setOpenSave,
+    sizeParams,
+    unsaveButton,
+    handleClickReaction,
+    bite,
+    handleClickUnsave,
+    handleClickOrganize,
+    organizeButton,
+    anchorRef
+  } = _ref;
   return /*#__PURE__*/React__default['default'].createElement(Popover, {
     open: openSave,
     onClose: () => setOpenSave(false),
@@ -389,16 +393,18 @@ const BlerpSavePopup = ({
 var _templateObject$g;
 const LineClamp$2 = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    margin: 0;\n    text-overflow: ellipsis;\n    overflow: hidden;\n"])));
 
-const BlerpTitleRow = ({
-  bite,
-  title,
-  isLinkTitle,
-  handleClickTitle,
-  isPremium,
-  isLocked,
-  isOwner,
-  sizeParams
-}) => {
+const BlerpTitleRow = _ref => {
+  let {
+    bite,
+    title,
+    isLinkTitle,
+    handleClickTitle,
+    isPremium,
+    isLocked,
+    isOwner,
+    sizeParams
+  } = _ref;
+
   if (bite.visibility === "PRIVATE" && !isOwner) {
     return /*#__PURE__*/React__default['default'].createElement(Stack, {
       direction: "row",
@@ -486,9 +492,10 @@ const BlerpTitleRow = ({
   }, title || bite.title)));
 };
 
-const PresentGiftIcon = ({
-  sx
-}) => {
+const PresentGiftIcon = _ref => {
+  let {
+    sx
+  } = _ref;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -502,9 +509,10 @@ const PresentGiftIcon = ({
     d: "M9.52851 4.05582C10.2735 4.58225 10.9836 5.27026 11.5238 5.98594C12.064 5.27026 12.7741 4.58225 13.5191 4.05582C14.1172 3.6332 14.7839 3.28121 15.4574 3.11073C16.132 2.93995 16.8833 2.93649 17.5556 3.31973C18.7454 3.99788 19.0667 5.56851 18.5299 6.68922C18.4689 6.81663 18.3996 6.93594 18.3232 7.04762H20.4286C21.3227 7.04762 22.0476 7.77249 22.0476 8.66667V11.0952C22.0476 11.9894 21.3227 12.7143 20.4286 12.7143V18.381C20.4286 19.2751 19.7037 20 18.8095 20H4.2381C3.34392 20 2.61905 19.2751 2.61905 18.381V12.7143C1.72487 12.7143 1 11.9894 1 11.0952V8.66667C1 7.77249 1.72487 7.04762 2.61905 7.04762H4.72438C4.64803 6.93594 4.57873 6.81663 4.5177 6.68922C3.98094 5.56851 4.30225 3.99788 5.49196 3.31973C6.16427 2.93649 6.91562 2.93995 7.59023 3.11073C8.26369 3.28121 8.9304 3.6332 9.52851 4.05582ZM14.7551 7.01891C14.5252 7.03815 14.2932 7.04702 14.0642 7.04762H14.0144C13.5892 7.04651 13.1756 7.01726 12.8071 6.97327C13.2274 6.41385 13.8102 5.8326 14.4534 5.37808C14.9483 5.02841 15.4334 4.78692 15.8547 4.68027C16.2749 4.5739 16.5613 4.61654 16.7539 4.72631C17.0981 4.92251 17.2956 5.51816 17.0697 5.98985C16.9417 6.25716 16.6928 6.48772 16.2844 6.67092C15.8712 6.85625 15.3425 6.96974 14.7551 7.01891ZM10.2405 6.97327C9.87199 7.01726 9.45845 7.04651 9.03317 7.04762H8.98341C8.75442 7.04702 8.52241 7.03815 8.29254 7.01891C7.70512 6.96974 7.17643 6.85625 6.76322 6.67092C6.35477 6.48772 6.10594 6.25716 5.97791 5.98985C5.75199 5.51816 5.94952 4.92251 6.29373 4.72631C6.48631 4.61654 6.77273 4.5739 7.19291 4.68027C7.61423 4.78692 8.09933 5.02841 8.5942 5.37808C9.23744 5.8326 9.82024 6.41385 10.2405 6.97327ZM12.3333 12.7143H18.8095L18.8095 18.381H12.3333V12.7143ZM12.3333 11.0952H18.8095L18.8119 11.0952H20.4286V8.66667L12.3333 8.66667V11.0952ZM10.7143 8.66667V11.0952H4.2381H4.23734H2.61905L2.61905 8.66667L10.7143 8.66667ZM10.7143 12.7143V18.381H4.2381V12.7143H10.7143Z"
   })));
 };
-const SparkleGiftIcon = ({
-  sx
-}) => {
+const SparkleGiftIcon = _ref2 => {
+  let {
+    sx
+  } = _ref2;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -518,9 +526,10 @@ const SparkleGiftIcon = ({
     d: "M19.6022 6.79143L18.904 6.52886C18.2561 6.28566 17.7472 5.76932 17.5075 5.11199L17.2487 4.40356C17.1601 4.16213 16.9326 4 16.679 4C16.4254 4 16.1979 4.16037 16.1093 4.40356L15.8505 5.11199C15.6108 5.76932 15.1018 6.28566 14.454 6.52886L13.7557 6.79143C13.5178 6.88131 13.358 7.11217 13.358 7.36946C13.358 7.62675 13.516 7.85761 13.7557 7.94748L14.454 8.21006C15.1018 8.45325 15.6108 8.9696 15.8505 9.62693L16.1093 10.3354C16.1979 10.5768 16.4254 10.7389 16.679 10.7389C16.9326 10.7389 17.1601 10.5785 17.2487 10.3354L17.5075 9.62693C17.7472 8.9696 18.2561 8.45325 18.904 8.21006L19.6022 7.94748C19.8402 7.85761 20 7.62675 20 7.36946C20 7.11217 19.8419 6.88131 19.6022 6.79143Z"
   })));
 };
-const PlayOutlineIcon = ({
-  sx
-}) => {
+const PlayOutlineIcon = _ref3 => {
+  let {
+    sx
+  } = _ref3;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -533,9 +542,10 @@ const PlayOutlineIcon = ({
     d: "M3.9,1C3.3,1,2.6,1.4,2.6,2.2v11.6c0,1,1.3,1.6,2,1l8.1-5.6c0.8-0.5,0.8-1.8,0-2.3L4.7,1.2     C4.5,1,4.2,1,3.9,1 M3.7-1L3.7-1c0.6,0,1.2,0.2,1.7,0.5l0,0L14,5.6C14.7,6.1,15.2,7,15.2,8c0,1-0.5,1.9-1.2,2.5l-8.6,6     c-0.5,0.3-1,0.5-1.6,0.5c-0.7,0-1.4-0.3-2-0.7c-0.6-0.5-1-1.3-1-2.1V1.8c0-0.9,0.3-1.6,1-2.1C2.3-0.8,3-1,3.7-1z"
   }))));
 };
-const PlaySolidIcon = ({
-  sx
-}) => {
+const PlaySolidIcon = _ref4 => {
+  let {
+    sx
+  } = _ref4;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -547,9 +557,10 @@ const PlaySolidIcon = ({
     d: "M7.2,4.3c-0.2,0-0.3,0-0.5,0.1C6.4,4.6,6.3,4.8,6.3,5.1v13.8c0,0.4,0.3,0.6,0.4,0.7c0.3,0.2,0.7,0.2,0.9,0    l9.6-6.7c0.2-0.2,0.4-0.4,0.4-0.7c0-0.3,0-0.6-0.2-0.8c-0.1-0.1-0.1-0.1-0.2-0.2L7.7,4.5C7.6,4.4,7.4,4.3,7.2,4.3z"
   })));
 };
-const TwitchBitIcon = ({
-  sx
-}) => {
+const TwitchBitIcon = _ref5 => {
+  let {
+    sx
+  } = _ref5;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -562,9 +573,10 @@ const TwitchBitIcon = ({
     d: "M12,21c-0.2,0-0.3-0.1-0.5-0.2l-6.8-5.4c-0.3-0.2-0.4-0.6-0.2-1l6.8-11.2C11.6,3.1,11.8,3,12,3c0,0,0,0,0,0    c0.3,0,0.5,0.1,0.6,0.4l6.7,11.2c0.2,0.3,0.1,0.7-0.2,1l-6.7,5.4C12.4,20.9,12.2,21,12,21z M6.2,14.7l5.8,4.6l5.7-4.6L12,5.2    L6.2,14.7z"
   }))));
 };
-const BlerpCoinsIcon = ({
-  sx
-}) => {
+const BlerpCoinsIcon = _ref6 => {
+  let {
+    sx
+  } = _ref6;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -580,9 +592,10 @@ const BlerpCoinsIcon = ({
     d: "M11,21c-4.4,0-8-3.6-8-8c0-2.6,1.3-5,3.4-6.5c-2.2,3.2-1.8,7.4,0.9,10.2    c2.7,2.7,7,3.1,10.2,0.9C16,19.7,13.6,21,11,21z"
   })));
 };
-const ShortcutIcon = ({
-  sx
-}) => {
+const ShortcutIcon = _ref7 => {
+  let {
+    sx
+  } = _ref7;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -599,9 +612,10 @@ const ShortcutIcon = ({
     d: "M13.7,17H6.3C4.5,17,3,15.5,3,13.7V6.3C3,4.5,4.5,3,6.3,3h7.4C15.5,3,17,4.5,17,6.3    c0,0,0,0,0,0v7.4C17,15.5,15.5,17,13.7,17z M7.8,8.3c-0.1,0-0.2,0-0.3,0.1c-0.6,0.6-0.9,1.5-0.9,2.3c0,1.8,1.5,3.3,3.3,3.3    s3.3-1.5,3.3-3.3c0-1.3-0.7-2.5-1.7-3.3c-0.6-0.6-1.2-1.1-1.2-1.9c0-0.2-0.2-0.4-0.4-0.4c0,0,0,0,0,0c-0.1,0-0.3,0.1-0.3,0.2    C9,6.1,8.8,6.9,8.8,7.7C9,8.2,9.3,8.6,9.7,9c0.4,0.3,0.7,0.8,0.8,1.3c0,0.6-0.5,1.1-1.1,1.1h0c-0.6,0-1.1-0.5-1.1-1.1V8.7    c0-0.1,0-0.2-0.1-0.3C8.1,8.4,7.9,8.3,7.8,8.3z"
   })));
 };
-const LightbulbIcon = ({
-  sx
-}) => {
+const LightbulbIcon = _ref8 => {
+  let {
+    sx
+  } = _ref8;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -631,9 +645,10 @@ const LightbulbIcon = ({
     d: "M14,18.1H9.7c-0.1,0-0.2,0.1-0.2,0.2v1.1l0,0c0,0.1,0,0.6,0.2,0.9c0.2,0.2,0.8,0.8,0.8,0.8s0.1,0.1,0.2,0.1      h2.2c0.1,0,0.2,0,0.3-0.1c0,0,0.8-0.5,0.8-0.8c0.1-0.2,0.2-0.8,0.2-0.9l0,0v-1.1C14.1,18.1,14,18.1,14,18.1z"
   })))));
 };
-const TwitchIcon = ({
-  sx
-}) => {
+const TwitchIcon = _ref9 => {
+  let {
+    sx
+  } = _ref9;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -670,9 +685,10 @@ const TwitchIcon = ({
     height: "3.7"
   })))))));
 };
-const BlerpyIcon = ({
-  sx
-}) => {
+const BlerpyIcon = _ref10 => {
+  let {
+    sx
+  } = _ref10;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -684,9 +700,10 @@ const BlerpyIcon = ({
     d: "M18,10.6c-0.4-1.9,1.3-3.3,0.2-4.8c-1.6-1.9-3.5,0.7-5.2-0.1c-1.1-0.5-2.3-2.2-4-1.6   S7.5,6.9,7,8c-0.9,1.7-4,0.9-4,3.4c0,1.8,2.2,1.8,3.2,3.5c1,1.7-1.2,3.8,0.7,5.4c2.4,2,4.8-2,6.9-2.8l0,0c2.1-0.8,6.5,0.8,7.1-2.3   C21.4,12.7,18.4,12.5,18,10.6z M12.7,14.3c-1.5,0.5-3.2-0.1-4.1-1.4c-0.2-0.3-0.1-0.6,0.1-0.8C8.7,12,8.8,12,8.9,12   c0.9-0.1,1.8-0.3,2.6-0.6c0.9-0.3,1.7-0.7,2.4-1.2c0.3-0.2,0.6-0.1,0.8,0.2c0.1,0.1,0.1,0.2,0.1,0.3C15.1,12.2,14.2,13.7,12.7,14.3   L12.7,14.3z"
   })));
 };
-const RadarDishIcon = ({
-  sx
-}) => {
+const RadarDishIcon = _ref11 => {
+  let {
+    sx
+  } = _ref11;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -706,9 +723,10 @@ const RadarDishIcon = ({
     d: "M19.1,4.9c-1.5-1.6-3.7-2.2-5.8-1.8c-0.4,0.1-0.6,0.4-0.6,0.8c0.1,0.4,0.5,0.6,0.8,0.6    c1.7-0.3,3.4,0.2,4.6,1.4c1.2,1.2,1.7,2.9,1.4,4.6c-0.1,0.4,0.2,0.8,0.6,0.8c0,0,0.1,0,0.1,0c0.3,0,0.6-0.2,0.7-0.6    C21.2,8.7,20.6,6.5,19.1,4.9z"
   }))));
 };
-const ChannelPointsIcon = ({
-  sx
-}) => {
+const ChannelPointsIcon = _ref12 => {
+  let {
+    sx
+  } = _ref12;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -728,9 +746,10 @@ const ChannelPointsIcon = ({
     d: "M16.6,11.3l-2.2,0c0-0.5-0.1-0.9-0.4-1.1c-0.4-0.4-1-0.4-1.3-0.4c0,0,0,0,0,0l0-2.2c0,0,0,0,0,0     c1.2,0,2.2,0.4,2.9,1.1C16.1,9,16.7,9.9,16.6,11.3z"
   })))));
 };
-const GiftIcon = ({
-  sx
-}) => {
+const GiftIcon = _ref13 => {
+  let {
+    sx
+  } = _ref13;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("path", {
@@ -739,9 +758,10 @@ const GiftIcon = ({
     d: "M19.4,7.7h-2c0.2-0.4,0.4-0.8,0.4-1.3c0-1.3-1.1-2.4-2.4-2.4c-1.8,0-2.8,1.4-3.3,2.5C11.5,5.4,10.4,4,8.7,4  C7.3,4,6.2,5.1,6.2,6.4c0,0.5,0.1,0.9,0.4,1.3h-2C4.3,7.7,4,8,4,8.3V12c0,0.3,0.3,0.6,0.6,0.6h0.9v6.9c0,0.3,0.3,0.6,0.6,0.6h11.9  c0.3,0,0.6-0.3,0.6-0.6v-6.9h0.9c0.3,0,0.6-0.3,0.6-0.6V8.3C20,8,19.7,7.7,19.4,7.7z M15.3,5.1c0.7,0,1.3,0.6,1.3,1.3  s-0.6,1.3-1.3,1.3h-2.6C13.1,6.8,13.9,5.1,15.3,5.1z M7.4,6.4c0-0.7,0.6-1.3,1.3-1.3c1.5,0,2.3,1.6,2.6,2.6H8.7  C7.9,7.7,7.4,7.1,7.4,6.4z M5.1,8.9h3.5h2.8v2.6H5.1V8.9z M6.6,12.6h4.8v6.3H6.6V12.6z M17.4,18.9h-4.8v-6.3h4.8V18.9z M18.9,11.4  h-6.3V8.9h2.8h3.5V11.4z"
   }));
 };
-const WalkonIcon = ({
-  sx
-}) => {
+const WalkonIcon = _ref14 => {
+  let {
+    sx
+  } = _ref14;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -753,9 +773,10 @@ const WalkonIcon = ({
     d: "M8.5,3C7.1,3,6,5,6,7.5c0.1,1.7,0.3,3.4,0.6,5.1c0.3,1.8,0.9,3.2,1.9,3.2   s1.8-1,1.8-2.8c0-0.6-0.5-1.6-0.5-2.4c0-1.5,0.9-2.1,0.9-3.5C10.8,4.7,10,3,8.5,3L8.5,3z M15.5,8.1c-1.4,0-2.2,1.7-2.2,4.2   c0,1.4,1,2,0.9,3.5c0,0.8-0.5,1.8-0.5,2.4c0,1.8,0.7,2.8,1.8,2.8s1.7-1.5,1.9-3.2c0.3-1.7,0.5-3.4,0.6-5.1   C18,10.2,16.9,8.1,15.5,8.1L15.5,8.1z"
   })));
 };
-const PointerFingerIcon = ({
-  sx
-}) => {
+const PointerFingerIcon = _ref15 => {
+  let {
+    sx
+  } = _ref15;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -781,9 +802,10 @@ const PointerFingerIcon = ({
     d: "M8.1,7c0.1,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.3-0.1c0.1-0.1,0.1-0.4,0-0.5L7,5.1C6.8,4.9,6.6,5,6.5,5.1    c-0.1,0.1-0.1,0.4,0,0.5L8.1,7z"
   }))));
 };
-const UnsafeIcon = ({
-  sx
-}) => {
+const UnsafeIcon = _ref16 => {
+  let {
+    sx
+  } = _ref16;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -798,9 +820,10 @@ const UnsafeIcon = ({
     d: "M12,21c-1.2-0.5-2.2-1.2-3.2-2c-1.5-1-2.7-2.3-3.7-3.8c-0.6-1.6-1-3.3-1-5    c-0.2-1.5,0-3,0.4-4.4C5.2,4.2,11.3,3,12,3c0.8,0,6.6,1.3,7.6,2.8s0.3,7.1-0.9,9.4c-1,1.5-2.2,2.7-3.6,3.8    C14.2,19.8,13.1,20.5,12,21z M11.8,12L11.8,12l2.4,2.3c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.3,0.2-0.4    c0-0.2-0.1-0.3-0.2-0.4l-2.4-2.3l2.4-2.3c0.1-0.1,0.2-0.3,0.2-0.4c0-0.2-0.1-0.3-0.2-0.4C15,8,14.8,7.9,14.6,7.9    c-0.2,0-0.3,0.1-0.4,0.2l-2.4,2.3L9.5,8.2C9.4,8.1,9.2,8,9.1,8C8.9,8,8.7,8.1,8.6,8.2C8.5,8.3,8.4,8.5,8.4,8.6    c0,0.2,0.1,0.3,0.2,0.4l2.3,2.2l-2.3,2.2c-0.1,0.1-0.2,0.3-0.2,0.4c0,0.2,0.1,0.3,0.2,0.4c0.1,0.1,0.3,0.2,0.4,0.2    c0.2,0,0.3-0.1,0.4-0.2L11.8,12L11.8,12z"
   }))));
 };
-const DiscordIcon = ({
-  sx
-}) => {
+const DiscordIcon = _ref17 => {
+  let {
+    sx
+  } = _ref17;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -819,9 +842,10 @@ const DiscordIcon = ({
     d: "M751.7,928.6h-12.1c-1,0-1.8,0.8-1.8,1.9c0,0,0,0,0,0v12.2c0,1,0.8,1.9,1.8,1.9    c0,0,0,0,0,0h10.2l-0.5-1.7l1.2,1.1l1.1,1l1.9,1.7v-16.1C753.5,929.4,752.7,928.6,751.7,928.6    C751.7,928.6,751.7,928.6,751.7,928.6z M748.2,940.4c0,0-0.3-0.4-0.6-0.7c0.7-0.2,1.2-0.5,1.6-1.1c-0.3,0.2-0.7,0.4-1,0.5    c-0.4,0.2-0.9,0.3-1.3,0.4c-0.8,0.1-1.6,0.1-2.3,0c-0.5-0.1-0.9-0.2-1.3-0.4c-0.2-0.1-0.4-0.2-0.7-0.3c0,0-0.1,0-0.1,0    c0,0,0,0,0,0c-0.2-0.1-0.3-0.2-0.3-0.2c0.4,0.5,0.9,0.9,1.6,1.1c-0.3,0.3-0.6,0.7-0.6,0.7c-1.1,0-2.1-0.5-2.7-1.4    c0-1.8,0.5-3.6,1.3-5.2c0.7-0.6,1.6-0.9,2.5-0.9l0.1,0.1c-0.9,0.2-1.7,0.6-2.4,1.2c0,0,0.2-0.1,0.5-0.3c0.6-0.3,1.3-0.5,2-0.6    c0.1,0,0.1,0,0.2,0c0.6-0.1,1.2-0.1,1.8,0c1,0.1,1.9,0.4,2.7,0.9c-0.7-0.5-1.4-0.9-2.2-1.1l0.1-0.1c0.9,0,1.8,0.4,2.5,0.9    c0.8,1.6,1.3,3.4,1.3,5.2C750.3,939.9,749.3,940.4,748.2,940.4z"
   }))));
 };
-const NewDiscordIcon = ({
-  sx
-}) => {
+const NewDiscordIcon = _ref18 => {
+  let {
+    sx
+  } = _ref18;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -845,9 +869,10 @@ const NewDiscordIcon = ({
     fill: "white"
   })))));
 };
-const BookmarkAddRounded = ({
-  sx
-}) => {
+const BookmarkAddRounded = _ref19 => {
+  let {
+    sx
+  } = _ref19;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -867,9 +892,10 @@ const BookmarkAddRounded = ({
     d: "M14.2,18.6c-0.6,0-1.3-0.5-1.7-0.8l-2.1-1.5l-2.7,1.9c-0.3,0.3-0.8,0.4-1.3,0.3c-0.7-0.2-1-0.8-1-1.3     l0.1-8.2C5.5,8.5,5.7,8,6,7.6c0.5-0.4,1-0.7,1.6-0.7l3.4,0v1.5H7.6c-0.2,0-0.4,0.1-0.6,0.3C7,8.7,7,8.9,7,9.1L6.9,17l3.5-2.5     l3,2.2c0.2,0.1,0.3,0.2,0.5,0.3c0,0,0,0,0,0l0-5.3h1.5v5.3c0,0.6-0.2,1.5-1,1.7C14.3,18.6,14.2,18.6,14.2,18.6z"
   })))));
 };
-const DiamondIcon = ({
-  sx
-}) => {
+const DiamondIcon = _ref20 => {
+  let {
+    sx
+  } = _ref20;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -882,9 +908,10 @@ const DiamondIcon = ({
     d: "M10118.5,660.2c-0.3,0-0.7-0.1-0.9-0.2l-7.5-7.4c-0.7-0.6-0.7-1.5-0.3-2.2l2.5-3.4   c0.6-0.7,1.5-1.1,2.4-1.1h7.7c0.9-0.1,1.8,0.3,2.4,1.1l2.6,3.5c0.4,0.7,0.2,1.6-0.4,2.1l-7.5,7.4   C10119.2,660.1,10118.8,660.2,10118.5,660.2z M10122.7,648.6c-0.1,0-0.2,0.1-0.2,0.2c0,0.2,0.2,0.5,0.4,0.7   c0.3,0.4,0.5,0.9,0.5,1.4c0,0.2-0.1,0.6-0.2,0.7c-0.4,0.7-1,1.4-1.6,2c-0.8,0.9-1.7,1.7-1.5,1.9l0.2,0.2c0.6,0,3.2-3.2,3.2-3.2   c0.3-0.4,0.5-0.8,0.6-1.3c-0.1-0.7-0.3-1.2-0.7-1.8C10123.3,649.2,10122.9,648.6,10122.7,648.6L10122.7,648.6z"
   })));
 };
-const BlerpCardIcon = ({
-  sx
-}) => {
+const BlerpCardIcon = _ref21 => {
+  let {
+    sx
+  } = _ref21;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -904,9 +931,10 @@ const BlerpCardIcon = ({
     d: "M12.3,11.4c-0.4,0.2-0.7,0.4-1.1,0.6c-0.4,0.1-0.8,0.2-1.2,0.3c0,0-0.1,0-0.1,0.1c-0.1,0.1-0.1,0.3-0.1,0.4     c0.4,0.6,1.2,0.9,1.9,0.6l0,0c0.7-0.3,1.1-1,1-1.7c0,0,0-0.1,0-0.1C12.6,11.3,12.4,11.3,12.3,11.4z"
   })))));
 };
-const CrownIcon = ({
-  sx
-}) => {
+const CrownIcon = _ref22 => {
+  let {
+    sx
+  } = _ref22;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -918,9 +946,10 @@ const CrownIcon = ({
     d: "M17.8,17.4H6.2c-0.2,0-0.4,0.2-0.4,0.4v0.9c0,0.2,0.2,0.4,0.4,0.4h11.7   c0.2,0,0.4-0.2,0.4-0.4v-0.9C18.3,17.6,18.1,17.4,17.8,17.4C17.8,17.4,17.8,17.4,17.8,17.4z M19.6,8.4c-0.7,0-1.3,0.6-1.3,1.4   c0,0,0,0,0,0c0,0.2,0,0.4,0.1,0.6l-2,1.2c-0.4,0.3-1,0.1-1.2-0.3c0,0,0,0,0,0l-2.3-4c0.6-0.5,0.7-1.3,0.2-1.9   c-0.5-0.6-1.3-0.7-1.9-0.2C10.6,5.6,10.5,6.4,11,7c0.1,0.1,0.1,0.1,0.2,0.2l-2.3,4c-0.2,0.4-0.8,0.6-1.2,0.3c0,0,0,0,0,0l-2-1.2   c0.3-0.7,0-1.5-0.7-1.8s-1.5,0-1.8,0.7s0,1.5,0.7,1.8c0.2,0.1,0.4,0.1,0.6,0.1c0.1,0,0.1,0,0.2,0l2,5.4h10.8l2-5.4   c0.1,0,0.1,0,0.2,0c0.7,0,1.3-0.6,1.3-1.3C21,9,20.4,8.4,19.6,8.4L19.6,8.4z"
   })));
 };
-const CogIcon = ({
-  sx
-}) => {
+const CogIcon = _ref23 => {
+  let {
+    sx
+  } = _ref23;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -932,9 +961,10 @@ const CogIcon = ({
     d: "M12,21c-0.9,0-1.6-0.7-1.6-1.6v-0.1c-0.1-0.8-0.7-1.3-1.4-1.3c-0.4,0-0.7,0.1-0.9,0.4   l0,0c-0.6,0.6-1.7,0.7-2.3,0s-0.7-1.7,0-2.3c0,0,0,0,0,0l0,0c0.5-0.5,0.5-1.4,0-1.9c-0.2-0.2-0.6-0.4-0.9-0.4H4.6   C3.7,13.7,3,13,3,12s0.7-1.6,1.6-1.6h0.1c0.6,0,1-0.4,1.2-0.9C6.1,9,6,8.4,5.7,8L5.6,8C5,7.4,5,6.3,5.6,5.7s1.7-0.6,2.3,0l0,0l0,0   c0.4,0.4,1,0.5,1.5,0.3h0.1c0.5-0.2,0.8-0.7,0.8-1.2V4.6C10.4,3.7,11.1,3,12,3c0.9,0,1.6,0.7,1.6,1.6v0.1c0,0.5,0.3,1,0.8,1.2   c0.5,0.2,1.1,0.1,1.5-0.3l0,0c0.3-0.3,0.7-0.5,1.2-0.5c0.9,0,1.6,0.7,1.6,1.6c0,0.4-0.2,0.8-0.5,1.2l0,0c-0.4,0.4-0.5,1-0.3,1.5   v0.1c0.2,0.5,0.7,0.8,1.2,0.8h0.1c0.9,0,1.6,0.7,1.7,1.6c0,0.9-0.7,1.6-1.6,1.7c0,0,0,0-0.1,0h-0.1c-0.7,0-1.4,0.6-1.3,1.4   c0,0.3,0.1,0.7,0.4,0.9l0,0c0.6,0.6,0.6,1.7,0,2.3c-0.6,0.6-1.7,0.6-2.3,0l0,0l0,0c-0.5-0.5-1.4-0.5-1.9,0   c-0.2,0.3-0.4,0.6-0.4,0.9v0.1C13.7,20.2,12.9,21,12,21z M12,9.5c-1.4,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4l0,0   C14.4,10.6,13.3,9.5,12,9.5z"
   })));
 };
-const ClockIcon = ({
-  sx
-}) => {
+const ClockIcon = _ref24 => {
+  let {
+    sx
+  } = _ref24;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -946,9 +976,10 @@ const ClockIcon = ({
     d: "M12,18.9c4,0,7.2-3.2,7.2-7.2S16,4.5,12,4.5s-7.2,3.2-7.2,7.2S8,18.9,12,18.9 M12,2.7  c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S7,2.7,12,2.7 M12.4,7.2v4.7l4.1,2.4l-0.7,1.1l-4.7-2.8V7.2H12.4z"
   })));
 };
-const OpenLockIcon = ({
-  sx
-}) => {
+const OpenLockIcon = _ref25 => {
+  let {
+    sx
+  } = _ref25;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -959,9 +990,10 @@ const OpenLockIcon = ({
     d: "M19.5,3.2c-0.7-0.7-1.7-1-2.9-1c-1.1,0-2,0.4-2.7,1.1c-1.4,1.5-1.4,4.1-1.3,6.7H6.5c-1.4,0-2.5,1.1-2.5,2.4v6.1   c0,1.4,1.1,2.4,2.5,2.4h7.4c1.4,0,2.5-1.1,2.5-2.4v-6.1c0-1.3-1-2.3-2.3-2.4C14,7.8,14,5.4,15,4.4c0.4-0.4,0.9-0.6,1.6-0.6   c0.8,0,1.4,0.2,1.8,0.6c0.8,0.7,0.7,2.2,0.7,3l0,0.2h1.5l0-0.2C20.7,6.3,20.7,4.4,19.5,3.2z M11,15.2l-0.2,0.2v2   c0,0.3-0.3,0.6-0.6,0.6c-0.3,0-0.6-0.3-0.6-0.6v-2l-0.2-0.2C9.1,15,9,14.7,9,14.3v0c0-0.7,0.6-1.2,1.2-1.2c0.3,0,0.6,0.1,0.9,0.4   c0.2,0.2,0.4,0.5,0.4,0.9C11.4,14.7,11.3,15,11,15.2z"
   })));
 };
-const WindowsIcon = ({
-  sx
-}) => {
+const WindowsIcon = _ref26 => {
+  let {
+    sx
+  } = _ref26;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("path", {
@@ -969,9 +1001,10 @@ const WindowsIcon = ({
     d: "M3,5.5l7.4-1v7.1H3V5.5z M3,18.5l7.4,1v-7H3V18.5L3,18.5z M11.2,19.6L21,21v-8.5h-9.8V19.6z M11.2,4.4v7.2H21 V3L11.2,4.4z"
   }));
 };
-const BroomIcon = ({
-  sx
-}) => {
+const BroomIcon = _ref27 => {
+  let {
+    sx
+  } = _ref27;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("g", {
@@ -1000,9 +1033,10 @@ const BroomIcon = ({
     d: "M56.8,8.6h-1.7c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h1.7c0.3,0,0.5,0.2,0.5,0.5C57.3,8.4,57.1,8.6,56.8,8.6z"
   }))))));
 };
-const TikTokIcon = ({
-  sx
-}) => {
+const TikTokIcon = _ref28 => {
+  let {
+    sx
+  } = _ref28;
   return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -1025,21 +1059,23 @@ const TikTokIcon = ({
   })))));
 };
 
-const BlerpTopRow$2 = ({
-  secondaryActionButton,
-  sizeParams,
-  bite,
-  isOwner,
-  getUserReactions,
-  setOpenSave,
-  handleClickSave,
-  isPremium,
-  isLocked,
-  isBlerpHovered,
-  handleClickThreeDot
-}) => {
+const BlerpTopRow$2 = _ref => {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
 
+  let {
+    secondaryActionButton,
+    sizeParams,
+    bite,
+    isOwner,
+    getUserReactions,
+    setOpenSave,
+    handleClickSave,
+    isPremium,
+    isLocked,
+    isBlerpHovered,
+    handleClickThreeDot
+  } = _ref;
+
   function formatNumber(n) {
     var ranges = [{
       divider: 1e9,
@@ -1288,36 +1324,37 @@ const reactionIconUrls$1 = {
   SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
   LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
 };
-const Blerp$1 = ({
-  bite,
-  title,
-  variantSize,
-  isSelected,
-  playingState,
-  primaryActionButton,
-  secondaryActionButton,
-  unsaveButton,
-  organizeButton,
-  getUserReactions,
-  handleClickBackground,
-  handleClickPlay,
-  handleClickThreeDot,
-  handleClickSave,
-  handleClickReaction,
-  handleClickUnsave,
-  handleClickTitle,
-  handleClickOrganize,
-  isLinkTitle,
-  isPremium,
-  isLocked,
-  isOwner,
-  props,
-  // passed in function that sets state of the purchase modal
-  handleClickLock,
-  backgroundColor
-}) => {
+const Blerp$1 = _ref => {
   var _bite$image, _bite$image$original;
 
+  let {
+    bite,
+    title,
+    variantSize,
+    isSelected,
+    playingState,
+    primaryActionButton,
+    secondaryActionButton,
+    unsaveButton,
+    organizeButton,
+    getUserReactions,
+    handleClickBackground,
+    handleClickPlay,
+    handleClickThreeDot,
+    handleClickSave,
+    handleClickReaction,
+    handleClickUnsave,
+    handleClickTitle,
+    handleClickOrganize,
+    isLinkTitle,
+    isPremium,
+    isLocked,
+    isOwner,
+    props,
+    // passed in function that sets state of the purchase modal
+    handleClickLock,
+    backgroundColor
+  } = _ref;
   const theme = React.useContext(styled.ThemeContext);
   const [openSave, setOpenSave] = React.useState(false);
   const size = useWindowSize();
@@ -1491,36 +1528,17 @@ const Blerp$1 = ({
     handleClickOrganize: handleClickOrganize
   })));
 };
-Blerp$1.propTypes = {
-  bite: PropTypes__default['default'].object.isRequired,
-  collections: PropTypes__default['default'].array,
-  variantSize: PropTypes__default['default'].string,
-  userSignedIn: PropTypes__default['default'].object,
-  unsaveButton: PropTypes__default['default'].object,
-  isSelected: PropTypes__default['default'].bool.isRequired,
-  playingState: PropTypes__default['default'].string.isRequired,
-  primaryActionButton: PropTypes__default['default'].object,
-  secondaryActionButton: PropTypes__default['default'].object,
-  getUserReactions: PropTypes__default['default'].func.isRequired,
-  createCollection: PropTypes__default['default'].func,
-  handleClickBackground: PropTypes__default['default'].func.isRequired,
-  handleClickPlay: PropTypes__default['default'].func.isRequired,
-  handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-  handleClickSave: PropTypes__default['default'].func.isRequired,
-  handleClickReaction: PropTypes__default['default'].func.isRequired,
-  handleClickUnsave: PropTypes__default['default'].func.isRequired,
-  handleClickTitle: PropTypes__default['default'].func.isRequired
-};
 
-const UserCard$1 = ({
-  user,
-  onUsernameClick,
-  onFollowerClick,
-  onCreatedClick,
-  collapsed
-}) => {
+const UserCard$1 = _ref => {
   var _user$twitchChannelIn, _user$twitchChannelIn2, _user$twitchChannelIn3, _user$twitchChannelIn4, _user$twitchChannelIn5, _user$profileImage, _user$profileImage$or, _user$twitchChannelIn6;
 
+  let {
+    user,
+    onUsernameClick,
+    onFollowerClick,
+    onCreatedClick,
+    collapsed
+  } = _ref;
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
@@ -1639,14 +1657,15 @@ const UserCard$1 = ({
   }, "created")))));
 };
 
-const UsernameWithPopout$1 = ({
-  user,
-  onUsernameClick,
-  onFollowerClick,
-  onCreatedClick,
-  textStyle,
-  collapsed = true
-}) => {
+const UsernameWithPopout$1 = _ref => {
+  let {
+    user,
+    onUsernameClick,
+    onFollowerClick,
+    onCreatedClick,
+    textStyle,
+    collapsed = true
+  } = _ref;
   const [userCardRef, setUserCardRef] = React.useState(null);
   const openUserCard = Boolean(userCardRef);
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1722,11 +1741,12 @@ var _templateObject$f, _templateObject2$b, _templateObject3$9;
 const PremiumContainer$1 = styled__default['default'].div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])), props => props.theme.colors.grey7);
 const Container$2 = styled__default['default'].div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
 const HoverScrollText$1 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-const FavoriteIconWithCounter$1 = ({
-  saved,
-  count,
-  onClick
-}) => {
+const FavoriteIconWithCounter$1 = _ref => {
+  let {
+    saved,
+    count,
+    onClick
+  } = _ref;
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
@@ -1764,13 +1784,14 @@ const FavoriteIconWithCounter$1 = ({
     }
   }, savedCount));
 };
-const AddedToIcons$1 = ({
-  item,
-  hovering,
-  hide = false
-}) => {
+const AddedToIcons$1 = _ref2 => {
   var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
+  let {
+    item,
+    hovering,
+    hide = false
+  } = _ref2;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
@@ -1819,11 +1840,12 @@ const AddedToIcons$1 = ({
   }))));
 };
 
-const RatingInfoItem$1 = ({
-  hovering,
-  tooltipText,
-  displayText
-}) => {
+const RatingInfoItem$1 = _ref3 => {
+  let {
+    hovering,
+    tooltipText,
+    displayText
+  } = _ref3;
   return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: tooltipText
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -1843,10 +1865,11 @@ const RatingInfoItem$1 = ({
   }, displayText));
 };
 
-const RatingInfo$1 = ({
-  bite,
-  hovering
-}) => {
+const RatingInfo$1 = _ref4 => {
+  let {
+    bite,
+    hovering
+  } = _ref4;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -1936,13 +1959,14 @@ const RatingInfo$1 = ({
   }));
 };
 
-const ReportedWarning$1 = ({
-  showWarning,
-  blacklisted,
-  saved,
-  count,
-  onClick
-}) => {
+const ReportedWarning$1 = _ref5 => {
+  let {
+    showWarning,
+    blacklisted,
+    saved,
+    count,
+    onClick
+  } = _ref5;
   const [show, setShow] = React.useState(showWarning);
   const [hovering, setHovering] = React.useState(false);
 
@@ -2037,18 +2061,19 @@ const ReportedWarning$1 = ({
   })), renderInfo());
 };
 
-const BlerpTopRow$1 = ({
-  bite,
-  hovering,
-  onPlusClick,
-  onOptionClicked,
-  selectedOption,
-  addToOpen,
-  setAddToOpen,
-  renderAddContentButton,
-  hoveringAddTo,
-  setHovering
-}) => {
+const BlerpTopRow$1 = _ref6 => {
+  let {
+    bite,
+    hovering,
+    onPlusClick,
+    onOptionClicked,
+    selectedOption,
+    addToOpen,
+    setAddToOpen,
+    renderAddContentButton,
+    hoveringAddTo,
+    setHovering
+  } = _ref6;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     justifyContent: "space-between",
@@ -2089,34 +2114,35 @@ const BlerpTopRow$1 = ({
   }));
 };
 
-const NewBlerp$1 = ({
-  Waveform,
-  bite,
-  playState,
-  play,
-  onTitleClick = () => {
-    console.log("onTitleClick");
-  },
-  onUsernameClick = () => {
-    console.log("onUsernameClick");
-  },
-  onFavoriteClick = () => {
-    console.log("onFavoriteClick");
-  },
-  onAddToPlace = () => {
-    console.log("onAddToPlace");
-  },
-  onOptionClicked = () => {
-    console.log("onAddToPlace");
-  },
-  selectedOption,
-  trending = false,
-  renderAddContentButton,
-  renderThreeDot,
-  isOwner
-}) => {
+const NewBlerp$1 = _ref7 => {
   var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
+  let {
+    Waveform,
+    bite,
+    playState,
+    play,
+    onTitleClick = () => {
+      console.log("onTitleClick");
+    },
+    onUsernameClick = () => {
+      console.log("onUsernameClick");
+    },
+    onFavoriteClick = () => {
+      console.log("onFavoriteClick");
+    },
+    onAddToPlace = () => {
+      console.log("onAddToPlace");
+    },
+    onOptionClicked = () => {
+      console.log("onAddToPlace");
+    },
+    selectedOption,
+    trending = false,
+    renderAddContentButton,
+    renderThreeDot,
+    isOwner
+  } = _ref7;
   const [previewed, setPreviewed] = React.useState(false);
   const [hovering, setHovering] = React.useState(false);
   const [hoveringAddTo, setHoveringAddTo] = React.useState(false);
@@ -2416,11 +2442,12 @@ var _templateObject$e, _templateObject2$a, _templateObject3$8;
 const PremiumContainer = styled__default['default'].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral__default['default'](["\n    background: ", ";\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])), props => props.theme.colors.grey7);
 const Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n    transition: 0.3s;\n"])), props => props.addToOpen ? props.theme.colors.grey5 : props.theme.colors.grey7, props => props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233");
 const HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n    width: 100%;\n    max-width: 280px;\n    min-width: 190px;\n    height: 23px;\n    overflow: hidden;\n    line-height: 30px;\n    box-sizing: border-box;\n    position: relative;\n    margin: 10px 0 5px 0;\n    cursor: pointer;\n    & p {\n        cursor: default;\n        position: absolute;\n        white-space: nowrap;\n        transform: translateX(0);\n        transition: 1s;\n    }\n\n    &:hover p {\n        ", "\n        text-decoration: underline;\n        cursor: pointer;\n    }\n"])), props => props.hover && "transform: translateX(calc(180px - 100%));");
-const FavoriteIconWithCounter = ({
-  saved,
-  count,
-  onClick
-}) => {
+const FavoriteIconWithCounter = _ref => {
+  let {
+    saved,
+    count,
+    onClick
+  } = _ref;
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
   });
@@ -2458,13 +2485,14 @@ const FavoriteIconWithCounter = ({
     }
   }, savedCount));
 };
-const AddedToIcons = ({
-  item,
-  hovering,
-  hide = false
-}) => {
+const AddedToIcons = _ref2 => {
   var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
+  let {
+    item,
+    hovering,
+    hide = false
+  } = _ref2;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     sx: {
@@ -2513,11 +2541,12 @@ const AddedToIcons = ({
   }))));
 };
 
-const RatingInfoItem = ({
-  hovering,
-  tooltipText,
-  displayText
-}) => {
+const RatingInfoItem = _ref3 => {
+  let {
+    hovering,
+    tooltipText,
+    displayText
+  } = _ref3;
   return /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: tooltipText
   }, /*#__PURE__*/React__default['default'].createElement(Text, {
@@ -2537,10 +2566,11 @@ const RatingInfoItem = ({
   }, displayText));
 };
 
-const RatingInfo = ({
-  bite,
-  hovering
-}) => {
+const RatingInfo = _ref4 => {
+  let {
+    bite,
+    hovering
+  } = _ref4;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -2698,13 +2728,14 @@ const RatingInfo = ({
   }));
 };
 
-const ReportedWarning = ({
-  showWarning,
-  blacklisted,
-  saved,
-  count,
-  onClick
-}) => {
+const ReportedWarning = _ref5 => {
+  let {
+    showWarning,
+    blacklisted,
+    saved,
+    count,
+    onClick
+  } = _ref5;
   const [show, setShow] = React.useState(showWarning);
   const [hovering, setHovering] = React.useState(false);
 
@@ -2799,18 +2830,19 @@ const ReportedWarning = ({
   })), renderInfo());
 };
 
-const BlerpTopRow = ({
-  bite,
-  hovering,
-  onPlusClick,
-  onOptionClicked,
-  selectedOption,
-  addToOpen,
-  setAddToOpen,
-  renderAddContentButton,
-  hoveringAddTo,
-  setHovering
-}) => {
+const BlerpTopRow = _ref6 => {
+  let {
+    bite,
+    hovering,
+    onPlusClick,
+    onOptionClicked,
+    selectedOption,
+    addToOpen,
+    setAddToOpen,
+    renderAddContentButton,
+    hoveringAddTo,
+    setHovering
+  } = _ref6;
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     justifyContent: "space-between",
@@ -2851,34 +2883,35 @@ const BlerpTopRow = ({
   }));
 };
 
-const NewBlerpTest$1 = ({
-  Waveform,
-  bite,
-  playState,
-  play,
-  onTitleClick = () => {
-    console.log("onTitleClick");
-  },
-  onUsernameClick = () => {
-    console.log("onUsernameClick");
-  },
-  onFavoriteClick = () => {
-    console.log("onFavoriteClick");
-  },
-  onAddToPlace = () => {
-    console.log("onAddToPlace");
-  },
-  onOptionClicked = () => {
-    console.log("onAddToPlace");
-  },
-  selectedOption,
-  trending = false,
-  renderAddContentButton,
-  renderThreeDot,
-  isOwner
-}) => {
+const NewBlerpTest$1 = _ref7 => {
   var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$channelPointsBu, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
+  let {
+    Waveform,
+    bite,
+    playState,
+    play,
+    onTitleClick = () => {
+      console.log("onTitleClick");
+    },
+    onUsernameClick = () => {
+      console.log("onUsernameClick");
+    },
+    onFavoriteClick = () => {
+      console.log("onFavoriteClick");
+    },
+    onAddToPlace = () => {
+      console.log("onAddToPlace");
+    },
+    onOptionClicked = () => {
+      console.log("onAddToPlace");
+    },
+    selectedOption,
+    trending = false,
+    renderAddContentButton,
+    renderThreeDot,
+    isOwner
+  } = _ref7;
   const [previewed, setPreviewed] = React.useState(false);
   const [hovering, setHovering] = React.useState(false);
   const [hoveringAddTo, setHoveringAddTo] = React.useState(false);
@@ -3176,11 +3209,12 @@ const NewBlerpTest$1 = ({
 
 var _templateObject$d;
 const BlerpImage$2 = styled__default['default'].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral__default['default'](["\n    background-image: url(", ");\n    background-repeat: no-repeat;\n    background-size: cover;\n    width: 140px;\n    height: 140px;\n    border-radius: 12px;\n    transition: 0.3s;\n    position: absolute;\n    opacity: ", ";\n    transform: rotate(", ");\n"])), props => props.image, props => props.firstImage ? "1" : props.hovering ? "1" : "0.5", props => props.hovering ? "45deg" : "20deg");
-const GroupCard$1 = ({
-  group
-}) => {
+const GroupCard$1 = _ref => {
   var _group$blerps14;
 
+  let {
+    group
+  } = _ref;
   const [hovering, setHovering] = React.useState(false);
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
@@ -3329,9 +3363,10 @@ const GroupCard$1 = ({
 };
 
 const BlerpAudioContext = /*#__PURE__*/React.createContext({});
-const BlerpAudioContextProvider$1 = ({
-  children
-}) => {
+const BlerpAudioContextProvider$1 = _ref => {
+  let {
+    children
+  } = _ref;
   const [selectedBlerp, setSelectedBlerp] = React.useState(null);
   const [playState, setPlayState] = React.useState("stopped");
   const [startTime, setStartTime] = React.useState(0); // const [audioCtx, setAudioCtx] = useState(null);
@@ -3344,14 +3379,16 @@ const BlerpAudioContextProvider$1 = ({
     await audioRef.current.pause();
   };
 
-  const mplay = async ({
-    bite,
-    gain = 1,
-    startTime = 0,
-    forcePlay = false
-  }) => {
+  const mplay = async _ref2 => {
     var _bite$audio, _bite$audio$mp;
 
+    let {
+      bite,
+      gain = 1,
+      startTime = 0,
+      forcePlay = false
+    } = _ref2;
+
     if (!audioRef.current) {
       audioRef.current = new Audio();
     }
@@ -3461,34 +3498,35 @@ const BlerpImageScrim$1 = styled__default['default'].div(_templateObject4$6 || (
 const PremiumPill = styled__default['default'].div(_templateObject5$4 || (_templateObject5$4 = _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$4 || (_templateObject6$4 = _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$2 || (_templateObject7$2 = _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$1 = ({
-  bite,
-  variantSize,
-  isSelected,
-  playingState,
-  extraInfoComponent,
-  primaryActionButton,
-  secondaryActionButton,
-  handleClickBackground,
-  handleClickPlay,
-  handleClickSave,
-  handleClickThreeDot,
-  handleClickUnsave,
-  handleClickTitle,
-  handleSubtitleClick,
-  biteSubtitle,
-  isLinkTitle,
-  isLocked,
-  fluid,
-  props,
-  backgroundColor,
-  hoverColor,
-  isPremium,
-  handleClickLock,
-  handleClickPremium
-}) => {
+const BlerpListViewPremium$1 = _ref => {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
+  let {
+    bite,
+    variantSize,
+    isSelected,
+    playingState,
+    extraInfoComponent,
+    primaryActionButton,
+    secondaryActionButton,
+    handleClickBackground,
+    handleClickPlay,
+    handleClickSave,
+    handleClickThreeDot,
+    handleClickUnsave,
+    handleClickTitle,
+    handleSubtitleClick,
+    biteSubtitle,
+    isLinkTitle,
+    isLocked,
+    fluid,
+    props,
+    backgroundColor,
+    hoverColor,
+    isPremium,
+    handleClickLock,
+    handleClickPremium
+  } = _ref;
   const [openSave, setOpenSave] = React.useState(false);
   const {
     loading,
@@ -3826,23 +3864,6 @@ const BlerpListViewPremium$1 = ({
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
-BlerpListViewPremium$1.propTypes = {
-  bite: PropTypes__default['default'].object.isRequired,
-  collections: PropTypes__default['default'].array.isRequired,
-  variantSize: PropTypes__default['default'].string.isRequired,
-  userSignedIn: PropTypes__default['default'].object.isRequired,
-  isSelected: PropTypes__default['default'].bool.isRequired,
-  playingState: PropTypes__default['default'].string.isRequired,
-  actionButton: PropTypes__default['default'].object,
-  getUserReactions: PropTypes__default['default'].func.isRequired,
-  createCollection: PropTypes__default['default'].func.isRequired,
-  handleClickBackground: PropTypes__default['default'].func.isRequired,
-  handleClickPlay: PropTypes__default['default'].func.isRequired,
-  handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-  handleClickSave: PropTypes__default['default'].func.isRequired,
-  handleClickReaction: PropTypes__default['default'].func.isRequired,
-  handleClickUnsave: PropTypes__default['default'].func.isRequired
-};
 
 var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
 const BlerpImage = styled__default['default'].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n    height: 150px;\n    width: 150px;\n    background-image: url(", ");\n    background-size: cover;\n    /* border-radius: 8px; */\n    border-radius: 50%;\n    position: relative;\n    transition: 0.2s;\n\n    &:hover {\n        transform: scale(1.1);\n    }\n"])), props => props.url);
@@ -3851,34 +3872,35 @@ styled__default['default'].div(_templateObject3$6 || (_templateObject3$6 = _tagg
 const SaveContainer = styled__default['default'].div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 25px;\n    height: 25px;\n    opacity: 0;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 5px;\n    transition: 0.3s;\n    background-color: ", ";\n"])), props => props.theme.colors.white);
 const BlerpImageScrim = styled__default['default'].div(_templateObject5$3 || (_templateObject5$3 = _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    /* border-radius: 8px; */\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n\n    &:hover ", " {\n        opacity: 1;\n    }\n"])), props => props.theme.colors.notBlackOverride, props => props.theme.colors.notBlackOverride, SaveContainer);
 styled__default['default'].div(_templateObject6$3 || (_templateObject6$3 = _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 BlerpListView$1 = ({
-  bite,
-  variantSize,
-  isSelected,
-  playingState,
-  extraInfoComponent,
-  primaryActionButton,
-  secondaryActionButton,
-  handleClickBackground,
-  handleClickPlay,
-  handleClickSave,
-  handleClickThreeDot,
-  handleClickUnsave,
-  handleClickTitle,
-  handleSubtitleClick,
-  biteSubtitle,
-  isLinkTitle,
-  fluid,
-  backgroundColor,
-  hoverColor,
-  props,
-  isLocked,
-  isPremium,
-  handleClickLock,
-  handleClickPremium
-}) => {
+const BlerpListView$1 = _ref => {
   var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original;
 
+  let {
+    bite,
+    variantSize,
+    isSelected,
+    playingState,
+    extraInfoComponent,
+    primaryActionButton,
+    secondaryActionButton,
+    handleClickBackground,
+    handleClickPlay,
+    handleClickSave,
+    handleClickThreeDot,
+    handleClickUnsave,
+    handleClickTitle,
+    handleSubtitleClick,
+    biteSubtitle,
+    isLinkTitle,
+    fluid,
+    backgroundColor,
+    hoverColor,
+    props,
+    isLocked,
+    isPremium,
+    handleClickLock,
+    handleClickPremium
+  } = _ref;
   const [openSave, setOpenSave] = React.useState(false);
   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);
@@ -4170,32 +4192,24 @@ const BlerpListView$1 = ({
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
-BlerpListView$1.propTypes = {
-  bite: PropTypes__default['default'].object.isRequired,
-  collections: PropTypes__default['default'].array.isRequired,
-  variantSize: PropTypes__default['default'].string.isRequired,
-  userSignedIn: PropTypes__default['default'].object.isRequired,
-  isSelected: PropTypes__default['default'].bool.isRequired,
-  playingState: PropTypes__default['default'].string.isRequired,
-  actionButton: PropTypes__default['default'].object,
-  getUserReactions: PropTypes__default['default'].func.isRequired,
-  createCollection: PropTypes__default['default'].func.isRequired,
-  handleClickBackground: PropTypes__default['default'].func.isRequired,
-  handleClickPlay: PropTypes__default['default'].func.isRequired,
-  handleClickThreeDot: PropTypes__default['default'].func.isRequired,
-  handleClickSave: PropTypes__default['default'].func.isRequired,
-  handleClickReaction: PropTypes__default['default'].func.isRequired,
-  handleClickUnsave: PropTypes__default['default'].func.isRequired
-};
 
 var _templateObject$a, _templateObject2$7, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-const MasterContainer = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), ({
-  sizeParams
-}) => (sizeParams.height += 2) + "px", ({
-  sizeParams
-}) => sizeParams.width, ({
-  fluid
-}) => fluid ? "300px" : "0", props => props.owned ? "102%" : "100%");
+const MasterContainer = styled__default['default'].div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), _ref => {
+  let {
+    sizeParams
+  } = _ref;
+  return (sizeParams.height += 2) + "px";
+}, _ref2 => {
+  let {
+    sizeParams
+  } = _ref2;
+  return sizeParams.width;
+}, _ref3 => {
+  let {
+    fluid
+  } = _ref3;
+  return fluid ? "300px" : "0";
+}, props => props.owned ? "102%" : "100%");
 const YellowHoverBorder$1 = styled__default['default'].div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
 const TopBox = styled__default['default'].div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral__default['default'](["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), props => props.theme.colors.white);
 const MidBox = styled__default['default'].div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral__default['default'](["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), props => props.theme.colors.grey5);
@@ -4209,19 +4223,20 @@ const SaveBox = styled__default['default'].div(_templateObject10 || (_templateOb
 const SaveBoxTop = styled__default['default'].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default['default'](["\n    z-index: 5;\n    width: 100%;\n    position: relative;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 4px;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), props => props.theme.colors.notBlackOverride);
 const SaveBoxTopDarken = styled__default['default'].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default['default'](["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
 const SaveBoxShadowSquare = styled__default['default'].div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), props => props.depth === "1" ? "\n      transform: skewX(-5deg); \n      left: 2px; \n      height: 94%; \n      bottom: 0" : props.depth === "2" ? "\n      transform: skewX(-12deg); \n      left: 5px; \n      height: 83%; \n      width:97%;\n      bottom: 0" : "");
-const CollectionListViewPremium$1 = ({
-  collection,
-  variantSize,
-  extraInfoComponent,
-  primaryActionButton,
-  secondaryActionButton,
-  handleClickBackground,
-  handleClickTitle,
-  isLinkTitle,
-  fluid
-}) => {
+const CollectionListViewPremium$1 = _ref4 => {
   var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
 
+  let {
+    collection,
+    variantSize,
+    extraInfoComponent,
+    primaryActionButton,
+    secondaryActionButton,
+    handleClickBackground,
+    handleClickTitle,
+    isLinkTitle,
+    fluid
+  } = _ref4;
   React.useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
 
   const {
@@ -4516,21 +4531,6 @@ const CollectionListViewPremium$1 = ({
     }), extraInfoComponent && extraInfoComponent)
   );
 };
-CollectionListViewPremium$1.propTypes = {
-  collection: PropTypes__default['default'].object.isRequired,
-  collections: PropTypes__default['default'].array.isRequired,
-  variantSize: PropTypes__default['default'].string.isRequired,
-  userSignedIn: PropTypes__default['default'].object.isRequired,
-  isSelected: PropTypes__default['default'].bool.isRequired,
-  playingState: PropTypes__default['default'].string.isRequired,
-  actionButton: PropTypes__default['default'].object,
-  getUserReactions: PropTypes__default['default'].func.isRequired,
-  createCollection: PropTypes__default['default'].func.isRequired,
-  handleClickBackground: PropTypes__default['default'].func.isRequired,
-  handleClickSave: PropTypes__default['default'].func.isRequired,
-  handleClickReaction: PropTypes__default['default'].func.isRequired,
-  handleClickUnsave: PropTypes__default['default'].func.isRequired
-};
 
 let colors = {
   white: "#ffffff",
@@ -4899,18 +4899,21 @@ const motion2 = props => styled.keyframes(_templateObject2$6 || (_templateObject
 const motion3 = props => styled.keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
 
 const EllipsisSpinner = styled__default['default'].div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral__default['default'](["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    div {\n        position: absolute;\n        width: 11px;\n        height: 11px;\n        border-radius: 50%;\n        background: ", ";\n        animation-timing-function: cubic-bezier(0, 1, 1, 0);\n    }\n    div:nth-child(1) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(2) {\n        left: 6px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(3) {\n        left: 26px;\n        animation: ", " 0.6s infinite;\n    }\n    div:nth-child(4) {\n        left: 45px;\n        animation: ", " 0.6s infinite;\n    }\n"])), p => "".concat(p.size).concat(p.sizeUnit), p => "".concat(p.size).concat(p.sizeUnit), p => p.color, p => motion1(), p => motion2(), p => motion2(), p => motion3());
-const EllipsisLoader = ({
-  color,
-  size,
-  sizeUnit,
-  style
-}) => /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
-  color: color,
-  size: size,
-  sizeUnit: sizeUnit,
-  style: { ...style
-  }
-}, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
+const EllipsisLoader = _ref => {
+  let {
+    color,
+    size,
+    sizeUnit,
+    style
+  } = _ref;
+  return /*#__PURE__*/React__default['default'].createElement(EllipsisSpinner, {
+    color: color,
+    size: size,
+    sizeUnit: sizeUnit,
+    style: { ...style
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
+};
 EllipsisLoader.defaultProps = {
   size: 24,
   color: colors.notBlack,
@@ -4929,12 +4932,13 @@ const BlackSlider = styled__default['default'].div(_templateObject4$2 || (_templ
 const BlackToggleInput = styled__default['default'].input(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral__default['default'](["\n    &:checked + ", " {\n        background-color: transparent;\n    }\n    &:checked + ", ":before {\n        background-color: ", ";\n    }\n    ut:focus + ", " {\n        box-shadow: 0 0 1px #2196f3;\n    }\n\n    &:checked + ", ":before {\n        -webkit-transform: translateX(14px);\n        -ms-transform: translateX(14px);\n        transform: translateX(14px);\n        /* -webkit-transform: translateY(2px);\n        -ms-transform: translateY(2px);\n        transform: translateY(2px); */\n    }\n"])), BlackSlider, BlackSlider, props => props.theme.colors.notBlack, BlackSlider, BlackSlider);
 styled__default['default'].div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    display: inline-block;\n    place-self: center;\n    width: 28px;\n    height: 14px;\n    border: 2px solid ", ";\n    border-radius: 14px;\n\n    & ", " {\n        opacity: 0;\n        width: 0;\n        height: 0;\n    }\n"])), props => props.theme.colors.notBlack, BlackToggleInput);
 const LoadingContainer = styled__default['default'].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default['default'](["\n    width: 50px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n"])));
-const Toggle$1 = ({
-  loading,
-  checked,
-  onClick,
-  disabled
-}) => {
+const Toggle$1 = _ref => {
+  let {
+    loading,
+    checked,
+    onClick,
+    disabled
+  } = _ref;
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, loading ? /*#__PURE__*/React__default['default'].createElement(LoadingContainer, null, /*#__PURE__*/React__default['default'].createElement(EllipsisLoader, null)) : /*#__PURE__*/React__default['default'].createElement(Switch$1, {
     checked: checked,
     disabled: disabled,
@@ -4972,17 +4976,18 @@ const Toggle$1 = ({
 //     }
 // `;
 
-const NewDropdown$1 = ({
-  buttonTitle,
-  buttonLabel,
-  buttonStyle,
-  paperStyle,
-  buttonVariant,
-  handleOptionClicked,
-  startIcon,
-  endIcon,
-  options
-}) => {
+const NewDropdown$1 = _ref => {
+  let {
+    buttonTitle,
+    buttonLabel,
+    buttonStyle,
+    paperStyle,
+    buttonVariant,
+    handleOptionClicked,
+    startIcon,
+    endIcon,
+    options
+  } = _ref;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
 
@@ -5102,17 +5107,18 @@ const NewDropdown$1 = ({
     noWrap: true
   }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))));
 };
-const Dropdown$1 = ({
-  buttonTitle,
-  buttonLabel,
-  buttonStyle,
-  paperStyle,
-  buttonVariant,
-  handleOptionClicked,
-  startIcon,
-  endIcon,
-  options
-}) => {
+const Dropdown$1 = _ref2 => {
+  let {
+    buttonTitle,
+    buttonLabel,
+    buttonStyle,
+    paperStyle,
+    buttonVariant,
+    handleOptionClicked,
+    startIcon,
+    endIcon,
+    options
+  } = _ref2;
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
 
@@ -5231,15 +5237,16 @@ var _templateObject$7, _templateObject2$4;
 const Slider$1 = styled__default['default'].input(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral__default['default'](["\n    -webkit-appearance: none;\n    align-self: center;\n    width: 80%;\n    height: 5px;\n    border-radius: 5px;\n    background: #d3d3d3;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    &:focus {\n        border: 0px !important;\n    }\n\n    &:hover {\n        opacity: 1;\n    }\n\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n\n    &::-moz-range-thumb {\n        width: 25px;\n        height: 25px;\n        border-radius: 50%;\n        background: ", ";\n        border: 2px solid ", ";\n        cursor: pointer;\n    }\n"])), props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing, props => props.theme.colors.ibisRed, props => props.theme.colors.waxwing);
 const ZoomIcon = styled__default['default'].div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral__default['default'](["\n    background-image: url(\"https://cdn.blerp.com/blerp_products/Web/Account/zoom%20icon.svg?folder=true&organizationId=true\");\n    background-repeat: no-repeat;\n    background-position: left;\n    background-size: cover;\n    width: 20px;\n    height: 20px;\n"])));
 
-const ImageUploadModal = ({
-  prevImage,
-  updateImage,
-  onClose,
-  title,
-  isCircularImage,
-  isSquareImage,
-  sizeInfo
-}) => {
+const ImageUploadModal = _ref => {
+  let {
+    prevImage,
+    updateImage,
+    onClose,
+    title,
+    isCircularImage,
+    isSquareImage,
+    sizeInfo
+  } = _ref;
   const [image, setImage] = React.useState(prevImage);
   const [zoom, setZoom] = React.useState(50);
   const [loading, setLoading] = React.useState(false);
@@ -5402,45 +5409,48 @@ const ImageUploadModal = ({
     onDragEnter: () => setDropzoneHovered(true),
     onDragLeave: () => setDropzoneHovered(false),
     onDrop: acceptedFiles => handleImageDrop(acceptedFiles)
-  }, ({
-    getRootProps,
-    getInputProps
-  }) => /*#__PURE__*/React__default['default'].createElement(Stack, {
-    sx: {
-      width: "100%",
-      height: size.width > 600 ? "300px" : "200px",
-      cursor: "pointer",
-      box: "borderBox",
-      justifyContent: "center"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
-    style: {
-      height: "100%",
-      display: "flex"
-    }
-  }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
-    color: "grey3",
-    style: {
-      justifyContent: "center",
-      alignItems: "center",
-      width: "100%"
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
-    style: {
-      color: "white",
-      height: "90%",
-      width: "90%"
-    }
-  })) : /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: {
-      flexWrap: "wrap",
-      width: "80%",
-      alignSelf: "center",
-      textAlign: "center",
-      verticalAlign: "center",
-      margin: "auto"
-    }
-  }, "Click or drop image here to upload."))))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+  }, _ref2 => {
+    let {
+      getRootProps,
+      getInputProps
+    } = _ref2;
+    return /*#__PURE__*/React__default['default'].createElement(Stack, {
+      sx: {
+        width: "100%",
+        height: size.width > 600 ? "300px" : "200px",
+        cursor: "pointer",
+        box: "borderBox",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
+      style: {
+        height: "100%",
+        display: "flex"
+      }
+    }, getRootProps()), /*#__PURE__*/React__default['default'].createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React__default['default'].createElement(Stack, {
+      color: "grey3",
+      style: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(InsertPhotoRoundedIcon__default['default'], {
+      style: {
+        color: "white",
+        height: "90%",
+        width: "90%"
+      }
+    })) : /*#__PURE__*/React__default['default'].createElement(Text, {
+      sx: {
+        flexWrap: "wrap",
+        width: "80%",
+        alignSelf: "center",
+        textAlign: "center",
+        verticalAlign: "center",
+        margin: "auto"
+      }
+    }, "Click or drop image here to upload.")));
+  })), /*#__PURE__*/React__default['default'].createElement(Stack, {
     alignItems: "center"
   }, image && image.type !== "image/gif" ? /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
@@ -5478,18 +5488,19 @@ const ImageUploadModal = ({
 
 var _templateObject$6;
 styled__default['default'].div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral__default['default']([""])));
-const NewCollectionModal$1 = ({
-  handleCollection,
-  deleteCollectionModal,
-  trigger,
-  collectionToBeEdited,
-  handleChangePremium,
-  onClose,
-  children,
-  isAdmin
-}) => {
+const NewCollectionModal$1 = _ref => {
   var _collectionToBeEdited, _collectionToBeEdited2, _collectionToBeEdited3;
 
+  let {
+    handleCollection,
+    deleteCollectionModal,
+    trigger,
+    collectionToBeEdited,
+    handleChangePremium,
+    onClose,
+    children,
+    isAdmin
+  } = _ref;
   const [open, setopen] = React.useState(false);
   const [imageFile, setImageFile] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
   const [imageURL, setImageURL] = React.useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited2 = collectionToBeEdited.image) === null || _collectionToBeEdited2 === void 0 ? void 0 : (_collectionToBeEdited3 = _collectionToBeEdited2.original) === null || _collectionToBeEdited3 === void 0 ? void 0 : _collectionToBeEdited3.url);
@@ -6097,19 +6108,21 @@ const SnackbarProvider = props => {
     autoHideDuration: 5000
   });
 
-  const triggerSnackbar = ({
-    message = "Set a message",
-    position = {
-      vertical: "bottom",
-      horizontal: "center"
-    },
-    slideDirection = "up",
-    transitionType = "slide",
-    severity = "success",
-    color,
-    actionButton = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
-    autoHideDuration = 5000
-  }) => {
+  const triggerSnackbar = _ref => {
+    let {
+      message = "Set a message",
+      position = {
+        vertical: "bottom",
+        horizontal: "center"
+      },
+      slideDirection = "up",
+      transitionType = "slide",
+      severity = "success",
+      color,
+      actionButton = /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null),
+      autoHideDuration = 5000
+    } = _ref;
+
     if (!color) {
       switch (severity) {
         case "success":
@@ -6409,10 +6422,11 @@ const darkTheme = styles.createTheme({
   palette: darkPalette
 });
 
-const BlerpTheme = ({
-  mode,
-  children
-}) => {
+const BlerpTheme = _ref => {
+  let {
+    mode,
+    children
+  } = _ref;
   const currentTheme = mode === "dark" ? darkTheme : theme; // ...
 
   return /*#__PURE__*/React__default['default'].createElement(styles.ThemeProvider, {
@@ -6426,11 +6440,12 @@ const BlerpTheme = ({
   }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
 };
 
-const LottieAnimation = ({
-  lotti,
-  width,
-  height
-}) => {
+const LottieAnimation = _ref => {
+  let {
+    lotti,
+    width,
+    height
+  } = _ref;
   const defaultOptions = {
     loop: true,
     autoplay: true,
@@ -9200,32 +9215,33 @@ const TopPill = styled__default['default'].div(_templateObject3 || (_templateObj
 const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\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__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\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__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\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 = ({
-  collection,
-  variantSize,
-  handleClickBackground,
-  handleClickSave,
-  handleClickView,
-  handleClickUnlock,
-  handleClickPrimaryAction,
-  handleClickSecondaryAction,
-  primaryActionButton,
-  secondaryActionButton,
-  bottomLeftIcon,
-  handleClickBottomLeftIcon,
-  premiumDiamondPill,
-  fluid,
-  fontSize,
-  isLink,
-  isLocked,
-  overrideViewText,
-  hideUnlockPlatformText,
-  hidePremiumLockIcon,
-  unlockPlatformText,
-  hideCollectionBackground
-}) => {
+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] = React.useState(null);
   const [collectionHovered, setCollectionHovered] = React.useState(false);
   const {
@@ -9677,35 +9693,36 @@ var _templateObject$1;
 const LineClamp = styled__default['default'].div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral__default['default'](["\n    display: -webkit-box;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n    max-width: 92%;\n"]))); //on background click
 //primary and secondary action buttons
 
-const CollectionCard$1 = ({
-  collection,
-  variantSize,
-  handleClickBackground,
-  handleClickSave,
-  handleClickDrag,
-  handleClickView,
-  handleClickUnlock,
-  handleClickPrimaryAction,
-  handleClickSecondaryAction,
-  primaryActionButton,
-  secondaryActionButton,
-  fluid,
-  fontSize,
-  isLink,
-  isPremium,
-  isLocked,
-  isOwner,
-  overrideViewText,
-  hideUnlockPlatformText,
-  hidePremiumLockIcon,
-  unlockPlatformText,
-  hideCollectionBackground,
-  bottomLeftIcon,
-  handleClickBottomLeftIcon,
-  premiumDiamondPill
-}) => {
+const CollectionCard$1 = _ref => {
   var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or;
 
+  let {
+    collection,
+    variantSize,
+    handleClickBackground,
+    handleClickSave,
+    handleClickDrag,
+    handleClickView,
+    handleClickUnlock,
+    handleClickPrimaryAction,
+    handleClickSecondaryAction,
+    primaryActionButton,
+    secondaryActionButton,
+    fluid,
+    fontSize,
+    isLink,
+    isPremium,
+    isLocked,
+    isOwner,
+    overrideViewText,
+    hideUnlockPlatformText,
+    hidePremiumLockIcon,
+    unlockPlatformText,
+    hideCollectionBackground,
+    bottomLeftIcon,
+    handleClickBottomLeftIcon,
+    premiumDiamondPill
+  } = _ref;
   const [cardColors, setCardColors] = React.useState(null);
   const {
     data,
@@ -10053,14 +10070,15 @@ const CollectionCard$1 = ({
   })));
 };
 
-const UserProfileHeader = ({
-  followUser,
-  isOwner,
-  userData,
-  openEdit
-}) => {
+const UserProfileHeader = _ref => {
   var _userData$profileImag, _userData$profileImag2, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag3, _userData$profileImag4, _userData$socialLinks2;
 
+  let {
+    followUser,
+    isOwner,
+    userData,
+    openEdit
+  } = _ref;
   const theme = React.useContext(styled.ThemeContext);
   const [profileColors, setProfileColors] = React.useState(null);
   const size = useWindowSize();
@@ -10303,18 +10321,19 @@ const UserProfileHeader = ({
   })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), renderSocialLinks()))));
 };
 
-const LibraryControls = ({
-  setSort,
-  activeBoard,
-  setSearchTerm,
-  hideSearch,
-  searchTerm,
-  setShowSearch,
-  setActiveBoard,
-  hideLayoutButtons
-}) => {
+const LibraryControls = _ref => {
   var _activeBoard$ownerObj;
 
+  let {
+    setSort,
+    activeBoard,
+    setSearchTerm,
+    hideSearch,
+    searchTerm,
+    setShowSearch,
+    setActiveBoard,
+    hideLayoutButtons
+  } = _ref;
   React.useContext(styled.ThemeContext);
   const size = useWindowSize();
   const [anchor, setAnchor] = React.useState(null);
@@ -10586,20 +10605,21 @@ const LibraryControls = ({
   }))))));
 };
 
-const UserLibraryHeader = ({
-  sx,
-  tabs,
-  tabSelection,
-  setTabSelection,
-  setShowSearch,
-  setSearchTerm,
-  searchTerm,
-  setActiveBoard,
-  hideSearch,
-  setSort,
-  sort,
-  hideLayoutButtons
-}) => {
+const UserLibraryHeader = _ref => {
+  let {
+    sx,
+    tabs,
+    tabSelection,
+    setTabSelection,
+    setShowSearch,
+    setSearchTerm,
+    searchTerm,
+    setActiveBoard,
+    hideSearch,
+    setSort,
+    sort,
+    hideLayoutButtons
+  } = _ref;
   const size = useWindowSize();
   React.useContext(styled.ThemeContext);
   return /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -10677,10 +10697,11 @@ const reactionIconUrls = {
   MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg"
 };
 
-const ReactionButtons = ({
-  bite,
-  handleClick
-}) => {
+const ReactionButtons = _ref => {
+  let {
+    bite,
+    handleClick
+  } = _ref;
   return /*#__PURE__*/React__default['default'].createElement(Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(4, 1fr)",