feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useTableRow_unstable } from './useTableRow';
+import { renderTableRow_unstable } from './renderTableRow';
+import { useTableRowStyles_unstable } from './useTableRowStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TableRow component
+ */ export const TableRow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTableRow_unstable(props, ref);
+    useTableRowStyles_unstable(state);
+    useCustomStyleHook_unstable('useTableRowStyles_unstable')(state);
+    return renderTableRow_unstable(state);
+});
+TableRow.displayName = 'TableRow';

node_modules/@fluentui/react-table/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAE1CL,2BAA2BM;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOP,wBAAwBO;AACjC,GAAG;AAEHJ,SAASK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1,4 @@
+export { TableRow } from './TableRow';
+export { renderTableRow_unstable } from './renderTableRow';
+export { useTableRow_unstable } from './useTableRow';
+export { tableRowClassName, tableRowClassNames, useTableRowStyles_unstable } from './useTableRowStyles.styles';

node_modules/@fluentui/react-table/lib/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":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

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

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TableRow
+ */ export const renderTableRow_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-table/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,42 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
+import { useTableContext } from '../../contexts/tableContext';
+import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
+/**
+ * Create the state required to render TableRow.
+ *
+ * The returned state can be modified with hooks such as useTableRowStyles_unstable,
+ * before being passed to renderTableRow_unstable.
+ *
+ * @param props - props from this instance of TableRow
+ * @param ref - reference to root HTMLElement of TableRow
+ */ export const useTableRow_unstable = (props, ref)=>{
+    const { noNativeElements, size } = useTableContext();
+    var _props_as;
+    const rootComponent = ((_props_as = props.as) !== null && _props_as !== void 0 ? _props_as : noNativeElements) ? 'div' : 'tr';
+    const focusVisibleRef = useFocusVisible();
+    const focusWithinRef = useFocusWithin();
+    const isHeaderRow = useIsInTableHeader();
+    var _props_appearance;
+    return {
+        components: {
+            root: rootComponent
+        },
+        root: slot.always(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: 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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,SAASC,eAAe,EAAEC,cAAc,QAAQ,0BAA0B;AAE1E,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,gBAAgB,EAAEC,IAAI,EAAE,GAAGN;QACbG;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAe,IAAI,QAAQ;IAC7D,MAAMI,kBAAkBX;IACxB,MAAMY,iBAAiBX;IACvB,MAAMY,cAAcV;QAmBNE;IAjBd,OAAO;QACLS,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMhB,KAAKiB,MAAM,CACfnB,yBAAyBY,eAAe;YACtC,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FH,KAAKR,cAAcQ,KAAKK,iBAAiBC;YACzCK,MAAMR,kBAAkB,QAAQ,QAAQS;YACxC,GAAGb,KAAK;QACV,IACA;YAAEc,aAAaV;QAAc;QAE/BD;QACAD;QACAa,YAAYf,CAAAA,oBAAAA,MAAMe,UAAU,cAAhBf,+BAAAA,oBAAoB;QAChCQ;IACF;AACF,EAAE"}

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

@@ -0,0 +1,189 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';
+import { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const tableRowClassName = 'fui-TableRow';
+export const tableRowClassNames = {
+  root: tableRowClassName
+};
+const useTableLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f1u0rzck"
+  }
+}, {
+  d: [".f1u0rzck{display:table-row;}"]
+});
+const useFlexLayoutStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
+});
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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)"
+  }]]
+});
+/**
+ * Apply styling to the TableRow slots based on the state
+ */
+export const useTableRowStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const layoutStyles = {
+    table: useTableLayoutStyles(),
+    flex: useFlexLayoutStyles()
+  };
+  state.root.className = 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/components/TableRow/useTableRowStyles.styles.raw.js

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