@fluentui/react-charts 0.0.0-nightly-20251110-0407.1 → 0.0.0-nightly-20251112-0406.1

package/CHANGELOG.md

@@ -1,26 +1,47 @@
 # Change Log - @fluentui/react-charts
 
-This log was last generated on Mon, 10 Nov 2025 04:21:49 GMT and should not be manually modified.
+This log was last generated on Wed, 12 Nov 2025 04:20:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20251110-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20251110-0407.1)
+## [0.0.0-nightly-20251112-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20251112-0406.1)
 
-Mon, 10 Nov 2025 04:21:49 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.5..@fluentui/react-charts_v0.0.0-nightly-20251110-0407.1)
+Wed, 12 Nov 2025 04:20:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.6..@fluentui/react-charts_v0.0.0-nightly-20251112-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-button to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-overflow to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-popover to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-tooltip to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20251110-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/1186c9379057fa2a44aa7989c582413ec42fab01) by beachball)
+- Bump @fluentui/react-button to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-overflow to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-popover to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-tooltip to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20251112-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dfb232d0c0e15549d111bd71081ad457fe43752c) by beachball)
+
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.6)
+
+Tue, 11 Nov 2025 19:18:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.3.5..@fluentui/react-charts_v9.3.6)
+
+### Patches
+
+- add reference lines logic in line and scatter chart ([PR #35474](https://github.com/microsoft/fluentui/pull/35474) by anushgupta@microsoft.com)
+- add chart annotations ([PR #35457](https://github.com/microsoft/fluentui/pull/35457) by anushgupta@microsoft.com)
+- add support for chart only annotation ([PR #35461](https://github.com/microsoft/fluentui/pull/35461) by anushgupta@microsoft.com)
+- fix: adjust chart margin for continuous y-axis tick labels ([PR #35376](https://github.com/microsoft/fluentui/pull/35376) by kumarkshitij@microsoft.com)
+- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
+- Bump @fluentui/react-button to v9.6.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-overflow to v9.6.5 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-popover to v9.12.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-tooltip to v9.8.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
+- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
 
 ## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.3.5)
 

package/dist/index.d.ts

@@ -599,6 +599,15 @@ export declare interface CartesianChartProps {
      * Use this to control `tickStep`, `tick0`, etc.
      */
     yAxis?: AxisProps;
+    /**
+     *@default false
+     *Used for showing complete y axis lables   */
+    showYAxisLables?: boolean;
+    /**
+     *@default false
+     *Used for to elipse y axis labes and show tooltip on x axis labels
+     */
+    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -1701,17 +1710,6 @@ export declare interface GanttChartProps extends CartesianChartProps {
      * @default 1/2
      */
     yAxisPadding?: number;
-    /**
-     * If true, truncates y-axis tick labels longer than `noOfCharsToTruncate` with ellipses
-     * and displays them in a tooltip on hover.
-     * @default false
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     * If true, renders full y-axis tick labels without truncation.
-     * @default false
-     */
-    showYAxisLables?: boolean;
     /**
      * If true, enables gradient fills for the bars.
      * @default false
@@ -2306,19 +2304,10 @@ export declare interface HeatMapChartProps extends CartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
     /**
      * @default alphabetical
      * The prop used to decide order of string axis labels */
     sortOrder?: 'none' | 'alphabetical';
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -2588,15 +2577,6 @@ export declare interface HorizontalBarChartWithAxisProps extends CartesianChartP
      * it's padding between bar's or lines in the graph
      */
     yAxisPadding?: number;
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
     /**
      * @default false
      * The prop used to enable gradient fill color for the chart.
@@ -2684,6 +2664,7 @@ export declare interface HorizontalDataPoint {
 
 declare interface IAxisData {
     yAxisDomainValues: number[];
+    yAxisTickText: string[];
 }
 
 /**
@@ -3461,11 +3442,11 @@ export declare interface ModifiedCartesianChartProps extends CartesianChartProps
     /**
      * Get the domain and range values
      */
-    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[] | GanttChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
+    getDomainNRangeValues: (points: LineChartPoints[] | VerticalBarChartDataPoint[] | VerticalStackedBarDataPoint[] | HorizontalBarChartWithAxisDataPoint[] | GroupedVerticalBarChartData[] | HeatMapChartDataPoint[] | GanttChartDataPoint[], margins: Margins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined) => IDomainNRange;
     /**
      * Create the string y-axis
      */
-    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
+    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, axisData: IAxisData, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
     /**
      * Controls whether the numeric x-axis domain should be extended to start and end at nice rounded values.
      * @default true
@@ -3868,10 +3849,6 @@ export declare interface ScatterChartProps extends CartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
-    /**
-     * The prop used to define the y axis labels tooltip visibility
-     */
-    showYAxisLablesTooltip?: boolean;
 }
 
 /**
@@ -4318,15 +4295,6 @@ export declare interface VerticalStackedBarChartProps extends CartesianChartProp
      * @default 'default'
      */
     mode?: 'default' | 'plotly';
-    /**
-     *@default false
-     *Used for to elipse y axis labes and show tooltip on x axis labels
-     */
-    showYAxisLablesTooltip?: boolean;
-    /**
-     *@default false
-     *Used for showing complete y axis lables   */
-    showYAxisLables?: boolean;
 }
 
 /**

package/lib/components/AreaChart/useAreaChartStyles.styles.js

@@ -29,10 +29,11 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
@@ -46,7 +47,9 @@ const useStyles = /*#__PURE__*/__styles({
     sj55zd: "f19n0e5"
   }
 }, {
-  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
   }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}"]
 });

package/lib/components/AreaChart/useAreaChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG1B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE2C,UAAU,CAAC3C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","getTooltipStyle","areaChartClassNames","tooltip","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","plotContainer","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","d","p","useAreaChartStyles","props","baseStyles"],"sources":["useAreaChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const areaChartClassNames = {\n    tooltip: 'fui-ac__tooltip',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    opacityChangeOnHover: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: '',\n    plotContainer: '',\n    annotationLayer: ''\n};\nconst useStyles = makeStyles({\n    tooltip: getTooltipStyle()\n});\n/**\n * Apply styling to the AreaChart slots based on the state\n */ export const useAreaChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(areaChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,uBAAuB;AACvD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,OAAO,EAAE,iBAAiB;EAC1BC,IAAI,EAAE,EAAE;EACRC,KAAK,EAAE,EAAE;EACTC,KAAK,EAAE,EAAE;EACTC,eAAe,EAAE,EAAE;EACnBC,KAAK,EAAE,EAAE;EACTC,kBAAkB,EAAE,EAAE;EACtBC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,oBAAoB,EAAE,EAAE;EACxBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE,EAAE;EAClBC,aAAa,EAAE,EAAE;EACjBC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAI,OAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAEjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAG3B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEH,YAAY,CAACE,mBAAmB,CAACC,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC,yBAA0B;EACpG,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ChartTable/useChartTableStyles.styles.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
  * @internal
@@ -27,56 +27,76 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "fwrc4pm",
     De3pzq: "f16xq7d1",
     sj55zd: "f19n0e5",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
     fsow6f: ["f1o700av", "fes3tcz"],
-    B4j52fo: "f18zi460",
-    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
-    Bn0qgzm: "fmklw6v",
-    ibv6hh: ["fsfsuhs", "f1wpluaz"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "f68mrw8",
-    h3c5rm: ["f7pw515", "fw35ms5"],
-    B9xav0g: "frpde29",
-    zhjwy3: ["fw35ms5", "f7pw515"],
-    Bsw6fvg: "f8pusc0",
-    Bbusuzp: "fqgauei"
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fox1scm",
+    By8wz76: "ftx6bta",
+    B7iucu3: "fhs7xo9"
   },
   bodyCell: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fy9rknc",
     Bhrd7zp: "figsok6",
     Bg96gwp: "fwrc4pm",
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    B4j52fo: "f18zi460",
-    Bekrc4i: ["f1wpluaz", "fsfsuhs"],
-    Bn0qgzm: "fmklw6v",
-    ibv6hh: ["fsfsuhs", "f1wpluaz"],
-    icvyot: "fzkkow9",
-    vrafjx: ["fcdblym", "fjik90z"],
-    oivjwe: "fg706s2",
-    wvpqe5: ["fjik90z", "fcdblym"],
-    g2u3we: "f68mrw8",
-    h3c5rm: ["f7pw515", "fw35ms5"],
-    B9xav0g: "frpde29",
-    zhjwy3: ["fw35ms5", "f7pw515"],
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1bnz8pu",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: 0,
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "fox1scm",
     sj55zd: "f19n0e5",
     fsow6f: ["f1o700av", "fes3tcz"],
-    Bbusuzp: "fqgauei"
+    B7iucu3: "fhs7xo9"
   }
 }, {
-  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f18zi460{border-top-width:var(--strokeWidthThick);}", ".f1wpluaz{border-right-width:var(--strokeWidthThick);}", ".fsfsuhs{border-left-width:var(--strokeWidthThick);}", ".fmklw6v{border-bottom-width:var(--strokeWidthThick);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".f68mrw8{border-top-color:var(--colorNeutralStroke2);}", ".f7pw515{border-right-color:var(--colorNeutralStroke2);}", ".fw35ms5{border-left-color:var(--colorNeutralStroke2);}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".figsok6{font-weight:var(--fontWeightRegular);}"],
-  m: [["@media (forced-colors: active){.f8pusc0{background-color:Window;}}", {
+  d: [".fly5x3f{width:100%;}", ".f1oy3dpc{overflow-x:auto;}", ".fgkb47j{border-collapse:collapse;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
+    p: -2
+  }], ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+    p: -1
+  }], [".fox1scm{border:var(--strokeWidthThick) solid var(--colorNeutralStroke2);}", {
+    p: -2
+  }]],
+  m: [["@media (forced-colors: active){.ftx6bta{background-color:Window;}}", {
     m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fqgauei{color:WindowText;}}", {
+  }], ["@media (forced-colors: active){.fhs7xo9{color:WindowText;}}", {
     m: "(forced-colors: active)"
   }]]
 });

package/lib/components/ChartTable/useChartTableStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","z8tnut","z189sj","Byoj8tv","uwmqm3","fsow6f","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bsw6fvg","Bbusuzp","d","m","useChartTableStyles","props","baseStyles"],"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        textAlign: 'left',\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAA9B,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAK,MAAA;IAAAc,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGjC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,oBAAoB,CAACC,IAAI,EAAEsC,UAAU,CAACtC,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEN,YAAY,CAACI,oBAAoB,CAACE,KAAK,EAAEqC,UAAU,CAACrC,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEP,YAAY,CAACI,oBAAoB,CAACG,UAAU,EAAEoC,UAAU,CAACpC,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAER,YAAY,CAACI,oBAAoB,CAACI,QAAQ,EAAEmC,UAAU,CAACnC,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAET,YAAY,CAACI,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","a9b677","B68tc82","po53p8","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","De3pzq","sj55zd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","fsow6f","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","By8wz76","B7iucu3","d","p","m","useChartTableStyles","props","baseStyles"],"sources":["useChartTableStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const chartTableClassNames = {\n    root: 'fui-ChartTable__root',\n    table: 'fui-ChartTable__table',\n    headerCell: 'fui-ChartTable__headerCell',\n    bodyCell: 'fui-ChartTable__bodyCell',\n    chart: 'fui-ChartTable__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        overflowX: 'auto'\n    },\n    table: {\n        borderCollapse: 'collapse'\n    },\n    headerCell: {\n        ...typographyStyles.caption1,\n        fontWeight: tokens.fontWeightSemibold,\n        backgroundColor: tokens.colorNeutralBackground3,\n        color: tokens.colorNeutralForeground1,\n        padding: tokens.spacingHorizontalS,\n        textAlign: 'left',\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        '@media (forced-colors: active)': {\n            backgroundColor: 'Window',\n            color: 'WindowText'\n        }\n    },\n    bodyCell: {\n        ...typographyStyles.caption1,\n        padding: tokens.spacingHorizontalS,\n        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n        color: tokens.colorNeutralForeground1,\n        textAlign: 'left',\n        '@media (forced-colors: active)': {\n            color: 'WindowText'\n        }\n    }\n});\n/**\n * Apply styling to the ChartTable slots based on the state\n */ export const useChartTableStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/ ),\n        headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/ ),\n        bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/ ),\n        chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/ )\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,oBAAoB,GAAG;EACpCC,IAAI,EAAE,sBAAsB;EAC5BC,KAAK,EAAE,uBAAuB;EAC9BC,UAAU,EAAE,4BAA4B;EACxCC,QAAQ,EAAE,0BAA0B;EACpCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,SAAS,gBAAGV,QAAA;EAAAK,IAAA;IAAAM,MAAA;IAAAC,OAAA;EAAA;EAAAN,KAAA;IAAAO,MAAA;EAAA;EAAAN,UAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAApC,QAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAG,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAvB,MAAA;IAAAM,MAAA;IAAAmB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA+BjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,MAAMC,UAAU,GAAGxC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEJ,YAAY,CAACG,oBAAoB,CAACC,IAAI,EAAE6C,UAAU,CAAC7C,IAAI,CAAC,sBAAuB,CAAC;IACtFC,KAAK,EAAEL,YAAY,CAACG,oBAAoB,CAACE,KAAK,EAAE4C,UAAU,CAAC5C,KAAK,CAAC,uBAAwB,CAAC;IAC1FC,UAAU,EAAEN,YAAY,CAACG,oBAAoB,CAACG,UAAU,EAAE2C,UAAU,CAAC3C,UAAU,CAAC,4BAA6B,CAAC;IAC9GC,QAAQ,EAAEP,YAAY,CAACG,oBAAoB,CAACI,QAAQ,EAAE0C,UAAU,CAAC1C,QAAQ,CAAC,0BAA2B,CAAC;IACtGC,KAAK,EAAER,YAAY,CAACG,oBAAoB,CAACK,KAAK,CAAC,uBAAwB;EAC3E,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js

@@ -1,5 +1,5 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**
  * @internal
@@ -23,9 +23,9 @@ const useStyles = makeStyles({
         fontWeight: tokens.fontWeightSemibold,
         backgroundColor: tokens.colorNeutralBackground3,
         color: tokens.colorNeutralForeground1,
-        ...shorthands.padding(tokens.spacingHorizontalS),
+        padding: tokens.spacingHorizontalS,
         textAlign: 'left',
-        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,
         '@media (forced-colors: active)': {
             backgroundColor: 'Window',
             color: 'WindowText'
@@ -33,8 +33,8 @@ const useStyles = makeStyles({
     },
     bodyCell: {
         ...typographyStyles.caption1,
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),
+        padding: tokens.spacingHorizontalS,
+        border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,
         color: tokens.colorNeutralForeground1,
         textAlign: 'left',
         '@media (forced-colors: active)': {

package/lib/components/ChartTable/useChartTableStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    textAlign: 'left',\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    ...shorthands.border(tokens.strokeWidthThick, 'solid', tokens.colorNeutralStroke2),\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrC,GAAGnB,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChDC,WAAW;QACX,GAAGtB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClF,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5B,GAAGb,WAAWoB,OAAO,CAACnB,OAAOoB,kBAAkB,CAAC;QAChD,GAAGrB,WAAWuB,MAAM,CAACtB,OAAOuB,gBAAgB,EAAE,SAASvB,OAAOwB,mBAAmB,CAAC;QAClFP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAML,aAAaI,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAON,aAAaI,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYP,aAAaI,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUR,aAAaI,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOT,aAAaI,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ChartTable/useChartTableStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { ChartTableProps, ChartTableStyles } from './ChartTable.types';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const chartTableClassNames: SlotClassNames<ChartTableStyles> = {\n  root: 'fui-ChartTable__root',\n  table: 'fui-ChartTable__table',\n  headerCell: 'fui-ChartTable__headerCell',\n  bodyCell: 'fui-ChartTable__bodyCell',\n  chart: 'fui-ChartTable__chart',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    overflowX: 'auto',\n  },\n  table: {\n    borderCollapse: 'collapse',\n  },\n  headerCell: {\n    ...typographyStyles.caption1,\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.colorNeutralBackground3,\n    color: tokens.colorNeutralForeground1,\n    padding: tokens.spacingHorizontalS,\n    textAlign: 'left',\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Window',\n      color: 'WindowText',\n    },\n  },\n  bodyCell: {\n    ...typographyStyles.caption1,\n    padding: tokens.spacingHorizontalS,\n    border: `${tokens.strokeWidthThick} solid ${tokens.colorNeutralStroke2}`,\n    color: tokens.colorNeutralForeground1,\n    textAlign: 'left',\n    '@media (forced-colors: active)': {\n      color: 'WindowText',\n    },\n  },\n});\n\n/**\n * Apply styling to the ChartTable slots based on the state\n */\nexport const useChartTableStyles = (props: ChartTableProps): ChartTableStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(chartTableClassNames.root, baseStyles.root /*props.styles?.root*/),\n    table: mergeClasses(chartTableClassNames.table, baseStyles.table /*props.styles?.table*/),\n    headerCell: mergeClasses(chartTableClassNames.headerCell, baseStyles.headerCell /*props.styles?.headerCell*/),\n    bodyCell: mergeClasses(chartTableClassNames.bodyCell, baseStyles.bodyCell /*props.styles?.bodyCell*/),\n    chart: mergeClasses(chartTableClassNames.chart /*props.styles?.chart*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","chartTableClassNames","root","table","headerCell","bodyCell","chart","useStyles","width","overflowX","borderCollapse","caption1","fontWeight","fontWeightSemibold","backgroundColor","colorNeutralBackground3","color","colorNeutralForeground1","padding","spacingHorizontalS","textAlign","border","strokeWidthThick","colorNeutralStroke2","useChartTableStyles","props","baseStyles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,uBAAyD;IACpEC,MAAM;IACNC,OAAO;IACPC,YAAY;IACZC,UAAU;IACVC,OAAO;AACT,EAAE;AAEF,MAAMC,YAAYV,WAAW;IAC3BK,MAAM;QACJM,OAAO;QACPC,WAAW;IACb;IACAN,OAAO;QACLO,gBAAgB;IAClB;IACAN,YAAY;QACV,GAAGJ,iBAAiBW,QAAQ;QAC5BC,YAAYb,OAAOc,kBAAkB;QACrCC,iBAAiBf,OAAOgB,uBAAuB;QAC/CC,OAAOjB,OAAOkB,uBAAuB;QACrCC,SAASnB,OAAOoB,kBAAkB;QAClCC,WAAW;QACXC,QAAQ,GAAGtB,OAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,OAAOwB,mBAAmB,EAAE;QACxE,kCAAkC;YAChCT,iBAAiB;YACjBE,OAAO;QACT;IACF;IACAX,UAAU;QACR,GAAGL,iBAAiBW,QAAQ;QAC5BO,SAASnB,OAAOoB,kBAAkB;QAClCE,QAAQ,GAAGtB,OAAOuB,gBAAgB,CAAC,OAAO,EAAEvB,OAAOwB,mBAAmB,EAAE;QACxEP,OAAOjB,OAAOkB,uBAAuB;QACrCG,WAAW;QACX,kCAAkC;YAChCJ,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,sBAAsB,CAACC;IAClC,MAAMC,aAAanB;IAEnB,OAAO;QACLL,MAAMJ,aAAaG,qBAAqBC,IAAI,EAAEwB,WAAWxB,IAAI,CAAC,oBAAoB;QAClFC,OAAOL,aAAaG,qBAAqBE,KAAK,EAAEuB,WAAWvB,KAAK,CAAC,qBAAqB;QACtFC,YAAYN,aAAaG,qBAAqBG,UAAU,EAAEsB,WAAWtB,UAAU,CAAC,0BAA0B;QAC1GC,UAAUP,aAAaG,qBAAqBI,QAAQ,EAAEqB,WAAWrB,QAAQ,CAAC,wBAAwB;QAClGC,OAAOR,aAAaG,qBAAqBK,KAAK,CAAC,qBAAqB;IACtE;AACF,EAAE"}