@fluentui/react-card 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250704-0407.1

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 +15 -15
  2. package/package.json +12 -12
  3. package/lib/components/Card/useCardStyles.styles.raw.js +0 -366
  4. package/lib/components/Card/useCardStyles.styles.raw.js.map +0 -1
  5. package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js +0 -37
  6. package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map +0 -1
  7. package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js +0 -103
  8. package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +0 -1
  9. package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js +0 -35
  10. package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +0 -1
  11. package/lib-commonjs/components/Card/useCardStyles.styles.raw.js +0 -382
  12. package/lib-commonjs/components/Card/useCardStyles.styles.raw.js.map +0 -1
  13. package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js +0 -51
  14. package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js.map +0 -1
  15. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js +0 -118
  16. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +0 -1
  17. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js +0 -49
  18. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,28 +1,28 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Thu, 03 Jul 2025 11:19:39 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 04 Jul 2025 04:23:35 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250703-1103.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250703-1103.1)
7
+ ## [0.0.0-nightly-20250704-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20250704-0407.1)
8
8
 
9
- Thu, 03 Jul 2025 11:19:39 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.3..@fluentui/react-card_v0.0.0-nightly-20250703-1103.1)
9
+ Fri, 04 Jul 2025 04:23:35 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.3..@fluentui/react-card_v0.0.0-nightly-20250704-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
17
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
18
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
19
- - Bump @fluentui/react-text to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
20
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
21
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
22
- - Bump @fluentui/react-button to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
23
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
25
- - Bump @fluentui/react-provider to v0.0.0-nightly-20250703-1103.1 ([commit](https://github.com/microsoft/fluentui/commit/526d249cdcd844e3f173f9163b3ce779fe6035e8) by beachball)
15
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
19
+ - Bump @fluentui/react-text to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
20
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
22
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
23
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
25
+ - Bump @fluentui/react-provider to v0.0.0-nightly-20250704-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3c4698d79cc2b57bd02e8dadb393007150178c18) by beachball)
26
26
 
27
27
  ## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.3.3)
28
28
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "0.0.0-nightly-20250703-1103.1",
3
+ "version": "0.0.0-nightly-20250704-0407.1",
4
4
  "private": false,
5
5
  "description": "Card container components for Fluent UI React.",
6
6
  "main": "lib-commonjs/index.js",
@@ -14,21 +14,21 @@
14
14
  "license": "MIT",
15
15
  "devDependencies": {
16
16
  "@fluentui/eslint-plugin": "*",
17
- "@fluentui/react-button": "0.0.0-nightly-20250703-1103.1",
18
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250703-1103.1",
19
- "@fluentui/react-conformance": "0.0.0-nightly-20250703-1103.1",
20
- "@fluentui/react-provider": "0.0.0-nightly-20250703-1103.1",
17
+ "@fluentui/react-button": "0.0.0-nightly-20250704-0407.1",
18
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250704-0407.1",
19
+ "@fluentui/react-conformance": "0.0.0-nightly-20250704-0407.1",
20
+ "@fluentui/react-provider": "0.0.0-nightly-20250704-0407.1",
21
21
  "@fluentui/scripts-api-extractor": "*",
22
22
  "@fluentui/scripts-cypress": "*"
23
23
  },
24
24
  "dependencies": {
25
- "@fluentui/keyboard-keys": "0.0.0-nightly-20250703-1103.1",
26
- "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250703-1103.1",
27
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20250703-1103.1",
28
- "@fluentui/react-tabster": "0.0.0-nightly-20250703-1103.1",
29
- "@fluentui/react-text": "0.0.0-nightly-20250703-1103.1",
30
- "@fluentui/react-theme": "0.0.0-nightly-20250703-1103.1",
31
- "@fluentui/react-utilities": "0.0.0-nightly-20250703-1103.1",
25
+ "@fluentui/keyboard-keys": "0.0.0-nightly-20250704-0407.1",
26
+ "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250704-0407.1",
27
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20250704-0407.1",
28
+ "@fluentui/react-tabster": "0.0.0-nightly-20250704-0407.1",
29
+ "@fluentui/react-text": "0.0.0-nightly-20250704-0407.1",
30
+ "@fluentui/react-theme": "0.0.0-nightly-20250704-0407.1",
31
+ "@fluentui/react-utilities": "0.0.0-nightly-20250704-0407.1",
32
32
  "@griffel/react": "^1.5.22",
33
33
  "@swc/helpers": "^0.5.1"
34
34
  },
package/lib/components/Card/useCardStyles.styles.raw.js DELETED
@@ -1,366 +0,0 @@
1
- import * as React from 'react';
2
- import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
3
- import { tokens } from '@fluentui/react-theme';
4
- import { textClassNames } from '@fluentui/react-text';
5
- import { createFocusOutlineStyle } from '@fluentui/react-tabster';
6
- import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
7
- import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
8
- import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
9
- /**
10
- * Static CSS class names used internally for the component slots.
11
- */ export const cardClassNames = {
12
- root: 'fui-Card',
13
- floatingAction: 'fui-Card__floatingAction',
14
- checkbox: 'fui-Card__checkbox'
15
- };
16
- /**
17
- * CSS variable names used internally for uniform styling in Card.
18
- */ export const cardCSSVars = {
19
- cardSizeVar: '--fui-Card--size',
20
- cardBorderRadiusVar: '--fui-Card--border-radius'
21
- };
22
- const focusOutlineStyle = {
23
- outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
24
- outlineWidth: tokens.strokeWidthThick,
25
- outlineOffset: '-2px'
26
- };
27
- const useCardResetStyles = makeResetStyles({
28
- overflow: 'hidden',
29
- borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
30
- padding: `var(${cardCSSVars.cardSizeVar})`,
31
- gap: `var(${cardCSSVars.cardSizeVar})`,
32
- display: 'flex',
33
- position: 'relative',
34
- boxSizing: 'border-box',
35
- color: tokens.colorNeutralForeground1,
36
- // Border setting using after pseudo element to allow CardPreview to render behind it.
37
- '::after': {
38
- position: 'absolute',
39
- top: 0,
40
- left: 0,
41
- right: 0,
42
- bottom: 0,
43
- content: '""',
44
- pointerEvents: 'none',
45
- ...shorthands.borderStyle('solid'),
46
- ...shorthands.borderWidth(tokens.strokeWidthThin),
47
- borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
48
- },
49
- // Prevents CardHeader and CardFooter from shrinking.
50
- [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {
51
- flexShrink: 0
52
- }
53
- });
54
- const useCardStyles = makeStyles({
55
- focused: {
56
- ...createFocusOutlineStyle({
57
- style: focusOutlineStyle,
58
- selector: 'focus'
59
- })
60
- },
61
- selectableFocused: createFocusOutlineStyle({
62
- style: focusOutlineStyle,
63
- selector: 'focus-within'
64
- }),
65
- orientationHorizontal: {
66
- flexDirection: 'row',
67
- alignItems: 'center',
68
- // Remove vertical padding to keep CardPreview content flush with Card's borders.
69
- [`> .${cardPreviewClassNames.root}`]: {
70
- marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
71
- marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
72
- },
73
- // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
74
- // As such, the code below targets a CardPreview, when it's the first element.
75
- // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.
76
- [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
77
- marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
78
- },
79
- // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
80
- // As such, the code below targets a CardPreview, when it's the last element.
81
- // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.
82
- [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
83
- marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
84
- },
85
- // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
86
- [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {
87
- flexGrow: 1
88
- }
89
- },
90
- orientationVertical: {
91
- flexDirection: 'column',
92
- // Remove lateral padding to keep CardPreview content flush with Card's borders.
93
- [`> .${cardPreviewClassNames.root}`]: {
94
- marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
95
- marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
96
- },
97
- // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
98
- // As such, the code below targets a CardPreview, when it's the first element.
99
- // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.
100
- [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
101
- marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
102
- },
103
- [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {
104
- marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
105
- },
106
- // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
107
- // As such, the code below targets a CardPreview, when it's the first element.
108
- // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.
109
- [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
110
- marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
111
- }
112
- },
113
- sizeSmall: {
114
- [cardCSSVars.cardSizeVar]: '8px',
115
- [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall
116
- },
117
- sizeMedium: {
118
- [cardCSSVars.cardSizeVar]: '12px',
119
- [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium
120
- },
121
- sizeLarge: {
122
- [cardCSSVars.cardSizeVar]: '16px',
123
- [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge
124
- },
125
- interactive: {
126
- [`& .${textClassNames.root}`]: {
127
- color: 'currentColor'
128
- }
129
- },
130
- filled: {
131
- backgroundColor: tokens.colorNeutralBackground1,
132
- boxShadow: tokens.shadow4,
133
- '::after': {
134
- ...shorthands.borderColor(tokens.colorTransparentStroke)
135
- }
136
- },
137
- filledInteractive: {
138
- cursor: 'pointer',
139
- backgroundColor: tokens.colorNeutralBackground1,
140
- boxShadow: tokens.shadow4,
141
- '::after': {
142
- ...shorthands.borderColor(tokens.colorTransparentStroke)
143
- },
144
- ':hover': {
145
- color: tokens.colorNeutralForeground1Hover,
146
- backgroundColor: tokens.colorNeutralBackground1Hover,
147
- boxShadow: tokens.shadow8
148
- },
149
- ':active': {
150
- backgroundColor: tokens.colorNeutralBackground1Pressed
151
- }
152
- },
153
- filledInteractiveSelected: {
154
- backgroundColor: tokens.colorNeutralBackground1Selected,
155
- '::after': {
156
- ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
157
- },
158
- ':hover': {
159
- color: tokens.colorNeutralForeground1Selected,
160
- backgroundColor: tokens.colorNeutralBackground1Selected
161
- }
162
- },
163
- filledAlternative: {
164
- backgroundColor: tokens.colorNeutralBackground2,
165
- boxShadow: tokens.shadow4,
166
- '::after': {
167
- ...shorthands.borderColor(tokens.colorTransparentStroke)
168
- }
169
- },
170
- filledAlternativeInteractive: {
171
- cursor: 'pointer',
172
- backgroundColor: tokens.colorNeutralBackground2,
173
- boxShadow: tokens.shadow4,
174
- '::after': {
175
- ...shorthands.borderColor(tokens.colorTransparentStroke)
176
- },
177
- ':hover': {
178
- color: tokens.colorNeutralForeground2Hover,
179
- backgroundColor: tokens.colorNeutralBackground2Hover,
180
- boxShadow: tokens.shadow8
181
- },
182
- ':active': {
183
- backgroundColor: tokens.colorNeutralBackground2Pressed
184
- }
185
- },
186
- filledAlternativeInteractiveSelected: {
187
- backgroundColor: tokens.colorNeutralBackground2Selected,
188
- '::after': {
189
- ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
190
- },
191
- ':hover': {
192
- color: tokens.colorNeutralForeground2Selected,
193
- backgroundColor: tokens.colorNeutralBackground2Selected
194
- }
195
- },
196
- outline: {
197
- backgroundColor: tokens.colorTransparentBackground,
198
- boxShadow: 'none',
199
- '::after': {
200
- ...shorthands.borderColor(tokens.colorNeutralStroke1)
201
- }
202
- },
203
- outlineInteractive: {
204
- cursor: 'pointer',
205
- backgroundColor: tokens.colorTransparentBackground,
206
- boxShadow: 'none',
207
- '::after': {
208
- ...shorthands.borderColor(tokens.colorNeutralStroke1)
209
- },
210
- ':hover': {
211
- color: tokens.colorNeutralForeground1Hover,
212
- backgroundColor: tokens.colorTransparentBackgroundHover,
213
- '::after': {
214
- ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)
215
- }
216
- },
217
- ':active': {
218
- backgroundColor: tokens.colorTransparentBackgroundPressed,
219
- '::after': {
220
- ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)
221
- }
222
- }
223
- },
224
- outlineInteractiveSelected: {
225
- backgroundColor: tokens.colorTransparentBackgroundSelected,
226
- '::after': {
227
- ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
228
- },
229
- ':hover': {
230
- color: tokens.colorNeutralForeground1Selected,
231
- backgroundColor: tokens.colorTransparentBackgroundSelected
232
- }
233
- },
234
- subtle: {
235
- backgroundColor: tokens.colorSubtleBackground,
236
- boxShadow: 'none',
237
- '::after': {
238
- ...shorthands.borderColor(tokens.colorTransparentStroke)
239
- }
240
- },
241
- subtleInteractive: {
242
- cursor: 'pointer',
243
- backgroundColor: tokens.colorSubtleBackground,
244
- boxShadow: 'none',
245
- '::after': {
246
- ...shorthands.borderColor(tokens.colorTransparentStroke)
247
- },
248
- ':hover': {
249
- color: tokens.colorNeutralForeground1Hover,
250
- backgroundColor: tokens.colorSubtleBackgroundHover
251
- },
252
- ':active': {
253
- backgroundColor: tokens.colorSubtleBackgroundPressed
254
- }
255
- },
256
- subtleInteractiveSelected: {
257
- backgroundColor: tokens.colorSubtleBackgroundSelected,
258
- '::after': {
259
- ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
260
- },
261
- ':hover': {
262
- color: tokens.colorNeutralForeground1Selected,
263
- backgroundColor: tokens.colorSubtleBackgroundSelected
264
- }
265
- },
266
- highContrastSelected: {
267
- '@media (forced-colors: active)': {
268
- forcedColorAdjust: 'none',
269
- backgroundColor: 'Highlight',
270
- color: 'HighlightText',
271
- [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
272
- forcedColorAdjust: 'auto'
273
- },
274
- '::after': {
275
- ...shorthands.borderColor('Highlight')
276
- }
277
- }
278
- },
279
- highContrastInteractive: {
280
- '@media (forced-colors: active)': {
281
- ':hover, :active': {
282
- forcedColorAdjust: 'none',
283
- backgroundColor: 'Highlight',
284
- color: 'HighlightText',
285
- [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
286
- forcedColorAdjust: 'auto'
287
- }
288
- },
289
- '::after': {
290
- ...shorthands.borderColor('Highlight')
291
- }
292
- }
293
- },
294
- select: {
295
- position: 'absolute',
296
- top: '4px',
297
- right: '4px',
298
- zIndex: 1
299
- },
300
- hiddenCheckbox: {
301
- overflow: 'hidden',
302
- width: '1px',
303
- height: '1px',
304
- position: 'absolute',
305
- clip: 'rect(0 0 0 0)',
306
- clipPath: 'inset(50%)',
307
- whiteSpace: 'nowrap'
308
- }
309
- });
310
- /**
311
- * Apply styling to the Card slots based on the state.
312
- */ export const useCardStyles_unstable = (state)=>{
313
- 'use no memo';
314
- const resetStyles = useCardResetStyles();
315
- const styles = useCardStyles();
316
- const orientationMap = {
317
- horizontal: styles.orientationHorizontal,
318
- vertical: styles.orientationVertical
319
- };
320
- const sizeMap = {
321
- small: styles.sizeSmall,
322
- medium: styles.sizeMedium,
323
- large: styles.sizeLarge
324
- };
325
- const appearanceMap = {
326
- filled: styles.filled,
327
- 'filled-alternative': styles.filledAlternative,
328
- outline: styles.outline,
329
- subtle: styles.subtle
330
- };
331
- const selectedMap = {
332
- filled: styles.filledInteractiveSelected,
333
- 'filled-alternative': styles.filledAlternativeInteractiveSelected,
334
- outline: styles.outlineInteractiveSelected,
335
- subtle: styles.subtleInteractiveSelected
336
- };
337
- const interactiveMap = {
338
- filled: styles.filledInteractive,
339
- 'filled-alternative': styles.filledAlternativeInteractive,
340
- outline: styles.outlineInteractive,
341
- subtle: styles.subtleInteractive
342
- };
343
- const isSelectableOrInteractive = state.interactive || state.selectable;
344
- const focusedClassName = React.useMemo(()=>{
345
- if (state.selectable) {
346
- if (state.selectFocused) {
347
- return styles.selectableFocused;
348
- }
349
- return '';
350
- }
351
- return styles.focused;
352
- }, [
353
- state.selectFocused,
354
- state.selectable,
355
- styles.focused,
356
- styles.selectableFocused
357
- ]);
358
- state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.root.className);
359
- if (state.floatingAction) {
360
- state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
361
- }
362
- if (state.checkbox) {
363
- state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
364
- }
365
- return state;
366
- };
package/lib/components/Card/useCardStyles.styles.raw.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport { FocusOutlineStyleOptions, createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = state.interactive || state.selectable;\n\n const focusedClassName = React.useMemo(() => {\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.root.className,\n );\n\n if (state.floatingAction) {\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","backgroundColor","colorNeutralBackground1","boxShadow","shadow4","borderColor","colorTransparentStroke","filledInteractive","cursor","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","zIndex","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js DELETED
@@ -1,37 +0,0 @@
1
- import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
2
- /**
3
- * Static CSS class names used internally for the component slots.
4
- */ export const cardFooterClassNames = {
5
- root: 'fui-CardFooter',
6
- action: 'fui-CardFooter__action'
7
- };
8
- const useStyles = makeStyles({
9
- root: {
10
- display: 'flex',
11
- flexDirection: 'row',
12
- gap: '12px'
13
- },
14
- action: {
15
- marginLeft: 'auto',
16
- // when the card is selected or hovered, it has custom high contrast color and background styles
17
- // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
18
- '@media (forced-colors: active)': {
19
- '& .fui-Button, & .fui-Link': {
20
- ...shorthands.borderColor('currentColor'),
21
- color: 'currentColor',
22
- outlineColor: 'currentColor'
23
- }
24
- }
25
- }
26
- });
27
- /**
28
- * Apply styling to the CardFooter slots based on the state.
29
- */ export const useCardFooterStyles_unstable = (state)=>{
30
- 'use no memo';
31
- const styles = useStyles();
32
- state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
33
- if (state.action) {
34
- state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
35
- }
36
- return state;
37
- };
package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChBU,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}