@ntbjs/react-components 1.1.9 → 1.1.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.
Files changed (26) hide show
  1. package/{ActionButton-06df3d6c.js → ActionButton-46735b89.js} +13 -5
  2. package/{AssetGallery-c4dc57e6.js → AssetGallery-a948de8d.js} +53 -26
  3. package/{AssetPreviewTopBar-c28715f7.js → AssetPreviewTopBar-912c3469.js} +8 -3
  4. package/{CompactAutocompleteSelect-87c8c7e7.js → CompactAutocompleteSelect-b68618b3.js} +7 -5
  5. package/{CompactStarRating-1aedbcf4.js → CompactStarRating-405e4508.js} +14 -8
  6. package/{CompactTextInput-aafb1a17.js → CompactTextInput-0d53acdf.js} +9 -5
  7. package/{Instructions-b9f2e184.js → Instructions-d7dcc0ce.js} +2 -2
  8. package/{MultiLevelCheckboxSelect-eeb5dcef.js → MultiLevelCheckboxSelect-f3de8047.js} +2 -2
  9. package/{MultiSelect-4b8d3d0d.js → MultiSelect-efd60232.js} +1 -1
  10. package/{Tabs-4d7742bc.js → Tabs-a8c77f71.js} +23 -4
  11. package/{TextArea-229e7abb.js → TextArea-57c69d16.js} +72 -74
  12. package/{VerificationStatusIcon-b574fd21.js → VerificationStatusIcon-6fe95a92.js} +24 -12
  13. package/data/Tabs/index.js +1 -1
  14. package/data/index.js +2 -2
  15. package/inputs/ActionButton/index.js +1 -1
  16. package/inputs/CompactAutocompleteSelect/index.js +3 -3
  17. package/inputs/CompactStarRating/index.js +3 -3
  18. package/inputs/CompactTextInput/index.js +3 -3
  19. package/inputs/MultiSelect/index.js +1 -1
  20. package/inputs/TextArea/index.js +3 -3
  21. package/inputs/index.js +9 -9
  22. package/package.json +1 -1
  23. package/widgets/AssetGallery/index.js +10 -10
  24. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +1 -1
  25. package/widgets/Instructions/index.js +5 -5
  26. package/widgets/index.js +12 -12
package/{TextArea-229e7abb.js → TextArea-57c69d16.js} RENAMED
@@ -8,9 +8,9 @@ require('./Alert-13b75102.js');
8
8
  require('./Badge-aec841c8.js');
9
9
  require('./Popover-569cd272.js');
10
10
  require('./Tab-f499ecbc.js');
11
- require('./Tabs-4d7742bc.js');
11
+ require('./Tabs-a8c77f71.js');
12
12
  var Tooltip = require('./Tooltip-66daf6e3.js');
13
- require('./VerificationStatusIcon-b574fd21.js');
13
+ require('./VerificationStatusIcon-6fe95a92.js');
14
14
  var editNote = require('./edit-note-c47d292e.js');
15
15
  var styled = require('styled-components');
16
16
 
@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
20
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
21
21
 
22
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47;
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
23
23
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
24
24
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
25
25
  var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
@@ -28,33 +28,27 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
28
28
  }, function (props) {
29
29
  return props.theme.themeProp('opacity', 0.6, 0.5);
30
30
  });
31
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
31
+ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ", "\n }\n"])), function (props) {
32
32
  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
33
- }, function (props) {
34
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
35
33
  }, function (props) {
36
34
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
37
35
  });
38
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
39
- return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
40
- }, function (props) {
41
- return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
36
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n ", "\n\n\n\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", "\n\n ", ";\n\n \n }\n"])), function (props) {
37
+ return props.borderRadius && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
42
38
  }, function (props) {
43
- return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
39
+ return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
44
40
  }, function (props) {
45
- return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
46
- }, function (props) {
47
- return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
41
+ return props.expanded && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
48
42
  }, function (props) {
49
43
  return props.theme.themeProp('color', 'white', 'black');
50
44
  }, function (props) {
51
- return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
45
+ return props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
52
46
  }, function (props) {
53
- return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
47
+ return props.disabled && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
54
48
  }, function (props) {
55
- return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
49
+ return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
56
50
  }, function (props) {
57
- return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
51
+ return props.showMore && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
58
52
  }, function (props) {
59
53
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
60
54
  }, function (props) {
@@ -64,59 +58,51 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
64
58
  }, function (props) {
65
59
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
66
60
  }, function (props) {
67
- return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
61
+ return props.noBorder && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
62
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
69
63
  });
70
64
  }, function (props) {
71
- return props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
72
- }, function (props) {
73
- return props.type === 'instructions-warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
65
+ return props.type === 'warning' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
74
66
  }, function (props) {
75
- return props.type === 'error' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
67
+ return props.type === 'error' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
76
68
  }, function (props) {
77
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
78
- return props.theme.themeProp('border-color', '#634E01', '#FFF36C');
69
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
70
+ return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
79
71
  });
80
72
  }, function (props) {
81
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
82
- return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
83
- });
84
- }, function (props) {
85
- return props.noBorder && props.type === 'error' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
73
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
86
74
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
87
75
  });
88
76
  }, function (props) {
89
- return props.type === 'warning-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
77
+ return props.type === 'warning-border' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
90
78
  }, function (props) {
91
- return props.type === 'error-border' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
79
+ return props.type === 'error-border' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
92
80
  }, function (props) {
93
- return props.lightBackground && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
81
+ return props.lightBackground && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
94
82
  }, function (props) {
95
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
96
- }, function (props) {
97
- return props.edit && !props.type === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
83
+ return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
98
84
  }, function (props) {
99
85
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
100
86
  }, function (props) {
101
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
87
+ return props.padding === 'small' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
102
88
  }, function (props) {
103
- return props.hasIcon && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
89
+ return props.padding === 'medium' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
104
90
  }, function (props) {
105
- return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
91
+ return props.padding === 'large' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
106
92
  }, function (props) {
107
- return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
93
+ return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
108
94
  }, function (props) {
109
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
110
- return props.theme.themeProp('border-color', '#806403', '#F4E21E');
111
- });
95
+ return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
112
96
  }, function (props) {
113
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
97
+ return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
98
+ }, function (props) {
99
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
114
100
  }, function (props) {
115
101
  return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
116
102
  }, function (props) {
117
- return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' && props.type != 'instructions-warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
103
+ return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
118
104
  }, InputIconContainer, function (props) {
119
- return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
105
+ return props.type === 'success' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
120
106
  }, function (props) {
121
107
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
122
108
  }, function (props) {
@@ -126,62 +112,68 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
126
112
  }, function (props) {
127
113
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
128
114
  }, function (props) {
129
- return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
115
+ return props.type === 'warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
130
116
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
131
117
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
132
118
  }, function (props) {
133
- return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
119
+ return props.type === 'error' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
134
120
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
135
121
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
136
122
  }, function (props) {
137
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
123
+ return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
138
124
  }, function (props) {
139
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
125
+ return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
140
126
  }, function (props) {
141
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
127
+ return props.noBorder && props.edit && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
128
+ return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
129
+ });
130
+ }, function (props) {
131
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
142
132
  });
143
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
133
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
134
+ return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
135
+ }, placeholderBaseStyle, function (props) {
144
136
  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
145
137
  }, function (props) {
146
- return !props.inputIsEmpty && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
138
+ return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
147
139
  }, function (props) {
148
- return props.hasPlaceholder && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
140
+ return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
149
141
  }, function (props) {
150
- return props.hasIcon && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
142
+ return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
151
143
  });
152
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
153
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n margin-top: -3px;\n ", "\n }\n"])), function (props) {
154
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
144
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
145
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 11px;\n width: 15px;\n }\n"])), function (props) {
146
+ return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
155
147
  });
156
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
157
- return props.readOnly && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
148
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
149
+ return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
158
150
  }, function (props) {
159
- return props.disabled && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
151
+ return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
160
152
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
161
153
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
162
154
  });
163
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
155
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
164
156
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
165
157
  }, function (props) {
166
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
158
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
167
159
  }, function (props) {
168
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
160
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
169
161
  });
170
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
162
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
171
163
  return props.fadeIn ? 0 : 1;
172
164
  }, function (props) {
173
165
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
174
166
  }, function (props) {
175
167
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
176
168
  });
177
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
178
- return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
169
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
170
+ return props.expanded && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
179
171
  }, function (props) {
180
172
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
181
173
  }, function (props) {
182
174
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
183
175
  }, function (props) {
184
- return props.type === 'error' && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
176
+ return props.type === 'error' && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
185
177
  });
186
178
 
187
179
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -215,7 +207,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
215
207
  successIcon = _ref.successIcon,
216
208
  padding = _ref.padding,
217
209
  descriptionToolTip = _ref.descriptionToolTip,
218
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded", "loadingIcon", "successIcon", "padding", "descriptionToolTip"]);
210
+ borderRadius = _ref.borderRadius,
211
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius"]);
219
212
 
220
213
  var textInputDomNode = React.useRef(null);
221
214
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -308,8 +301,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
308
301
  type: type,
309
302
  className: className,
310
303
  style: style
311
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
304
+ }, React__default['default'].createElement(TextInputFieldIconAlert, {
305
+ type: type
306
+ }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
312
307
  autoFocus: autoFocus,
308
+ borderRadius: borderRadius,
313
309
  ref: textInputRef,
314
310
  rows: rows,
315
311
  expanded: expanded,
@@ -395,7 +391,8 @@ TextArea.defaultProps = {
395
391
  instructionsTextArea: false,
396
392
  descriptionToolTip: '',
397
393
  isExpanded: function isExpanded() {},
398
- onChange: function onChange() {}
394
+ onChange: function onChange() {},
395
+ borderRadius: 0
399
396
  };
400
397
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
401
398
  value: defaultTheme.PropTypes.string,
@@ -419,17 +416,18 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
419
416
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
420
417
  className: defaultTheme.PropTypes.string,
421
418
  style: defaultTheme.PropTypes.object,
422
- padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
419
+ padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
423
420
  lightBackground: defaultTheme.PropTypes.bool,
424
421
  onChange: defaultTheme.PropTypes.func,
425
422
  onBlur: defaultTheme.PropTypes.func,
426
423
  noBorder: defaultTheme.PropTypes.bool,
427
424
  isExpanded: defaultTheme.PropTypes.func,
428
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
425
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
429
426
  instructionsTextArea: defaultTheme.PropTypes.bool,
430
427
  loadingIcon: defaultTheme.PropTypes.element,
431
428
  successIcon: defaultTheme.PropTypes.element,
432
- descriptionToolTip: defaultTheme.PropTypes.string
429
+ descriptionToolTip: defaultTheme.PropTypes.string,
430
+ borderRadius: defaultTheme.PropTypes.number
433
431
  } : {};
434
432
 
435
433
  exports.TextArea = TextArea;
package/{VerificationStatusIcon-b574fd21.js → VerificationStatusIcon-6fe95a92.js} RENAMED
@@ -30,15 +30,20 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
30
30
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
31
31
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
32
32
 
33
- var _templateObject, _templateObject2;
34
- var VerificationStatusIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: relative;\n font: normal normal normal 12px/16px Roboto;\n\n ", ";\n\n svg {\n height: ", "px;\n }\n"])), function (props) {
33
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
34
+ var VerificationIconWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n ", ";\n"])), function (props) {
35
+ return props.background && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: #000 !important;\n width: fit-content;\n padding: 6px 14px 6px 9px;\n border-radius: 15px;\n}\n "])));
36
+ });
37
+ var VerificationStatusIcon$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n position: relative;\n font: normal normal normal 12px/16px Roboto;\n ", ";\n\n ", ";\n\n svg {\n height: ", "px;\n }\n"])), function (props) {
35
38
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700'));
39
+ }, function (props) {
40
+ return props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100'));
36
41
  }, function (props) {
37
42
  var _props$iconHeight;
38
43
 
39
44
  return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
40
45
  });
41
- var VerificationStatusColor = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n ", "\n"])), function (props) {
46
+ var VerificationStatusColor = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n bottom: 0;\n left: ", "px;\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n ", ";\n"])), function (props) {
42
47
  var _props$iconHeight2;
43
48
 
44
49
  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
@@ -56,13 +61,13 @@ var VerificationStatusColor = styled__default['default'].div.attrs(defaultTheme.
56
61
 
57
62
  if (props.status === 'verified') {
58
63
  darkThemeColor = props.theme.getColor('emerald-500');
59
- lightThemeColor = props.theme.getColor('emerald-300');
64
+ lightThemeColor = props.theme.getColor('emerald-500');
60
65
  } else if (props.status === 'pending') {
61
- darkThemeColor = props.theme.getColor('brown-500');
66
+ darkThemeColor = props.theme.getColor('signal-yellow-500');
62
67
  lightThemeColor = props.theme.getColor('signal-yellow-500');
63
68
  } else if (props.status === 'rejected') {
64
69
  darkThemeColor = props.theme.getColor('red-600');
65
- lightThemeColor = props.theme.getColor('red-200');
70
+ lightThemeColor = props.theme.getColor('red-600');
66
71
  }
67
72
 
68
73
  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
@@ -85,22 +90,29 @@ function SvgVerification(props) {
85
90
  var VerificationStatusIcon = React__default['default'].forwardRef(function VerificationStatusIcon(_ref, forwardedRef) {
86
91
  var status = _ref.status,
87
92
  iconHeight = _ref.iconHeight,
88
- props = defaultTheme._objectWithoutProperties(_ref, ["status", "iconHeight"]);
93
+ background = _ref.background,
94
+ props = defaultTheme._objectWithoutProperties(_ref, ["status", "iconHeight", "background"]);
89
95
 
90
- return React__default['default'].createElement(VerificationStatusIcon$1, defaultTheme._extends({
96
+ return React__default['default'].createElement(VerificationIconWrapper, {
97
+ background: background
98
+ }, React__default['default'].createElement(VerificationStatusIcon$1, defaultTheme._extends({
91
99
  iconHeight: iconHeight,
100
+ background: background,
92
101
  ref: forwardedRef
93
102
  }, props), React__default['default'].createElement(SvgVerification, null), React__default['default'].createElement(VerificationStatusColor, {
94
103
  iconHeight: iconHeight,
95
- status: status
96
- }));
104
+ status: status,
105
+ background: background
106
+ })));
97
107
  });
98
108
  VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
99
109
  status: defaultTheme.PropTypes.oneOf(['verified', 'pending', 'rejected']).isRequired,
100
- iconHeight: defaultTheme.PropTypes.number
110
+ iconHeight: defaultTheme.PropTypes.number,
111
+ background: defaultTheme.PropTypes.bool
101
112
  } : {};
102
113
  VerificationStatusIcon.defaultProps = {
103
- iconHeight: 15
114
+ iconHeight: 15,
115
+ background: false
104
116
  };
105
117
 
106
118
  exports.VerificationStatusIcon = VerificationStatusIcon;
package/data/Tabs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Tabs = require('../../Tabs-4d7742bc.js');
3
+ var Tabs = require('../../Tabs-a8c77f71.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/data/index.js CHANGED
@@ -6,9 +6,9 @@ var Alert = require('../Alert-13b75102.js');
6
6
  var Badge = require('../Badge-aec841c8.js');
7
7
  var Popover = require('../Popover-569cd272.js');
8
8
  var Tab = require('../Tab-f499ecbc.js');
9
- var Tabs = require('../Tabs-4d7742bc.js');
9
+ var Tabs = require('../Tabs-a8c77f71.js');
10
10
  var Tooltip = require('../Tooltip-66daf6e3.js');
11
- var VerificationStatusIcon = require('../VerificationStatusIcon-b574fd21.js');
11
+ var VerificationStatusIcon = require('../VerificationStatusIcon-6fe95a92.js');
12
12
  require('../defaultTheme-ea44e34a.js');
13
13
  require('styled-components');
14
14
  require('react');
package/inputs/ActionButton/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var ActionButton = require('../../ActionButton-06df3d6c.js');
3
+ var ActionButton = require('../../ActionButton-46735b89.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/CompactAutocompleteSelect/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-87c8c7e7.js');
3
+ var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-b68618b3.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -14,9 +14,9 @@ require('@tippyjs/react');
14
14
  require('../../shift-away-subtle-0bed9a3c.js');
15
15
  require('popper-max-size-modifier');
16
16
  require('../../Tab-f499ecbc.js');
17
- require('../../Tabs-4d7742bc.js');
17
+ require('../../Tabs-a8c77f71.js');
18
18
  require('../../Tooltip-66daf6e3.js');
19
- require('../../VerificationStatusIcon-b574fd21.js');
19
+ require('../../VerificationStatusIcon-6fe95a92.js');
20
20
  require('react-select');
21
21
  require('react-select-async-paginate');
22
22
  require('../../react-select-creatable.esm-2f23d6c6.js');
package/inputs/CompactStarRating/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-1aedbcf4.js');
3
+ var CompactStarRating = require('../../CompactStarRating-405e4508.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -13,9 +13,9 @@ require('@tippyjs/react');
13
13
  require('../../shift-away-subtle-0bed9a3c.js');
14
14
  require('popper-max-size-modifier');
15
15
  require('../../Tab-f499ecbc.js');
16
- require('../../Tabs-4d7742bc.js');
16
+ require('../../Tabs-a8c77f71.js');
17
17
  require('../../Tooltip-66daf6e3.js');
18
- require('../../VerificationStatusIcon-b574fd21.js');
18
+ require('../../VerificationStatusIcon-6fe95a92.js');
19
19
 
20
20
 
21
21
 
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-aafb1a17.js');
3
+ var CompactTextInput = require('../../CompactTextInput-0d53acdf.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -15,9 +15,9 @@ require('@tippyjs/react');
15
15
  require('../../shift-away-subtle-0bed9a3c.js');
16
16
  require('popper-max-size-modifier');
17
17
  require('../../Tab-f499ecbc.js');
18
- require('../../Tabs-4d7742bc.js');
18
+ require('../../Tabs-a8c77f71.js');
19
19
  require('../../Tooltip-66daf6e3.js');
20
- require('../../VerificationStatusIcon-b574fd21.js');
20
+ require('../../VerificationStatusIcon-6fe95a92.js');
21
21
 
22
22
 
23
23
 
package/inputs/MultiSelect/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var MultiSelect = require('../../MultiSelect-4b8d3d0d.js');
3
+ var MultiSelect = require('../../MultiSelect-efd60232.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-229e7abb.js');
3
+ var TextArea = require('../../TextArea-57c69d16.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -15,9 +15,9 @@ require('@tippyjs/react');
15
15
  require('../../shift-away-subtle-0bed9a3c.js');
16
16
  require('popper-max-size-modifier');
17
17
  require('../../Tab-f499ecbc.js');
18
- require('../../Tabs-4d7742bc.js');
18
+ require('../../Tabs-a8c77f71.js');
19
19
  require('../../Tooltip-66daf6e3.js');
20
- require('../../VerificationStatusIcon-b574fd21.js');
20
+ require('../../VerificationStatusIcon-6fe95a92.js');
21
21
  require('../../edit-note-c47d292e.js');
22
22
 
23
23
 
package/inputs/index.js CHANGED
@@ -2,18 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var ActionButton = require('../ActionButton-06df3d6c.js');
5
+ var ActionButton = require('../ActionButton-46735b89.js');
6
6
  var Button = require('../Button-49f82b31.js');
7
7
  var Checkbox = require('../Checkbox-68dc38a8.js');
8
- var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-87c8c7e7.js');
9
- var CompactStarRating = require('../CompactStarRating-1aedbcf4.js');
10
- var CompactTextInput = require('../CompactTextInput-aafb1a17.js');
11
- var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
8
+ var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b68618b3.js');
9
+ var CompactStarRating = require('../CompactStarRating-405e4508.js');
10
+ var CompactTextInput = require('../CompactTextInput-0d53acdf.js');
11
+ var MultiSelect = require('../MultiSelect-efd60232.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-229e7abb.js');
13
+ var TextArea = require('../TextArea-57c69d16.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
- var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-eeb5dcef.js');
16
+ var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-f3de8047.js');
17
17
  require('../defaultTheme-ea44e34a.js');
18
18
  require('styled-components');
19
19
  require('react');
@@ -29,9 +29,9 @@ require('nanoid');
29
29
  require('../Alert-13b75102.js');
30
30
  require('../Badge-aec841c8.js');
31
31
  require('../Tab-f499ecbc.js');
32
- require('../Tabs-4d7742bc.js');
32
+ require('../Tabs-a8c77f71.js');
33
33
  require('../Tooltip-66daf6e3.js');
34
- require('../VerificationStatusIcon-b574fd21.js');
34
+ require('../VerificationStatusIcon-6fe95a92.js');
35
35
  require('react-select');
36
36
  require('react-select-async-paginate');
37
37
  require('../react-select-creatable.esm-2f23d6c6.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.9",
3
+ "version": "1.1.11",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",