@ntbjs/react-components 1.1.22 → 1.1.23
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/{ActionButton-607bc22f.js → ActionButton-5bc79370.js} +1 -1
- package/{Alert-7bbe87f3.js → Alert-edd9f6a7.js} +1 -1
- package/{AssetAction-7afc83d9.js → AssetAction-9b93c243.js} +26 -24
- package/{AssetPreviewTopBar-14bd42d0.js → AssetPreviewTopBar-6eaa7df8.js} +1 -1
- package/{Badge-dc50d116.js → Badge-00b2f311.js} +1 -1
- package/{Button-86626421.js → Button-a9afcec0.js} +3 -3
- package/{Checkbox-876f71f0.js → Checkbox-406f005c.js} +1 -1
- package/{CompactAutocompleteSelect-32a19c92.js → CompactAutocompleteSelect-7667888f.js} +9 -9
- package/{CompactStarRating-ddbeaf93.js → CompactStarRating-a87f6bd6.js} +8 -8
- package/{CompactTextInput-337b6320.js → CompactTextInput-ac490f47.js} +8 -8
- package/{ContextMenu-b6ba7a22.js → ContextMenu-9645746f.js} +1 -1
- package/{ContextMenuItem-30f7d64d.js → ContextMenuItem-ae252503.js} +1 -1
- package/InfoCard-005063b4.js +86 -0
- package/{InputGroup-d25c66ad.js → InputGroup-3598e37c.js} +1 -1
- package/{Instructions-dd2880ae.js → Instructions-70f2e97b.js} +3 -3
- package/{MultiLevelCheckboxSelect-cd1ced5d.js → MultiLevelCheckboxSelect-1e5db4db.js} +12 -12
- package/{MultiSelect-0cfc8d6c.js → MultiSelect-c1bc3264.js} +3 -3
- package/{Popover-5e9ab515.js → Popover-f00121a3.js} +2 -2
- package/ProgressBar-aa26a5b7.js +154 -0
- package/{Radio-8282d0d6.js → Radio-758fd8f3.js} +1 -1
- package/{SectionSeparator-c9ec6fac.js → SectionSeparator-43e1647d.js} +1 -1
- package/{Switch-57f729bb.js → Switch-26547abb.js} +1 -1
- package/{Tab-572141e4.js → Tab-d3ee0a3b.js} +1 -1
- package/{Tabs-9dbd5b85.js → Tabs-2a6baf1c.js} +2 -2
- package/{TextArea-a125b7b3.js → TextArea-4cf36091.js} +8 -8
- package/{TextInput-9e62ab60.js → TextInput-9634d62e.js} +1 -1
- package/{Tooltip-5bbe5971.js → Tooltip-7dc4676b.js} +2 -2
- package/{VerificationStatusIcon-10460fe7.js → VerificationStatusIcon-f3c44ef8.js} +1 -1
- package/arrow-forward-d7c77ae3.js +37 -0
- package/data/Alert/index.js +2 -2
- package/data/Badge/index.js +2 -2
- package/data/Popover/index.js +3 -3
- package/data/Tab/index.js +2 -2
- package/data/Tabs/index.js +3 -3
- package/data/Tooltip/index.js +3 -3
- package/data/index.js +9 -9
- package/{defaultTheme-06b819a9.js → defaultTheme-24ea5c47.js} +1 -1
- package/icons/arrow-forward.svg +3 -0
- package/icons/index.js +2 -0
- package/inputs/ActionButton/index.js +2 -2
- package/inputs/Button/index.js +5 -5
- package/inputs/Checkbox/index.js +2 -2
- package/inputs/CompactAutocompleteSelect/index.js +11 -11
- package/inputs/CompactStarRating/index.js +10 -10
- package/inputs/CompactTextInput/index.js +10 -10
- package/inputs/MultiSelect/index.js +3 -3
- package/inputs/Radio/index.js +2 -2
- package/inputs/Switch/index.js +2 -2
- package/inputs/TextArea/index.js +10 -10
- package/inputs/TextInput/index.js +2 -2
- package/inputs/index.js +25 -25
- package/layout/InputGroup/index.js +2 -2
- package/layout/SectionSeparator/index.js +2 -2
- package/layout/index.js +3 -3
- package/package.json +2 -1
- package/{react-select-creatable.esm-3c7b7450.js → react-select-creatable.esm-75f23ee6.js} +1 -1
- package/{shift-away-subtle-16a9f31b.js → shift-away-subtle-dce50395.js} +1 -1
- package/styles/config.scss +2 -0
- package/widgets/AssetGallery/index.js +32 -29
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/InfoCard/index.js +11 -0
- package/widgets/Instructions/index.js +13 -13
- package/widgets/ProgressBar/index.js +11 -0
- package/widgets/index.js +34 -29
|
@@ -1,37 +1,39 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
|
|
7
7
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
8
|
-
var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-
|
|
8
|
+
var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-1e5db4db.js');
|
|
9
9
|
var styled = require('styled-components');
|
|
10
10
|
var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
|
|
11
|
-
var Instructions = require('./Instructions-
|
|
12
|
-
var Alert = require('./Alert-
|
|
13
|
-
var Badge = require('./Badge-
|
|
14
|
-
var Popover = require('./Popover-
|
|
15
|
-
require('./Tab-
|
|
16
|
-
require('./Tabs-
|
|
17
|
-
var Tooltip = require('./Tooltip-
|
|
18
|
-
require('./VerificationStatusIcon-
|
|
11
|
+
var Instructions = require('./Instructions-70f2e97b.js');
|
|
12
|
+
var Alert = require('./Alert-edd9f6a7.js');
|
|
13
|
+
var Badge = require('./Badge-00b2f311.js');
|
|
14
|
+
var Popover = require('./Popover-f00121a3.js');
|
|
15
|
+
require('./Tab-d3ee0a3b.js');
|
|
16
|
+
require('./Tabs-2a6baf1c.js');
|
|
17
|
+
var Tooltip = require('./Tooltip-7dc4676b.js');
|
|
18
|
+
require('./VerificationStatusIcon-f3c44ef8.js');
|
|
19
19
|
var react = require('@floating-ui/react');
|
|
20
20
|
var polished = require('polished');
|
|
21
|
-
var ContextMenu = require('./ContextMenu-
|
|
22
|
-
require('./AssetPreviewTopBar-
|
|
23
|
-
|
|
24
|
-
require('./
|
|
25
|
-
require('./
|
|
26
|
-
require('./
|
|
27
|
-
require('./
|
|
28
|
-
require('./
|
|
29
|
-
require('./
|
|
30
|
-
require('./
|
|
31
|
-
require('./
|
|
32
|
-
require('./
|
|
33
|
-
require('./
|
|
34
|
-
|
|
21
|
+
var ContextMenu = require('./ContextMenu-9645746f.js');
|
|
22
|
+
require('./AssetPreviewTopBar-6eaa7df8.js');
|
|
23
|
+
require('./ProgressBar-aa26a5b7.js');
|
|
24
|
+
require('./InfoCard-005063b4.js');
|
|
25
|
+
var ActionButton = require('./ActionButton-5bc79370.js');
|
|
26
|
+
require('./Button-a9afcec0.js');
|
|
27
|
+
require('./Checkbox-406f005c.js');
|
|
28
|
+
require('./CompactAutocompleteSelect-7667888f.js');
|
|
29
|
+
require('./CompactStarRating-a87f6bd6.js');
|
|
30
|
+
require('./CompactTextInput-ac490f47.js');
|
|
31
|
+
require('./MultiSelect-c1bc3264.js');
|
|
32
|
+
require('./Radio-758fd8f3.js');
|
|
33
|
+
require('./TextArea-4cf36091.js');
|
|
34
|
+
require('./TextInput-9634d62e.js');
|
|
35
|
+
require('./Switch-26547abb.js');
|
|
36
|
+
var ContextMenuItem = require('./ContextMenuItem-ae252503.js');
|
|
35
37
|
|
|
36
38
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
37
39
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
var Popover = require('./Popover-
|
|
7
|
-
var ContextMenu = require('./ContextMenu-
|
|
6
|
+
var Popover = require('./Popover-f00121a3.js');
|
|
7
|
+
var ContextMenu = require('./ContextMenu-9645746f.js');
|
|
8
8
|
var expandMore = require('./expand-more-d74e2bd2.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
require('./Alert-
|
|
8
|
-
require('./Badge-
|
|
9
|
-
require('./Popover-
|
|
10
|
-
require('./Tab-
|
|
11
|
-
require('./Tabs-
|
|
12
|
-
var Tooltip = require('./Tooltip-
|
|
13
|
-
require('./VerificationStatusIcon-
|
|
7
|
+
require('./Alert-edd9f6a7.js');
|
|
8
|
+
require('./Badge-00b2f311.js');
|
|
9
|
+
require('./Popover-f00121a3.js');
|
|
10
|
+
require('./Tab-d3ee0a3b.js');
|
|
11
|
+
require('./Tabs-2a6baf1c.js');
|
|
12
|
+
var Tooltip = require('./Tooltip-7dc4676b.js');
|
|
13
|
+
require('./VerificationStatusIcon-f3c44ef8.js');
|
|
14
14
|
var styled = require('styled-components');
|
|
15
15
|
var Select = require('react-select');
|
|
16
16
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
17
|
-
var reactSelectCreatable_esm = require('./react-select-creatable.esm-
|
|
17
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-75f23ee6.js');
|
|
18
18
|
var close = require('./close-1751121a.js');
|
|
19
19
|
var expandMore = require('./expand-more-d74e2bd2.js');
|
|
20
20
|
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var React = require('react');
|
|
5
|
-
require('./Alert-
|
|
6
|
-
require('./Badge-
|
|
7
|
-
require('./Popover-
|
|
8
|
-
require('./Tab-
|
|
9
|
-
require('./Tabs-
|
|
10
|
-
var Tooltip = require('./Tooltip-
|
|
11
|
-
require('./VerificationStatusIcon-
|
|
5
|
+
require('./Alert-edd9f6a7.js');
|
|
6
|
+
require('./Badge-00b2f311.js');
|
|
7
|
+
require('./Popover-f00121a3.js');
|
|
8
|
+
require('./Tab-d3ee0a3b.js');
|
|
9
|
+
require('./Tabs-2a6baf1c.js');
|
|
10
|
+
var Tooltip = require('./Tooltip-7dc4676b.js');
|
|
11
|
+
require('./VerificationStatusIcon-f3c44ef8.js');
|
|
12
12
|
var styled = require('styled-components');
|
|
13
13
|
|
|
14
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var editNote = require('./edit-note-cefe2215.js');
|
|
8
|
-
require('./Alert-
|
|
9
|
-
require('./Badge-
|
|
10
|
-
var Popover = require('./Popover-
|
|
11
|
-
require('./Tab-
|
|
12
|
-
require('./Tabs-
|
|
13
|
-
var Tooltip = require('./Tooltip-
|
|
14
|
-
require('./VerificationStatusIcon-
|
|
8
|
+
require('./Alert-edd9f6a7.js');
|
|
9
|
+
require('./Badge-00b2f311.js');
|
|
10
|
+
var Popover = require('./Popover-f00121a3.js');
|
|
11
|
+
require('./Tab-d3ee0a3b.js');
|
|
12
|
+
require('./Tabs-2a6baf1c.js');
|
|
13
|
+
var Tooltip = require('./Tooltip-7dc4676b.js');
|
|
14
|
+
require('./VerificationStatusIcon-f3c44ef8.js');
|
|
15
15
|
var styled = require('styled-components');
|
|
16
16
|
|
|
17
17
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var arrowForward = require('./arrow-forward-d7c77ae3.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
14
|
+
var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n ", ";\n height: ", ";\n border-radius: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 5px 0;\n"])), function (props) {
|
|
15
|
+
return props.theme.primaryFontFamily;
|
|
16
|
+
}, function (props) {
|
|
17
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'));
|
|
18
|
+
}, function (props) {
|
|
19
|
+
return props.height ? "".concat(props.height, "px") : '50px';
|
|
20
|
+
});
|
|
21
|
+
var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n width: 70%;\n gap: 5px;\n padding-left: 15px;\n"])));
|
|
22
|
+
var IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n"])));
|
|
23
|
+
var Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.22rem;\n font-weight: 700;\n ", ";\n"])), function (props) {
|
|
24
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
25
|
+
});
|
|
26
|
+
var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n opacity: 0.8;\n ", ";\n"])), function (props) {
|
|
27
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'));
|
|
28
|
+
});
|
|
29
|
+
var IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n margin-top: -0.05rem;\n"])));
|
|
30
|
+
var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n width: 30%;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: 20px;\n cursor: pointer;\n height: 100%;\n gap: 10px;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
|
|
31
|
+
var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n white-space: nowrap;\n opacity: ", ";\n transition: color 0.2s ease-in-out;\n ", ";\n"])), function (props) {
|
|
32
|
+
return props.isHovered ? 1 : 0.8;
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return props.isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
35
|
+
});
|
|
36
|
+
var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n opacity: ", ";\n transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n transform: ", ";\n\n ", ";\n"])), function (props) {
|
|
37
|
+
return props.isHovered ? 1 : 0.8;
|
|
38
|
+
}, function (props) {
|
|
39
|
+
return props.isHovered ? 'translateX(2px)' : 'translateX(0)';
|
|
40
|
+
}, function (props) {
|
|
41
|
+
return props.isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
var _excluded = ["icon", "total", "label", "linkLabel", "onClick", "height"];
|
|
45
|
+
var InfoCard = React__default["default"].forwardRef(function InfoCard(_ref, forwardedRef) {
|
|
46
|
+
var icon = _ref.icon,
|
|
47
|
+
total = _ref.total,
|
|
48
|
+
label = _ref.label,
|
|
49
|
+
linkLabel = _ref.linkLabel,
|
|
50
|
+
onClick = _ref.onClick,
|
|
51
|
+
height = _ref.height,
|
|
52
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
53
|
+
var _useState = React.useState(false),
|
|
54
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
55
|
+
isLinkHovered = _useState2[0],
|
|
56
|
+
setIsLinkHovered = _useState2[1];
|
|
57
|
+
var handleLinkClick = function handleLinkClick(e) {
|
|
58
|
+
return onClick(e);
|
|
59
|
+
};
|
|
60
|
+
return React__default["default"].createElement(Container, defaultTheme._extends({
|
|
61
|
+
height: height,
|
|
62
|
+
ref: forwardedRef
|
|
63
|
+
}, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), linkLabel && onClick && React__default["default"].createElement(Link, {
|
|
64
|
+
onClick: handleLinkClick,
|
|
65
|
+
onMouseEnter: function onMouseEnter() {
|
|
66
|
+
return setIsLinkHovered(true);
|
|
67
|
+
},
|
|
68
|
+
onMouseLeave: function onMouseLeave() {
|
|
69
|
+
return setIsLinkHovered(false);
|
|
70
|
+
}
|
|
71
|
+
}, React__default["default"].createElement(ButtonLink, {
|
|
72
|
+
isHovered: isLinkHovered
|
|
73
|
+
}, linkLabel), React__default["default"].createElement(StyledArrowIcon, {
|
|
74
|
+
isHovered: isLinkHovered
|
|
75
|
+
})));
|
|
76
|
+
});
|
|
77
|
+
InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
78
|
+
icon: defaultTheme.PropTypes.element.isRequired,
|
|
79
|
+
total: defaultTheme.PropTypes.number.isRequired,
|
|
80
|
+
label: defaultTheme.PropTypes.string.isRequired,
|
|
81
|
+
linkLabel: defaultTheme.PropTypes.string,
|
|
82
|
+
onClick: defaultTheme.PropTypes.func,
|
|
83
|
+
height: defaultTheme.PropTypes.number
|
|
84
|
+
} : {};
|
|
85
|
+
|
|
86
|
+
exports.InfoCard = InfoCard;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-
|
|
7
|
-
var TextArea = require('./TextArea-
|
|
6
|
+
var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-7667888f.js');
|
|
7
|
+
var TextArea = require('./TextArea-4cf36091.js');
|
|
8
8
|
var styled = require('styled-components');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
|
-
require('./Alert-
|
|
7
|
-
require('./Badge-
|
|
8
|
-
var Popover = require('./Popover-
|
|
9
|
-
require('./Tab-
|
|
10
|
-
require('./Tabs-
|
|
11
|
-
require('./Tooltip-
|
|
12
|
-
require('./VerificationStatusIcon-
|
|
13
|
-
var Checkbox = require('./Checkbox-
|
|
6
|
+
require('./Alert-edd9f6a7.js');
|
|
7
|
+
require('./Badge-00b2f311.js');
|
|
8
|
+
var Popover = require('./Popover-f00121a3.js');
|
|
9
|
+
require('./Tab-d3ee0a3b.js');
|
|
10
|
+
require('./Tabs-2a6baf1c.js');
|
|
11
|
+
require('./Tooltip-7dc4676b.js');
|
|
12
|
+
require('./VerificationStatusIcon-f3c44ef8.js');
|
|
13
|
+
var Checkbox = require('./Checkbox-406f005c.js');
|
|
14
14
|
var lodash = require('lodash');
|
|
15
|
-
var TextInput = require('./TextInput-
|
|
16
|
-
require('./InputGroup-
|
|
17
|
-
var SectionSeparator = require('./SectionSeparator-
|
|
15
|
+
var TextInput = require('./TextInput-9634d62e.js');
|
|
16
|
+
require('./InputGroup-3598e37c.js');
|
|
17
|
+
var SectionSeparator = require('./SectionSeparator-43e1647d.js');
|
|
18
18
|
var close = require('./close-1751121a.js');
|
|
19
19
|
|
|
20
20
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var nanoid = require('nanoid');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var close = require('./close-1751121a.js');
|
|
8
8
|
var Select = require('react-select');
|
|
9
|
-
var reactSelectCreatable_esm = require('./react-select-creatable.esm-
|
|
9
|
+
var reactSelectCreatable_esm = require('./react-select-creatable.esm-75f23ee6.js');
|
|
10
10
|
var reactSelectAsyncPaginate = require('react-select-async-paginate');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -40,7 +40,7 @@ var ValueContainer = styled__default["default"](Select.components.ValueContainer
|
|
|
40
40
|
});
|
|
41
41
|
});
|
|
42
42
|
var MultiValueWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n }\n"])));
|
|
43
|
-
var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-
|
|
43
|
+
var MultiValue = styled__default["default"](Select.components.MultiValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n && {\n border-radius: 3px;\n margin: 0;\n\n ", "\n\n ", "\n\n > div {\n align-items: center;\n display: flex;\n font-size: 12px;\n min-height: 26px;\n\n :first-of-type {\n padding: ", ";\n }\n\n :last-of-type:not(:only-child) {\n padding: 0 8px 0 5px;\n height: 100%;\n width: fit-content;\n }\n\n :last-of-type:not(:only-child):hover {\n background-color: ", ";\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n cursor: pointer;\n }\n\n svg {\n stroke: white;\n stroke-width: 2px;\n width: 8px;\n }\n\n :hover {\n cursor: pointer;\n }\n }\n"])), function (props) {
|
|
44
44
|
return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-800'));
|
|
45
45
|
}, function (props) {
|
|
46
46
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var polished = require('polished');
|
|
8
8
|
var TippyTooltip = require('@tippyjs/react');
|
|
9
|
-
require('./shift-away-subtle-
|
|
9
|
+
require('./shift-away-subtle-dce50395.js');
|
|
10
10
|
var maxSize = require('popper-max-size-modifier');
|
|
11
11
|
|
|
12
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var styled = require('styled-components');
|
|
6
|
+
var arrowForward = require('./arrow-forward-d7c77ae3.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
|
|
14
|
+
var getBackgroundColor = function getBackgroundColor(props) {
|
|
15
|
+
if (props.barColor) {
|
|
16
|
+
return "background: ".concat(props.barColor, ";");
|
|
17
|
+
}
|
|
18
|
+
var colorMap = {
|
|
19
|
+
success: ['emerald-600', 'emerald-300'],
|
|
20
|
+
error: ['red-600', 'cercise-200'],
|
|
21
|
+
warning: ['orange-600', 'orange-400'],
|
|
22
|
+
none: ['gray-500', 'gray-300'],
|
|
23
|
+
"default": ['emerald-600', 'emerald-500']
|
|
24
|
+
};
|
|
25
|
+
var _ref = colorMap[props.type] || colorMap["default"],
|
|
26
|
+
_ref2 = defaultTheme._slicedToArray(_ref, 2),
|
|
27
|
+
darkColor = _ref2[0],
|
|
28
|
+
lightColor = _ref2[1];
|
|
29
|
+
return props.theme.themeProp('background', props.theme.getColor(darkColor), props.theme.getColor(lightColor));
|
|
30
|
+
};
|
|
31
|
+
styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n"])), function (props) {
|
|
32
|
+
return props.theme.primaryFontFamily;
|
|
33
|
+
});
|
|
34
|
+
var Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n height: ", ";\n font-family: ", ";\n"])), function (props) {
|
|
35
|
+
return props.height ? "".concat(props.height, "px") : '50px';
|
|
36
|
+
}, function (props) {
|
|
37
|
+
return props.theme.primaryFontFamily;
|
|
38
|
+
});
|
|
39
|
+
var InnerContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n height: 100%;\n"])));
|
|
40
|
+
var MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: 100%;\n flex-direction: row;\n justify-content: flex-start;\n"])), function (props) {
|
|
41
|
+
return props.hasLink ? '85%' : '100%';
|
|
42
|
+
});
|
|
43
|
+
var Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n padding-bottom: 5px;\n ", "\n"])), function (props) {
|
|
44
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
45
|
+
});
|
|
46
|
+
styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n ", "\n"])), function (props) {
|
|
47
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
48
|
+
});
|
|
49
|
+
var ProgressBarTrack = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: flex-start;\n align-items: center;\n border-radius: 3px;\n height: 100%;\n ", "\n"])), function (props) {
|
|
50
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200'));
|
|
51
|
+
});
|
|
52
|
+
var Completed = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.2rem;\n font-weight: 400;\n height: 100%;\n border-radius: 3px;\n display: flex;\n align-items: center;\n width: 96px;\n ", ";\n"])), function (props) {
|
|
53
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-800'));
|
|
54
|
+
});
|
|
55
|
+
var PercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n right: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n white-space: nowrap;\n opacity: 0.8;\n ", ";\n"])), function (props) {
|
|
56
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
57
|
+
});
|
|
58
|
+
var ExternalPercentageIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n margin-left: 8px;\n font-size: 1.2rem;\n font-weight: 400;\n font-size: 0.875rem;\n opacity: 0.9;\n ", ";\n display: flex;\n align-items: center;\n"])), function (props) {
|
|
59
|
+
return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
|
|
60
|
+
});
|
|
61
|
+
var ProgressBarFill = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n border-radius: 0 3px 3px 0;\n width: ", "%;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n ", "\n transition: width 0.3s ease;\n"])), function (props) {
|
|
62
|
+
return props.percentage;
|
|
63
|
+
}, function (props) {
|
|
64
|
+
return getBackgroundColor(props);
|
|
65
|
+
});
|
|
66
|
+
var Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 400;\n width: 15%;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n margin-right: 20px;\n cursor: pointer;\n height: 100%;\n gap: 10px;\n svg {\n transition: transform 0.2s ease-in-out;\n }\n &:hover svg {\n transform: translateX(2px);\n }\n"])));
|
|
67
|
+
var ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n font-weight: 500;\n height: 100%;\n display: flex;\n align-items: center;\n opacity: ", ";\n transition: color 0.2s ease-in-out;\n ", ";\n"])), function (props) {
|
|
68
|
+
return props.isHovered ? 1 : 0.8;
|
|
69
|
+
}, function (props) {
|
|
70
|
+
return props.isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
|
|
71
|
+
});
|
|
72
|
+
var StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n height: 15px;\n margin-right: 10px;\n opacity: ", ";\n transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;\n transform: ", ";\n\n ", ";\n"])), function (props) {
|
|
73
|
+
return props.isHovered ? 1 : 0.8;
|
|
74
|
+
}, function (props) {
|
|
75
|
+
return props.isHovered ? 'translateX(2px)' : 'translateX(0)';
|
|
76
|
+
}, function (props) {
|
|
77
|
+
return props.isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'));
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
var _excluded = ["totalAssets", "completedAssets", "percentageText", "barColor", "height", "label", "type", "linkText", "onClick"];
|
|
81
|
+
var ProgressBar = function ProgressBar(_ref) {
|
|
82
|
+
var totalAssets = _ref.totalAssets,
|
|
83
|
+
completedAssets = _ref.completedAssets,
|
|
84
|
+
percentageText = _ref.percentageText,
|
|
85
|
+
barColor = _ref.barColor,
|
|
86
|
+
height = _ref.height,
|
|
87
|
+
label = _ref.label,
|
|
88
|
+
type = _ref.type,
|
|
89
|
+
linkText = _ref.linkText,
|
|
90
|
+
onClick = _ref.onClick,
|
|
91
|
+
props = defaultTheme._objectWithoutProperties(_ref, _excluded);
|
|
92
|
+
var _useState = React.useState(false),
|
|
93
|
+
_useState2 = defaultTheme._slicedToArray(_useState, 2),
|
|
94
|
+
isLinkHovered = _useState2[0],
|
|
95
|
+
setIsLinkHovered = _useState2[1];
|
|
96
|
+
var safeCompletedAssets = Math.max(0, completedAssets);
|
|
97
|
+
var safeTotalAssets = Math.max(1, totalAssets);
|
|
98
|
+
var percentage = safeCompletedAssets / safeTotalAssets * 100;
|
|
99
|
+
var formattedPercentage = "".concat(Math.round(percentage), "%");
|
|
100
|
+
var isLowPercentage = percentage <= 5;
|
|
101
|
+
var handleLinkClick = function handleLinkClick(e) {
|
|
102
|
+
return onClick(e);
|
|
103
|
+
};
|
|
104
|
+
var formatNumberNew = function formatNumberNew(num) {
|
|
105
|
+
if (num < 1000000) {
|
|
106
|
+
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
|
107
|
+
} else {
|
|
108
|
+
var units = ['K', 'M', 'B', 'T'];
|
|
109
|
+
var unit = Math.floor((num.toString().length - 1) / 3) - 1;
|
|
110
|
+
var shortNum = num / Math.pow(1000, unit + 1);
|
|
111
|
+
return shortNum.toFixed(shortNum < 10 ? 1 : 0) + units[unit];
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
return React__default["default"].createElement(Container, defaultTheme._extends({
|
|
115
|
+
height: height
|
|
116
|
+
}, props), React__default["default"].createElement(Label, null, label), React__default["default"].createElement(InnerContainer, {
|
|
117
|
+
type: type
|
|
118
|
+
}, React__default["default"].createElement(Completed, {
|
|
119
|
+
type: type
|
|
120
|
+
}, formatNumberNew(completedAssets)), React__default["default"].createElement(ProgressBarTrack, null, React__default["default"].createElement(MetricsContainer, {
|
|
121
|
+
hasLink: Boolean(linkText)
|
|
122
|
+
}, React__default["default"].createElement(ProgressBarFill, {
|
|
123
|
+
type: type,
|
|
124
|
+
percentage: percentage,
|
|
125
|
+
barColor: barColor
|
|
126
|
+
}, !isLowPercentage && React__default["default"].createElement(PercentageIndicator, {
|
|
127
|
+
hasLink: Boolean(linkText)
|
|
128
|
+
}, percentageText || formattedPercentage)), isLowPercentage && React__default["default"].createElement(ExternalPercentageIndicator, null, percentageText || formattedPercentage)), linkText && React__default["default"].createElement(Link, {
|
|
129
|
+
onClick: handleLinkClick,
|
|
130
|
+
onMouseEnter: function onMouseEnter() {
|
|
131
|
+
return setIsLinkHovered(true);
|
|
132
|
+
},
|
|
133
|
+
onMouseLeave: function onMouseLeave() {
|
|
134
|
+
return setIsLinkHovered(false);
|
|
135
|
+
}
|
|
136
|
+
}, React__default["default"].createElement(ButtonLink, {
|
|
137
|
+
isHovered: isLinkHovered
|
|
138
|
+
}, linkText), React__default["default"].createElement(StyledArrowIcon, {
|
|
139
|
+
isHovered: isLinkHovered
|
|
140
|
+
})))));
|
|
141
|
+
};
|
|
142
|
+
ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
143
|
+
totalAssets: defaultTheme.PropTypes.number.isRequired,
|
|
144
|
+
completedAssets: defaultTheme.PropTypes.number.isRequired,
|
|
145
|
+
percentageText: defaultTheme.PropTypes.string,
|
|
146
|
+
barColor: defaultTheme.PropTypes.string,
|
|
147
|
+
height: defaultTheme.PropTypes.number,
|
|
148
|
+
label: defaultTheme.PropTypes.string,
|
|
149
|
+
type: defaultTheme.PropTypes.string,
|
|
150
|
+
linkText: defaultTheme.PropTypes.string,
|
|
151
|
+
onClick: defaultTheme.PropTypes.func
|
|
152
|
+
} : {};
|
|
153
|
+
|
|
154
|
+
exports.ProgressBar = ProgressBar;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-24ea5c47.js');
|
|
4
4
|
var lodash = require('lodash');
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var Tab = require('./Tab-
|
|
6
|
+
var Tab = require('./Tab-d3ee0a3b.js');
|
|
7
7
|
var styled = require('styled-components');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|