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

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.
@@ -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');
12
- require('./CompactAutocompleteSelect-45b12179.js');
13
- require('./CompactStarRating-06048c15.js');
11
+ require('./Checkbox-d80544d6.js');
12
+ require('./CompactAutocompleteSelect-0c08a1aa.js');
13
+ require('./CompactStarRating-77f54a07.js');
14
14
  require('./CompactTextInput-8750600d.js');
15
- require('./MultiSelect-01a257b8.js');
16
- require('./Radio-c811ce4a.js');
15
+ require('./MultiSelect-abf02057.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');
@@ -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,
@@ -8,7 +8,7 @@ var check = require('./check-555d831b.js');
8
8
  var styled = require('styled-components');
9
9
  var Select = require('react-select');
10
10
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
11
- var reactSelectCreatable_esm = require('./react-select-creatable.esm-7231b55e.js');
11
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-c4ae6839.js');
12
12
  var close = require('./close-ebf2f3cf.js');
13
13
  var expandMore = require('./expand-more-94585605.js');
14
14
 
@@ -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,
@@ -4,7 +4,7 @@ var defaultTheme = require('./defaultTheme-50f2b88f.js');
4
4
  var lodash = require('lodash');
5
5
  var React = require('react');
6
6
  var warningCircle = require('./warning-circle-24522402.js');
7
- var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-45b12179.js');
7
+ var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-0c08a1aa.js');
8
8
  var TextArea = require('./TextArea-1ed790e5.js');
9
9
  var styled = require('styled-components');
10
10
 
@@ -6,7 +6,7 @@ var nanoid = require('nanoid');
6
6
  var styled = require('styled-components');
7
7
  var close = require('./close-ebf2f3cf.js');
8
8
  var Select = require('react-select');
9
- var reactSelectCreatable_esm = require('./react-select-creatable.esm-7231b55e.js');
9
+ var reactSelectCreatable_esm = require('./react-select-creatable.esm-c4ae6839.js');
10
10
  var reactSelectAsyncPaginate = require('react-select-async-paginate');
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -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({
@@ -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'));
@@ -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
@@ -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');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-45b12179.js');
3
+ var CompactAutocompleteSelect = require('../../CompactAutocompleteSelect-0c08a1aa.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -9,7 +9,7 @@ require('react');
9
9
  require('../../check-555d831b.js');
10
10
  require('react-select');
11
11
  require('react-select-async-paginate');
12
- require('../../react-select-creatable.esm-7231b55e.js');
12
+ require('../../react-select-creatable.esm-c4ae6839.js');
13
13
  require('react-dom');
14
14
  require('../../close-ebf2f3cf.js');
15
15
  require('../../expand-more-94585605.js');
@@ -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');
@@ -1,13 +1,13 @@
1
1
  'use strict';
2
2
 
3
- var MultiSelect = require('../../MultiSelect-01a257b8.js');
3
+ var MultiSelect = require('../../MultiSelect-abf02057.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
8
8
  require('../../close-ebf2f3cf.js');
9
9
  require('react-select');
10
- require('../../react-select-creatable.esm-7231b55e.js');
10
+ require('../../react-select-creatable.esm-c4ae6839.js');
11
11
  require('react-dom');
12
12
  require('react-select-async-paginate');
13
13
 
@@ -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');
@@ -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');
@@ -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');
8
- var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-45b12179.js');
9
- var CompactStarRating = require('../CompactStarRating-06048c15.js');
7
+ var Checkbox = require('../Checkbox-d80544d6.js');
8
+ var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-0c08a1aa.js');
9
+ var CompactStarRating = require('../CompactStarRating-77f54a07.js');
10
10
  var CompactTextInput = require('../CompactTextInput-8750600d.js');
11
- var MultiSelect = require('../MultiSelect-01a257b8.js');
12
- var Radio = require('../Radio-c811ce4a.js');
11
+ var MultiSelect = require('../MultiSelect-abf02057.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');
@@ -27,7 +27,7 @@ require('nanoid');
27
27
  require('../check-555d831b.js');
28
28
  require('react-select');
29
29
  require('react-select-async-paginate');
30
- require('../react-select-creatable.esm-7231b55e.js');
30
+ require('../react-select-creatable.esm-c4ae6839.js');
31
31
  require('react-dom');
32
32
  require('../close-ebf2f3cf.js');
33
33
  require('../edit-note-c47d292e.js');
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.1",
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",
@@ -3353,8 +3353,9 @@ function observeMove(element, onMove) {
3353
3353
  let timeoutId;
3354
3354
  const root = getDocumentElement(element);
3355
3355
  function cleanup() {
3356
+ var _io;
3356
3357
  clearTimeout(timeoutId);
3357
- io && io.disconnect();
3358
+ (_io = io) == null || _io.disconnect();
3358
3359
  io = null;
3359
3360
  }
3360
3361
  function refresh(skip, threshold) {
@@ -3460,7 +3461,8 @@ function autoUpdate(reference, floating, update, options) {
3460
3461
  resizeObserver.unobserve(floating);
3461
3462
  cancelAnimationFrame(reobserveFrame);
3462
3463
  reobserveFrame = requestAnimationFrame(() => {
3463
- resizeObserver && resizeObserver.observe(floating);
3464
+ var _resizeObserver;
3465
+ (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
3464
3466
  });
3465
3467
  }
3466
3468
  update();
@@ -3485,12 +3487,13 @@ function autoUpdate(reference, floating, update, options) {
3485
3487
  }
3486
3488
  update();
3487
3489
  return () => {
3490
+ var _resizeObserver2;
3488
3491
  ancestors.forEach(ancestor => {
3489
3492
  ancestorScroll && ancestor.removeEventListener('scroll', update);
3490
3493
  ancestorResize && ancestor.removeEventListener('resize', update);
3491
3494
  });
3492
- cleanupIo && cleanupIo();
3493
- resizeObserver && resizeObserver.disconnect();
3495
+ cleanupIo == null || cleanupIo();
3496
+ (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
3494
3497
  resizeObserver = null;
3495
3498
  if (animationFrame) {
3496
3499
  cancelAnimationFrame(frameId);
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-b7b6d50d.js');
3
+ var AssetGallery = require('../../AssetGallery-f01f30eb.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('react');
@@ -16,16 +16,16 @@ 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
- require('../../CompactAutocompleteSelect-45b12179.js');
21
+ require('../../CompactAutocompleteSelect-0c08a1aa.js');
22
22
  require('../../check-555d831b.js');
23
23
  require('react-select');
24
24
  require('react-select-async-paginate');
25
- require('../../react-select-creatable.esm-7231b55e.js');
25
+ require('../../react-select-creatable.esm-c4ae6839.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');
@@ -33,11 +33,11 @@ require('../../Badge-9461fc7f.js');
33
33
  require('../../Tab-9936ddea.js');
34
34
  require('../../Tabs-93f6362c.js');
35
35
  require('../../Tooltip-1b7b0052.js');
36
- require('../../MultiSelect-01a257b8.js');
37
- require('../../Radio-c811ce4a.js');
36
+ require('../../MultiSelect-abf02057.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
 
@@ -1,17 +1,17 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-ca4e3455.js');
3
+ var Instructions = require('../../Instructions-ed68e52f.js');
4
4
  require('../../defaultTheme-50f2b88f.js');
5
5
  require('styled-components');
6
6
  require('lodash');
7
7
  require('react');
8
8
  require('../../warning-circle-24522402.js');
9
- require('../../CompactAutocompleteSelect-45b12179.js');
9
+ require('../../CompactAutocompleteSelect-0c08a1aa.js');
10
10
  require('nanoid');
11
11
  require('../../check-555d831b.js');
12
12
  require('react-select');
13
13
  require('react-select-async-paginate');
14
- require('../../react-select-creatable.esm-7231b55e.js');
14
+ require('../../react-select-creatable.esm-c4ae6839.js');
15
15
  require('react-dom');
16
16
  require('../../close-ebf2f3cf.js');
17
17
  require('../../expand-more-94585605.js');
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-b7b6d50d.js');
5
+ var AssetGallery = require('../AssetGallery-f01f30eb.js');
6
6
  var ContextMenu = require('../ContextMenu-d088833b.js');
7
7
  var AssetPreviewTopBar = require('../AssetPreviewTopBar-449e6019.js');
8
- var Instructions = require('../Instructions-ca4e3455.js');
8
+ var Instructions = require('../Instructions-ed68e52f.js');
9
9
  require('../defaultTheme-50f2b88f.js');
10
10
  require('styled-components');
11
11
  require('react');
@@ -20,16 +20,16 @@ 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
- require('../CompactAutocompleteSelect-45b12179.js');
25
+ require('../CompactAutocompleteSelect-0c08a1aa.js');
26
26
  require('../check-555d831b.js');
27
27
  require('react-select');
28
28
  require('react-select-async-paginate');
29
- require('../react-select-creatable.esm-7231b55e.js');
29
+ require('../react-select-creatable.esm-c4ae6839.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');
@@ -37,11 +37,11 @@ require('../Badge-9461fc7f.js');
37
37
  require('../Tab-9936ddea.js');
38
38
  require('../Tabs-93f6362c.js');
39
39
  require('../Tooltip-1b7b0052.js');
40
- require('../MultiSelect-01a257b8.js');
41
- require('../Radio-c811ce4a.js');
40
+ require('../MultiSelect-abf02057.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