@ntbjs/react-components 1.1.0-beta.97 → 1.1.0-beta.98

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 (15) hide show
  1. package/{AssetGallery-b7b6d50d.js → AssetGallery-884245c0.js} +5 -5
  2. package/{Checkbox-85394137.js → Checkbox-d80544d6.js} +12 -13
  3. package/{CompactStarRating-06048c15.js → CompactStarRating-77f54a07.js} +8 -4
  4. package/{Radio-c811ce4a.js → Radio-70259f02.js} +6 -3
  5. package/{Switch-1334fb9a.js → Switch-a7cbb0c0.js} +2 -2
  6. package/{TextInput-8658006a.js → TextInput-c0ef017d.js} +20 -19
  7. package/inputs/Checkbox/index.js +1 -1
  8. package/inputs/CompactStarRating/index.js +1 -1
  9. package/inputs/Radio/index.js +1 -1
  10. package/inputs/Switch/index.js +1 -1
  11. package/inputs/TextInput/index.js +1 -1
  12. package/inputs/index.js +5 -5
  13. package/package.json +1 -1
  14. package/widgets/AssetGallery/index.js +6 -6
  15. package/widgets/index.js +6 -6
package/{AssetGallery-b7b6d50d.js → AssetGallery-884245c0.js} RENAMED
@@ -8,15 +8,15 @@ var ResizeObserver = require('resize-observer-polyfill');
8
8
  var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
9
9
  var ActionButton = require('./ActionButton-c3f5ed94.js');
10
10
  require('./Button-432f87c6.js');
11
- require('./Checkbox-85394137.js');
11
+ require('./Checkbox-d80544d6.js');
12
12
  require('./CompactAutocompleteSelect-45b12179.js');
13
- require('./CompactStarRating-06048c15.js');
13
+ require('./CompactStarRating-77f54a07.js');
14
14
  require('./CompactTextInput-8750600d.js');
15
15
  require('./MultiSelect-01a257b8.js');
16
- require('./Radio-c811ce4a.js');
16
+ require('./Radio-70259f02.js');
17
17
  require('./TextArea-1ed790e5.js');
18
- require('./TextInput-8658006a.js');
19
- require('./Switch-1334fb9a.js');
18
+ require('./TextInput-c0ef017d.js');
19
+ require('./Switch-a7cbb0c0.js');
20
20
  require('./Alert-3e4f8be1.js');
21
21
  require('./Badge-9461fc7f.js');
22
22
  require('./Popover-d3a4b72e.js');
package/{Checkbox-85394137.js → Checkbox-d80544d6.js} RENAMED
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
15
15
  var checkboxSize = '18px';
16
16
  var Checkbox$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
17
17
  var CheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n transform: scale(0.1);\n transition: all 200ms;\n position: absolute;\n width: 12px;\n top: 4px;\n left: 3px;\n color: ", ";\n\n svg {\n width: 100%;\n display: block;\n }\n"])), function (props) {
@@ -20,22 +20,24 @@ var CheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTh
20
20
  var IndeterminateCheckIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n transform: scale(0.1);\n transition: all 200ms;\n position: absolute;\n height: 2px;\n top: 8px;\n left: 4px;\n background: ", ";\n width: 10px;\n"])), function (props) {
21
21
  return props.theme.getColor('gray-100');
22
22
  });
23
- var CheckboxLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n position: relative;\n cursor: pointer;\n user-select: none;\n min-height: ", ";\n text-align: left;\n flex-wrap: wrap;\n flex: 1;\n line-height: ", ";\n margin-right: auto;\n\n & input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n &::before {\n content: '';\n border: 2px solid ", ";\n border-radius: 2px;\n transition: all 200ms;\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n }\n\n &:has(input[type='checkbox']:checked) {\n &::before {\n background: ", ";\n border-color: ", ";\n }\n }\n\n &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &:has(input[type='checkbox'][data-indeterminate='true']:checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n ", "\n"])), checkboxSize, checkboxSize, function (props) {
23
+ var CheckboxLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-flex;\n position: relative;\n cursor: pointer;\n user-select: none;\n min-height: ", ";\n text-align: left;\n flex-wrap: wrap;\n flex: 1;\n line-height: ", ";\n margin-right: auto;\n\n & input[type='checkbox'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n margin: 0;\n }\n\n &::before {\n content: '';\n border: 2px solid ", ";\n border-radius: 2px;\n transition: all 200ms;\n width: ", ";\n height: ", ";\n box-sizing: border-box;\n }\n\n &:has(input[type='checkbox']:checked) {\n &::before {\n background: ", ";\n border-color: ", ";\n }\n }\n\n &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n &:has(input[type='checkbox'][data-indeterminate='true']:checked) {\n ", " {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n ", "\n\n ", "\n"])), checkboxSize, checkboxSize, function (props) {
24
24
  return props.theme.getColor('gray-300');
25
25
  }, checkboxSize, checkboxSize, function (props) {
26
26
  return props.theme.getColor('emerald-500');
27
27
  }, function (props) {
28
28
  return props.theme.getColor('emerald-500');
29
29
  }, CheckIcon, IndeterminateCheckIcon, function (props) {
30
- return props.disabled && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
30
+ return props.readOnly && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: default;\n pointer-events: none;\n user-select: text;\n "])));
31
+ }, function (props) {
32
+ return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
31
33
  });
32
- var CheckboxVisualLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n flex: 1;\n\n ", ";\n"])), function (props) {
34
+ var CheckboxVisualLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 10px;\n font-weight: 400;\n font-size: 0.875rem;\n flex: 1;\n\n ", ";\n"])), function (props) {
33
35
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
34
36
  });
35
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n margin: 0.375rem 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
37
+ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n margin: 0.375rem 0 0 0;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n"])), function (props) {
36
38
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
37
39
  }, function (props) {
38
- return props.error && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
40
+ return props.error && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
39
41
  });
40
42
 
41
43
  var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forwardedRef) {
@@ -76,18 +78,15 @@ var Checkbox = React__default['default'].forwardRef(function Checkbox(_ref, forw
76
78
 
77
79
  return null;
78
80
  }, [description, error]);
79
- var onClick = React.useCallback(function (event) {
80
- if (readOnly) {
81
- event.preventDefault();
82
- }
83
- }, [readOnly]);
84
81
  return React__default['default'].createElement(Checkbox$1, {
85
82
  className: className,
83
+ disabled: disabled,
84
+ readOnly: readOnly,
86
85
  style: style
87
86
  }, React__default['default'].createElement(CheckboxLabel, {
88
87
  disabled: disabled,
89
- htmlFor: uniqueId,
90
- onClick: onClick
88
+ readOnly: readOnly,
89
+ htmlFor: uniqueId
91
90
  }, React__default['default'].createElement("input", {
92
91
  ref: forwardedRef,
93
92
  id: uniqueId,
package/{CompactStarRating-06048c15.js → CompactStarRating-77f54a07.js} RENAMED
@@ -181,9 +181,12 @@ var CompactStarRating = React__default['default'].forwardRef(function CompactSta
181
181
  }, [value, defaultValue]);
182
182
  React.useEffect(function () {
183
183
  inputRef.current.value = String(rating);
184
- onChange({
185
- target: inputRef.current
186
- });
184
+
185
+ if (rating != value || rating != defaultValue) {
186
+ onChange({
187
+ target: inputRef.current
188
+ });
189
+ }
187
190
  }, [rating]);
188
191
 
189
192
  var starIconRender = function starIconRender(key) {
@@ -269,7 +272,8 @@ CompactStarRating.defaultProps = {
269
272
  icon: React__default['default'].createElement(SvgStar, null),
270
273
  iconFill: React__default['default'].createElement(SvgStarFilled, null),
271
274
  hidden: false,
272
- state: ''
275
+ state: '',
276
+ onChange: function onChange() {}
273
277
  };
274
278
  CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
275
279
  readOnly: defaultTheme.PropTypes.bool,
package/{Radio-c811ce4a.js → Radio-70259f02.js} RENAMED
@@ -11,19 +11,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
13
 
14
- var _templateObject, _templateObject2, _templateObject3;
14
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
15
15
  var radioSize = '18px';
16
16
  var RadioLabel = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n padding-left: ", ";\n font-weight: 400;\n font-size: 0.875rem;\n\n ", ";\n"])), polished.math("".concat(radioSize, " + 10px")), function (props) {
17
17
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
18
18
  });
19
- var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n &:has(input:checked) {\n ::before {\n border-color: ", ";\n }\n\n ::after {\n background: ", ";\n transform: scale(1);\n }\n\n ", " {\n opacity: 1;\n }\n }\n & {\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n ", "\n"])), radioSize, function (props) {
19
+ var Radio$1 = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n position: relative;\n cursor: pointer;\n line-height: ", ";\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n border: 2px solid ", ";\n width: ", ";\n height: ", ";\n top: 0;\n border-radius: 50%;\n transition: all 200ms;\n box-sizing: border-box;\n }\n\n &::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n top: 5px;\n left: 5px;\n border-radius: 50%;\n transform: scale(0);\n transition: all 200ms;\n }\n\n &:has(input:checked) {\n ::before {\n border-color: ", ";\n }\n\n ::after {\n background: ", ";\n transform: scale(1);\n }\n\n ", " {\n opacity: 1;\n }\n }\n & {\n input[type='radio'] {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n }\n }\n\n ", "\n\n ", "\n"])), radioSize, function (props) {
20
20
  return props.theme.getColor('gray-300');
21
21
  }, radioSize, radioSize, function (props) {
22
22
  return props.theme.getColor('emerald-500');
23
23
  }, function (props) {
24
24
  return props.theme.getColor('emerald-500');
25
25
  }, RadioLabel, function (props) {
26
- return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n "])));
26
+ return props.readOnly && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n pointer-events: none;\n user-select: text;\n "])));
27
+ }, function (props) {
28
+ return props.disabled && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n user-select: text;\n "])));
27
29
  });
28
30
 
29
31
  var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedRef) {
@@ -47,6 +49,7 @@ var Radio = React__default['default'].forwardRef(function Radio(_ref, forwardedR
47
49
  return React__default['default'].createElement(Radio$1, {
48
50
  htmlFor: uniqueId,
49
51
  disabled: disabled,
52
+ readOnly: readOnly,
50
53
  className: className,
51
54
  style: style
52
55
  }, React__default['default'].createElement("input", defaultTheme._extends({
package/{Switch-1334fb9a.js → Switch-a7cbb0c0.js} RENAMED
@@ -14,9 +14,9 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
15
15
  var switchButtonSize = '16px';
16
16
  var Switch$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n * {\n box-sizing: border-box;\n }\n\n display: flex;\n flex-direction: column;\n\n ", "\n\n ", "\n"])), function (props) {
17
- return props.readOnly && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n cursor: default;\n > * {\n pointer-events: none;\n }\n "])));
17
+ return props.readOnly && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n > * {\n pointer-events: none;\n user-select: text;\n }\n "])));
18
18
  }, function (props) {
19
- return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n }\n "])));
19
+ return props.disabled && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n * {\n pointer-events: none;\n user-select: text;\n }\n "])));
20
20
  });
21
21
  var SwitchIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n display: inline-block;\n position: relative;\n ", "\n height: ", ";\n width: 32px;\n border-radius: 20px;\n border: 1px solid;\n ", "\n transition: background 200ms;\n"])), function (props) {
22
22
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('gray-200'));
package/{TextInput-8658006a.js → TextInput-c0ef017d.js} RENAMED
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
15
15
 
16
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
16
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
17
17
  var activeLabel = styled.css(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
18
18
  var Adornment = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n flex-shrink: 0;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: initial;\n padding: 13px 10px;\n\n ", "\n ", "\n border: 1px solid;\n ", "\n border-radius: 3px;\n ", "\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem;\n\n ", "\n ", "\n"])), function (props) {
19
19
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
@@ -38,18 +38,20 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
38
38
  }, function (props) {
39
39
  return props.error && props.theme.themeProp('color', '#CB968F', '#CB968F');
40
40
  });
41
- var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n ", "\n ", "\n border: 1px solid;\n ", ";\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n transition: opacity 350ms;\n }\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n"])), function (props) {
41
+ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n line-height: 1;\n padding: 13px 10px;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n transition: border-color 350ms;\n height: 2.75rem !important; // important is needed to override the default Foundation styling used in the Mediebank;\n margin-bottom: 0; // needed to override the default Foundation styling used in the Mediebank;\n ", "\n ", "\n border: 1px solid;\n ", ";\n\n ", "\n\n ", "\n ", "\n ", "\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n\n &&:hover:not(:focus) {\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n transition: opacity 350ms;\n }\n }\n\n :focus {\n outline: none;\n border-color: ", " !important\n ", "\n"])), function (props) {
42
42
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
43
43
  }, function (props) {
44
44
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
45
45
  }, function (props) {
46
46
  return props.noBorder || props.readOnly ? 'border-color: transparent !important' : props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
47
47
  }, function (props) {
48
- return props.warning && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
48
+ return props.readOnly && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n user-select: text;\n cursor: default;\n "])));
49
49
  }, function (props) {
50
- return props.error && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
50
+ return props.warning && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('orange-500'));
51
51
  }, function (props) {
52
- return props.hasIcon && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
52
+ return props.error && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n border-color: ", " !important;\n "])), props.theme.getColor('red-500'));
53
+ }, function (props) {
54
+ return props.hasIcon && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 35px;\n "])));
53
55
  }, function (props) {
54
56
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
55
57
  }, function (props) {
@@ -58,36 +60,36 @@ var TextInputField = styled__default['default'].input.attrs(defaultTheme.applyDe
58
60
  return props.noBorder ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-200')) : 'background: transparent';
59
61
  }, InputIconContainer, function (props) {
60
62
  return props.theme.getColor('gray-600');
63
+ }, function (props) {
64
+ return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n outline: none;\n "])));
61
65
  });
62
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 15px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n ", "\n"])), function (props) {
66
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 15px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n ", "\n"])), function (props) {
63
67
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'));
64
68
  }, function (props) {
65
69
  return props.theme.themeProp('opacity', 0.6, 0.5);
66
70
  }, function (props) {
67
71
  return props.theme.themeProp('background', "linear-gradient(0deg, ".concat(props.theme.getColor('gray-900'), " calc(50% + 1px), transparent 50%)"), "linear-gradient(0deg, ".concat(props.theme.getColor('white'), " calc(50% + 1px), transparent 50%)"));
68
72
  }, function (props) {
69
- return (props.hasPlaceholder || props.hasAdornments) && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
73
+ return (props.hasPlaceholder || props.hasAdornments) && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
70
74
  }, function (props) {
71
- return props.hasIcon && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
75
+ return props.hasIcon && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n left: 35px;\n "])));
72
76
  });
73
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject16 || (_templateObject16 = 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"])));
74
- var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n\n ", "\n ", " \n } \n \n}\n"])), function (props) {
75
- return props.readOnly && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n cursor: default;\n > * {\n pointer-events: none;\n }\n "])));
76
- }, function (props) {
77
- return props.disabled && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n > * {\n pointer-events: none;\n }\n "])));
77
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
78
+ var TextInput$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n\n ", "\n\n &:focus-within {\n ", " {\n ", ";\n }\n\n ", " {\n svg {\n opacity: 1;\n }\n }\n }\n\n ", ":not(:placeholder-shown) + ", " {\n ", ";\n ", "\n\n ", "\n ", " \n } \n \n}\n"])), function (props) {
79
+ return props.disabled && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n user-select: none;\n opacity: 0.5;\n cursor: not-allowed;\n > * {\n pointer-events: none;\n }\n "])));
78
80
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
79
81
  return props.error && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
80
82
  }, function (props) {
81
- return props.error && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('red-500'));
83
+ return props.error && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('red-500'));
82
84
  }, function (props) {
83
- return props.warning && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('orange-500'));
85
+ return props.warning && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n color: ", ";\n "])), props.theme.getColor('orange-500'));
84
86
  });
85
- var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject22 || (_templateObject22 = 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) {
87
+ var Description = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
86
88
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
87
89
  }, function (props) {
88
- return props.error && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
90
+ return props.error && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
89
91
  }, function (props) {
90
- return props.warning && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
92
+ return props.warning && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
91
93
  });
92
94
 
93
95
  var TextInput = React__default['default'].forwardRef(function TextInput(_ref, forwardedRef) {
@@ -152,7 +154,6 @@ var TextInput = React__default['default'].forwardRef(function TextInput(_ref, fo
152
154
  return React__default['default'].createElement(TextInput$1, {
153
155
  error: hasError,
154
156
  disabled: disabled,
155
- readOnly: readOnly,
156
157
  warning: hasWarning,
157
158
  className: className,
158
159
  style: style
package/inputs/Checkbox/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Checkbox = require('../../Checkbox-85394137.js');
3
+ var Checkbox = require('../../Checkbox-d80544d6.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/CompactStarRating/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-06048c15.js');
3
+ var CompactStarRating = require('../../CompactStarRating-77f54a07.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/Radio/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Radio = require('../../Radio-c811ce4a.js');
3
+ var Radio = require('../../Radio-70259f02.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/Switch/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Switch = require('../../Switch-1334fb9a.js');
3
+ var Switch = require('../../Switch-a7cbb0c0.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/TextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-8658006a.js');
3
+ var TextInput = require('../../TextInput-c0ef017d.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var ActionButton = require('../ActionButton-c3f5ed94.js');
6
6
  var Button = require('../Button-432f87c6.js');
7
- var Checkbox = require('../Checkbox-85394137.js');
7
+ var Checkbox = require('../Checkbox-d80544d6.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-45b12179.js');
9
- var CompactStarRating = require('../CompactStarRating-06048c15.js');
9
+ var CompactStarRating = require('../CompactStarRating-77f54a07.js');
10
10
  var CompactTextInput = require('../CompactTextInput-8750600d.js');
11
11
  var MultiSelect = require('../MultiSelect-01a257b8.js');
12
- var Radio = require('../Radio-c811ce4a.js');
12
+ var Radio = require('../Radio-70259f02.js');
13
13
  var TextArea = require('../TextArea-1ed790e5.js');
14
- var TextInput = require('../TextInput-8658006a.js');
15
- var Switch = require('../Switch-1334fb9a.js');
14
+ var TextInput = require('../TextInput-c0ef017d.js');
15
+ var Switch = require('../Switch-a7cbb0c0.js');
16
16
  require('../defaultTheme-50f2b88f.js');
17
17
  require('styled-components');
18
18
  require('react');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.1.0-beta.97",
3
+ "version": "1.1.0-beta.98",
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",
package/widgets/AssetGallery/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-b7b6d50d.js');
3
+ var AssetGallery = require('../../AssetGallery-884245c0.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -16,7 +16,7 @@ require('@tippyjs/react');
16
16
  require('../../shift-away-subtle-cfdf1dbe.js');
17
17
  require('../../ContextMenu-d088833b.js');
18
18
  require('../../expand-more-94585605.js');
19
- require('../../Checkbox-85394137.js');
19
+ require('../../Checkbox-d80544d6.js');
20
20
  require('nanoid');
21
21
  require('../../CompactAutocompleteSelect-45b12179.js');
22
22
  require('../../check-555d831b.js');
@@ -25,7 +25,7 @@ require('react-select-async-paginate');
25
25
  require('../../react-select-creatable.esm-7231b55e.js');
26
26
  require('react-dom');
27
27
  require('../../close-ebf2f3cf.js');
28
- require('../../CompactStarRating-06048c15.js');
28
+ require('../../CompactStarRating-77f54a07.js');
29
29
  require('../../CompactTextInput-8750600d.js');
30
30
  require('../../edit-note-c47d292e.js');
31
31
  require('../../Alert-3e4f8be1.js');
@@ -34,10 +34,10 @@ require('../../Tab-9936ddea.js');
34
34
  require('../../Tabs-93f6362c.js');
35
35
  require('../../Tooltip-1b7b0052.js');
36
36
  require('../../MultiSelect-01a257b8.js');
37
- require('../../Radio-c811ce4a.js');
37
+ require('../../Radio-70259f02.js');
38
38
  require('../../TextArea-1ed790e5.js');
39
- require('../../TextInput-8658006a.js');
40
- require('../../Switch-1334fb9a.js');
39
+ require('../../TextInput-c0ef017d.js');
40
+ require('../../Switch-a7cbb0c0.js');
41
41
  require('../../warning-circle-24522402.js');
42
42
 
43
43
 
package/widgets/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-b7b6d50d.js');
5
+ var AssetGallery = require('../AssetGallery-884245c0.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
8
  var Instructions = require('../Instructions-ca4e3455.js');
@@ -20,7 +20,7 @@ require('polished');
20
20
  require('@tippyjs/react');
21
21
  require('../shift-away-subtle-cfdf1dbe.js');
22
22
  require('../expand-more-94585605.js');
23
- require('../Checkbox-85394137.js');
23
+ require('../Checkbox-d80544d6.js');
24
24
  require('nanoid');
25
25
  require('../CompactAutocompleteSelect-45b12179.js');
26
26
  require('../check-555d831b.js');
@@ -29,7 +29,7 @@ require('react-select-async-paginate');
29
29
  require('../react-select-creatable.esm-7231b55e.js');
30
30
  require('react-dom');
31
31
  require('../close-ebf2f3cf.js');
32
- require('../CompactStarRating-06048c15.js');
32
+ require('../CompactStarRating-77f54a07.js');
33
33
  require('../CompactTextInput-8750600d.js');
34
34
  require('../edit-note-c47d292e.js');
35
35
  require('../Alert-3e4f8be1.js');
@@ -38,10 +38,10 @@ require('../Tab-9936ddea.js');
38
38
  require('../Tabs-93f6362c.js');
39
39
  require('../Tooltip-1b7b0052.js');
40
40
  require('../MultiSelect-01a257b8.js');
41
- require('../Radio-c811ce4a.js');
41
+ require('../Radio-70259f02.js');
42
42
  require('../TextArea-1ed790e5.js');
43
- require('../TextInput-8658006a.js');
44
- require('../Switch-1334fb9a.js');
43
+ require('../TextInput-c0ef017d.js');
44
+ require('../Switch-a7cbb0c0.js');
45
45
  require('../warning-circle-24522402.js');
46
46
 
47
47