@blerp/design 1.4.6 → 1.4.8

package/dist/cjs/UserPage/UserProfileHeader.js

@@ -2,304 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var React = require('react');
-var ScreenSizeHook = require('../ScreenSizeHook.js');
-var helpers = require('../helpers.js');
-var Theme = require('../Theme.js');
-var Stack = require('../neo-components/Stack.js');
-var IconButton = require('../neo-components/IconButton.js');
-var Box = require('../neo-components/Box.js');
-var Text = require('../neo-components/Text.js');
-var Misc = require('../neo-components/Misc.js');
-var Button = require('../neo-components/Button.js');
-var Icons = require('../Icons/Icons.js');
+// TODO: If this component is needed, import dependencies directly (not from ../index)
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const _excluded = ["path", "sx", "size"];
-
-function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(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(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-const Icon = _ref => {
-  let {
-    path,
-    sx,
-    size = "24px"
-  } = _ref,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  return /*#__PURE__*/React__default["default"].createElement(Box.Box, _extends__default["default"]({
-    component: "svg",
-    viewBox: "0 0 24 24",
-    width: size,
-    height: size,
-    fill: "currentColor",
-    sx: _objectSpread({
-      display: 'inline-block',
-      flexShrink: 0
-    }, sx)
-  }, props), /*#__PURE__*/React__default["default"].createElement("path", {
-    d: path
-  }));
-};
-
-const paths = {
-  add: "M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1z",
-  edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
-  personAdd: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
-  personRemove: "M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
-  // Simplified
-  facebook: "M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2m13 2h-2.5A3.5 3.5 0 0 0 12 8.5V11h-2v3h2v7h3v-7h3v-3h-3V9a1 1 0 0 1 1-1h2V5z",
-  twitter: "M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.48.75 2.78 1.89 3.54-.7 0-1.35-.2-1.92-.53v.05c0 2.03 1.44 3.73 3.35 4.12-.35.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.54 1.66 2.08 2.87 3.91 2.91-1.42 1.12-3.23 1.78-5.2 1.78-.34 0-.67-.02-1-.06C3.04 20.1 5.31 20.8 7.72 20.8c9.27 0 14.34-7.68 14.34-14.34 0-.22 0-.44-.01-.66.98-.7 1.84-1.59 2.51-2.6z",
-  instagram: "M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z",
-  youtube: "M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z",
-  pinterest: "M12.2 2C7.12 2 3 6.12 3 11.2c0 3.9 2.42 7.23 5.87 8.58-.08-.72-.15-1.83.03-2.62.16-.71 1.05-4.44 1.05-4.44s-.27-.54-.27-1.33c0-1.25.72-2.18 1.63-2.18.77 0 1.14.58 1.14 1.27 0 .77-.49 1.93-.74 3-.21.87.44 1.58 1.29 1.58 1.55 0 2.74-1.64 2.74-4 0-2.09-1.5-3.55-3.64-3.55-2.48 0-3.93 1.86-3.93 3.77 0 .75.29 1.55.65 1.99.07.09.08.17.06.25-.07.28-.22.88-.25.99-.04.16-.14.2-.32.11-1.19-.55-1.93-2.3-1.93-3.7 0-3.02 2.2-5.78 6.32-5.78 3.32 0 5.89 2.36 5.89 5.52 0 3.3-2.08 5.96-4.97 5.96-.97 0-1.88-.5-2.2-.1l-.59 2.27c-.22.82-.8 1.85-1.19 2.48 1.1.34 2.26.52 3.47.52 5.08 0 9.2-4.12 9.2-9.2C21.4 6.12 17.28 2 12.2 2z"
-};
-
-const UserProfileHeader = _ref2 => {
-  var _userData$profileImag3, _userData$profileImag4, _userData$headerImage, _userData$headerImage2, _userData$headerImage3, _userData$headerImage4, _userData$profileImag5, _userData$profileImag6, _userData$socialLinks2;
-
-  let {
-    followUser,
-    isOwner,
-    userData,
-    openEdit
-  } = _ref2;
-  const theme = Theme.useBlerpTheme();
-  const [profileColors, setProfileColors] = React.useState(null);
-  const size = ScreenSizeHook.useWindowSize();
-  React.useEffect(() => {
-    var _userData$profileImag, _userData$profileImag2;
-
-    if (userData !== null && userData !== void 0 && (_userData$profileImag = userData.profileImage) !== null && _userData$profileImag !== void 0 && (_userData$profileImag2 = _userData$profileImag.original) !== null && _userData$profileImag2 !== void 0 && _userData$profileImag2.url) {
-      helpers.extractDominantColor(userData.profileImage.original.url, setProfileColors);
-    }
-  }, [userData === null || userData === void 0 ? void 0 : (_userData$profileImag3 = userData.profileImage) === null || _userData$profileImag3 === void 0 ? void 0 : (_userData$profileImag4 = _userData$profileImag3.original) === null || _userData$profileImag4 === void 0 ? void 0 : _userData$profileImag4.url]);
-
-  const renderSocialLinks = () => {
-    var _userData$socialLinks;
-
-    return userData === null || userData === void 0 ? void 0 : (_userData$socialLinks = userData.socialLinks) === null || _userData$socialLinks === void 0 ? void 0 : _userData$socialLinks.map((socialItem, index) => {
-      let icon;
-      const commonSx = {
-        color: "notBlack.main",
-        cursor: "pointer",
-        ":hover": {
-          color: "starling.main"
-        }
-      };
-
-      switch (socialItem.name) {
-        case "twitch":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icons.TwitchIcon, {
-            sx: commonSx
-          });
-          break;
-
-        case "twitter":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
-            path: paths.twitter,
-            sx: commonSx
-          });
-          break;
-
-        case "youtube":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
-            path: paths.youtube,
-            sx: commonSx
-          });
-          break;
-
-        case "instagram":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
-            path: paths.instagram,
-            sx: commonSx
-          });
-          break;
-
-        case "pinterest":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
-            path: paths.pinterest,
-            sx: commonSx
-          });
-          break;
-
-        case "facebook":
-          icon = /*#__PURE__*/React__default["default"].createElement(Icon, {
-            path: paths.facebook,
-            sx: commonSx
-          });
-          break;
-      }
-
-      return /*#__PURE__*/React__default["default"].createElement("a", {
-        key: socialItem.name + index,
-        target: "_blank",
-        href: socialItem.link,
-        style: {
-          margin: "5px",
-          height: "65%"
-        },
-        rel: "nofollow noreferrer"
-      }, icon);
-    });
-  };
-
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    width: "100%",
-    sx: {
-      height: "250px",
-      justifyContent: size.width <= 600 ? "space-around" : "center",
-      alignItems: "center",
-      background: userData !== null && userData !== void 0 && (_userData$headerImage = userData.headerImage) !== null && _userData$headerImage !== void 0 && (_userData$headerImage2 = _userData$headerImage.original) !== null && _userData$headerImage2 !== void 0 && _userData$headerImage2.url ? "linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(".concat(userData === null || userData === void 0 ? void 0 : (_userData$headerImage3 = userData.headerImage) === null || _userData$headerImage3 === void 0 ? void 0 : (_userData$headerImage4 = _userData$headerImage3.original) === null || _userData$headerImage4 === void 0 ? void 0 : _userData$headerImage4.url, ")") : "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
-      backgroundRepeat: "no-repeat",
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      position: "relative",
-      overflow: "hidden"
-    }
-  }, isOwner && /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
-    sx: {
-      position: "absolute",
-      top: "10px",
-      right: "10px",
-      cursor: "pointer",
-      color: "white.main",
-      ":hover": {
-        color: "notBlack.main",
-        backgroundColor: "white.main"
-      }
-    },
-    onClick: () => openEdit()
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    path: paths.edit,
-    size: "16px"
-  })), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    direction: "row",
-    width: "80%",
-    maxWidth: "1300px",
-    flexWrap: "wrap",
-    margin: "0 auto",
-    justifyContent: "space-between",
-    alignItems: "flex-end",
-    height: "50%"
-  }, /*#__PURE__*/React__default["default"].createElement(Box.Box, {
-    sx: {
-      background: "linear-gradient(135deg, ".concat(profileColors ? profileColors[0] : theme.colors.ibisRed, ", ").concat(profileColors ? profileColors[1] : theme.colors.starling, ")"),
-      boxShadow: "5px 5px 15px #0000009c"
-    },
-    borderRadius: "8px",
-    width: "400px",
-    height: "100%"
-  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    direction: "row",
-    height: "100%",
-    alignItems: "center",
-    position: "relative"
-  }, /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
-    sx: {
-      position: "absolute",
-      padding: "5px",
-      top: "5px",
-      right: "5px",
-      cursor: "pointer",
-      color: "white.override",
-      fontSize: "12px",
-      ":hover": {
-        color: "notBlack.main",
-        backgroundColor: "white.main"
-      }
-    },
-    onClick: () => {
-      isOwner ? openEdit() : followUser({
-        variables: {
-          record: {
-            userIdToFollow: userData._id
-          }
-        }
-      });
-    }
-  }, isOwner ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    path: paths.edit,
-    size: "20px"
-  }) : userData !== null && userData !== void 0 && userData.loggedInIsFollower ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    path: paths.personRemove,
-    size: "20px"
-  }) : /*#__PURE__*/React__default["default"].createElement(Icon, {
-    path: paths.personAdd,
-    size: "20px"
-  })), /*#__PURE__*/React__default["default"].createElement("img", {
-    style: {
-      borderRadius: "50%",
-      objectFit: "cover",
-      width: "90px",
-      height: "90px",
-      margin: "0 20px"
-    },
-    alt: "profile img",
-    src: userData === null || userData === void 0 ? void 0 : (_userData$profileImag5 = userData.profileImage) === null || _userData$profileImag5 === void 0 ? void 0 : (_userData$profileImag6 = _userData$profileImag5.original) === null || _userData$profileImag6 === void 0 ? void 0 : _userData$profileImag6.url
-  }), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    marginLeft: "20px"
-  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    direction: "row"
-  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
-    noWrap: true,
-    maxWidth: "200px",
-    color: "white.override",
-    lineHeight: "51px",
-    fontSize: size.width <= 600 ? "30px" : "47px"
-  }, userData === null || userData === void 0 ? void 0 : userData.username)), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    direction: "row",
-    divider: /*#__PURE__*/React__default["default"].createElement(Misc.Divider, {
-      orientation: "vertical",
-      flexItem: true,
-      sx: {
-        borderColor: "white.override",
-        margin: "5px"
-      }
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
-    color: "white.override",
-    fontSize: "16px"
-  }, userData === null || userData === void 0 ? void 0 : userData.followerCount, " Followers"), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
-    color: "white.override",
-    fontSize: "16px"
-  }, userData === null || userData === void 0 ? void 0 : userData.followingCount, " Following"))))), /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
-    direction: "row",
-    backgroundColor: "grey2.main",
-    borderRadius: "8px",
-    height: "30%",
-    alignItems: "center",
-    marginTop: "20px",
-    justifyContent: "space-around"
-  }, isOwner ? (userData === null || userData === void 0 ? void 0 : (_userData$socialLinks2 = userData.socialLinks) === null || _userData$socialLinks2 === void 0 ? void 0 : _userData$socialLinks2.length) === 0 ? /*#__PURE__*/React__default["default"].createElement(Button.Button, {
-    variant: "text",
-    onClick: () => openEdit()
-  }, "+ New Social") : /*#__PURE__*/React__default["default"].createElement(IconButton.IconButton, {
-    sx: {
-      cursor: "pointer",
-      color: "notBlack.main",
-      padding: "5px",
-      backgroundColor: "grey2.main",
-      ":hover": {
-        backgroundColor: "white.main"
-      }
-    },
-    onClick: () => openEdit()
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    path: paths.add,
-    size: "16px"
-  })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null), renderSocialLinks()))));
+const UserProfileHeader = () => {
+  return null;
 };
 
 var UserProfileHeader$1 = UserProfileHeader;

package/dist/cjs/UsernameWithPopout.js

@@ -78,7 +78,7 @@ const UsernameWithPopout = _ref => {
     onCreatedClick: onCreatedClick,
     collapsed: collapsed,
     user: user
-  })), /*#__PURE__*/React__default["default"].createElement(Text.Typography, {
+  })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
     sx: _objectSpread({
       fontWeight: "300",
       fontSize: "12px",

package/dist/cjs/colors.js

@@ -366,11 +366,10 @@ const darkPalette = {
     main: colors.popnYellow
   }
 };
-var colors$1 = colors;
 
 exports.darkColors = darkColors;
 exports.darkPalette = darkPalette;
-exports["default"] = colors$1;
+exports["default"] = colors;
 exports.lightColors = lightColors;
 exports.lightPalette = lightPalette;
 exports.overrideColors = overrideColors;

package/dist/esm/Blerp/BlerpImageRow.js

@@ -3,10 +3,10 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useState } from 'react';
 import { useBlerpTheme } from '../Theme.js';
+import { PlayOutlineIcon, OpenLockIcon, BookmarkAddRounded } from '../Icons/Icons.js';
 import { Stack } from '../neo-components/Stack.js';
 import { Box } from '../neo-components/Box.js';
-import { Typography } from '../neo-components/Text.js';
-import { PlayOutlineIcon, OpenLockIcon, BookmarkAddRounded } from '../Icons/Icons.js';
+import { Text } from '../neo-components/Text.js';
 import { Tooltip } from '../neo-components/Misc.js';
 
 const _excluded = ["path", "sx", "size"];
@@ -105,7 +105,7 @@ const BlerpImageRow = _ref2 => {
           display: "none"
         }
       }
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React.createElement(Text, {
       sx: {
         display: "none",
         fontWeight: "regular",

package/dist/esm/Blerp/BlerpTitleRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Stack } from '../neo-components/Stack.js';
 import { Box } from '../neo-components/Box.js';
-import { Typography } from '../neo-components/Text.js';
+import { Text } from '../neo-components/Text.js';
 
 const BlerpTitleRow = _ref => {
   let {
@@ -41,7 +41,7 @@ const BlerpTitleRow = _ref => {
         textOverflow: "ellipsis",
         overflow: "hidden"
       }
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React.createElement(Text, {
       textAlign: "center",
       fontSize: sizeParams.fontSize,
       color: isPremium && !isLocked ? "white.override" : "white.override",
@@ -86,7 +86,7 @@ const BlerpTitleRow = _ref => {
     style: {
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
     color: isPremium ? "white.override" : "white.override",
@@ -112,7 +112,7 @@ const BlerpTitleRow = _ref => {
       textOverflow: "ellipsis",
       overflow: "hidden"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     textAlign: "center",
     fontSize: sizeParams.fontSize,
     color: isPremium ? "white.override" : "white.override",

package/dist/esm/Blerp/BlerpTopRow.js

@@ -1,15 +1,26 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React from 'react';
-import { reactionIconUrls } from '../Blerp.js';
 import { UnsafeIcon, BookmarkAddRounded, DiamondIcon, TwitchBitIcon, ChannelPointsIcon } from '../Icons/Icons.js';
 import { Stack } from '../neo-components/Stack.js';
-import { Typography } from '../neo-components/Text.js';
+import { Text } from '../neo-components/Text.js';
 import { Tooltip } from '../neo-components/Misc.js';
 import { IconButton } from '../neo-components/IconButton.js';
 
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const reactionIconUrls = {
+  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
+  MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg",
+  NSFW: "https://cdn.blerp.com/blerp_products/Icons/NSFW%403x.svg",
+  SAD: "https://cdn.blerp.com/blerp_products/Icons/Sad.svg",
+  SCARY: "https://cdn.blerp.com/blerp_products/Icons/Scary%403x.svg",
+  ANGRY: "https://cdn.blerp.com/blerp_products/Icons/Anger%403x.svg",
+  HAPPY: "https://cdn.blerp.com/blerp_products/Icons/Happy%403x.svg",
+  TROLL: "https://cdn.blerp.com/blerp_products/Icons/Troll%403x.svg",
+  SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
+  LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
+}; // Inline SVG Icons
 
 const IconLock = _ref => {
   let {
@@ -124,7 +135,7 @@ const BlerpTopRow = _ref5 => {
     alignItems: "center",
     height: bite.visibility !== "PRIVATE" || isOwner ? "30px" : "30px",
     position: sizeParams.buttonSize === "small" && "absolute"
-  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+  }, (bite.visibility !== "PRIVATE" || isOwner) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
     fontSize: "12px",
     color: isPremium && !isLocked ? "white.main" : "notBlack.main",
     sx: {
@@ -132,7 +143,7 @@ const BlerpTopRow = _ref5 => {
       top: "30px",
       left: "10px"
     }
-  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React.createElement(Typography, {
+  }, bite === null || bite === void 0 ? void 0 : bite.audienceRating), (bite === null || bite === void 0 ? void 0 : bite.audioDuration) && /*#__PURE__*/React.createElement(Text, {
     fontSize: "8px",
     color: isPremium ? "waxwing.main" : "grey5.main",
     sx: {
@@ -208,7 +219,7 @@ const BlerpTopRow = _ref5 => {
     }
   }, /*#__PURE__*/React.createElement(BookmarkAddRounded, {
     fontSize: "small"
-  })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Typography, {
+  })), !!(sizeParams.buttonSize === "small" && !(bite !== null && bite !== void 0 && (_bite$topReactions = bite.topReactions) !== null && _bite$topReactions !== void 0 && _bite$topReactions.length) || sizeParams.buttonSize !== "small") && /*#__PURE__*/React.createElement(Text, {
     color: "notBlack.main",
     fontWeight: "light",
     fontSize: "12px",

package/dist/esm/Blerp.js

@@ -8,18 +8,6 @@ import { useBlerpTheme } from './Theme.js';
 import { Box } from './neo-components/Box.js';
 import { Stack } from './neo-components/Stack.js';
 
-const reactionIconUrls = {
-  FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
-  MUSIC: "https://cdn.blerp.com/blerp_products/Icons/Music%403x.svg",
-  NSFW: "https://cdn.blerp.com/blerp_products/Icons/NSFW%403x.svg",
-  SAD: "https://cdn.blerp.com/blerp_products/Icons/Sad.svg",
-  SCARY: "https://cdn.blerp.com/blerp_products/Icons/Scary%403x.svg",
-  ANGRY: "https://cdn.blerp.com/blerp_products/Icons/Anger%403x.svg",
-  HAPPY: "https://cdn.blerp.com/blerp_products/Icons/Happy%403x.svg",
-  TROLL: "https://cdn.blerp.com/blerp_products/Icons/Troll%403x.svg",
-  SHOCKED: "https://cdn.blerp.com/blerp_products/Icons/Shock.svg",
-  LOVE: "https://cdn.blerp.com/blerp_products/Icons/Heart%403x.svg"
-};
 const Blerp = _ref => {
   let {
     bite,
@@ -220,4 +208,4 @@ const Blerp = _ref => {
   })));
 };
 
-export { Blerp, Blerp as default, reactionIconUrls };
+export { Blerp, Blerp as default };

package/dist/esm/BlerpListViewPremium.js

@@ -8,7 +8,7 @@ import { useCustomPalette } from './helpers.js';
 import { useBlerpTheme } from './Theme.js';
 import { Box } from './neo-components/Box.js';
 import { Stack } from './neo-components/Stack.js';
-import { Typography } from './neo-components/Text.js';
+import { Text } from './neo-components/Text.js';
 import { Tooltip } from './neo-components/Misc.js';
 import { IconButton } from './neo-components/IconButton.js';
 
@@ -33,7 +33,7 @@ const Icon = _ref => {
     height: size,
     fill: "currentColor",
     sx: _objectSpread({
-      display: 'inline-block',
+      display: "inline-block",
       flexShrink: 0
     }, sx)
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -232,7 +232,7 @@ const BlerpListViewPremium = _ref2 => {
     sx: {
       width: "80%"
     }
-  }, isLinkTitle ? /*#__PURE__*/React.createElement(Typography, {
+  }, isLinkTitle ? /*#__PURE__*/React.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -256,7 +256,7 @@ const BlerpListViewPremium = _ref2 => {
       textDecoration: "none",
       color: "white"
     }
-  }, bite.title)) : /*#__PURE__*/React.createElement(Typography, {
+  }, bite.title)) : /*#__PURE__*/React.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -274,7 +274,7 @@ const BlerpListViewPremium = _ref2 => {
         handleClickTitle();
       }
     }
-  }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Typography, {
+  }, bite.title), biteSubtitle && /*#__PURE__*/React.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.smallFontSize,
     noWrap: true,
@@ -364,7 +364,7 @@ const BlerpListViewPremium = _ref2 => {
       marginRight: "4px",
       color: "white.override"
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Text, {
     sx: {
       marginRight: "4px",
       color: "white.override",

package/dist/esm/CollectionCard.js

@@ -4,8 +4,7 @@ import { useCustomPalette } from './helpers.js';
 import { Box } from './neo-components/Box.js';
 import { Stack } from './neo-components/Stack.js';
 import { Tooltip } from './neo-components/Misc.js';
-import { Typography } from './neo-components/Text.js';
-import { TwitchBitIcon } from './Icons/Icons.js';
+import { Text } from './neo-components/Text.js';
 import { IconButton } from './neo-components/IconButton.js';
 
 const AccountCircleIcon = _ref => {
@@ -361,7 +360,7 @@ const CollectionCard = _ref6 => {
       margin: "5px 0",
       maxWidth: "92%"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
@@ -396,19 +395,7 @@ const CollectionCard = _ref6 => {
       boxSizing: "border-box",
       alignItems: "center"
     }
-  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.edgeType) === "NewTwitchGroupEdge" && /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Featured on Twitch Bits"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    sx: {
-      alignItems: "center"
-    }
-  }, /*#__PURE__*/React.createElement(TwitchBitIcon, {
-    sx: {
-      color: "white.override",
-      zIndex: "1",
-      fontSize: "18px"
-    }
-  }))), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
+  }, (collection === null || collection === void 0 ? void 0 : collection.edgeType) !== "NewTwitchGroupEdge" && renderPrimaryActionButton(), (collection === null || collection === void 0 ? void 0 : collection.visibility) === "PRIVATE" && isOwner && /*#__PURE__*/React.createElement(Tooltip, {
     title: "Private"
   }, /*#__PURE__*/React.createElement(BookmarkIconIcon, {
     sx: {
@@ -439,7 +426,7 @@ const CollectionCard = _ref6 => {
       color: "white",
       textDecoration: "none"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",
@@ -449,7 +436,7 @@ const CollectionCard = _ref6 => {
         textDecoration: "underline"
       }
     }
-  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Typography, {
+  }, collection === null || collection === void 0 ? void 0 : collection.title)) : /*#__PURE__*/React.createElement(Text, {
     fontSize: fontSize ? fontSize : "22px",
     color: "white.override",
     textAlign: "center",

package/dist/esm/CollectionListViewPremium.js

@@ -2,13 +2,13 @@ import _extends from '@babel/runtime/helpers/extends';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useState } from 'react';
+import { DiamondIcon } from './Icons/Icons.js';
 import { useWindowSize } from './ScreenSizeHook.js';
 import { useCustomPalette } from './helpers.js';
 import { useBlerpTheme } from './Theme.js';
 import { Stack } from './neo-components/Stack.js';
 import { Box } from './neo-components/Box.js';
-import { Typography } from './neo-components/Text.js';
-import { DiamondIcon } from './Icons/Icons.js';
+import { Text } from './neo-components/Text.js';
 import { IconButton } from './neo-components/IconButton.js';
 
 const _excluded = ["path", "sx", "size"];
@@ -308,7 +308,7 @@ const CollectionListViewPremium = _ref2 => {
       position: "relative",
       left: "12px"
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -327,7 +327,7 @@ const CollectionListViewPremium = _ref2 => {
         handleClickTitle();
       }
     }
-  }, collection.title)) : /*#__PURE__*/React.createElement(Typography, {
+  }, collection.title)) : /*#__PURE__*/React.createElement(Text, {
     textAlign: "left",
     fontSize: sizeParams.fontSize,
     noWrap: true,
@@ -376,7 +376,7 @@ const CollectionListViewPremium = _ref2 => {
       color: "white.override",
       height: "18px"
     }
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }), /*#__PURE__*/React.createElement(Text, {
     sx: {
       zIndex: "2",
       color: "white.override",