@ntbjs/react-components 1.1.0-beta.84 → 1.1.0-beta.86

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 (13) hide show
  1. package/{AssetGallery-198b6467.js → AssetGallery-b68f5e71.js} +3 -3
  2. package/{CompactAutocompleteSelect-d1a7836f.js → CompactAutocompleteSelect-5ee8443f.js} +1 -1
  3. package/{CompactTextInput-3a85bb3e.js → CompactTextInput-cae26b42.js} +15 -20
  4. package/{Instructions-1d6f2bc5.js → Instructions-cba7dd21.js} +4 -3
  5. package/{TextArea-9a78ac53.js → TextArea-d9e639e4.js} +13 -9
  6. package/inputs/CompactAutocompleteSelect/index.js +1 -1
  7. package/inputs/CompactTextInput/index.js +1 -1
  8. package/inputs/TextArea/index.js +1 -1
  9. package/inputs/index.js +3 -3
  10. package/package.json +1 -1
  11. package/widgets/AssetGallery/index.js +4 -4
  12. package/widgets/Instructions/index.js +3 -3
  13. package/widgets/index.js +5 -5
package/{AssetGallery-198b6467.js → AssetGallery-b68f5e71.js} RENAMED
@@ -9,12 +9,12 @@ var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-432f87c6.js');
11
11
  require('./Checkbox-85394137.js');
12
- require('./CompactAutocompleteSelect-d1a7836f.js');
12
+ require('./CompactAutocompleteSelect-5ee8443f.js');
13
13
  require('./CompactStarRating-de1bcfe9.js');
14
- require('./CompactTextInput-3a85bb3e.js');
14
+ require('./CompactTextInput-cae26b42.js');
15
15
  require('./MultiSelect-01a257b8.js');
16
16
  require('./Radio-c811ce4a.js');
17
- require('./TextArea-9a78ac53.js');
17
+ require('./TextArea-d9e639e4.js');
18
18
  require('./Switch-3ac11c97.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
package/{CompactAutocompleteSelect-d1a7836f.js → CompactAutocompleteSelect-5ee8443f.js} RENAMED
@@ -73,7 +73,7 @@ var AutocompletSelect = styled__default['default'](Select__default['default']).a
73
73
  var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), sharedStyle, function (props) {
74
74
  return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
75
75
  });
76
- var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 2px 0 10px;\n cursor: pointer;\n border: 1px solid transparent;\n ", "\n\n ", ";\n ", ";\n\n ", "\n ", "\n ", "\n }\n\n & .dropdown-indicator {\n display: none;\n }\n\n &:hover .dropdown-indicator {\n display: flex;\n }\n\n &&:hover {\n border-color: transparent;\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
76
+ var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n\n height: 22px;\n min-height: 22px;\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 2px 0 10px;\n cursor: pointer;\n border: 1px solid transparent;\n background-color: transparent;\n ", "\n\n ", ";\n ", ";\n\n ", "\n ", "\n ", "\n }\n\n & .dropdown-indicator {\n display: none;\n }\n\n &:hover .dropdown-indicator {\n display: flex;\n }\n\n &&:hover {\n border-color: transparent;\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
77
77
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
78
78
  }, function (props) {
79
79
  return props.state && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
package/{CompactTextInput-3a85bb3e.js → CompactTextInput-cae26b42.js} RENAMED
@@ -54,7 +54,7 @@ function SvgLink(props) {
54
54
  }, props), _ref);
55
55
  }
56
56
 
57
- 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;
57
+ 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;
58
58
  var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
59
59
  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
60
60
  }, function (props) {
@@ -105,17 +105,12 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
105
105
  }, function (props) {
106
106
  return props.state === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
107
107
  });
108
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 4px;\n padding-left: 20px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n > svg {\n width: 13px;\n }\n"])), function (props) {
109
- return props.state === 'success' ? 0 : 1;
108
+ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n }\n\n &&:hover:not(:focus) {\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n ", ";\n\n ", "\n\n ", ";\n\n ", ";\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
109
+ return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
110
110
  }, function (props) {
111
- return props.fadeIn ? fadeOutCheck : fadeInCheck;
112
- });
113
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n ", ";\n ", "\n }\n\n &&:hover:not(:focus) {\n ", "\n }\n ", ";\n\n ", "\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
114
- return props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
111
+ return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
115
112
  }, function (props) {
116
- return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
117
- }, function (props) {
118
- return props.state === 'success' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
113
+ return props.state === 'success' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
119
114
  return props.state === 'success' ? fadeIn : fadeOut;
120
115
  });
121
116
  }, function (props) {
@@ -123,9 +118,11 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
123
118
  }, function (props) {
124
119
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
125
120
  }, function (props) {
126
- return props.hasLink && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
121
+ return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
127
122
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
128
123
  });
124
+ }, function (props) {
125
+ return !props.readOnly && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
129
126
  }, function (props) {
130
127
  return props.state === 'warning' && props.theme.themeProp('background', '#634e01', '#fffde8');
131
128
  }, function (props) {
@@ -138,7 +135,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
138
135
  });
139
136
  }, function (props) {
140
137
  return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
141
- }, function (props) {
138
+ }, InputIconContainer, function (props) {
142
139
  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
143
140
  }, function (props) {
144
141
  return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
@@ -146,26 +143,24 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
146
143
  return props.state === 'warning' && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
147
144
  }, function (props) {
148
145
  return props.state === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
149
- }, InputIconContainer, function (props) {
150
- return props.state === 'success' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
151
- }, CheckIconContainer, function (props) {
146
+ }, function (props) {
152
147
  return props.state === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
153
148
  }, function (props) {
154
- return !props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
149
+ return !props.readOnly && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
155
150
  return props.theme.getColor('gray-600');
156
151
  });
157
152
  }, function (props) {
158
- return props.state === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
153
+ return props.state === 'warning' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
159
154
  return props.theme.getColor('signal-yellow-500');
160
155
  });
161
156
  }, function (props) {
162
- return props.state === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
157
+ return props.state === 'error' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
163
158
  return props.theme.getColor('red-500');
164
159
  });
165
160
  }, function (props) {
166
- return props.bold && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
161
+ return props.bold && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
167
162
  });
168
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
163
+ var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
169
164
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
170
165
  });
171
166
 
package/{Instructions-1d6f2bc5.js → Instructions-cba7dd21.js} RENAMED
@@ -4,8 +4,8 @@ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
- var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-d1a7836f.js');
8
- var TextArea = require('./TextArea-9a78ac53.js');
7
+ var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-5ee8443f.js');
8
+ var TextArea = require('./TextArea-d9e639e4.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 }; }
@@ -23,7 +23,7 @@ var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDef
23
23
  return props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
24
24
  });
25
25
  var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n margin: 0 2px;\n"])));
26
- var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 2px 2px -1px 2px;\n"])));
26
+ var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 2px 2px -2px 2px;\n"])));
27
27
 
28
28
  var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
29
29
  var clickToAdd = _ref.clickToAdd,
@@ -186,6 +186,7 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
186
186
  state: state
187
187
  }, React__default['default'].createElement(TextArea.TextArea, {
188
188
  noBorder: true,
189
+ instructionsTextArea: true,
189
190
  state: state,
190
191
  lightBackground: background,
191
192
  readOnly: readOnly,
package/{TextArea-9a78ac53.js → TextArea-d9e639e4.js} RENAMED
@@ -21,7 +21,7 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
21
21
  }, function (props) {
22
22
  return props.theme.themeProp('opacity', 0.6, 0.5);
23
23
  });
24
- 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: 5px;\n top: 10px;\n bottom: 0;\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
24
+ 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 svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
25
25
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
26
26
  }, function (props) {
27
27
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
@@ -72,7 +72,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
72
72
  }, function (props) {
73
73
  return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
74
74
  }, function (props) {
75
- return (props.state === 'warning' || props.state === 'error' || props.state === 'loading' || props.state === 'success' || props.state === 'error-border') && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
75
+ return props.instructionsTextArea && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 15px;\n padding-right: 50px;\n "])));
76
76
  }, function (props) {
77
77
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
78
78
  }, function (props) {
@@ -103,14 +103,12 @@ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefault
103
103
  }, function (props) {
104
104
  return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
105
105
  });
106
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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 border-radius: 30px;\n ", "\n ", "\n > svg {\n width: 15px;\n }\n"])), function (props) {
106
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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) {
107
107
  return props.fadeIn ? 0 : 1;
108
108
  }, function (props) {
109
109
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
110
110
  }, function (props) {
111
111
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
112
- }, function (props) {
113
- return props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-100'));
114
112
  });
115
113
  var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n margin: 0 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n cursor: pointer;\n ", ";\n\n ", "\n"])), function (props) {
116
114
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
@@ -129,6 +127,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
129
127
  hidden = _ref.hidden,
130
128
  readOnly = _ref.readOnly,
131
129
  edit = _ref.edit,
130
+ isExpanded = _ref.isExpanded,
132
131
  editWarning = _ref.editWarning,
133
132
  maxRows = _ref.maxRows,
134
133
  showMore = _ref.showMore,
@@ -144,7 +143,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
144
143
  onBlur = _ref.onBlur,
145
144
  lightBackground = _ref.lightBackground,
146
145
  noBorder = _ref.noBorder,
147
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "editWarning", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder"]);
146
+ instructionsTextArea = _ref.instructionsTextArea,
147
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "isExpanded", "editWarning", "maxRows", "showMore", "showMoreText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea"]);
148
148
 
149
149
  var textInputRef = React.useRef(null);
150
150
 
@@ -188,6 +188,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
188
188
 
189
189
  var handleTextAreaChange = function handleTextAreaChange() {
190
190
  setExpanded(!expanded);
191
+ isExpanded(expanded);
191
192
 
192
193
  if (expanded === true) {
193
194
  setContentRows(maxContentRows);
@@ -231,7 +232,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
231
232
  state: state,
232
233
  className: className,
233
234
  style: style
234
- }, state !== 'warning' && state !== 'error' && React__default['default'].createElement(TextInputFieldIcon, null, icon), (state === 'warning' || state === 'error') && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
235
+ }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
235
236
  ref: forwardedRef ? forwardedRef : textInputRef,
236
237
  rows: contentRows > rows ? contentRows : rows,
237
238
  expanded: expanded,
@@ -245,6 +246,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
245
246
  disabled: disabled,
246
247
  edit: edit,
247
248
  editWarning: editWarning,
249
+ instructionsTextArea: instructionsTextArea,
248
250
  showMore: showMore,
249
251
  state: state,
250
252
  autoComplete: autoComplete,
@@ -280,7 +282,8 @@ TextArea.defaultProps = {
280
282
  hidden: false,
281
283
  showMore: false,
282
284
  showMoreText: '',
283
- state: ''
285
+ state: '',
286
+ instructionsTextArea: false
284
287
  };
285
288
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
286
289
  value: defaultTheme.PropTypes.string,
@@ -310,7 +313,8 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
310
313
  noBorder: defaultTheme.PropTypes.bool,
311
314
  maxRows: defaultTheme.PropTypes.func,
312
315
  isExpanded: defaultTheme.PropTypes.func,
313
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success'])
316
+ state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
317
+ instructionsTextArea: defaultTheme.PropTypes.bool
314
318
  } : {};
315
319
 
316
320
  exports.TextArea = TextArea;
package/inputs/CompactAutocompleteSelect/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-d1a7836f.js');
3
+ var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-5ee8443f.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-3a85bb3e.js');
3
+ var CompactTextInput = require('../../CompactTextInput-cae26b42.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-9a78ac53.js');
3
+ var TextArea = require('../../TextArea-d9e639e4.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var ActionButton = require('../ActionButton-c3f5ed94.js');
6
6
  var Button = require('../Button-432f87c6.js');
7
7
  var Checkbox = require('../Checkbox-85394137.js');
8
- var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-d1a7836f.js');
8
+ var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5ee8443f.js');
9
9
  var CompactStarRating = require('../CompactStarRating-de1bcfe9.js');
10
- var CompactTextInput = require('../CompactTextInput-3a85bb3e.js');
10
+ var CompactTextInput = require('../CompactTextInput-cae26b42.js');
11
11
  var MultiSelect = require('../MultiSelect-01a257b8.js');
12
12
  var Radio = require('../Radio-c811ce4a.js');
13
- var TextArea = require('../TextArea-9a78ac53.js');
13
+ var TextArea = require('../TextArea-d9e639e4.js');
14
14
  var TextInput = require('../TextInput-8ea31a7b.js');
15
15
  var Switch = require('../Switch-3ac11c97.js');
16
16
  require('../defaultTheme-50f2b88f.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.84",
3
+ "version": "1.1.0-beta.86",
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-198b6467.js');
3
+ var AssetGallery = require('../../AssetGallery-b68f5e71.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -19,7 +19,7 @@ require('../../shift-away-subtle-cfdf1dbe.js');
19
19
  require('../../ContextMenu-d088833b.js');
20
20
  require('../../expand-more-94585605.js');
21
21
  require('../../Checkbox-85394137.js');
22
- require('../../CompactAutocompleteSelect-d1a7836f.js');
22
+ require('../../CompactAutocompleteSelect-5ee8443f.js');
23
23
  require('../../check-555d831b.js');
24
24
  require('react-select');
25
25
  require('react-select-async-paginate');
@@ -27,7 +27,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
27
27
  require('react-dom');
28
28
  require('../../close-ebf2f3cf.js');
29
29
  require('../../CompactStarRating-de1bcfe9.js');
30
- require('../../CompactTextInput-3a85bb3e.js');
30
+ require('../../CompactTextInput-cae26b42.js');
31
31
  require('../../Alert-3e4f8be1.js');
32
32
  require('../../Badge-9bcebe96.js');
33
33
  require('../../Tab-bd0f3345.js');
@@ -35,7 +35,7 @@ require('../../Tabs-bf42275e.js');
35
35
  require('../../Tooltip-1b7b0052.js');
36
36
  require('../../MultiSelect-01a257b8.js');
37
37
  require('../../Radio-c811ce4a.js');
38
- require('../../TextArea-9a78ac53.js');
38
+ require('../../TextArea-d9e639e4.js');
39
39
  require('../../Switch-3ac11c97.js');
40
40
  require('../../warning-circle-24522402.js');
41
41
 
package/widgets/Instructions/index.js CHANGED
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-1d6f2bc5.js');
3
+ var Instructions = require('../../Instructions-cba7dd21.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
7
7
  require('react');
8
8
  require('../../warning-circle-24522402.js');
9
- require('../../CompactAutocompleteSelect-d1a7836f.js');
9
+ require('../../CompactAutocompleteSelect-5ee8443f.js');
10
10
  require('nanoid');
11
11
  require('../../check-555d831b.js');
12
12
  require('react-select');
@@ -15,7 +15,7 @@ require('../../react-select-creatable.esm-7231b55e.js');
15
15
  require('react-dom');
16
16
  require('../../close-ebf2f3cf.js');
17
17
  require('../../expand-more-94585605.js');
18
- require('../../TextArea-9a78ac53.js');
18
+ require('../../TextArea-d9e639e4.js');
19
19
  require('../../edit-note-c47d292e.js');
20
20
 
21
21
 
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-198b6467.js');
5
+ var AssetGallery = require('../AssetGallery-b68f5e71.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-1d6f2bc5.js');
8
+ var Instructions = require('../Instructions-cba7dd21.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -23,7 +23,7 @@ require('@tippyjs/react');
23
23
  require('../shift-away-subtle-cfdf1dbe.js');
24
24
  require('../expand-more-94585605.js');
25
25
  require('../Checkbox-85394137.js');
26
- require('../CompactAutocompleteSelect-d1a7836f.js');
26
+ require('../CompactAutocompleteSelect-5ee8443f.js');
27
27
  require('../check-555d831b.js');
28
28
  require('react-select');
29
29
  require('react-select-async-paginate');
@@ -31,7 +31,7 @@ require('../react-select-creatable.esm-7231b55e.js');
31
31
  require('react-dom');
32
32
  require('../close-ebf2f3cf.js');
33
33
  require('../CompactStarRating-de1bcfe9.js');
34
- require('../CompactTextInput-3a85bb3e.js');
34
+ require('../CompactTextInput-cae26b42.js');
35
35
  require('../Alert-3e4f8be1.js');
36
36
  require('../Badge-9bcebe96.js');
37
37
  require('../Tab-bd0f3345.js');
@@ -39,7 +39,7 @@ require('../Tabs-bf42275e.js');
39
39
  require('../Tooltip-1b7b0052.js');
40
40
  require('../MultiSelect-01a257b8.js');
41
41
  require('../Radio-c811ce4a.js');
42
- require('../TextArea-9a78ac53.js');
42
+ require('../TextArea-d9e639e4.js');
43
43
  require('../Switch-3ac11c97.js');
44
44
  require('../warning-circle-24522402.js');
45
45