feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TableCellLayout", {
+    enumerable: true,
+    get: function() {
+        return TableCellLayout;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useTableCellLayout = require("./useTableCellLayout");
+const _renderTableCellLayout = require("./renderTableCellLayout");
+const _useTableCellLayoutStylesstyles = require("./useTableCellLayoutStyles.styles");
+const _useTableCellLayoutContextValues = require("./useTableCellLayoutContextValues");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const TableCellLayout = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTableCellLayout.useTableCellLayout_unstable)(props, ref);
+    (0, _useTableCellLayoutStylesstyles.useTableCellLayoutStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTableCellLayoutStyles_unstable')(state);
+    return (0, _renderTableCellLayout.renderTableCellLayout_unstable)(state, (0, _useTableCellLayoutContextValues.useTableCellLayoutContextValues_unstable)(state));
+});
+TableCellLayout.displayName = 'TableCellLayout';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/TableCellLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTableCellLayout_unstable } from './useTableCellLayout';\nimport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nimport { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';\nimport { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';\nimport type { TableCellLayoutProps } from './TableCellLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableCellLayout component\n */\nexport const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellLayout_unstable(props, ref);\n\n  useTableCellLayoutStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableCellLayoutStyles_unstable')(state);\n\n  return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));\n});\n\nTableCellLayout.displayName = 'TableCellLayout';\n"],"names":["React","useTableCellLayout_unstable","renderTableCellLayout_unstable","useTableCellLayoutStyles_unstable","useTableCellLayoutContextValues_unstable","useCustomStyleHook_unstable","TableCellLayout","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCACa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;iDAC7B,oCAAoC;qCAGjD,kCAAkC;AAKvE,MAAMM,kBAAAA,WAAAA,GAA6DN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQT,+CAAAA,EAA4BO,OAAOC;QAEjDN,iEAAAA,EAAkCO;QAElCL,gDAAAA,EAA4B,qCAAqCK;IAEjE,WAAOR,qDAAAA,EAA+BQ,WAAON,yEAAAA,EAAyCM;AACxF,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n  avatar: {\n    size?: AvatarSize;\n  };\n};\n\nexport type TableCellLayoutSlots = {\n  root: Slot<'div'>;\n\n  /**\n   * Slot for an icon or other visual element\n   */\n  media: Slot<'span'>;\n\n  /**\n   * Main text for the table cell. Children of the root slot are automatically rendered here\n   */\n  main: Slot<'span'>;\n\n  /**\n   * Secondary text that describes or complements the main text\n   */\n  description: Slot<'span'>;\n\n  /**\n   * A layout wrapper for the main and description slots\n   */\n  content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> &\n  Pick<Partial<TableCellLayoutSlots>, 'content'> & {\n    /**\n     * Renders design variants of the table cell\n     * @default undefined\n     */\n    appearance?: 'primary';\n\n    /**\n     * Renders content with overflow: hidden and text-overflow: ellipsis\n     */\n    truncate?: boolean;\n  };\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n  Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n    TableContextValue,\n    'size'\n  >;\n"],"names":[],"mappings":"AAmDA;;CAEC,GACD,WAII"}

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

@@ -0,0 +1,31 @@
+"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, {
+    TableCellLayout: function() {
+        return _TableCellLayout.TableCellLayout;
+    },
+    renderTableCellLayout_unstable: function() {
+        return _renderTableCellLayout.renderTableCellLayout_unstable;
+    },
+    tableCellLayoutClassNames: function() {
+        return _useTableCellLayoutStylesstyles.tableCellLayoutClassNames;
+    },
+    useTableCellLayoutStyles_unstable: function() {
+        return _useTableCellLayoutStylesstyles.useTableCellLayoutStyles_unstable;
+    },
+    useTableCellLayout_unstable: function() {
+        return _useTableCellLayout.useTableCellLayout_unstable;
+    }
+});
+const _TableCellLayout = require("./TableCellLayout");
+const _renderTableCellLayout = require("./renderTableCellLayout");
+const _useTableCellLayout = require("./useTableCellLayout");
+const _useTableCellLayoutStylesstyles = require("./useTableCellLayoutStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/index.ts"],"sourcesContent":["export { TableCellLayout } from './TableCellLayout';\nexport type {\n  TableCellLayoutContextValues,\n  TableCellLayoutProps,\n  TableCellLayoutSlots,\n  TableCellLayoutState,\n} from './TableCellLayout.types';\nexport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nexport { useTableCellLayout_unstable } from './useTableCellLayout';\nexport { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';\n"],"names":["TableCellLayout","renderTableCellLayout_unstable","useTableCellLayout_unstable","tableCellLayoutClassNames","useTableCellLayoutStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAOfC,qDAA8B;;;eAE9BE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCARJ,oBAAoB;uCAOL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTableCellLayout_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderTableCellLayout_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactavatar = require("@fluentui/react-avatar");
+const renderTableCellLayout_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactavatar.AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.media, {})
+            }),
+            state.content && /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
+                children: [
+                    state.main && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.main, {
+                        children: state.root.children
+                    }),
+                    state.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.description, {})
+                ]
+            })
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/renderTableCellLayout.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport type { TableCellLayoutState, TableCellLayoutSlots, TableCellLayoutContextValues } from './TableCellLayout.types';\n\n/**\n * Render the final JSX of TableCellLayout\n */\nexport const renderTableCellLayout_unstable = (\n  state: TableCellLayoutState,\n  contextValues: TableCellLayoutContextValues,\n): JSXElement => {\n  assertSlots<TableCellLayoutSlots>(state);\n\n  return (\n    <state.root>\n      {state.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <state.media />\n        </AvatarContextProvider>\n      )}\n\n      {state.content && (\n        <state.content>\n          {state.main && <state.main>{state.root.children}</state.main>}\n          {state.description && <state.description />}\n        </state.content>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","AvatarContextProvider","renderTableCellLayout_unstable","state","contextValues","root","media","value","avatar","content","main","children","description"],"mappings":";;;;+BAUaE;;;;;;4BATb,iCAAiD;gCACrB,4BAA4B;6BAElB,yBAAyB;AAMxD,uCAAuC,CAC5CC,OACAC;QAEAJ,2BAAAA,EAAkCG;IAElC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAME,IAAI,EAAA;;YACRF,MAAMG,KAAK,IAAA,WAAA,OACV,eAAA,EAACL,kCAAAA,EAAAA;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,WAAA,OAAA,eAAA,EAACL,MAAMG,KAAK,EAAA,CAAA;;YAIfH,MAAMM,OAAO,IAAA,WAAA,OACZ,gBAAA,EAACN,MAAMM,OAAO,EAAA;;oBACXN,MAAMO,IAAI,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,IAAI,EAAA;kCAAEP,MAAME,IAAI,CAACM,QAAQ;;oBAC9CR,MAAMS,WAAW,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,WAAW,EAAA,CAAA;;;;;AAKlD,EAAE"}

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

@@ -0,0 +1,61 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableCellLayout_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTableCellLayout_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 _tableContext = require("../../contexts/tableContext");
+const tableAvatarSizeMap = {
+    medium: 32,
+    small: 24,
+    'extra-small': 20
+};
+const useTableCellLayout_unstable = (props, ref)=>{
+    const { size } = (0, _tableContext.useTableContext)();
+    return {
+        components: {
+            root: 'div',
+            main: 'span',
+            description: 'span',
+            content: 'div',
+            media: 'span'
+        },
+        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
+        }, [
+            'content'
+        ]), {
+            elementType: 'div'
+        }),
+        appearance: props.appearance,
+        truncate: props.truncate,
+        main: _reactutilities.slot.optional(props.main, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        media: _reactutilities.slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        description: _reactutilities.slot.optional(props.description, {
+            elementType: 'span'
+        }),
+        content: _reactutilities.slot.optional(props.content, {
+            renderByDefault: !!props.description || !!props.children,
+            elementType: 'div'
+        }),
+        avatarSize: tableAvatarSizeMap[size],
+        size
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\nconst tableAvatarSizeMap = {\n  medium: 32,\n  small: 24,\n  'extra-small': 20,\n} as const;\n\n/**\n * Create the state required to render TableCellLayout.\n *\n * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,\n * before being passed to renderTableCellLayout_unstable.\n *\n * @param props - props from this instance of TableCellLayout\n * @param ref - reference to root HTMLElement of TableCellLayout\n */\nexport const useTableCellLayout_unstable = (\n  props: TableCellLayoutProps,\n  ref: React.Ref<HTMLElement>,\n): TableCellLayoutState => {\n  const { size } = useTableContext();\n\n  return {\n    components: {\n      root: 'div',\n      main: 'span',\n      description: 'span',\n      content: 'div',\n      media: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps(\n        'div',\n        {\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        // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n        ['content'],\n      ),\n      { elementType: 'div' },\n    ),\n    appearance: props.appearance,\n    truncate: props.truncate,\n    main: slot.optional(props.main, { renderByDefault: true, elementType: 'span' }),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    description: slot.optional(props.description, { elementType: 'span' }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.description || !!props.children,\n      elementType: 'div',\n    }),\n    avatarSize: tableAvatarSizeMap[size],\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableContext","tableAvatarSizeMap","medium","small","useTableCellLayout_unstable","props","ref","size","components","root","main","description","content","media","always","elementType","appearance","truncate","optional","renderByDefault","children","avatarSize"],"mappings":"AAAA;;;;;+BAsBaO;;;;;;;iEApBU,QAAQ;gCACgB,4BAA4B;8BAE3C,8BAA8B;AAE9D,MAAMH,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAWO,oCAAoC,CACzCE,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGP,6BAAAA;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMV,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EACE,OACA;YACE,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKA;YACL,GAAGD,KAAK;QACV,GACA,AACA,qFADqF;YACpF;SAAU,GAEb;YAAEU,aAAa;QAAM;QAEvBC,YAAYX,MAAMW,UAAU;QAC5BC,UAAUZ,MAAMY,QAAQ;QACxBP,MAAMX,oBAAAA,CAAKmB,QAAQ,CAACb,MAAMK,IAAI,EAAE;YAAES,iBAAiB;YAAMJ,aAAa;QAAO;QAC7EF,OAAOd,oBAAAA,CAAKmB,QAAQ,CAACb,MAAMQ,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDJ,aAAaZ,oBAAAA,CAAKmB,QAAQ,CAACb,MAAMM,WAAW,EAAE;YAAEI,aAAa;QAAO;QACpEH,SAASb,oBAAAA,CAAKmB,QAAQ,CAACb,MAAMO,OAAO,EAAE;YACpCO,iBAAiB,CAAC,CAACd,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMe,QAAQ;YACxDL,aAAa;QACf;QACAM,YAAYpB,kBAAkB,CAACM,KAAK;QACpCA;IACF;AACF,EAAE"}

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useTableCellLayoutContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useTableCellLayoutContextValues_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function useTableCellLayoutContextValues_unstable(state) {
+    const { avatarSize } = state;
+    const avatar = _react.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TableCellLayout/useTableCellLayoutContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TableCellLayoutState, TableCellLayoutContextValues } from './TableCellLayout.types';\n\nexport function useTableCellLayoutContextValues_unstable(state: TableCellLayoutState): TableCellLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo(\n    () => ({\n      size: avatarSize,\n    }),\n    [avatarSize],\n  );\n\n  return {\n    avatar,\n  };\n}\n"],"names":["React","useTableCellLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,OAAMK,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMH;SACR,CAAA,EACA;QAACA;KAAW;IAGd,OAAO;QACLC;IACF;AACF"}

node_modules/@fluentui/react-table/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.styles.js

@@ -0,0 +1,135 @@
+'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, {
+    tableCellLayoutClassNames: function() {
+        return tableCellLayoutClassNames;
+    },
+    useTableCellLayoutStyles_unstable: function() {
+        return useTableCellLayoutStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const tableCellLayoutClassNames = {
+    root: 'fui-TableCellLayout',
+    media: 'fui-TableCellLayout__media',
+    main: 'fui-TableCellLayout__main',
+    description: 'fui-TableCellLayout__description',
+    content: 'fui-TableCellLayout__content'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        i8kkvl: 0,
+        Belr9w4: 0,
+        rmohyg: "faqewft",
+        xawz: 0,
+        Bh6795r: 0,
+        Bnnss6s: 0,
+        fkmc3a: "f1izfyrr"
+    },
+    rootTruncate: {
+        B68tc82: "f1p9o1ba"
+    },
+    content: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62"
+    },
+    contentTruncate: {
+        B68tc82: "f1p9o1ba"
+    },
+    media: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    },
+    mediaExtraSmall: {
+        Be2twd7: "f4ybsrx"
+    },
+    mediaSmallAndMedium: {
+        Be2twd7: "fe5j1ua"
+    },
+    mediaPrimary: {
+        Be2twd7: "f1rt2boy"
+    },
+    mainPrimary: {
+        Bhrd7zp: "fl43uef"
+    },
+    mainTruncate: {
+        B68tc82: "f1p9o1ba",
+        Huce71: "fz5stix",
+        ygn44y: "f1cmbuwj"
+    },
+    description: {
+        sj55zd: "fkfq4zb",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        [
+            ".faqewft{gap:var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1izfyrr{flex:1 1 0px;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1p9o1ba{overflow-x:hidden;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f4ybsrx{font-size:16px;}",
+        ".fe5j1ua{font-size:20px;}",
+        ".f1rt2boy{font-size:24px;}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fz5stix{white-space:nowrap;}",
+        ".f1cmbuwj{text-overflow:ellipsis;}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}"
+    ]
+});
+const useTableCellLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { truncate } = state;
+    state.root.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
+    const primary = state.appearance === 'primary';
+    if (state.media) {
+        const mediaSizedStyles = {
+            small: styles.mediaSmallAndMedium,
+            medium: styles.mediaSmallAndMedium,
+            'extra-small': styles.mediaExtraSmall
+        };
+        state.media.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+    }
+    if (state.main) {
+        state.main.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.description, styles.description, state.description.className);
+    }
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-table/lib-commonjs/components/TableCellLayout/useTableCellLayoutStyles.styles.raw.js

@@ -0,0 +1,98 @@
+'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, {
+    tableCellLayoutClassNames: function() {
+        return tableCellLayoutClassNames;
+    },
+    useTableCellLayoutStyles_unstable: function() {
+        return useTableCellLayoutStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const tableCellLayoutClassNames = {
+    root: 'fui-TableCellLayout',
+    media: 'fui-TableCellLayout__media',
+    main: 'fui-TableCellLayout__main',
+    description: 'fui-TableCellLayout__description',
+    content: 'fui-TableCellLayout__content'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: _reacttheme.tokens.spacingHorizontalS,
+        flex: '1 1 0px'
+    },
+    rootTruncate: {
+        overflowX: 'hidden'
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'column'
+    },
+    contentTruncate: {
+        overflowX: 'hidden'
+    },
+    media: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    mediaExtraSmall: {
+        fontSize: '16px'
+    },
+    mediaSmallAndMedium: {
+        fontSize: '20px'
+    },
+    mediaPrimary: {
+        fontSize: '24px'
+    },
+    mainPrimary: {
+        fontWeight: _reacttheme.tokens.fontWeightSemibold
+    },
+    mainTruncate: {
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    description: {
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        ..._reacttheme.typographyStyles.caption1
+    }
+});
+const useTableCellLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { truncate } = state;
+    state.root.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.root, styles.root, truncate && styles.rootTruncate, state.root.className);
+    const primary = state.appearance === 'primary';
+    if (state.media) {
+        const mediaSizedStyles = {
+            small: styles.mediaSmallAndMedium,
+            medium: styles.mediaSmallAndMedium,
+            'extra-small': styles.mediaExtraSmall
+        };
+        state.media.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+    }
+    if (state.main) {
+        state.main.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.description, styles.description, state.description.className);
+    }
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+    }
+    return state;
+};