feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/CardHeader.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CardHeader", {
+    enumerable: true,
+    get: function() {
+        return CardHeader;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCardHeader = require("./useCardHeader");
+const _renderCardHeader = require("./renderCardHeader");
+const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CardHeader = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCardHeader.useCardHeader_unstable)(props, ref);
+    (0, _useCardHeaderStylesstyles.useCardHeaderStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardHeaderStyles_unstable')(state);
+    return (0, _renderCardHeader.renderCardHeader_unstable)(state);
+});
+CardHeader.displayName = 'CardHeader';

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardHeader_unstable } from './useCardHeader';\nimport { renderCardHeader_unstable } from './renderCardHeader';\nimport { useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\nimport type { CardHeaderProps } from './CardHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useCardHeaderStyles_unstable')(state);\n\n  return renderCardHeader_unstable(state);\n});\n\nCardHeader.displayName = 'CardHeader';\n"],"names":["React","useCardHeader_unstable","renderCardHeader_unstable","useCardHeaderStyles_unstable","useCustomStyleHook_unstable","CardHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;kCACf,qBAAqB;2CAClB,+BAA+B;qCAGhC,kCAAkC;AAKvE,MAAMK,aAAAA,WAAAA,GAAmDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,YAAQR,qCAAAA,EAAuBM,OAAOC;QAE5CL,uDAAAA,EAA6BM;QAE7BL,gDAAAA,EAA4B,gCAAgCK;IAE5D,WAAOP,2CAAAA,EAA0BO;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/CardHeader.types.js

@@ -0,0 +1,6 @@
+/**
+ * CardHeader base state (same as CardHeaderState since CardHeader has no design props)
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/CardHeader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardHeader/CardHeader.types.ts"],"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 * CardHeader base props (same as CardHeaderProps since CardHeader has no design props)\n */\nexport type CardHeaderBaseProps = CardHeaderProps;\n\n/**\n * State used in rendering CardHeader.\n */\nexport type CardHeaderState = ComponentState<CardHeaderSlots>;\n\n/**\n * CardHeader base state (same as CardHeaderState since CardHeader has no design props)\n */\nexport type CardHeaderBaseState = CardHeaderState;\n"],"names":[],"mappings":"AA+CA;;CAEC,GACD,WAAkD"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/index.js

@@ -0,0 +1,37 @@
+"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, {
+    CardHeader: function() {
+        return _CardHeader.CardHeader;
+    },
+    cardHeaderCSSVars: function() {
+        return _useCardHeaderStylesstyles.cardHeaderCSSVars;
+    },
+    cardHeaderClassNames: function() {
+        return _useCardHeaderStylesstyles.cardHeaderClassNames;
+    },
+    renderCardHeader_unstable: function() {
+        return _renderCardHeader.renderCardHeader_unstable;
+    },
+    useCardHeaderBase_unstable: function() {
+        return _useCardHeader.useCardHeaderBase_unstable;
+    },
+    useCardHeaderStyles_unstable: function() {
+        return _useCardHeaderStylesstyles.useCardHeaderStyles_unstable;
+    },
+    useCardHeader_unstable: function() {
+        return _useCardHeader.useCardHeader_unstable;
+    }
+});
+const _CardHeader = require("./CardHeader");
+const _renderCardHeader = require("./renderCardHeader");
+const _useCardHeader = require("./useCardHeader");
+const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardHeader/index.ts"],"sourcesContent":["export { CardHeader } from './CardHeader';\nexport type {\n  CardHeaderBaseProps,\n  CardHeaderBaseState,\n  CardHeaderProps,\n  CardHeaderSlots,\n  CardHeaderState,\n} from './CardHeader.types';\nexport { renderCardHeader_unstable } from './renderCardHeader';\nexport { useCardHeader_unstable, useCardHeaderBase_unstable } from './useCardHeader';\nexport { cardHeaderCSSVars, cardHeaderClassNames, useCardHeaderStyles_unstable } from './useCardHeaderStyles.styles';\n"],"names":["CardHeader","renderCardHeader_unstable","useCardHeader_unstable","useCardHeaderBase_unstable","cardHeaderCSSVars","cardHeaderClassNames","useCardHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAUVI,4CAAiB;;;eAAEC,+CAAoB;;;eAFvCJ,2CAAyB;;;eACDE,yCAA0B;;;eACTG,uDAA4B;;;eADrEJ,qCAAsB;;;4BATJ,eAAe;kCAQA,qBAAqB;+BACI,kBAAkB;2CACC,+BAA+B"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/renderCardHeader.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCardHeader_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCardHeader_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderCardHeader_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.image && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.image, {}),
+            state.header && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.header, {}),
+            state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {}),
+            state.action && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.action, {})
+        ]
+    });
+};

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/renderCardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardHeader/renderCardHeader.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { CardHeaderSlots, CardHeaderBaseState } from './CardHeader.types';\n\n/**\n * Render the final JSX of CardHeader.\n */\nexport const renderCardHeader_unstable = (state: CardHeaderBaseState): JSXElement => {\n  assertSlots<CardHeaderSlots>(state);\n\n  return (\n    <state.root>\n      {state.image && <state.image />}\n      {state.header && <state.header />}\n      {state.description && <state.description />}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCardHeader_unstable","state","root","image","header","description","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,KAAK,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,KAAK,EAAA,CAAA;YAC3BF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;YAC7BH,MAAMI,WAAW,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,WAAW,EAAA,CAAA;YACvCJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/useCardHeader.js

@@ -0,0 +1,109 @@
+'use client';
+"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, {
+    useCardHeaderBase_unstable: function() {
+        return useCardHeaderBase_unstable;
+    },
+    useCardHeader_unstable: function() {
+        return useCardHeader_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _CardContext = require("../Card/CardContext");
+const _useCardHeaderStylesstyles = require("./useCardHeaderStyles.styles");
+/**
+ * Finds the first child of CardHeader with an id prop.
+ *
+ * @param header - the header prop of CardHeader
+ */ function getChildWithId(header) {
+    function isReactElementWithIdProp(element) {
+        return /*#__PURE__*/ _react.isValidElement(element) && Boolean(element.props.id);
+    }
+    return _react.Children.toArray(header).find(isReactElementWithIdProp);
+}
+/**
+ * Returns the id to use for the CardHeader root element.
+ *
+ * @param headerId - the id prop of the CardHeader component
+ * @param childWithId - the first child of the CardHeader component with an id prop
+ * @param generatedId - a generated id
+ *
+ * @returns the id to use for the CardHeader root element
+ */ function getReferenceId(headerId, childWithId, generatedId) {
+    if (headerId) {
+        return headerId;
+    }
+    if (childWithId === null || childWithId === void 0 ? void 0 : childWithId.props.id) {
+        return childWithId.props.id;
+    }
+    return generatedId;
+}
+const useCardHeader_unstable = (props, ref)=>{
+    return useCardHeaderBase_unstable(props, ref);
+};
+const useCardHeaderBase_unstable = (props, ref)=>{
+    const { image, header, description, action } = props;
+    const { selectableA11yProps: { referenceId, setReferenceId } } = (0, _CardContext.useCardContext_unstable)();
+    const headerRef = _react.useRef(null);
+    const hasChildId = _react.useRef(false);
+    const generatedId = (0, _reactutilities.useId)(_useCardHeaderStylesstyles.cardHeaderClassNames.header, referenceId);
+    const headerSlot = _reactutilities.slot.optional(header, {
+        renderByDefault: true,
+        defaultProps: {
+            ref: headerRef,
+            id: !hasChildId.current ? referenceId : undefined
+        },
+        elementType: 'div'
+    });
+    _react.useEffect(()=>{
+        var _headerRef_current;
+        const headerId = !hasChildId.current ? (_headerRef_current = headerRef.current) === null || _headerRef_current === void 0 ? void 0 : _headerRef_current.id : undefined;
+        const childWithId = getChildWithId(headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.children);
+        hasChildId.current = Boolean(childWithId);
+        setReferenceId(getReferenceId(headerId, childWithId, generatedId));
+    }, [
+        generatedId,
+        header,
+        headerSlot,
+        setReferenceId
+    ]);
+    return {
+        components: {
+            root: 'div',
+            image: 'div',
+            header: 'div',
+            description: 'div',
+            action: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            // FIXME:
+            // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+            // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+            ref: ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        image: _reactutilities.slot.optional(image, {
+            elementType: 'div'
+        }),
+        header: headerSlot,
+        description: _reactutilities.slot.optional(description, {
+            elementType: 'div'
+        }),
+        action: _reactutilities.slot.optional(action, {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.js

@@ -0,0 +1,185 @@
+'use client';
+"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 = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bkc6ea2: "fkufhic",
+        Bt984gj: "f122n59"
+    },
+    image: {
+        mc9l5x: "ftuwxu6",
+        t21cq0: [
+            "fql5097",
+            "f6yss9k"
+        ]
+    },
+    header: {
+        mc9l5x: "f22iagw"
+    },
+    description: {
+        mc9l5x: "f22iagw"
+    },
+    action: {
+        Frg6f3: [
+            "f6yss9k",
+            "fql5097"
+        ],
+        rjrqlh: "fs9eatd",
+        Boue1pl: [
+            "fxoo9ru",
+            "f1g0ekvh"
+        ],
+        Bhz1vi0: "f1m6zfxz",
+        etxrgc: [
+            "f1g0ekvh",
+            "fxoo9ru"
+        ],
+        Bdua9ef: "f1sret3r",
+        cbfxhg: "fs4gbcv"
+    }
+}, {
+    d: [
+        ".fkufhic{--fui-CardHeader--gap:12px;}",
+        ".f122n59{align-items:center;}",
+        ".ftuwxu6{display:inline-flex;}",
+        ".fql5097{margin-right:var(--fui-CardHeader--gap);}",
+        ".f6yss9k{margin-left:var(--fui-CardHeader--gap);}",
+        ".f22iagw{display:flex;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fs9eatd .fui-Button,.fs9eatd .fui-Link{border-top-color:currentColor;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1g0ekvh .fui-Button,.f1g0ekvh .fui-Link{border-left-color:currentColor;}.fxoo9ru .fui-Button,.fxoo9ru .fui-Link{border-right-color:currentColor;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1m6zfxz .fui-Button,.f1m6zfxz .fui-Link{border-bottom-color:currentColor;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1sret3r .fui-Button,.f1sret3r .fui-Link{color:currentColor;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fs4gbcv .fui-Button,.fs4gbcv .fui-Link{outline-color:currentColor;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useStylesGrid = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f13qh94s",
+        t4k1zu: "f8a668j"
+    },
+    image: {
+        Br312pm: "fwpfdsa",
+        Ijaq50: "fldnz9j"
+    },
+    header: {
+        Br312pm: "fd46tj4",
+        Ijaq50: "f16hsg94"
+    },
+    description: {
+        Br312pm: "fd46tj4",
+        Ijaq50: "faunodf"
+    },
+    action: {
+        Br312pm: "fis13di",
+        Ijaq50: "fldnz9j"
+    }
+}, {
+    d: [
+        ".f13qh94s{display:grid;}",
+        ".f8a668j{grid-auto-columns:min-content 1fr min-content;}",
+        ".fwpfdsa{grid-column-start:1;}",
+        ".fldnz9j{grid-row-start:span 2;}",
+        ".fd46tj4{grid-column-start:2;}",
+        ".f16hsg94{grid-row-start:1;}",
+        ".faunodf{grid-row-start:2;}",
+        ".fis13di{grid-column-start:3;}"
+    ]
+});
+const useStylesFlex = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw"
+    },
+    header: {
+        Bh6795r: "fqerorx"
+    },
+    image: {},
+    description: {},
+    action: {}
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".fqerorx{flex-grow:1;}"
+    ]
+});
+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;
+};

node_modules/@fluentui/react-card/lib-commonjs/components/CardHeader/useCardHeaderStyles.styles.raw.js

@@ -0,0 +1,119 @@
+'use client';
+"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;
+};