feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/TableRow.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableRow", {
+    enumerable: true,
+    get: function() {
+        return TableRow;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTableRow = require("./useTableRow");
+const _renderTableRow = require("./renderTableRow");
+const _useTableRowStylesstyles = require("./useTableRowStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TableRow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTableRow.useTableRow_unstable)(props, ref);
+    (0, _useTableRowStylesstyles.useTableRowStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTableRowStyles_unstable')(state);
+    return (0, _renderTableRow.renderTableRow_unstable)(state);
+});
+TableRow.displayName = 'TableRow';

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/TableRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableRow_unstable } from './useTableRow';\nimport { renderTableRow_unstable } from './renderTableRow';\nimport { useTableRowStyles_unstable } from './useTableRowStyles.styles';\nimport type { TableRowProps } from './TableRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableRow component\n */\nexport const TableRow: ForwardRefComponent<TableRowProps> = React.forwardRef((props, ref) => {\n  const state = useTableRow_unstable(props, ref);\n\n  useTableRowStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);\n\n  return renderTableRow_unstable(state);\n});\n\nTableRow.displayName = 'TableRow';\n"],"names":["React","useTableRow_unstable","renderTableRow_unstable","useTableRowStyles_unstable","useCustomStyleHook_unstable","TableRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;qCAG5B,kCAAkC;AAKvE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQR,iCAAAA,EAAqBM,OAAOC;QAE1CL,mDAAAA,EAA2BM;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOP,uCAAAA,EAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/TableRow.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering TableRow
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/TableRow.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/TableRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableRowSlots = {\n  root: Slot<'tr', 'div'>;\n};\n\n/**\n * TableRow Props\n */\nexport type TableRowProps = ComponentProps<TableRowSlots> & {\n  /**\n   * A table row can have different variants. These appearances are\n   * intended to be used with selection.\n   * @default none\n   */\n  appearance?: 'brand' | 'neutral' | 'none';\n};\n\n/**\n * State used in rendering TableRow\n */\nexport type TableRowState = ComponentState<TableRowSlots> &\n  Pick<TableContextValue, 'noNativeElements' | 'size'> &\n  Pick<Required<TableRowProps>, 'appearance'> & {\n    isHeaderRow: boolean;\n  };\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAII"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/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, {
+    TableRow: function() {
+        return _TableRow.TableRow;
+    },
+    renderTableRow_unstable: function() {
+        return _renderTableRow.renderTableRow_unstable;
+    },
+    tableRowClassName: function() {
+        return _useTableRowStylesstyles.tableRowClassName;
+    },
+    tableRowClassNames: function() {
+        return _useTableRowStylesstyles.tableRowClassNames;
+    },
+    useTableRowStyles_unstable: function() {
+        return _useTableRowStylesstyles.useTableRowStyles_unstable;
+    },
+    useTableRow_unstable: function() {
+        return _useTableRow.useTableRow_unstable;
+    }
+});
+const _TableRow = require("./TableRow");
+const _renderTableRow = require("./renderTableRow");
+const _useTableRow = require("./useTableRow");
+const _useTableRowStylesstyles = require("./useTableRowStyles.styles");

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/index.ts"],"sourcesContent":["export { TableRow } from './TableRow';\nexport type { TableRowProps, TableRowSlots, TableRowState } from './TableRow.types';\nexport { renderTableRow_unstable } from './renderTableRow';\nexport { useTableRow_unstable } from './useTableRow';\nexport { tableRowClassName, tableRowClassNames, useTableRowStyles_unstable } from './useTableRowStyles.styles';\n"],"names":["TableRow","renderTableRow_unstable","useTableRow_unstable","tableRowClassName","tableRowClassNames","useTableRowStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAERC,uCAAuB;;;eAEvBE,0CAAiB;;;eAAEC,2CAAkB;;;eAAEC,mDAA0B;;;eADjEH,iCAAoB;;;0BAHJ,aAAa;gCAEE,mBAAmB;6BACtB,gBAAgB;yCAC6B,6BAA6B"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/renderTableRow.js

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

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/renderTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/renderTableRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TableRowState, TableRowSlots } from './TableRow.types';\n\n/**\n * Render the final JSX of TableRow\n */\nexport const renderTableRow_unstable = (state: TableRowState): JSXElement => {\n  assertSlots<TableRowSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTableRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCACrB,4BAA4B;AAOjD,MAAMC,0BAA0B,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/useTableRow.js

@@ -0,0 +1,45 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableRow_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTableRow_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 _reacttabster = require("@fluentui/react-tabster");
+const _tableContext = require("../../contexts/tableContext");
+const _tableHeaderContext = require("../../contexts/tableHeaderContext");
+const useTableRow_unstable = (props, ref)=>{
+    const { noNativeElements, size } = (0, _tableContext.useTableContext)();
+    var _props_as;
+    const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'tr';
+    const focusVisibleRef = (0, _reacttabster.useFocusVisible)();
+    const focusWithinRef = (0, _reacttabster.useFocusWithin)();
+    const isHeaderRow = (0, _tableHeaderContext.useIsInTableHeader)();
+    var _props_appearance;
+    return {
+        components: {
+            root: rootComponent
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(rootComponent, {
+            // 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: (0, _reactutilities.useMergedRefs)(ref, focusVisibleRef, focusWithinRef),
+            role: rootComponent === 'div' ? 'row' : undefined,
+            ...props
+        }), {
+            elementType: rootComponent
+        }),
+        size,
+        noNativeElements,
+        appearance: (_props_appearance = props.appearance) !== null && _props_appearance !== void 0 ? _props_appearance : 'none',
+        isHeaderRow
+    };
+};

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/useTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableRow/useTableRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';\nimport type { TableRowProps, TableRowState } from './TableRow.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render TableRow.\n *\n * The returned state can be modified with hooks such as useTableRowStyles_unstable,\n * before being passed to renderTableRow_unstable.\n *\n * @param props - props from this instance of TableRow\n * @param ref - reference to root HTMLElement of TableRow\n */\nexport const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLElement>): TableRowState => {\n  const { noNativeElements, size } = useTableContext();\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'tr';\n  const focusVisibleRef = useFocusVisible();\n  const focusWithinRef = useFocusWithin();\n  const isHeaderRow = useIsInTableHeader();\n\n  return {\n    components: {\n      root: rootComponent,\n    },\n    root: slot.always(\n      getIntrinsicElementProps(rootComponent, {\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: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'row' : undefined,\n        ...props,\n      }),\n      { elementType: rootComponent },\n    ),\n    size,\n    noNativeElements,\n    appearance: props.appearance ?? 'none',\n    isHeaderRow,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusVisible","useFocusWithin","useTableContext","useIsInTableHeader","useTableRow_unstable","props","ref","noNativeElements","size","rootComponent","as","focusVisibleRef","focusWithinRef","isHeaderRow","components","root","always","role","undefined","elementType","appearance"],"mappings":"AAAA;;;;;+BAkBaQ;;;;;;;iEAhBU,QAAQ;gCAC+B,4BAA4B;8BAC1C,0BAA0B;8BAE1C,8BAA8B;oCAC3B,oCAAoC;AAWhE,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGN,iCAAAA;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAAA,AAAE,MAAA,QAARL,cAAAA,KAAAA,IAAAA,YAAYE,gBAAAA,CAAe,GAAI,QAAQ;IAC7D,MAAMI,sBAAkBX,6BAAAA;IACxB,MAAMY,qBAAiBX,4BAAAA;IACvB,MAAMY,kBAAcV,sCAAAA;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,oBAAAA,CAAKiB,MAAM,KACfnB,wCAAAA,EAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,SAAKR,6BAAAA,EAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAAA,AAAU,MAAA,QAAhBf,sBAAAA,KAAAA,IAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/useTableRowStyles.styles.js

@@ -0,0 +1,302 @@
+'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, {
+    tableRowClassName: function() {
+        return tableRowClassName;
+    },
+    tableRowClassNames: function() {
+        return tableRowClassNames;
+    },
+    useTableRowStyles_unstable: function() {
+        return useTableRowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tableRowClassName = 'fui-TableRow';
+const tableRowClassNames = {
+    root: tableRowClassName
+};
+const useTableLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f1u0rzck"
+    }
+}, {
+    d: [
+        ".f1u0rzck{display:table-row;}"
+    ]
+});
+const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}"
+    ]
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        sj55zd: "f19n0e5",
+        B7ck84d: "f1ewtqcl",
+        Bconypa: "f1jazu75",
+        B6guboy: "f1xeqee6",
+        Bfpq7zp: 0,
+        g9k6zt: 0,
+        Bn4voq9: 0,
+        giviqs: "f1dxfoyt",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w"
+    },
+    rootInteractive: {
+        B6guboy: "f1xeqee6",
+        ecr2s2: "f1wfn5kd",
+        lj723h: "f1g4hkjv",
+        B43xm9u: "f15ngxrw",
+        i921ia: "fjbbrdp",
+        Jwef8y: "f1t94bn6",
+        Bi91k9c: "feu1g3u",
+        Bpt6rm4: "f1uorfem",
+        ff6mpl: "fw60kww",
+        Bahaeuw: "f1v3eptx",
+        F230oe: "f8gmj8i",
+        Bdw8ktp: [
+            "f1ap8nzx",
+            "fjag8bx"
+        ],
+        Bj1xduy: "f1igan7k",
+        Bhh2cfd: [
+            "fjag8bx",
+            "f1ap8nzx"
+        ]
+    },
+    medium: {
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        Bgfg5da: "f1facbz3"
+    },
+    small: {
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        Bgfg5da: "f1facbz3"
+    },
+    "extra-small": {
+        Be2twd7: "fy9rknc"
+    },
+    brand: {
+        De3pzq: "f16xkysk",
+        g2u3we: "f1bh3yvw",
+        h3c5rm: [
+            "fmi79ni",
+            "f11fozsx"
+        ],
+        B9xav0g: "fnzw4c6",
+        zhjwy3: [
+            "f11fozsx",
+            "fmi79ni"
+        ],
+        ecr2s2: "f7tkmfy",
+        lj723h: "f1r2dosr",
+        wmvzou: 0,
+        sc4o1m: 0,
+        wymq9i: 0,
+        u9orzk: 0,
+        puiv5t: 0,
+        Bosien3: 0,
+        b2z72d: 0,
+        Beulxaw: 0,
+        B57pkaw: 0,
+        Jcjdmf: 0,
+        B8qgbzl: 0,
+        Bbmb0sr: 0,
+        B14q8qp: 0,
+        Bcq6wej: 0,
+        Byz1pjr: 0,
+        kr9cjb: 0,
+        Ff9ifp: "f1msmgpi",
+        Bmclvqj: 0,
+        psczho: 0,
+        B0tx59b: 0,
+        sk7i8k: 0,
+        zlwzm7: "fbo0xvd",
+        Bkp2nk: "fjuvmhu",
+        gy0h4g: "f1kvufhq"
+    },
+    neutral: {
+        wmvzou: 0,
+        sc4o1m: 0,
+        wymq9i: 0,
+        u9orzk: 0,
+        puiv5t: 0,
+        Bosien3: 0,
+        b2z72d: 0,
+        Beulxaw: 0,
+        B57pkaw: 0,
+        Jcjdmf: 0,
+        B8qgbzl: 0,
+        Bbmb0sr: 0,
+        B14q8qp: 0,
+        Bcq6wej: 0,
+        Byz1pjr: 0,
+        kr9cjb: 0,
+        Ff9ifp: "f1msmgpi",
+        Bmclvqj: 0,
+        psczho: 0,
+        B0tx59b: 0,
+        sk7i8k: 0,
+        zlwzm7: "fbo0xvd",
+        Bkp2nk: "fjuvmhu",
+        gy0h4g: "f1kvufhq",
+        De3pzq: "fq5gl1p",
+        sj55zd: "f1cgsbmv",
+        ecr2s2: "fa9o754",
+        g2u3we: "frmsihh",
+        h3c5rm: [
+            "frttxa5",
+            "f11o2r7f"
+        ],
+        B9xav0g: "fem5et0",
+        zhjwy3: [
+            "f11o2r7f",
+            "frttxa5"
+        ]
+    },
+    none: {}
+}, {
+    d: [
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}",
+        ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}",
+        [
+            ".f1dxfoyt[data-fui-focus-visible]{outline:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1facbz3{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1facbz3{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
+            {
+                p: -1
+            }
+        ],
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".f16xkysk{background-color:var(--colorBrandBackground2);}",
+        ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}",
+        ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}",
+        ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}",
+        ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
+        ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}",
+        ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}",
+        ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}",
+        ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}",
+        ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}",
+        ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}"
+    ],
+    a: [
+        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}",
+        ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
+        ".f15ngxrw:active .fui-TableCellActions{opacity:1;}",
+        ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}",
+        ".f7tkmfy:active{background-color:var(--colorBrandBackground2);}",
+        ".f1r2dosr:active{color:var(--colorNeutralForeground1);}",
+        ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"
+    ],
+    h: [
+        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}",
+        ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
+        ".f1uorfem:hover .fui-TableCellActions{opacity:1;}",
+        ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1v3eptx:hover{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f8gmj8i:hover{border-top-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1ap8nzx:hover{border-right-color:Highlight;}.fjag8bx:hover{border-left-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1igan7k:hover{border-bottom-color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1msmgpi{border:2px solid transparent;}}",
+            {
+                p: -2,
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fbo0xvd{border-radius:var(--borderRadiusMedium);}}",
+            {
+                p: -1,
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fjuvmhu{box-sizing:border-box;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1kvufhq:focus-visible{outline-offset:-4px;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useTableRowStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);
+    return state;
+};

node_modules/@fluentui/react-table/lib-commonjs/components/TableRow/useTableRowStyles.styles.raw.js

@@ -0,0 +1,154 @@
+'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, {
+    tableRowClassName: function() {
+        return tableRowClassName;
+    },
+    tableRowClassNames: function() {
+        return tableRowClassNames;
+    },
+    useTableRowStyles_unstable: function() {
+        return useTableRowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _useTableCellActionsStylesstyles = require("../TableCellActions/useTableCellActionsStyles.styles");
+const _useTableSelectionCellStylesstyles = require("../TableSelectionCell/useTableSelectionCellStyles.styles");
+const _reacttabster = require("@fluentui/react-tabster");
+const tableRowClassName = 'fui-TableRow';
+const tableRowClassNames = {
+    root: tableRowClassName
+};
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table-row'
+    }
+});
+const useFlexLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        boxSizing: 'border-box',
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        }, {
+            selector: 'focus'
+        })
+    },
+    rootInteractive: {
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            [`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            }
+        }, {
+            selector: 'focus-within'
+        }),
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed,
+            color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+            [`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        },
+        ':hover': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover,
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            [`& .${_useTableCellActionsStylesstyles.tableCellActionsClassNames.root}`]: {
+                opacity: 1
+            },
+            [`& .${_useTableSelectionCellStylesstyles.tableSelectionCellClassNames.root}`]: {
+                opacity: 1
+            }
+        },
+        // High contrast styles
+        '@media (forced-colors: active)': {
+            ':hover': {
+                color: 'Highlight',
+                ..._react.shorthands.borderColor('Highlight')
+            }
+        }
+    },
+    medium: {
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
+    },
+    small: {
+        borderBottom: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralStroke2}`
+    },
+    'extra-small': {
+        fontSize: _reacttheme.tokens.fontSizeBase200
+    },
+    brand: {
+        backgroundColor: _reacttheme.tokens.colorBrandBackground2,
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive),
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorBrandBackground2,
+            color: _reacttheme.tokens.colorNeutralForeground1
+        },
+        '@media(forced-colors: active)': {
+            border: '2px solid transparent',
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            boxSizing: 'border-box',
+            ':focus-visible': {
+                outlineOffset: '-4px'
+            }
+        }
+    },
+    neutral: {
+        '@media(forced-colors: active)': {
+            border: '2px solid transparent',
+            borderRadius: _reacttheme.tokens.borderRadiusMedium,
+            boxSizing: 'border-box',
+            ':focus-visible': {
+                outlineOffset: '-4px'
+            }
+        },
+        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
+        color: _reacttheme.tokens.colorNeutralForeground1Hover,
+        ':active': {
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected
+        },
+        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStrokeOnBrand)
+    },
+    none: {}
+});
+const useTableRowStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);
+    return state;
+};