@fluentui/react-card 9.0.0-beta.19 → 9.0.0-beta.21
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.
- package/CHANGELOG.json +135 -1
- package/CHANGELOG.md +34 -2
- package/assets/logo.svg +9 -0
- package/dist/index.d.ts +90 -18
- package/lib/components/Card/Card.js.map +1 -1
- package/lib/components/Card/Card.types.js.map +1 -1
- package/lib/components/Card/renderCard.js +1 -1
- package/lib/components/Card/renderCard.js.map +1 -1
- package/lib/components/Card/useCard.js +2 -0
- package/lib/components/Card/useCard.js.map +1 -1
- package/lib/components/Card/useCardStyles.js +74 -21
- package/lib/components/Card/useCardStyles.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.js.map +1 -1
- package/lib/components/CardFooter/CardFooter.types.js.map +1 -1
- package/lib/components/CardFooter/renderCardFooter.js +1 -1
- package/lib/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +5 -4
- package/lib/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.js.map +1 -1
- package/lib/components/CardHeader/CardHeader.types.js.map +1 -1
- package/lib/components/CardHeader/renderCardHeader.js +1 -1
- package/lib/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +5 -4
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.js.map +1 -1
- package/lib/components/CardPreview/CardPreview.types.js.map +1 -1
- package/lib/components/CardPreview/renderCardPreview.js +1 -1
- package/lib/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +9 -7
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/components/Card/Card.js.map +1 -1
- package/lib-commonjs/components/Card/renderCard.js +1 -1
- package/lib-commonjs/components/Card/renderCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCard.js +2 -0
- package/lib-commonjs/components/Card/useCard.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.js +77 -21
- package/lib-commonjs/components/Card/useCardStyles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js +1 -1
- package/lib-commonjs/components/CardFooter/renderCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js +5 -4
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js +1 -1
- package/lib-commonjs/components/CardHeader/renderCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js +5 -4
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js +1 -1
- package/lib-commonjs/components/CardPreview/renderCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js +9 -7
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +11 -10
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;
|
1
|
+
{"version":3,"sources":["components/Card/useCard.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,gBAAgB,GAAG,CAAC,KAAD,EAAmB,GAAnB,KAA6D;EAC3F,MAAM;IAAE,UAAU,GAAG,QAAf;IAAyB,SAAS,GAAG,KAArC;IAA4C,WAAW,GAAG,UAA1D;IAAsE,IAAI,GAAG;EAA7E,IAA0F,KAAhG;EAEA,MAAM,QAAQ,GAAG;IACf,GAAG,EAAE,SADU;IAEf,UAAU,oBAFK;IAGf,YAAY,SAHG;IAIf,YAAY;EAJG,CAAjB;EAOA,MAAM,aAAa,GAAG,eAAA,CAAA,iBAAA,CAAkB;IACtC,WAAW,EAAE,QAAQ,CAAC,SAAD;EADiB,CAAlB,CAAtB;EAIA,MAAM,UAAU,GAAG,SAAS,KAAK,KAAd,GAAsB;IAAE,QAAQ,EAAE,CAAZ;IAAe,GAAG;EAAlB,CAAtB,GAA0D,IAA7E;EAEA,OAAO;IACL,UADK;IAEL,WAFK;IAGL,IAHK;IAKL,UAAU,EAAE;MAAE,IAAI,EAAE;IAAR,CALP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAK,CAAC,EAAN,IAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,IAAI,EAAE,OAFuC;MAG7C,GAAG,UAH0C;MAI7C,GAAG;IAJ0C,CAAzC;EAND,CAAP;AAaD,CA7BM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","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', orientation = 'vertical', size = 'medium' } = 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 orientation,\n size,\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/"}
|
@@ -9,22 +9,33 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
11
|
|
12
|
-
const
|
12
|
+
const useCardPreviewStyles_1 = /*#__PURE__*/require("../CardPreview/useCardPreviewStyles");
|
13
|
+
|
14
|
+
const useCardHeaderStyles_1 = /*#__PURE__*/require("../CardHeader/useCardHeaderStyles");
|
15
|
+
|
16
|
+
const useCardFooterStyles_1 = /*#__PURE__*/require("../CardFooter/useCardFooterStyles");
|
17
|
+
|
18
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
19
|
+
/**
|
20
|
+
* Static CSS class names used internally for the component slots.
|
21
|
+
*/
|
22
|
+
|
13
23
|
|
14
24
|
exports.cardClassNames = {
|
15
25
|
root: 'fui-Card'
|
16
26
|
};
|
17
|
-
exports.cardCSSVars = {
|
18
|
-
cardSizeVar: '--fui-Card--size'
|
19
|
-
};
|
20
27
|
/**
|
21
|
-
*
|
28
|
+
* CSS variable names used internally for uniform styling in Card.
|
22
29
|
*/
|
23
30
|
|
31
|
+
exports.cardCSSVars = {
|
32
|
+
cardSizeVar: '--fui-Card--size',
|
33
|
+
cardBorderRadiusVar: '--fui-Card--border-radius'
|
34
|
+
};
|
35
|
+
|
24
36
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
25
37
|
"root": {
|
26
38
|
"mc9l5x": "f22iagw",
|
27
|
-
"Beiy3e4": "f1vx9l62",
|
28
39
|
"qhf8xq": "f10pi13n",
|
29
40
|
"B68tc82": "f1p9o1ba",
|
30
41
|
"Bmxbyg5": "f1sil6mw",
|
@@ -44,36 +55,76 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
44
55
|
"Ihftqj": ["f13hvwk3", "f1en4csx"],
|
45
56
|
"Bcgy8vk": "f1i1u9k0",
|
46
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"],
|
47
66
|
"z8tnut": "f1lplnzb",
|
48
67
|
"z189sj": ["f10m5gbb", "f1k04kkk"],
|
49
68
|
"Byoj8tv": "fhftqfp",
|
50
69
|
"uwmqm3": ["f1k04kkk", "f10m5gbb"],
|
51
70
|
"i8kkvl": "fxsr4vj",
|
52
71
|
"Belr9w4": "fcvsdzp",
|
72
|
+
"B2jhnfs": "f16v3d5c",
|
73
|
+
"wiictr": "f1su8t2g",
|
74
|
+
"Brovlpu": "ftqa4ok",
|
75
|
+
"Bnmjwt4": "flfsvnh",
|
76
|
+
"Jopkrh": ["f1781m5e", "flvaaa9"],
|
77
|
+
"hhrs2v": "f50u1b5",
|
78
|
+
"B7jbng7": ["flvaaa9", "f1781m5e"],
|
79
|
+
"f1b1x7": "f1qcdkjp",
|
80
|
+
"Bsoonpj": "frwipam",
|
81
|
+
"kb7xbg": "fm04wnm",
|
82
|
+
"Bpbhbne": "ffifs4z",
|
83
|
+
"qtucbz": "f1jttrum",
|
84
|
+
"Bh4x314": ["fowbmzg", "f1kmm3zi"],
|
85
|
+
"pacjzv": "f1rvwwl",
|
86
|
+
"wv8bgo": ["f1kmm3zi", "fowbmzg"],
|
87
|
+
"Bpmb9kz": "fld4889",
|
88
|
+
"hnpbc": ["f1fyrmc6", "f1sx0t16"],
|
89
|
+
"six9ky": "fdoni5z",
|
90
|
+
"I0dgv4": ["f1sx0t16", "f1fyrmc6"],
|
91
|
+
"I0hmzl": ["f1o4bf66", "f10vrftj"],
|
92
|
+
"Bfxuv1t": ["f10vrftj", "f1o4bf66"],
|
93
|
+
"Bqb1ydo": ["f10tshoi", "f5b38mp"],
|
94
|
+
"Bwhd17d": ["f5b38mp", "f10tshoi"],
|
95
|
+
"B738g9f": "f1o5urc0",
|
96
|
+
"Ba0kx5p": ["fo4xo12", "f69zm5y"],
|
97
|
+
"mqxxu3": "f6upevr",
|
98
|
+
"Bybbesa": ["f69zm5y", "fo4xo12"],
|
99
|
+
"B65jt9l": "f187pic6",
|
100
|
+
"Bno0hdv": "fgb1g4v",
|
101
|
+
"znsjfh": ["fxk1nzy", "f1asvbfq"],
|
102
|
+
"B4k4nqf": ["f1asvbfq", "fxk1nzy"]
|
103
|
+
},
|
104
|
+
"orientationHorizontal": {
|
105
|
+
"Beiy3e4": "f1063pyq",
|
106
|
+
"Bt984gj": "f122n59",
|
107
|
+
"Bnoktp0": "fpfyeui",
|
108
|
+
"Idhjb2": "fwi74qw",
|
109
|
+
"Bsdbyht": ["f1yfsbdm", "f1vk4t4a"]
|
110
|
+
},
|
111
|
+
"orientationVertical": {
|
112
|
+
"Beiy3e4": "f1vx9l62",
|
53
113
|
"Bt4kzjz": ["fobhde4", "fx5r7kn"],
|
54
114
|
"B1ou843": ["fx5r7kn", "fobhde4"],
|
55
115
|
"ydhu1d": "frl7skw"
|
56
116
|
},
|
57
117
|
"sizeSmall": {
|
58
118
|
"B7balbw": "f1pi9uxy",
|
59
|
-
"
|
60
|
-
"Beyfa6y": ["fi2rrw2", "f1g3puop"],
|
61
|
-
"B7oj6ja": ["f1rstyi9", "f1s4nn1u"],
|
62
|
-
"Btl43ni": ["f1s4nn1u", "f1rstyi9"]
|
119
|
+
"B1h88n7": "f1h1zgly"
|
63
120
|
},
|
64
121
|
"sizeMedium": {
|
65
122
|
"B7balbw": "frsmuga",
|
66
|
-
"
|
67
|
-
"Beyfa6y": ["f16jpd5f", "f1aa9q02"],
|
68
|
-
"B7oj6ja": ["f1jar5jt", "fyu767a"],
|
69
|
-
"Btl43ni": ["fyu767a", "f1jar5jt"]
|
123
|
+
"B1h88n7": "fuldkky"
|
70
124
|
},
|
71
125
|
"sizeLarge": {
|
72
126
|
"B7balbw": "f1qua4xo",
|
73
|
-
"
|
74
|
-
"Beyfa6y": ["frrelxk", "f1ldthgs"],
|
75
|
-
"B7oj6ja": ["fobrfso", "ffisxpw"],
|
76
|
-
"Btl43ni": ["ffisxpw", "fobrfso"]
|
127
|
+
"B1h88n7": "fimkt6v"
|
77
128
|
},
|
78
129
|
"interactiveNoOutline": {
|
79
130
|
"Be0v6ae": "ftr40te",
|
@@ -172,24 +223,29 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
172
223
|
"Gp14am": ["fzybk4o", "fpgykix"]
|
173
224
|
}
|
174
225
|
}, {
|
175
|
-
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".
|
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] .f1qcdkjp:focus::after{content:\"\";}", "[data-keyboard-nav] .frwipam:focus::after{position:absolute;}", "[data-keyboard-nav] .fm04wnm:focus::after{pointer-events:none;}", "[data-keyboard-nav] .ffifs4z:focus::after{z-index:1;}", "[data-keyboard-nav] .f1jttrum:focus::after{border-top-style:solid;}", "[data-keyboard-nav] .fowbmzg:focus::after{border-right-style:solid;}", "[data-keyboard-nav] .f1kmm3zi:focus::after{border-left-style:solid;}", "[data-keyboard-nav] .f1rvwwl:focus::after{border-bottom-style:solid;}", "[data-keyboard-nav] .fld4889:focus::after{border-top-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1fyrmc6:focus::after{border-right-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1sx0t16:focus::after{border-left-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fdoni5z:focus::after{border-bottom-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f1o4bf66:focus::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f10vrftj:focus::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f10tshoi:focus::after{border-top-right-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f5b38mp:focus::after{border-top-left-radius:var(--fui-Card--border-radius);}", "[data-keyboard-nav] .f1o5urc0:focus::after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fo4xo12:focus::after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f69zm5y:focus::after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f6upevr:focus::after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f187pic6:focus::after{top:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fgb1g4v:focus::after{bottom:-var(--strokeWidthThick);}", "[data-keyboard-nav] .fxk1nzy:focus::after{left:-var(--strokeWidthThick);}", "[data-keyboard-nav] .f1asvbfq: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;}"],
|
176
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);}"],
|
177
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);}"]
|
178
230
|
});
|
179
231
|
/**
|
180
|
-
* Apply styling to the Card slots based on the state
|
232
|
+
* Apply styling to the Card slots based on the state.
|
181
233
|
*/
|
182
234
|
|
183
235
|
|
184
236
|
const useCardStyles_unstable = state => {
|
185
237
|
const styles = useStyles();
|
238
|
+
const orientationMap = {
|
239
|
+
horizontal: styles.orientationHorizontal,
|
240
|
+
vertical: styles.orientationVertical
|
241
|
+
};
|
186
242
|
const sizeMap = {
|
187
243
|
small: styles.sizeSmall,
|
188
244
|
medium: styles.sizeMedium,
|
189
245
|
large: styles.sizeLarge
|
190
246
|
};
|
191
247
|
const interactive = state.root.onClick || state.root.onMouseUp || state.root.onMouseDown || state.root.onPointerUp || state.root.onPointerDown || state.root.onTouchStart || state.root.onTouchEnd;
|
192
|
-
state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, sizeMap[state.size], 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);
|
248
|
+
state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], 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);
|
193
249
|
return state;
|
194
250
|
};
|
195
251
|
|
@@ -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/index';\nimport type { CardSlots, CardState } from './Card.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n};\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n position: 'relative',\n ...shorthands.overflow('hidden'),\n color: tokens.colorNeutralForeground1,\n\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 [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\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 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 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/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
1
|
+
{"version":3,"sources":["components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n const state = useCardFooter_unstable(props, ref);\n\n useCardFooterStyles_unstable(state);\n return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;
|
1
|
+
{"version":3,"sources":["components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CAFnB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slotProps.root.children}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE;EAAF,IAAa,KAAnB;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,MAAM,EAAE;IAFE,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAND;IAUL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;EAVH,CAAP;AAYD,CAfM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n const { action } = props;\n\n return {\n components: {\n root: 'div',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
/**
|
10
|
+
* Static CSS class names used internally for the component slots.
|
11
|
+
*/
|
12
|
+
|
9
13
|
|
10
14
|
exports.cardFooterClassNames = {
|
11
15
|
root: 'fui-CardFooter',
|
12
16
|
action: 'fui-CardFooter__action'
|
13
17
|
};
|
14
|
-
/**
|
15
|
-
* Styles for the root slot
|
16
|
-
*/
|
17
18
|
|
18
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
19
20
|
"root": {
|
@@ -29,7 +30,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
29
30
|
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}"]
|
30
31
|
});
|
31
32
|
/**
|
32
|
-
* Apply styling to the CardFooter slots based on the state
|
33
|
+
* Apply styling to the CardFooter slots based on the state.
|
33
34
|
*/
|
34
35
|
|
35
36
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE,gBAD6D;EAEnE,MAAM,EAAE;AAF2D,CAAxD;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,MAAM,CAAC,MAAjD,EAAyD,KAAK,CAAC,MAAN,CAAa,SAAtE,CAAzB;EACD;;EAED,OAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n ...shorthands.gap('12px'),\n },\n action: {\n marginLeft: 'auto',\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
1
|
+
{"version":3,"sources":["components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n const state = useCardHeader_unstable(props, ref);\n\n useCardHeaderStyles_unstable(state);\n return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;
|
1
|
+
{"version":3,"sources":["components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,KAAK,CAAC,OAAN,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,WAAP,EAAkB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAlB,CAFF,CAHJ,EAQG,KAAK,CAAC,MAAN,IAAgB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,CARnB,CADF;AAYD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.image {...slotProps.image} />\n {slots.content && (\n <slots.content {...slotProps.content}>\n <slots.header {...slotProps.header} />\n <slots.description {...slotProps.description} />\n </slots.content>\n )}\n {slots.action && <slots.action {...slotProps.action} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,MAAM;IAAE,KAAF;IAAS,OAAT;IAAkB,MAAlB;IAA0B,WAA1B;IAAuC;EAAvC,IAAkD,KAAxD;EAEA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,KAAK,EAAE,KAFG;MAGV,OAAO,EAAE,KAHC;MAIV,MAAM,EAAE,MAJE;MAKV,WAAW,EAAE,MALH;MAMV,MAAM,EAAE;IANE,CADP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAVD;IAcL,KAAK,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAjB,EAAwB;MAC7B,QAAQ,EAAE;IADmB,CAAxB,CAdF;IAiBL,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAO,IAAI,EAA5B,CAjBJ;IAkBL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE;IADqB,CAAzB,CAlBH;IAqBL,WAAW,EAAE,iBAAA,CAAA,gBAAA,CAAiB,WAAjB,EAA8B;MACzC,QAAQ,EAAE;IAD+B,CAA9B,CArBR;IAwBL,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB;EAxBH,CAAP;AA0BD,CA7BM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n const { image, content, header, description, action } = props;\n\n return {\n components: {\n root: 'div',\n image: 'div',\n content: 'div',\n header: 'span',\n description: 'span',\n action: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n image: resolveShorthand(image, {\n required: true,\n }),\n content: resolveShorthand(content || {}),\n header: resolveShorthand(header, {\n required: true,\n }),\n description: resolveShorthand(description, {\n required: true,\n }),\n action: resolveShorthand(action),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useCardHeaderStyles_unstable = exports.cardHeaderClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
/**
|
10
|
+
* Static CSS class names used internally for the component slots.
|
11
|
+
*/
|
12
|
+
|
9
13
|
|
10
14
|
exports.cardHeaderClassNames = {
|
11
15
|
root: 'fui-CardHeader',
|
@@ -15,9 +19,6 @@ exports.cardHeaderClassNames = {
|
|
15
19
|
description: 'fui-CardHeader__description',
|
16
20
|
action: 'fui-CardHeader__action'
|
17
21
|
};
|
18
|
-
/**
|
19
|
-
* Styles for the root slot
|
20
|
-
*/
|
21
22
|
|
22
23
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
23
24
|
"root": {
|
@@ -51,7 +52,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
51
52
|
"d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".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;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fe5j3v{row-gap:12px;}", ".f1d2rq10{height:32px;}", ".f17fgpbq{min-width:24px;}", ".f1pha7fy{min-height:24px;}", ".f44c6la{max-width:32px;}", ".f17bzqcb{max-height:32px;}", ".fgn7ydb>*{min-width:inherit;}", ".f1jevvm1>*{min-height:inherit;}", ".fqihwjc>*{max-width:100%;}", ".f6x1sus>*{max-height:100%;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fwk23hs{height:inherit;}", ".f1con4nn>*{height:50%;}"]
|
52
53
|
});
|
53
54
|
/**
|
54
|
-
* Apply styling to the CardHeader slots based on the state
|
55
|
+
* Apply styling to the CardHeader slots based on the state.
|
55
56
|
*/
|
56
57
|
|
57
58
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["components/CardHeader/useCardHeaderStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE,gBAD6D;EAEnE,KAAK,EAAE,uBAF4D;EAGnE,OAAO,EAAE,yBAH0D;EAInE,MAAM,EAAE,wBAJ2D;EAKnE,WAAW,EAAE,6BALsD;EAMnE,MAAM,EAAE;AAN2D,CAAxD;;AASb,MAAM,SAAS,gBAAG,OAAA,SAAA;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;EAAA;AAAA;EAAA;AAAA,EAAlB;AAqCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;;EAEA,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,KAAlC,EAAyC,MAAM,CAAC,KAAhD,EAAuD,KAAK,CAAC,KAAN,CAAY,SAAnE,CAAxB;EACD;;EAED,IAAI,KAAK,CAAC,OAAV,EAAmB;IACjB,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,OAAlC,EAA2C,MAAM,CAAC,aAAlD,EAAiE,KAAK,CAAC,OAAN,CAAc,SAA/E,CAA1B;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;EACD;;EAED,IAAI,KAAK,CAAC,WAAV,EAAuB;IACrB,KAAK,CAAC,WAAN,CAAkB,SAAlB,GAA8B,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,WAAlC,EAA+C,KAAK,CAAC,WAAN,CAAkB,SAAjE,CAA9B;EACD;;EAED,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,MAAlC,EAA0C,KAAK,CAAC,MAAN,CAAa,SAAvD,CAAzB;EACD;;EAED,OAAO,KAAP;AACD,CAzBM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n content: 'fui-CardHeader__content',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n ...shorthands.gap('12px'),\n height: '32px',\n },\n image: {\n minWidth: '24px',\n minHeight: '24px',\n maxWidth: '32px',\n maxHeight: '32px',\n\n display: 'flex',\n alignItems: 'center',\n\n '> *': {\n minWidth: 'inherit',\n minHeight: 'inherit',\n maxWidth: '100%',\n maxHeight: '100%',\n },\n },\n\n textContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n height: 'inherit',\n\n '> *': {\n height: '50%',\n },\n },\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);\n\n if (state.image) {\n state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);\n }\n\n if (state.content) {\n state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);\n }\n\n if (state.header) {\n state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);\n }\n\n if (state.description) {\n state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);\n }\n\n if (state.action) {\n state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/CardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
1
|
+
{"version":3,"sources":["components/CardPreview/CardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { useCardPreview_unstable } from './useCardPreview';\nimport { renderCardPreview_unstable } from './renderCardPreview';\nimport { useCardPreviewStyles_unstable } from './useCardPreviewStyles';\nimport type { CardPreviewProps } from './CardPreview.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render image previews of documents or articles in a Card component.\n */\nexport const CardPreview: ForwardRefComponent<CardPreviewProps> = React.forwardRef((props, ref) => {\n const state = useCardPreview_unstable(props, ref);\n\n useCardPreviewStyles_unstable(state);\n return renderCardPreview_unstable(state);\n});\n\nCardPreview.displayName = 'CardPreview';\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;
|
1
|
+
{"version":3,"sources":["components/CardPreview/renderCardPreview.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA2B,KAA3B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFjB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Render the final JSX of CardPreview.\n */\nexport const renderCardPreview_unstable = (state: CardPreviewState) => {\n const { slots, slotProps } = getSlots<CardPreviewSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slotProps.root.children}\n {slots.logo && <slots.logo {...slotProps.logo} />}\n </slots.root>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreview.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM;IAAE;EAAF,IAAW,KAAjB;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,IAAI,EAAE;IAFI,CADP;IAML,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAND;IAUL,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB;EAVD,CAAP;AAYD,CAdM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardPreviewProps, CardPreviewState } from './CardPreview.types';\n\n/**\n * Create the state required to render CardPreview.\n *\n * The returned state can be modified with hooks such as useCardPreviewStyles_unstable,\n * before being passed to renderCardPreview_unstable.\n *\n * @param props - props from this instance of CardPreview\n * @param ref - reference to root HTMLElement of CardPreview\n */\nexport const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<HTMLElement>): CardPreviewState => {\n const { logo } = props;\n return {\n components: {\n root: 'div',\n logo: 'div',\n },\n\n root: getNativeElementProps('div', {\n ref,\n ...props,\n }),\n logo: resolveShorthand(logo),\n };\n};\n"],"sourceRoot":"../src/"}
|
@@ -6,20 +6,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useCardPreviewStyles_unstable = exports.cardPreviewClassNames = void 0;
|
7
7
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
/**
|
10
|
+
* Static CSS class names used internally for the component slots.
|
11
|
+
*/
|
12
|
+
|
9
13
|
|
10
14
|
exports.cardPreviewClassNames = {
|
11
15
|
root: 'fui-CardPreview',
|
12
16
|
logo: 'fui-CardPreview__logo'
|
13
17
|
};
|
14
|
-
/**
|
15
|
-
* Styles for the root slot
|
16
|
-
*/
|
17
18
|
|
18
19
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
19
20
|
"root": {
|
20
21
|
"qhf8xq": "f10pi13n",
|
21
|
-
"
|
22
|
-
"
|
22
|
+
"pnb5jt": "f1rzl30s",
|
23
|
+
"Elg2ur": "f1chxnfo",
|
24
|
+
"B184ckt": "f17xb19f"
|
23
25
|
},
|
24
26
|
"logo": {
|
25
27
|
"qhf8xq": "f1euv43f",
|
@@ -29,10 +31,10 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
29
31
|
"Bqenvij": "f1d2rq10"
|
30
32
|
}
|
31
33
|
}, {
|
32
|
-
"d": [".f10pi13n{position:relative;}", ".
|
34
|
+
"d": [".f10pi13n{position:relative;}", ".f1rzl30s>:not(.fui-CardPreview__logo){display:block;}", ".f1chxnfo>:not(.fui-CardPreview__logo){height:100%;}", ".f17xb19f>:not(.fui-CardPreview__logo){width:100%;}", ".f1euv43f{position:absolute;}", ".f1gcvs1y{bottom:12px;}", ".f1t6tvco{left:12px;}", ".ffrfxm3{right:12px;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}"]
|
33
35
|
});
|
34
36
|
/**
|
35
|
-
* Apply styling to the CardPreview slots based on the state
|
37
|
+
* Apply styling to the CardPreview slots based on the state.
|
36
38
|
*/
|
37
39
|
|
38
40
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;
|
1
|
+
{"version":3,"sources":["components/CardPreview/useCardPreviewStyles.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACU,OAAA,CAAA,qBAAA,GAA0D;EACrE,IAAI,EAAE,iBAD+D;EAErE,IAAI,EAAE;AAF+D,CAA1D;;AAKb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAoBA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;;EAEA,IAAI,KAAK,CAAC,IAAV,EAAgB;IACd,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,qBAAA,CAAsB,IAAnC,EAAyC,MAAM,CAAC,IAAhD,EAAsD,KAAK,CAAC,IAAN,CAAW,SAAjE,CAAvB;EACD;;EAED,OAAO,KAAP;AACD,CATM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo',\n};\n\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%',\n },\n },\n\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px',\n },\n});\n\n/**\n * Apply styling to the CardPreview slots based on the state.\n */\nexport const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {\n const styles = useStyles();\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,MAAA,gBAAA,OAAA,CAAA,QAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,MAAA,EAAA;
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,MAAA,gBAAA,OAAA,CAAA,QAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,MAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,IAAA;EAAI;AAAJ,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,MAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AAGF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;;AAGF,IAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,YAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,UAAA;EAAU;AAAV,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,8BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,4BAAA;EAA4B;AAA5B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,YAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;;AAGF,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,aAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA","sourcesContent":["export {\n Card,\n cardClassNames,\n cardCSSVars,\n renderCard_unstable,\n useCardStyles_unstable,\n useCard_unstable,\n} from './Card';\nexport type { CardProps, CardSlots, CardState } from './Card';\nexport {\n CardFooter,\n cardFooterClassNames,\n renderCardFooter_unstable,\n useCardFooterStyles_unstable,\n useCardFooter_unstable,\n} from './CardFooter';\nexport type { CardFooterProps, CardFooterSlots, CardFooterState } from './CardFooter';\nexport {\n CardHeader,\n cardHeaderClassNames,\n renderCardHeader_unstable,\n useCardHeaderStyles_unstable,\n useCardHeader_unstable,\n} from './CardHeader';\nexport type { CardHeaderProps, CardHeaderSlots, CardHeaderState } from './CardHeader';\nexport {\n CardPreview,\n cardPreviewClassNames,\n renderCardPreview_unstable,\n useCardPreviewStyles_unstable,\n useCardPreview_unstable,\n} from './CardPreview';\nexport type { CardPreviewProps, CardPreviewSlots, CardPreviewState } from './CardPreview';\n"],"sourceRoot":"../src/"}
|