feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableHeaderCell", {
+    enumerable: true,
+    get: function() {
+        return TableHeaderCell;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTableHeaderCell = require("./useTableHeaderCell");
+const _renderTableHeaderCell = require("./renderTableHeaderCell");
+const _useTableHeaderCellStylesstyles = require("./useTableHeaderCellStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TableHeaderCell = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTableHeaderCell.useTableHeaderCell_unstable)(props, ref);
+    (0, _useTableHeaderCellStylesstyles.useTableHeaderCellStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTableHeaderCellStyles_unstable')(state);
+    return (0, _renderTableHeaderCell.renderTableHeaderCell_unstable)(state);
+});
+TableHeaderCell.displayName = 'TableHeaderCell';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeaderCell component\n */\nexport const TableHeaderCell: ForwardRefComponent<TableHeaderCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeaderCell_unstable(props, ref);\n\n  useTableHeaderCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);\n\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHook_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAG1C,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAElCL,gDAAAA,EAA4B,qCAAqCK;IAEjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/TableHeaderCell.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport { SortDirection, TableContextValue } from '../Table/Table.types';\n\nexport type TableHeaderCellSlots = {\n  root: Slot<'th', 'div'>;\n\n  sortIcon: Slot<'span'>;\n\n  /**\n   * Button handles correct narration and interactions for sorting;\n   */\n  button: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * aside content for anything that should be after main content of the table header cell\n   */\n  aside: Slot<'span'>;\n};\n\n/**\n * TableHeaderCell Props\n */\nexport type TableHeaderCellProps = ComponentProps<Partial<TableHeaderCellSlots>> & {\n  /**\n   * Whether the column is sortable\n   * @default false\n   */\n  sortable?: boolean;\n  /**\n   * @default undefined\n   */\n  sortDirection?: SortDirection;\n};\n\n/**\n * State used in rendering TableHeaderCell\n */\nexport type TableHeaderCellState = ComponentState<TableHeaderCellSlots> &\n  Pick<TableContextValue, 'noNativeElements'> &\n  Pick<TableHeaderCellProps, 'sortable'>;\n"],"names":[],"mappings":"AAkCA;;CAEC,GACD,WAEyC"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableHeaderCell/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, {
+    TableHeaderCell: function() {
+        return _TableHeaderCell.TableHeaderCell;
+    },
+    renderTableHeaderCell_unstable: function() {
+        return _renderTableHeaderCell.renderTableHeaderCell_unstable;
+    },
+    tableHeaderCellClassName: function() {
+        return _useTableHeaderCellStylesstyles.tableHeaderCellClassName;
+    },
+    tableHeaderCellClassNames: function() {
+        return _useTableHeaderCellStylesstyles.tableHeaderCellClassNames;
+    },
+    useTableHeaderCellStyles_unstable: function() {
+        return _useTableHeaderCellStylesstyles.useTableHeaderCellStyles_unstable;
+    },
+    useTableHeaderCell_unstable: function() {
+        return _useTableHeaderCell.useTableHeaderCell_unstable;
+    }
+});
+const _TableHeaderCell = require("./TableHeaderCell");
+const _renderTableHeaderCell = require("./renderTableHeaderCell");
+const _useTableHeaderCell = require("./useTableHeaderCell");
+const _useTableHeaderCellStylesstyles = require("./useTableHeaderCellStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/index.ts"],"sourcesContent":["export { TableHeaderCell } from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\nexport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nexport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nexport {\n  tableHeaderCellClassName,\n  tableHeaderCellClassNames,\n  useTableHeaderCellStyles_unstable,\n} from './useTableHeaderCellStyles.styles';\n"],"names":["TableHeaderCell","renderTableHeaderCell_unstable","useTableHeaderCell_unstable","tableHeaderCellClassName","tableHeaderCellClassNames","useTableHeaderCellStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAGrCE,wDAAwB;;;eACxBC,yDAAyB;;;eACzBC,iEAAiC;;;eAJ1BH,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDAK5D,oCAAoC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/renderTableHeaderCell.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 { TableHeaderCellState, TableHeaderCellSlots } from './TableHeaderCell.types';\n\n/**\n * Render the final JSX of TableHeaderCell\n */\nexport const renderTableHeaderCell_unstable = (state: TableHeaderCellState): JSXElement => {\n  assertSlots<TableHeaderCellSlots>(state);\n\n  return (\n    <state.root>\n      <state.button>\n        {state.root.children}\n        {state.sortIcon && <state.sortIcon />}\n      </state.button>\n      {state.aside && <state.aside />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTableHeaderCell_unstable","state","root","button","children","sortIcon","aside"],"mappings":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCACrB,4BAA4B;AAOjD,uCAAuC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;8BACT,gBAAA,EAACD,MAAME,MAAM,EAAA;;oBACVF,MAAMC,IAAI,CAACE,QAAQ;oBACnBH,MAAMI,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA;;;YAEnCJ,MAAMK,KAAK,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,KAAK,EAAA,CAAA;;;AAGlC,EAAE"}

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

@@ -0,0 +1,73 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableHeaderCell_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTableHeaderCell_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 _reacticons = require("@fluentui/react-icons");
+const _reactaria = require("@fluentui/react-aria");
+const _tableContext = require("../../contexts/tableContext");
+const sortIcons = {
+    ascending: /*#__PURE__*/ _react.createElement(_reacticons.ArrowUpRegular, {
+        fontSize: 12
+    }),
+    descending: /*#__PURE__*/ _react.createElement(_reacticons.ArrowDownRegular, {
+        fontSize: 12
+    })
+};
+const useTableHeaderCell_unstable = (props, ref)=>{
+    const { noNativeElements, sortable: contextSortable } = (0, _tableContext.useTableContext)();
+    const { sortable = contextSortable } = props;
+    var _props_as;
+    const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'th';
+    // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.
+    const buttonSlot = _reactutilities.slot.always(props.button, {
+        elementType: 'div',
+        defaultProps: {
+            as: 'div'
+        }
+    });
+    const ariaButtonProps = (0, _reactaria.useARIAButtonProps)(buttonSlot.as, buttonSlot);
+    var _props_sortDirection;
+    return {
+        components: {
+            root: rootComponent,
+            button: 'div',
+            sortIcon: 'span',
+            aside: 'span'
+        },
+        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, (0, _reacttabster.useFocusWithin)()),
+            role: rootComponent === 'div' ? 'columnheader' : undefined,
+            'aria-sort': sortable ? (_props_sortDirection = props.sortDirection) !== null && _props_sortDirection !== void 0 ? _props_sortDirection : 'none' : undefined,
+            ...props
+        }), {
+            elementType: rootComponent
+        }),
+        aside: _reactutilities.slot.optional(props.aside, {
+            elementType: 'span'
+        }),
+        sortIcon: _reactutilities.slot.optional(props.sortIcon, {
+            renderByDefault: !!props.sortDirection,
+            defaultProps: {
+                children: props.sortDirection ? sortIcons[props.sortDirection] : undefined
+            },
+            elementType: 'span'
+        }),
+        button: sortable ? ariaButtonProps : buttonSlot,
+        sortable,
+        noNativeElements
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableHeaderCell/useTableHeaderCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport { ARIAButtonSlotProps, useARIAButtonProps } from '@fluentui/react-aria';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst sortIcons = {\n  ascending: <ArrowUpRegular fontSize={12} />,\n  descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n  props: TableHeaderCellProps,\n  ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n  const { noNativeElements, sortable: contextSortable } = useTableContext();\n  const { sortable = contextSortable } = props;\n\n  const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n\n  // The sort button is rendered as a div when not sortable, and as an ARIA button when sortable.\n  const buttonSlot = slot.always<ARIAButtonSlotProps>(props.button, {\n    elementType: 'div',\n    defaultProps: {\n      as: 'div',\n    },\n  });\n  const ariaButtonProps = useARIAButtonProps(buttonSlot.as, buttonSlot);\n\n  return {\n    components: {\n      root: rootComponent,\n      button: 'div',\n      sortIcon: 'span',\n      aside: 'span',\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, useFocusWithin()) as React.Ref<HTMLDivElement>,\n        role: rootComponent === 'div' ? 'columnheader' : undefined,\n        'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n        ...props,\n      } as const),\n      { elementType: rootComponent },\n    ),\n    aside: slot.optional(props.aside, { elementType: 'span' }),\n    sortIcon: slot.optional(props.sortIcon, {\n      renderByDefault: !!props.sortDirection,\n      defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n      elementType: 'span',\n    }),\n    button: sortable ? ariaButtonProps : buttonSlot,\n    sortable,\n    noNativeElements,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","slot","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonProps","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","contextSortable","rootComponent","as","buttonSlot","always","button","elementType","defaultProps","ariaButtonProps","components","root","sortIcon","aside","role","undefined","sortDirection","optional","renderByDefault","children"],"mappings":"AAAA;;;;;;;;eAwBaa;;;;iEAtBU,QAAQ;gCAC+B,4BAA4B;8BAC3D,0BAA0B;4BACR,wBAAwB;2BACjB,uBAAuB;8BAE/C,8BAA8B;AAE9D,MAAMJ,YAAY;IAChBC,WAAAA,WAAAA,GAAW,OAAA,aAAA,CAACL,0BAAAA,EAAAA;QAAeM,UAAU;;IACrCC,YAAAA,WAAAA,GAAY,OAAA,aAAA,CAACN,4BAAAA,EAAAA;QAAiBK,UAAU;;AAC1C;AAWO,oCAAoC,CACzCG,OACAC;IAEA,MAAM,EAAEC,gBAAgB,EAAEC,UAAUC,eAAe,EAAE,OAAGV,6BAAAA;IACxD,MAAM,EAAES,WAAWC,eAAe,EAAE,GAAGJ;QAEjBA;IAAtB,MAAMK,gBAAgBL,CAAAA,aAAAA,MAAMM,EAAAA,AAAE,MAAA,QAARN,cAAAA,KAAAA,IAAAA,YAAYE,gBAAAA,CAAe,GAAI,QAAQ;IAE7D,+FAA+F;IAC/F,MAAMK,aAAalB,oBAAAA,CAAKmB,MAAM,CAAsBR,MAAMS,MAAM,EAAE;QAChEC,aAAa;QACbC,cAAc;YACZL,IAAI;QACN;IACF;IACA,MAAMM,sBAAkBnB,6BAAAA,EAAmBc,WAAWD,EAAE,EAAEC;QAgB5BP;IAd9B,OAAO;QACLa,YAAY;YACVC,MAAMT;YACNI,QAAQ;YACRM,UAAU;YACVC,OAAO;QACT;QACAF,MAAMzB,oBAAAA,CAAKmB,MAAM,KACfrB,wCAAAA,EAAyBkB,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FJ,SAAKb,6BAAAA,EAAca,SAAKX,4BAAAA;YACxB2B,MAAMZ,kBAAkB,QAAQ,iBAAiBa;YACjD,aAAaf,WAAWH,CAAAA,uBAAAA,MAAMmB,aAAAA,AAAa,MAAA,QAAnBnB,yBAAAA,KAAAA,IAAAA,uBAAuB,SAASkB;YACxD,GAAGlB,KAAK;QACV,IACA;YAAEU,aAAaL;QAAc;QAE/BW,OAAO3B,oBAAAA,CAAK+B,QAAQ,CAACpB,MAAMgB,KAAK,EAAE;YAAEN,aAAa;QAAO;QACxDK,UAAU1B,oBAAAA,CAAK+B,QAAQ,CAACpB,MAAMe,QAAQ,EAAE;YACtCM,iBAAiB,CAAC,CAACrB,MAAMmB,aAAa;YACtCR,cAAc;gBAAEW,UAAUtB,MAAMmB,aAAa,GAAGxB,SAAS,CAACK,MAAMmB,aAAa,CAAC,GAAGD;YAAU;YAC3FR,aAAa;QACf;QACAD,QAAQN,WAAWS,kBAAkBL;QACrCJ;QACAD;IACF;AACF,EAAE"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js

@@ -0,0 +1,245 @@
+'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, {
+    tableHeaderCellClassName: function() {
+        return tableHeaderCellClassName;
+    },
+    tableHeaderCellClassNames: function() {
+        return tableHeaderCellClassNames;
+    },
+    useTableHeaderCellStyles_unstable: function() {
+        return useTableHeaderCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tableHeaderCellClassName = 'fui-TableHeaderCell';
+const tableHeaderCellClassNames = {
+    root: 'fui-TableHeaderCell',
+    button: 'fui-TableHeaderCell__button',
+    sortIcon: 'fui-TableHeaderCell__sortIcon',
+    aside: 'fui-TableHeaderCell__aside'
+};
+const useTableLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f15pt5es",
+        ha4doy: "fmrv4ls"
+    }
+}, {
+    d: [
+        ".f15pt5es{display:table-cell;}",
+        ".fmrv4ls{vertical-align:middle;}"
+    ]
+});
+const useFlexLayoutStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        xawz: 0,
+        Bh6795r: 0,
+        Bnnss6s: 0,
+        fkmc3a: "f1izfyrr",
+        Bf4jedk: "f10tiqix"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        [
+            ".f1izfyrr{flex:1 1 0px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f10tiqix{min-width:0px;}"
+    ]
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bhrd7zp: "figsok6",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f3gpkru",
+        robkg1: 0,
+        Bmvh20x: 0,
+        B3nxjsc: 0,
+        Bmkhcsx: "f14ym4q2",
+        B8osjzx: 0,
+        pehzd3: 0,
+        Blsv9te: 0,
+        u7xebq: 0,
+        Bsvwmf7: "f1euou18",
+        qhf8xq: "f10pi13n"
+    },
+    rootInteractive: {
+        Bi91k9c: "feu1g3u",
+        Jwef8y: "f1t94bn6",
+        lj723h: "f1g4hkjv",
+        ecr2s2: "f1wfn5kd"
+    },
+    resetButton: {
+        B3rzk8w: "fq6nmtn",
+        B7ck84d: "f1e4lqlz",
+        De3pzq: "f1u2r49w",
+        sj55zd: "f1ym3bx4",
+        Bahqtrf: "f1mo0ibp",
+        Be2twd7: "fjoy568",
+        Bg96gwp: "fytdu2e",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1gl81tg",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1mk8lai",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh",
+        fsow6f: "fgusgyc"
+    },
+    button: {
+        qhf8xq: "f10pi13n",
+        a9b677: "fly5x3f",
+        mc9l5x: "f22iagw",
+        Bh6795r: 0,
+        Bqenvij: "f1l02sjl",
+        Bt984gj: "f122n59",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "fkln5zr",
+        sshi5w: "f1nxs5xn",
+        xawz: 0,
+        Bnnss6s: 0,
+        fkmc3a: "f1izfyrr",
+        oeaueh: "f1s6fcnf"
+    },
+    sortable: {
+        Bceei9c: "f1k6fduh"
+    },
+    sortIcon: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        z8tnut: "fclwglc"
+    },
+    resizeHandle: {}
+}, {
+    d: [
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        [
+            ".f3gpkru{padding:0px var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f14ym4q2[data-fui-focus-within]:focus-within{outline:2px solid var(--colorStrokeFocus2);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1euou18[data-fui-focus-within]:focus-within{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f10pi13n{position:relative;}",
+        ".fq6nmtn{resize:horizontal;}",
+        ".f1e4lqlz{box-sizing:content-box;}",
+        ".f1u2r49w{background-color:inherit;}",
+        ".f1ym3bx4{color:inherit;}",
+        ".f1mo0ibp{font-family:inherit;}",
+        ".fjoy568{font-size:inherit;}",
+        ".fytdu2e{line-height:normal;}",
+        [
+            ".f1gl81tg{overflow:visible;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1mk8lai{padding:0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".fgusgyc{text-align:unset;}",
+        ".fly5x3f{width:100%;}",
+        ".f22iagw{display:flex;}",
+        ".fqerorx{flex-grow:1;}",
+        ".f1l02sjl{height:100%;}",
+        ".f122n59{align-items:center;}",
+        [
+            ".fkln5zr{gap:var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1nxs5xn{min-height:32px;}",
+        [
+            ".f1izfyrr{flex:1 1 0px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1s6fcnf{outline-style:none;}",
+        ".f1k6fduh{cursor:pointer;}",
+        ".fclwglc{padding-top:var(--spacingVerticalXXS);}"
+    ],
+    h: [
+        ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
+        ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"
+    ],
+    a: [
+        ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
+        ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"
+    ]
+});
+const useTableHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    state.button.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+    if (state.sortIcon) {
+        state.sortIcon.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-table/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.raw.js

@@ -0,0 +1,121 @@
+'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, {
+    tableHeaderCellClassName: function() {
+        return tableHeaderCellClassName;
+    },
+    tableHeaderCellClassNames: function() {
+        return tableHeaderCellClassNames;
+    },
+    useTableHeaderCellStyles_unstable: function() {
+        return useTableHeaderCellStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const tableHeaderCellClassName = 'fui-TableHeaderCell';
+const tableHeaderCellClassNames = {
+    root: 'fui-TableHeaderCell',
+    button: 'fui-TableHeaderCell__button',
+    sortIcon: 'fui-TableHeaderCell__sortIcon',
+    aside: 'fui-TableHeaderCell__aside'
+};
+const useTableLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'table-cell',
+        verticalAlign: 'middle'
+    }
+});
+const useFlexLayoutStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flex: '1 1 0px',
+        minWidth: '0px'
+    }
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        padding: `0px ${_reacttheme.tokens.spacingHorizontalS}`,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            outline: `2px solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        }, {
+            selector: 'focus-within'
+        }),
+        position: 'relative'
+    },
+    rootInteractive: {
+        ':hover': {
+            color: _reacttheme.tokens.colorNeutralForeground1Hover,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundHover
+        },
+        ':active': {
+            color: _reacttheme.tokens.colorNeutralForeground1Pressed,
+            backgroundColor: _reacttheme.tokens.colorSubtleBackgroundPressed
+        }
+    },
+    resetButton: {
+        resize: 'horizontal',
+        boxSizing: 'content-box',
+        backgroundColor: 'inherit',
+        color: 'inherit',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'normal',
+        overflow: 'visible',
+        padding: '0',
+        border: 'none',
+        textAlign: 'unset'
+    },
+    button: {
+        position: 'relative',
+        width: '100%',
+        display: 'flex',
+        flexGrow: 1,
+        height: '100%',
+        alignItems: 'center',
+        gap: _reacttheme.tokens.spacingHorizontalXS,
+        minHeight: '32px',
+        flex: '1 1 0px',
+        outlineStyle: 'none'
+    },
+    sortable: {
+        cursor: 'pointer'
+    },
+    sortIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        paddingTop: _reacttheme.tokens.spacingVerticalXXS
+    },
+    resizeHandle: {}
+});
+const useTableHeaderCellStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyles = {
+        table: useTableLayoutStyles(),
+        flex: useFlexLayoutStyles()
+    };
+    state.root.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
+    state.button.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);
+    if (state.sortIcon) {
+        state.sortIcon.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);
+    }
+    if (state.aside) {
+        state.aside.className = (0, _react.mergeClasses)(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);
+    }
+    return state;
+};