npm - @blerp/design - Versions diffs - 1.2.54 → 1.2.55 - Mend

@blerp/design 1.2.54 → 1.2.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -12,7 +12,6 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var iconsMaterial = require('@mui/icons-material');
 var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
 var LockRoundedIcon = require('@mui/icons-material/LockRounded');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
 var FavoriteIcon = require('@mui/icons-material/Favorite');
 var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
@@ -20,7 +19,12 @@ var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
 var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
 var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
 var VisibilityOffRoundedIcon = require('@mui/icons-material/VisibilityOffRounded');
-var VisibilityRoundedIcon = require('@mui/icons-material/VisibilityRounded');
+require('@mui/icons-material/VisibilityRounded');
+var LanguageRoundedIcon = require('@mui/icons-material/LanguageRounded');
+require('@mui/icons-material/ThumbsUpDownRounded');
+var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
+var LayersRoundedIcon = require('@mui/icons-material/LayersRounded');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
@@ -51,7 +55,6 @@ var PersonRemoveRoundedIcon = require('@mui/icons-material/PersonRemoveRounded')
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 require('@mui/icons-material/FilterAltRounded');
 var MenuRoundedIcon = require('@mui/icons-material/MenuRounded');
-var ViewModuleRoundedIcon = require('@mui/icons-material/ViewModuleRounded');
 require('@mui/icons-material/SettingsRounded');
 var SortRoundedIcon = require('@mui/icons-material/SortRounded');
 var ChevronRightRoundedIcon = require('@mui/icons-material/ChevronRightRounded');
@@ -89,7 +92,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
 var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
 var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
 var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
@@ -97,7 +99,10 @@ var PauseRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PauseRoundedI
 var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
 var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
 var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
-var VisibilityRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityRoundedIcon);
+var LanguageRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LanguageRoundedIcon);
+var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
+var LayersRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersRoundedIcon);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
@@ -125,7 +130,6 @@ var YouTubeIcon__default = /*#__PURE__*/_interopDefaultLegacy(YouTubeIcon);
 var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
-var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
 var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
 var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
 var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
@@ -1697,9 +1701,9 @@ var UserCard$1 = function UserCard(_ref) {
   }, "created")))));
 };
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
   var user = _ref.user,
       onUsernameClick = _ref.onUsernameClick,
@@ -1767,7 +1771,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
     collapsed: collapsed,
     user: user
   })), /*#__PURE__*/React__default['default'].createElement(Text, {
-    sx: _objectSpread$7({
+    sx: _objectSpread$6({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -1784,10 +1788,6 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
 };
 var _templateObject$g, _templateObject2$a, _templateObject3$8;
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
 var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
   return props.theme.colors.grey7;
@@ -1839,7 +1839,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
   }, savedCount));
 };
 var AddedToIcons = function AddedToIcons(_ref2) {
-  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
+  var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
   var item = _ref2.item,
       hovering = _ref2.hovering,
@@ -1849,35 +1849,45 @@ var AddedToIcons = function AddedToIcons(_ref2) {
     direction: "row",
     sx: {
       transition: "0.3s",
-      opacity: hide ? "0" : hovering ? "1" : "0",
-      alignItems: "center"
+      opacity: hide ? "0" : hovering ? "0" : "1",
+      alignItems: "start",
+      justifyContent: "end",
+      flexWrap: "wrap",
+      flex: 1
+    }
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    title: "Added to Universal Extension"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LanguageRoundedIcon__default['default'], {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to Channel Points"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to Bits Library"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
     title: "Added to WalkOn"
   }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Added to Sound Emotes"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.MusicNoteRounded, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+    title: "Added to Group"
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LayersRoundedIcon__default['default'], {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))));
@@ -1899,28 +1909,18 @@ var RatingInfoItem = function RatingInfoItem(_ref3) {
       color: "notBlack.override",
       padding: "1px 2px",
       height: "auto",
-      width: "fit-content",
-      marginBottom: "12px"
+      width: "fit-content"
     }
   }, displayText));
 };
 var RatingInfo = function RatingInfo(_ref4) {
-  var bite = _ref4.bite;
+  var bite = _ref4.bite,
+      hovering = _ref4.hovering;
   var ratingText = {
     tooltipText: "",
     text: ""
   };
-  var visStyle = {
-    fontSize: "23px",
-    fontWeight: "600",
-    backgroundColor: "#585858a3",
-    border: "4px solid transparent",
-    borderColor: "#585858a3",
-    borderRadius: "4px",
-    color: "whiteOverride.main",
-    marginBottom: "12px"
-  };
   if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
     var _bite$newAudienceRati, _bite$newAudienceRati2;
@@ -1933,16 +1933,14 @@ var RatingInfo = function RatingInfo(_ref4) {
     return /*#__PURE__*/React__default['default'].createElement(Stack, {
       direction: "row",
-      alignItems: "center"
-    }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-      title: "Private"
-    }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-      sx: _objectSpread$6({}, visStyle)
-    })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-      title: "Unlisted"
-    }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-      sx: _objectSpread$6({}, visStyle)
-    })), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 3,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
       if (rating === "SAFE") {
         // nothing
         return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -1985,19 +1983,22 @@ var RatingInfo = function RatingInfo(_ref4) {
     ratingText.text = "UNRATED";
   }
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: 0
+    }
+  });
   return /*#__PURE__*/React__default['default'].createElement(Stack, {
     direction: "row",
-    alignItems: "center"
-  }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Private"
-  }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-    sx: _objectSpread$6({}, visStyle)
-  })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-    title: "Unlisted"
-  }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-    sx: _objectSpread$6({}, visStyle)
-  })), /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+    alignItems: "start",
+    sx: {
+      transition: "0.2s",
+      flex: 3,
+      flexWrap: "wrap",
+      marginTop: hovering ? "35px" : "0"
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
     tooltipText: ratingText.tooltipText,
     displayText: ratingText.text
   }));
@@ -2129,21 +2130,24 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
       minHeight: "20px"
     }
   }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+    direction: "row",
+    alignItems: "start",
+    justifyContent: "space-between",
     sx: {
       position: "absolute",
       top: "0",
       left: "0",
-      zIndex: hoveringAddTo ? "0" : "10",
-      transition: "0.3s",
-      opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
-      // display: hoveringAddTo && "none",
+      width: "100%",
+      overflow: "hidden",
+      transition: "0.2s",
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+    hovering: hovering,
     bite: bite
   }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
     item: bite,
-    hovering: hovering
+    hovering: hovering || hoveringAddTo
   })), renderAddContentButton({
     item: bite,
     hovering: hovering,
@@ -2158,7 +2162,7 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
 };
 var NewBlerp$1 = function NewBlerp(_ref7) {
-  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$discordContext, _bite$channelPointsBu, _bite$organizationalG, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
   var Waveform = _ref7.Waveform,
       bite = _ref7.bite,
@@ -2206,7 +2210,7 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
       setHoveringAddTo = _useState10[1];
   var titleRef = React.useRef(null);
-  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnContext = bite.walkOnContext) === null || _bite$walkOnContext === void 0 ? void 0 : _bite$walkOnContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
+  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0 || (bite === null || bite === void 0 ? void 0 : (_bite$organizationalG = bite.organizationalGroupEdgesContext) === null || _bite$organizationalG === void 0 ? void 0 : _bite$organizationalG.length) > 0;
   var showWarning = (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
   var renderPlayStateIcon = function renderPlayStateIcon() {

package/dist/index.esm.js CHANGED Viewed

@@ -6,10 +6,9 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
 import { ColorExtractor } from 'react-color-extractor';
 import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, MusicNoteRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
+import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
 import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
 import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
@@ -17,7 +16,12 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
-import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
+import '@mui/icons-material/VisibilityRounded';
+import LanguageRoundedIcon from '@mui/icons-material/LanguageRounded';
+import '@mui/icons-material/ThumbsUpDownRounded';
+import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
+import LayersRoundedIcon from '@mui/icons-material/LayersRounded';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -48,7 +52,6 @@ import PersonRemoveRoundedIcon from '@mui/icons-material/PersonRemoveRounded';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import '@mui/icons-material/FilterAltRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
-import ViewModuleRoundedIcon from '@mui/icons-material/ViewModuleRounded';
 import '@mui/icons-material/SettingsRounded';
 import SortRoundedIcon from '@mui/icons-material/SortRounded';
 import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
@@ -1621,9 +1624,9 @@ var UserCard$1 = function UserCard(_ref) {
   }, "created")))));
 };
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
   var user = _ref.user,
       onUsernameClick = _ref.onUsernameClick,
@@ -1691,7 +1694,7 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
     collapsed: collapsed,
     user: user
   })), /*#__PURE__*/React__default.createElement(Text, {
-    sx: _objectSpread$7({
+    sx: _objectSpread$6({
       fontWeight: "300",
       fontSize: "12px",
       color: "grey7.main",
@@ -1708,10 +1711,6 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
 };
 var _templateObject$g, _templateObject2$a, _templateObject3$8;
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var PremiumContainer = styled.div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
 var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
   return props.theme.colors.grey7;
@@ -1763,7 +1762,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
   }, savedCount));
 };
 var AddedToIcons = function AddedToIcons(_ref2) {
-  var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
+  var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
   var item = _ref2.item,
       hovering = _ref2.hovering,
@@ -1773,35 +1772,45 @@ var AddedToIcons = function AddedToIcons(_ref2) {
     direction: "row",
     sx: {
       transition: "0.3s",
-      opacity: hide ? "0" : hovering ? "1" : "0",
-      alignItems: "center"
+      opacity: hide ? "0" : hovering ? "0" : "1",
+      alignItems: "start",
+      justifyContent: "end",
+      flexWrap: "wrap",
+      flex: 1
     }
-  }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Added to Universal Extension"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(LanguageRoundedIcon, {
+    sx: {
+      fontSize: "20px",
+      filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
+    }
+  }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Added to Channel Points"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ChannelPointsIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Added to Bits Library"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TwitchBitIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
     title: "Added to WalkOn"
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(WalkonIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
-  }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Added to Sound Emotes"
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(MusicNoteRounded, {
+  }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Added to Group"
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(LayersRoundedIcon, {
     sx: {
-      fontSize: "15px",
+      fontSize: "20px",
       filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
     }
   }))));
@@ -1823,28 +1832,18 @@ var RatingInfoItem = function RatingInfoItem(_ref3) {
       color: "notBlack.override",
       padding: "1px 2px",
       height: "auto",
-      width: "fit-content",
-      marginBottom: "12px"
+      width: "fit-content"
     }
   }, displayText));
 };
 var RatingInfo = function RatingInfo(_ref4) {
-  var bite = _ref4.bite;
+  var bite = _ref4.bite,
+      hovering = _ref4.hovering;
   var ratingText = {
     tooltipText: "",
     text: ""
   };
-  var visStyle = {
-    fontSize: "23px",
-    fontWeight: "600",
-    backgroundColor: "#585858a3",
-    border: "4px solid transparent",
-    borderColor: "#585858a3",
-    borderRadius: "4px",
-    color: "whiteOverride.main",
-    marginBottom: "12px"
-  };
   if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
     var _bite$newAudienceRati, _bite$newAudienceRati2;
@@ -1857,16 +1856,14 @@ var RatingInfo = function RatingInfo(_ref4) {
     return /*#__PURE__*/React__default.createElement(Stack, {
       direction: "row",
-      alignItems: "center"
-    }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Private"
-    }, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
-      sx: _objectSpread$6({}, visStyle)
-    })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Unlisted"
-    }, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
-      sx: _objectSpread$6({}, visStyle)
-    })), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
+      alignItems: "start",
+      sx: {
+        transition: "0.2s",
+        flex: 3,
+        flexWrap: "wrap",
+        marginTop: hovering ? "35px" : "0"
+      }
+    }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
       if (rating === "SAFE") {
         // nothing
         return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
@@ -1909,19 +1906,22 @@ var RatingInfo = function RatingInfo(_ref4) {
     ratingText.text = "UNRATED";
   }
-  if (!ratingText.tooltipText) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  if (!ratingText.tooltipText) return /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    sx: {
+      flex: 0
+    }
+  });
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    alignItems: "center"
-  }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Private"
-  }, /*#__PURE__*/React__default.createElement(VisibilityOffRoundedIcon, {
-    sx: _objectSpread$6({}, visStyle)
-  })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default.createElement(Tooltip, {
-    title: "Unlisted"
-  }, /*#__PURE__*/React__default.createElement(VisibilityRoundedIcon, {
-    sx: _objectSpread$6({}, visStyle)
-  })), /*#__PURE__*/React__default.createElement(RatingInfoItem, {
+    alignItems: "start",
+    sx: {
+      transition: "0.2s",
+      flex: 3,
+      flexWrap: "wrap",
+      marginTop: hovering ? "35px" : "0"
+    }
+  }, /*#__PURE__*/React__default.createElement(RatingInfoItem, {
     tooltipText: ratingText.tooltipText,
     displayText: ratingText.text
   }));
@@ -2053,21 +2053,24 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
       minHeight: "20px"
     }
   }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    alignItems: "start",
+    justifyContent: "space-between",
     sx: {
       position: "absolute",
       top: "0",
       left: "0",
-      zIndex: hoveringAddTo ? "0" : "10",
-      transition: "0.3s",
-      opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
-      // display: hoveringAddTo && "none",
+      width: "100%",
+      overflow: "hidden",
+      transition: "0.2s",
+      pointerEvents: "none"
     }
   }, /*#__PURE__*/React__default.createElement(RatingInfo, {
+    hovering: hovering,
     bite: bite
   }), /*#__PURE__*/React__default.createElement(AddedToIcons, {
     item: bite,
-    hovering: hovering
+    hovering: hovering || hoveringAddTo
   })), renderAddContentButton({
     item: bite,
     hovering: hovering,
@@ -2082,7 +2085,7 @@ var BlerpTopRow = function BlerpTopRow(_ref6) {
 };
 var NewBlerp$1 = function NewBlerp(_ref7) {
-  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+  var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$discordContext, _bite$channelPointsBu, _bite$organizationalG, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
   var Waveform = _ref7.Waveform,
       bite = _ref7.bite,
@@ -2130,7 +2133,7 @@ var NewBlerp$1 = function NewBlerp(_ref7) {
       setHoveringAddTo = _useState10[1];
   var titleRef = useRef(null);
-  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnContext = bite.walkOnContext) === null || _bite$walkOnContext === void 0 ? void 0 : _bite$walkOnContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
+  var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0 || (bite === null || bite === void 0 ? void 0 : (_bite$organizationalG = bite.organizationalGroupEdgesContext) === null || _bite$organizationalG === void 0 ? void 0 : _bite$organizationalG.length) > 0;
   var showWarning = (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
   var renderPlayStateIcon = function renderPlayStateIcon() {

package/dist/index.umd.js CHANGED Viewed

@@ -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('@babel/runtime/helpers/defineProperty'), require('@mui/icons-material/DoNotDisturbRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/VisibilityOffRounded'), require('@mui/icons-material/VisibilityRounded'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), 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')) :
-    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', '@babel/runtime/helpers/defineProperty', '@mui/icons-material/DoNotDisturbRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/VisibilityOffRounded', '@mui/icons-material/VisibilityRounded', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', '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'], 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._defineProperty, global.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.VisibilityOffRoundedIcon, global.VisibilityRoundedIcon, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, 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));
-}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, _defineProperty, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, VisibilityOffRoundedIcon, VisibilityRoundedIcon, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon) { '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/DoNotDisturbRounded'), require('@mui/icons-material/Favorite'), require('@mui/icons-material/FavoriteBorder'), require('@mui/icons-material/PauseRounded'), require('@mui/icons-material/PlayArrowRounded'), require('@mui/icons-material/WarningRounded'), require('@mui/icons-material/VisibilityOffRounded'), require('@mui/icons-material/VisibilityRounded'), require('@mui/icons-material/LanguageRounded'), require('@mui/icons-material/ThumbsUpDownRounded'), require('@mui/icons-material/ViewModuleRounded'), require('@mui/icons-material/LayersRounded'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/regenerator'), require('@mui/icons-material/BookmarkAddOutlined'), require('@mui/icons-material/MoreHorizRounded'), require('react-palette'), require('@babel/runtime/helpers/typeof'), require('@mui/icons-material/KeyboardArrowRightRounded'), require('@mui/icons-material/KeyboardArrowDownRounded'), require('@mui/icons-material/CloseRounded'), require('@mui/icons-material/FileUploadRounded'), require('@babel/runtime/helpers/extends'), require('react-avatar-editor'), require('react-dropzone'), require('@mui/icons-material/InsertPhotoRounded'), require('@mui/material/styles'), require('@mui/material/Slide'), require('@mui/material/Fade'), 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/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')) :
+    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/DoNotDisturbRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/VisibilityOffRounded', '@mui/icons-material/VisibilityRounded', '@mui/icons-material/LanguageRounded', '@mui/icons-material/ThumbsUpDownRounded', '@mui/icons-material/ViewModuleRounded', '@mui/icons-material/LayersRounded', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/regenerator', '@mui/icons-material/BookmarkAddOutlined', '@mui/icons-material/MoreHorizRounded', 'react-palette', '@babel/runtime/helpers/typeof', '@mui/icons-material/KeyboardArrowRightRounded', '@mui/icons-material/KeyboardArrowDownRounded', '@mui/icons-material/CloseRounded', '@mui/icons-material/FileUploadRounded', '@babel/runtime/helpers/extends', 'react-avatar-editor', 'react-dropzone', '@mui/icons-material/InsertPhotoRounded', '@mui/material/styles', '@mui/material/Slide', '@mui/material/Fade', '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/SettingsRounded', '@mui/icons-material/SortRounded', '@mui/icons-material/ChevronRightRounded', '@mui/icons-material/PersonRounded', '@mui/icons-material/SearchRounded', '@mui/icons-material/BookmarkRemoveOutlined'], 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.DoNotDisturbRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, global.VisibilityOffRoundedIcon, null, global.LanguageRoundedIcon, null, global.ViewModuleRoundedIcon, global.LayersRoundedIcon, global._defineProperty, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, 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, null, global.SortRoundedIcon, global.ChevronRightRoundedIcon, global.PersonRoundedIcon, global.SearchRoundedIcon, global.BookmarkRemoveOutlinedIcon));
+}(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, DoNotDisturbRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, VisibilityOffRoundedIcon, VisibilityRounded, LanguageRoundedIcon, ThumbsUpDownRounded, ViewModuleRoundedIcon, LayersRoundedIcon, _defineProperty, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, AddRoundedIcon, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon) { 'use strict';
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,7 +34,6 @@
     var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
     var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
     var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
-    var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
     var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
     var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
     var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
@@ -42,7 +41,10 @@
     var PlayArrowRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlayArrowRoundedIcon);
     var WarningRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(WarningRoundedIcon);
     var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
-    var VisibilityRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityRoundedIcon);
+    var LanguageRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LanguageRoundedIcon);
+    var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
+    var LayersRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LayersRoundedIcon);
+    var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
     var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
     var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
     var BookmarkAddOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkAddOutlinedIcon);
@@ -70,7 +72,6 @@
     var PersonRemoveRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRemoveRoundedIcon);
     var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
     var MenuRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(MenuRoundedIcon);
-    var ViewModuleRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewModuleRoundedIcon);
     var SortRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortRoundedIcon);
     var ChevronRightRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightRoundedIcon);
     var PersonRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(PersonRoundedIcon);
@@ -1642,9 +1643,9 @@
       }, "created")))));
     };
-    function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+    function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-    function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+    function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
     var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
       var user = _ref.user,
           onUsernameClick = _ref.onUsernameClick,
@@ -1712,7 +1713,7 @@
         collapsed: collapsed,
         user: user
       })), /*#__PURE__*/React__default['default'].createElement(Text, {
-        sx: _objectSpread$7({
+        sx: _objectSpread$6({
           fontWeight: "300",
           fontSize: "12px",
           color: "grey7.main",
@@ -1729,10 +1730,6 @@
     };
     var _templateObject$g, _templateObject2$a, _templateObject3$8;
-    function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-    function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
     var PremiumContainer = styled__default['default'].div(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default['default'](["\n    background: transparent;\n    overflow: hidden;\n    min-width: 210px;\n    max-width: 260px;\n    width: 100%;\n    max-height: 322px;\n    flex: 1;\n    min-height: 272px;\n    aspect-ratio: 260 / 322;\n    gap: 10px;\n    border-radius: 18px;\n    box-sizing: border-box;\n    padding: 2px;\n    position: relative;\n    transition: 0.3s;\n"])));
     var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n    background-color: ", ";\n    background: ", ";\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    position: relative;\n    height: 100%;\n    padding: 10px;\n    border-radius: 17px;\n    box-sizing: border-box;\n"])), function (props) {
       return props.theme.colors.grey7;
@@ -1784,7 +1781,7 @@
       }, savedCount));
     };
     var AddedToIcons = function AddedToIcons(_ref2) {
-      var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
+      var _item$soundEmotesCont, _item$channelPointsCo, _item$channelPointsBu, _item$whitelistContex, _item$walkOnChannelCo, _item$organizationalG;
       var item = _ref2.item,
           hovering = _ref2.hovering,
@@ -1794,35 +1791,45 @@
         direction: "row",
         sx: {
           transition: "0.3s",
-          opacity: hide ? "0" : hovering ? "1" : "0",
-          alignItems: "center"
+          opacity: hide ? "0" : hovering ? "0" : "1",
+          alignItems: "start",
+          justifyContent: "end",
+          flexWrap: "wrap",
+          flex: 1
         }
-      }, (item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+      }, (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+        title: "Added to Universal Extension"
+      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LanguageRoundedIcon__default['default'], {
+        sx: {
+          fontSize: "20px",
+          filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
+        }
+      }))), ((item === null || item === void 0 ? void 0 : (_item$channelPointsCo = item.channelPointsContext) === null || _item$channelPointsCo === void 0 ? void 0 : _item$channelPointsCo._id) || (item === null || item === void 0 ? void 0 : (_item$channelPointsBu = item.channelPointsBucketsContext) === null || _item$channelPointsBu === void 0 ? void 0 : _item$channelPointsBu.length) > 0) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: "Added to Channel Points"
       }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
         sx: {
-          fontSize: "15px",
+          fontSize: "20px",
           filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
         }
       }))), (item === null || item === void 0 ? void 0 : (_item$whitelistContex = item.whitelistContext) === null || _item$whitelistContex === void 0 ? void 0 : _item$whitelistContex._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: "Added to Bits Library"
       }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
         sx: {
-          fontSize: "15px",
+          fontSize: "20px",
           filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
         }
-      }))), (item === null || item === void 0 ? void 0 : (_item$walkOnContext = item.walkOnContext) === null || _item$walkOnContext === void 0 ? void 0 : _item$walkOnContext._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+      }))), (item === null || item === void 0 ? void 0 : (_item$walkOnChannelCo = item.walkOnChannelContext) === null || _item$walkOnChannelCo === void 0 ? void 0 : _item$walkOnChannelCo._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
         title: "Added to WalkOn"
       }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
         sx: {
-          fontSize: "15px",
+          fontSize: "20px",
           filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
         }
-      }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont.hasAdded) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-        title: "Added to Sound Emotes"
-      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.MusicNoteRounded, {
+      }))), (item === null || item === void 0 ? void 0 : (_item$organizationalG = item.organizationalGroupEdgesContext) === null || _item$organizationalG === void 0 ? void 0 : _item$organizationalG.length) > 0 && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
+        title: "Added to Group"
+      }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(LayersRoundedIcon__default['default'], {
         sx: {
-          fontSize: "15px",
+          fontSize: "20px",
           filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
         }
       }))));
@@ -1844,28 +1851,18 @@
           color: "notBlack.override",
           padding: "1px 2px",
           height: "auto",
-          width: "fit-content",
-          marginBottom: "12px"
+          width: "fit-content"
         }
       }, displayText));
     };
     var RatingInfo = function RatingInfo(_ref4) {
-      var bite = _ref4.bite;
+      var bite = _ref4.bite,
+          hovering = _ref4.hovering;
       var ratingText = {
         tooltipText: "",
         text: ""
       };
-      var visStyle = {
-        fontSize: "23px",
-        fontWeight: "600",
-        backgroundColor: "#585858a3",
-        border: "4px solid transparent",
-        borderColor: "#585858a3",
-        borderRadius: "4px",
-        color: "whiteOverride.main",
-        marginBottom: "12px"
-      };
       if (bite !== null && bite !== void 0 && bite.newAudienceRating) {
         var _bite$newAudienceRati, _bite$newAudienceRati2;
@@ -1878,16 +1875,14 @@
         return /*#__PURE__*/React__default['default'].createElement(Stack, {
           direction: "row",
-          alignItems: "center"
-        }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-          title: "Private"
-        }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-          sx: _objectSpread$6({}, visStyle)
-        })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-          title: "Unlisted"
-        }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-          sx: _objectSpread$6({}, visStyle)
-        })), bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
+          alignItems: "start",
+          sx: {
+            transition: "0.2s",
+            flex: 3,
+            flexWrap: "wrap",
+            marginTop: hovering ? "35px" : "0"
+          }
+        }, bite === null || bite === void 0 ? void 0 : (_bite$newAudienceRati2 = bite.newAudienceRating) === null || _bite$newAudienceRati2 === void 0 ? void 0 : _bite$newAudienceRati2.map(function (rating) {
           if (rating === "SAFE") {
             // nothing
             return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
@@ -1930,19 +1925,22 @@
         ratingText.text = "UNRATED";
       }
-      if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
+      if (!ratingText.tooltipText) return /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        sx: {
+          flex: 0
+        }
+      });
       return /*#__PURE__*/React__default['default'].createElement(Stack, {
         direction: "row",
-        alignItems: "center"
-      }, (bite === null || bite === void 0 ? void 0 : bite.visibility) === "PRIVATE" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-        title: "Private"
-      }, /*#__PURE__*/React__default['default'].createElement(VisibilityOffRoundedIcon__default['default'], {
-        sx: _objectSpread$6({}, visStyle)
-      })), (bite === null || bite === void 0 ? void 0 : bite.visibility) === "UNLISTED" && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
-        title: "Unlisted"
-      }, /*#__PURE__*/React__default['default'].createElement(VisibilityRoundedIcon__default['default'], {
-        sx: _objectSpread$6({}, visStyle)
-      })), /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
+        alignItems: "start",
+        sx: {
+          transition: "0.2s",
+          flex: 3,
+          flexWrap: "wrap",
+          marginTop: hovering ? "35px" : "0"
+        }
+      }, /*#__PURE__*/React__default['default'].createElement(RatingInfoItem, {
         tooltipText: ratingText.tooltipText,
         displayText: ratingText.text
       }));
@@ -2074,21 +2072,24 @@
           minHeight: "20px"
         }
       }, /*#__PURE__*/React__default['default'].createElement(Stack, {
+        direction: "row",
+        alignItems: "start",
+        justifyContent: "space-between",
         sx: {
           position: "absolute",
           top: "0",
           left: "0",
-          zIndex: hoveringAddTo ? "0" : "10",
-          transition: "0.3s",
-          opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
-          // display: hoveringAddTo && "none",
+          width: "100%",
+          overflow: "hidden",
+          transition: "0.2s",
+          pointerEvents: "none"
         }
       }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
+        hovering: hovering,
         bite: bite
       }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
         item: bite,
-        hovering: hovering
+        hovering: hovering || hoveringAddTo
       })), renderAddContentButton({
         item: bite,
         hovering: hovering,
@@ -2103,7 +2104,7 @@
     };
     var NewBlerp$1 = function NewBlerp(_ref7) {
-      var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
+      var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnChannelCo, _bite$soundEmotesCont, _bite$discordContext, _bite$channelPointsBu, _bite$organizationalG, _bite$blacklistContex, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
       var Waveform = _ref7.Waveform,
           bite = _ref7.bite,
@@ -2151,7 +2152,7 @@
           setHoveringAddTo = _useState10[1];
       var titleRef = React.useRef(null);
-      var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnContext = bite.walkOnContext) === null || _bite$walkOnContext === void 0 ? void 0 : _bite$walkOnContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
+      var addedToPlace = (bite === null || bite === void 0 ? void 0 : (_bite$whitelistContex = bite.whitelistContext) === null || _bite$whitelistContex === void 0 ? void 0 : _bite$whitelistContex._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsCo = bite.channelPointsContext) === null || _bite$channelPointsCo === void 0 ? void 0 : _bite$channelPointsCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$walkOnChannelCo = bite.walkOnChannelContext) === null || _bite$walkOnChannelCo === void 0 ? void 0 : _bite$walkOnChannelCo._id) || (bite === null || bite === void 0 ? void 0 : (_bite$soundEmotesCont = bite.soundEmotesContext) === null || _bite$soundEmotesCont === void 0 ? void 0 : _bite$soundEmotesCont.hasAdded) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id) || (bite === null || bite === void 0 ? void 0 : (_bite$channelPointsBu = bite.channelPointsBucketsContext) === null || _bite$channelPointsBu === void 0 ? void 0 : _bite$channelPointsBu.length) > 0 || (bite === null || bite === void 0 ? void 0 : (_bite$organizationalG = bite.organizationalGroupEdgesContext) === null || _bite$organizationalG === void 0 ? void 0 : _bite$organizationalG.length) > 0;
       var showWarning = (bite === null || bite === void 0 ? void 0 : (_bite$blacklistContex = bite.blacklistContext) === null || _bite$blacklistContex === void 0 ? void 0 : _bite$blacklistContex._id) || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "SUPER_URGENT" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "REVIEWED_BLACKLISTED" || (bite === null || bite === void 0 ? void 0 : bite.reportedContentStatus) === "APPEALING";
       var renderPlayStateIcon = function renderPlayStateIcon() {

package/package.json CHANGED Viewed

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