@ntbjs/react-components 1.3.0-rc.7 → 1.3.0-rc.70

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 (76) hide show
  1. package/.eslintrc +7 -8
  2. package/{ActionButton-46735b89.js → ActionButton-5bc79370.js} +19 -16
  3. package/{Alert-13b75102.js → Alert-edd9f6a7.js} +20 -24
  4. package/{AssetGallery-de5aaeb9.js → AssetAction-29b9a203.js} +611 -654
  5. package/AssetPreviewTopBar-6eaa7df8.js +104 -0
  6. package/{Badge-757b0a39.js → Badge-00b2f311.js} +28 -49
  7. package/{Button-49f82b31.js → Button-82e91acb.js} +97 -88
  8. package/{Checkbox-68dc38a8.js → Checkbox-c441fdba.js} +32 -37
  9. package/{CompactAutocompleteSelect-26a9cd1a.js → CompactAutocompleteSelect-a8ccfcad.js} +95 -127
  10. package/{CompactStarRating-4ad1ccd5.js → CompactStarRating-3fa89ec7.js} +85 -98
  11. package/{CompactTextInput-c8bee455.js → CompactTextInput-67ce443e.js} +117 -111
  12. package/{ContextMenu-4ec3d9f3.js → ContextMenu-9645746f.js} +6 -6
  13. package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-ae252503.js} +22 -26
  14. package/InfoCard-005063b4.js +86 -0
  15. package/{InputGroup-49fbc423.js → InputGroup-3598e37c.js} +6 -6
  16. package/{Instructions-6009d3e3.js → Instructions-46e49829.js} +99 -83
  17. package/{MultiLevelCheckboxSelect-be76fb10.js → MultiLevelCheckboxSelect-375c4785.js} +103 -165
  18. package/{MultiSelect-efd60232.js → MultiSelect-0bdad346.js} +78 -108
  19. package/{Popover-569cd272.js → Popover-f00121a3.js} +41 -40
  20. package/ProgressBar-7d31fd95.js +154 -0
  21. package/{Radio-32d0513a.js → Radio-758fd8f3.js} +21 -22
  22. package/{SectionSeparator-259a22ed.js → SectionSeparator-43e1647d.js} +6 -6
  23. package/{Switch-4a41585f.js → Switch-26547abb.js} +25 -27
  24. package/{Tab-f499ecbc.js → Tab-d3ee0a3b.js} +7 -7
  25. package/{Tabs-bfe19f77.js → Tabs-243c5e0b.js} +26 -46
  26. package/TextArea-b16e166b.js +364 -0
  27. package/{TextInput-0d109708.js → TextInput-70cb3df7.js} +55 -62
  28. package/{Tooltip-66daf6e3.js → Tooltip-7dc4676b.js} +13 -13
  29. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-f3c44ef8.js} +20 -30
  30. package/arrow-forward-d7c77ae3.js +37 -0
  31. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  32. package/data/Alert/index.js +2 -2
  33. package/data/Badge/index.js +2 -2
  34. package/data/Popover/index.js +3 -3
  35. package/data/Tab/index.js +2 -2
  36. package/data/Tabs/index.js +3 -3
  37. package/data/Tooltip/index.js +3 -3
  38. package/data/index.js +9 -9
  39. package/{defaultTheme-ea44e34a.js → defaultTheme-24ea5c47.js} +213 -261
  40. package/edit-note-cefe2215.js +37 -0
  41. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  42. package/icons/arrow-forward.svg +3 -0
  43. package/icons/index.js +2 -0
  44. package/inputs/ActionButton/index.js +2 -2
  45. package/inputs/Button/index.js +6 -6
  46. package/inputs/Checkbox/index.js +2 -2
  47. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  48. package/inputs/CompactStarRating/index.js +10 -10
  49. package/inputs/CompactTextInput/index.js +11 -11
  50. package/inputs/MultiSelect/index.js +4 -4
  51. package/inputs/Radio/index.js +2 -2
  52. package/inputs/Switch/index.js +2 -2
  53. package/inputs/TextArea/index.js +11 -11
  54. package/inputs/TextInput/index.js +3 -3
  55. package/inputs/index.js +28 -28
  56. package/layout/InputGroup/index.js +2 -2
  57. package/layout/SectionSeparator/index.js +2 -2
  58. package/layout/index.js +3 -3
  59. package/package.json +5 -3
  60. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-09b1be95.js} +1421 -1287
  61. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-dce50395.js} +1 -1
  62. package/ssr/index.js +1 -3
  63. package/styles/config.scss +3 -0
  64. package/widgets/AssetGallery/index.js +37 -32
  65. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  66. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  67. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
  68. package/widgets/ContextMenu/index.js +2 -2
  69. package/widgets/InfoCard/index.js +11 -0
  70. package/widgets/Instructions/index.js +16 -17
  71. package/widgets/ProgressBar/index.js +11 -0
  72. package/widgets/index.js +42 -35
  73. package/AssetPreviewTopBar-912c3469.js +0 -99
  74. package/TextArea-41089240.js +0 -375
  75. package/edit-note-c47d292e.js +0 -41
  76. package/warning-circle-24522402.js +0 -41
@@ -1,375 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
- var React = require('react');
5
- var lodash = require('lodash');
6
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
7
- var nanoid = require('nanoid');
8
- require('./Alert-13b75102.js');
9
- require('./Badge-757b0a39.js');
10
- require('./Popover-569cd272.js');
11
- require('./Tab-f499ecbc.js');
12
- require('./Tabs-bfe19f77.js');
13
- var Tooltip = require('./Tooltip-66daf6e3.js');
14
- require('./VerificationStatusIcon-d5bfb67a.js');
15
- var editNote = require('./edit-note-c47d292e.js');
16
- var styled = require('styled-components');
17
-
18
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
19
-
20
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
22
-
23
- 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;
24
- var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
25
- var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
26
- 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"])));
27
- var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
28
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
29
- }, function (props) {
30
- return props.theme.themeProp('opacity', 0.6, 0.5);
31
- });
32
- var TextAreaContainter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
33
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ", "\n"])), function (props) {
34
- return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
35
- }, function (props) {
36
- return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
37
- });
38
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n\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) {
39
- return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
40
- }, function (props) {
41
- return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
42
- });
43
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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 transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n 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\n \n }\n"])), function (props) {
44
- return props.borderRadius && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
45
- }, function (props) {
46
- return props.theme.themeProp('color', 'white', 'black');
47
- }, function (props) {
48
- return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
49
- }, function (props) {
50
- return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
51
- }, function (props) {
52
- return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
53
- }, function (props) {
54
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
55
- }, function (props) {
56
- return (props.state === 'warning' || props.state === 'error') && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
57
- }, function (props) {
58
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
59
- }, function (props) {
60
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
61
- }, function (props) {
62
- return props.noBorder && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
63
- return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
64
- });
65
- }, function (props) {
66
- return props.type === 'warning' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
67
- }, function (props) {
68
- return props.type === 'error' && styled.css(_templateObject17 || (_templateObject17 = 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'));
69
- }, function (props) {
70
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
71
- return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
72
- });
73
- }, function (props) {
74
- return props.noBorder && props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
75
- return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
76
- });
77
- }, function (props) {
78
- return props.type === 'warning-border' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
79
- }, function (props) {
80
- return props.type === 'error-border' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
81
- }, function (props) {
82
- 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'));
83
- }, function (props) {
84
- return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
85
- }, function (props) {
86
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
87
- }, function (props) {
88
- return props.padding === 'small' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
89
- }, function (props) {
90
- return props.padding === 'medium' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
91
- }, function (props) {
92
- return props.padding === 'large' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
93
- }, function (props) {
94
- return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
95
- }, function (props) {
96
- return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
97
- }, function (props) {
98
- return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
99
- }, function (props) {
100
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
101
- }, function (props) {
102
- return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
103
- }, function (props) {
104
- return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
105
- }, InputIconContainer, function (props) {
106
- return props.type === 'success' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
107
- }, function (props) {
108
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
109
- }, function (props) {
110
- return props.theme.themeProp('opacity', 0.6, 0.5, 1);
111
- }, function (props) {
112
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
113
- }, function (props) {
114
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
115
- }, function (props) {
116
- return props.type === 'warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
117
- return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
118
- }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
119
- }, function (props) {
120
- return props.type === 'error' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
121
- return props.theme.themeProp('border-color', '#D83018', '#D83018');
122
- }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
123
- }, function (props) {
124
- return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
125
- }, function (props) {
126
- return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
127
- }, function (props) {
128
- return props.noBorder && props.edit && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
129
- return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
130
- });
131
- }, function (props) {
132
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
133
- });
134
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = 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\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
135
- return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
136
- }, placeholderBaseStyle, function (props) {
137
- 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%)"));
138
- }, function (props) {
139
- return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
140
- }, function (props) {
141
- return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
142
- }, function (props) {
143
- return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
144
- });
145
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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"])));
146
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 12px;\n width: 15px;\n }\n"])), function (props) {
147
- return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
148
- });
149
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\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) {
150
- return props.$fieldLabel ? '66.66%' : '100%';
151
- }, function (props) {
152
- return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
153
- }, function (props) {
154
- return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
155
- }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
156
- return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
157
- });
158
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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) {
159
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
160
- }, function (props) {
161
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
162
- }, function (props) {
163
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
164
- });
165
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = 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) {
166
- return props.fadeIn ? 0 : 1;
167
- }, function (props) {
168
- return props.fadeIn ? fadeOutCheck : fadeInCheck;
169
- }, function (props) {
170
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
171
- });
172
- var SuccessContainerLabel = 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 margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 13px;\n }\n"])), function (props) {
173
- return props.fadeIn ? 0 : 1;
174
- }, function (props) {
175
- return props.fadeIn ? fadeOutCheck : fadeInCheck;
176
- }, function (props) {
177
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
178
- });
179
- 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) {
180
- return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
181
- }, function (props) {
182
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
183
- }, function (props) {
184
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
185
- }, function (props) {
186
- 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')));
187
- });
188
-
189
- var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
190
- var value = _ref.value,
191
- defaultValue = _ref.defaultValue,
192
- name = _ref.name,
193
- label = _ref.label,
194
- placeholder = _ref.placeholder,
195
- required = _ref.required,
196
- disabled = _ref.disabled,
197
- hidden = _ref.hidden,
198
- readOnly = _ref.readOnly,
199
- edit = _ref.edit,
200
- autoComplete = _ref.autoComplete,
201
- description = _ref.description,
202
- type = _ref.type,
203
- icon = _ref.icon,
204
- rows = _ref.rows,
205
- className = _ref.className,
206
- style = _ref.style,
207
- _onChange = _ref.onChange,
208
- onBlur = _ref.onBlur,
209
- lightBackground = _ref.lightBackground,
210
- noBorder = _ref.noBorder,
211
- instructionsTextArea = _ref.instructionsTextArea,
212
- loadingIcon = _ref.loadingIcon,
213
- successIcon = _ref.successIcon,
214
- padding = _ref.padding,
215
- descriptionToolTip = _ref.descriptionToolTip,
216
- borderRadius = _ref.borderRadius,
217
- fieldLabel = _ref.fieldLabel,
218
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"]);
219
-
220
- var textInputDomNode = React.useRef(null);
221
- var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
222
-
223
- var _useState = React.useState(!(value || defaultValue)),
224
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
225
- inputIsEmpty = _useState2[0],
226
- setInputIsEmpty = _useState2[1];
227
-
228
- var _useState3 = React.useState(false),
229
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
230
- autoFocus = _useState4[0],
231
- setAutoFocus = _useState4[1];
232
-
233
- var _useState5 = React.useState(nanoid.nanoid()),
234
- _useState6 = defaultTheme._slicedToArray(_useState5, 1),
235
- uniqueId = _useState6[0];
236
-
237
- var memoizedDescriptionToolTip = React.useMemo(function () {
238
- return descriptionToolTip;
239
- }, [descriptionToolTip]);
240
- React.useEffect(function () {
241
- setAutoFocus(false);
242
- }, [value, defaultValue]);
243
- var onKeyDown = React.useCallback(function (event) {
244
- if (event.key === 'Enter') {
245
- event.stopPropagation();
246
- }
247
- }, []);
248
-
249
- var input = function input() {
250
- return React__default['default'].createElement(TextAreaContainter, null, fieldLabel && React__default['default'].createElement(Label, {
251
- htmlFor: uniqueId,
252
- disabled: disabled
253
- }, fieldLabel, React__default['default'].createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default['default'].createElement(TextInput, {
254
- $fieldLabel: !lodash.isEmpty(fieldLabel),
255
- disabled: disabled,
256
- readOnly: readOnly,
257
- type: type,
258
- className: className,
259
- style: style
260
- }, React__default['default'].createElement(TextInputFieldIconAlert, {
261
- type: type
262
- }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
263
- autoFocus: autoFocus,
264
- borderRadius: borderRadius,
265
- ref: textInputRef,
266
- rows: rows,
267
- value: value,
268
- defaultValue: defaultValue,
269
- name: name,
270
- placeholder: placeholder || ' ',
271
- required: required,
272
- readOnly: readOnly,
273
- disabled: disabled,
274
- edit: edit,
275
- instructionsTextArea: instructionsTextArea,
276
- type: type,
277
- autoComplete: autoComplete,
278
- hasIcon: Boolean(icon),
279
- icon: icon,
280
- id: "text-input-".concat(uniqueId),
281
- key: uniqueId,
282
- lightBackground: lightBackground,
283
- padding: padding,
284
- onChange: function onChange(e) {
285
- if (e.target.value) {
286
- setInputIsEmpty(false);
287
-
288
- if (!autoFocus) {
289
- setAutoFocus(true);
290
- }
291
- } else {
292
- setInputIsEmpty(true);
293
-
294
- if (!autoFocus) {
295
- setAutoFocus(true);
296
- }
297
- }
298
-
299
- _onChange(e);
300
- },
301
- onKeyDown: onKeyDown,
302
- onBlur: onBlur,
303
- noBorder: noBorder
304
- }, rest)), !fieldLabel && (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
305
- disabled: disabled
306
- }, React__default['default'].createElement(editNote.SvgEditNote, {
307
- className: padding === 'small' ? 'smallPadingIcon' : undefined
308
- })), label && React__default['default'].createElement(TextInputLabel, {
309
- htmlFor: "text-input-".concat(uniqueId),
310
- hasPlaceholder: Boolean(placeholder),
311
- hasIcon: Boolean(icon),
312
- inputIsEmpty: inputIsEmpty
313
- }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
314
- type: type
315
- }, description)));
316
- };
317
-
318
- if (hidden) return null;
319
- 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, {
320
- content: memoizedDescriptionToolTip,
321
- key: "tooltipTextArea1",
322
- placement: "bottom-end",
323
- trigger: 'mouseenter',
324
- zIndex: 999999
325
- }, input())));
326
- });
327
- TextArea.defaultProps = {
328
- rows: 4,
329
- noBorder: false,
330
- readOnly: false,
331
- edit: false,
332
- hidden: false,
333
- type: '',
334
- padding: 'medium',
335
- instructionsTextArea: false,
336
- descriptionToolTip: '',
337
- isExpanded: function isExpanded() {},
338
- onChange: function onChange() {},
339
- borderRadius: 0
340
- };
341
- TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
342
- value: defaultTheme.PropTypes.string,
343
- defaultValue: defaultTheme.PropTypes.string,
344
- name: defaultTheme.PropTypes.string,
345
- label: defaultTheme.PropTypes.string,
346
- fieldLabel: defaultTheme.PropTypes.string,
347
- placeholder: defaultTheme.PropTypes.string,
348
- required: defaultTheme.PropTypes.bool,
349
- disabled: defaultTheme.PropTypes.bool,
350
- hidden: defaultTheme.PropTypes.bool,
351
- readOnly: defaultTheme.PropTypes.bool,
352
- edit: defaultTheme.PropTypes.bool,
353
- autoComplete: defaultTheme.PropTypes.string,
354
- description: defaultTheme.PropTypes.string,
355
- error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
356
- warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
357
- icon: defaultTheme.PropTypes.element,
358
- rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
359
- className: defaultTheme.PropTypes.string,
360
- style: defaultTheme.PropTypes.object,
361
- padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
362
- lightBackground: defaultTheme.PropTypes.bool,
363
- onChange: defaultTheme.PropTypes.func,
364
- onBlur: defaultTheme.PropTypes.func,
365
- noBorder: defaultTheme.PropTypes.bool,
366
- isExpanded: defaultTheme.PropTypes.func,
367
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
368
- instructionsTextArea: defaultTheme.PropTypes.bool,
369
- loadingIcon: defaultTheme.PropTypes.element,
370
- successIcon: defaultTheme.PropTypes.element,
371
- descriptionToolTip: defaultTheme.PropTypes.string,
372
- borderRadius: defaultTheme.PropTypes.number
373
- } : {};
374
-
375
- exports.TextArea = TextArea;
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- function _interopNamespace(e) {
6
- if (e && e.__esModule) return e;
7
- var n = Object.create(null);
8
- if (e) {
9
- Object.keys(e).forEach(function (k) {
10
- if (k !== 'default') {
11
- var d = Object.getOwnPropertyDescriptor(e, k);
12
- Object.defineProperty(n, k, d.get ? d : {
13
- enumerable: true,
14
- get: function () {
15
- return e[k];
16
- }
17
- });
18
- }
19
- });
20
- }
21
- n['default'] = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
-
27
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
28
-
29
- var _ref = /*#__PURE__*/React__namespace.createElement("path", {
30
- fill: "currentColor",
31
- d: "M7 12v-1.77l4.42-4.42 1.77 1.77L8.77 12H7zM0 7.75v-1.5h6v1.5H0zM13.77 7L12 5.23l.67-.67c.15-.15.33-.23.53-.23s.38.08.53.23l.71.71c.15.15.23.33.23.53s-.08.38-.23.53l-.67.67zM0 4.63v-1.5h9v1.5H0zM0 1.5V0h9v1.5H0z"
32
- });
33
-
34
- function SvgEditNote(props) {
35
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
36
- xmlns: "http://www.w3.org/2000/svg",
37
- viewBox: "0 0 14.67 12"
38
- }, props), _ref);
39
- }
40
-
41
- exports.SvgEditNote = SvgEditNote;
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- function _interopNamespace(e) {
6
- if (e && e.__esModule) return e;
7
- var n = Object.create(null);
8
- if (e) {
9
- Object.keys(e).forEach(function (k) {
10
- if (k !== 'default') {
11
- var d = Object.getOwnPropertyDescriptor(e, k);
12
- Object.defineProperty(n, k, d.get ? d : {
13
- enumerable: true,
14
- get: function () {
15
- return e[k];
16
- }
17
- });
18
- }
19
- });
20
- }
21
- n['default'] = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
-
27
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
28
-
29
- var _ref = /*#__PURE__*/React__namespace.createElement("path", {
30
- fill: "currentColor",
31
- d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
32
- });
33
-
34
- function SvgWarningCircle(props) {
35
- return /*#__PURE__*/React__namespace.createElement("svg", _extends({
36
- xmlns: "http://www.w3.org/2000/svg",
37
- viewBox: "0 0 24 24"
38
- }, props), _ref);
39
- }
40
-
41
- exports.SvgWarningCircle = SvgWarningCircle;