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

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-77c1c747.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-b1311846.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-09b0d7e4.js} +186 -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;
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 &&: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,59 @@ 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', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
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', '#FFF36C');
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 === 'error' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
86
+ return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
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.type === 'warning-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
70
90
  }, 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'));
91
+ return props.type === 'error-border' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
92
+ }, function (props) {
93
+ return props.lightBackground && styled.css(_templateObject26 || (_templateObject26 = 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
94
  }, function (props) {
73
95
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
74
96
  }, function (props) {
75
- return props.edit && !props.state === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
97
+ return props.edit && !props.type === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
76
98
  }, function (props) {
77
- return props.edit && props.state === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
99
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
78
100
  }, 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 "])));
101
+ return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
102
+ }, function (props) {
103
+ return props.hasIcon && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
82
104
  }, function (props) {
83
- return props.state === 'warning' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('orange-500'));
105
+ return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
84
106
  }, function (props) {
85
- return props.state === 'error' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), props.theme.getColor('red-500'));
107
+ return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
86
108
  }, function (props) {
87
- return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
109
+ return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
110
+ return props.theme.themeProp('border-color', '#806403', '#F4E21E');
111
+ });
112
+ }, function (props) {
113
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
114
+ }, function (props) {
115
+ return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
116
+ }, function (props) {
117
+ 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';
118
+ }, InputIconContainer, function (props) {
119
+ return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
88
120
  }, function (props) {
89
121
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
90
122
  }, function (props) {
@@ -92,58 +124,64 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
92
124
  }, function (props) {
93
125
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
94
126
  }, function (props) {
95
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
127
+ return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
96
128
  }, 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'));
129
+ return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
130
+ return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
131
+ }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
98
132
  }, 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'));
133
+ return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
134
+ return props.theme.themeProp('border-color', '#D83018', '#D83018');
135
+ }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
100
136
  }, function (props) {
101
137
  return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
102
138
  }, function (props) {
103
- return props.edit && props.state === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
139
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
140
+ }, function (props) {
141
+ return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
104
142
  });
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) {
143
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = 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
144
  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
145
  }, function (props) {
108
- return !props.inputIsEmpty && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
146
+ return !props.inputIsEmpty && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
109
147
  }, function (props) {
110
- return props.hasPlaceholder && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
148
+ return props.hasPlaceholder && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
111
149
  }, function (props) {
112
- return props.hasIcon && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
150
+ return props.hasIcon && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
113
151
  });
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) {
152
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = 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"])));
153
+ var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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
154
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
117
155
  });
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 "])));
156
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
157
+ return props.readOnly && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
120
158
  }, function (props) {
121
- return props.disabled && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
159
+ return props.disabled && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
122
160
  }, 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'));
161
+ return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
124
162
  });
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) {
163
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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
164
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
127
165
  }, 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')));
166
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
129
167
  }, 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')));
168
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
131
169
  });
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) {
170
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = 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
171
  return props.fadeIn ? 0 : 1;
134
172
  }, function (props) {
135
173
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
136
174
  }, function (props) {
137
175
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
138
176
  });
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 "])));
177
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = 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) {
178
+ return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
141
179
  }, function (props) {
142
180
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
143
181
  }, function (props) {
144
182
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
145
183
  }, 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')));
184
+ return props.type === 'error' && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
147
185
  });
148
186
 
149
187
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -162,7 +200,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
162
200
  showLessText = _ref.showLessText,
163
201
  autoComplete = _ref.autoComplete,
164
202
  description = _ref.description,
165
- state = _ref.state,
203
+ type = _ref.type,
166
204
  icon = _ref.icon,
167
205
  rows = _ref.rows,
168
206
  className = _ref.className,
@@ -173,7 +211,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
173
211
  noBorder = _ref.noBorder,
174
212
  instructionsTextArea = _ref.instructionsTextArea,
175
213
  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"]);
214
+ loadingIcon = _ref.loadingIcon,
215
+ successIcon = _ref.successIcon,
216
+ padding = _ref.padding,
217
+ descriptionToolTip = _ref.descriptionToolTip,
218
+ 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
219
 
178
220
  var textInputDomNode = React.useRef(null);
179
221
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -207,9 +249,22 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
207
249
  _useState12 = defaultTheme._slicedToArray(_useState11, 1),
208
250
  uniqueId = _useState12[0];
209
251
 
252
+ var memoizedDescriptionToolTip = React.useMemo(function () {
253
+ return descriptionToolTip;
254
+ }, [descriptionToolTip]);
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, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
361
+ content: memoizedDescriptionToolTip,
362
+ key: "tooltipTextArea1",
363
+ placement: "bottom-end",
364
+ trigger: 'mouseenter',
365
+ zIndex: 999999
366
+ }, input())));
293
367
  });
294
368
  TextArea.defaultProps = {
295
369
  rows: 4,
@@ -300,10 +374,12 @@ 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
+ isExpanded: function isExpanded() {},
382
+ onChange: function onChange() {}
307
383
  };
308
384
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
309
385
  value: defaultTheme.PropTypes.string,
@@ -333,8 +409,11 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
333
409
  onBlur: defaultTheme.PropTypes.func,
334
410
  noBorder: defaultTheme.PropTypes.bool,
335
411
  isExpanded: defaultTheme.PropTypes.func,
336
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
337
- instructionsTextArea: defaultTheme.PropTypes.bool
412
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
413
+ instructionsTextArea: defaultTheme.PropTypes.bool,
414
+ loadingIcon: defaultTheme.PropTypes.element,
415
+ successIcon: defaultTheme.PropTypes.element,
416
+ descriptionToolTip: defaultTheme.PropTypes.string
338
417
  } : {};
339
418
 
340
419
  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
 
@@ -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-66daf6e3.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