@blerp/design 1.0.54 → 1.0.58

package/dist/index.cjs.js

@@ -28,6 +28,7 @@ var AvatarEditor = require('react-avatar-editor');
 var Dropzone = require('react-dropzone');
 var InsertPhotoRoundedIcon = require('@mui/icons-material/InsertPhotoRounded');
 var styles = require('@mui/material/styles');
+var Slide = require('@mui/material/Slide');
 var Lottie = require('react-lottie');
 var AddRoundedIcon = require('@mui/icons-material/AddRounded');
 var FacebookIcon = require('@mui/icons-material/Facebook');
@@ -94,6 +95,7 @@ var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regenerat
 var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
 var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
 var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
+var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
 var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
 var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
 var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
@@ -911,6 +913,36 @@ var WindowsIcon = function WindowsIcon(_ref23) {
     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"
   }));
 };
+var BroomIcon = function BroomIcon(_ref24) {
+  var sx = _ref24.sx;
+  return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
+    sx: sx
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Layer_2"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Component_727_4",
+    transform: "translate(0.5)"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Union_53"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M7.1,20.2c1.9-1.2,3.1-2,3.1-2S8,19.5,7.1,19.9c-0.4,0.3-0.9,0.3-1.4,0.2c0,0,2.6-0.7,4.1-2.2c0.9-0.9,1.6-2,2.3-3 c0.3-0.4,0.7-0.7,1.1-0.9l2.5,1.3c0,0.6-0.2,1.2-0.5,1.7c-0.3,0.6-0.6,1.3-0.9,1.9c-0.9,1.2-1.6,1.1-1.6,1.1s0.1,0-0.8,0 c-0.1,0-0.2,0-0.5,0c-0.1,0-0.3,0-0.5,0c-0.2,0-0.5,0-0.8,0.1c-0.4,0-0.7,0.1-1.1,0c0.6-0.2,1.2-0.6,1.8-1 c0.4-0.4,0.7-0.9,0.9-1.5c-0.4,0.5-0.8,1-1.2,1.5c-0.6,0.5-1.4,0.8-2.2,1c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0 C7.4,20.2,7.2,20.2,7.1,20.2z M13.4,13.7l0-1.2c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0l1,0.5L19.4,4c0.1-0.2,0.3-0.2,0.4-0.1 L20.3,4c0.2,0.1,0.2,0.3,0.1,0.4c0,0,0,0,0,0l-4.5,8.8l1,0.5c0.1,0.1,0.2,0.2,0.1,0.3c0,0,0,0.1-0.1,0.1l-1,0.7L13.4,13.7z"
+  })), /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Group_28896",
+    transform: "translate(-45.5 3.636)"
+  }, /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Line_2285"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M53.9,13.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S54.2,13.8,53.9,13.8z"
+  })), /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Path_16256"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M55.1,11.2h-3.9c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h3.9c0.3,0,0.5,0.2,0.5,0.5S55.4,11.2,55.1,11.2z"
+  })), /*#__PURE__*/React__default['default'].createElement("g", {
+    id: "Line_2287"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    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"
+  }))))));
+};
 
 var BlerpTopRow = function BlerpTopRow(_ref) {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
@@ -2478,9 +2510,9 @@ BlerpListViewPremium$1.propTypes = {
   handleClickUnsave: PropTypes__default['default'].func.isRequired
 };
 
-function ownKeys$4(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$5(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(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$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(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$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var colors = {
   white: "#ffffff",
@@ -2525,8 +2557,8 @@ var overrideColors = {
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
-var lightColors = _objectSpread$4(_objectSpread$4({}, colors), overrideColors);
-var darkColors = _objectSpread$4({
+var lightColors = _objectSpread$5(_objectSpread$5({}, colors), overrideColors);
+var darkColors = _objectSpread$5({
   white: colors.black,
   waxwing: colors.notBlack,
   grey2: colors.grey7,
@@ -2730,9 +2762,9 @@ var darkPalette = {
 
 var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
 
-function ownKeys$3(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$4(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(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$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(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$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var motion1 = function motion1(props) {
   return styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
@@ -2770,7 +2802,7 @@ var EllipsisLoader = function EllipsisLoader(_ref) {
     color: color,
     size: size,
     sizeUnit: sizeUnit,
-    style: _objectSpread$3({}, style)
+    style: _objectSpread$4({}, style)
   }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
 };
 EllipsisLoader.defaultProps = {
@@ -2823,9 +2855,9 @@ var Toggle$1 = function Toggle(_ref) {
   }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
 };
 
-function ownKeys$2(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$3(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(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$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(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$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 //     box-shadow: 0px 0px 20px #0000001a;
 //     div:focus {
 //         border: none !important;
@@ -2871,7 +2903,7 @@ var Dropdown$1 = function Dropdown(_ref) {
     color: "waxwing",
     icon: true,
     disableElevation: true,
-    sx: _objectSpread$2({
+    sx: _objectSpread$3({
       borderRadius: "4px",
       color: "notBlack.main",
       paddingRight: "4px",
@@ -2926,7 +2958,7 @@ var Dropdown$1 = function Dropdown(_ref) {
       horizontal: "left"
     },
     PaperProps: {
-      sx: _objectSpread$2({
+      sx: _objectSpread$3({
         "& ul": {
           padding: "0"
         },
@@ -3958,6 +3990,146 @@ var icons = {
   }
 };
 
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(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$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/*
+snackbarContext.triggerSnackbar({
+  message: `Added to ${collection.title}`,
+  severity: "success",
+  actionButton: (
+    <Button
+      color="inherit"
+      variant="text"
+      size="small"
+      onClick={() => {
+        globalContext.setActiveBoard(collection);
+      }}>
+      View
+    </Button>
+  ),
+});
+*/
+
+var SnackbarContext = /*#__PURE__*/React__default['default'].createContext({
+  snackbarValues: {
+    open: false,
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    slideDirection: "up",
+    severity: "success",
+    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+  },
+  triggerSnackbar: function triggerSnackbar() {
+    return null;
+  }
+});
+
+var slideTransition = function slideTransition(props) {
+  return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
+    direction: "up"
+  }));
+};
+
+var SnackbarProvider = function SnackbarProvider(props) {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = React.useState({
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    color: "notBlack",
+    slideDirection: "up",
+    severity: "success",
+    actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+  }),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      snackbarValues = _useState4[0],
+      setSnackbarValues = _useState4[1];
+
+  var triggerSnackbar = function triggerSnackbar(_ref) {
+    var _ref$message = _ref.message,
+        message = _ref$message === void 0 ? "Set a message" : _ref$message,
+        _ref$position = _ref.position,
+        position = _ref$position === void 0 ? {
+      vertical: "bottom",
+      horizontal: "center"
+    } : _ref$position,
+        _ref$slideDirection = _ref.slideDirection,
+        slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+        _ref$severity = _ref.severity,
+        severity = _ref$severity === void 0 ? "success" : _ref$severity,
+        color = _ref.color,
+        _ref$actionButton = _ref.actionButton,
+        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton;
+
+    if (!color) {
+      switch (severity) {
+        case "success":
+          color = "seafoam";
+          break;
+
+        case "error":
+          color = "ibisRed";
+          break;
+
+        default:
+          color = "notBlack";
+          break;
+      }
+    }
+
+    setOpen(true);
+    setSnackbarValues({
+      message: message,
+      position: position,
+      color: color,
+      slideDirection: slideDirection,
+      severity: severity,
+      actionButton: actionButton
+    });
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
+    value: {
+      snackbarValues: snackbarValues,
+      setSnackbarValues: setSnackbarValues,
+      triggerSnackbar: triggerSnackbar
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(Snackbar, {
+    anchorOrigin: _objectSpread$2({}, snackbarValues.position),
+    autoHideDuration: 5000,
+    open: open,
+    sx: {
+      minWidth: "30%"
+    },
+    TransitionComponent: slideTransition,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    key: "snackbar-toast"
+  }, /*#__PURE__*/React__default['default'].createElement(Alert, {
+    severity: snackbarValues.severity,
+    variant: "filled",
+    color: snackbarValues.color,
+    action: snackbarValues.actionButton,
+    sx: {
+      width: "100%",
+      "& svg": {
+        color: "white.override"
+      }
+    }
+  }, snackbarValues.message)), props.children);
+};
+
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(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$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -4189,7 +4361,7 @@ var BlerpTheme = function BlerpTheme(_ref) {
       icons: icons,
       mode: mode === "dark" ? "dark" : "light"
     }, currentTheme)
-  }, children));
+  }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
 };
 
 var LottieAnimation = function LottieAnimation(_ref) {
@@ -6993,7 +7165,9 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       fluid = _ref.fluid,
       fontSize = _ref.fontSize,
       isLink = _ref.isLink,
-      isLocked = _ref.isLocked;
+      isLocked = _ref.isLocked,
+      overrideViewText = _ref.overrideViewText,
+      hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7339,7 +7513,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     style: {
       margin: "0px -64px"
     }
-  })), /*#__PURE__*/React__default['default'].createElement(Text, {
+  })), !hideUnlockPlatformText && /*#__PURE__*/React__default['default'].createElement(Text, {
     sx: {
       color: "white.override",
       textAlign: "center",
@@ -7348,7 +7522,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       zIndex: "3",
       fontSize: ".8rem"
     }
-  }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), /*#__PURE__*/React__default['default'].createElement(Button, {
+  }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), handleClickView && /*#__PURE__*/React__default['default'].createElement(Button, {
     disabled: !collectionHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -7361,7 +7535,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       padding: "4px 8px",
       margin: "4px 0"
     }
-  }, "VIEW SOUNDPACK"), /*#__PURE__*/React__default['default'].createElement(Button, {
+  }, overrideViewText || "VIEW SOUNDPACK"), handleClickUnlock && /*#__PURE__*/React__default['default'].createElement(Button, {
     disabled: !collectionHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -7429,7 +7603,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       isLink = _ref.isLink,
       isPremium = _ref.isPremium,
       isLocked = _ref.isLocked,
-      isOwner = _ref.isOwner;
+      isOwner = _ref.isOwner,
+      overrideViewText = _ref.overrideViewText,
+      hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7553,7 +7729,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       fontSize: fontSize,
       isLink: isLink,
       isPremium: isPremium,
-      isLocked: isLocked
+      isLocked: isLocked,
+      overrideViewText: overrideViewText,
+      hideUnlockPlatformText: hideUnlockPlatformText
     });
   }
 
@@ -88175,6 +88353,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
       price = _ref.price,
       handleClose = _ref.handleClose,
       handleSubmit = _ref.handleSubmit,
+      venmoProfileId = _ref.venmoProfileId,
+      googleMerchantId = _ref.googleMerchantId,
       premiumItemComponent = _ref.premiumItemComponent,
       clientToken = _ref.clientToken;
   var size = useWindowSize();
@@ -88242,8 +88422,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
                   },
                   googlePay: {
                     googlePayVersion: 2,
-                    merchantId: process.env.GOOGLE_MERCHANT_ID ? process.env.GOOGLE_MERCHANT_ID : null,
-                    environment: process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
+                    merchantId: googleMerchantId || process.env.GOOGLE_MERCHANT_ID || null,
+                    environment: googleMerchantId || process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
                     transactionInfo: {
                       totalPriceStatus: "FINAL",
                       totalPrice: total,
@@ -88264,7 +88444,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
                   },
                   venmo: {
                     allowDesktop: true,
-                    profileId: process.env.VENMO_PROFILE_ID,
+                    profileId: venmoProfileId || process.env.VENMO_PROFILE_ID,
                     allowNewBrowserTab: true
                   } // The `venmo` object requires no properties to instantiate.
 
@@ -88304,7 +88484,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
     if (show) {
       createBraintreeDropIn();
     }
-  }, [show, clientToken, type, total]);
+  }, [show, googleMerchantId, venmoProfileId, clientToken, type, total]);
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
       backgroundColor: "white.main",
@@ -89794,6 +89974,7 @@ exports.BookmarkAddRounded = BookmarkAddRounded;
 exports.BottomNavigation = BottomNavigation;
 exports.Box = Box;
 exports.Breadcrumbs = Breadcrumbs;
+exports.BroomIcon = BroomIcon;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
@@ -89848,6 +90029,8 @@ exports.ShortcutIcon = ShortcutIcon;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Snackbar = Snackbar;
+exports.SnackbarContext = SnackbarContext;
+exports.SnackbarProvider = SnackbarProvider;
 exports.SpeedDial = SpeedDial;
 exports.Stack = Stack;
 exports.Stepper = Stepper;

package/dist/index.esm.js

@@ -25,6 +25,7 @@ import AvatarEditor from 'react-avatar-editor';
 import Dropzone from 'react-dropzone';
 import InsertPhotoRoundedIcon from '@mui/icons-material/InsertPhotoRounded';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Slide from '@mui/material/Slide';
 import Lottie from 'react-lottie';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
 import FacebookIcon from '@mui/icons-material/Facebook';
@@ -844,6 +845,36 @@ var WindowsIcon = function WindowsIcon(_ref23) {
     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"
   }));
 };
+var BroomIcon = function BroomIcon(_ref24) {
+  var sx = _ref24.sx;
+  return /*#__PURE__*/React__default.createElement(SvgIcon, {
+    sx: sx
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Layer_2"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Component_727_4",
+    transform: "translate(0.5)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Union_53"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M7.1,20.2c1.9-1.2,3.1-2,3.1-2S8,19.5,7.1,19.9c-0.4,0.3-0.9,0.3-1.4,0.2c0,0,2.6-0.7,4.1-2.2c0.9-0.9,1.6-2,2.3-3 c0.3-0.4,0.7-0.7,1.1-0.9l2.5,1.3c0,0.6-0.2,1.2-0.5,1.7c-0.3,0.6-0.6,1.3-0.9,1.9c-0.9,1.2-1.6,1.1-1.6,1.1s0.1,0-0.8,0 c-0.1,0-0.2,0-0.5,0c-0.1,0-0.3,0-0.5,0c-0.2,0-0.5,0-0.8,0.1c-0.4,0-0.7,0.1-1.1,0c0.6-0.2,1.2-0.6,1.8-1 c0.4-0.4,0.7-0.9,0.9-1.5c-0.4,0.5-0.8,1-1.2,1.5c-0.6,0.5-1.4,0.8-2.2,1c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0 C7.4,20.2,7.2,20.2,7.1,20.2z M13.4,13.7l0-1.2c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0l1,0.5L19.4,4c0.1-0.2,0.3-0.2,0.4-0.1 L20.3,4c0.2,0.1,0.2,0.3,0.1,0.4c0,0,0,0,0,0l-4.5,8.8l1,0.5c0.1,0.1,0.2,0.2,0.1,0.3c0,0,0,0.1-0.1,0.1l-1,0.7L13.4,13.7z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "Group_28896",
+    transform: "translate(-45.5 3.636)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "Line_2285"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M53.9,13.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S54.2,13.8,53.9,13.8z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "Path_16256"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M55.1,11.2h-3.9c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h3.9c0.3,0,0.5,0.2,0.5,0.5S55.4,11.2,55.1,11.2z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "Line_2287"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    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"
+  }))))));
+};
 
 var BlerpTopRow = function BlerpTopRow(_ref) {
   var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
@@ -2411,9 +2442,9 @@ BlerpListViewPremium$1.propTypes = {
   handleClickUnsave: PropTypes.func.isRequired
 };
 
-function ownKeys$4(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$5(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var colors = {
   white: "#ffffff",
@@ -2458,8 +2489,8 @@ var overrideColors = {
   buntingBlueOverride: colors.buntingBlue,
   popnYellowOverride: colors.popnYellow
 };
-var lightColors = _objectSpread$4(_objectSpread$4({}, colors), overrideColors);
-var darkColors = _objectSpread$4({
+var lightColors = _objectSpread$5(_objectSpread$5({}, colors), overrideColors);
+var darkColors = _objectSpread$5({
   white: colors.black,
   waxwing: colors.notBlack,
   grey2: colors.grey7,
@@ -2663,9 +2694,9 @@ var darkPalette = {
 
 var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
 
-function ownKeys$3(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$4(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var motion1 = function motion1(props) {
   return keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
@@ -2703,7 +2734,7 @@ var EllipsisLoader = function EllipsisLoader(_ref) {
     color: color,
     size: size,
     sizeUnit: sizeUnit,
-    style: _objectSpread$3({}, style)
+    style: _objectSpread$4({}, style)
   }, /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement("div", null));
 };
 EllipsisLoader.defaultProps = {
@@ -2756,9 +2787,9 @@ var Toggle$1 = function Toggle(_ref) {
   }), /*#__PURE__*/React__default.createElement(Slider$2, null)));
 };
 
-function ownKeys$2(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$3(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 //     box-shadow: 0px 0px 20px #0000001a;
 //     div:focus {
 //         border: none !important;
@@ -2804,7 +2835,7 @@ var Dropdown$1 = function Dropdown(_ref) {
     color: "waxwing",
     icon: true,
     disableElevation: true,
-    sx: _objectSpread$2({
+    sx: _objectSpread$3({
       borderRadius: "4px",
       color: "notBlack.main",
       paddingRight: "4px",
@@ -2859,7 +2890,7 @@ var Dropdown$1 = function Dropdown(_ref) {
       horizontal: "left"
     },
     PaperProps: {
-      sx: _objectSpread$2({
+      sx: _objectSpread$3({
         "& ul": {
           padding: "0"
         },
@@ -3891,6 +3922,146 @@ var icons = {
   }
 };
 
+function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+/*
+snackbarContext.triggerSnackbar({
+  message: `Added to ${collection.title}`,
+  severity: "success",
+  actionButton: (
+    <Button
+      color="inherit"
+      variant="text"
+      size="small"
+      onClick={() => {
+        globalContext.setActiveBoard(collection);
+      }}>
+      View
+    </Button>
+  ),
+});
+*/
+
+var SnackbarContext = /*#__PURE__*/React__default.createContext({
+  snackbarValues: {
+    open: false,
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    slideDirection: "up",
+    severity: "success",
+    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
+  },
+  triggerSnackbar: function triggerSnackbar() {
+    return null;
+  }
+});
+
+var slideTransition = function slideTransition(props) {
+  return /*#__PURE__*/React__default.createElement(Slide, _extends({}, props, {
+    direction: "up"
+  }));
+};
+
+var SnackbarProvider = function SnackbarProvider(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState({
+    message: "Set a message",
+    position: {
+      vertical: "bottom",
+      horizontal: "center"
+    },
+    color: "notBlack",
+    slideDirection: "up",
+    severity: "success",
+    actionButton: /*#__PURE__*/React__default.createElement(React__default.Fragment, null)
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      snackbarValues = _useState4[0],
+      setSnackbarValues = _useState4[1];
+
+  var triggerSnackbar = function triggerSnackbar(_ref) {
+    var _ref$message = _ref.message,
+        message = _ref$message === void 0 ? "Set a message" : _ref$message,
+        _ref$position = _ref.position,
+        position = _ref$position === void 0 ? {
+      vertical: "bottom",
+      horizontal: "center"
+    } : _ref$position,
+        _ref$slideDirection = _ref.slideDirection,
+        slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+        _ref$severity = _ref.severity,
+        severity = _ref$severity === void 0 ? "success" : _ref$severity,
+        color = _ref.color,
+        _ref$actionButton = _ref.actionButton,
+        actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null) : _ref$actionButton;
+
+    if (!color) {
+      switch (severity) {
+        case "success":
+          color = "seafoam";
+          break;
+
+        case "error":
+          color = "ibisRed";
+          break;
+
+        default:
+          color = "notBlack";
+          break;
+      }
+    }
+
+    setOpen(true);
+    setSnackbarValues({
+      message: message,
+      position: position,
+      color: color,
+      slideDirection: slideDirection,
+      severity: severity,
+      actionButton: actionButton
+    });
+  };
+
+  return /*#__PURE__*/React__default.createElement(SnackbarContext.Provider, {
+    value: {
+      snackbarValues: snackbarValues,
+      setSnackbarValues: setSnackbarValues,
+      triggerSnackbar: triggerSnackbar
+    }
+  }, /*#__PURE__*/React__default.createElement(Snackbar, {
+    anchorOrigin: _objectSpread$2({}, snackbarValues.position),
+    autoHideDuration: 5000,
+    open: open,
+    sx: {
+      minWidth: "30%"
+    },
+    TransitionComponent: slideTransition,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    key: "snackbar-toast"
+  }, /*#__PURE__*/React__default.createElement(Alert, {
+    severity: snackbarValues.severity,
+    variant: "filled",
+    color: snackbarValues.color,
+    action: snackbarValues.actionButton,
+    sx: {
+      width: "100%",
+      "& svg": {
+        color: "white.override"
+      }
+    }
+  }, snackbarValues.message)), props.children);
+};
+
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -4122,7 +4293,7 @@ var BlerpTheme = function BlerpTheme(_ref) {
       icons: icons,
       mode: mode === "dark" ? "dark" : "light"
     }, currentTheme)
-  }, children));
+  }, /*#__PURE__*/React__default.createElement(SnackbarProvider, null, children)));
 };
 
 var LottieAnimation = function LottieAnimation(_ref) {
@@ -6926,7 +7097,9 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       fluid = _ref.fluid,
       fontSize = _ref.fontSize,
       isLink = _ref.isLink,
-      isLocked = _ref.isLocked;
+      isLocked = _ref.isLocked,
+      overrideViewText = _ref.overrideViewText,
+      hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7272,7 +7445,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
     style: {
       margin: "0px -64px"
     }
-  })), /*#__PURE__*/React__default.createElement(Text, {
+  })), !hideUnlockPlatformText && /*#__PURE__*/React__default.createElement(Text, {
     sx: {
       color: "white.override",
       textAlign: "center",
@@ -7281,7 +7454,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       zIndex: "3",
       fontSize: ".8rem"
     }
-  }, "Unlock to share ", /*#__PURE__*/React__default.createElement("br", null), "across platforms"), /*#__PURE__*/React__default.createElement(Button, {
+  }, "Unlock to share ", /*#__PURE__*/React__default.createElement("br", null), "across platforms"), handleClickView && /*#__PURE__*/React__default.createElement(Button, {
     disabled: !collectionHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -7294,7 +7467,7 @@ var PremiumCollectionCard = function PremiumCollectionCard(_ref) {
       padding: "4px 8px",
       margin: "4px 0"
     }
-  }, "VIEW SOUNDPACK"), /*#__PURE__*/React__default.createElement(Button, {
+  }, overrideViewText || "VIEW SOUNDPACK"), handleClickUnlock && /*#__PURE__*/React__default.createElement(Button, {
     disabled: !collectionHovered,
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -7362,7 +7535,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       isLink = _ref.isLink,
       isPremium = _ref.isPremium,
       isLocked = _ref.isLocked,
-      isOwner = _ref.isOwner;
+      isOwner = _ref.isOwner,
+      overrideViewText = _ref.overrideViewText,
+      hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
@@ -7486,7 +7661,9 @@ var CollectionCard$1 = function CollectionCard(_ref) {
       fontSize: fontSize,
       isLink: isLink,
       isPremium: isPremium,
-      isLocked: isLocked
+      isLocked: isLocked,
+      overrideViewText: overrideViewText,
+      hideUnlockPlatformText: hideUnlockPlatformText
     });
   }
 
@@ -88108,6 +88285,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
       price = _ref.price,
       handleClose = _ref.handleClose,
       handleSubmit = _ref.handleSubmit,
+      venmoProfileId = _ref.venmoProfileId,
+      googleMerchantId = _ref.googleMerchantId,
       premiumItemComponent = _ref.premiumItemComponent,
       clientToken = _ref.clientToken;
   var size = useWindowSize();
@@ -88175,8 +88354,8 @@ var CheckoutModal = function CheckoutModal(_ref) {
                   },
                   googlePay: {
                     googlePayVersion: 2,
-                    merchantId: process.env.GOOGLE_MERCHANT_ID ? process.env.GOOGLE_MERCHANT_ID : null,
-                    environment: process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
+                    merchantId: googleMerchantId || process.env.GOOGLE_MERCHANT_ID || null,
+                    environment: googleMerchantId || process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
                     transactionInfo: {
                       totalPriceStatus: "FINAL",
                       totalPrice: total,
@@ -88197,7 +88376,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
                   },
                   venmo: {
                     allowDesktop: true,
-                    profileId: process.env.VENMO_PROFILE_ID,
+                    profileId: venmoProfileId || process.env.VENMO_PROFILE_ID,
                     allowNewBrowserTab: true
                   } // The `venmo` object requires no properties to instantiate.
 
@@ -88237,7 +88416,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
     if (show) {
       createBraintreeDropIn();
     }
-  }, [show, clientToken, type, total]);
+  }, [show, googleMerchantId, venmoProfileId, clientToken, type, total]);
   return /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
       backgroundColor: "white.main",
@@ -89708,4 +89887,4 @@ var Themes = {
 // };
 // export default returnLibrary();
 
-export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SpeedDial, Stack, Stepper, Switch, Table, Tabs, Text, Theme, Themes, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };
+export { Accordion, Alert, AppBar, Autocomplete, Avatar, Backdrop, Badge, Blerp, BlerpCardIcon, BlerpCoinsIcon, BlerpListView, BlerpListViewPremium, BlerpListViewSkeleton, BlerpSkeleton, BlerpyIcon, BookmarkAddRounded, BottomNavigation, Box, Breadcrumbs, BroomIcon, Button, ButtonGroup, Card, ChannelPointsIcon, Checkbox, CheckoutModal, Chip, ClockIcon, CogIcon, CollectionCard, CollectionListViewPremium, CollectionSkeleton, Container, CrownIcon, Dialog, DiamondIcon, DiscordIcon, Divider, Drawer, Dropdown, FloatingActionButton, GiftIcon, Grid, IconButton, ImageList, Input, InputAdornment, LightbulbIcon, LinearProgress, Link, List, Menu, MenuItem, Modal, NewCollectionModal, OpenLockIcon, Pagination, Paper, PlayOutlineIcon, PlaySolidIcon, PointerFingerIcon, Popover, PremiumBlerpCheckoutModal, PremiumCollectionCheckoutModal, PremiumSubscriptionCheckoutModal, RadarDishIcon, RadioButton, Rating, ReactionButtons, Select, ShortcutIcon, Skeleton, Slider, Snackbar, SnackbarContext, SnackbarProvider, SpeedDial, Stack, Stepper, Switch, Table, Tabs, Text, Theme, Themes, Toggle, Toolbar, Tooltip, TwitchBitIcon, TwitchIcon, UnsafeIcon, UserLibraryHeader, UserProfileHeader, WalkonIcon, WindowsIcon, darkThemeV1, lightThemeV1, mainTheme };

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@mui/material'), require('@babel/runtime/helpers/slicedToArray'), require('prop-types'), require('react'), require('react-color-extractor'), require('styled-components'), require('@babel/runtime/helpers/taggedTemplateLiteral'), require('@mui/icons-material'), require('@mui/icons-material/BookmarkOutlined'), require('@mui/icons-material/LockRounded'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('react-lottie'), require('@mui/icons-material/AddRounded'), require('@mui/icons-material/Facebook'), require('@mui/icons-material/Instagram'), require('@mui/icons-material/ModeEditRounded'), require('@mui/icons-material/PersonAddRounded'), require('@mui/icons-material/Pinterest'), require('@mui/icons-material/Twitter'), require('@mui/icons-material/YouTube'), require('@mui/icons-material/PersonRemoveRounded'), require('@babel/runtime/helpers/toConsumableArray'), require('@mui/icons-material/FilterAltRounded'), require('@mui/icons-material/MenuRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/SettingsRounded'), require('@mui/icons-material/SortRounded'), require('@mui/icons-material/ChevronRightRounded'), require('@mui/icons-material/PersonRounded'), require('@mui/icons-material/SearchRounded'), require('@mui/icons-material/BookmarkRemoveOutlined'), require('@mui/icons-material/VisibilityOffRounded')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@mui/material', '@babel/runtime/helpers/slicedToArray', 'prop-types', 'react', 'react-color-extractor', 'styled-components', '@babel/runtime/helpers/taggedTemplateLiteral', '@mui/icons-material', '@mui/icons-material/BookmarkOutlined', '@mui/icons-material/LockRounded', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', 'react-lottie', '@mui/icons-material/AddRounded', '@mui/icons-material/Facebook', '@mui/icons-material/Instagram', '@mui/icons-material/ModeEditRounded', '@mui/icons-material/PersonAddRounded', '@mui/icons-material/Pinterest', '@mui/icons-material/Twitter', '@mui/icons-material/YouTube', '@mui/icons-material/PersonRemoveRounded', '@babel/runtime/helpers/toConsumableArray', '@mui/icons-material/FilterAltRounded', '@mui/icons-material/MenuRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined', '@mui/icons-material/VisibilityOffRounded'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['react-awesome-buttons'] = {}, global.material, global._slicedToArray, global.PropTypes, global.React, global.reactColorExtractor, global.styled, global._taggedTemplateLiteral, global.iconsMaterial, global.BookmarkOutlinedIcon, global.LockRoundedIcon, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global._asyncToGenerator, global._regeneratorRuntime, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Lottie, global.AddRoundedIcon, global.FacebookIcon, global.InstagramIcon, global.ModeEditRoundedIcon, global.PersonAddRoundedIcon, global.PinterestIcon, global.TwitterIcon, global.YouTubeIcon, global.PersonRemoveRoundedIcon, global._toConsumableArray, null, global.MenuRoundedIcon, global.ViewModuleRoundedIcon, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon, global.VisibilityOffRoundedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, _asyncToGenerator, _regeneratorRuntime, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -48,6 +48,7 @@
     var AvatarEditor__default = /*#__PURE__*/_interopDefaultLegacy(AvatarEditor);
     var Dropzone__default = /*#__PURE__*/_interopDefaultLegacy(Dropzone);
     var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertPhotoRoundedIcon);
+    var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
     var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
     var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
     var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
@@ -865,6 +866,36 @@
         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"
       }));
     };
+    var BroomIcon = function BroomIcon(_ref24) {
+      var sx = _ref24.sx;
+      return /*#__PURE__*/React__default['default'].createElement(material.SvgIcon, {
+        sx: sx
+      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Layer_2"
+      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Component_727_4",
+        transform: "translate(0.5)"
+      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Union_53"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        d: "M7.1,20.2c1.9-1.2,3.1-2,3.1-2S8,19.5,7.1,19.9c-0.4,0.3-0.9,0.3-1.4,0.2c0,0,2.6-0.7,4.1-2.2c0.9-0.9,1.6-2,2.3-3 c0.3-0.4,0.7-0.7,1.1-0.9l2.5,1.3c0,0.6-0.2,1.2-0.5,1.7c-0.3,0.6-0.6,1.3-0.9,1.9c-0.9,1.2-1.6,1.1-1.6,1.1s0.1,0-0.8,0 c-0.1,0-0.2,0-0.5,0c-0.1,0-0.3,0-0.5,0c-0.2,0-0.5,0-0.8,0.1c-0.4,0-0.7,0.1-1.1,0c0.6-0.2,1.2-0.6,1.8-1 c0.4-0.4,0.7-0.9,0.9-1.5c-0.4,0.5-0.8,1-1.2,1.5c-0.6,0.5-1.4,0.8-2.2,1c-0.1,0-0.3,0-0.4,0c-0.1,0-0.3,0-0.4,0 C7.4,20.2,7.2,20.2,7.1,20.2z M13.4,13.7l0-1.2c0-0.1,0.1-0.2,0.2-0.2c0,0,0.1,0,0.1,0l1,0.5L19.4,4c0.1-0.2,0.3-0.2,0.4-0.1 L20.3,4c0.2,0.1,0.2,0.3,0.1,0.4c0,0,0,0,0,0l-4.5,8.8l1,0.5c0.1,0.1,0.2,0.2,0.1,0.3c0,0,0,0.1-0.1,0.1l-1,0.7L13.4,13.7z"
+      })), /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Group_28896",
+        transform: "translate(-45.5 3.636)"
+      }, /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Line_2285"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        d: "M53.9,13.8h-6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h6c0.3,0,0.5,0.2,0.5,0.5S54.2,13.8,53.9,13.8z"
+      })), /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Path_16256"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        d: "M55.1,11.2h-3.9c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5h3.9c0.3,0,0.5,0.2,0.5,0.5S55.4,11.2,55.1,11.2z"
+      })), /*#__PURE__*/React__default['default'].createElement("g", {
+        id: "Line_2287"
+      }, /*#__PURE__*/React__default['default'].createElement("path", {
+        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"
+      }))))));
+    };
 
     var BlerpTopRow = function BlerpTopRow(_ref) {
       var _bite$topReactions, _bite$topReactions2, _bite$topReactions3;
@@ -2432,9 +2463,9 @@
       handleClickUnsave: PropTypes__default['default'].func.isRequired
     };
 
-    function ownKeys$4(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$5(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(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$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(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$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
     var colors = {
       white: "#ffffff",
@@ -2479,8 +2510,8 @@
       buntingBlueOverride: colors.buntingBlue,
       popnYellowOverride: colors.popnYellow
     };
-    var lightColors = _objectSpread$4(_objectSpread$4({}, colors), overrideColors);
-    var darkColors = _objectSpread$4({
+    var lightColors = _objectSpread$5(_objectSpread$5({}, colors), overrideColors);
+    var darkColors = _objectSpread$5({
       white: colors.black,
       waxwing: colors.notBlack,
       grey2: colors.grey7,
@@ -2684,9 +2715,9 @@
 
     var _templateObject$b, _templateObject2$6, _templateObject3$5, _templateObject4$3;
 
-    function ownKeys$3(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$4(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(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$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(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$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
     var motion1 = function motion1(props) {
       return styled.keyframes(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral__default['default'](["\n  0% {\n    transform: scale(0);\n  }\n  100% {\n    transform: scale(1);\n  }\n"])));
@@ -2724,7 +2755,7 @@
         color: color,
         size: size,
         sizeUnit: sizeUnit,
-        style: _objectSpread$3({}, style)
+        style: _objectSpread$4({}, style)
       }, /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null), /*#__PURE__*/React__default['default'].createElement("div", null));
     };
     EllipsisLoader.defaultProps = {
@@ -2777,9 +2808,9 @@
       }), /*#__PURE__*/React__default['default'].createElement(Slider$2, null)));
     };
 
-    function ownKeys$2(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$3(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(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$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(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$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
     //     box-shadow: 0px 0px 20px #0000001a;
     //     div:focus {
     //         border: none !important;
@@ -2825,7 +2856,7 @@
         color: "waxwing",
         icon: true,
         disableElevation: true,
-        sx: _objectSpread$2({
+        sx: _objectSpread$3({
           borderRadius: "4px",
           color: "notBlack.main",
           paddingRight: "4px",
@@ -2880,7 +2911,7 @@
           horizontal: "left"
         },
         PaperProps: {
-          sx: _objectSpread$2({
+          sx: _objectSpread$3({
             "& ul": {
               padding: "0"
             },
@@ -3912,6 +3943,146 @@
       }
     };
 
+    function ownKeys$2(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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(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$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    /*
+    snackbarContext.triggerSnackbar({
+      message: `Added to ${collection.title}`,
+      severity: "success",
+      actionButton: (
+        <Button
+          color="inherit"
+          variant="text"
+          size="small"
+          onClick={() => {
+            globalContext.setActiveBoard(collection);
+          }}>
+          View
+        </Button>
+      ),
+    });
+    */
+
+    var SnackbarContext = /*#__PURE__*/React__default['default'].createContext({
+      snackbarValues: {
+        open: false,
+        message: "Set a message",
+        position: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        slideDirection: "up",
+        severity: "success",
+        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+      },
+      triggerSnackbar: function triggerSnackbar() {
+        return null;
+      }
+    });
+
+    var slideTransition = function slideTransition(props) {
+      return /*#__PURE__*/React__default['default'].createElement(Slide__default['default'], _extends__default['default']({}, props, {
+        direction: "up"
+      }));
+    };
+
+    var SnackbarProvider = function SnackbarProvider(props) {
+      var _useState = React.useState(false),
+          _useState2 = _slicedToArray__default['default'](_useState, 2),
+          open = _useState2[0],
+          setOpen = _useState2[1];
+
+      var _useState3 = React.useState({
+        message: "Set a message",
+        position: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        color: "notBlack",
+        slideDirection: "up",
+        severity: "success",
+        actionButton: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)
+      }),
+          _useState4 = _slicedToArray__default['default'](_useState3, 2),
+          snackbarValues = _useState4[0],
+          setSnackbarValues = _useState4[1];
+
+      var triggerSnackbar = function triggerSnackbar(_ref) {
+        var _ref$message = _ref.message,
+            message = _ref$message === void 0 ? "Set a message" : _ref$message,
+            _ref$position = _ref.position,
+            position = _ref$position === void 0 ? {
+          vertical: "bottom",
+          horizontal: "center"
+        } : _ref$position,
+            _ref$slideDirection = _ref.slideDirection,
+            slideDirection = _ref$slideDirection === void 0 ? "up" : _ref$slideDirection,
+            _ref$severity = _ref.severity,
+            severity = _ref$severity === void 0 ? "success" : _ref$severity,
+            color = _ref.color,
+            _ref$actionButton = _ref.actionButton,
+            actionButton = _ref$actionButton === void 0 ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null) : _ref$actionButton;
+
+        if (!color) {
+          switch (severity) {
+            case "success":
+              color = "seafoam";
+              break;
+
+            case "error":
+              color = "ibisRed";
+              break;
+
+            default:
+              color = "notBlack";
+              break;
+          }
+        }
+
+        setOpen(true);
+        setSnackbarValues({
+          message: message,
+          position: position,
+          color: color,
+          slideDirection: slideDirection,
+          severity: severity,
+          actionButton: actionButton
+        });
+      };
+
+      return /*#__PURE__*/React__default['default'].createElement(SnackbarContext.Provider, {
+        value: {
+          snackbarValues: snackbarValues,
+          setSnackbarValues: setSnackbarValues,
+          triggerSnackbar: triggerSnackbar
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(Snackbar, {
+        anchorOrigin: _objectSpread$2({}, snackbarValues.position),
+        autoHideDuration: 5000,
+        open: open,
+        sx: {
+          minWidth: "30%"
+        },
+        TransitionComponent: slideTransition,
+        onClose: function onClose() {
+          return setOpen(false);
+        },
+        key: "snackbar-toast"
+      }, /*#__PURE__*/React__default['default'].createElement(Alert, {
+        severity: snackbarValues.severity,
+        variant: "filled",
+        color: snackbarValues.color,
+        action: snackbarValues.actionButton,
+        sx: {
+          width: "100%",
+          "& svg": {
+            color: "white.override"
+          }
+        }
+      }, snackbarValues.message)), props.children);
+    };
+
     function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(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$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -4143,7 +4314,7 @@
           icons: icons,
           mode: mode === "dark" ? "dark" : "light"
         }, currentTheme)
-      }, children));
+      }, /*#__PURE__*/React__default['default'].createElement(SnackbarProvider, null, children)));
     };
 
     var LottieAnimation = function LottieAnimation(_ref) {
@@ -6947,7 +7118,9 @@
           fluid = _ref.fluid,
           fontSize = _ref.fontSize,
           isLink = _ref.isLink,
-          isLocked = _ref.isLocked;
+          isLocked = _ref.isLocked,
+          overrideViewText = _ref.overrideViewText,
+          hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7293,7 +7466,7 @@
         style: {
           margin: "0px -64px"
         }
-      })), /*#__PURE__*/React__default['default'].createElement(Text, {
+      })), !hideUnlockPlatformText && /*#__PURE__*/React__default['default'].createElement(Text, {
         sx: {
           color: "white.override",
           textAlign: "center",
@@ -7302,7 +7475,7 @@
           zIndex: "3",
           fontSize: ".8rem"
         }
-      }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), /*#__PURE__*/React__default['default'].createElement(Button, {
+      }, "Unlock to share ", /*#__PURE__*/React__default['default'].createElement("br", null), "across platforms"), handleClickView && /*#__PURE__*/React__default['default'].createElement(Button, {
         disabled: !collectionHovered,
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -7315,7 +7488,7 @@
           padding: "4px 8px",
           margin: "4px 0"
         }
-      }, "VIEW SOUNDPACK"), /*#__PURE__*/React__default['default'].createElement(Button, {
+      }, overrideViewText || "VIEW SOUNDPACK"), handleClickUnlock && /*#__PURE__*/React__default['default'].createElement(Button, {
         disabled: !collectionHovered,
         onClick: function onClick(e) {
           e.stopPropagation();
@@ -7383,7 +7556,9 @@
           isLink = _ref.isLink,
           isPremium = _ref.isPremium,
           isLocked = _ref.isLocked,
-          isOwner = _ref.isOwner;
+          isOwner = _ref.isOwner,
+          overrideViewText = _ref.overrideViewText,
+          hideUnlockPlatformText = _ref.hideUnlockPlatformText;
 
       var _useState = React.useState(null),
           _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -7507,7 +7682,9 @@
           fontSize: fontSize,
           isLink: isLink,
           isPremium: isPremium,
-          isLocked: isLocked
+          isLocked: isLocked,
+          overrideViewText: overrideViewText,
+          hideUnlockPlatformText: hideUnlockPlatformText
         });
       }
 
@@ -88129,6 +88306,8 @@
           price = _ref.price,
           handleClose = _ref.handleClose,
           handleSubmit = _ref.handleSubmit,
+          venmoProfileId = _ref.venmoProfileId,
+          googleMerchantId = _ref.googleMerchantId,
           premiumItemComponent = _ref.premiumItemComponent,
           clientToken = _ref.clientToken;
       var size = useWindowSize();
@@ -88196,8 +88375,8 @@
                       },
                       googlePay: {
                         googlePayVersion: 2,
-                        merchantId: process.env.GOOGLE_MERCHANT_ID ? process.env.GOOGLE_MERCHANT_ID : null,
-                        environment: process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
+                        merchantId: googleMerchantId || process.env.GOOGLE_MERCHANT_ID || null,
+                        environment: googleMerchantId || process.env.GOOGLE_MERCHANT_ID ? "PRODUCTION" : "TEST",
                         transactionInfo: {
                           totalPriceStatus: "FINAL",
                           totalPrice: total,
@@ -88218,7 +88397,7 @@
                       },
                       venmo: {
                         allowDesktop: true,
-                        profileId: process.env.VENMO_PROFILE_ID,
+                        profileId: venmoProfileId || process.env.VENMO_PROFILE_ID,
                         allowNewBrowserTab: true
                       } // The `venmo` object requires no properties to instantiate.
 
@@ -88258,7 +88437,7 @@
         if (show) {
           createBraintreeDropIn();
         }
-      }, [show, clientToken, type, total]);
+      }, [show, googleMerchantId, venmoProfileId, clientToken, type, total]);
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
           backgroundColor: "white.main",
@@ -89748,6 +89927,7 @@
     exports.BottomNavigation = BottomNavigation;
     exports.Box = Box;
     exports.Breadcrumbs = Breadcrumbs;
+    exports.BroomIcon = BroomIcon;
     exports.Button = Button;
     exports.ButtonGroup = ButtonGroup;
     exports.Card = Card;
@@ -89802,6 +89982,8 @@
     exports.Skeleton = Skeleton;
     exports.Slider = Slider;
     exports.Snackbar = Snackbar;
+    exports.SnackbarContext = SnackbarContext;
+    exports.SnackbarProvider = SnackbarProvider;
     exports.SpeedDial = SpeedDial;
     exports.Stack = Stack;
     exports.Stepper = Stepper;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blerp/design",
-    "version": "1.0.54",
+    "version": "1.0.58",
     "description": "Blerp UI",
     "main": "dist/index.cjs.js",
     "scripts": {