@ntbjs/react-components 1.1.10 → 1.1.12

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 (28) hide show
  1. package/{ActionButton-06df3d6c.js → ActionButton-46735b89.js} +13 -5
  2. package/{AssetGallery-3e57dc2c.js → AssetGallery-6f665c7a.js} +54 -27
  3. package/{AssetPreviewTopBar-c28715f7.js → AssetPreviewTopBar-912c3469.js} +8 -3
  4. package/{Badge-aec841c8.js → Badge-757b0a39.js} +1 -1
  5. package/{CompactAutocompleteSelect-86e10ff4.js → CompactAutocompleteSelect-96137f48.js} +8 -6
  6. package/{CompactStarRating-f1e62f3e.js → CompactStarRating-15c1b812.js} +17 -11
  7. package/{CompactTextInput-c27d33c1.js → CompactTextInput-c0d45782.js} +55 -39
  8. package/{Instructions-fed010b2.js → Instructions-2babb8a3.js} +2 -2
  9. package/{MultiLevelCheckboxSelect-040d2f28.js → MultiLevelCheckboxSelect-e6e5cb90.js} +3 -3
  10. package/{MultiSelect-4b8d3d0d.js → MultiSelect-efd60232.js} +1 -1
  11. package/{Tabs-a8c77f71.js → Tabs-116aa951.js} +27 -19
  12. package/{TextArea-d8ec6308.js → TextArea-18fbcc9f.js} +99 -159
  13. package/{VerificationStatusIcon-b574fd21.js → VerificationStatusIcon-d5bfb67a.js} +28 -13
  14. package/data/Badge/index.js +1 -1
  15. package/data/Tabs/index.js +1 -1
  16. package/data/index.js +3 -3
  17. package/inputs/ActionButton/index.js +1 -1
  18. package/inputs/CompactAutocompleteSelect/index.js +4 -4
  19. package/inputs/CompactStarRating/index.js +4 -4
  20. package/inputs/CompactTextInput/index.js +4 -4
  21. package/inputs/MultiSelect/index.js +1 -1
  22. package/inputs/TextArea/index.js +5 -5
  23. package/inputs/index.js +10 -10
  24. package/package.json +1 -1
  25. package/widgets/AssetGallery/index.js +11 -11
  26. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +1 -1
  27. package/widgets/Instructions/index.js +6 -6
  28. package/widgets/index.js +13 -13
package/{TextArea-d8ec6308.js → TextArea-18fbcc9f.js} RENAMED
@@ -2,15 +2,16 @@
2
2
 
3
3
  var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
+ var lodash = require('lodash');
5
6
  var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
6
7
  var nanoid = require('nanoid');
7
8
  require('./Alert-13b75102.js');
8
- require('./Badge-aec841c8.js');
9
+ require('./Badge-757b0a39.js');
9
10
  require('./Popover-569cd272.js');
10
11
  require('./Tab-f499ecbc.js');
11
- require('./Tabs-a8c77f71.js');
12
+ require('./Tabs-116aa951.js');
12
13
  var Tooltip = require('./Tooltip-66daf6e3.js');
13
- require('./VerificationStatusIcon-b574fd21.js');
14
+ require('./VerificationStatusIcon-d5bfb67a.js');
14
15
  var editNote = require('./edit-note-c47d292e.js');
15
16
  var styled = require('styled-components');
16
17
 
@@ -28,33 +29,27 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
28
29
  }, function (props) {
29
30
  return props.theme.themeProp('opacity', 0.6, 0.5);
30
31
  });
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
- 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');
32
+ var TextAreaContainter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
33
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ", "\n"])), function (props) {
34
+ return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
35
35
  }, function (props) {
36
- return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
36
+ return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
37
37
  });
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 "])));
42
- }, function (props) {
43
- return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
44
- }, 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 "])));
38
+ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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\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) {
39
+ return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
46
40
  }, function (props) {
47
- return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
41
+ return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
42
+ });
43
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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 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) {
44
+ return props.borderRadius && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
48
45
  }, function (props) {
49
46
  return props.theme.themeProp('color', 'white', 'black');
50
47
  }, function (props) {
51
- return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
52
- }, function (props) {
53
- return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
48
+ return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
54
49
  }, function (props) {
55
- return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
50
+ return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
56
51
  }, function (props) {
57
- return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
52
+ return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
58
53
  }, function (props) {
59
54
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
60
55
  }, function (props) {
@@ -64,59 +59,51 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
64
59
  }, function (props) {
65
60
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
66
61
  }, function (props) {
67
- return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
62
+ return props.noBorder && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
63
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
69
64
  });
70
65
  }, 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'));
66
+ 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
67
  }, 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'));
76
- }, 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');
79
- });
68
+ 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'));
80
69
  }, 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');
70
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
71
+ return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
83
72
  });
84
73
  }, function (props) {
85
- return props.noBorder && props.type === 'error' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
74
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
86
75
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
87
76
  });
88
77
  }, 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')));
78
+ 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
79
  }, 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')));
80
+ 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
81
  }, 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'));
82
+ 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
83
  }, 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');
84
+ return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
98
85
  }, function (props) {
99
86
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
100
87
  }, function (props) {
101
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
88
+ return props.padding === 'small' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
102
89
  }, function (props) {
103
- return props.hasIcon && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
90
+ return props.padding === 'medium' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
104
91
  }, function (props) {
105
- return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
92
+ return props.padding === 'large' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
106
93
  }, function (props) {
107
- return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
94
+ return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
108
95
  }, 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
- });
96
+ return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
97
+ }, function (props) {
98
+ return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
112
99
  }, function (props) {
113
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
100
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
114
101
  }, function (props) {
115
102
  return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
116
103
  }, 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';
104
+ 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
105
  }, InputIconContainer, function (props) {
119
- return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
106
+ return props.type === 'success' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
120
107
  }, function (props) {
121
108
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
122
109
  }, function (props) {
@@ -126,55 +113,70 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
126
113
  }, function (props) {
127
114
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
128
115
  }, function (props) {
129
- return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
116
+ return props.type === 'warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
130
117
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
131
118
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
132
119
  }, function (props) {
133
- return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
120
+ return props.type === 'error' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
134
121
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
135
122
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
136
123
  }, function (props) {
137
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
124
+ return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
138
125
  }, function (props) {
139
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
126
+ return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
140
127
  }, function (props) {
141
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
128
+ return props.noBorder && props.edit && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
129
+ return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
130
+ });
131
+ }, function (props) {
132
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
142
133
  });
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) {
134
+ 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) {
135
+ return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
136
+ }, placeholderBaseStyle, function (props) {
144
137
  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
138
  }, function (props) {
146
- return !props.inputIsEmpty && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
139
+ return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
147
140
  }, function (props) {
148
- return props.hasPlaceholder && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
141
+ return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
149
142
  }, function (props) {
150
- return props.hasIcon && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
143
+ return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
151
144
  });
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'));
145
+ 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"])));
146
+ 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: 12px;\n width: 15px;\n }\n"])), function (props) {
147
+ return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
155
148
  });
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 "])));
149
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\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) {
150
+ return props.$fieldLabel ? '66.66%' : '100%';
151
+ }, function (props) {
152
+ return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
158
153
  }, function (props) {
159
- return props.disabled && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
154
+ return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
160
155
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
161
156
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
162
157
  });
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) {
158
+ 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
159
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
165
160
  }, 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')));
161
+ 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')));
162
+ }, function (props) {
163
+ 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')));
164
+ });
165
+ 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) {
166
+ return props.fadeIn ? 0 : 1;
167
+ }, function (props) {
168
+ return props.fadeIn ? fadeOutCheck : fadeInCheck;
167
169
  }, 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')));
170
+ return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
169
171
  });
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) {
172
+ var SuccessContainerLabel = 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 margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 13px;\n }\n"])), function (props) {
171
173
  return props.fadeIn ? 0 : 1;
172
174
  }, function (props) {
173
175
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
174
176
  }, function (props) {
175
177
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
176
178
  });
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) {
179
+ 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
180
  return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
179
181
  }, function (props) {
180
182
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
@@ -195,9 +197,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
195
197
  hidden = _ref.hidden,
196
198
  readOnly = _ref.readOnly,
197
199
  edit = _ref.edit,
198
- showMore = _ref.showMore,
199
- showMoreText = _ref.showMoreText,
200
- showLessText = _ref.showLessText,
201
200
  autoComplete = _ref.autoComplete,
202
201
  description = _ref.description,
203
202
  type = _ref.type,
@@ -210,12 +209,13 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
210
209
  lightBackground = _ref.lightBackground,
211
210
  noBorder = _ref.noBorder,
212
211
  instructionsTextArea = _ref.instructionsTextArea,
213
- isExpanded = _ref.isExpanded,
214
212
  loadingIcon = _ref.loadingIcon,
215
213
  successIcon = _ref.successIcon,
216
214
  padding = _ref.padding,
217
215
  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"]);
216
+ borderRadius = _ref.borderRadius,
217
+ fieldLabel = _ref.fieldLabel,
218
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"]);
219
219
 
220
220
  var textInputDomNode = React.useRef(null);
221
221
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -225,76 +225,21 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
225
225
  inputIsEmpty = _useState2[0],
226
226
  setInputIsEmpty = _useState2[1];
227
227
 
228
- var _useState3 = React.useState(''),
228
+ var _useState3 = React.useState(false),
229
229
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
230
- maxContentRows = _useState4[0],
231
- setMaxContentRows = _useState4[1];
232
-
233
- var _useState5 = React.useState(false),
234
- _useState6 = defaultTheme._slicedToArray(_useState5, 2),
235
- expanded = _useState6[0],
236
- setExpanded = _useState6[1];
237
-
238
- var _useState7 = React.useState(''),
239
- _useState8 = defaultTheme._slicedToArray(_useState7, 2),
240
- maxHeight = _useState8[0],
241
- setMaxHeight = _useState8[1];
230
+ autoFocus = _useState4[0],
231
+ setAutoFocus = _useState4[1];
242
232
 
243
- var _useState9 = React.useState(''),
244
- _useState10 = defaultTheme._slicedToArray(_useState9, 2),
245
- defaultHeight = _useState10[0],
246
- setDefaultHeight = _useState10[1];
247
-
248
- var _useState11 = React.useState(false),
249
- _useState12 = defaultTheme._slicedToArray(_useState11, 2),
250
- autoFocus = _useState12[0],
251
- setAutoFocus = _useState12[1];
252
-
253
- var _useState13 = React.useState(nanoid.nanoid()),
254
- _useState14 = defaultTheme._slicedToArray(_useState13, 1),
255
- uniqueId = _useState14[0];
233
+ var _useState5 = React.useState(nanoid.nanoid()),
234
+ _useState6 = defaultTheme._slicedToArray(_useState5, 1),
235
+ uniqueId = _useState6[0];
256
236
 
257
237
  var memoizedDescriptionToolTip = React.useMemo(function () {
258
238
  return descriptionToolTip;
259
239
  }, [descriptionToolTip]);
260
240
  React.useEffect(function () {
261
- setExpanded(false);
262
- isExpanded(false);
263
241
  setAutoFocus(false);
264
242
  }, [value, defaultValue]);
265
-
266
- var handleTextAreaChange = function handleTextAreaChange() {
267
- setExpanded(true);
268
- isExpanded(true);
269
- };
270
-
271
- var handleTextAreaShowLess = function handleTextAreaShowLess() {
272
- setExpanded(!expanded);
273
- isExpanded(!expanded);
274
- };
275
-
276
- var calculateRows = function calculateRows() {
277
- var textareaRefCurrent = textInputDomNode === null || textInputDomNode === void 0 ? void 0 : textInputDomNode.current;
278
-
279
- if (textareaRefCurrent !== null) {
280
- var textAreaHeight = textareaRefCurrent === null || textareaRefCurrent === void 0 ? void 0 : textareaRefCurrent.scrollHeight;
281
- var lineHeight = 16;
282
- var calculatedRows = Math.floor(textAreaHeight / lineHeight);
283
- var defaultRowsHeight = rows * lineHeight;
284
- setMaxContentRows(calculatedRows);
285
-
286
- if (calculatedRows > rows) {
287
- setDefaultHeight(defaultRowsHeight);
288
- setMaxHeight(textAreaHeight);
289
- } else {
290
- setMaxHeight();
291
- }
292
- }
293
- };
294
-
295
- React.useEffect(function () {
296
- calculateRows();
297
- }, [value, defaultValue]);
298
243
  var onKeyDown = React.useCallback(function (event) {
299
244
  if (event.key === 'Enter') {
300
245
  event.stopPropagation();
@@ -302,19 +247,23 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
302
247
  }, []);
303
248
 
304
249
  var input = function input() {
305
- return React__default['default'].createElement(TextInput, {
250
+ return React__default['default'].createElement(TextAreaContainter, null, fieldLabel && React__default['default'].createElement(Label, {
251
+ htmlFor: uniqueId,
252
+ disabled: disabled
253
+ }, fieldLabel, React__default['default'].createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default['default'].createElement(TextInput, {
254
+ $fieldLabel: !lodash.isEmpty(fieldLabel),
306
255
  disabled: disabled,
307
256
  readOnly: readOnly,
308
257
  type: type,
309
258
  className: className,
310
259
  style: style
311
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
260
+ }, React__default['default'].createElement(TextInputFieldIconAlert, {
261
+ type: type
262
+ }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
312
263
  autoFocus: autoFocus,
264
+ borderRadius: borderRadius,
313
265
  ref: textInputRef,
314
266
  rows: rows,
315
- expanded: expanded,
316
- defaultHeight: defaultHeight,
317
- maxHeight: maxHeight,
318
267
  value: value,
319
268
  defaultValue: defaultValue,
320
269
  name: name,
@@ -324,7 +273,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
324
273
  disabled: disabled,
325
274
  edit: edit,
326
275
  instructionsTextArea: instructionsTextArea,
327
- showMore: showMore,
328
276
  type: type,
329
277
  autoComplete: autoComplete,
330
278
  hasIcon: Boolean(icon),
@@ -353,9 +301,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
353
301
  onKeyDown: onKeyDown,
354
302
  onBlur: onBlur,
355
303
  noBorder: noBorder
356
- }, rest, {
357
- onClick: showMore ? handleTextAreaChange : undefined
358
- })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
304
+ }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
359
305
  disabled: disabled
360
306
  }, React__default['default'].createElement(editNote.SvgEditNote, {
361
307
  className: padding === 'small' ? 'smallPadingIcon' : undefined
@@ -366,10 +312,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
366
312
  inputIsEmpty: inputIsEmpty
367
313
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
368
314
  type: type
369
- }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
370
- onClick: showMore ? handleTextAreaShowLess : undefined,
371
- expanded: expanded
372
- }, !expanded ? showMoreText : showLessText));
315
+ }, description)));
373
316
  };
374
317
 
375
318
  if (hidden) return null;
@@ -387,29 +330,25 @@ TextArea.defaultProps = {
387
330
  readOnly: false,
388
331
  edit: false,
389
332
  hidden: false,
390
- showMore: false,
391
- showMoreText: '',
392
- showLessText: '',
393
333
  type: '',
394
334
  padding: 'medium',
395
335
  instructionsTextArea: false,
396
336
  descriptionToolTip: '',
397
337
  isExpanded: function isExpanded() {},
398
- onChange: function onChange() {}
338
+ onChange: function onChange() {},
339
+ borderRadius: 0
399
340
  };
400
341
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
401
342
  value: defaultTheme.PropTypes.string,
402
343
  defaultValue: defaultTheme.PropTypes.string,
403
344
  name: defaultTheme.PropTypes.string,
404
345
  label: defaultTheme.PropTypes.string,
346
+ fieldLabel: defaultTheme.PropTypes.string,
405
347
  placeholder: defaultTheme.PropTypes.string,
406
348
  required: defaultTheme.PropTypes.bool,
407
349
  disabled: defaultTheme.PropTypes.bool,
408
350
  hidden: defaultTheme.PropTypes.bool,
409
351
  readOnly: defaultTheme.PropTypes.bool,
410
- showMore: defaultTheme.PropTypes.bool,
411
- showMoreText: defaultTheme.PropTypes.string,
412
- showLessText: defaultTheme.PropTypes.string,
413
352
  edit: defaultTheme.PropTypes.bool,
414
353
  autoComplete: defaultTheme.PropTypes.string,
415
354
  description: defaultTheme.PropTypes.string,
@@ -419,17 +358,18 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
419
358
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
420
359
  className: defaultTheme.PropTypes.string,
421
360
  style: defaultTheme.PropTypes.object,
422
- padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
361
+ padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
423
362
  lightBackground: defaultTheme.PropTypes.bool,
424
363
  onChange: defaultTheme.PropTypes.func,
425
364
  onBlur: defaultTheme.PropTypes.func,
426
365
  noBorder: defaultTheme.PropTypes.bool,
427
366
  isExpanded: defaultTheme.PropTypes.func,
428
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
367
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
429
368
  instructionsTextArea: defaultTheme.PropTypes.bool,
430
369
  loadingIcon: defaultTheme.PropTypes.element,
431
370
  successIcon: defaultTheme.PropTypes.element,
432
- descriptionToolTip: defaultTheme.PropTypes.string
371
+ descriptionToolTip: defaultTheme.PropTypes.string,
372
+ borderRadius: defaultTheme.PropTypes.number
433
373
  } : {};
434
374
 
435
375
  exports.TextArea = TextArea;
package/{VerificationStatusIcon-b574fd21.js → VerificationStatusIcon-d5bfb67a.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,16 @@ 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');
71
+ } else if (props.status === 'mixed') {
72
+ darkThemeColor = '#008CDB';
73
+ lightThemeColor = '#008CDB';
66
74
  }
67
75
 
68
76
  return props.theme.themeProp('background-color', darkThemeColor, lightThemeColor);
@@ -85,22 +93,29 @@ function SvgVerification(props) {
85
93
  var VerificationStatusIcon = React__default['default'].forwardRef(function VerificationStatusIcon(_ref, forwardedRef) {
86
94
  var status = _ref.status,
87
95
  iconHeight = _ref.iconHeight,
88
- props = defaultTheme._objectWithoutProperties(_ref, ["status", "iconHeight"]);
96
+ background = _ref.background,
97
+ props = defaultTheme._objectWithoutProperties(_ref, ["status", "iconHeight", "background"]);
89
98
 
90
- return React__default['default'].createElement(VerificationStatusIcon$1, defaultTheme._extends({
99
+ return React__default['default'].createElement(VerificationIconWrapper, {
100
+ background: background
101
+ }, React__default['default'].createElement(VerificationStatusIcon$1, defaultTheme._extends({
91
102
  iconHeight: iconHeight,
103
+ background: background,
92
104
  ref: forwardedRef
93
105
  }, props), React__default['default'].createElement(SvgVerification, null), React__default['default'].createElement(VerificationStatusColor, {
94
106
  iconHeight: iconHeight,
95
- status: status
96
- }));
107
+ status: status,
108
+ background: background
109
+ })));
97
110
  });
98
111
  VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {
99
- status: defaultTheme.PropTypes.oneOf(['verified', 'pending', 'rejected']).isRequired,
100
- iconHeight: defaultTheme.PropTypes.number
112
+ status: defaultTheme.PropTypes.oneOf(['verified', 'pending', 'rejected', 'mixed']).isRequired,
113
+ iconHeight: defaultTheme.PropTypes.number,
114
+ background: defaultTheme.PropTypes.bool
101
115
  } : {};
102
116
  VerificationStatusIcon.defaultProps = {
103
- iconHeight: 15
117
+ iconHeight: 15,
118
+ background: false
104
119
  };
105
120
 
106
121
  exports.VerificationStatusIcon = VerificationStatusIcon;
package/data/Badge/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Badge = require('../../Badge-aec841c8.js');
3
+ var Badge = require('../../Badge-757b0a39.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/data/Tabs/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Tabs = require('../../Tabs-a8c77f71.js');
3
+ var Tabs = require('../../Tabs-116aa951.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/data/index.js CHANGED
@@ -3,12 +3,12 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var Alert = require('../Alert-13b75102.js');
6
- var Badge = require('../Badge-aec841c8.js');
6
+ var Badge = require('../Badge-757b0a39.js');
7
7
  var Popover = require('../Popover-569cd272.js');
8
8
  var Tab = require('../Tab-f499ecbc.js');
9
- var Tabs = require('../Tabs-a8c77f71.js');
9
+ var Tabs = require('../Tabs-116aa951.js');
10
10
  var Tooltip = require('../Tooltip-66daf6e3.js');
11
- var VerificationStatusIcon = require('../VerificationStatusIcon-b574fd21.js');
11
+ var VerificationStatusIcon = require('../VerificationStatusIcon-d5bfb67a.js');
12
12
  require('../defaultTheme-ea44e34a.js');
13
13
  require('styled-components');
14
14
  require('react');