@ntbjs/react-components 1.2.0-rc.77 → 1.2.0-rc.79

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-0bbf5926.js → AssetGallery-941ee964.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-94419fe8.js → Instructions-1cb321a1.js} +1 -1
  6. package/{TextArea-100beee3.js → TextArea-c22b85a3.js} +64 -92
  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-0bbf5926.js → AssetGallery-941ee964.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-100beee3.js');
27
+ require('./TextArea-c22b85a3.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-94419fe8.js → Instructions-1cb321a1.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-100beee3.js');
8
+ var TextArea = require('./TextArea-c22b85a3.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-100beee3.js → TextArea-c22b85a3.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 "])));
42
- }, function (props) {
43
- return props.padding === 'large' && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n padding: 15px 55px;\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);
44
38
  }, 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'));
72
- }, 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'));
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'));
74
64
  }, 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');
77
- });
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'));
78
66
  }, 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');
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');
81
69
  });
82
70
  }, 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')));
88
- }, 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')));
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')));
90
76
  }, 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'));
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')));
92
78
  }, function (props) {
93
- return props.edit && props.theme.themeProp('background', '#505050', '#eff1f4');
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'));
94
80
  }, 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);
@@ -238,18 +224,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
238
224
  autoFocus = _useState8[0],
239
225
  setAutoFocus = _useState8[1];
240
226
 
241
- var _useState9 = React.useState(false),
242
- _useState10 = defaultTheme._slicedToArray(_useState9, 2),
243
- scrollHeightExceedsRows = _useState10[0],
244
- setScrollHeightExceedsRows = _useState10[1];
245
-
246
- var _useState11 = React.useState(nanoid.nanoid()),
247
- _useState12 = defaultTheme._slicedToArray(_useState11, 1),
248
- uniqueId = _useState12[0];
227
+ var _useState9 = React.useState(nanoid.nanoid()),
228
+ _useState10 = defaultTheme._slicedToArray(_useState9, 1),
229
+ uniqueId = _useState10[0];
249
230
 
250
- var initialHeightRef = React.useRef(null);
251
231
  var defaultHeight = rows * 16;
252
- console.log('scrollHeightExceedsRows', scrollHeightExceedsRows);
253
232
  var memoizedDescriptionToolTip = React.useMemo(function () {
254
233
  return descriptionToolTip;
255
234
  }, [descriptionToolTip]);
@@ -257,7 +236,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
257
236
  var defaultHeightFunction = function defaultHeightFunction() {
258
237
  var textareaRefCurrent = textInputDomNode.current;
259
238
  textareaRefCurrent.style.height = "".concat(defaultHeight, "px");
260
- setScrollHeightExceedsRows(false);
261
239
  };
262
240
 
263
241
  var adjustHeighToScroll = function adjustHeighToScroll() {
@@ -267,7 +245,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
267
245
  textareaRefCurrent.style.height = 'auto';
268
246
  var newHeight = textareaRefCurrent.scrollHeight;
269
247
  textareaRefCurrent.style.height = "".concat(newHeight, "px");
270
- setScrollHeightExceedsRows(newHeight > initialHeightRef.current);
271
248
  }
272
249
  };
273
250
 
@@ -281,14 +258,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
281
258
  adjustHeighToScroll();
282
259
  }
283
260
  }, []);
284
- React.useEffect(function () {
285
- var textareaRefCurrent = textInputDomNode.current;
286
- var newHeight = textareaRefCurrent.scrollHeight;
287
- setScrollHeightExceedsRows(newHeight > defaultHeight);
288
- defaultHeightFunction();
289
- setDefaultInput(value || defaultValue);
290
- setExpanded(false);
291
- }, [resetExpansion]);
292
261
  React.useEffect(function () {
293
262
  defaultHeightFunction();
294
263
 
@@ -332,8 +301,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
332
301
  type: type,
333
302
  className: className,
334
303
  style: style
335
- }, React__default['default'].createElement(TextInputFieldIconAlert, null, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
304
+ }, React__default['default'].createElement(TextInputFieldIconAlert, {
305
+ type: type
306
+ }, icon), React__default['default'].createElement(TextInputField, defaultTheme._extends({
336
307
  autoFocus: autoFocus,
308
+ borderRadius: borderRadius,
337
309
  ref: textInputRef,
338
310
  rows: rows,
339
311
  expanded: expanded,
@@ -419,7 +391,7 @@ TextArea.defaultProps = {
419
391
  descriptionToolTip: '',
420
392
  isExpanded: function isExpanded() {},
421
393
  onChange: function onChange() {},
422
- resetExpansion: ''
394
+ borderRadius: 0
423
395
  };
424
396
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
425
397
  value: defaultTheme.PropTypes.string,
@@ -443,18 +415,18 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
443
415
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
444
416
  className: defaultTheme.PropTypes.string,
445
417
  style: defaultTheme.PropTypes.object,
446
- padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
418
+ padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
447
419
  lightBackground: defaultTheme.PropTypes.bool,
448
420
  onChange: defaultTheme.PropTypes.func,
449
421
  onBlur: defaultTheme.PropTypes.func,
450
422
  noBorder: defaultTheme.PropTypes.bool,
451
423
  isExpanded: defaultTheme.PropTypes.func,
452
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
424
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
453
425
  instructionsTextArea: defaultTheme.PropTypes.bool,
454
426
  loadingIcon: defaultTheme.PropTypes.element,
455
427
  successIcon: defaultTheme.PropTypes.element,
456
428
  descriptionToolTip: defaultTheme.PropTypes.string,
457
- resetExpansion: defaultTheme.PropTypes.number
429
+ borderRadius: defaultTheme.PropTypes.number
458
430
  } : {};
459
431
 
460
432
  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-100beee3.js');
3
+ var TextArea = require('../../TextArea-c22b85a3.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-100beee3.js');
13
+ var TextArea = require('../TextArea-c22b85a3.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.77",
3
+ "version": "1.2.0-rc.79",
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-0bbf5926.js');
3
+ var AssetGallery = require('../../AssetGallery-941ee964.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-100beee3.js');
44
+ require('../../TextArea-c22b85a3.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-94419fe8.js');
3
+ var Instructions = require('../../Instructions-1cb321a1.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-100beee3.js');
28
+ require('../../TextArea-c22b85a3.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-0bbf5926.js');
5
+ var AssetGallery = require('../AssetGallery-941ee964.js');
6
6
  var ContextMenu = require('../ContextMenu-4ec3d9f3.js');
7
- var AssetPreviewTopBar = require('../AssetPreviewTopBar-c28715f7.js');
8
- var Instructions = require('../Instructions-94419fe8.js');
7
+ var AssetPreviewTopBar = require('../AssetPreviewTopBar-912c3469.js');
8
+ var Instructions = require('../Instructions-1cb321a1.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-100beee3.js');
48
+ require('../TextArea-c22b85a3.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51