@toptal/picasso-outlined-input 1.0.18 → 1.1.0
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.
- package/dist-package/src/OutlinedInput/OutlinedInput.d.ts +1 -0
- package/dist-package/src/OutlinedInput/OutlinedInput.d.ts.map +1 -1
- package/dist-package/src/OutlinedInput/OutlinedInput.js +15 -5
- package/dist-package/src/OutlinedInput/OutlinedInput.js.map +1 -1
- package/dist-package/src/OutlinedInput/styles.d.ts +1 -1
- package/dist-package/src/OutlinedInput/styles.d.ts.map +1 -1
- package/dist-package/src/OutlinedInput/styles.js +12 -1
- package/dist-package/src/OutlinedInput/styles.js.map +1 -1
- package/package.json +3 -2
- package/src/OutlinedInput/OutlinedInput.tsx +22 -5
- package/src/OutlinedInput/styles.ts +12 -1
|
@@ -45,6 +45,7 @@ export interface Props extends StandardProps, Omit<InputHTMLAttributes<HTMLInput
|
|
|
45
45
|
resetButton?: string;
|
|
46
46
|
validIcon?: string;
|
|
47
47
|
};
|
|
48
|
+
highlight?: 'autofill';
|
|
48
49
|
}
|
|
49
50
|
declare const OutlinedInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
|
|
50
51
|
export default OutlinedInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAW,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,SAAS,EACT,SAAS,EACT,mBAAmB,EACnB,UAAU,EACX,MAAM,OAAO,CAAA;AACd,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAW,MAAM,wBAAwB,CAAA;AAY9E,aAAK,SAAS,GACV,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,GACtC,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,CAAA;AAEV,oBAAY,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAEpD,oBAAY,cAAc,GAAG,uBAAuB,GAAG;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B,CAAA;AAED,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAC5C;IACH,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA;IAClC,cAAc,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAA;IACnD,UAAU,CAAC,EAAE,cAAc,CAAA;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC/C,qBAAqB;IACrB,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qDAAqD;IACrD,YAAY,CAAC,EAAE,CACb,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KACrD,IAAI,CAAA;IACT,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;IACtC,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAwCD,QAAA,MAAM,aAAa,2EAqHjB,CAAA;AAWF,eAAe,aAAa,CAAA"}
|
|
@@ -14,10 +14,11 @@ import cx from 'classnames';
|
|
|
14
14
|
import { makeStyles } from '@material-ui/core/styles';
|
|
15
15
|
import { OutlinedInput as MUIOutlinedInput } from '@material-ui/core';
|
|
16
16
|
import capitalize from '@material-ui/core/utils/capitalize';
|
|
17
|
-
import { InputAdornment, InputValidIconAdornment } from '@toptal/picasso-input-adornment';
|
|
17
|
+
import { InputAdornment, InputValidIconAdornment, } from '@toptal/picasso-input-adornment';
|
|
18
18
|
import { ButtonCircular } from '@toptal/picasso-button';
|
|
19
19
|
import { CloseMinor16 } from '@toptal/picasso-icons';
|
|
20
20
|
import { noop, usePropDeprecationWarning } from '@toptal/picasso-utils';
|
|
21
|
+
import { useFieldsLayoutContext } from '@toptal/picasso-form';
|
|
21
22
|
import styles from './styles';
|
|
22
23
|
const useStyles = makeStyles(styles, {
|
|
23
24
|
name: 'PicassoOutlinedInput',
|
|
@@ -27,9 +28,9 @@ const ResetButton = ({ classes, hasValue, onClick, testIds, }) => (React.createE
|
|
|
27
28
|
}) },
|
|
28
29
|
React.createElement(ButtonCircular, { tabIndex: -1, icon: React.createElement(CloseMinor16, null), variant: 'flat', role: 'reset', onClick: onClick, onMouseDown: (event) => event.preventDefault(), onFocus: (event) => event.stopPropagation() })));
|
|
29
30
|
const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
|
|
30
|
-
const { className, style, multiline, autoFocus, rows, rowsMax, width = 'auto', inputComponent, inputProps, defaultValue, value, type, error, status, startAdornment, endAdornment: userDefinedEndAdornment, onChange, size = 'medium', enableReset, disabled, onResetClick = noop, inputRef, testIds } = props, rest = __rest(props
|
|
31
|
+
const { className, style, multiline, autoFocus, rows, rowsMax, width = 'auto', inputComponent, inputProps, defaultValue, value, type, error, status, startAdornment, endAdornment: userDefinedEndAdornment, onChange, size = 'medium', enableReset, disabled, onResetClick = noop, inputRef, testIds, highlight } = props, rest = __rest(props
|
|
31
32
|
// TODO: [FX-4715]
|
|
32
|
-
, ["className", "style", "multiline", "autoFocus", "rows", "rowsMax", "width", "inputComponent", "inputProps", "defaultValue", "value", "type", "error", "status", "startAdornment", "endAdornment", "onChange", "size", "enableReset", "disabled", "onResetClick", "inputRef", "testIds"]);
|
|
33
|
+
, ["className", "style", "multiline", "autoFocus", "rows", "rowsMax", "width", "inputComponent", "inputProps", "defaultValue", "value", "type", "error", "status", "startAdornment", "endAdornment", "onChange", "size", "enableReset", "disabled", "onResetClick", "inputRef", "testIds", "highlight"]);
|
|
33
34
|
// TODO: [FX-4715]
|
|
34
35
|
usePropDeprecationWarning({
|
|
35
36
|
props,
|
|
@@ -37,6 +38,7 @@ const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
|
|
|
37
38
|
componentName: 'OutlinedInput',
|
|
38
39
|
description: 'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
|
|
39
40
|
});
|
|
41
|
+
const { layout } = useFieldsLayoutContext();
|
|
40
42
|
const classes = useStyles(props);
|
|
41
43
|
const isDark = (inputProps === null || inputProps === void 0 ? void 0 : inputProps.variant) === 'dark';
|
|
42
44
|
const shouldShowReset = enableReset && !disabled;
|
|
@@ -46,7 +48,13 @@ const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
|
|
|
46
48
|
!multiline && status === 'success' && (React.createElement(InputValidIconAdornment, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.validIcon })),
|
|
47
49
|
userDefinedEndAdornment)) : (userDefinedEndAdornment);
|
|
48
50
|
return (React.createElement(MUIOutlinedInput, Object.assign({}, rest, { classes: {
|
|
49
|
-
root: cx(classes.root, classes[`root${capitalize(width)}`], classes[`root${capitalize(size)}`], {
|
|
51
|
+
root: cx(classes.root, classes[`root${capitalize(width)}`], classes[`root${capitalize(size)}`], {
|
|
52
|
+
[`${classes.hidden}`]: type === 'hidden',
|
|
53
|
+
[classes.rootDark]: isDark,
|
|
54
|
+
[classes.highlightAutofill]: highlight === 'autofill',
|
|
55
|
+
[classes.horizontalLayout]: layout === 'horizontal',
|
|
56
|
+
[classes.error]: Boolean(status === 'error' || error),
|
|
57
|
+
}),
|
|
50
58
|
input: cx(classes.input, classes[`input${capitalize(size)}`], {
|
|
51
59
|
[classes.inputDark]: isDark,
|
|
52
60
|
}),
|
|
@@ -55,7 +63,9 @@ const OutlinedInput = forwardRef(function OutlinedInput(props, ref) {
|
|
|
55
63
|
[classes.notchedOutlineDark]: isDark,
|
|
56
64
|
}),
|
|
57
65
|
focused: classes.focused,
|
|
58
|
-
}, className:
|
|
66
|
+
}, className: cx({
|
|
67
|
+
[classes.error]: Boolean(status === 'error' || error),
|
|
68
|
+
}, className), style: style, labelWidth: 0, fullWidth: width === 'full', error: Boolean(status === 'error' || error), inputComponent: inputComponent, inputProps: inputProps, ref: ref, inputRef: inputRef, defaultValue: defaultValue, value: value, type: type, startAdornment: startAdornment, endAdornment: endAdornment, multiline: multiline, autoFocus: autoFocus, minRows: rows, maxRows: rowsMax, onChange: onChange, disabled: disabled })));
|
|
59
69
|
});
|
|
60
70
|
OutlinedInput.defaultProps = {
|
|
61
71
|
width: 'auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAOA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,UAAU,MAAM,oCAAoC,CAAA;AAE3D,OAAO,
|
|
1
|
+
{"version":3,"file":"OutlinedInput.js","sourceRoot":"","sources":["../../../src/OutlinedInput/OutlinedInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette, sizes: { input } }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "focused" | "notchedOutline" | "input" | "inputMultiline" | "hidden" | "rootSmall" | "rootMedium" | "rootLarge" | "rootFull" | "rootShrink" | "rootAuto" | "inputSmall" | "inputMedium" | "inputLarge" | "resetButton" | "resetButtonDirty" | "rootDark" | "notchedOutlineDark" | "inputDark">;
|
|
2
|
+
declare const _default: ({ palette, sizes: { input } }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "focused" | "error" | "notchedOutline" | "input" | "inputMultiline" | "hidden" | "rootSmall" | "rootMedium" | "rootLarge" | "rootFull" | "rootShrink" | "rootAuto" | "inputSmall" | "inputMedium" | "inputLarge" | "resetButton" | "resetButtonDirty" | "rootDark" | "notchedOutlineDark" | "inputDark" | "highlightAutofill" | "horizontalLayout">;
|
|
3
3
|
export default _default;
|
|
4
4
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;wDAwFN,KAAK;AAApD,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;wDAwFN,KAAK;AAApD,wBA8FI"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
import { darken, outline } from '@toptal/picasso-shared';
|
|
2
|
+
import { darken, outline, alpha } from '@toptal/picasso-shared';
|
|
3
3
|
import { PicassoProvider } from '@toptal/picasso-provider';
|
|
4
4
|
PicassoProvider.override(({ palette, sizes: { input, borderRadius } }) => ({
|
|
5
5
|
MuiOutlinedInput: {
|
|
@@ -80,6 +80,9 @@ export default ({ palette, sizes: { input } }) => createStyles({
|
|
|
80
80
|
'&$focused': {
|
|
81
81
|
'& $notchedOutline$notchedOutlineDark': Object.assign({}, outline(palette.common.white)),
|
|
82
82
|
},
|
|
83
|
+
'&$error': {
|
|
84
|
+
backgroundColor: palette.common.white,
|
|
85
|
+
},
|
|
83
86
|
},
|
|
84
87
|
hidden: {
|
|
85
88
|
display: 'none',
|
|
@@ -142,5 +145,13 @@ export default ({ palette, sizes: { input } }) => createStyles({
|
|
|
142
145
|
opacity: 0.64,
|
|
143
146
|
},
|
|
144
147
|
},
|
|
148
|
+
highlightAutofill: {
|
|
149
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
150
|
+
backgroundColor: alpha(palette.yellow.lighter, 0.6),
|
|
151
|
+
},
|
|
152
|
+
horizontalLayout: {
|
|
153
|
+
width: '100%',
|
|
154
|
+
},
|
|
155
|
+
error: {},
|
|
145
156
|
});
|
|
146
157
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/OutlinedInput/styles.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-outlined-input",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Toptal UI components library - OutlinedInput",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,7 +22,8 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-button": "2.0.
|
|
25
|
+
"@toptal/picasso-button": "2.0.5",
|
|
26
|
+
"@toptal/picasso-form": "3.0.4",
|
|
26
27
|
"@toptal/picasso-icons": "1.2.0",
|
|
27
28
|
"@toptal/picasso-input-adornment": "1.0.5",
|
|
28
29
|
"@toptal/picasso-shared": "15.0.0",
|
|
@@ -13,10 +13,14 @@ import { OutlinedInput as MUIOutlinedInput } from '@material-ui/core'
|
|
|
13
13
|
import type { InputBaseComponentProps } from '@material-ui/core/InputBase'
|
|
14
14
|
import capitalize from '@material-ui/core/utils/capitalize'
|
|
15
15
|
import type { StandardProps, SizeType, Classes } from '@toptal/picasso-shared'
|
|
16
|
-
import {
|
|
16
|
+
import {
|
|
17
|
+
InputAdornment,
|
|
18
|
+
InputValidIconAdornment,
|
|
19
|
+
} from '@toptal/picasso-input-adornment'
|
|
17
20
|
import { ButtonCircular } from '@toptal/picasso-button'
|
|
18
21
|
import { CloseMinor16 } from '@toptal/picasso-icons'
|
|
19
|
-
import { noop
|
|
22
|
+
import { noop, usePropDeprecationWarning } from '@toptal/picasso-utils'
|
|
23
|
+
import { useFieldsLayoutContext } from '@toptal/picasso-form'
|
|
20
24
|
|
|
21
25
|
import styles from './styles'
|
|
22
26
|
|
|
@@ -79,6 +83,7 @@ export interface Props
|
|
|
79
83
|
resetButton?: string
|
|
80
84
|
validIcon?: string
|
|
81
85
|
}
|
|
86
|
+
highlight?: 'autofill'
|
|
82
87
|
}
|
|
83
88
|
|
|
84
89
|
const useStyles = makeStyles<Theme, Props>(styles, {
|
|
@@ -147,6 +152,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
147
152
|
onResetClick = noop,
|
|
148
153
|
inputRef,
|
|
149
154
|
testIds,
|
|
155
|
+
highlight,
|
|
150
156
|
...rest
|
|
151
157
|
} = props
|
|
152
158
|
|
|
@@ -159,6 +165,7 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
159
165
|
'Use the `status` prop instead. `error` is deprecated and will be removed in the next major release.',
|
|
160
166
|
})
|
|
161
167
|
|
|
168
|
+
const { layout } = useFieldsLayoutContext()
|
|
162
169
|
const classes = useStyles(props)
|
|
163
170
|
const isDark = inputProps?.variant === 'dark'
|
|
164
171
|
const shouldShowReset = enableReset && !disabled
|
|
@@ -190,8 +197,13 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
190
197
|
classes.root,
|
|
191
198
|
classes[`root${capitalize(width)}`],
|
|
192
199
|
classes[`root${capitalize(size)}`],
|
|
193
|
-
{
|
|
194
|
-
|
|
200
|
+
{
|
|
201
|
+
[`${classes.hidden}`]: type === 'hidden',
|
|
202
|
+
[classes.rootDark]: isDark,
|
|
203
|
+
[classes.highlightAutofill]: highlight === 'autofill',
|
|
204
|
+
[classes.horizontalLayout]: layout === 'horizontal',
|
|
205
|
+
[classes.error]: Boolean(status === 'error' || error),
|
|
206
|
+
}
|
|
195
207
|
),
|
|
196
208
|
input: cx(classes.input, classes[`input${capitalize(size)}`], {
|
|
197
209
|
[classes.inputDark]: isDark,
|
|
@@ -202,7 +214,12 @@ const OutlinedInput = forwardRef<HTMLElement, Props>(function OutlinedInput(
|
|
|
202
214
|
}),
|
|
203
215
|
focused: classes.focused,
|
|
204
216
|
}}
|
|
205
|
-
className={
|
|
217
|
+
className={cx(
|
|
218
|
+
{
|
|
219
|
+
[classes.error]: Boolean(status === 'error' || error),
|
|
220
|
+
},
|
|
221
|
+
className
|
|
222
|
+
)}
|
|
206
223
|
style={style}
|
|
207
224
|
labelWidth={0}
|
|
208
225
|
fullWidth={width === 'full'}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles'
|
|
2
2
|
import { createStyles } from '@material-ui/core/styles'
|
|
3
|
-
import { darken, outline } from '@toptal/picasso-shared'
|
|
3
|
+
import { darken, outline, alpha } from '@toptal/picasso-shared'
|
|
4
4
|
import { PicassoProvider } from '@toptal/picasso-provider'
|
|
5
5
|
|
|
6
6
|
PicassoProvider.override(
|
|
@@ -105,6 +105,9 @@ export default ({ palette, sizes: { input } }: Theme) =>
|
|
|
105
105
|
...outline(palette.common.white),
|
|
106
106
|
},
|
|
107
107
|
},
|
|
108
|
+
'&$error': {
|
|
109
|
+
backgroundColor: palette.common.white,
|
|
110
|
+
},
|
|
108
111
|
},
|
|
109
112
|
hidden: {
|
|
110
113
|
display: 'none',
|
|
@@ -169,4 +172,12 @@ export default ({ palette, sizes: { input } }: Theme) =>
|
|
|
169
172
|
opacity: 0.64,
|
|
170
173
|
},
|
|
171
174
|
},
|
|
175
|
+
highlightAutofill: {
|
|
176
|
+
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
177
|
+
backgroundColor: alpha(palette.yellow.lighter!, 0.6),
|
|
178
|
+
},
|
|
179
|
+
horizontalLayout: {
|
|
180
|
+
width: '100%',
|
|
181
|
+
},
|
|
182
|
+
error: {},
|
|
172
183
|
})
|