npm - @fluentui/react-card - Versions diffs - 9.6.1 → 9.7.1 - Mend

@fluentui/react-card 9.6.1 → 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.

Files changed (53) hide show

package/lib/components/Card/useCardStyles.styles.js.map CHANGED Viewed

	@@ -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 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 state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);\n }\n if (state.checkbox) {\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":[]}

package/lib/components/Card/useCardStyles.styles.raw.js CHANGED Viewed

@@ -344,7 +344,6 @@ const useCardStyles = makeStyles({
 /**
  * Apply styling to the Card slots based on the state.
  */ export const useCardStyles_unstable = (state)=>{
-    'use no memo';
     const resetStyles = useCardResetStyles();
     const styles = useCardStyles();
     const orientationMap = {
@@ -393,11 +392,14 @@ const useCardStyles = makeStyles({
         styles.focused,
         styles.selectableFocused
     ]);
+    // eslint-disable-next-line react-hooks/immutability
     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);
     if (state.floatingAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
     }
     if (state.checkbox) {
+        // eslint-disable-next-line react-hooks/immutability
         state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
     }
     return state;

package/lib/components/Card/useCardStyles.styles.raw.js.map CHANGED Viewed

	@@ -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 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 state.floatingAction.className = mergeClasses(\n cardClassNames.floatingAction,\n styles.select,\n state.floatingAction.className,\n );\n }\n\n if (state.checkbox) {\n state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);\n }\n\n return state;\n};\n"],"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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"}

package/lib/components/CardFooter/useCardFooterStyles.styles.js CHANGED Viewed

@@ -45,11 +45,11 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the CardFooter slots based on the state.
  */
 export const useCardFooterStyles_unstable = state => {
-  'use no memo';
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
   if (state.action) {
+    // eslint-disable-next-line react-hooks/immutability
     state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
   return state;

package/lib/components/CardFooter/useCardFooterStyles.styles.js.map CHANGED Viewed

	@@ -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 ~~'use no memo';\n~~ const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n if (state.action) {\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,~~aAAa;;EACb,~~MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;~~EAC1BiB~~,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;~~IACdkB~~,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":[]}
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":[]}

package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js CHANGED Viewed

@@ -28,10 +28,11 @@ const useStyles = makeStyles({
 /**
  * Apply styling to the CardFooter slots based on the state.
  */ export const useCardFooterStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
     }
     return state;

package/lib/components/CardFooter/useCardFooterStyles.styles.raw.js.map CHANGED Viewed

	@@ -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 ~~'use no memo';\n\n~~ const styles = useStyles();\n state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n if (state.action) {\n state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n }\n\n return state;\n};\n"],"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~~;IAEA~~,MAAMC,SAASV;~~IACfS~~,MAAMX,IAAI,CAACa,SAAS,GAAGhB,aAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;~~QAChBU~~,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}
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"}

package/lib/components/CardHeader/useCardHeader.js CHANGED Viewed

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import { useCardContext_unstable } from '../Card/CardContext';
-import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
 /**
  * Finds the first child of CardHeader with an id prop.
  *
@@ -53,11 +52,13 @@ import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
     const { selectableA11yProps: { referenceId, setReferenceId } } = useCardContext_unstable();
     const headerRef = React.useRef(null);
     const hasChildId = React.useRef(false);
-    const generatedId = useId(cardHeaderClassNames.header, referenceId);
+    const generatedId = useId('fui-CardHeader__header', referenceId);
+    // eslint-disable-next-line react-hooks/refs
     const headerSlot = slot.optional(header, {
         renderByDefault: true,
         defaultProps: {
             ref: headerRef,
+            // eslint-disable-next-line react-hooks/refs
             id: !hasChildId.current ? referenceId : undefined
         },
         elementType: 'div'

package/lib/components/CardHeader/useCardHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderBaseProps, CardHeaderBaseState, CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\~~nimport { cardHeaderClassNames } from './useCardHeaderStyles.styles';\~~n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement<{ id: string }> {\n return React.isValidElement<{ id?: string }>(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement<{ id?: string }> \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n /\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n return useCardHeaderBase_unstable(props, ref);\n};\n\n/\n Base hook for CardHeader component, which manages state related to slots structure\n * and the card's selectable accessibility properties.\n * Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeaderBase_unstable = (\n props: CardHeaderBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardHeaderBaseState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId(~~cardHeaderClassNames.header~~, referenceId);\n\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","~~cardHeaderClassNames","~~getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","useCardHeaderBase_unstable","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,sBAAsB;~~AAC9D,SAASC,oBAAoB,QAAQ,+BAA+B;AAEpE~~;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,~~OAAOT~~,~~MAAMU~~,cAAc,CAAkBD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IACnF;IAEA,~~OAAOb~~,~~MAAMc~~,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA4D,EAC5DC,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,wBAAAA,kCAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU;IAC7D,OAAOC,2BAA2BX,OAAOU;AAC3C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAA6B,CACxCX,OACAU;IAEA,MAAM,EAAEE,KAAK,EAAEjB,MAAM,EAAEkB,WAAW,EAAEC,MAAM,EAAE,GAAGd;IAE/C,MAAM,EACJe,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,~~GAAGzB~~;IACJ,~~MAAM0B~~,~~YAAY9B~~,~~MAAM+B~~,MAAM,CAAiB;IAE/C,MAAMC,~~aAAahC,MAAM+~~B,MAAM,CAAC;IAChC,MAAMX,~~cAAclB~~,~~MAAMG,qBAAqBE,~~MAAM,~~EAAEqB~~;~~IAEvD~~,MAAMK,~~aAAa9B~~,~~KAAK+B~~,QAAQ,CAAC3B,QAAQ;QACvC4B,iBAAiB;QACjBC,cAAc;YACZd,KAAKQ;~~YACLjB~~,IAAI,CAACmB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;~~IACAvC~~,~~MAAMwC~~,SAAS,CAAC;YACyBV;QAAvC,MAAMZ,WAAW,CAACc,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBjB,EAAE,GAAGyB;QAC/D,MAAMnB,cAAcb,eAAe2B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAG1B,QAAQQ;QAC7BU,eAAeZ,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQ0B;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOjB,QAAQ;YAAOkB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,~~MAAMxC~~,~~KAAKyC~~,MAAM,~~CACf3C~~,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;~~YAC5FqB~~,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE2B,aAAa;QAAM;QAEvBf,~~OAAOrB~~,~~KAAK+B~~,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjDhC,QAAQ0B;QACRR,~~aAAatB~~,~~KAAK+B~~,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,~~QAAQvB~~,~~KAAK+B~~,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CardHeader/useCardHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { CardHeaderBaseProps, CardHeaderBaseState, CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\n\n/*\n Finds the first child of CardHeader with an id prop.\n \n @param header - the header prop of CardHeader\n /\nfunction getChildWithId(header: React.ReactNode) {\n function isReactElementWithIdProp(element: React.ReactNode): element is React.ReactElement<{ id: string }> {\n return React.isValidElement<{ id?: string }>(element) && Boolean(element.props.id);\n }\n\n return React.Children.toArray(header).find(isReactElementWithIdProp);\n}\n\n/\n Returns the id to use for the CardHeader root element.\n \n @param headerId - the id prop of the CardHeader component\n * @param childWithId - the first child of the CardHeader component with an id prop\n * @param generatedId - a generated id\n \n @returns the id to use for the CardHeader root element\n /\nfunction getReferenceId(\n headerId: string \| undefined,\n childWithId: React.ReactElement<{ id?: string }> \| undefined,\n generatedId: string,\n): string {\n if (headerId) {\n return headerId;\n }\n\n if (childWithId?.props.id) {\n return childWithId.props.id;\n }\n\n return generatedId;\n}\n\n/\n Create the state required to render CardHeader.\n \n The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n /\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n return useCardHeaderBase_unstable(props, ref);\n};\n\n/\n Base hook for CardHeader component, which manages state related to slots structure\n * and the card's selectable accessibility properties.\n * Note: CardHeader has no design props, so this is equivalent to useCardHeader_unstable.\n \n @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeaderBase_unstable = (\n props: CardHeaderBaseProps,\n ref: React.Ref<HTMLElement>,\n): CardHeaderBaseState => {\n const { image, header, description, action } = props;\n\n const {\n selectableA11yProps: { referenceId, setReferenceId },\n } = useCardContext_unstable();\n const headerRef = React.useRef<HTMLDivElement>(null);\n\n const hasChildId = React.useRef(false);\n const generatedId = useId('fui-CardHeader__header', referenceId);\n\n // eslint-disable-next-line react-hooks/refs\n const headerSlot = slot.optional(header, {\n renderByDefault: true,\n defaultProps: {\n ref: headerRef,\n // eslint-disable-next-line react-hooks/refs\n id: !hasChildId.current ? referenceId : undefined,\n },\n elementType: 'div',\n });\n React.useEffect(() => {\n const headerId = !hasChildId.current ? headerRef.current?.id : undefined;\n const childWithId = getChildWithId(headerSlot?.children);\n hasChildId.current = Boolean(childWithId);\n setReferenceId(getReferenceId(headerId, childWithId, generatedId));\n }, [generatedId, header, headerSlot, setReferenceId]);\n return {\n components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n ...props,\n }),\n { elementType: 'div' },\n ),\n image: slot.optional(image, { elementType: 'div' }),\n header: headerSlot,\n description: slot.optional(description, { elementType: 'div' }),\n action: slot.optional(action, { elementType: 'div' }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useCardContext_unstable","getChildWithId","header","isReactElementWithIdProp","element","isValidElement","Boolean","props","id","Children","toArray","find","getReferenceId","headerId","childWithId","generatedId","useCardHeader_unstable","ref","useCardHeaderBase_unstable","image","description","action","selectableA11yProps","referenceId","setReferenceId","headerRef","useRef","hasChildId","headerSlot","optional","renderByDefault","defaultProps","current","undefined","elementType","useEffect","children","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,sBAAsB;AAE9D;;;;CAIC,GACD,SAASC,eAAeC,MAAuB;IAC7C,SAASC,yBAAyBC,OAAwB;QACxD,OAAOR,MAAMS,cAAc,CAAkBD,YAAYE,QAAQF,QAAQG,KAAK,CAACC,EAAE;IACnF;IAEA,OAAOZ,MAAMa,QAAQ,CAACC,OAAO,CAACR,QAAQS,IAAI,CAACR;AAC7C;AAEA;;;;;;;;CAQC,GACD,SAASS,eACPC,QAA4B,EAC5BC,WAA4D,EAC5DC,WAAmB;IAEnB,IAAIF,UAAU;QACZ,OAAOA;IACT;IAEA,IAAIC,wBAAAA,kCAAAA,YAAaP,KAAK,CAACC,EAAE,EAAE;QACzB,OAAOM,YAAYP,KAAK,CAACC,EAAE;IAC7B;IAEA,OAAOO;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,yBAAyB,CAACT,OAAwBU;IAC7D,OAAOC,2BAA2BX,OAAOU;AAC3C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,6BAA6B,CACxCX,OACAU;IAEA,MAAM,EAAEE,KAAK,EAAEjB,MAAM,EAAEkB,WAAW,EAAEC,MAAM,EAAE,GAAGd;IAE/C,MAAM,EACJe,qBAAqB,EAAEC,WAAW,EAAEC,cAAc,EAAE,EACrD,GAAGxB;IACJ,MAAMyB,YAAY7B,MAAM8B,MAAM,CAAiB;IAE/C,MAAMC,aAAa/B,MAAM8B,MAAM,CAAC;IAChC,MAAMX,cAAcjB,MAAM,0BAA0ByB;IAEpD,4CAA4C;IAC5C,MAAMK,aAAa7B,KAAK8B,QAAQ,CAAC3B,QAAQ;QACvC4B,iBAAiB;QACjBC,cAAc;YACZd,KAAKQ;YACL,4CAA4C;YAC5CjB,IAAI,CAACmB,WAAWK,OAAO,GAAGT,cAAcU;QAC1C;QACAC,aAAa;IACf;IACAtC,MAAMuC,SAAS,CAAC;YACyBV;QAAvC,MAAMZ,WAAW,CAACc,WAAWK,OAAO,IAAGP,qBAAAA,UAAUO,OAAO,cAAjBP,yCAAAA,mBAAmBjB,EAAE,GAAGyB;QAC/D,MAAMnB,cAAcb,eAAe2B,uBAAAA,iCAAAA,WAAYQ,QAAQ;QACvDT,WAAWK,OAAO,GAAG1B,QAAQQ;QAC7BU,eAAeZ,eAAeC,UAAUC,aAAaC;IACvD,GAAG;QAACA;QAAab;QAAQ0B;QAAYJ;KAAe;IACpD,OAAO;QACLa,YAAY;YAAEC,MAAM;YAAOnB,OAAO;YAAOjB,QAAQ;YAAOkB,aAAa;YAAOC,QAAQ;QAAM;QAE1FiB,MAAMvC,KAAKwC,MAAM,CACf1C,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FoB,KAAKA;YACL,GAAGV,KAAK;QACV,IACA;YAAE2B,aAAa;QAAM;QAEvBf,OAAOpB,KAAK8B,QAAQ,CAACV,OAAO;YAAEe,aAAa;QAAM;QACjDhC,QAAQ0B;QACRR,aAAarB,KAAK8B,QAAQ,CAACT,aAAa;YAAEc,aAAa;QAAM;QAC7Db,QAAQtB,KAAK8B,QAAQ,CAACR,QAAQ;YAAEa,aAAa;QAAM;IACrD;AACF,EAAE"}

package/lib/components/CardHeader/useCardHeaderStyles.styles.js CHANGED Viewed

@@ -96,8 +96,6 @@ const useStylesFlex = /*#__PURE__*/__styles({
  * Apply styling to the CardHeader slots based on the state.
  */
 export const useCardHeaderStyles_unstable = state => {
-  'use no memo';
   const styles = useStyles();
   const stylesGrid = useStylesGrid();
   const stylesFlex = useStylesFlex();
@@ -106,17 +104,22 @@ export const useCardHeaderStyles_unstable = state => {
     var _state_slotName;
     return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
   };
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = getSlotStyles('root');
   if (state.image) {
+    // eslint-disable-next-line react-hooks/immutability
     state.image.className = getSlotStyles('image');
   }
   if (state.header) {
+    // eslint-disable-next-line react-hooks/immutability
     state.header.className = getSlotStyles('header');
   }
   if (state.description) {
+    // eslint-disable-next-line react-hooks/immutability
     state.description.className = getSlotStyles('description');
   }
   if (state.action) {
+    // eslint-disable-next-line react-hooks/immutability
     state.action.className = getSlotStyles('action');
   }
   return state;

package/lib/components/CardHeader/useCardHeaderStyles.styles.js.map CHANGED Viewed

	@@ -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 ~~'use no memo';\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 state.root.className = getSlotStyles('root');\n if (state.image) {\n state.image.className = getSlotStyles('image');\n }\n if (state.header) {\n state.header.className = getSlotStyles('header');\n }\n if (state.description) {\n state.description.className = getSlotStyles('description');\n }\n if (state.action) {\n state.action.className = getSlotStyles('action');\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,KAAK,EAAE,uBAAuB;EAC9BC,MAAM,EAAE,wBAAwB;EAChCC,WAAW,EAAE,6BAA6B;EAC1CC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iBAAiB,GAAG;EACjCC,gBAAgB,EAAE;AACtB,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAI,IAAA;IAAAQ,OAAA;IAAAC,OAAA;EAAA;EAAAR,KAAA;IAAAS,MAAA;IAAAC,MAAA;EAAA;EAAAT,MAAA;IAAAQ,MAAA;EAAA;EAAAP,WAAA;IAAAO,MAAA;EAAA;EAAAN,MAAA;IAAAQ,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA2BjB,CAAC;AACF,MAAMC,aAAa,gBAAGzB,QAAA;EAAAI,IAAA;IAAAU,MAAA;IAAAY,MAAA;EAAA;EAAArB,KAAA;IAAAsB,OAAA;IAAAC,MAAA;EAAA;EAAAtB,MAAA;IAAAqB,OAAA;IAAAC,MAAA;EAAA;EAAArB,WAAA;IAAAoB,OAAA;IAAAC,MAAA;EAAA;EAAApB,MAAA;IAAAmB,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAqBrB,CAAC;AACF,MAAMM,aAAa,gBAAG7B,QAAA;EAAAI,IAAA;IAAAU,MAAA;EAAA;EAAAR,MAAA;IAAAwB,OAAA;EAAA;EAAAzB,KAAA;EAAAE,WAAA;EAAAC,MAAA;AAAA;EAAAe,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,4BAA4B,GAAIC,KAAK,IAAG;EACrD,~~aAAa;;EACb,~~MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,MAAMuB,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAMU,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClC,MAAMO,cAAc,GAAGJ,KAAK,CAACzB,WAAW,GAAG2B,UAAU,GAAGC,UAAU;EAClE,MAAME,aAAa,GAAIC,QAAQ,IAAG;IAC9B,IAAIC,eAAe;IACnB,OAAOtC,YAAY,CAACE,oBAAoB,CAACmC,QAAQ,CAAC,EAAEL,MAAM,CAACK,QAAQ,CAAC,EAAEF,cAAc,CAACE,QAAQ,CAAC,EAAE,CAACC,eAAe,GAAGP,KAAK,CAACM,QAAQ,CAAC,MAAM,IAAI,IAAIC,eAAe,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,eAAe,CAACC,SAAS,CAAC;EACpN,CAAC;~~EACDR~~,KAAK,CAAC5B,IAAI,CAACoC,SAAS,GAAGH,aAAa,CAAC,MAAM,CAAC;EAC5C,IAAIL,KAAK,CAAC3B,KAAK,EAAE;~~IACb2B~~,KAAK,CAAC3B,KAAK,CAACmC,SAAS,GAAGH,aAAa,CAAC,OAAO,CAAC;EAClD;EACA,IAAIL,KAAK,CAAC1B,MAAM,EAAE;~~IACd0B~~,KAAK,CAAC1B,MAAM,CAACkC,SAAS,GAAGH,aAAa,CAAC,QAAQ,CAAC;EACpD;EACA,IAAIL,KAAK,CAACzB,WAAW,EAAE;~~IACnByB~~,KAAK,CAACzB,WAAW,CAACiC,SAAS,GAAGH,aAAa,CAAC,aAAa,CAAC;EAC9D;EACA,IAAIL,KAAK,CAACxB,MAAM,EAAE;~~IACdwB~~,KAAK,CAACxB,MAAM,CAACgC,SAAS,GAAGH,aAAa,CAAC,QAAQ,CAAC;EACpD;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
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":[]}

package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js CHANGED Viewed

@@ -78,7 +78,6 @@ const useStylesFlex = makeStyles({
 /**
  * Apply styling to the CardHeader slots based on the state.
  */ export const useCardHeaderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
     const stylesGrid = useStylesGrid();
     const stylesFlex = useStylesFlex();
@@ -87,17 +86,22 @@ const useStylesFlex = makeStyles({
         var _state_slotName;
         return mergeClasses(cardHeaderClassNames[slotName], styles[slotName], boxModelStyles[slotName], (_state_slotName = state[slotName]) === null || _state_slotName === void 0 ? void 0 : _state_slotName.className);
     };
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = getSlotStyles('root');
     if (state.image) {
+        // eslint-disable-next-line react-hooks/immutability
         state.image.className = getSlotStyles('image');
     }
     if (state.header) {
+        // eslint-disable-next-line react-hooks/immutability
         state.header.className = getSlotStyles('header');
     }
     if (state.description) {
+        // eslint-disable-next-line react-hooks/immutability
         state.description.className = getSlotStyles('description');
     }
     if (state.action) {
+        // eslint-disable-next-line react-hooks/immutability
         state.action.className = getSlotStyles('action');
     }
     return state;

package/lib/components/CardHeader/useCardHeaderStyles.styles.raw.js.map CHANGED Viewed

	@@ -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 ~~'use no memo';\n\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 state.root.className = getSlotStyles('root');\n\n if (state.image) {\n state.image.className = getSlotStyles('image');\n }\n\n if (state.header) {\n state.header.className = getSlotStyles('header');\n }\n\n if (state.description) {\n state.description.className = getSlotStyles('description');\n }\n\n if (state.action) {\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~~;IAEA~~,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;~~IAEAP~~,MAAMtB,IAAI,CAAC6B,SAAS,GAAGF,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;~~QACfqB~~,MAAMrB,KAAK,CAAC4B,SAAS,GAAGF,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;~~QAChBoB~~,MAAMpB,MAAM,CAAC2B,SAAS,GAAGF,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;~~QACrBmB~~,MAAMnB,WAAW,CAAC0B,SAAS,GAAGF,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;~~QAChBkB~~,MAAMlB,MAAM,CAACyB,SAAS,GAAGF,cAAc;IACzC;IAEA,OAAOL;AACT,EAAE"}
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"}