@fluentui/react-card 9.3.3 → 9.4.0

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

@@ -0,0 +1,382 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    cardCSSVars: function() {
+        return cardCSSVars;
+    },
+    cardClassNames: function() {
+        return cardClassNames;
+    },
+    useCardStyles_unstable: function() {
+        return useCardStyles_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttext = require("@fluentui/react-text");
+const _reacttabster = require("@fluentui/react-tabster");
+const _useCardPreviewStylesstyles = require("../CardPreview/useCardPreviewStyles.styles");
+const _useCardHeaderStylesstyles = require("../CardHeader/useCardHeaderStyles.styles");
+const _useCardFooterStylesstyles = require("../CardFooter/useCardFooterStyles.styles");
+const cardClassNames = {
+    root: 'fui-Card',
+    floatingAction: 'fui-Card__floatingAction',
+    checkbox: 'fui-Card__checkbox'
+};
+const cardCSSVars = {
+    cardSizeVar: '--fui-Card--size',
+    cardBorderRadiusVar: '--fui-Card--border-radius'
+};
+const focusOutlineStyle = {
+    outlineRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
+    outlineWidth: _reacttheme.tokens.strokeWidthThick,
+    outlineOffset: '-2px'
+};
+const useCardResetStyles = (0, _react1.makeResetStyles)({
+    overflow: 'hidden',
+    borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`,
+    padding: `var(${cardCSSVars.cardSizeVar})`,
+    gap: `var(${cardCSSVars.cardSizeVar})`,
+    display: 'flex',
+    position: 'relative',
+    boxSizing: 'border-box',
+    color: _reacttheme.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',
+        ..._react1.shorthands.borderStyle('solid'),
+        ..._react1.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin),
+        borderRadius: `var(${cardCSSVars.cardBorderRadiusVar})`
+    },
+    // Prevents CardHeader and CardFooter from shrinking.
+    [`> .${_useCardHeaderStylesstyles.cardHeaderClassNames.root}, > .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
+        flexShrink: 0
+    }
+});
+const useCardStyles = (0, _react1.makeStyles)({
+    focused: {
+        ...(0, _reacttabster.createFocusOutlineStyle)({
+            style: focusOutlineStyle,
+            selector: 'focus'
+        })
+    },
+    selectableFocused: (0, _reacttabster.createFocusOutlineStyle)({
+        style: focusOutlineStyle,
+        selector: 'focus-within'
+    }),
+    orientationHorizontal: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        // Remove vertical padding to keep CardPreview content flush with Card's borders.
+        [`> .${_useCardPreviewStylesstyles.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"]).${_useCardPreviewStylesstyles.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"]).${_useCardPreviewStylesstyles.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.
+        [`> .${_useCardHeaderStylesstyles.cardHeaderClassNames.root}:last-of-type, > .${_useCardFooterStylesstyles.cardFooterClassNames.root}:last-of-type`]: {
+            flexGrow: 1
+        }
+    },
+    orientationVertical: {
+        flexDirection: 'column',
+        // Remove lateral padding to keep CardPreview content flush with Card's borders.
+        [`> .${_useCardPreviewStylesstyles.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"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:first-of-type`]: {
+            marginTop: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        },
+        [`> .${cardClassNames.floatingAction} + .${_useCardPreviewStylesstyles.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"]).${_useCardPreviewStylesstyles.cardPreviewClassNames.root}:last-of-type`]: {
+            marginBottom: `calc(var(${cardCSSVars.cardSizeVar}) * -1)`
+        }
+    },
+    sizeSmall: {
+        [cardCSSVars.cardSizeVar]: '8px',
+        [cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusSmall
+    },
+    sizeMedium: {
+        [cardCSSVars.cardSizeVar]: '12px',
+        [cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusMedium
+    },
+    sizeLarge: {
+        [cardCSSVars.cardSizeVar]: '16px',
+        [cardCSSVars.cardBorderRadiusVar]: _reacttheme.tokens.borderRadiusLarge
+    },
+    interactive: {
+        [`& .${_reacttext.textClassNames.root}`]: {
+            color: 'currentColor'
+        }
+    },
+    filled: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        boxShadow: _reacttheme.tokens.shadow4,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        }
+    },
+    filledInteractive: {
+        cursor: 'pointer',
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        boxShadow: _reacttheme.tokens.shadow4,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+            boxShadow: _reacttheme.tokens.shadow8
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed
+        }
+    },
+    filledInteractiveSelected: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Selected,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected
+        }
+    },
+    filledAlternative: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
+        boxShadow: _reacttheme.tokens.shadow4,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        }
+    },
+    filledAlternativeInteractive: {
+        cursor: 'pointer',
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground2,
+        boxShadow: _reacttheme.tokens.shadow4,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground2Hover,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground2Hover,
+            boxShadow: _reacttheme.tokens.shadow8
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground2Pressed
+        }
+    },
+    filledAlternativeInteractiveSelected: {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground2Selected,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground2Selected,
+            backgroundColor: _reacttheme.tokens.colorNeutralBackground2Selected
+        }
+    },
+    outline: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        boxShadow: 'none',
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
+        }
+    },
+    outlineInteractive: {
+        cursor: 'pointer',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        boxShadow: 'none',
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundHover,
+            '::after': {
+                ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Hover)
+            }
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundPressed,
+            '::after': {
+                ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Pressed)
+            }
+        }
+    },
+    outlineInteractiveSelected: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Selected,
+            backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected
+        }
+    },
+    subtle: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        boxShadow: 'none',
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        }
+    },
+    subtleInteractive: {
+        cursor: 'pointer',
+        backgroundColor: _reacttheme.tokens.colorSubtleBackground,
+        boxShadow: 'none',
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorTransparentStroke)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+        }
+    },
+    subtleInteractiveSelected: {
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        '::after': {
+            ..._react1.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected)
+        },
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Selected,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected
+        }
+    },
+    highContrastSelected: {
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'none',
+            backgroundColor: 'Highlight',
+            color: 'HighlightText',
+            [`& .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}, & .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
+                forcedColorAdjust: 'auto'
+            },
+            '::after': {
+                ..._react1.shorthands.borderColor('Highlight')
+            }
+        }
+    },
+    highContrastInteractive: {
+        '@media (forced-colors: active)': {
+            ':hover, :active': {
+                forcedColorAdjust: 'none',
+                backgroundColor: 'Highlight',
+                color: 'HighlightText',
+                [`& .${_useCardPreviewStylesstyles.cardPreviewClassNames.root}, & .${_useCardFooterStylesstyles.cardFooterClassNames.root}`]: {
+                    forcedColorAdjust: 'auto'
+                }
+            },
+            '::after': {
+                ..._react1.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'
+    }
+});
+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 = (0, _react1.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 = (0, _react1.mergeClasses)(cardClassNames.floatingAction, styles.select, state.floatingAction.className);
+    }
+    if (state.checkbox) {
+        state.checkbox.className = (0, _react1.mergeClasses)(cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["cardCSSVars","cardClassNames","useCardStyles_unstable","root","floatingAction","checkbox","cardSizeVar","cardBorderRadiusVar","focusOutlineStyle","outlineRadius","outlineWidth","tokens","strokeWidthThick","outlineOffset","useCardResetStyles","makeResetStyles","overflow","borderRadius","padding","gap","display","position","boxSizing","color","colorNeutralForeground1","top","left","right","bottom","content","pointerEvents","shorthands","borderStyle","borderWidth","strokeWidthThin","cardHeaderClassNames","cardFooterClassNames","flexShrink","useCardStyles","makeStyles","focused","createFocusOutlineStyle","style","selector","selectableFocused","orientationHorizontal","flexDirection","alignItems","cardPreviewClassNames","marginTop","marginBottom","marginLeft","marginRight","flexGrow","orientationVertical","sizeSmall","borderRadiusSmall","sizeMedium","borderRadiusMedium","sizeLarge","borderRadiusLarge","interactive","textClassNames","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","state","resetStyles","styles","orientationMap","horizontal","vertical","sizeMap","small","medium","large","appearanceMap","selectedMap","interactiveMap","isSelectableOrInteractive","selectable","focusedClassName","React","useMemo","selectFocused","className","mergeClasses","orientation","size","appearance","selected"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    cardFooterClassNames: function() {
+        return cardFooterClassNames;
+    },
+    useCardFooterStyles_unstable: function() {
+        return useCardFooterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const cardFooterClassNames = {
+    root: 'fui-CardFooter',
+    action: 'fui-CardFooter__action'
+};
+const useStyles = (0, _react.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': {
+                ..._react.shorthands.borderColor('currentColor'),
+                color: 'currentColor',
+                outlineColor: 'currentColor'
+            }
+        }
+    }
+});
+const useCardFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(cardFooterClassNames.root, styles.root, state.root.className);
+    if (state.action) {
+        state.action.className = (0, _react.mergeClasses)(cardFooterClassNames.action, styles.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/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":["cardFooterClassNames","useCardFooterStyles_unstable","root","action","useStyles","makeStyles","display","flexDirection","gap","marginLeft","shorthands","borderColor","color","outlineColor","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAOaA,oBAAAA;eAAAA;;IA6BAC,4BAAAA;eAAAA;;;uBAnCwC;AAM9C,MAAMD,uBAAwD;IACnEE,MAAM;IACNC,QAAQ;AACV;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BH,MAAM;QACJI,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAL,QAAQ;QACNM,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAKO,MAAMZ,+BAA+B,CAACa;IAC3C;IAEA,MAAMC,SAASX;IACfU,MAAMZ,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAAA,EAAajB,qBAAqBE,IAAI,EAAEa,OAAOb,IAAI,EAAEY,MAAMZ,IAAI,CAACc,SAAS;IAEhG,IAAIF,MAAMX,MAAM,EAAE;QAChBW,MAAMX,MAAM,CAACa,SAAS,GAAGC,IAAAA,mBAAAA,EAAajB,qBAAqBG,MAAM,EAAEY,OAAOZ,MAAM,EAAEW,MAAMX,MAAM,CAACa,SAAS;IAC1G;IAEA,OAAOF;AACT"}

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    cardHeaderCSSVars: function() {
+        return cardHeaderCSSVars;
+    },
+    cardHeaderClassNames: function() {
+        return cardHeaderClassNames;
+    },
+    useCardHeaderStyles_unstable: function() {
+        return useCardHeaderStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const cardHeaderClassNames = {
+    root: 'fui-CardHeader',
+    image: 'fui-CardHeader__image',
+    header: 'fui-CardHeader__header',
+    description: 'fui-CardHeader__description',
+    action: 'fui-CardHeader__action'
+};
+const cardHeaderCSSVars = {
+    cardHeaderGapVar: '--fui-CardHeader--gap'
+};
+const useStyles = (0, _react.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': {
+                ..._react.shorthands.borderColor('currentColor'),
+                color: 'currentColor',
+                outlineColor: 'currentColor'
+            }
+        }
+    }
+});
+const useStylesGrid = (0, _react.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 = (0, _react.makeStyles)({
+    root: {
+        display: 'flex'
+    },
+    header: {
+        flexGrow: 1
+    },
+    image: {},
+    description: {},
+    action: {}
+});
+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 (0, _react.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-commonjs/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":["cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable","root","image","header","description","action","cardHeaderGapVar","useStyles","makeStyles","alignItems","display","marginRight","marginLeft","shorthands","borderColor","color","outlineColor","useStylesGrid","gridAutoColumns","gridColumnStart","gridRowStart","useStylesFlex","flexGrow","state","styles","stylesGrid","stylesFlex","boxModelStyles","getSlotStyles","slotName","mergeClasses","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkBaA,iBAAAA;eAAAA;;IAXAC,oBAAAA;eAAAA;;IAyFAC,4BAAAA;eAAAA;;;uBA/FwC;AAM9C,MAAMD,uBAAwD;IACnEE,MAAM;IACNC,OAAO;IACPC,QAAQ;IACRC,aAAa;IACbC,QAAQ;AACV;AAKO,MAAMP,oBAAoB;IAC/BQ,kBAAkB;AACpB;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAkC;IAClDP,MAAM;QACJ,CAACH,kBAAkBQ,gBAAgB,CAAC,EAAE;QACtCG,YAAY;IACd;IACAP,OAAO;QACLQ,SAAS;QACTC,aAAa,CAAC,IAAI,EAAEb,kBAAkBQ,gBAAgB,CAAC,CAAC,CAAC;IAC3D;IACAH,QAAQ;QACNO,SAAS;IACX;IACAN,aAAa;QACXM,SAAS;IACX;IACAL,QAAQ;QACNO,YAAY,CAAC,IAAI,EAAEd,kBAAkBQ,gBAAgB,CAAC,CAAC,CAAC;QAExD,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGO,iBAAAA,CAAWC,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAEA,MAAMC,gBAAgBT,IAAAA,iBAAAA,EAAkC;IACtDP,MAAM;QACJS,SAAS;QACTQ,iBAAiB;IACnB;IAEAhB,OAAO;QACLiB,iBAAiB;QACjBC,cAAc;IAChB;IAEAjB,QAAQ;QACNgB,iBAAiB;QACjBC,cAAc;IAChB;IAEAhB,aAAa;QACXe,iBAAiB;QACjBC,cAAc;IAChB;IAEAf,QAAQ;QACNc,iBAAiB;QACjBC,cAAc;IAChB;AACF;AAEA,MAAMC,gBAAgBb,IAAAA,iBAAAA,EAAkC;IACtDP,MAAM;QACJS,SAAS;IACX;IAEAP,QAAQ;QACNmB,UAAU;IACZ;IAEApB,OAAO,CAAC;IACRE,aAAa,CAAC;IACdC,QAAQ,CAAC;AACX;AAKO,MAAML,+BAA+B,CAACuB;IAC3C;IAEA,MAAMC,SAASjB;IACf,MAAMkB,aAAaR;IACnB,MAAMS,aAAaL;IAEnB,MAAMM,iBAAiBJ,MAAMnB,WAAW,GAAGqB,aAAaC;IAExD,MAAME,gBAAgB,CAACC;YAKnBN;QAJF,OAAOO,IAAAA,mBAAAA,EACL/B,oBAAoB,CAAC8B,SAAS,EAC9BL,MAAM,CAACK,SAAS,EAChBF,cAAc,CAACE,SAAS,EAAA,AACxBN,CAAAA,kBAAAA,KAAK,CAACM,SAAS,AAATA,MAAS,QAAfN,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAiBQ,SAAS;IAE9B;IAEAR,MAAMtB,IAAI,CAAC8B,SAAS,GAAGH,cAAc;IAErC,IAAIL,MAAMrB,KAAK,EAAE;QACfqB,MAAMrB,KAAK,CAAC6B,SAAS,GAAGH,cAAc;IACxC;IAEA,IAAIL,MAAMpB,MAAM,EAAE;QAChBoB,MAAMpB,MAAM,CAAC4B,SAAS,GAAGH,cAAc;IACzC;IAEA,IAAIL,MAAMnB,WAAW,EAAE;QACrBmB,MAAMnB,WAAW,CAAC2B,SAAS,GAAGH,cAAc;IAC9C;IAEA,IAAIL,MAAMlB,MAAM,EAAE;QAChBkB,MAAMlB,MAAM,CAAC0B,SAAS,GAAGH,cAAc;IACzC;IAEA,OAAOL;AACT"}