@ntbjs/react-components 1.1.0-beta.67 → 1.1.0-beta.68

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-e19d8426.js → AssetGallery-b0422191.js} +3 -3
  2. package/{CompactStarRating-17c8ca3d.js → CompactStarRating-53593d92.js} +11 -3
  3. package/{CompactTextInput-7263652c.js → CompactTextInput-b4215024.js} +1 -1
  4. package/{Instructions-243c47b1.js → Instructions-79b572bb.js} +1 -1
  5. package/{TextArea-760ba0ad.js → TextArea-fae4a55c.js} +34 -38
  6. package/inputs/CompactStarRating/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 +2 -2
  13. package/widgets/index.js +5 -5
package/{AssetGallery-e19d8426.js → AssetGallery-b0422191.js} RENAMED
@@ -10,11 +10,11 @@ var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-f893df21.js');
11
11
  require('./Checkbox-012bbd3f.js');
12
12
  require('./CompactAutocompleteSelect-b366ba70.js');
13
- require('./CompactStarRating-17c8ca3d.js');
14
- require('./CompactTextInput-7263652c.js');
13
+ require('./CompactStarRating-53593d92.js');
14
+ require('./CompactTextInput-b4215024.js');
15
15
  require('./MultiSelect-5b008b32.js');
16
16
  require('./Radio-0594409d.js');
17
- require('./TextArea-760ba0ad.js');
17
+ require('./TextArea-fae4a55c.js');
18
18
  require('./Switch-cd165c8c.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
package/{CompactStarRating-17c8ca3d.js → CompactStarRating-53593d92.js} RENAMED
@@ -51,7 +51,7 @@ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.appl
51
51
  var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n width: 33.3%;\n display: flex;\n align-items: center;\n text-align: left;\n font: normal normal normal 14px/16px Roboto;\n letter-spacing: 0px;\n padding: 0;\n height: 19px;\n\n ", "\n"])), function (props) {
52
52
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
53
53
  });
54
- var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding: 1px 10px;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n"])), function (props) {
54
+ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.6%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding: 1px 10px;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
55
55
  return props.success && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
56
56
  return props.success ? fadeIn : fadeOut;
57
57
  });
@@ -63,6 +63,14 @@ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultT
63
63
  return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
64
64
  }, function (props) {
65
65
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
66
+ }, function (props) {
67
+ return props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
68
+ }, function (props) {
69
+ return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
70
+ }, function (props) {
71
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
72
+ }, function (props) {
73
+ return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
66
74
  });
67
75
  var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n\n svg {\n height: 12px;\n padding-left: 4px;\n transition: color 250ms;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", "\n"])), function (props) {
68
76
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -86,7 +94,7 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
86
94
  }, function (props) {
87
95
  return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
88
96
  });
89
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 25px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: -710px;\n bottom: 0;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
97
+ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n margin-left: auto;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
90
98
  return props.success ? 0 : 1;
91
99
  }, function (props) {
92
100
  return props.success ? fadeOutCheck : fadeInCheck;
@@ -258,7 +266,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
258
266
  name: name,
259
267
  ref: inputRef
260
268
  }), starIconRender(key));
261
- })), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
269
+ }), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null))));
262
270
  });
263
271
  CompactStarRating.defaultProps = {
264
272
  label: 'Rating',
package/{CompactTextInput-7263652c.js → CompactTextInput-b4215024.js} RENAMED
@@ -97,7 +97,7 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
97
97
  }, function (props) {
98
98
  return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
99
99
  }, function (props) {
100
- return props.error && props.theme.themeProp('background', '#fbeae6', '#fbeae6');
100
+ return props.error && props.theme.themeProp('background', '#7f1b1b', '#fbeae6');
101
101
  }, function (props) {
102
102
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
103
103
  }, function (props) {
package/{Instructions-243c47b1.js → Instructions-79b572bb.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
- var TextArea = require('./TextArea-760ba0ad.js');
6
+ var TextArea = require('./TextArea-fae4a55c.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b366ba70.js');
8
8
  var warningCircle = require('./warning-circle-24522402.js');
9
9
  var lodash = require('lodash');
package/{TextArea-760ba0ad.js → TextArea-fae4a55c.js} RENAMED
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
 
16
- 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;
16
+ 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;
17
17
  var activeLabel = styled.css(_templateObject || (_templateObject = 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"])));
18
18
  var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
19
19
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
@@ -28,8 +28,10 @@ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
28
28
  });
29
29
  var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral([""])));
30
30
  var OpacityBox = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral([""])));
31
- 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: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n overflow: hidden;\n z-index: 0; \n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
31
+ 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: 13px 10px;\n resize: vertical;\n transition: height 0.3s ease;\n z-index: 0; \n\n ", "\n\n ", "\n \n ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n \n ", "\n \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n \n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n ", "\n ", "\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n :focus {\n outline: none;\n ", "\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n \n"])), function (props) {
32
32
  return props.expanded && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
33
+ }, function (props) {
34
+ return props.showMore && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
33
35
  }, function (props) {
34
36
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
35
37
  }, function (props) {
@@ -39,29 +41,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
39
41
  }, function (props) {
40
42
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
41
43
  }, function (props) {
42
- return props.noBorder && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
44
+ return props.noBorder && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
43
45
  }, function (props) {
44
- return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
46
+ return props.success && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
45
47
  }, function (props) {
46
- return props.warningAlert && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
48
+ return props.warningAlert && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
47
49
  }, function (props) {
48
- return props.errorAlert && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
50
+ return props.errorAlert && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: #f7d5d0 !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('red-200'), props.theme.getColor('red-200'));
49
51
  }, function (props) {
50
- return props.lightBackground && styled.css(_templateObject13 || (_templateObject13 = 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'));
52
+ return props.lightBackground && styled.css(_templateObject14 || (_templateObject14 = 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'));
51
53
  }, function (props) {
52
54
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
53
55
  }, function (props) {
54
56
  return props.noBorder && !props.readOnly && !props.warningAlert ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
55
57
  }, InputIconContainer, function (props) {
56
- return props.success && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
58
+ return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
57
59
  }, function (props) {
58
- return props.warning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
60
+ return props.warning && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
59
61
  }, function (props) {
60
- return props.error && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
62
+ return props.error && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
61
63
  }, function (props) {
62
- return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
64
+ return props.hasIcon && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
63
65
  }, function (props) {
64
- return (props.warningAlert || props.errorAlert) && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
66
+ return (props.warningAlert || props.errorAlert) && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
65
67
  }, function (props) {
66
68
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
67
69
  }, function (props) {
@@ -71,31 +73,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
71
73
  }, function (props) {
72
74
  return props.theme.getColor('gray-600');
73
75
  });
74
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = 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\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
76
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = 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\n ", ";\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
75
77
  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%)"));
76
78
  }, function (props) {
77
- return props.hasPlaceholder && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
79
+ return props.hasPlaceholder && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
78
80
  }, function (props) {
79
- return props.hasIcon && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
81
+ return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
80
82
  });
81
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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"])));
82
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\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 ", "\n }\n"])), function (props) {
83
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = 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"])));
84
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\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 ", "\n }\n"])), function (props) {
83
85
  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
84
86
  });
85
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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 ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
87
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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 ", "\n"])), TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
86
88
  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
87
89
  }, function (props) {
88
- return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
90
+ return props.disabled && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
89
91
  });
90
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = 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"])), function (props) {
92
+ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = 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"])), function (props) {
91
93
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
92
94
  }, function (props) {
93
- return props.error && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
95
+ return props.error && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
94
96
  });
95
- var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 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 ", "\n"])), function (props) {
97
+ var ShowMoreText = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 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 ", "\n"])), function (props) {
96
98
  return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
97
99
  }, function (props) {
98
- return props.error && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
100
+ return props.error && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
99
101
  });
100
102
 
101
103
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -148,15 +150,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
148
150
  expanded = _useState8[0],
149
151
  setExpanded = _useState8[1];
150
152
 
151
- var _useState9 = React.useState(false),
153
+ var _useState9 = React.useState(''),
152
154
  _useState10 = defaultTheme._slicedToArray(_useState9, 2),
153
- displayShowMoreText = _useState10[0],
154
- setDisplayShowMoreText = _useState10[1];
155
-
156
- var _useState11 = React.useState(''),
157
- _useState12 = defaultTheme._slicedToArray(_useState11, 2),
158
- maxHeight = _useState12[0],
159
- setMaxHeight = _useState12[1];
155
+ maxHeight = _useState10[0],
156
+ setMaxHeight = _useState10[1];
160
157
 
161
158
  React.useEffect(function () {
162
159
  setDefaultRows(rows);
@@ -173,7 +170,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
173
170
 
174
171
  if (maxRows > defaultRows) {
175
172
  setExpanded(true);
176
- setDisplayShowMoreText(true);
177
173
  }
178
174
  };
179
175
 
@@ -182,9 +178,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
182
178
  }
183
179
  }, [showMore]);
184
180
 
185
- var _useState13 = React.useState(nanoid.nanoid()),
186
- _useState14 = defaultTheme._slicedToArray(_useState13, 1),
187
- uniqueId = _useState14[0];
181
+ var _useState11 = React.useState(nanoid.nanoid()),
182
+ _useState12 = defaultTheme._slicedToArray(_useState11, 1),
183
+ uniqueId = _useState12[0];
188
184
 
189
185
  var hasError = React.useMemo(function () {
190
186
  if (lodash.isBoolean(error)) {
@@ -250,6 +246,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
250
246
  disabled: disabled || readOnly,
251
247
  readOnly: readOnly,
252
248
  edit: edit,
249
+ showMore: showMore,
253
250
  success: success,
254
251
  autoComplete: autoComplete,
255
252
  hasIcon: Boolean(icon),
@@ -273,9 +270,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
273
270
  error: hasError
274
271
  }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
275
272
  error: hasError
276
- }, descriptionText), maxContentRows > defaultRows && displayShowMoreText && showMore && React__default['default'].createElement(ShowMoreText, {
277
- onClick: handleTextAreaChange,
278
- showMore: expanded
273
+ }, descriptionText), maxContentRows > defaultRows && React__default['default'].createElement(ShowMoreText, {
274
+ onClick: handleTextAreaChange
279
275
  }, showMoreText));
280
276
  });
281
277
  TextArea.defaultProps = {
package/inputs/CompactStarRating/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-17c8ca3d.js');
3
+ var CompactStarRating = require('../../CompactStarRating-53593d92.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-7263652c.js');
3
+ var CompactTextInput = require('../../CompactTextInput-b4215024.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-760ba0ad.js');
3
+ var TextArea = require('../../TextArea-fae4a55c.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -6,11 +6,11 @@ var ActionButton = require('../ActionButton-c3f5ed94.js');
6
6
  var Button = require('../Button-f893df21.js');
7
7
  var Checkbox = require('../Checkbox-012bbd3f.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b366ba70.js');
9
- var CompactStarRating = require('../CompactStarRating-17c8ca3d.js');
10
- var CompactTextInput = require('../CompactTextInput-7263652c.js');
9
+ var CompactStarRating = require('../CompactStarRating-53593d92.js');
10
+ var CompactTextInput = require('../CompactTextInput-b4215024.js');
11
11
  var MultiSelect = require('../MultiSelect-5b008b32.js');
12
12
  var Radio = require('../Radio-0594409d.js');
13
- var TextArea = require('../TextArea-760ba0ad.js');
13
+ var TextArea = require('../TextArea-fae4a55c.js');
14
14
  var TextInput = require('../TextInput-a1083be3.js');
15
15
  var Switch = require('../Switch-cd165c8c.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.67",
3
+ "version": "1.1.0-beta.68",
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-e19d8426.js');
3
+ var AssetGallery = require('../../AssetGallery-b0422191.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -26,8 +26,8 @@ require('react-dom');
26
26
  require('react-select-async-paginate');
27
27
  require('../../close-ebf2f3cf.js');
28
28
  require('../../check-circle-filled-1640873e.js');
29
- require('../../CompactStarRating-17c8ca3d.js');
30
- require('../../CompactTextInput-7263652c.js');
29
+ require('../../CompactStarRating-53593d92.js');
30
+ require('../../CompactTextInput-b4215024.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-cfc35dc0.js');
35
35
  require('../../Tooltip-f4f9ab8f.js');
36
36
  require('../../MultiSelect-5b008b32.js');
37
37
  require('../../Radio-0594409d.js');
38
- require('../../TextArea-760ba0ad.js');
38
+ require('../../TextArea-fae4a55c.js');
39
39
  require('../../Switch-cd165c8c.js');
40
40
  require('../../warning-circle-24522402.js');
41
41
 
package/widgets/Instructions/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-243c47b1.js');
3
+ var Instructions = require('../../Instructions-79b572bb.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
- require('../../TextArea-760ba0ad.js');
7
+ require('../../TextArea-fae4a55c.js');
8
8
  require('nanoid');
9
9
  require('lodash');
10
10
  require('../../edit-note-c47d292e.js');
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-e19d8426.js');
5
+ var AssetGallery = require('../AssetGallery-b0422191.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-243c47b1.js');
8
+ var Instructions = require('../Instructions-79b572bb.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -30,8 +30,8 @@ require('react-dom');
30
30
  require('react-select-async-paginate');
31
31
  require('../close-ebf2f3cf.js');
32
32
  require('../check-circle-filled-1640873e.js');
33
- require('../CompactStarRating-17c8ca3d.js');
34
- require('../CompactTextInput-7263652c.js');
33
+ require('../CompactStarRating-53593d92.js');
34
+ require('../CompactTextInput-b4215024.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-cfc35dc0.js');
39
39
  require('../Tooltip-f4f9ab8f.js');
40
40
  require('../MultiSelect-5b008b32.js');
41
41
  require('../Radio-0594409d.js');
42
- require('../TextArea-760ba0ad.js');
42
+ require('../TextArea-fae4a55c.js');
43
43
  require('../Switch-cd165c8c.js');
44
44
  require('../warning-circle-24522402.js');
45
45