@fluentui/react-charts 0.0.0-nightly-20250825-0406.1 → 0.0.0-nightly-20250826-0412.1

package/lib/components/DonutChart/useDonutChartStyles.styles.js

@@ -1,6 +1,6 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/utilities';
+import { getAxisTitleStyle } from '../../utilities/index';
 /**
  * @internal
  */
@@ -42,8 +42,8 @@ const useStyles = /*#__PURE__*/__styles({
     Be2twd7: "f13mqy1h",
     Bhrd7zp: "fl43uef",
     Bg96gwp: "fcpl73t",
-    fsow6f: "f17mccla",
     B80ckks: "fmd4ok8",
+    fsow6f: "f17mccla",
     sj55zd: "fkfq4zb",
     Bkfmm31: "fhuob2q",
     a6j6cd: "folz2wl"
@@ -51,7 +51,7 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   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;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1e4lqlz{box-sizing:content-box;}", ".fzm18in{alignment-adjust:center;}", ".ftgm304{display:block;}", [".f1gl81tg{overflow:visible;}", {
     p: -1
-  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f17mccla{text-align:center;}", ".fmd4ok8{font-style:normal;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
+  }], ".fikn0iw{padding-top:var(--spacingVerticalL);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fmd4ok8{font-style:normal;}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}"],
   m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }]]

package/lib/components/DonutChart/useDonutChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","fsow6f","B80ckks","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: {\n        ...typographyStyles.caption2Strong,\n        textAlign: 'center',\n        fontStyle: 'normal',\n        color: tokens.colorNeutralForeground2,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    }\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE,yBAAyB;EACvCC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAa,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,eAAA;IAAAiB,MAAA;IAAAP,MAAA;EAAA;EAAAR,cAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAW,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA6BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjF,MAAM;IAAEC;EAAU,CAAC,GAAGN,KAAK;EAC3B,MAAMO,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEoC,UAAU,CAACpC,IAAI,EAAEmC,SAAS,EAAE,CAACL,aAAa,GAAGD,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC9B,IAAI,CAAC;IACvKC,KAAK,EAAEN,YAAY,CAACI,eAAe,CAACE,KAAK,EAAEmC,UAAU,CAACnC,KAAK,EAAE,CAAC8B,cAAc,GAAGF,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,KAAK,CAAC;IACnKC,eAAe,EAAEP,YAAY,CAACI,eAAe,CAACG,eAAe,EAAEkC,UAAU,CAAClC,eAAe,EAAE,CAAC8B,cAAc,GAAGH,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,eAAe,CAAC;IAC3MC,YAAY,EAAER,YAAY,CAACI,eAAe,CAACI,YAAY,EAAE,CAAC8B,cAAc,GAAGJ,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,YAAY,CAAC;IACtKC,cAAc,EAAET,YAAY,CAACI,eAAe,CAACK,cAAc,EAAEgC,UAAU,CAAChC,cAAc,EAAE,CAAC8B,cAAc,GAAGL,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,cAAc;EAC1M,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","B80ckks","fsow6f","sj55zd","Bkfmm31","a6j6cd","d","p","m","useDonutChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","_props_styles4","className","baseStyles","styles"],"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { getAxisTitleStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper',\n    axisAnnotation: 'fui-donut__axisAnnotation'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL,\n        width: '100%'\n    },\n    axisAnnotation: getAxisTitleStyle()\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3, _props_styles4;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: mergeClasses(donutClassNames.chartWrapper, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chartWrapper),\n        axisAnnotation: mergeClasses(donutClassNames.axisAnnotation, baseStyles.axisAnnotation, (_props_styles4 = props.styles) === null || _props_styles4 === void 0 ? void 0 : _props_styles4.axisAnnotation)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD;AACA;AACA;AAAI,OAAO,MAAMC,eAAe,GAAG;EAC/BC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,kBAAkB;EACzBC,eAAe,EAAE,4BAA4B;EAC7CC,YAAY,EAAE,yBAAyB;EACvCC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGX,QAAA;EAAAM,IAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAZ,KAAA;IAAAa,OAAA;IAAAC,MAAA;IAAAL,MAAA;IAAAM,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,eAAA;IAAAiB,MAAA;IAAAP,MAAA;EAAA;EAAAR,cAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAW,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAIC,KAAK,IAAG;EAC5C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;EACjF,MAAM;IAAEC;EAAU,CAAC,GAAGN,KAAK;EAC3B,MAAMO,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHL,IAAI,EAAEL,YAAY,CAACI,eAAe,CAACC,IAAI,EAAEoC,UAAU,CAACpC,IAAI,EAAEmC,SAAS,EAAE,CAACL,aAAa,GAAGD,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIP,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC9B,IAAI,CAAC;IACvKC,KAAK,EAAEN,YAAY,CAACI,eAAe,CAACE,KAAK,EAAEmC,UAAU,CAACnC,KAAK,EAAE,CAAC8B,cAAc,GAAGF,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIN,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,KAAK,CAAC;IACnKC,eAAe,EAAEP,YAAY,CAACI,eAAe,CAACG,eAAe,EAAEkC,UAAU,CAAClC,eAAe,EAAE,CAAC8B,cAAc,GAAGH,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,eAAe,CAAC;IAC3MC,YAAY,EAAER,YAAY,CAACI,eAAe,CAACI,YAAY,EAAE,CAAC8B,cAAc,GAAGJ,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,YAAY,CAAC;IACtKC,cAAc,EAAET,YAAY,CAACI,eAAe,CAACK,cAAc,EAAEgC,UAAU,CAAChC,cAAc,EAAE,CAAC8B,cAAc,GAAGL,KAAK,CAACQ,MAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAC9B,cAAc;EAC1M,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js

@@ -1,6 +1,6 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/utilities';
+import { getAxisTitleStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const donutClassNames = {
@@ -31,16 +31,7 @@ import { HighContrastSelector } from '../../utilities/utilities';
         paddingTop: tokens.spacingVerticalL,
         width: '100%'
     },
-    axisAnnotation: {
-        ...typographyStyles.caption2Strong,
-        textAlign: 'center',
-        fontStyle: 'normal',
-        color: tokens.colorNeutralForeground2,
-        fill: tokens.colorNeutralForeground1,
-        [HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    }
+    axisAnnotation: getAxisTitleStyle()
 });
 /**
  * Apply styling to the DonutChart component

package/lib/components/DonutChart/useDonutChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { HighContrastSelector } from '../../utilities/utilities';\n\n/**\n * @internal\n */\nexport const donutClassNames: SlotClassNames<DonutChartStyles> = {\n  root: 'fui-donut__root',\n  chart: 'fui-donut__chart',\n  legendContainer: 'fui-donut__legendContainer',\n  chartWrapper: 'fui-donut__chartWrapper',\n  axisAnnotation: 'fui-donut__axisAnnotation',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    // alignItems: 'center',\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n  },\n  chart: {\n    boxSizing: 'content-box',\n    alignmentAdjust: 'center',\n    display: 'block',\n    overflow: 'visible',\n  },\n  legendContainer: {\n    paddingTop: tokens.spacingVerticalL,\n    width: '100%',\n  },\n  axisAnnotation: {\n    ...typographyStyles.caption2Strong,\n    textAlign: 'center',\n    fontStyle: 'normal',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the DonutChart component\n */\nexport const useDonutChartStyles = (props: DonutChartProps): DonutChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(donutClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(donutClassNames.chart, baseStyles.chart, props.styles?.chart),\n    legendContainer: mergeClasses(\n      donutClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    chartWrapper: mergeClasses(donutClassNames.chartWrapper, props.styles?.chartWrapper),\n    axisAnnotation: mergeClasses(\n      donutClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      props.styles?.axisAnnotation,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","body1","display","flexDirection","width","height","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","caption2Strong","textAlign","fontStyle","color","colorNeutralForeground2","fill","colorNeutralForeground1","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,4BAA4B;AAEjE;;CAEC,GACD,OAAO,MAAMC,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJ,wBAAwB;QACxB,GAAGH,iBAAiBS,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;IACAT,OAAO;QACLU,WAAW;QACXC,iBAAiB;QACjBL,SAAS;QACTM,UAAU;IACZ;IACAX,iBAAiB;QACfY,YAAYlB,OAAOmB,gBAAgB;QACnCN,OAAO;IACT;IACAL,gBAAgB;QACd,GAAGP,iBAAiBmB,cAAc;QAClCC,WAAW;QACXC,WAAW;QACXC,OAAOvB,OAAOwB,uBAAuB;QACrCC,MAAMzB,OAAO0B,uBAAuB;QACpC,CAACxB,qBAAqB,EAAE;YACtBuB,MAAM;QACR;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAACC;QAKqCA,eACRA,gBAI3DA,gBAEuDA,gBAIvDA;IAfJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAarB;IAEnB,OAAO;QACLL,MAAML,aAAaI,gBAAgBC,IAAI,EAAE0B,WAAW1B,IAAI,EAAEyB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcxB,IAAI;QACvFC,OAAON,aAAaI,gBAAgBE,KAAK,EAAEyB,WAAWzB,KAAK,GAAEuB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcvB,KAAK;QAChFC,iBAAiBP,aACfI,gBAAgBG,eAAe,EAC/BwB,WAAWxB,eAAe,GAC1BsB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAActB,eAAe;QAE/BC,cAAcR,aAAaI,gBAAgBI,YAAY,GAAEqB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrB,YAAY;QACnFC,gBAAgBT,aACdI,gBAAgBK,cAAc,EAC9BsB,WAAWtB,cAAc,GACzBoB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcpB,cAAc;IAEhC;AACF,EAAE"}
+{"version":3,"sources":["../src/components/DonutChart/useDonutChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { DonutChartProps, DonutChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { getAxisTitleStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const donutClassNames: SlotClassNames<DonutChartStyles> = {\n  root: 'fui-donut__root',\n  chart: 'fui-donut__chart',\n  legendContainer: 'fui-donut__legendContainer',\n  chartWrapper: 'fui-donut__chartWrapper',\n  axisAnnotation: 'fui-donut__axisAnnotation',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    // alignItems: 'center',\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n    height: '100%',\n  },\n  chart: {\n    boxSizing: 'content-box',\n    alignmentAdjust: 'center',\n    display: 'block',\n    overflow: 'visible',\n  },\n  legendContainer: {\n    paddingTop: tokens.spacingVerticalL,\n    width: '100%',\n  },\n  axisAnnotation: getAxisTitleStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the DonutChart component\n */\nexport const useDonutChartStyles = (props: DonutChartProps): DonutChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(donutClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(donutClassNames.chart, baseStyles.chart, props.styles?.chart),\n    legendContainer: mergeClasses(\n      donutClassNames.legendContainer,\n      baseStyles.legendContainer,\n      props.styles?.legendContainer,\n    ),\n    chartWrapper: mergeClasses(donutClassNames.chartWrapper, props.styles?.chartWrapper),\n    axisAnnotation: mergeClasses(\n      donutClassNames.axisAnnotation,\n      baseStyles.axisAnnotation,\n      props.styles?.axisAnnotation,\n    ),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","getAxisTitleStyle","donutClassNames","root","chart","legendContainer","chartWrapper","axisAnnotation","useStyles","body1","display","flexDirection","width","height","boxSizing","alignmentAdjust","overflow","paddingTop","spacingVerticalL","useDonutChartStyles","props","className","baseStyles","styles"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,iBAAiB,QAAQ,wBAAwB;AAE1D;;CAEC,GACD,OAAO,MAAMC,kBAAoD;IAC/DC,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;IACdC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYX,WAAW;IAC3BM,MAAM;QACJ,wBAAwB;QACxB,GAAGH,iBAAiBS,KAAK;QACzBC,SAAS;QACTC,eAAe;QACfC,OAAO;QACPC,QAAQ;IACV;IACAT,OAAO;QACLU,WAAW;QACXC,iBAAiB;QACjBL,SAAS;QACTM,UAAU;IACZ;IACAX,iBAAiB;QACfY,YAAYlB,OAAOmB,gBAAgB;QACnCN,OAAO;IACT;IACAL,gBAAgBN;AAClB;AAEA;;CAEC,GACD,OAAO,MAAMkB,sBAAsB,CAACC;QAKqCA,eACRA,gBAI3DA,gBAEuDA,gBAIvDA;IAfJ,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAad;IAEnB,OAAO;QACLL,MAAML,aAAaI,gBAAgBC,IAAI,EAAEmB,WAAWnB,IAAI,EAAEkB,YAAWD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcjB,IAAI;QACvFC,OAAON,aAAaI,gBAAgBE,KAAK,EAAEkB,WAAWlB,KAAK,GAAEgB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAchB,KAAK;QAChFC,iBAAiBP,aACfI,gBAAgBG,eAAe,EAC/BiB,WAAWjB,eAAe,GAC1Be,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcf,eAAe;QAE/BC,cAAcR,aAAaI,gBAAgBI,YAAY,GAAEc,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcd,YAAY;QACnFC,gBAAgBT,aACdI,gBAAgBK,cAAc,EAC9Be,WAAWf,cAAc,GACzBa,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcb,cAAc;IAEhC;AACF,EAAE"}

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js

@@ -1,5 +1,5 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
 export const groupedVerticalBarChartClassNames = {
   opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',
   tooltip: 'fui-gvbc**tooltip',
@@ -36,18 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
-    Bkfmm31: "f5q6cfr",
-    Bgh53k4: 0,
-    B2eet1l: 0,
-    De3pzq: 0,
-    Bcmaq0h: 0,
-    gk0gix: 0,
-    B20660r: 0,
-    B8a6bjv: 0,
-    Bpptf2m: 0,
-    e5kdtc: 0,
-    Bkjc3bi: 0,
-    ayd6f0: "fcm7iae",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
@@ -65,9 +54,7 @@ const useStyles = /*#__PURE__*/__styles({
     Bvjb7m6: "fhv2zbx"
   }
 }, {
-  d: [".f158kwzp{cursor:default;}", ".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);}", ".f5q6cfr{fill:var(--colorNeutralBackground1);}", [".fcm7iae{background:var(--colorNeutralBackground1);}", {
-    p: -2
-  }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  d: [".f158kwzp{cursor:default;}", ".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);}", {
     p: -1
   }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fhv2zbx{forced-color-adjust:auto;}"]
 });

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const groupedVerticalBarChartClassNames = {\n    opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n    tooltip: 'fui-gvbc**tooltip',\n    barLabel: 'fui-gvbc**barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        background: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none',\n        color: tokens.colorNeutralForeground1\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    }\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,oBAAoB,EAAE,gCAAgC;EACtDC,OAAO,EAAE,mBAAmB;EAC5BC,QAAQ,EAAE,oBAAoB;EAC9BC,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,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGtB,QAAA;EAAAM,oBAAA;IAAAiB,OAAA;EAAA;EAAAhB,OAAA;IAAAiB,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,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA/C,QAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAU,OAAA;IAAAmB,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAuBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yCAAyC,GAAIC,KAAK,IAAG;EAClE,MAAMC,UAAU,GAAGvC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,oBAAoB,EAAEL,YAAY,CAACI,iCAAiC,CAACC,oBAAoB,EAAEuD,UAAU,CAACvD,oBAAoB,CAAC,sCAAuC,CAAC;IACnKC,OAAO,EAAEN,YAAY,CAACI,iCAAiC,CAACE,OAAO,EAAEsD,UAAU,CAACtD,OAAO,CAAC,yBAA0B,CAAC;IAC/GC,QAAQ,EAAEP,YAAY,CAACI,iCAAiC,CAACG,QAAQ,EAAEqD,UAAU,CAACrD,QAAQ,CAAC,0BAA2B;EACtH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","getBarLabelStyle","getTooltipStyle","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bceei9c","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","d","p","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"sources":["useGroupedVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const groupedVerticalBarChartClassNames = {\n    opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n    tooltip: 'fui-gvbc**tooltip',\n    barLabel: 'fui-gvbc**barLabel',\n    root: '',\n    xAxis: '',\n    yAxis: '',\n    legendContainer: '',\n    hover: '',\n    descriptionMessage: '',\n    axisTitle: '',\n    chartTitle: '',\n    shapeStyles: '',\n    chartWrapper: '',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\nconst useStyles = makeStyles({\n    opacityChangeOnHover: {\n        cursor: 'default'\n    },\n    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle()\n});\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */ export const useGroupedVerticalBarChartStyles_unstable = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(groupedVerticalBarChartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,uBAAuB;AACzE,OAAO,MAAMC,iCAAiC,GAAG;EAC7CC,oBAAoB,EAAE,gCAAgC;EACtDC,OAAO,EAAE,mBAAmB;EAC5BC,QAAQ,EAAE,oBAAoB;EAC9BC,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,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE,EAAE;EAChBC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD,MAAMC,SAAS,gBAAGrB,QAAA;EAAAK,oBAAA;IAAAiB,OAAA;EAAA;EAAAhB,OAAA;IAAAiB,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;EAAApC,QAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAMjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yCAAyC,GAAIC,KAAK,IAAG;EAClE,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,oBAAoB,EAAEJ,YAAY,CAACG,iCAAiC,CAACC,oBAAoB,EAAE6C,UAAU,CAAC7C,oBAAoB,CAAC,sCAAuC,CAAC;IACnKC,OAAO,EAAEL,YAAY,CAACG,iCAAiC,CAACE,OAAO,EAAE4C,UAAU,CAAC5C,OAAO,CAAC,yBAA0B,CAAC;IAC/GC,QAAQ,EAAEN,YAAY,CAACG,iCAAiC,CAACG,QAAQ,EAAE2C,UAAU,CAAC3C,QAAQ,CAAC,0BAA2B;EACtH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js

@@ -1,5 +1,5 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
 export const groupedVerticalBarChartClassNames = {
     opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',
     tooltip: 'fui-gvbc**tooltip',
@@ -22,25 +22,8 @@ const useStyles = makeStyles({
     opacityChangeOnHover: {
         cursor: 'default'
     },
-    tooltip: {
-        ...typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: tokens.spacingVerticalNone,
-        fill: tokens.colorNeutralBackground1,
-        background: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusSmall,
-        pointerEvents: 'none',
-        color: tokens.colorNeutralForeground1
-    },
-    barLabel: {
-        ...typographyStyles.caption1Strong,
-        fill: tokens.colorNeutralForeground1,
-        forcedColorAdjust: 'auto'
-    }
+    tooltip: getTooltipStyle(),
+    barLabel: getBarLabelStyle()
 });
 /**
  * Apply styling to the GroupedVerticalBarChart slots based on the state

package/lib/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n  opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n  tooltip: 'fui-gvbc**tooltip',\n  barLabel: 'fui-gvbc**barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    fill: tokens.colorNeutralBackground1, //Check this\n    background: tokens.colorNeutralBackground1, //Fill or background\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n    color: tokens.colorNeutralForeground1, //Confirm this\n  },\n  barLabel: {\n    ...typographyStyles.caption1Strong, // Confirm styles\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n  props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      groupedVerticalBarChartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","body1","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","background","borderRadius","borderRadiusSmall","pointerEvents","color","colorNeutralForeground1","caption1Strong","forcedColorAdjust","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,OAAO,MAAMC,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYtB,WAAW;IAC3BM,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAAS;QACP,GAAGH,iBAAiBoB,KAAK;QACzBC,SAAS;QACTC,eAAe;QACf,GAAGxB,WAAWyB,OAAO,CAACxB,OAAOyB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK5B,OAAO6B,mBAAmB;QAC/BC,MAAM9B,OAAO+B,uBAAuB;QACpCC,YAAYhC,OAAO+B,uBAAuB;QAC1CE,cAAcjC,OAAOkC,iBAAiB;QACtCC,eAAe;QACfC,OAAOpC,OAAOqC,uBAAuB;IACvC;IACAhC,UAAU;QACR,GAAGJ,iBAAiBqC,cAAc;QAClCR,MAAM9B,OAAOqC,uBAAuB;QACpCE,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,4CAA4C,CACvDC;IAEA,MAAMC,aAAavB;IAEnB,OAAO;QACLhB,sBAAsBL,aACpBI,kCAAkCC,oBAAoB,EACtDuC,WAAWvC,oBAAoB,CAAC,oCAAoC;QAEtEC,SAASN,aAAaI,kCAAkCE,OAAO,EAAEsC,WAAWtC,OAAO,CAAC,uBAAuB;QAC3GC,UAAUP,aAAaI,kCAAkCG,QAAQ,EAAEqC,WAAWrC,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}
+{"version":3,"sources":["../src/components/GroupedVerticalBarChart/useGroupedVerticalBarChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { GroupedVerticalBarChartProps, GroupedVerticalBarChartStyles } from '../../index';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const groupedVerticalBarChartClassNames: SlotClassNames<GroupedVerticalBarChartStyles> = {\n  opacityChangeOnHover: 'fui-gvbc**opacityChangeOnHover',\n  tooltip: 'fui-gvbc**tooltip',\n  barLabel: 'fui-gvbc**barLabel',\n  root: '',\n  xAxis: '',\n  yAxis: '',\n  legendContainer: '',\n  hover: '',\n  descriptionMessage: '',\n  axisTitle: '',\n  chartTitle: '',\n  shapeStyles: '',\n  chartWrapper: '',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\nconst useStyles = makeStyles({\n  opacityChangeOnHover: {\n    cursor: 'default',\n  },\n  tooltip: getTooltipStyle() as GriffelStyle,\n  barLabel: getBarLabelStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the GroupedVerticalBarChart slots based on the state\n */\nexport const useGroupedVerticalBarChartStyles_unstable = (\n  props: GroupedVerticalBarChartProps,\n): GroupedVerticalBarChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    opacityChangeOnHover: mergeClasses(\n      groupedVerticalBarChartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    tooltip: mergeClasses(groupedVerticalBarChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    barLabel: mergeClasses(groupedVerticalBarChartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getBarLabelStyle","getTooltipStyle","groupedVerticalBarChartClassNames","opacityChangeOnHover","tooltip","barLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","cursor","useGroupedVerticalBarChartStyles_unstable","props","baseStyles"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,wBAAwB;AAE1E,OAAO,MAAMC,oCAAmF;IAC9FC,sBAAsB;IACtBC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF,MAAMC,YAAYrB,WAAW;IAC3BK,sBAAsB;QACpBiB,QAAQ;IACV;IACAhB,SAASH;IACTI,UAAUL;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMqB,4CAA4C,CACvDC;IAEA,MAAMC,aAAaJ;IAEnB,OAAO;QACLhB,sBAAsBJ,aACpBG,kCAAkCC,oBAAoB,EACtDoB,WAAWpB,oBAAoB,CAAC,oCAAoC;QAEtEC,SAASL,aAAaG,kCAAkCE,OAAO,EAAEmB,WAAWnB,OAAO,CAAC,uBAAuB;QAC3GC,UAAUN,aAAaG,kCAAkCG,QAAQ,EAAEkB,WAAWlB,QAAQ,CAAC,wBAAwB;IACjH;AACF,EAAE"}