@ntbjs/react-components 1.3.0-rc.2 → 1.3.0-rc.21

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.
@@ -5,28 +5,29 @@ var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var useMergedRefs = require('./useMergedRefs-b6d2f8fc.js');
7
7
  var ResizeObserver = require('resize-observer-polyfill');
8
- var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-f3de8047.js');
8
+ var MultiLevelCheckboxSelect = require('./MultiLevelCheckboxSelect-e6e5cb90.js');
9
9
  var styled = require('styled-components');
10
10
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
11
11
  var warningCircle = require('./warning-circle-24522402.js');
12
12
  var Alert = require('./Alert-13b75102.js');
13
- var Badge = require('./Badge-aec841c8.js');
13
+ var Badge = require('./Badge-757b0a39.js');
14
14
  var Popover = require('./Popover-569cd272.js');
15
15
  require('./Tab-f499ecbc.js');
16
- require('./Tabs-a8c77f71.js');
16
+ require('./Tabs-116aa951.js');
17
17
  var Tooltip = require('./Tooltip-66daf6e3.js');
18
- require('./VerificationStatusIcon-6fe95a92.js');
18
+ require('./VerificationStatusIcon-d5bfb67a.js');
19
19
  var ActionButton = require('./ActionButton-46735b89.js');
20
20
  require('./Button-49f82b31.js');
21
21
  require('./Checkbox-68dc38a8.js');
22
- require('./CompactAutocompleteSelect-b68618b3.js');
23
- require('./CompactStarRating-405e4508.js');
24
- require('./CompactTextInput-0d53acdf.js');
22
+ require('./CompactAutocompleteSelect-96137f48.js');
23
+ require('./CompactStarRating-15c1b812.js');
24
+ require('./CompactTextInput-cfc495fc.js');
25
25
  require('./MultiSelect-efd60232.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-dd6da638.js');
27
+ require('./TextArea-a869b1a9.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
+ require('./AsyncSelect-090b92ae.js');
30
31
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
31
32
  var ContextMenuItem = require('./ContextMenuItem-ba2b697e.js');
32
33
  var polished = require('polished');
@@ -0,0 +1,36 @@
1
+ 'use strict';
2
+
3
+ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
+ var React = require('react');
5
+ var styled = require('styled-components');
6
+ var reactSelectAsyncPaginate = require('react-select-async-paginate');
7
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-2f23d6c6.js');
8
+
9
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
+
11
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
+
14
+ var _templateObject;
15
+ var AsyncSelect$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-family: ", ";\n font-size: 1rem;\n font-weight: 500;\n"])), function (props) {
16
+ return props.theme.primaryFontFamily;
17
+ });
18
+
19
+ var AsyncSelect = React__default['default'].forwardRef(function AsyncSelect(_ref, forwardedRef) {
20
+ var loadOptions = _ref.loadOptions,
21
+ props = defaultTheme._objectWithoutProperties(_ref, ["loadOptions"]);
22
+
23
+ var CustomAsyncPaginate = reactSelectAsyncPaginate.withAsyncPaginate(reactSelectCreatable_esm.CreatableSelect$1);
24
+ return React__default['default'].createElement(AsyncSelect$1, defaultTheme._extends({
25
+ ref: forwardedRef
26
+ }, props), React__default['default'].createElement(CustomAsyncPaginate, {
27
+ loadOptions: loadOptions
28
+ }));
29
+ });
30
+ AsyncSelect.propTypes = process.env.NODE_ENV !== "production" ? {
31
+ loadOptions: defaultTheme.PropTypes.func,
32
+ components: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string])
33
+ } : {};
34
+ AsyncSelect.defaultProps = {};
35
+
36
+ exports.AsyncSelect = AsyncSelect;
@@ -190,7 +190,7 @@ var Badge = React__default['default'].forwardRef(function Badge(_ref, forwardedR
190
190
  });
191
191
  Badge.propTypes = process.env.NODE_ENV !== "production" ? {
192
192
  badgeIcon: defaultTheme.PropTypes.node,
193
- badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number]),
193
+ badgeContent: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.number, defaultTheme.PropTypes.func, defaultTheme.PropTypes.element]),
194
194
  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.node, defaultTheme.PropTypes.string]),
195
195
  elevated: defaultTheme.PropTypes.bool,
196
196
  active: defaultTheme.PropTypes.bool,
@@ -5,12 +5,12 @@ var lodash = require('lodash');
5
5
  var nanoid = require('nanoid');
6
6
  var React = require('react');
7
7
  require('./Alert-13b75102.js');
8
- require('./Badge-aec841c8.js');
8
+ require('./Badge-757b0a39.js');
9
9
  require('./Popover-569cd272.js');
10
10
  require('./Tab-f499ecbc.js');
11
- require('./Tabs-a8c77f71.js');
11
+ require('./Tabs-116aa951.js');
12
12
  var Tooltip = require('./Tooltip-66daf6e3.js');
13
- require('./VerificationStatusIcon-6fe95a92.js');
13
+ require('./VerificationStatusIcon-d5bfb67a.js');
14
14
  var styled = require('styled-components');
15
15
  var Select = require('react-select');
16
16
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
@@ -3,12 +3,12 @@
3
3
  var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  require('./Alert-13b75102.js');
6
- require('./Badge-aec841c8.js');
6
+ require('./Badge-757b0a39.js');
7
7
  require('./Popover-569cd272.js');
8
8
  require('./Tab-f499ecbc.js');
9
- require('./Tabs-a8c77f71.js');
9
+ require('./Tabs-116aa951.js');
10
10
  var Tooltip = require('./Tooltip-66daf6e3.js');
11
- require('./VerificationStatusIcon-6fe95a92.js');
11
+ require('./VerificationStatusIcon-d5bfb67a.js');
12
12
  var styled = require('styled-components');
13
13
 
14
14
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -243,7 +243,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
243
243
  setHover(false);
244
244
  },
245
245
  hover: hover && key + 1 <= tempRating,
246
- type: type,
246
+ type: "button",
247
247
  key: key
248
248
  }, iconFill);
249
249
  } else if (viewEmpty) {
@@ -263,7 +263,7 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
263
263
  setHover(false);
264
264
  },
265
265
  hover: hover && key + 1 <= tempRating,
266
- type: type,
266
+ type: "button",
267
267
  key: key
268
268
  }, icon);
269
269
  }
@@ -6,12 +6,12 @@ var nanoid = require('nanoid');
6
6
  var React = require('react');
7
7
  var editNote = require('./edit-note-c47d292e.js');
8
8
  require('./Alert-13b75102.js');
9
- require('./Badge-aec841c8.js');
9
+ require('./Badge-757b0a39.js');
10
10
  require('./Popover-569cd272.js');
11
11
  require('./Tab-f499ecbc.js');
12
- require('./Tabs-a8c77f71.js');
12
+ require('./Tabs-116aa951.js');
13
13
  var Tooltip = require('./Tooltip-66daf6e3.js');
14
- require('./VerificationStatusIcon-6fe95a92.js');
14
+ require('./VerificationStatusIcon-d5bfb67a.js');
15
15
  var styled = require('styled-components');
16
16
 
17
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -54,7 +54,7 @@ function SvgLink(props) {
54
54
  }, props), _ref);
55
55
  }
56
56
 
57
- 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;
57
+ 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;
58
58
  var fadeIn = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n background-color: ", ";\n }\n to {\n background-color: ", ";\n }\n"])), function (props) {
59
59
  return props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)');
60
60
  }, function (props) {
@@ -67,35 +67,42 @@ var fadeOut = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTh
67
67
  });
68
68
  var fadeInCheck = styled.keyframes(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
69
69
  var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
70
- var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
70
+ var linkColor = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
71
+ return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
72
+ });
73
+ var commonAnchorTagStyle = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n a,\n && {\n font-size: 0.875rem;\n text-decoration: underline;\n }\n"])));
74
+ var readOnlyBackground = styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
75
+ return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
76
+ });
77
+ var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
71
78
  return props.theme.primaryFontFamily;
72
79
  });
73
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ", "\n"])), function (props) {
80
+ var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ", "\n"])), function (props) {
74
81
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
75
82
  }, function (props) {
76
- return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
83
+ return props.disabled && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
77
84
  });
78
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
85
+ var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n height: 19px;\n flex-basis: ", ";\n"])), function (props) {
79
86
  return props.$hasLabel ? '66.66%' : '100%';
80
87
  });
81
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
88
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
82
89
  return props.fadeIn ? 0 : 1;
83
90
  }, function (props) {
84
91
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
85
92
  }, function (props) {
86
93
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
87
94
  });
88
- var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
95
+ var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ", "\n > svg {\n width: 13px;\n }\n"])), function (props) {
89
96
  return props.fadeIn ? 0 : 1;
90
97
  }, function (props) {
91
98
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
92
99
  }, function (props) {
93
100
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
94
101
  });
95
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ", ";\n\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) {
96
- return props.theme.themeProp('background', styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
102
+ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ", ";\n\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) {
103
+ return props.theme.themeProp('background', styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
97
104
  return props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700');
98
- }), styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
105
+ }), styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n linear-gradient(-90deg,\n ", " 55%,\n transparent)\n "])), function (props) {
99
106
  return props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
100
107
  }));
101
108
  }, function (props) {
@@ -105,12 +112,12 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
105
112
  }, function (props) {
106
113
  return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
107
114
  });
108
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n \n ", "\n }\n\n &&:hover:not(:focus) {\n\n ", "\n\n ", " \n\n ", ";\n\n ", ";\n\n ", ";\n\n\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n\n ", "\n ", "\n\n }\n\n &&:focus {\n ", ";\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
109
- return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
115
+ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n \n ", "\n }\n\n &&:hover:not(:focus) {\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n\n ", "\n ", "\n\n }\n\n &&:focus {\n ", ";\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
116
+ return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
110
117
  }, function (props) {
111
- return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
118
+ return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
112
119
  }, function (props) {
113
- return props.type === 'success' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
120
+ return props.type === 'success' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
114
121
  return props.type === 'success' ? fadeIn : fadeOut;
115
122
  });
116
123
  }, function (props) {
@@ -118,11 +125,9 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
118
125
  }, function (props) {
119
126
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
120
127
  }, function (props) {
121
- return props.hasLink && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), function (props) {
122
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
123
- });
128
+ return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), linkColor);
124
129
  }, function (props) {
125
- return !props.readOnly && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
130
+ return !props.readOnly && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
126
131
  }, function (props) {
127
132
  return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
128
133
  }, function (props) {
@@ -132,13 +137,11 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
132
137
  }, function (props) {
133
138
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
134
139
  }, function (props) {
135
- return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), function (props) {
136
- return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
137
- });
140
+ return props.hasLink && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), linkColor);
138
141
  }, function (props) {
139
142
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
140
143
  }, function (props) {
141
- return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
144
+ return props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
142
145
  }, function (props) {
143
146
  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
144
147
  }, function (props) {
@@ -146,35 +149,35 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
146
149
  }, function (props) {
147
150
  return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
148
151
  }, function (props) {
149
- return props.hasLink && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
152
+ return props.hasLink && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
150
153
  }, InputIconContainer, function (props) {
151
- return props.disabled && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
154
+ return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
152
155
  }, function (props) {
153
- return props.disabled && props.hasLink && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
156
+ return props.disabled && props.hasLink && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
154
157
  }, function (props) {
155
158
  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
156
159
  }, function (props) {
157
- return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
160
+ return props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
158
161
  }, function (props) {
159
162
  return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
160
163
  }, function (props) {
161
- return !props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
164
+ return !props.readOnly && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
162
165
  return props.theme.getColor('gray-600');
163
166
  });
164
167
  }, function (props) {
165
- return props.type === 'warning' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
168
+ return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
166
169
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
167
170
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
168
171
  }, function (props) {
169
- return props.type === 'error' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
172
+ return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
170
173
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
171
174
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
172
175
  }, function (props) {
173
- return props.bold && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
174
- });
175
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a {\n font-size: 0.875rem;\n ", ";\n }\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), function (props) {
176
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('emerald-500'), 1);
176
+ return props.bold && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
177
177
  });
178
+ var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n padding: 5px 8px;\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), commonAnchorTagStyle);
179
+ var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), commonAnchorTagStyle, linkColor);
180
+ var ReadOnlyLinkContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n"])), readOnlyBackground);
178
181
 
179
182
  var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
180
183
  var label = _ref.label,
@@ -284,8 +287,8 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
284
287
  placement: "bottom-end",
285
288
  trigger: 'mouseenter',
286
289
  zIndex: 999999
287
- }, input())), link && activeLinkHandler && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
288
- content: React__default['default'].createElement(LinkPopoverContainer, null, React__default['default'].createElement("a", {
290
+ }, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
291
+ content: React__default['default'].createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default['default'].createElement(StyledLink, {
289
292
  href: link,
290
293
  target: linkTarget,
291
294
  onClick: function onClick(e) {
@@ -295,12 +298,23 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
295
298
  }
296
299
  },
297
300
  rel: "noreferrer"
301
+ }, React__default['default'].createElement(SvgLink, null), currentValue) : React__default['default'].createElement(StyledLink, {
302
+ href: link,
303
+ target: linkTarget,
304
+ rel: "noreferrer"
298
305
  }, React__default['default'].createElement(SvgLink, null), currentValue)),
299
306
  key: "tooltip2",
300
307
  placement: "bottom-start",
301
308
  zIndex: 999999,
302
309
  interactive: true
303
- }, input())), !memoizedDescriptionToolTip && link && readOnly && input(), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
310
+ }, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
311
+ href: link,
312
+ rel: "noreferrer",
313
+ style: {
314
+ display: 'inline-block'
315
+ },
316
+ target: linkTarget
317
+ }, currentValue)), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
304
318
  type: type
305
319
  }, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
306
320
  });
@@ -4,8 +4,8 @@ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
- var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-b68618b3.js');
8
- var TextArea = require('./TextArea-dd6da638.js');
7
+ var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-96137f48.js');
8
+ var TextArea = require('./TextArea-a869b1a9.js');
9
9
  var styled = require('styled-components');
10
10
 
11
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -4,12 +4,12 @@ var defaultTheme = require('./defaultTheme-ea44e34a.js');
4
4
  var React = require('react');
5
5
  var styled = require('styled-components');
6
6
  require('./Alert-13b75102.js');
7
- require('./Badge-aec841c8.js');
7
+ require('./Badge-757b0a39.js');
8
8
  var Popover = require('./Popover-569cd272.js');
9
9
  require('./Tab-f499ecbc.js');
10
- require('./Tabs-a8c77f71.js');
10
+ require('./Tabs-116aa951.js');
11
11
  require('./Tooltip-66daf6e3.js');
12
- require('./VerificationStatusIcon-6fe95a92.js');
12
+ require('./VerificationStatusIcon-d5bfb67a.js');
13
13
  var Checkbox = require('./Checkbox-68dc38a8.js');
14
14
  var lodash = require('lodash');
15
15
  var TextInput = require('./TextInput-0d109708.js');
@@ -11,15 +11,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
15
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 margin: 0;\n padding: 0;\n"])));
19
- var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = 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) {
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
+ return !props.customPadding && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n padding: 0;\n "])));
20
+ }, function (props) {
21
+ return props.customPadding && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n padding: 0 ", ";\n "])), props.customPadding);
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) {
20
24
  return props.theme.secondaryFontFamily;
21
25
  }, function (props) {
22
- return props.active && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
26
+ return props.active && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
23
27
  return props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'));
24
28
  });
25
29
  }, function (props) {
@@ -37,29 +41,27 @@ var TabHeader = styled__default['default'].li.attrs(defaultTheme.applyDefaultThe
37
41
  }
38
42
  });
39
43
  });
40
- var TabContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n border-top: 1px solid;\n margin-top: -2px;\n display: block;\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) {
41
46
  return props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5');
47
+ }, function (props) {
48
+ return !props.customPadding && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px 0;\n "])));
49
+ }, function (props) {
50
+ return props.customPadding && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n margin: -2px ", ";\n "])), props.customPadding);
42
51
  });
43
52
 
44
53
  var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef) {
45
54
  var children = _ref.children,
46
55
  defaultMinHeight = _ref.defaultMinHeight,
47
- props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight"]);
56
+ customPadding = _ref.customPadding,
57
+ props = defaultTheme._objectWithoutProperties(_ref, ["children", "defaultMinHeight", "customPadding"]);
48
58
 
49
59
  var _useState = React.useState(0),
50
60
  _useState2 = defaultTheme._slicedToArray(_useState, 2),
51
61
  activeTab = _useState2[0],
52
62
  setActiveTab = _useState2[1];
53
63
 
54
- var _useState3 = React.useState(),
55
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
56
- defaultHeight = _useState4[0],
57
- setDefaultHeight = _useState4[1];
58
-
59
64
  var contentRef = React.useRef(null);
60
- React.useEffect(function () {
61
- setDefaultHeight(defaultMinHeight);
62
- }, []);
63
65
  var tabs = React.useMemo(function () {
64
66
  var tabs = [];
65
67
 
@@ -109,7 +111,9 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
109
111
  ref: forwardedRef
110
112
  }, props, {
111
113
  role: "tablist"
112
- }), React__default['default'].createElement(TabHeaders, null, tabs.map(function (tab) {
114
+ }), React__default['default'].createElement(TabHeaders, {
115
+ customPadding: customPadding
116
+ }, tabs.map(function (tab) {
113
117
  return React__default['default'].createElement(TabHeader, {
114
118
  key: tab.key,
115
119
  hidden: tab.hidden,
@@ -119,25 +123,29 @@ var Tabs = React__default['default'].forwardRef(function Tabs(_ref, forwardedRef
119
123
  },
120
124
  role: "tab"
121
125
  }, tab.trigger);
122
- })), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
126
+ })), React__default['default'].createElement(TabHeaderBorder, {
127
+ customPadding: customPadding
128
+ }), React__default['default'].createElement(TabContent, null, tabs.map(function (tab) {
123
129
  return React__default['default'].createElement("div", {
124
130
  ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
125
131
  key: tab.key,
126
132
  role: "tabpanel",
127
133
  hidden: tab.key !== activeTab,
128
134
  style: {
129
- minHeight: !lodash.isEmpty(defaultHeight) ? defaultHeight : ''
135
+ minHeight: !lodash.isEmpty(defaultMinHeight) ? defaultMinHeight : ''
130
136
  }
131
137
  }, tab.content);
132
138
  })));
133
139
  });
134
140
  Tabs.defaultProps = {
135
- defaultMinHeight: ''
141
+ defaultMinHeight: '',
142
+ customPadding: 0
136
143
  };
137
144
  Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
138
145
  children: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.array, defaultTheme.PropTypes.object]),
139
146
  backgroundColor: defaultTheme.PropTypes.string,
140
- defaultMinHeight: defaultTheme.PropTypes.string
147
+ defaultMinHeight: defaultTheme.PropTypes.string,
148
+ customPadding: defaultTheme.PropTypes.string
141
149
  } : {};
142
150
 
143
151
  exports.Tabs = Tabs;