@descope/web-components-ui 1.0.114 → 1.0.116
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1299 -1305
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +1384 -1390
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/201.js +1 -0
- package/dist/umd/241.js +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/65.js +1 -1
- package/dist/umd/803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +13 -5
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +40 -37
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +43 -37
- package/src/components/descope-button/ButtonClass.js +22 -6
- package/src/components/descope-combo-box/ComboBoxClass.js +49 -36
- package/src/components/descope-container/ContainerClass.js +4 -4
- package/src/components/descope-divider/DividerClass.js +74 -55
- package/src/components/descope-email-field/EmailFieldClass.js +11 -47
- package/src/components/descope-link/LinkClass.js +8 -5
- package/src/components/descope-loader-linear/LoaderLinearClass.js +16 -12
- package/src/components/descope-loader-radial/LoaderRadialClass.js +12 -11
- package/src/components/descope-new-password/NewPasswordClass.js +65 -51
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +1 -1
- package/src/components/descope-number-field/NumberFieldClass.js +11 -43
- package/src/components/descope-passcode/PasscodeClass.js +36 -29
- package/src/components/descope-password-field/PasswordFieldClass.js +52 -41
- package/src/components/descope-phone-field/PhoneFieldClass.js +61 -41
- package/src/components/descope-text/TextClass.js +8 -8
- package/src/components/descope-text-area/TextAreaClass.js +50 -48
- package/src/components/descope-text-field/TextFieldClass.js +11 -53
- package/src/components/descope-text-field/textFieldMappings.js +66 -38
- package/src/helpers/themeHelpers/index.js +10 -8
- package/src/helpers/themeHelpers/resetHelpers.js +76 -0
- package/src/index.d.ts +2 -1
- package/src/mixins/createStyleMixin/index.js +38 -27
- package/src/mixins/inputValidationMixin.js +4 -1
- package/src/mixins/proxyInputMixin.js +11 -3
- package/src/theme/components/button.js +31 -16
- package/src/theme/components/checkbox.js +18 -47
- package/src/theme/components/comboBox.js +24 -36
- package/src/theme/components/container.js +34 -47
- package/src/theme/components/divider.js +31 -20
- package/src/theme/components/emailField.js +21 -3
- package/src/theme/components/image.js +1 -1
- package/src/theme/components/index.js +4 -3
- package/src/theme/components/inputWrapper.js +72 -0
- package/src/theme/components/link.js +15 -22
- package/src/theme/components/loader/loaderLinear.js +19 -24
- package/src/theme/components/loader/loaderRadial.js +32 -47
- package/src/theme/components/logo.js +1 -1
- package/src/theme/components/newPassword.js +11 -26
- package/src/theme/components/numberField.js +21 -3
- package/src/theme/components/passcode.js +17 -28
- package/src/theme/components/passwordField.js +19 -65
- package/src/theme/components/phoneField.js +18 -57
- package/src/theme/components/switchToggle.js +20 -34
- package/src/theme/components/text.js +14 -9
- package/src/theme/components/textArea.js +20 -37
- package/src/theme/components/textField.js +21 -68
@@ -1,66 +1,28 @@
|
|
1
|
-
import globals from '../globals';
|
2
1
|
import { PhoneFieldClass } from '../../components/descope-phone-field/PhoneFieldClass';
|
3
|
-
import {
|
2
|
+
import { refs } from './inputWrapper';
|
4
3
|
|
5
|
-
const globalRefs = getThemeRefs(globals);
|
6
4
|
const vars = PhoneFieldClass.cssVarList;
|
7
5
|
|
8
6
|
const phoneField = {
|
9
|
-
[vars.
|
10
|
-
[vars.
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
12
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
13
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
14
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
15
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
16
|
+
[vars.inputBorderColor]: refs.borderColor,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
19
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
20
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
21
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
22
|
+
[vars.inputHeight]: refs.inputHeight,
|
16
23
|
[vars.phoneInputWidth]: '10em',
|
17
24
|
[vars.countryCodeInputWidth]: '5em',
|
18
|
-
|
19
|
-
[vars.inputHeight]: '2em',
|
20
|
-
[vars.countryCodeDropdownWidth]: '12em',
|
21
|
-
|
22
|
-
size: {
|
23
|
-
xs: {
|
24
|
-
[vars.fontSize]: '8px',
|
25
|
-
},
|
26
|
-
sm: {
|
27
|
-
[vars.fontSize]: '20px',
|
28
|
-
},
|
29
|
-
md: {
|
30
|
-
[vars.fontSize]: '14px',
|
31
|
-
},
|
32
|
-
lg: {
|
33
|
-
[vars.fontSize]: '20px',
|
34
|
-
},
|
35
|
-
xl: {
|
36
|
-
[vars.fontSize]: '25px',
|
37
|
-
}
|
38
|
-
},
|
39
|
-
|
40
|
-
_fullWidth: {
|
41
|
-
[vars.componentWidth]: '100%',
|
42
|
-
[vars.phoneInputWidth]: '100%',
|
43
|
-
[vars.countryCodeDropdownWidth]: '100%',
|
44
|
-
},
|
45
|
-
|
46
|
-
_bordered: {
|
47
|
-
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
48
|
-
},
|
49
|
-
|
50
|
-
[vars.outlineStyle]: 'solid',
|
51
|
-
[vars.outlineWidth]: '0.1em',
|
52
|
-
[vars.outlineColor]: 'transparent',
|
53
|
-
|
54
|
-
_focused: {
|
55
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
56
|
-
},
|
57
|
-
|
58
|
-
_invalid: {
|
59
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
60
|
-
[vars.color]: globalRefs.colors.error.main,
|
61
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
62
|
-
[vars.wrapperBorderColor]: globalRefs.colors.error.main
|
63
|
-
},
|
25
|
+
[vars.countryCodeDropdownWidth]: '20em',
|
64
26
|
|
65
27
|
// '@overlay': {
|
66
28
|
// overlayItemBackgroundColor: 'red'
|
@@ -69,4 +31,3 @@ const phoneField = {
|
|
69
31
|
|
70
32
|
export default phoneField;
|
71
33
|
export { vars }
|
72
|
-
|
@@ -1,76 +1,62 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
3
|
import { SwitchToggleClass } from '../../components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const knobMargin = '2px';
|
6
7
|
const checkboxHeight = '1.25em';
|
7
|
-
const trackBorderWidth = '2px';
|
8
8
|
|
9
9
|
const globalRefs = getThemeRefs(globals);
|
10
10
|
const vars = SwitchToggleClass.cssVarList;
|
11
11
|
|
12
12
|
const switchToggle = {
|
13
|
-
|
14
|
-
|
15
|
-
sm: { [vars.fontSize]: '12px' },
|
16
|
-
md: { [vars.fontSize]: '16px' },
|
17
|
-
lg: { [vars.fontSize]: '20px' },
|
18
|
-
xl: { [vars.fontSize]: '24px' }
|
19
|
-
},
|
13
|
+
[vars.fontSize]: refs.fontSize,
|
14
|
+
[vars.fontFamily]: refs.fontFamily,
|
20
15
|
|
21
|
-
[vars.
|
16
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
17
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
18
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
19
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
22
20
|
|
23
|
-
[vars.trackBorderStyle]:
|
24
|
-
[vars.trackBorderWidth]: trackBorderWidth
|
21
|
+
[vars.trackBorderStyle]: refs.borderStyle,
|
22
|
+
[vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
25
23
|
[vars.trackBorderColor]: globalRefs.colors.surface.contrast,
|
26
|
-
|
27
24
|
[vars.trackBackgroundColor]: 'none',
|
28
|
-
[vars.
|
29
|
-
[vars.trackWidth]: '2.5em',
|
25
|
+
[vars.trackBorderRadius]: globalRefs.radius.md,
|
26
|
+
[vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
30
27
|
[vars.trackHeight]: checkboxHeight,
|
31
28
|
|
32
29
|
[vars.knobSize]: `calc(1em - ${knobMargin})`,
|
33
30
|
[vars.knobRadius]: '50%',
|
34
31
|
[vars.knobTopOffset]: '1px',
|
35
|
-
[vars.
|
36
|
-
[vars.
|
37
|
-
[vars.
|
32
|
+
[vars.knobLeftOffset]: knobMargin,
|
33
|
+
[vars.knobColor]: refs.valueTextColor,
|
34
|
+
[vars.knobTransitionDuration]: '0.3s',
|
38
35
|
|
39
|
-
[vars.labelTextColor]:
|
36
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
40
37
|
[vars.labelFontWeight]: '400',
|
41
38
|
[vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
42
|
-
[vars.
|
39
|
+
[vars.labelSpacing]: '0.25em',
|
40
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
43
41
|
|
44
|
-
|
45
|
-
[vars.width]: '100%',
|
46
|
-
},
|
42
|
+
[vars.hostWidth]: refs.width,
|
47
43
|
|
48
44
|
_checked: {
|
49
45
|
[vars.trackBorderColor]: globalRefs.colors.primary.main,
|
50
|
-
[vars.
|
46
|
+
[vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
|
51
47
|
[vars.knobColor]: globalRefs.colors.primary.main,
|
52
|
-
[vars.knobTextColor]:
|
48
|
+
[vars.knobTextColor]: refs.valueTextColor,
|
53
49
|
},
|
54
50
|
|
55
51
|
_disabled: {
|
56
|
-
[vars.cursor]: 'not-allowed', // todo: fix cursor
|
57
52
|
[vars.knobColor]: globalRefs.colors.surface.main,
|
58
53
|
[vars.trackBorderColor]: globalRefs.colors.surface.main,
|
59
54
|
[vars.trackBackgroundColor]: globalRefs.colors.surface.light,
|
60
55
|
},
|
61
56
|
|
62
|
-
_focused: {
|
63
|
-
[vars.switchOutlineWidth]: '2px',
|
64
|
-
[vars.switchOutlineOffset]: '1px',
|
65
|
-
[vars.switchOutlineColor]: globalRefs.colors.primary.main,
|
66
|
-
[vars.switchOutlineStyle]: 'solid'
|
67
|
-
},
|
68
|
-
|
69
57
|
_invalid: {
|
70
|
-
[vars.switchOutlineColor]: globalRefs.colors.error.main,
|
71
58
|
[vars.trackBorderColor]: globalRefs.colors.error.main,
|
72
59
|
[vars.knobColor]: globalRefs.colors.error.main,
|
73
|
-
[vars.labelTextColor]: globalRefs.colors.error.main
|
74
60
|
},
|
75
61
|
};
|
76
62
|
|
@@ -3,13 +3,12 @@ import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
3
|
import { TextClass } from '../../components/descope-text/TextClass';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
6
|
const vars = TextClass.cssVarList;
|
8
7
|
|
9
8
|
const text = {
|
10
|
-
[vars.
|
9
|
+
[vars.textLineHeight]: '1em',
|
11
10
|
[vars.textAlign]: 'left',
|
12
|
-
[vars.
|
11
|
+
[vars.textColor]: globalRefs.colors.surface.dark,
|
13
12
|
variant: {
|
14
13
|
h1: {
|
15
14
|
[vars.fontSize]: globalRefs.typography.h1.size,
|
@@ -47,38 +46,44 @@ const text = {
|
|
47
46
|
[vars.fontFamily]: globalRefs.typography.body2.font
|
48
47
|
}
|
49
48
|
},
|
49
|
+
|
50
50
|
mode: {
|
51
51
|
primary: {
|
52
|
-
[vars.
|
52
|
+
[vars.textColor]: globalRefs.colors.primary.main
|
53
53
|
},
|
54
54
|
secondary: {
|
55
|
-
[vars.
|
55
|
+
[vars.textColor]: globalRefs.colors.secondary.main
|
56
56
|
},
|
57
57
|
error: {
|
58
|
-
[vars.
|
58
|
+
[vars.textColor]: globalRefs.colors.error.main
|
59
59
|
},
|
60
60
|
success: {
|
61
|
-
[vars.
|
61
|
+
[vars.textColor]: globalRefs.colors.success.main
|
62
62
|
}
|
63
63
|
},
|
64
|
+
|
64
65
|
textAlign: {
|
65
66
|
right: { [vars.textAlign]: 'right' },
|
66
67
|
left: { [vars.textAlign]: 'left' },
|
67
68
|
center: { [vars.textAlign]: 'center' }
|
68
69
|
},
|
70
|
+
|
69
71
|
_fullWidth: {
|
70
|
-
[vars.
|
72
|
+
[vars.hostWidth]: '100%',
|
71
73
|
},
|
74
|
+
|
72
75
|
_italic: {
|
73
76
|
[vars.fontStyle]: 'italic'
|
74
77
|
},
|
78
|
+
|
75
79
|
_uppercase: {
|
76
80
|
[vars.textTransform]: 'uppercase'
|
77
81
|
},
|
82
|
+
|
78
83
|
_lowercase: {
|
79
84
|
[vars.textTransform]: 'lowercase'
|
80
85
|
}
|
81
86
|
};
|
82
87
|
|
83
88
|
export default text;
|
84
|
-
export { vars }
|
89
|
+
export { vars }
|
@@ -1,55 +1,38 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
3
|
import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const globalRefs = getThemeRefs(globals);
|
6
7
|
const vars = TextAreaClass.cssVarList;
|
7
8
|
|
8
9
|
const textArea = {
|
9
|
-
[vars.
|
10
|
-
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
11
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
10
|
+
[vars.hostWidth]: refs.width,
|
12
11
|
[vars.fontSize]: '14px',
|
13
|
-
|
14
|
-
[vars.
|
15
|
-
[vars.
|
16
|
-
|
17
|
-
[vars.
|
18
|
-
[vars.
|
19
|
-
[vars.
|
20
|
-
[vars.
|
21
|
-
[vars.
|
22
|
-
[vars.
|
23
|
-
[vars.
|
24
|
-
[vars.
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
},
|
29
|
-
|
30
|
-
_focused: {
|
31
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
32
|
-
},
|
12
|
+
[vars.fontFamily]: refs.fontFamily,
|
13
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
14
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
15
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
16
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
17
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
18
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
19
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
20
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
21
|
+
[vars.inputBorderColor]: refs.borderColor,
|
22
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
23
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
24
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
25
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
26
|
+
[vars.inputResizeType]: 'vertical',
|
33
27
|
|
34
28
|
_disabled: {
|
35
|
-
[vars.
|
36
|
-
},
|
37
|
-
|
38
|
-
_bordered: {
|
39
|
-
[vars.borderColor]: globalRefs.colors.surface.main,
|
40
|
-
},
|
41
|
-
|
42
|
-
_invalid: {
|
43
|
-
[vars.labelColor]: globalRefs.colors.error.main,
|
44
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
45
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
46
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
29
|
+
[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
|
47
30
|
},
|
48
31
|
|
49
32
|
_readonly: {
|
50
|
-
[vars.
|
33
|
+
[vars.inputResizeType]: 'none',
|
51
34
|
}
|
52
35
|
};
|
53
36
|
|
54
37
|
export default textArea;
|
55
|
-
export { vars }
|
38
|
+
export { vars }
|
@@ -1,74 +1,27 @@
|
|
1
|
-
import globals from '../globals';
|
2
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
1
|
import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
|
4
|
-
|
5
|
-
const globalRefs = getThemeRefs(globals);
|
2
|
+
import { refs } from './inputWrapper';
|
6
3
|
|
7
4
|
const vars = TextFieldClass.cssVarList;
|
8
5
|
|
9
|
-
export const textField = (
|
10
|
-
[vars.
|
11
|
-
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
|
16
|
-
[vars.
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
},
|
28
|
-
lg: {
|
29
|
-
[vars.fontSize]: '20px',
|
30
|
-
},
|
31
|
-
xl: {
|
32
|
-
[vars.fontSize]: '25px',
|
33
|
-
}
|
34
|
-
},
|
35
|
-
|
36
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
37
|
-
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
38
|
-
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
39
|
-
|
40
|
-
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
41
|
-
|
42
|
-
[vars.borderWidth]: '1px',
|
43
|
-
[vars.borderStyle]: 'solid',
|
44
|
-
[vars.borderColor]: 'transparent',
|
45
|
-
[vars.borderRadius]: globalRefs.radius.xs,
|
46
|
-
|
47
|
-
_disabled: {
|
48
|
-
[vars.color]: globalRefs.colors.surface.dark,
|
49
|
-
[vars.placeholderColor]: globalRefs.colors.surface.light,
|
50
|
-
[vars.backgroundColor]: globalRefs.colors.surface.main
|
51
|
-
},
|
52
|
-
|
53
|
-
_fullWidth: {
|
54
|
-
[vars.width]: '100%'
|
55
|
-
},
|
56
|
-
|
57
|
-
_focused: {
|
58
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
59
|
-
},
|
60
|
-
|
61
|
-
_bordered: {
|
62
|
-
[vars.borderColor]: globalRefs.colors.surface.main
|
63
|
-
},
|
64
|
-
|
65
|
-
_invalid: {
|
66
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
67
|
-
[vars.color]: globalRefs.colors.error.main,
|
68
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
69
|
-
[vars.placeholderColor]: globalRefs.colors.error.light
|
70
|
-
}
|
6
|
+
export const textField = ({
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
12
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
13
|
+
[vars.inputPlaceholderColor]: refs.placeholderTextColor,
|
14
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
15
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
16
|
+
[vars.inputBorderColor]: refs.borderColor,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
19
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
20
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
21
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
22
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
23
|
+
[vars.inputHeight]: refs.inputHeight,
|
71
24
|
});
|
72
25
|
|
73
|
-
export default textField
|
74
|
-
export { vars }
|
26
|
+
export default textField;
|
27
|
+
export { vars }
|