@ntbjs/react-components 1.3.0-rc.4 → 1.3.0-rc.6

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 (9) hide show
  1. package/{AssetGallery-7d05ac94.js → AssetGallery-c8b24eb3.js} +1 -1
  2. package/{Instructions-e5947be9.js → Instructions-ab2eb3c7.js} +1 -1
  3. package/{TextArea-8f62da6e.js → TextArea-d17c9516.js} +66 -44
  4. package/inputs/TextArea/index.js +2 -2
  5. package/inputs/index.js +1 -1
  6. package/package.json +1 -1
  7. package/widgets/AssetGallery/index.js +2 -2
  8. package/widgets/Instructions/index.js +2 -2
  9. package/widgets/index.js +3 -3
package/{AssetGallery-7d05ac94.js → AssetGallery-c8b24eb3.js} RENAMED
@@ -24,7 +24,7 @@ require('./CompactStarRating-bcfb78ac.js');
24
24
  require('./CompactTextInput-9e507306.js');
25
25
  require('./MultiSelect-efd60232.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-8f62da6e.js');
27
+ require('./TextArea-d17c9516.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
package/{Instructions-e5947be9.js → Instructions-ab2eb3c7.js} RENAMED
@@ -5,7 +5,7 @@ var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-755b1869.js');
8
- var TextArea = require('./TextArea-8f62da6e.js');
8
+ var TextArea = require('./TextArea-d17c9516.js');
9
9
  var styled = require('styled-components');
10
10
 
11
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
package/{TextArea-8f62da6e.js → TextArea-d17c9516.js} RENAMED
@@ -2,6 +2,7 @@
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');
@@ -19,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
19
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
21
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
21
22
 
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;
23
+ 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;
23
24
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
24
25
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
25
26
  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,21 +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
+ 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
+ }, function (props) {
36
+ return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
37
+ });
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) {
32
39
  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
33
40
  }, function (props) {
34
- return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
41
+ return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
35
42
  });
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\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);
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);
38
45
  }, function (props) {
39
46
  return props.theme.themeProp('color', 'white', 'black');
40
47
  }, function (props) {
41
- return props.readOnly && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
48
+ return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
42
49
  }, function (props) {
43
- return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
50
+ return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
44
51
  }, function (props) {
45
- return props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
52
+ return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
46
53
  }, function (props) {
47
54
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
48
55
  }, function (props) {
@@ -52,39 +59,39 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
52
59
  }, function (props) {
53
60
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
54
61
  }, function (props) {
55
- return props.noBorder && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
62
+ return props.noBorder && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
56
63
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
57
64
  });
58
65
  }, function (props) {
59
- return props.type === 'warning' && styled.css(_templateObject13 || (_templateObject13 = 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'));
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'));
60
67
  }, function (props) {
61
- return props.type === 'error' && styled.css(_templateObject14 || (_templateObject14 = 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'));
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'));
62
69
  }, function (props) {
63
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
70
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
64
71
  return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
65
72
  });
66
73
  }, function (props) {
67
- return props.noBorder && props.type === 'error' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
74
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
75
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
69
76
  });
70
77
  }, function (props) {
71
- return props.type === 'warning-border' && styled.css(_templateObject17 || (_templateObject17 = 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')));
72
79
  }, function (props) {
73
- return props.type === 'error-border' && styled.css(_templateObject18 || (_templateObject18 = 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')));
74
81
  }, function (props) {
75
- return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = 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'));
76
83
  }, function (props) {
77
84
  return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
78
85
  }, function (props) {
79
86
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
80
87
  }, function (props) {
81
- return props.padding === 'small' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
88
+ return props.padding === 'small' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
82
89
  }, function (props) {
83
- return props.padding === 'medium' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
90
+ return props.padding === 'medium' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
84
91
  }, function (props) {
85
- return props.padding === 'large' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
92
+ return props.padding === 'large' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
86
93
  }, function (props) {
87
- return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
94
+ return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
88
95
  }, function (props) {
89
96
  return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
90
97
  }, function (props) {
@@ -96,7 +103,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
96
103
  }, function (props) {
97
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';
98
105
  }, InputIconContainer, function (props) {
99
- return props.type === 'success' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
106
+ return props.type === 'success' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
100
107
  }, function (props) {
101
108
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
102
109
  }, function (props) {
@@ -106,11 +113,11 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
106
113
  }, function (props) {
107
114
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
108
115
  }, function (props) {
109
- return props.type === 'warning' && styled.css(_templateObject25 || (_templateObject25 = 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) {
110
117
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
111
118
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
112
119
  }, function (props) {
113
- return props.type === 'error' && styled.css(_templateObject26 || (_templateObject26 = 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) {
114
121
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
115
122
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
116
123
  }, function (props) {
@@ -118,56 +125,65 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
118
125
  }, function (props) {
119
126
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
120
127
  }, function (props) {
121
- return props.noBorder && props.edit && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
128
+ return props.noBorder && props.edit && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
122
129
  return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
123
130
  });
124
131
  }, function (props) {
125
132
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
126
133
  });
127
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = 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
+ 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) {
128
135
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
129
136
  }, placeholderBaseStyle, function (props) {
130
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%)"));
131
138
  }, function (props) {
132
- return !props.inputIsEmpty && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
139
+ return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
133
140
  }, function (props) {
134
- return props.hasPlaceholder && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
141
+ return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
135
142
  }, function (props) {
136
- return props.hasIcon && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
143
+ return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
137
144
  });
138
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = 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"])));
139
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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) {
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) {
140
147
  return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
141
148
  });
142
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = 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) {
143
- return props.readOnly && styled.css(_templateObject35 || (_templateObject35 = 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%';
144
151
  }, function (props) {
145
- return props.disabled && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
152
+ return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
153
+ }, function (props) {
154
+ return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
146
155
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
147
156
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
148
157
  });
149
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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) {
150
159
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
151
160
  }, function (props) {
152
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject38 || (_templateObject38 = 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')));
153
162
  }, function (props) {
154
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
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')));
155
164
  });
156
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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) {
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) {
157
166
  return props.fadeIn ? 0 : 1;
158
167
  }, function (props) {
159
168
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
160
169
  }, function (props) {
161
170
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
162
171
  });
163
- styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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) {
164
- return props.expanded && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
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) {
173
+ return props.fadeIn ? 0 : 1;
174
+ }, function (props) {
175
+ return props.fadeIn ? fadeOutCheck : fadeInCheck;
176
+ }, function (props) {
177
+ return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
178
+ });
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) {
180
+ return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
165
181
  }, function (props) {
166
182
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
167
183
  }, function (props) {
168
184
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
169
185
  }, function (props) {
170
- return props.type === 'error' && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
186
+ 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')));
171
187
  });
172
188
 
173
189
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -198,7 +214,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
198
214
  padding = _ref.padding,
199
215
  descriptionToolTip = _ref.descriptionToolTip,
200
216
  borderRadius = _ref.borderRadius,
201
- 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"]);
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"]);
202
219
 
203
220
  var textInputDomNode = React.useRef(null);
204
221
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -230,7 +247,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
230
247
  }, []);
231
248
 
232
249
  var input = function input() {
233
- 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),
234
255
  disabled: disabled,
235
256
  readOnly: readOnly,
236
257
  type: type,
@@ -280,7 +301,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
280
301
  onKeyDown: onKeyDown,
281
302
  onBlur: onBlur,
282
303
  noBorder: noBorder
283
- }, rest)), (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, {
284
305
  disabled: disabled
285
306
  }, React__default['default'].createElement(editNote.SvgEditNote, {
286
307
  className: padding === 'small' ? 'smallPadingIcon' : undefined
@@ -291,7 +312,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
291
312
  inputIsEmpty: inputIsEmpty
292
313
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
293
314
  type: type
294
- }, description));
315
+ }, description)));
295
316
  };
296
317
 
297
318
  if (hidden) return null;
@@ -322,6 +343,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
322
343
  defaultValue: defaultTheme.PropTypes.string,
323
344
  name: defaultTheme.PropTypes.string,
324
345
  label: defaultTheme.PropTypes.string,
346
+ fieldLabel: defaultTheme.PropTypes.string,
325
347
  placeholder: defaultTheme.PropTypes.string,
326
348
  required: defaultTheme.PropTypes.bool,
327
349
  disabled: defaultTheme.PropTypes.bool,
package/inputs/TextArea/index.js CHANGED
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-8f62da6e.js');
3
+ var TextArea = require('../../TextArea-d17c9516.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
7
+ require('lodash');
7
8
  require('../../useMergedRefs-b6d2f8fc.js');
8
9
  require('nanoid');
9
10
  require('../../Alert-13b75102.js');
10
- require('lodash');
11
11
  require('../../Badge-757b0a39.js');
12
12
  require('../../Popover-569cd272.js');
13
13
  require('polished');
package/inputs/index.js CHANGED
@@ -10,7 +10,7 @@ var CompactStarRating = require('../CompactStarRating-bcfb78ac.js');
10
10
  var CompactTextInput = require('../CompactTextInput-9e507306.js');
11
11
  var MultiSelect = require('../MultiSelect-efd60232.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-8f62da6e.js');
13
+ var TextArea = require('../TextArea-d17c9516.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-b897d605.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.4",
3
+ "version": "1.3.0-rc.6",
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",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-7d05ac94.js');
3
+ var AssetGallery = require('../../AssetGallery-c8b24eb3.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -41,7 +41,7 @@ require('../../CompactStarRating-bcfb78ac.js');
41
41
  require('../../CompactTextInput-9e507306.js');
42
42
  require('../../MultiSelect-efd60232.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-8f62da6e.js');
44
+ require('../../TextArea-d17c9516.js');
45
45
  require('../../Switch-4a41585f.js');
46
46
  require('../../ContextMenuItem-ba2b697e.js');
47
47
 
package/widgets/Instructions/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-e5947be9.js');
3
+ var Instructions = require('../../Instructions-ab2eb3c7.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -25,7 +25,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
25
25
  require('react-dom');
26
26
  require('../../close-ebf2f3cf.js');
27
27
  require('../../expand-more-94585605.js');
28
- require('../../TextArea-8f62da6e.js');
28
+ require('../../TextArea-d17c9516.js');
29
29
  require('../../useMergedRefs-b6d2f8fc.js');
30
30
  require('../../edit-note-c47d292e.js');
31
31
 
package/widgets/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-7d05ac94.js');
5
+ var AssetGallery = require('../AssetGallery-c8b24eb3.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
- var Instructions = require('../Instructions-e5947be9.js');
8
+ var Instructions = require('../Instructions-ab2eb3c7.js');
9
9
  require('../defaultTheme-ea44e34a.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -45,7 +45,7 @@ require('../CompactStarRating-bcfb78ac.js');
45
45
  require('../CompactTextInput-9e507306.js');
46
46
  require('../MultiSelect-efd60232.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-8f62da6e.js');
48
+ require('../TextArea-d17c9516.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51