@fluentui/react-card 9.7.0 → 9.7.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.md +15 -2
- package/lib/components/Card/useCardStyles.styles.js +0 -2
- package/lib/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib/components/Card/useCardStyles.styles.raw.js +0 -1
- package/lib/components/Card/useCardStyles.styles.raw.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.styles.js +0 -2
- package/lib/components/CardFooter/useCardFooterStyles.styles.js.map +1 -1
- package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js +0 -1
- package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js +0 -2
- package/lib/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js +0 -1
- package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.styles.js +0 -2
- package/lib/components/CardPreview/useCardPreviewStyles.styles.js.map +1 -1
- package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js +0 -1
- package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.js +0 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/Card/useCardStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.js.map +1 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js +0 -1
- package/lib-commonjs/components/CardPreview/useCardPreviewStyles.styles.raw.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-card
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 24 Jun 2026 11:03:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.7.1)
|
|
8
|
+
|
|
9
|
+
Wed, 24 Jun 2026 11:03:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.7.0..@fluentui/react-card_v9.7.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
17
|
+
- Bump @fluentui/react-text to v9.6.18 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
|
|
19
|
+
|
|
7
20
|
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.7.0)
|
|
8
21
|
|
|
9
|
-
Tue, 26 May 2026 09:
|
|
22
|
+
Tue, 26 May 2026 09:39:47 GMT
|
|
10
23
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.6.1..@fluentui/react-card_v9.7.0)
|
|
11
24
|
|
|
12
25
|
### Minor changes
|
|
@@ -444,8 +444,6 @@ const useCardStyles = /*#__PURE__*/__styles({
|
|
|
444
444
|
* Apply styling to the Card slots based on the state.
|
|
445
445
|
*/
|
|
446
446
|
export const useCardStyles_unstable = state => {
|
|
447
|
-
'use no memo';
|
|
448
|
-
|
|
449
447
|
const resetStyles = useCardResetStyles();
|
|
450
448
|
const styles = useCardStyles();
|
|
451
449
|
const orientationMap = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\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 ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n },\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0\n }\n});\nconst disabledStyles = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n};\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus'\n })\n },\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within'\n }),\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\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 // 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 // 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\"]).${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 // 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 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 interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor'\n }\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected\n }\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed\n }\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected\n }\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n }\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n }\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected\n }\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none'\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\n }\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected\n }\n },\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n }\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent\n },\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap'\n },\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles\n }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical\n };\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge\n };\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle\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 const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n const focusedClassName = React.useMemo(()=>{\n if (state.disabled) {\n return '';\n }\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n return '';\n }\n return styles.focused;\n }, [\n state.disabled,\n state.selectFocused,\n state.selectable,\n styles.focused,\n styles.selectableFocused\n ]);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n }\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\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 ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n },\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0\n }\n});\nconst disabledStyles = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n};\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus'\n })\n },\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within'\n }),\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\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 // 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 // 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\"]).${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 // 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 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 interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor'\n }\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected\n }\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed\n }\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected\n }\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n }\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n }\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected\n }\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none'\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\n }\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected\n }\n },\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n }\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent\n },\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap'\n },\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles\n }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical\n };\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge\n };\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle\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 const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n const focusedClassName = React.useMemo(()=>{\n if (state.disabled) {\n return '';\n }\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n return '';\n }\n return styles.focused;\n }, [\n state.disabled,\n state.selectFocused,\n state.selectable,\n styles.focused,\n styles.selectableFocused\n ]);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n }\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -344,7 +344,6 @@ const useCardStyles = makeStyles({
|
|
|
344
344
|
/**
|
|
345
345
|
* Apply styling to the Card slots based on the state.
|
|
346
346
|
*/ export const useCardStyles_unstable = (state)=>{
|
|
347
|
-
'use no memo';
|
|
348
347
|
const resetStyles = useCardResetStyles();
|
|
349
348
|
const styles = useCardStyles();
|
|
350
349
|
const orientationMap = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst disabledStyles: GriffelStyle = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`,\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n};\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles,\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n const focusedClassName = React.useMemo(() => {\n if (state.disabled) {\n return '';\n }\n\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.disabled && styles.disabled,\n state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n state.root.className,\n );\n\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AACvF,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,cAAc,QAAQ,uBAAuB;AAEtD,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,SAASC,qBAAqB,QAAQ,6CAA6C;AACnF,SAASC,oBAAoB,QAAQ,2CAA2C;AAChF,SAASC,oBAAoB,QAAQ,2CAA2C;AAGhF;;CAEC,GACD,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;IACNC,gBAAgB;IAChBC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzBC,aAAa;IACbC,qBAAqB;AACvB,EAAE;AAEF,MAAMC,oBAAuD;IAC3DC,eAAe,CAAC,IAAI,EAAEJ,YAAYE,mBAAmB,CAAC,CAAC,CAAC;IACxDG,cAAcf,OAAOgB,gBAAgB;IACrCC,eAAe;AACjB;AAEA,MAAMC,qBAAqBnB,gBAAgB;IACzCoB,UAAU;IACVC,cAAc,CAAC,IAAI,EAAEV,YAAYE,mBAAmB,CAAC,CAAC,CAAC;IACvDS,SAAS,CAAC,IAAI,EAAEX,YAAYC,WAAW,CAAC,CAAC,CAAC;IAC1CW,KAAK,CAAC,IAAI,EAAEZ,YAAYC,WAAW,CAAC,CAAC,CAAC;IAEtCY,SAAS;IACTC,UAAU;IACVC,WAAW;IACXC,OAAO1B,OAAO2B,uBAAuB;IAErC,sFAAsF;IACtF,WAAW;QACTH,UAAU;QACVI,KAAK;QACLC,MAAM;QACNC,OAAO;QACPC,QAAQ;QACRC,SAAS;QACTC,eAAe;QAEf,GAAGrC,WAAWsC,WAAW,CAAC,QAAQ;QAClC,GAAGtC,WAAWuC,WAAW,CAACnC,OAAOoC,eAAe,CAAC;QACjDhB,cAAc,CAAC,IAAI,EAAEV,YAAYE,mBAAmB,CAAC,CAAC,CAAC;IACzD;IAEA,qDAAqD;IACrD,CAAC,CAAC,GAAG,EAAER,qBAAqBG,IAAI,CAAC,KAAK,EAAEF,qBAAqBE,IAAI,EAAE,CAAC,EAAE;QACpE8B,YAAY;IACd;AACF;AAEA,MAAMC,iBAA+B;IACnCC,QAAQ;IACRC,YAAY;IACZd,OAAO1B,OAAOyC,8BAA8B;IAC5CC,iBAAiB1C,OAAO2C,8BAA8B;IACtDC,WAAW5C,OAAO6C,OAAO;IACzB,GAAGjD,WAAWkD,WAAW,CAAC9C,OAAO+C,0BAA0B,CAAC;IAE5D,YAAY;QACVf,SAAS;QACTR,UAAU;QACVwB,OAAO;QACPC,QAAQ,CAAC,KAAK,EAAEjD,OAAOkD,aAAa,CAAC,KAAK,CAAC;IAC7C;IAEA,WAAW;QACT,GAAGtD,WAAWkD,WAAW,CAAC9C,OAAO+C,0BAA0B,CAAC;IAC9D;AACF;AAEA,MAAMI,gBAAgBtD,WAAW;IAC/BuD,SAAS;QACP,GAAGlD,wBAAwB;YACzBmD,OAAOxC;YACPyC,UAAU;QACZ,EAAE;IACJ;IAEAC,mBAAmBrD,wBAAwB;QACzCmD,OAAOxC;QACPyC,UAAU;IACZ;IAEAE,uBAAuB;QACrBC,eAAe;QACfC,YAAY;QAEZ,iFAAiF;QACjF,CAAC,CAAC,GAAG,EAAEvD,sBAAsBI,IAAI,EAAE,CAAC,EAAE;YACpCoD,WAAW,CAAC,SAAS,EAAEjD,YAAYC,WAAW,CAAC,OAAO,CAAC;YACvDiD,cAAc,CAAC,SAAS,EAAElD,YAAYC,WAAW,CAAC,OAAO,CAAC;QAC5D;QACA,iHAAiH;QACjH,8EAA8E;QAC9E,4GAA4G;QAC5G,CAAC,CAAC,6BAA6B,EAAER,sBAAsBI,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE;YAC5EsD,YAAY,CAAC,SAAS,EAAEnD,YAAYC,WAAW,CAAC,OAAO,CAAC;QAC1D;QACA,iHAAiH;QACjH,6EAA6E;QAC7E,6GAA6G;QAC7G,CAAC,CAAC,6BAA6B,EAAER,sBAAsBI,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;YAC3EuD,aAAa,CAAC,SAAS,EAAEpD,YAAYC,WAAW,CAAC,OAAO,CAAC;QAC3D;QAEA,iGAAiG;QACjG,CAAC,CAAC,GAAG,EAAEP,qBAAqBG,IAAI,CAAC,kBAAkB,EAAEF,qBAAqBE,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;YAC9FwD,UAAU;QACZ;IACF;IACAC,qBAAqB;QACnBP,eAAe;QAEf,gFAAgF;QAChF,CAAC,CAAC,GAAG,EAAEtD,sBAAsBI,IAAI,EAAE,CAAC,EAAE;YACpCsD,YAAY,CAAC,SAAS,EAAEnD,YAAYC,WAAW,CAAC,OAAO,CAAC;YACxDmD,aAAa,CAAC,SAAS,EAAEpD,YAAYC,WAAW,CAAC,OAAO,CAAC;QAC3D;QAEA,iHAAiH;QACjH,8EAA8E;QAC9E,yGAAyG;QACzG,CAAC,CAAC,6BAA6B,EAAER,sBAAsBI,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE;YAC5EoD,WAAW,CAAC,SAAS,EAAEjD,YAAYC,WAAW,CAAC,OAAO,CAAC;QACzD;QACA,CAAC,CAAC,GAAG,EAAEL,eAAeE,cAAc,CAAC,IAAI,EAAEL,sBAAsBI,IAAI,EAAE,CAAC,EAAE;YACxEoD,WAAW,CAAC,SAAS,EAAEjD,YAAYC,WAAW,CAAC,OAAO,CAAC;QACzD;QAEA,iHAAiH;QACjH,8EAA8E;QAC9E,4GAA4G;QAC5G,CAAC,CAAC,6BAA6B,EAAER,sBAAsBI,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE;YAC3EqD,cAAc,CAAC,SAAS,EAAElD,YAAYC,WAAW,CAAC,OAAO,CAAC;QAC5D;IACF;IAEAsD,WAAW;QACT,CAACvD,YAAYC,WAAW,CAAC,EAAE;QAC3B,CAACD,YAAYE,mBAAmB,CAAC,EAAEZ,OAAOkE,iBAAiB;IAC7D;IACAC,YAAY;QACV,CAACzD,YAAYC,WAAW,CAAC,EAAE;QAC3B,CAACD,YAAYE,mBAAmB,CAAC,EAAEZ,OAAOoE,kBAAkB;IAC9D;IACAC,WAAW;QACT,CAAC3D,YAAYC,WAAW,CAAC,EAAE;QAC3B,CAACD,YAAYE,mBAAmB,CAAC,EAAEZ,OAAOsE,iBAAiB;IAC7D;IAEAC,aAAa;QACX,CAAC,CAAC,GAAG,EAAEtE,eAAeM,IAAI,EAAE,CAAC,EAAE;YAC7BmB,OAAO;QACT;IACF;IAEA8C,QAAQ;QACN9B,iBAAiB1C,OAAOyE,uBAAuB;QAC/C7B,WAAW5C,OAAO0E,OAAO;QAEzB,WAAW;YACT,GAAG9E,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;IACF;IACAC,mBAAmB;QACjBrC,QAAQ;QACRG,iBAAiB1C,OAAOyE,uBAAuB;QAC/C7B,WAAW5C,OAAO0E,OAAO;QAEzB,WAAW;YACT,GAAG9E,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;QAEA,UAAU;YACRjD,OAAO1B,OAAO6E,4BAA4B;YAC1CnC,iBAAiB1C,OAAO8E,4BAA4B;YACpDlC,WAAW5C,OAAO+E,OAAO;QAC3B;QACA,WAAW;YACTrC,iBAAiB1C,OAAOgF,8BAA8B;QACxD;IACF;IACAC,2BAA2B;QACzBvC,iBAAiB1C,OAAOkF,+BAA+B;QAEvD,WAAW;YACT,GAAGtF,WAAWkD,WAAW,CAAC9C,OAAOmF,2BAA2B,CAAC;QAC/D;QAEA,UAAU;YACRzD,OAAO1B,OAAOoF,+BAA+B;YAC7C1C,iBAAiB1C,OAAOkF,+BAA+B;QACzD;IACF;IAEAG,mBAAmB;QACjB3C,iBAAiB1C,OAAOsF,uBAAuB;QAC/C1C,WAAW5C,OAAO0E,OAAO;QAEzB,WAAW;YACT,GAAG9E,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;IACF;IACAY,8BAA8B;QAC5BhD,QAAQ;QACRG,iBAAiB1C,OAAOsF,uBAAuB;QAC/C1C,WAAW5C,OAAO0E,OAAO;QAEzB,WAAW;YACT,GAAG9E,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;QAEA,UAAU;YACRjD,OAAO1B,OAAOwF,4BAA4B;YAC1C9C,iBAAiB1C,OAAOyF,4BAA4B;YACpD7C,WAAW5C,OAAO+E,OAAO;QAC3B;QACA,WAAW;YACTrC,iBAAiB1C,OAAO0F,8BAA8B;QACxD;IACF;IACAC,sCAAsC;QACpCjD,iBAAiB1C,OAAO4F,+BAA+B;QAEvD,WAAW;YACT,GAAGhG,WAAWkD,WAAW,CAAC9C,OAAOmF,2BAA2B,CAAC;QAC/D;QAEA,UAAU;YACRzD,OAAO1B,OAAO6F,+BAA+B;YAC7CnD,iBAAiB1C,OAAO4F,+BAA+B;QACzD;IACF;IAEAE,SAAS;QACPpD,iBAAiB1C,OAAO+F,0BAA0B;QAClDnD,WAAW;QAEX,WAAW;YACT,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAOgG,mBAAmB,CAAC;QACvD;IACF;IACAC,oBAAoB;QAClB1D,QAAQ;QACRG,iBAAiB1C,OAAO+F,0BAA0B;QAClDnD,WAAW;QAEX,WAAW;YACT,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAOgG,mBAAmB,CAAC;QACvD;QAEA,UAAU;YACRtE,OAAO1B,OAAO6E,4BAA4B;YAC1CnC,iBAAiB1C,OAAOkG,+BAA+B;YAEvD,WAAW;gBACT,GAAGtG,WAAWkD,WAAW,CAAC9C,OAAOmG,wBAAwB,CAAC;YAC5D;QACF;QACA,WAAW;YACTzD,iBAAiB1C,OAAOoG,iCAAiC;YAEzD,WAAW;gBACT,GAAGxG,WAAWkD,WAAW,CAAC9C,OAAOqG,0BAA0B,CAAC;YAC9D;QACF;IACF;IACAC,4BAA4B;QAC1B5D,iBAAiB1C,OAAOuG,kCAAkC;QAE1D,WAAW;YACT,GAAG3G,WAAWkD,WAAW,CAAC9C,OAAOmF,2BAA2B,CAAC;QAC/D;QAEA,UAAU;YACRzD,OAAO1B,OAAOoF,+BAA+B;YAC7C1C,iBAAiB1C,OAAOuG,kCAAkC;QAC5D;IACF;IACAC,iBAAiB;QACf9D,iBAAiB1C,OAAO+F,0BAA0B;QAClDnD,WAAW;QACX,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAO+C,0BAA0B,CAAC;QAE5D,qBAAqB;YACnBL,iBAAiB1C,OAAO+F,0BAA0B;YAClDnD,WAAW;QACb;QAEA,WAAW;YACT,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAO+C,0BAA0B,CAAC;QAC9D;IACF;IAEA0D,QAAQ;QACN/D,iBAAiB1C,OAAO0G,qBAAqB;QAC7C9D,WAAW;QAEX,WAAW;YACT,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;IACF;IACAgC,mBAAmB;QACjBpE,QAAQ;QACRG,iBAAiB1C,OAAO0G,qBAAqB;QAC7C9D,WAAW;QAEX,WAAW;YACT,GAAGhD,WAAWkD,WAAW,CAAC9C,OAAO2E,sBAAsB,CAAC;QAC1D;QAEA,UAAU;YACRjD,OAAO1B,OAAO6E,4BAA4B;YAC1CnC,iBAAiB1C,OAAO4G,0BAA0B;QACpD;QACA,WAAW;YACTlE,iBAAiB1C,OAAO6G,4BAA4B;QACtD;IACF;IACAC,2BAA2B;QACzBpE,iBAAiB1C,OAAO+G,6BAA6B;QAErD,WAAW;YACT,GAAGnH,WAAWkD,WAAW,CAAC9C,OAAOmF,2BAA2B,CAAC;QAC/D;QAEA,UAAU;YACRzD,OAAO1B,OAAOoF,+BAA+B;YAC7C1C,iBAAiB1C,OAAO+G,6BAA6B;QACvD;IACF;IAEAC,sBAAsB;QACpB,kCAAkC;YAChCC,mBAAmB;YACnBvE,iBAAiB;YACjBhB,OAAO;YAEP,CAAC,CAAC,GAAG,EAAEvB,sBAAsBI,IAAI,CAAC,KAAK,EAAEF,qBAAqBE,IAAI,EAAE,CAAC,EAAE;gBACrE0G,mBAAmB;YACrB;YAEA,WAAW;gBACT,GAAGrH,WAAWkD,WAAW,CAAC,YAAY;YACxC;QACF;IACF;IAEAoE,yBAAyB;QACvB,kCAAkC;YAChC,mBAAmB;gBACjBD,mBAAmB;gBACnBvE,iBAAiB;gBACjBhB,OAAO;gBAEP,CAAC,CAAC,GAAG,EAAEvB,sBAAsBI,IAAI,CAAC,KAAK,EAAEF,qBAAqBE,IAAI,EAAE,CAAC,EAAE;oBACrE0G,mBAAmB;gBACrB;YACF;YAEA,WAAW;gBACT,GAAGrH,WAAWkD,WAAW,CAAC,YAAY;YACxC;QACF;IACF;IAEAqE,QAAQ;QACN3F,UAAU;QACVI,KAAK;QACLE,OAAO;QACPmB,QAAQjD,OAAOkD,aAAa;IAC9B;IAEAkE,gBAAgB;QACdjG,UAAU;QACVkG,OAAO;QACPC,QAAQ;QACR9F,UAAU;QACV+F,MAAM;QACNC,UAAU;QACVC,YAAY;IACd;IAEAC,UAAU;QACR,GAAGpF,cAAc;QACjB,qBAAqBA;IACvB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMqF,yBAAyB,CAACC;IACrC;IAEA,MAAMC,cAAc3G;IACpB,MAAM4G,SAAS3E;IAEf,MAAM4E,iBAAiB;QACrBC,YAAYF,OAAOtE,qBAAqB;QACxCyE,UAAUH,OAAO9D,mBAAmB;IACtC;IAEA,MAAMkE,UAAU;QACdC,OAAOL,OAAO7D,SAAS;QACvBmE,QAAQN,OAAO3D,UAAU;QACzBkE,OAAOP,OAAOzD,SAAS;IACzB;IAEA,MAAMiE,gBAAgB;QACpB9D,QAAQsD,OAAOtD,MAAM;QACrB,sBAAsBsD,OAAOzC,iBAAiB;QAC9CS,SAASgC,OAAOhC,OAAO;QACvBW,QAAQqB,OAAOrB,MAAM;IACvB;IAEA,MAAM8B,cAAc;QAClB/D,QAAQsD,OAAO7C,yBAAyB;QACxC,sBAAsB6C,OAAOnC,oCAAoC;QACjEG,SAASgC,OAAOxB,0BAA0B;QAC1CG,QAAQqB,OAAOhB,yBAAyB;IAC1C;IACA,MAAM0B,iBAAiB;QACrBhE,QAAQsD,OAAOlD,iBAAiB;QAChC,sBAAsBkD,OAAOvC,4BAA4B;QACzDO,SAASgC,OAAO7B,kBAAkB;QAClCQ,QAAQqB,OAAOnB,iBAAiB;IAClC;IAEA,MAAM8B,4BAA4B,CAACb,MAAMF,QAAQ,IAAKE,CAAAA,MAAMrD,WAAW,IAAIqD,MAAMc,UAAU,AAAD;IAE1F,MAAMC,mBAAmBhJ,MAAMiJ,OAAO,CAAC;QACrC,IAAIhB,MAAMF,QAAQ,EAAE;YAClB,OAAO;QACT;QAEA,IAAIE,MAAMc,UAAU,EAAE;YACpB,IAAId,MAAMiB,aAAa,EAAE;gBACvB,OAAOf,OAAOvE,iBAAiB;YACjC;YAEA,OAAO;QACT;QAEA,OAAOuE,OAAO1E,OAAO;IACvB,GAAG;QAACwE,MAAMF,QAAQ;QAAEE,MAAMiB,aAAa;QAAEjB,MAAMc,UAAU;QAAEZ,OAAO1E,OAAO;QAAE0E,OAAOvE,iBAAiB;KAAC;IAEpG,oDAAoD;IACpDqE,MAAMrH,IAAI,CAACuI,SAAS,GAAGhJ,aACrBQ,eAAeC,IAAI,EACnBsH,aACAE,cAAc,CAACH,MAAMmB,WAAW,CAAC,EACjCb,OAAO,CAACN,MAAMoB,IAAI,CAAC,EACnBV,aAAa,CAACV,MAAMqB,UAAU,CAAC,EAC/BR,6BAA6BX,OAAOvD,WAAW,EAC/CkE,6BAA6BD,cAAc,CAACZ,MAAMqB,UAAU,CAAC,EAC7DrB,MAAMsB,QAAQ,IAAIX,WAAW,CAACX,MAAMqB,UAAU,CAAC,EAC/CN,kBACAF,6BAA6BX,OAAOZ,uBAAuB,EAC3DU,MAAMsB,QAAQ,IAAIpB,OAAOd,oBAAoB,EAC7CY,MAAMF,QAAQ,IAAII,OAAOJ,QAAQ,EACjCE,MAAMF,QAAQ,IAAIE,MAAMqB,UAAU,KAAK,aAAanB,OAAOtB,eAAe,EAC1EoB,MAAMrH,IAAI,CAACuI,SAAS;IAGtB,IAAIlB,MAAMpH,cAAc,EAAE;QACxB,oDAAoD;QACpDoH,MAAMpH,cAAc,CAACsI,SAAS,GAAGhJ,aAC/BQ,eAAeE,cAAc,EAC7BsH,OAAOX,MAAM,EACbS,MAAMpH,cAAc,CAACsI,SAAS;IAElC;IAEA,IAAIlB,MAAMnH,QAAQ,EAAE;QAClB,oDAAoD;QACpDmH,MAAMnH,QAAQ,CAACqI,SAAS,GAAGhJ,aAAaQ,eAAeG,QAAQ,EAAEqH,OAAOV,cAAc,EAAEQ,MAAMnH,QAAQ,CAACqI,SAAS;IAClH;IAEA,OAAOlB;AACT,EAAE"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst disabledStyles: GriffelStyle = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`,\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n};\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles,\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 resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n const focusedClassName = React.useMemo(() => {\n if (state.disabled) {\n return '';\n }\n\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.disabled && styles.disabled,\n state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n state.root.className,\n );\n\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
|
|
@@ -45,8 +45,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
45
45
|
* Apply styling to the CardFooter slots based on the state.
|
|
46
46
|
*/
|
|
47
47
|
export const useCardFooterStyles_unstable = state => {
|
|
48
|
-
'use no memo';
|
|
49
|
-
|
|
50
48
|
const styles = useStyles();
|
|
51
49
|
// eslint-disable-next-line react-hooks/immutability
|
|
52
50
|
state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,MAAA;IAAAO,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAkBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACrD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1B;EACAiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;EACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;IACd;IACAkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,GAAGxB,YAAY,CAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;EAC7G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -28,7 +28,6 @@ const useStyles = makeStyles({
|
|
|
28
28
|
/**
|
|
29
29
|
* Apply styling to the CardFooter slots based on the state.
|
|
30
30
|
*/ export const useCardFooterStyles_unstable = (state)=>{
|
|
31
|
-
'use no memo';
|
|
32
31
|
const styles = useStyles();
|
|
33
32
|
// eslint-disable-next-line react-hooks/immutability
|
|
34
33
|
state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC;IAC3C,MAAMC,SAASV;IACf,oDAAoD;IACpDS,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChB,oDAAoD;QACpDU,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -96,8 +96,6 @@ const useStylesFlex = /*#__PURE__*/__styles({
|
|
|
96
96
|
* Apply styling to the CardHeader slots based on the state.
|
|
97
97
|
*/
|
|
98
98
|
export const useCardHeaderStyles_unstable = state => {
|
|
99
|
-
'use no memo';
|
|
100
|
-
|
|
101
99
|
const styles = useStyles();
|
|
102
100
|
const stylesGrid = useStylesGrid();
|
|
103
101
|
const stylesFlex = useStylesFlex();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n const getSlotStyles = (slotName)=>{\n var _state_slotName;\n return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -78,7 +78,6 @@ const useStylesFlex = makeStyles({
|
|
|
78
78
|
/**
|
|
79
79
|
* Apply styling to the CardHeader slots based on the state.
|
|
80
80
|
*/ export const useCardHeaderStyles_unstable = (state)=>{
|
|
81
|
-
'use no memo';
|
|
82
81
|
const styles = useStyles();
|
|
83
82
|
const stylesGrid = useStylesGrid();
|
|
84
83
|
const stylesFlex = useStylesFlex();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\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 const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n return mergeClasses(\n cardHeaderClassNames[slotName],\n styles[slotName],\n boxModelStyles[slotName],\n state[slotName]?.className,\n );\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE;;CAEC,GACD,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,oBAAoB;IAC/BC,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,WAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,WAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,gBAAgBnB,WAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,gBAAgBvB,WAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAEA;;CAEC,GACD,OAAO,MAAMiB,+BAA+B,CAACC;IAC3C,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,OAAOzB,aACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,GACxBN,kBAAAA,KAAK,CAACM,SAAS,cAAfN,sCAAAA,gBAAiBO,SAAS;IAE9B;IAEA,oDAAoD;IACpDP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACf,oDAAoD;QACpDqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChB,oDAAoD;QACpDoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrB,oDAAoD;QACpDmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChB,oDAAoD;QACpDkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -29,8 +29,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
29
29
|
* Apply styling to the CardPreview slots based on the state.
|
|
30
30
|
*/
|
|
31
31
|
export const useCardPreviewStyles_unstable = state => {
|
|
32
|
-
'use no memo';
|
|
33
|
-
|
|
34
32
|
const styles = useStyles();
|
|
35
33
|
// eslint-disable-next-line react-hooks/immutability
|
|
36
34
|
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAG;EACrCC,IAAI,EAAE,iBAAiB;EACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAL,IAAA;IAAAE,MAAA;IAAAI,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAgBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACb,IAAI,CAACe,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;EAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;IACZ;IACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtG;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -26,7 +26,6 @@ const useStyles = makeStyles({
|
|
|
26
26
|
/**
|
|
27
27
|
* Apply styling to the CardPreview slots based on the state.
|
|
28
28
|
*/ export const useCardPreviewStyles_unstable = (state)=>{
|
|
29
|
-
'use no memo';
|
|
30
29
|
const styles = useStyles();
|
|
31
30
|
// eslint-disable-next-line react-hooks/immutability
|
|
32
31
|
state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D;;CAEC,GACD,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMI,gCAAgC,CAACC;IAC5C,MAAMC,SAAST;IACf,oDAAoD;IACpDQ,MAAMV,IAAI,CAACY,SAAS,GAAGd,aAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACd,oDAAoD;QACpDS,MAAMT,IAAI,CAACW,SAAS,GAAGd,aAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\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 ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n },\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0\n }\n});\nconst disabledStyles = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n};\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus'\n })\n },\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within'\n }),\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\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 // 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 // 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\"]).${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 // 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 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 interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor'\n }\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected\n }\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed\n }\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected\n }\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n }\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n }\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected\n }\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none'\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\n }\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected\n }\n },\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n }\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent\n },\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap'\n },\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles\n }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical\n };\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge\n };\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle\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 const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n const focusedClassName = React.useMemo(()=>{\n if (state.disabled) {\n return '';\n }\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n return '';\n }\n return styles.focused;\n }, [\n state.disabled,\n state.selectFocused,\n state.selectable,\n styles.focused,\n styles.selectableFocused\n ]);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n }\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n return state;\n};\n"],"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAkBKe,WAAW;;;IAPXJ,cAAc;;;0BA8UQ;eAAtB0O;;;;iEAxVM,OAAO;wBACwC,gBAAgB;4BAC/D,uBAAuB;AAQnC,uBAAuB;IAC9BzO,IAAI,EAAE,UAAU;IAChBC,cAAc,EAAE,0BAA0B;IAC1CC,QAAQ,EAAE;AACd,CAAC;AAGU,oBAAoB;IAC3BE,WAAW,EAAE,kBAAkB;IAC/BC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,iBAAiB,GAAG;IACtBC,aAAa,EAAE,CAAA,IAAA,EAAOJ,WAAW,CAACE,mBAAmB,CAAA,CAAA,CAAG;IACxDG,YAAY,EAAEf,kBAAM,CAACgB,gBAAgB;IACrCC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,kBAAkB,GAAA,WAAA,OAAGnB,qBAAA,EAAA,WAAA,WAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;CA0B1B,CAAC;AACF,MAAMoB,cAAc,GAAG;IACnBC,MAAM,EAAE,aAAa;IACrBC,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAEtB,kBAAM,CAACuB,8BAA8B;IAC5CC,eAAe,EAAExB,kBAAM,CAACyB,8BAA8B;IACtDC,SAAS,EAAE1B,kBAAM,CAAC2B,OAAO;IACzB,GAAA,WAAA,GAAG/B,kBAAU,CAACgC,WAAW,CAAC5B,kBAAM,CAAC6B,0BAA0B,CAAC;IAC5D,UAAU,EAAE;QACRC,OAAO,EAAE,IAAI;QACbC,QAAQ,EAAE,UAAU;QACpBC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE,CAAA,KAAA,EAAQjC,kBAAM,CAACkC,aAAa,CAAA,KAAA,CAAA;IACxC,CAAC;IACD,SAAS,EAAE;QACP,GAAA,WAAA,GAAGtC,kBAAU,CAACgC,WAAW,CAAC5B,kBAAM,CAAC6B,0BAA0B,CAAA;IAC/D;AACJ,CAAC;AACD,MAAMM,aAAa,GAAA,WAAA,OAAGtC,gBAAA,EAAA;IAAAuC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAxC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAwC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,KAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,qBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,mBAAA,EAAA;QAAAP,OAAA,EAAA;QAAAQ,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,SAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,UAAA,EAAA;QAAAF,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,SAAA,EAAA;QAAAH,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,WAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,iBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,yBAAA,EAAA;QAAAZ,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAI,iBAAA,EAAA;QAAAb,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAS,4BAAA,EAAA;QAAAP,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAI,oCAAA,EAAA;QAAAf,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAO,OAAA,EAAA;QAAAhB,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAY,kBAAA,EAAA;QAAAV,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAV,MAAA,EAAA;QAAAW,IAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,0BAAA,EAAA;QAAA1B,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAkB,eAAA,EAAA;QAAA3B,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA/B,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA6B,MAAA,EAAA;QAAAlC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA8B,iBAAA,EAAA;QAAA5B,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;IAAAyB,yBAAA,EAAA;QAAApC,MAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAA4B,oBAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,uBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAR,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAT,MAAA,EAAA;QAAAU,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAA1D,OAAA,EAAA;QAAA2D,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAnE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAqC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAzE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAuE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAA9C,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAA8C,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA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"}
|
|
1
|
+
{"version":3,"sources":["useCardStyles.styles.js"],"sourcesContent":["'use client';\nimport * as React from 'react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { textClassNames } from '@fluentui/react-text';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardClassNames = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox'\n};\n/**\n * CSS variable names used internally for uniform styling in Card.\n */ export const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius'\n};\nconst focusOutlineStyle = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px'\n};\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\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 ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`\n },\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0\n }\n});\nconst disabledStyles = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n};\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus'\n })\n },\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within'\n }),\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\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 // 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 // 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\"]).${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 // 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 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 interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor'\n }\n },\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed\n }\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected\n }\n },\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed\n }\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected\n }\n },\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)\n }\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)\n }\n }\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected\n }\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none'\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled)\n }\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n }\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\n }\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)\n },\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected\n }\n },\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto'\n }\n },\n '::after': {\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent\n },\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap'\n },\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles\n }\n});\n/**\n * Apply styling to the Card slots based on the state.\n */ export const useCardStyles_unstable = (state)=>{\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical\n };\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge\n };\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle\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 const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n const focusedClassName = React.useMemo(()=>{\n if (state.disabled) {\n return '';\n }\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n return '';\n }\n return styles.focused;\n }, [\n state.disabled,\n state.selectFocused,\n state.selectable,\n styles.focused,\n styles.selectableFocused\n ]);\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardClassNames.root, resetStyles, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], isSelectableOrInteractive && styles.interactive, isSelectableOrInteractive && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], focusedClassName, isSelectableOrInteractive && styles.highContrastInteractive, state.selected && styles.highContrastSelected, state.disabled && styles.disabled, state.disabled && state.appearance === 'outline' && styles.outlineDisabled, state.root.className);\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n }\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n return state;\n};\n"],"names":["React","shorthands","__styles","mergeClasses","__resetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","disabledStyles","cursor","userSelect","color","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","content","position","inset","zIndex","zIndexContent","useCardStyles","focused","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bqhya38","Bwxa6fj","Bdhvstf","B7zbvrb","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","f6g5ot","Boxcth7","Bhdgwq3","hgwjuy","Bshpdp8","Bsom6fd","Blkhhs4","Bonggc9","Ddfuxk","i03rao","kclons","clg4pj","Bpqj9nj","B6dhp37","Bf4ptjt","Bqtpl0w","i4rwgc","Dah5zi","B1tsrr9","qqdqy8","Bkh64rk","e3fwne","J0r882","Bule8hv","Bjwuhne","Ghsupd","selectableFocused","Bssx7fj","uh7if5","clntm0","Dlk2r6","h6p2u","I6qiy5","yzno9d","By0wis0","B2j2mmj","wigs8","pbfy6t","B0v4ure","Byrf0fs","Bsiemmq","Bwckmig","skfxo0","Iidy0u","B98u21t","Bvwlmkc","jo1ztg","Ba1iezr","Blmvk6g","B24cy0v","Bil7v7r","Br3gin4","nr063g","ghq09","Bbgo44z","Bseh09z","az1dzo","Ba3ybja","B6352mv","vppk2z","Biaj6j7","B2pnrqr","B29w5g4","Bhhzhcn","Bec0n69","orientationHorizontal","Beiy3e4","Bt984gj","Binpb3b","qrt8p2","k6ws3r","Btcwela","Fer9m8","orientationVertical","B5nvv7i","Baxg94k","tn21ii","B0ud6bj","Bgdo4j","sizeSmall","B7balbw","B1h88n7","sizeMedium","sizeLarge","interactive","rhjd8f","filled","De3pzq","E5pizo","B0n5ga8","s924m2","B1q35kw","Gp14am","filledInteractive","Bceei9c","Bi91k9c","Jwef8y","Bvxd0ez","ecr2s2","filledInteractiveSelected","filledAlternative","filledAlternativeInteractive","filledAlternativeInteractiveSelected","outline","outlineInteractive","Be0v6ae","B5kxglz","B3pwyw6","Bymgtzf","dmfk","B4ofi8","jgq6uv","Baxewws","outlineInteractiveSelected","outlineDisabled","g2u3we","h3c5rm","B9xav0g","zhjwy3","ezxybo","wc7uws","subtle","subtleInteractive","subtleInteractiveSelected","highContrastSelected","B8gzw0y","By8wz76","B7iucu3","Boo9lyk","sga51p","qj1yg9","B8acmzm","Gezqo6","highContrastInteractive","waf3gn","B96h8j5","Bpd3jnq","uhbujs","select","qhf8xq","Bhzewxz","j35jbq","Bj3rh1h","hiddenCheckbox","B68tc82","Bmxbyg5","Bpg54ce","a9b677","Bqenvij","Bh84pgu","Bgl5zvf","Huce71","disabled","famaaq","sj55zd","Ftih45","Brfgrao","lawp4y","Fbdkly","mdwyqc","Bciustq","gc50h5","Ehzi8l","Bikrtoi","G8qf51","Brxh4y7","gp3uxg","Fohawp","Bxulg6k","vcjq4m","Bsqkqe9","fskg1g","iwiei9","Effecx","Bkt1b9m","jfmxvr","orauir","B2yd9ot","Fn9tzk","Bv0wker","Bp2dl5b","pzn0iz","f","i","d","p","m","h","a","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAF,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA+QrB,CAAC;AAGS,gCAAgCE,KAAK,IAAG;IAC/C,MAAMC,WAAW,GAAGhO,kBAAkB,CAAC,CAAC;IACxC,MAAMiO,MAAM,GAAGhN,aAAa,CAAC,CAAC;IAC9B,MAAMiN,cAAc,GAAG;QACnBC,UAAU,EAAEF,MAAM,CAAC/H,qBAAqB;QACxCkI,QAAQ,EAAEH,MAAM,CAACvH,mBAAAA;IACrB,CAAC;IACD,MAAM2H,OAAO,GAAG;QACZC,KAAK,EAAEL,MAAM,CAACjH,SAAS;QACvBuH,MAAM,EAAEN,MAAM,CAAC9G,UAAU;QACzBqH,KAAK,EAAEP,MAAM,CAAC7G,SAAAA;IAClB,CAAC;IACD,MAAMqH,aAAa,GAAG;QAClBlH,MAAM,EAAE0G,MAAM,CAAC1G,MAAM;QACrB,oBAAoB,EAAE0G,MAAM,CAAC5F,iBAAiB;QAC9CG,OAAO,EAAEyF,MAAM,CAACzF,OAAO;QACvBkB,MAAM,EAAEuE,MAAM,CAACvE,MAAAA;IACnB,CAAC;IACD,MAAMgF,WAAW,GAAG;QAChBnH,MAAM,EAAE0G,MAAM,CAAC7F,yBAAyB;QACxC,oBAAoB,EAAE6F,MAAM,CAAC1F,oCAAoC;QACjEC,OAAO,EAAEyF,MAAM,CAAC/E,0BAA0B;QAC1CQ,MAAM,EAAEuE,MAAM,CAACrE,yBAAAA;IACnB,CAAC;IACD,MAAM+E,cAAc,GAAG;QACnBpH,MAAM,EAAE0G,MAAM,CAACnG,iBAAiB;QAChC,oBAAoB,EAAEmG,MAAM,CAAC3F,4BAA4B;QACzDE,OAAO,EAAEyF,MAAM,CAACxF,kBAAkB;QAClCiB,MAAM,EAAEuE,MAAM,CAACtE,iBAAAA;IACnB,CAAC;IACD,MAAMiF,yBAAyB,GAAG,CAACb,KAAK,CAACtC,QAAQ,KAAKsC,KAAK,CAAC1G,WAAW,IAAI0G,KAAK,CAACc,UAAAA,AAAU,CAAC;IAC5F,MAAMC,gBAAgB,GAAGrQ,KAAK,EAACsQ,OAAO,CAAC,MAAI;QACvC,IAAIhB,KAAK,CAACtC,QAAQ,EAAE;YAChB,OAAO,EAAE;QACb;QACA,IAAIsC,KAAK,CAACc,UAAU,EAAE;YAClB,IAAId,KAAK,CAACiB,aAAa,EAAE;gBACrB,OAAOf,MAAM,CAACtK,iBAAiB;YACnC;YACA,OAAO,EAAE;QACb;QACA,OAAOsK,MAAM,CAAC/M,OAAO;IACzB,CAAC,EAAE;QACC6M,KAAK,CAACtC,QAAQ;QACdsC,KAAK,CAACiB,aAAa;QACnBjB,KAAK,CAACc,UAAU;QAChBZ,MAAM,CAAC/M,OAAO;QACd+M,MAAM,CAACtK,iBAAiB;KAC3B,CAAC;IACF,oDAAA;IACAoK,KAAK,CAAC1O,IAAI,CAAC4P,SAAS,OAAGrQ,oBAAY,EAACQ,cAAc,CAACC,IAAI,EAAE2O,WAAW,EAAEE,cAAc,CAACH,KAAK,CAACmB,WAAW,CAAC,EAAEb,OAAO,CAACN,KAAK,CAACoB,IAAI,CAAC,EAAEV,aAAa,CAACV,KAAK,CAACqB,UAAU,CAAC,EAAER,yBAAyB,IAAIX,MAAM,CAAC5G,WAAW,EAAEuH,yBAAyB,IAAID,cAAc,CAACZ,KAAK,CAACqB,UAAU,CAAC,EAAErB,KAAK,CAACsB,QAAQ,IAAIX,WAAW,CAACX,KAAK,CAACqB,UAAU,CAAC,EAAEN,gBAAgB,EAAEF,yBAAyB,IAAIX,MAAM,CAAC3D,uBAAuB,EAAEyD,KAAK,CAACsB,QAAQ,IAAIpB,MAAM,CAACpE,oBAAoB,EAAEkE,KAAK,CAACtC,QAAQ,IAAIwC,MAAM,CAACxC,QAAQ,EAAEsC,KAAK,CAACtC,QAAQ,IAAIsC,KAAK,CAACqB,UAAU,KAAK,SAAS,IAAInB,MAAM,CAAC9E,eAAe,EAAE4E,KAAK,CAAC1O,IAAI,CAAC4P,SAAS,CAAC;IAClkB,IAAIlB,KAAK,CAACzO,cAAc,EAAE;QACtB,oDAAA;QACAyO,KAAK,CAACzO,cAAc,CAAC2P,SAAS,OAAGrQ,oBAAY,EAACQ,cAAc,CAACE,cAAc,EAAE2O,MAAM,CAACtD,MAAM,EAAEoD,KAAK,CAACzO,cAAc,CAAC2P,SAAS,CAAC;IAC/H;IACA,IAAIlB,KAAK,CAACxO,QAAQ,EAAE;QAChB,oDAAA;QACAwO,KAAK,CAACxO,QAAQ,CAAC0P,SAAS,OAAGrQ,oBAAY,EAACQ,cAAc,CAACG,QAAQ,EAAE0O,MAAM,CAACjD,cAAc,EAAE+C,KAAK,CAACxO,QAAQ,CAAC0P,SAAS,CAAC;IACrH;IACA,OAAOlB,KAAK;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst disabledStyles: GriffelStyle = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`,\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n};\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles,\n },\n});\n\n/**\n * Apply styling to the Card slots based on the state.\n */\nexport const useCardStyles_unstable = (state: CardState): CardState => {\n 'use no memo';\n\n const resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n const focusedClassName = React.useMemo(() => {\n if (state.disabled) {\n return '';\n }\n\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.disabled && styles.disabled,\n state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n state.root.className,\n );\n\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/react';\nimport { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { textClassNames } from '@fluentui/react-text';\nimport type { FocusOutlineStyleOptions } from '@fluentui/react-tabster';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nimport { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';\nimport { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';\nimport { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';\nimport type { CardSlots, CardState } from './Card.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardClassNames: SlotClassNames<CardSlots> = {\n root: 'fui-Card',\n floatingAction: 'fui-Card__floatingAction',\n checkbox: 'fui-Card__checkbox',\n};\n\n/**\n * CSS variable names used internally for uniform styling in Card.\n */\nexport const cardCSSVars = {\n cardSizeVar: '--fui-Card--size',\n cardBorderRadiusVar: '--fui-Card--border-radius',\n};\n\nconst focusOutlineStyle: Partial<FocusOutlineStyleOptions> = {\n outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n outlineWidth: tokens.strokeWidthThick,\n outlineOffset: '-2px', // FIXME: tokens.strokeWidthThick causes some weird bugs\n};\n\nconst useCardResetStyles = makeResetStyles({\n overflow: 'hidden',\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n padding: `var(${cardCSSVars.cardSizeVar})`,\n gap: `var(${cardCSSVars.cardSizeVar})`,\n\n display: 'flex',\n position: 'relative',\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground1,\n\n // Border setting using after pseudo element to allow CardPreview to render behind it.\n '::after': {\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,\n },\n\n // Prevents CardHeader and CardFooter from shrinking.\n [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {\n flexShrink: 0,\n },\n});\n\nconst disabledStyles: GriffelStyle = {\n cursor: 'not-allowed',\n userSelect: 'none',\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n boxShadow: tokens.shadow2,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '::before': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n zIndex: `calc(${tokens.zIndexContent} + 1)`,\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n};\n\nconst useCardStyles = makeStyles({\n focused: {\n ...createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus',\n }),\n },\n\n selectableFocused: createFocusOutlineStyle({\n style: focusOutlineStyle,\n selector: 'focus-within',\n }),\n\n orientationHorizontal: {\n flexDirection: 'row',\n alignItems: 'center',\n\n // Remove vertical padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the last element.\n // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.\n [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {\n flexGrow: 1,\n },\n },\n orientationVertical: {\n flexDirection: 'column',\n\n // Remove lateral padding to keep CardPreview content flush with Card's borders.\n [`> .${cardPreviewClassNames.root}`]: {\n marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:first-of-type`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {\n marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n\n // Due to Tabster's \"Groupper\" focus functionality, hidden elements are injected before and after Card's content.\n // As such, the code below targets a CardPreview, when it's the first element.\n // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.\n [`> :not([aria-hidden=\"true\"]).${cardPreviewClassNames.root}:last-of-type`]: {\n marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,\n },\n },\n\n sizeSmall: {\n [cardCSSVars.cardSizeVar]: '8px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall,\n },\n sizeMedium: {\n [cardCSSVars.cardSizeVar]: '12px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium,\n },\n sizeLarge: {\n [cardCSSVars.cardSizeVar]: '16px',\n [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge,\n },\n\n interactive: {\n [`& .${textClassNames.root}`]: {\n color: 'currentColor',\n },\n },\n\n filled: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorNeutralBackground1Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n filledInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorNeutralBackground1Selected,\n },\n },\n\n filledAlternative: {\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n filledAlternativeInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorNeutralBackground2,\n boxShadow: tokens.shadow4,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Hover,\n backgroundColor: tokens.colorNeutralBackground2Hover,\n boxShadow: tokens.shadow8,\n },\n ':active': {\n backgroundColor: tokens.colorNeutralBackground2Pressed,\n },\n },\n filledAlternativeInteractiveSelected: {\n backgroundColor: tokens.colorNeutralBackground2Selected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground2Selected,\n backgroundColor: tokens.colorNeutralBackground2Selected,\n },\n },\n\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n outlineInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorTransparentBackgroundHover,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n },\n },\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n },\n },\n },\n outlineInteractiveSelected: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n },\n },\n outlineDisabled: {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n\n '&:hover, &:active': {\n backgroundColor: tokens.colorTransparentBackground,\n boxShadow: 'none',\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n },\n },\n\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n },\n subtleInteractive: {\n cursor: 'pointer',\n backgroundColor: tokens.colorSubtleBackground,\n boxShadow: 'none',\n\n '::after': {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Hover,\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n subtleInteractiveSelected: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n },\n\n ':hover': {\n color: tokens.colorNeutralForeground1Selected,\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n },\n\n highContrastSelected: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n highContrastInteractive: {\n '@media (forced-colors: active)': {\n ':hover, :active': {\n forcedColorAdjust: 'none',\n backgroundColor: 'Highlight',\n color: 'HighlightText',\n\n [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {\n forcedColorAdjust: 'auto',\n },\n },\n\n '::after': {\n ...shorthands.borderColor('Highlight'),\n },\n },\n },\n\n select: {\n position: 'absolute',\n top: '4px',\n right: '4px',\n zIndex: tokens.zIndexContent,\n },\n\n hiddenCheckbox: {\n overflow: 'hidden',\n width: '1px',\n height: '1px',\n position: 'absolute',\n clip: 'rect(0 0 0 0)',\n clipPath: 'inset(50%)',\n whiteSpace: 'nowrap',\n },\n\n disabled: {\n ...disabledStyles,\n '&:hover, &:active': disabledStyles,\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 resetStyles = useCardResetStyles();\n const styles = useCardStyles();\n\n const orientationMap = {\n horizontal: styles.orientationHorizontal,\n vertical: styles.orientationVertical,\n };\n\n const sizeMap = {\n small: styles.sizeSmall,\n medium: styles.sizeMedium,\n large: styles.sizeLarge,\n };\n\n const appearanceMap = {\n filled: styles.filled,\n 'filled-alternative': styles.filledAlternative,\n outline: styles.outline,\n subtle: styles.subtle,\n };\n\n const selectedMap = {\n filled: styles.filledInteractiveSelected,\n 'filled-alternative': styles.filledAlternativeInteractiveSelected,\n outline: styles.outlineInteractiveSelected,\n subtle: styles.subtleInteractiveSelected,\n };\n const interactiveMap = {\n filled: styles.filledInteractive,\n 'filled-alternative': styles.filledAlternativeInteractive,\n outline: styles.outlineInteractive,\n subtle: styles.subtleInteractive,\n };\n\n const isSelectableOrInteractive = !state.disabled && (state.interactive || state.selectable);\n\n const focusedClassName = React.useMemo(() => {\n if (state.disabled) {\n return '';\n }\n\n if (state.selectable) {\n if (state.selectFocused) {\n return styles.selectableFocused;\n }\n\n return '';\n }\n\n return styles.focused;\n }, [state.disabled, state.selectFocused, state.selectable, styles.focused, styles.selectableFocused]);\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n cardClassNames.root,\n resetStyles,\n orientationMap[state.orientation],\n sizeMap[state.size],\n appearanceMap[state.appearance],\n isSelectableOrInteractive && styles.interactive,\n isSelectableOrInteractive && interactiveMap[state.appearance],\n state.selected && selectedMap[state.appearance],\n focusedClassName,\n isSelectableOrInteractive && styles.highContrastInteractive,\n state.selected && styles.highContrastSelected,\n state.disabled && styles.disabled,\n state.disabled && state.appearance === 'outline' && styles.outlineDisabled,\n state.root.className,\n );\n\n if (state.floatingAction) {\n // eslint-disable-next-line react-hooks/immutability\n state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n // eslint-disable-next-line react-hooks/immutability\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"names":["React","shorthands","makeStyles","mergeClasses","makeResetStyles","tokens","textClassNames","createFocusOutlineStyle","cardPreviewClassNames","cardHeaderClassNames","cardFooterClassNames","cardClassNames","root","floatingAction","checkbox","cardCSSVars","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","strokeWidthThick","outlineOffset","useCardResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","borderStyle","borderWidth","strokeWidthThin","flexShrink","disabledStyles","cursor","userSelect","colorNeutralForegroundDisabled","backgroundColor","colorNeutralBackgroundDisabled","boxShadow","shadow2","borderColor","colorNeutralStrokeDisabled","inset","zIndex","zIndexContent","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","colorNeutralBackground1","shadow4","colorTransparentStroke","filledInteractive","colorNeutralForeground1Hover","colorNeutralBackground1Hover","shadow8","colorNeutralBackground1Pressed","filledInteractiveSelected","colorNeutralBackground1Selected","colorNeutralStroke1Selected","colorNeutralForeground1Selected","filledAlternative","colorNeutralBackground2","filledAlternativeInteractive","colorNeutralForeground2Hover","colorNeutralBackground2Hover","colorNeutralBackground2Pressed","filledAlternativeInteractiveSelected","colorNeutralBackground2Selected","colorNeutralForeground2Selected","outline","colorTransparentBackground","colorNeutralStroke1","outlineInteractive","colorTransparentBackgroundHover","colorNeutralStroke1Hover","colorTransparentBackgroundPressed","colorNeutralStroke1Pressed","outlineInteractiveSelected","colorTransparentBackgroundSelected","outlineDisabled","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","disabled","useCardStyles_unstable","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","useMemo","selectFocused","className","orientation","size","appearance","selected"],"mappings":"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"}
|
|
@@ -95,7 +95,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
95
95
|
]
|
|
96
96
|
});
|
|
97
97
|
const useCardFooterStyles_unstable = (state)=>{
|
|
98
|
-
'use no memo';
|
|
99
98
|
const styles = useStyles();
|
|
100
99
|
// eslint-disable-next-line react-hooks/immutability
|
|
101
100
|
state.root.className = (0, _react.mergeClasses)(cardFooterClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px'\n },\n action: {\n marginLeft: 'auto',\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKG,oBAAoB;;;IAyBpBmB,4BAA4B;;;;uBA5BQ,gBAAgB;AAG1D,6BAA6B;IACpClB,IAAI,EAAE,gBAAgB;IACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAN,MAAA,EAAA;QAAAO,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAkBjB,CAAC;AAGS,qCAAsCE,KAAK,IAAG;IACrD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;IACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;QACd,oDAAA;QACAkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;IAC7G;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -42,7 +42,6 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
44
|
const useCardFooterStyles_unstable = (state)=>{
|
|
45
|
-
'use no memo';
|
|
46
45
|
const styles = useStyles();
|
|
47
46
|
// eslint-disable-next-line react-hooks/immutability
|
|
48
47
|
state.root.className = (0, _react.mergeClasses)(cardFooterClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n root: 'fui-CardFooter',\n action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n gap: '12px',\n },\n action: {\n marginLeft: 'auto',\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,oBAAAA;;;gCA6BAW;eAAAA;;;uBAnCwC,iBAAiB;AAM/D,6BAA8D;IACnEV,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,iBAAAA,CAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAKO,qCAAqC,CAACE;IAC3C,MAAMC,SAASV;IACf,oDAAoD;IACpDS,MAAMX,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChB,oDAAoD;QACpDU,MAAMV,MAAM,CAACY,SAAS,OAAGhB,mBAAAA,EAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}
|
|
@@ -159,7 +159,6 @@ const useStylesFlex = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
159
159
|
]
|
|
160
160
|
});
|
|
161
161
|
const useCardHeaderStyles_unstable = (state)=>{
|
|
162
|
-
'use no memo';
|
|
163
162
|
const styles = useStyles();
|
|
164
163
|
const stylesGrid = useStylesGrid();
|
|
165
164
|
const stylesFlex = useStylesFlex();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useCardHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardHeaderClassNames = {\n root: 'fui-CardHeader',\n image: 'fui-CardHeader__image',\n header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action'\n};\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */ export const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap'\n};\nconst useStyles = makeStyles({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center'\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`\n },\n header: {\n display: 'flex'\n },\n description: {\n display: 'flex'\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor'\n }\n }\n }\n});\nconst useStylesGrid = makeStyles({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content'\n },\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2'\n },\n header: {\n gridColumnStart: '2',\n gridRowStart: '1'\n },\n description: {\n gridColumnStart: '2',\n gridRowStart: '2'\n },\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2'\n }\n});\nconst useStylesFlex = makeStyles({\n root: {\n display: 'flex'\n },\n header: {\n flexGrow: 1\n },\n image: {},\n description: {},\n action: {}\n});\n/**\n * Apply styling to the CardHeader slots based on the state.\n */ export const useCardHeaderStyles_unstable = (state)=>{\n const styles = useStyles();\n const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n const getSlotStyles = (slotName)=>{\n var _state_slotName;\n return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);\n };\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","Bkc6ea2","Bt984gj","mc9l5x","t21cq0","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","m","useStylesGrid","t4k1zu","Br312pm","Ijaq50","useStylesFlex","Bh6795r","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","_state_slotName","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\n});\n\n/**\n * Apply styling to the CardHeader slots based on the state.\n */\nexport const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 header: 'fui-CardHeader__header',\n description: 'fui-CardHeader__description',\n action: 'fui-CardHeader__action',\n};\n\n/**\n * CSS variable names used internally for uniform styling in CardHeader.\n */\nexport const cardHeaderCSSVars = {\n cardHeaderGapVar: '--fui-CardHeader--gap',\n};\n\nconst useStyles = makeStyles<keyof CardHeaderSlots>({\n root: {\n [cardHeaderCSSVars.cardHeaderGapVar]: '12px',\n alignItems: 'center',\n },\n image: {\n display: 'inline-flex',\n marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n },\n header: {\n display: 'flex',\n },\n description: {\n display: 'flex',\n },\n action: {\n marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,\n\n // when the card is selected or hovered, it has custom high contrast color and background styles\n // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n '@media (forced-colors: active)': {\n '& .fui-Button, & .fui-Link': {\n ...shorthands.borderColor('currentColor'),\n color: 'currentColor',\n outlineColor: 'currentColor',\n },\n },\n },\n});\n\nconst useStylesGrid = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'grid',\n gridAutoColumns: 'min-content 1fr min-content',\n },\n\n image: {\n gridColumnStart: '1',\n gridRowStart: 'span 2',\n },\n\n header: {\n gridColumnStart: '2',\n gridRowStart: '1',\n },\n\n description: {\n gridColumnStart: '2',\n gridRowStart: '2',\n },\n\n action: {\n gridColumnStart: '3',\n gridRowStart: 'span 2',\n },\n});\n\nconst useStylesFlex = makeStyles<keyof CardHeaderSlots>({\n root: {\n display: 'flex',\n },\n\n header: {\n flexGrow: 1,\n },\n\n image: {},\n description: {},\n action: {},\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 const stylesGrid = useStylesGrid();\n const stylesFlex = useStylesFlex();\n\n const boxModelStyles = state.description ? stylesGrid : stylesFlex;\n\n const getSlotStyles = (slotName: keyof CardHeaderSlots): string => {\n return mergeClasses(\n cardHeaderClassNames[slotName],\n styles[slotName],\n boxModelStyles[slotName],\n state[slotName]?.className,\n );\n };\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = getSlotStyles('root');\n\n if (state.image) {\n // eslint-disable-next-line react-hooks/immutability\n state.image.className = getSlotStyles('image');\n }\n\n if (state.header) {\n // eslint-disable-next-line react-hooks/immutability\n state.header.className = getSlotStyles('header');\n }\n\n if (state.description) {\n // eslint-disable-next-line react-hooks/immutability\n state.description.className = getSlotStyles('description');\n }\n\n if (state.action) {\n // eslint-disable-next-line react-hooks/immutability\n state.action.className = getSlotStyles('action');\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardHeaderClassNames","root","image","header","description","action","cardHeaderCSSVars","cardHeaderGapVar","useStyles","alignItems","display","marginRight","marginLeft","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","useCardHeaderStyles_unstable","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","className"],"mappings":"AAAA;;;;;;;;;;;;IAoBaS,iBAAAA;;;wBAXAN;;;IAyFAsB,4BAAAA;;;;uBA/FwC,iBAAiB;AAM/D,MAAMtB,uBAAwD;IACnEC,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV,EAAE;AAKK,0BAA0B;IAC/BE,kBAAkB;AACpB,EAAE;AAEF,MAAMC,YAAYX,qBAAAA,EAAkC;IAClDI,MAAM;QACJ,CAACK,kBAAkBC,gBAAgB,CAAC,EAAE;QACtCE,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEL,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAJ,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEN,kBAAkBC,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,iBAAAA,CAAWc,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,oBAAgBnB,iBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;QACTO,iBAAiB;IACnB;IAEAf,OAAO;QACLgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,QAAQ;QACNe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,aAAa;QACXc,iBAAiB;QACjBC,cAAc;IAChB;IAEAd,QAAQ;QACNa,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,oBAAgBvB,iBAAAA,EAAkC;IACtDI,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNkB,UAAU;IACZ;IAEAnB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAKO,qCAAqC,CAACkB;IAC3C,MAAMC,SAAShB;IACf,MAAMiB,aAAaT;IACnB,MAAMU,aAAaN;IAEnB,MAAMO,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,WAAOzB,mBAAAA,EACLE,oBAAoB,CAAC6B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,EAAA,CACxBN,kBAAAA,KAAK,CAACM,SAAAA,AAAS,MAAA,QAAfN,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAiBO,SAAS;IAE9B;IAEA,oDAAoD;IACpDP,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACf,oDAAoD;QACpDqB,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChB,oDAAoD;QACpDoB,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrB,oDAAoD;QACpDmB,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChB,oDAAoD;QACpDkB,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}
|
|
@@ -54,7 +54,6 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
|
54
54
|
]
|
|
55
55
|
});
|
|
56
56
|
const useCardPreviewStyles_unstable = (state)=>{
|
|
57
|
-
'use no memo';
|
|
58
57
|
const styles = useStyles();
|
|
59
58
|
// eslint-disable-next-line react-hooks/immutability
|
|
60
59
|
state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n
|
|
1
|
+
{"version":3,"sources":["useCardPreviewStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardPreviewClassNames = {\n root: 'fui-CardPreview',\n logo: 'fui-CardPreview__logo'\n};\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n [`> :not(.${cardPreviewClassNames.logo})`]: {\n display: 'block',\n height: '100%',\n width: '100%'\n }\n },\n logo: {\n position: 'absolute',\n bottom: '12px',\n left: '12px',\n width: '32px',\n height: '32px'\n }\n});\n/**\n * Apply styling to the CardPreview slots based on the state.\n */ export const useCardPreviewStyles_unstable = (state)=>{\n const styles = useStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n return state;\n};\n"],"names":["__styles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","qhf8xq","Byfpedg","Btj6oj6","B1m4t4s","B5kzvoi","oyh7mz","a9b677","Bqenvij","d","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKE,qBAAqB;;;iCAuBQ;;;;uBA1BL,gBAAgB;AAG9C,8BAA8B;IACrCC,IAAI,EAAE,iBAAiB;IACvBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAI,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAgBjB,CAAC;AAGS,MAAMC,iCAAiCC,KAAK,IAAG;IACtD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACb,IAAI,CAACe,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEa,KAAK,CAACb,IAAI,CAACe,SAAS,CAAC;IAClG,IAAIF,KAAK,CAACZ,IAAI,EAAE;QACZ,oDAAA;QACAY,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACC,qBAAqB,CAACE,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtG;IACA,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -40,7 +40,6 @@ const useStyles = (0, _react.makeStyles)({
|
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
42
|
const useCardPreviewStyles_unstable = (state)=>{
|
|
43
|
-
'use no memo';
|
|
44
43
|
const styles = useStyles();
|
|
45
44
|
// eslint-disable-next-line react-hooks/immutability
|
|
46
45
|
state.root.className = (0, _react.mergeClasses)(cardPreviewClassNames.root, styles.root, state.root.className);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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
|
|
1
|
+
{"version":3,"sources":["../src/components/CardPreview/useCardPreviewStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport 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 // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);\n\n if (state.logo) {\n // eslint-disable-next-line react-hooks/immutability\n state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);\n }\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","cardPreviewClassNames","root","logo","useStyles","position","display","height","width","bottom","left","useCardPreviewStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaE,qBAAAA;;;IA4BAU,6BAAAA;;;;uBAlC4B,iBAAiB;AAMnD,8BAAgE;IACrET,MAAM;IACNC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BG,MAAM;QACJG,UAAU;QAEV,CAAC,CAAC,QAAQ,EAAEJ,sBAAsBE,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1CG,SAAS;YACTC,QAAQ;YACRC,OAAO;QACT;IACF;IAEAL,MAAM;QACJE,UAAU;QACVI,QAAQ;QACRC,MAAM;QACNF,OAAO;QACPD,QAAQ;IACV;AACF;AAKO,sCAAsC,CAACK;IAC5C,MAAMC,SAAST;IACf,oDAAoD;IACpDQ,MAAMV,IAAI,CAACY,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IAEjG,IAAIF,MAAMT,IAAI,EAAE;QACd,oDAAoD;QACpDS,MAAMT,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EAAaC,sBAAsBE,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IACnG;IAEA,OAAOF;AACT,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-card",
|
|
3
|
-
"version": "9.7.
|
|
3
|
+
"version": "9.7.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Card container components for Fluent UI React.",
|
|
6
6
|
"main": "lib-commonjs/index.js",
|
|
@@ -14,12 +14,12 @@
|
|
|
14
14
|
"license": "MIT",
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
17
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
17
|
+
"@fluentui/react-jsx-runtime": "^9.4.4",
|
|
18
18
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
19
|
-
"@fluentui/react-tabster": "^9.26.
|
|
20
|
-
"@fluentui/react-text": "^9.6.
|
|
19
|
+
"@fluentui/react-tabster": "^9.26.16",
|
|
20
|
+
"@fluentui/react-text": "^9.6.18",
|
|
21
21
|
"@fluentui/react-theme": "^9.2.1",
|
|
22
|
-
"@fluentui/react-utilities": "^9.26.
|
|
22
|
+
"@fluentui/react-utilities": "^9.26.5",
|
|
23
23
|
"@griffel/react": "^1.5.32",
|
|
24
24
|
"@swc/helpers": "^0.5.1"
|
|
25
25
|
},
|