@fluentui/react-card 9.0.0-rc.1 → 9.0.0

package/lib-amd/components/Card/useCardStyles.js

@@ -0,0 +1,253 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme", "@fluentui/react-tabster", "../CardPreview/useCardPreviewStyles", "../CardHeader/useCardHeaderStyles", "../CardFooter/useCardFooterStyles"], function (require, exports, tslib_1, react_1, react_theme_1, react_tabster_1, useCardPreviewStyles_1, useCardHeaderStyles_1, useCardFooterStyles_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardStyles_unstable = exports.cardCSSVars = exports.cardClassNames = void 0;
+    /**
+     * Static CSS class names used internally for the component slots.
+     */
+    exports.cardClassNames = {
+        root: 'fui-Card',
+        floatingAction: 'fui-Card__floatingAction',
+        checkbox: 'fui-Card__checkbox',
+    };
+    /**
+     * CSS variable names used internally for uniform styling in Card.
+     */
+    exports.cardCSSVars = {
+        cardSizeVar: '--fui-Card--size',
+        cardBorderRadiusVar: '--fui-Card--border-radius',
+    };
+    var focusOutlineStyle = {
+        outlineRadius: "var(" + exports.cardCSSVars.cardBorderRadiusVar + ")",
+        outlineWidth: react_theme_1.tokens.strokeWidthThick,
+    };
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.overflow('hidden')), react_1.shorthands.borderRadius("var(" + exports.cardCSSVars.cardBorderRadiusVar + ")")), react_1.shorthands.padding("var(" + exports.cardCSSVars.cardSizeVar + ")")), react_1.shorthands.gap("var(" + exports.cardCSSVars.cardSizeVar + ")")), (_a = { display: 'flex', position: 'relative', boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, 
+                // Border setting using after pseudo element to allow CardPreview to render behind it.
+                '::after': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, content: '""', pointerEvents: 'none' }, react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth(react_theme_1.tokens.strokeWidthThin)), react_1.shorthands.borderRadius("var(" + exports.cardCSSVars.cardBorderRadiusVar + ")")) }, _a["> ." + useCardHeaderStyles_1.cardHeaderClassNames.root + ", > ." + useCardFooterStyles_1.cardFooterClassNames.root] = {
+            flexShrink: 0,
+        }, _a["> :not(." + useCardPreviewStyles_1.cardPreviewClassNames.root + "):not(." + useCardHeaderStyles_1.cardHeaderClassNames.root + "):not(." + useCardFooterStyles_1.cardFooterClassNames.root + ")"] = {
+            flexGrow: 1,
+        }, _a)), react_tabster_1.createFocusOutlineStyle({
+            style: focusOutlineStyle,
+            selector: 'focus',
+        })),
+        selectableFocused: react_tabster_1.createFocusOutlineStyle({
+            style: focusOutlineStyle,
+            selector: 'focus-within',
+        }),
+        orientationHorizontal: (_b = {
+                flexDirection: 'row',
+                alignItems: 'center'
+            },
+            // Remove vertical padding to keep CardPreview content flush with Card's borders.
+            _b["> ." + useCardPreviewStyles_1.cardPreviewClassNames.root] = {
+                marginTop: "calc(var(" + exports.cardCSSVars.cardSizeVar + ") * -1)",
+                marginBottom: "calc(var(" + exports.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.
+            _b["> :not([aria-hidden=\"true\"])." + useCardPreviewStyles_1.cardPreviewClassNames.root + ":first-of-type"] = {
+                marginLeft: "calc(var(" + exports.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.
+            _b["> :not([aria-hidden=\"true\"])." + useCardPreviewStyles_1.cardPreviewClassNames.root + ":last-of-type"] = {
+                marginRight: "calc(var(" + exports.cardCSSVars.cardSizeVar + ") * -1)",
+            },
+            // If the last child is a CardHeader or CardFooter, allow it to grow to fill the available space.
+            _b["> ." + useCardHeaderStyles_1.cardHeaderClassNames.root + ":last-of-type, > ." + useCardFooterStyles_1.cardFooterClassNames.root + ":last-of-type"] = {
+                flexGrow: 1,
+            },
+            _b),
+        orientationVertical: (_c = {
+                flexDirection: 'column'
+            },
+            // Remove lateral padding to keep CardPreview content flush with Card's borders.
+            _c["> ." + useCardPreviewStyles_1.cardPreviewClassNames.root] = {
+                marginLeft: "calc(var(" + exports.cardCSSVars.cardSizeVar + ") * -1)",
+                marginRight: "calc(var(" + exports.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.
+            _c["> :not([aria-hidden=\"true\"])." + useCardPreviewStyles_1.cardPreviewClassNames.root + ":first-of-type"] = {
+                marginTop: "calc(var(" + exports.cardCSSVars.cardSizeVar + ") * -1)",
+            },
+            _c["> ." + exports.cardClassNames.floatingAction + " + ." + useCardPreviewStyles_1.cardPreviewClassNames.root] = {
+                marginTop: "calc(var(" + exports.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.
+            _c["> :not([aria-hidden=\"true\"])." + useCardPreviewStyles_1.cardPreviewClassNames.root + ":last-of-type"] = {
+                marginBottom: "calc(var(" + exports.cardCSSVars.cardSizeVar + ") * -1)",
+            },
+            _c),
+        sizeSmall: (_d = {},
+            _d[exports.cardCSSVars.cardSizeVar] = '8px',
+            _d[exports.cardCSSVars.cardBorderRadiusVar] = react_theme_1.tokens.borderRadiusSmall,
+            _d),
+        sizeMedium: (_e = {},
+            _e[exports.cardCSSVars.cardSizeVar] = '12px',
+            _e[exports.cardCSSVars.cardBorderRadiusVar] = react_theme_1.tokens.borderRadiusMedium,
+            _e),
+        sizeLarge: (_f = {},
+            _f[exports.cardCSSVars.cardSizeVar] = '16px',
+            _f[exports.cardCSSVars.cardBorderRadiusVar] = react_theme_1.tokens.borderRadiusLarge,
+            _f),
+        filled: {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+            boxShadow: react_theme_1.tokens.shadow4,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+        },
+        filledInteractive: {
+            cursor: 'pointer',
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+            boxShadow: react_theme_1.tokens.shadow4,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
+                boxShadow: react_theme_1.tokens.shadow8,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
+            },
+        },
+        filledInteractiveSelected: {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1Selected,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Selected,
+            },
+        },
+        filledAlternative: {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground2,
+            boxShadow: react_theme_1.tokens.shadow4,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+        },
+        filledAlternativeInteractive: {
+            cursor: 'pointer',
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground2,
+            boxShadow: react_theme_1.tokens.shadow4,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground2Hover,
+                boxShadow: react_theme_1.tokens.shadow8,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground2Pressed,
+            },
+        },
+        filledAlternativeInteractiveSelected: {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground2Selected,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground2Selected,
+            },
+        },
+        outline: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            boxShadow: 'none',
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1)),
+        },
+        outlineInteractive: {
+            cursor: 'pointer',
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            boxShadow: 'none',
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
+                '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)),
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
+                '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)),
+            },
+        },
+        outlineInteractiveSelected: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackgroundSelected,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundSelected,
+            },
+        },
+        subtle: {
+            backgroundColor: react_theme_1.tokens.colorSubtleBackground,
+            boxShadow: 'none',
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+        },
+        subtleInteractive: {
+            cursor: 'pointer',
+            backgroundColor: react_theme_1.tokens.colorSubtleBackground,
+            boxShadow: 'none',
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover,
+            },
+            ':active': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed,
+            },
+        },
+        subtleInteractiveSelected: {
+            backgroundColor: react_theme_1.tokens.colorSubtleBackgroundSelected,
+            '::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Selected)),
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorSubtleBackgroundSelected,
+            },
+        },
+        select: {
+            position: 'absolute',
+            top: '4px',
+            right: '4px',
+            zIndex: 1,
+        },
+        hiddenCheckbox: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.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.
+     */
+    var useCardStyles_unstable = function (state) {
+        var styles = useStyles();
+        var orientationMap = {
+            horizontal: styles.orientationHorizontal,
+            vertical: styles.orientationVertical,
+        };
+        var sizeMap = {
+            small: styles.sizeSmall,
+            medium: styles.sizeMedium,
+            large: styles.sizeLarge,
+        };
+        var appearanceMap = {
+            filled: styles.filled,
+            'filled-alternative': styles.filledAlternative,
+            outline: styles.outline,
+            subtle: styles.subtle,
+        };
+        var selectedMap = {
+            filled: styles.filledInteractiveSelected,
+            'filled-alternative': styles.filledAlternativeInteractiveSelected,
+            outline: styles.outlineInteractiveSelected,
+            subtle: styles.subtleInteractiveSelected,
+        };
+        var interactiveMap = {
+            filled: styles.filledInteractive,
+            'filled-alternative': styles.filledAlternativeInteractive,
+            outline: styles.outlineInteractive,
+            subtle: styles.subtleInteractive,
+        };
+        state.root.className = react_1.mergeClasses(exports.cardClassNames.root, styles.root, orientationMap[state.orientation], sizeMap[state.size], appearanceMap[state.appearance], (state.interactive || state.selectable) && interactiveMap[state.appearance], state.selected && selectedMap[state.appearance], state.selectFocused && styles.selectableFocused, state.root.className);
+        if (state.floatingAction) {
+            state.floatingAction.className = react_1.mergeClasses(exports.cardClassNames.floatingAction, styles.select, state.floatingAction.className);
+        }
+        if (state.checkbox) {
+            state.checkbox.className = react_1.mergeClasses(exports.cardClassNames.checkbox, styles.hiddenCheckbox, state.checkbox.className);
+        }
+        return state;
+    };
+    exports.useCardStyles_unstable = useCardStyles_unstable;
+});
+//# sourceMappingURL=useCardStyles.js.map

package/lib-amd/components/Card/useCardStyles.js.map

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

package/lib-amd/components/CardFooter/CardFooter.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useCardFooter", "./renderCardFooter", "./useCardFooterStyles"], function (require, exports, React, useCardFooter_1, renderCardFooter_1, useCardFooterStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CardFooter = void 0;
+    /**
+     * Component to render Button actions in a Card component.
+     */
+    exports.CardFooter = React.forwardRef(function (props, ref) {
+        var state = useCardFooter_1.useCardFooter_unstable(props, ref);
+        useCardFooterStyles_1.useCardFooterStyles_unstable(state);
+        return renderCardFooter_1.renderCardFooter_unstable(state);
+    });
+    exports.CardFooter.displayName = 'CardFooter';
+});
+//# sourceMappingURL=CardFooter.js.map

package/lib-amd/components/CardFooter/CardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/CardFooter.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render Button actions in a Card component.\n */\nexport const CardFooter: ForwardRefComponent<CardFooterProps> = React.forwardRef((props, ref) => {\n  const state = useCardFooter_unstable(props, ref);\n\n  useCardFooterStyles_unstable(state);\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"]}

package/lib-amd/components/CardFooter/CardFooter.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=CardFooter.types.js.map

package/lib-amd/components/CardFooter/CardFooter.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardFooter.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/CardFooter.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardFooter component.\n */\nexport type CardFooterSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardFooter component props.\n */\nexport type CardFooterProps = ComponentProps<CardFooterSlots>;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n"]}

package/lib-amd/components/CardFooter/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./CardFooter", "./CardFooter.types", "./renderCardFooter", "./useCardFooter", "./useCardFooterStyles"], function (require, exports, tslib_1, CardFooter_1, CardFooter_types_1, renderCardFooter_1, useCardFooter_1, useCardFooterStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(CardFooter_1, exports);
+    tslib_1.__exportStar(CardFooter_types_1, exports);
+    tslib_1.__exportStar(renderCardFooter_1, exports);
+    tslib_1.__exportStar(useCardFooter_1, exports);
+    tslib_1.__exportStar(useCardFooterStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/CardFooter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B;IAC7B,kDAAmC;IACnC,kDAAmC;IACnC,+CAAgC;IAChC,qDAAsC","sourcesContent":["export * from './CardFooter';\nexport * from './CardFooter.types';\nexport * from './renderCardFooter';\nexport * from './useCardFooter';\nexport * from './useCardFooterStyles';\n"]}

package/lib-amd/components/CardFooter/renderCardFooter.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCardFooter_unstable = void 0;
+    /**
+     * Render the final JSX of CardFooter.
+     */
+    var renderCardFooter_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slotProps.root.children,
+            slots.action && React.createElement(slots.action, tslib_1.__assign({}, slotProps.action))));
+    };
+    exports.renderCardFooter_unstable = renderCardFooter_unstable;
+});
+//# sourceMappingURL=renderCardFooter.js.map

package/lib-amd/components/CardFooter/renderCardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCardFooter.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/renderCardFooter.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB;QACxD,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QAE9D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,SAAS,CAAC,IAAI,CAAC,QAAQ;YACvB,KAAK,CAAC,MAAM,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI,CAC5C,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,yBAAyB,6BASpC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterState) => {\n  const { slots, slotProps } = getSlots<CardFooterSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/CardFooter/useCardFooter.js

@@ -0,0 +1,27 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardFooter_unstable = void 0;
+    /**
+     * Create the state required to render CardFooter.
+     *
+     * The returned state can be modified with hooks such as useCardFooterStyles_unstable,
+     * before being passed to renderCardFooter_unstable.
+     *
+     * @param props - props from this instance of CardFooter
+     * @param ref - reference to root HTMLElement of CardFooter
+     */
+    var useCardFooter_unstable = function (props, ref) {
+        var action = props.action;
+        return {
+            components: {
+                root: 'div',
+                action: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
+            action: react_utilities_1.resolveShorthand(action),
+        };
+    };
+    exports.useCardFooter_unstable = useCardFooter_unstable;
+});
+//# sourceMappingURL=useCardFooter.js.map

package/lib-amd/components/CardFooter/useCardFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardFooter.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAsB,EAAE,GAA2B;QAChF,IAAA,MAAM,GAAK,KAAK,OAAV,CAAW;QAEzB,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,MAAM,EAAE,KAAK;aACd;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,IACA,KAAK,EACR;YACF,MAAM,EAAE,kCAAgB,CAAC,MAAM,CAAC;SACjC,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,sBAAsB,0BAejC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { CardFooterProps, CardFooterState } from './CardFooter.types';\n\n/**\n * Create the state required to render CardFooter.\n *\n * The returned state can be modified with hooks such as useCardFooterStyles_unstable,\n * before being passed to renderCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HTMLElement>): CardFooterState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    action: resolveShorthand(action),\n  };\n};\n"]}

package/lib-amd/components/CardFooter/useCardFooterStyles.js

@@ -0,0 +1,31 @@
+define(["require", "exports", "tslib", "@griffel/react"], function (require, exports, tslib_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardFooterStyles_unstable = exports.cardFooterClassNames = void 0;
+    /**
+     * Static CSS class names used internally for the component slots.
+     */
+    exports.cardFooterClassNames = {
+        root: 'fui-CardFooter',
+        action: 'fui-CardFooter__action',
+    };
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign({ display: 'flex', flexDirection: 'row' }, react_1.shorthands.gap('12px')),
+        action: {
+            marginLeft: 'auto',
+        },
+    });
+    /**
+     * Apply styling to the CardFooter slots based on the state.
+     */
+    var useCardFooterStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.cardFooterClassNames.root, styles.root, state.root.className);
+        if (state.action) {
+            state.action.className = react_1.mergeClasses(exports.cardFooterClassNames.action, styles.action, state.action.className);
+        }
+        return state;
+    };
+    exports.useCardFooterStyles_unstable = useCardFooterStyles_unstable;
+});
+//# sourceMappingURL=useCardFooterStyles.js.map

package/lib-amd/components/CardFooter/useCardFooterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardFooterStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardFooter/useCardFooterStyles.ts"],"names":[],"mappings":";;;;IAIA;;OAEG;IACU,QAAA,oBAAoB,GAAoC;QACnE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,wBAAwB;KACjC,CAAC;IAEF,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,qBACF,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,KAAK,IACjB,kBAAU,CAAC,GAAG,CAAC,MAAM,CAAC,CAC1B;QACD,MAAM,EAAE;YACN,UAAU,EAAE,MAAM;SACnB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,4BAA4B,GAAG,UAAC,KAAsB;QACjE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAElG,IAAI,KAAK,CAAC,MAAM,EAAE;YAChB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG,oBAAY,CAAC,4BAAoB,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;SAC3G;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IATW,QAAA,4BAA4B,gCASvC","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    ...shorthands.gap('12px'),\n  },\n  action: {\n    marginLeft: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  const styles = useStyles();\n  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"]}

package/lib-amd/components/CardHeader/CardHeader.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useCardHeader", "./renderCardHeader", "./useCardHeaderStyles"], function (require, exports, React, useCardHeader_1, renderCardHeader_1, useCardHeaderStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CardHeader = void 0;
+    /**
+     * Component to render an image, text and an action in a Card component.
+     */
+    exports.CardHeader = React.forwardRef(function (props, ref) {
+        var state = useCardHeader_1.useCardHeader_unstable(props, ref);
+        useCardHeaderStyles_1.useCardHeaderStyles_unstable(state);
+        return renderCardHeader_1.renderCardHeader_unstable(state);
+    });
+    exports.CardHeader.displayName = 'CardHeader';
+});
+//# sourceMappingURL=CardHeader.js.map

package/lib-amd/components/CardHeader/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/CardHeader.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,UAAU,GAAyC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,sCAAsB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEjD,kDAA4B,CAAC,KAAK,CAAC,CAAC;QACpC,OAAO,4CAAyB,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Component to render an image, text and an action in a Card component.\n */\nexport const CardHeader: ForwardRefComponent<CardHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useCardHeader_unstable(props, ref);\n\n  useCardHeaderStyles_unstable(state);\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"]}

package/lib-amd/components/CardHeader/CardHeader.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=CardHeader.types.js.map

package/lib-amd/components/CardHeader/CardHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/CardHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\n/**\n * Slots available in the CardHeader component.\n */\nexport type CardHeaderSlots = {\n  /**\n   * Root element of the component.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Element used to render an image or avatar related to the card.\n   */\n  image: Slot<'div', 'img'>;\n\n  /**\n   * Element used to render the main header title.\n   */\n  header: Slot<'div'>;\n\n  /**\n   * Element used to render short descriptions related to the title.\n   */\n  description: Slot<'div'>;\n\n  /**\n   * Container that renders on the far end of the footer, used for action buttons.\n   */\n  action?: Slot<'div'>;\n};\n\n/**\n * CardHeader component props.\n */\nexport type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n"]}

package/lib-amd/components/CardHeader/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./CardHeader", "./CardHeader.types", "./renderCardHeader", "./useCardHeader", "./useCardHeaderStyles"], function (require, exports, tslib_1, CardHeader_1, CardHeader_types_1, renderCardHeader_1, useCardHeader_1, useCardHeaderStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(CardHeader_1, exports);
+    tslib_1.__exportStar(CardHeader_types_1, exports);
+    tslib_1.__exportStar(renderCardHeader_1, exports);
+    tslib_1.__exportStar(useCardHeader_1, exports);
+    tslib_1.__exportStar(useCardHeaderStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/CardHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/index.ts"],"names":[],"mappings":";;;IAAA,4CAA6B;IAC7B,kDAAmC;IACnC,kDAAmC;IACnC,+CAAgC;IAChC,qDAAsC","sourcesContent":["export * from './CardHeader';\nexport * from './CardHeader.types';\nexport * from './renderCardHeader';\nexport * from './useCardHeader';\nexport * from './useCardHeaderStyles';\n"]}

package/lib-amd/components/CardHeader/renderCardHeader.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderCardHeader_unstable = void 0;
+    /**
+     * Render the final JSX of CardHeader.
+     */
+    var renderCardHeader_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.image && React.createElement(slots.image, tslib_1.__assign({}, slotProps.image)),
+            React.createElement(slots.header, tslib_1.__assign({}, slotProps.header)),
+            slots.description && React.createElement(slots.description, tslib_1.__assign({}, slotProps.description)),
+            slots.action && React.createElement(slots.action, tslib_1.__assign({}, slotProps.action))));
+    };
+    exports.renderCardHeader_unstable = renderCardHeader_unstable;
+});
+//# sourceMappingURL=renderCardHeader.js.map

package/lib-amd/components/CardHeader/renderCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCardHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/renderCardHeader.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAsB;QACxD,IAAA,KAAuB,0BAAQ,CAAkB,KAAK,CAAC,EAArD,KAAK,WAAA,EAAE,SAAS,eAAqC,CAAC;QAE9D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YACpD,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI;YACrC,KAAK,CAAC,WAAW,IAAI,oBAAC,KAAK,CAAC,WAAW,uBAAK,SAAS,CAAC,WAAW,EAAI;YACrE,KAAK,CAAC,MAAM,IAAI,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,EAAI,CAC5C,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,yBAAyB,6BAWpC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderState) => {\n  const { slots, slotProps } = getSlots<CardHeaderSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.image && <slots.image {...slotProps.image} />}\n      <slots.header {...slotProps.header} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      {slots.action && <slots.action {...slotProps.action} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/CardHeader/useCardHeader.js

@@ -0,0 +1,48 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "../Card/CardContext", "./useCardHeaderStyles"], function (require, exports, tslib_1, React, react_utilities_1, CardContext_1, useCardHeaderStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useCardHeader_unstable = void 0;
+    /**
+     * Create the state required to render CardHeader.
+     *
+     * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,
+     * before being passed to renderCardHeader_unstable.
+     *
+     * @param props - props from this instance of CardHeader
+     * @param ref - reference to root HTMLElement of CardHeader
+     */
+    var useCardHeader_unstable = function (props, ref) {
+        var image = props.image, header = props.header, description = props.description, action = props.action;
+        var _a = CardContext_1.useCardContext_unstable().selectableA11yProps, referenceId = _a.referenceId, setReferenceId = _a.setReferenceId;
+        var headerRef = React.useRef(null);
+        var generatedId = react_utilities_1.useId(useCardHeaderStyles_1.cardHeaderClassNames.header, referenceId);
+        React.useEffect(function () {
+            if (header && headerRef.current) {
+                var id = headerRef.current.id;
+                setReferenceId(id ? id : generatedId);
+            }
+        }, [header, setReferenceId, generatedId]);
+        return {
+            components: {
+                root: 'div',
+                image: 'div',
+                header: 'div',
+                description: 'div',
+                action: 'div',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref }, props)),
+            image: react_utilities_1.resolveShorthand(image),
+            header: react_utilities_1.resolveShorthand(header, {
+                required: true,
+                defaultProps: {
+                    ref: headerRef,
+                    id: referenceId,
+                },
+            }),
+            description: react_utilities_1.resolveShorthand(description),
+            action: react_utilities_1.resolveShorthand(action),
+        };
+    };
+    exports.useCardHeader_unstable = useCardHeader_unstable;
+});
+//# sourceMappingURL=useCardHeader.js.map

package/lib-amd/components/CardHeader/useCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCardHeader.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts"],"names":[],"mappings":";;;;IAMA;;;;;;;;OAQG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAsB,EAAE,GAA2B;QAChF,IAAA,KAAK,GAAkC,KAAK,MAAvC,EAAE,MAAM,GAA0B,KAAK,OAA/B,EAAE,WAAW,GAAa,KAAK,YAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;QAGnD,IAAA,KACE,qCAAuB,EAAE,oBADyB,EAA7B,WAAW,iBAAA,EAAE,cAAc,oBAAE,CACxB;QAC9B,IAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;QAErD,IAAM,WAAW,GAAG,uBAAK,CAAC,0CAAoB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QAEpE,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,MAAM,IAAI,SAAS,CAAC,OAAO,EAAE;gBACvB,IAAA,EAAE,GAAK,SAAS,CAAC,OAAO,GAAtB,CAAuB;gBAEjC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;aACvC;QACH,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC,CAAC;QAE1C,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,KAAK;gBACb,WAAW,EAAE,KAAK;gBAClB,MAAM,EAAE,KAAK;aACd;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,IACA,KAAK,EACR;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,CAAC;YAC9B,MAAM,EAAE,kCAAgB,CAAC,MAAM,EAAE;gBAC/B,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,GAAG,EAAE,SAAS;oBACd,EAAE,EAAE,WAAW;iBAChB;aACF,CAAC;YACF,WAAW,EAAE,kCAAgB,CAAC,WAAW,CAAC;YAC1C,MAAM,EAAE,kCAAgB,CAAC,MAAM,CAAC;SACjC,CAAC;IACJ,CAAC,CAAC;IA1CW,QAAA,sBAAsB,0BA0CjC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { CardHeaderProps, CardHeaderState } from './CardHeader.types';\nimport { useCardContext_unstable } from '../Card/CardContext';\nimport { cardHeaderClassNames } from './useCardHeaderStyles';\n\n/**\n * Create the state required to render CardHeader.\n *\n * The returned state can be modified with hooks such as useCardHeaderStyles_unstable,\n * before being passed to renderCardHeader_unstable.\n *\n * @param props - props from this instance of CardHeader\n * @param ref - reference to root HTMLElement of CardHeader\n */\nexport const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HTMLElement>): CardHeaderState => {\n  const { image, header, description, action } = props;\n\n  const {\n    selectableA11yProps: { referenceId, setReferenceId },\n  } = useCardContext_unstable();\n  const headerRef = React.useRef<HTMLDivElement>(null);\n\n  const generatedId = useId(cardHeaderClassNames.header, referenceId);\n\n  React.useEffect(() => {\n    if (header && headerRef.current) {\n      const { id } = headerRef.current;\n\n      setReferenceId(id ? id : generatedId);\n    }\n  }, [header, setReferenceId, generatedId]);\n\n  return {\n    components: {\n      root: 'div',\n      image: 'div',\n      header: 'div',\n      description: 'div',\n      action: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    image: resolveShorthand(image),\n    header: resolveShorthand(header, {\n      required: true,\n      defaultProps: {\n        ref: headerRef,\n        id: referenceId,\n      },\n    }),\n    description: resolveShorthand(description),\n    action: resolveShorthand(action),\n  };\n};\n"]}