@blerp/design 1.3.8 → 1.3.10
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.
- package/dist/cjs/Blerp/BlerpImageRow.js +4 -4
- package/dist/cjs/PremiumCollectionCard.js +7 -21
- package/dist/cjs/UsernameWithPopout.js +2 -1
- package/dist/esm/Blerp/BlerpImageRow.js +4 -4
- package/dist/esm/PremiumCollectionCard.js +7 -21
- package/dist/esm/UsernameWithPopout.js +2 -1
- package/package.json +47 -47
|
@@ -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
|
|
22
|
-
const SaveContainer = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n
|
|
23
|
-
const BlerpImageScrim = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n
|
|
24
|
-
const BlerpImageScrimPrivate = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n
|
|
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;
|
|
@@ -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
|
|
31
|
-
const LineClamp = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n
|
|
32
|
-
const TopPill = styled__default['default'].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default['default'](["\n
|
|
33
|
-
const TopPillBackground = styled__default['default'].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default['default'](["\n
|
|
34
|
-
const LockedScrim = styled__default['default'].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default['default'](["\n
|
|
35
|
-
const LockedScrimBackground = styled__default['default'].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default['default'](["\n
|
|
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.
|
|
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",
|
|
@@ -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
|
|
12
|
-
const SaveContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
13
|
-
const BlerpImageScrim = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
14
|
-
const BlerpImageScrimPrivate = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
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;
|
|
@@ -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
|
|
18
|
-
const LineClamp = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
19
|
-
const TopPill = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
20
|
-
const TopPillBackground = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n
|
|
21
|
-
const LockedScrim = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n
|
|
22
|
-
const LockedScrimBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n
|
|
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(
|
|
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",
|
package/package.json
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
2
|
+
"name": "@blerp/design",
|
|
3
|
+
"version": "1.3.10",
|
|
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
|
}
|