@blerp/design 1.2.36 → 1.2.38

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 +30 -419
  2. package/dist/index.esm.js +29 -418
  3. package/dist/index.umd.js +33 -421
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -12,8 +12,6 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
12
12
  var iconsMaterial = require('@mui/icons-material');
13
13
  var BookmarkOutlinedIcon = require('@mui/icons-material/BookmarkOutlined');
14
14
  var LockRoundedIcon = require('@mui/icons-material/LockRounded');
15
- var AddRoundedIcon = require('@mui/icons-material/AddRounded');
16
- require('@mui/icons-material/ArrowDropDownRounded');
17
15
  var DoNotDisturbRoundedIcon = require('@mui/icons-material/DoNotDisturbRounded');
18
16
  var FavoriteIcon = require('@mui/icons-material/Favorite');
19
17
  var FavoriteBorderIcon = require('@mui/icons-material/FavoriteBorder');
@@ -39,6 +37,7 @@ var styles = require('@mui/material/styles');
39
37
  var Slide = require('@mui/material/Slide');
40
38
  var Fade = require('@mui/material/Fade');
41
39
  var Lottie = require('react-lottie');
40
+ var AddRoundedIcon = require('@mui/icons-material/AddRounded');
42
41
  var FacebookIcon = require('@mui/icons-material/Facebook');
43
42
  var InstagramIcon = require('@mui/icons-material/Instagram');
44
43
  var ModeEditRoundedIcon = require('@mui/icons-material/ModeEditRounded');
@@ -89,7 +88,6 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
89
88
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
90
89
  var BookmarkOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkOutlinedIcon);
91
90
  var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIcon);
92
- var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
93
91
  var DoNotDisturbRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(DoNotDisturbRoundedIcon);
94
92
  var FavoriteIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteIcon);
95
93
  var FavoriteBorderIcon__default = /*#__PURE__*/_interopDefaultLegacy(FavoriteBorderIcon);
@@ -113,6 +111,7 @@ var InsertPhotoRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(InsertP
113
111
  var Slide__default = /*#__PURE__*/_interopDefaultLegacy(Slide);
114
112
  var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
115
113
  var Lottie__default = /*#__PURE__*/_interopDefaultLegacy(Lottie);
114
+ var AddRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddRoundedIcon);
116
115
  var FacebookIcon__default = /*#__PURE__*/_interopDefaultLegacy(FacebookIcon);
117
116
  var InstagramIcon__default = /*#__PURE__*/_interopDefaultLegacy(InstagramIcon);
118
117
  var ModeEditRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(ModeEditRoundedIcon);
@@ -131,7 +130,7 @@ var SearchRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchRounde
131
130
  var BookmarkRemoveOutlinedIcon__default = /*#__PURE__*/_interopDefaultLegacy(BookmarkRemoveOutlinedIcon);
132
131
  var VisibilityOffRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffRoundedIcon);
133
132
 
134
- var _templateObject$j, _templateObject2$b, _templateObject3$8, _templateObject4$7;
133
+ var _templateObject$j, _templateObject2$b, _templateObject3$9, _templateObject4$7;
135
134
  var BlerpImage$3 = styled__default['default'].div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-image: url(", ");\n background-size: cover;\n border-radius: 50%;\n position: relative;\n transition: 0.2s;\n\n &:hover {\n transform: scale(1.1);\n }\n"])), function (props) {
136
135
  return props.url;
137
136
  });
@@ -142,7 +141,7 @@ var SaveContainer$2 = styled__default['default'].div(_templateObject2$b || (_tem
142
141
  }, function (props) {
143
142
  return props.theme.colors.white;
144
143
  });
145
- var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
144
+ var BlerpImageScrim$2 = styled__default['default'].div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral__default['default'](["\n height: 150px;\n width: 150px;\n background-color: ", "70;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition: 0.4s;\n\n &:hover {\n background-color: ", "98;\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (props) {
146
145
  return props.theme.colors.grey6Override;
147
146
  }, function (props) {
148
147
  return props.theme.colors.grey6Override;
@@ -1776,284 +1775,14 @@ var UsernameWithPopout$1 = function UsernameWithPopout(_ref) {
1776
1775
  }, user === null || user === void 0 ? void 0 : user.username));
1777
1776
  };
1778
1777
 
1779
- var _templateObject$g, _templateObject2$a;
1778
+ var _templateObject$g, _templateObject2$a, _templateObject3$8;
1780
1779
  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"])));
1781
1780
  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) {
1782
1781
  return props.theme.colors.grey7;
1783
- }); // const AddContentDropdown = ({
1784
- // item,
1785
- // active,
1786
- // onOptionClicked,
1787
- // selectedOption,
1788
- // }) => {
1789
- // const options = [
1790
- // {
1791
- // name: "Channel Points",
1792
- // value: "CHANNEL_POINTS",
1793
- // added: item?.channelPointsContext?._id,
1794
- // },
1795
- // { name: "Bits", value: "BITS", added: item?.whitelistContext?._id },
1796
- // { name: "WalkOn", value: "WALK_ON", added: item?.walkOnContext?._id },
1797
- // { name: "Discord", value: "DISCORD", added: item?.discordContext?._id },
1798
- // {
1799
- // name: "Sound Emotes",
1800
- // value: "SOUND_EMOTES",
1801
- // added: item?.soundEmotesContext?._id,
1802
- // },
1803
- // {
1804
- // name: "Add To Group",
1805
- // value: "ADD_TO_GROUP",
1806
- // added: false,
1807
- // },
1808
- // {
1809
- // name: "Suggest To...",
1810
- // value: "SUGGEST",
1811
- // added: false,
1812
- // },
1813
- // ];
1814
- // const anchorRef = useRef(null);
1815
- // const [anchor, setAnchor] = useState(null);
1816
- // const open = Boolean(anchor);
1817
- // return (
1818
- // <>
1819
- // <Button
1820
- // ref={anchorRef}
1821
- // color="whiteOverride"
1822
- // variant="outlined"
1823
- // onClick={(e) => {
1824
- // if (active) setAnchor(anchorRef?.current);
1825
- // }}
1826
- // sx={{
1827
- // width: "100%",
1828
- // height: "30px",
1829
- // transition: "0.3s",
1830
- // cursor: active ? "pointer" : "default",
1831
- // justifyContent: "space-between",
1832
- // marginRight: "10px",
1833
- // backgroundColor: "#2C323380",
1834
- // opacity: active ? "1" : "0",
1835
- // whiteSpace: "nowrap",
1836
- // "&:hover": {
1837
- // backgroundColor: "grey3.main",
1838
- // },
1839
- // }}
1840
- // endIcon={
1841
- // <ArrowDropDownRoundedIcon sx={{ pointerEvents: "none" }} />
1842
- // }
1843
- // >
1844
- // {selectedOption?.name || options[0]?.name}
1845
- // </Button>
1846
- // <Popover
1847
- // open={open}
1848
- // anchorEl={anchor}
1849
- // anchorOrigin={{
1850
- // vertical: "top",
1851
- // horizontal: "left",
1852
- // }}
1853
- // transformOrigin={{
1854
- // vertical: "top",
1855
- // horizontal: "left",
1856
- // }}
1857
- // onClose={() => {
1858
- // setAnchor(null);
1859
- // }}
1860
- // PaperProps={{
1861
- // sx: {
1862
- // width: anchor?.getBoundingClientRect().width,
1863
- // backgroundColor: "#2C323380",
1864
- // borderRadius: "18px",
1865
- // padding: "35px 0 0 0",
1866
- // boxSizing: "border-box",
1867
- // maxHeight: "160px",
1868
- // overflowY: "hidden",
1869
- // },
1870
- // }}
1871
- // >
1872
- // <Stack sx={{ maxHeight: "120px", overflowY: "scroll" }}>
1873
- // {options?.map((option) => (
1874
- // <Stack
1875
- // direction="row"
1876
- // sx={{
1877
- // boxSizing: "border-box",
1878
- // justifyContent: "space-between",
1879
- // alignItems: "center",
1880
- // width: "100%",
1881
- // height: "100%",
1882
- // padding: "6px 5px 6px 10px",
1883
- // cursor: "pointer",
1884
- // transition: "0.3s",
1885
- // "&:hover": {
1886
- // backgroundColor: "#474D4F80",
1887
- // },
1888
- // "&:hover #added-to-content-icon": {
1889
- // display: option?.added ? "none" : "block",
1890
- // opacity: "1",
1891
- // },
1892
- // "&:hover #remove-from-content-icon": {
1893
- // display: option?.added ? "block" : "none",
1894
- // opacity: option?.added ? "1" : "0",
1895
- // },
1896
- // }}
1897
- // onClick={() => {
1898
- // if (onOptionClicked) onOptionClicked(option);
1899
- // setAnchor(null);
1900
- // }}
1901
- // >
1902
- // <Text
1903
- // sx={{
1904
- // fontSize: "14px",
1905
- // fontWeight: "400",
1906
- // }}
1907
- // >
1908
- // {option.name}
1909
- // </Text>
1910
- // <CheckRounded
1911
- // id="added-to-content-icon"
1912
- // sx={{
1913
- // transition: "0.3s",
1914
- // opacity: option.added ? "1" : "0",
1915
- // }}
1916
- // />
1917
- // <CloseRounded
1918
- // id="remove-from-content-icon"
1919
- // sx={{
1920
- // transition: "0.3s",
1921
- // display: "none",
1922
- // opacity: "0",
1923
- // }}
1924
- // />
1925
- // </Stack>
1926
- // ))}
1927
- // </Stack>
1928
- // </Popover>
1929
- // </>
1930
- // );
1931
- // };
1932
- // const AddContentButton = ({
1933
- // item,
1934
- // hovering,
1935
- // hoveringAddTo,
1936
- // setHoveringAddTo,
1937
- // openPremiumModal,
1938
- // onOptionClicked,
1939
- // onPlusClick,
1940
- // selectedOption,
1941
- // isUnownedPremium,
1942
- // }) => {
1943
- // let added = false;
1944
- // if (item?.whitelistContext?._id && selectedOption?.value === "BITS") {
1945
- // added = true;
1946
- // } else if (
1947
- // item?.channelPointsContext?._id &&
1948
- // selectedOption?.value === "CHANNEL_POINTS"
1949
- // ) {
1950
- // added = true;
1951
- // } else if (
1952
- // item?.walkOnContext?._id &&
1953
- // selectedOption?.value === "WALK_ON"
1954
- // ) {
1955
- // added = true;
1956
- // } else if (
1957
- // item?.discordContext?._id &&
1958
- // selectedOption?.value === "DISCORD"
1959
- // ) {
1960
- // added = true;
1961
- // }
1962
- // return (
1963
- // <Stack
1964
- // direction="row"
1965
- // width={hoveringAddTo ? "100%" : "60%"}
1966
- // sx={{
1967
- // justifyContent: "end",
1968
- // transition: "0.5s",
1969
- // boxSizing: "border-box",
1970
- // opacity: hovering ? "1" : "0",
1971
- // }}
1972
- // onMouseLeave={() => {
1973
- // setHoveringAddTo(false);
1974
- // }}
1975
- // >
1976
- // <AddContentDropdown
1977
- // item={item}
1978
- // active={hoveringAddTo}
1979
- // onOptionClicked={onOptionClicked}
1980
- // selectedOption={selectedOption}
1981
- // />
1982
- // {isUnownedPremium ? (
1983
- // <IconButton
1984
- // sx={{
1985
- // width: "30px",
1986
- // height: "30px",
1987
- // backgroundColor: "white.override",
1988
- // "&:hover .open-lock-icon": {
1989
- // display: "flex !important",
1990
- // opacity: "1 !important",
1991
- // },
1992
- // "&:hover .lock-icon": {
1993
- // display: "none !important",
1994
- // opacity: "0 !important",
1995
- // },
1996
- // "&:hover": {
1997
- // backgroundColor: "grey7.main",
1998
- // },
1999
- // }}
2000
- // onClick={(e) => {
2001
- // e.stopPropagation();
2002
- // openPremiumModal();
2003
- // }}
2004
- // >
2005
- // <LockRoundedIcon
2006
- // className="lock-icon"
2007
- // sx={{
2008
- // transition: "0.3s",
2009
- // color: "notBlack.override",
2010
- // display: "flex",
2011
- // opacity: "1",
2012
- // fontSize: "17px",
2013
- // }}
2014
- // />
2015
- // <div
2016
- // className="open-lock-icon"
2017
- // style={{ display: "none", opacity: "0" }}
2018
- // >
2019
- // <OpenLockIcon
2020
- // sx={{
2021
- // transition: "0.3s",
2022
- // color: "notBlack.override",
2023
- // fontSize: "17px",
2024
- // }}
2025
- // />
2026
- // </div>
2027
- // </IconButton>
2028
- // ) : (
2029
- // <IconButton
2030
- // sx={{
2031
- // width: "30px",
2032
- // height: "30px",
2033
- // backgroundColor: "white.override",
2034
- // "&:hover": {
2035
- // backgroundColor: "grey7.main",
2036
- // },
2037
- // }}
2038
- // onMouseEnter={(e) => {
2039
- // e.stopPropagation();
2040
- // setHoveringAddTo(true);
2041
- // }}
2042
- // onClick={() => onPlusClick(added)}
2043
- // >
2044
- // <AddRoundedIcon
2045
- // sx={{
2046
- // transition: "0.3s",
2047
- // color: "notBlack.override",
2048
- // transform: added && "rotate(45deg)",
2049
- // }}
2050
- // />
2051
- // </IconButton>
2052
- // )}
2053
- // </Stack>
2054
- // );
2055
- // };
2056
-
1782
+ });
1783
+ 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) {
1784
+ return props.hover && "transform: translateX(calc(180px - 100%));";
1785
+ });
2057
1786
  var FavoriteIconWithCounter = function FavoriteIconWithCounter(_ref) {
2058
1787
  var saved = _ref.saved,
2059
1788
  count = _ref.count,
@@ -2174,126 +1903,7 @@ var RatingInfo = function RatingInfo(_ref3) {
2174
1903
  default:
2175
1904
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null);
2176
1905
  }
2177
- }; // const BlerpWaveform = ({ hovering, bite }) => {
2178
- // const id = bite?._id;
2179
- // const audio = bite?.audio?.mp3?.url;
2180
- // const { play, getPlayState, selectedBlerp } = useContext(BlerpAudioContext);
2181
- // const [hasRendered, setHasRendered] = useState(false);
2182
- // const [wavesurfer, setWavesurfer] = useState(null);
2183
- // useEffect(() => {
2184
- // const create = async () => {
2185
- // console.log("creating", hovering, wavesurfer, hasRendered);
2186
- // if (hovering && wavesurfer) {
2187
- // wavesurfer.load(audio);
2188
- // } else if (
2189
- // hovering &&
2190
- // !wavesurfer &&
2191
- // !hasRendered &&
2192
- // document.querySelector(`#blerp-waveform-${id}`) &&
2193
- // document.querySelector(`#blerp-waveform-${id}`).children
2194
- // .length === 0
2195
- // ) {
2196
- // const WaveSurfer = (await import("@blerp/wavesurfer")).default;
2197
- // const CursorPlugin = (
2198
- // await import("@blerp/wavesurfer/src/plugin/cursor")
2199
- // ).default;
2200
- // let mWavesurfer = WaveSurfer.create({
2201
- // container: document.querySelector(`#blerp-waveform-${id}`),
2202
- // barWidth: 2,
2203
- // barHeight: 1.5, // the height of the wave
2204
- // barGap: 2, // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
2205
- // progressColor: "#ffffff",
2206
- // hoverColor: "#ffffff99",
2207
- // barRadius: 2,
2208
- // height: 30,
2209
- // hideScrollBar: true,
2210
- // plugins: [
2211
- // CursorPlugin.create({
2212
- // showTime: false,
2213
- // opacity: 0,
2214
- // customShowTimeStyle: {
2215
- // "background-color": "#000",
2216
- // color: "#fff",
2217
- // padding: "2px",
2218
- // "font-size": "10px",
2219
- // },
2220
- // }),
2221
- // ],
2222
- // });
2223
- // mWavesurfer.on("error", function (e) {
2224
- // console.warn(e);
2225
- // });
2226
- // mWavesurfer?.on("seek", (prog) => {
2227
- // if (prog) {
2228
- // console.log("SEEEEEEK", prog, bite);
2229
- // mWavesurfer?.setMute(true);
2230
- // mWavesurfer?.play();
2231
- // play({
2232
- // bite: bite,
2233
- // startTime: mWavesurfer?.getCurrentTime(),
2234
- // forcePlay: true,
2235
- // });
2236
- // }
2237
- // });
2238
- // // Load audio from URL
2239
- // // mWavesurfer.load(audio);
2240
- // setWavesurfer(mWavesurfer);
2241
- // setHasRendered(true);
2242
- // }
2243
- // };
2244
- // create();
2245
- // }, [wavesurfer, bite, play, audio, hovering, hasRendered, id]);
2246
- // useEffect(() => {
2247
- // // if (wavesurfer && selectedBlerp?._id === bite?._id) {
2248
- // // wavesurfer?.on("seek", (prog) => {
2249
- // // if (prog) {
2250
- // // console.log("SEEEEEEK", prog, selectedBlerp);
2251
- // // play({
2252
- // // bite: bite,
2253
- // // startTime: wavesurfer?.getCurrentTime(),
2254
- // // });
2255
- // // wavesurfer?.setMute(true);
2256
- // // wavesurfer?.play();
2257
- // // }
2258
- // // });
2259
- // // } else {
2260
- // // wavesurfer?.un("seek");
2261
- // // }
2262
- // if (getPlayState({ biteId: bite?._id }) === "playing") {
2263
- // wavesurfer?.setMute(true);
2264
- // wavesurfer?.play();
2265
- // // Play button
2266
- // // console.log(wavesurfer.play());
2267
- // }
2268
- // if (getPlayState({ biteId: bite?._id }) === "paused") {
2269
- // wavesurfer?.setMute(true);
2270
- // wavesurfer?.pause();
2271
- // // Play button
2272
- // // console.log(wavesurfer.play());
2273
- // }
2274
- // if (getPlayState({ biteId: bite?._id }) === "stopped") {
2275
- // wavesurfer?.setMute(true);
2276
- // console.log("stop");
2277
- // wavesurfer?.stop();
2278
- // // Play button
2279
- // // console.log(wavesurfer.play());
2280
- // }
2281
- // }, [bite, getPlayState, wavesurfer]);
2282
- // return (
2283
- // <div
2284
- // id={`blerp-waveform-${id}`}
2285
- // style={{
2286
- // height: "30px",
2287
- // width: "100%",
2288
- // transition: "0.3s",
2289
- // opacity: hovering ? "1" : "0",
2290
- // }}
2291
- // >
2292
- // {/* <!-- Here be the waveform --> */}
2293
- // </div>
2294
- // );
2295
- // };
2296
-
1906
+ };
2297
1907
 
2298
1908
  var ReportedWarning = function ReportedWarning(_ref4) {
2299
1909
  var showWarning = _ref4.showWarning,
@@ -2435,7 +2045,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
2435
2045
 
2436
2046
  }
2437
2047
  }, /*#__PURE__*/React__default['default'].createElement(RatingInfo, {
2438
- rating: bite === null || bite === void 0 ? void 0 : bite.strictAudienceRating
2048
+ rating: bite === null || bite === void 0 ? void 0 : bite.audienceRating
2439
2049
  }), /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
2440
2050
  item: bite,
2441
2051
  hovering: hovering
@@ -2453,7 +2063,7 @@ var BlerpTopRow = function BlerpTopRow(_ref5) {
2453
2063
  };
2454
2064
 
2455
2065
  var NewBlerp$1 = function NewBlerp(_ref6) {
2456
- var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original;
2066
+ var _bite$blacklistContex, _bite$reportedContent, _bite$blacklistContex2, _bite$image, _bite$image$original, _titleRef$current, _titleRef$current$get;
2457
2067
 
2458
2068
  var Waveform = _ref6.Waveform,
2459
2069
  bite = _ref6.bite,
@@ -2494,6 +2104,8 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2494
2104
  addedToPlace = _useState10[0],
2495
2105
  setAddedToPlace = _useState10[1];
2496
2106
 
2107
+ var titleRef = React.useRef(null);
2108
+
2497
2109
  var renderPlayStateIcon = function renderPlayStateIcon() {
2498
2110
  if (playState === "played") {
2499
2111
  return /*#__PURE__*/React__default['default'].createElement("svg", {
@@ -2642,27 +2254,26 @@ var NewBlerp$1 = function NewBlerp(_ref6) {
2642
2254
  }
2643
2255
  }, renderPlayStateIcon()), Waveform({
2644
2256
  hovering: hovering
2645
- })), /*#__PURE__*/React__default['default'].createElement(Text, {
2257
+ })), /*#__PURE__*/React__default['default'].createElement(HoverScrollText, {
2258
+ hover: ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : (_titleRef$current$get = _titleRef$current.getBoundingClientRect()) === null || _titleRef$current$get === void 0 ? void 0 : _titleRef$current$get.width) > 190,
2259
+ onClick: onTitleClick
2260
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2261
+ ref: titleRef,
2646
2262
  sx: {
2647
2263
  fontSize: "16px",
2648
2264
  fontWeight: "400",
2649
- maxWidth: "260px",
2650
- minWidth: "180px",
2651
- width: "100%",
2652
- whiteSpace: "nowrap",
2653
- overflowX: "hidden",
2654
- overflowY: "auto",
2655
- lineHeight: "1",
2656
- height: "23px",
2657
- margin: "10px 0 5px 0",
2658
- cursor: "pointer",
2659
- transition: "0.3s",
2660
- "&:hover": {
2661
- textDecoration: "underline"
2662
- }
2663
- },
2664
- onClick: onTitleClick
2265
+ lineHeight: "1"
2266
+ }
2665
2267
  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
2268
+ sx: {
2269
+ position: "absolute",
2270
+ right: "0",
2271
+ top: "0",
2272
+ width: "30px",
2273
+ height: "100%",
2274
+ background: "linear-gradient(270deg, rgba(40,50,51,1) 0%, rgba(0,0,0,0) 100%)"
2275
+ }
2276
+ })), /*#__PURE__*/React__default['default'].createElement(Stack, {
2666
2277
  direction: "row",
2667
2278
  alignItems: "center",
2668
2279
  sx: {