@ntbjs/react-components 1.2.0-rc.3 → 1.2.0-rc.30

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-6899ec54.js → AssetGallery-8810f9ce.js} +98 -84
  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-c38d56a0.js} +3 -3
  7. package/{Checkbox-dd2cf216.js → Checkbox-68dc38a8.js} +13 -8
  8. package/{CompactAutocompleteSelect-d4147107.js → CompactAutocompleteSelect-c48e47a3.js} +112 -88
  9. package/{CompactStarRating-ca1943af.js → CompactStarRating-5f0bb3da.js} +102 -66
  10. package/{CompactTextInput-c5e38aae.js → CompactTextInput-fe403283.js} +70 -58
  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-ace6dce9.js} +24 -14
  15. package/MultiLevelCheckboxSelect-4d9d84cd.js +697 -0
  16. package/{MultiSelect-87614192.js → MultiSelect-4b8d3d0d.js} +1 -1
  17. package/{Popover-155cbac8.js → Popover-e4ecb887.js} +31 -5
  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-24d944d3.js} +188 -107
  24. package/{TextInput-e6035fb0.js → TextInput-0d109708.js} +1 -1
  25. package/{Tooltip-a175e9f5.js → Tooltip-6b6f0b0a.js} +2 -2
  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-e4ecb887.js');
10
+ require('./Tab-f499ecbc.js');
11
+ require('./Tabs-4d7742bc.js');
12
+ var Tooltip = require('./Tooltip-6b6f0b0a.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"])), 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,62 @@ 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');
104
144
  });
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) {
145
+ 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
146
  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
147
  }, function (props) {
108
- return !props.inputIsEmpty && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
148
+ return !props.inputIsEmpty && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
109
149
  }, function (props) {
110
- return props.hasPlaceholder && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
150
+ return props.hasPlaceholder && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
111
151
  }, function (props) {
112
- return props.hasIcon && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
152
+ return props.hasIcon && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
113
153
  });
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) {
154
+ 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"])));
155
+ 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
156
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
117
157
  });
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 "])));
158
+ 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) {
159
+ return props.readOnly && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
120
160
  }, function (props) {
121
- return props.disabled && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
161
+ return props.disabled && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
122
162
  }, 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'));
163
+ return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
124
164
  });
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) {
165
+ 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
166
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
127
167
  }, 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')));
168
+ 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
169
  }, 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')));
170
+ 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
171
  });
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) {
172
+ 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
173
  return props.fadeIn ? 0 : 1;
134
174
  }, function (props) {
135
175
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
136
176
  }, function (props) {
137
177
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
138
178
  });
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 "])));
179
+ 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) {
180
+ return props.expanded && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
141
181
  }, function (props) {
142
182
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
143
183
  }, function (props) {
144
184
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
145
185
  }, 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')));
186
+ 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
187
  });
148
188
 
149
189
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -162,7 +202,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
162
202
  showLessText = _ref.showLessText,
163
203
  autoComplete = _ref.autoComplete,
164
204
  description = _ref.description,
165
- state = _ref.state,
205
+ type = _ref.type,
166
206
  icon = _ref.icon,
167
207
  rows = _ref.rows,
168
208
  className = _ref.className,
@@ -173,7 +213,12 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
173
213
  noBorder = _ref.noBorder,
174
214
  instructionsTextArea = _ref.instructionsTextArea,
175
215
  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"]);
216
+ loadingIcon = _ref.loadingIcon,
217
+ successIcon = _ref.successIcon,
218
+ padding = _ref.padding,
219
+ descriptionToolTip = _ref.descriptionToolTip,
220
+ displayDescriptionToolTip = _ref.displayDescriptionToolTip,
221
+ 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", "displayDescriptionToolTip"]);
177
222
 
178
223
  var textInputDomNode = React.useRef(null);
179
224
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -207,9 +252,19 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
207
252
  _useState12 = defaultTheme._slicedToArray(_useState11, 1),
208
253
  uniqueId = _useState12[0];
209
254
 
255
+ React.useEffect(function () {
256
+ setExpanded(false);
257
+ isExpanded(false);
258
+ }, [value, defaultValue]);
259
+
210
260
  var handleTextAreaChange = function handleTextAreaChange() {
261
+ setExpanded(true);
262
+ isExpanded(true);
263
+ };
264
+
265
+ var handleTextAreaShowLess = function handleTextAreaShowLess() {
211
266
  setExpanded(!expanded);
212
- isExpanded(expanded);
267
+ isExpanded(!expanded);
213
268
  };
214
269
 
215
270
  var calculateRows = function calculateRows() {
@@ -234,62 +289,81 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
234
289
  React.useEffect(function () {
235
290
  calculateRows();
236
291
  }, [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
- }
292
+ var onKeyDown = React.useCallback(function (event) {
293
+ if (event.key === 'Enter') {
294
+ event.stopPropagation();
295
+ }
296
+ }, []);
297
+
298
+ var input = function input() {
299
+ return React__default['default'].createElement(TextInput, {
300
+ disabled: disabled,
301
+ readOnly: readOnly,
302
+ type: type,
303
+ className: className,
304
+ style: style
305
+ }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
306
+ ref: textInputRef,
307
+ rows: rows,
308
+ expanded: expanded,
309
+ defaultHeight: defaultHeight,
310
+ maxHeight: maxHeight,
311
+ value: value,
312
+ defaultValue: defaultValue,
313
+ name: name,
314
+ placeholder: placeholder || ' ',
315
+ required: required,
316
+ readOnly: readOnly,
317
+ disabled: disabled,
318
+ edit: edit,
319
+ instructionsTextArea: instructionsTextArea,
320
+ showMore: showMore,
321
+ type: type,
322
+ autoComplete: autoComplete,
323
+ hasIcon: Boolean(icon),
324
+ icon: icon,
325
+ id: "text-input-".concat(uniqueId),
326
+ lightBackground: lightBackground,
327
+ padding: padding,
328
+ onChange: function onChange(e) {
329
+ if (e.target.value) {
330
+ setInputIsEmpty(false);
331
+ } else {
332
+ setInputIsEmpty(true);
333
+ }
272
334
 
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));
335
+ _onChange(e);
336
+ },
337
+ onKeyDown: onKeyDown,
338
+ onBlur: onBlur,
339
+ noBorder: noBorder
340
+ }, rest, {
341
+ onClick: showMore ? handleTextAreaChange : undefined
342
+ })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
343
+ disabled: disabled
344
+ }, React__default['default'].createElement(editNote.SvgEditNote, {
345
+ className: padding === 'small' ? 'smallPadingIcon' : undefined
346
+ })), label && React__default['default'].createElement(TextInputLabel, {
347
+ htmlFor: "text-input-".concat(uniqueId),
348
+ hasPlaceholder: Boolean(placeholder),
349
+ hasIcon: Boolean(icon),
350
+ inputIsEmpty: inputIsEmpty
351
+ }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
352
+ type: type
353
+ }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
354
+ onClick: showMore ? handleTextAreaShowLess : undefined,
355
+ expanded: expanded
356
+ }, !expanded ? showMoreText : showLessText));
357
+ };
358
+
359
+ if (hidden) return null;
360
+ return React__default['default'].createElement(React__default['default'].Fragment, null, !descriptionToolTip && input(), descriptionToolTip && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
361
+ content: descriptionToolTip,
362
+ key: "tooltipTextArea1",
363
+ placement: "bottom-end",
364
+ visible: displayDescriptionToolTip,
365
+ zIndex: 999999
366
+ }, input())));
293
367
  });
294
368
  TextArea.defaultProps = {
295
369
  rows: 4,
@@ -300,10 +374,13 @@ TextArea.defaultProps = {
300
374
  showMore: false,
301
375
  showMoreText: '',
302
376
  showLessText: '',
303
- state: '',
377
+ type: '',
304
378
  padding: 'medium',
305
379
  instructionsTextArea: false,
306
- isExpanded: function isExpanded() {}
380
+ descriptionToolTip: '',
381
+ displayDescriptionToolTip: false,
382
+ isExpanded: function isExpanded() {},
383
+ onChange: function onChange() {}
307
384
  };
308
385
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
309
386
  value: defaultTheme.PropTypes.string,
@@ -333,8 +410,12 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
333
410
  onBlur: defaultTheme.PropTypes.func,
334
411
  noBorder: defaultTheme.PropTypes.bool,
335
412
  isExpanded: defaultTheme.PropTypes.func,
336
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
337
- instructionsTextArea: defaultTheme.PropTypes.bool
413
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
414
+ instructionsTextArea: defaultTheme.PropTypes.bool,
415
+ loadingIcon: defaultTheme.PropTypes.element,
416
+ successIcon: defaultTheme.PropTypes.element,
417
+ descriptionToolTip: defaultTheme.PropTypes.string,
418
+ displayDescriptionToolTip: defaultTheme.PropTypes.bool
338
419
  } : {};
339
420
 
340
421
  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
 
@@ -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-e4ecb887.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
 
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
- var Tooltip = require('../../Tooltip-a175e9f5.js');
4
- require('../../defaultTheme-c137e17f.js');
3
+ var Tooltip = require('../../Tooltip-6b6f0b0a.js');
4
+ require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('@tippyjs/react');
8
- require('../../shift-away-subtle-a86a6cd2.js');
8
+ require('../../shift-away-subtle-0bed9a3c.js');
9
9
 
10
10
 
11
11