@ntbjs/react-components 1.2.0-rc.76 → 1.2.0-rc.78

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-3d52ddb9.js → AssetGallery-4e9adddb.js} +3 -3
  2. package/{AssetPreviewTopBar-c28715f7.js → AssetPreviewTopBar-912c3469.js} +8 -3
  3. package/{CompactStarRating-a754fc6f.js → CompactStarRating-80c241ab.js} +10 -4
  4. package/{CompactTextInput-baf13d5c.js → CompactTextInput-b12dc52e.js} +6 -2
  5. package/{Instructions-8b2df6f8.js → Instructions-41904cd4.js} +1 -1
  6. package/{TextArea-e1444a0b.js → TextArea-44ceac9f.js} +114 -165
  7. package/inputs/CompactStarRating/index.js +1 -1
  8. package/inputs/CompactTextInput/index.js +1 -1
  9. package/inputs/TextArea/index.js +1 -1
  10. package/inputs/index.js +3 -3
  11. package/package.json +1 -1
  12. package/widgets/AssetGallery/index.js +4 -4
  13. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +1 -1
  14. package/widgets/Instructions/index.js +2 -2
  15. package/widgets/index.js +6 -6
package/{AssetGallery-3d52ddb9.js → AssetGallery-4e9adddb.js} RENAMED
@@ -20,11 +20,11 @@ var ActionButton = require('./ActionButton-46735b89.js');
20
20
  require('./Button-49f82b31.js');
21
21
  require('./Checkbox-68dc38a8.js');
22
22
  require('./CompactAutocompleteSelect-5982dcf2.js');
23
- require('./CompactStarRating-a754fc6f.js');
24
- require('./CompactTextInput-baf13d5c.js');
23
+ require('./CompactStarRating-80c241ab.js');
24
+ require('./CompactTextInput-b12dc52e.js');
25
25
  require('./MultiSelect-4b8d3d0d.js');
26
26
  require('./Radio-32d0513a.js');
27
- require('./TextArea-e1444a0b.js');
27
+ require('./TextArea-44ceac9f.js');
28
28
  require('./TextInput-0d109708.js');
29
29
  require('./Switch-4a41585f.js');
30
30
  var ContextMenu = require('./ContextMenu-4ec3d9f3.js');
package/{AssetPreviewTopBar-c28715f7.js → AssetPreviewTopBar-912c3469.js} RENAMED
@@ -46,7 +46,9 @@ function SvgArrowBack(props) {
46
46
  }
47
47
 
48
48
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
49
- var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: 1px solid;\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
49
+ var AssetPreviewTopBar$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n align-items: center;\n border-bottom: ", ";\n color: inherit;\n display: flex;\n font-family: ", ";\n font-weight: 400;\n min-height: 72px;\n padding: 0 24px;\n width: 100%;\n\n ", "\n\n ", "\n"])), function (props) {
50
+ return props.border ? "1px solid" : "none";
51
+ }, function (props) {
50
52
  return props.theme.primaryFontFamily;
51
53
  }, function (props) {
52
54
  return props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'));
@@ -68,11 +70,13 @@ var AssetPreviewTopBar = React__default['default'].forwardRef(function AssetPrev
68
70
  leftText = _ref.leftText,
69
71
  buttons = _ref.buttons,
70
72
  shadow = _ref.shadow,
71
- props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow"]);
73
+ border = _ref.border,
74
+ props = defaultTheme._objectWithoutProperties(_ref, ["onBackButtonClick", "backButtonText", "backButtonAsClose", "leftText", "buttons", "shadow", "border"]);
72
75
 
73
76
  return React__default['default'].createElement(AssetPreviewTopBar$1, defaultTheme._extends({
74
77
  ref: forwardedRef,
75
- shadow: shadow
78
+ shadow: shadow,
79
+ border: border
76
80
  }, props), React__default['default'].createElement(BackButtonContainer, {
77
81
  onClick: onBackButtonClick
78
82
  }, backButtonAsClose ? React__default['default'].createElement(close.SvgClose, null) : React__default['default'].createElement(SvgArrowBack, null), backButtonText), leftText && React__default['default'].createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default['default'].createElement(ButtonsContainer, null, buttons.map(function (button, index) {
@@ -87,6 +91,7 @@ AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
87
91
  backButtonAsClose: defaultTheme.PropTypes.bool,
88
92
  leftText: defaultTheme.PropTypes.string,
89
93
  shadow: defaultTheme.PropTypes.bool,
94
+ border: defaultTheme.PropTypes.bool,
90
95
  buttons: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.node)
91
96
  } : {};
92
97
  AssetPreviewTopBar.defaultProps = {};
package/{CompactStarRating-a754fc6f.js → CompactStarRating-80c241ab.js} RENAMED
@@ -97,18 +97,24 @@ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDe
97
97
  }, function (props) {
98
98
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
99
99
  });
100
- var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.66%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding-left: 8px;\n box-sizing: border-box;\n\n ", "\n\n ", "\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
100
+ var starsWidth = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n width: 66.66%;\n border-radius: 3px;\n height: 24px;\n align-items: center;\n padding-left: 8px;\n box-sizing: border-box;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n }\n &&:hover:not(:focus) {\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
101
+ return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
102
+ }, function (props) {
101
103
  return props.type === 'success' && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in-out;\n "])), function (props) {
102
104
  return props.success ? fadeIn : fadeOut;
103
105
  });
104
106
  }, function (props) {
105
- return props.type === 'error' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'));
107
+ return props.type === 'error' && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), props.theme.themeProp('background', '#7F1B1B', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
108
+ }, function (props) {
109
+ return props.type === 'warning' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n ", "\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8'));
106
110
  }, function (props) {
107
- return props.type === 'warning' && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), props.theme.themeProp('background', '#634E01', '#FFFDE8'));
111
+ return props.edit && props.theme.themeProp('background', '#27272A', '#FCFCFC');
108
112
  }, function (props) {
109
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
113
+ return props.edit && props.theme.themeProp('border-color', '#27272A', '#E4E4E7');
110
114
  }, function (props) {
111
115
  return props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
116
+ }, function (props) {
117
+ return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
112
118
  }, function (props) {
113
119
  return props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF');
114
120
  }, function (props) {
package/{CompactTextInput-baf13d5c.js → CompactTextInput-b12dc52e.js} RENAMED
@@ -105,7 +105,7 @@ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.apply
105
105
  }, function (props) {
106
106
  return props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F');
107
107
  });
108
- var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n }\n\n &&:hover:not(:focus) {\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) {
108
+ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n padding: 1px 10px;\n ", ";\n border-radius: 3px;\n border: 1px solid transparent;\n text-overflow: ellipsis;\n\n ", ";\n\n &&:not(:hover):not(:focus) {\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n \n ", "\n }\n\n &&:hover:not(:focus) {\n\n ", "\n\n ", " \n\n ", ";\n\n ", ";\n\n ", ";\n\n\n ", "\n & + ", " {\n opacity: 1;\n \n }\n }\n\n ", "\n ", "\n\n }\n\n &&:focus {\n ", ";\n\n ", ";\n \n ", ";\n\n ", ";\n outline: none;\n\n ", ";\n\n ", ";\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ", "\n"])), function (props) {
109
109
  return props.readOnly && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n "])));
110
110
  }, function (props) {
111
111
  return props.disabled && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n "])));
@@ -128,7 +128,9 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
128
128
  }, function (props) {
129
129
  return props.type === 'error' && props.theme.themeProp('background', '#7f1b1b', '#FBEAE6');
130
130
  }, function (props) {
131
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
131
+ return props.edit && props.theme.themeProp('background', '#27272A', '#FCFCFC');
132
+ }, function (props) {
133
+ return props.edit && props.theme.themeProp('border-color', '#27272A', '#E4E4E7');
132
134
  }, function (props) {
133
135
  return props.hasLink && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n &&:not(:focus),\n &&:read-only {\n text-decoration: underline;\n cursor: default;\n ", "\n }\n "])), function (props) {
134
136
  return props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('emerald-500'));
@@ -137,6 +139,8 @@ var Input = styled__default['default'].input.attrs(defaultTheme.applyDefaultThem
137
139
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
138
140
  }, function (props) {
139
141
  return props.readOnly && props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
142
+ }, function (props) {
143
+ return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
140
144
  }, function (props) {
141
145
  return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
142
146
  }, function (props) {
package/{Instructions-8b2df6f8.js → Instructions-41904cd4.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-5982dcf2.js');
8
- var TextArea = require('./TextArea-e1444a0b.js');
8
+ var TextArea = require('./TextArea-44ceac9f.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-e1444a0b.js → TextArea-44ceac9f.js} RENAMED
@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
19
19
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
20
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
21
21
 
22
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
22
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44;
23
23
  var fadeInCheck = styled.keyframes(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n"])));
24
24
  var fadeOutCheck = styled.keyframes(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n"])));
25
25
  var activeLabel = styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.75rem;\n padding: 0 3px;\n top: -7px;\n letter-spacing: 0.03em;\n left: 8px !important;\n opacity: 1 !important;\n"])));
@@ -28,31 +28,25 @@ var placeholderBaseStyle = styled.css(_templateObject4 || (_templateObject4 = de
28
28
  }, function (props) {
29
29
  return props.theme.themeProp('opacity', 0.6, 0.5);
30
30
  });
31
- var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n ", "\n ", "\n }\n"])), function (props) {
31
+ var InputIconContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n display: flex;\n align-items: flex-start;\n position: absolute;\n right: 15px;\n top: 10px;\n bottom: 0;\n > .smallPadingIcon {\n padding: 4px;\n width: 15px;\n height: 15px;\n border-radius: 5px;\n opacity: 1;\n margin-top: -5px;\n ", "\n }\n svg {\n width: 15px;\n opacity: 0.7;\n transition: opacity 250ms;\n\n ", "\n }\n"])), function (props) {
32
32
  return props.theme.themeProp('background-color', props.theme.getColor('gray-900'), props.theme.getColor('gray-300'), '!important');
33
- }, function (props) {
34
- return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-900'), '!important');
35
33
  }, function (props) {
36
34
  return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n display: none;\n "])));
37
35
  });
38
- var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", "\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n }\n"])), function (props) {
39
- return props.padding === 'small' && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
40
- }, function (props) {
41
- return props.padding === 'medium' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
36
+ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.applyDefaultTheme)(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n font-family: inherit;\n font-size: 0.875rem;\n border-radius: 2px;\n padding: 5px 10px;\n resize: vertical;\n z-index: 0;\n border-radius: 3px;\n box-sizing: border-box;\n appearance: none;\n border: 1px solid;\n ", "\n\n\n\n ", "\n \n transition: height 550ms ease-in-out; border-color 350ms;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n \n ", "\n \n ", "\n\n ", "\n \n ", "\n\n ", "\n\n ", " \n\n ", " \n \n\n ", " \n \n ", "\n\n ", " \n\n ", "\n \n \n ", "\n\n ", "\n\n\n ", ";\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\n\n &&:hover:not(:focus) {\n ", ";\n\n ", ";\n\n ", ";\n\n \n ", "; \n\n\n ", ";\n transition: background 350ms;\n & + ", " {\n opacity: 1;\n ", ";\n transition: opacity 350ms;\n }\n }\n\n &::placeholder {\n ", "\n\n ", "\n }\n\n &&:focus {\n outline: none;\n ", "\n\n ", ";\n\n \n ", " \n \n ", "\n\n }\n\n &&:not(:hover):not(:focus) {\n ", ";\n ", ";\n\n ", ";\n\n \n }\n"])), function (props) {
37
+ return props.borderRadius && styled.css(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n border-radius: ", "px;\n "])), props.borderRadius);
42
38
  }, function (props) {
43
- return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
44
- }, function (props) {
45
- return props.showMore && !props.expanded && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
39
+ return props.showMore && !props.expanded && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n -webkit-mask-image: linear-gradient(0deg, transparent 5px, white 45px);\n "])));
46
40
  }, function (props) {
47
41
  return props.theme.themeProp('color', 'white', 'black');
48
42
  }, function (props) {
49
- return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
43
+ return props.readOnly && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n cursor: default;\n border-color: transparent !important;\n "])));
50
44
  }, function (props) {
51
- return props.disabled && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
45
+ return props.disabled && styled.css(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n cursor: not-allowed;\n "])));
52
46
  }, function (props) {
53
- return props.readOnly && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
47
+ return props.readOnly && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n padding: 12px 10px; ;\n "])));
54
48
  }, function (props) {
55
- return props.showMore && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
49
+ return props.showMore && styled.css(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n overflow: hidden;\n "])));
56
50
  }, function (props) {
57
51
  return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'));
58
52
  }, function (props) {
@@ -62,59 +56,51 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
62
56
  }, function (props) {
63
57
  return props.theme.themeProp('border-color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'));
64
58
  }, function (props) {
65
- return props.noBorder && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
59
+ return props.noBorder && styled.css(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
66
60
  return props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'));
67
61
  });
68
62
  }, function (props) {
69
- return props.type === 'warning' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFFDE8'), props.theme.themeProp('border-color', '#634E01 ', '#FFFDE8'));
70
- }, function (props) {
71
- return props.type === 'instructions-warning' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#634E01', '#FFF36C'), props.theme.themeProp('border-color', '#634E01 ', '#FFF36C'));
63
+ return props.type === 'warning' && styled.css(_templateObject15 || (_templateObject15 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', '#EAB308', 'black'), props.theme.themeProp('background', '#2F2402', '#F2D16B'), props.theme.themeProp('border-color', '#2F2402 ', '#F2D16B'));
72
64
  }, function (props) {
73
- return props.type === 'error' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
65
+ return props.type === 'error' && styled.css(_templateObject16 || (_templateObject16 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), props.theme.themeProp('color', 'white', 'black'), props.theme.themeProp('background', '#7f1b1b', '#FBEAE6'), props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6'));
74
66
  }, function (props) {
75
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
76
- return props.theme.themeProp('border-color', '#634E01', '#FFF36C');
67
+ return props.noBorder && props.type === 'warning' && styled.css(_templateObject17 || (_templateObject17 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
68
+ return props.theme.themeProp('border-color', '#2F2402', '#F2D16B');
77
69
  });
78
70
  }, function (props) {
79
- return props.noBorder && props.type === 'warning' && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
80
- return props.theme.themeProp('border-color', '#634E01', '#FFFDE8');
81
- });
82
- }, function (props) {
83
- return props.noBorder && props.type === 'error' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
71
+ return props.noBorder && props.type === 'error' && styled.css(_templateObject18 || (_templateObject18 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
84
72
  return props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6');
85
73
  });
86
74
  }, function (props) {
87
- return props.type === 'warning-border' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
75
+ return props.type === 'warning-border' && styled.css(_templateObject19 || (_templateObject19 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
88
76
  }, function (props) {
89
- return props.type === 'error-border' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
77
+ return props.type === 'error-border' && styled.css(_templateObject20 || (_templateObject20 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('border-color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
90
78
  }, function (props) {
91
- return props.lightBackground && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
79
+ return props.lightBackground && styled.css(_templateObject21 || (_templateObject21 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n &&:hover {\n ", "\n }\n "])), props.theme.themeProp('background', '#FFFDDE', '#fffde8'), props.theme.themeProp('color', props.theme.getColor('gray-900'), props.theme.getColor('gray-900')), props.theme.themeProp('background', 'white', 'white'));
92
80
  }, function (props) {
93
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
94
- }, function (props) {
95
- return props.edit && !props.type === 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
81
+ return props.edit && props.type != 'warning' && props.theme.themeProp('background', '#505050', '#eff1f4');
96
82
  }, function (props) {
97
83
  return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
98
84
  }, function (props) {
99
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
85
+ return props.padding === 'small' && styled.css(_templateObject22 || (_templateObject22 = defaultTheme._taggedTemplateLiteral(["\n padding: 5px 10px;\n "])));
100
86
  }, function (props) {
101
- return props.hasIcon && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 25px;\n "])));
87
+ return props.padding === 'medium' && styled.css(_templateObject23 || (_templateObject23 = defaultTheme._taggedTemplateLiteral(["\n padding: 13px 15px;\n "])));
102
88
  }, function (props) {
103
- return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
89
+ return props.padding === 'large' && styled.css(_templateObject24 || (_templateObject24 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\n "])));
104
90
  }, function (props) {
105
- return props.type === 'instructions-warning' && props.theme.themeProp('background', '#806403', '#F4E21E');
91
+ return props.hasIcon && styled.css(_templateObject25 || (_templateObject25 = defaultTheme._taggedTemplateLiteral(["\n padding-left: 55px;\n padding-right: 35px;\n padding-top: 13.5px;\n "])));
106
92
  }, function (props) {
107
- return props.noBorder && props.type === 'instructions-warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), function (props) {
108
- return props.theme.themeProp('border-color', '#806403', '#F4E21E');
109
- });
93
+ return !props.readOnly && !props.disabled && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
110
94
  }, function (props) {
111
- return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF');
95
+ return props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
96
+ }, function (props) {
97
+ return props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFDB70');
112
98
  }, function (props) {
113
99
  return props.type === 'error' && props.theme.themeProp('background', '#F7D5D0', '#F7D5D0');
114
100
  }, function (props) {
115
- return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' && props.type != 'instructions-warning' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
101
+ return props.noBorder && !props.readOnly && props.type != 'warning' && props.type != 'error' ? props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100')) : 'background: transparent';
116
102
  }, InputIconContainer, function (props) {
117
- return props.type === 'success' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
103
+ return props.type === 'success' && styled.css(_templateObject26 || (_templateObject26 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0;\n "])));
118
104
  }, function (props) {
119
105
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'), 1);
120
106
  }, function (props) {
@@ -124,62 +110,62 @@ var TextInputField = styled__default['default'].textarea.attrs(defaultTheme.appl
124
110
  }, function (props) {
125
111
  return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white'));
126
112
  }, function (props) {
127
- return props.type === 'warning' && styled.css(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
113
+ return props.type === 'warning' && styled.css(_templateObject27 || (_templateObject27 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
128
114
  return props.theme.themeProp('border-color', '#F4E21E', '#F4E21E');
129
115
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
130
116
  }, function (props) {
131
- return props.type === 'error' && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
117
+ return props.type === 'error' && styled.css(_templateObject28 || (_templateObject28 = defaultTheme._taggedTemplateLiteral(["\n ", "\n ", "\n ", "\n "])), function (props) {
132
118
  return props.theme.themeProp('border-color', '#D83018', '#D83018');
133
119
  }, props.theme.themeProp('background', 'white', 'white'), props.theme.themeProp('color', 'black', 'black'));
134
120
  }, function (props) {
135
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
121
+ return props.edit && props.theme.themeProp('background', '#27272A', '#FCFCFC');
136
122
  }, function (props) {
137
- return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#AD8800', '#FFF3A7');
123
+ return props.edit && props.theme.themeProp('border-color', '#27272A', '#E4E4E7');
138
124
  }, function (props) {
139
- return props.edit && props.type === 'instructions-warning' && props.theme.themeProp('background', '#AD8800 ', '#FFF3A7');
125
+ return props.edit && props.type === 'warning' && props.theme.themeProp('background', '#2F2402', '#FFF3A7');
140
126
  });
141
- var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
127
+ var TextInputLabel = styled__default['default'].label.attrs(defaultTheme.applyDefaultTheme)(_templateObject29 || (_templateObject29 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 13px;\n left: 11px;\n line-height: 1.2;\n font-size: 0.875rem;\n transition: all 150ms;\n margin-botton: 50px;\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n content: \"\";\n\n ", "\n"])), placeholderBaseStyle, function (props) {
142
128
  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%)"));
143
129
  }, function (props) {
144
- return !props.inputIsEmpty && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
130
+ return !props.inputIsEmpty && styled.css(_templateObject30 || (_templateObject30 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), activeLabel);
145
131
  }, function (props) {
146
- return props.hasPlaceholder && styled.css(_templateObject33 || (_templateObject33 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
132
+ return props.hasPlaceholder && styled.css(_templateObject31 || (_templateObject31 = defaultTheme._taggedTemplateLiteral(["\n ", ";\n "])), activeLabel);
147
133
  }, function (props) {
148
- return props.hasIcon && styled.css(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
134
+ return props.hasIcon && styled.css(_templateObject32 || (_templateObject32 = defaultTheme._taggedTemplateLiteral(["\n left: 55px;\n "])));
149
135
  });
150
- var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n height: 2.625rem;\n display: flex;\n padding: 0 10px;\n\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n }\n"])));
151
- var TextInputFieldIconAlert = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n svg {\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n margin-top: -3px;\n ", "\n }\n"])), function (props) {
152
- return props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-600'));
136
+ var TextInputFieldIcon = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject33 || (_templateObject33 = 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"])));
137
+ var TextInputFieldIconAlert = styled__default['default'].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject34 || (_templateObject34 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n top: 2.8px;\n height: 2.625rem;\n display: flex;\n padding: 0 10px 0 30px;\n width: 15px;\n opacity: 0.6;\n transition: opacity 250ms;\n margin-top: -1.5px;\n ", "\n"])), function (props) {
138
+ return props.type === 'warning' && props.theme.themeProp('color', '#EAB308', '#2F2402');
153
139
  });
154
- var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject37 || (_templateObject37 = 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"])), function (props) {
155
- return props.readOnly && styled.css(_templateObject38 || (_templateObject38 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
140
+ var TextInput = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject35 || (_templateObject35 = 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"])), function (props) {
141
+ return props.readOnly && styled.css(_templateObject36 || (_templateObject36 = defaultTheme._taggedTemplateLiteral(["\n pointer-events: none;\n "])));
156
142
  }, function (props) {
157
- return props.disabled && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
143
+ return props.disabled && styled.css(_templateObject37 || (_templateObject37 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n\n > * {\n cursor: not-allowed;\n }\n "])));
158
144
  }, TextInputLabel, activeLabel, TextInputFieldIcon, TextInputField, TextInputLabel, activeLabel, function (props) {
159
145
  return props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'));
160
146
  });
161
- var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n margin: 8px 0 0 0;\n padding: 0 0.6875rem;\n font-size: 0.75rem;\n line-height: 1.333;\n\n ", ";\n\n ", "\n\n ", "\n"])), function (props) {
147
+ var Description = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject38 || (_templateObject38 = 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) {
162
148
  return props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'));
163
149
  }, function (props) {
164
- return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
150
+ return (props.type === 'warning-border' || props.type === 'warning') && styled.css(_templateObject39 || (_templateObject39 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('orange-500')));
165
151
  }, function (props) {
166
- return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
152
+ return (props.type === 'error-border' || props.type === 'error') && styled.css(_templateObject40 || (_templateObject40 = defaultTheme._taggedTemplateLiteral(["\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
167
153
  });
168
- var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
154
+ var SuccessContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject41 || (_templateObject41 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n pointer-events: none;\n opacity: ", ";\n animation: ", " 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: absolute;\n margin-top: -35px;\n margin-left: 5px;\n width: 15px;\n height: 15px;\n padding: 5px;\n ", "\n\n > svg {\n width: 15px;\n }\n"])), function (props) {
169
155
  return props.fadeIn ? 0 : 1;
170
156
  }, function (props) {
171
157
  return props.fadeIn ? fadeOutCheck : fadeInCheck;
172
158
  }, function (props) {
173
159
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'));
174
160
  });
175
- var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
176
- return props.expanded && styled.css(_templateObject45 || (_templateObject45 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
161
+ var ShowMoreText = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject42 || (_templateObject42 = defaultTheme._taggedTemplateLiteral(["\n margin-top: -18px;\n margin-bottom: 0;\n display: block;\n position: absolute;\n font-size: 0.875rem;\n cursor: pointer;\n padding: 2px 10px;\n margin-right: 10px;\n margin-top: -26px;\n ", "\n transition: margin-top 550ms ease-in-out;\n -webkit-mask-image: linear-gradient(180deg, transparent 1px, white 7px);\n ", "\n\n ", ";\n\n ", "\n"])), function (props) {
162
+ return props.expanded && styled.css(_templateObject43 || (_templateObject43 = defaultTheme._taggedTemplateLiteral(["\n margin-top: 0px;\n "])));
177
163
  }, function (props) {
178
164
  return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
179
165
  }, function (props) {
180
166
  return props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('emerald-500'));
181
167
  }, function (props) {
182
- return props.type === 'error' && styled.css(_templateObject46 || (_templateObject46 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
168
+ return props.type === 'error' && styled.css(_templateObject44 || (_templateObject44 = defaultTheme._taggedTemplateLiteral(["\n content: 'error';\n ", "\n "])), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500')));
183
169
  });
184
170
 
185
171
  var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forwardedRef) {
@@ -212,8 +198,8 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
212
198
  successIcon = _ref.successIcon,
213
199
  padding = _ref.padding,
214
200
  descriptionToolTip = _ref.descriptionToolTip,
215
- resetExpansion = _ref.resetExpansion,
216
- rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "resetExpansion"]);
201
+ borderRadius = _ref.borderRadius,
202
+ rest = defaultTheme._objectWithoutProperties(_ref, ["value", "defaultValue", "name", "label", "placeholder", "required", "disabled", "hidden", "readOnly", "edit", "showMore", "showMoreText", "showLessText", "autoComplete", "description", "type", "icon", "rows", "className", "style", "onChange", "onBlur", "lightBackground", "noBorder", "instructionsTextArea", "loadingIcon", "successIcon", "padding", "descriptionToolTip", "borderRadius"]);
217
203
 
218
204
  var textInputDomNode = React.useRef(null);
219
205
  var textInputRef = useMergedRefs.useMergedRefs(forwardedRef, textInputDomNode);
@@ -228,87 +214,84 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
228
214
  defaultInput = _useState4[0],
229
215
  setDefaultInput = _useState4[1];
230
216
 
231
- var _useState5 = React.useState(''),
217
+ var _useState5 = React.useState(false),
232
218
  _useState6 = defaultTheme._slicedToArray(_useState5, 2),
233
- maxContentRows = _useState6[0],
234
- setMaxContentRows = _useState6[1];
219
+ expanded = _useState6[0],
220
+ setExpanded = _useState6[1];
235
221
 
236
222
  var _useState7 = React.useState(false),
237
223
  _useState8 = defaultTheme._slicedToArray(_useState7, 2),
238
- expanded = _useState8[0],
239
- setExpanded = _useState8[1];
224
+ autoFocus = _useState8[0],
225
+ setAutoFocus = _useState8[1];
240
226
 
241
- var _useState9 = React.useState(''),
242
- _useState10 = defaultTheme._slicedToArray(_useState9, 2),
243
- maxHeight = _useState10[0],
244
- setMaxHeight = _useState10[1];
227
+ var _useState9 = React.useState(false),
228
+ _useState10 = defaultTheme._slicedToArray(_useState9, 2);
229
+ _useState10[0];
230
+ var setScrollHeightExceedsRows = _useState10[1];
245
231
 
246
- var _useState11 = React.useState(''),
247
- _useState12 = defaultTheme._slicedToArray(_useState11, 2),
248
- defaultHeight = _useState12[0],
249
- setDefaultHeight = _useState12[1];
250
-
251
- var _useState13 = React.useState(false),
252
- _useState14 = defaultTheme._slicedToArray(_useState13, 2),
253
- autoFocus = _useState14[0],
254
- setAutoFocus = _useState14[1];
255
-
256
- var _useState15 = React.useState(false),
257
- _useState16 = defaultTheme._slicedToArray(_useState15, 2),
258
- scrollHeightExceedsRows = _useState16[0],
259
- setScrollHeightExceedsRows = _useState16[1];
232
+ var _useState11 = React.useState(nanoid.nanoid()),
233
+ _useState12 = defaultTheme._slicedToArray(_useState11, 1),
234
+ uniqueId = _useState12[0];
260
235
 
261
236
  var initialHeightRef = React.useRef(null);
262
-
263
- var _useState17 = React.useState(nanoid.nanoid()),
264
- _useState18 = defaultTheme._slicedToArray(_useState17, 1),
265
- uniqueId = _useState18[0];
266
-
237
+ var defaultHeight = rows * 16;
267
238
  var memoizedDescriptionToolTip = React.useMemo(function () {
268
239
  return descriptionToolTip;
269
240
  }, [descriptionToolTip]);
241
+
242
+ var defaultHeightFunction = function defaultHeightFunction() {
243
+ var textareaRefCurrent = textInputDomNode.current;
244
+ textareaRefCurrent.style.height = "".concat(defaultHeight, "px");
245
+ setScrollHeightExceedsRows(false);
246
+ };
247
+
248
+ var adjustHeighToScroll = function adjustHeighToScroll() {
249
+ var textareaRefCurrent = textInputDomNode === null || textInputDomNode === void 0 ? void 0 : textInputDomNode.current;
250
+
251
+ if (textareaRefCurrent !== null) {
252
+ textareaRefCurrent.style.height = 'auto';
253
+ var newHeight = textareaRefCurrent.scrollHeight;
254
+ textareaRefCurrent.style.height = "".concat(newHeight, "px");
255
+ setScrollHeightExceedsRows(newHeight > initialHeightRef.current);
256
+ }
257
+ };
258
+
270
259
  React.useEffect(function () {
271
- resetHeightToDefaultRows();
260
+ defaultHeightFunction();
261
+ setDefaultInput(value || defaultValue);
272
262
  setExpanded(false);
263
+ adjustHeighToScroll();
264
+
265
+ if ((value || defaultValue) != defaultInput) {
266
+ adjustHeighToScroll();
267
+ }
273
268
  }, []);
274
269
  React.useEffect(function () {
275
- setExpanded(false);
270
+ var textareaRefCurrent = textInputDomNode.current;
271
+ var newHeight = textareaRefCurrent.scrollHeight;
272
+ setScrollHeightExceedsRows(newHeight > defaultHeight);
273
+ defaultHeightFunction();
276
274
  setDefaultInput(value || defaultValue);
277
- resetHeightToDefaultRows();
275
+ setExpanded(false);
278
276
  }, [resetExpansion]);
279
- React.useLayoutEffect(function () {
280
- calculateRows();
281
- setAutoFocus(false);
282
-
283
- if (defaultValue !== null && defaultValue !== void 0 && defaultValue.length || (value === null || value === void 0 ? void 0 : value.length) != (defaultInput === null || defaultInput === void 0 ? void 0 : defaultInput.length)) {
284
- calculateHeight();
285
- setExpanded(false);
286
- }
287
- }, [value, defaultValue, rows]);
288
277
  React.useEffect(function () {
289
- setAutoFocus(false);
290
- initialHeightRef.current = null;
291
- }, [rows]);
292
-
293
- var resetHeightToDefaultRows = function resetHeightToDefaultRows() {
294
- var textareaRefCurrent = textInputDomNode.current;
278
+ defaultHeightFunction();
295
279
 
296
- if (textareaRefCurrent !== null) {
297
- textareaRefCurrent.style.height = "".concat(defaultHeight, "px");
298
- console.log('textareaRefCurrent.style.height state:', textareaRefCurrent.style.height);
299
- console.log('defaultHeight state:', defaultHeight);
280
+ if ((value || defaultValue) != defaultInput) {
281
+ adjustHeighToScroll();
300
282
  }
301
- };
283
+ }, [value, defaultValue]);
302
284
 
303
285
  var handleTextAreaClick = function handleTextAreaClick() {
304
286
  var textareaRefCurrent = textInputDomNode.current;
305
287
 
306
288
  if (textareaRefCurrent !== null) {
307
289
  textareaRefCurrent.style.height = "".concat(textareaRefCurrent.scrollHeight, "px");
308
- console.log('textareaRefCurrent.style.height on click state:', textareaRefCurrent.style.height);
309
290
  }
310
291
 
311
- setExpanded(!expanded);
292
+ if (!expanded) {
293
+ setExpanded(true);
294
+ }
312
295
  };
313
296
 
314
297
  var handleTextAreaShowLess = function handleTextAreaShowLess() {
@@ -318,46 +301,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
318
301
  textareaRefCurrent.style.height = expanded ? "".concat(rows * 16, "px") : "".concat(textareaRefCurrent.scrollHeight, "px");
319
302
  }
320
303
 
321
- console.log('textareaRefCurrent.style.height on handleTextAreaShowLess :', textareaRefCurrent.style.height);
322
304
  setExpanded(!expanded);
323
305
  };
324
306
 
325
- var calculateRows = function calculateRows() {
326
- var textareaRefCurrent = textInputDomNode.current;
327
-
328
- if (textareaRefCurrent !== null) {
329
- var textAreaHeight = textareaRefCurrent.scrollHeight;
330
- console.log('textAreaHeight :', textAreaHeight);
331
- var lineHeight = 16;
332
- var calculatedRows = Math.floor(textAreaHeight / lineHeight);
333
- var defaultRowsHeight = rows * lineHeight;
334
- setMaxContentRows(calculatedRows);
335
-
336
- if (calculatedRows > rows) {
337
- setDefaultHeight(defaultRowsHeight);
338
- setMaxHeight(textAreaHeight);
339
- } else {
340
- setMaxHeight('');
341
- }
342
- }
343
- };
344
-
345
- var calculateHeight = function calculateHeight() {
346
- var textareaRefCurrent = textInputDomNode === null || textInputDomNode === void 0 ? void 0 : textInputDomNode.current;
347
-
348
- if (textareaRefCurrent !== null) {
349
- textareaRefCurrent.style.height = 'auto';
350
- var newHeight = textareaRefCurrent.scrollHeight;
351
- textareaRefCurrent.style.height = "".concat(newHeight, "px");
352
-
353
- if (initialHeightRef.current === null) {
354
- initialHeightRef.current = newHeight;
355
- }
356
-
357
- setScrollHeightExceedsRows(newHeight > (initialHeightRef.current || 0));
358
- }
359
- };
360
-
361
307
  var onKeyDown = React.useCallback(function (event) {
362
308
  if (event.key === 'Enter') {
363
309
  event.stopPropagation();
@@ -371,13 +317,15 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
371
317
  type: type,
372
318
  className: className,
373
319
  style: style
374
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
320
+ }, React__default['default'].createElement(TextInputFieldIconAlert, {
321
+ type: type
322
+ }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
375
323
  autoFocus: autoFocus,
324
+ borderRadius: borderRadius,
376
325
  ref: textInputRef,
377
326
  rows: rows,
378
327
  expanded: expanded,
379
328
  defaultHeight: defaultHeight,
380
- maxHeight: maxHeight,
381
329
  value: value,
382
330
  defaultValue: defaultValue,
383
331
  name: name,
@@ -388,7 +336,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
388
336
  edit: edit,
389
337
  instructionsTextArea: instructionsTextArea,
390
338
  showMore: showMore,
391
- scrollHeightExceedsRows: scrollHeightExceedsRows,
392
339
  type: type,
393
340
  autoComplete: autoComplete,
394
341
  hasIcon: Boolean(icon),
@@ -430,7 +377,7 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
430
377
  inputIsEmpty: inputIsEmpty
431
378
  }, label, required && ' *'), typeof description === 'string' && description.length > 0 && React__default['default'].createElement(Description, {
432
379
  type: type
433
- }, description), maxContentRows > rows && showMore && React__default['default'].createElement(ShowMoreText, {
380
+ }, description), showMore && React__default['default'].createElement(ShowMoreText, {
434
381
  onClick: showMore ? handleTextAreaShowLess : undefined,
435
382
  expanded: expanded
436
383
  }, !expanded ? showMoreText : expanded ? showLessText : null));
@@ -458,8 +405,9 @@ TextArea.defaultProps = {
458
405
  padding: 'medium',
459
406
  instructionsTextArea: false,
460
407
  descriptionToolTip: '',
408
+ isExpanded: function isExpanded() {},
461
409
  onChange: function onChange() {},
462
- resetExpansion: ''
410
+ borderRadius: 0
463
411
  };
464
412
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
465
413
  value: defaultTheme.PropTypes.string,
@@ -483,17 +431,18 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
483
431
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
484
432
  className: defaultTheme.PropTypes.string,
485
433
  style: defaultTheme.PropTypes.object,
486
- padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
434
+ padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
487
435
  lightBackground: defaultTheme.PropTypes.bool,
488
436
  onChange: defaultTheme.PropTypes.func,
489
437
  onBlur: defaultTheme.PropTypes.func,
490
438
  noBorder: defaultTheme.PropTypes.bool,
491
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
439
+ isExpanded: defaultTheme.PropTypes.func,
440
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
492
441
  instructionsTextArea: defaultTheme.PropTypes.bool,
493
442
  loadingIcon: defaultTheme.PropTypes.element,
494
443
  successIcon: defaultTheme.PropTypes.element,
495
444
  descriptionToolTip: defaultTheme.PropTypes.string,
496
- resetExpansion: defaultTheme.PropTypes.number
445
+ borderRadius: defaultTheme.PropTypes.number
497
446
  } : {};
498
447
 
499
448
  exports.TextArea = TextArea;
package/inputs/CompactStarRating/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactStarRating = require('../../CompactStarRating-a754fc6f.js');
3
+ var CompactStarRating = require('../../CompactStarRating-80c241ab.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/CompactTextInput/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var CompactTextInput = require('../../CompactTextInput-baf13d5c.js');
3
+ var CompactTextInput = require('../../CompactTextInput-b12dc52e.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-e1444a0b.js');
3
+ var TextArea = require('../../TextArea-44ceac9f.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/inputs/index.js CHANGED
@@ -6,11 +6,11 @@ var ActionButton = require('../ActionButton-46735b89.js');
6
6
  var Button = require('../Button-49f82b31.js');
7
7
  var Checkbox = require('../Checkbox-68dc38a8.js');
8
8
  var CompactAutocompleteSelect = require('../CompactAutocompleteSelect-5982dcf2.js');
9
- var CompactStarRating = require('../CompactStarRating-a754fc6f.js');
10
- var CompactTextInput = require('../CompactTextInput-baf13d5c.js');
9
+ var CompactStarRating = require('../CompactStarRating-80c241ab.js');
10
+ var CompactTextInput = require('../CompactTextInput-b12dc52e.js');
11
11
  var MultiSelect = require('../MultiSelect-4b8d3d0d.js');
12
12
  var Radio = require('../Radio-32d0513a.js');
13
- var TextArea = require('../TextArea-e1444a0b.js');
13
+ var TextArea = require('../TextArea-44ceac9f.js');
14
14
  var TextInput = require('../TextInput-0d109708.js');
15
15
  var Switch = require('../Switch-4a41585f.js');
16
16
  var MultiLevelCheckboxSelect = require('../MultiLevelCheckboxSelect-24c88aaa.js');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.2.0-rc.76",
3
+ "version": "1.2.0-rc.78",
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-3d52ddb9.js');
3
+ var AssetGallery = require('../../AssetGallery-4e9adddb.js');
4
4
  require('../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('lodash');
@@ -37,11 +37,11 @@ require('react-select');
37
37
  require('react-select-async-paginate');
38
38
  require('../../react-select-creatable.esm-2f23d6c6.js');
39
39
  require('react-dom');
40
- require('../../CompactStarRating-a754fc6f.js');
41
- require('../../CompactTextInput-baf13d5c.js');
40
+ require('../../CompactStarRating-80c241ab.js');
41
+ require('../../CompactTextInput-b12dc52e.js');
42
42
  require('../../MultiSelect-4b8d3d0d.js');
43
43
  require('../../Radio-32d0513a.js');
44
- require('../../TextArea-e1444a0b.js');
44
+ require('../../TextArea-44ceac9f.js');
45
45
  require('../../Switch-4a41585f.js');
46
46
  require('../../ContextMenuItem-ba2b697e.js');
47
47
 
package/widgets/AssetPreview/AssetPreviewTopBar/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-c28715f7.js');
3
+ var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-912c3469.js');
4
4
  require('../../../defaultTheme-ea44e34a.js');
5
5
  require('styled-components');
6
6
  require('react');
package/widgets/Instructions/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var Instructions = require('../../Instructions-8b2df6f8.js');
3
+ var Instructions = require('../../Instructions-41904cd4.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-e1444a0b.js');
28
+ require('../../TextArea-44ceac9f.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-3d52ddb9.js');
5
+ var AssetGallery = require('../AssetGallery-4e9adddb.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
- var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
8
- var Instructions = require('../Instructions-8b2df6f8.js');
7
+ var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
+ var Instructions = require('../Instructions-41904cd4.js');
9
9
  require('../defaultTheme-ea44e34a.js');
10
10
  require('styled-components');
11
11
  require('lodash');
@@ -41,11 +41,11 @@ require('react-select');
41
41
  require('react-select-async-paginate');
42
42
  require('../react-select-creatable.esm-2f23d6c6.js');
43
43
  require('react-dom');
44
- require('../CompactStarRating-a754fc6f.js');
45
- require('../CompactTextInput-baf13d5c.js');
44
+ require('../CompactStarRating-80c241ab.js');
45
+ require('../CompactTextInput-b12dc52e.js');
46
46
  require('../MultiSelect-4b8d3d0d.js');
47
47
  require('../Radio-32d0513a.js');
48
- require('../TextArea-e1444a0b.js');
48
+ require('../TextArea-44ceac9f.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51