@ntbjs/react-components 1.1.14 → 1.1.16

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 (65) hide show
  1. package/{ActionButton-46735b89.js → ActionButton-b2345555.js} +19 -16
  2. package/{Alert-13b75102.js → Alert-d69a3f95.js} +20 -24
  3. package/{AssetGallery-a049cc20.js → AssetAction-65eebe9b.js} +589 -651
  4. package/{AssetPreviewTopBar-2197a160.js → AssetPreviewTopBar-b1fe3188.js} +30 -33
  5. package/{Badge-757b0a39.js → Badge-e984e6f5.js} +28 -49
  6. package/{Button-49f82b31.js → Button-39607724.js} +53 -65
  7. package/{Checkbox-68dc38a8.js → Checkbox-ad9c9e54.js} +30 -35
  8. package/{CompactAutocompleteSelect-96137f48.js → CompactAutocompleteSelect-7d05d707.js} +82 -114
  9. package/{CompactStarRating-15c1b812.js → CompactStarRating-d4cfae17.js} +71 -87
  10. package/{CompactTextInput-77fa43d7.js → CompactTextInput-f89988be.js} +71 -83
  11. package/{ContextMenu-4ec3d9f3.js → ContextMenu-4eb8fdc5.js} +6 -6
  12. package/{ContextMenuItem-ba2b697e.js → ContextMenuItem-c536b460.js} +22 -26
  13. package/{InputGroup-49fbc423.js → InputGroup-a89a0ea3.js} +6 -6
  14. package/{Instructions-eb7065cc.js → Instructions-c8502398.js} +97 -81
  15. package/{MultiLevelCheckboxSelect-e6e5cb90.js → MultiLevelCheckboxSelect-6be69491.js} +102 -164
  16. package/{MultiSelect-efd60232.js → MultiSelect-81e7016c.js} +71 -101
  17. package/{Popover-569cd272.js → Popover-c5e425a7.js} +19 -21
  18. package/{Radio-32d0513a.js → Radio-55db4781.js} +21 -22
  19. package/{SectionSeparator-259a22ed.js → SectionSeparator-af8dc1ce.js} +6 -6
  20. package/{Switch-4a41585f.js → Switch-04ecd8d0.js} +25 -27
  21. package/{Tab-f499ecbc.js → Tab-e43241f0.js} +7 -7
  22. package/{Tabs-116aa951.js → Tabs-cfc08c6b.js} +21 -33
  23. package/{TextArea-cc9bce9a.js → TextArea-6e15b44f.js} +66 -75
  24. package/{TextInput-0d109708.js → TextInput-9a995449.js} +41 -48
  25. package/{Tooltip-66daf6e3.js → Tooltip-a68a7e49.js} +13 -13
  26. package/{VerificationStatusIcon-d5bfb67a.js → VerificationStatusIcon-7b0e23fe.js} +20 -30
  27. package/{close-ebf2f3cf.js → close-1751121a.js} +8 -12
  28. package/data/Alert/index.js +2 -2
  29. package/data/Badge/index.js +2 -2
  30. package/data/Popover/index.js +3 -3
  31. package/data/Tab/index.js +2 -2
  32. package/data/Tabs/index.js +3 -3
  33. package/data/Tooltip/index.js +3 -3
  34. package/data/index.js +9 -9
  35. package/{defaultTheme-ea44e34a.js → defaultTheme-cd01e6c2.js} +212 -260
  36. package/edit-note-cefe2215.js +37 -0
  37. package/{expand-more-94585605.js → expand-more-d74e2bd2.js} +8 -12
  38. package/inputs/ActionButton/index.js +2 -2
  39. package/inputs/Button/index.js +6 -6
  40. package/inputs/Checkbox/index.js +2 -2
  41. package/inputs/CompactAutocompleteSelect/index.js +13 -13
  42. package/inputs/CompactStarRating/index.js +10 -10
  43. package/inputs/CompactTextInput/index.js +11 -11
  44. package/inputs/MultiSelect/index.js +4 -4
  45. package/inputs/Radio/index.js +2 -2
  46. package/inputs/Switch/index.js +2 -2
  47. package/inputs/TextArea/index.js +11 -11
  48. package/inputs/TextInput/index.js +3 -3
  49. package/inputs/index.js +28 -28
  50. package/layout/InputGroup/index.js +2 -2
  51. package/layout/SectionSeparator/index.js +2 -2
  52. package/layout/index.js +3 -3
  53. package/package.json +2 -1
  54. package/{react-select-creatable.esm-2f23d6c6.js → react-select-creatable.esm-9745dc34.js} +1502 -1281
  55. package/{shift-away-subtle-0bed9a3c.js → shift-away-subtle-631cd794.js} +1 -1
  56. package/ssr/index.js +1 -3
  57. package/widgets/AssetGallery/index.js +34 -32
  58. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +3 -3
  59. package/widgets/ContextMenu/ContextMenuItem/index.js +2 -2
  60. package/widgets/ContextMenu/ContextMenuItemsGroup/index.js +6 -6
  61. package/widgets/ContextMenu/index.js +2 -2
  62. package/widgets/Instructions/index.js +16 -17
  63. package/widgets/index.js +37 -35
  64. package/edit-note-c47d292e.js +0 -41
  65. package/warning-circle-24522402.js +0 -41
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var React = require('react');
5
5
  var nanoid = require('nanoid');
6
6
  var polished = require('polished');
@@ -13,63 +13,61 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
15
15
  var switchButtonSize = '16px';
16
- var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n\n ", "\n"])), function (props) {
16
+ var Switch$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n\n ", "\n"])), function (props) {
17
17
  return props.readOnly && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n > * {\n pointer-events: none;\n user-select: text;\n }\n "])));
18
18
  }, function (props) {
19
19
  return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n user-select: text;\n }\n "])));
20
20
  });
21
- var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
21
+ var SwitchIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
22
22
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
23
23
  }, polished.math("".concat(switchButtonSize, " + 2px")), function (props) {
24
24
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-300'));
25
25
  });
26
- var SwitchIndicatorButton = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n height: ", ";\n width: ", ";\n border-radius: 50%;\n box-shadow: ", " 0 0px 2px 0px;\n transition: left 200ms;\n"])), function (props) {
26
+ var SwitchIndicatorButton = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n ", "\n height: ", ";\n width: ", ";\n border-radius: 50%;\n box-shadow: ", " 0 0px 2px 0px;\n transition: left 200ms;\n"])), function (props) {
27
27
  return props.theme.themeProp('background', props.theme.getColor('gray-200'), props.theme.getColor('white'));
28
28
  }, switchButtonSize, switchButtonSize, function (props) {
29
29
  return props.theme.getColor('gray-500');
30
30
  });
31
- var SwitchIndicatorLabelText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ", ";\n"])), function (props) {
31
+ var SwitchIndicatorLabelText = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 18px;\n\n ", ";\n"])), function (props) {
32
32
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
33
33
  });
34
- var SwitchLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ", " {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ", " {\n left: calc(100% - ", ");\n }\n\n ", " {\n background: ", ";\n\n ", "\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ", " {\n ", "\n }\n }\n"])), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, function (props) {
34
+ var SwitchLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n margin-right: auto;\n cursor: pointer;\n\n input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n }\n\n &:has(input[type='checkbox']:not(:checked)) {\n ", " {\n left: 0;\n }\n }\n\n &:has(input[type='checkbox']:checked) {\n ", " {\n left: calc(100% - ", ");\n }\n\n ", " {\n background: ", ";\n\n ", "\n }\n }\n\n &:has(input[type='checkbox']:focus-visible) {\n ", " {\n ", "\n }\n }\n"])), SwitchIndicatorButton, SwitchIndicatorButton, switchButtonSize, SwitchIndicator, function (props) {
35
35
  return props.theme.getColor('emerald-500');
36
36
  }, function (props) {
37
37
  return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-300'), 1);
38
38
  }, SwitchIndicatorButton, function (props) {
39
39
  return props.theme.themeProp('outline', "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.5)), "8px solid ".concat(polished.rgba(props.theme.getColor('emerald-500'), 0.3)), 1);
40
40
  });
41
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: ", " 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n"])), function (props) {
41
+ var Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: ", " 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n"])), function (props) {
42
42
  return props.spaciousDescription ? '16px' : '6px';
43
43
  }, function (props) {
44
44
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
45
45
  });
46
46
 
47
- var Switch = React__default['default'].forwardRef(function Switch(_ref, forwardedRef) {
47
+ var Switch = React__default["default"].forwardRef(function Switch(_ref, forwardedRef) {
48
48
  var name = _ref.name,
49
- checked = _ref.checked,
50
- defaultChecked = _ref.defaultChecked,
51
- label = _ref.label,
52
- disabled = _ref.disabled,
53
- readOnly = _ref.readOnly,
54
- description = _ref.description,
55
- spaciousDescription = _ref.spaciousDescription,
56
- className = _ref.className,
57
- style = _ref.style,
58
- onChange = _ref.onChange,
59
- onBlur = _ref.onBlur;
60
-
49
+ checked = _ref.checked,
50
+ defaultChecked = _ref.defaultChecked,
51
+ label = _ref.label,
52
+ disabled = _ref.disabled,
53
+ readOnly = _ref.readOnly,
54
+ description = _ref.description,
55
+ spaciousDescription = _ref.spaciousDescription,
56
+ className = _ref.className,
57
+ style = _ref.style,
58
+ onChange = _ref.onChange,
59
+ onBlur = _ref.onBlur;
61
60
  var _useState = React.useState(nanoid.nanoid()),
62
- _useState2 = defaultTheme._slicedToArray(_useState, 1),
63
- uniqueId = _useState2[0];
64
-
65
- return React__default['default'].createElement(Switch$1, {
61
+ _useState2 = defaultTheme._slicedToArray(_useState, 1),
62
+ uniqueId = _useState2[0];
63
+ return React__default["default"].createElement(Switch$1, {
66
64
  disabled: disabled,
67
65
  readOnly: readOnly,
68
66
  className: className,
69
67
  style: style
70
- }, React__default['default'].createElement(SwitchLabel, {
68
+ }, React__default["default"].createElement(SwitchLabel, {
71
69
  htmlFor: uniqueId
72
- }, React__default['default'].createElement("input", {
70
+ }, React__default["default"].createElement("input", {
73
71
  ref: forwardedRef,
74
72
  checked: checked,
75
73
  defaultChecked: defaultChecked,
@@ -80,7 +78,7 @@ var Switch = React__default['default'].forwardRef(function Switch(_ref, forwarde
80
78
  type: "checkbox",
81
79
  onBlur: onBlur,
82
80
  onChange: onChange
83
- }), React__default['default'].createElement(SwitchIndicator, null, React__default['default'].createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default['default'].createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
81
+ }), React__default["default"].createElement(SwitchIndicator, null, React__default["default"].createElement(SwitchIndicatorButton, null)), typeof label === 'string' && label.length > 0 && React__default["default"].createElement(SwitchIndicatorLabelText, null, label)), typeof description === 'string' && description.length > 0 && React__default["default"].createElement(Description, {
84
82
  spaciousDescription: spaciousDescription
85
83
  }, description));
86
84
  });
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
 
@@ -10,17 +10,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
12
  var _templateObject;
13
- var Tab$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n border-bottom: 1px solid;\n min-height: 35px;\n"])), function (props) {
13
+ var Tab$1 = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n border-bottom: 1px solid;\n min-height: 35px;\n"])), function (props) {
14
14
  return props.theme.primaryFontFamily;
15
15
  });
16
16
 
17
- var Tab = React__default['default'].forwardRef(function Tab(_ref, forwardedRef) {
17
+ var _excluded = ["children", "hidden"];
18
+ var Tab = React__default["default"].forwardRef(function Tab(_ref, forwardedRef) {
18
19
  var children = _ref.children,
19
- hidden = _ref.hidden,
20
- props = defaultTheme._objectWithoutProperties(_ref, ["children", "hidden"]);
21
-
20
+ hidden = _ref.hidden,
21
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
22
22
  if (hidden) return null;
23
- return React__default['default'].createElement(Tab$1, defaultTheme._extends({
23
+ return React__default["default"].createElement(Tab$1, defaultTheme._extends({
24
24
  ref: forwardedRef
25
25
  }, props), children);
26
26
  });
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
- var Tab = require('./Tab-f499ecbc.js');
6
+ var Tab = require('./Tab-e43241f0.js');
7
7
  var styled = require('styled-components');
8
8
 
9
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -12,15 +12,15 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
15
- var Tabs$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n ", ";\n"])), function (props) {
15
+ var Tabs$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n ", ";\n"])), function (props) {
16
16
  return props.backgroundColor && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background-color: ", ";\n "])), props.backgroundColor);
17
17
  });
18
- var TabHeaders = styled__default['default'].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n\n margin: 0;\n ", ";\n ", ";\n"])), function (props) {
18
+ var TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n white-space: nowrap;\n gap: 24px;\n\n margin: 0;\n ", ";\n ", ";\n"])), function (props) {
19
19
  return !props.customPadding && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding: 0;\n "])));
20
20
  }, function (props) {
21
21
  return props.customPadding && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n padding: 0 ", ";\n "])), props.customPadding);
22
22
  });
23
- var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
23
+ var TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n text-transform: uppercase;\n font-weight: 600;\n font-size: 0.875rem;\n display: flex;\n padding-bottom: 8px;\n letter-spacing: 0.6px;\n cursor: pointer;\n border-bottom: 1px solid;\n border-color: transparent;\n margin-bottom: 1px;\n\n ", ";\n &&:hover:not(:focus) {\n ", ";\n }\n"])), function (props) {
24
24
  return props.theme.secondaryFontFamily;
25
25
  }, function (props) {
26
26
  return props.active && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
@@ -41,8 +41,8 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
41
41
  }
42
42
  });
43
43
  });
44
- var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n"])));
45
- var TabHeaderBorder = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
44
+ var TabContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n"])));
45
+ var TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n\n ", ";\n ", ";\n ", ";\n"])), function (props) {
46
46
  return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
47
47
  }, function (props) {
48
48
  return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px 0;\n "])));
@@ -50,42 +50,34 @@ var TabHeaderBorder = styled__default['default'].div.attrs(defaultTheme.applyDef
50
50
  return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px ", ";\n "])), props.customPadding);
51
51
  });
52
52
 
53
- var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
53
+ var _excluded = ["children", "defaultMinHeight", "customPadding"];
54
+ var Tabs = React__default["default"].forwardRef(function Tabs(_ref, forwardedRef) {
54
55
  var children = _ref.children,
55
- defaultMinHeight = _ref.defaultMinHeight,
56
- customPadding = _ref.customPadding,
57
- props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "customPadding"]);
58
-
56
+ defaultMinHeight = _ref.defaultMinHeight,
57
+ customPadding = _ref.customPadding,
58
+ props = defaultTheme._objectWithoutProperties(_ref, _excluded);
59
59
  var _useState = React.useState(0),
60
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
61
- activeTab = _useState2[0],
62
- setActiveTab = _useState2[1];
63
-
60
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
61
+ activeTab = _useState2[0],
62
+ setActiveTab = _useState2[1];
64
63
  var contentRef = React.useRef(null);
65
64
  var tabs = React.useMemo(function () {
66
65
  var tabs = [];
67
-
68
66
  function extractChildren(children) {
69
67
  React.Children.forEach(children, function (child, index) {
70
68
  var _child$props2;
71
-
72
69
  if (lodash.isNil(child)) {
73
70
  return null;
74
71
  }
75
-
76
72
  if (child.type === React.Fragment) {
77
73
  var _child$props;
78
-
79
74
  extractChildren((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
80
75
  }
81
-
82
76
  if ((_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.hidden) {
83
77
  return null;
84
78
  }
85
-
86
79
  if (child.type === Tab.Tab) {
87
80
  var _child$props3, _child$props4;
88
-
89
81
  tabs.push({
90
82
  key: index,
91
83
  trigger: (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.trigger,
@@ -94,27 +86,23 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
94
86
  }
95
87
  });
96
88
  }
97
-
98
89
  extractChildren(children);
99
-
100
90
  if (!tabs.some(function (tab) {
101
91
  return (tab === null || tab === void 0 ? void 0 : tab.key) === activeTab;
102
92
  })) {
103
93
  var _tabs$;
104
-
105
94
  setActiveTab((_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.key);
106
95
  }
107
-
108
96
  return tabs;
109
97
  }, [children]);
110
- return React__default['default'].createElement(Tabs$1, defaultTheme._extends({
98
+ return React__default["default"].createElement(Tabs$1, defaultTheme._extends({
111
99
  ref: forwardedRef
112
100
  }, props, {
113
101
  role: "tablist"
114
- }), React__default['default'].createElement(TabHeaders, {
102
+ }), React__default["default"].createElement(TabHeaders, {
115
103
  customPadding: customPadding
116
104
  }, tabs.map(function (tab) {
117
- return React__default['default'].createElement(TabHeader, {
105
+ return React__default["default"].createElement(TabHeader, {
118
106
  key: tab.key,
119
107
  hidden: tab.hidden,
120
108
  active: tab.key === activeTab,
@@ -123,10 +111,10 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
123
111
  },
124
112
  role: "tab"
125
113
  }, tab.trigger);
126
- })), React__default['default'].createElement(TabHeaderBorder, {
114
+ })), React__default["default"].createElement(TabHeaderBorder, {
127
115
  customPadding: customPadding
128
- }), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
129
- return React__default['default'].createElement("div", {
116
+ }), React__default["default"].createElement(TabContent, null, tabs.map(function (tab) {
117
+ return React__default["default"].createElement("div", {
130
118
  ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
131
119
  key: tab.key,
132
120
  role: "tabpanel",
@@ -1,18 +1,18 @@
1
1
  'use strict';
2
2
 
3
- var defaultTheme = require('./defaultTheme-ea44e34a.js');
3
+ var defaultTheme = require('./defaultTheme-cd01e6c2.js');
4
4
  var React = require('react');
5
5
  var lodash = require('lodash');
6
6
  var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
7
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-116aa951.js');
13
- var Tooltip = require('./Tooltip-66daf6e3.js');
14
- require('./VerificationStatusIcon-d5bfb67a.js');
15
- var editNote = require('./edit-note-c47d292e.js');
8
+ require('./Alert-d69a3f95.js');
9
+ require('./Badge-e984e6f5.js');
10
+ require('./Popover-c5e425a7.js');
11
+ require('./Tab-e43241f0.js');
12
+ require('./Tabs-cfc08c6b.js');
13
+ var Tooltip = require('./Tooltip-a68a7e49.js');
14
+ require('./VerificationStatusIcon-7b0e23fe.js');
15
+ var editNote = require('./edit-note-cefe2215.js');
16
16
  var styled = require('styled-components');
17
17
 
18
18
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,18 +41,18 @@ var warningPlaceholderHover = styled.css(_templateObject7 || (_templateObject7 =
41
41
  var errorPlaceholderHover = styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
42
42
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'), 1);
43
43
  });
44
- var TextAreaContainter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
45
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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) {
44
+ var TextAreaContainter = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
45
+ var Label = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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) {
46
46
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
47
47
  }, function (props) {
48
48
  return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
49
49
  });
50
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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) {
50
+ var InputIconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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) {
51
51
  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
52
52
  }, function (props) {
53
53
  return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
54
54
  });
55
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 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 &&: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\n &:hover::placeholder {\n ", " \n ", " \n }\n\n &:focus::placeholder {\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) {
55
+ var TextInputField = styled__default["default"].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = 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 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 &&: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\n &:hover::placeholder {\n ", " \n ", " \n }\n\n &:focus::placeholder {\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) {
56
56
  return props.borderRadius && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
57
57
  }, function (props) {
58
58
  return props.theme.themeProp('color', 'white', 'black');
@@ -127,7 +127,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
127
127
  return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
128
128
  });
129
129
  });
130
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
130
+ var TextInputLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
131
131
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
132
132
  }, placeholderBaseStyle, function (props) {
133
133
  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,11 +138,11 @@ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDe
138
138
  }, function (props) {
139
139
  return props.hasIcon && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
140
140
  });
141
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
142
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
141
+ var TextInputFieldIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
142
+ var TextInputFieldIconAlert = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
143
143
  return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
144
144
  });
145
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\n\n ", "\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) {
145
+ var TextInput = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\n\n ", "\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) {
146
146
  return props.$fieldLabel ? '66.66%' : '100%';
147
147
  }, function (props) {
148
148
  return props.readOnly && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n overflow: auto;\n "])));
@@ -151,21 +151,21 @@ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTh
151
151
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
152
152
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
153
153
  });
154
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
154
+ var Description = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
155
155
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
156
156
  }, function (props) {
157
157
  return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
158
158
  }, function (props) {
159
159
  return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
160
160
  });
161
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
161
+ var SuccessContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
162
162
  return props.fadeIn ? 0 : 1;
163
163
  }, function (props) {
164
164
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
165
165
  }, function (props) {
166
166
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
167
167
  });
168
- var SuccessContainerLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject46 || (_templateObject46 = 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) {
168
+ var SuccessContainerLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject46 || (_templateObject46 = 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) {
169
169
  return props.fadeIn ? 0 : 1;
170
170
  }, function (props) {
171
171
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
@@ -173,53 +173,49 @@ var SuccessContainerLabel = styled__default['default'].div.attrs(defaultTheme.ap
173
173
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
174
174
  });
175
175
 
176
- var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
176
+ var _excluded = ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"];
177
+ var TextArea = React__default["default"].forwardRef(function TextArea(_ref, forwardedRef) {
177
178
  var value = _ref.value,
178
- defaultValue = _ref.defaultValue,
179
- name = _ref.name,
180
- label = _ref.label,
181
- placeholder = _ref.placeholder,
182
- required = _ref.required,
183
- disabled = _ref.disabled,
184
- hidden = _ref.hidden,
185
- readOnly = _ref.readOnly,
186
- edit = _ref.edit,
187
- autoComplete = _ref.autoComplete,
188
- description = _ref.description,
189
- type = _ref.type,
190
- icon = _ref.icon,
191
- rows = _ref.rows,
192
- className = _ref.className,
193
- style = _ref.style,
194
- _onChange = _ref.onChange,
195
- onBlur = _ref.onBlur,
196
- noBorder = _ref.noBorder,
197
- instructionsTextArea = _ref.instructionsTextArea,
198
- loadingIcon = _ref.loadingIcon,
199
- successIcon = _ref.successIcon,
200
- padding = _ref.padding,
201
- descriptionToolTip = _ref.descriptionToolTip,
202
- borderRadius = _ref.borderRadius,
203
- fieldLabel = _ref.fieldLabel,
204
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"]);
205
-
179
+ defaultValue = _ref.defaultValue,
180
+ name = _ref.name,
181
+ label = _ref.label,
182
+ placeholder = _ref.placeholder,
183
+ required = _ref.required,
184
+ disabled = _ref.disabled,
185
+ hidden = _ref.hidden,
186
+ readOnly = _ref.readOnly,
187
+ edit = _ref.edit,
188
+ autoComplete = _ref.autoComplete,
189
+ description = _ref.description,
190
+ type = _ref.type,
191
+ icon = _ref.icon,
192
+ rows = _ref.rows,
193
+ className = _ref.className,
194
+ style = _ref.style,
195
+ _onChange = _ref.onChange,
196
+ onBlur = _ref.onBlur,
197
+ noBorder = _ref.noBorder,
198
+ instructionsTextArea = _ref.instructionsTextArea,
199
+ loadingIcon = _ref.loadingIcon,
200
+ successIcon = _ref.successIcon,
201
+ padding = _ref.padding,
202
+ descriptionToolTip = _ref.descriptionToolTip,
203
+ borderRadius = _ref.borderRadius,
204
+ fieldLabel = _ref.fieldLabel,
205
+ rest = defaultTheme._objectWithoutProperties(_ref, _excluded);
206
206
  var textInputDomNode = React.useRef(null);
207
207
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
208
-
209
208
  var _useState = React.useState(!(value || defaultValue)),
210
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
211
- inputIsEmpty = _useState2[0],
212
- setInputIsEmpty = _useState2[1];
213
-
209
+ _useState2 = defaultTheme._slicedToArray(_useState, 2),
210
+ inputIsEmpty = _useState2[0],
211
+ setInputIsEmpty = _useState2[1];
214
212
  var _useState3 = React.useState(false),
215
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
216
- autoFocus = _useState4[0],
217
- setAutoFocus = _useState4[1];
218
-
213
+ _useState4 = defaultTheme._slicedToArray(_useState3, 2),
214
+ autoFocus = _useState4[0],
215
+ setAutoFocus = _useState4[1];
219
216
  var _useState5 = React.useState(nanoid.nanoid()),
220
- _useState6 = defaultTheme._slicedToArray(_useState5, 1),
221
- uniqueId = _useState6[0];
222
-
217
+ _useState6 = defaultTheme._slicedToArray(_useState5, 1),
218
+ uniqueId = _useState6[0];
223
219
  var memoizedDescriptionToolTip = React.useMemo(function () {
224
220
  return descriptionToolTip;
225
221
  }, [descriptionToolTip]);
@@ -231,21 +227,20 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
231
227
  event.stopPropagation();
232
228
  }
233
229
  }, []);
234
-
235
230
  var input = function input() {
236
- return React__default['default'].createElement(TextAreaContainter, null, fieldLabel && React__default['default'].createElement(Label, {
231
+ return React__default["default"].createElement(TextAreaContainter, null, fieldLabel && React__default["default"].createElement(Label, {
237
232
  htmlFor: uniqueId,
238
233
  disabled: disabled
239
- }, fieldLabel, React__default['default'].createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default['default'].createElement(TextInput, {
234
+ }, fieldLabel, React__default["default"].createElement(SuccessContainerLabel, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default["default"].createElement(TextInput, {
240
235
  $fieldLabel: !lodash.isEmpty(fieldLabel),
241
236
  disabled: disabled,
242
237
  readOnly: readOnly,
243
238
  type: type,
244
239
  className: className,
245
240
  style: style
246
- }, React__default['default'].createElement(TextInputFieldIconAlert, {
241
+ }, React__default["default"].createElement(TextInputFieldIconAlert, {
247
242
  type: type
248
- }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
243
+ }, icon), React__default["default"].createElement(TextInputField, defaultTheme._extends({
249
244
  autoFocus: autoFocus,
250
245
  borderRadius: borderRadius,
251
246
  ref: textInputRef,
@@ -269,39 +264,35 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
269
264
  onChange: function onChange(e) {
270
265
  if (e.target.value) {
271
266
  setInputIsEmpty(false);
272
-
273
267
  if (!autoFocus) {
274
268
  setAutoFocus(true);
275
269
  }
276
270
  } else {
277
271
  setInputIsEmpty(true);
278
-
279
272
  if (!autoFocus) {
280
273
  setAutoFocus(true);
281
274
  }
282
275
  }
283
-
284
276
  _onChange(e);
285
277
  },
286
278
  onKeyDown: onKeyDown,
287
279
  onBlur: onBlur,
288
280
  noBorder: noBorder
289
- }, 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, {
281
+ }, 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, {
290
282
  disabled: disabled
291
- }, React__default['default'].createElement(editNote.SvgEditNote, {
283
+ }, React__default["default"].createElement(editNote.SvgEditNote, {
292
284
  className: padding === 'small' ? 'smallPadingIcon' : undefined
293
- })), label && React__default['default'].createElement(TextInputLabel, {
285
+ })), label && React__default["default"].createElement(TextInputLabel, {
294
286
  htmlFor: "text-input-".concat(uniqueId),
295
287
  hasPlaceholder: Boolean(placeholder),
296
288
  hasIcon: Boolean(icon),
297
289
  inputIsEmpty: inputIsEmpty
298
- }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
290
+ }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default["default"].createElement(Description, {
299
291
  type: type
300
292
  }, description)));
301
293
  };
302
-
303
294
  if (hidden) return null;
304
- 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, {
295
+ 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, {
305
296
  content: memoizedDescriptionToolTip,
306
297
  key: "tooltipTextArea1",
307
298
  placement: "bottom-end",