@blerp/design 1.2.42 → 1.2.44

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
  1. package/dist/index.cjs.js +70 -32
  2. package/dist/index.esm.js +71 -33
  3. package/dist/index.umd.js +70 -32
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -1583,10 +1583,10 @@ var UserCard$1 = function UserCard(_ref) {
1583
1583
  backgroundColor: "grey4.main",
1584
1584
  minWidth: "280px",
1585
1585
  maxWidth: "320px",
1586
- height: collapsed ? "69px" : "121px",
1586
+ height: collapsed ? "auto" : "121px",
1587
1587
  borderRadius: "12px",
1588
1588
  alignItems: "center",
1589
- padding: "16px",
1589
+ padding: "10px",
1590
1590
  boxSizing: "border-box",
1591
1591
  justifyContent: "space-around",
1592
1592
  border: "1px solid transparent",
@@ -1629,13 +1629,13 @@ var UserCard$1 = function UserCard(_ref) {
1629
1629
  })), /*#__PURE__*/React__default['default'].createElement(Stack, {
1630
1630
  sx: {
1631
1631
  flex: 1,
1632
- marginLeft: "22px"
1632
+ marginLeft: "20px"
1633
1633
  }
1634
1634
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1635
1635
  sx: {
1636
1636
  fontSize: "18px",
1637
- fontWeight: "400",
1638
- maxWidth: "150px",
1637
+ fontWeight: "300",
1638
+ maxWidth: "180px",
1639
1639
  whiteSpace: "nowrap",
1640
1640
  textOverflow: "ellipsis",
1641
1641
  marginBottom: !collapsed && "10px",
@@ -1788,8 +1788,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
1788
1788
 
1789
1789
  var _templateObject$g, _templateObject2$a, _templateObject3$8;
1790
1790
  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"])));
1791
- var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n background-color: ", ";\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) {
1791
+ 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) {
1792
1792
  return props.theme.colors.grey7;
1793
+ }, function (props) {
1794
+ return props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233";
1793
1795
  });
1794
1796
  var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
1795
1797
  return props.hover && "transform: translateX(calc(180px - 100%));";
@@ -1808,7 +1810,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1808
1810
  onClick: onClick
1809
1811
  }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
1810
1812
  sx: {
1811
- fontSize: "16px",
1813
+ fontSize: "17px",
1812
1814
  marginRight: "6px",
1813
1815
  transition: "0.3s",
1814
1816
  cursor: "pointer",
@@ -1818,7 +1820,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1818
1820
  }
1819
1821
  }) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
1820
1822
  sx: {
1821
- fontSize: "16px",
1823
+ fontSize: "17px",
1822
1824
  marginRight: "6px",
1823
1825
  transition: "0.3s",
1824
1826
  cursor: "pointer",
@@ -1834,7 +1836,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1834
1836
  }, savedCount));
1835
1837
  };
1836
1838
  var AddedToIcons = function AddedToIcons(_ref2) {
1837
- var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
1839
+ var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
1838
1840
 
1839
1841
  var item = _ref2.item,
1840
1842
  hovering = _ref2.hovering,
@@ -1846,19 +1848,35 @@ var AddedToIcons = function AddedToIcons(_ref2) {
1846
1848
  transition: "0.3s",
1847
1849
  opacity: hide ? "0" : hovering ? "1" : "0"
1848
1850
  }
1849
- }, (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(ChannelPointsIcon, {
1851
+ }, (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, {
1852
+ title: "Added to Channel Points"
1853
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
1850
1854
  sx: {
1851
- fontSize: "15px"
1855
+ fontSize: "15px",
1856
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1852
1857
  }
1853
- }), (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(TwitchBitIcon, {
1858
+ }))), (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, {
1859
+ title: "Added to Bits Library"
1860
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
1854
1861
  sx: {
1855
- fontSize: "15px"
1862
+ fontSize: "15px",
1863
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1856
1864
  }
1857
- }), (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(WalkonIcon, {
1865
+ }))), (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, {
1866
+ title: "Added to WalkOn"
1867
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
1858
1868
  sx: {
1859
- fontSize: "15px"
1869
+ fontSize: "15px",
1870
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1860
1871
  }
1861
- }));
1872
+ }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1873
+ title: "Added to Sound Emotes"
1874
+ }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.MusicNoteRounded, {
1875
+ sx: {
1876
+ fontSize: "15px",
1877
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1878
+ }
1879
+ })));
1862
1880
  };
1863
1881
 
1864
1882
  var RatingInfo = function RatingInfo(_ref3) {
@@ -1886,6 +1904,8 @@ var RatingInfo = function RatingInfo(_ref3) {
1886
1904
  fontWeight: "600",
1887
1905
  backgroundColor: "white.override",
1888
1906
  borderRadius: "2px",
1907
+ border: "4px solid transparent",
1908
+ borderColor: "#000000c7",
1889
1909
  color: "notBlack.override",
1890
1910
  padding: "1px 2px",
1891
1911
  height: "14px",
@@ -1903,6 +1923,8 @@ var RatingInfo = function RatingInfo(_ref3) {
1903
1923
  fontWeight: "600",
1904
1924
  backgroundColor: "white.override",
1905
1925
  borderRadius: "2px",
1926
+ border: "4px solid transparent",
1927
+ borderColor: "#000000a7",
1906
1928
  color: "notBlack.override",
1907
1929
  padding: "1px 2px",
1908
1930
  height: "14px",
@@ -2046,6 +2068,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
2046
2068
  position: "absolute",
2047
2069
  top: "0",
2048
2070
  left: "0",
2071
+ zIndex: hoveringAddTo ? "0" : "10",
2049
2072
  transition: "0.3s",
2050
2073
  opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
2051
2074
  // display: hoveringAddTo && "none",
@@ -2070,7 +2093,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
2070
2093
  };
2071
2094
 
2072
2095
  var NewBlerp$1 = function NewBlerp(_ref6) {
2073
- var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _titleRef$current, _titleRef$current$get;
2096
+ var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
2074
2097
 
2075
2098
  var Waveform = _ref6.Waveform,
2076
2099
  bite = _ref6.bite,
@@ -2104,13 +2127,18 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2104
2127
 
2105
2128
  var _useState5 = React.useState(false),
2106
2129
  _useState6 = _slicedToArray__default['default'](_useState5, 2),
2107
- hovering = _useState6[0],
2108
- setHovering = _useState6[1];
2130
+ previewed = _useState6[0],
2131
+ setPreviewed = _useState6[1];
2109
2132
 
2110
2133
  var _useState7 = React.useState(false),
2111
2134
  _useState8 = _slicedToArray__default['default'](_useState7, 2),
2112
- hoveringAddTo = _useState8[0],
2113
- setHoveringAddTo = _useState8[1];
2135
+ hovering = _useState8[0],
2136
+ setHovering = _useState8[1];
2137
+
2138
+ var _useState9 = React.useState(false),
2139
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2140
+ hoveringAddTo = _useState10[0],
2141
+ setHoveringAddTo = _useState10[1];
2114
2142
 
2115
2143
  var titleRef = React.useRef(null);
2116
2144
  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._id) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
@@ -2199,9 +2227,11 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2199
2227
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2200
2228
  count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
2201
2229
  onClick: onFavoriteClick
2202
- }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
2230
+ }), /*#__PURE__*/React__default['default'].createElement(Container$1, {
2231
+ isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium
2232
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2203
2233
  sx: {
2204
- // backgroundImage: `url(${bite?.image?.original?.url})`,
2234
+ backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
2205
2235
  backgroundSize: "cover",
2206
2236
  backgroundRepeat: "no-repeat",
2207
2237
  backgroundColor: "grey4.main",
@@ -2228,7 +2258,8 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2228
2258
  onClick: function onClick() {
2229
2259
  play({
2230
2260
  bite: bite
2231
- }); // play({ bite });
2261
+ });
2262
+ setPreviewed(true); // play({ bite });
2232
2263
  },
2233
2264
  sx: {
2234
2265
  width: "100%",
@@ -2238,7 +2269,7 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2238
2269
  left: "0",
2239
2270
  backgroundColor: "notBlack.override",
2240
2271
  transition: "0.3s",
2241
- opacity: hovering ? "0.5" : "0",
2272
+ opacity: previewed || hovering ? "0.5" : "0",
2242
2273
  display: "flex",
2243
2274
  alignItems: "center",
2244
2275
  justifyContent: "center"
@@ -2290,14 +2321,20 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2290
2321
  width: "100%",
2291
2322
  justifyContent: "start"
2292
2323
  }
2293
- }, trending && /*#__PURE__*/React__default['default'].createElement("svg", {
2324
+ }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2325
+ sx: {
2326
+ fontSize: "18px",
2327
+ marginRight: "5px"
2328
+ }
2329
+ }), trending && /*#__PURE__*/React__default['default'].createElement("svg", {
2294
2330
  xmlns: "http://www.w3.org/2000/svg",
2295
- width: "16",
2296
- height: "16",
2331
+ width: "17",
2332
+ height: "17",
2297
2333
  viewBox: "5 5 24 24",
2298
2334
  fill: "none",
2299
2335
  style: {
2300
- marginRight: "5px"
2336
+ marginRight: "5px",
2337
+ minWidth: "17px"
2301
2338
  }
2302
2339
  }, /*#__PURE__*/React__default['default'].createElement("g", {
2303
2340
  filter: "url(#filter0_d_808_2472)"
@@ -90237,9 +90274,10 @@ var CheckoutModal = function CheckoutModal(_ref) {
90237
90274
  }, function (err, dropinInstance) {
90238
90275
  console.log(err);
90239
90276
 
90240
- if (err !== null && err !== void 0 && err.message) ;
90277
+ if (err !== null && err !== void 0 && err.message) ; // console.log(dropinInstance);
90241
90278
 
90242
- console.log(dropinInstance);
90279
+
90280
+ // console.log(dropinInstance);
90243
90281
  setDropInstance(dropinInstance);
90244
90282
  setDropInstanceReady(true);
90245
90283
  });
@@ -90275,7 +90313,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
90275
90313
  sx: {
90276
90314
  backgroundColor: "white.main",
90277
90315
  width: "900px",
90278
- height: "550px",
90316
+ height: "auto",
90279
90317
  padding: "32px 56px",
90280
90318
  borderRadius: "8px",
90281
90319
  position: "absolute",
package/dist/index.esm.js CHANGED
@@ -6,7 +6,7 @@ import React__default, { useState, useEffect, useContext, useRef, createContext,
6
6
  import { ColorExtractor } from 'react-color-extractor';
7
7
  import styled, { ThemeContext, keyframes, ThemeProvider as ThemeProvider$1 } from 'styled-components';
8
8
  import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
9
- import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
9
+ import { PauseCircleOutlineRounded, LockRounded, VerifiedRounded, DiamondRounded, MusicNoteRounded, CheckRounded, BookmarkRounded, BookmarkAddOutlined, AccountCircleRounded, VisibilityOffRounded, CancelRounded } from '@mui/icons-material';
10
10
  import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
11
11
  import LockRoundedIcon from '@mui/icons-material/LockRounded';
12
12
  import DoNotDisturbRoundedIcon from '@mui/icons-material/DoNotDisturbRounded';
@@ -1508,10 +1508,10 @@ var UserCard$1 = function UserCard(_ref) {
1508
1508
  backgroundColor: "grey4.main",
1509
1509
  minWidth: "280px",
1510
1510
  maxWidth: "320px",
1511
- height: collapsed ? "69px" : "121px",
1511
+ height: collapsed ? "auto" : "121px",
1512
1512
  borderRadius: "12px",
1513
1513
  alignItems: "center",
1514
- padding: "16px",
1514
+ padding: "10px",
1515
1515
  boxSizing: "border-box",
1516
1516
  justifyContent: "space-around",
1517
1517
  border: "1px solid transparent",
@@ -1554,13 +1554,13 @@ var UserCard$1 = function UserCard(_ref) {
1554
1554
  })), /*#__PURE__*/React__default.createElement(Stack, {
1555
1555
  sx: {
1556
1556
  flex: 1,
1557
- marginLeft: "22px"
1557
+ marginLeft: "20px"
1558
1558
  }
1559
1559
  }, /*#__PURE__*/React__default.createElement(Text, {
1560
1560
  sx: {
1561
1561
  fontSize: "18px",
1562
- fontWeight: "400",
1563
- maxWidth: "150px",
1562
+ fontWeight: "300",
1563
+ maxWidth: "180px",
1564
1564
  whiteSpace: "nowrap",
1565
1565
  textOverflow: "ellipsis",
1566
1566
  marginBottom: !collapsed && "10px",
@@ -1713,8 +1713,10 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
1713
1713
 
1714
1714
  var _templateObject$g, _templateObject2$a, _templateObject3$8;
1715
1715
  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"])));
1716
- var Container$1 = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n background-color: ", ";\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) {
1716
+ 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) {
1717
1717
  return props.theme.colors.grey7;
1718
+ }, function (props) {
1719
+ return props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233";
1718
1720
  });
1719
1721
  var HoverScrollText = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
1720
1722
  return props.hover && "transform: translateX(calc(180px - 100%));";
@@ -1733,7 +1735,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1733
1735
  onClick: onClick
1734
1736
  }, saved ? /*#__PURE__*/React__default.createElement(FavoriteIcon, {
1735
1737
  sx: {
1736
- fontSize: "16px",
1738
+ fontSize: "17px",
1737
1739
  marginRight: "6px",
1738
1740
  transition: "0.3s",
1739
1741
  cursor: "pointer",
@@ -1743,7 +1745,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1743
1745
  }
1744
1746
  }) : /*#__PURE__*/React__default.createElement(FavoriteBorderIcon, {
1745
1747
  sx: {
1746
- fontSize: "16px",
1748
+ fontSize: "17px",
1747
1749
  marginRight: "6px",
1748
1750
  transition: "0.3s",
1749
1751
  cursor: "pointer",
@@ -1759,7 +1761,7 @@ var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
1759
1761
  }, savedCount));
1760
1762
  };
1761
1763
  var AddedToIcons = function AddedToIcons(_ref2) {
1762
- var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
1764
+ var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
1763
1765
 
1764
1766
  var item = _ref2.item,
1765
1767
  hovering = _ref2.hovering,
@@ -1771,19 +1773,35 @@ var AddedToIcons = function AddedToIcons(_ref2) {
1771
1773
  transition: "0.3s",
1772
1774
  opacity: hide ? "0" : hovering ? "1" : "0"
1773
1775
  }
1774
- }, (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(ChannelPointsIcon, {
1776
+ }, (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, {
1777
+ title: "Added to Channel Points"
1778
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ChannelPointsIcon, {
1775
1779
  sx: {
1776
- fontSize: "15px"
1780
+ fontSize: "15px",
1781
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1777
1782
  }
1778
- }), (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(TwitchBitIcon, {
1783
+ }))), (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, {
1784
+ title: "Added to Bits Library"
1785
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TwitchBitIcon, {
1779
1786
  sx: {
1780
- fontSize: "15px"
1787
+ fontSize: "15px",
1788
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1781
1789
  }
1782
- }), (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(WalkonIcon, {
1790
+ }))), (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, {
1791
+ title: "Added to WalkOn"
1792
+ }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(WalkonIcon, {
1783
1793
  sx: {
1784
- fontSize: "15px"
1794
+ fontSize: "15px",
1795
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1785
1796
  }
1786
- }));
1797
+ }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id) && /*#__PURE__*/React__default.createElement(Tooltip, {
1798
+ title: "Added to Sound Emotes"
1799
+ }, /*#__PURE__*/React__default.createElement(MusicNoteRounded, {
1800
+ sx: {
1801
+ fontSize: "15px",
1802
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1803
+ }
1804
+ })));
1787
1805
  };
1788
1806
 
1789
1807
  var RatingInfo = function RatingInfo(_ref3) {
@@ -1811,6 +1829,8 @@ var RatingInfo = function RatingInfo(_ref3) {
1811
1829
  fontWeight: "600",
1812
1830
  backgroundColor: "white.override",
1813
1831
  borderRadius: "2px",
1832
+ border: "4px solid transparent",
1833
+ borderColor: "#000000c7",
1814
1834
  color: "notBlack.override",
1815
1835
  padding: "1px 2px",
1816
1836
  height: "14px",
@@ -1828,6 +1848,8 @@ var RatingInfo = function RatingInfo(_ref3) {
1828
1848
  fontWeight: "600",
1829
1849
  backgroundColor: "white.override",
1830
1850
  borderRadius: "2px",
1851
+ border: "4px solid transparent",
1852
+ borderColor: "#000000a7",
1831
1853
  color: "notBlack.override",
1832
1854
  padding: "1px 2px",
1833
1855
  height: "14px",
@@ -1971,6 +1993,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
1971
1993
  position: "absolute",
1972
1994
  top: "0",
1973
1995
  left: "0",
1996
+ zIndex: hoveringAddTo ? "0" : "10",
1974
1997
  transition: "0.3s",
1975
1998
  opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
1976
1999
  // display: hoveringAddTo && "none",
@@ -1995,7 +2018,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
1995
2018
  };
1996
2019
 
1997
2020
  var NewBlerp$1 = function NewBlerp(_ref6) {
1998
- var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _titleRef$current, _titleRef$current$get;
2021
+ var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
1999
2022
 
2000
2023
  var Waveform = _ref6.Waveform,
2001
2024
  bite = _ref6.bite,
@@ -2029,13 +2052,18 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2029
2052
 
2030
2053
  var _useState5 = useState(false),
2031
2054
  _useState6 = _slicedToArray(_useState5, 2),
2032
- hovering = _useState6[0],
2033
- setHovering = _useState6[1];
2055
+ previewed = _useState6[0],
2056
+ setPreviewed = _useState6[1];
2034
2057
 
2035
2058
  var _useState7 = useState(false),
2036
2059
  _useState8 = _slicedToArray(_useState7, 2),
2037
- hoveringAddTo = _useState8[0],
2038
- setHoveringAddTo = _useState8[1];
2060
+ hovering = _useState8[0],
2061
+ setHovering = _useState8[1];
2062
+
2063
+ var _useState9 = useState(false),
2064
+ _useState10 = _slicedToArray(_useState9, 2),
2065
+ hoveringAddTo = _useState10[0],
2066
+ setHoveringAddTo = _useState10[1];
2039
2067
 
2040
2068
  var titleRef = useRef(null);
2041
2069
  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._id) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
@@ -2124,9 +2152,11 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2124
2152
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2125
2153
  count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
2126
2154
  onClick: onFavoriteClick
2127
- }), /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(Stack, {
2155
+ }), /*#__PURE__*/React__default.createElement(Container$1, {
2156
+ isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium
2157
+ }, /*#__PURE__*/React__default.createElement(Stack, {
2128
2158
  sx: {
2129
- // backgroundImage: `url(${bite?.image?.original?.url})`,
2159
+ backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
2130
2160
  backgroundSize: "cover",
2131
2161
  backgroundRepeat: "no-repeat",
2132
2162
  backgroundColor: "grey4.main",
@@ -2153,7 +2183,8 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2153
2183
  onClick: function onClick() {
2154
2184
  play({
2155
2185
  bite: bite
2156
- }); // play({ bite });
2186
+ });
2187
+ setPreviewed(true); // play({ bite });
2157
2188
  },
2158
2189
  sx: {
2159
2190
  width: "100%",
@@ -2163,7 +2194,7 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2163
2194
  left: "0",
2164
2195
  backgroundColor: "notBlack.override",
2165
2196
  transition: "0.3s",
2166
- opacity: hovering ? "0.5" : "0",
2197
+ opacity: previewed || hovering ? "0.5" : "0",
2167
2198
  display: "flex",
2168
2199
  alignItems: "center",
2169
2200
  justifyContent: "center"
@@ -2215,14 +2246,20 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2215
2246
  width: "100%",
2216
2247
  justifyContent: "start"
2217
2248
  }
2218
- }, trending && /*#__PURE__*/React__default.createElement("svg", {
2249
+ }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default.createElement(DiamondIcon, {
2250
+ sx: {
2251
+ fontSize: "18px",
2252
+ marginRight: "5px"
2253
+ }
2254
+ }), trending && /*#__PURE__*/React__default.createElement("svg", {
2219
2255
  xmlns: "http://www.w3.org/2000/svg",
2220
- width: "16",
2221
- height: "16",
2256
+ width: "17",
2257
+ height: "17",
2222
2258
  viewBox: "5 5 24 24",
2223
2259
  fill: "none",
2224
2260
  style: {
2225
- marginRight: "5px"
2261
+ marginRight: "5px",
2262
+ minWidth: "17px"
2226
2263
  }
2227
2264
  }, /*#__PURE__*/React__default.createElement("g", {
2228
2265
  filter: "url(#filter0_d_808_2472)"
@@ -90162,9 +90199,10 @@ var CheckoutModal = function CheckoutModal(_ref) {
90162
90199
  }, function (err, dropinInstance) {
90163
90200
  console.log(err);
90164
90201
 
90165
- if (err !== null && err !== void 0 && err.message) ;
90202
+ if (err !== null && err !== void 0 && err.message) ; // console.log(dropinInstance);
90166
90203
 
90167
- console.log(dropinInstance);
90204
+
90205
+ // console.log(dropinInstance);
90168
90206
  setDropInstance(dropinInstance);
90169
90207
  setDropInstanceReady(true);
90170
90208
  });
@@ -90200,7 +90238,7 @@ var CheckoutModal = function CheckoutModal(_ref) {
90200
90238
  sx: {
90201
90239
  backgroundColor: "white.main",
90202
90240
  width: "900px",
90203
- height: "550px",
90241
+ height: "auto",
90204
90242
  padding: "32px 56px",
90205
90243
  borderRadius: "8px",
90206
90244
  position: "absolute",
package/dist/index.umd.js CHANGED
@@ -1529,10 +1529,10 @@
1529
1529
  backgroundColor: "grey4.main",
1530
1530
  minWidth: "280px",
1531
1531
  maxWidth: "320px",
1532
- height: collapsed ? "69px" : "121px",
1532
+ height: collapsed ? "auto" : "121px",
1533
1533
  borderRadius: "12px",
1534
1534
  alignItems: "center",
1535
- padding: "16px",
1535
+ padding: "10px",
1536
1536
  boxSizing: "border-box",
1537
1537
  justifyContent: "space-around",
1538
1538
  border: "1px solid transparent",
@@ -1575,13 +1575,13 @@
1575
1575
  })), /*#__PURE__*/React__default['default'].createElement(Stack, {
1576
1576
  sx: {
1577
1577
  flex: 1,
1578
- marginLeft: "22px"
1578
+ marginLeft: "20px"
1579
1579
  }
1580
1580
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1581
1581
  sx: {
1582
1582
  fontSize: "18px",
1583
- fontWeight: "400",
1584
- maxWidth: "150px",
1583
+ fontWeight: "300",
1584
+ maxWidth: "180px",
1585
1585
  whiteSpace: "nowrap",
1586
1586
  textOverflow: "ellipsis",
1587
1587
  marginBottom: !collapsed && "10px",
@@ -1734,8 +1734,10 @@
1734
1734
 
1735
1735
  var _templateObject$g, _templateObject2$a, _templateObject3$8;
1736
1736
  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"])));
1737
- var Container$1 = styled__default['default'].div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral__default['default'](["\n background-color: ", ";\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) {
1737
+ 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) {
1738
1738
  return props.theme.colors.grey7;
1739
+ }, function (props) {
1740
+ return props.isPremium && "linear-gradient(308.34deg, rgba(83, 195, 219, 0.1) 6.23%, rgba(168, 57, 255, 0.1) 87.91%), linear-gradient(147.84deg, #2C3233 18.52%, #8A9193 27.81%, #1A1E1F 39.67%, #202425 62.87%, #414545 80.4%, #1A1E1F 93.3%), #2C3233";
1739
1741
  });
1740
1742
  var HoverScrollText = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n width: 100%;\n max-width: 280px;\n min-width: 190px;\n height: 23px;\n overflow: hidden;\n line-height: 30px;\n box-sizing: border-box;\n position: relative;\n margin: 10px 0 5px 0;\n cursor: pointer;\n & p {\n cursor: default;\n position: absolute;\n white-space: nowrap;\n transform: translateX(0);\n transition: 1s;\n }\n\n &:hover p {\n ", "\n text-decoration: underline;\n cursor: pointer;\n }\n"])), function (props) {
1741
1743
  return props.hover && "transform: translateX(calc(180px - 100%));";
@@ -1754,7 +1756,7 @@
1754
1756
  onClick: onClick
1755
1757
  }, saved ? /*#__PURE__*/React__default['default'].createElement(FavoriteIcon__default['default'], {
1756
1758
  sx: {
1757
- fontSize: "16px",
1759
+ fontSize: "17px",
1758
1760
  marginRight: "6px",
1759
1761
  transition: "0.3s",
1760
1762
  cursor: "pointer",
@@ -1764,7 +1766,7 @@
1764
1766
  }
1765
1767
  }) : /*#__PURE__*/React__default['default'].createElement(FavoriteBorderIcon__default['default'], {
1766
1768
  sx: {
1767
- fontSize: "16px",
1769
+ fontSize: "17px",
1768
1770
  marginRight: "6px",
1769
1771
  transition: "0.3s",
1770
1772
  cursor: "pointer",
@@ -1780,7 +1782,7 @@
1780
1782
  }, savedCount));
1781
1783
  };
1782
1784
  var AddedToIcons = function AddedToIcons(_ref2) {
1783
- var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext;
1785
+ var _item$channelPointsCo, _item$whitelistContex, _item$walkOnContext, _item$soundEmotesCont;
1784
1786
 
1785
1787
  var item = _ref2.item,
1786
1788
  hovering = _ref2.hovering,
@@ -1792,19 +1794,35 @@
1792
1794
  transition: "0.3s",
1793
1795
  opacity: hide ? "0" : hovering ? "1" : "0"
1794
1796
  }
1795
- }, (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(ChannelPointsIcon, {
1797
+ }, (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, {
1798
+ title: "Added to Channel Points"
1799
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ChannelPointsIcon, {
1796
1800
  sx: {
1797
- fontSize: "15px"
1801
+ fontSize: "15px",
1802
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1798
1803
  }
1799
- }), (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(TwitchBitIcon, {
1804
+ }))), (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, {
1805
+ title: "Added to Bits Library"
1806
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(TwitchBitIcon, {
1800
1807
  sx: {
1801
- fontSize: "15px"
1808
+ fontSize: "15px",
1809
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1802
1810
  }
1803
- }), (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(WalkonIcon, {
1811
+ }))), (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, {
1812
+ title: "Added to WalkOn"
1813
+ }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(WalkonIcon, {
1804
1814
  sx: {
1805
- fontSize: "15px"
1815
+ fontSize: "15px",
1816
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1806
1817
  }
1807
- }));
1818
+ }))), (item === null || item === void 0 ? void 0 : (_item$soundEmotesCont = item.soundEmotesContext) === null || _item$soundEmotesCont === void 0 ? void 0 : _item$soundEmotesCont._id) && /*#__PURE__*/React__default['default'].createElement(Tooltip, {
1819
+ title: "Added to Sound Emotes"
1820
+ }, /*#__PURE__*/React__default['default'].createElement(iconsMaterial.MusicNoteRounded, {
1821
+ sx: {
1822
+ fontSize: "15px",
1823
+ filter: "drop-shadow(0px 0.972222px 8.75px rgba(0, 0, 0, 0.73))"
1824
+ }
1825
+ })));
1808
1826
  };
1809
1827
 
1810
1828
  var RatingInfo = function RatingInfo(_ref3) {
@@ -1832,6 +1850,8 @@
1832
1850
  fontWeight: "600",
1833
1851
  backgroundColor: "white.override",
1834
1852
  borderRadius: "2px",
1853
+ border: "4px solid transparent",
1854
+ borderColor: "#000000c7",
1835
1855
  color: "notBlack.override",
1836
1856
  padding: "1px 2px",
1837
1857
  height: "14px",
@@ -1849,6 +1869,8 @@
1849
1869
  fontWeight: "600",
1850
1870
  backgroundColor: "white.override",
1851
1871
  borderRadius: "2px",
1872
+ border: "4px solid transparent",
1873
+ borderColor: "#000000a7",
1852
1874
  color: "notBlack.override",
1853
1875
  padding: "1px 2px",
1854
1876
  height: "14px",
@@ -1992,6 +2014,7 @@
1992
2014
  position: "absolute",
1993
2015
  top: "0",
1994
2016
  left: "0",
2017
+ zIndex: hoveringAddTo ? "0" : "10",
1995
2018
  transition: "0.3s",
1996
2019
  opacity: hoveringAddTo ? "0" : "1" // width: hoveringAddTo ? "0%" : "50%",
1997
2020
  // display: hoveringAddTo && "none",
@@ -2016,7 +2039,7 @@
2016
2039
  };
2017
2040
 
2018
2041
  var NewBlerp$1 = function NewBlerp(_ref6) {
2019
- var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _titleRef$current, _titleRef$current$get;
2042
+ var _bite$whitelistContex, _bite$channelPointsCo, _bite$walkOnContext, _bite$soundEmotesCont, _bite$discordContext, _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
2020
2043
 
2021
2044
  var Waveform = _ref6.Waveform,
2022
2045
  bite = _ref6.bite,
@@ -2050,13 +2073,18 @@
2050
2073
 
2051
2074
  var _useState5 = React.useState(false),
2052
2075
  _useState6 = _slicedToArray__default['default'](_useState5, 2),
2053
- hovering = _useState6[0],
2054
- setHovering = _useState6[1];
2076
+ previewed = _useState6[0],
2077
+ setPreviewed = _useState6[1];
2055
2078
 
2056
2079
  var _useState7 = React.useState(false),
2057
2080
  _useState8 = _slicedToArray__default['default'](_useState7, 2),
2058
- hoveringAddTo = _useState8[0],
2059
- setHoveringAddTo = _useState8[1];
2081
+ hovering = _useState8[0],
2082
+ setHovering = _useState8[1];
2083
+
2084
+ var _useState9 = React.useState(false),
2085
+ _useState10 = _slicedToArray__default['default'](_useState9, 2),
2086
+ hoveringAddTo = _useState10[0],
2087
+ setHoveringAddTo = _useState10[1];
2060
2088
 
2061
2089
  var titleRef = React.useRef(null);
2062
2090
  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._id) || (bite === null || bite === void 0 ? void 0 : (_bite$discordContext = bite.discordContext) === null || _bite$discordContext === void 0 ? void 0 : _bite$discordContext._id);
@@ -2145,9 +2173,11 @@
2145
2173
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2146
2174
  count: bite === null || bite === void 0 ? void 0 : bite.totalSaveCount,
2147
2175
  onClick: onFavoriteClick
2148
- }), /*#__PURE__*/React__default['default'].createElement(Container$1, null, /*#__PURE__*/React__default['default'].createElement(Stack, {
2176
+ }), /*#__PURE__*/React__default['default'].createElement(Container$1, {
2177
+ isPremium: bite === null || bite === void 0 ? void 0 : bite.isPremium
2178
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2149
2179
  sx: {
2150
- // backgroundImage: `url(${bite?.image?.original?.url})`,
2180
+ backgroundImage: "url(".concat(bite === null || bite === void 0 ? void 0 : (_bite$image = bite.image) === null || _bite$image === void 0 ? void 0 : (_bite$image$original = _bite$image.original) === null || _bite$image$original === void 0 ? void 0 : _bite$image$original.url, ")"),
2151
2181
  backgroundSize: "cover",
2152
2182
  backgroundRepeat: "no-repeat",
2153
2183
  backgroundColor: "grey4.main",
@@ -2174,7 +2204,8 @@
2174
2204
  onClick: function onClick() {
2175
2205
  play({
2176
2206
  bite: bite
2177
- }); // play({ bite });
2207
+ });
2208
+ setPreviewed(true); // play({ bite });
2178
2209
  },
2179
2210
  sx: {
2180
2211
  width: "100%",
@@ -2184,7 +2215,7 @@
2184
2215
  left: "0",
2185
2216
  backgroundColor: "notBlack.override",
2186
2217
  transition: "0.3s",
2187
- opacity: hovering ? "0.5" : "0",
2218
+ opacity: previewed || hovering ? "0.5" : "0",
2188
2219
  display: "flex",
2189
2220
  alignItems: "center",
2190
2221
  justifyContent: "center"
@@ -2236,14 +2267,20 @@
2236
2267
  width: "100%",
2237
2268
  justifyContent: "start"
2238
2269
  }
2239
- }, trending && /*#__PURE__*/React__default['default'].createElement("svg", {
2270
+ }, (bite === null || bite === void 0 ? void 0 : bite.isPremium) && /*#__PURE__*/React__default['default'].createElement(DiamondIcon, {
2271
+ sx: {
2272
+ fontSize: "18px",
2273
+ marginRight: "5px"
2274
+ }
2275
+ }), trending && /*#__PURE__*/React__default['default'].createElement("svg", {
2240
2276
  xmlns: "http://www.w3.org/2000/svg",
2241
- width: "16",
2242
- height: "16",
2277
+ width: "17",
2278
+ height: "17",
2243
2279
  viewBox: "5 5 24 24",
2244
2280
  fill: "none",
2245
2281
  style: {
2246
- marginRight: "5px"
2282
+ marginRight: "5px",
2283
+ minWidth: "17px"
2247
2284
  }
2248
2285
  }, /*#__PURE__*/React__default['default'].createElement("g", {
2249
2286
  filter: "url(#filter0_d_808_2472)"
@@ -90183,9 +90220,10 @@
90183
90220
  }, function (err, dropinInstance) {
90184
90221
  console.log(err);
90185
90222
 
90186
- if (err !== null && err !== void 0 && err.message) ;
90223
+ if (err !== null && err !== void 0 && err.message) ; // console.log(dropinInstance);
90187
90224
 
90188
- console.log(dropinInstance);
90225
+
90226
+ // console.log(dropinInstance);
90189
90227
  setDropInstance(dropinInstance);
90190
90228
  setDropInstanceReady(true);
90191
90229
  });
@@ -90221,7 +90259,7 @@
90221
90259
  sx: {
90222
90260
  backgroundColor: "white.main",
90223
90261
  width: "900px",
90224
- height: "550px",
90262
+ height: "auto",
90225
90263
  padding: "32px 56px",
90226
90264
  borderRadius: "8px",
90227
90265
  position: "absolute",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.2.42",
3
+ "version": "1.2.44",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {