@fluentui/react-card 9.3.2 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-card
 
-This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.4.0)
+
+Thu, 17 Jul 2025 13:45:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.3..@fluentui/react-card_v9.4.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+- Bump @fluentui/react-text to v9.6.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
+## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.3.3)
+
+Fri, 27 Jun 2025 13:39:41 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.2..@fluentui/react-card_v9.3.3)
+
+### Patches
+
+- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
+
 ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-card_v9.3.2)
 
-Thu, 26 Jun 2025 14:07:54 GMT 
+Thu, 26 Jun 2025 14:11:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-card_v9.3.1..@fluentui/react-card_v9.3.2)
 
 ### Patches

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

@@ -0,0 +1,366 @@
+import * as React from 'react';
+import { shorthands, makeStyles, mergeClasses, makeResetStyles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { textClassNames } from '@fluentui/react-text';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { cardPreviewClassNames } from '../CardPreview/useCardPreviewStyles.styles';
+import { cardHeaderClassNames } from '../CardHeader/useCardHeaderStyles.styles';
+import { cardFooterClassNames } from '../CardFooter/useCardFooterStyles.styles';
+/**
+ * Static CSS class names used internally for the component slots.
+ */ export const cardClassNames = {
+    root: 'fui-Card',
+    floatingAction: 'fui-Card__floatingAction',
+    checkbox: 'fui-Card__checkbox'
+};
+/**
+ * CSS variable names used internally for uniform styling in Card.
+ */ export const cardCSSVars = {
+    cardSizeVar: '--fui-Card--size',
+    cardBorderRadiusVar: '--fui-Card--border-radius'
+};
+const focusOutlineStyle = {
+    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
+    outlineWidth: tokens.strokeWidthThick,
+    outlineOffset: '-2px'
+};
+const useCardResetStyles = makeResetStyles({
+    overflow: 'hidden',
+    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
+    padding: `var(${cardCSSVars.cardSizeVar})`,
+    gap: `var(${cardCSSVars.cardSizeVar})`,
+    display: 'flex',
+    position: 'relative',
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground1,
+    // Border setting using after pseudo element to allow CardPreview to render behind it.
+    '::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        content: '""',
+        pointerEvents: 'none',
+        ...shorthands.borderStyle('solid'),
+        ...shorthands.borderWidth(tokens.strokeWidthThin),
+        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
+    },
+    // Prevents CardHeader and CardFooter from shrinking.
+    [`> .${cardHeaderClassNames.root}, > .${cardFooterClassNames.root}`]: {
+        flexShrink: 0
+    }
+});
+const useCardStyles = makeStyles({
+    focused: {
+        ...createFocusOutlineStyle({
+            style: focusOutlineStyle,
+            selector: 'focus'
+        })
+    },
+    selectableFocused: createFocusOutlineStyle({
+        style: focusOutlineStyle,
+        selector: 'focus-within'
+    }),
+    orientationHorizontal: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // Remove vertical padding to keep CardPreview content flush with Card's borders.
+        [`> .${cardPreviewClassNames.root}`]: {
+            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
+            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
+        // As such, the code below targets a CardPreview, when it's the first element.
+        // Since this is on horizontal cards, the left padding is removed to keep the content flush with the border.
+        [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
+            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
+        // As such, the code below targets a CardPreview, when it's the last element.
+        // Since this is on horizontal cards, the right padding is removed to keep the content flush with the border.
+        [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
+            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
+        [`> .${cardHeaderClassNames.root}:last-of-type, > .${cardFooterClassNames.root}:last-of-type`]: {
+            flexGrow: 1
+        }
+    },
+    orientationVertical: {
+        flexDirection: 'column',
+        // Remove lateral padding to keep CardPreview content flush with Card's borders.
+        [`> .${cardPreviewClassNames.root}`]: {
+            marginLeft: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`,
+            marginRight: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
+        // As such, the code below targets a CardPreview, when it's the first element.
+        // Since this is on vertical cards, the top padding is removed to keep the content flush with the border.
+        [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:first-of-type`]: {
+            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        [`> .${cardClassNames.floatingAction} + .${cardPreviewClassNames.root}`]: {
+            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        // Due to Tabster's "Groupper" focus functionality, hidden elements are injected before and after Card's content.
+        // As such, the code below targets a CardPreview, when it's the first element.
+        // Since this is on vertical cards, the bottom padding is removed to keep the content flush with the border.
+        [`> :not([aria-hidden="true"]).${cardPreviewClassNames.root}:last-of-type`]: {
+            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        }
+    },
+    sizeSmall: {
+        [cardCSSVars.cardSizeVar]: '8px',
+        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusSmall
+    },
+    sizeMedium: {
+        [cardCSSVars.cardSizeVar]: '12px',
+        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusMedium
+    },
+    sizeLarge: {
+        [cardCSSVars.cardSizeVar]: '16px',
+        [cardCSSVars.cardBorderRadiusVar]: tokens.borderRadiusLarge
+    },
+    interactive: {
+        [`& .${textClassNames.root}`]: {
+            color: 'currentColor'
+        }
+    },
+    filled: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: tokens.shadow4,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        }
+    },
+    filledInteractive: {
+        cursor: 'pointer',
+        backgroundColor: tokens.colorNeutralBackground1,
+        boxShadow: tokens.shadow4,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            boxShadow: tokens.shadow8
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed
+        }
+    },
+    filledInteractiveSelected: {
+        backgroundColor: tokens.colorNeutralBackground1Selected,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Selected,
+            backgroundColor: tokens.colorNeutralBackground1Selected
+        }
+    },
+    filledAlternative: {
+        backgroundColor: tokens.colorNeutralBackground2,
+        boxShadow: tokens.shadow4,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        }
+    },
+    filledAlternativeInteractive: {
+        cursor: 'pointer',
+        backgroundColor: tokens.colorNeutralBackground2,
+        boxShadow: tokens.shadow4,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground2Hover,
+            backgroundColor: tokens.colorNeutralBackground2Hover,
+            boxShadow: tokens.shadow8
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground2Pressed
+        }
+    },
+    filledAlternativeInteractiveSelected: {
+        backgroundColor: tokens.colorNeutralBackground2Selected,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground2Selected,
+            backgroundColor: tokens.colorNeutralBackground2Selected
+        }
+    },
+    outline: {
+        backgroundColor: tokens.colorTransparentBackground,
+        boxShadow: 'none',
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1)
+        }
+    },
+    outlineInteractive: {
+        cursor: 'pointer',
+        backgroundColor: tokens.colorTransparentBackground,
+        boxShadow: 'none',
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorTransparentBackgroundHover,
+            '::after': {
+                ...shorthands.borderColor(tokens.colorNeutralStroke1Hover)
+            }
+        },
+        ':active': {
+            backgroundColor: tokens.colorTransparentBackgroundPressed,
+            '::after': {
+                ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed)
+            }
+        }
+    },
+    outlineInteractiveSelected: {
+        backgroundColor: tokens.colorTransparentBackgroundSelected,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Selected,
+            backgroundColor: tokens.colorTransparentBackgroundSelected
+        }
+    },
+    subtle: {
+        backgroundColor: tokens.colorSubtleBackground,
+        boxShadow: 'none',
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        }
+    },
+    subtleInteractive: {
+        cursor: 'pointer',
+        backgroundColor: tokens.colorSubtleBackground,
+        boxShadow: 'none',
+        '::after': {
+            ...shorthands.borderColor(tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Hover,
+            backgroundColor: tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            backgroundColor: tokens.colorSubtleBackgroundPressed
+        }
+    },
+    subtleInteractiveSelected: {
+        backgroundColor: tokens.colorSubtleBackgroundSelected,
+        '::after': {
+            ...shorthands.borderColor(tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: tokens.colorNeutralForeground1Selected,
+            backgroundColor: tokens.colorSubtleBackgroundSelected
+        }
+    },
+    highContrastSelected: {
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'none',
+            backgroundColor: 'Highlight',
+            color: 'HighlightText',
+            [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
+                forcedColorAdjust: 'auto'
+            },
+            '::after': {
+                ...shorthands.borderColor('Highlight')
+            }
+        }
+    },
+    highContrastInteractive: {
+        '@media (forced-colors: active)': {
+            ':hover, :active': {
+                forcedColorAdjust: 'none',
+                backgroundColor: 'Highlight',
+                color: 'HighlightText',
+                [`& .${cardPreviewClassNames.root}, & .${cardFooterClassNames.root}`]: {
+                    forcedColorAdjust: 'auto'
+                }
+            },
+            '::after': {
+                ...shorthands.borderColor('Highlight')
+            }
+        }
+    },
+    select: {
+        position: 'absolute',
+        top: '4px',
+        right: '4px',
+        zIndex: 1
+    },
+    hiddenCheckbox: {
+        overflow: 'hidden',
+        width: '1px',
+        height: '1px',
+        position: 'absolute',
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)',
+        whiteSpace: 'nowrap'
+    }
+});
+/**
+ * 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 = {
+        horizontal: styles.orientationHorizontal,
+        vertical: styles.orientationVertical
+    };
+    const sizeMap = {
+        small: styles.sizeSmall,
+        medium: styles.sizeMedium,
+        large: styles.sizeLarge
+    };
+    const appearanceMap = {
+        filled: styles.filled,
+        'filled-alternative': styles.filledAlternative,
+        outline: styles.outline,
+        subtle: styles.subtle
+    };
+    const selectedMap = {
+        filled: styles.filledInteractiveSelected,
+        'filled-alternative': styles.filledAlternativeInteractiveSelected,
+        outline: styles.outlineInteractiveSelected,
+        subtle: styles.subtleInteractiveSelected
+    };
+    const interactiveMap = {
+        filled: styles.filledInteractive,
+        'filled-alternative': styles.filledAlternativeInteractive,
+        outline: styles.outlineInteractive,
+        subtle: styles.subtleInteractive
+    };
+    const isSelectableOrInteractive = state.interactive || state.selectable;
+    const focusedClassName = React.useMemo(()=>{
+        if (state.selectable) {
+            if (state.selectFocused) {
+                return styles.selectableFocused;
+            }
+            return '';
+        }
+        return styles.focused;
+    }, [
+        state.selectFocused,
+        state.selectable,
+        styles.focused,
+        styles.selectableFocused
+    ]);
+    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.root.className);
+    if (state.floatingAction) {
+        state.floatingAction.className = mergeClasses(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
+    }
+    if (state.checkbox) {
+        state.checkbox.className = mergeClasses(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/useCardStyles.styles.ts"],"sourcesContent":["import * as React from '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 { FocusOutlineStyleOptions, 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 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\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: 1,\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\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.interactive || state.selectable;\n\n  const focusedClassName = React.useMemo(() => {\n    if (state.selectable) {\n      if (state.selectFocused) {\n        return styles.selectableFocused;\n      }\n\n      return '';\n    }\n\n    return styles.focused;\n  }, [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.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","useCardStyles","focused","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","filled","backgroundColor","colorNeutralBackground1","boxShadow","shadow4","borderColor","colorTransparentStroke","filledInteractive","cursor","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","subtle","colorSubtleBackground","subtleInteractive","colorSubtleBackgroundHover","colorSubtleBackgroundPressed","subtleInteractiveSelected","colorSubtleBackgroundSelected","highContrastSelected","forcedColorAdjust","highContrastInteractive","select","zIndex","hiddenCheckbox","width","height","clip","clipPath","whiteSpace","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,37 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */ export const cardFooterClassNames = {
+    root: 'fui-CardFooter',
+    action: 'fui-CardFooter__action'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '12px'
+    },
+    action: {
+        marginLeft: 'auto',
+        // when the card is selected or hovered, it has custom high contrast color and background styles
+        // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
+        '@media (forced-colors: active)': {
+            '& .fui-Button, & .fui-Link': {
+                ...shorthands.borderColor('currentColor'),
+                color: 'currentColor',
+                outlineColor: 'currentColor'
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the CardFooter slots based on the state.
+ */ export const useCardFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
+    if (state.action) {
+        state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,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"}

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

@@ -0,0 +1,103 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */ export const cardHeaderClassNames = {
+    root: 'fui-CardHeader',
+    image: 'fui-CardHeader__image',
+    header: 'fui-CardHeader__header',
+    description: 'fui-CardHeader__description',
+    action: 'fui-CardHeader__action'
+};
+/**
+ * CSS variable names used internally for uniform styling in CardHeader.
+ */ export const cardHeaderCSSVars = {
+    cardHeaderGapVar: '--fui-CardHeader--gap'
+};
+const useStyles = makeStyles({
+    root: {
+        [cardHeaderCSSVars.cardHeaderGapVar]: '12px',
+        alignItems: 'center'
+    },
+    image: {
+        display: 'inline-flex',
+        marginRight: `var(${cardHeaderCSSVars.cardHeaderGapVar})`
+    },
+    header: {
+        display: 'flex'
+    },
+    description: {
+        display: 'flex'
+    },
+    action: {
+        marginLeft: `var(${cardHeaderCSSVars.cardHeaderGapVar})`,
+        // when the card is selected or hovered, it has custom high contrast color and background styles
+        // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode
+        '@media (forced-colors: active)': {
+            '& .fui-Button, & .fui-Link': {
+                ...shorthands.borderColor('currentColor'),
+                color: 'currentColor',
+                outlineColor: 'currentColor'
+            }
+        }
+    }
+});
+const useStylesGrid = makeStyles({
+    root: {
+        display: 'grid',
+        gridAutoColumns: 'min-content 1fr min-content'
+    },
+    image: {
+        gridColumnStart: '1',
+        gridRowStart: 'span 2'
+    },
+    header: {
+        gridColumnStart: '2',
+        gridRowStart: '1'
+    },
+    description: {
+        gridColumnStart: '2',
+        gridRowStart: '2'
+    },
+    action: {
+        gridColumnStart: '3',
+        gridRowStart: 'span 2'
+    }
+});
+const useStylesFlex = makeStyles({
+    root: {
+        display: 'flex'
+    },
+    header: {
+        flexGrow: 1
+    },
+    image: {},
+    description: {},
+    action: {}
+});
+/**
+ * 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();
+    const boxModelStyles = state.description ? stylesGrid : stylesFlex;
+    const getSlotStyles = (slotName)=>{
+        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);
+    };
+    state.root.className = getSlotStyles('root');
+    if (state.image) {
+        state.image.className = getSlotStyles('image');
+    }
+    if (state.header) {
+        state.header.className = getSlotStyles('header');
+    }
+    if (state.description) {
+        state.description.className = getSlotStyles('description');
+    }
+    if (state.action) {
+        state.action.className = getSlotStyles('action');
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardHeader/useCardHeaderStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {\n  root: 'fui-CardHeader',\n  image: 'fui-CardHeader__image',\n  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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,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"}

package/lib/components/CardPreview/useCardPreviewStyles.styles.raw.js

@@ -0,0 +1,35 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+/**
+ * Static CSS class names used internally for the component slots.
+ */ export const cardPreviewClassNames = {
+    root: 'fui-CardPreview',
+    logo: 'fui-CardPreview__logo'
+};
+const useStyles = makeStyles({
+    root: {
+        position: 'relative',
+        [`> :not(.${cardPreviewClassNames.logo})`]: {
+            display: 'block',
+            height: '100%',
+            width: '100%'
+        }
+    },
+    logo: {
+        position: 'absolute',
+        bottom: '12px',
+        left: '12px',
+        width: '32px',
+        height: '32px'
+    }
+});
+/**
+ * Apply styling to the CardPreview slots based on the state.
+ */ export const useCardPreviewStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
+    if (state.logo) {
+        state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
+    }
+    return state;
+};