@blerp/design 1.2.73 → 1.2.74

package/dist/index.esm.js

@@ -1,5 +1,6 @@
 import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$3, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
-import PropTypes from 'prop-types';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'prop-types';
 import React, { useState, useEffect, useContext, useRef, createContext, createRef, cloneElement } from 'react';
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
@@ -20,6 +21,8 @@ import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
 import { usePalette } from 'react-palette';
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import 'core-js/modules/web.url.js';
+import 'core-js/modules/web.url-search-params.js';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import FileUploadRoundedIcon from '@mui/icons-material/FileUploadRounded';
 import _extends from '@babel/runtime/helpers/extends';
@@ -57,22 +60,23 @@ const SaveContainer$2 = styled.div(_templateObject2$c || (_templateObject2$c = _
 const BlerpImageScrim$2 = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\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.div(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\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] = useState(false);
 
   if (bite.visibility === "PRIVATE" && !isOwner) {
@@ -200,18 +204,19 @@ const BlerpImageRow = ({
 var _templateObject$h;
 const ReactionButton$1 = styled.div(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.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.createElement(Popover, {
     open: openSave,
     onClose: () => setOpenSave(false),
@@ -337,16 +342,18 @@ const BlerpSavePopup = ({
 var _templateObject$g;
 const LineClamp$2 = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\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.createElement(Stack, {
       direction: "row",
@@ -434,9 +441,10 @@ const BlerpTitleRow = ({
   }, title || bite.title)));
 };
 
-const PresentGiftIcon = ({
-  sx
-}) => {
+const PresentGiftIcon = _ref => {
+  let {
+    sx
+  } = _ref;
   return /*#__PURE__*/React.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("svg", {
@@ -450,9 +458,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("svg", {
@@ -466,9 +475,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -481,9 +491,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -495,9 +506,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -510,9 +522,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -528,9 +541,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -547,9 +561,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -579,9 +594,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -618,9 +634,10 @@ const TwitchIcon = ({
     height: "3.7"
   })))))));
 };
-const BlerpyIcon = ({
-  sx
-}) => {
+const BlerpyIcon = _ref10 => {
+  let {
+    sx
+  } = _ref10;
   return /*#__PURE__*/React.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -632,9 +649,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -654,9 +672,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -676,9 +695,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("path", {
@@ -687,9 +707,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -701,9 +722,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -729,9 +751,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -746,9 +769,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -767,9 +791,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("svg", {
@@ -793,9 +818,10 @@ const NewDiscordIcon = ({
     fill: "white"
   })))));
 };
-const BookmarkAddRounded = ({
-  sx
-}) => {
+const BookmarkAddRounded = _ref19 => {
+  let {
+    sx
+  } = _ref19;
   return /*#__PURE__*/React.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -815,9 +841,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -830,9 +857,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -852,9 +880,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -866,9 +895,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -880,9 +910,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -894,9 +925,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -907,9 +939,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("path", {
@@ -917,9 +950,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("g", {
@@ -948,9 +982,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.createElement(SvgIcon, {
     sx: sx
   }, /*#__PURE__*/React.createElement("svg", {
@@ -973,21 +1008,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,
@@ -1236,36 +1273,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 = useContext(ThemeContext);
   const [openSave, setOpenSave] = useState(false);
   const size = useWindowSize();
@@ -1439,36 +1477,17 @@ const Blerp$1 = ({
     handleClickOrganize: handleClickOrganize
   })));
 };
-Blerp$1.propTypes = {
-  bite: PropTypes.object.isRequired,
-  collections: PropTypes.array,
-  variantSize: PropTypes.string,
-  userSignedIn: PropTypes.object,
-  unsaveButton: PropTypes.object,
-  isSelected: PropTypes.bool.isRequired,
-  playingState: PropTypes.string.isRequired,
-  primaryActionButton: PropTypes.object,
-  secondaryActionButton: PropTypes.object,
-  getUserReactions: PropTypes.func.isRequired,
-  createCollection: PropTypes.func,
-  handleClickBackground: PropTypes.func.isRequired,
-  handleClickPlay: PropTypes.func.isRequired,
-  handleClickThreeDot: PropTypes.func.isRequired,
-  handleClickSave: PropTypes.func.isRequired,
-  handleClickReaction: PropTypes.func.isRequired,
-  handleClickUnsave: PropTypes.func.isRequired,
-  handleClickTitle: PropTypes.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"
   });
@@ -1587,14 +1606,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] = useState(null);
   const openUserCard = Boolean(userCardRef);
   return /*#__PURE__*/React.createElement(Stack, {
@@ -1670,11 +1690,12 @@ var _templateObject$f, _templateObject2$b, _templateObject3$9;
 const PremiumContainer$1 = styled.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\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.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\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.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\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"
   });
@@ -1712,13 +1733,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.createElement(Stack, {
     direction: "row",
     sx: {
@@ -1767,11 +1789,12 @@ const AddedToIcons$1 = ({
   }))));
 };
 
-const RatingInfoItem$1 = ({
-  hovering,
-  tooltipText,
-  displayText
-}) => {
+const RatingInfoItem$1 = _ref3 => {
+  let {
+    hovering,
+    tooltipText,
+    displayText
+  } = _ref3;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipText
   }, /*#__PURE__*/React.createElement(Text, {
@@ -1791,10 +1814,11 @@ const RatingInfoItem$1 = ({
   }, displayText));
 };
 
-const RatingInfo$1 = ({
-  bite,
-  hovering
-}) => {
+const RatingInfo$1 = _ref4 => {
+  let {
+    bite,
+    hovering
+  } = _ref4;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -1884,13 +1908,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] = useState(showWarning);
   const [hovering, setHovering] = useState(false);
 
@@ -1985,18 +2010,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.createElement(Stack, {
     direction: "row",
     justifyContent: "space-between",
@@ -2037,34 +2063,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] = useState(false);
   const [hovering, setHovering] = useState(false);
   const [hoveringAddTo, setHoveringAddTo] = useState(false);
@@ -2364,11 +2391,12 @@ var _templateObject$e, _templateObject2$a, _templateObject3$8;
 const PremiumContainer = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\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.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\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.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\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"
   });
@@ -2406,13 +2434,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.createElement(Stack, {
     direction: "row",
     sx: {
@@ -2461,11 +2490,12 @@ const AddedToIcons = ({
   }))));
 };
 
-const RatingInfoItem = ({
-  hovering,
-  tooltipText,
-  displayText
-}) => {
+const RatingInfoItem = _ref3 => {
+  let {
+    hovering,
+    tooltipText,
+    displayText
+  } = _ref3;
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipText
   }, /*#__PURE__*/React.createElement(Text, {
@@ -2485,10 +2515,11 @@ const RatingInfoItem = ({
   }, displayText));
 };
 
-const RatingInfo = ({
-  bite,
-  hovering
-}) => {
+const RatingInfo = _ref4 => {
+  let {
+    bite,
+    hovering
+  } = _ref4;
   let ratingText = {
     tooltipText: "",
     text: ""
@@ -2646,13 +2677,14 @@ const RatingInfo = ({
   }));
 };
 
-const ReportedWarning = ({
-  showWarning,
-  blacklisted,
-  saved,
-  count,
-  onClick
-}) => {
+const ReportedWarning = _ref5 => {
+  let {
+    showWarning,
+    blacklisted,
+    saved,
+    count,
+    onClick
+  } = _ref5;
   const [show, setShow] = useState(showWarning);
   const [hovering, setHovering] = useState(false);
 
@@ -2747,18 +2779,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.createElement(Stack, {
     direction: "row",
     justifyContent: "space-between",
@@ -2799,34 +2832,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] = useState(false);
   const [hovering, setHovering] = useState(false);
   const [hoveringAddTo, setHoveringAddTo] = useState(false);
@@ -3124,11 +3158,12 @@ const NewBlerpTest$1 = ({
 
 var _templateObject$d;
 const BlerpImage$2 = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\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] = useState(false);
   const formatter = Intl.NumberFormat("en", {
     notation: "compact"
@@ -3277,9 +3312,10 @@ const GroupCard$1 = ({
 };
 
 const BlerpAudioContext = /*#__PURE__*/createContext({});
-const BlerpAudioContextProvider$1 = ({
-  children
-}) => {
+const BlerpAudioContextProvider$1 = _ref => {
+  let {
+    children
+  } = _ref;
   const [selectedBlerp, setSelectedBlerp] = useState(null);
   const [playState, setPlayState] = useState("stopped");
   const [startTime, setStartTime] = useState(0); // const [audioCtx, setAudioCtx] = useState(null);
@@ -3292,14 +3328,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();
     }
@@ -3409,34 +3447,35 @@ const BlerpImageScrim$1 = styled.div(_templateObject4$6 || (_templateObject4$6 =
 const PremiumPill = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    border-radius: 20px;\n    height: 25px;\n    width: 75px;\n    padding: 0 4px;\n    margin: 0 0 0 8px;\n    cursor: pointer;\n\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n        cursor: pointer;\n    }\n"])), props => props.isLocked ? "".concat(props.theme.colors.notBlack, "8a") : "".concat(props.theme.colors.notBlack, "9a"), props => props.theme.colors.seafoam);
 styled.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5, props => props.theme.colors.ibisRed);
 styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    margin: 5px 0;\n"])));
-const BlerpListViewPremium$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] = useState(false);
   const {
     loading,
@@ -3774,23 +3813,6 @@ const BlerpListViewPremium$1 = ({
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
-BlerpListViewPremium$1.propTypes = {
-  bite: PropTypes.object.isRequired,
-  collections: PropTypes.array.isRequired,
-  variantSize: PropTypes.string.isRequired,
-  userSignedIn: PropTypes.object.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  playingState: PropTypes.string.isRequired,
-  actionButton: PropTypes.object,
-  getUserReactions: PropTypes.func.isRequired,
-  createCollection: PropTypes.func.isRequired,
-  handleClickBackground: PropTypes.func.isRequired,
-  handleClickPlay: PropTypes.func.isRequired,
-  handleClickThreeDot: PropTypes.func.isRequired,
-  handleClickSave: PropTypes.func.isRequired,
-  handleClickReaction: PropTypes.func.isRequired,
-  handleClickUnsave: PropTypes.func.isRequired
-};
 
 var _templateObject$b, _templateObject2$8, _templateObject3$6, _templateObject4$5, _templateObject5$3, _templateObject6$3;
 const BlerpImage = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\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);
@@ -3799,34 +3821,35 @@ styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["
 const SaveContainer = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\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.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    height: 150px;\n    width: 150px;\n    background-color: ", "10;\n    /* position: absolute; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    /* 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.div(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\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] = useState(false);
   usePalette(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url);
   const theme = useContext(ThemeContext);
@@ -4118,32 +4141,24 @@ const BlerpListView$1 = ({
     }
   })))), extraInfoComponent && extraInfoComponent);
 };
-BlerpListView$1.propTypes = {
-  bite: PropTypes.object.isRequired,
-  collections: PropTypes.array.isRequired,
-  variantSize: PropTypes.string.isRequired,
-  userSignedIn: PropTypes.object.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  playingState: PropTypes.string.isRequired,
-  actionButton: PropTypes.object,
-  getUserReactions: PropTypes.func.isRequired,
-  createCollection: PropTypes.func.isRequired,
-  handleClickBackground: PropTypes.func.isRequired,
-  handleClickPlay: PropTypes.func.isRequired,
-  handleClickThreeDot: PropTypes.func.isRequired,
-  handleClickSave: PropTypes.func.isRequired,
-  handleClickReaction: PropTypes.func.isRequired,
-  handleClickUnsave: PropTypes.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.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\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.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\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.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\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.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\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.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\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);
@@ -4157,19 +4172,20 @@ const SaveBox = styled.div(_templateObject10 || (_templateObject10 = _taggedTemp
 const SaveBoxTop = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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;
   useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
 
   const {
@@ -4464,21 +4480,6 @@ const CollectionListViewPremium$1 = ({
     }), extraInfoComponent && extraInfoComponent)
   );
 };
-CollectionListViewPremium$1.propTypes = {
-  collection: PropTypes.object.isRequired,
-  collections: PropTypes.array.isRequired,
-  variantSize: PropTypes.string.isRequired,
-  userSignedIn: PropTypes.object.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  playingState: PropTypes.string.isRequired,
-  actionButton: PropTypes.object,
-  getUserReactions: PropTypes.func.isRequired,
-  createCollection: PropTypes.func.isRequired,
-  handleClickBackground: PropTypes.func.isRequired,
-  handleClickSave: PropTypes.func.isRequired,
-  handleClickReaction: PropTypes.func.isRequired,
-  handleClickUnsave: PropTypes.func.isRequired
-};
 
 let colors = {
   white: "#ffffff",
@@ -4847,18 +4848,21 @@ const motion2 = props => keyframes(_templateObject2$6 || (_templateObject2$6 = _
 const motion3 = props => keyframes(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n"])));
 
 const EllipsisSpinner = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\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.createElement(EllipsisSpinner, {
-  color: color,
-  size: size,
-  sizeUnit: sizeUnit,
-  style: { ...style
-  }
-}, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
+const EllipsisLoader = _ref => {
+  let {
+    color,
+    size,
+    sizeUnit,
+    style
+  } = _ref;
+  return /*#__PURE__*/React.createElement(EllipsisSpinner, {
+    color: color,
+    size: size,
+    sizeUnit: sizeUnit,
+    style: { ...style
+    }
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
+};
 EllipsisLoader.defaultProps = {
   size: 24,
   color: colors.notBlack,
@@ -4877,12 +4881,13 @@ const BlackSlider = styled.div(_templateObject4$2 || (_templateObject4$2 = _tagg
 const BlackToggleInput = styled.input(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\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.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\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.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(LoadingContainer, null, /*#__PURE__*/React.createElement(EllipsisLoader, null)) : /*#__PURE__*/React.createElement(Switch$1, {
     checked: checked,
     disabled: disabled,
@@ -4920,17 +4925,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] = useState(null);
   const open = Boolean(anchorEl);
 
@@ -5050,17 +5056,18 @@ const NewDropdown$1 = ({
     noWrap: true
   }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React.createElement(React.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] = useState(null);
   const open = Boolean(anchorEl);
 
@@ -5179,15 +5186,16 @@ var _templateObject$7, _templateObject2$4;
 const Slider$1 = styled.input(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\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.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\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] = useState(prevImage);
   const [zoom, setZoom] = useState(50);
   const [loading, setLoading] = useState(false);
@@ -5350,45 +5358,48 @@ const ImageUploadModal = ({
     onDragEnter: () => setDropzoneHovered(true),
     onDragLeave: () => setDropzoneHovered(false),
     onDrop: acceptedFiles => handleImageDrop(acceptedFiles)
-  }, ({
-    getRootProps,
-    getInputProps
-  }) => /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      width: "100%",
-      height: size.width > 600 ? "300px" : "200px",
-      cursor: "pointer",
-      box: "borderBox",
-      justifyContent: "center"
-    }
-  }, /*#__PURE__*/React.createElement("div", _extends({
-    style: {
-      height: "100%",
-      display: "flex"
-    }
-  }, getRootProps()), /*#__PURE__*/React.createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React.createElement(Stack, {
-    color: "grey3",
-    style: {
-      justifyContent: "center",
-      alignItems: "center",
-      width: "100%"
-    }
-  }, /*#__PURE__*/React.createElement(InsertPhotoRoundedIcon, {
-    style: {
-      color: "white",
-      height: "90%",
-      width: "90%"
-    }
-  })) : /*#__PURE__*/React.createElement(Text, {
-    sx: {
-      flexWrap: "wrap",
-      width: "80%",
-      alignSelf: "center",
-      textAlign: "center",
-      verticalAlign: "center",
-      margin: "auto"
-    }
-  }, "Click or drop image here to upload."))))), /*#__PURE__*/React.createElement(Stack, {
+  }, _ref2 => {
+    let {
+      getRootProps,
+      getInputProps
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(Stack, {
+      sx: {
+        width: "100%",
+        height: size.width > 600 ? "300px" : "200px",
+        cursor: "pointer",
+        box: "borderBox",
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement("div", _extends({
+      style: {
+        height: "100%",
+        display: "flex"
+      }
+    }, getRootProps()), /*#__PURE__*/React.createElement("input", getInputProps()), dropzoneHovered ? /*#__PURE__*/React.createElement(Stack, {
+      color: "grey3",
+      style: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+      }
+    }, /*#__PURE__*/React.createElement(InsertPhotoRoundedIcon, {
+      style: {
+        color: "white",
+        height: "90%",
+        width: "90%"
+      }
+    })) : /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        flexWrap: "wrap",
+        width: "80%",
+        alignSelf: "center",
+        textAlign: "center",
+        verticalAlign: "center",
+        margin: "auto"
+      }
+    }, "Click or drop image here to upload.")));
+  })), /*#__PURE__*/React.createElement(Stack, {
     alignItems: "center"
   }, image && image.type !== "image/gif" ? /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
@@ -5426,18 +5437,19 @@ const ImageUploadModal = ({
 
 var _templateObject$6;
 styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral([""])));
-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] = useState(false);
   const [imageFile, setImageFile] = useState(collectionToBeEdited === null || collectionToBeEdited === void 0 ? void 0 : (_collectionToBeEdited = collectionToBeEdited.image) === null || _collectionToBeEdited === void 0 ? void 0 : _collectionToBeEdited.original);
   const [imageURL, setImageURL] = 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);
@@ -6045,19 +6057,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.createElement(React.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.createElement(React.Fragment, null),
+      autoHideDuration = 5000
+    } = _ref;
+
     if (!color) {
       switch (severity) {
         case "success":
@@ -6357,10 +6371,11 @@ const darkTheme = createTheme({
   palette: darkPalette
 });
 
-const BlerpTheme = ({
-  mode,
-  children
-}) => {
+const BlerpTheme = _ref => {
+  let {
+    mode,
+    children
+  } = _ref;
   const currentTheme = mode === "dark" ? darkTheme : theme; // ...
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -6374,11 +6389,12 @@ const BlerpTheme = ({
   }, /*#__PURE__*/React.createElement(SnackbarProvider, null, children)));
 };
 
-const LottieAnimation = ({
-  lotti,
-  width,
-  height
-}) => {
+const LottieAnimation = _ref => {
+  let {
+    lotti,
+    width,
+    height
+  } = _ref;
   const defaultOptions = {
     loop: true,
     autoplay: true,
@@ -9148,32 +9164,33 @@ const TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTempla
 const TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    height: 32px;\n    width: 100%;\n    position: absolute;\n    background-color: ", ";\n    opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
 const LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: -1;\n    padding-bottom: 8px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    align-items: center;\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    overflow: \"hidden\";\n    transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n    opacity: ", ";\n    backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
 const LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    top: 0;\n    /* transition: opacity 0.3s ease-in-out; */\n\n    background-color: ", ";\n\n    opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
-const PremiumCollectionCard = ({
-  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] = useState(null);
   const [collectionHovered, setCollectionHovered] = useState(false);
   const {
@@ -9625,35 +9642,36 @@ var _templateObject$1;
 const LineClamp = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\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] = useState(null);
   const {
     data,
@@ -10001,14 +10019,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 = useContext(ThemeContext);
   const [profileColors, setProfileColors] = useState(null);
   const size = useWindowSize();
@@ -10251,18 +10270,19 @@ const UserProfileHeader = ({
   })) : /*#__PURE__*/React.createElement(React.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;
   useContext(ThemeContext);
   const size = useWindowSize();
   const [anchor, setAnchor] = useState(null);
@@ -10534,20 +10554,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();
   useContext(ThemeContext);
   return /*#__PURE__*/React.createElement(Box, {
@@ -10625,10 +10646,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.createElement(Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(4, 1fr)",