@ntbjs/react-components 1.2.0-rc.4 → 1.2.0-rc.40

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 (59) hide show
  1. package/{ActionButton-761050a9.js → ActionButton-06df3d6c.js} +1 -1
  2. package/{Alert-96814023.js → Alert-13b75102.js} +2 -2
  3. package/{AssetGallery-5b12e2b1.js → AssetGallery-c19da75c.js} +86 -62
  4. package/{AssetPreviewTopBar-ade10c15.js → AssetPreviewTopBar-c28715f7.js} +1 -1
  5. package/{Badge-fa94dca8.js → Badge-aec841c8.js} +1 -1
  6. package/{Button-5071dc6b.js → Button-49f82b31.js} +3 -3
  7. package/{Checkbox-dd2cf216.js → Checkbox-68dc38a8.js} +13 -8
  8. package/{CompactAutocompleteSelect-d4147107.js → CompactAutocompleteSelect-87c8c7e7.js} +120 -89
  9. package/{CompactStarRating-ca1943af.js → CompactStarRating-1aedbcf4.js} +103 -66
  10. package/{CompactTextInput-c5e38aae.js → CompactTextInput-c40ff109.js} +76 -62
  11. package/{ContextMenu-bd818e55.js → ContextMenu-4ec3d9f3.js} +1 -1
  12. package/{ContextMenuItem-10af8b2f.js → ContextMenuItem-1fe17ed5.js} +1 -1
  13. package/{InputGroup-4c49ba30.js → InputGroup-49fbc423.js} +1 -1
  14. package/{Instructions-b955ba72.js → Instructions-5ebac5f9.js} +27 -14
  15. package/MultiLevelCheckboxSelect-eeb5dcef.js +698 -0
  16. package/{MultiSelect-87614192.js → MultiSelect-4b8d3d0d.js} +1 -1
  17. package/{Popover-155cbac8.js → Popover-569cd272.js} +33 -7
  18. package/{Radio-dd81f5d4.js → Radio-32d0513a.js} +1 -1
  19. package/{SectionSeparator-9f129ade.js → SectionSeparator-259a22ed.js} +1 -1
  20. package/{Switch-c004ea6d.js → Switch-4a41585f.js} +1 -1
  21. package/{Tab-8fec1dba.js → Tab-f499ecbc.js} +1 -1
  22. package/{Tabs-96e366bf.js → Tabs-4d7742bc.js} +8 -38
  23. package/{TextArea-4d90d02c.js → TextArea-ff90b757.js} +190 -107
  24. package/{TextInput-e6035fb0.js → TextInput-0d109708.js} +1 -1
  25. package/{Tooltip-a175e9f5.js → Tooltip-66daf6e3.js} +4 -4
  26. package/{VerificationStatusIcon-a88b1f8d.js → VerificationStatusIcon-b574fd21.js} +1 -1
  27. package/data/Alert/index.js +2 -2
  28. package/data/Badge/index.js +2 -2
  29. package/data/Popover/index.js +4 -3
  30. package/data/Tab/index.js +2 -2
  31. package/data/Tabs/index.js +3 -3
  32. package/data/Tooltip/index.js +3 -3
  33. package/data/index.js +10 -9
  34. package/{defaultTheme-c137e17f.js → defaultTheme-ea44e34a.js} +58 -0
  35. package/inputs/ActionButton/index.js +2 -2
  36. package/inputs/Button/index.js +6 -5
  37. package/inputs/Checkbox/index.js +2 -2
  38. package/inputs/CompactAutocompleteSelect/index.js +13 -3
  39. package/inputs/CompactStarRating/index.js +14 -3
  40. package/inputs/CompactTextInput/index.js +11 -11
  41. package/inputs/MultiSelect/index.js +2 -2
  42. package/inputs/Radio/index.js +2 -2
  43. package/inputs/Switch/index.js +2 -2
  44. package/inputs/TextArea/index.js +14 -3
  45. package/inputs/TextInput/index.js +2 -2
  46. package/inputs/index.js +27 -22
  47. package/layout/InputGroup/index.js +2 -2
  48. package/layout/SectionSeparator/index.js +2 -2
  49. package/layout/index.js +3 -3
  50. package/package.json +2 -1
  51. package/{shift-away-subtle-a86a6cd2.js → shift-away-subtle-0bed9a3c.js} +1 -1
  52. package/widgets/AssetGallery/index.js +33 -30
  53. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +2 -2
  54. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  55. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +1 -1
  56. package/widgets/ContextMenu/index.js +2 -2
  57. package/widgets/Instructions/index.js +15 -5
  58. package/widgets/index.js +35 -32
  59. package/check-555d831b.js +0 -213
@@ -1,10 +1,16 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-c137e17f.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
6
6
  var nanoid = require('nanoid');
7
- var check = require('./check-555d831b.js');
7
+ require('./Alert-13b75102.js');
8
+ require('./Badge-aec841c8.js');
9
+ require('./Popover-569cd272.js');
10
+ require('./Tab-f499ecbc.js');
11
+ require('./Tabs-4d7742bc.js');
12
+ var Tooltip = require('./Tooltip-66daf6e3.js');
13
+ require('./VerificationStatusIcon-b574fd21.js');
8
14
  var editNote = require('./edit-note-c47d292e.js');
9
15
  var styled = require('styled-components');
10
16
 
@@ -13,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
19
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
20
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
21
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44;
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48;
17
23
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
18
24
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
19
25
  var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
@@ -22,19 +28,21 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
22
28
  }, function (props) {
23
29
  return props.theme.themeProp('opacity', 0.6, 0.5);
24
30
  });
25
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
31
+ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
32
+ return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
33
+ }, function (props) {
26
34
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
27
35
  }, function (props) {
28
36
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
29
37
  });
30
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n\n ", "\n \n\n ", "\n\n ", " \n ", "\n\n &&:hover:not(:focus) {\n ", ";\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 ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n ", "\n ", "\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n }\n"])), function (props) {
38
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", "\n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
31
39
  return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
32
40
  }, function (props) {
33
41
  return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
34
42
  }, function (props) {
35
43
  return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
36
44
  }, function (props) {
37
- return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])), props.defaultHeight);
45
+ return props.showMore && !props.expanded && props.defaultHeight < props.maxHeight && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
38
46
  }, function (props) {
39
47
  return props.expanded && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n height: ", "px;\n "])), props.maxHeight);
40
48
  }, function (props) {
@@ -42,11 +50,11 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
42
50
  }, function (props) {
43
51
  return props.readOnly && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
44
52
  }, function (props) {
45
- return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
53
+ return props.disabled && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
46
54
  }, function (props) {
47
55
  return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
48
56
  }, function (props) {
49
- return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
57
+ return props.showMore && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
50
58
  }, function (props) {
51
59
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
52
60
  }, function (props) {
@@ -56,35 +64,63 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
56
64
  }, function (props) {
57
65
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
58
66
  }, function (props) {
59
- return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n border-color: transparent !important;\n "])));
67
+ return props.noBorder && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
+ return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
69
+ });
70
+ }, function (props) {
71
+ return props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
72
+ }, function (props) {
73
+ return props.type === 'instructions-warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#F4E21E'), props.theme.themeProp('border-color', '#634E01 ', '#F4E21E'));
74
+ }, function (props) {
75
+ return props.type === 'error' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
60
76
  }, function (props) {
61
- return props.state === 'error-border' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
77
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
78
+ return props.theme.themeProp('border-color', '#634E01', '#F4E21E');
79
+ });
62
80
  }, function (props) {
63
- return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
81
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
82
+ return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
83
+ });
64
84
  }, function (props) {
65
- return props.state === 'warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\n ", "\n ", "\n &&:hover:not(:focus) {\n ", "\n ", "\n }\n &&:read-only:hover {\n ", "\n }\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01 ', props.theme.getColor('signal-yellow-400')), function (props) {
66
- return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n "])));
67
- }, props.theme.themeProp('background', '#816600', '#F4E21E'), props.theme.themeProp('background', props.theme.getColor('signal-yellow-500'), props.theme.getColor('signal-yellow-400')));
85
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
86
+ return props.theme.themeProp('border-color', '#634E01', '#F4E21E');
87
+ });
68
88
  }, function (props) {
69
- return props.state === 'error' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px 13px 10px;\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'));
89
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
90
+ return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
91
+ });
70
92
  }, function (props) {
71
- return props.lightBackground && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
93
+ return props.type === 'warning-border' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
94
+ }, function (props) {
95
+ return props.type === 'error-border' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
96
+ }, function (props) {
97
+ return props.lightBackground && styled.css(_templateObject27 || (_templateObject27 = 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'));
72
98
  }, function (props) {
73
99
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
74
100
  }, function (props) {
75
- return props.edit && !props.state === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
101
+ return props.edit && !props.type === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
76
102
  }, function (props) {
77
- return props.edit && props.state === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
103
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
78
104
  }, function (props) {
79
- return props.noBorder && !props.readOnly && props.state != 'warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
80
- }, InputIconContainer, function (props) {
81
- return props.state === 'success' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
105
+ return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
82
106
  }, function (props) {
83
- return props.state === 'warning' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
107
+ return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
84
108
  }, function (props) {
85
- return props.state === 'error' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
109
+ return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
86
110
  }, function (props) {
87
- return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
111
+ return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#FFFDE8');
112
+ }, function (props) {
113
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
114
+ return props.theme.themeProp('border-color', '#806403', '#FFFDE8');
115
+ });
116
+ }, function (props) {
117
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
118
+ }, function (props) {
119
+ return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
120
+ }, function (props) {
121
+ return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' && props.type != 'instructions-warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
122
+ }, InputIconContainer, function (props) {
123
+ return props.type === 'success' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
88
124
  }, function (props) {
89
125
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
90
126
  }, function (props) {
@@ -92,58 +128,64 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
92
128
  }, function (props) {
93
129
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
94
130
  }, function (props) {
95
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
131
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
96
132
  }, function (props) {
97
- return props.state === 'warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
133
+ return props.type === 'warning' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
134
+ return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
135
+ }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
98
136
  }, function (props) {
99
- return props.state === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n "])), props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
137
+ return props.type === 'error' && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
138
+ return props.theme.themeProp('border-color', '#D83018', '#D83018');
139
+ }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
100
140
  }, function (props) {
101
141
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
102
142
  }, function (props) {
103
- return props.edit && props.state === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
143
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
144
+ }, function (props) {
145
+ return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
104
146
  });
105
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
147
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
106
148
  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%)"));
107
149
  }, function (props) {
108
- return !props.inputIsEmpty && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
150
+ return !props.inputIsEmpty && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
109
151
  }, function (props) {
110
- return props.hasPlaceholder && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
152
+ return props.hasPlaceholder && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
111
153
  }, function (props) {
112
- return props.hasIcon && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
154
+ return props.hasIcon && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
113
155
  });
114
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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"])));
115
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\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 margin-top: -3px;\n ", "\n }\n"])), function (props) {
156
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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"])));
157
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\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 margin-top: -3px;\n ", "\n }\n"])), function (props) {
116
158
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
117
159
  });
118
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
119
- return props.readOnly && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
160
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
161
+ return props.readOnly && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
120
162
  }, function (props) {
121
- return props.disabled && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
163
+ return props.disabled && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
122
164
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
123
- return props.state === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
165
+ return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
124
166
  });
125
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
167
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
126
168
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
127
169
  }, function (props) {
128
- return (props.state === 'warning-border' || props.state === 'warning') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
170
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
129
171
  }, function (props) {
130
- return (props.state === 'error-border' || props.state === 'error') && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
172
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
131
173
  });
132
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
174
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
133
175
  return props.fadeIn ? 0 : 1;
134
176
  }, function (props) {
135
177
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
136
178
  }, function (props) {
137
179
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
138
180
  });
139
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 5px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
140
- return props.expanded && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
181
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
182
+ return props.expanded && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
141
183
  }, function (props) {
142
184
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
143
185
  }, function (props) {
144
186
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
145
187
  }, function (props) {
146
- return props.state === 'error' && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
188
+ return props.type === 'error' && styled.css(_templateObject48 || (_templateObject48 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
147
189
  });
148
190
 
149
191
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -162,7 +204,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
162
204
  showLessText = _ref.showLessText,
163
205
  autoComplete = _ref.autoComplete,
164
206
  description = _ref.description,
165
- state = _ref.state,
207
+ type = _ref.type,
166
208
  icon = _ref.icon,
167
209
  rows = _ref.rows,
168
210
  className = _ref.className,
@@ -173,7 +215,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
173
215
  noBorder = _ref.noBorder,
174
216
  instructionsTextArea = _ref.instructionsTextArea,
175
217
  isExpanded = _ref.isExpanded,
176
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "state", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded"]);
218
+ loadingIcon = _ref.loadingIcon,
219
+ successIcon = _ref.successIcon,
220
+ padding = _ref.padding,
221
+ descriptionToolTip = _ref.descriptionToolTip,
222
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "isExpanded", "loadingIcon", "successIcon", "padding", "descriptionToolTip"]);
177
223
 
178
224
  var textInputDomNode = React.useRef(null);
179
225
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -207,9 +253,22 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
207
253
  _useState12 = defaultTheme._slicedToArray(_useState11, 1),
208
254
  uniqueId = _useState12[0];
209
255
 
256
+ var memoizedDescriptionToolTip = React.useMemo(function () {
257
+ return descriptionToolTip;
258
+ }, [descriptionToolTip]);
259
+ React.useEffect(function () {
260
+ setExpanded(false);
261
+ isExpanded(false);
262
+ }, [value, defaultValue]);
263
+
210
264
  var handleTextAreaChange = function handleTextAreaChange() {
265
+ setExpanded(true);
266
+ isExpanded(true);
267
+ };
268
+
269
+ var handleTextAreaShowLess = function handleTextAreaShowLess() {
211
270
  setExpanded(!expanded);
212
- isExpanded(expanded);
271
+ isExpanded(!expanded);
213
272
  };
214
273
 
215
274
  var calculateRows = function calculateRows() {
@@ -234,62 +293,81 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
234
293
  React.useEffect(function () {
235
294
  calculateRows();
236
295
  }, [value, defaultValue]);
237
- if (hidden) return null;
238
- return React__default['default'].createElement(TextInput, {
239
- disabled: disabled,
240
- readOnly: readOnly,
241
- state: state,
242
- className: className,
243
- style: style
244
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
245
- ref: textInputRef,
246
- rows: rows,
247
- expanded: expanded,
248
- defaultHeight: defaultHeight,
249
- maxHeight: maxHeight,
250
- value: value,
251
- defaultValue: defaultValue,
252
- name: name,
253
- placeholder: placeholder || ' ',
254
- required: required,
255
- readOnly: readOnly,
256
- disabled: disabled,
257
- edit: edit,
258
- instructionsTextArea: instructionsTextArea,
259
- showMore: showMore,
260
- state: state,
261
- autoComplete: autoComplete,
262
- hasIcon: Boolean(icon),
263
- icon: icon,
264
- id: "text-input-".concat(uniqueId),
265
- lightBackground: lightBackground,
266
- onChange: function onChange(e) {
267
- if (e.target.value) {
268
- setInputIsEmpty(false);
269
- } else {
270
- setInputIsEmpty(true);
271
- }
296
+ var onKeyDown = React.useCallback(function (event) {
297
+ if (event.key === 'Enter') {
298
+ event.stopPropagation();
299
+ }
300
+ }, []);
301
+
302
+ var input = function input() {
303
+ return React__default['default'].createElement(TextInput, {
304
+ disabled: disabled,
305
+ readOnly: readOnly,
306
+ type: type,
307
+ className: className,
308
+ style: style
309
+ }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
310
+ ref: textInputRef,
311
+ rows: rows,
312
+ expanded: expanded,
313
+ defaultHeight: defaultHeight,
314
+ maxHeight: maxHeight,
315
+ value: value,
316
+ defaultValue: defaultValue,
317
+ name: name,
318
+ placeholder: placeholder || ' ',
319
+ required: required,
320
+ readOnly: readOnly,
321
+ disabled: disabled,
322
+ edit: edit,
323
+ instructionsTextArea: instructionsTextArea,
324
+ showMore: showMore,
325
+ type: type,
326
+ autoComplete: autoComplete,
327
+ hasIcon: Boolean(icon),
328
+ icon: icon,
329
+ id: "text-input-".concat(uniqueId),
330
+ lightBackground: lightBackground,
331
+ padding: padding,
332
+ onChange: function onChange(e) {
333
+ if (e.target.value) {
334
+ setInputIsEmpty(false);
335
+ } else {
336
+ setInputIsEmpty(true);
337
+ }
272
338
 
273
- _onChange(e);
274
- },
275
- onBlur: onBlur,
276
- noBorder: noBorder
277
- }, rest)), (state === 'loading' || state === 'success') && React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
278
- color: '#b0b6b9',
279
- size: 12
280
- }), state === 'success' && React__default['default'].createElement(check.SvgCheck, null)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
281
- disabled: disabled
282
- }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
283
- htmlFor: "text-input-".concat(uniqueId),
284
- hasPlaceholder: Boolean(placeholder),
285
- hasIcon: Boolean(icon),
286
- inputIsEmpty: inputIsEmpty
287
- }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
288
- state: state
289
- }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
290
- onClick: handleTextAreaChange,
291
- expanded: expanded
292
- }, !expanded ? showMoreText : showLessText));
339
+ _onChange(e);
340
+ },
341
+ onKeyDown: onKeyDown,
342
+ onBlur: onBlur,
343
+ noBorder: noBorder
344
+ }, rest, {
345
+ onClick: showMore ? handleTextAreaChange : undefined
346
+ })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
347
+ disabled: disabled
348
+ }, React__default['default'].createElement(editNote.SvgEditNote, {
349
+ className: padding === 'small' ? 'smallPadingIcon' : undefined
350
+ })), label && React__default['default'].createElement(TextInputLabel, {
351
+ htmlFor: "text-input-".concat(uniqueId),
352
+ hasPlaceholder: Boolean(placeholder),
353
+ hasIcon: Boolean(icon),
354
+ inputIsEmpty: inputIsEmpty
355
+ }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
356
+ type: type
357
+ }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
358
+ onClick: showMore ? handleTextAreaShowLess : undefined,
359
+ expanded: expanded
360
+ }, !expanded ? showMoreText : showLessText));
361
+ };
362
+
363
+ if (hidden) return null;
364
+ return React__default['default'].createElement(React__default['default'].Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
365
+ content: memoizedDescriptionToolTip,
366
+ key: "tooltipTextArea1",
367
+ placement: "bottom-end",
368
+ trigger: 'mouseenter',
369
+ zIndex: 999999
370
+ }, input())));
293
371
  });
294
372
  TextArea.defaultProps = {
295
373
  rows: 4,
@@ -300,10 +378,12 @@ TextArea.defaultProps = {
300
378
  showMore: false,
301
379
  showMoreText: '',
302
380
  showLessText: '',
303
- state: '',
381
+ type: '',
304
382
  padding: 'medium',
305
383
  instructionsTextArea: false,
306
- isExpanded: function isExpanded() {}
384
+ descriptionToolTip: '',
385
+ isExpanded: function isExpanded() {},
386
+ onChange: function onChange() {}
307
387
  };
308
388
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
309
389
  value: defaultTheme.PropTypes.string,
@@ -333,8 +413,11 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
333
413
  onBlur: defaultTheme.PropTypes.func,
334
414
  noBorder: defaultTheme.PropTypes.bool,
335
415
  isExpanded: defaultTheme.PropTypes.func,
336
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
337
- instructionsTextArea: defaultTheme.PropTypes.bool
416
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
417
+ instructionsTextArea: defaultTheme.PropTypes.bool,
418
+ loadingIcon: defaultTheme.PropTypes.element,
419
+ successIcon: defaultTheme.PropTypes.element,
420
+ descriptionToolTip: defaultTheme.PropTypes.string
338
421
  } : {};
339
422
 
340
423
  exports.TextArea = TextArea;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-c137e17f.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
@@ -1,10 +1,10 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-c137e17f.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  var TippyTooltip = require('@tippyjs/react');
7
- require('./shift-away-subtle-a86a6cd2.js');
7
+ require('./shift-away-subtle-0bed9a3c.js');
8
8
 
9
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
10
 
@@ -31,7 +31,7 @@ var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
31
31
  children = _ref.children,
32
32
  props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "visible", "children"]);
33
33
 
34
- return React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
34
+ return React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
35
35
  ref: ref,
36
36
  content: content,
37
37
  interactive: interactive,
@@ -40,7 +40,7 @@ var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
40
40
  trigger: trigger,
41
41
  visible: visible,
42
42
  animation: 'shift-away-subtle'
43
- }, props), children);
43
+ }, props), children));
44
44
  });
45
45
  Tooltip.defaultProps = {
46
46
  content: 'Tooltip',
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-c137e17f.js');
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var Alert = require('../../Alert-96814023.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Alert = require('../../Alert-13b75102.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('lodash');
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var Badge = require('../../Badge-fa94dca8.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Badge = require('../../Badge-aec841c8.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
 
@@ -1,13 +1,14 @@
1
1
  'use strict';
2
2
 
3
- var Popover = require('../../Popover-155cbac8.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Popover = require('../../Popover-569cd272.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
7
7
  require('react');
8
8
  require('polished');
9
9
  require('@tippyjs/react');
10
- require('../../shift-away-subtle-a86a6cd2.js');
10
+ require('../../shift-away-subtle-0bed9a3c.js');
11
+ require('popper-max-size-modifier');
11
12
 
12
13
 
13
14
 
package/data/Tab/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
- var Tab = require('../../Tab-8fec1dba.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Tab = require('../../Tab-f499ecbc.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
 
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var Tabs = require('../../Tabs-96e366bf.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Tabs = require('../../Tabs-4d7742bc.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
7
7
  require('react');
8
- require('../../Tab-8fec1dba.js');
8
+ require('../../Tab-f499ecbc.js');
9
9
 
10
10
 
11
11