feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CardFooter", {
+    enumerable: true,
+    get: function() {
+        return CardFooter;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCardFooter = require("./useCardFooter");
+const _renderCardFooter = require("./renderCardFooter");
+const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CardFooter = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCardFooter.useCardFooter_unstable)(props, ref);
+    (0, _useCardFooterStylesstyles.useCardFooterStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCardFooterStyles_unstable')(state);
+    return (0, _renderCardFooter.renderCardFooter_unstable)(state);
+});
+CardFooter.displayName = 'CardFooter';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/CardFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCardFooter_unstable } from './useCardFooter';\nimport { renderCardFooter_unstable } from './renderCardFooter';\nimport { useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\nimport type { CardFooterProps } from './CardFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n  useCustomStyleHook_unstable('useCardFooterStyles_unstable')(state);\n\n  return renderCardFooter_unstable(state);\n});\n\nCardFooter.displayName = 'CardFooter';\n"],"names":["React","useCardFooter_unstable","renderCardFooter_unstable","useCardFooterStyles_unstable","useCustomStyleHook_unstable","CardFooter","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/CardFooter/CardFooter.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/CardFooter.types.ts"],"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 * CardFooter base props (same as CardFooterProps since CardFooter has no design props)\n */\nexport type CardFooterBaseProps = CardFooterProps;\n\n/**\n * State used in rendering CardFooter.\n */\nexport type CardFooterState = ComponentState<CardFooterSlots>;\n\n/**\n * CardFooter base state (same as CardFooterState since CardFooter has no design props)\n */\nexport type CardFooterBaseState = CardFooterState;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAkD"}

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

@@ -0,0 +1,34 @@
+"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, {
+    CardFooter: function() {
+        return _CardFooter.CardFooter;
+    },
+    cardFooterClassNames: function() {
+        return _useCardFooterStylesstyles.cardFooterClassNames;
+    },
+    renderCardFooter_unstable: function() {
+        return _renderCardFooter.renderCardFooter_unstable;
+    },
+    useCardFooterBase_unstable: function() {
+        return _useCardFooter.useCardFooterBase_unstable;
+    },
+    useCardFooterStyles_unstable: function() {
+        return _useCardFooterStylesstyles.useCardFooterStyles_unstable;
+    },
+    useCardFooter_unstable: function() {
+        return _useCardFooter.useCardFooter_unstable;
+    }
+});
+const _CardFooter = require("./CardFooter");
+const _renderCardFooter = require("./renderCardFooter");
+const _useCardFooter = require("./useCardFooter");
+const _useCardFooterStylesstyles = require("./useCardFooterStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/index.ts"],"sourcesContent":["export { CardFooter } from './CardFooter';\nexport type {\n  CardFooterBaseProps,\n  CardFooterBaseState,\n  CardFooterProps,\n  CardFooterSlots,\n  CardFooterState,\n} from './CardFooter.types';\nexport { renderCardFooter_unstable } from './renderCardFooter';\nexport { useCardFooter_unstable, useCardFooterBase_unstable } from './useCardFooter';\nexport { cardFooterClassNames, useCardFooterStyles_unstable } from './useCardFooterStyles.styles';\n"],"names":["CardFooter","renderCardFooter_unstable","useCardFooter_unstable","useCardFooterBase_unstable","cardFooterClassNames","useCardFooterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,sBAAU;;;eAUVI,+CAAoB;;;eAFpBH,2CAAyB;;;eACDE,yCAA0B;;;eAC5BE,uDAA4B;;;eADlDH,qCAAsB;;;4BATJ,eAAe;kCAQA,qBAAqB;+BACI,kBAAkB;2CAClB,+BAA+B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/renderCardFooter.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 { CardFooterSlots, CardFooterBaseState } from './CardFooter.types';\n\n/**\n * Render the final JSX of CardFooter.\n */\nexport const renderCardFooter_unstable = (state: CardFooterBaseState): JSXElement => {\n  assertSlots<CardFooterSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.action && <state.action />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCardFooter_unstable","state","root","children","action"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,kCAAkC,CAACC;QACxCF,2BAAAA,EAA6BE;IAE7B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,MAAM,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,MAAM,EAAA,CAAA;;;AAGpC,EAAE"}

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

@@ -0,0 +1,46 @@
+'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, {
+    useCardFooterBase_unstable: function() {
+        return useCardFooterBase_unstable;
+    },
+    useCardFooter_unstable: function() {
+        return useCardFooter_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 useCardFooter_unstable = (props, ref)=>{
+    return useCardFooterBase_unstable(props, ref);
+};
+const useCardFooterBase_unstable = (props, ref)=>{
+    const { action } = props;
+    return {
+        components: {
+            root: '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'
+        }),
+        action: _reactutilities.slot.optional(action, {
+            elementType: 'div'
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/useCardFooter.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CardFooterBaseProps, CardFooterBaseState, 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  return useCardFooterBase_unstable(props, ref);\n};\n\n/**\n * Base hook for CardFooter component, which manages state related to slots structure.\n * Note: CardFooter has no design props, so this is equivalent to useCardFooter_unstable.\n *\n * @param props - props from this instance of CardFooter\n * @param ref - reference to root HTMLElement of CardFooter\n */\nexport const useCardFooterBase_unstable = (\n  props: CardFooterBaseProps,\n  ref: React.Ref<HTMLElement>,\n): CardFooterBaseState => {\n  const { action } = props;\n\n  return {\n    components: {\n      root: 'div',\n      action: 'div',\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    action: slot.optional(action, { elementType: 'div' }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useCardFooter_unstable","props","ref","useCardFooterBase_unstable","action","components","root","always","elementType","optional"],"mappings":"AAAA;;;;;;;;;;;;IA0BaM,0BAAAA;;;0BAXAH;;;;;iEAbU,QAAQ;gCACgB,4BAA4B;AAYpE,MAAMA,yBAAyB,CAACC,OAAwBC;IAC7D,OAAOC,2BAA2BF,OAAOC;AAC3C,EAAE;AASK,mCAAmC,CACxCD,OACAC;IAEA,MAAM,EAAEE,MAAM,EAAE,GAAGH;IAEnB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,QAAQ;QACV;QAEAE,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FI,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ,QAAQL,oBAAAA,CAAKU,QAAQ,CAACL,QAAQ;YAAEI,aAAa;QAAM;IACrD;AACF,EAAE"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js

@@ -0,0 +1,105 @@
+'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, {
+    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 = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "fsbu5mz"
+    },
+    action: {
+        Frg6f3: [
+            "fcgxt0o",
+            "f1ujusj6"
+        ],
+        rjrqlh: "fs9eatd",
+        Boue1pl: [
+            "fxoo9ru",
+            "f1g0ekvh"
+        ],
+        Bhz1vi0: "f1m6zfxz",
+        etxrgc: [
+            "f1g0ekvh",
+            "fxoo9ru"
+        ],
+        Bdua9ef: "f1sret3r",
+        cbfxhg: "fs4gbcv"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1063pyq{flex-direction:row;}",
+        [
+            ".fsbu5mz{gap:12px;}",
+            {
+                p: -1
+            }
+        ],
+        ".fcgxt0o{margin-left:auto;}",
+        ".f1ujusj6{margin-right:auto;}"
+    ],
+    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 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;
+};

node_modules/@fluentui/react-card/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useCardFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const cardFooterClassNames = {\n    root: 'fui-CardFooter',\n    action: 'fui-CardFooter__action'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        gap: '12px'\n    },\n    action: {\n        marginLeft: 'auto',\n        // when the card is selected or hovered, it has custom high contrast color and background styles\n        // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n        '@media (forced-colors: active)': {\n            '& .fui-Button, & .fui-Link': {\n                ...shorthands.borderColor('currentColor'),\n                color: 'currentColor',\n                outlineColor: 'currentColor'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the CardFooter slots based on the state.\n */ export const useCardFooterStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n    if (state.action) {\n        state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","Frg6f3","rjrqlh","Boue1pl","Bhz1vi0","etxrgc","Bdua9ef","cbfxhg","d","p","m","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAIKG,oBAAoB;;;gCAyBQ;eAA5BmB;;;uBA5BoC,gBAAgB;AAG1D,6BAA6B;IACpClB,IAAI,EAAE,gBAAgB;IACtBC,MAAM,EAAE;AACZ,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAG,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAN,MAAA,EAAA;QAAAO,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAkBjB,CAAC;AAGS,sCAAsCE,KAAK,IAAG;IACrD,aAAa;IACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;IAC1BiB,KAAK,CAACnB,IAAI,CAACqB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEmB,KAAK,CAACnB,IAAI,CAACqB,SAAS,CAAC;IACjG,IAAIF,KAAK,CAAClB,MAAM,EAAE;QACdkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,OAAGxB,mBAAY,EAACE,oBAAoB,CAACE,MAAM,EAAEmB,MAAM,CAACnB,MAAM,EAAEkB,KAAK,CAAClB,MAAM,CAACoB,SAAS,CAAC;IAC7G;IACA,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-card/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js

@@ -0,0 +1,52 @@
+'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, {
+    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;
+};

node_modules/@fluentui/react-card/lib-commonjs/components/CardFooter/useCardFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CardFooter/useCardFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { CardFooterSlots, CardFooterState } from './CardFooter.types';\n\n/**\n * Static CSS class names used internally for the component slots.\n */\nexport const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {\n  root: 'fui-CardFooter',\n  action: 'fui-CardFooter__action',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: '12px',\n  },\n  action: {\n    marginLeft: 'auto',\n\n    // when the card is selected or hovered, it has custom high contrast color and background styles\n    // setting this ensures action buttons adopt those colors and are still visible in forced-colors mode\n    '@media (forced-colors: active)': {\n      '& .fui-Button, & .fui-Link': {\n        ...shorthands.borderColor('currentColor'),\n        color: 'currentColor',\n        outlineColor: 'currentColor',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the CardFooter slots based on the state.\n */\nexport const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);\n\n  if (state.action) {\n    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","cardFooterClassNames","root","action","useStyles","display","flexDirection","gap","marginLeft","borderColor","color","outlineColor","useCardFooterStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaG,oBAAAA;;;gCA6BAW;eAAAA;;;uBAnCwC,iBAAiB;AAM/D,6BAA8D;IACnEV,MAAM;IACNC,QAAQ;AACV,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BI,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAJ,QAAQ;QACNK,YAAY;QAEZ,gGAAgG;QAChG,qGAAqG;QACrG,kCAAkC;YAChC,8BAA8B;gBAC5B,GAAGR,iBAAAA,CAAWS,WAAW,CAAC,eAAe;gBACzCC,OAAO;gBACPC,cAAc;YAChB;QACF;IACF;AACF;AAKO,qCAAqC,CAACE;IAC3C;IAEA,MAAMC,SAASV;IACfS,MAAMX,IAAI,CAACa,SAAS,OAAGhB,mBAAAA,EAAaE,qBAAqBC,IAAI,EAAEY,OAAOZ,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAEhG,IAAIF,MAAMV,MAAM,EAAE;QAChBU,MAAMV,MAAM,CAACY,SAAS,OAAGhB,mBAAAA,EAAaE,qBAAqBE,MAAM,EAAEW,OAAOX,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAC1G;IAEA,OAAOF;AACT,EAAE"}