@ntbjs/react-components 1.1.0-beta.62 → 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.
Files changed (21) hide show
  1. package/{AssetGallery-05297c7a.js → AssetGallery-6f0e7304.js} +9 -23
  2. package/{Button-dd271c4b.js → Button-f893df21.js} +1 -1
  3. package/{CompactAutocompleteSelect-91f96ef4.js → CompactAutocompleteSelect-b366ba70.js} +67 -29
  4. package/{CompactStarRating-9c4c4f2c.js → CompactStarRating-17c8ca3d.js} +42 -13
  5. package/{CompactTextInput-e9c99aa3.js → CompactTextInput-7263652c.js} +55 -18
  6. package/{Instructions-791f977a.js → Instructions-87271194.js} +14 -9
  7. package/{Popover-11df9750.js → Popover-cf1e9677.js} +6 -6
  8. package/{TextArea-6dad1bbe.js → TextArea-708b59a9.js} +127 -31
  9. package/check-circle-filled-1640873e.js +42 -0
  10. package/data/Popover/index.js +1 -1
  11. package/data/index.js +1 -1
  12. package/inputs/Button/index.js +2 -2
  13. package/inputs/CompactAutocompleteSelect/index.js +2 -1
  14. package/inputs/CompactStarRating/index.js +2 -1
  15. package/inputs/CompactTextInput/index.js +3 -2
  16. package/inputs/TextArea/index.js +2 -1
  17. package/inputs/index.js +7 -6
  18. package/package.json +1 -1
  19. package/widgets/AssetGallery/index.js +8 -7
  20. package/widgets/Instructions/index.js +4 -3
  21. package/widgets/index.js +9 -8
package/{CompactTextInput-e9c99aa3.js → CompactTextInput-7263652c.js} RENAMED
@@ -6,9 +6,10 @@ var nanoid = require('nanoid');
6
6
  var lodash = require('lodash');
7
7
  var styled = require('styled-components');
8
8
  var editNote = require('./edit-note-c47d292e.js');
9
+ var checkCircleFilled = require('./check-circle-filled-1640873e.js');
9
10
  require('./Alert-3e4f8be1.js');
10
11
  require('./Badge-9bcebe96.js');
11
- var Popover = require('./Popover-11df9750.js');
12
+ var Popover = require('./Popover-cf1e9677.js');
12
13
  require('./Tab-bd0f3345.js');
13
14
  require('./Tabs-cfc35dc0.js');
14
15
  var Tooltip = require('./Tooltip-f4f9ab8f.js');
@@ -39,20 +40,32 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
39
40
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
40
41
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
41
42
 
42
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
43
- 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) {
44
57
  return props.theme.primaryFontFamily;
45
58
  });
46
- 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) {
47
60
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
48
61
  });
49
- 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) {
50
63
  return props.$hasLabel ? '66.66%' : '100%';
51
64
  });
52
- 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) {
53
- 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) {
54
67
  return props.error ? '#901d1d' : props.warning ? '#816600' : props.theme.getColor('gray-700');
55
- }), 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) {
56
69
  return props.error ? '#f7d5d0' : props.warning ? '#fffebf' : props.theme.getColor('gray-100');
57
70
  }));
58
71
  }, function (props) {
@@ -62,44 +75,63 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
62
75
  }, function (props) {
63
76
  return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
64
77
  });
65
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = 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 &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n & + ", " {\n opacity: 1;\n }\n }\n\n &&:focus {\n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
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'));
84
+ });
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) {
66
90
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
67
91
  }, function (props) {
68
92
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
69
93
  }, function (props) {
70
- return props.hasLink && styled.css(_templateObject8 || (_templateObject8 = 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) {
71
95
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
72
96
  });
73
97
  }, function (props) {
74
98
  return props.warning && props.theme.themeProp('background', '#634e01', '#fffde8');
75
99
  }, function (props) {
76
- return props.error && props.theme.themeProp('background', '#7f1b1b', '#fbeae6');
100
+ return props.error && props.theme.themeProp('background', '#fbeae6', '#fbeae6');
77
101
  }, function (props) {
78
102
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
103
+ }, function (props) {
104
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
79
105
  }, function (props) {
80
106
  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
81
107
  }, function (props) {
82
108
  return props.warning && !props.readOnly && props.theme.themeProp('background', '#816600', '#fffebf');
109
+ }, function (props) {
110
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
83
111
  }, function (props) {
84
112
  return props.error && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0');
85
113
  }, InputIconContainer, function (props) {
114
+ return props.success && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
115
+ }, CheckIconContainer, function (props) {
86
116
  return props.error && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
87
117
  }, function (props) {
88
- return !props.readOnly && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
118
+ return !props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
89
119
  return props.theme.getColor('gray-600');
90
120
  });
91
121
  }, function (props) {
92
- return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
122
+ return props.warning && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
93
123
  return props.theme.getColor('signal-yellow-500');
94
124
  });
95
125
  }, function (props) {
96
- return props.error && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
126
+ return props.error && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
97
127
  return props.theme.getColor('red-500');
98
128
  });
99
129
  }, function (props) {
100
- return props.bold && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
130
+ return props.success && props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-200'));
131
+ }, function (props) {
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 "])));
101
133
  });
102
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
103
135
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
104
136
  });
105
137
 
@@ -136,6 +168,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
136
168
  autoSelect = _ref2.autoSelect,
137
169
  readOnly = _ref2.readOnly,
138
170
  edit = _ref2.edit,
171
+ success = _ref2.success,
139
172
  error = _ref2.error,
140
173
  warning = _ref2.warning,
141
174
  bold = _ref2.bold,
@@ -143,7 +176,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
143
176
  onChangeProp = _ref2.onChange,
144
177
  onFocusProp = _ref2.onFocus,
145
178
  onBlurProp = _ref2.onBlur,
146
- props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "edit", "error", "warning", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
179
+ props = defaultTheme._objectWithoutProperties(_ref2, ["label", "type", "name", "defaultValue", "value", "placeholder", "link", "linkTarget", "autoSelect", "readOnly", "edit", "success", "error", "warning", "bold", "hidden", "onChange", "onFocus", "onBlur"]);
147
180
 
148
181
  var _useState = React.useState(nanoid.nanoid()),
149
182
  _useState2 = defaultTheme._slicedToArray(_useState, 1),
@@ -241,10 +274,12 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
241
274
  name: name,
242
275
  readOnly: readOnly,
243
276
  edit: edit,
277
+ sucess: success,
244
278
  placeholder: placeholder,
245
279
  defaultValue: defaultValue,
246
280
  value: value,
247
281
  error: error,
282
+ success: success,
248
283
  warning: warning,
249
284
  bold: bold,
250
285
  hasLink: !lodash.isEmpty(link),
@@ -254,10 +289,11 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
254
289
  }), !readOnly && React__default['default'].createElement(InputIconContainer, {
255
290
  error: error,
256
291
  warning: warning
257
- }, React__default['default'].createElement(editNote.SvgEditNote, null))))));
292
+ }, React__default['default'].createElement(editNote.SvgEditNote, null)), success && React__default['default'].createElement(CheckIconContainer, null, React__default['default'].createElement(checkCircleFilled.SvgCheckCircleFilled, null))))));
258
293
  });
259
294
  CompactTextInput.propTypes = process.env.NODE_ENV !== "production" ? {
260
295
  label: defaultTheme.PropTypes.string,
296
+ success: defaultTheme.PropTypes.bool,
261
297
  type: defaultTheme.PropTypes.string,
262
298
  name: defaultTheme.PropTypes.string,
263
299
  defaultValue: defaultTheme.PropTypes.string,
@@ -282,6 +318,7 @@ CompactTextInput.defaultProps = {
282
318
  linkTarget: '_self',
283
319
  bold: false,
284
320
  readOnly: false,
321
+ success: false,
285
322
  edit: false,
286
323
  error: false,
287
324
  warning: false,
package/{Instructions-791f977a.js → Instructions-87271194.js} RENAMED
@@ -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-6dad1bbe.js');
7
- var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-91f96ef4.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,
package/{Popover-11df9750.js → Popover-cf1e9677.js} RENAMED
@@ -15,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
  var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
16
16
 
17
17
  var _templateObject, _templateObject2, _templateObject3;
18
- var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -15px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
18
+ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 400;\n color: inherit;\n border-radius: 0;\n line-height: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .tippy-content {\n padding: 0;\n }\n\n .tippy-arrow {\n ", "\n }\n\n && > .tippy-arrow::before {\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n & > .tippy-arrow::after {\n content: '';\n position: absolute;\n border-color: transparent;\n border-style: solid;\n }\n\n &[data-placement^='top'] {\n & > .tippy-arrow:before {\n bottom: -16px;\n left: -5px;\n border-width: 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -15px;\n left: -5px;\n border-width: 15px 13px 0;\n border-top-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='right'] {\n & > .tippy-arrow:before {\n bottom: -5px;\n left: -16px;\n border-width: 13px 15px 13px 0;\n ", "\n }\n\n & > .tippy-arrow:after {\n bottom: -5px;\n left: -15px;\n border-width: 13px 15px 13px 0;\n border-right-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='bottom'] {\n & > .tippy-arrow:before {\n top: -16px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n ", "\n }\n\n & > .tippy-arrow:after {\n top: -14.5px;\n left: -5px;\n border-width: 0 13px 15px 13px;\n border-bottom-color: initial;\n transform-origin: center top;\n }\n }\n\n &[data-placement^='left'] {\n & > .tippy-arrow::before {\n bottom: -5px;\n right: -16px;\n border-width: 13px 0 13px 15px;\n ", "\n }\n\n & > .tippy-arrow::after {\n bottom: -5px;\n right: -15px;\n border-width: 13px 0 13px 15px;\n border-left-color: initial;\n transform-origin: center top;\n }\n }\n"])), function (props) {
19
19
  return props.theme.primaryFontFamily;
20
20
  }, function (props) {
21
21
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
@@ -32,15 +32,15 @@ var Popover$1 = styled__default['default'](TippyTooltip__default['default']).att
32
32
  }, function (props) {
33
33
  return props.contextMenuSublevel && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n &[data-placement^='right-start'],\n &[data-placement^='left-start'] {\n margin-top: -4px;\n }\n\n &[data-placement^='left'] {\n margin-right: -6px;\n }\n\n &[data-placement^='right'] {\n margin-left: -6px;\n }\n "])));
34
34
  }, function (props) {
35
- return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'));
35
+ return props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1);
36
36
  }, function (props) {
37
- return props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
37
+ return props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
38
38
  }, function (props) {
39
- return props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
39
+ return props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
40
40
  }, function (props) {
41
- return props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
41
+ return props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
42
42
  }, function (props) {
43
- return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-400'));
43
+ return props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1);
44
44
  });
45
45
 
46
46
  var Popover = React__default['default'].forwardRef(function Popover(_ref, ref) {
package/{TextArea-6dad1bbe.js → TextArea-708b59a9.js} RENAMED
@@ -6,13 +6,14 @@ var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
7
7
  var lodash = require('lodash');
8
8
  var editNote = require('./edit-note-c47d292e.js');
9
+ var checkCircleFilled = require('./check-circle-filled-1640873e.js');
9
10
 
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
12
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
15
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30;
16
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"])));
17
18
  var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
18
19
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
@@ -22,7 +23,14 @@ var placeholderBaseStyle = styled.css(_templateObject2 || (_templateObject2 = de
22
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) {
23
24
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
24
25
  });
25
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = 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 ", "\n ", "\n ", "\n border: 1px solid;\n ", "\n ", " \n\n ", " \n\n ", " \n ", "\n ", ";\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\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) {
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
+ });
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);
33
+ }, function (props) {
26
34
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
27
35
  }, function (props) {
28
36
  return (props.warningAlert || props.errorAlert) && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
@@ -31,25 +39,29 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
31
39
  }, function (props) {
32
40
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
33
41
  }, function (props) {
34
- return props.noBorder && styled.css(_templateObject5 || (_templateObject5 = 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 "])));
43
+ }, function (props) {
44
+ return props.success && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-300')), props.theme.themeProp('background', '#64b49d !important', '#bfe0d5 !important'));
35
45
  }, function (props) {
36
- return props.warningAlert && styled.css(_templateObject6 || (_templateObject6 = 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')));
37
47
  }, function (props) {
38
- return props.errorAlert && styled.css(_templateObject7 || (_templateObject7 = 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'));
39
49
  }, function (props) {
40
- return props.lightBackground && styled.css(_templateObject8 || (_templateObject8 = 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'));
41
51
  }, function (props) {
42
52
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
43
53
  }, function (props) {
44
- 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';
45
55
  }, InputIconContainer, function (props) {
46
- return props.warning && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
56
+ return props.success && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
47
57
  }, function (props) {
48
- return props.error && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
58
+ return props.warning && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
49
59
  }, function (props) {
50
- return props.hasIcon && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
60
+ return props.error && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
51
61
  }, function (props) {
52
- return (props.warningAlert || props.errorAlert) && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
62
+ return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
63
+ }, function (props) {
64
+ return (props.warningAlert || props.errorAlert) && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-top: 25px;\n padding-right: 30px;\n "])));
53
65
  }, function (props) {
54
66
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
55
67
  }, function (props) {
@@ -59,26 +71,31 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
59
71
  }, function (props) {
60
72
  return props.theme.getColor('gray-600');
61
73
  });
62
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
63
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%)"));
64
76
  }, function (props) {
65
- return props.hasPlaceholder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), activeLabel, props.error && styled.css(_templateObject15 || (_templateObject15 = 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')));
66
78
  }, function (props) {
67
- return props.hasIcon && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
79
+ return props.hasIcon && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
68
80
  });
69
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = 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"])));
70
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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) {
71
83
  return props.theme.themeProp('color', props.theme.getColor('gray-600'), props.theme.getColor('gray-600'), 1);
72
84
  });
73
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = 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) {
74
86
  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
75
87
  }, function (props) {
76
- return props.disabled && styled.css(_templateObject20 || (_templateObject20 = 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 "])));
77
89
  });
78
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject21 || (_templateObject21 = 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) {
79
91
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
80
92
  }, function (props) {
81
- return props.error && styled.css(_templateObject22 || (_templateObject22 = 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')));
94
+ });
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) {
96
+ return props.theme.themeProp('color', props.theme.getColor('emerald-300'), props.theme.getColor('emerald-500'));
97
+ }, function (props) {
98
+ return props.error && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
82
99
  });
83
100
 
84
101
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -92,8 +109,10 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
92
109
  hidden = _ref.hidden,
93
110
  readOnly = _ref.readOnly,
94
111
  edit = _ref.edit,
112
+ showMoreText = _ref.showMoreText,
95
113
  autoComplete = _ref.autoComplete,
96
114
  description = _ref.description,
115
+ success = _ref.success,
97
116
  error = _ref.error,
98
117
  warning = _ref.warning,
99
118
  icon = _ref.icon,
@@ -106,11 +125,64 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
106
125
  noBorder = _ref.noBorder,
107
126
  warningAlert = _ref.warningAlert,
108
127
  errorAlert = _ref.errorAlert,
109
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "error", "warning", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "warningAlert", "errorAlert"]);
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"]);
129
+
130
+ var _useState = React.useState(''),
131
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
132
+ contentRows = _useState2[0],
133
+ setContentRows = _useState2[1];
134
+
135
+ var _useState3 = React.useState(''),
136
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
137
+ maxContentRows = _useState4[0],
138
+ setMaxContentRows = _useState4[1];
139
+
140
+ var _useState5 = React.useState(rows),
141
+ _useState6 = defaultTheme._slicedToArray(_useState5, 2),
142
+ defaultRows = _useState6[0],
143
+ setDefaultRows = _useState6[1];
144
+
145
+ var _useState7 = React.useState(false),
146
+ _useState8 = defaultTheme._slicedToArray(_useState7, 2),
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];
110
154
 
111
- var _useState = React.useState(nanoid.nanoid()),
112
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
113
- uniqueId = _useState2[0];
155
+ var _useState11 = React.useState(''),
156
+ _useState12 = defaultTheme._slicedToArray(_useState11, 2),
157
+ maxHeight = _useState12[0],
158
+ setMaxHeight = _useState12[1];
159
+
160
+ React.useEffect(function () {
161
+ setDefaultRows(rows);
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';
170
+
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];
114
186
 
115
187
  var hasError = React.useMemo(function () {
116
188
  if (lodash.isBoolean(error)) {
@@ -141,6 +213,20 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
141
213
 
142
214
  return null;
143
215
  }, [description, error, warning]);
216
+
217
+ var handleTextAreaChange = function handleTextAreaChange() {
218
+ setExpanded(!expanded);
219
+
220
+ if (expanded === true) {
221
+ setContentRows(maxContentRows);
222
+ setMaxHeight(maxHeight);
223
+ }
224
+
225
+ if (expanded === false) {
226
+ setContentRows(defaultRows);
227
+ }
228
+ };
229
+
144
230
  if (hidden) return null;
145
231
  return React__default['default'].createElement(TextInput, {
146
232
  disabled: disabled,
@@ -149,9 +235,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
149
235
  warning: hasWarning,
150
236
  className: className,
151
237
  style: style
152
- }, !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({
153
- ref: forwardedRef,
154
- rows: rows,
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,
240
+ rows: contentRows > rows ? contentRows : rows,
241
+ expanded: expanded,
242
+ maxHeight: maxHeight,
155
243
  value: value,
156
244
  defaultValue: defaultValue,
157
245
  name: name,
@@ -160,6 +248,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
160
248
  disabled: disabled || readOnly,
161
249
  readOnly: readOnly,
162
250
  edit: edit,
251
+ success: success,
163
252
  autoComplete: autoComplete,
164
253
  hasIcon: Boolean(icon),
165
254
  icon: icon,
@@ -172,17 +261,20 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
172
261
  noBorder: noBorder,
173
262
  warningAlert: warningAlert,
174
263
  errorAlert: errorAlert
175
- }, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
264
+ }, rest)))), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
176
265
  warningAlert: warningAlert,
177
266
  errorAlert: errorAlert
178
- }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
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, {
179
268
  htmlFor: "text-input-".concat(uniqueId),
180
269
  hasPlaceholder: Boolean(placeholder),
181
270
  hasIcon: Boolean(icon),
182
271
  error: hasError
183
272
  }, label, required && ' *'), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
184
273
  error: hasError
185
- }, descriptionText));
274
+ }, descriptionText), typeof showMoreText === 'string' && showMoreText.length > 0 && displayShowMoreText && React__default['default'].createElement(ShowMoreText, {
275
+ onClick: handleTextAreaChange,
276
+ showMore: expanded
277
+ }, showMoreText));
186
278
  });
187
279
  TextArea.defaultProps = {
188
280
  rows: 4,
@@ -191,9 +283,12 @@ TextArea.defaultProps = {
191
283
  edit: false,
192
284
  warningAlert: false,
193
285
  errorAlert: false,
194
- hidden: false
286
+ hidden: false,
287
+ showMoreText: '',
288
+ success: false
195
289
  };
196
290
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
291
+ success: defaultTheme.PropTypes.bool,
197
292
  value: defaultTheme.PropTypes.string,
198
293
  defaultValue: defaultTheme.PropTypes.string,
199
294
  name: defaultTheme.PropTypes.string,
@@ -203,6 +298,7 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
203
298
  disabled: defaultTheme.PropTypes.bool,
204
299
  hidden: defaultTheme.PropTypes.bool,
205
300
  readOnly: defaultTheme.PropTypes.bool,
301
+ showMoreText: defaultTheme.PropTypes.string,
206
302
  edit: defaultTheme.PropTypes.bool,
207
303
  autoComplete: defaultTheme.PropTypes.string,
208
304
  description: defaultTheme.PropTypes.string,