@blerp/design 1.2.53 → 1.2.55

package/dist/index.cjs.js

@@ -12,7 +12,6 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var iconsMaterial = require('@mui/icons-material');
 var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
 var FavoriteIcon = require('@mui/icons-material/Favorite');
 var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
@@ -20,7 +19,12 @@ var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
 var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
 var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
 var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded');
-var VisibilityRoundedIcon = require('@mui/icons-material/VisibilityRounded');
+require('@mui/icons-material/VisibilityRounded');
+var LanguageRoundedIcon = require('@mui/icons-material/LanguageRounded');
+require('@mui/icons-material/ThumbsUpDownRounded');
+var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
+var LayersRoundedIcon = require('@mui/icons-material/LayersRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
@@ -51,7 +55,6 @@ var PersonRemoveRoundedIcon = require('@mui/icons-material/PersonRemoveRounded')
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 require('@mui/icons-material/FilterAltRounded');
 var MenuRoundedIcon = require('@mui/icons-material/MenuRounded');
-var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
 require('@mui/icons-material/SettingsRounded');
 var SortRoundedIcon = require('@mui/icons-material/SortRounded');
 var ChevronRightRoundedIcon = require('@mui/icons-material/ChevronRightRounded');
@@ -89,7 +92,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
 var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
 var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
 var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
@@ -97,7 +99,10 @@ var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedI
 var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
 var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
 var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
-var VisibilityRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityRoundedIcon);
+var LanguageRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LanguageRoundedIcon);
+var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
+var LayersRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
@@ -125,7 +130,6 @@ var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
 var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
-var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
 var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
 var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
 var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
@@ -1697,9 +1701,9 @@ var UserCard$1 = function UserCard(_ref) {
   }, "created")))));
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
   var user = _ref.user,
       onUsernameClick = _ref.onUsernameClick,
@@ -1767,7 +1771,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
     collapsed: collapsed,
     user: user
   })), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: _objectSpread$7({
+    sx: _objectSpread$6({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -1784,10 +1788,6 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
 };
 
 var _templateObject$g, _templateObject2$a, _templateObject3$8;
-
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\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"])));
 var 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"])), function (props) {
   return props.theme.colors.grey7;
@@ -1839,7 +1839,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
   }, savedCount));
 };
 var AddedToIcons = function AddedToIcons(_ref2) {
-  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
+  var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
 
   var item = _ref2.item,
       hovering = _ref2.hovering,
@@ -1849,35 +1849,45 @@ var AddedToIcons = function AddedToIcons(_ref2) {
     direction: "row",
     sx: {
       transition: "0.3s",
-      opacity: hide ? "0" : hovering ? "1" : "0",
-      alignItems: "center"
+      opacity: hide ? "0" : hovering ? "0" : "1",
+      alignItems: "start",
+      justifyContent: "end",
+      flexWrap: "wrap",
+      flex: 1
+    }
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    title: "Added to Universal Extension"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LanguageRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to Channel Points"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to Bits Library"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to WalkOn"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Added to Sound Emotes"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.MusicNoteRounded, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    title: "Added to Group"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LayersRoundedIcon__default['default'], {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))));
@@ -1899,28 +1909,18 @@ var RatingInfoItem = function RatingInfoItem(_ref3) {
       color: "notBlack.override",
       padding: "1px 2px",
       height: "auto",
-      width: "fit-content",
-      marginBottom: "12px"
+      width: "fit-content"
     }
   }, displayText));
 };
 
 var RatingInfo = function RatingInfo(_ref4) {
-  var bite = _ref4.bite;
+  var bite = _ref4.bite,
+      hovering = _ref4.hovering;
   var ratingText = {
     tooltipText: "",
     text: ""
   };
-  var visStyle = {
-    fontSize: "23px",
-    fontWeight: "600",
-    backgroundColor: "#585858a3",
-    border: "4px solid transparent",
-    borderColor: "#585858a3",
-    borderRadius: "4px",
-    color: "whiteOverride.main",
-    marginBottom: "12px"
-  };
 
   if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
     var _bite$newAudienceRati, _bite$newAudienceRati2;
@@ -1933,16 +1933,14 @@ var RatingInfo = function RatingInfo(_ref4) {
 
     return /*#__PURE__*/React__default['default'].createElement(Stack, {
       direction: "row",
-      alignItems: "center"
-    }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-      title: "Private"
-    }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-      sx: _objectSpread$6({}, visStyle)
-    })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-      title: "Unlisted"
-    }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-      sx: _objectSpread$6({}, visStyle)
-    })), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 3,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
       if (rating === "SAFE") {
         // nothing
         return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -1985,19 +1983,22 @@ var RatingInfo = function RatingInfo(_ref4) {
     ratingText.text = "UNRATED";
   }
 
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: 0
+    }
+  });
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
-    alignItems: "center"
-  }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Private"
-  }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-    sx: _objectSpread$6({}, visStyle)
-  })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Unlisted"
-  }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-    sx: _objectSpread$6({}, visStyle)
-  })), /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+    alignItems: "start",
+    sx: {
+      transition: "0.2s",
+      flex: 3,
+      flexWrap: "wrap",
+      marginTop: hovering ? "35px" : "0"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
     tooltipText: ratingText.tooltipText,
     displayText: ratingText.text
   }));
@@ -2129,21 +2130,24 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
       minHeight: "20px"
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    alignItems: "start",
+    justifyContent: "space-between",
     sx: {
       position: "absolute",
       top: "0",
       left: "0",
-      zIndex: hoveringAddTo ? "0" : "10",
-      transition: "0.3s",
-      opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
-      // display: hoveringAddTo && "none",
-
+      width: "100%",
+      overflow: "hidden",
+      transition: "0.2s",
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+    hovering: hovering,
     bite: bite
   }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
     item: bite,
-    hovering: hovering
+    hovering: hovering || hoveringAddTo
   })), renderAddContentButton({
     item: bite,
     hovering: hovering,
@@ -2158,7 +2162,7 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
 };
 
 var NewBlerp$1 = function NewBlerp(_ref7) {
-  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$discordContext, _bite$channelPointsBu, _bite$organizationalG, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
 
   var Waveform = _ref7.Waveform,
       bite = _ref7.bite,
@@ -2206,7 +2210,7 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
       setHoveringAddTo = _useState10[1];
 
   var titleRef = React.useRef(null);
-  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnContext = bite.walkOnContext) === null || _bite$walkOnContext === void 0 ? void 0 : _bite$walkOnContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
+  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0 || (bite === null || bite === void 0 ? void 0 : (_bite$organizationalG = bite.organizationalGroupEdgesContext) === null || _bite$organizationalG === void 0 ? void 0 : _bite$organizationalG.length) > 0;
   var showWarning = (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
 
   var renderPlayStateIcon = function renderPlayStateIcon() {
@@ -89201,6 +89205,8 @@ var NewLoadingBlob = function NewLoadingBlob(props) {
 };
 
 var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
+  var _window;
+
   var amount = _ref.amount,
       setSalesTax = _ref.setSalesTax,
       setTotal = _ref.setTotal,
@@ -89209,14 +89215,25 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
       postalCode = _ref.postalCode,
       setPostalCode = _ref.setPostalCode;
   React.useEffect(function () {
-    var _window, _window$Quaderno;
+    var scriptUrl = "https://js.quaderno.io/v4/";
 
-    (_window = window) === null || _window === void 0 ? void 0 : (_window$Quaderno = _window.Quaderno) === null || _window$Quaderno === void 0 ? void 0 : _window$Quaderno.init("pk_live_JLZ6dgFdcXEVZySpVxb7").then(function () {
-      console.log("Quaderno.js successfully initialized");
-    }).catch(function (error) {
-      console.log(error.description, error.messages);
-    });
+    if (!document.querySelector("script[src=\"".concat(scriptUrl, "\"]"))) {
+      var script = document.createElement("script");
+      script.src = scriptUrl;
+      document.head.appendChild(script);
+    }
   }, []);
+  React.useEffect(function () {
+    if (window.Quaderno) {
+      var _window$Quaderno;
+
+      (_window$Quaderno = window.Quaderno) === null || _window$Quaderno === void 0 ? void 0 : _window$Quaderno.init("pk_live_JLZ6dgFdcXEVZySpVxb7").then(function () {
+        console.log("Quaderno.js successfully initialized");
+      }).catch(function (error) {
+        console.log(error.description, error.messages);
+      });
+    }
+  }, [(_window = window) === null || _window === void 0 ? void 0 : _window.Quaderno]);
 
   var reloadTaxes = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee(options) {
@@ -89235,7 +89252,6 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
 
             case 4:
               taxObject = _context.sent;
-              console.log(taxObject);
               taxAmount = parseFloat(amount * (taxObject.rate / 100)).toFixed(2);
               totalAmount = (parseFloat(amount) + parseFloat(taxAmount)).toFixed(2);
               setSalesTax(taxAmount);
@@ -89246,7 +89262,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
               //         taxObject.name + " " + taxObject.rate + "%"; // ie.: VAT 20%
               // });
 
-            case 10:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -89267,21 +89283,17 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
     }, wait);
   }
 
-  return /*#__PURE__*/React__default['default'].createElement("form", {
+  return /*#__PURE__*/React__default['default'].createElement(Stack, {
     id: "quaderno-payment-form",
-    style: {
-      width: "100%"
-    },
-    "data-publishable-key": "pk_live_JLZ6dgFdcXEVZySpVxb7"
-  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    "data-publishable-key": "pk_live_JLZ6dgFdcXEVZySpVxb7",
     direction: "row",
     justifyContent: "space-between",
     width: "90%",
     alignItems: "center",
-    margin: "0 auto 20px auto"
+    margin: "10px auto"
   }, /*#__PURE__*/React__default['default'].createElement(Dropdown, {
     id: "country",
-    buttonTitle: country.name,
+    buttonTitle: country === null || country === void 0 ? void 0 : country.name,
     buttonLabel: "Country",
     buttonStyle: {
       backgroundColor: "white.override",
@@ -90060,12 +90072,14 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
     label: "Postal Code",
     size: "small",
     required: true,
+    variant: "filled",
+    color: "grey4",
     sx: {
-      backgroundColor: "white.override",
       width: "150px",
-      margin: "12px 16px",
       "& label": {
-        position: "absolute"
+        color: "grey4.real",
+        position: "absolute",
+        "&:hover": {}
       }
     },
     onChange: function onChange(e) {
@@ -90077,7 +90091,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
       }, 1500);
       setPostalCode(e.target.value);
     }
-  })));
+  }));
 };
 
 var _templateObject;
@@ -90381,14 +90395,6 @@ var CheckoutModal = function CheckoutModal(_ref) {
     }();
 
     if (show) {
-      var scriptUrl = "https://js.quaderno.io/v4/";
-
-      if (!document.querySelector("script[src=\"".concat(scriptUrl, "\"]"))) {
-        var script = document.createElement("script");
-        script.src = scriptUrl;
-        document.head.appendChild(script);
-      }
-
       createBraintreeDropIn();
     }
   }, [show, googleMerchantId, venmoProfileId, clientToken, type, total]);