@instructure/ui-number-input 10.4.2-snapshot-10 → 10.4.2-snapshot-13

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 (18) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/NumberInput/index.js +6 -3
  3. package/es/NumberInput/styles.js +3 -0
  4. package/es/NumberInput/theme.js +11 -10
  5. package/lib/NumberInput/index.js +6 -3
  6. package/lib/NumberInput/styles.js +3 -0
  7. package/lib/NumberInput/theme.js +11 -10
  8. package/package.json +14 -14
  9. package/src/NumberInput/index.tsx +11 -3
  10. package/src/NumberInput/props.ts +1 -0
  11. package/src/NumberInput/styles.ts +3 -0
  12. package/src/NumberInput/theme.ts +2 -0
  13. package/tsconfig.build.tsbuildinfo +1 -1
  14. package/types/NumberInput/index.d.ts.map +1 -1
  15. package/types/NumberInput/props.d.ts +1 -1
  16. package/types/NumberInput/props.d.ts.map +1 -1
  17. package/types/NumberInput/styles.d.ts.map +1 -1
  18. package/types/NumberInput/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.4.2-snapshot-10](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-10) (2024-11-06)
6
+ ## [10.4.2-snapshot-13](https://github.com/instructure/instructure-ui/compare/v10.4.1...v10.4.2-snapshot-13) (2024-11-07)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-number-input
8
+
9
+ ### Features
10
+
11
+ * **many:** add new form field error msg style + add asterisk for required fields ([9b03683](https://github.com/instructure/instructure-ui/commit/9b03683dadeef4c5deae2c60bea10686f143ff5d))
9
12
 
10
13
 
11
14
 
package/es/NumberInput/index.js CHANGED
@@ -116,7 +116,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
116
116
  return this._id;
117
117
  }
118
118
  get invalid() {
119
- return !!this.props.messages && this.props.messages.some(message => message.type === 'error');
119
+ return !!this.props.messages && this.props.messages.some(message => message.type === 'error' || message.type === 'newError');
120
120
  }
121
121
  get interaction() {
122
122
  return getInteraction({
@@ -176,10 +176,13 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
176
176
  isRequired = _this$props4.isRequired,
177
177
  showArrows = _this$props4.showArrows,
178
178
  value = _this$props4.value,
179
- width = _this$props4.width;
179
+ width = _this$props4.width,
180
+ styles = _this$props4.styles;
180
181
  const interaction = this.interaction;
181
182
  return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
182
- label: callRenderProp(renderLabel),
183
+ label: jsx(React.Fragment, null, callRenderProp(renderLabel), isRequired && jsx("span", {
184
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
185
+ }, " *")),
183
186
  inline: display === 'inline-block',
184
187
  id: this.id,
185
188
  elementRef: this.handleRef
package/es/NumberInput/styles.js CHANGED
@@ -77,6 +77,9 @@ const generateStyle = (componentTheme, props, state) => {
77
77
  }
78
78
  };
79
79
  return {
80
+ requiredInvalid: {
81
+ color: componentTheme.requiredInvalidColor
82
+ },
80
83
  numberInput: {
81
84
  label: 'numberInput'
82
85
  },
package/es/NumberInput/theme.js CHANGED
@@ -28,7 +28,7 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
32
32
  const colors = theme.colors,
33
33
  spacing = theme.spacing,
34
34
  borders = theme.borders,
@@ -51,19 +51,20 @@ const generateComponentTheme = theme => {
51
51
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
52
52
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
53
53
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
54
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
54
55
  padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
55
56
  arrowsContainerWidth: '2rem',
56
- arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
57
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
58
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
59
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
60
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214}`,
57
+ arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
58
+ arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1111,
59
+ arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
60
+ arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214,
61
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey1214}`,
61
62
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
62
63
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
63
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
64
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
65
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
66
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
64
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
65
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
66
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.red4570,
67
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey4570,
67
68
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
68
69
  mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
69
70
  largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
package/lib/NumberInput/index.js CHANGED
@@ -128,7 +128,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
128
128
  return this._id;
129
129
  }
130
130
  get invalid() {
131
- return !!this.props.messages && this.props.messages.some(message => message.type === 'error');
131
+ return !!this.props.messages && this.props.messages.some(message => message.type === 'error' || message.type === 'newError');
132
132
  }
133
133
  get interaction() {
134
134
  return (0, _getInteraction.getInteraction)({
@@ -188,10 +188,13 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
188
188
  isRequired = _this$props4.isRequired,
189
189
  showArrows = _this$props4.showArrows,
190
190
  value = _this$props4.value,
191
- width = _this$props4.width;
191
+ width = _this$props4.width,
192
+ styles = _this$props4.styles;
192
193
  const interaction = this.interaction;
193
194
  return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
194
- label: (0, _callRenderProp.callRenderProp)(renderLabel),
195
+ label: (0, _emotion.jsx)(_react.default.Fragment, null, (0, _callRenderProp.callRenderProp)(renderLabel), isRequired && (0, _emotion.jsx)("span", {
196
+ css: this.invalid ? styles === null || styles === void 0 ? void 0 : styles.requiredInvalid : {}
197
+ }, " *")),
195
198
  inline: display === 'inline-block',
196
199
  id: this.id,
197
200
  elementRef: this.handleRef
package/lib/NumberInput/styles.js CHANGED
@@ -83,6 +83,9 @@ const generateStyle = (componentTheme, props, state) => {
83
83
  }
84
84
  };
85
85
  return {
86
+ requiredInvalid: {
87
+ color: componentTheme.requiredInvalidColor
88
+ },
86
89
  numberInput: {
87
90
  label: 'numberInput'
88
91
  },
package/lib/NumberInput/theme.js CHANGED
@@ -34,7 +34,7 @@ exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
38
38
  const colors = theme.colors,
39
39
  spacing = theme.spacing,
40
40
  borders = theme.borders,
@@ -57,19 +57,20 @@ const generateComponentTheme = theme => {
57
57
  borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
58
58
  color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
59
59
  background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
60
+ requiredInvalidColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.red5782,
60
61
  padding: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
61
62
  arrowsContainerWidth: '2rem',
62
- arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
63
- arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
64
- arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1214,
65
- arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
66
- arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214}`,
63
+ arrowsColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey125125,
64
+ arrowsBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1111,
65
+ arrowsHoverBackgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1214,
66
+ arrowsBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey1214,
67
+ arrowsActiveBoxShadow: `inset 0 0 3px 1px ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey1214}`,
67
68
  focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
68
69
  focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
69
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
70
- errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.red4570,
71
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
72
- placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
70
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.blue4570,
71
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.red4570,
72
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.red4570,
73
+ placeholderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.grey4570,
73
74
  mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
74
75
  mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
75
76
  largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-number-input",
3
- "version": "10.4.2-snapshot-10",
3
+ "version": "10.4.2-snapshot-13",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,11 +23,11 @@
23
23
  "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
24
24
  },
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.4.2-snapshot-10",
27
- "@instructure/ui-babel-preset": "10.4.2-snapshot-10",
28
- "@instructure/ui-scripts": "10.4.2-snapshot-10",
29
- "@instructure/ui-test-utils": "10.4.2-snapshot-10",
30
- "@instructure/ui-themes": "10.4.2-snapshot-10",
26
+ "@instructure/ui-axe-check": "10.4.2-snapshot-13",
27
+ "@instructure/ui-babel-preset": "10.4.2-snapshot-13",
28
+ "@instructure/ui-scripts": "10.4.2-snapshot-13",
29
+ "@instructure/ui-test-utils": "10.4.2-snapshot-13",
30
+ "@instructure/ui-themes": "10.4.2-snapshot-13",
31
31
  "@testing-library/jest-dom": "^6.4.6",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
@@ -35,14 +35,14 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@babel/runtime": "^7.25.6",
38
- "@instructure/emotion": "10.4.2-snapshot-10",
39
- "@instructure/shared-types": "10.4.2-snapshot-10",
40
- "@instructure/ui-form-field": "10.4.2-snapshot-10",
41
- "@instructure/ui-icons": "10.4.2-snapshot-10",
42
- "@instructure/ui-react-utils": "10.4.2-snapshot-10",
43
- "@instructure/ui-testable": "10.4.2-snapshot-10",
44
- "@instructure/ui-utils": "10.4.2-snapshot-10",
45
- "@instructure/uid": "10.4.2-snapshot-10",
38
+ "@instructure/emotion": "10.4.2-snapshot-13",
39
+ "@instructure/shared-types": "10.4.2-snapshot-13",
40
+ "@instructure/ui-form-field": "10.4.2-snapshot-13",
41
+ "@instructure/ui-icons": "10.4.2-snapshot-13",
42
+ "@instructure/ui-react-utils": "10.4.2-snapshot-13",
43
+ "@instructure/ui-testable": "10.4.2-snapshot-13",
44
+ "@instructure/ui-utils": "10.4.2-snapshot-13",
45
+ "@instructure/uid": "10.4.2-snapshot-13",
46
46
  "keycode": "^2",
47
47
  "prop-types": "^15.8.1"
48
48
  },
package/src/NumberInput/index.tsx CHANGED
@@ -101,7 +101,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
101
101
  get invalid() {
102
102
  return (
103
103
  !!this.props.messages &&
104
- this.props.messages.some((message) => message.type === 'error')
104
+ this.props.messages.some((message) => message.type === 'error' || message.type === 'newError')
105
105
  )
106
106
  }
107
107
 
@@ -232,7 +232,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
232
232
  isRequired,
233
233
  showArrows,
234
234
  value,
235
- width
235
+ width,
236
+ styles
236
237
  } = this.props
237
238
 
238
239
  const { interaction } = this
@@ -240,7 +241,14 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
240
241
  return (
241
242
  <FormField
242
243
  {...pickProps(this.props, FormField.allowedProps)}
243
- label={callRenderProp(renderLabel)}
244
+ label={
245
+ <React.Fragment>
246
+ {callRenderProp(renderLabel)}
247
+ {isRequired && (
248
+ <span css={this.invalid ? styles?.requiredInvalid : {}}> *</span>
249
+ )}
250
+ </React.Fragment>
251
+ }
244
252
  inline={display === 'inline-block'}
245
253
  id={this.id}
246
254
  elementRef={this.handleRef}
package/src/NumberInput/props.ts CHANGED
@@ -197,6 +197,7 @@ type NumberInputStyle = ComponentStyle<
197
197
  | 'inputWidth'
198
198
  | 'inputContainer'
199
199
  | 'input'
200
+ | 'requiredInvalid'
200
201
  >
201
202
 
202
203
  const propTypes: PropValidators<PropKeys> = {
package/src/NumberInput/styles.ts CHANGED
@@ -98,6 +98,9 @@ const generateStyle = (
98
98
  }
99
99
 
100
100
  return {
101
+ requiredInvalid: {
102
+ color: componentTheme.requiredInvalidColor
103
+ },
101
104
  numberInput: {
102
105
  label: 'numberInput'
103
106
  },
package/src/NumberInput/theme.ts CHANGED
@@ -53,6 +53,8 @@ const generateComponentTheme = (theme: Theme): NumberInputTheme => {
53
53
  color: colors?.contrasts?.grey125125,
54
54
  background: colors?.contrasts?.white1010,
55
55
 
56
+ requiredInvalidColor: colors?.contrasts?.red5782,
57
+
56
58
  padding: `0 ${spacing?.small}`,
57
59
 
58
60
  arrowsContainerWidth: '2rem',