feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useTableCellLayout_unstable } from './useTableCellLayout';
+import { renderTableCellLayout_unstable } from './renderTableCellLayout';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';
+import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TableCellLayout component
+ */ export const TableCellLayout = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTableCellLayout_unstable(props, ref);
+    useTableCellLayoutStyles_unstable(state);
+    useCustomStyleHook_unstable('useTableCellLayoutStyles_unstable')(state);
+    return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));
+});
+TableCellLayout.displayName = 'TableCellLayout';

node_modules/@fluentui/react-table/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AACtF,SAASC,wCAAwC,QAAQ,oCAAoC;AAG7F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQT,4BAA4BO,OAAOC;IAEjDN,kCAAkCO;IAElCL,4BAA4B,qCAAqCK;IAEjE,OAAOR,+BAA+BQ,OAAON,yCAAyCM;AACxF,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering TableCellLayout
+ */ export { };

node_modules/@fluentui/react-table/lib/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/components/TableCellLayout/index.js

@@ -0,0 +1,4 @@
+export { TableCellLayout } from './TableCellLayout';
+export { renderTableCellLayout_unstable } from './renderTableCellLayout';
+export { useTableCellLayout_unstable } from './useTableCellLayout';
+export { tableCellLayoutClassNames, useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';

node_modules/@fluentui/react-table/lib/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":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAOpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

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

@@ -0,0 +1,24 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { AvatarContextProvider } from '@fluentui/react-avatar';
+/**
+ * Render the final JSX of TableCellLayout
+ */ export const renderTableCellLayout_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ _jsx(AvatarContextProvider, {
+                value: contextValues.avatar,
+                children: /*#__PURE__*/ _jsx(state.media, {})
+            }),
+            state.content && /*#__PURE__*/ _jsxs(state.content, {
+                children: [
+                    state.main && /*#__PURE__*/ _jsx(state.main, {
+                        children: state.root.children
+                    }),
+                    state.description && /*#__PURE__*/ _jsx(state.description, {})
+                ]
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-table/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,yBAAyB;AAG/D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEAJ,YAAkCG;IAElC,qBACE,MAACA,MAAME,IAAI;;YACRF,MAAMG,KAAK,kBACV,KAACL;gBAAsBM,OAAOH,cAAcI,MAAM;0BAChD,cAAA,KAACL,MAAMG,KAAK;;YAIfH,MAAMM,OAAO,kBACZ,MAACN,MAAMM,OAAO;;oBACXN,MAAMO,IAAI,kBAAI,KAACP,MAAMO,IAAI;kCAAEP,MAAME,IAAI,CAACM,QAAQ;;oBAC9CR,MAAMS,WAAW,kBAAI,KAACT,MAAMS,WAAW;;;;;AAKlD,EAAE"}

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

@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useTableContext } from '../../contexts/tableContext';
+const tableAvatarSizeMap = {
+    medium: 32,
+    small: 24,
+    'extra-small': 20
+};
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */ export const useTableCellLayout_unstable = (props, ref)=>{
+    const { size } = useTableContext();
+    return {
+        components: {
+            root: 'div',
+            main: 'span',
+            description: 'span',
+            content: 'div',
+            media: 'span'
+        },
+        root: slot.always(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` is a slot and it's type clashes with the HTMLElement `content` attribute
+        [
+            'content'
+        ]), {
+            elementType: 'div'
+        }),
+        appearance: props.appearance,
+        truncate: props.truncate,
+        main: slot.optional(props.main, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        media: slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        description: slot.optional(props.description, {
+            elementType: 'span'
+        }),
+        content: slot.optional(props.content, {
+            renderByDefault: !!props.description || !!props.children,
+            elementType: 'div'
+        }),
+        avatarSize: tableAvatarSizeMap[size],
+        size
+    };
+};

node_modules/@fluentui/react-table/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,OAAO;IACP,eAAe;AACjB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGP;IAEjB,OAAO;QACLQ,YAAY;YACVC,MAAM;YACNC,MAAM;YACNC,aAAa;YACbC,SAAS;YACTC,OAAO;QACT;QACAJ,MAAMV,KAAKe,MAAM,CACfhB,yBACE,OACA;YACE,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FQ,KAAKA;YACL,GAAGD,KAAK;QACV,GACA,qFAAqF;QACrF;YAAC;SAAU,GAEb;YAAEU,aAAa;QAAM;QAEvBC,YAAYX,MAAMW,UAAU;QAC5BC,UAAUZ,MAAMY,QAAQ;QACxBP,MAAMX,KAAKmB,QAAQ,CAACb,MAAMK,IAAI,EAAE;YAAES,iBAAiB;YAAMJ,aAAa;QAAO;QAC7EF,OAAOd,KAAKmB,QAAQ,CAACb,MAAMQ,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDJ,aAAaZ,KAAKmB,QAAQ,CAACb,MAAMM,WAAW,EAAE;YAAEI,aAAa;QAAO;QACpEH,SAASb,KAAKmB,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/components/TableCellLayout/useTableCellLayoutContextValues.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+export function useTableCellLayoutContextValues_unstable(state) {
+    const { avatarSize } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
+}

node_modules/@fluentui/react-table/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,yCAAyCC,KAA2B;IAClF,MAAM,EAAEC,UAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAC1B,IAAO,CAAA;YACLC,MAAMH;QACR,CAAA,GACA;QAACA;KAAW;IAGd,OAAO;QACLC;IACF;AACF"}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { typographyStyles } from '@fluentui/react-theme';
+export 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__*/__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);}"]
+});
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */
+export const useTableCellLayoutStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    truncate
+  } = state;
+  state.root.className = 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 = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+  }
+  if (state.main) {
+    state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+  }
+  if (state.description) {
+    state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
+  }
+  if (state.content) {
+    state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+  }
+  return state;
+};

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

@@ -0,0 +1,83 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { typographyStyles } from '@fluentui/react-theme';
+export 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 = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 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: tokens.fontWeightSemibold
+    },
+    mainTruncate: {
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    },
+    description: {
+        color: tokens.colorNeutralForeground2,
+        ...typographyStyles.caption1
+    }
+});
+/**
+ * Apply styling to the TableCellLayout slots based on the state
+ */ export const useTableCellLayoutStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { truncate } = state;
+    state.root.className = 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 = mergeClasses(tableCellLayoutClassNames.media, styles.media, mediaSizedStyles[state.size], primary && styles.mediaPrimary, state.media.className);
+    }
+    if (state.main) {
+        state.main.className = mergeClasses(tableCellLayoutClassNames.main, truncate && styles.mainTruncate, primary && styles.mainPrimary, state.main.className);
+    }
+    if (state.description) {
+        state.description.className = mergeClasses(tableCellLayoutClassNames.description, styles.description, state.description.className);
+    }
+    if (state.content) {
+        state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, truncate && styles.contentTruncate, state.content.className);
+    }
+    return state;
+};