@fluentui/react-table 9.2.6 → 9.2.8

package/lib/components/DataGridRow/index.js

@@ -2,5 +2,5 @@ export * from './DataGridRow';
 export * from './DataGridRow.types';
 export * from './renderDataGridRow';
 export * from './useDataGridRow';
-export * from './useDataGridRowStyles';
+export * from './useDataGridRowStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DataGridRow/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DataGridRow/index.ts"],"sourcesContent":["export * from './DataGridRow';\nexport * from './DataGridRow.types';\nexport * from './renderDataGridRow';\nexport * from './useDataGridRow';\nexport * from './useDataGridRowStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DataGridRow/index.ts"],"sourcesContent":["export * from './DataGridRow';\nexport * from './DataGridRow.types';\nexport * from './renderDataGridRow';\nexport * from './useDataGridRow';\nexport * from './useDataGridRowStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DataGridRow/{useDataGridRowStyles.js → useDataGridRowStyles.styles.js}

@@ -1,5 +1,5 @@
 import { mergeClasses } from '@griffel/react';
-import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles';
+import { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';
 export const dataGridRowClassNames = {
   root: 'fui-DataGridRow',
   selectionCell: 'fui-DataGridRow__selectionCell'
@@ -15,4 +15,4 @@ export const useDataGridRowStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDataGridRowStyles.js.map
+//# sourceMappingURL=useDataGridRowStyles.styles.js.map

package/lib/components/DataGridRow/useDataGridRowStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","useTableRowStyles_unstable","dataGridRowClassNames","root","selectionCell","useDataGridRowStyles_unstable","state","className"],"sources":["../../../src/components/DataGridRow/useDataGridRowStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridRowSlots, DataGridRowState } from './DataGridRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableRowStyles_unstable } from '../TableRow/useTableRowStyles.styles';\n\nexport const dataGridRowClassNames: SlotClassNames<DataGridRowSlots> = {\n  root: 'fui-DataGridRow',\n  selectionCell: 'fui-DataGridRow__selectionCell',\n};\n\n/**\n * Apply styling to the DataGridRow slots based on the state\n */\nexport const useDataGridRowStyles_unstable = (state: DataGridRowState): DataGridRowState => {\n  useTableRowStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridRowClassNames.root, state.root.className);\n  if (state.selectionCell) {\n    state.selectionCell.className = mergeClasses(dataGridRowClassNames.selectionCell, state.selectionCell.className);\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,SAASC,0BAA0B,QAAQ;AAE3C,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,aAAA,EAAe;AACjB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1FL,0BAAA,CAA2BK,KAAA;EAC3BA,KAAA,CAAMH,IAAI,CAACI,SAAS,GAAGP,YAAA,CAAaE,qBAAA,CAAsBC,IAAI,EAAEG,KAAA,CAAMH,IAAI,CAACI,SAAS;EACpF,IAAID,KAAA,CAAMF,aAAa,EAAE;IACvBE,KAAA,CAAMF,aAAa,CAACG,SAAS,GAAGP,YAAA,CAAaE,qBAAA,CAAsBE,aAAa,EAAEE,KAAA,CAAMF,aAAa,CAACG,SAAS;EACjH;EAEA,OAAOD,KAAA;AACT"}

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';
 import { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';
-import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * DataGridSelectionCell component
  */
 export const DataGridSelectionCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useDataGridSelectionCell_unstable(props, ref);
   useDataGridSelectionCellStyles_unstable(state);
-  const {
-    useDataGridSelectionCellStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useDataGridSelectionCellStyles_unstable')(state);
   return renderDataGridSelectionCell_unstable(state);
 });
 DataGridSelectionCell.displayName = 'DataGridSelectionCell';

package/lib/components/DataGridSelectionCell/DataGridSelectionCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","useDataGridSelectionCellStyles_unstable","useCustomStyleHooks_unstable","DataGridSelectionCell","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridSelectionCell component\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n\n  const { useDataGridSelectionCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExC,MAAM;IAAEN,uCAAA,EAAyCO;EAAe,CAAE,GAAGN,4BAAA;EACrEM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,oCAAA,CAAqCO,KAAA;AAC9C;AAEAJ,qBAAA,CAAsBM,WAAW,GAAG"}
+{"version":3,"names":["React","useDataGridSelectionCell_unstable","renderDataGridSelectionCell_unstable","useDataGridSelectionCellStyles_unstable","useCustomStyleHook_unstable","DataGridSelectionCell","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/DataGridSelectionCell/DataGridSelectionCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDataGridSelectionCell_unstable } from './useDataGridSelectionCell';\nimport { renderDataGridSelectionCell_unstable } from './renderDataGridSelectionCell';\nimport { useDataGridSelectionCellStyles_unstable } from './useDataGridSelectionCellStyles.styles';\nimport type { DataGridSelectionCellProps } from './DataGridSelectionCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * DataGridSelectionCell component\n */\nexport const DataGridSelectionCell: ForwardRefComponent<DataGridSelectionCellProps> = React.forwardRef((props, ref) => {\n  const state = useDataGridSelectionCell_unstable(props, ref);\n\n  useDataGridSelectionCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDataGridSelectionCellStyles_unstable')(state);\n\n  return renderDataGridSelectionCell_unstable(state);\n});\n\nDataGridSelectionCell.displayName = 'DataGridSelectionCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iCAAiC,QAAQ;AAClD,SAASC,oCAAoC,QAAQ;AACrD,SAASC,uCAAuC,QAAQ;AAGxD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,qBAAA,gBAAyEL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrH,MAAMC,KAAA,GAAQR,iCAAA,CAAkCM,KAAA,EAAOC,GAAA;EAEvDL,uCAAA,CAAwCM,KAAA;EAExCL,2BAAA,CAA4B,2CAA2CK,KAAA;EAEvE,OAAOP,oCAAA,CAAqCO,KAAA;AAC9C;AAEAJ,qBAAA,CAAsBK,WAAW,GAAG"}

package/lib/components/DataGridSelectionCell/index.js

@@ -2,5 +2,5 @@ export * from './DataGridSelectionCell';
 export * from './DataGridSelectionCell.types';
 export * from './renderDataGridSelectionCell';
 export * from './useDataGridSelectionCell';
-export * from './useDataGridSelectionCellStyles';
+export * from './useDataGridSelectionCellStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/DataGridSelectionCell/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/DataGridSelectionCell/index.ts"],"sourcesContent":["export * from './DataGridSelectionCell';\nexport * from './DataGridSelectionCell.types';\nexport * from './renderDataGridSelectionCell';\nexport * from './useDataGridSelectionCell';\nexport * from './useDataGridSelectionCellStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/DataGridSelectionCell/index.ts"],"sourcesContent":["export * from './DataGridSelectionCell';\nexport * from './DataGridSelectionCell.types';\nexport * from './renderDataGridSelectionCell';\nexport * from './useDataGridSelectionCell';\nexport * from './useDataGridSelectionCellStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/DataGridSelectionCell/{useDataGridSelectionCellStyles.js → useDataGridSelectionCellStyles.styles.js}

@@ -1,5 +1,5 @@
 import { mergeClasses } from '@griffel/react';
-import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles';
+import { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';
 export const dataGridSelectionCellClassNames = {
   root: 'fui-DataGridSelectionCell',
   checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',
@@ -19,4 +19,4 @@ export const useDataGridSelectionCellStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useDataGridSelectionCellStyles.js.map
+//# sourceMappingURL=useDataGridSelectionCellStyles.styles.js.map

package/lib/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","useTableSelectionCellStyles_unstable","dataGridSelectionCellClassNames","root","checkboxIndicator","radioIndicator","useDataGridSelectionCellStyles_unstable","state","className"],"sources":["../../../src/components/DataGridSelectionCell/useDataGridSelectionCellStyles.styles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { DataGridSelectionCellSlots, DataGridSelectionCellState } from './DataGridSelectionCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { useTableSelectionCellStyles_unstable } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\n\nexport const dataGridSelectionCellClassNames: SlotClassNames<DataGridSelectionCellSlots> = {\n  root: 'fui-DataGridSelectionCell',\n  checkboxIndicator: 'fui-DataGridSelectionCell__checkboxIndicator',\n  radioIndicator: 'fui-DataGridSelectionCell__radioIndicator',\n};\n\n/**\n * Apply styling to the DataGridSelectionCell slots based on the state\n */\nexport const useDataGridSelectionCellStyles_unstable = (\n  state: DataGridSelectionCellState,\n): DataGridSelectionCellState => {\n  useTableSelectionCellStyles_unstable(state);\n  state.root.className = mergeClasses(dataGridSelectionCellClassNames.root, state.root.className);\n\n  if (state.checkboxIndicator) {\n    state.checkboxIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.checkboxIndicator,\n      state.checkboxIndicator.className,\n    );\n  }\n\n  if (state.radioIndicator) {\n    state.radioIndicator.className = mergeClasses(\n      dataGridSelectionCellClassNames.radioIndicator,\n      state.radioIndicator.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,SAASC,oCAAoC,QAAQ;AAErD,OAAO,MAAMC,+BAAA,GAA8E;EACzFC,IAAA,EAAM;EACNC,iBAAA,EAAmB;EACnBC,cAAA,EAAgB;AAClB;AAEA;;;AAGA,OAAO,MAAMC,uCAAA,GACXC,KAAA,IAC+B;EAC/BN,oCAAA,CAAqCM,KAAA;EACrCA,KAAA,CAAMJ,IAAI,CAACK,SAAS,GAAGR,YAAA,CAAaE,+BAAA,CAAgCC,IAAI,EAAEI,KAAA,CAAMJ,IAAI,CAACK,SAAS;EAE9F,IAAID,KAAA,CAAMH,iBAAiB,EAAE;IAC3BG,KAAA,CAAMH,iBAAiB,CAACI,SAAS,GAAGR,YAAA,CAClCE,+BAAA,CAAgCE,iBAAiB,EACjDG,KAAA,CAAMH,iBAAiB,CAACI,SAAS;EAErC;EAEA,IAAID,KAAA,CAAMF,cAAc,EAAE;IACxBE,KAAA,CAAMF,cAAc,CAACG,SAAS,GAAGR,YAAA,CAC/BE,+BAAA,CAAgCG,cAAc,EAC9CE,KAAA,CAAMF,cAAc,CAACG,SAAS;EAElC;EAEA,OAAOD,KAAA;AACT"}

package/lib/components/Table/Table.js

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { useTable_unstable } from './useTable';
 import { renderTable_unstable } from './renderTable';
-import { useTableStyles_unstable } from './useTableStyles';
+import { useTableStyles_unstable } from './useTableStyles.styles';
 import { useTableContextValues_unstable } from './useTableContextValues';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Table component
  */
 export const Table = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTable_unstable(props, ref);
   useTableStyles_unstable(state);
-  const {
-    useTableStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableStyles_unstable')(state);
   return renderTable_unstable(state, useTableContextValues_unstable(state));
 });
 Table.displayName = 'Table';

package/lib/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTable_unstable","renderTable_unstable","useTableStyles_unstable","useTableContextValues_unstable","useCustomStyleHooks_unstable","Table","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Table component\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n\n  const { useTableStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AAGxC,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQT,iBAAA,CAAkBO,KAAA,EAAOC,GAAA;EAEvCN,uBAAA,CAAwBO,KAAA;EAExB,MAAM;IAAEP,uBAAA,EAAyBQ;EAAe,CAAE,GAAGN,4BAAA;EACrDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,oBAAA,CAAqBQ,KAAA,EAAON,8BAAA,CAA+BM,KAAA;AACpE;AAEAJ,KAAA,CAAMM,WAAW,GAAG"}
+{"version":3,"names":["React","useTable_unstable","renderTable_unstable","useTableStyles_unstable","useTableContextValues_unstable","useCustomStyleHook_unstable","Table","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTable_unstable } from './useTable';\nimport { renderTable_unstable } from './renderTable';\nimport { useTableStyles_unstable } from './useTableStyles.styles';\nimport type { TableProps } from './Table.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTableContextValues_unstable } from './useTableContextValues';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Table component\n */\nexport const Table: ForwardRefComponent<TableProps> = React.forwardRef((props, ref) => {\n  const state = useTable_unstable(props, ref);\n\n  useTableStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableStyles_unstable')(state);\n\n  return renderTable_unstable(state, useTableContextValues_unstable(state));\n});\n\nTable.displayName = 'Table';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AAGxC,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,KAAA,gBAAyCN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACrF,MAAMC,KAAA,GAAQT,iBAAA,CAAkBO,KAAA,EAAOC,GAAA;EAEvCN,uBAAA,CAAwBO,KAAA;EAExBL,2BAAA,CAA4B,2BAA2BK,KAAA;EAEvD,OAAOR,oBAAA,CAAqBQ,KAAA,EAAON,8BAAA,CAA+BM,KAAA;AACpE;AAEAJ,KAAA,CAAMK,WAAW,GAAG"}

package/lib/components/Table/index.js

@@ -2,5 +2,5 @@ export * from './Table';
 export * from './Table.types';
 export * from './renderTable';
 export * from './useTable';
-export * from './useTableStyles';
+export * from './useTableStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Table/index.ts"],"sourcesContent":["export * from './Table';\nexport * from './Table.types';\nexport * from './renderTable';\nexport * from './useTable';\nexport * from './useTableStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/Table/index.ts"],"sourcesContent":["export * from './Table';\nexport * from './Table.types';\nexport * from './renderTable';\nexport * from './useTable';\nexport * from './useTableStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Table/{useTableStyles.js → useTableStyles.styles.js}

@@ -44,4 +44,4 @@ export const useTableStyles_unstable = state => {
   state.root.className = mergeClasses(tableClassName, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useTableStyles.js.map
+//# sourceMappingURL=useTableStyles.styles.js.map

package/lib/components/Table/useTableStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","tableClassName","tableClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","a9b677","B73mfa3","d","useFlexLayoutStyles","useStyles","po53p8","De3pzq","useTableStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["../../../src/components/Table/useTableStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableSlots, TableState } from './Table.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableClassName = 'fui-Table';\nexport const tableClassNames: SlotClassNames<TableSlots> = {\n  root: 'fui-Table',\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table',\n    verticalAlign: 'middle',\n    width: '100%',\n    tableLayout: 'fixed',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    borderCollapse: 'collapse',\n    backgroundColor: tokens.colorSubtleBackground,\n  },\n});\n\n/**\n * Apply styling to the Table slots based on the state\n */\nexport const useTableStyles_unstable = (state: TableState): TableState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableClassName,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,MAAM,QAAQ;AAIvB,OAAO,MAAMC,cAAA,GAAiB;AAC9B,OAAO,MAAMC,eAAA,GAA8C;EACzDC,IAAA,EAAM;AACR;AAEA,MAAMC,oBAAA,gBAAuBN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAO7B;AAEA,MAAMC,mBAAA,gBAAsBZ,QAAA;EAAAK,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,EAI5B;AAEA;;;AAGA,MAAME,SAAA,gBAAYb,QAAA;EAAAK,IAAA;IAAAS,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAJ,CAAA;AAAA,EAKlB;AAEA;;;AAGA,OAAO,MAAMK,uBAAA,GAA2BC,KAAA,IAAkC;EACxE,MAAMC,MAAA,GAASL,SAAA;EACf,MAAMM,YAAA,GAAe;IACnBC,KAAA,EAAOd,oBAAA;IACPe,IAAA,EAAMT,mBAAA;EACR;EACAK,KAAA,CAAMZ,IAAI,CAACiB,SAAS,GAAGrB,YAAA,CACrBE,cAAA,EACAe,MAAA,CAAOb,IAAI,EACXY,KAAA,CAAMM,gBAAgB,GAAGJ,YAAA,CAAaE,IAAI,CAAChB,IAAI,GAAGc,YAAA,CAAaC,KAAK,CAACf,IAAI,EACzEY,KAAA,CAAMZ,IAAI,CAACiB,SAAS;EAGtB,OAAOL,KAAA;AACT"}

package/lib/components/TableBody/TableBody.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useTableBody_unstable } from './useTableBody';
 import { renderTableBody_unstable } from './renderTableBody';
-import { useTableBodyStyles_unstable } from './useTableBodyStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useTableBodyStyles_unstable } from './useTableBodyStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TableBody component
  */
 export const TableBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableBody_unstable(props, ref);
   useTableBodyStyles_unstable(state);
-  const {
-    useTableBodyStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state);
   return renderTableBody_unstable(state);
 });
 TableBody.displayName = 'TableBody';

package/lib/components/TableBody/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableBody_unstable","renderTableBody_unstable","useTableBodyStyles_unstable","useCustomStyleHooks_unstable","TableBody","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableBody/TableBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableBody_unstable } from './useTableBody';\nimport { renderTableBody_unstable } from './renderTableBody';\nimport { useTableBodyStyles_unstable } from './useTableBodyStyles';\nimport type { TableBodyProps } from './TableBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableBody component\n */\nexport const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTableBody_unstable(props, ref);\n\n  useTableBodyStyles_unstable(state);\n\n  const { useTableBodyStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableBody_unstable(state);\n});\n\nTableBody.displayName = 'TableBody';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAG5C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,SAAA,gBAAiDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQR,qBAAA,CAAsBM,KAAA,EAAOC,GAAA;EAE3CL,2BAAA,CAA4BM,KAAA;EAE5B,MAAM;IAAEN,2BAAA,EAA6BO;EAAe,CAAE,GAAGN,4BAAA;EACzDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,wBAAA,CAAyBO,KAAA;AAClC;AAEAJ,SAAA,CAAUM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableBody_unstable","renderTableBody_unstable","useTableBodyStyles_unstable","useCustomStyleHook_unstable","TableBody","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableBody/TableBody.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableBody_unstable } from './useTableBody';\nimport { renderTableBody_unstable } from './renderTableBody';\nimport { useTableBodyStyles_unstable } from './useTableBodyStyles.styles';\nimport type { TableBodyProps } from './TableBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableBody component\n */\nexport const TableBody: ForwardRefComponent<TableBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTableBody_unstable(props, ref);\n\n  useTableBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableBodyStyles_unstable')(state);\n\n  return renderTableBody_unstable(state);\n});\n\nTableBody.displayName = 'TableBody';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAG5C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,SAAA,gBAAiDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQR,qBAAA,CAAsBM,KAAA,EAAOC,GAAA;EAE3CL,2BAAA,CAA4BM,KAAA;EAE5BL,2BAAA,CAA4B,+BAA+BK,KAAA;EAE3D,OAAOP,wBAAA,CAAyBO,KAAA;AAClC;AAEAJ,SAAA,CAAUK,WAAW,GAAG"}

package/lib/components/TableBody/index.js

@@ -2,5 +2,5 @@ export * from './TableBody';
 export * from './TableBody.types';
 export * from './renderTableBody';
 export * from './useTableBody';
-export * from './useTableBodyStyles';
+export * from './useTableBodyStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableBody/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableBody/index.ts"],"sourcesContent":["export * from './TableBody';\nexport * from './TableBody.types';\nexport * from './renderTableBody';\nexport * from './useTableBody';\nexport * from './useTableBodyStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableBody/index.ts"],"sourcesContent":["export * from './TableBody';\nexport * from './TableBody.types';\nexport * from './renderTableBody';\nexport * from './useTableBody';\nexport * from './useTableBodyStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableBody/{useTableBodyStyles.js → useTableBodyStyles.styles.js}

@@ -28,4 +28,4 @@ export const useTableBodyStyles_unstable = state => {
   state.root.className = mergeClasses(tableBodyClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useTableBodyStyles.js.map
+//# sourceMappingURL=useTableBodyStyles.styles.js.map

package/lib/components/TableBody/useTableBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","__styles","useTableLayoutStyles","root","mc9l5x","d","useFlexLayoutStyles","tableBodyClassName","tableBodyClassNames","useTableBodyStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["../../../src/components/TableBody/useTableBodyStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableBodySlots, TableBodyState } from './TableBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nexport const tableBodyClassName = 'fui-TableBody';\nexport const tableBodyClassNames: SlotClassNames<TableBodySlots> = {\n  root: 'fui-TableBody',\n};\n\n/**\n * Apply styling to the TableBody slots based on the state\n */\nexport const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableBodyClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB;AAIzC,MAAMC,oBAAA,gBAAuBD,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAI7B;AAEA,MAAMC,mBAAA,gBAAsBL,QAAA;EAAAE,IAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAI5B;AAEA,OAAO,MAAME,kBAAA,GAAqB;AAClC,OAAO,MAAMC,mBAAA,GAAsD;EACjEL,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMM,2BAAA,GAA+BC,KAAA,IAA0C;EACpF,MAAMC,YAAA,GAAe;IACnBC,KAAA,EAAOV,oBAAA;IACPW,IAAA,EAAMP,mBAAA;EACR;EACAI,KAAA,CAAMP,IAAI,CAACW,SAAS,GAAGd,YAAA,CACrBO,kBAAA,EACAG,KAAA,CAAMK,gBAAgB,GAAGJ,YAAA,CAAaE,IAAI,CAACV,IAAI,GAAGQ,YAAA,CAAaC,KAAK,CAACT,IAAI,EACzEO,KAAA,CAAMP,IAAI,CAACW,SAAS;EAGtB,OAAOJ,KAAA;AACT"}

package/lib/components/TableCell/TableCell.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useTableCell_unstable } from './useTableCell';
 import { renderTableCell_unstable } from './renderTableCell';
-import { useTableCellStyles_unstable } from './useTableCellStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useTableCellStyles_unstable } from './useTableCellStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TableCell component
  */
 export const TableCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableCell_unstable(props, ref);
   useTableCellStyles_unstable(state);
-  const {
-    useTableCellStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableCellStyles_unstable')(state);
   return renderTableCell_unstable(state);
 });
 TableCell.displayName = 'TableCell';

package/lib/components/TableCell/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableCell_unstable","renderTableCell_unstable","useTableCellStyles_unstable","useCustomStyleHooks_unstable","TableCell","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableCell/TableCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCell_unstable } from './useTableCell';\nimport { renderTableCell_unstable } from './renderTableCell';\nimport { useTableCellStyles_unstable } from './useTableCellStyles';\nimport type { TableCellProps } from './TableCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableCell component\n */\nexport const TableCell: ForwardRefComponent<TableCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableCell_unstable(props, ref);\n\n  useTableCellStyles_unstable(state);\n\n  const { useTableCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableCell_unstable(state);\n});\n\nTableCell.displayName = 'TableCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAG5C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,SAAA,gBAAiDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQR,qBAAA,CAAsBM,KAAA,EAAOC,GAAA;EAE3CL,2BAAA,CAA4BM,KAAA;EAE5B,MAAM;IAAEN,2BAAA,EAA6BO;EAAe,CAAE,GAAGN,4BAAA;EACzDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,wBAAA,CAAyBO,KAAA;AAClC;AAEAJ,SAAA,CAAUM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableCell_unstable","renderTableCell_unstable","useTableCellStyles_unstable","useCustomStyleHook_unstable","TableCell","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableCell/TableCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCell_unstable } from './useTableCell';\nimport { renderTableCell_unstable } from './renderTableCell';\nimport { useTableCellStyles_unstable } from './useTableCellStyles.styles';\nimport type { TableCellProps } from './TableCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableCell component\n */\nexport const TableCell: ForwardRefComponent<TableCellProps> = React.forwardRef((props, ref) => {\n  const state = useTableCell_unstable(props, ref);\n\n  useTableCellStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableCellStyles_unstable')(state);\n\n  return renderTableCell_unstable(state);\n});\n\nTableCell.displayName = 'TableCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAG5C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,SAAA,gBAAiDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC7F,MAAMC,KAAA,GAAQR,qBAAA,CAAsBM,KAAA,EAAOC,GAAA;EAE3CL,2BAAA,CAA4BM,KAAA;EAE5BL,2BAAA,CAA4B,+BAA+BK,KAAA;EAE3D,OAAOP,wBAAA,CAAyBO,KAAA;AAClC;AAEAJ,SAAA,CAAUK,WAAW,GAAG"}

package/lib/components/TableCell/index.js

@@ -2,5 +2,5 @@ export * from './TableCell';
 export * from './TableCell.types';
 export * from './renderTableCell';
 export * from './useTableCell';
-export * from './useTableCellStyles';
+export * from './useTableCellStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableCell/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableCell/index.ts"],"sourcesContent":["export * from './TableCell';\nexport * from './TableCell.types';\nexport * from './renderTableCell';\nexport * from './useTableCell';\nexport * from './useTableCellStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableCell/index.ts"],"sourcesContent":["export * from './TableCell';\nexport * from './TableCell.types';\nexport * from './renderTableCell';\nexport * from './useTableCell';\nexport * from './useTableCellStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableCell/{useTableCellStyles.js → useTableCellStyles.styles.js}

@@ -77,4 +77,4 @@ export const useTableCellStyles_unstable = state => {
   state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], state.root.className);
   return state;
 };
-//# sourceMappingURL=useTableCellStyles.js.map
+//# sourceMappingURL=useTableCellStyles.styles.js.map

package/lib/components/TableCell/useTableCellStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","tableCellClassName","tableCellClassNames","root","useTableLayoutStyles","mc9l5x","ha4doy","medium","Bqenvij","small","d","useFlexLayoutStyles","Bf4jedk","Bt984gj","Bh6795r","Bnnss6s","xawz","sshi5w","useStyles","De3pzq","qhf8xq","z8tnut","z189sj","Byoj8tv","uwmqm3","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","useTableCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements","size"],"sources":["../../../src/components/TableCell/useTableCellStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableCellSlots, TableCellState } from './TableCell.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellClassName = 'fui-TableCell';\nexport const tableCellClassNames: SlotClassNames<TableCellSlots> = {\n  root: tableCellClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-cell',\n    verticalAlign: 'middle',\n  },\n\n  medium: {\n    height: '44px',\n  },\n\n  small: {\n    height: '34px',\n  },\n\n  'extra-small': {\n    height: '24px',\n  },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'flex',\n    minWidth: '0px',\n    alignItems: 'center',\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  medium: {\n    minHeight: '44px',\n  },\n\n  small: {\n    minHeight: '34px',\n  },\n\n  'extra-small': {\n    minHeight: '24px',\n  },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: 'inherit',\n    position: 'relative',\n    ...shorthands.padding('0px', tokens.spacingHorizontalS),\n\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      },\n      { selector: 'focus' },\n    ),\n  },\n});\n\n/**\n * Apply styling to the TableCell slots based on the state\n */\nexport const useTableCellStyles_unstable = (state: TableCellState): TableCellState => {\n  const styles = useStyles();\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableCellClassNames.root,\n    styles.root,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n    state.root.className,\n  );\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,MAAM,QAAQ;AACvB,SAASC,+BAA+B,QAAQ;AAIhD,OAAO,MAAMC,kBAAA,GAAqB;AAClC,OAAO,MAAMC,mBAAA,GAAsD;EACjEC,IAAA,EAAMF;AACR;AAEA,MAAMG,oBAAA,gBAAuBR,QAAA;EAAAO,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAD,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,EAiB7B;AAEA,MAAMC,mBAAA,gBAAsBf,QAAA;EAAAO,IAAA;IAAAE,MAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;EAAA;EAAAT,MAAA;IAAAU,MAAA;EAAA;EAAAR,KAAA;IAAAQ,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;AAAA;EAAAP,CAAA;AAAA,EAmB5B;AAEA;;;AAGA,MAAMQ,SAAA,gBAAYtB,QAAA;EAAAO,IAAA;IAAAgB,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAArB,CAAA;AAAA,EAclB;AAEA;;;AAGA,OAAO,MAAMsB,2BAAA,GAA+BC,KAAA,IAA0C;EACpF,MAAMC,MAAA,GAAShB,SAAA;EACf,MAAMiB,YAAA,GAAe;IACnBC,KAAA,EAAOhC,oBAAA;IACPiC,IAAA,EAAM1B,mBAAA;EACR;EACAsB,KAAA,CAAM9B,IAAI,CAACmC,SAAS,GAAGzC,YAAA,CACrBK,mBAAA,CAAoBC,IAAI,EACxB+B,MAAA,CAAO/B,IAAI,EACX8B,KAAA,CAAMM,gBAAgB,GAAGJ,YAAA,CAAaE,IAAI,CAAClC,IAAI,GAAGgC,YAAA,CAAaC,KAAK,CAACjC,IAAI,EACzE8B,KAAA,CAAMM,gBAAgB,GAAGJ,YAAA,CAAaE,IAAI,CAACJ,KAAA,CAAMO,IAAI,CAAC,GAAGL,YAAA,CAAaC,KAAK,CAACH,KAAA,CAAMO,IAAI,CAAC,EACvFP,KAAA,CAAM9B,IAAI,CAACmC,SAAS;EAEtB,OAAOL,KAAA;AACT"}

package/lib/components/TableCellActions/TableCellActions.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useTableCellActions_unstable } from './useTableCellActions';
 import { renderTableCellActions_unstable } from './renderTableCellActions';
-import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TableCellActions component
  */
 export const TableCellActions = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableCellActions_unstable(props, ref);
   useTableCellActionsStyles_unstable(state);
-  const {
-    useTableCellActionsStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableCellActionsStyles_unstable')(state);
   return renderTableCellActions_unstable(state);
 });
 TableCellActions.displayName = 'TableCellActions';

package/lib/components/TableCellActions/TableCellActions.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableCellActions_unstable","renderTableCellActions_unstable","useTableCellActionsStyles_unstable","useCustomStyleHooks_unstable","TableCellActions","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableCellActions/TableCellActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCellActions_unstable } from './useTableCellActions';\nimport { renderTableCellActions_unstable } from './renderTableCellActions';\nimport { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles';\nimport type { TableCellActionsProps } from './TableCellActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableCellActions component\n */\nexport const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellActions_unstable(props, ref);\n\n  useTableCellActionsStyles_unstable(state);\n\n  const { useTableCellActionsStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableCellActions_unstable(state);\n});\n\nTableCellActions.displayName = 'TableCellActions';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAChD,SAASC,kCAAkC,QAAQ;AAGnD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,gBAAA,gBAA+DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3G,MAAMC,KAAA,GAAQR,4BAAA,CAA6BM,KAAA,EAAOC,GAAA;EAElDL,kCAAA,CAAmCM,KAAA;EAEnC,MAAM;IAAEN,kCAAA,EAAoCO;EAAe,CAAE,GAAGN,4BAAA;EAChEM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,+BAAA,CAAgCO,KAAA;AACzC;AAEAJ,gBAAA,CAAiBM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableCellActions_unstable","renderTableCellActions_unstable","useTableCellActionsStyles_unstable","useCustomStyleHook_unstable","TableCellActions","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableCellActions/TableCellActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCellActions_unstable } from './useTableCellActions';\nimport { renderTableCellActions_unstable } from './renderTableCellActions';\nimport { useTableCellActionsStyles_unstable } from './useTableCellActionsStyles.styles';\nimport type { TableCellActionsProps } from './TableCellActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableCellActions component\n */\nexport const TableCellActions: ForwardRefComponent<TableCellActionsProps> = React.forwardRef((props, ref) => {\n  const state = useTableCellActions_unstable(props, ref);\n\n  useTableCellActionsStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableCellActionsStyles_unstable')(state);\n\n  return renderTableCellActions_unstable(state);\n});\n\nTableCellActions.displayName = 'TableCellActions';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,+BAA+B,QAAQ;AAChD,SAASC,kCAAkC,QAAQ;AAGnD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,gBAAA,gBAA+DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3G,MAAMC,KAAA,GAAQR,4BAAA,CAA6BM,KAAA,EAAOC,GAAA;EAElDL,kCAAA,CAAmCM,KAAA;EAEnCL,2BAAA,CAA4B,sCAAsCK,KAAA;EAElE,OAAOP,+BAAA,CAAgCO,KAAA;AACzC;AAEAJ,gBAAA,CAAiBK,WAAW,GAAG"}

package/lib/components/TableCellActions/index.js

@@ -2,5 +2,5 @@ export * from './TableCellActions';
 export * from './TableCellActions.types';
 export * from './renderTableCellActions';
 export * from './useTableCellActions';
-export * from './useTableCellActionsStyles';
+export * from './useTableCellActionsStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableCellActions/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableCellActions/index.ts"],"sourcesContent":["export * from './TableCellActions';\nexport * from './TableCellActions.types';\nexport * from './renderTableCellActions';\nexport * from './useTableCellActions';\nexport * from './useTableCellActionsStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableCellActions/index.ts"],"sourcesContent":["export * from './TableCellActions';\nexport * from './TableCellActions.types';\nexport * from './renderTableCellActions';\nexport * from './useTableCellActions';\nexport * from './useTableCellActionsStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableCellActions/{useTableCellActionsStyles.js → useTableCellActionsStyles.styles.js}

@@ -29,4 +29,4 @@ export const useTableCellActionsStyles_unstable = state => {
   state.root.className = mergeClasses(tableCellActionsClassNames.root, styles.root, state.visible && styles.visible, state.root.className);
   return state;
 };
-//# sourceMappingURL=useTableCellActionsStyles.js.map
+//# sourceMappingURL=useTableCellActionsStyles.styles.js.map

package/lib/components/TableCellActions/useTableCellActionsStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tableCellActionsClassNames","root","useStyles","De3pzq","qhf8xq","j35jbq","Bhzewxz","Bz10aip","abs64n","Frg6f3","visible","d","useTableCellActionsStyles_unstable","state","styles","className"],"sources":["../../../src/components/TableCellActions/useTableCellActionsStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TableCellActionsSlots, TableCellActionsState } from './TableCellActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableCellActionsClassNames: SlotClassNames<TableCellActionsSlots> = {\n  root: 'fui-TableCellActions',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: 'inherit',\n    position: 'absolute',\n    right: '0px',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    opacity: 0,\n    marginLeft: 'auto',\n  },\n\n  visible: {\n    opacity: 1,\n  },\n});\n\n/**\n * Apply styling to the TableCellActions slots based on the state\n */\nexport const useTableCellActionsStyles_unstable = (state: TableCellActionsState): TableCellActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    tableCellActionsClassNames.root,\n    styles.root,\n    state.visible && styles.visible,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ;AAIzC,OAAO,MAAMC,0BAAA,GAAoE;EAC/EC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,EAclB;AAEA;;;AAGA,OAAO,MAAMC,kCAAA,GAAsCC,KAAA,IAAwD;EACzG,MAAMC,MAAA,GAASZ,SAAA;EACfW,KAAA,CAAMZ,IAAI,CAACc,SAAS,GAAGhB,YAAA,CACrBC,0BAAA,CAA2BC,IAAI,EAC/Ba,MAAA,CAAOb,IAAI,EACXY,KAAA,CAAMH,OAAO,IAAII,MAAA,CAAOJ,OAAO,EAC/BG,KAAA,CAAMZ,IAAI,CAACc,SAAS;EAGtB,OAAOF,KAAA;AACT"}

package/lib/components/TableCellLayout/TableCellLayout.js

@@ -1,19 +1,16 @@
 import * as React from 'react';
 import { useTableCellLayout_unstable } from './useTableCellLayout';
 import { renderTableCellLayout_unstable } from './renderTableCellLayout';
-import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles.styles';
 import { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+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);
-  const {
-    useTableCellLayoutStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableCellLayoutStyles_unstable')(state);
   return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));
 });
 TableCellLayout.displayName = 'TableCellLayout';

package/lib/components/TableCellLayout/TableCellLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableCellLayout_unstable","renderTableCellLayout_unstable","useTableCellLayoutStyles_unstable","useTableCellLayoutContextValues_unstable","useCustomStyleHooks_unstable","TableCellLayout","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableCellLayout/TableCellLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableCellLayout_unstable } from './useTableCellLayout';\nimport { renderTableCellLayout_unstable } from './renderTableCellLayout';\nimport { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';\nimport { useTableCellLayoutContextValues_unstable } from './useTableCellLayoutContextValues';\nimport type { TableCellLayoutProps } from './TableCellLayout.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useTableCellLayoutStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableCellLayout_unstable(state, useTableCellLayoutContextValues_unstable(state));\n});\n\nTableCellLayout.displayName = 'TableCellLayout';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,iCAAiC,QAAQ;AAClD,SAASC,wCAAwC,QAAQ;AAGzD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,eAAA,gBAA6DN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQT,2BAAA,CAA4BO,KAAA,EAAOC,GAAA;EAEjDN,iCAAA,CAAkCO,KAAA;EAElC,MAAM;IAAEP,iCAAA,EAAmCQ;EAAe,CAAE,GAAGN,4BAAA;EAC/DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,8BAAA,CAA+BQ,KAAA,EAAON,wCAAA,CAAyCM,KAAA;AACxF;AAEAJ,eAAA,CAAgBM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableCellLayout_unstable","renderTableCellLayout_unstable","useTableCellLayoutStyles_unstable","useTableCellLayoutContextValues_unstable","useCustomStyleHook_unstable","TableCellLayout","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableCellLayout/TableCellLayout.tsx"],"sourcesContent":["import * 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,iCAAiC,QAAQ;AAClD,SAASC,wCAAwC,QAAQ;AAGzD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,eAAA,gBAA6DN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQT,2BAAA,CAA4BO,KAAA,EAAOC,GAAA;EAEjDN,iCAAA,CAAkCO,KAAA;EAElCL,2BAAA,CAA4B,qCAAqCK,KAAA;EAEjE,OAAOR,8BAAA,CAA+BQ,KAAA,EAAON,wCAAA,CAAyCM,KAAA;AACxF;AAEAJ,eAAA,CAAgBK,WAAW,GAAG"}

package/lib/components/TableCellLayout/index.js

@@ -2,5 +2,5 @@ export * from './TableCellLayout';
 export * from './TableCellLayout.types';
 export * from './renderTableCellLayout';
 export * from './useTableCellLayout';
-export * from './useTableCellLayoutStyles';
+export * from './useTableCellLayoutStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableCellLayout/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableCellLayout/index.ts"],"sourcesContent":["export * from './TableCellLayout';\nexport * from './TableCellLayout.types';\nexport * from './renderTableCellLayout';\nexport * from './useTableCellLayout';\nexport * from './useTableCellLayoutStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableCellLayout/index.ts"],"sourcesContent":["export * from './TableCellLayout';\nexport * from './TableCellLayout.types';\nexport * from './renderTableCellLayout';\nexport * from './useTableCellLayout';\nexport * from './useTableCellLayoutStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableCellLayout/{useTableCellLayoutStyles.js → useTableCellLayoutStyles.styles.js}

@@ -91,4 +91,4 @@ export const useTableCellLayoutStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useTableCellLayoutStyles.js.map
+//# sourceMappingURL=useTableCellLayoutStyles.styles.js.map

package/lib/components/TableCellLayout/useTableCellLayoutStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","tableCellLayoutClassNames","root","media","main","description","content","useStyles","mc9l5x","Bt984gj","i8kkvl","Belr9w4","Bh6795r","Bnnss6s","xawz","rootTruncate","B68tc82","Beiy3e4","contentTruncate","mediaExtraSmall","Be2twd7","mediaSmallAndMedium","mediaPrimary","mainPrimary","Bhrd7zp","mainTruncate","Huce71","ygn44y","sj55zd","Bahqtrf","Bg96gwp","d","useTableCellLayoutStyles_unstable","state","styles","truncate","className","primary","appearance","mediaSizedStyles","small","medium","size"],"sources":["../../../src/components/TableCellLayout/useTableCellLayoutStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\n\nexport const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {\n  root: 'fui-TableCellLayout',\n  media: 'fui-TableCellLayout__media',\n  main: 'fui-TableCellLayout__main',\n  description: 'fui-TableCellLayout__description',\n  content: 'fui-TableCellLayout__content',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    ...shorthands.gap(tokens.spacingHorizontalS),\n    ...shorthands.flex(1, 1, '0px'),\n  },\n\n  rootTruncate: {\n    overflowX: 'hidden',\n  },\n\n  content: {\n    display: 'flex',\n    flexDirection: 'column',\n  },\n\n  contentTruncate: {\n    overflowX: 'hidden',\n  },\n\n  media: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n\n  mediaExtraSmall: {\n    fontSize: '16px',\n  },\n\n  mediaSmallAndMedium: {\n    fontSize: '20px',\n  },\n\n  mediaPrimary: {\n    fontSize: '24px',\n  },\n\n  mainPrimary: {\n    fontWeight: tokens.fontWeightSemibold,\n  },\n\n  mainTruncate: {\n    overflowX: 'hidden',\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n  },\n\n  description: {\n    color: tokens.colorNeutralForeground2,\n    ...typographyStyles.caption1,\n  },\n});\n\n/**\n * Apply styling to the TableCellLayout slots based on the state\n */\nexport const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {\n  const styles = useStyles();\n  const { truncate } = state;\n\n  state.root.className = mergeClasses(\n    tableCellLayoutClassNames.root,\n    styles.root,\n    truncate && styles.rootTruncate,\n    state.root.className,\n  );\n  const primary = state.appearance === 'primary';\n\n  if (state.media) {\n    const mediaSizedStyles = {\n      small: styles.mediaSmallAndMedium,\n      medium: styles.mediaSmallAndMedium,\n      'extra-small': styles.mediaExtraSmall,\n    };\n\n    state.media.className = mergeClasses(\n      tableCellLayoutClassNames.media,\n      styles.media,\n      mediaSizedStyles[state.size],\n      primary && styles.mediaPrimary,\n      state.media.className,\n    );\n  }\n\n  if (state.main) {\n    state.main.className = mergeClasses(\n      tableCellLayoutClassNames.main,\n      truncate && styles.mainTruncate,\n      primary && styles.mainPrimary,\n      state.main.className,\n    );\n  }\n\n  if (state.description) {\n    state.description.className = mergeClasses(\n      tableCellLayoutClassNames.description,\n      styles.description,\n      state.description.className,\n    );\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(\n      tableCellLayoutClassNames.content,\n      styles.content,\n      truncate && styles.contentTruncate,\n      state.content.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AACrD,SAASC,MAAM,QAAQ;AAGvB,SAASC,gBAAgB,QAAQ;AAEjC,OAAO,MAAMC,yBAAA,GAAkE;EAC7EC,IAAA,EAAM;EACNC,KAAA,EAAO;EACPC,IAAA,EAAM;EACNC,WAAA,EAAa;EACbC,OAAA,EAAS;AACX;AAEA;;;AAGA,MAAMC,SAAA,gBAAYX,QAAA;EAAAM,IAAA;IAAAM,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,IAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;EAAAV,OAAA;IAAAE,MAAA;IAAAS,OAAA;EAAA;EAAAC,eAAA;IAAAF,OAAA;EAAA;EAAAb,KAAA;IAAAK,MAAA;IAAAC,OAAA;EAAA;EAAAU,eAAA;IAAAC,OAAA;EAAA;EAAAC,mBAAA;IAAAD,OAAA;EAAA;EAAAE,YAAA;IAAAF,OAAA;EAAA;EAAAG,WAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAT,OAAA;IAAAU,MAAA;IAAAC,MAAA;EAAA;EAAAtB,WAAA;IAAAuB,MAAA;IAAAC,OAAA;IAAAT,OAAA;IAAAI,OAAA;IAAAM,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAoDlB;AAEA;;;AAGA,OAAO,MAAMC,iCAAA,GAAqCC,KAAA,IAAsD;EACtG,MAAMC,MAAA,GAAS3B,SAAA;EACf,MAAM;IAAE4B;EAAQ,CAAE,GAAGF,KAAA;EAErBA,KAAA,CAAM/B,IAAI,CAACkC,SAAS,GAAGvC,YAAA,CACrBI,yBAAA,CAA0BC,IAAI,EAC9BgC,MAAA,CAAOhC,IAAI,EACXiC,QAAA,IAAYD,MAAA,CAAOnB,YAAY,EAC/BkB,KAAA,CAAM/B,IAAI,CAACkC,SAAS;EAEtB,MAAMC,OAAA,GAAUJ,KAAA,CAAMK,UAAU,KAAK;EAErC,IAAIL,KAAA,CAAM9B,KAAK,EAAE;IACf,MAAMoC,gBAAA,GAAmB;MACvBC,KAAA,EAAON,MAAA,CAAOb,mBAAmB;MACjCoB,MAAA,EAAQP,MAAA,CAAOb,mBAAmB;MAClC,eAAea,MAAA,CAAOf;IACxB;IAEAc,KAAA,CAAM9B,KAAK,CAACiC,SAAS,GAAGvC,YAAA,CACtBI,yBAAA,CAA0BE,KAAK,EAC/B+B,MAAA,CAAO/B,KAAK,EACZoC,gBAAgB,CAACN,KAAA,CAAMS,IAAI,CAAC,EAC5BL,OAAA,IAAWH,MAAA,CAAOZ,YAAY,EAC9BW,KAAA,CAAM9B,KAAK,CAACiC,SAAS;EAEzB;EAEA,IAAIH,KAAA,CAAM7B,IAAI,EAAE;IACd6B,KAAA,CAAM7B,IAAI,CAACgC,SAAS,GAAGvC,YAAA,CACrBI,yBAAA,CAA0BG,IAAI,EAC9B+B,QAAA,IAAYD,MAAA,CAAOT,YAAY,EAC/BY,OAAA,IAAWH,MAAA,CAAOX,WAAW,EAC7BU,KAAA,CAAM7B,IAAI,CAACgC,SAAS;EAExB;EAEA,IAAIH,KAAA,CAAM5B,WAAW,EAAE;IACrB4B,KAAA,CAAM5B,WAAW,CAAC+B,SAAS,GAAGvC,YAAA,CAC5BI,yBAAA,CAA0BI,WAAW,EACrC6B,MAAA,CAAO7B,WAAW,EAClB4B,KAAA,CAAM5B,WAAW,CAAC+B,SAAS;EAE/B;EAEA,IAAIH,KAAA,CAAM3B,OAAO,EAAE;IACjB2B,KAAA,CAAM3B,OAAO,CAAC8B,SAAS,GAAGvC,YAAA,CACxBI,yBAAA,CAA0BK,OAAO,EACjC4B,MAAA,CAAO5B,OAAO,EACd6B,QAAA,IAAYD,MAAA,CAAOhB,eAAe,EAClCe,KAAA,CAAM3B,OAAO,CAAC8B,SAAS;EAE3B;EAEA,OAAOH,KAAA;AACT"}

package/lib/components/TableHeader/TableHeader.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useTableHeader_unstable } from './useTableHeader';
 import { renderTableHeader_unstable } from './renderTableHeader';
-import { useTableHeaderStyles_unstable } from './useTableHeaderStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TableHeader component
  */
 export const TableHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableHeader_unstable(props, ref);
   useTableHeaderStyles_unstable(state);
-  const {
-    useTableHeaderStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);
   return renderTableHeader_unstable(state);
 });
 TableHeader.displayName = 'TableHeader';

package/lib/components/TableHeader/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","useCustomStyleHooks_unstable","TableHeader","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeader component\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n\n  const { useTableHeaderStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9B,MAAM;IAAEN,6BAAA,EAA+BO;EAAe,CAAE,GAAGN,4BAAA;EAC3DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableHeader_unstable","renderTableHeader_unstable","useTableHeaderStyles_unstable","useCustomStyleHook_unstable","TableHeader","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableHeader/TableHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeader_unstable } from './useTableHeader';\nimport { renderTableHeader_unstable } from './renderTableHeader';\nimport { useTableHeaderStyles_unstable } from './useTableHeaderStyles.styles';\nimport type { TableHeaderProps } from './TableHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TableHeader component\n */\nexport const TableHeader: ForwardRefComponent<TableHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useTableHeader_unstable(props, ref);\n\n  useTableHeaderStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTableHeaderStyles_unstable')(state);\n\n  return renderTableHeader_unstable(state);\n});\n\nTableHeader.displayName = 'TableHeader';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYK,WAAW,GAAG"}

package/lib/components/TableHeader/index.js

@@ -2,5 +2,5 @@ export * from './TableHeader';
 export * from './TableHeader.types';
 export * from './renderTableHeader';
 export * from './useTableHeader';
-export * from './useTableHeaderStyles';
+export * from './useTableHeaderStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableHeader/index.ts"],"sourcesContent":["export * from './TableHeader';\nexport * from './TableHeader.types';\nexport * from './renderTableHeader';\nexport * from './useTableHeader';\nexport * from './useTableHeaderStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableHeader/index.ts"],"sourcesContent":["export * from './TableHeader';\nexport * from './TableHeader.types';\nexport * from './renderTableHeader';\nexport * from './useTableHeader';\nexport * from './useTableHeaderStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableHeader/{useTableHeaderStyles.js → useTableHeaderStyles.styles.js}

@@ -28,4 +28,4 @@ export const useTableHeaderStyles_unstable = state => {
   state.root.className = mergeClasses(tableHeaderClassName, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);
   return state;
 };
-//# sourceMappingURL=useTableHeaderStyles.js.map
+//# sourceMappingURL=useTableHeaderStyles.styles.js.map

package/lib/components/TableHeader/useTableHeaderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","__styles","tableHeaderClassName","tableHeaderClassNames","root","useFlexLayoutStyles","mc9l5x","d","useTableLayoutStyles","useTableHeaderStyles_unstable","state","layoutStyles","table","flex","className","noNativeElements"],"sources":["../../../src/components/TableHeader/useTableHeaderStyles.styles.ts"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { TableHeaderSlots, TableHeaderState } from './TableHeader.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tableHeaderClassName = 'fui-TableHeader';\nexport const tableHeaderClassNames: SlotClassNames<TableHeaderSlots> = {\n  root: 'fui-TableHeader',\n};\n\nconst useFlexLayoutStyles = makeStyles({\n  root: {\n    display: 'block',\n  },\n});\n\nconst useTableLayoutStyles = makeStyles({\n  root: {\n    display: 'table-row-group',\n  },\n});\n\n/**\n * Apply styling to the TableHeader slots based on the state\n */\nexport const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => {\n  const layoutStyles = {\n    table: useTableLayoutStyles(),\n    flex: useFlexLayoutStyles(),\n  };\n  state.root.className = mergeClasses(\n    tableHeaderClassName,\n    state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB;AAIzC,OAAO,MAAMC,oBAAA,GAAuB;AACpC,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;AACR;AAEA,MAAMC,mBAAA,gBAAsBJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAI5B;AAEA,MAAMC,oBAAA,gBAAuBP,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAI7B;AAEA;;;AAGA,OAAO,MAAME,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,YAAA,GAAe;IACnBC,KAAA,EAAOJ,oBAAA;IACPK,IAAA,EAAMR,mBAAA;EACR;EACAK,KAAA,CAAMN,IAAI,CAACU,SAAS,GAAGd,YAAA,CACrBE,oBAAA,EACAQ,KAAA,CAAMK,gBAAgB,GAAGJ,YAAA,CAAaE,IAAI,CAACT,IAAI,GAAGO,YAAA,CAAaC,KAAK,CAACR,IAAI,EACzEM,KAAA,CAAMN,IAAI,CAACU,SAAS;EAGtB,OAAOJ,KAAA;AACT"}

package/lib/components/TableHeaderCell/TableHeaderCell.js

@@ -1,18 +1,15 @@
 import * as React from 'react';
 import { useTableHeaderCell_unstable } from './useTableHeaderCell';
 import { renderTableHeaderCell_unstable } from './renderTableHeaderCell';
-import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';
-import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
+import { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * TableHeaderCell component
  */
 export const TableHeaderCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useTableHeaderCell_unstable(props, ref);
   useTableHeaderCellStyles_unstable(state);
-  const {
-    useTableHeaderCellStyles_unstable: useCustomStyles
-  } = useCustomStyleHooks_unstable();
-  useCustomStyles(state);
+  useCustomStyleHook_unstable('useTableHeaderCellStyles_unstable')(state);
   return renderTableHeaderCell_unstable(state);
 });
 TableHeaderCell.displayName = 'TableHeaderCell';

package/lib/components/TableHeaderCell/TableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHooks_unstable","TableHeaderCell","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTableHeaderCell_unstable } from './useTableHeaderCell';\nimport { renderTableHeaderCell_unstable } from './renderTableHeaderCell';\nimport { useTableHeaderCellStyles_unstable } from './useTableHeaderCellStyles';\nimport type { TableHeaderCellProps } from './TableHeaderCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_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  const { useTableHeaderCellStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderTableHeaderCell_unstable(state);\n});\n\nTableHeaderCell.displayName = 'TableHeaderCell';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,iCAAiC,QAAQ;AAGlD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,eAAA,gBAA6DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQR,2BAAA,CAA4BM,KAAA,EAAOC,GAAA;EAEjDL,iCAAA,CAAkCM,KAAA;EAElC,MAAM;IAAEN,iCAAA,EAAmCO;EAAe,CAAE,GAAGN,4BAAA;EAC/DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,8BAAA,CAA+BO,KAAA;AACxC;AAEAJ,eAAA,CAAgBM,WAAW,GAAG"}
+{"version":3,"names":["React","useTableHeaderCell_unstable","renderTableHeaderCell_unstable","useTableHeaderCellStyles_unstable","useCustomStyleHook_unstable","TableHeaderCell","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/TableHeaderCell/TableHeaderCell.tsx"],"sourcesContent":["import * 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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,iCAAiC,QAAQ;AAGlD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,eAAA,gBAA6DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzG,MAAMC,KAAA,GAAQR,2BAAA,CAA4BM,KAAA,EAAOC,GAAA;EAEjDL,iCAAA,CAAkCM,KAAA;EAElCL,2BAAA,CAA4B,qCAAqCK,KAAA;EAEjE,OAAOP,8BAAA,CAA+BO,KAAA;AACxC;AAEAJ,eAAA,CAAgBK,WAAW,GAAG"}

package/lib/components/TableHeaderCell/index.js

@@ -2,5 +2,5 @@ export * from './TableHeaderCell';
 export * from './TableHeaderCell.types';
 export * from './renderTableHeaderCell';
 export * from './useTableHeaderCell';
-export * from './useTableHeaderCellStyles';
+export * from './useTableHeaderCellStyles.styles';
 //# sourceMappingURL=index.js.map

package/lib/components/TableHeaderCell/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/TableHeaderCell/index.ts"],"sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"names":[],"sources":["../../../src/components/TableHeaderCell/index.ts"],"sourcesContent":["export * from './TableHeaderCell';\nexport * from './TableHeaderCell.types';\nexport * from './renderTableHeaderCell';\nexport * from './useTableHeaderCell';\nexport * from './useTableHeaderCellStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/TableHeaderCell/{useTableHeaderCellStyles.js → useTableHeaderCellStyles.styles.js}

@@ -117,4 +117,4 @@ export const useTableHeaderCellStyles_unstable = state => {
   }
   return state;
 };
-//# sourceMappingURL=useTableHeaderCellStyles.js.map
+//# sourceMappingURL=useTableHeaderCellStyles.styles.js.map