@ntbjs/react-components 1.2.0-rc.5 → 1.2.0-rc.51

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-163f8e98.js → Alert-13b75102.js} +1 -1
  3. package/{AssetGallery-c6953833.js → AssetGallery-01a1cece.js} +96 -43
  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-ca975da6.js → CompactTextInput-aafb1a17.js} +88 -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-b121b75d.js → Instructions-b9f2e184.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-38615509.js → TextArea-229e7abb.js} +200 -111
  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 +32 -29
  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 +34 -31
  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);
@@ -203,13 +245,32 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
203
245
  defaultHeight = _useState10[0],
204
246
  setDefaultHeight = _useState10[1];
205
247
 
206
- var _useState11 = React.useState(nanoid.nanoid()),
207
- _useState12 = defaultTheme._slicedToArray(_useState11, 1),
208
- uniqueId = _useState12[0];
248
+ var _useState11 = React.useState(false),
249
+ _useState12 = defaultTheme._slicedToArray(_useState11, 2),
250
+ autoFocus = _useState12[0],
251
+ setAutoFocus = _useState12[1];
252
+
253
+ var _useState13 = React.useState(nanoid.nanoid()),
254
+ _useState14 = defaultTheme._slicedToArray(_useState13, 1),
255
+ uniqueId = _useState14[0];
256
+
257
+ var memoizedDescriptionToolTip = React.useMemo(function () {
258
+ return descriptionToolTip;
259
+ }, [descriptionToolTip]);
260
+ React.useEffect(function () {
261
+ setExpanded(false);
262
+ isExpanded(false);
263
+ setAutoFocus(false);
264
+ }, [value, defaultValue]);
209
265
 
210
266
  var handleTextAreaChange = function handleTextAreaChange() {
267
+ setExpanded(true);
268
+ isExpanded(true);
269
+ };
270
+
271
+ var handleTextAreaShowLess = function handleTextAreaShowLess() {
211
272
  setExpanded(!expanded);
212
- isExpanded(expanded);
273
+ isExpanded(!expanded);
213
274
  };
214
275
 
215
276
  var calculateRows = function calculateRows() {
@@ -239,63 +300,86 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
239
300
  event.stopPropagation();
240
301
  }
241
302
  }, []);
242
- if (hidden) return null;
243
- return React__default['default'].createElement(TextInput, {
244
- disabled: disabled,
245
- readOnly: readOnly,
246
- state: state,
247
- className: className,
248
- style: style
249
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
250
- ref: textInputRef,
251
- rows: rows,
252
- expanded: expanded,
253
- defaultHeight: defaultHeight,
254
- maxHeight: maxHeight,
255
- value: value,
256
- defaultValue: defaultValue,
257
- name: name,
258
- placeholder: placeholder || ' ',
259
- required: required,
260
- readOnly: readOnly,
261
- disabled: disabled,
262
- edit: edit,
263
- instructionsTextArea: instructionsTextArea,
264
- showMore: showMore,
265
- state: state,
266
- autoComplete: autoComplete,
267
- hasIcon: Boolean(icon),
268
- icon: icon,
269
- id: "text-input-".concat(uniqueId),
270
- lightBackground: lightBackground,
271
- onChange: function onChange(e) {
272
- if (e.target.value) {
273
- setInputIsEmpty(false);
274
- } else {
275
- setInputIsEmpty(true);
276
- }
277
303
 
278
- _onChange(e);
279
- },
280
- onKeyDown: onKeyDown,
281
- onBlur: onBlur,
282
- noBorder: noBorder
283
- }, rest)), (state === 'loading' || state === 'success') && React__default['default'].createElement(SuccessContainer, null, state === 'loading' && React__default['default'].createElement(check._default, {
284
- color: '#b0b6b9',
285
- size: 12
286
- }), state === 'success' && React__default['default'].createElement(check.SvgCheck, null)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
287
- disabled: disabled
288
- }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
289
- htmlFor: "text-input-".concat(uniqueId),
290
- hasPlaceholder: Boolean(placeholder),
291
- hasIcon: Boolean(icon),
292
- inputIsEmpty: inputIsEmpty
293
- }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
294
- state: state
295
- }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
296
- onClick: handleTextAreaChange,
297
- expanded: expanded
298
- }, !expanded ? showMoreText : showLessText));
304
+ var input = function input() {
305
+ return React__default['default'].createElement(TextInput, {
306
+ disabled: disabled,
307
+ readOnly: readOnly,
308
+ type: type,
309
+ className: className,
310
+ style: style
311
+ }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
312
+ autoFocus: autoFocus,
313
+ ref: textInputRef,
314
+ rows: rows,
315
+ expanded: expanded,
316
+ defaultHeight: defaultHeight,
317
+ maxHeight: maxHeight,
318
+ value: value,
319
+ defaultValue: defaultValue,
320
+ name: name,
321
+ placeholder: placeholder || ' ',
322
+ required: required,
323
+ readOnly: readOnly,
324
+ disabled: disabled,
325
+ edit: edit,
326
+ instructionsTextArea: instructionsTextArea,
327
+ showMore: showMore,
328
+ type: type,
329
+ autoComplete: autoComplete,
330
+ hasIcon: Boolean(icon),
331
+ icon: icon,
332
+ id: "text-input-".concat(uniqueId),
333
+ key: uniqueId,
334
+ lightBackground: lightBackground,
335
+ padding: padding,
336
+ onChange: function onChange(e) {
337
+ if (e.target.value) {
338
+ setInputIsEmpty(false);
339
+
340
+ if (!autoFocus) {
341
+ setAutoFocus(true);
342
+ }
343
+ } else {
344
+ setInputIsEmpty(true);
345
+
346
+ if (!autoFocus) {
347
+ setAutoFocus(true);
348
+ }
349
+ }
350
+
351
+ _onChange(e);
352
+ },
353
+ onKeyDown: onKeyDown,
354
+ onBlur: onBlur,
355
+ noBorder: noBorder
356
+ }, rest, {
357
+ onClick: showMore ? handleTextAreaChange : undefined
358
+ })), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
359
+ disabled: disabled
360
+ }, React__default['default'].createElement(editNote.SvgEditNote, {
361
+ className: padding === 'small' ? 'smallPadingIcon' : undefined
362
+ })), label && React__default['default'].createElement(TextInputLabel, {
363
+ htmlFor: "text-input-".concat(uniqueId),
364
+ hasPlaceholder: Boolean(placeholder),
365
+ hasIcon: Boolean(icon),
366
+ inputIsEmpty: inputIsEmpty
367
+ }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
368
+ type: type
369
+ }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
370
+ onClick: showMore ? handleTextAreaShowLess : undefined,
371
+ expanded: expanded
372
+ }, !expanded ? showMoreText : showLessText));
373
+ };
374
+
375
+ if (hidden) return null;
376
+ 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, {
377
+ content: memoizedDescriptionToolTip,
378
+ key: "tooltipTextArea1",
379
+ placement: "bottom-end",
380
+ trigger: 'mouseenter',
381
+ zIndex: 999999
382
+ }, input())));
299
383
  });
300
384
  TextArea.defaultProps = {
301
385
  rows: 4,
@@ -306,10 +390,12 @@ TextArea.defaultProps = {
306
390
  showMore: false,
307
391
  showMoreText: '',
308
392
  showLessText: '',
309
- state: '',
393
+ type: '',
310
394
  padding: 'medium',
311
395
  instructionsTextArea: false,
312
- isExpanded: function isExpanded() {}
396
+ descriptionToolTip: '',
397
+ isExpanded: function isExpanded() {},
398
+ onChange: function onChange() {}
313
399
  };
314
400
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
315
401
  value: defaultTheme.PropTypes.string,
@@ -339,8 +425,11 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
339
425
  onBlur: defaultTheme.PropTypes.func,
340
426
  noBorder: defaultTheme.PropTypes.bool,
341
427
  isExpanded: defaultTheme.PropTypes.func,
342
- state: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'loading', 'success']),
343
- instructionsTextArea: defaultTheme.PropTypes.bool
428
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
429
+ instructionsTextArea: defaultTheme.PropTypes.bool,
430
+ loadingIcon: defaultTheme.PropTypes.element,
431
+ successIcon: defaultTheme.PropTypes.element,
432
+ descriptionToolTip: defaultTheme.PropTypes.string
344
433
  } : {};
345
434
 
346
435
  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-163f8e98.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