@fluentui/react-card 0.0.0-nightly-20220607-0421.1 → 0.0.0-nightly-20220610-0420.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 (8) hide show
  1. package/CHANGELOG.json +31 -11
  2. package/CHANGELOG.md +9 -8
  3. package/dist/index.d.ts +1 -0
  4. package/lib/components/Card/useCardStyles.js +46 -15
  5. package/lib/components/Card/useCardStyles.js.map +1 -1
  6. package/lib-commonjs/components/Card/useCardStyles.js +47 -15
  7. package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
  8. package/package.json +10 -9
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-card",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 07 Jun 2022 04:34:23 GMT",
6
- "tag": "@fluentui/react-card_v0.0.0-nightly-20220607-0421.1",
7
- "version": "0.0.0-nightly-20220607-0421.1",
5
+ "date": "Fri, 10 Jun 2022 04:35:03 GMT",
6
+ "tag": "@fluentui/react-card_v0.0.0-nightly-20220610-0420.1",
7
+ "version": "0.0.0-nightly-20220610-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -19,29 +19,49 @@
19
19
  "commit": "0a35ab4703e21e5f6763b17ed33a48ad3ae4409b",
20
20
  "comment": "chore: add basic API documentation"
21
21
  },
22
+ {
23
+ "author": "39736248+andrefcdias@users.noreply.github.com",
24
+ "package": "@fluentui/react-card",
25
+ "commit": "fbd2de31c257aa192dbc69d6eacda6388af06b30",
26
+ "comment": "feat: Add focus indicators"
27
+ },
22
28
  {
23
29
  "author": "beachball",
24
30
  "package": "@fluentui/react-card",
25
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1",
26
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
31
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1",
32
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
27
33
  },
28
34
  {
29
35
  "author": "beachball",
30
36
  "package": "@fluentui/react-card",
31
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220607-0421.1",
32
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
37
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220610-0420.1",
38
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
33
39
  },
34
40
  {
35
41
  "author": "beachball",
36
42
  "package": "@fluentui/react-card",
37
- "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220607-0421.1",
38
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
43
+ "comment": "Bump @fluentui/react-text to v0.0.0-nightly-20220610-0420.1",
44
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
39
45
  },
40
46
  {
41
47
  "author": "beachball",
42
48
  "package": "@fluentui/react-card",
43
- "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220607-0421.1",
44
- "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
49
+ "comment": "Bump @fluentui/react-button to v0.0.0-nightly-20220610-0420.1",
50
+ "commit": "f6d5f8cebb6e0b532670f90508886c9c033cd443"
51
+ }
52
+ ],
53
+ "none": [
54
+ {
55
+ "author": "39736248+andrefcdias@users.noreply.github.com",
56
+ "package": "@fluentui/react-card",
57
+ "commit": "571209f9a7d3ecdaf08f1584dc094c51db3b7a9e",
58
+ "comment": "chore: migrate to new DX"
59
+ },
60
+ {
61
+ "author": "lingfangao@hotmail.com",
62
+ "package": "@fluentui/react-card",
63
+ "commit": "2da2d47e3dac6f8f4396ab112ab80b1dd34cc9ac",
64
+ "comment": "Bump cypress to v10"
45
65
  }
46
66
  ]
47
67
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,23 @@
1
1
  # Change Log - @fluentui/react-card
2
2
 
3
- This log was last generated on Tue, 07 Jun 2022 04:34:23 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 10 Jun 2022 04:35:03 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220607-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220607-0421.1)
7
+ ## [0.0.0-nightly-20220610-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v0.0.0-nightly-20220610-0420.1)
8
8
 
9
- Tue, 07 Jun 2022 04:34:23 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220607-0421.1)
9
+ Fri, 10 Jun 2022 04:35:03 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.0.0-beta.18..@fluentui/react-card_v0.0.0-nightly-20220610-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - feat: add `orientation` prop ([PR #23037](https://github.com/microsoft/fluentui/pull/23037) by 39736248+andrefcdias@users.noreply.github.com)
15
15
  - chore: add basic API documentation ([PR #23410](https://github.com/microsoft/fluentui/pull/23410) by 39736248+andrefcdias@users.noreply.github.com)
16
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
17
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
18
- - Bump @fluentui/react-text to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
19
- - Bump @fluentui/react-button to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
16
+ - feat: Add focus indicators ([PR #23456](https://github.com/microsoft/fluentui/pull/23456) by 39736248+andrefcdias@users.noreply.github.com)
17
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
19
+ - Bump @fluentui/react-text to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
20
+ - Bump @fluentui/react-button to v0.0.0-nightly-20220610-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/f6d5f8cebb6e0b532670f90508886c9c033cd443) by beachball)
20
21
 
21
22
  ## [9.0.0-beta.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.0.0-beta.18)
22
23
 
package/dist/index.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare const cardClassNames: SlotClassNames<CardSlots>;
20
20
  */
21
21
  export declare const cardCSSVars: {
22
22
  cardSizeVar: string;
23
+ cardBorderRadiusVar: string;
23
24
  };
24
25
 
25
26
  /**
package/lib/components/Card/useCardStyles.js CHANGED
@@ -3,6 +3,7 @@ import { tokens } from '@fluentui/react-theme';
3
3
  import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
4
4
  import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
5
5
  import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
6
+ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
6
7
  /**
7
8
  * Static CSS class names used internally for the component slots.
8
9
  */
@@ -15,7 +16,8 @@ export const cardClassNames = {
15
16
  */
16
17
 
17
18
  export const cardCSSVars = {
18
- cardSizeVar: '--fui-Card--size'
19
+ cardSizeVar: '--fui-Card--size',
20
+ cardBorderRadiusVar: '--fui-Card--border-radius'
19
21
  };
20
22
 
21
23
  const useStyles = /*#__PURE__*/__styles({
@@ -40,6 +42,14 @@ const useStyles = /*#__PURE__*/__styles({
40
42
  "Ihftqj": ["f13hvwk3", "f1en4csx"],
41
43
  "Bcgy8vk": "f1i1u9k0",
42
44
  "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
45
+ "B3778ie": ["f1qnomq5", "f2fl922"],
46
+ "d9w3h3": ["f2fl922", "f1qnomq5"],
47
+ "Bl18szs": ["f1anhtl", "f1n2zcl3"],
48
+ "B4j8arr": ["f1n2zcl3", "f1anhtl"],
49
+ "Bbmb7ep": ["fifeqxg", "f899z7z"],
50
+ "Beyfa6y": ["f899z7z", "fifeqxg"],
51
+ "B7oj6ja": ["f4h3tyx", "f18ur2pz"],
52
+ "Btl43ni": ["f18ur2pz", "f4h3tyx"],
43
53
  "z8tnut": "f1lplnzb",
44
54
  "z189sj": ["f10m5gbb", "f1k04kkk"],
45
55
  "Byoj8tv": "fhftqfp",
@@ -47,7 +57,36 @@ const useStyles = /*#__PURE__*/__styles({
47
57
  "i8kkvl": "fxsr4vj",
48
58
  "Belr9w4": "fcvsdzp",
49
59
  "B2jhnfs": "f16v3d5c",
50
- "wiictr": "f1su8t2g"
60
+ "wiictr": "f1su8t2g",
61
+ "Brovlpu": "ftqa4ok",
62
+ "Bnmjwt4": "flfsvnh",
63
+ "Jopkrh": ["f1781m5e", "flvaaa9"],
64
+ "hhrs2v": "f50u1b5",
65
+ "B7jbng7": ["flvaaa9", "f1781m5e"],
66
+ "e8izhr": "f1pxpxw8",
67
+ "in3gf6": "f1149fnl",
68
+ "B1i23sz": "fd1orka",
69
+ "Bfgg0yq": "fq7mjg8",
70
+ "B7231uf": "fmqgchs",
71
+ "Bxoolf0": ["f1lv6wi8", "famjx04"],
72
+ "fo1iai": "f1nbyjd2",
73
+ "Bh81ga8": ["famjx04", "f1lv6wi8"],
74
+ "qztvpn": "flmzudc",
75
+ "ge3ubn": ["f18tqew5", "f1mhomb7"],
76
+ "F41yt0": "f1uxejg7",
77
+ "Bxrdl85": ["f1mhomb7", "f18tqew5"],
78
+ "Bb63s14": ["fki4c7u", "f5rcvcw"],
79
+ "Ikxprv": ["f5rcvcw", "fki4c7u"],
80
+ "Bhxvgo6": ["f1ysoeim", "fylekmx"],
81
+ "J01dyq": ["fylekmx", "f1ysoeim"],
82
+ "hzsgvt": "f1f43d5r",
83
+ "Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
84
+ "Fpkomr": "f13oqbgc",
85
+ "Bttdqvk": ["f14s7j5v", "f1ib27sc"],
86
+ "Bl8qd6i": "f1c7geys",
87
+ "Byzgy54": "fekzqha",
88
+ "mq8cyt": ["f3s0hz", "f95xthf"],
89
+ "B1a67j7": ["f95xthf", "f3s0hz"]
51
90
  },
52
91
  "orientationHorizontal": {
53
92
  "Beiy3e4": "f1063pyq",
@@ -64,24 +103,15 @@ const useStyles = /*#__PURE__*/__styles({
64
103
  },
65
104
  "sizeSmall": {
66
105
  "B7balbw": "f1pi9uxy",
67
- "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
68
- "Beyfa6y": ["fi2rrw2", "f1g3puop"],
69
- "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
70
- "Btl43ni": ["f1s4nn1u", "f1rstyi9"]
106
+ "B1h88n7": "f1h1zgly"
71
107
  },
72
108
  "sizeMedium": {
73
109
  "B7balbw": "frsmuga",
74
- "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
75
- "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
76
- "B7oj6ja": ["f1jar5jt", "fyu767a"],
77
- "Btl43ni": ["fyu767a", "f1jar5jt"]
110
+ "B1h88n7": "fuldkky"
78
111
  },
79
112
  "sizeLarge": {
80
113
  "B7balbw": "f1qua4xo",
81
- "Bbmb7ep": ["f1ldthgs", "frrelxk"],
82
- "Beyfa6y": ["frrelxk", "f1ldthgs"],
83
- "B7oj6ja": ["fobrfso", "ffisxpw"],
84
- "Btl43ni": ["ffisxpw", "fobrfso"]
114
+ "B1h88n7": "fimkt6v"
85
115
  },
86
116
  "interactiveNoOutline": {
87
117
  "Be0v6ae": "ftr40te",
@@ -180,7 +210,8 @@ const useStyles = /*#__PURE__*/__styles({
180
210
  "Gp14am": ["fzybk4o", "fpgykix"]
181
211
  }
182
212
  }, {
183
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
213
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .flmzudc:focus:after{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f18tqew5:focus:after{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1mhomb7:focus:after{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1uxejg7:focus:after{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fki4c7u:focus:after{border-bottom-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f5rcvcw:focus:after{border-bottom-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1ysoeim:focus:after{border-top-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .fylekmx:focus:after{border-top-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1c7geys:focus:after{top:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fekzqha:focus:after{bottom:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f3s0hz:focus:after{left:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f95xthf:focus:after{right:-var(--strokeWidthThick);}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".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);}"],
214
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
184
215
  "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);}"],
185
216
  "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);}"]
186
217
  });
package/lib/components/Card/useCardStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -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 // 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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\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 backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\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 backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\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 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 outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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 backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n orientationMap[state.orientation],\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\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 useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\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 ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n },\n\n ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\n\n ...createFocusOutlineStyle({\n style: {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n },\n selector: 'focus',\n }),\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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -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 // 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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `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 interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\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 backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\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 backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\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 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 outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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 backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n orientationMap[state.orientation],\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Card/useCardStyles.js CHANGED
@@ -14,6 +14,8 @@ const useCardPreviewStyles_1 = /*#__PURE__*/require("../CardPreview/useCardPrevi
14
14
  const useCardHeaderStyles_1 = /*#__PURE__*/require("../CardHeader/useCardHeaderStyles");
15
15
 
16
16
  const useCardFooterStyles_1 = /*#__PURE__*/require("../CardFooter/useCardFooterStyles");
17
+
18
+ const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
17
19
  /**
18
20
  * Static CSS class names used internally for the component slots.
19
21
  */
@@ -27,7 +29,8 @@ exports.cardClassNames = {
27
29
  */
28
30
 
29
31
  exports.cardCSSVars = {
30
- cardSizeVar: '--fui-Card--size'
32
+ cardSizeVar: '--fui-Card--size',
33
+ cardBorderRadiusVar: '--fui-Card--border-radius'
31
34
  };
32
35
 
33
36
  const useStyles = /*#__PURE__*/react_1.__styles({
@@ -52,6 +55,14 @@ const useStyles = /*#__PURE__*/react_1.__styles({
52
55
  "Ihftqj": ["f13hvwk3", "f1en4csx"],
53
56
  "Bcgy8vk": "f1i1u9k0",
54
57
  "Bhxzhr1": ["f1en4csx", "f13hvwk3"],
58
+ "B3778ie": ["f1qnomq5", "f2fl922"],
59
+ "d9w3h3": ["f2fl922", "f1qnomq5"],
60
+ "Bl18szs": ["f1anhtl", "f1n2zcl3"],
61
+ "B4j8arr": ["f1n2zcl3", "f1anhtl"],
62
+ "Bbmb7ep": ["fifeqxg", "f899z7z"],
63
+ "Beyfa6y": ["f899z7z", "fifeqxg"],
64
+ "B7oj6ja": ["f4h3tyx", "f18ur2pz"],
65
+ "Btl43ni": ["f18ur2pz", "f4h3tyx"],
55
66
  "z8tnut": "f1lplnzb",
56
67
  "z189sj": ["f10m5gbb", "f1k04kkk"],
57
68
  "Byoj8tv": "fhftqfp",
@@ -59,7 +70,36 @@ const useStyles = /*#__PURE__*/react_1.__styles({
59
70
  "i8kkvl": "fxsr4vj",
60
71
  "Belr9w4": "fcvsdzp",
61
72
  "B2jhnfs": "f16v3d5c",
62
- "wiictr": "f1su8t2g"
73
+ "wiictr": "f1su8t2g",
74
+ "Brovlpu": "ftqa4ok",
75
+ "Bnmjwt4": "flfsvnh",
76
+ "Jopkrh": ["f1781m5e", "flvaaa9"],
77
+ "hhrs2v": "f50u1b5",
78
+ "B7jbng7": ["flvaaa9", "f1781m5e"],
79
+ "e8izhr": "f1pxpxw8",
80
+ "in3gf6": "f1149fnl",
81
+ "B1i23sz": "fd1orka",
82
+ "Bfgg0yq": "fq7mjg8",
83
+ "B7231uf": "fmqgchs",
84
+ "Bxoolf0": ["f1lv6wi8", "famjx04"],
85
+ "fo1iai": "f1nbyjd2",
86
+ "Bh81ga8": ["famjx04", "f1lv6wi8"],
87
+ "qztvpn": "flmzudc",
88
+ "ge3ubn": ["f18tqew5", "f1mhomb7"],
89
+ "F41yt0": "f1uxejg7",
90
+ "Bxrdl85": ["f1mhomb7", "f18tqew5"],
91
+ "Bb63s14": ["fki4c7u", "f5rcvcw"],
92
+ "Ikxprv": ["f5rcvcw", "fki4c7u"],
93
+ "Bhxvgo6": ["f1ysoeim", "fylekmx"],
94
+ "J01dyq": ["fylekmx", "f1ysoeim"],
95
+ "hzsgvt": "f1f43d5r",
96
+ "Ba9tnbb": ["f1ib27sc", "f14s7j5v"],
97
+ "Fpkomr": "f13oqbgc",
98
+ "Bttdqvk": ["f14s7j5v", "f1ib27sc"],
99
+ "Bl8qd6i": "f1c7geys",
100
+ "Byzgy54": "fekzqha",
101
+ "mq8cyt": ["f3s0hz", "f95xthf"],
102
+ "B1a67j7": ["f95xthf", "f3s0hz"]
63
103
  },
64
104
  "orientationHorizontal": {
65
105
  "Beiy3e4": "f1063pyq",
@@ -76,24 +116,15 @@ const useStyles = /*#__PURE__*/react_1.__styles({
76
116
  },
77
117
  "sizeSmall": {
78
118
  "B7balbw": "f1pi9uxy",
79
- "Bbmb7ep": ["f1g3puop", "fi2rrw2"],
80
- "Beyfa6y": ["fi2rrw2", "f1g3puop"],
81
- "B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
82
- "Btl43ni": ["f1s4nn1u", "f1rstyi9"]
119
+ "B1h88n7": "f1h1zgly"
83
120
  },
84
121
  "sizeMedium": {
85
122
  "B7balbw": "frsmuga",
86
- "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
87
- "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
88
- "B7oj6ja": ["f1jar5jt", "fyu767a"],
89
- "Btl43ni": ["fyu767a", "f1jar5jt"]
123
+ "B1h88n7": "fuldkky"
90
124
  },
91
125
  "sizeLarge": {
92
126
  "B7balbw": "f1qua4xo",
93
- "Bbmb7ep": ["f1ldthgs", "frrelxk"],
94
- "Beyfa6y": ["frrelxk", "f1ldthgs"],
95
- "B7oj6ja": ["fobrfso", "ffisxpw"],
96
- "Btl43ni": ["ffisxpw", "fobrfso"]
127
+ "B1h88n7": "fimkt6v"
97
128
  },
98
129
  "interactiveNoOutline": {
99
130
  "Be0v6ae": "ftr40te",
@@ -192,7 +223,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
192
223
  "Gp14am": ["fzybk4o", "fpgykix"]
193
224
  }
194
225
  }, {
195
- "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1g3puop{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fi2rrw2{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1rstyi9{border-top-right-radius:var(--borderRadiusSmall);}", ".f1s4nn1u{border-top-left-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".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);}", ".f1qua4xo{--fui-Card--size:16px;}", ".f1ldthgs{border-bottom-right-radius:var(--borderRadiusLarge);}", ".frrelxk{border-bottom-left-radius:var(--borderRadiusLarge);}", ".fobrfso{border-top-right-radius:var(--borderRadiusLarge);}", ".ffisxpw{border-top-left-radius:var(--borderRadiusLarge);}", ".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);}"],
226
+ "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".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);}", ".f1qnomq5::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f2fl922::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f1anhtl::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1n2zcl3::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fifeqxg{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f899z7z{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f4h3tyx{border-top-right-radius:var(--fui-Card--border-radius);}", ".f18ur2pz{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1lplnzb{padding-top:var(--fui-Card--size);}", ".f10m5gbb{padding-right:var(--fui-Card--size);}", ".f1k04kkk{padding-left:var(--fui-Card--size);}", ".fhftqfp{padding-bottom:var(--fui-Card--size);}", ".fxsr4vj{-webkit-column-gap:var(--fui-Card--size);column-gap:var(--fui-Card--size);}", ".fcvsdzp{row-gap:var(--fui-Card--size);}", ".f16v3d5c>.fui-CardHeader,.f16v3d5c>.fui-CardFooter{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".f1su8t2g>:not(.fui-CardPreview):not(.fui-CardHeader):not(.fui-CardFooter){-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f1pxpxw8:focus:after{content:\"\";}", "[data-keyboard-nav] .f1149fnl:focus:after{position:absolute;}", "[data-keyboard-nav] .fd1orka:focus:after{pointer-events:none;}", "[data-keyboard-nav] .fq7mjg8:focus:after{z-index:1;}", "[data-keyboard-nav] .fmqgchs:focus:after{border-top-style:solid;}", "[data-keyboard-nav] .f1lv6wi8:focus:after{border-right-style:solid;}", "[data-keyboard-nav] .famjx04:focus:after{border-left-style:solid;}", "[data-keyboard-nav] .f1nbyjd2:focus:after{border-bottom-style:solid;}", "[data-keyboard-nav] .flmzudc:focus:after{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f18tqew5:focus:after{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1mhomb7:focus:after{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1uxejg7:focus:after{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fki4c7u:focus:after{border-bottom-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f5rcvcw:focus:after{border-bottom-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1ysoeim:focus:after{border-top-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .fylekmx:focus:after{border-top-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1f43d5r:focus:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1ib27sc:focus:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f14s7j5v:focus:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f13oqbgc:focus:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1c7geys:focus:after{top:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fekzqha:focus:after{bottom:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f3s0hz:focus:after{left:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f95xthf:focus:after{right:-var(--strokeWidthThick);}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fpfyeui>.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fwi74qw>.fui-CardPreview{margin-bottom:calc(var(--fui-Card--size) * -1);}", ".f1yfsbdm>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".f1vk4t4a>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fobhde4>.fui-CardPreview{margin-left:calc(var(--fui-Card--size) * -1);}", ".fx5r7kn>.fui-CardPreview{margin-right:calc(var(--fui-Card--size) * -1);}", ".frl7skw>:not([aria-hidden=\"true\"]):first-of-type.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".f1pi9uxy{--fui-Card--size:8px;}", ".f1h1zgly{--fui-Card--border-radius:var(--borderRadiusSmall);}", ".frsmuga{--fui-Card--size:12px;}", ".fuldkky{--fui-Card--border-radius:var(--borderRadiusMedium);}", ".f1qua4xo{--fui-Card--size:16px;}", ".fimkt6v{--fui-Card--border-radius:var(--borderRadiusLarge);}", ".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);}"],
227
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
196
228
  "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);}"],
197
229
  "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);}"]
198
230
  });
package/lib-commonjs/components/Card/useCardStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,qCAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,GAA4C;EACvD,IAAI,EAAE;AADiD,CAA5C;AAIb;;AAEG;;AACU,OAAA,CAAA,WAAA,GAAc;EACzB,WAAW,EAAE;AADY,CAAd;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AAoMA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAgC;EACpE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM,cAAc,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC,qBADE;IAErB,QAAQ,EAAE,MAAM,CAAC;EAFI,CAAvB;EAKA,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,MAAM,CAAC,SADA;IAEd,MAAM,EAAE,MAAM,CAAC,UAFD;IAGd,KAAK,EAAE,MAAM,CAAC;EAHA,CAAhB;EAMA,MAAM,WAAW,GACf,KAAK,CAAC,IAAN,CAAW,OAAX,IACA,KAAK,CAAC,IAAN,CAAW,SADX,IAEA,KAAK,CAAC,IAAN,CAAW,WAFX,IAGA,KAAK,CAAC,IAAN,CAAW,WAHX,IAIA,KAAK,CAAC,IAAN,CAAW,aAJX,IAKA,KAAK,CAAC,IAAN,CAAW,YALX,IAMA,KAAK,CAAC,IAAN,CAAW,UAPb;EASA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cAAA,CAAe,IADM,EAErB,MAAM,CAAC,IAFc,EAGrB,cAAc,CAAC,KAAK,CAAC,WAAP,CAHO,EAIrB,OAAO,CAAC,KAAK,CAAC,IAAP,CAJc,EAKrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MALnB,EAMrB,KAAK,CAAC,UAAN,KAAqB,oBAArB,IAA6C,MAAM,CAAC,iBAN/B,EAOrB,KAAK,CAAC,UAAN,KAAqB,SAArB,IAAkC,MAAM,CAAC,OAPpB,EAQrB,KAAK,CAAC,UAAN,KAAqB,QAArB,IAAiC,MAAM,CAAC,MARnB,EASrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBATlC,EAUrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,oBAApC,IAA4D,MAAM,CAAC,4BAV9C,EAWrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,kBAXnC,EAYrB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,QAApC,IAAgD,MAAM,CAAC,iBAZlC,EAarB,WAAW,IAAI,KAAK,CAAC,UAAN,KAAqB,SAApC,IAAiD,MAAM,CAAC,oBAbnC,EAcrB,KAAK,CAAC,IAAN,CAAW,SAdU,CAAvB;EAiBA,OAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\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 },\n\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -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 // 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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n },\n\n interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\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 backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\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 backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\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 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 outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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 backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n orientationMap[state.orientation],\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Card/useCardStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\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 useStyles = makeStyles({\n root: {\n display: 'flex',\n position: 'relative',\n ...shorthands.overflow('hidden'),\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 ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n },\n\n ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n // Allows non-card components to grow to fill the available space.\n [`> :not(.${cardPreviewClassNames.root}):not(.${cardHeaderClassNames.root}):not(.${cardFooterClassNames.root})`]: {\n flexGrow: 1,\n },\n\n ...createFocusOutlineStyle({\n style: {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n },\n selector: 'focus',\n }),\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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -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 // 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\"]):first-of-type.${cardPreviewClassNames.root}`]: {\n marginTop: `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 interactiveNoOutline: {\n ':hover::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n ':active::after': {\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\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 backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\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 backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\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 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 outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\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 backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n } as const;\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n } as const;\n\n const interactive =\n state.root.onClick ||\n state.root.onMouseUp ||\n state.root.onMouseDown ||\n state.root.onPointerUp ||\n state.root.onPointerDown ||\n state.root.onTouchStart ||\n state.root.onTouchEnd;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n orientationMap[state.orientation],\n sizeMap[state.size],\n state.appearance === 'filled' && styles.filled,\n state.appearance === 'filled-alternative' && styles.filledAlternative,\n state.appearance === 'outline' && styles.outline,\n state.appearance === 'subtle' && styles.subtle,\n interactive && state.appearance === 'filled' && styles.filledInteractive,\n interactive && state.appearance === 'filled-alternative' && styles.filledAlternativeInteractive,\n interactive && state.appearance === 'outline' && styles.outlineInteractive,\n interactive && state.appearance === 'subtle' && styles.subtleInteractive,\n interactive && state.appearance !== 'outline' && styles.interactiveNoOutline,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-card",
3
- "version": "0.0.0-nightly-20220607-0421.1",
3
+ "version": "0.0.0-nightly-20220610-0420.1",
4
4
  "private": false,
5
5
  "description": "Card container components for Fluent UI React.",
6
6
  "main": "lib-commonjs/index.js",
@@ -17,29 +17,30 @@
17
17
  "bundle-size": "bundle-size measure",
18
18
  "clean": "just-scripts clean",
19
19
  "code-style": "just-scripts code-style",
20
- "e2e": "e2e",
20
+ "e2e": "cypress run --component",
21
+ "e2e:local": "cypress open --component",
21
22
  "just": "just-scripts",
22
23
  "lint": "just-scripts lint",
23
24
  "start": "yarn storybook",
24
25
  "test": "jest --passWithNoTests",
25
26
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
26
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-card/src && yarn docs",
27
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-card/src && yarn docs",
27
28
  "storybook": "node ../../../scripts/storybook/runner",
28
29
  "type-check": "tsc -b tsconfig.json"
29
30
  },
30
31
  "devDependencies": {
31
32
  "@fluentui/eslint-plugin": "*",
32
33
  "@fluentui/react-conformance": "*",
33
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220607-0421.0",
34
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220610-0420.0",
34
35
  "@fluentui/scripts": "^1.0.0",
35
- "@fluentui/react-text": "0.0.0-nightly-20220607-0421.1",
36
- "@fluentui/react-button": "0.0.0-nightly-20220607-0421.1"
36
+ "@fluentui/react-text": "0.0.0-nightly-20220610-0420.1",
37
+ "@fluentui/react-button": "0.0.0-nightly-20220610-0420.1"
37
38
  },
38
39
  "dependencies": {
39
40
  "@griffel/react": "1.1.0",
40
- "@fluentui/react-utilities": "0.0.0-nightly-20220607-0421.1",
41
- "@fluentui/react-tabster": "0.0.0-nightly-20220607-0421.1",
42
- "@fluentui/react-theme": "0.0.0-nightly-20220607-0421.0",
41
+ "@fluentui/react-utilities": "0.0.0-nightly-20220610-0420.1",
42
+ "@fluentui/react-tabster": "0.0.0-nightly-20220610-0420.1",
43
+ "@fluentui/react-theme": "0.0.0-nightly-20220610-0420.0",
43
44
  "tslib": "^2.1.0"
44
45
  },
45
46
  "peerDependencies": {