@ntbjs/react-components 1.3.0-rc.42 → 1.3.0-rc.44
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-df714c16.js → ActionButton-b2345555.js} +4 -6
- package/{Alert-28de48e1.js → Alert-d69a3f95.js} +8 -13
- package/{AssetAction-b7926b8e.js → AssetAction-d0ed95a3.js} +106 -286
- package/{AssetPreviewTopBar-5636a6e9.js → AssetPreviewTopBar-b1fe3188.js} +9 -23
- package/{Badge-2e008fe7.js → Badge-e984e6f5.js} +10 -21
- package/Button-44c7e0cd.js +267 -0
- package/{Checkbox-89fb44b0.js → Checkbox-ad9c9e54.js} +12 -29
- package/{CompactAutocompleteSelect-8edde787.js → CompactAutocompleteSelect-5676b507.js} +49 -108
- package/{CompactStarRating-c02080fd.js → CompactStarRating-d4cfae17.js} +30 -50
- package/{CompactTextInput-1a216516.js → CompactTextInput-f89988be.js} +43 -72
- package/{ContextMenu-265b13dc.js → ContextMenu-4eb8fdc5.js} +3 -5
- package/{ContextMenuItem-9008feb7.js → ContextMenuItem-c536b460.js} +8 -16
- package/{InputGroup-daac9ea0.js → InputGroup-a89a0ea3.js} +3 -5
- package/{Instructions-2a452d51.js → Instructions-d1545bd4.js} +8 -19
- package/{MultiLevelCheckboxSelect-d8e6ab4c.js → MultiLevelCheckboxSelect-6be69491.js} +34 -86
- package/{MultiSelect-36f99f25.js → MultiSelect-f87624b5.js} +30 -89
- package/{Popover-8e025dcb.js → Popover-c5e425a7.js} +6 -8
- package/{Radio-ecf4226c.js → Radio-55db4781.js} +6 -11
- package/{SectionSeparator-e69cddfd.js → SectionSeparator-af8dc1ce.js} +3 -5
- package/{Switch-76d7d568.js → Switch-04ecd8d0.js} +10 -27
- package/{Tab-74c2bca2.js → Tab-e43241f0.js} +3 -5
- package/{Tabs-41bd6cc1.js → Tabs-cfc08c6b.js} +14 -28
- package/{TextArea-40baf21d.js → TextArea-6e15b44f.js} +55 -87
- package/{TextInput-c1bb5c8c.js → TextInput-9a995449.js} +26 -49
- package/{Tooltip-dbd1bc99.js → Tooltip-a68a7e49.js} +4 -6
- package/{VerificationStatusIcon-b43db48d.js → VerificationStatusIcon-7b0e23fe.js} +6 -14
- 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-b6420d7d.js → defaultTheme-cd01e6c2.js} +10 -1
- 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 +5 -5
- package/{react-select-creatable.esm-ca527471.js → react-select-creatable.esm-806f4386.js} +1 -1
- package/{shift-away-subtle-e3830923.js → shift-away-subtle-631cd794.js} +1 -1
- package/widgets/AssetGallery/index.js +29 -29
- package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
- package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +3 -5
- package/widgets/ContextMenu/index.js +2 -2
- package/widgets/Instructions/index.js +13 -13
- package/widgets/index.js +29 -29
- package/Button-0a19dec5.js +0 -284
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
var polished = require('polished');
|
|
@@ -10,10 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
componentId: "sc-14sb7cm-0"
|
|
16
|
-
})(["display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:", ";height:", ";border:0;color:inherit;background-color:transparent;", " background-position:center;background-repeat:no-repeat;background-size:0 0;transition:background-size 250ms ease;cursor:pointer;", " ", " &:disabled{opacity:0.5;color:inherit;cursor:not-allowed;}svg{width:100%;max-width:", ";max-height:", ";pointer-events:none;transition:color 250ms;}"], function (props) {
|
|
13
|
+
var _templateObject, _templateObject2;
|
|
14
|
+
var ActionButton$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n width: ", ";\n height: ", ";\n border: 0;\n color: inherit;\n background-color: transparent;\n ", "\n background-position: center;\n background-repeat: no-repeat;\n background-size: 0 0;\n transition: background-size 250ms ease;\n cursor: pointer;\n\n ", "\n\n ", "\n\n &:disabled {\n opacity: 0.5;\n color: inherit;\n cursor: not-allowed;\n }\n\n svg {\n width: 100%;\n max-width: ", ";\n max-height: ", ";\n\n pointer-events: none;\n transition: color 250ms;\n }\n"])), function (props) {
|
|
17
15
|
return "".concat(props.actionWidthHeight[0], "px");
|
|
18
16
|
}, function (props) {
|
|
19
17
|
return "".concat(props.actionWidthHeight[1], "px");
|
|
@@ -23,7 +21,7 @@ var ActionButton$1 = styled__default["default"].button.attrs(defaultTheme.applyD
|
|
|
23
21
|
var lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 ? void 0 : (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
|
|
24
22
|
return props.theme.themeProp('background-image', "radial-gradient(circle at center, ".concat(darkThemeBgColor, " 50%, transparent 50%)"), "radial-gradient(circle at center, ".concat(lightThemeBgColor, " 50%, transparent 50%)"));
|
|
25
23
|
}, function (props) {
|
|
26
|
-
return styled.css(["", ":not(:disabled){background-size:200% 200
|
|
24
|
+
return styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ":not(:disabled) {\n background-size: 200% 200%;\n\n svg {\n ", ";\n }\n }\n "])), props.active ? '' : ':hover', function (props) {
|
|
27
25
|
return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'));
|
|
28
26
|
});
|
|
29
27
|
}, function (props) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var defaultTheme = require('./defaultTheme-
|
|
3
|
+
var defaultTheme = require('./defaultTheme-cd01e6c2.js');
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var styled = require('styled-components');
|
|
6
6
|
var lodash = require('lodash');
|
|
@@ -10,10 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
12
|
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
componentId: "sc-1pjcgpa-0"
|
|
16
|
-
})(["display:flex;flex-direction:column;padding:", ";width:", ";box-sizing:border-box;", " ", " ", " text-align:", ";"], function (props) {
|
|
13
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
14
|
+
var Alert$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n padding: ", ";\n width: ", ";\n box-sizing: border-box;\n\n ", "\n\n ", "\n \n ", "\n \n text-align: ", ";\n"])), function (props) {
|
|
17
15
|
var _props$verticalPaddin, _props$horizontalPadd;
|
|
18
16
|
var verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
|
|
19
17
|
var horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
|
|
@@ -21,25 +19,22 @@ var Alert$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultThem
|
|
|
21
19
|
}, function (props) {
|
|
22
20
|
return props.width ? "".concat(props.width, "px") : '100%';
|
|
23
21
|
}, function (props) {
|
|
24
|
-
return props.warning && styled.css(["", ""], props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
|
|
22
|
+
return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
|
|
25
23
|
}, function (props) {
|
|
26
|
-
return props.error && styled.css(["", ""], props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
|
|
24
|
+
return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
|
|
27
25
|
}, function (props) {
|
|
28
|
-
return props.info && styled.css(["background:transparent
|
|
26
|
+
return props.info && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n background: transparent;\n "])));
|
|
29
27
|
}, function (props) {
|
|
30
28
|
return props.align === 'center' ? 'center' : 'left';
|
|
31
29
|
});
|
|
32
|
-
var AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme).
|
|
33
|
-
displayName: "Alertstyled__AlertRender",
|
|
34
|
-
componentId: "sc-1pjcgpa-1"
|
|
35
|
-
})(["display:flex;align-items:center;word-break:break-word;", " ", " ", ";svg{width:12px;height:12px;}span{flex:1;padding-left:5px;", ";}"], function (props) {
|
|
30
|
+
var AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n word-break: break-word;\n ", "\n ", "\n ", ";\n\n svg {\n width: 12px;\n height: 12px;\n }\n\n span {\n flex: 1;\n padding-left: 5px;\n ", ";\n }\n"])), function (props) {
|
|
36
31
|
return props.lineHeight ? "line-height: ".concat(props.lineHeight, "px;") : null;
|
|
37
32
|
}, function (props) {
|
|
38
33
|
return props.fontSize ? "font-size: ".concat(props.fontSize, "px;") : null;
|
|
39
34
|
}, function (props) {
|
|
40
35
|
return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
|
|
41
36
|
}, function (props) {
|
|
42
|
-
return props.lineClamp ? styled.css(["display
|
|
37
|
+
return props.lineClamp ? styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n "])), props.lineClamp) : null;
|
|
43
38
|
});
|
|
44
39
|
|
|
45
40
|
var _excluded = ["warning", "error", "type", "alertMessage", "align", "icon", "fontSize", "lineHeight", "lineClamp", "verticalPadding", "horizontalPadding", "width"];
|