@fluentui/react-field 9.1.58 → 9.1.59
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +16 -7
- package/lib/components/Field/useFieldStyles.styles.js +18 -11
- package/lib/components/Field/useFieldStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.styles.js +24 -12
- package/lib-commonjs/components/Field/useFieldStyles.styles.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-field
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon,
|
|
3
|
+
This log was last generated on Mon, 25 Mar 2024 11:09:55 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.59](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.59)
|
|
8
|
+
|
|
9
|
+
Mon, 25 Mar 2024 11:09:55 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.58..@fluentui/react-field_v9.1.59)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Align horizontal Field labels with control text ([PR #30732](https://github.com/microsoft/fluentui/pull/30732) by behowell@microsoft.com)
|
|
15
|
+
|
|
7
16
|
## [9.1.58](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.58)
|
|
8
17
|
|
|
9
|
-
Mon, 18 Mar 2024 19:
|
|
18
|
+
Mon, 18 Mar 2024 19:50:46 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.57..@fluentui/react-field_v9.1.58)
|
|
11
20
|
|
|
12
21
|
### Patches
|
|
13
22
|
|
|
14
|
-
- Bump @fluentui/react-context-selector to v9.1.56 ([PR #
|
|
15
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #
|
|
16
|
-
- Bump @fluentui/react-label to v9.1.66 ([PR #
|
|
17
|
-
- Bump @fluentui/react-theme to v9.1.19 ([PR #
|
|
18
|
-
- Bump @fluentui/react-utilities to v9.18.5 ([PR #
|
|
23
|
+
- Bump @fluentui/react-context-selector to v9.1.56 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
24
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.34 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
25
|
+
- Bump @fluentui/react-label to v9.1.66 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
26
|
+
- Bump @fluentui/react-theme to v9.1.19 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
|
|
19
28
|
|
|
20
29
|
## [9.1.57](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.57)
|
|
21
30
|
|
|
@@ -28,27 +28,33 @@ const useRootStyles = /*#__PURE__*/__styles({
|
|
|
28
28
|
d: [".f13qh94s{display:grid;}", ".f2wwaib{grid-template-columns:33% 1fr;}", ".f1645dqt{grid-template-rows:auto auto auto 1fr;}", ".f15jqgz8{padding-left:33%;}", ".fggqkej{padding-right:33%;}", ".f1c2z91y{grid-template-columns:1fr;}"]
|
|
29
29
|
});
|
|
30
30
|
const useLabelStyles = /*#__PURE__*/__styles({
|
|
31
|
-
base: {
|
|
32
|
-
z8tnut: "fclwglc",
|
|
33
|
-
Byoj8tv: "fywfov9"
|
|
34
|
-
},
|
|
35
|
-
large: {
|
|
36
|
-
z8tnut: "f1sl3k7w",
|
|
37
|
-
Byoj8tv: "f1brlhvm"
|
|
38
|
-
},
|
|
39
31
|
vertical: {
|
|
32
|
+
z8tnut: "fclwglc",
|
|
33
|
+
Byoj8tv: "fywfov9",
|
|
40
34
|
jrapky: "fyacil5"
|
|
41
35
|
},
|
|
42
36
|
verticalLarge: {
|
|
37
|
+
z8tnut: "f1sl3k7w",
|
|
38
|
+
Byoj8tv: "f1brlhvm",
|
|
43
39
|
jrapky: "f8l5zjj"
|
|
44
40
|
},
|
|
45
41
|
horizontal: {
|
|
42
|
+
z8tnut: "fp2oml8",
|
|
43
|
+
Byoj8tv: "f1tdddsa",
|
|
46
44
|
t21cq0: ["fkujibs", "f199hnxi"],
|
|
47
45
|
Ijaq50: "f16hsg94",
|
|
48
46
|
nk6f5a: "f1nzqi2z"
|
|
47
|
+
},
|
|
48
|
+
horizontalSmall: {
|
|
49
|
+
z8tnut: "f1ywm7hm",
|
|
50
|
+
Byoj8tv: "f14wxoun"
|
|
51
|
+
},
|
|
52
|
+
horizontalLarge: {
|
|
53
|
+
z8tnut: "f1hqyr95",
|
|
54
|
+
Byoj8tv: "fm4hlj0"
|
|
49
55
|
}
|
|
50
56
|
}, {
|
|
51
|
-
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".
|
|
57
|
+
d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
|
|
52
58
|
});
|
|
53
59
|
const useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles("r5c4z9l", null, [".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
|
|
54
60
|
const useSecondaryTextStyles = /*#__PURE__*/__styles({
|
|
@@ -80,14 +86,15 @@ const useValidationMessageIconStyles = /*#__PURE__*/__styles({
|
|
|
80
86
|
*/
|
|
81
87
|
export const useFieldStyles_unstable = state => {
|
|
82
88
|
const {
|
|
83
|
-
validationState
|
|
89
|
+
validationState,
|
|
90
|
+
size
|
|
84
91
|
} = state;
|
|
85
92
|
const horizontal = state.orientation === 'horizontal';
|
|
86
93
|
const rootStyles = useRootStyles();
|
|
87
94
|
state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
88
95
|
const labelStyles = useLabelStyles();
|
|
89
96
|
if (state.label) {
|
|
90
|
-
state.label.className = mergeClasses(fieldClassNames.label,
|
|
97
|
+
state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
91
98
|
}
|
|
92
99
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
93
100
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","
|
|
1
|
+
{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n base: {\n display: 'grid'\n },\n // In horizontal layout, the field is a grid with the label taking up the entire first column.\n // The last row is slack space in case the label is taller than the rest of the content.\n horizontal: {\n gridTemplateColumns: '33% 1fr',\n gridTemplateRows: 'auto auto auto 1fr'\n },\n // In horizontal layout without a label, replace the label's column with padding.\n // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n horizontalNoLabel: {\n paddingLeft: '33%',\n gridTemplateColumns: '1fr'\n }\n});\nconst useLabelStyles = makeStyles({\n vertical: {\n paddingTop: tokens.spacingVerticalXXS,\n paddingBottom: tokens.spacingVerticalXXS,\n marginBottom: tokens.spacingVerticalXXS\n },\n verticalLarge: {\n paddingTop: '1px',\n paddingBottom: '1px',\n marginBottom: tokens.spacingVerticalXS\n },\n horizontal: {\n paddingTop: tokens.spacingVerticalSNudge,\n paddingBottom: tokens.spacingVerticalSNudge,\n marginRight: tokens.spacingHorizontalM,\n gridRowStart: '1',\n gridRowEnd: '-1'\n },\n horizontalSmall: {\n paddingTop: tokens.spacingVerticalXS,\n paddingBottom: tokens.spacingVerticalXS\n },\n horizontalLarge: {\n // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n paddingTop: '9px',\n paddingBottom: '9px'\n }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n marginTop: tokens.spacingVerticalXXS,\n color: tokens.colorNeutralForeground3,\n ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n withIcon: {\n // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n display: 'inline-block',\n fontSize: iconSize,\n // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n marginRight: tokens.spacingHorizontalXS,\n // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n lineHeight: '0',\n // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n error: {\n color: tokens.colorPaletteRedForeground1\n },\n warning: {\n color: tokens.colorPaletteDarkOrangeForeground1\n },\n success: {\n color: tokens.colorPaletteGreenForeground1\n }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n const { validationState, size } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -54,40 +54,52 @@ const iconSize = '12px';
|
|
|
54
54
|
]
|
|
55
55
|
});
|
|
56
56
|
const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
57
|
-
base: {
|
|
58
|
-
z8tnut: "fclwglc",
|
|
59
|
-
Byoj8tv: "fywfov9"
|
|
60
|
-
},
|
|
61
|
-
large: {
|
|
62
|
-
z8tnut: "f1sl3k7w",
|
|
63
|
-
Byoj8tv: "f1brlhvm"
|
|
64
|
-
},
|
|
65
57
|
vertical: {
|
|
58
|
+
z8tnut: "fclwglc",
|
|
59
|
+
Byoj8tv: "fywfov9",
|
|
66
60
|
jrapky: "fyacil5"
|
|
67
61
|
},
|
|
68
62
|
verticalLarge: {
|
|
63
|
+
z8tnut: "f1sl3k7w",
|
|
64
|
+
Byoj8tv: "f1brlhvm",
|
|
69
65
|
jrapky: "f8l5zjj"
|
|
70
66
|
},
|
|
71
67
|
horizontal: {
|
|
68
|
+
z8tnut: "fp2oml8",
|
|
69
|
+
Byoj8tv: "f1tdddsa",
|
|
72
70
|
t21cq0: [
|
|
73
71
|
"fkujibs",
|
|
74
72
|
"f199hnxi"
|
|
75
73
|
],
|
|
76
74
|
Ijaq50: "f16hsg94",
|
|
77
75
|
nk6f5a: "f1nzqi2z"
|
|
76
|
+
},
|
|
77
|
+
horizontalSmall: {
|
|
78
|
+
z8tnut: "f1ywm7hm",
|
|
79
|
+
Byoj8tv: "f14wxoun"
|
|
80
|
+
},
|
|
81
|
+
horizontalLarge: {
|
|
82
|
+
z8tnut: "f1hqyr95",
|
|
83
|
+
Byoj8tv: "fm4hlj0"
|
|
78
84
|
}
|
|
79
85
|
}, {
|
|
80
86
|
d: [
|
|
81
87
|
".fclwglc{padding-top:var(--spacingVerticalXXS);}",
|
|
82
88
|
".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
|
|
89
|
+
".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
|
|
83
90
|
".f1sl3k7w{padding-top:1px;}",
|
|
84
91
|
".f1brlhvm{padding-bottom:1px;}",
|
|
85
|
-
".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
|
|
86
92
|
".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
|
|
93
|
+
".fp2oml8{padding-top:var(--spacingVerticalSNudge);}",
|
|
94
|
+
".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}",
|
|
87
95
|
".fkujibs{margin-right:var(--spacingHorizontalM);}",
|
|
88
96
|
".f199hnxi{margin-left:var(--spacingHorizontalM);}",
|
|
89
97
|
".f16hsg94{grid-row-start:1;}",
|
|
90
|
-
".f1nzqi2z{grid-row-end:-1;}"
|
|
98
|
+
".f1nzqi2z{grid-row-end:-1;}",
|
|
99
|
+
".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
|
|
100
|
+
".f14wxoun{padding-bottom:var(--spacingVerticalXS);}",
|
|
101
|
+
".f1hqyr95{padding-top:9px;}",
|
|
102
|
+
".fm4hlj0{padding-bottom:9px;}"
|
|
91
103
|
]
|
|
92
104
|
});
|
|
93
105
|
const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r5c4z9l", null, [
|
|
@@ -132,13 +144,13 @@ const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
132
144
|
]
|
|
133
145
|
});
|
|
134
146
|
const useFieldStyles_unstable = (state)=>{
|
|
135
|
-
const { validationState } = state;
|
|
147
|
+
const { validationState, size } = state;
|
|
136
148
|
const horizontal = state.orientation === 'horizontal';
|
|
137
149
|
const rootStyles = useRootStyles();
|
|
138
150
|
state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
|
|
139
151
|
const labelStyles = useLabelStyles();
|
|
140
152
|
if (state.label) {
|
|
141
|
-
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label,
|
|
153
|
+
state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
|
|
142
154
|
}
|
|
143
155
|
const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
|
|
144
156
|
const validationMessageIconStyles = useValidationMessageIconStyles();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f13qh94s\"\n },\n horizontal: {\n Budl1dq: \"f2wwaib\",\n wkccdc: \"f1645dqt\"\n },\n horizontalNoLabel: {\n uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n Budl1dq: \"f1c2z91y\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n
|
|
1
|
+
{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n root: `fui-Field`,\n label: `fui-Field__label`,\n validationMessage: `fui-Field__validationMessage`,\n validationMessageIcon: `fui-Field__validationMessageIcon`,\n hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n base: {\n mc9l5x: \"f13qh94s\"\n },\n horizontal: {\n Budl1dq: \"f2wwaib\",\n wkccdc: \"f1645dqt\"\n },\n horizontalNoLabel: {\n uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n Budl1dq: \"f1c2z91y\"\n }\n}, {\n d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n vertical: {\n z8tnut: \"fclwglc\",\n Byoj8tv: \"fywfov9\",\n jrapky: \"fyacil5\"\n },\n verticalLarge: {\n z8tnut: \"f1sl3k7w\",\n Byoj8tv: \"f1brlhvm\",\n jrapky: \"f8l5zjj\"\n },\n horizontal: {\n z8tnut: \"fp2oml8\",\n Byoj8tv: \"f1tdddsa\",\n t21cq0: [\"fkujibs\", \"f199hnxi\"],\n Ijaq50: \"f16hsg94\",\n nk6f5a: \"f1nzqi2z\"\n },\n horizontalSmall: {\n z8tnut: \"f1ywm7hm\",\n Byoj8tv: \"f14wxoun\"\n },\n horizontalLarge: {\n z8tnut: \"f1hqyr95\",\n Byoj8tv: \"fm4hlj0\"\n }\n}, {\n d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fp2oml8{padding-top:var(--spacingVerticalSNudge);}\", \".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\", \".f1hqyr95{padding-top:9px;}\", \".fm4hlj0{padding-bottom:9px;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n withIcon: {\n uwmqm3: [\"frawy03\", \"fg4c52\"]\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n error: {\n sj55zd: \"f1hcrxcs\"\n },\n warning: {\n sj55zd: \"f1k5f75o\"\n },\n success: {\n sj55zd: \"ffmvakt\"\n }\n}, {\n d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n const {\n validationState,\n size\n } = state;\n const horizontal = state.orientation === 'horizontal';\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n }\n const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n const validationMessageIconStyles = useValidationMessageIconStyles();\n if (state.validationMessageIcon) {\n state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n }\n const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n const secondaryTextStyles = useSecondaryTextStyles();\n if (state.validationMessage) {\n state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n }\n if (state.hint) {\n state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n }\n return state;\n};\n//# sourceMappingURL=useFieldStyles.styles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","size","orientation","rootStyles","className","mergeClasses","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
|