@ntbjs/react-components 1.3.0-rc.24 → 1.3.0-rc.25

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.
package/.eslintrc CHANGED
@@ -8,13 +8,12 @@
8
8
  "parserOptions": {
9
9
  "sourceType": "module"
10
10
  },
11
- "ignorePatterns": [
12
- "build",
13
- "storybook-static"
14
- ],
11
+ "ignorePatterns": ["build", "storybook-static"],
15
12
  "parser": "@babel/eslint-parser",
16
- "extends": [
17
- "eslint:recommended",
18
- "plugin:react/recommended"
19
- ]
13
+ "extends": ["eslint:recommended", "plugin:react/recommended"],
14
+ "settings": {
15
+ "react": {
16
+ "version": "detect"
17
+ }
18
+ }
20
19
  }
@@ -21,10 +21,10 @@ require('./Button-49f82b31.js');
21
21
  require('./Checkbox-68dc38a8.js');
22
22
  require('./CompactAutocompleteSelect-96137f48.js');
23
23
  require('./CompactStarRating-15c1b812.js');
24
- require('./CompactTextInput-cfc495fc.js');
24
+ require('./CompactTextInput-77fa43d7.js');
25
25
  require('./MultiSelect-efd60232.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-a869b1a9.js');
27
+ require('./TextArea-cc9bce9a.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
@@ -45,8 +45,8 @@ function SvgArrowBack(props) {
45
45
  }, props), _ref);
46
46
  }
47
47
 
48
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
49
- var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: ", ";\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
48
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
49
+ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: ", ";\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n\n ", "\n"])), function (props) {
50
50
  return props.border ? "1px solid" : "none";
51
51
  }, function (props) {
52
52
  return props.theme.primaryFontFamily;
@@ -54,14 +54,18 @@ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.app
54
54
  return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
55
55
  }, function (props) {
56
56
  return props.shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9');
57
+ }, function (props) {
58
+ return props.disabled && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
57
59
  });
58
- var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n font-size: 1.125rem;\n ", ";\n\n &:hover {\n cursor: pointer;\n }\n\n > svg {\n height: 24px;\n margin-right: 16px;\n width: 24px;\n }\n"])), function (props) {
60
+ var BackButtonContainer = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n font-size: 1.125rem;\n ", ";\n\n ", "\n\n &:hover {\n cursor: pointer;\n }\n\n > svg {\n height: 24px;\n margin-right: 16px;\n width: 24px;\n }\n"])), function (props) {
59
61
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
62
+ }, function (props) {
63
+ return props.disabled && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n pointer-events: none;\n "])));
60
64
  });
61
- var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.125rem;\n margin-left: 16px;\n\n ", ";\n"])), function (props) {
65
+ var LeftText = styled__default['default'].span.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1.125rem;\n margin-left: 16px;\n\n ", ";\n"])), function (props) {
62
66
  return props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
63
67
  });
64
- var ButtonsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n margin-left: auto;\n\n > span {\n margin-left: 16px;\n }\n"])));
68
+ var ButtonsContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n align-items: center;\n display: flex;\n margin-left: auto;\n\n > span {\n margin-left: 16px;\n }\n"])));
65
69
 
66
70
  var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPreviewTopBar(_ref, forwardedRef) {
67
71
  var onBackButtonClick = _ref.onBackButtonClick,
@@ -71,14 +75,17 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
71
75
  buttons = _ref.buttons,
72
76
  shadow = _ref.shadow,
73
77
  border = _ref.border,
74
- props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border"]);
78
+ disabled = _ref.disabled,
79
+ props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border", "disabled"]);
75
80
 
76
81
  return React__default['default'].createElement(AssetPreviewTopBar$1, defaultTheme._extends({
77
82
  ref: forwardedRef,
78
83
  shadow: shadow,
79
- border: border
84
+ border: border,
85
+ disabled: disabled
80
86
  }, props), React__default['default'].createElement(BackButtonContainer, {
81
- onClick: onBackButtonClick
87
+ onClick: onBackButtonClick,
88
+ disabled: disabled
82
89
  }, backButtonAsClose ? React__default['default'].createElement(close.SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
83
90
  return React__default['default'].createElement("span", {
84
91
  key: 'topBarButton-' + index
@@ -88,6 +95,7 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
88
95
  AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
89
96
  onBackButtonClick: defaultTheme.PropTypes.func.isRequired,
90
97
  backButtonText: defaultTheme.PropTypes.string.isRequired,
98
+ disabled: defaultTheme.PropTypes.bool,
91
99
  backButtonAsClose: defaultTheme.PropTypes.bool,
92
100
  leftText: defaultTheme.PropTypes.string,
93
101
  shadow: defaultTheme.PropTypes.bool,
@@ -7,7 +7,7 @@ var React = require('react');
7
7
  var editNote = require('./edit-note-c47d292e.js');
8
8
  require('./Alert-13b75102.js');
9
9
  require('./Badge-757b0a39.js');
10
- require('./Popover-569cd272.js');
10
+ var Popover = require('./Popover-569cd272.js');
11
11
  require('./Tab-f499ecbc.js');
12
12
  require('./Tabs-116aa951.js');
13
13
  var Tooltip = require('./Tooltip-66daf6e3.js');
@@ -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, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35;
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;
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) {
@@ -112,7 +112,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
112
112
  }, function (props) {
113
113
  return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
114
114
  });
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) {
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 padding: 1px 10px;\n border-radius: 3px;\n border: 1px solid transparent;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n ", ";\n ", ";\n\n ", ";\n\n\n &&:not(:hover):not(:focus) {\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
116
  return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
117
117
  }, function (props) {
118
118
  return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
@@ -124,24 +124,22 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
124
124
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
125
125
  }, function (props) {
126
126
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
127
- }, function (props) {
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);
129
- }, function (props) {
130
- return !props.readOnly && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
131
127
  }, function (props) {
132
128
  return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
133
129
  }, function (props) {
134
130
  return props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
131
+ }, function (props) {
132
+ 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);
135
133
  }, function (props) {
136
134
  return props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
137
135
  }, function (props) {
138
136
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
139
137
  }, function (props) {
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
+ return props.hasLink && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), linkColor);
141
139
  }, function (props) {
142
140
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
143
141
  }, function (props) {
144
- return props.readOnly && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
142
+ return props.readOnly && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
145
143
  }, function (props) {
146
144
  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
147
145
  }, function (props) {
@@ -149,35 +147,35 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
149
147
  }, function (props) {
150
148
  return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
151
149
  }, function (props) {
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
+ return props.hasLink && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n cursor: pointer;\n\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n "])));
153
151
  }, InputIconContainer, function (props) {
154
- return props.disabled && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
152
+ return props.disabled && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed;\n "])));
155
153
  }, function (props) {
156
- return props.disabled && props.hasLink && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
154
+ return props.disabled && props.hasLink && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n background: none !important;\n cursor: not-allowed !important;\n "])));
157
155
  }, function (props) {
158
156
  return !props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
159
157
  }, function (props) {
160
- return props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
158
+ return props.readOnly && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), readOnlyBackground);
161
159
  }, function (props) {
162
160
  return props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'));
163
161
  }, function (props) {
164
- return !props.readOnly && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
162
+ return !props.readOnly && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", ";\n "])), function (props) {
165
163
  return props.theme.getColor('gray-600');
166
164
  });
167
165
  }, function (props) {
168
- return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
166
+ return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
169
167
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
170
168
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
171
169
  }, function (props) {
172
- return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
170
+ return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
173
171
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
174
172
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
175
173
  }, function (props) {
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 "])));
174
+ return props.bold && styled.css(_templateObject31 || (_templateObject31 = 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
175
  });
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);
176
+ var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n padding: 5px 8px;\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), commonAnchorTagStyle);
177
+ var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), commonAnchorTagStyle, linkColor);
178
+ var ReadOnlyLinkContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n"])), readOnlyBackground);
181
179
 
182
180
  var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
183
181
  var label = _ref.label,
@@ -287,7 +285,8 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
287
285
  placement: "bottom-end",
288
286
  trigger: 'mouseenter',
289
287
  zIndex: 999999
290
- }, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Tooltip.Tooltip, {
288
+ }, input())), link && !readOnly && React__default['default'].createElement("div", null, React__default['default'].createElement(Popover.Popover, {
289
+ arrow: false,
291
290
  content: React__default['default'].createElement(LinkPopoverContainer, null, activeLinkHandler ? React__default['default'].createElement(StyledLink, {
292
291
  href: link,
293
292
  target: linkTarget,
@@ -305,6 +304,7 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
305
304
  }, React__default['default'].createElement(SvgLink, null), currentValue)),
306
305
  key: "tooltip2",
307
306
  placement: "bottom-start",
307
+ trigger: "focusin",
308
308
  zIndex: 999999,
309
309
  interactive: true
310
310
  }, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
@@ -5,7 +5,7 @@ var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
7
  var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-96137f48.js');
8
- var TextArea = require('./TextArea-a869b1a9.js');
8
+ var TextArea = require('./TextArea-cc9bce9a.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 }; }
@@ -20,7 +20,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
20
20
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
21
21
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
22
22
 
23
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47;
23
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
24
24
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
25
25
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
26
26
  var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
@@ -29,95 +29,93 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
29
29
  }, function (props) {
30
30
  return props.theme.themeProp('opacity', 0.6, 0.5);
31
31
  });
32
- var TextAreaContainter = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n"])));
33
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n height: 19px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 13px;\n ", "\n"])), function (props) {
32
+ var warningPlaceholder = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
33
+ return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'), 1);
34
+ });
35
+ var errorPlaceholder = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
36
+ return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'), 1);
37
+ });
38
+ var warningPlaceholderHover = styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
39
+ return props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'), 1);
40
+ });
41
+ var errorPlaceholderHover = styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
42
+ return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-600'), props.theme.getColor('red-600'), 1);
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) {
34
46
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
35
47
  }, function (props) {
36
- return props.disabled && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
48
+ return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
37
49
  });
38
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ", "\n }\n"])), function (props) {
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) {
39
51
  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
40
52
  }, function (props) {
41
- return props.disabled && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
53
+ return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
42
54
  });
43
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n \n\n ", "\n\n \n \n\n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n\n \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", "\n\n ", ";\n\n \n }\n"])), function (props) {
44
- return props.borderRadius && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
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
+ return props.borderRadius && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
45
57
  }, function (props) {
46
58
  return props.theme.themeProp('color', 'white', 'black');
47
59
  }, function (props) {
48
- return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
49
- }, function (props) {
50
- return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
60
+ return props.readOnly && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n padding: 12px 10px; ;\n "])));
51
61
  }, function (props) {
52
- return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
62
+ return props.disabled && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
53
63
  }, function (props) {
54
64
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
55
- }, function (props) {
56
- return (props.state === 'warning' || props.state === 'error') && props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900'));
57
65
  }, function (props) {
58
66
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
59
67
  }, function (props) {
60
68
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
61
69
  }, function (props) {
62
- return props.noBorder && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
70
+ return props.noBorder && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
63
71
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
64
72
  });
65
73
  }, function (props) {
66
- return props.type === 'warning' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
74
+ return props.type === 'warning' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
67
75
  }, function (props) {
68
- return props.type === 'error' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
76
+ return props.type === 'error' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
69
77
  }, function (props) {
70
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
71
- return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
78
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
79
+ return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
72
80
  });
73
81
  }, function (props) {
74
- return props.noBorder && props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
82
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
75
83
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
76
84
  });
77
85
  }, function (props) {
78
- return props.type === 'warning-border' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
79
- }, function (props) {
80
- return props.type === 'error-border' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
81
- }, function (props) {
82
- return props.lightBackground && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
83
- }, function (props) {
84
- return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
86
+ return props.type === 'warning-border' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
85
87
  }, function (props) {
86
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
88
+ return props.type === 'error-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
87
89
  }, function (props) {
88
- return props.padding === 'small' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
90
+ return props.padding === 'small' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
89
91
  }, function (props) {
90
- return props.padding === 'medium' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
92
+ return props.padding === 'medium' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
91
93
  }, function (props) {
92
- return props.padding === 'large' && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
94
+ return props.padding === 'large' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
93
95
  }, function (props) {
94
- return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
96
+ return props.hasIcon && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
95
97
  }, function (props) {
96
98
  return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
97
99
  }, function (props) {
98
100
  return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
99
101
  }, function (props) {
100
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
102
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
101
103
  }, function (props) {
102
- return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
104
+ return props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0');
103
105
  }, function (props) {
104
106
  return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
105
107
  }, InputIconContainer, function (props) {
106
- return props.type === 'success' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
107
- }, function (props) {
108
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
109
- }, function (props) {
110
- return props.theme.themeProp('opacity', 0.6, 0.5, 1);
111
- }, function (props) {
108
+ return props.type === 'success' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
109
+ }, placeholderBaseStyle, warningPlaceholder, errorPlaceholder, warningPlaceholderHover, errorPlaceholderHover, warningPlaceholderHover, errorPlaceholderHover, function (props) {
112
110
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
113
111
  }, function (props) {
114
112
  return props.theme.themeProp('background', 'transparent', props.theme.getColor('white'));
115
113
  }, function (props) {
116
- return props.type === 'warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
114
+ return props.type === 'warning' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
117
115
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
118
116
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
119
117
  }, function (props) {
120
- return props.type === 'error' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
118
+ return props.type === 'error' && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
121
119
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
122
120
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
123
121
  }, function (props) {
@@ -125,66 +123,55 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
125
123
  }, function (props) {
126
124
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
127
125
  }, function (props) {
128
- return props.noBorder && props.edit && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
126
+ return props.noBorder && props.edit && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
129
127
  return props.theme.themeProp('border-color', '#27272A', 'rgba(244,244,245, 0.3)');
130
128
  });
131
- }, function (props) {
132
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
133
129
  });
134
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), function (props) {
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) {
135
131
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
136
132
  }, placeholderBaseStyle, function (props) {
137
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
134
  }, function (props) {
139
- return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
135
+ return !props.inputIsEmpty && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
140
136
  }, function (props) {
141
- return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
137
+ return props.hasPlaceholder && styled.css(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
142
138
  }, function (props) {
143
- return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
139
+ return props.hasIcon && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
144
140
  });
145
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
146
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 12px;\n width: 15px;\n }\n"])), function (props) {
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) {
147
143
  return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
148
144
  });
149
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\n\n ", "\n\n ", "\n\n \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) {
150
146
  return props.$fieldLabel ? '66.66%' : '100%';
151
147
  }, function (props) {
152
- return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n overflow: auto;\n "])));
148
+ return props.readOnly && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n overflow: auto;\n "])));
153
149
  }, function (props) {
154
- return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
150
+ return props.disabled && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
155
151
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
156
152
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
157
153
  });
158
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
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) {
159
155
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
160
156
  }, function (props) {
161
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
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')));
162
158
  }, function (props) {
163
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
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')));
164
160
  });
165
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
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) {
166
162
  return props.fadeIn ? 0 : 1;
167
163
  }, function (props) {
168
164
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
169
165
  }, function (props) {
170
166
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
171
167
  });
172
- var SuccessContainerLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n margin-top: -7px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 13px;\n }\n"])), function (props) {
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) {
173
169
  return props.fadeIn ? 0 : 1;
174
170
  }, function (props) {
175
171
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
176
172
  }, function (props) {
177
173
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
178
174
  });
179
- styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
180
- return props.expanded && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
181
- }, function (props) {
182
- return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
183
- }, function (props) {
184
- return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
185
- }, function (props) {
186
- return props.type === 'error' && styled.css(_templateObject47 || (_templateObject47 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
187
- });
188
175
 
189
176
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
190
177
  var value = _ref.value,
@@ -206,7 +193,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
206
193
  style = _ref.style,
207
194
  _onChange = _ref.onChange,
208
195
  onBlur = _ref.onBlur,
209
- lightBackground = _ref.lightBackground,
210
196
  noBorder = _ref.noBorder,
211
197
  instructionsTextArea = _ref.instructionsTextArea,
212
198
  loadingIcon = _ref.loadingIcon,
@@ -215,7 +201,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
215
201
  descriptionToolTip = _ref.descriptionToolTip,
216
202
  borderRadius = _ref.borderRadius,
217
203
  fieldLabel = _ref.fieldLabel,
218
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius", "fieldLabel"]);
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"]);
219
205
 
220
206
  var textInputDomNode = React.useRef(null);
221
207
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -279,7 +265,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
279
265
  icon: icon,
280
266
  id: "text-input-".concat(uniqueId),
281
267
  key: uniqueId,
282
- lightBackground: lightBackground,
283
268
  padding: padding,
284
269
  onChange: function onChange(e) {
285
270
  if (e.target.value) {
@@ -359,7 +344,6 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
359
344
  className: defaultTheme.PropTypes.string,
360
345
  style: defaultTheme.PropTypes.object,
361
346
  padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
362
- lightBackground: defaultTheme.PropTypes.bool,
363
347
  onChange: defaultTheme.PropTypes.func,
364
348
  onBlur: defaultTheme.PropTypes.func,
365
349
  noBorder: defaultTheme.PropTypes.bool,
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-cfc495fc.js');
3
+ var CompactTextInput = require('../../CompactTextInput-77fa43d7.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-a869b1a9.js');
3
+ var TextArea = require('../../TextArea-cc9bce9a.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -7,10 +7,10 @@ var Button = require('../Button-49f82b31.js');
7
7
  var Checkbox = require('../Checkbox-68dc38a8.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-96137f48.js');
9
9
  var CompactStarRating = require('../CompactStarRating-15c1b812.js');
10
- var CompactTextInput = require('../CompactTextInput-cfc495fc.js');
10
+ var CompactTextInput = require('../CompactTextInput-77fa43d7.js');
11
11
  var MultiSelect = require('../MultiSelect-efd60232.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-a869b1a9.js');
13
+ var TextArea = require('../TextArea-cc9bce9a.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-e6e5cb90.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.3.0-rc.24",
3
+ "version": "1.3.0-rc.25",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-036bf8bc.js');
3
+ var AssetGallery = require('../../AssetGallery-a049cc20.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -38,10 +38,10 @@ require('react-select-async-paginate');
38
38
  require('../../react-select-creatable.esm-2f23d6c6.js');
39
39
  require('react-dom');
40
40
  require('../../CompactStarRating-15c1b812.js');
41
- require('../../CompactTextInput-cfc495fc.js');
41
+ require('../../CompactTextInput-77fa43d7.js');
42
42
  require('../../MultiSelect-efd60232.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-a869b1a9.js');
44
+ require('../../TextArea-cc9bce9a.js');
45
45
  require('../../Switch-4a41585f.js');
46
46
  require('../../ContextMenuItem-ba2b697e.js');
47
47
 
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-912c3469.js');
3
+ var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-2197a160.js');
4
4
  require('../../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-9a0fd247.js');
3
+ var Instructions = require('../../Instructions-eb7065cc.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -25,7 +25,7 @@ require('../../react-select-creatable.esm-2f23d6c6.js');
25
25
  require('react-dom');
26
26
  require('../../close-ebf2f3cf.js');
27
27
  require('../../expand-more-94585605.js');
28
- require('../../TextArea-a869b1a9.js');
28
+ require('../../TextArea-cc9bce9a.js');
29
29
  require('../../useMergedRefs-b6d2f8fc.js');
30
30
  require('../../edit-note-c47d292e.js');
31
31
 
package/widgets/index.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-036bf8bc.js');
5
+ var AssetGallery = require('../AssetGallery-a049cc20.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
- var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
- var Instructions = require('../Instructions-9a0fd247.js');
7
+ var AssetPreviewTopBar = require('../AssetPreviewTopBar-2197a160.js');
8
+ var Instructions = require('../Instructions-eb7065cc.js');
9
9
  require('../defaultTheme-ea44e34a.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -42,10 +42,10 @@ require('react-select-async-paginate');
42
42
  require('../react-select-creatable.esm-2f23d6c6.js');
43
43
  require('react-dom');
44
44
  require('../CompactStarRating-15c1b812.js');
45
- require('../CompactTextInput-cfc495fc.js');
45
+ require('../CompactTextInput-77fa43d7.js');
46
46
  require('../MultiSelect-efd60232.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-a869b1a9.js');
48
+ require('../TextArea-cc9bce9a.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51