@fluentui/react-card 0.0.0-nightly-20230426-0420.1 → 0.0.0-nightly-20230428-0419.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.
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/lib-commonjs/components/Card/Card.js +2 -2
- package/lib-commonjs/components/Card/Card.js.map +1 -1
- package/lib-commonjs/components/Card/index.js +1 -1
- package/lib-commonjs/components/Card/index.js.map +1 -1
- package/lib-commonjs/components/Card/{useCardStyles.js → useCardStyles.styles.js} +2 -2
- package/lib-commonjs/components/Card/useCardStyles.styles.js.map +1 -0
- package/lib-commonjs/components/CardFooter/CardFooter.js +2 -2
- package/lib-commonjs/components/CardFooter/CardFooter.js.map +1 -1
- package/lib-commonjs/components/CardFooter/index.js +1 -1
- package/lib-commonjs/components/CardFooter/index.js.map +1 -1
- package/lib-commonjs/components/CardFooter/{useCardFooterStyles.js → useCardFooterStyles.styles.js} +2 -2
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js.map +1 -0
- package/lib-commonjs/components/CardHeader/CardHeader.js +2 -2
- package/lib-commonjs/components/CardHeader/CardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/index.js +1 -1
- package/lib-commonjs/components/CardHeader/index.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeader.js +2 -2
- package/lib-commonjs/components/CardHeader/useCardHeader.js.map +1 -1
- package/lib-commonjs/components/CardHeader/{useCardHeaderStyles.js → useCardHeaderStyles.styles.js} +2 -2
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -0
- package/lib-commonjs/components/CardPreview/CardPreview.js +2 -2
- package/lib-commonjs/components/CardPreview/CardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/index.js +1 -1
- package/lib-commonjs/components/CardPreview/index.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreview.js +2 -2
- package/lib-commonjs/components/CardPreview/useCardPreview.js.map +1 -1
- package/lib-commonjs/components/CardPreview/{useCardPreviewStyles.js → useCardPreviewStyles.styles.js} +2 -2
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js.map +1 -0
- package/package.json +8 -8
- package/dist/index.d.ts +0 -389
- package/lib/Card.js +0 -2
- package/lib/Card.js.map +0 -1
- package/lib/CardFooter.js +0 -2
- package/lib/CardFooter.js.map +0 -1
- package/lib/CardHeader.js +0 -2
- package/lib/CardHeader.js.map +0 -1
- package/lib/CardPreview.js +0 -2
- package/lib/CardPreview.js.map +0 -1
- package/lib/components/Card/Card.js +0 -16
- package/lib/components/Card/Card.js.map +0 -1
- package/lib/components/Card/Card.types.js +0 -2
- package/lib/components/Card/Card.types.js.map +0 -1
- package/lib/components/Card/CardContext.js +0 -25
- package/lib/components/Card/CardContext.js.map +0 -1
- package/lib/components/Card/index.js +0 -7
- package/lib/components/Card/index.js.map +0 -1
- package/lib/components/Card/renderCard.js +0 -16
- package/lib/components/Card/renderCard.js.map +0 -1
- package/lib/components/Card/useCard.js +0 -101
- package/lib/components/Card/useCard.js.map +0 -1
- package/lib/components/Card/useCardContextValue.js +0 -8
- package/lib/components/Card/useCardContextValue.js.map +0 -1
- package/lib/components/Card/useCardSelectable.js +0 -116
- package/lib/components/Card/useCardSelectable.js.map +0 -1
- package/lib/components/Card/useCardStyles.js +0 -395
- package/lib/components/Card/useCardStyles.js.map +0 -1
- package/lib/components/CardFooter/CardFooter.js +0 -14
- package/lib/components/CardFooter/CardFooter.js.map +0 -1
- package/lib/components/CardFooter/CardFooter.types.js +0 -2
- package/lib/components/CardFooter/CardFooter.types.js.map +0 -1
- package/lib/components/CardFooter/index.js +0 -6
- package/lib/components/CardFooter/index.js.map +0 -1
- package/lib/components/CardFooter/renderCardFooter.js +0 -13
- package/lib/components/CardFooter/renderCardFooter.js.map +0 -1
- package/lib/components/CardFooter/useCardFooter.js +0 -28
- package/lib/components/CardFooter/useCardFooter.js.map +0 -1
- package/lib/components/CardFooter/useCardFooterStyles.js +0 -33
- package/lib/components/CardFooter/useCardFooterStyles.js.map +0 -1
- package/lib/components/CardHeader/CardHeader.js +0 -14
- package/lib/components/CardHeader/CardHeader.js.map +0 -1
- package/lib/components/CardHeader/CardHeader.types.js +0 -2
- package/lib/components/CardHeader/CardHeader.types.js.map +0 -1
- package/lib/components/CardHeader/index.js +0 -6
- package/lib/components/CardHeader/index.js.map +0 -1
- package/lib/components/CardHeader/renderCardHeader.js +0 -13
- package/lib/components/CardHeader/renderCardHeader.js.map +0 -1
- package/lib/components/CardHeader/useCardHeader.js +0 -61
- package/lib/components/CardHeader/useCardHeader.js.map +0 -1
- package/lib/components/CardHeader/useCardHeaderStyles.js +0 -68
- package/lib/components/CardHeader/useCardHeaderStyles.js.map +0 -1
- package/lib/components/CardPreview/CardPreview.js +0 -14
- package/lib/components/CardPreview/CardPreview.js.map +0 -1
- package/lib/components/CardPreview/CardPreview.types.js +0 -2
- package/lib/components/CardPreview/CardPreview.types.js.map +0 -1
- package/lib/components/CardPreview/index.js +0 -6
- package/lib/components/CardPreview/index.js.map +0 -1
- package/lib/components/CardPreview/renderCardPreview.js +0 -13
- package/lib/components/CardPreview/renderCardPreview.js.map +0 -1
- package/lib/components/CardPreview/useCardPreview.js +0 -58
- package/lib/components/CardPreview/useCardPreview.js.map +0 -1
- package/lib/components/CardPreview/useCardPreviewStyles.js +0 -37
- package/lib/components/CardPreview/useCardPreviewStyles.js.map +0 -1
- package/lib/index.js +0 -6
- package/lib/index.js.map +0 -1
- package/lib-commonjs/components/Card/useCardStyles.js.map +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.js.map +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.js.map +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.js.map +0 -1
@@ -1,116 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';
|
3
|
-
import { Enter } from '@fluentui/keyboard-keys';
|
4
|
-
import { useFocusFinders } from '@fluentui/react-tabster';
|
5
|
-
/**
|
6
|
-
* @internal
|
7
|
-
*
|
8
|
-
* Create the state related to selectable cards.
|
9
|
-
*
|
10
|
-
* This internal hook controls all the logic for selectable cards and is
|
11
|
-
* intended to be used alongside with useCard_unstable.
|
12
|
-
*
|
13
|
-
* @param props - props from this instance of Card
|
14
|
-
* @param a11yProps - accessibility props shared between elements of the card
|
15
|
-
* @param ref - reference to the root element of Card
|
16
|
-
*/
|
17
|
-
export const useCardSelectable = (props, {
|
18
|
-
referenceLabel,
|
19
|
-
referenceId
|
20
|
-
}, cardRef) => {
|
21
|
-
const {
|
22
|
-
checkbox = {},
|
23
|
-
selected,
|
24
|
-
defaultSelected,
|
25
|
-
onSelectionChange,
|
26
|
-
floatingAction,
|
27
|
-
onClick,
|
28
|
-
onKeyDown
|
29
|
-
} = props;
|
30
|
-
const {
|
31
|
-
findAllFocusable
|
32
|
-
} = useFocusFinders();
|
33
|
-
const checkboxRef = React.useRef(null);
|
34
|
-
const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');
|
35
|
-
const [isCardSelected, setIsCardSelected] = React.useState(false);
|
36
|
-
const [isSelectFocused, setIsSelectFocused] = React.useState(false);
|
37
|
-
const shouldRestrictTriggerAction = React.useCallback(event => {
|
38
|
-
if (!cardRef.current) {
|
39
|
-
return false;
|
40
|
-
}
|
41
|
-
const focusableElements = findAllFocusable(cardRef.current);
|
42
|
-
const target = event.target;
|
43
|
-
const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));
|
44
|
-
const isCheckboxSlot = (checkboxRef === null || checkboxRef === void 0 ? void 0 : checkboxRef.current) === target;
|
45
|
-
return isElementInFocusableGroup && !isCheckboxSlot;
|
46
|
-
}, [cardRef, findAllFocusable]);
|
47
|
-
const onChangeHandler = React.useCallback(event => {
|
48
|
-
if (shouldRestrictTriggerAction(event)) {
|
49
|
-
return;
|
50
|
-
}
|
51
|
-
const newCheckedValue = !isCardSelected;
|
52
|
-
setIsCardSelected(newCheckedValue);
|
53
|
-
if (onSelectionChange) {
|
54
|
-
onSelectionChange(event, {
|
55
|
-
selected: newCheckedValue
|
56
|
-
});
|
57
|
-
}
|
58
|
-
}, [onSelectionChange, isCardSelected, shouldRestrictTriggerAction]);
|
59
|
-
const onKeyDownHandler = React.useCallback(event => {
|
60
|
-
if ([Enter].includes(event.key)) {
|
61
|
-
event.preventDefault();
|
62
|
-
onChangeHandler(event);
|
63
|
-
}
|
64
|
-
}, [onChangeHandler]);
|
65
|
-
const checkboxSlot = React.useMemo(() => {
|
66
|
-
if (!isSelectable || floatingAction) {
|
67
|
-
return;
|
68
|
-
}
|
69
|
-
const selectableCheckboxProps = {};
|
70
|
-
if (referenceId) {
|
71
|
-
selectableCheckboxProps['aria-labelledby'] = referenceId;
|
72
|
-
} else if (referenceLabel) {
|
73
|
-
selectableCheckboxProps['aria-label'] = referenceLabel;
|
74
|
-
}
|
75
|
-
return resolveShorthand(checkbox, {
|
76
|
-
defaultProps: {
|
77
|
-
ref: checkboxRef,
|
78
|
-
type: 'checkbox',
|
79
|
-
checked: isCardSelected,
|
80
|
-
onChange: event => onChangeHandler(event),
|
81
|
-
onFocus: () => setIsSelectFocused(true),
|
82
|
-
onBlur: () => setIsSelectFocused(false),
|
83
|
-
...selectableCheckboxProps
|
84
|
-
}
|
85
|
-
});
|
86
|
-
}, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);
|
87
|
-
const floatingActionSlot = React.useMemo(() => {
|
88
|
-
if (!floatingAction) {
|
89
|
-
return;
|
90
|
-
}
|
91
|
-
return resolveShorthand(floatingAction, {
|
92
|
-
defaultProps: {
|
93
|
-
ref: checkboxRef
|
94
|
-
}
|
95
|
-
});
|
96
|
-
}, [floatingAction]);
|
97
|
-
const selectableCardProps = React.useMemo(() => {
|
98
|
-
if (!isSelectable) {
|
99
|
-
return null;
|
100
|
-
}
|
101
|
-
return {
|
102
|
-
onClick: mergeCallbacks(onClick, onChangeHandler),
|
103
|
-
onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler)
|
104
|
-
};
|
105
|
-
}, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);
|
106
|
-
React.useEffect(() => setIsCardSelected(Boolean(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : selected)), [defaultSelected, selected, setIsCardSelected]);
|
107
|
-
return {
|
108
|
-
selected: isCardSelected,
|
109
|
-
selectable: isSelectable,
|
110
|
-
selectFocused: isSelectFocused,
|
111
|
-
selectableCardProps,
|
112
|
-
checkboxSlot,
|
113
|
-
floatingActionSlot
|
114
|
-
};
|
115
|
-
};
|
116
|
-
//# sourceMappingURL=useCardSelectable.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","mergeCallbacks","resolveShorthand","Enter","useFocusFinders","useCardSelectable","props","referenceLabel","referenceId","cardRef","checkbox","selected","defaultSelected","onSelectionChange","floatingAction","onClick","onKeyDown","findAllFocusable","checkboxRef","useRef","isSelectable","some","prop","isCardSelected","setIsCardSelected","useState","isSelectFocused","setIsSelectFocused","shouldRestrictTriggerAction","useCallback","event","current","focusableElements","target","isElementInFocusableGroup","element","contains","isCheckboxSlot","onChangeHandler","newCheckedValue","onKeyDownHandler","includes","key","preventDefault","checkboxSlot","useMemo","selectableCheckboxProps","defaultProps","ref","type","checked","onChange","onFocus","onBlur","floatingActionSlot","selectableCardProps","useEffect","Boolean","selectable","selectFocused"],"sources":["../../../src/components/Card/useCardSelectable.ts"],"sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities';\nimport { Enter } from '@fluentui/keyboard-keys';\nimport { useFocusFinders } from '@fluentui/react-tabster';\n\nimport type { CardContextValue, CardOnSelectionChangeEvent, CardProps, CardSlots } from './Card.types';\n\n/**\n * @internal\n *\n * Create the state related to selectable cards.\n *\n * This internal hook controls all the logic for selectable cards and is\n * intended to be used alongside with useCard_unstable.\n *\n * @param props - props from this instance of Card\n * @param a11yProps - accessibility props shared between elements of the card\n * @param ref - reference to the root element of Card\n */\nexport const useCardSelectable = (\n props: CardProps,\n { referenceLabel, referenceId }: Pick<CardContextValue['selectableA11yProps'], 'referenceId' | 'referenceLabel'>,\n cardRef: React.RefObject<HTMLDivElement>,\n) => {\n const { checkbox = {}, selected, defaultSelected, onSelectionChange, floatingAction, onClick, onKeyDown } = props;\n\n const { findAllFocusable } = useFocusFinders();\n\n const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n const isSelectable = [selected, defaultSelected, onSelectionChange].some(prop => typeof prop !== 'undefined');\n\n const [isCardSelected, setIsCardSelected] = React.useState(false);\n const [isSelectFocused, setIsSelectFocused] = React.useState(false);\n\n const shouldRestrictTriggerAction = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (!cardRef.current) {\n return false;\n }\n\n const focusableElements = findAllFocusable(cardRef.current);\n const target = event.target as HTMLElement;\n const isElementInFocusableGroup = focusableElements.some(element => element.contains(target));\n const isCheckboxSlot = checkboxRef?.current === target;\n\n return isElementInFocusableGroup && !isCheckboxSlot;\n },\n [cardRef, findAllFocusable],\n );\n\n const onChangeHandler = React.useCallback(\n (event: CardOnSelectionChangeEvent) => {\n if (shouldRestrictTriggerAction(event)) {\n return;\n }\n\n const newCheckedValue = !isCardSelected;\n\n setIsCardSelected(newCheckedValue);\n\n if (onSelectionChange) {\n onSelectionChange(event, { selected: newCheckedValue });\n }\n },\n [onSelectionChange, isCardSelected, shouldRestrictTriggerAction],\n );\n\n const onKeyDownHandler = React.useCallback(\n (event: React.KeyboardEvent<HTMLElement>) => {\n if ([Enter].includes(event.key)) {\n event.preventDefault();\n onChangeHandler(event);\n }\n },\n [onChangeHandler],\n );\n\n const checkboxSlot = React.useMemo(() => {\n if (!isSelectable || floatingAction) {\n return;\n }\n\n const selectableCheckboxProps: CardSlots['checkbox'] = {};\n\n if (referenceId) {\n selectableCheckboxProps['aria-labelledby'] = referenceId;\n } else if (referenceLabel) {\n selectableCheckboxProps['aria-label'] = referenceLabel;\n }\n\n return resolveShorthand(checkbox, {\n defaultProps: {\n ref: checkboxRef,\n type: 'checkbox',\n checked: isCardSelected,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => onChangeHandler(event),\n onFocus: () => setIsSelectFocused(true),\n onBlur: () => setIsSelectFocused(false),\n ...selectableCheckboxProps,\n },\n });\n }, [checkbox, floatingAction, isCardSelected, isSelectable, onChangeHandler, referenceId, referenceLabel]);\n\n const floatingActionSlot = React.useMemo(() => {\n if (!floatingAction) {\n return;\n }\n\n return resolveShorthand(floatingAction, {\n defaultProps: {\n ref: checkboxRef,\n },\n });\n }, [floatingAction]);\n\n const selectableCardProps = React.useMemo(() => {\n if (!isSelectable) {\n return null;\n }\n\n return {\n onClick: mergeCallbacks(onClick, onChangeHandler),\n onKeyDown: mergeCallbacks(onKeyDown, onKeyDownHandler),\n };\n }, [isSelectable, onChangeHandler, onClick, onKeyDown, onKeyDownHandler]);\n\n React.useEffect(\n () => setIsCardSelected(Boolean(defaultSelected ?? selected)),\n [defaultSelected, selected, setIsCardSelected],\n );\n\n return {\n selected: isCardSelected,\n selectable: isSelectable,\n selectFocused: isSelectFocused,\n selectableCardProps,\n checkboxSlot,\n floatingActionSlot,\n };\n};\n"],"mappings":"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"}
|
@@ -1,395 +0,0 @@
|
|
1
|
-
import { shorthands, __styles, mergeClasses } from '@griffel/react';
|
2
|
-
import { tokens } from '@fluentui/react-theme';
|
3
|
-
import { createFocusOutlineStyle } from '@fluentui/react-tabster';
|
4
|
-
import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';
|
5
|
-
import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';
|
6
|
-
import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';
|
7
|
-
/**
|
8
|
-
* Static CSS class names used internally for the component slots.
|
9
|
-
*/
|
10
|
-
export const cardClassNames = {
|
11
|
-
root: 'fui-Card',
|
12
|
-
floatingAction: 'fui-Card__floatingAction',
|
13
|
-
checkbox: 'fui-Card__checkbox'
|
14
|
-
};
|
15
|
-
/**
|
16
|
-
* CSS variable names used internally for uniform styling in Card.
|
17
|
-
*/
|
18
|
-
export const cardCSSVars = {
|
19
|
-
cardSizeVar: '--fui-Card--size',
|
20
|
-
cardBorderRadiusVar: '--fui-Card--border-radius'
|
21
|
-
};
|
22
|
-
const focusOutlineStyle = {
|
23
|
-
outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
|
24
|
-
outlineWidth: tokens.strokeWidthThick
|
25
|
-
};
|
26
|
-
const useStyles = /*#__PURE__*/__styles({
|
27
|
-
root: {
|
28
|
-
B68tc82: "f1p9o1ba",
|
29
|
-
Bmxbyg5: "f1sil6mw",
|
30
|
-
Bbmb7ep: ["fifeqxg", "f899z7z"],
|
31
|
-
Beyfa6y: ["f899z7z", "fifeqxg"],
|
32
|
-
B7oj6ja: ["f4h3tyx", "f18ur2pz"],
|
33
|
-
Btl43ni: ["f18ur2pz", "f4h3tyx"],
|
34
|
-
z8tnut: "f1lplnzb",
|
35
|
-
z189sj: ["f10m5gbb", "f1k04kkk"],
|
36
|
-
Byoj8tv: "fhftqfp",
|
37
|
-
uwmqm3: ["f1k04kkk", "f10m5gbb"],
|
38
|
-
i8kkvl: "fxsr4vj",
|
39
|
-
Belr9w4: "fcvsdzp",
|
40
|
-
mc9l5x: "f22iagw",
|
41
|
-
qhf8xq: "f10pi13n",
|
42
|
-
B7ck84d: "f1ewtqcl",
|
43
|
-
sj55zd: "f19n0e5",
|
44
|
-
E3zdtr: "f1mdlcz9",
|
45
|
-
bn5sak: "frwkxtg",
|
46
|
-
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
|
47
|
-
B1piin3: ["f15yvnhg", "f1n6gb5g"],
|
48
|
-
By385i5: "fo72kxq",
|
49
|
-
Bsft5z2: "f13zj6fq",
|
50
|
-
B80jsxd: "f1nwj1ja",
|
51
|
-
Bm2nyyq: "f8rth92",
|
52
|
-
Barhvk9: ["flthirb", "ftkbnf5"],
|
53
|
-
Bw17bha: "f1lh990p",
|
54
|
-
vfts7: ["ftkbnf5", "flthirb"],
|
55
|
-
xrcqlc: "f6czdpx",
|
56
|
-
Ihftqj: ["f13hvwk3", "f1en4csx"],
|
57
|
-
Bcgy8vk: "f1i1u9k0",
|
58
|
-
Bhxzhr1: ["f1en4csx", "f13hvwk3"],
|
59
|
-
B3778ie: ["f1qnomq5", "f2fl922"],
|
60
|
-
d9w3h3: ["f2fl922", "f1qnomq5"],
|
61
|
-
Bl18szs: ["f1anhtl", "f1n2zcl3"],
|
62
|
-
B4j8arr: ["f1n2zcl3", "f1anhtl"],
|
63
|
-
B2jhnfs: "f16v3d5c",
|
64
|
-
wiictr: "f1su8t2g",
|
65
|
-
Brovlpu: "ftqa4ok",
|
66
|
-
B486eqv: "f2hkw1w",
|
67
|
-
B8q5s1w: "f8hki3x",
|
68
|
-
Bci5o5g: ["f1d2448m", "ffh67wi"],
|
69
|
-
n8qw10: "f1bjia2o",
|
70
|
-
Bdrgwmp: ["ffh67wi", "f1d2448m"],
|
71
|
-
Bm4h7ae: "f15bsgw9",
|
72
|
-
B7ys5i9: "f14e48fq",
|
73
|
-
Busjfv9: "f18yb2kv",
|
74
|
-
Bhk32uz: "fd6o370",
|
75
|
-
Bf4ptjt: "fh1cnn4",
|
76
|
-
kclons: ["fy7oxxb", "f184ne2d"],
|
77
|
-
Bhdgwq3: "fpukqih",
|
78
|
-
Blkhhs4: ["f184ne2d", "fy7oxxb"],
|
79
|
-
Bqtpl0w: "f99gebs",
|
80
|
-
clg4pj: ["f13b0oaq", "f8t2bz6"],
|
81
|
-
hgwjuy: "f1jvq617",
|
82
|
-
Bonggc9: ["f8t2bz6", "f13b0oaq"],
|
83
|
-
B1tsrr9: ["f11unbnk", "fbd201q"],
|
84
|
-
Dah5zi: ["fbd201q", "f11unbnk"],
|
85
|
-
Bkh64rk: ["f12nqxso", "f1uguk4w"],
|
86
|
-
qqdqy8: ["f1uguk4w", "f12nqxso"],
|
87
|
-
B6dhp37: "f1dvezut",
|
88
|
-
i03rao: ["fd0oaoj", "f1cwg4i8"],
|
89
|
-
Boxcth7: "fjvm52t",
|
90
|
-
Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
|
91
|
-
J0r882: "f3l4wcz",
|
92
|
-
Bjwuhne: "f6j2biq",
|
93
|
-
Ghsupd: ["fdzzmfx", "fduh8kh"],
|
94
|
-
Bule8hv: ["fduh8kh", "fdzzmfx"]
|
95
|
-
},
|
96
|
-
selectableFocused: {
|
97
|
-
Brovlpu: "ftqa4ok",
|
98
|
-
B486eqv: "f2hkw1w",
|
99
|
-
Bssx7fj: "f1b1k54r",
|
100
|
-
uh7if5: ["f4ne723", "fqqcjud"],
|
101
|
-
clntm0: "fh7aioi",
|
102
|
-
Dlk2r6: ["fqqcjud", "f4ne723"],
|
103
|
-
B2j2mmj: "ffht0p2",
|
104
|
-
wigs8: "f1p0ul1q",
|
105
|
-
pbfy6t: "f1c901ms",
|
106
|
-
B0v4ure: "f1alokd7",
|
107
|
-
ghq09: "f78i1la",
|
108
|
-
B24cy0v: ["f1kvsw7t", "f1bw8brt"],
|
109
|
-
Bwckmig: "f8k7e5g",
|
110
|
-
Bvwlmkc: ["f1bw8brt", "f1kvsw7t"],
|
111
|
-
Bbgo44z: "f125hn41",
|
112
|
-
Bil7v7r: ["fgxkx34", "f1v56tyl"],
|
113
|
-
skfxo0: "fdxas6f",
|
114
|
-
jo1ztg: ["f1v56tyl", "fgxkx34"],
|
115
|
-
Ba3ybja: ["fxwickw", "f1ia5cve"],
|
116
|
-
az1dzo: ["f1ia5cve", "fxwickw"],
|
117
|
-
vppk2z: ["f194aguw", "fqicc6c"],
|
118
|
-
B6352mv: ["fqicc6c", "f194aguw"],
|
119
|
-
nr063g: "fq4eyks",
|
120
|
-
Blmvk6g: ["f1ya6x16", "ftuszwa"],
|
121
|
-
Bsiemmq: "f1e2iu44",
|
122
|
-
B98u21t: ["ftuszwa", "f1ya6x16"],
|
123
|
-
B2pnrqr: "f4a0pcc",
|
124
|
-
Bhhzhcn: "f11go4w5",
|
125
|
-
Bec0n69: ["f4dzull", "fy687nj"],
|
126
|
-
B29w5g4: ["fy687nj", "f4dzull"]
|
127
|
-
},
|
128
|
-
orientationHorizontal: {
|
129
|
-
Beiy3e4: "f1063pyq",
|
130
|
-
Bt984gj: "f122n59",
|
131
|
-
Bnoktp0: "fpfyeui",
|
132
|
-
Idhjb2: "fwi74qw",
|
133
|
-
ihgzqh: ["ffcmwrh", "f6ppoih"],
|
134
|
-
Bgp6ld0: ["f1dc9p14", "fd933vt"],
|
135
|
-
Bbucpmy: "f18esqgw"
|
136
|
-
},
|
137
|
-
orientationVertical: {
|
138
|
-
Beiy3e4: "f1vx9l62",
|
139
|
-
Bt4kzjz: ["fobhde4", "fx5r7kn"],
|
140
|
-
B1ou843: ["fx5r7kn", "fobhde4"],
|
141
|
-
y1433z: "f19chtn8",
|
142
|
-
B7egwnw: "fuvs6re",
|
143
|
-
B49b4xf: "fy4glsf"
|
144
|
-
},
|
145
|
-
sizeSmall: {
|
146
|
-
B7balbw: "f1pi9uxy",
|
147
|
-
B1h88n7: "f1h1zgly"
|
148
|
-
},
|
149
|
-
sizeMedium: {
|
150
|
-
B7balbw: "frsmuga",
|
151
|
-
B1h88n7: "fuldkky"
|
152
|
-
},
|
153
|
-
sizeLarge: {
|
154
|
-
B7balbw: "f1qua4xo",
|
155
|
-
B1h88n7: "fimkt6v"
|
156
|
-
},
|
157
|
-
filled: {
|
158
|
-
De3pzq: "fxugw4r",
|
159
|
-
E5pizo: "f1whvlc6",
|
160
|
-
B0n5ga8: "f16gxe2i",
|
161
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
162
|
-
B1q35kw: "f1osi826",
|
163
|
-
Gp14am: ["fzybk4o", "fpgykix"]
|
164
|
-
},
|
165
|
-
filledInteractive: {
|
166
|
-
Bceei9c: "f1k6fduh",
|
167
|
-
De3pzq: "fxugw4r",
|
168
|
-
E5pizo: "f1whvlc6",
|
169
|
-
B0n5ga8: "f16gxe2i",
|
170
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
171
|
-
B1q35kw: "f1osi826",
|
172
|
-
Gp14am: ["fzybk4o", "fpgykix"],
|
173
|
-
Jwef8y: "f1knas48",
|
174
|
-
Bvxd0ez: "f1m145df",
|
175
|
-
ecr2s2: "fb40n2d"
|
176
|
-
},
|
177
|
-
filledInteractiveSelected: {
|
178
|
-
De3pzq: "f1nfm20t",
|
179
|
-
B0n5ga8: "f16eln5f",
|
180
|
-
s924m2: ["fa2okxs", "fg4zq3l"],
|
181
|
-
B1q35kw: "ff6932p",
|
182
|
-
Gp14am: ["fg4zq3l", "fa2okxs"],
|
183
|
-
Jwef8y: "f1kz6goq"
|
184
|
-
},
|
185
|
-
filledAlternative: {
|
186
|
-
De3pzq: "f1dmdbja",
|
187
|
-
E5pizo: "f1whvlc6",
|
188
|
-
B0n5ga8: "f16gxe2i",
|
189
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
190
|
-
B1q35kw: "f1osi826",
|
191
|
-
Gp14am: ["fzybk4o", "fpgykix"]
|
192
|
-
},
|
193
|
-
filledAlternativeInteractive: {
|
194
|
-
Bceei9c: "f1k6fduh",
|
195
|
-
De3pzq: "f1dmdbja",
|
196
|
-
E5pizo: "f1whvlc6",
|
197
|
-
B0n5ga8: "f16gxe2i",
|
198
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
199
|
-
B1q35kw: "f1osi826",
|
200
|
-
Gp14am: ["fzybk4o", "fpgykix"],
|
201
|
-
Jwef8y: "f1uvynv3",
|
202
|
-
Bvxd0ez: "f1m145df",
|
203
|
-
ecr2s2: "f1yhgkbh"
|
204
|
-
},
|
205
|
-
filledAlternativeInteractiveSelected: {
|
206
|
-
De3pzq: "fjxa0vh",
|
207
|
-
B0n5ga8: "f16eln5f",
|
208
|
-
s924m2: ["fa2okxs", "fg4zq3l"],
|
209
|
-
B1q35kw: "ff6932p",
|
210
|
-
Gp14am: ["fg4zq3l", "fa2okxs"],
|
211
|
-
Jwef8y: "fehi0vp"
|
212
|
-
},
|
213
|
-
outline: {
|
214
|
-
De3pzq: "f1c21dwh",
|
215
|
-
E5pizo: "f1couhl3",
|
216
|
-
B0n5ga8: "ft83z1f",
|
217
|
-
s924m2: ["f1g4150c", "f192dr6e"],
|
218
|
-
B1q35kw: "f1qnawh6",
|
219
|
-
Gp14am: ["f192dr6e", "f1g4150c"]
|
220
|
-
},
|
221
|
-
outlineInteractive: {
|
222
|
-
Bceei9c: "f1k6fduh",
|
223
|
-
De3pzq: "f1c21dwh",
|
224
|
-
E5pizo: "f1couhl3",
|
225
|
-
B0n5ga8: "ft83z1f",
|
226
|
-
s924m2: ["f1g4150c", "f192dr6e"],
|
227
|
-
B1q35kw: "f1qnawh6",
|
228
|
-
Gp14am: ["f192dr6e", "f1g4150c"],
|
229
|
-
Jwef8y: "fjxutwb",
|
230
|
-
Be0v6ae: "f1llr77y",
|
231
|
-
B5kxglz: ["fzk0khw", "fjj8tog"],
|
232
|
-
B3pwyw6: "fb1u8ub",
|
233
|
-
Bymgtzf: ["fjj8tog", "fzk0khw"],
|
234
|
-
ecr2s2: "fophhak",
|
235
|
-
dmfk: "f1uohb70",
|
236
|
-
B4ofi8: ["f1jm7v1n", "f1bus3rq"],
|
237
|
-
jgq6uv: "f1fbu7rr",
|
238
|
-
Baxewws: ["f1bus3rq", "f1jm7v1n"]
|
239
|
-
},
|
240
|
-
outlineInteractiveSelected: {
|
241
|
-
De3pzq: "f1q9pm1r",
|
242
|
-
B0n5ga8: "f16eln5f",
|
243
|
-
s924m2: ["fa2okxs", "fg4zq3l"],
|
244
|
-
B1q35kw: "ff6932p",
|
245
|
-
Gp14am: ["fg4zq3l", "fa2okxs"],
|
246
|
-
Jwef8y: "fg59vm4"
|
247
|
-
},
|
248
|
-
subtle: {
|
249
|
-
De3pzq: "fhovq9v",
|
250
|
-
E5pizo: "f1couhl3",
|
251
|
-
B0n5ga8: "f16gxe2i",
|
252
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
253
|
-
B1q35kw: "f1osi826",
|
254
|
-
Gp14am: ["fzybk4o", "fpgykix"]
|
255
|
-
},
|
256
|
-
subtleInteractive: {
|
257
|
-
Bceei9c: "f1k6fduh",
|
258
|
-
De3pzq: "fhovq9v",
|
259
|
-
E5pizo: "f1couhl3",
|
260
|
-
B0n5ga8: "f16gxe2i",
|
261
|
-
s924m2: ["fpgykix", "fzybk4o"],
|
262
|
-
B1q35kw: "f1osi826",
|
263
|
-
Gp14am: ["fzybk4o", "fpgykix"],
|
264
|
-
Jwef8y: "f1t94bn6",
|
265
|
-
ecr2s2: "f1wfn5kd"
|
266
|
-
},
|
267
|
-
subtleInteractiveSelected: {
|
268
|
-
De3pzq: "fq5gl1p",
|
269
|
-
B0n5ga8: "f16eln5f",
|
270
|
-
s924m2: ["fa2okxs", "fg4zq3l"],
|
271
|
-
B1q35kw: "ff6932p",
|
272
|
-
Gp14am: ["fg4zq3l", "fa2okxs"],
|
273
|
-
Jwef8y: "f1uqaxdt"
|
274
|
-
},
|
275
|
-
highContrastSelected: {
|
276
|
-
ycbfsm: "fkc42ay",
|
277
|
-
Bsw6fvg: "f1rirnrt",
|
278
|
-
Bbusuzp: "f1lkg8j3",
|
279
|
-
xgfqdd: "f1nkj0oa",
|
280
|
-
Bmmdzwq: "fey3rwa",
|
281
|
-
zkpvhj: ["f5jhx11", "fff9uym"],
|
282
|
-
B20bydw: "fm7n0jy",
|
283
|
-
Bwwwggl: ["fff9uym", "f5jhx11"]
|
284
|
-
},
|
285
|
-
highContrastInteractive: {
|
286
|
-
h1vhog: "fpfvv3l",
|
287
|
-
kslmdy: "f1oamsm6",
|
288
|
-
Baaf6ca: "f1il21bs",
|
289
|
-
x9zz3d: "fnn5dk0",
|
290
|
-
Bmmdzwq: "fey3rwa",
|
291
|
-
zkpvhj: ["f5jhx11", "fff9uym"],
|
292
|
-
B20bydw: "fm7n0jy",
|
293
|
-
Bwwwggl: ["fff9uym", "f5jhx11"]
|
294
|
-
},
|
295
|
-
select: {
|
296
|
-
qhf8xq: "f1euv43f",
|
297
|
-
Bhzewxz: "fqclxi7",
|
298
|
-
j35jbq: ["fiv86kb", "f36uhnt"],
|
299
|
-
Bj3rh1h: "f19g0ac"
|
300
|
-
},
|
301
|
-
hiddenCheckbox: {
|
302
|
-
B68tc82: "f1p9o1ba",
|
303
|
-
Bmxbyg5: "f1sil6mw",
|
304
|
-
a9b677: "frkrog8",
|
305
|
-
Bqenvij: "f1mpe4l3",
|
306
|
-
qhf8xq: "f1euv43f",
|
307
|
-
Bh84pgu: "fmf1zke",
|
308
|
-
Bgl5zvf: "f1wch0ki",
|
309
|
-
Huce71: "fz5stix"
|
310
|
-
}
|
311
|
-
}, {
|
312
|
-
d: [".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".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);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".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);}", ".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;}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".f99gebs[data-fui-focus-visible]::after{border-top-width:var(--strokeWidthThick);}", ".f13b0oaq[data-fui-focus-visible]::after{border-right-width:var(--strokeWidthThick);}", ".f8t2bz6[data-fui-focus-visible]::after{border-left-width:var(--strokeWidthThick);}", ".f1jvq617[data-fui-focus-visible]::after{border-bottom-width:var(--strokeWidthThick);}", ".f11unbnk[data-fui-focus-visible]::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".fbd201q[data-fui-focus-visible]::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f12nqxso[data-fui-focus-visible]::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".f1uguk4w[data-fui-focus-visible]::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f3l4wcz[data-fui-focus-visible]::after{top:-var(--strokeWidthThick);}", ".f6j2biq[data-fui-focus-visible]::after{bottom:-var(--strokeWidthThick);}", ".fdzzmfx[data-fui-focus-visible]::after{left:-var(--strokeWidthThick);}", ".fduh8kh[data-fui-focus-visible]::after{right:-var(--strokeWidthThick);}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f125hn41[data-fui-focus-within]:focus-within::after{border-top-width:var(--strokeWidthThick);}", ".fgxkx34[data-fui-focus-within]:focus-within::after{border-right-width:var(--strokeWidthThick);}", ".f1v56tyl[data-fui-focus-within]:focus-within::after{border-left-width:var(--strokeWidthThick);}", ".fdxas6f[data-fui-focus-within]:focus-within::after{border-bottom-width:var(--strokeWidthThick);}", ".fxwickw[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--fui-Card--border-radius);}", ".f1ia5cve[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--fui-Card--border-radius);}", ".f194aguw[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--fui-Card--border-radius);}", ".fqicc6c[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--fui-Card--border-radius);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f4a0pcc[data-fui-focus-within]:focus-within::after{top:-var(--strokeWidthThick);}", ".f11go4w5[data-fui-focus-within]:focus-within::after{bottom:-var(--strokeWidthThick);}", ".f4dzull[data-fui-focus-within]:focus-within::after{left:-var(--strokeWidthThick);}", ".fy687nj[data-fui-focus-within]:focus-within::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);}", ".ffcmwrh>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f6ppoih>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".f1dc9p14>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-right:calc(var(--fui-Card--size) * -1);}", ".fd933vt>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-left:calc(var(--fui-Card--size) * -1);}", ".f18esqgw>.fui-CardHeader:last-of-type,.f18esqgw>.fui-CardFooter:last-of-type{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow: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);}", ".f19chtn8>:not([aria-hidden=\"true\"]).fui-CardPreview:first-of-type{margin-top:calc(var(--fui-Card--size) * -1);}", ".fuvs6re>.fui-Card__floatingAction+.fui-CardPreview{margin-top:calc(var(--fui-Card--size) * -1);}", ".fy4glsf>:not([aria-hidden=\"true\"]).fui-CardPreview:last-of-type{margin-bottom: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);}", ".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);}", ".f1k6fduh{cursor:pointer;}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".f16eln5f::after{border-top-color:var(--colorNeutralStroke1Selected);}", ".fa2okxs::after{border-right-color:var(--colorNeutralStroke1Selected);}", ".fg4zq3l::after{border-left-color:var(--colorNeutralStroke1Selected);}", ".ff6932p::after{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".f1dmdbja{background-color:var(--colorNeutralBackground2);}", ".fjxa0vh{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1euv43f{position:absolute;}", ".fqclxi7{top:4px;}", ".fiv86kb{right:4px;}", ".f36uhnt{left:4px;}", ".f19g0ac{z-index:1;}", ".frkrog8{width:1px;}", ".f1mpe4l3{height:1px;}", ".fmf1zke{clip:rect(0 0 0 0);}", ".f1wch0ki{-webkit-clip-path:inset(50%);clip-path:inset(50%);}", ".fz5stix{white-space:nowrap;}"],
|
313
|
-
f: [".ftqa4ok:focus{outline-style:none;}"],
|
314
|
-
i: [".f2hkw1w:focus-visible{outline-style:none;}"],
|
315
|
-
h: [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".f1m145df:hover{box-shadow:var(--shadow8);}", ".f1kz6goq:hover{background-color:var(--colorNeutralBackground1Selected);}", ".f1uvynv3:hover{background-color:var(--colorNeutralBackground2Hover);}", ".fehi0vp:hover{background-color:var(--colorNeutralBackground2Selected);}", ".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);}", ".fg59vm4:hover{background-color:var(--colorTransparentBackgroundSelected);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
316
|
-
a: [".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);}"],
|
317
|
-
m: [["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
|
318
|
-
m: "(forced-colors: active)"
|
319
|
-
}], ["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
|
320
|
-
m: "(forced-colors: active)"
|
321
|
-
}], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
|
322
|
-
m: "(forced-colors: active)"
|
323
|
-
}], ["@media (forced-colors: active){.f1nkj0oa .fui-CardPreview,.f1nkj0oa .fui-CardFooter{forced-color-adjust:auto;}}", {
|
324
|
-
m: "(forced-colors: active)"
|
325
|
-
}], ["@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}", {
|
326
|
-
m: "(forced-colors: active)"
|
327
|
-
}], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
|
328
|
-
m: "(forced-colors: active)"
|
329
|
-
}], ["@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}", {
|
330
|
-
m: "(forced-colors: active)"
|
331
|
-
}], ["@media (forced-colors: active){.fff9uym::after{border-left-color:Highlight;}.f5jhx11::after{border-right-color:Highlight;}}", {
|
332
|
-
m: "(forced-colors: active)"
|
333
|
-
}], ["@media (forced-colors: active){.fpfvv3l:hover,.fpfvv3l :active{forced-color-adjust:none;}}", {
|
334
|
-
m: "(forced-colors: active)"
|
335
|
-
}], ["@media (forced-colors: active){.f1oamsm6:hover,.f1oamsm6 :active{background-color:Highlight;}}", {
|
336
|
-
m: "(forced-colors: active)"
|
337
|
-
}], ["@media (forced-colors: active){.f1il21bs:hover,.f1il21bs :active{color:HighlightText;}}", {
|
338
|
-
m: "(forced-colors: active)"
|
339
|
-
}], ["@media (forced-colors: active){.fnn5dk0:hover .fui-CardPreview,.fnn5dk0 :active .fui-CardPreview,.fnn5dk0:hover .fui-CardFooter,.fnn5dk0 :active .fui-CardFooter{forced-color-adjust:auto;}}", {
|
340
|
-
m: "(forced-colors: active)"
|
341
|
-
}], ["@media (forced-colors: active){.fey3rwa::after{border-top-color:Highlight;}}", {
|
342
|
-
m: "(forced-colors: active)"
|
343
|
-
}], ["@media (forced-colors: active){.f5jhx11::after{border-right-color:Highlight;}.fff9uym::after{border-left-color:Highlight;}}", {
|
344
|
-
m: "(forced-colors: active)"
|
345
|
-
}], ["@media (forced-colors: active){.fm7n0jy::after{border-bottom-color:Highlight;}}", {
|
346
|
-
m: "(forced-colors: active)"
|
347
|
-
}], ["@media (forced-colors: active){.fff9uym::after{border-left-color:Highlight;}.f5jhx11::after{border-right-color:Highlight;}}", {
|
348
|
-
m: "(forced-colors: active)"
|
349
|
-
}]]
|
350
|
-
});
|
351
|
-
/**
|
352
|
-
* Apply styling to the Card slots based on the state.
|
353
|
-
*/
|
354
|
-
export const useCardStyles_unstable = state => {
|
355
|
-
const styles = useStyles();
|
356
|
-
const orientationMap = {
|
357
|
-
horizontal: styles.orientationHorizontal,
|
358
|
-
vertical: styles.orientationVertical
|
359
|
-
};
|
360
|
-
const sizeMap = {
|
361
|
-
small: styles.sizeSmall,
|
362
|
-
medium: styles.sizeMedium,
|
363
|
-
large: styles.sizeLarge
|
364
|
-
};
|
365
|
-
const appearanceMap = {
|
366
|
-
filled: styles.filled,
|
367
|
-
'filled-alternative': styles.filledAlternative,
|
368
|
-
outline: styles.outline,
|
369
|
-
subtle: styles.subtle
|
370
|
-
};
|
371
|
-
const selectedMap = {
|
372
|
-
filled: styles.filledInteractiveSelected,
|
373
|
-
'filled-alternative': styles.filledAlternativeInteractiveSelected,
|
374
|
-
outline: styles.outlineInteractiveSelected,
|
375
|
-
subtle: styles.subtleInteractiveSelected
|
376
|
-
};
|
377
|
-
const interactiveMap = {
|
378
|
-
filled: styles.filledInteractive,
|
379
|
-
'filled-alternative': styles.filledAlternativeInteractive,
|
380
|
-
outline: styles.outlineInteractive,
|
381
|
-
subtle: styles.subtleInteractive
|
382
|
-
};
|
383
|
-
const isSelectableOrInteractive = state.interactive || state.selectable;
|
384
|
-
state.root.className = mergeClasses(cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], state.selectFocused && styles.selectableFocused,
|
385
|
-
// High contrast overrides
|
386
|
-
state.selected && styles.highContrastSelected, isSelectableOrInteractive && styles.highContrastInteractive, state.root.className);
|
387
|
-
if (state.floatingAction) {
|
388
|
-
state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
|
389
|
-
}
|
390
|
-
if (state.checkbox) {
|
391
|
-
state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
|
392
|
-
}
|
393
|
-
return state;
|
394
|
-
};
|
395
|
-
//# sourceMappingURL=useCardStyles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","tokens","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","useStyles","B68tc82","Bmxbyg5","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","z8tnut","z189sj","Byoj8tv","uwmqm3","i8kkvl","Belr9w4","mc9l5x","qhf8xq","B7ck84d","sj55zd","E3zdtr","bn5sak","Eqx8gd","B1piin3","By385i5","Bsft5z2","B80jsxd","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B2jhnfs","wiictr","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bjwuhne","Ghsupd","Bule8hv","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","B2j2mmj","wigs8","pbfy6t","B0v4ure","ghq09","B24cy0v","Bwckmig","Bvwlmkc","Bbgo44z","Bil7v7r","skfxo0","jo1ztg","Ba3ybja","az1dzo","vppk2z","B6352mv","nr063g","Blmvk6g","Bsiemmq","B98u21t","B2pnrqr","Bhhzhcn","Bec0n69","B29w5g4","orientationHorizontal","Beiy3e4","Bt984gj","Bnoktp0","Idhjb2","ihgzqh","Bgp6ld0","Bbucpmy","orientationVertical","Bt4kzjz","B1ou843","y1433z","B7egwnw","B49b4xf","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","ycbfsm","Bsw6fvg","Bbusuzp","xgfqdd","Bmmdzwq","zkpvhj","B20bydw","Bwwwggl","highContrastInteractive","h1vhog","kslmdy","Baaf6ca","x9zz3d","select","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","d","f","i","h","a","m","useCardStyles_unstable","state","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","interactive","selectable","className","orientation","size","appearance","selected","selectFocused"],"sources":["../../../src/components/Card/useCardStyles.ts"],"sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n};\n\nconst useStyles = makeStyles({\n root: {\n ...shorthands.overflow('hidden'),\n ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n ...shorthands.padding(`var(${cardCSSVars.cardSizeVar})`),\n ...shorthands.gap(`var(${cardCSSVars.cardSizeVar})`),\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n ...shorthands.borderRadius(`var(${cardCSSVars.cardBorderRadiusVar})`),\n },\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: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: 1,\n },\n\n hiddenCheckbox: {\n ...shorthands.overflow('hidden'),\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n const styles = useStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = state.interactive || state.selectable;\n\n state.root.className = mergeClasses(\n cardClassNames.root,\n styles.root,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n state.selectFocused && styles.selectableFocused,\n // High contrast overrides\n state.selected && styles.highContrastSelected,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.root.className,\n );\n\n if (state.floatingAction) {\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"mappings":"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"}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import { useCardFooter_unstable } from './useCardFooter';
|
3
|
-
import { renderCardFooter_unstable } from './renderCardFooter';
|
4
|
-
import { useCardFooterStyles_unstable } from './useCardFooterStyles';
|
5
|
-
/**
|
6
|
-
* Component to render Button actions in a Card component.
|
7
|
-
*/
|
8
|
-
export const CardFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
|
9
|
-
const state = useCardFooter_unstable(props, ref);
|
10
|
-
useCardFooterStyles_unstable(state);
|
11
|
-
return renderCardFooter_unstable(state);
|
12
|
-
});
|
13
|
-
CardFooter.displayName = 'CardFooter';
|
14
|
-
//# sourceMappingURL=CardFooter.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","CardFooter","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/CardFooter/CardFooter.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,4BAA4B,QAAQ;AAI7C;;;AAGA,OAAO,MAAMC,UAAA,gBAAmDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC/F,MAAMC,KAAA,GAAQP,sBAAA,CAAuBK,KAAA,EAAOC,GAAA;EAE5CJ,4BAAA,CAA6BK,KAAA;EAC7B,OAAON,yBAAA,CAA0BM,KAAA;AACnC;AAEAJ,UAAA,CAAWK,WAAW,GAAG"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/CardFooter/CardFooter.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n /**\n * Root element of the component.\n */\n root: Slot<'div'>;\n\n /**\n * Container that renders on the far end of the footer, used for action buttons.\n */\n action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"],"mappings":"AAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":[],"sources":["../../../src/components/CardFooter/index.ts"],"sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
|