@blerp/design 1.0.86 → 1.0.89

package/dist/index.cjs.js

@@ -1593,10 +1593,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       _ref.handleClickThreeDot;
       var handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       isLocked = _ref.isLocked,
       fluid = _ref.fluid;
       _ref.props;
+      var backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor;
       _ref.isPremium;
       var handleClickLock = _ref.handleClickLock,
       handleClickPremium = _ref.handleClickPremium;
@@ -1624,12 +1628,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       actionButtonHovered = _useState6[0],
       setActionButtonHovered = _useState6[1];
 
-  console.log(data);
-
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1639,7 +1642,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1649,7 +1653,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1662,7 +1667,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1707,7 +1713,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       // overflow: "hidden",
       "&:hover": {
         transition: "0.3s",
-        bgcolor: "grey2.main"
+        bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1718,7 +1724,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       left: "0",
       right: "0",
       borderRadius: "8px",
-      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
@@ -1780,7 +1786,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
+  }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -1822,7 +1834,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
     alignItems: "center"
   }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
@@ -2007,8 +2033,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot = _ref.handleClickThreeDot,
       handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       fluid = _ref.fluid,
+      backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor,
       props = _ref.props,
       isLocked = _ref.isLocked,
       isPremium = _ref.isPremium,
@@ -2031,7 +2061,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -2041,7 +2072,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -2051,7 +2083,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -2064,7 +2097,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2104,13 +2138,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot: handleClickThreeDot,
       handleClickUnsave: handleClickUnsave,
       handleClickTitle: handleClickTitle,
+      biteSubtitle: biteSubtitle,
+      handleSubtitleClick: handleSubtitleClick,
       isLinkTitle: isLinkTitle,
       fluid: fluid,
       props: props,
       isLocked: isLocked,
       isPremium: isPremium,
       handleClickLock: handleClickLock,
-      handleClickPremium: handleClickPremium
+      handleClickPremium: handleClickPremium,
+      backgroundColor: backgroundColor,
+      hoverColor: hoverColor
     });
   }
 
@@ -2120,13 +2158,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       minWidth: fluid && "300px",
       borderRadius: "8px",
       border: "2px transparent",
-      bgcolor: "grey2.main",
+      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
       backgroundOrigin: "border-box",
       backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
       transition: "0.3s",
       "&:hover": {
-        bgcolor: "grey3.main"
+        bgcolor: hoverColor ? hoverColor : "grey3.main"
       }
     }
   }, /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -2187,7 +2225,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+  }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
@@ -2197,7 +2241,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     color: "white.override",
     sx: {
@@ -2215,7 +2259,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     sx: {
       ":hover": {
@@ -2228,7 +2272,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row"
   }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
     onClick: function onClick(e) {
@@ -3536,7 +3594,8 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       deleteCollectionModal = _ref.deleteCollectionModal,
       trigger = _ref.trigger,
       collectionToBeEdited = _ref.collectionToBeEdited,
-      handleChangePremium = _ref.handleChangePremium;
+      handleChangePremium = _ref.handleChangePremium,
+      onClose = _ref.onClose;
       _ref.children;
       var isAdmin = _ref.isAdmin;
 
@@ -3588,6 +3647,15 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       _useState18[1];
 
   var size = useWindowSize();
+
+  var handleClose = function handleClose() {
+    setopen(false);
+
+    if (onClose) {
+      onClose();
+    }
+  };
+
   return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
     ref: triggerRef,
     onClick: function onClick() {
@@ -3606,7 +3674,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
     "aria-describedby": "transition-modal-description",
     open: open,
     onClose: function onClose() {
-      return setopen(false);
+      return handleClose();
     },
     closeAfterTransition: true
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -3690,7 +3758,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       }
     },
     onClick: function onClick() {
-      return setopen(false);
+      return handleClose();
     }
   }), /*#__PURE__*/React__default['default'].createElement(Stack, {
     sx: {
@@ -3912,7 +3980,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
             visibility: visibility,
             price: price
           });
-          setopen(false);
+          handleClose();
         } else {
           console.log("price must be set higher than 0");
         } // what to do if this modal is being used to create a new collection
@@ -3926,7 +3994,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
             visibility: visibility,
             price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
           });
-          setopen(false);
+          handleClose();
         } else {
           console.log("price must be set higher than 0");
         }
@@ -3941,7 +4009,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       margin: "10px auto"
     },
     onClick: function onClick() {
-      setopen(false);
+      handleClose();
     }
   }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Text, {
     fontSize: "14px",
@@ -88379,6 +88447,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
     sx: {
       backgroundColor: "white.override",
       width: "150px",
+      margin: "12px 16px",
       "& label": {
         position: "absolute"
       }
@@ -88446,7 +88515,7 @@ var BraintreeUI = function BraintreeUI(_ref) {
     alignSelf: "start",
     fontSize: "20px",
     width: "90%",
-    margin: "10px auto 0 auto"
+    margin: "20px 12px 12px"
   }, "Billing Address"), /*#__PURE__*/React__default['default'].createElement(QuadernoTaxCalc, {
     amount: price,
     setTotal: setTotal,

package/dist/index.esm.js

@@ -1524,10 +1524,14 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       _ref.handleClickThreeDot;
       var handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       isLocked = _ref.isLocked,
       fluid = _ref.fluid;
       _ref.props;
+      var backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor;
       _ref.isPremium;
       var handleClickLock = _ref.handleClickLock,
       handleClickPremium = _ref.handleClickPremium;
@@ -1555,12 +1559,11 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       actionButtonHovered = _useState6[0],
       setActionButtonHovered = _useState6[1];
 
-  console.log(data);
-
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1570,7 +1573,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1580,7 +1584,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1593,7 +1598,8 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1638,7 +1644,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       // overflow: "hidden",
       "&:hover": {
         transition: "0.3s",
-        bgcolor: "grey2.main"
+        bgcolor: hoverColor ? hoverColor : "grey2.main"
       }
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -1649,7 +1655,7 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       left: "0",
       right: "0",
       borderRadius: "8px",
-      background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+      background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
       transition: "opacity .15s ease-in-out",
       opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
     }
@@ -1711,7 +1717,13 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
+  }))), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -1753,7 +1765,21 @@ var BlerpListViewPremium$1 = function BlerpListViewPremium(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     alignItems: "center"
   }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default.createElement(SaveContainer$1, {
@@ -1938,8 +1964,12 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot = _ref.handleClickThreeDot,
       handleClickUnsave = _ref.handleClickUnsave,
       handleClickTitle = _ref.handleClickTitle,
+      handleSubtitleClick = _ref.handleSubtitleClick,
+      biteSubtitle = _ref.biteSubtitle,
       isLinkTitle = _ref.isLinkTitle,
       fluid = _ref.fluid,
+      backgroundColor = _ref.backgroundColor,
+      hoverColor = _ref.hoverColor,
       props = _ref.props,
       isLocked = _ref.isLocked,
       isPremium = _ref.isPremium,
@@ -1962,7 +1992,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   var sizeParams;
   var smallSize = {
     width: 300,
-    height: 40,
+    height: 52,
+    smallFontSize: "12px",
     fontSize: "16px",
     imageSize: "40px",
     reactionSpacing: 1,
@@ -1972,7 +2003,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var mediumSize = {
     width: 375,
-    height: 48,
+    height: 60,
+    smallFontSize: "14px",
     fontSize: "18px",
     imageSize: "48px",
     reactionSpacing: 1,
@@ -1982,7 +2014,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
   };
   var largeSize = {
     width: 440,
-    height: 56,
+    height: 72,
+    smallFontSize: "26px",
     fontSize: "20px",
     imageSize: "56px",
     reactionSpacing: 1,
@@ -1995,7 +2028,8 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     if (fluid) {
       sizeParams = {
         width: "100%",
-        height: 48,
+        height: 52,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2035,13 +2069,17 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       handleClickThreeDot: handleClickThreeDot,
       handleClickUnsave: handleClickUnsave,
       handleClickTitle: handleClickTitle,
+      biteSubtitle: biteSubtitle,
+      handleSubtitleClick: handleSubtitleClick,
       isLinkTitle: isLinkTitle,
       fluid: fluid,
       props: props,
       isLocked: isLocked,
       isPremium: isPremium,
       handleClickLock: handleClickLock,
-      handleClickPremium: handleClickPremium
+      handleClickPremium: handleClickPremium,
+      backgroundColor: backgroundColor,
+      hoverColor: hoverColor
     });
   }
 
@@ -2051,13 +2089,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       minWidth: fluid && "300px",
       borderRadius: "8px",
       border: "2px transparent",
-      bgcolor: "grey2.main",
+      bgcolor: backgroundColor ? backgroundColor : "grey2.main",
       backgroundOrigin: "border-box",
       backgroundClip: "content-box, border-box",
       boxShadow: "2px 2px 4px 0px #999999a1;",
       transition: "0.3s",
       "&:hover": {
-        bgcolor: "grey3.main"
+        bgcolor: hoverColor ? hoverColor : "grey3.main"
       }
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -2118,7 +2156,13 @@ var BlerpListView$1 = function BlerpListView(_ref) {
       height: "30px",
       color: "white.override"
     }
-  }))), isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
+  }))), /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "column",
+    alignItems: "flex-start",
+    sx: {
+      width: "80%"
+    }
+  }, isLinkTitle ? /*#__PURE__*/React__default.createElement("a", {
     href: "/soundbites/".concat(bite._id),
     style: {
       textDecoration: "none",
@@ -2128,7 +2172,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     color: "white.override",
     sx: {
@@ -2146,7 +2190,7 @@ var BlerpListView$1 = function BlerpListView(_ref) {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
-    width: "80%",
+    width: "100%",
     marginLeft: "10px",
     sx: {
       ":hover": {
@@ -2159,7 +2203,21 @@ var BlerpListView$1 = function BlerpListView(_ref) {
         handleClickTitle();
       }
     }
-  }, bite.title)), /*#__PURE__*/React__default.createElement(Stack, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React__default.createElement(Text, {
+    textAlign: "left",
+    fontSize: sizeParams.smallFontSize,
+    noWrap: true,
+    marginLeft: "10px",
+    width: "100%",
+    color: "white.override",
+    sx: {},
+    onClick: function onClick(e) {
+      if (handleSubtitleClick) {
+        e.stopPropagation();
+        handleSubtitleClick();
+      }
+    }
+  }, biteSubtitle))), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
   }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default.createElement(IconButton, {
     onClick: function onClick(e) {
@@ -3467,7 +3525,8 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       deleteCollectionModal = _ref.deleteCollectionModal,
       trigger = _ref.trigger,
       collectionToBeEdited = _ref.collectionToBeEdited,
-      handleChangePremium = _ref.handleChangePremium;
+      handleChangePremium = _ref.handleChangePremium,
+      onClose = _ref.onClose;
       _ref.children;
       var isAdmin = _ref.isAdmin;
 
@@ -3519,6 +3578,15 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       _useState18[1];
 
   var size = useWindowSize();
+
+  var handleClose = function handleClose() {
+    setopen(false);
+
+    if (onClose) {
+      onClose();
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, trigger ? /*#__PURE__*/cloneElement(trigger, {
     ref: triggerRef,
     onClick: function onClick() {
@@ -3537,7 +3605,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
     "aria-describedby": "transition-modal-description",
     open: open,
     onClose: function onClose() {
-      return setopen(false);
+      return handleClose();
     },
     closeAfterTransition: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -3621,7 +3689,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       }
     },
     onClick: function onClick() {
-      return setopen(false);
+      return handleClose();
     }
   }), /*#__PURE__*/React__default.createElement(Stack, {
     sx: {
@@ -3843,7 +3911,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
             visibility: visibility,
             price: price
           });
-          setopen(false);
+          handleClose();
         } else {
           console.log("price must be set higher than 0");
         } // what to do if this modal is being used to create a new collection
@@ -3857,7 +3925,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
             visibility: visibility,
             price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
           });
-          setopen(false);
+          handleClose();
         } else {
           console.log("price must be set higher than 0");
         }
@@ -3872,7 +3940,7 @@ var NewCollectionModal$1 = function NewCollectionModal(_ref) {
       margin: "10px auto"
     },
     onClick: function onClick() {
-      setopen(false);
+      handleClose();
     }
   }, "Cancel"), /*#__PURE__*/React__default.createElement(Text, {
     fontSize: "14px",
@@ -88310,6 +88378,7 @@ var QuadernoTaxCalc = function QuadernoTaxCalc(_ref) {
     sx: {
       backgroundColor: "white.override",
       width: "150px",
+      margin: "12px 16px",
       "& label": {
         position: "absolute"
       }
@@ -88377,7 +88446,7 @@ var BraintreeUI = function BraintreeUI(_ref) {
     alignSelf: "start",
     fontSize: "20px",
     width: "90%",
-    margin: "10px auto 0 auto"
+    margin: "20px 12px 12px"
   }, "Billing Address"), /*#__PURE__*/React__default.createElement(QuadernoTaxCalc, {
     amount: price,
     setTotal: setTotal,

package/dist/index.umd.js

@@ -1545,10 +1545,14 @@
           _ref.handleClickThreeDot;
           var handleClickUnsave = _ref.handleClickUnsave,
           handleClickTitle = _ref.handleClickTitle,
+          handleSubtitleClick = _ref.handleSubtitleClick,
+          biteSubtitle = _ref.biteSubtitle,
           isLinkTitle = _ref.isLinkTitle,
           isLocked = _ref.isLocked,
           fluid = _ref.fluid;
           _ref.props;
+          var backgroundColor = _ref.backgroundColor,
+          hoverColor = _ref.hoverColor;
           _ref.isPremium;
           var handleClickLock = _ref.handleClickLock,
           handleClickPremium = _ref.handleClickPremium;
@@ -1576,12 +1580,11 @@
           actionButtonHovered = _useState6[0],
           setActionButtonHovered = _useState6[1];
 
-      console.log(data);
-
       var sizeParams;
       var smallSize = {
         width: 300,
-        height: 40,
+        height: 52,
+        smallFontSize: "12px",
         fontSize: "16px",
         imageSize: "40px",
         reactionSpacing: 1,
@@ -1591,7 +1594,8 @@
       };
       var mediumSize = {
         width: 375,
-        height: 48,
+        height: 60,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -1601,7 +1605,8 @@
       };
       var largeSize = {
         width: 440,
-        height: 56,
+        height: 72,
+        smallFontSize: "26px",
         fontSize: "20px",
         imageSize: "56px",
         reactionSpacing: 1,
@@ -1614,7 +1619,8 @@
         if (fluid) {
           sizeParams = {
             width: "100%",
-            height: 48,
+            height: 52,
+            smallFontSize: "14px",
             fontSize: "18px",
             imageSize: "48px",
             reactionSpacing: 1,
@@ -1659,7 +1665,7 @@
           // overflow: "hidden",
           "&:hover": {
             transition: "0.3s",
-            bgcolor: "grey2.main"
+            bgcolor: hoverColor ? hoverColor : "grey2.main"
           }
         }
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -1670,7 +1676,7 @@
           left: "0",
           right: "0",
           borderRadius: "8px",
-          background: data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
+          background: backgroundColor ? backgroundColor : data ? "linear-gradient(90deg, ".concat(data.vibrant, ", ").concat(theme.colors.grey5Override, ")") : "notBlack.main",
           transition: "opacity .15s ease-in-out",
           opacity: isLocked ? isBlerpHovered ? ".8" : ".5" : isBlerpHovered ? "1" : ".8"
         }
@@ -1732,7 +1738,13 @@
           height: "30px",
           color: "white.override"
         }
-      }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
+      }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "column",
+        alignItems: "flex-start",
+        sx: {
+          width: "80%"
+        }
+      }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement(Text, {
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
@@ -1774,7 +1786,21 @@
             handleClickTitle();
           }
         }
-      }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+        textAlign: "left",
+        fontSize: sizeParams.smallFontSize,
+        noWrap: true,
+        marginLeft: "10px",
+        width: "100%",
+        color: "white.override",
+        sx: {},
+        onClick: function onClick(e) {
+          if (handleSubtitleClick) {
+            e.stopPropagation();
+            handleSubtitleClick();
+          }
+        }
+      }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
         alignItems: "center"
       }, primaryActionButton ? primaryActionButton : isLocked ? /*#__PURE__*/React__default['default'].createElement(SaveContainer$1, {
@@ -1959,8 +1985,12 @@
           handleClickThreeDot = _ref.handleClickThreeDot,
           handleClickUnsave = _ref.handleClickUnsave,
           handleClickTitle = _ref.handleClickTitle,
+          handleSubtitleClick = _ref.handleSubtitleClick,
+          biteSubtitle = _ref.biteSubtitle,
           isLinkTitle = _ref.isLinkTitle,
           fluid = _ref.fluid,
+          backgroundColor = _ref.backgroundColor,
+          hoverColor = _ref.hoverColor,
           props = _ref.props,
           isLocked = _ref.isLocked,
           isPremium = _ref.isPremium,
@@ -1983,7 +2013,8 @@
       var sizeParams;
       var smallSize = {
         width: 300,
-        height: 40,
+        height: 52,
+        smallFontSize: "12px",
         fontSize: "16px",
         imageSize: "40px",
         reactionSpacing: 1,
@@ -1993,7 +2024,8 @@
       };
       var mediumSize = {
         width: 375,
-        height: 48,
+        height: 60,
+        smallFontSize: "14px",
         fontSize: "18px",
         imageSize: "48px",
         reactionSpacing: 1,
@@ -2003,7 +2035,8 @@
       };
       var largeSize = {
         width: 440,
-        height: 56,
+        height: 72,
+        smallFontSize: "26px",
         fontSize: "20px",
         imageSize: "56px",
         reactionSpacing: 1,
@@ -2016,7 +2049,8 @@
         if (fluid) {
           sizeParams = {
             width: "100%",
-            height: 48,
+            height: 52,
+            smallFontSize: "14px",
             fontSize: "18px",
             imageSize: "48px",
             reactionSpacing: 1,
@@ -2056,13 +2090,17 @@
           handleClickThreeDot: handleClickThreeDot,
           handleClickUnsave: handleClickUnsave,
           handleClickTitle: handleClickTitle,
+          biteSubtitle: biteSubtitle,
+          handleSubtitleClick: handleSubtitleClick,
           isLinkTitle: isLinkTitle,
           fluid: fluid,
           props: props,
           isLocked: isLocked,
           isPremium: isPremium,
           handleClickLock: handleClickLock,
-          handleClickPremium: handleClickPremium
+          handleClickPremium: handleClickPremium,
+          backgroundColor: backgroundColor,
+          hoverColor: hoverColor
         });
       }
 
@@ -2072,13 +2110,13 @@
           minWidth: fluid && "300px",
           borderRadius: "8px",
           border: "2px transparent",
-          bgcolor: "grey2.main",
+          bgcolor: backgroundColor ? backgroundColor : "grey2.main",
           backgroundOrigin: "border-box",
           backgroundClip: "content-box, border-box",
           boxShadow: "2px 2px 4px 0px #999999a1;",
           transition: "0.3s",
           "&:hover": {
-            bgcolor: "grey3.main"
+            bgcolor: hoverColor ? hoverColor : "grey3.main"
           }
         }
       }, /*#__PURE__*/React__default['default'].createElement(Box, {
@@ -2139,7 +2177,13 @@
           height: "30px",
           color: "white.override"
         }
-      }))), isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
+      }))), /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "column",
+        alignItems: "flex-start",
+        sx: {
+          width: "80%"
+        }
+      }, isLinkTitle ? /*#__PURE__*/React__default['default'].createElement("a", {
         href: "/soundbites/".concat(bite._id),
         style: {
           textDecoration: "none",
@@ -2149,7 +2193,7 @@
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
-        width: "80%",
+        width: "100%",
         marginLeft: "10px",
         color: "white.override",
         sx: {
@@ -2167,7 +2211,7 @@
         textAlign: "left",
         fontSize: sizeParams.fontSize,
         noWrap: true,
-        width: "80%",
+        width: "100%",
         marginLeft: "10px",
         sx: {
           ":hover": {
@@ -2180,7 +2224,21 @@
             handleClickTitle();
           }
         }
-      }, bite.title)), /*#__PURE__*/React__default['default'].createElement(Stack, {
+      }, bite.title), biteSubtitle && /*#__PURE__*/React__default['default'].createElement(Text, {
+        textAlign: "left",
+        fontSize: sizeParams.smallFontSize,
+        noWrap: true,
+        marginLeft: "10px",
+        width: "100%",
+        color: "white.override",
+        sx: {},
+        onClick: function onClick(e) {
+          if (handleSubtitleClick) {
+            e.stopPropagation();
+            handleSubtitleClick();
+          }
+        }
+      }, biteSubtitle))), /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row"
       }, primaryActionButton ? primaryActionButton : bite !== null && bite !== void 0 && bite.saved ? /*#__PURE__*/React__default['default'].createElement(IconButton, {
         onClick: function onClick(e) {
@@ -3488,7 +3546,8 @@
           deleteCollectionModal = _ref.deleteCollectionModal,
           trigger = _ref.trigger,
           collectionToBeEdited = _ref.collectionToBeEdited,
-          handleChangePremium = _ref.handleChangePremium;
+          handleChangePremium = _ref.handleChangePremium,
+          onClose = _ref.onClose;
           _ref.children;
           var isAdmin = _ref.isAdmin;
 
@@ -3540,6 +3599,15 @@
           _useState18[1];
 
       var size = useWindowSize();
+
+      var handleClose = function handleClose() {
+        setopen(false);
+
+        if (onClose) {
+          onClose();
+        }
+      };
+
       return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, trigger ? /*#__PURE__*/React.cloneElement(trigger, {
         ref: triggerRef,
         onClick: function onClick() {
@@ -3558,7 +3626,7 @@
         "aria-describedby": "transition-modal-description",
         open: open,
         onClose: function onClose() {
-          return setopen(false);
+          return handleClose();
         },
         closeAfterTransition: true
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
@@ -3642,7 +3710,7 @@
           }
         },
         onClick: function onClick() {
-          return setopen(false);
+          return handleClose();
         }
       }), /*#__PURE__*/React__default['default'].createElement(Stack, {
         sx: {
@@ -3864,7 +3932,7 @@
                 visibility: visibility,
                 price: price
               });
-              setopen(false);
+              handleClose();
             } else {
               console.log("price must be set higher than 0");
             } // what to do if this modal is being used to create a new collection
@@ -3878,7 +3946,7 @@
                 visibility: visibility,
                 price: collectionToBeEdited !== null && collectionToBeEdited !== void 0 && collectionToBeEdited.isPremium ? price : 0
               });
-              setopen(false);
+              handleClose();
             } else {
               console.log("price must be set higher than 0");
             }
@@ -3893,7 +3961,7 @@
           margin: "10px auto"
         },
         onClick: function onClick() {
-          setopen(false);
+          handleClose();
         }
       }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Text, {
         fontSize: "14px",
@@ -88331,6 +88399,7 @@
         sx: {
           backgroundColor: "white.override",
           width: "150px",
+          margin: "12px 16px",
           "& label": {
             position: "absolute"
           }
@@ -88398,7 +88467,7 @@
         alignSelf: "start",
         fontSize: "20px",
         width: "90%",
-        margin: "10px auto 0 auto"
+        margin: "20px 12px 12px"
       }, "Billing Address"), /*#__PURE__*/React__default['default'].createElement(QuadernoTaxCalc, {
         amount: price,
         setTotal: setTotal,

package/package.json

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