@ntbjs/react-components 1.2.0-rc.77 → 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-0bbf5926.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-94419fe8.js → Instructions-41904cd4.js} +1 -1
  6. package/{TextArea-100beee3.js → TextArea-44ceac9f.js} +64 -76
  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-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-100beee3.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-94419fe8.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-100beee3.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-100beee3.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')));
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);
@@ -239,9 +225,9 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
239
225
  setAutoFocus = _useState8[1];
240
226
 
241
227
  var _useState9 = React.useState(false),
242
- _useState10 = defaultTheme._slicedToArray(_useState9, 2),
243
- scrollHeightExceedsRows = _useState10[0],
244
- setScrollHeightExceedsRows = _useState10[1];
228
+ _useState10 = defaultTheme._slicedToArray(_useState9, 2);
229
+ _useState10[0];
230
+ var setScrollHeightExceedsRows = _useState10[1];
245
231
 
246
232
  var _useState11 = React.useState(nanoid.nanoid()),
247
233
  _useState12 = defaultTheme._slicedToArray(_useState11, 1),
@@ -249,7 +235,6 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
249
235
 
250
236
  var initialHeightRef = React.useRef(null);
251
237
  var defaultHeight = rows * 16;
252
- console.log('scrollHeightExceedsRows', scrollHeightExceedsRows);
253
238
  var memoizedDescriptionToolTip = React.useMemo(function () {
254
239
  return descriptionToolTip;
255
240
  }, [descriptionToolTip]);
@@ -332,8 +317,11 @@ var TextArea = React__default['default'].forwardRef(function TextArea(_ref, forw
332
317
  type: type,
333
318
  className: className,
334
319
  style: style
335
- }, 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({
336
323
  autoFocus: autoFocus,
324
+ borderRadius: borderRadius,
337
325
  ref: textInputRef,
338
326
  rows: rows,
339
327
  expanded: expanded,
@@ -419,7 +407,7 @@ TextArea.defaultProps = {
419
407
  descriptionToolTip: '',
420
408
  isExpanded: function isExpanded() {},
421
409
  onChange: function onChange() {},
422
- resetExpansion: ''
410
+ borderRadius: 0
423
411
  };
424
412
  TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
425
413
  value: defaultTheme.PropTypes.string,
@@ -443,18 +431,18 @@ TextArea.propTypes = process.env.NODE_ENV !== "production" ? {
443
431
  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
444
432
  className: defaultTheme.PropTypes.string,
445
433
  style: defaultTheme.PropTypes.object,
446
- padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large']),
434
+ padding: defaultTheme.PropTypes.oneOf(['small', 'medium', 'large']),
447
435
  lightBackground: defaultTheme.PropTypes.bool,
448
436
  onChange: defaultTheme.PropTypes.func,
449
437
  onBlur: defaultTheme.PropTypes.func,
450
438
  noBorder: defaultTheme.PropTypes.bool,
451
439
  isExpanded: defaultTheme.PropTypes.func,
452
- type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'instructions-warning', 'loading', 'success']),
440
+ type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning-border', 'warning', 'loading', 'success']),
453
441
  instructionsTextArea: defaultTheme.PropTypes.bool,
454
442
  loadingIcon: defaultTheme.PropTypes.element,
455
443
  successIcon: defaultTheme.PropTypes.element,
456
444
  descriptionToolTip: defaultTheme.PropTypes.string,
457
- resetExpansion: defaultTheme.PropTypes.number
445
+ borderRadius: defaultTheme.PropTypes.number
458
446
  } : {};
459
447
 
460
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-100beee3.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-100beee3.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.77",
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-0bbf5926.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-100beee3.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-94419fe8.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-100beee3.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-0bbf5926.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-94419fe8.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-100beee3.js');
48
+ require('../TextArea-44ceac9f.js');
49
49
  require('../Switch-4a41585f.js');
50
50
  require('../ContextMenuItem-ba2b697e.js');
51
51