@ntbjs/react-components 1.3.0-rc.17 → 1.3.0-rc.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/{AssetGallery-d0c099e8.js → AssetGallery-85254aaf.js} +2 -2
  2. package/{CompactTextInput-c0d45782.js → CompactTextInput-cfc495fc.js} +35 -33
  3. package/{Instructions-2babb8a3.js → Instructions-9a0fd247.js} +1 -1
  4. package/{TextArea-18fbcc9f.js → TextArea-a869b1a9.js} +3 -3
  5. package/inputs/CompactTextInput/index.js +1 -1
  6. package/inputs/TextArea/index.js +1 -1
  7. package/inputs/index.js +2 -2
  8. package/package.json +2 -2
  9. package/widgets/AssetGallery/index.js +3 -3
  10. package/widgets/Instructions/index.js +2 -2
  11. package/widgets/index.js +4 -4
package/{AssetGallery-d0c099e8.js → AssetGallery-85254aaf.js} RENAMED
@@ -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-c0d45782.js');
24
+ require('./CompactTextInput-cfc495fc.js');
25
25
  require('./MultiSelect-efd60232.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-18fbcc9f.js');
27
+ require('./TextArea-a869b1a9.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  require('./AsyncSelect-090b92ae.js');
package/{CompactTextInput-c0d45782.js → CompactTextInput-cfc495fc.js} RENAMED
@@ -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;
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) {
@@ -70,36 +70,39 @@ var fadeOutCheck = styled.keyframes(_templateObject4 || (_templateObject4 = defa
70
70
  var linkColor = styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n ", "\n"])), function (props) {
71
71
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
72
72
  });
73
- var commonAnchorTagStyle = styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 8px;\n\n a,\n && {\n font-size: 0.875rem;\n }\n"])));
74
- var CompactTextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ", ";\n"])), function (props) {
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) {
75
78
  return props.theme.primaryFontFamily;
76
79
  });
77
- var Label = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = 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) {
78
81
  return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'));
79
82
  }, function (props) {
80
- return props.disabled && styled.css(_templateObject9 || (_templateObject9 = 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 "])));
81
84
  });
82
- var InputContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject10 || (_templateObject10 = 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) {
83
86
  return props.$hasLabel ? '66.66%' : '100%';
84
87
  });
85
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = 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) {
86
89
  return props.fadeIn ? 0 : 1;
87
90
  }, function (props) {
88
91
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
89
92
  }, function (props) {
90
93
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
91
94
  });
92
- var InputSuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject12 || (_templateObject12 = 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) {
93
96
  return props.fadeIn ? 0 : 1;
94
97
  }, function (props) {
95
98
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
96
99
  }, function (props) {
97
100
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
98
101
  });
99
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = 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) {
100
- return props.theme.themeProp('background', styled.css(_templateObject14 || (_templateObject14 = 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) {
101
104
  return props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700');
102
- }), styled.css(_templateObject15 || (_templateObject15 = 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) {
103
106
  return props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100');
104
107
  }));
105
108
  }, function (props) {
@@ -109,12 +112,12 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
109
112
  }, function (props) {
110
113
  return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
111
114
  });
112
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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) {
113
- return props.readOnly && styled.css(_templateObject17 || (_templateObject17 = 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 "])));
114
117
  }, function (props) {
115
- return props.disabled && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
118
+ return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
116
119
  }, function (props) {
117
- return props.type === 'success' && styled.css(_templateObject19 || (_templateObject19 = 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) {
118
121
  return props.type === 'success' ? fadeIn : fadeOut;
119
122
  });
120
123
  }, function (props) {
@@ -122,9 +125,9 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
122
125
  }, function (props) {
123
126
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
124
127
  }, function (props) {
125
- return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n ", "\n }\n &&:read-only {\n cursor: default;\n }\n "])), linkColor);
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);
126
129
  }, function (props) {
127
- return !props.readOnly && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
130
+ return !props.readOnly && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n background: none;\n "])));
128
131
  }, function (props) {
129
132
  return props.type === 'warning' && props.theme.themeProp('background', '#634E01', '#FFFDE8');
130
133
  }, function (props) {
@@ -134,11 +137,11 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
134
137
  }, function (props) {
135
138
  return props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)');
136
139
  }, function (props) {
137
- 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);
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,34 +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(_templateObject23 || (_templateObject23 = 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(_templateObject24 || (_templateObject24 = 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(_templateObject25 || (_templateObject25 = 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(_templateObject26 || (_templateObject26 = 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(_templateObject27 || (_templateObject27 = 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(_templateObject28 || (_templateObject28 = 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(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n "])));
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
177
  });
175
- var LinkPopoverContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n"])), commonAnchorTagStyle);
176
- var StyledLink = styled__default['default'].a.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n"])), commonAnchorTagStyle, linkColor);
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);
177
181
 
178
182
  var CompactTextInput = React__default['default'].forwardRef(function CompactTextInput(_ref, forwardedRef) {
179
183
  var label = _ref.label,
@@ -303,16 +307,14 @@ var CompactTextInput = React__default['default'].forwardRef(function CompactText
303
307
  placement: "bottom-start",
304
308
  zIndex: 999999,
305
309
  interactive: true
306
- }, input())), link && readOnly && React__default['default'].createElement(StyledLink, {
310
+ }, input())), link && readOnly && React__default['default'].createElement(ReadOnlyLinkContainer, null, React__default['default'].createElement(StyledLink, {
307
311
  href: link,
308
312
  rel: "noreferrer",
309
313
  style: {
310
- marginLeft: 3,
311
- marginTop: -2,
312
314
  display: 'inline-block'
313
315
  },
314
316
  target: linkTarget
315
- }, currentValue), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
317
+ }, currentValue)), !readOnly && !disabled && React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(InputIconContainer, {
316
318
  type: type
317
319
  }, React__default['default'].createElement(editNote.SvgEditNote, null)), lodash.isEmpty(label) && React__default['default'].createElement(InputSuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon))));
318
320
  });
package/{Instructions-2babb8a3.js → Instructions-9a0fd247.js} RENAMED
@@ -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-18fbcc9f.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 }; }
package/{TextArea-18fbcc9f.js → TextArea-a869b1a9.js} RENAMED
@@ -111,7 +111,7 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
111
111
  }, function (props) {
112
112
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-600'));
113
113
  }, function (props) {
114
- return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
114
+ return props.theme.themeProp('background', 'transparent', props.theme.getColor('white'));
115
115
  }, function (props) {
116
116
  return props.type === 'warning' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
117
117
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
@@ -146,10 +146,10 @@ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.apply
146
146
  var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n display: flex;\n padding: 0 10px 0 30px;\n opacity: 0.6;\n transition: opacity 250ms;\n ", "\n svg {\n margin-top: 12px;\n width: 15px;\n }\n"])), function (props) {
147
147
  return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
148
148
  });
149
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n flex-basis: ", ";\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n }\n }\n"])), function (props) {
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) {
150
150
  return props.$fieldLabel ? '66.66%' : '100%';
151
151
  }, function (props) {
152
- return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
152
+ return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n overflow: auto;\n "])));
153
153
  }, function (props) {
154
154
  return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
155
155
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-c0d45782.js');
3
+ var CompactTextInput = require('../../CompactTextInput-cfc495fc.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
package/inputs/TextArea/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-18fbcc9f.js');
3
+ var TextArea = require('../../TextArea-a869b1a9.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-c0d45782.js');
10
+ var CompactTextInput = require('../CompactTextInput-cfc495fc.js');
11
11
  var MultiSelect = require('../MultiSelect-efd60232.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-18fbcc9f.js');
13
+ var TextArea = require('../TextArea-a869b1a9.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.17",
3
+ "version": "1.3.0-rc.19",
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",
@@ -85,6 +85,6 @@
85
85
  "react-select-async-paginate": "^0.7.5",
86
86
  "react-spinners": "^0.13.8",
87
87
  "resize-observer-polyfill": "^1.5.1",
88
- "styled-components": "^5.3.5"
88
+ "styled-components": "^6.1.12"
89
89
  }
90
90
  }
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-d0c099e8.js');
3
+ var AssetGallery = require('../../AssetGallery-85254aaf.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-c0d45782.js');
41
+ require('../../CompactTextInput-cfc495fc.js');
42
42
  require('../../MultiSelect-efd60232.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-18fbcc9f.js');
44
+ require('../../TextArea-a869b1a9.js');
45
45
  require('../../Switch-4a41585f.js');
46
46
  require('../../AsyncSelect-090b92ae.js');
47
47
  require('../../ContextMenuItem-ba2b697e.js');
package/widgets/Instructions/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-2babb8a3.js');
3
+ var Instructions = require('../../Instructions-9a0fd247.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-18fbcc9f.js');
28
+ require('../../TextArea-a869b1a9.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-d0c099e8.js');
5
+ var AssetGallery = require('../AssetGallery-85254aaf.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
- var Instructions = require('../Instructions-2babb8a3.js');
8
+ var Instructions = require('../Instructions-9a0fd247.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-c0d45782.js');
45
+ require('../CompactTextInput-cfc495fc.js');
46
46
  require('../MultiSelect-efd60232.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-18fbcc9f.js');
48
+ require('../TextArea-a869b1a9.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../AsyncSelect-090b92ae.js');
51
51
  require('../ContextMenuItem-ba2b697e.js');