@blerp/design 1.3.9 → 1.3.11

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.
@@ -18,10 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
19
19
 
20
20
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
21
- const BlerpImage = styled__default['default'].div(_templateObject || (_templateObject = _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"])), props => props.url);
22
- const SaveContainer = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
23
- const BlerpImageScrim = styled__default['default'].div(_templateObject3 || (_templateObject3 = _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"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
24
- const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4 || (_templateObject4 = _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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
21
+ const BlerpImage = styled__default['default'].div(_templateObject || (_templateObject = _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"])), props => props.url);
22
+ const SaveContainer = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
23
+ const BlerpImageScrim = styled__default['default'].div(_templateObject3 || (_templateObject3 = _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"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
24
+ const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4 || (_templateObject4 = _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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
25
25
 
26
26
  const BlerpImageRow = _ref => {
27
27
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
@@ -619,7 +619,7 @@ const NewBlerp = _ref7 => {
619
619
  }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
620
620
  sx: {
621
621
  transition: "0.3s",
622
- opacity: hovering && !hoveringAddTo || defaultHovering ? "1" : "0",
622
+ opacity: hovering && !hoveringAddTo ? "1" : "0",
623
623
  pointerEvents: "none",
624
624
  zIndex: "3"
625
625
  }
@@ -11,8 +11,6 @@ var reactPalette = require('react-palette');
11
11
  var index = require('./index.js');
12
12
  var styled = require('styled-components');
13
13
  var LockRoundedIcon = require('@mui/icons-material/LockRounded');
14
- var LottieAnimation = require('./Lotties/LottieAnimation.js');
15
- var JiggleLock = require('./Lotties/JiggleLock.json.js');
16
14
  var Icons = require('./Icons/Icons.js');
17
15
 
18
16
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,12 +25,12 @@ var LockRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(LockRoundedIco
27
25
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
28
26
  //primary and secondary action buttons
29
27
 
30
- const YellowHoverBorder = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
31
- const LineClamp = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
32
- const TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
33
- const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n height: 32px;\n width: 100%;\n position: absolute;\n background-color: ", ";\n opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
34
- const LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n z-index: -1;\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n z-index: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: \"hidden\";\n transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n opacity: ", ";\n backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
35
- const LockedScrimBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n /* transition: opacity 0.3s ease-in-out; */\n\n background-color: ", ";\n\n opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
28
+ const YellowHoverBorder = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
29
+ const LineClamp = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
30
+ const TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
31
+ const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n height: 32px;\n width: 100%;\n position: absolute;\n background-color: ", ";\n opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
32
+ const LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n z-index: -1;\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n z-index: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: \"hidden\";\n transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n opacity: ", ";\n backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
33
+ const LockedScrimBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n /* transition: opacity 0.3s ease-in-out; */\n\n background-color: ", ";\n\n opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
36
34
  const PremiumCollectionCard = _ref => {
37
35
  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
38
36
 
@@ -419,19 +417,7 @@ const PremiumCollectionCard = _ref => {
419
417
  collectionHovered: collectionHovered
420
418
  }, /*#__PURE__*/React__default['default'].createElement(LockedScrimBackground, {
421
419
  collectionHovered: collectionHovered
422
- }), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
423
- sx: {
424
- position: "absolute",
425
- bottom: "104px"
426
- }
427
- }, /*#__PURE__*/React__default['default'].createElement(LottieAnimation, {
428
- lotti: JiggleLock['default'],
429
- height: 60,
430
- width: 240,
431
- style: {
432
- margin: "0px -64px"
433
- }
434
- })), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React__default['default'].createElement(index.Text, {
420
+ }), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React__default['default'].createElement(index.Text, {
435
421
  sx: {
436
422
  color: "white.override",
437
423
  textAlign: "center",
@@ -47,7 +47,6 @@ const UsernameWithPopout = _ref => {
47
47
  },
48
48
  disableAutoFocus: true,
49
49
  disableRestoreFocus: true,
50
- disablePortal: true,
51
50
  hideBackdrop: true,
52
51
  sx: {
53
52
  pointerEvents: "none"
@@ -86,7 +85,8 @@ const UsernameWithPopout = _ref => {
86
85
  textDecoration: "underline"
87
86
  },
88
87
  ...textStyle
89
- }
88
+ },
89
+ onClick: onUsernameClick
90
90
  }, user === null || user === void 0 ? void 0 : user.username));
91
91
  };
92
92
 
@@ -8,10 +8,10 @@ import { Stack, Text, Tooltip } from '../index.js';
8
8
  import { PlayOutlineIcon, OpenLockIcon, BookmarkAddRounded } from '../Icons/Icons.js';
9
9
 
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
- const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), props => props.url);
12
- const SaveContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
13
- const BlerpImageScrim = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
14
- const BlerpImageScrimPrivate = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
11
+ const BlerpImage = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), props => props.url);
12
+ const SaveContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right: 0;\n width: 20px;\n height: 20px;\n opacity: 1;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 5px;\n transition: 0.3s;\n background-color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover svg {\n color: ", ";\n }\n"])), props => props.theme.colors.whiteOverride, props => props.isLocked ? "".concat(props.theme.colors.seafoam) : props.isPremium ? "".concat(props.theme.colors.starling) : "".concat(props.theme.colors.seafoam), props => props.theme.colors.white);
13
+ const BlerpImageScrim = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), props => props.theme.colors.grey6Override, props => props.theme.colors.grey6Override, SaveContainer);
14
+ const BlerpImageScrimPrivate = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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\n &:hover p {\n display: block;\n }\n &:hover svg {\n display: none;\n }\n"])), props => props.theme.colors.grey3, props => props.theme.colors.grey3, SaveContainer);
15
15
 
16
16
  const BlerpImageRow = _ref => {
17
17
  var _bite$image, _bite$image$original, _bite$image2, _bite$image2$original, _bite$giphy;
@@ -600,7 +600,7 @@ const NewBlerp = _ref7 => {
600
600
  }), /*#__PURE__*/React.createElement(Stack, {
601
601
  sx: {
602
602
  transition: "0.3s",
603
- opacity: hovering && !hoveringAddTo || defaultHovering ? "1" : "0",
603
+ opacity: hovering && !hoveringAddTo ? "1" : "0",
604
604
  pointerEvents: "none",
605
605
  zIndex: "3"
606
606
  }
@@ -7,19 +7,17 @@ import { usePalette } from 'react-palette';
7
7
  import { Box, Stack, Text, Button } from './index.js';
8
8
  import styled from 'styled-components';
9
9
  import LockRoundedIcon from '@mui/icons-material/LockRounded';
10
- import LottieAnimation from './Lotties/LottieAnimation.js';
11
- import JiggleLock from './Lotties/JiggleLock.json.js';
12
10
  import { DiamondIcon, PresentGiftIcon } from './Icons/Icons.js';
13
11
 
14
12
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
15
13
  //primary and secondary action buttons
16
14
 
17
- const YellowHoverBorder = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
18
- const LineClamp = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
19
- const TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
20
- const TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 32px;\n width: 100%;\n position: absolute;\n background-color: ", ";\n opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
21
- const LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: -1;\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n z-index: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: \"hidden\";\n transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n opacity: ", ";\n backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
22
- const LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n /* transition: opacity 0.3s ease-in-out; */\n\n background-color: ", ";\n\n opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
15
+ const YellowHoverBorder = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n height: 105%;\n width: 105%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 4px solid rgb(255, 225, 76);\n border-radius: 20px;\n transition: opacity 0.3s ease-in-out;\n /* Opacity should be changed to \"1\" onHover of this component's parent */\n opacity: 0;\n"])));
16
+ const LineClamp = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n margin: 5px 0;\n max-width: 92%;\n"])));
17
+ const TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 32px;\n width: ", ";\n position: absolute;\n top: 8px;\n left: 8px;\n border-radius: 20px;\n overflow: hidden;\n transition: width 0.3s ease-in-out;\n"])), props => props.isLocked ? props.collectionHovered ? "90%" : "70%" : "45%");
18
+ const TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 32px;\n width: 100%;\n position: absolute;\n background-color: ", ";\n opacity: 0.5;\n"])), props => props.theme.colors.notBlackOverride);
19
+ const LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: -1;\n padding-bottom: 8px;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: center;\n z-index: 1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n overflow: \"hidden\";\n transition: backdrop-filter 0.4s, opacity 0.5s ease-in-out;\n opacity: ", ";\n backdrop-filter: ", ";\n"])), props => !props.collectionHovered ? "0" : "1", props => props.collectionHovered ? "blur(3px)" : "none");
20
+ const LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n /* transition: opacity 0.3s ease-in-out; */\n\n background-color: ", ";\n\n opacity: ", ";\n"])), props => props.theme.colors.notBlackOverride, props => props.collectionHovered ? "0.5" : "0");
23
21
  const PremiumCollectionCard = _ref => {
24
22
  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or, _collection$image3, _collection$image3$or, _collection$ownerObje, _collection$ownerObje2, _collection$ownerObje3, _collection$image4, _collection$image4$or;
25
23
 
@@ -406,19 +404,7 @@ const PremiumCollectionCard = _ref => {
406
404
  collectionHovered: collectionHovered
407
405
  }, /*#__PURE__*/React.createElement(LockedScrimBackground, {
408
406
  collectionHovered: collectionHovered
409
- }), /*#__PURE__*/React.createElement(Stack, {
410
- sx: {
411
- position: "absolute",
412
- bottom: "104px"
413
- }
414
- }, /*#__PURE__*/React.createElement(LottieAnimation, {
415
- lotti: JiggleLock,
416
- height: 60,
417
- width: 240,
418
- style: {
419
- margin: "0px -64px"
420
- }
421
- })), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React.createElement(Text, {
407
+ }), !hideUnlockPlatformText && (unlockPlatformText ? /*#__PURE__*/React.createElement(Text, {
422
408
  sx: {
423
409
  color: "white.override",
424
410
  textAlign: "center",
@@ -39,7 +39,6 @@ const UsernameWithPopout = _ref => {
39
39
  },
40
40
  disableAutoFocus: true,
41
41
  disableRestoreFocus: true,
42
- disablePortal: true,
43
42
  hideBackdrop: true,
44
43
  sx: {
45
44
  pointerEvents: "none"
@@ -78,7 +77,8 @@ const UsernameWithPopout = _ref => {
78
77
  textDecoration: "underline"
79
78
  },
80
79
  ...textStyle
81
- }
80
+ },
81
+ onClick: onUsernameClick
82
82
  }, user === null || user === void 0 ? void 0 : user.username));
83
83
  };
84
84
 
package/package.json CHANGED
@@ -1,49 +1,49 @@
1
1
  {
2
- "name": "@blerp/design",
3
- "version": "1.3.9",
4
- "description": "Blerp UI",
5
- "main": "dist/esm/index.js",
6
- "scripts": {
7
- "build": "rollup -c"
8
- },
9
- "peerDependencies": {
10
- "@mui/icons-material": "5.10.16",
11
- "@mui/material": "5.10.16",
12
- "react": "18.2.0",
13
- "react-dom": "18.2.0"
14
- },
15
- "dependencies": {
16
- "@babel/runtime": "^7.14.0",
17
- "@blerp/wavesurfer": "^6.4.2",
18
- "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
19
- "@mui/styled-engine-sc": "5.10.16",
20
- "react-avatar-editor": "13.0.0",
21
- "react-color-extractor": "^1.1.2",
22
- "react-dropzone": "14.2.3",
23
- "react-palette": "^1.0.2",
24
- "styled-components": "5.3.6"
25
- },
26
- "resolutions": {
27
- "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
28
- },
29
- "keywords": [
30
- "react",
31
- "keywords"
32
- ],
33
- "author": "Jordan Rand",
34
- "license": "MIT",
35
- "devDependencies": {
36
- "@babel/cli": "^7.12.10",
37
- "@babel/core": "^7.12.10",
38
- "@babel/plugin-transform-runtime": "^7.23.9",
39
- "@babel/preset-env": "^7.12.11",
40
- "@babel/preset-react": "^7.12.10",
41
- "@rollup/plugin-babel": "^5.2.2",
42
- "@rollup/plugin-json": "^4.1.0",
43
- "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
44
- "rollup": "^2.50.5",
45
- "rollup-plugin-sourcemaps": "^0.6.3",
46
- "rollup-plugin-styles": "^3.12.2",
47
- "rollup-plugin-terser": "^7.0.2"
48
- }
2
+ "name": "@blerp/design",
3
+ "version": "1.3.11",
4
+ "description": "Blerp UI",
5
+ "main": "dist/esm/index.js",
6
+ "scripts": {
7
+ "build": "rollup -c"
8
+ },
9
+ "peerDependencies": {
10
+ "@mui/icons-material": "5.10.16",
11
+ "@mui/material": "5.10.16",
12
+ "react": "18.2.0",
13
+ "react-dom": "18.2.0"
14
+ },
15
+ "dependencies": {
16
+ "@babel/runtime": "^7.14.0",
17
+ "@blerp/wavesurfer": "^6.4.2",
18
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
19
+ "@mui/styled-engine-sc": "5.10.16",
20
+ "react-avatar-editor": "13.0.0",
21
+ "react-color-extractor": "^1.1.2",
22
+ "react-dropzone": "14.2.3",
23
+ "react-palette": "^1.0.2",
24
+ "styled-components": "5.3.6"
25
+ },
26
+ "resolutions": {
27
+ "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
28
+ },
29
+ "keywords": [
30
+ "react",
31
+ "keywords"
32
+ ],
33
+ "author": "Jordan Rand",
34
+ "license": "MIT",
35
+ "devDependencies": {
36
+ "@babel/cli": "^7.12.10",
37
+ "@babel/core": "^7.12.10",
38
+ "@babel/plugin-transform-runtime": "^7.23.9",
39
+ "@babel/preset-env": "^7.12.11",
40
+ "@babel/preset-react": "^7.12.10",
41
+ "@rollup/plugin-babel": "^5.2.2",
42
+ "@rollup/plugin-json": "^4.1.0",
43
+ "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
44
+ "rollup": "^2.50.5",
45
+ "rollup-plugin-sourcemaps": "^0.6.3",
46
+ "rollup-plugin-styles": "^3.12.2",
47
+ "rollup-plugin-terser": "^7.0.2"
48
+ }
49
49
  }