@blerp/design 1.2.15 → 1.2.17

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 +96 -46
  2. package/dist/index.esm.js +98 -48
  3. package/dist/index.umd.js +100 -49
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -20,7 +20,6 @@ var PauseRoundedIcon = require('@mui/icons-material/PauseRounded');
20
20
  var PlayArrowRoundedIcon = require('@mui/icons-material/PlayArrowRounded');
21
21
  var WarningRoundedIcon = require('@mui/icons-material/WarningRounded');
22
22
  require('@mui/icons-material/DoNotDisturbRounded');
23
- var _ = require('.');
24
23
  var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
25
24
  var _regeneratorRuntime = require('@babel/runtime/regenerator');
26
25
  var BookmarkAddOutlinedIcon = require('@mui/icons-material/BookmarkAddOutlined');
@@ -1574,7 +1573,10 @@ Blerp$1.propTypes = {
1574
1573
  var UserCard$1 = function UserCard(_ref) {
1575
1574
  var _user$twitchChannelIn, _user$twitchChannelIn2;
1576
1575
 
1577
- var user = _ref.user;
1576
+ var user = _ref.user,
1577
+ onUsernameClick = _ref.onUsernameClick,
1578
+ onFollowerClick = _ref.onFollowerClick,
1579
+ onCreatedClick = _ref.onCreatedClick;
1578
1580
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
1579
1581
  direction: "row",
1580
1582
  sx: {
@@ -1624,8 +1626,14 @@ var UserCard$1 = function UserCard(_ref) {
1624
1626
  whiteSpace: "nowrap",
1625
1627
  textOverflow: "ellipsis",
1626
1628
  marginBottom: "10px",
1627
- overflow: "hidden"
1628
- }
1629
+ overflow: "hidden",
1630
+ cursor: "pointer",
1631
+ transition: "0.3s",
1632
+ "&:hover": {
1633
+ textDecoration: "underline"
1634
+ }
1635
+ },
1636
+ onClick: onUsernameClick
1629
1637
  }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
1630
1638
  direction: "row",
1631
1639
  sx: {
@@ -1633,30 +1641,50 @@ var UserCard$1 = function UserCard(_ref) {
1633
1641
  justifyContent: "space-around"
1634
1642
  }
1635
1643
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1636
- alignItems: "center"
1644
+ alignItems: "center",
1645
+ sx: {
1646
+ cursor: "poiner",
1647
+ transition: "0.3s",
1648
+ "&:hover": {
1649
+ textDecoration: "underline"
1650
+ }
1651
+ },
1652
+ onClick: onFollowerClick
1637
1653
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1638
1654
  sx: {
1639
1655
  fontSize: "14px",
1640
- fontWeight: "400"
1656
+ fontWeight: "400",
1657
+ cursor: "inherit"
1641
1658
  }
1642
1659
  }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
1643
1660
  sx: {
1644
1661
  fontSize: "12px",
1645
1662
  fontWeight: "300",
1646
- color: "grey7.main"
1663
+ color: "grey7.main",
1664
+ cursor: "inherit"
1647
1665
  }
1648
1666
  }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
1649
- alignItems: "center"
1667
+ alignItems: "center",
1668
+ sx: {
1669
+ cursor: "poiner",
1670
+ transition: "0.3s",
1671
+ "&:hover": {
1672
+ textDecoration: "underline"
1673
+ }
1674
+ },
1675
+ onClick: onCreatedClick
1650
1676
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1651
1677
  sx: {
1652
1678
  fontSize: "14px",
1653
- fontWeight: "400"
1679
+ fontWeight: "400",
1680
+ cursor: "inherit"
1654
1681
  }
1655
1682
  }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
1656
1683
  sx: {
1657
1684
  fontSize: "12px",
1658
1685
  fontWeight: "300",
1659
- color: "grey7.main"
1686
+ color: "grey7.main",
1687
+ cursor: "inherit"
1660
1688
  }
1661
1689
  }, "created")))));
1662
1690
  };
@@ -2082,7 +2110,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2082
2110
  var Waveform = _ref8.Waveform,
2083
2111
  bite = _ref8.bite,
2084
2112
  playState = _ref8.playState,
2085
- play = _ref8.play;
2113
+ play = _ref8.play,
2114
+ onTitleClick = _ref8.onTitleClick;
2086
2115
 
2087
2116
  var _useState9 = React.useState(false),
2088
2117
  _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2278,8 +2307,14 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2278
2307
  overflowY: "auto",
2279
2308
  lineHeight: "1",
2280
2309
  height: "23px",
2281
- margin: "10px 0 5px 0"
2282
- }
2310
+ margin: "10px 0 5px 0",
2311
+ cursor: "pointer",
2312
+ transition: "0.3s",
2313
+ "&:hover": {
2314
+ textDecoration: "underline"
2315
+ }
2316
+ },
2317
+ onClick: onTitleClick
2283
2318
  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
2284
2319
  direction: "row",
2285
2320
  alignItems: "center",
@@ -2343,30 +2378,20 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2343
2378
  })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
2344
2379
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2345
2380
  count: saveCount
2346
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2347
- sx: {
2348
- fontWeight: "300",
2349
- fontSize: "12px",
2350
- color: "grey7.main",
2351
- maxWidth: "95px",
2352
- whiteSpace: "nowrap",
2353
- overflow: "hidden",
2354
- margin: "0 10px"
2355
- },
2381
+ }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2382
+ direction: "row",
2356
2383
  onClick: function onClick(e) {
2357
2384
  setUserCardRef(e.target);
2358
- } // onMouseLeave={() => {
2359
- // setUserCardRef(null);
2360
- // }}
2361
-
2362
- }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
2363
- sx: {
2364
- fontWeight: "300",
2365
- fontSize: "12px",
2366
- color: "grey7.main"
2385
+ },
2386
+ onMouseEnter: function onMouseEnter(e) {
2387
+ setTimeout(function () {
2388
+ setUserCardRef(e.target);
2389
+ }, [500]);
2390
+ },
2391
+ onMouseLeave: function onMouseLeave(e) {
2392
+ setUserCardRef(null);
2367
2393
  }
2368
- }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
2369
- id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
2394
+ }, /*#__PURE__*/React__default['default'].createElement(Popover, {
2370
2395
  open: openUserCard,
2371
2396
  anchorEl: userCardRef,
2372
2397
  anchorOrigin: {
@@ -2377,23 +2402,48 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2377
2402
  vertical: "top",
2378
2403
  horizontal: "left"
2379
2404
  },
2405
+ disablePortal: true,
2406
+ hideBackdrop: true,
2407
+ sx: {
2408
+ pointerEvents: "none"
2409
+ },
2380
2410
  PaperProps: {
2381
2411
  // onMouseEnter: (e) => {
2382
2412
  // setUserCardRef(e.target);
2383
2413
  // },
2414
+ id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
2384
2415
  sx: {
2416
+ pointerEvents: "auto",
2385
2417
  backgroundColor: "transparent"
2386
2418
  },
2387
- onMouseLeave: function onMouseLeave() {
2419
+ onMouseLeave: function onMouseLeave(e) {
2388
2420
  setUserCardRef(null);
2389
2421
  }
2390
- },
2391
- onClose: function onClose() {
2392
- return setUserCardRef(null);
2393
- }
2422
+ } // onClose={() => setUserCardRef(null)}
2423
+
2394
2424
  }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
2395
2425
  user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
2396
- })));
2426
+ })), /*#__PURE__*/React__default['default'].createElement(Text, {
2427
+ sx: {
2428
+ fontWeight: "300",
2429
+ fontSize: "12px",
2430
+ color: "grey7.main",
2431
+ maxWidth: "95px",
2432
+ whiteSpace: "nowrap",
2433
+ overflow: "hidden",
2434
+ margin: "0 10px",
2435
+ cursor: "pointer",
2436
+ "&:hover": {
2437
+ textDecoration: "underline"
2438
+ }
2439
+ }
2440
+ }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default['default'].createElement(Text, {
2441
+ sx: {
2442
+ fontWeight: "300",
2443
+ fontSize: "12px",
2444
+ color: "grey7.main"
2445
+ }
2446
+ }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
2397
2447
  };
2398
2448
 
2399
2449
  var _templateObject$f;
@@ -2485,7 +2535,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2485
2535
  return "".concat((index - 2) * 10, "px");
2486
2536
  };
2487
2537
 
2488
- return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2538
+ return /*#__PURE__*/React__default['default'].createElement(Stack, {
2489
2539
  sx: {
2490
2540
  minWidth: "250px",
2491
2541
  maxWidth: "290px",
@@ -2508,15 +2558,15 @@ var GroupCard$1 = function GroupCard(_ref) {
2508
2558
  onMouseLeave: function onMouseLeave() {
2509
2559
  setHovering(false);
2510
2560
  }
2511
- }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2561
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2512
2562
  height: "100%"
2513
- }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
2563
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2514
2564
  sx: {
2515
2565
  color: "grey5.main",
2516
2566
  fontSize: "12px",
2517
2567
  fontWeight: "300"
2518
2568
  }
2519
- }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(_.Text, {
2569
+ }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(Text, {
2520
2570
  sx: {
2521
2571
  whiteSpace: "nowrap",
2522
2572
  overflowX: "hidden",
@@ -2528,7 +2578,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2528
2578
  height: "31px",
2529
2579
  marginBottom: "5px"
2530
2580
  }
2531
- }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2581
+ }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
2532
2582
  direction: "row"
2533
2583
  }, /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
2534
2584
  item: group,
@@ -2536,7 +2586,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2536
2586
  }), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
2537
2587
  saved: group === null || group === void 0 ? void 0 : group.saved,
2538
2588
  count: saveCount
2539
- })), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2589
+ })), /*#__PURE__*/React__default['default'].createElement(Stack, {
2540
2590
  direction: "row",
2541
2591
  sx: {
2542
2592
  width: "100%",
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$2, Grid as Grid$1, Stack as Stack$2, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
1
+ import { SvgIcon, InputAdornment as InputAdornment$1, Box as Box$1, Container as Container$2, Grid as Grid$1, Stack as Stack$1, ImageList as ImageList$1, Autocomplete as Autocomplete$1, Button as Button$1, ButtonGroup as ButtonGroup$1, Checkbox as Checkbox$1, Fab, Radio, Rating as Rating$1, Select as Select$1, Slider as Slider$3, Switch as Switch$2, TextField, BottomNavigation as BottomNavigation$1, Breadcrumbs as Breadcrumbs$1, Drawer as Drawer$1, Link as Link$1, Menu as Menu$1, Pagination as Pagination$1, SpeedDial as SpeedDial$1, Stepper as Stepper$1, Tabs as Tabs$1, Tab as Tab$1, Accordion as Accordion$1, AppBar as AppBar$1, Card as Card$1, Paper as Paper$1, Alert as Alert$1, Backdrop as Backdrop$1, Dialog as Dialog$1, LinearProgress as LinearProgress$1, Skeleton as Skeleton$1, Snackbar as Snackbar$1, Avatar as Avatar$1, Badge as Badge$1, Chip as Chip$1, Divider as Divider$1, List as List$1, Table as Table$1, Tooltip as Tooltip$1, Toolbar as Toolbar$1, Typography, Modal as Modal$1, Popover as Popover$1, IconButton as IconButton$1, MenuItem as MenuItem$1 } from '@mui/material';
2
2
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
3
3
  import PropTypes from 'prop-types';
4
4
  import * as React from 'react';
@@ -17,7 +17,6 @@ import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
17
17
  import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
18
18
  import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
19
19
  import '@mui/icons-material/DoNotDisturbRounded';
20
- import { Stack as Stack$1, Text as Text$1 } from '.';
21
20
  import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
22
21
  import _regeneratorRuntime from '@babel/runtime/regenerator';
23
22
  import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
@@ -1499,7 +1498,10 @@ Blerp$1.propTypes = {
1499
1498
  var UserCard$1 = function UserCard(_ref) {
1500
1499
  var _user$twitchChannelIn, _user$twitchChannelIn2;
1501
1500
 
1502
- var user = _ref.user;
1501
+ var user = _ref.user,
1502
+ onUsernameClick = _ref.onUsernameClick,
1503
+ onFollowerClick = _ref.onFollowerClick,
1504
+ onCreatedClick = _ref.onCreatedClick;
1503
1505
  return /*#__PURE__*/React__default.createElement(Stack, {
1504
1506
  direction: "row",
1505
1507
  sx: {
@@ -1549,8 +1551,14 @@ var UserCard$1 = function UserCard(_ref) {
1549
1551
  whiteSpace: "nowrap",
1550
1552
  textOverflow: "ellipsis",
1551
1553
  marginBottom: "10px",
1552
- overflow: "hidden"
1553
- }
1554
+ overflow: "hidden",
1555
+ cursor: "pointer",
1556
+ transition: "0.3s",
1557
+ "&:hover": {
1558
+ textDecoration: "underline"
1559
+ }
1560
+ },
1561
+ onClick: onUsernameClick
1554
1562
  }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default.createElement(Stack, {
1555
1563
  direction: "row",
1556
1564
  sx: {
@@ -1558,30 +1566,50 @@ var UserCard$1 = function UserCard(_ref) {
1558
1566
  justifyContent: "space-around"
1559
1567
  }
1560
1568
  }, /*#__PURE__*/React__default.createElement(Stack, {
1561
- alignItems: "center"
1569
+ alignItems: "center",
1570
+ sx: {
1571
+ cursor: "poiner",
1572
+ transition: "0.3s",
1573
+ "&:hover": {
1574
+ textDecoration: "underline"
1575
+ }
1576
+ },
1577
+ onClick: onFollowerClick
1562
1578
  }, /*#__PURE__*/React__default.createElement(Text, {
1563
1579
  sx: {
1564
1580
  fontSize: "14px",
1565
- fontWeight: "400"
1581
+ fontWeight: "400",
1582
+ cursor: "inherit"
1566
1583
  }
1567
1584
  }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default.createElement(Text, {
1568
1585
  sx: {
1569
1586
  fontSize: "12px",
1570
1587
  fontWeight: "300",
1571
- color: "grey7.main"
1588
+ color: "grey7.main",
1589
+ cursor: "inherit"
1572
1590
  }
1573
1591
  }, "followers")), /*#__PURE__*/React__default.createElement(Stack, {
1574
- alignItems: "center"
1592
+ alignItems: "center",
1593
+ sx: {
1594
+ cursor: "poiner",
1595
+ transition: "0.3s",
1596
+ "&:hover": {
1597
+ textDecoration: "underline"
1598
+ }
1599
+ },
1600
+ onClick: onCreatedClick
1575
1601
  }, /*#__PURE__*/React__default.createElement(Text, {
1576
1602
  sx: {
1577
1603
  fontSize: "14px",
1578
- fontWeight: "400"
1604
+ fontWeight: "400",
1605
+ cursor: "inherit"
1579
1606
  }
1580
1607
  }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default.createElement(Text, {
1581
1608
  sx: {
1582
1609
  fontSize: "12px",
1583
1610
  fontWeight: "300",
1584
- color: "grey7.main"
1611
+ color: "grey7.main",
1612
+ cursor: "inherit"
1585
1613
  }
1586
1614
  }, "created")))));
1587
1615
  };
@@ -2007,7 +2035,8 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2007
2035
  var Waveform = _ref8.Waveform,
2008
2036
  bite = _ref8.bite,
2009
2037
  playState = _ref8.playState,
2010
- play = _ref8.play;
2038
+ play = _ref8.play,
2039
+ onTitleClick = _ref8.onTitleClick;
2011
2040
 
2012
2041
  var _useState9 = useState(false),
2013
2042
  _useState10 = _slicedToArray(_useState9, 2),
@@ -2203,8 +2232,14 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2203
2232
  overflowY: "auto",
2204
2233
  lineHeight: "1",
2205
2234
  height: "23px",
2206
- margin: "10px 0 5px 0"
2207
- }
2235
+ margin: "10px 0 5px 0",
2236
+ cursor: "pointer",
2237
+ transition: "0.3s",
2238
+ "&:hover": {
2239
+ textDecoration: "underline"
2240
+ }
2241
+ },
2242
+ onClick: onTitleClick
2208
2243
  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default.createElement(Stack, {
2209
2244
  direction: "row",
2210
2245
  alignItems: "center",
@@ -2268,30 +2303,20 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2268
2303
  })))), /*#__PURE__*/React__default.createElement(FavoriteIconWithCounter, {
2269
2304
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2270
2305
  count: saveCount
2271
- }), /*#__PURE__*/React__default.createElement(Text, {
2272
- sx: {
2273
- fontWeight: "300",
2274
- fontSize: "12px",
2275
- color: "grey7.main",
2276
- maxWidth: "95px",
2277
- whiteSpace: "nowrap",
2278
- overflow: "hidden",
2279
- margin: "0 10px"
2280
- },
2306
+ }), /*#__PURE__*/React__default.createElement(Stack, {
2307
+ direction: "row",
2281
2308
  onClick: function onClick(e) {
2282
2309
  setUserCardRef(e.target);
2283
- } // onMouseLeave={() => {
2284
- // setUserCardRef(null);
2285
- // }}
2286
-
2287
- }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default.createElement(Text, {
2288
- sx: {
2289
- fontWeight: "300",
2290
- fontSize: "12px",
2291
- color: "grey7.main"
2310
+ },
2311
+ onMouseEnter: function onMouseEnter(e) {
2312
+ setTimeout(function () {
2313
+ setUserCardRef(e.target);
2314
+ }, [500]);
2315
+ },
2316
+ onMouseLeave: function onMouseLeave(e) {
2317
+ setUserCardRef(null);
2292
2318
  }
2293
- }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default.createElement(Popover, {
2294
- id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
2319
+ }, /*#__PURE__*/React__default.createElement(Popover, {
2295
2320
  open: openUserCard,
2296
2321
  anchorEl: userCardRef,
2297
2322
  anchorOrigin: {
@@ -2302,23 +2327,48 @@ var NewBlerp$1 = function NewBlerp(_ref8) {
2302
2327
  vertical: "top",
2303
2328
  horizontal: "left"
2304
2329
  },
2330
+ disablePortal: true,
2331
+ hideBackdrop: true,
2332
+ sx: {
2333
+ pointerEvents: "none"
2334
+ },
2305
2335
  PaperProps: {
2306
2336
  // onMouseEnter: (e) => {
2307
2337
  // setUserCardRef(e.target);
2308
2338
  // },
2339
+ id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
2309
2340
  sx: {
2341
+ pointerEvents: "auto",
2310
2342
  backgroundColor: "transparent"
2311
2343
  },
2312
- onMouseLeave: function onMouseLeave() {
2344
+ onMouseLeave: function onMouseLeave(e) {
2313
2345
  setUserCardRef(null);
2314
2346
  }
2315
- },
2316
- onClose: function onClose() {
2317
- return setUserCardRef(null);
2318
- }
2347
+ } // onClose={() => setUserCardRef(null)}
2348
+
2319
2349
  }, /*#__PURE__*/React__default.createElement(UserCard$1, {
2320
2350
  user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
2321
- })));
2351
+ })), /*#__PURE__*/React__default.createElement(Text, {
2352
+ sx: {
2353
+ fontWeight: "300",
2354
+ fontSize: "12px",
2355
+ color: "grey7.main",
2356
+ maxWidth: "95px",
2357
+ whiteSpace: "nowrap",
2358
+ overflow: "hidden",
2359
+ margin: "0 10px",
2360
+ cursor: "pointer",
2361
+ "&:hover": {
2362
+ textDecoration: "underline"
2363
+ }
2364
+ }
2365
+ }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default.createElement(Text, {
2366
+ sx: {
2367
+ fontWeight: "300",
2368
+ fontSize: "12px",
2369
+ color: "grey7.main"
2370
+ }
2371
+ }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
2322
2372
  };
2323
2373
 
2324
2374
  var _templateObject$f;
@@ -2410,7 +2460,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2410
2460
  return "".concat((index - 2) * 10, "px");
2411
2461
  };
2412
2462
 
2413
- return /*#__PURE__*/React__default.createElement(Stack$1, {
2463
+ return /*#__PURE__*/React__default.createElement(Stack, {
2414
2464
  sx: {
2415
2465
  minWidth: "250px",
2416
2466
  maxWidth: "290px",
@@ -2433,15 +2483,15 @@ var GroupCard$1 = function GroupCard(_ref) {
2433
2483
  onMouseLeave: function onMouseLeave() {
2434
2484
  setHovering(false);
2435
2485
  }
2436
- }, /*#__PURE__*/React__default.createElement(Stack$1, {
2486
+ }, /*#__PURE__*/React__default.createElement(Stack, {
2437
2487
  height: "100%"
2438
- }, /*#__PURE__*/React__default.createElement(Text$1, {
2488
+ }, /*#__PURE__*/React__default.createElement(Text, {
2439
2489
  sx: {
2440
2490
  color: "grey5.main",
2441
2491
  fontSize: "12px",
2442
2492
  fontWeight: "300"
2443
2493
  }
2444
- }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default.createElement(Text$1, {
2494
+ }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default.createElement(Text, {
2445
2495
  sx: {
2446
2496
  whiteSpace: "nowrap",
2447
2497
  overflowX: "hidden",
@@ -2453,7 +2503,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2453
2503
  height: "31px",
2454
2504
  marginBottom: "5px"
2455
2505
  }
2456
- }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default.createElement(Stack$1, {
2506
+ }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default.createElement(Stack, {
2457
2507
  direction: "row"
2458
2508
  }, /*#__PURE__*/React__default.createElement(AddedToIcons, {
2459
2509
  item: group,
@@ -2461,7 +2511,7 @@ var GroupCard$1 = function GroupCard(_ref) {
2461
2511
  }), /*#__PURE__*/React__default.createElement(FavoriteIconWithCounter, {
2462
2512
  saved: group === null || group === void 0 ? void 0 : group.saved,
2463
2513
  count: saveCount
2464
- })), /*#__PURE__*/React__default.createElement(Stack$1, {
2514
+ })), /*#__PURE__*/React__default.createElement(Stack, {
2465
2515
  direction: "row",
2466
2516
  sx: {
2467
2517
  width: "100%",
@@ -91386,7 +91436,7 @@ var Theme = BlerpTheme;
91386
91436
  var Box = Box$1;
91387
91437
  var Container = Container$2;
91388
91438
  var Grid = Grid$1;
91389
- var Stack = Stack$2;
91439
+ var Stack = Stack$1;
91390
91440
  var ImageList = ImageList$1;
91391
91441
  var Autocomplete = Autocomplete$1;
91392
91442
  var Button = Button$1;
package/dist/index.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), 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/DoNotDisturbRounded'), require('.'), 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('@babel/runtime/helpers/defineProperty'), 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/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'), require('@mui/icons-material/VisibilityOffRounded')) :
3
- 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/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '.', '@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', '@babel/runtime/helpers/defineProperty', '@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/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', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
- (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.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global._, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, 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, global.VisibilityOffRoundedIcon));
5
- }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, _, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
2
+ 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/AddRounded'), require('@mui/icons-material/ArrowDropDownRounded'), 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/DoNotDisturbRounded'), 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('@babel/runtime/helpers/defineProperty'), 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/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'), require('@mui/icons-material/VisibilityOffRounded')) :
3
+ 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/AddRounded', '@mui/icons-material/ArrowDropDownRounded', '@mui/icons-material/Favorite', '@mui/icons-material/FavoriteBorder', '@mui/icons-material/PauseRounded', '@mui/icons-material/PlayArrowRounded', '@mui/icons-material/WarningRounded', '@mui/icons-material/DoNotDisturbRounded', '@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', '@babel/runtime/helpers/defineProperty', '@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/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', '@mui/icons-material/VisibilityOffRounded'], factory) :
4
+ (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.AddRoundedIcon, global.ArrowDropDownRoundedIcon, global.FavoriteIcon, global.FavoriteBorderIcon, global.PauseRoundedIcon, global.PlayArrowRoundedIcon, global.WarningRoundedIcon, null, global._asyncToGenerator, global._regeneratorRuntime, global.BookmarkAddOutlinedIcon, global.MoreHorizRoundedIcon, global.reactPalette, global._typeof, global.KeyboardArrowRightRoundedIcon, global._defineProperty, global.KeyboardArrowDownRoundedIcon, global.CloseRoundedIcon, global.FileUploadRoundedIcon, global._extends, global.AvatarEditor, global.Dropzone, global.InsertPhotoRoundedIcon, global.styles, global.Slide, global.Fade, global.Lottie, 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, global.VisibilityOffRoundedIcon));
5
+ }(this, (function (exports, material, _slicedToArray, PropTypes, React, reactColorExtractor, styled, _taggedTemplateLiteral, iconsMaterial, BookmarkOutlinedIcon, LockRoundedIcon, AddRoundedIcon, ArrowDropDownRoundedIcon, FavoriteIcon, FavoriteBorderIcon, PauseRoundedIcon, PlayArrowRoundedIcon, WarningRoundedIcon, DoNotDisturbRoundedIcon, _asyncToGenerator, _regeneratorRuntime, BookmarkAddOutlinedIcon, MoreHorizRoundedIcon, reactPalette, _typeof, KeyboardArrowRightRoundedIcon, _defineProperty, KeyboardArrowDownRoundedIcon, CloseRoundedIcon, FileUploadRoundedIcon, _extends, AvatarEditor, Dropzone, InsertPhotoRoundedIcon, styles, Slide, Fade, Lottie, FacebookIcon, InstagramIcon, ModeEditRoundedIcon, PersonAddRoundedIcon, PinterestIcon, TwitterIcon, YouTubeIcon, PersonRemoveRoundedIcon, _toConsumableArray, FilterAltRounded, MenuRoundedIcon, ViewModuleRoundedIcon, SettingsRounded, SortRoundedIcon, ChevronRightRoundedIcon, PersonRoundedIcon, SearchRoundedIcon, BookmarkRemoveOutlinedIcon, VisibilityOffRoundedIcon) { 'use strict';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -1518,7 +1518,10 @@
1518
1518
  var UserCard$1 = function UserCard(_ref) {
1519
1519
  var _user$twitchChannelIn, _user$twitchChannelIn2;
1520
1520
 
1521
- var user = _ref.user;
1521
+ var user = _ref.user,
1522
+ onUsernameClick = _ref.onUsernameClick,
1523
+ onFollowerClick = _ref.onFollowerClick,
1524
+ onCreatedClick = _ref.onCreatedClick;
1522
1525
  return /*#__PURE__*/React__default['default'].createElement(Stack, {
1523
1526
  direction: "row",
1524
1527
  sx: {
@@ -1568,8 +1571,14 @@
1568
1571
  whiteSpace: "nowrap",
1569
1572
  textOverflow: "ellipsis",
1570
1573
  marginBottom: "10px",
1571
- overflow: "hidden"
1572
- }
1574
+ overflow: "hidden",
1575
+ cursor: "pointer",
1576
+ transition: "0.3s",
1577
+ "&:hover": {
1578
+ textDecoration: "underline"
1579
+ }
1580
+ },
1581
+ onClick: onUsernameClick
1573
1582
  }, user === null || user === void 0 ? void 0 : user.username), /*#__PURE__*/React__default['default'].createElement(Stack, {
1574
1583
  direction: "row",
1575
1584
  sx: {
@@ -1577,30 +1586,50 @@
1577
1586
  justifyContent: "space-around"
1578
1587
  }
1579
1588
  }, /*#__PURE__*/React__default['default'].createElement(Stack, {
1580
- alignItems: "center"
1589
+ alignItems: "center",
1590
+ sx: {
1591
+ cursor: "poiner",
1592
+ transition: "0.3s",
1593
+ "&:hover": {
1594
+ textDecoration: "underline"
1595
+ }
1596
+ },
1597
+ onClick: onFollowerClick
1581
1598
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1582
1599
  sx: {
1583
1600
  fontSize: "14px",
1584
- fontWeight: "400"
1601
+ fontWeight: "400",
1602
+ cursor: "inherit"
1585
1603
  }
1586
1604
  }, (user === null || user === void 0 ? void 0 : user.followerCount) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
1587
1605
  sx: {
1588
1606
  fontSize: "12px",
1589
1607
  fontWeight: "300",
1590
- color: "grey7.main"
1608
+ color: "grey7.main",
1609
+ cursor: "inherit"
1591
1610
  }
1592
1611
  }, "followers")), /*#__PURE__*/React__default['default'].createElement(Stack, {
1593
- alignItems: "center"
1612
+ alignItems: "center",
1613
+ sx: {
1614
+ cursor: "poiner",
1615
+ transition: "0.3s",
1616
+ "&:hover": {
1617
+ textDecoration: "underline"
1618
+ }
1619
+ },
1620
+ onClick: onCreatedClick
1594
1621
  }, /*#__PURE__*/React__default['default'].createElement(Text, {
1595
1622
  sx: {
1596
1623
  fontSize: "14px",
1597
- fontWeight: "400"
1624
+ fontWeight: "400",
1625
+ cursor: "inherit"
1598
1626
  }
1599
1627
  }, (user === null || user === void 0 ? void 0 : user.created) || 0), /*#__PURE__*/React__default['default'].createElement(Text, {
1600
1628
  sx: {
1601
1629
  fontSize: "12px",
1602
1630
  fontWeight: "300",
1603
- color: "grey7.main"
1631
+ color: "grey7.main",
1632
+ cursor: "inherit"
1604
1633
  }
1605
1634
  }, "created")))));
1606
1635
  };
@@ -2026,7 +2055,8 @@
2026
2055
  var Waveform = _ref8.Waveform,
2027
2056
  bite = _ref8.bite,
2028
2057
  playState = _ref8.playState,
2029
- play = _ref8.play;
2058
+ play = _ref8.play,
2059
+ onTitleClick = _ref8.onTitleClick;
2030
2060
 
2031
2061
  var _useState9 = React.useState(false),
2032
2062
  _useState10 = _slicedToArray__default['default'](_useState9, 2),
@@ -2222,8 +2252,14 @@
2222
2252
  overflowY: "auto",
2223
2253
  lineHeight: "1",
2224
2254
  height: "23px",
2225
- margin: "10px 0 5px 0"
2226
- }
2255
+ margin: "10px 0 5px 0",
2256
+ cursor: "pointer",
2257
+ transition: "0.3s",
2258
+ "&:hover": {
2259
+ textDecoration: "underline"
2260
+ }
2261
+ },
2262
+ onClick: onTitleClick
2227
2263
  }, bite === null || bite === void 0 ? void 0 : bite.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
2228
2264
  direction: "row",
2229
2265
  alignItems: "center",
@@ -2287,30 +2323,20 @@
2287
2323
  })))), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
2288
2324
  saved: bite === null || bite === void 0 ? void 0 : bite.saved,
2289
2325
  count: saveCount
2290
- }), /*#__PURE__*/React__default['default'].createElement(Text, {
2291
- sx: {
2292
- fontWeight: "300",
2293
- fontSize: "12px",
2294
- color: "grey7.main",
2295
- maxWidth: "95px",
2296
- whiteSpace: "nowrap",
2297
- overflow: "hidden",
2298
- margin: "0 10px"
2299
- },
2326
+ }), /*#__PURE__*/React__default['default'].createElement(Stack, {
2327
+ direction: "row",
2300
2328
  onClick: function onClick(e) {
2301
2329
  setUserCardRef(e.target);
2302
- } // onMouseLeave={() => {
2303
- // setUserCardRef(null);
2304
- // }}
2305
-
2306
- }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject.username), /*#__PURE__*/React__default['default'].createElement(Text, {
2307
- sx: {
2308
- fontWeight: "300",
2309
- fontSize: "12px",
2310
- color: "grey7.main"
2330
+ },
2331
+ onMouseEnter: function onMouseEnter(e) {
2332
+ setTimeout(function () {
2333
+ setUserCardRef(e.target);
2334
+ }, [500]);
2335
+ },
2336
+ onMouseLeave: function onMouseLeave(e) {
2337
+ setUserCardRef(null);
2311
2338
  }
2312
- }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))), /*#__PURE__*/React__default['default'].createElement(Popover, {
2313
- id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2._id),
2339
+ }, /*#__PURE__*/React__default['default'].createElement(Popover, {
2314
2340
  open: openUserCard,
2315
2341
  anchorEl: userCardRef,
2316
2342
  anchorOrigin: {
@@ -2321,23 +2347,48 @@
2321
2347
  vertical: "top",
2322
2348
  horizontal: "left"
2323
2349
  },
2350
+ disablePortal: true,
2351
+ hideBackdrop: true,
2352
+ sx: {
2353
+ pointerEvents: "none"
2354
+ },
2324
2355
  PaperProps: {
2325
2356
  // onMouseEnter: (e) => {
2326
2357
  // setUserCardRef(e.target);
2327
2358
  // },
2359
+ id: "user-card-".concat(bite === null || bite === void 0 ? void 0 : bite._id, "-").concat(bite === null || bite === void 0 ? void 0 : (_bite$ownerObject = bite.ownerObject) === null || _bite$ownerObject === void 0 ? void 0 : _bite$ownerObject._id),
2328
2360
  sx: {
2361
+ pointerEvents: "auto",
2329
2362
  backgroundColor: "transparent"
2330
2363
  },
2331
- onMouseLeave: function onMouseLeave() {
2364
+ onMouseLeave: function onMouseLeave(e) {
2332
2365
  setUserCardRef(null);
2333
2366
  }
2334
- },
2335
- onClose: function onClose() {
2336
- return setUserCardRef(null);
2337
- }
2367
+ } // onClose={() => setUserCardRef(null)}
2368
+
2338
2369
  }, /*#__PURE__*/React__default['default'].createElement(UserCard$1, {
2339
2370
  user: bite === null || bite === void 0 ? void 0 : bite.ownerObject
2340
- })));
2371
+ })), /*#__PURE__*/React__default['default'].createElement(Text, {
2372
+ sx: {
2373
+ fontWeight: "300",
2374
+ fontSize: "12px",
2375
+ color: "grey7.main",
2376
+ maxWidth: "95px",
2377
+ whiteSpace: "nowrap",
2378
+ overflow: "hidden",
2379
+ margin: "0 10px",
2380
+ cursor: "pointer",
2381
+ "&:hover": {
2382
+ textDecoration: "underline"
2383
+ }
2384
+ }
2385
+ }, bite === null || bite === void 0 ? void 0 : (_bite$ownerObject2 = bite.ownerObject) === null || _bite$ownerObject2 === void 0 ? void 0 : _bite$ownerObject2.username)), /*#__PURE__*/React__default['default'].createElement(Text, {
2386
+ sx: {
2387
+ fontWeight: "300",
2388
+ fontSize: "12px",
2389
+ color: "grey7.main"
2390
+ }
2391
+ }, ((bite === null || bite === void 0 ? void 0 : bite.audioDuration) / 1000).toFixed(0), "s")))));
2341
2392
  };
2342
2393
 
2343
2394
  var _templateObject$f;
@@ -2429,7 +2480,7 @@
2429
2480
  return "".concat((index - 2) * 10, "px");
2430
2481
  };
2431
2482
 
2432
- return /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2483
+ return /*#__PURE__*/React__default['default'].createElement(Stack, {
2433
2484
  sx: {
2434
2485
  minWidth: "250px",
2435
2486
  maxWidth: "290px",
@@ -2452,15 +2503,15 @@
2452
2503
  onMouseLeave: function onMouseLeave() {
2453
2504
  setHovering(false);
2454
2505
  }
2455
- }, /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2506
+ }, /*#__PURE__*/React__default['default'].createElement(Stack, {
2456
2507
  height: "100%"
2457
- }, /*#__PURE__*/React__default['default'].createElement(_.Text, {
2508
+ }, /*#__PURE__*/React__default['default'].createElement(Text, {
2458
2509
  sx: {
2459
2510
  color: "grey5.main",
2460
2511
  fontSize: "12px",
2461
2512
  fontWeight: "300"
2462
2513
  }
2463
- }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(_.Text, {
2514
+ }, (group === null || group === void 0 ? void 0 : group.biteCount) || 0, " Sounds"), /*#__PURE__*/React__default['default'].createElement(Text, {
2464
2515
  sx: {
2465
2516
  whiteSpace: "nowrap",
2466
2517
  overflowX: "hidden",
@@ -2472,7 +2523,7 @@
2472
2523
  height: "31px",
2473
2524
  marginBottom: "5px"
2474
2525
  }
2475
- }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2526
+ }, group === null || group === void 0 ? void 0 : group.title), /*#__PURE__*/React__default['default'].createElement(Stack, {
2476
2527
  direction: "row"
2477
2528
  }, /*#__PURE__*/React__default['default'].createElement(AddedToIcons, {
2478
2529
  item: group,
@@ -2480,7 +2531,7 @@
2480
2531
  }), /*#__PURE__*/React__default['default'].createElement(FavoriteIconWithCounter, {
2481
2532
  saved: group === null || group === void 0 ? void 0 : group.saved,
2482
2533
  count: saveCount
2483
- })), /*#__PURE__*/React__default['default'].createElement(_.Stack, {
2534
+ })), /*#__PURE__*/React__default['default'].createElement(Stack, {
2484
2535
  direction: "row",
2485
2536
  sx: {
2486
2537
  width: "100%",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blerp/design",
3
- "version": "1.2.15",
3
+ "version": "1.2.17",
4
4
  "description": "Blerp UI",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {