@fluentui/react-card 9.0.0-beta.14 → 9.0.0-beta.17

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 (29) hide show
  1. package/CHANGELOG.json +148 -1
  2. package/CHANGELOG.md +46 -2
  3. package/dist/index.d.ts +25 -47
  4. package/lib/components/Card/Card.types.js.map +1 -1
  5. package/lib/components/Card/useCard.js +6 -4
  6. package/lib/components/Card/useCard.js.map +1 -1
  7. package/lib/components/Card/useCardStyles.js +80 -79
  8. package/lib/components/Card/useCardStyles.js.map +1 -1
  9. package/lib/components/CardFooter/useCardFooterStyles.js +0 -5
  10. package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
  11. package/lib/components/CardHeader/useCardHeaderStyles.js +0 -5
  12. package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  13. package/lib/components/CardPreview/useCardPreviewStyles.js +0 -5
  14. package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  15. package/lib/index.js +4 -5
  16. package/lib/index.js.map +1 -1
  17. package/lib-commonjs/components/Card/useCard.js +6 -4
  18. package/lib-commonjs/components/Card/useCard.js.map +1 -1
  19. package/lib-commonjs/components/Card/useCardStyles.js +81 -80
  20. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  21. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +1 -6
  22. package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
  23. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +1 -6
  24. package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
  25. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +1 -6
  26. package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
  27. package/lib-commonjs/index.js +1 -26
  28. package/lib-commonjs/index.js.map +1 -1
  29. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,7 +2,154 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 05 May 2022 18:24:36 GMT",
5
+ "date": "Thu, 26 May 2022 21:00:08 GMT",
6
+ "tag": "@fluentui/react-card_v9.0.0-beta.17",
7
+ "version": "9.0.0-beta.17",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-card",
13
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.12",
14
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-card",
19
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.12",
20
+ "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Mon, 23 May 2022 18:56:42 GMT",
27
+ "tag": "@fluentui/react-card_v9.0.0-beta.16",
28
+ "version": "9.0.0-beta.16",
29
+ "comments": {
30
+ "prerelease": [
31
+ {
32
+ "author": "esteban.230@hotmail.com",
33
+ "package": "@fluentui/react-card",
34
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
35
+ "comment": "Removing <componentName>ClassName exports."
36
+ },
37
+ {
38
+ "author": "seanmonahan@microsoft.com",
39
+ "package": "@fluentui/react-card",
40
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
41
+ "comment": "update tabster tab behaviors"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-card",
46
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
47
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-card",
52
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
53
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-card",
58
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
59
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-card",
64
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.10",
65
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
66
+ },
67
+ {
68
+ "author": "beachball",
69
+ "package": "@fluentui/react-card",
70
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.11",
71
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
72
+ }
73
+ ]
74
+ }
75
+ },
76
+ {
77
+ "date": "Mon, 23 May 2022 12:14:05 GMT",
78
+ "tag": "@fluentui/react-card_v9.0.0-beta.15",
79
+ "version": "9.0.0-beta.15",
80
+ "comments": {
81
+ "prerelease": [
82
+ {
83
+ "author": "olfedias@microsoft.com",
84
+ "package": "@fluentui/react-card",
85
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
86
+ "comment": "chore: Update Griffel to latest version"
87
+ },
88
+ {
89
+ "author": "39736248+andrefcdias@users.noreply.github.com",
90
+ "package": "@fluentui/react-card",
91
+ "commit": "a42bebb19d1403bfbde96cfb4b09e3ce32490ec6",
92
+ "comment": "CardPreview now expands properly, all the way to the Card's edges"
93
+ },
94
+ {
95
+ "author": "39736248+andrefcdias@users.noreply.github.com",
96
+ "package": "@fluentui/react-card",
97
+ "commit": "d24b84d3239563973ed1dff9145998a4403c531e",
98
+ "comment": "fix: focus no longer being managed when using `focusMode=\"off\"`"
99
+ },
100
+ {
101
+ "author": "sarah.higley@microsoft.com",
102
+ "package": "@fluentui/react-card",
103
+ "commit": "a31441fdf2fa55f706983653febf5c318d76693d",
104
+ "comment": "remove commons from Card"
105
+ },
106
+ {
107
+ "author": "olfedias@microsoft.com",
108
+ "package": "@fluentui/react-card",
109
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
110
+ "comment": "chore: Update Griffel to latest version"
111
+ },
112
+ {
113
+ "author": "beachball",
114
+ "package": "@fluentui/react-card",
115
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
116
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
117
+ },
118
+ {
119
+ "author": "beachball",
120
+ "package": "@fluentui/react-card",
121
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
122
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
123
+ },
124
+ {
125
+ "author": "beachball",
126
+ "package": "@fluentui/react-card",
127
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
128
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
129
+ },
130
+ {
131
+ "author": "beachball",
132
+ "package": "@fluentui/react-card",
133
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
134
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
135
+ },
136
+ {
137
+ "author": "beachball",
138
+ "package": "@fluentui/react-card",
139
+ "comment": "Bump @fluentui/react-text to v9.0.0-rc.9",
140
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
141
+ },
142
+ {
143
+ "author": "beachball",
144
+ "package": "@fluentui/react-card",
145
+ "comment": "Bump @fluentui/react-button to v9.0.0-rc.10",
146
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
147
+ }
148
+ ]
149
+ }
150
+ },
151
+ {
152
+ "date": "Thu, 05 May 2022 18:26:29 GMT",
6
153
  "tag": "@fluentui/react-card_v9.0.0-beta.14",
7
154
  "version": "9.0.0-beta.14",
8
155
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,56 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Thu, 05 May 2022 18:24:36 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 26 May 2022 21:00:08 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-beta.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.17)
8
+
9
+ Thu, 26 May 2022 21:00:08 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.16..@fluentui/react-card_v9.0.0-beta.17)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-tabster to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
15
+ - Bump @fluentui/react-button to v9.0.0-rc.12 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
16
+
17
+ ## [9.0.0-beta.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.16)
18
+
19
+ Mon, 23 May 2022 18:56:42 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.15..@fluentui/react-card_v9.0.0-beta.16)
21
+
22
+ ### Changes
23
+
24
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
25
+ - update tabster tab behaviors ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
26
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
27
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
28
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
29
+ - Bump @fluentui/react-text to v9.0.0-rc.10 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
30
+ - Bump @fluentui/react-button to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
31
+
32
+ ## [9.0.0-beta.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.15)
33
+
34
+ Mon, 23 May 2022 12:14:05 GMT
35
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.14..@fluentui/react-card_v9.0.0-beta.15)
36
+
37
+ ### Changes
38
+
39
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
40
+ - CardPreview now expands properly, all the way to the Card's edges ([PR #22761](https://github.com/microsoft/fluentui/pull/22761) by 39736248+andrefcdias@users.noreply.github.com)
41
+ - fix: focus no longer being managed when using `focusMode="off"` ([PR #23011](https://github.com/microsoft/fluentui/pull/23011) by 39736248+andrefcdias@users.noreply.github.com)
42
+ - remove commons from Card ([PR #22872](https://github.com/microsoft/fluentui/pull/22872) by sarah.higley@microsoft.com)
43
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
44
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
45
+ - Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
46
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
47
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
48
+ - Bump @fluentui/react-text to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
49
+ - Bump @fluentui/react-button to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
50
+
7
51
  ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.14)
8
52
 
9
- Thu, 05 May 2022 18:24:36 GMT
53
+ Thu, 05 May 2022 18:26:29 GMT
10
54
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.13..@fluentui/react-card_v9.0.0-beta.14)
11
55
 
12
56
  ### Changes
package/dist/index.d.ts CHANGED
@@ -10,48 +10,13 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
10
10
  */
11
11
  export declare const Card: ForwardRefComponent<CardProps>;
12
12
 
13
- /**
14
- * @deprecated Use `cardClassNames.root` instead.
15
- */
16
- export declare const cardClassName = "fui-Card";
17
-
18
13
  export declare const cardClassNames: SlotClassNames<CardSlots>;
19
14
 
20
- export declare type CardCommons = {
21
- appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
22
- /**
23
- * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
24
- *
25
- * `off`
26
- * The card will not focusable.
27
- *
28
- * `no-tab`
29
- * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
30
- * pressing the Escape key.
31
- *
32
- * `tab-exit`
33
- * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
34
- * the Tab key on the last inner element.
35
- *
36
- * `tab-only`
37
- * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
38
- * after the last inner element.
39
- *
40
- * @defaultvalue off
41
- */
42
- focusMode: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
43
- };
44
-
45
15
  /**
46
16
  * Component to render Button actions in a Card component.
47
17
  */
48
18
  export declare const CardFooter: ForwardRefComponent<CardFooterProps>;
49
19
 
50
- /**
51
- * @deprecated Use `cardFooterClassNames.root` instead.
52
- */
53
- export declare const cardFooterClassName = "fui-CardFooter";
54
-
55
20
  export declare const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
56
21
 
57
22
  /**
@@ -74,11 +39,6 @@ export declare type CardFooterState = ComponentState<CardFooterSlots>;
74
39
  */
75
40
  export declare const CardHeader: ForwardRefComponent<CardHeaderProps>;
76
41
 
77
- /**
78
- * @deprecated Use `cardHeaderClassNames.root` instead.
79
- */
80
- export declare const cardHeaderClassName = "fui-CardHeader";
81
-
82
42
  export declare const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
83
43
 
84
44
  /**
@@ -105,11 +65,6 @@ export declare type CardHeaderState = ComponentState<CardHeaderSlots>;
105
65
  */
106
66
  export declare const CardPreview: ForwardRefComponent<CardPreviewProps>;
107
67
 
108
- /**
109
- * @deprecated Use `cardPreviewClassNames.root` instead.
110
- */
111
- export declare const cardPreviewClassName = "fui-CardPreview";
112
-
113
68
  export declare const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
114
69
 
115
70
  /**
@@ -130,7 +85,30 @@ export declare type CardPreviewState = ComponentState<CardPreviewSlots>;
130
85
  /**
131
86
  * Card Props
132
87
  */
133
- export declare type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;
88
+ export declare type CardProps = ComponentProps<CardSlots> & {
89
+ appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
90
+ /**
91
+ * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.
92
+ *
93
+ * `off`
94
+ * The card will not focusable.
95
+ *
96
+ * `no-tab`
97
+ * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when
98
+ * pressing the Escape key.
99
+ *
100
+ * `tab-exit`
101
+ * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing
102
+ * the Tab key on the last inner element.
103
+ *
104
+ * `tab-only`
105
+ * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus
106
+ * after the last inner element.
107
+ *
108
+ * @defaultvalue off
109
+ */
110
+ focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';
111
+ };
134
112
 
135
113
  export declare type CardSlots = {
136
114
  root: Slot<'div'>;
@@ -139,7 +117,7 @@ export declare type CardSlots = {
139
117
  /**
140
118
  * State used in rendering Card
141
119
  */
142
- export declare type CardState = ComponentState<CardSlots> & CardCommons;
120
+ export declare type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;
143
121
 
144
122
  /**
145
123
  * Render the final JSX of Card
package/lib/components/Card/Card.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\nexport type CardCommons = {\n appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @defaultvalue off\n */\n focusMode: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & Partial<CardCommons>;\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & CardCommons;\n"]}
1
+ {"version":3,"file":"Card.types.js","sourceRoot":"../src/","sources":["components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CardSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * Card Props\n */\nexport type CardProps = ComponentProps<CardSlots> & {\n appearance?: 'filled' | 'filled-alternative' | 'outline' | 'subtle';\n\n /**\n * Sets the focus behavior for the card. If `true`, the card will use the `noTab` focus behavior.\n *\n * `off`\n * The card will not focusable.\n *\n * `no-tab`\n * This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when\n * pressing the Escape key.\n *\n * `tab-exit`\n * This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing\n * the Tab key on the last inner element.\n *\n * `tab-only`\n * This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus\n * after the last inner element.\n *\n * @defaultvalue off\n */\n focusMode?: 'off' | 'no-tab' | 'tab-exit' | 'tab-only';\n};\n\n/**\n * State used in rendering Card\n */\nexport type CardState = ComponentState<CardSlots> & Required<Pick<CardProps, 'appearance'>>;\n"]}
package/lib/components/Card/useCard.js CHANGED
@@ -17,24 +17,26 @@ export const useCard_unstable = (props, ref) => {
17
17
  } = props;
18
18
  const focusMap = {
19
19
  off: undefined,
20
- 'no-tab': 'limitedTrapFocus',
20
+ 'no-tab': 'limited-trap-focus',
21
21
  'tab-exit': 'limited',
22
22
  'tab-only': 'unlimited'
23
23
  };
24
24
  const groupperAttrs = useFocusableGroup({
25
25
  tabBehavior: focusMap[focusMode]
26
26
  });
27
+ const focusAttrs = focusMode !== 'off' ? {
28
+ tabIndex: 0,
29
+ ...groupperAttrs
30
+ } : null;
27
31
  return {
28
32
  appearance,
29
- focusMode,
30
33
  components: {
31
34
  root: 'div'
32
35
  },
33
36
  root: getNativeElementProps(props.as || 'div', {
34
37
  ref,
35
38
  role: 'group',
36
- tabIndex: focusMode !== 'off' ? 0 : undefined,
37
- ...groupperAttrs,
39
+ ...focusAttrs,
38
40
  ...props
39
41
  })
40
42
  };
package/lib/components/Card/useCard.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,kBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,SAFK;AAIL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAJP;AAKL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,MAAA,QAAQ,EAAE,SAAS,KAAK,KAAd,GAAsB,CAAtB,GAA0B,SAHS;AAI7C,SAAG,aAJ0C;AAK7C,SAAG;AAL0C,KAApB;AALtB,GAAP;AAaD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limitedTrapFocus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n return {\n appearance,\n focusMode,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n tabIndex: focusMode !== 'off' ? 0 : undefined,\n ...groupperAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,iBAAT,QAAkC,yBAAlC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;AAC3F,QAAM;AAAE,IAAA,UAAU,GAAG,QAAf;AAAyB,IAAA,SAAS,GAAG;AAArC,MAA+C,KAArD;AAEA,QAAM,QAAQ,GAAG;AACf,IAAA,GAAG,EAAE,SADU;AAEf,cAAU,oBAFK;AAGf,gBAAY,SAHG;AAIf,gBAAY;AAJG,GAAjB;AAOA,QAAM,aAAa,GAAG,iBAAiB,CAAC;AACtC,IAAA,WAAW,EAAE,QAAQ,CAAC,SAAD;AADiB,GAAD,CAAvC;AAIA,QAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;AAAE,IAAA,QAAQ,EAAE,CAAZ;AAAe,OAAG;AAAlB,GAAtB,GAA0D,IAA7E;AAEA,SAAO;AACL,IAAA,UADK;AAGL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE;AAAR,KAHP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAK,CAAC,EAAN,IAAY,KAAb,EAAoB;AAC7C,MAAA,GAD6C;AAE7C,MAAA,IAAI,EAAE,OAFuC;AAG7C,SAAG,UAH0C;AAI7C,SAAG;AAJ0C,KAApB;AAJtB,GAAP;AAWD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { CardProps, CardState } from './Card.types';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\n\n/**\n * Create the state required to render Card.\n *\n * The returned state can be modified with hooks such as useCardStyles_unstable,\n * before being passed to renderCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param ref - reference to root HTMLElement of Card\n */\nexport const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLElement>): CardState => {\n const { appearance = 'filled', focusMode = 'off' } = props;\n\n const focusMap = {\n off: undefined,\n 'no-tab': 'limited-trap-focus',\n 'tab-exit': 'limited',\n 'tab-only': 'unlimited',\n } as const;\n\n const groupperAttrs = useFocusableGroup({\n tabBehavior: focusMap[focusMode],\n });\n\n const focusAttrs = focusMode !== 'off' ? { tabIndex: 0, ...groupperAttrs } : null;\n\n return {\n appearance,\n\n components: { root: 'div' },\n root: getNativeElementProps(props.as || 'div', {\n ref,\n role: 'group',\n ...focusAttrs,\n ...props,\n }),\n };\n};\n"],"sourceRoot":"../src/"}
package/lib/components/Card/useCardStyles.js CHANGED
@@ -1,11 +1,6 @@
1
1
  import { shorthands, __styles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  import { cardPreviewClassNames } from '../CardPreview/index';
4
- /**
5
- * @deprecated Use `cardClassNames.root` instead.
6
- */
7
-
8
- export const cardClassName = 'fui-Card';
9
4
  export const cardClassNames = {
10
5
  root: 'fui-Card'
11
6
  };
@@ -16,132 +11,138 @@ export const cardClassNames = {
16
11
  const useStyles = /*#__PURE__*/__styles({
17
12
  "root": {
18
13
  "mc9l5x": "ftgm304",
14
+ "qhf8xq": "f10pi13n",
19
15
  "B68tc82": "f1p9o1ba",
20
16
  "Bmxbyg5": "f1sil6mw",
21
17
  "sj55zd": "f19n0e5",
22
- "icvyot": "fzkkow9",
23
- "vrafjx": ["fcdblym", "fjik90z"],
24
- "oivjwe": "fg706s2",
25
- "wvpqe5": ["fjik90z", "fcdblym"],
26
- "B4j52fo": "f192inf7",
27
- "Bekrc4i": ["f5tn483", "f1ojsxk5"],
28
- "Bn0qgzm": "f1vxd6vx",
29
- "ibv6hh": ["f1ojsxk5", "f5tn483"],
30
18
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
31
19
  "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
32
20
  "B7oj6ja": ["f1jar5jt", "fyu767a"],
33
21
  "Btl43ni": ["fyu767a", "f1jar5jt"],
22
+ "E3zdtr": "f1mdlcz9",
23
+ "bn5sak": "frwkxtg",
24
+ "Eqx8gd": ["f1n6gb5g", "f15yvnhg"],
25
+ "B1piin3": ["f15yvnhg", "f1n6gb5g"],
26
+ "By385i5": "fo72kxq",
27
+ "Bsft5z2": "f13zj6fq",
28
+ "B80jsxd": "f1nwj1ja",
29
+ "Bm2nyyq": "f8rth92",
30
+ "Barhvk9": ["flthirb", "ftkbnf5"],
31
+ "Bw17bha": "f1lh990p",
32
+ "vfts7": ["ftkbnf5", "flthirb"],
33
+ "xrcqlc": "f6czdpx",
34
+ "Ihftqj": ["f13hvwk3", "f1en4csx"],
35
+ "Bcgy8vk": "f1i1u9k0",
36
+ "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
37
+ "B3778ie": ["f1ibwz09", "f1kp91vd"],
38
+ "d9w3h3": ["f1kp91vd", "f1ibwz09"],
39
+ "Bl18szs": ["f1pix4dl", "f13nd1z4"],
40
+ "B4j8arr": ["f13nd1z4", "f1pix4dl"],
34
41
  "Ecqjvq": "f70or3y",
35
42
  "B39syqp": ["f1s27jks", "f1x7x6se"],
36
43
  "m3o775": "f1q2lvbs",
37
44
  "I0kkcn": ["f1x7x6se", "f1s27jks"]
38
45
  },
46
+ "interactiveNoOutline": {
47
+ "Be0v6ae": "ftr40te",
48
+ "B5kxglz": ["fcsoo7g", "f1rl4q8i"],
49
+ "B3pwyw6": "fbb4roj",
50
+ "Bymgtzf": ["f1rl4q8i", "fcsoo7g"],
51
+ "dmfk": "fd4vwcp",
52
+ "B4ofi8": ["f1crelnc", "fup9tr0"],
53
+ "jgq6uv": "f12d33p4",
54
+ "Baxewws": ["fup9tr0", "f1crelnc"]
55
+ },
39
56
  "filledInteractive": {
40
57
  "Bceei9c": "f1k6fduh",
41
58
  "De3pzq": "fxugw4r",
42
- "g2u3we": "fghlq4f",
43
- "h3c5rm": ["f1gn591s", "fjscplz"],
44
- "B9xav0g": "fb073pr",
45
- "zhjwy3": ["fjscplz", "f1gn591s"],
46
59
  "E5pizo": "f1whvlc6",
60
+ "B0n5ga8": "f16gxe2i",
61
+ "s924m2": ["fpgykix", "fzybk4o"],
62
+ "B1q35kw": "f1osi826",
63
+ "Gp14am": ["fzybk4o", "fpgykix"],
47
64
  "Jwef8y": "f1knas48",
48
- "Bgoe8wy": "fpa59ij",
49
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
50
- "oetu4i": "fz67qlh",
51
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
52
65
  "Bvxd0ez": "f1m145df",
53
- "ecr2s2": "fb40n2d",
54
- "B6oc9vd": "f7cshhm",
55
- "ak43y8": ["f1bzyac8", "f131p3c2"],
56
- "wmxk5l": "f1bazisv",
57
- "B50zh58": ["f131p3c2", "f1bzyac8"]
66
+ "ecr2s2": "fb40n2d"
58
67
  },
59
68
  "filled": {
60
69
  "De3pzq": "fxugw4r",
61
- "g2u3we": "fghlq4f",
62
- "h3c5rm": ["f1gn591s", "fjscplz"],
63
- "B9xav0g": "fb073pr",
64
- "zhjwy3": ["fjscplz", "f1gn591s"],
65
- "E5pizo": "f1whvlc6"
70
+ "E5pizo": "f1whvlc6",
71
+ "B0n5ga8": "f16gxe2i",
72
+ "s924m2": ["fpgykix", "fzybk4o"],
73
+ "B1q35kw": "f1osi826",
74
+ "Gp14am": ["fzybk4o", "fpgykix"]
66
75
  },
67
76
  "filledAlternativeInteractive": {
68
77
  "Bceei9c": "f1k6fduh",
69
78
  "De3pzq": "f1dmdbja",
70
- "g2u3we": "fghlq4f",
71
- "h3c5rm": ["f1gn591s", "fjscplz"],
72
- "B9xav0g": "fb073pr",
73
- "zhjwy3": ["fjscplz", "f1gn591s"],
74
79
  "E5pizo": "f1whvlc6",
80
+ "B0n5ga8": "f16gxe2i",
81
+ "s924m2": ["fpgykix", "fzybk4o"],
82
+ "B1q35kw": "f1osi826",
83
+ "Gp14am": ["fzybk4o", "fpgykix"],
75
84
  "Jwef8y": "f1uvynv3",
76
- "Bgoe8wy": "fpa59ij",
77
- "Bwzppfd": ["f1rhln42", "f1l1ogpg"],
78
- "oetu4i": "fz67qlh",
79
- "gg5e9n": ["f1l1ogpg", "f1rhln42"],
80
85
  "Bvxd0ez": "f1m145df",
81
- "ecr2s2": "f1yhgkbh",
82
- "B6oc9vd": "f7cshhm",
83
- "ak43y8": ["f1bzyac8", "f131p3c2"],
84
- "wmxk5l": "f1bazisv",
85
- "B50zh58": ["f131p3c2", "f1bzyac8"]
86
+ "ecr2s2": "f1yhgkbh"
86
87
  },
87
88
  "filledAlternative": {
88
89
  "De3pzq": "f1dmdbja",
89
- "g2u3we": "fghlq4f",
90
- "h3c5rm": ["f1gn591s", "fjscplz"],
91
- "B9xav0g": "fb073pr",
92
- "zhjwy3": ["fjscplz", "f1gn591s"],
93
- "E5pizo": "f1whvlc6"
90
+ "E5pizo": "f1whvlc6",
91
+ "B0n5ga8": "f16gxe2i",
92
+ "s924m2": ["fpgykix", "fzybk4o"],
93
+ "B1q35kw": "f1osi826",
94
+ "Gp14am": ["fzybk4o", "fpgykix"]
94
95
  },
95
96
  "outlineInteractive": {
96
97
  "Bceei9c": "f1k6fduh",
97
98
  "De3pzq": "f1c21dwh",
98
- "g2u3we": "fj3muxo",
99
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
100
- "B9xav0g": "f1aperda",
101
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
102
99
  "E5pizo": "f1couhl3",
100
+ "B0n5ga8": "ft83z1f",
101
+ "s924m2": ["f1g4150c", "f192dr6e"],
102
+ "B1q35kw": "f1qnawh6",
103
+ "Gp14am": ["f192dr6e", "f1g4150c"],
103
104
  "Jwef8y": "fjxutwb",
104
- "Bgoe8wy": "fvcxoqz",
105
- "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
106
- "oetu4i": "f1xlaoq0",
107
- "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
105
+ "Be0v6ae": "f1llr77y",
106
+ "B5kxglz": ["fzk0khw", "fjj8tog"],
107
+ "B3pwyw6": "fb1u8ub",
108
+ "Bymgtzf": ["fjj8tog", "fzk0khw"],
108
109
  "ecr2s2": "fophhak",
109
- "B6oc9vd": "fvs00aa",
110
- "ak43y8": ["f1assf6x", "f4ruux4"],
111
- "wmxk5l": "fumykes",
112
- "B50zh58": ["f4ruux4", "f1assf6x"]
110
+ "dmfk": "f1uohb70",
111
+ "B4ofi8": ["f1jm7v1n", "f1bus3rq"],
112
+ "jgq6uv": "f1fbu7rr",
113
+ "Baxewws": ["f1bus3rq", "f1jm7v1n"]
113
114
  },
114
115
  "outline": {
115
116
  "De3pzq": "f1c21dwh",
116
- "g2u3we": "fj3muxo",
117
- "h3c5rm": ["f1akhkt", "f1lxtadh"],
118
- "B9xav0g": "f1aperda",
119
- "zhjwy3": ["f1lxtadh", "f1akhkt"],
120
- "E5pizo": "f1couhl3"
117
+ "E5pizo": "f1couhl3",
118
+ "B0n5ga8": "ft83z1f",
119
+ "s924m2": ["f1g4150c", "f192dr6e"],
120
+ "B1q35kw": "f1qnawh6",
121
+ "Gp14am": ["f192dr6e", "f1g4150c"]
121
122
  },
122
123
  "subtleInteractive": {
123
124
  "Bceei9c": "f1k6fduh",
124
125
  "De3pzq": "fhovq9v",
125
- "g2u3we": "fghlq4f",
126
- "h3c5rm": ["f1gn591s", "fjscplz"],
127
- "B9xav0g": "fb073pr",
128
- "zhjwy3": ["fjscplz", "f1gn591s"],
129
126
  "E5pizo": "f1couhl3",
127
+ "B0n5ga8": "f16gxe2i",
128
+ "s924m2": ["fpgykix", "fzybk4o"],
129
+ "B1q35kw": "f1osi826",
130
+ "Gp14am": ["fzybk4o", "fpgykix"],
130
131
  "Jwef8y": "f1t94bn6",
131
132
  "ecr2s2": "f1wfn5kd"
132
133
  },
133
134
  "subtle": {
134
135
  "De3pzq": "fhovq9v",
135
- "g2u3we": "fghlq4f",
136
- "h3c5rm": ["f1gn591s", "fjscplz"],
137
- "B9xav0g": "fb073pr",
138
- "zhjwy3": ["fjscplz", "f1gn591s"],
139
- "E5pizo": "f1couhl3"
136
+ "E5pizo": "f1couhl3",
137
+ "B0n5ga8": "f16gxe2i",
138
+ "s924m2": ["fpgykix", "fzybk4o"],
139
+ "B1q35kw": "f1osi826",
140
+ "Gp14am": ["fzybk4o", "fpgykix"]
140
141
  }
141
142
  }, {
142
- "d": [".ftgm304{display:block;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".f1couhl3{box-shadow:none;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
143
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fpa59ij:hover{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1rhln42:hover{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1l1ogpg:hover{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fz67qlh:hover{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
144
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f7cshhm:active{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1bzyac8:active{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f131p3c2:active{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1bazisv:active{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
143
+ "d": [".ftgm304{display:block;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1mdlcz9::after{position:absolute;}", ".frwkxtg::after{top:0;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", ".fo72kxq::after{bottom:0;}", ".f13zj6fq::after{content:\"\";}", ".f1nwj1ja::after{pointer-events:none;}", ".f8rth92::after{border-top-style:solid;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f1lh990p::after{border-bottom-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f1i1u9k0::after{border-bottom-width:var(--strokeWidthThin);}", ".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1pix4dl::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f13nd1z4::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f70or3y>*:not(.fui-CardPreview){margin-top:12px;}", ".f1s27jks>*:not(.fui-CardPreview){margin-right:12px;}", ".f1x7x6se>*:not(.fui-CardPreview){margin-left:12px;}", ".f1q2lvbs>*:not(.fui-CardPreview){margin-bottom:12px;}", ".f1k6fduh{cursor:pointer;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1whvlc6{box-shadow:var(--shadow4);}", ".f16gxe2i::after{border-top-color:var(--colorTransparentStroke);}", ".fpgykix::after{border-right-color:var(--colorTransparentStroke);}", ".fzybk4o::after{border-left-color:var(--colorTransparentStroke);}", ".f1osi826::after{border-bottom-color:var(--colorTransparentStroke);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1couhl3{box-shadow:none;}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}"],
144
+ "h": [".ftr40te:hover::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fcsoo7g:hover::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f1rl4q8i:hover::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fbb4roj:hover::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1llr77y:hover::after{border-top-color:var(--colorNeutralStroke1Hover);}", ".fzk0khw:hover::after{border-right-color:var(--colorNeutralStroke1Hover);}", ".fjj8tog:hover::after{border-left-color:var(--colorNeutralStroke1Hover);}", ".fb1u8ub:hover::after{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
145
+ "a": [".fd4vwcp:active::after{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f1crelnc:active::after{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fup9tr0:active::after{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f12d33p4:active::after{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f1yhgkbh:active{background-color:var(--colorNeutralBackground2Pressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1uohb70:active::after{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1jm7v1n:active::after{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1bus3rq:active::after{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1fbu7rr:active::after{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
145
146
  });
146
147
  /**
147
148
  * Apply styling to the Card slots based on the state
@@ -151,7 +152,7 @@ const useStyles = /*#__PURE__*/__styles({
151
152
  export const useCardStyles_unstable = state => {
152
153
  const styles = useStyles();
153
154
  const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
154
- state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, state.root.className);
155
+ state.root.className = mergeClasses(cardClassNames.root, styles.root, state.appearance === 'filled' && styles.filled, state.appearance === 'filled-alternative' && styles.filledAlternative, state.appearance === 'outline' && styles.outline, state.appearance === 'subtle' && styles.subtle, interactive && state.appearance === 'filled' && styles.filledInteractive, interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive, interactive && state.appearance === 'outline' && styles.outlineInteractive, interactive && state.appearance === 'subtle' && styles.subtleInteractive, interactive && state.appearance !== 'outline' && styles.interactiveNoOutline, state.root.className);
155
156
  return state;
156
157
  };
157
158
  //# sourceMappingURL=useCardStyles.js.map