@blerp/design 1.2.53 → 1.2.55

package/dist/index.esm.js

@@ -6,10 +6,9 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, MusicNoteRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
@@ -17,7 +16,12 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
+import '@mui/icons-material/VisibilityRounded';
+import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
+import '@mui/icons-material/ThumbsUpDownRounded';
+import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
+import LayersRoundedIcon from '@mui/icons-material/LayersRounded';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -48,7 +52,6 @@ import PersonRemoveRoundedIcon from '@mui/icons-material/PersonRemoveRounded';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import '@mui/icons-material/FilterAltRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
-import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
 import '@mui/icons-material/SettingsRounded';
 import SortRoundedIcon from '@mui/icons-material/SortRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
@@ -1621,9 +1624,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(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(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,
@@ -1691,7 +1694,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
     collapsed: collapsed,
     user: user
   })), /*#__PURE__*/React__default.createElement(Text, {
-    sx: _objectSpread$7({
+    sx: _objectSpread$6({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -1708,10 +1711,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(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.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\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.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"])), function (props) {
   return props.theme.colors.grey7;
@@ -1763,7 +1762,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,
@@ -1773,35 +1772,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$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Added to Universal Extension"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(LanguageRoundedIcon, {
+    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) || (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.createElement(Tooltip, {
     title: "Added to Channel Points"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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.createElement(Tooltip, {
     title: "Added to Bits Library"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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.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.createElement(Tooltip, {
     title: "Added to WalkOn"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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.createElement(Tooltip, {
-    title: "Added to Sound Emotes"
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(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.createElement(Tooltip, {
+    title: "Added to Group"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(LayersRoundedIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))));
@@ -1823,28 +1832,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;
@@ -1857,16 +1856,14 @@ var RatingInfo = function RatingInfo(_ref4) {
 
     return /*#__PURE__*/React__default.createElement(Stack, {
       direction: "row",
-      alignItems: "center"
-    }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Private"
-    }, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
-      sx: _objectSpread$6({}, visStyle)
-    })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Unlisted"
-    }, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
-      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.createElement(React__default.Fragment, null);
@@ -1909,19 +1906,22 @@ var RatingInfo = function RatingInfo(_ref4) {
     ratingText.text = "UNRATED";
   }
 
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: 0
+    }
+  });
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    alignItems: "center"
-  }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Private"
-  }, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
-    sx: _objectSpread$6({}, visStyle)
-  })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Unlisted"
-  }, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
-    sx: _objectSpread$6({}, visStyle)
-  })), /*#__PURE__*/React__default.createElement(RatingInfoItem, {
+    alignItems: "start",
+    sx: {
+      transition: "0.2s",
+      flex: 3,
+      flexWrap: "wrap",
+      marginTop: hovering ? "35px" : "0"
+    }
+  }, /*#__PURE__*/React__default.createElement(RatingInfoItem, {
     tooltipText: ratingText.tooltipText,
     displayText: ratingText.text
   }));
@@ -2053,21 +2053,24 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
       minHeight: "20px"
     }
   }, /*#__PURE__*/React__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.createElement(RatingInfo, {
+    hovering: hovering,
     bite: bite
   }), /*#__PURE__*/React__default.createElement(AddedToIcons, {
     item: bite,
-    hovering: hovering
+    hovering: hovering || hoveringAddTo
   })), renderAddContentButton({
     item: bite,
     hovering: hovering,
@@ -2082,7 +2085,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,
@@ -2130,7 +2133,7 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
       setHoveringAddTo = _useState10[1];
 
   var titleRef = 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() {
@@ -89125,6 +89128,8 @@ var NewLoadingBlob = function NewLoadingBlob(props) {
 };
 
 var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
+  var _window;
+
   var amount = _ref.amount,
       setSalesTax = _ref.setSalesTax,
       setTotal = _ref.setTotal,
@@ -89133,14 +89138,25 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
       postalCode = _ref.postalCode,
       setPostalCode = _ref.setPostalCode;
   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);
+    }
   }, []);
+  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( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
@@ -89159,7 +89175,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);
@@ -89170,7 +89185,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
               //         taxObject.name + " " + taxObject.rate + "%"; // ie.: VAT 20%
               // });
 
-            case 10:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -89191,21 +89206,17 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
     }, wait);
   }
 
-  return /*#__PURE__*/React__default.createElement("form", {
+  return /*#__PURE__*/React__default.createElement(Stack, {
     id: "quaderno-payment-form",
-    style: {
-      width: "100%"
-    },
-    "data-publishable-key": "pk_live_JLZ6dgFdcXEVZySpVxb7"
-  }, /*#__PURE__*/React__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.createElement(Dropdown, {
     id: "country",
-    buttonTitle: country.name,
+    buttonTitle: country === null || country === void 0 ? void 0 : country.name,
     buttonLabel: "Country",
     buttonStyle: {
       backgroundColor: "white.override",
@@ -89984,12 +89995,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) {
@@ -90001,7 +90014,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
       }, 1500);
       setPostalCode(e.target.value);
     }
-  })));
+  }));
 };
 
 var _templateObject;
@@ -90305,14 +90318,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]);