@ntbjs/react-components 1.1.0-beta.63 → 1.1.0-beta.64

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.
@@ -9,12 +9,12 @@ var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-f893df21.js');
11
11
  require('./Checkbox-012bbd3f.js');
12
- require('./CompactAutocompleteSelect-0160cb3e.js');
13
- require('./CompactStarRating-9c4c4f2c.js');
14
- require('./CompactTextInput-d2fabaf5.js');
12
+ require('./CompactAutocompleteSelect-b366ba70.js');
13
+ require('./CompactStarRating-17c8ca3d.js');
14
+ require('./CompactTextInput-7263652c.js');
15
15
  require('./MultiSelect-5b008b32.js');
16
16
  require('./Radio-0594409d.js');
17
- require('./TextArea-76e2ff1e.js');
17
+ require('./TextArea-708b59a9.js');
18
18
  require('./Switch-cd165c8c.js');
19
19
  require('./Alert-3e4f8be1.js');
20
20
  require('./Badge-9bcebe96.js');
@@ -18,35 +18,55 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
19
19
  var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
20
20
 
21
- 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;
21
+ 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;
22
+ var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
23
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
24
+ }, function (props) {
25
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
26
+ });
27
+ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
28
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
29
+ }, function (props) {
30
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
31
+ });
32
+ var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
33
+ var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
22
34
  var AsyncCreatableSelectPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
23
- var sharedStyle = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n line-height: 1rem;\n width: 100%;\n display: block;\n box-shadow: 'none';\n flex-basis: ", ";\n"])), function (props) {
35
+ var sharedStyle = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 0.875rem;\n line-height: 1rem;\n width: 100%;\n display: block;\n box-shadow: 'none';\n flex-basis: ", ";\n"])), function (props) {
24
36
  return props.theme.primaryFontFamily;
25
37
  }, function (props) {
26
38
  return props.$hasLabel ? '66.66%' : '100%';
27
39
  });
28
- var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
40
+ var CompactAutocompleteSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
29
41
  return props.theme.primaryFontFamily;
30
42
  });
31
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n padding-top: 2px;\n"])), function (props) {
43
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n padding-top: 2px;\n"])), function (props) {
32
44
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
33
45
  });
34
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
35
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n margin-top: 0;\n pointer-events: none;\n padding-right: 60px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n color: ", ";\n > svg {\n width: 13px;\n }\n"])), function (props) {
36
- return props.theme.getColor('emerald-500');
46
+ var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 100%;\n height: 19px;\n"])));
47
+ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n margin-top: 0;\n pointer-events: none;\n padding-right: 60px;\n padding-left: 30px;\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 ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
48
+ return props.fadeIn ? 0 : 1;
49
+ }, function (props) {
50
+ return props.fadeIn ? fadeOutCheck : fadeInCheck;
51
+ }, function (props) {
52
+ return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
37
53
  });
38
- var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
39
- var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
40
- var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
41
- var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
42
- var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: ", ";\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 10px;\n cursor: text;\n border: 1px solid transparent;\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 &&:not(:hover):not(:focus) {\n ", ";\n }\n\n &&:focus {\n ", ";\n }\n"])), function (props) {
43
- return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')) : 'transparent';
54
+ var AsyncCreatableAutocompleteSelect = styled__default['default'](AsyncCreatableSelectPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
55
+ var AsyncAutocompleteSelect = styled__default['default'](reactSelectAsyncPaginate.AsyncPaginate).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
56
+ var AutocompletSelect = styled__default['default'](Select__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
57
+ var AutocompletCreatableSelect = styled__default['default'](reactSelectCreatable_esm.CreatableSelect$1).attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), sharedStyle);
58
+ var Control = styled__default['default'](Select.components.Control).attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n && {\n height: 22px;\n min-height: 22px;\n background: ", ";\n box-shadow: none;\n box-sizing: border-box;\n padding: 1px 10px;\n cursor: text;\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 &&:not(:hover):not(:focus) {\n ", ";\n }\n\n &&:focus {\n ", ";\n }\n"])), function (props) {
59
+ return props.success ? props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200')) : 'transparent';
60
+ }, function (props) {
61
+ return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
62
+ return props.success ? fadeIn : fadeOut;
63
+ });
44
64
  }, function (props) {
45
65
  return props.warning && !props.isFocused && props.theme.themeProp('background-color', '#634e01', '#fffde8');
46
66
  }, function (props) {
47
67
  return props.error && !props.isFocused && props.theme.themeProp('background-color', '#7f1b1b', '#fbeae6');
48
68
  }, function (props) {
49
- return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#bfe0d5');
69
+ return props.success && !props.isFocused && props.theme.themeProp('background-color', '#64b49d', '#f3f9f7');
50
70
  }, function (props) {
51
71
  return props.isFocused && props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'));
52
72
  }, function (props) {
@@ -56,7 +76,7 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
56
76
  }, function (props) {
57
77
  return !props.isFocused && props.theme.themeProp('background-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
58
78
  }, function (props) {
59
- return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-300'));
79
+ return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
60
80
  }, function (props) {
61
81
  return props.warning && !props.isFocused && props.theme.themeProp('background', '#816600', '#fffebf');
62
82
  }, function (props) {
@@ -64,47 +84,47 @@ var Control = styled__default['default'](Select.components.Control).attrs(defaul
64
84
  }, function (props) {
65
85
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
66
86
  }, function (props) {
67
- return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-300'));
87
+ return props.success && props.theme.themeProp('background-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-200'));
68
88
  });
69
- var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n padding: 1px 13px;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
89
+ var Option$1 = styled__default['default'](Select.components.Option).attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n && {\n min-height: 22px;\n height: 22px;\n display: flex;\n align-items: center;\n padding: 6px;\n cursor: pointer;\n padding: 1px 13px;\n ", "\n ", "\n ", "\n ", "\n }\n svg {\n width: 15px;\n margin: 0 9px 0 0;\n }\n a {\n display: flex;\n text-decoration: none;\n color: inherit;\n }\n"])), function (props) {
70
90
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
71
91
  }, function (props) {
72
- return props.isFocused && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
92
+ return props.isFocused && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
73
93
  }, function (props) {
74
- return props.isSelected && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
94
+ return props.isSelected && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n "])), props.theme.themeProp('background-color', 'transparent', 'transparent'), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
75
95
  }, function (props) {
76
- return props.isFocused && props.isSelected && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
96
+ return props.isFocused && props.isSelected && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('background-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-200')));
77
97
  });
78
- var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
79
- return (props.error || props.warning) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
98
+ var Placeholder = styled__default['default'](Select.components.Placeholder).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", "\n ", ";\n }\n"])), function (props) {
99
+ return (props.error || props.warning) && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
80
100
  }, function (props) {
81
101
  return (props.error || props.warning) && props.theme.themeProp('opacity', '0.6', '0.6');
82
102
  });
83
- var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
103
+ var SingleValue$1 = styled__default['default'](Select.components.SingleValue).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
84
104
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
85
105
  });
86
- var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
106
+ var Input = styled__default['default'](Select.components.Input).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n && {\n margin: 0;\n padding: 0;\n padding-left: 2px;\n ", "\n }\n"])), function (props) {
87
107
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
88
108
  });
89
- var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
109
+ var Menu = styled__default['default'](Select.components.Menu).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n && {\n ", ";\n }\n"])), function (props) {
90
110
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
91
111
  });
92
- var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
93
- var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
112
+ var ValueContainer = styled__default['default'](Select.components.ValueContainer).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n padding: 0;\n }\n"])));
113
+ var ClearIndicator$1 = styled__default['default'](Select.components.ClearIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n cursor: pointer;\n ", ";\n }\n"])), function (props) {
94
114
  return props.isFocused ? 'flex' : 'none';
95
115
  }, function (props) {
96
116
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
97
117
  });
98
- var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
118
+ var DropdownIndicator$1 = styled__default['default'](Select.components.DropdownIndicator).attrs(defaultTheme.applyDefaultTheme)(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n padding: 0;\n width: 18px;\n margin-left: 2px;\n cursor: pointer;\n margin-top: 1px;\n ", ";\n }\n"])), function (props) {
99
119
  return props.isFocused ? 'flex' : 'none';
100
120
  }, function (props) {
101
121
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
102
122
  });
103
- var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
104
- var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
123
+ var DropdownIndicatorIcon = styled__default['default'](expandMore.SvgExpandMore).attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n width: 12px;\n"])));
124
+ var ClearIndicatorIcon = styled__default['default'](close.SvgClose).attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n width: 8px;\n margin-right: 4px;\n ", ";\n stroke-width: 2px;\n"])), function (props) {
105
125
  return props.theme.themeProp('stroke', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
106
126
  });
107
- var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
127
+ var IndicatorSeparator$1 = styled__default['default'](Select.components.IndicatorSeparator).attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n && {\n display: ", ";\n margin: 4px;\n ", ";\n }\n"])), function (props) {
108
128
  return props.isFocused ? 'flex' : 'none';
109
129
  }, function (props) {
110
130
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
@@ -4,6 +4,7 @@ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var lodash = require('lodash');
7
+ var checkCircleFilled = require('./check-circle-filled-1640873e.js');
7
8
 
8
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
10
 
@@ -31,21 +32,39 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
31
32
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
32
33
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
33
34
 
34
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
35
- var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n"])), function (props) {
35
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
36
+ var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
37
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
38
+ }, function (props) {
39
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
40
+ });
41
+ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
42
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
43
+ }, function (props) {
44
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
45
+ });
46
+ var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
47
+ var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
48
+ var CompactStarRating$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n height: 24px;\n width: 100%;\n display: flex;\n align-items: center;\n\n input[type='number'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n"])), function (props) {
36
49
  return props.theme.primaryFontFamily;
37
50
  });
38
- var labelWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = 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) {
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) {
39
52
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
40
53
  });
41
- var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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 &&:not(:hover):not(:focus) {\n ", ";\n }\n"])), function (props) {
42
- return props.error && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
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) {
55
+ return props.success && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
56
+ return props.success ? fadeIn : fadeOut;
57
+ });
58
+ }, function (props) {
59
+ return props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
43
60
  }, function (props) {
44
- return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
61
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
62
+ }, function (props) {
63
+ return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
45
64
  }, function (props) {
46
65
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
47
66
  });
48
- var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = 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) {
67
+ 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) {
49
68
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
50
69
  }, function (props) {
51
70
  return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -54,9 +73,9 @@ var Star = styled__default['default'].button.attrs(defaultTheme.applyDefaultThem
54
73
  }, function (props) {
55
74
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
56
75
  }, function (props) {
57
- return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
76
+ return props.disabled && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
58
77
  });
59
- var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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) {
78
+ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
60
79
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
61
80
  }, function (props) {
62
81
  return props.error && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'));
@@ -65,7 +84,14 @@ var StarFill = styled__default['default'].button.attrs(defaultTheme.applyDefault
65
84
  }, function (props) {
66
85
  return props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'));
67
86
  }, function (props) {
68
- return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
87
+ return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n button {\n cursor: not-allowed;\n }\n > * {\n cursor: not-allowed;\n }\n "])));
88
+ });
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) {
90
+ return props.success ? 0 : 1;
91
+ }, function (props) {
92
+ return props.success ? fadeOutCheck : fadeInCheck;
93
+ }, function (props) {
94
+ return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
69
95
  });
70
96
 
71
97
  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
@@ -111,9 +137,10 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
111
137
  warning = _ref.warning,
112
138
  readOnly = _ref.readOnly,
113
139
  edit = _ref.edit,
140
+ success = _ref.success,
114
141
  hidden = _ref.hidden,
115
142
  getRatingProp = _ref.getRating,
116
- props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "edit", "hidden", "getRating"]);
143
+ props = defaultTheme._objectWithoutProperties(_ref, ["label", "icon", "iconFill", "max", "defaultValue", "value", "name", "viewEmpty", "onChange", "onBlur", "error", "warning", "readOnly", "edit", "success", "hidden", "getRating"]);
117
144
 
118
145
  var stars = Array.from(Array(max).keys());
119
146
 
@@ -221,7 +248,8 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
221
248
  }, props), React__default['default'].createElement(labelWidth, null, label), React__default['default'].createElement(starsWidth, {
222
249
  edit: edit,
223
250
  error: hasError,
224
- warning: hasWarning
251
+ warning: hasWarning,
252
+ success: success
225
253
  }, stars.map(function (key) {
226
254
  return React__default['default'].createElement("div", {
227
255
  key: key
@@ -230,7 +258,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
230
258
  name: name,
231
259
  ref: inputRef
232
260
  }), starIconRender(key));
233
- })));
261
+ })), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)));
234
262
  });
235
263
  CompactStarRating.defaultProps = {
236
264
  label: 'Rating',
@@ -244,6 +272,7 @@ CompactStarRating.defaultProps = {
244
272
  };
245
273
  CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
246
274
  value: defaultTheme.PropTypes.number,
275
+ success: defaultTheme.PropTypes.bool,
247
276
  defaultValue: defaultTheme.PropTypes.number,
248
277
  label: defaultTheme.PropTypes.string,
249
278
  name: defaultTheme.PropTypes.string,
@@ -40,20 +40,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
40
40
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
41
41
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
42
42
 
43
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
44
- var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
43
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
44
+ var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
45
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
46
+ }, function (props) {
47
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
48
+ });
49
+ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
50
+ return props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)');
51
+ }, function (props) {
52
+ return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
53
+ });
54
+ var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
55
+ var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
56
+ var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
45
57
  return props.theme.primaryFontFamily;
46
58
  });
47
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
59
+ 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 cursor: pointer;\n height: 19px;\n display: flex;\n align-items: center;\n"])), function (props) {
48
60
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
49
61
  });
50
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
62
+ var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
51
63
  return props.$hasLabel ? '66.66%' : '100%';
52
64
  });
53
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding-right: 4px;\n ", ";\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
54
- return props.theme.themeProp('background', styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
65
+ 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 padding-right: 4px;\n ", ";\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
66
+ return props.theme.themeProp('background', styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
55
67
  return props.error ? '#901d1d' : props.warning ? '#816600' : props.theme.getColor('gray-700');
56
- }), styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
68
+ }), styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
57
69
  return props.error ? '#f7d5d0' : props.warning ? '#fffebf' : props.theme.getColor('gray-100');
58
70
  }));
59
71
  }, function (props) {
@@ -63,55 +75,63 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
63
75
  }, function (props) {
64
76
  return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
65
77
  });
66
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n padding-right: 4px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 2px;\n bottom: 0;\n color: ", ";\n > svg {\n width: 13px;\n }\n"])), function (props) {
67
- return props.theme.getColor('emerald-500');
78
+ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = 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 ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
79
+ return props.success ? 0 : 1;
80
+ }, function (props) {
81
+ return props.fadeIn ? fadeOutCheck : fadeInCheck;
82
+ }, function (props) {
83
+ return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
68
84
  });
69
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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 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 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 }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
85
+ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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 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 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 }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
86
+ return props.success && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
87
+ return props.success ? fadeIn : fadeOut;
88
+ });
89
+ }, function (props) {
70
90
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
71
91
  }, function (props) {
72
92
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
73
93
  }, function (props) {
74
- return props.hasLink && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: pointer;\n }\n "])), function (props) {
94
+ return props.hasLink && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n\n &&:read-only {\n cursor: pointer;\n }\n "])), function (props) {
75
95
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
76
96
  });
77
97
  }, function (props) {
78
98
  return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
79
99
  }, function (props) {
80
- return props.error && props.theme.themeProp('background', '#red', '#fbeae6');
100
+ return props.error && props.theme.themeProp('background', '#fbeae6', '#fbeae6');
81
101
  }, function (props) {
82
102
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
83
103
  }, function (props) {
84
- return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
104
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
85
105
  }, function (props) {
86
106
  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
87
107
  }, function (props) {
88
108
  return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
89
109
  }, function (props) {
90
- return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
110
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
91
111
  }, function (props) {
92
112
  return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
93
113
  }, InputIconContainer, function (props) {
94
- return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
114
+ return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
95
115
  }, CheckIconContainer, function (props) {
96
116
  return props.error && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
97
117
  }, function (props) {
98
- return !props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
118
+ return !props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
99
119
  return props.theme.getColor('gray-600');
100
120
  });
101
121
  }, function (props) {
102
- return props.warning && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
122
+ return props.warning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
103
123
  return props.theme.getColor('signal-yellow-500');
104
124
  });
105
125
  }, function (props) {
106
- return props.error && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
126
+ return props.error && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
107
127
  return props.theme.getColor('red-500');
108
128
  });
109
129
  }, function (props) {
110
- return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
130
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
111
131
  }, function (props) {
112
- return props.bold && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
132
+ return props.bold && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
113
133
  });
114
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = 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) {
134
+ var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject20 || (_templateObject20 = 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) {
115
135
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
116
136
  });
117
137
 
@@ -273,6 +293,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
273
293
  });
274
294
  CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
275
295
  label: defaultTheme.PropTypes.string,
296
+ success: defaultTheme.PropTypes.bool,
276
297
  type: defaultTheme.PropTypes.string,
277
298
  name: defaultTheme.PropTypes.string,
278
299
  defaultValue: defaultTheme.PropTypes.string,
@@ -283,7 +304,6 @@ CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
283
304
  autoSelect: defaultTheme.PropTypes.bool,
284
305
  readOnly: defaultTheme.PropTypes.bool,
285
306
  edit: defaultTheme.PropTypes.bool,
286
- success: defaultTheme.PropTypes.bool,
287
307
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
288
308
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
289
309
  bold: defaultTheme.PropTypes.bool,
@@ -3,8 +3,8 @@
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-76e2ff1e.js');
7
- var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-0160cb3e.js');
6
+ var TextArea = require('./TextArea-708b59a9.js');
7
+ var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b366ba70.js');
8
8
  var warningCircle = require('./warning-circle-24522402.js');
9
9
  var lodash = require('lodash');
10
10
 
@@ -18,13 +18,13 @@ var Instructions$1 = styled__default['default'].div.attrs(defaultTheme.applyDefa
18
18
  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
19
19
  });
20
20
  var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n justify-content: end;\n ", ";\n\n ", ";\n\n width: 100%;\n margin-top: 0;\n transition: margin-top 120ms;\n &&.slide-in {\n margin-top: -24px;\n }\n"])), function (props) {
21
- return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
21
+ return props.theme.themeProp('background', props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-400'));
22
22
  }, function (props) {
23
- return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
23
+ return props.initialHover && props.theme.themeProp('background', props.theme.getColor('signal-yellow-400'), '#FFFDE8');
24
24
  });
25
25
  var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n width: 35%;\n margin-right: 3px;\n"])));
26
- var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n margin: auto;\n ", ";\n"])), function (props) {
27
- return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
26
+ var InstructionsArea = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n margin: 0;\n width: 100%;\n margin: auto;\n\n ", "\n"])), function (props) {
27
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300'));
28
28
  });
29
29
 
30
30
  var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
@@ -45,7 +45,8 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
45
45
  availableOptions = _ref.availableOptions,
46
46
  loadingMessageFunc = _ref.loadingMessageFunc,
47
47
  placeholder = _ref.placeholder,
48
- props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder"]);
48
+ success = _ref.success,
49
+ props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "success"]);
49
50
 
50
51
  var _useState = React.useState(false),
51
52
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
@@ -178,12 +179,15 @@ var Instructions = React__default['default'].forwardRef(function Instructions(_r
178
179
  value: selectedOption,
179
180
  creatable: false,
180
181
  onChange: handleChange
181
- }, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, null, React__default['default'].createElement(TextArea.TextArea, {
182
+ }, sharedSelectProps)))), React__default['default'].createElement(InstructionsArea, {
183
+ success: success
184
+ }, React__default['default'].createElement(TextArea.TextArea, {
182
185
  noBorder: true,
183
186
  lightBackground: background,
184
187
  readOnly: readOnly,
185
- warningAlert: true,
188
+ warningAlert: !success,
186
189
  name: name,
190
+ success: success,
187
191
  value: currentValue === null ? '' : currentValue,
188
192
  onFocus: onFocus,
189
193
  onChange: onChange,
@@ -207,6 +211,7 @@ Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
207
211
  customAddMessage: defaultTheme.PropTypes.string,
208
212
  autoSelect: defaultTheme.PropTypes.bool,
209
213
  readOnly: defaultTheme.PropTypes.bool,
214
+ success: defaultTheme.PropTypes.bool,
210
215
  hidden: defaultTheme.PropTypes.bool,
211
216
  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
212
217
  lightBackground: defaultTheme.PropTypes.bool,
@@ -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;
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;
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'));
@@ -23,11 +23,13 @@ var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = de
23
23
  var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = 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"])), function (props) {
24
24
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
25
25
  });
26
- var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\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: 6px;\n top: 8px;\n bottom: 0;\n svg {\n width: 15px;\n color: ", ";\n }\n"])), function (props) {
27
- return props.theme.getColor('emerald-500');
26
+ var CheckIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\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: 6px;\n top: 8px;\n bottom: 0;\n ", "\n svg {\n width: 15px;\n }\n"])), function (props) {
27
+ return props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'));
28
28
  });
29
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: block;\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\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) {
30
- return props.expanded && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
29
+ var Container = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral([""])));
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) {
32
+ return props.expanded && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n height: ", "em;\n "])), props.maxHeight);
31
33
  }, function (props) {
32
34
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
33
35
  }, function (props) {
@@ -37,29 +39,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
37
39
  }, function (props) {
38
40
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
39
41
  }, function (props) {
40
- return props.noBorder && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
42
+ return props.noBorder && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n border-color: transparent !important;\n "])));
41
43
  }, function (props) {
42
- return props.success && styled.css(_templateObject8 || (_templateObject8 = 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'));
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'));
43
45
  }, function (props) {
44
- return props.warningAlert && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n background: ", " !important;\n :focus {\n background: white !important;\n }\n &&:hover:not(:focus) {\n background: ", " !important;\n }\n &&:read-only:hover {\n background: ", " !important;\n }\n "])), props.theme.getColor('signal-yellow-400'), props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400'));
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')));
45
47
  }, function (props) {
46
- return props.errorAlert && styled.css(_templateObject10 || (_templateObject10 = 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'));
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'));
47
49
  }, function (props) {
48
- return props.lightBackground && styled.css(_templateObject11 || (_templateObject11 = 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'));
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'));
49
51
  }, function (props) {
50
52
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
51
53
  }, function (props) {
52
- return props.noBorder && !props.readOnly ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
54
+ return props.noBorder && !props.readOnly && !props.warningAlert ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
53
55
  }, InputIconContainer, function (props) {
54
- return props.success && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
56
+ return props.success && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
55
57
  }, function (props) {
56
- return props.warning && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
58
+ return props.warning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
57
59
  }, function (props) {
58
- return props.error && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
60
+ return props.error && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
59
61
  }, function (props) {
60
- return props.hasIcon && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
62
+ return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
61
63
  }, function (props) {
62
- return (props.warningAlert || props.errorAlert) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
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 "])));
63
65
  }, function (props) {
64
66
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
65
67
  }, function (props) {
@@ -69,31 +71,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
69
71
  }, function (props) {
70
72
  return props.theme.getColor('gray-600');
71
73
  });
72
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = 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) {
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) {
73
75
  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%)"));
74
76
  }, function (props) {
75
- return props.hasPlaceholder && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n color: ", " !important;\n "])), props.theme.getColor('red-500')));
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')));
76
78
  }, function (props) {
77
- return props.hasIcon && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
79
+ return props.hasIcon && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
78
80
  });
79
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = 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"])));
80
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = 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) {
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) {
81
83
  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
82
84
  });
83
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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) {
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) {
84
86
  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
85
87
  }, function (props) {
86
- return props.disabled && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
88
+ return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
87
89
  });
88
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject25 || (_templateObject25 = 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) {
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) {
89
91
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
90
92
  }, function (props) {
91
- return props.error && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
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')));
92
94
  });
93
- var ShowMoreText = 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 cursor: pointer;\n\n ", ";\n\n ", "\n"])), function (props) {
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) {
94
96
  return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
95
97
  }, function (props) {
96
- 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')));
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')));
97
99
  });
98
100
 
99
101
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -107,7 +109,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
107
109
  hidden = _ref.hidden,
108
110
  readOnly = _ref.readOnly,
109
111
  edit = _ref.edit,
110
- showMore = _ref.showMore,
111
112
  showMoreText = _ref.showMoreText,
112
113
  autoComplete = _ref.autoComplete,
113
114
  description = _ref.description,
@@ -124,38 +125,64 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
124
125
  noBorder = _ref.noBorder,
125
126
  warningAlert = _ref.warningAlert,
126
127
  errorAlert = _ref.errorAlert,
127
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
128
-
129
- var lineheight = 1.5;
128
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMoreText", "autoComplete", "description", "success", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
130
129
 
131
130
  var _useState = React.useState(''),
132
131
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
133
132
  contentRows = _useState2[0],
134
133
  setContentRows = _useState2[1];
135
134
 
136
- var _useState3 = React.useState(rows),
135
+ var _useState3 = React.useState(''),
137
136
  _useState4 = defaultTheme._slicedToArray(_useState3, 2),
138
- defaultRows = _useState4[0],
139
- setDefaultRows = _useState4[1];
137
+ maxContentRows = _useState4[0],
138
+ setMaxContentRows = _useState4[1];
140
139
 
141
- var _useState5 = React.useState(false),
140
+ var _useState5 = React.useState(rows),
142
141
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
143
- expanded = _useState6[0],
144
- setExpanded = _useState6[1];
142
+ defaultRows = _useState6[0],
143
+ setDefaultRows = _useState6[1];
145
144
 
146
- var _useState7 = React.useState("".concat(defaultRows * lineheight, "em")),
145
+ var _useState7 = React.useState(false),
147
146
  _useState8 = defaultTheme._slicedToArray(_useState7, 2),
148
- maxHeight = _useState8[0],
149
- setMaxHeight = _useState8[1];
147
+ expanded = _useState8[0],
148
+ setExpanded = _useState8[1];
149
+
150
+ var _useState9 = React.useState(false),
151
+ _useState10 = defaultTheme._slicedToArray(_useState9, 2),
152
+ displayShowMoreText = _useState10[0],
153
+ setDisplayShowMoreText = _useState10[1];
154
+
155
+ var _useState11 = React.useState(''),
156
+ _useState12 = defaultTheme._slicedToArray(_useState11, 2),
157
+ maxHeight = _useState12[0],
158
+ setMaxHeight = _useState12[1];
150
159
 
151
- console.log('default maxHeight', maxHeight);
152
160
  React.useEffect(function () {
153
161
  setDefaultRows(rows);
154
162
  }, []);
163
+ var textAreaRef = React.useRef(null);
164
+ React.useEffect(function () {
165
+ var updateHeight = function updateHeight() {
166
+ var lineheight = 1.5;
167
+ var textarea = textAreaRef.current.scrollHeight;
168
+ var maxRows = Math.floor(textarea / (lineheight * 11.5));
169
+ var maxHeight = maxRows * lineheight + 'em';
155
170
 
156
- var _useState9 = React.useState(nanoid.nanoid()),
157
- _useState10 = defaultTheme._slicedToArray(_useState9, 1),
158
- uniqueId = _useState10[0];
171
+ if (maxRows > defaultRows) {
172
+ setExpanded(true);
173
+ setDisplayShowMoreText(true);
174
+ }
175
+
176
+ setMaxContentRows(maxRows);
177
+ setMaxHeight(maxHeight);
178
+ };
179
+
180
+ updateHeight();
181
+ }, []);
182
+
183
+ var _useState13 = React.useState(nanoid.nanoid()),
184
+ _useState14 = defaultTheme._slicedToArray(_useState13, 1),
185
+ uniqueId = _useState14[0];
159
186
 
160
187
  var hasError = React.useMemo(function () {
161
188
  if (lodash.isBoolean(error)) {
@@ -187,25 +214,19 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
187
214
  return null;
188
215
  }, [description, error, warning]);
189
216
 
190
- var handleTextAreaChange = function handleTextAreaChange(event) {
191
- var textarea = event.target;
192
- var currentRows = Math.floor(textarea.scrollHeight / (lineheight * 0.9));
193
- var maxHeight = currentRows * lineheight + 'em';
217
+ var handleTextAreaChange = function handleTextAreaChange() {
218
+ setExpanded(!expanded);
194
219
 
195
- if (lodash.isEmpty(currentRows)) {
196
- setContentRows(currentRows);
220
+ if (expanded === true) {
221
+ setContentRows(maxContentRows);
197
222
  setMaxHeight(maxHeight);
198
- setExpanded(true);
199
223
  }
200
224
 
201
- if (contentRows > defaultRows) {
225
+ if (expanded === false) {
202
226
  setContentRows(defaultRows);
203
- setExpanded(false);
204
227
  }
205
228
  };
206
229
 
207
- console.log('maxHeight', maxHeight);
208
- console.log('expanded', expanded);
209
230
  if (hidden) return null;
210
231
  return React__default['default'].createElement(TextInput, {
211
232
  disabled: disabled,
@@ -213,10 +234,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
213
234
  error: hasError,
214
235
  warning: hasWarning,
215
236
  className: className,
216
- style: style,
217
- showMore: showMore
218
- }, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
219
- ref: forwardedRef,
237
+ style: style
238
+ }, !warningAlert && !errorAlert && React__default['default'].createElement(TextInputFieldIcon, null, icon), (warningAlert || errorAlert) && React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(Container, null, React__default['default'].createElement(OpacityBox, null, React__default['default'].createElement(TextInputField, defaultTheme._extends({
239
+ ref: textAreaRef ? textAreaRef : forwardedRef,
220
240
  rows: contentRows > rows ? contentRows : rows,
221
241
  expanded: expanded,
222
242
  maxHeight: maxHeight,
@@ -241,7 +261,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
241
261
  noBorder: noBorder,
242
262
  warningAlert: warningAlert,
243
263
  errorAlert: errorAlert
244
- }, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
264
+ }, rest)))), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
245
265
  warningAlert: warningAlert,
246
266
  errorAlert: errorAlert
247
267
  }, React__default['default'].createElement(editNote.SvgEditNote, null)), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null)), label && React__default['default'].createElement(TextInputLabel, {
@@ -251,9 +271,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
251
271
  error: hasError
252
272
  }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
253
273
  error: hasError
254
- }, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && React__default['default'].createElement(ShowMoreText, {
274
+ }, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && displayShowMoreText && React__default['default'].createElement(ShowMoreText, {
255
275
  onClick: handleTextAreaChange,
256
- showMore: showMore
276
+ showMore: expanded
257
277
  }, showMoreText));
258
278
  });
259
279
  TextArea.defaultProps = {
@@ -264,10 +284,11 @@ TextArea.defaultProps = {
264
284
  warningAlert: false,
265
285
  errorAlert: false,
266
286
  hidden: false,
267
- showMore: false,
268
- showMoreText: ''
287
+ showMoreText: '',
288
+ success: false
269
289
  };
270
290
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
291
+ success: defaultTheme.PropTypes.bool,
271
292
  value: defaultTheme.PropTypes.string,
272
293
  defaultValue: defaultTheme.PropTypes.string,
273
294
  name: defaultTheme.PropTypes.string,
@@ -277,14 +298,12 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
277
298
  disabled: defaultTheme.PropTypes.bool,
278
299
  hidden: defaultTheme.PropTypes.bool,
279
300
  readOnly: defaultTheme.PropTypes.bool,
280
- showMore: defaultTheme.PropTypes.bool,
281
301
  showMoreText: defaultTheme.PropTypes.string,
282
302
  edit: defaultTheme.PropTypes.bool,
283
303
  autoComplete: defaultTheme.PropTypes.string,
284
304
  description: defaultTheme.PropTypes.string,
285
305
  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
286
306
  warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
287
- success: defaultTheme.PropTypes.bool,
288
307
  icon: defaultTheme.PropTypes.element,
289
308
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
290
309
  className: defaultTheme.PropTypes.string,
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-0160cb3e.js');
3
+ var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-b366ba70.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -1,10 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-9c4c4f2c.js');
3
+ var CompactStarRating = require('../../CompactStarRating-17c8ca3d.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('lodash');
8
+ require('../../check-circle-filled-1640873e.js');
8
9
 
9
10
 
10
11
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-d2fabaf5.js');
3
+ var CompactTextInput = require('../../CompactTextInput-7263652c.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-76e2ff1e.js');
3
+ var TextArea = require('../../TextArea-708b59a9.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-f893df21.js');
7
7
  var Checkbox = require('../Checkbox-012bbd3f.js');
8
- var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-0160cb3e.js');
9
- var CompactStarRating = require('../CompactStarRating-9c4c4f2c.js');
10
- var CompactTextInput = require('../CompactTextInput-d2fabaf5.js');
8
+ var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-b366ba70.js');
9
+ var CompactStarRating = require('../CompactStarRating-17c8ca3d.js');
10
+ var CompactTextInput = require('../CompactTextInput-7263652c.js');
11
11
  var MultiSelect = require('../MultiSelect-5b008b32.js');
12
12
  var Radio = require('../Radio-0594409d.js');
13
- var TextArea = require('../TextArea-76e2ff1e.js');
13
+ var TextArea = require('../TextArea-708b59a9.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.63",
3
+ "version": "1.1.0-beta.64",
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",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-59ea0b08.js');
3
+ var AssetGallery = require('../../AssetGallery-6f0e7304.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -19,15 +19,15 @@ require('../../shift-away-subtle-cfdf1dbe.js');
19
19
  require('../../ContextMenu-d088833b.js');
20
20
  require('../../expand-more-94585605.js');
21
21
  require('../../Checkbox-012bbd3f.js');
22
- require('../../CompactAutocompleteSelect-0160cb3e.js');
22
+ require('../../CompactAutocompleteSelect-b366ba70.js');
23
23
  require('react-select');
24
24
  require('../../react-select-creatable.esm-2f23d6c6.js');
25
25
  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-9c4c4f2c.js');
30
- require('../../CompactTextInput-d2fabaf5.js');
29
+ require('../../CompactStarRating-17c8ca3d.js');
30
+ require('../../CompactTextInput-7263652c.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-76e2ff1e.js');
38
+ require('../../TextArea-708b59a9.js');
39
39
  require('../../Switch-cd165c8c.js');
40
40
  require('../../warning-circle-24522402.js');
41
41
 
@@ -1,15 +1,15 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-3be0c5c8.js');
3
+ var Instructions = require('../../Instructions-87271194.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
- require('../../TextArea-76e2ff1e.js');
7
+ require('../../TextArea-708b59a9.js');
8
8
  require('nanoid');
9
9
  require('lodash');
10
10
  require('../../edit-note-c47d292e.js');
11
11
  require('../../check-circle-filled-1640873e.js');
12
- require('../../CompactAutocompleteSelect-0160cb3e.js');
12
+ require('../../CompactAutocompleteSelect-b366ba70.js');
13
13
  require('react-select');
14
14
  require('../../react-select-creatable.esm-2f23d6c6.js');
15
15
  require('react-dom');
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-59ea0b08.js');
5
+ var AssetGallery = require('../AssetGallery-6f0e7304.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-3be0c5c8.js');
8
+ var Instructions = require('../Instructions-87271194.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -23,15 +23,15 @@ require('@tippyjs/react');
23
23
  require('../shift-away-subtle-cfdf1dbe.js');
24
24
  require('../expand-more-94585605.js');
25
25
  require('../Checkbox-012bbd3f.js');
26
- require('../CompactAutocompleteSelect-0160cb3e.js');
26
+ require('../CompactAutocompleteSelect-b366ba70.js');
27
27
  require('react-select');
28
28
  require('../react-select-creatable.esm-2f23d6c6.js');
29
29
  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-9c4c4f2c.js');
34
- require('../CompactTextInput-d2fabaf5.js');
33
+ require('../CompactStarRating-17c8ca3d.js');
34
+ require('../CompactTextInput-7263652c.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-76e2ff1e.js');
42
+ require('../TextArea-708b59a9.js');
43
43
  require('../Switch-cd165c8c.js');
44
44
  require('../warning-circle-24522402.js');
45
45