@ntbjs/react-components 1.3.0-rc.4 → 1.3.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 (78) hide show
  1. package/.eslintrc +7 -8
  2. package/{ActionButton-46735b89.js → ActionButton-581e717e.js} +23 -18
  3. package/{Alert-13b75102.js → Alert-b79a8fcc.js} +30 -29
  4. package/{AssetGallery-7d05ac94.js → AssetAction-06d40708.js} +790 -655
  5. package/AssetPreviewTopBar-1b5dfde2.js +118 -0
  6. package/{Badge-757b0a39.js → Badge-a35c7018.js} +44 -54
  7. package/Button-70230131.js +284 -0
  8. package/Checkbox-92d07052.js +152 -0
  9. package/CompactAutocompleteSelect-c7a11d3d.js +478 -0
  10. package/CompactStarRating-86673c4f.js +343 -0
  11. package/CompactTextInput-f1824946.js +380 -0
  12. package/{ContextMenu-4ec3d9f3.js → ContextMenu-999756c8.js} +9 -7
  13. package/ContextMenuItem-ae4357ba.js +114 -0
  14. package/{InputGroup-49fbc423.js → InputGroup-0423e24c.js} +9 -7
  15. package/{Instructions-e5947be9.js → Instructions-9910f44d.js} +109 -82
  16. package/{MultiLevelCheckboxSelect-b897d605.js → MultiLevelCheckboxSelect-7a036b16.js} +158 -168
  17. package/MultiSelect-9d8c24e5.js +406 -0
  18. package/{Popover-569cd272.js → Popover-0d9a689b.js} +24 -24
  19. package/Radio-a0610a91.js +90 -0
  20. package/{SectionSeparator-259a22ed.js → SectionSeparator-5025c8f4.js} +9 -7
  21. package/Switch-b7193858.js +122 -0
  22. package/{Tab-f499ecbc.js → Tab-7c817d4d.js} +10 -8
  23. package/{Tabs-a8c77f71.js → Tabs-318feff9.js} +54 -44
  24. package/TextArea-ecfd3418.js +382 -0
  25. package/TextInput-91d6341d.js +252 -0
  26. package/{Tooltip-66daf6e3.js → Tooltip-478ec993.js} +16 -14
  27. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-ecec5f07.js} +30 -32
  28. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  29. package/data/Alert/index.js +2 -2
  30. package/data/Badge/index.js +2 -2
  31. package/data/Popover/index.js +3 -3
  32. package/data/Tab/index.js +2 -2
  33. package/data/Tabs/index.js +3 -3
  34. package/data/Tooltip/index.js +3 -3
  35. package/data/index.js +9 -9
  36. package/{defaultTheme-ea44e34a.js → defaultTheme-573a9150.js} +205 -263
  37. package/edit-note-cefe2215.js +37 -0
  38. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  39. package/inputs/ActionButton/index.js +2 -2
  40. package/inputs/Button/index.js +6 -6
  41. package/inputs/Checkbox/index.js +2 -2
  42. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  43. package/inputs/CompactStarRating/index.js +10 -10
  44. package/inputs/CompactTextInput/index.js +11 -11
  45. package/inputs/MultiSelect/index.js +4 -4
  46. package/inputs/Radio/index.js +2 -2
  47. package/inputs/Switch/index.js +2 -2
  48. package/inputs/TextArea/index.js +12 -12
  49. package/inputs/TextInput/index.js +3 -3
  50. package/inputs/index.js +28 -28
  51. package/layout/InputGroup/index.js +2 -2
  52. package/layout/SectionSeparator/index.js +2 -2
  53. package/layout/index.js +3 -3
  54. package/package.json +6 -5
  55. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-8bf8566a.js} +1500 -1074
  56. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-a9da38b8.js} +1 -1
  57. package/ssr/index.js +1 -3
  58. package/widgets/AssetGallery/index.js +34 -32
  59. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  60. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  61. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +9 -7
  62. package/widgets/ContextMenu/index.js +2 -2
  63. package/widgets/Instructions/index.js +16 -17
  64. package/widgets/index.js +37 -35
  65. package/AssetPreviewTopBar-912c3469.js +0 -99
  66. package/Button-49f82b31.js +0 -264
  67. package/Checkbox-68dc38a8.js +0 -140
  68. package/CompactAutocompleteSelect-755b1869.js +0 -451
  69. package/CompactStarRating-bcfb78ac.js +0 -339
  70. package/CompactTextInput-9e507306.js +0 -349
  71. package/ContextMenuItem-ba2b697e.js +0 -110
  72. package/MultiSelect-efd60232.js +0 -377
  73. package/Radio-32d0513a.js +0 -86
  74. package/Switch-4a41585f.js +0 -107
  75. package/TextArea-8f62da6e.js +0 -353
  76. package/TextInput-0d109708.js +0 -236
  77. package/edit-note-c47d292e.js +0 -41
  78. package/warning-circle-24522402.js +0 -41
@@ -1,353 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
- var React = require('react');
5
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
6
- var nanoid = require('nanoid');
7
- require('./Alert-13b75102.js');
8
- require('./Badge-757b0a39.js');
9
- require('./Popover-569cd272.js');
10
- require('./Tab-f499ecbc.js');
11
- require('./Tabs-a8c77f71.js');
12
- var Tooltip = require('./Tooltip-66daf6e3.js');
13
- require('./VerificationStatusIcon-d5bfb67a.js');
14
- var editNote = require('./edit-note-c47d292e.js');
15
- var styled = require('styled-components');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
21
-
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;
23
- var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
24
- var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
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"])));
26
- var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n ", "\n"])), function (props) {
27
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
28
- }, function (props) {
29
- return props.theme.themeProp('opacity', 0.6, 0.5);
30
- });
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) {
34
- return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
35
- });
36
- 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 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) {
37
- return props.borderRadius && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
38
- }, function (props) {
39
- return props.theme.themeProp('color', 'white', 'black');
40
- }, function (props) {
41
- return props.readOnly && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
42
- }, function (props) {
43
- return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
44
- }, function (props) {
45
- return props.readOnly && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
46
- }, function (props) {
47
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
48
- }, function (props) {
49
- return (props.state === 'warning' || props.state === 'error') && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
50
- }, function (props) {
51
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
52
- }, function (props) {
53
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
54
- }, function (props) {
55
- return props.noBorder && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
56
- return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
57
- });
58
- }, function (props) {
59
- return props.type === 'warning' && styled.css(_templateObject13 || (_templateObject13 = 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'));
60
- }, function (props) {
61
- return props.type === 'error' && styled.css(_templateObject14 || (_templateObject14 = 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'));
62
- }, function (props) {
63
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
64
- return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
65
- });
66
- }, function (props) {
67
- return props.noBorder && props.type === 'error' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
- return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
69
- });
70
- }, function (props) {
71
- return props.type === 'warning-border' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
72
- }, function (props) {
73
- return props.type === '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')));
74
- }, function (props) {
75
- return props.lightBackground && styled.css(_templateObject19 || (_templateObject19 = 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'));
76
- }, function (props) {
77
- return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
78
- }, function (props) {
79
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
80
- }, function (props) {
81
- return props.padding === 'small' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
82
- }, function (props) {
83
- return props.padding === 'medium' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
84
- }, function (props) {
85
- return props.padding === 'large' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
86
- }, function (props) {
87
- return props.hasIcon && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
88
- }, function (props) {
89
- return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
90
- }, function (props) {
91
- return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
92
- }, function (props) {
93
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
94
- }, function (props) {
95
- return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
96
- }, function (props) {
97
- 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';
98
- }, InputIconContainer, function (props) {
99
- return props.type === 'success' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
100
- }, function (props) {
101
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
102
- }, function (props) {
103
- return props.theme.themeProp('opacity', 0.6, 0.5, 1);
104
- }, function (props) {
105
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
106
- }, function (props) {
107
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
108
- }, function (props) {
109
- return props.type === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
110
- return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
111
- }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
112
- }, function (props) {
113
- return props.type === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
114
- return props.theme.themeProp('border-color', '#D83018', '#D83018');
115
- }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
116
- }, function (props) {
117
- return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
118
- }, function (props) {
119
- return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
120
- }, function (props) {
121
- return props.noBorder && props.edit && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
122
- return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
123
- });
124
- }, function (props) {
125
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
126
- });
127
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = 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) {
128
- return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
129
- }, placeholderBaseStyle, function (props) {
130
- 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%)"));
131
- }, function (props) {
132
- return !props.inputIsEmpty && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
133
- }, function (props) {
134
- return props.hasPlaceholder && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
135
- }, function (props) {
136
- return props.hasIcon && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
137
- });
138
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = 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"])));
139
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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) {
140
- return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
141
- });
142
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = 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) {
143
- return props.readOnly && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
144
- }, function (props) {
145
- return props.disabled && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
146
- }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
147
- return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
148
- });
149
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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) {
150
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
151
- }, function (props) {
152
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
153
- }, function (props) {
154
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
155
- });
156
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = 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) {
157
- return props.fadeIn ? 0 : 1;
158
- }, function (props) {
159
- return props.fadeIn ? fadeOutCheck : fadeInCheck;
160
- }, function (props) {
161
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
162
- });
163
- styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = 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) {
164
- return props.expanded && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
165
- }, function (props) {
166
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
167
- }, function (props) {
168
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
169
- }, function (props) {
170
- return props.type === 'error' && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
171
- });
172
-
173
- var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
174
- var value = _ref.value,
175
- defaultValue = _ref.defaultValue,
176
- name = _ref.name,
177
- label = _ref.label,
178
- placeholder = _ref.placeholder,
179
- required = _ref.required,
180
- disabled = _ref.disabled,
181
- hidden = _ref.hidden,
182
- readOnly = _ref.readOnly,
183
- edit = _ref.edit,
184
- autoComplete = _ref.autoComplete,
185
- description = _ref.description,
186
- type = _ref.type,
187
- icon = _ref.icon,
188
- rows = _ref.rows,
189
- className = _ref.className,
190
- style = _ref.style,
191
- _onChange = _ref.onChange,
192
- onBlur = _ref.onBlur,
193
- lightBackground = _ref.lightBackground,
194
- noBorder = _ref.noBorder,
195
- instructionsTextArea = _ref.instructionsTextArea,
196
- loadingIcon = _ref.loadingIcon,
197
- successIcon = _ref.successIcon,
198
- padding = _ref.padding,
199
- descriptionToolTip = _ref.descriptionToolTip,
200
- borderRadius = _ref.borderRadius,
201
- 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"]);
202
-
203
- var textInputDomNode = React.useRef(null);
204
- var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
205
-
206
- var _useState = React.useState(!(value || defaultValue)),
207
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
208
- inputIsEmpty = _useState2[0],
209
- setInputIsEmpty = _useState2[1];
210
-
211
- var _useState3 = React.useState(false),
212
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
213
- autoFocus = _useState4[0],
214
- setAutoFocus = _useState4[1];
215
-
216
- var _useState5 = React.useState(nanoid.nanoid()),
217
- _useState6 = defaultTheme._slicedToArray(_useState5, 1),
218
- uniqueId = _useState6[0];
219
-
220
- var memoizedDescriptionToolTip = React.useMemo(function () {
221
- return descriptionToolTip;
222
- }, [descriptionToolTip]);
223
- React.useEffect(function () {
224
- setAutoFocus(false);
225
- }, [value, defaultValue]);
226
- var onKeyDown = React.useCallback(function (event) {
227
- if (event.key === 'Enter') {
228
- event.stopPropagation();
229
- }
230
- }, []);
231
-
232
- var input = function input() {
233
- return React__default['default'].createElement(TextInput, {
234
- disabled: disabled,
235
- readOnly: readOnly,
236
- type: type,
237
- className: className,
238
- style: style
239
- }, React__default['default'].createElement(TextInputFieldIconAlert, {
240
- type: type
241
- }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
242
- autoFocus: autoFocus,
243
- borderRadius: borderRadius,
244
- ref: textInputRef,
245
- rows: rows,
246
- value: value,
247
- defaultValue: defaultValue,
248
- name: name,
249
- placeholder: placeholder || ' ',
250
- required: required,
251
- readOnly: readOnly,
252
- disabled: disabled,
253
- edit: edit,
254
- instructionsTextArea: instructionsTextArea,
255
- type: type,
256
- autoComplete: autoComplete,
257
- hasIcon: Boolean(icon),
258
- icon: icon,
259
- id: "text-input-".concat(uniqueId),
260
- key: uniqueId,
261
- lightBackground: lightBackground,
262
- padding: padding,
263
- onChange: function onChange(e) {
264
- if (e.target.value) {
265
- setInputIsEmpty(false);
266
-
267
- if (!autoFocus) {
268
- setAutoFocus(true);
269
- }
270
- } else {
271
- setInputIsEmpty(true);
272
-
273
- if (!autoFocus) {
274
- setAutoFocus(true);
275
- }
276
- }
277
-
278
- _onChange(e);
279
- },
280
- onKeyDown: onKeyDown,
281
- onBlur: onBlur,
282
- noBorder: noBorder
283
- }, rest)), (type === 'loading' || type === 'success') && React__default['default'].createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
284
- disabled: disabled
285
- }, React__default['default'].createElement(editNote.SvgEditNote, {
286
- className: padding === 'small' ? 'smallPadingIcon' : undefined
287
- })), label && React__default['default'].createElement(TextInputLabel, {
288
- htmlFor: "text-input-".concat(uniqueId),
289
- hasPlaceholder: Boolean(placeholder),
290
- hasIcon: Boolean(icon),
291
- inputIsEmpty: inputIsEmpty
292
- }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
293
- type: type
294
- }, description));
295
- };
296
-
297
- if (hidden) return null;
298
- 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, {
299
- content: memoizedDescriptionToolTip,
300
- key: "tooltipTextArea1",
301
- placement: "bottom-end",
302
- trigger: 'mouseenter',
303
- zIndex: 999999
304
- }, input())));
305
- });
306
- TextArea.defaultProps = {
307
- rows: 4,
308
- noBorder: false,
309
- readOnly: false,
310
- edit: false,
311
- hidden: false,
312
- type: '',
313
- padding: 'medium',
314
- instructionsTextArea: false,
315
- descriptionToolTip: '',
316
- isExpanded: function isExpanded() {},
317
- onChange: function onChange() {},
318
- borderRadius: 0
319
- };
320
- TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
321
- value: defaultTheme.PropTypes.string,
322
- defaultValue: defaultTheme.PropTypes.string,
323
- name: defaultTheme.PropTypes.string,
324
- label: defaultTheme.PropTypes.string,
325
- placeholder: defaultTheme.PropTypes.string,
326
- required: defaultTheme.PropTypes.bool,
327
- disabled: defaultTheme.PropTypes.bool,
328
- hidden: defaultTheme.PropTypes.bool,
329
- readOnly: defaultTheme.PropTypes.bool,
330
- edit: defaultTheme.PropTypes.bool,
331
- autoComplete: defaultTheme.PropTypes.string,
332
- description: defaultTheme.PropTypes.string,
333
- error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
334
- warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
335
- icon: defaultTheme.PropTypes.element,
336
- rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
337
- className: defaultTheme.PropTypes.string,
338
- style: defaultTheme.PropTypes.object,
339
- padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
340
- lightBackground: defaultTheme.PropTypes.bool,
341
- onChange: defaultTheme.PropTypes.func,
342
- onBlur: defaultTheme.PropTypes.func,
343
- noBorder: defaultTheme.PropTypes.bool,
344
- isExpanded: defaultTheme.PropTypes.func,
345
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
346
- instructionsTextArea: defaultTheme.PropTypes.bool,
347
- loadingIcon: defaultTheme.PropTypes.element,
348
- successIcon: defaultTheme.PropTypes.element,
349
- descriptionToolTip: defaultTheme.PropTypes.string,
350
- borderRadius: defaultTheme.PropTypes.number
351
- } : {};
352
-
353
- exports.TextArea = TextArea;
@@ -1,236 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
- var React = require('react');
5
- var nanoid = require('nanoid');
6
- var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
7
- var lodash = require('lodash');
8
- var editNote = require('./edit-note-c47d292e.js');
9
- var styled = require('styled-components');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
-
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;
17
- var activeLabel = styled.css(_templateObject || (_templateObject = 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"])));
18
- var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: initial;\n padding: 13px 10px;\n\n ", "\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n ", "\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem;\n\n ", "\n ", "\n"])), function (props) {
19
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
20
- }, function (props) {
21
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
22
- }, function (props) {
23
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
24
- }, function (props) {
25
- return props.isPrefix ? styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n padding-right: 0;\n margin-right: -3px;\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n "]))) : styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 0;\n margin-left: -3px;\n border-left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n "])));
26
- }, function (props) {
27
- return props.warning && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
28
- }, function (props) {
29
- return props.error && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
30
- });
31
- var TextInputWrapper = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-content: center;\n\n &:focus-within {\n ", " {\n outline: none;\n ", "\n }\n }\n"])), Adornment, function (props) {
32
- return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'), 1);
33
- });
34
- 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 padding-right: 4px;\n padding-left: 30px;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ", ";\n\n ", "\n\n ", "\n\n > svg {\n width: 12px;\n }\n"])), function (props) {
35
- return props.theme.getColor('gray-400');
36
- }, function (props) {
37
- return props.warning && props.theme.themeProp('color', '#C3AF43', '#C3AF43');
38
- }, function (props) {
39
- return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
40
- });
41
- var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;\n ", "\n ", "\n border: 1px solid;\n ", ";\n\n ", "\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n transition: opacity 350ms;\n }\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n ", "\n"])), function (props) {
42
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
43
- }, function (props) {
44
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
45
- }, function (props) {
46
- return props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
47
- }, function (props) {
48
- return props.readOnly && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n user-select: text;\n cursor: default;\n "])));
49
- }, function (props) {
50
- return props.warning && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
51
- }, function (props) {
52
- return props.error && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
53
- }, function (props) {
54
- return props.hasIcon && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
55
- }, function (props) {
56
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
57
- }, function (props) {
58
- return props.theme.themeProp('opacity', 0.6, 0.5, 1);
59
- }, function (props) {
60
- return props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent';
61
- }, InputIconContainer, function (props) {
62
- return props.theme.getColor('gray-600');
63
- }, function (props) {
64
- return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n outline: none;\n "])));
65
- });
66
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 15px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n ", "\n"])), function (props) {
67
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
68
- }, function (props) {
69
- return props.theme.themeProp('opacity', 0.6, 0.5);
70
- }, function (props) {
71
- 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%)"));
72
- }, function (props) {
73
- return (props.hasPlaceholder || props.hasAdornments) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
74
- }, function (props) {
75
- return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
76
- });
77
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = 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"])));
78
- var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\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 ", " \n } \n \n}\n"])), function (props) {
79
- return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n > * {\n pointer-events: none;\n }\n "])));
80
- }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
81
- return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
82
- }, function (props) {
83
- return props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('red-500'));
84
- }, function (props) {
85
- return props.warning && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('orange-500'));
86
- });
87
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = 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) {
88
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
89
- }, function (props) {
90
- return props.error && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
91
- }, function (props) {
92
- return props.warning && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
93
- });
94
-
95
- var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
96
- var value = _ref.value,
97
- defaultValue = _ref.defaultValue,
98
- name = _ref.name,
99
- label = _ref.label,
100
- placeholder = _ref.placeholder,
101
- type = _ref.type,
102
- required = _ref.required,
103
- disabled = _ref.disabled,
104
- readOnly = _ref.readOnly,
105
- autoComplete = _ref.autoComplete,
106
- description = _ref.description,
107
- error = _ref.error,
108
- warning = _ref.warning,
109
- icon = _ref.icon,
110
- adornments = _ref.adornments,
111
- className = _ref.className,
112
- style = _ref.style,
113
- onChange = _ref.onChange,
114
- onBlur = _ref.onBlur,
115
- noBorder = _ref.noBorder,
116
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "type", "required", "disabled", "readOnly", "autoComplete", "description", "error", "warning", "icon", "adornments", "className", "style", "onChange", "onBlur", "noBorder"]);
117
-
118
- var textInputDomNode = React.useRef(null);
119
- var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
120
-
121
- var _useState = React.useState(nanoid.nanoid()),
122
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
123
- uniqueId = _useState2[0];
124
-
125
- var hasError = React.useMemo(function () {
126
- if (lodash.isBoolean(error)) {
127
- return error;
128
- }
129
-
130
- return !lodash.isEmpty(error);
131
- }, [error]);
132
- var hasWarning = React.useMemo(function () {
133
- if (lodash.isBoolean(warning)) {
134
- return warning;
135
- }
136
-
137
- return !lodash.isEmpty(warning);
138
- }, [warning]);
139
- var descriptionText = React.useMemo(function () {
140
- if (!lodash.isEmpty(error)) {
141
- return error;
142
- }
143
-
144
- if (!lodash.isEmpty(warning)) {
145
- return warning;
146
- }
147
-
148
- if (!lodash.isEmpty(description)) {
149
- return description;
150
- }
151
-
152
- return null;
153
- }, [description, error, warning]);
154
- return React__default['default'].createElement(TextInput$1, {
155
- error: hasError,
156
- disabled: disabled,
157
- warning: hasWarning,
158
- className: className,
159
- style: style
160
- }, typeof icon !== 'undefined' && React__default['default'].createElement(TextInputFieldIcon, null, icon), React__default['default'].createElement(TextInputWrapper, null, typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 && React__default['default'].createElement(Adornment, {
161
- htmlFor: "text-input-".concat(uniqueId),
162
- error: hasError,
163
- warning: hasWarning,
164
- isPrefix: true,
165
- onClick: function onClick() {
166
- return textInputDomNode.current.focus();
167
- }
168
- }, adornments.prefix), React__default['default'].createElement(TextInputField, defaultTheme._extends({
169
- ref: textInputRef,
170
- value: value,
171
- defaultValue: defaultValue,
172
- name: name,
173
- placeholder: placeholder || ' ',
174
- type: type,
175
- required: required,
176
- autoComplete: autoComplete,
177
- hasIcon: Boolean(icon),
178
- error: hasError,
179
- warning: hasWarning,
180
- id: "text-input-".concat(uniqueId),
181
- onChange: onChange,
182
- onBlur: onBlur,
183
- readOnly: readOnly,
184
- noBorder: noBorder
185
- }, rest)), !readOnly && noBorder && React__default['default'].createElement(InputIconContainer, {
186
- error: error,
187
- warning: warning
188
- }, React__default['default'].createElement(editNote.SvgEditNote, null)), label && React__default['default'].createElement(TextInputLabel, {
189
- htmlFor: "text-input-".concat(uniqueId),
190
- hasPlaceholder: Boolean(placeholder),
191
- hasAdornments: Boolean(typeof (adornments === null || adornments === void 0 ? void 0 : adornments.prefix) === 'string' && adornments.prefix.length > 0 || typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0),
192
- hasIcon: Boolean(icon),
193
- error: hasError
194
- }, label, required && ' *'), typeof (adornments === null || adornments === void 0 ? void 0 : adornments.suffix) === 'string' && adornments.suffix.length > 0 && React__default['default'].createElement(Adornment, {
195
- error: hasError,
196
- warning: hasWarning,
197
- isPrefix: false,
198
- onClick: function onClick() {
199
- return textInputDomNode.current.focus();
200
- }
201
- }, adornments.suffix)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default['default'].createElement(Description, {
202
- error: hasError,
203
- warning: hasWarning
204
- }, descriptionText));
205
- });
206
- TextInput.defaultProps = {
207
- type: 'text',
208
- noBorder: false
209
- };
210
- TextInput.propTypes = process.env.NODE_ENV !== "production" ? {
211
- value: defaultTheme.PropTypes.string,
212
- defaultValue: defaultTheme.PropTypes.string,
213
- name: defaultTheme.PropTypes.string,
214
- label: defaultTheme.PropTypes.string,
215
- placeholder: defaultTheme.PropTypes.string,
216
- type: defaultTheme.PropTypes.string,
217
- required: defaultTheme.PropTypes.bool,
218
- disabled: defaultTheme.PropTypes.bool,
219
- readOnly: defaultTheme.PropTypes.bool,
220
- autoComplete: defaultTheme.PropTypes.string,
221
- description: defaultTheme.PropTypes.string,
222
- error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
223
- warning: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
224
- icon: defaultTheme.PropTypes.element,
225
- adornments: defaultTheme.PropTypes.shape({
226
- prefix: defaultTheme.PropTypes.string,
227
- suffix: defaultTheme.PropTypes.string
228
- }),
229
- className: defaultTheme.PropTypes.string,
230
- style: defaultTheme.PropTypes.object,
231
- onChange: defaultTheme.PropTypes.func,
232
- onBlur: defaultTheme.PropTypes.func,
233
- noBorder: defaultTheme.PropTypes.bool
234
- } : {};
235
-
236
- exports.TextInput = TextInput;
@@ -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;