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

package/lib/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AAAA,uDAAuD,GAyIvD;;CAEC,GACD,WAGC"}
+{"version":3,"sources":["../src/components/LineChart/LineChart.types.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport { RenderFunction } from '../../utilities/index';\nimport {\n  ChartProps,\n  LineChartPoints,\n  Margins,\n  Basestate,\n  RefArrayData,\n  CustomizedCalloutData,\n} from '../../types/index';\nimport { EventAnnotation } from '../../types/EventAnnotation';\nimport {\n  CartesianChartProps,\n  CartesianChartStyleProps,\n  CartesianChartStyles,\n  ChildProps,\n} from '../CommonComponents/index';\n\nexport type { ChildProps, LineChartPoints, Margins, Basestate, RefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface LineChartProps extends CartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: ChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: LineChartStyles;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: EventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: RenderFunction<CustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: CustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: ColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * To enable callout for individual line or complete stack.\n   * @default true\n   * @type \\{boolean \\}\n   */\n  isCalloutForStack?: boolean;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface EventsAnnotationProps {\n  events: EventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface LineChartStyles extends CartesianChartStyles {\n  /**\n   * styles for line border\n   */\n  lineBorder?: string;\n\n  /**\n   * styles for marker label\n   */\n  markerLabel?: string;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface LineChartStyleProps extends CartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: ColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface ColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"],"names":[],"mappings":"AAAA,uDAAuD,GAgJvD;;CAEC,GACD,WAGC"}

package/lib/components/LineChart/useLineChartStyles.styles.js

@@ -1,6 +1,7 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */
@@ -28,6 +29,10 @@ export const linechartClassNames = {
  */
 const useStyles = /*#__PURE__*/__styles({
   tooltip: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
     z8tnut: "f17mpqex",
@@ -37,27 +42,35 @@ const useStyles = /*#__PURE__*/__styles({
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
-    Bkfmm31: "f5q6cfr",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
     Dimara: "fq9zq91",
-    Bkecrkj: "f1aehjj5"
+    Bkecrkj: "f1aehjj5",
+    sj55zd: "f19n0e5"
+  },
+  markerLabel: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    Bkfmm31: "fhuob2q",
+    jzqdnp: "fdxigdc",
+    a6j6cd: "folz2wl"
   },
   lineBorder: {
     ojy3ng: "f1yuyku4",
     Bpvj6i6: "fdvt8h6"
-  },
-  markerLabel: {
-    Bkfmm31: "fhuob2q",
-    jzqdnp: "fdxigdc"
   }
 }, {
-  d: [".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);}", [".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;}", ".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;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}"],
-  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdvt8h6{stroke:Canvas;}}", {
+  }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}"],
+  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)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdvt8h6{stroke:Canvas;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }]]
 });

package/lib/components/LineChart/useLineChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","ojy3ng","Bpvj6i6","jzqdnp","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\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        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    },\n    markerLabel: {\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        selectors: {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAM,OAAA;IAAAkB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAhC,UAAA;IAAAiC,MAAA;IAAAC,OAAA;EAAA;EAAAjC,WAAA;IAAAyB,OAAA;IAAAS,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CA2BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGzB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEL,YAAY,CAACI,mBAAmB,CAACC,OAAO,EAAE0C,UAAU,CAAC1C,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEN,YAAY,CAACI,mBAAmB,CAACE,UAAU,EAAEyC,UAAU,CAACzC,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAEP,YAAY,CAACI,mBAAmB,CAACG,WAAW,EAAEwC,UAAU,CAACxC,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","jzqdnp","a6j6cd","ojy3ng","Bpvj6i6","d","p","m","useLineChartStyles","props","baseStyles"],"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    lineBorder: 'fui-line_lineBorder',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ ),\n        markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,OAAO,EAAE,mBAAmB;EAC5BC,UAAU,EAAE,qBAAqB;EACjCC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGxB,QAAA;EAAAO,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;EAAApC,WAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAxC,UAAA;IAAAyC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGhC,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,OAAO,EAAEN,YAAY,CAACK,mBAAmB,CAACC,OAAO,EAAEiD,UAAU,CAACjD,OAAO,CAAC,yBAA0B,CAAC;IACjGC,UAAU,EAAEP,YAAY,CAACK,mBAAmB,CAACE,UAAU,EAAEgD,UAAU,CAAChD,UAAU,CAAC,4BAA6B,CAAC;IAC7GC,WAAW,EAAER,YAAY,CAACK,mBAAmB,CAACG,WAAW,EAAE+C,UAAU,CAAC/C,WAAW,CAAC,6BAA8B;EACpH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/LineChart/useLineChartStyles.styles.raw.js

@@ -1,6 +1,7 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const linechartClassNames = {
@@ -25,31 +26,13 @@ import { HighContrastSelector } from '../../utilities/index';
 /**
  * Base Styles
  */ const useStyles = makeStyles({
-    tooltip: {
-        display: 'flex',
-        flexDirection: 'column',
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: tokens.spacingVerticalNone,
-        fill: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
+    tooltip: getTooltipStyle(),
+    markerLabel: getMarkerLabelStyle(),
     lineBorder: {
         stroke: tokens.colorNeutralBackground1,
         [HighContrastSelector]: {
             stroke: 'Canvas'
         }
-    },
-    markerLabel: {
-        fill: tokens.colorNeutralForeground1,
-        textAnchor: 'middle',
-        selectors: {
-            [HighContrastSelector]: {
-                fill: 'CanvasText'
-            }
-        }
     }
 });
 /**

package/lib/components/LineChart/useLineChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\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    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n  markerLabel: {\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    selectors: {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","HighContrastSelector","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","stroke","colorNeutralForeground1","textAnchor","selectors","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,WAAW;IAC3BM,SAAS;QACPkB,SAAS;QACTC,eAAe;QACf,GAAGvB,WAAWwB,OAAO,CAACvB,OAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,OAAO4B,mBAAmB;QAC/BC,MAAM7B,OAAO8B,uBAAuB;QACpCC,cAAc/B,OAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA7B,YAAY;QACV8B,QAAQlC,OAAO8B,uBAAuB;QACtC,CAAC7B,qBAAqB,EAAE;YACtBiC,QAAQ;QACV;IACF;IACA7B,aAAa;QACXwB,MAAM7B,OAAOmC,uBAAuB;QACpCC,YAAY;QACZC,WAAW;YACT,CAACpC,qBAAqB,EAAE;gBACtB4B,MAAM;YACR;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMS,qBAAqB,CAACC;IACjC,MAAMC,aAAapB;IACnB,OAAO;QACLjB,SAASL,aAAaI,oBAAoBC,OAAO,EAAEqC,WAAWrC,OAAO,CAAC,uBAAuB;QAC7FC,YAAYN,aAAaI,oBAAoBE,UAAU,EAAEoC,WAAWpC,UAAU,CAAC,0BAA0B;QACzGC,aAAaP,aAAaI,oBAAoBG,WAAW,EAAEmC,WAAWnC,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}
+{"version":3,"sources":["../src/components/LineChart/useLineChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { LineChartProps, LineChartStyles } from './LineChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const linechartClassNames: SlotClassNames<LineChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  lineBorder: 'fui-line_lineBorder',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n  lineBorder: {\n    stroke: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      stroke: 'Canvas',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useLineChartStyles = (props: LineChartProps): LineChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    lineBorder: mergeClasses(linechartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/),\n    markerLabel: mergeClasses(linechartClassNames.markerLabel, baseStyles.markerLabel /*props.styles?.markerLabel*/),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","HighContrastSelector","getMarkerLabelStyle","getTooltipStyle","linechartClassNames","tooltip","lineBorder","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","stroke","colorNeutralBackground1","useLineChartStyles","props","baseStyles"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACxE,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,SAAS;IACTC,YAAY;IACZC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYxB,WAAW;IAC3BO,SAASF;IACTI,aAAaL;IACbI,YAAY;QACViB,QAAQvB,OAAOwB,uBAAuB;QACtC,CAACvB,qBAAqB,EAAE;YACtBsB,QAAQ;QACV;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,qBAAqB,CAACC;IACjC,MAAMC,aAAaL;IACnB,OAAO;QACLjB,SAASN,aAAaK,oBAAoBC,OAAO,EAAEsB,WAAWtB,OAAO,CAAC,uBAAuB;QAC7FC,YAAYP,aAAaK,oBAAoBE,UAAU,EAAEqB,WAAWrB,UAAU,CAAC,0BAA0B;QACzGC,aAAaR,aAAaK,oBAAoBG,WAAW,EAAEoB,WAAWpB,WAAW,CAAC,2BAA2B;IAC/G;AACF,EAAE"}

package/lib/components/SankeyChart/useSankeyChartStyles.styles.js

@@ -1,6 +1,7 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getTooltipStyle } from '../../utilities/index';
 export const sankeyChartClassNames = {
   root: 'fui-sc__root',
   nodes: 'fui-sc__nodes',
@@ -40,31 +41,21 @@ const useStyles = /*#__PURE__*/__styles({
     Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
-    Byoj8tv: 0,
-    uwmqm3: 0,
-    z189sj: 0,
-    z8tnut: 0,
-    B0ocmuz: "f1t756mo",
+    z8tnut: "f17mpqex",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
-    Bhzewxz: "f113wtx2",
-    Bgh53k4: 0,
-    B2eet1l: 0,
-    De3pzq: 0,
-    Bcmaq0h: 0,
-    gk0gix: 0,
-    B20660r: 0,
-    B8a6bjv: 0,
-    Bpptf2m: 0,
-    e5kdtc: 0,
-    Bkjc3bi: 0,
-    ayd6f0: "fcm7iae",
+    Bhzewxz: "fr6rvge",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
-    Dimara: "fl4tsp0",
-    Bkecrkj: "f1aehjj5"
+    Dimara: "fq9zq91",
+    Bkecrkj: "f1aehjj5",
+    sj55zd: "f19n0e5"
   },
   nodeTextContainer: {
     B3gqxw3: "fk6oafs",
@@ -84,13 +75,9 @@ 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;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
-  }], ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".fu2q8de{stroke-width:3px;}", ".f1yc5x8p{fill:#F5F5F5;}", [".f1t756mo{padding:8px;}", {
+  }], ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".fu2q8de{stroke-width:3px;}", ".f1yc5x8p{fill:#F5F5F5;}", ".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
-  }], ".f1euv43f{position:absolute;}", ".f17mccla{text-align:center;}", ".f113wtx2{top:0px;}", [".fcm7iae{background:var(--colorNeutralBackground1);}", {
-    p: -2
-  }], [".fl4tsp0{border-radius:2px;}", {
-    p: -1
-  }], ".f1aehjj5{pointer-events:none;}", ".fvjh0tl{margin-top:4px;}", ".ff9s3yw{margin-left:8px;}", ".f1phki43{margin-right:8px;}", ".fd1gkq{margin-bottom:4px;}", [".f1enuhaj{overflow:auto;}", {
+  }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fvjh0tl{margin-top:4px;}", ".ff9s3yw{margin-left:8px;}", ".f1phki43{margin-right:8px;}", ".fd1gkq{margin-bottom:4px;}", [".f1enuhaj{overflow:auto;}", {
     p: -1
   }], ".ftgm304{display:block;}"],
   m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f14egcv9{fill:Canvas;}}", {

package/lib/components/SankeyChart/useSankeyChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","fsow6f","Bhzewxz","Bgh53k4","B2eet1l","De3pzq","Bcmaq0h","gk0gix","B20660r","B8a6bjv","Bpptf2m","e5kdtc","Bkjc3bi","ayd6f0","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper',\n    chart: 'fui-sc__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        padding: '8px',\n        position: 'absolute',\n        textAlign: 'center',\n        top: '0px',\n        background: tokens.colorNeutralBackground1,\n        borderRadius: '2px',\n        pointerEvents: 'none'\n    },\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    chart: {\n        display: 'block'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","Bkfmm31","Be5yapy","a6j6cd","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","B3gqxw3","B6of3ja","Frg6f3","jrapky","t21cq0","d","p","m","useSankeyChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","baseStyles","styles","reflowProps","mode"],"sources":["useSankeyChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\nexport const sankeyChartClassNames = {\n    root: 'fui-sc__root',\n    nodes: 'fui-sc__nodes',\n    links: 'fui-sc__links',\n    nodeTextContainer: 'fui-sc__nodeTextContainer',\n    toolTip: 'fui-sc__toolTip',\n    chartWrapper: 'fui-sc__chartWrapper',\n    chart: 'fui-sc__chart'\n};\nconst useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\n    links: {\n        fill: tokens.colorNeutralBackground1,\n        strokeWidth: '3px',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    nodes: {\n        fill: '#F5F5F5',\n        [HighContrastSelector]: {\n            fill: 'Canvas'\n        }\n    },\n    toolTip: getTooltipStyle(),\n    nodeTextContainer: {\n        '& text': {\n            [HighContrastSelector]: {\n                fill: 'CanvasText'\n            }\n        },\n        marginTop: '4px',\n        marginLeft: '8px',\n        marginBottom: '4px',\n        marginRight: '8px'\n    },\n    chartWrapper: {\n        overflow: 'auto'\n    },\n    chart: {\n        display: 'block'\n    }\n});\nexport const useSankeyChartStyles = (props)=>{\n    var _props_styles, _props_reflowProps, _props_styles1, _props_styles2;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/ ),\n        links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/ ),\n        nodeTextContainer: mergeClasses(sankeyChartClassNames.nodeTextContainer, baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/ ),\n        toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/ ),\n        chartWrapper: mergeClasses(sankeyChartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n        chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.chart)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js

@@ -1,6 +1,7 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/index';
+import { getTooltipStyle } from '../../utilities/index';
 export const sankeyChartClassNames = {
     root: 'fui-sc__root',
     nodes: 'fui-sc__nodes',
@@ -32,18 +33,7 @@ const useStyles = makeStyles({
             fill: 'Canvas'
         }
     },
-    toolTip: {
-        ...typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '8px',
-        position: 'absolute',
-        textAlign: 'center',
-        top: '0px',
-        background: tokens.colorNeutralBackground1,
-        borderRadius: '2px',
-        pointerEvents: 'none'
-    },
+    toolTip: getTooltipStyle(),
     nodeTextContainer: {
         '& text': {
             [HighContrastSelector]: {

package/lib/components/SankeyChart/useSankeyChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    padding: '8px',\n    position: 'absolute',\n    textAlign: 'center',\n    top: '0px',\n    background: tokens.colorNeutralBackground1,\n    borderRadius: '2px',\n    pointerEvents: 'none',\n  },\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralBackground1","strokeWidth","padding","position","textAlign","top","background","borderRadius","pointerEvents","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYb,WAAW;IAC3BM,MAAM;QACJ,GAAGH,iBAAiBW,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMlB,OAAOmB,uBAAuB;QACpCC,aAAa;QACb,CAAClB,qBAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAAChB,qBAAqB,EAAE;YACtBgB,MAAM;QACR;IACF;IACAV,SAAS;QACP,GAAGP,iBAAiBW,KAAK;QACzBC,SAAS;QACTG,eAAe;QACfK,SAAS;QACTC,UAAU;QACVC,WAAW;QACXC,KAAK;QACLC,YAAYzB,OAAOmB,uBAAuB;QAC1CO,cAAc;QACdC,eAAe;IACjB;IACApB,mBAAmB;QACjB,UAAU;YACR,CAACL,qBAAqB,EAAE;gBACtBgB,MAAM;YACR;QACF;QAEAU,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAtB,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEA,OAAO,MAAMmB,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAavB;IAEnB,OAAO;QACLP,MAAML,aAAaI,sBAAsBC,IAAI,EAAE8B,WAAW9B,IAAI,GAAE6B,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAc7B,IAAI;QAClFC,OAAON,aAAaI,sBAAsBE,KAAK,EAAE6B,WAAW7B,KAAK,CAAC,uBAAuB;QACzFC,OAAOP,aAAaI,sBAAsBG,KAAK,EAAE4B,WAAW5B,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBR,aACjBI,sBAAsBI,iBAAiB,EACvC2B,WAAW3B,iBAAiB,CAAC,mCAAmC;QAElEC,SAAST,aAAaI,sBAAsBK,OAAO,EAAE0B,WAAW1B,OAAO,CAAC,yBAAyB;QACjGC,cAAcV,aACZI,sBAAsBM,YAAY,EAClCwB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWzB,YAAY,GAAG,KACpEwB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcxB,YAAY;QAE5BC,OAAOX,aAAaI,sBAAsBO,KAAK,EAAEwB,WAAWxB,KAAK,GAAEuB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcvB,KAAK;IACxF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/SankeyChart/useSankeyChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SankeyChartProps, SankeyChartStyles } from './SankeyChart.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const sankeyChartClassNames: SlotClassNames<SankeyChartStyles> = {\n  root: 'fui-sc__root',\n  nodes: 'fui-sc__nodes',\n  links: 'fui-sc__links',\n  nodeTextContainer: 'fui-sc__nodeTextContainer',\n  toolTip: 'fui-sc__toolTip',\n  chartWrapper: 'fui-sc__chartWrapper',\n  chart: 'fui-sc__chart',\n};\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  links: {\n    fill: tokens.colorNeutralBackground1,\n    strokeWidth: '3px',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  nodes: {\n    fill: '#F5F5F5',\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  toolTip: getTooltipStyle() as GriffelStyle,\n  nodeTextContainer: {\n    '& text': {\n      [HighContrastSelector]: {\n        fill: 'CanvasText',\n      },\n    },\n\n    marginTop: '4px',\n    marginLeft: '8px',\n    marginBottom: '4px',\n    marginRight: '8px',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  chart: {\n    display: 'block',\n  },\n});\n\nexport const useSankeyChartStyles = (props: SankeyChartProps): SankeyChartStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(sankeyChartClassNames.root, baseStyles.root, props.styles?.root),\n    nodes: mergeClasses(sankeyChartClassNames.nodes, baseStyles.nodes /*, props.styles?.nodes*/),\n    links: mergeClasses(sankeyChartClassNames.links, baseStyles.links /*, props.styles?.links*/),\n    nodeTextContainer: mergeClasses(\n      sankeyChartClassNames.nodeTextContainer,\n      baseStyles.nodeTextContainer /*, props.styles?.nodeTextContainer*/,\n    ),\n    toolTip: mergeClasses(sankeyChartClassNames.toolTip, baseStyles.toolTip /*, props.styles?.toolTip*/),\n    chartWrapper: mergeClasses(\n      sankeyChartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    chart: mergeClasses(sankeyChartClassNames.chart, baseStyles.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","getTooltipStyle","sankeyChartClassNames","root","nodes","links","nodeTextContainer","toolTip","chartWrapper","chart","useStyles","body1","display","width","height","flexDirection","overflow","fill","colorNeutralBackground1","strokeWidth","marginTop","marginLeft","marginBottom","marginRight","useSankeyChartStyles","props","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,eAAe,QAAQ,wBAAwB;AAExD,OAAO,MAAMC,wBAA2D;IACtEC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,mBAAmB;IACnBC,SAAS;IACTC,cAAc;IACdC,OAAO;AACT,EAAE;AACF,MAAMC,YAAYd,WAAW;IAC3BO,MAAM;QACJ,GAAGJ,iBAAiBY,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACAX,OAAO;QACLY,MAAMnB,OAAOoB,uBAAuB;QACpCC,aAAa;QACb,CAACnB,qBAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAb,OAAO;QACLa,MAAM;QACN,CAACjB,qBAAqB,EAAE;YACtBiB,MAAM;QACR;IACF;IACAV,SAASN;IACTK,mBAAmB;QACjB,UAAU;YACR,CAACN,qBAAqB,EAAE;gBACtBiB,MAAM;YACR;QACF;QAEAG,WAAW;QACXC,YAAY;QACZC,cAAc;QACdC,aAAa;IACf;IACAf,cAAc;QACZQ,UAAU;IACZ;IACAP,OAAO;QACLG,SAAS;IACX;AACF;AAEA,OAAO,MAAMY,uBAAuB,CAACC;QAI+BA,eAU9DA,oBACAA,gBAEiEA;IAhBrE,MAAMC,aAAahB;IAEnB,OAAO;QACLP,MAAMN,aAAaK,sBAAsBC,IAAI,EAAEuB,WAAWvB,IAAI,GAAEsB,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAActB,IAAI;QAClFC,OAAOP,aAAaK,sBAAsBE,KAAK,EAAEsB,WAAWtB,KAAK,CAAC,uBAAuB;QACzFC,OAAOR,aAAaK,sBAAsBG,KAAK,EAAEqB,WAAWrB,KAAK,CAAC,uBAAuB;QACzFC,mBAAmBT,aACjBK,sBAAsBI,iBAAiB,EACvCoB,WAAWpB,iBAAiB,CAAC,mCAAmC;QAElEC,SAASV,aAAaK,sBAAsBK,OAAO,EAAEmB,WAAWnB,OAAO,CAAC,yBAAyB;QACjGC,cAAcX,aACZK,sBAAsBM,YAAY,EAClCiB,EAAAA,qBAAAA,MAAMG,WAAW,cAAjBH,yCAAAA,mBAAmBI,IAAI,MAAK,cAAcH,WAAWlB,YAAY,GAAG,KACpEiB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcjB,YAAY;QAE5BC,OAAOZ,aAAaK,sBAAsBO,KAAK,EAAEiB,WAAWjB,KAAK,GAAEgB,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAchB,KAAK;IACxF;AACF,EAAE"}

package/lib/components/ScatterChart/useScatterChartStyles.styles.js

@@ -1,6 +1,5 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+import { __styles, mergeClasses } from '@griffel/react';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */
@@ -27,6 +26,10 @@ export const scatterChartClassNames = {
  */
 const useStyles = /*#__PURE__*/__styles({
   tooltip: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
     mc9l5x: "f22iagw",
     Beiy3e4: "f1vx9l62",
     z8tnut: "f17mpqex",
@@ -36,13 +39,14 @@ const useStyles = /*#__PURE__*/__styles({
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
-    Bkfmm31: "f5q6cfr",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
     Dimara: "fq9zq91",
-    Bkecrkj: "f1aehjj5"
+    Bkecrkj: "f1aehjj5",
+    sj55zd: "f19n0e5"
   },
   markerLabel: {
     Bahqtrf: "fk6fouc",
@@ -54,9 +58,9 @@ const useStyles = /*#__PURE__*/__styles({
     a6j6cd: "folz2wl"
   }
 }, {
-  d: [".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);}", [".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;}", ".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;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}"],
+  }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fdxigdc{text-anchor:middle;}"],
   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/ScatterChart/useScatterChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","jzqdnp","a6j6cd","d","p","m","useScatterChartStyles","props","_props_styles","baseStyles","styles"],"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\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        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    markerLabel: {\n        ...typographyStyles.body1,\n        fill: tokens.colorNeutralForeground1,\n        textAnchor: 'middle',\n        [HighContrastSelector]: {\n            fill: 'CanvasText'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles = (props)=>{\n    var _props_styles;\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAG;EACtCC,OAAO,EAAE,mBAAmB;EAC5BC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGvB,QAAA;EAAAO,OAAA;IAAAiB,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA/B,WAAA;IAAAgC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAV,OAAA;IAAAW,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,IAAIC,aAAa;EACjB,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,OAAO,EAAEN,YAAY,CAACK,sBAAsB,CAACC,OAAO,EAAE6C,UAAU,CAAC7C,OAAO,CAAC,yBAA0B,CAAC;IACpGC,WAAW,EAAEP,YAAY,CAACK,sBAAsB,CAACE,WAAW,EAAE4C,UAAU,CAAC5C,WAAW,EAAE,CAAC2C,aAAa,GAAGD,KAAK,CAACG,MAAM,MAAM,IAAI,IAAIF,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC3C,WAAW;EAClM,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","getMarkerLabelStyle","getTooltipStyle","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","jzqdnp","a6j6cd","d","p","m","useScatterChartStyles","props","_props_styles","baseStyles","styles"],"sources":["useScatterChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n/**\n * @internal\n */ export const scatterChartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    markerLabel: 'fui-line__markerLabel',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    svgTooltip: '',\n    chart: '',\n    axisAnnotation: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: getTooltipStyle(),\n    markerLabel: getMarkerLabelStyle()\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useScatterChartStyles = (props)=>{\n    var _props_styles;\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.markerLabel)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,uBAAuB;AAC5E;AACA;AACA;AAAI,OAAO,MAAMC,sBAAsB,GAAG;EACtCC,OAAO,EAAE,mBAAmB;EAC5BC,WAAW,EAAE,uBAAuB;EACpCC,IAAI,EAAE,gBAAgB;EACtBC,KAAK,EAAE,iBAAiB;EACxBC,KAAK,EAAE,iBAAiB;EACxBC,eAAe,EAAE,2BAA2B;EAC5CC,KAAK,EAAE,iBAAiB;EACxBC,kBAAkB,EAAE,8BAA8B;EAClDC,SAAS,EAAE,qBAAqB;EAChCC,UAAU,EAAE,sBAAsB;EAClCC,oBAAoB,EAAE,gCAAgC;EACtDC,WAAW,EAAE,uBAAuB;EACpCC,YAAY,EAAE,wBAAwB;EACtCC,UAAU,EAAE,EAAE;EACdC,KAAK,EAAE,EAAE;EACTC,cAAc,EAAE;AACpB,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGrB,QAAA;EAAAK,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,WAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAkB,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAGrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qBAAqB,GAAIC,KAAK,IAAG;EAC9C,IAAIC,aAAa;EACjB,MAAMC,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHhB,OAAO,EAAEJ,YAAY,CAACG,sBAAsB,CAACC,OAAO,EAAE+C,UAAU,CAAC/C,OAAO,CAAC,yBAA0B,CAAC;IACpGC,WAAW,EAAEL,YAAY,CAACG,sBAAsB,CAACE,WAAW,EAAE8C,UAAU,CAAC9C,WAAW,EAAE,CAAC6C,aAAa,GAAGD,KAAK,CAACG,MAAM,MAAM,IAAI,IAAIF,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAC7C,WAAW;EAClM,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js

@@ -1,6 +1,5 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const scatterChartClassNames = {
@@ -24,25 +23,8 @@ import { HighContrastSelector } from '../../utilities/index';
 /**
  * Base Styles
  */ const useStyles = makeStyles({
-    tooltip: {
-        display: 'flex',
-        flexDirection: 'column',
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: tokens.spacingVerticalNone,
-        fill: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
-    markerLabel: {
-        ...typographyStyles.body1,
-        fill: tokens.colorNeutralForeground1,
-        textAnchor: 'middle',
-        [HighContrastSelector]: {
-            fill: 'CanvasText'
-        }
-    }
+    tooltip: getTooltipStyle(),
+    markerLabel: getMarkerLabelStyle()
 });
 /**
  * Apply styling to the Carousel slots based on the state

package/lib/components/ScatterChart/useScatterChartStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ScatterChart/useScatterChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { HighContrastSelector } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const scatterChartClassNames: SlotClassNames<ScatterChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: {\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    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  markerLabel: {\n    ...typographyStyles.body1,\n    fill: tokens.colorNeutralForeground1,\n    textAnchor: 'middle',\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useScatterChartStyles = (props: ScatterChartProps): ScatterChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, props.styles?.markerLabel),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","display","flexDirection","padding","spacingHorizontalS","position","textAlign","top","spacingVerticalNone","fill","colorNeutralBackground1","borderRadius","borderRadiusSmall","pointerEvents","body1","colorNeutralForeground1","textAnchor","useScatterChartStyles","props","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AACtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAGjE,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D;;CAEC,GACD,OAAO,MAAMC,yBAA6D;IACxEC,SAAS;IACTC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYvB,WAAW;IAC3BO,SAAS;QACPiB,SAAS;QACTC,eAAe;QACf,GAAGvB,WAAWwB,OAAO,CAACvB,OAAOwB,kBAAkB,CAAC;QAChDC,UAAU;QACVC,WAAW;QACXC,KAAK3B,OAAO4B,mBAAmB;QAC/BC,MAAM7B,OAAO8B,uBAAuB;QACpCC,cAAc/B,OAAOgC,iBAAiB;QACtCC,eAAe;IACjB;IACA5B,aAAa;QACX,GAAGJ,iBAAiBiC,KAAK;QACzBL,MAAM7B,OAAOmC,uBAAuB;QACpCC,YAAY;QACZ,CAAClC,qBAAqB,EAAE;YACtB2B,MAAM;QACR;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,wBAAwB,CAACC;QAIoDA;IAHxF,MAAMC,aAAanB;IACnB,OAAO;QACLhB,SAASN,aAAaK,uBAAuBC,OAAO,EAAEmC,WAAWnC,OAAO,CAAC,uBAAuB;QAChGC,aAAaP,aAAaK,uBAAuBE,WAAW,EAAEkC,WAAWlC,WAAW,GAAEiC,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAcjC,WAAW;IACjH;AACF,EAAE"}
+{"version":3,"sources":["../src/components/ScatterChart/useScatterChartStyles.styles.ts"],"sourcesContent":["import { GriffelStyle, makeStyles, mergeClasses } from '@griffel/react';\nimport { ScatterChartProps, ScatterChartStyles } from './ScatterChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\n/**\n * @internal\n */\nexport const scatterChartClassNames: SlotClassNames<ScatterChartStyles> = {\n  tooltip: 'fui-line__tooltip',\n  markerLabel: 'fui-line__markerLabel',\n  root: 'fui-line__root',\n  xAxis: 'fui-line__xAxis',\n  yAxis: 'fui-line__yAxis',\n  legendContainer: 'fui-line__legendContainer',\n  hover: 'fui-line__hover',\n  descriptionMessage: 'fui-line__descriptionMessage',\n  axisTitle: 'fui-line__axisTitle',\n  chartTitle: 'fui-line__chartTitle',\n  opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n  shapeStyles: 'fui-line__shapeStyles',\n  chartWrapper: 'fui-line__chartWrapper',\n  svgTooltip: '',\n  chart: '',\n  axisAnnotation: '',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  tooltip: getTooltipStyle() as GriffelStyle,\n  markerLabel: getMarkerLabelStyle() as GriffelStyle,\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useScatterChartStyles = (props: ScatterChartProps): ScatterChartStyles => {\n  const baseStyles = useStyles();\n  return {\n    tooltip: mergeClasses(scatterChartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    markerLabel: mergeClasses(scatterChartClassNames.markerLabel, baseStyles.markerLabel, props.styles?.markerLabel),\n  };\n};\n"],"names":["makeStyles","mergeClasses","getMarkerLabelStyle","getTooltipStyle","scatterChartClassNames","tooltip","markerLabel","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","useScatterChartStyles","props","baseStyles","styles"],"mappings":"AAAA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AAE7E;;CAEC,GACD,OAAO,MAAMC,yBAA6D;IACxEC,SAAS;IACTC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,YAAY;IACZC,OAAO;IACPC,gBAAgB;AAClB,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYrB,WAAW;IAC3BK,SAASF;IACTG,aAAaJ;AACf;AAEA;;CAEC,GACD,OAAO,MAAMoB,wBAAwB,CAACC;QAIoDA;IAHxF,MAAMC,aAAaH;IACnB,OAAO;QACLhB,SAASJ,aAAaG,uBAAuBC,OAAO,EAAEmB,WAAWnB,OAAO,CAAC,uBAAuB;QAChGC,aAAaL,aAAaG,uBAAuBE,WAAW,EAAEkB,WAAWlB,WAAW,GAAEiB,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAcjB,WAAW;IACjH;AACF,EAAE"}

package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js

@@ -1,6 +1,7 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/utilities';
+import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
 export const verticalbarchartClassNames = {
   opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',
   tooltip: 'fui-vbc__tooltip',
@@ -36,13 +37,14 @@ const useStyles = /*#__PURE__*/__styles({
     qhf8xq: "f1euv43f",
     fsow6f: "f17mccla",
     Bhzewxz: "fr6rvge",
-    Bkfmm31: "f5q6cfr",
+    De3pzq: "fxugw4r",
     Beyfa6y: 0,
     Bbmb7ep: 0,
     Btl43ni: 0,
     B7oj6ja: 0,
     Dimara: "fq9zq91",
-    Bkecrkj: "f1aehjj5"
+    Bkecrkj: "f1aehjj5",
+    sj55zd: "f19n0e5"
   },
   barLabel: {
     Bahqtrf: "fk6fouc",
@@ -57,9 +59,9 @@ const useStyles = /*#__PURE__*/__styles({
     Bpvj6i6: "fdvt8h6"
   }
 }, {
-  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);}", ".f5q6cfr{fill: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;}", ".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;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fhv2zbx{forced-color-adjust:auto;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}"],
+  }], ".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;}", ".f1yuyku4{stroke:var(--colorNeutralBackground1);}"],
   m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fdvt8h6{stroke:Canvas;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }]]

package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","Bvjb7m6","ojy3ng","Bpvj6i6","d","p","m","useVerticalBarChartStyles","props","baseStyles"],"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\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    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        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    },\n    barLabel: {\n        ...typographyStyles.caption1Strong,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    },\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,oBAAoB,EAAE,+BAA+B;EACrDC,OAAO,EAAE,kBAAkB;EAC3BC,QAAQ,EAAE,mBAAmB;EAC7BC,UAAU,EAAE,oBAAoB;EAChCC,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,gBAAGxB,QAAA;EAAAO,oBAAA;EAAAC,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,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAnC,QAAA;IAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAU,OAAA;IAAAO,OAAA;EAAA;EAAAnC,UAAA;IAAAoC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAyBjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAG7B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,oBAAoB,EAAEN,YAAY,CAACK,0BAA0B,CAACC,oBAAoB,EAAE8C,UAAU,CAAC9C,oBAAoB,CAAC,sCAAuC,CAAC;IAC5JC,OAAO,EAAEP,YAAY,CAACK,0BAA0B,CAACE,OAAO,EAAE6C,UAAU,CAAC7C,OAAO,CAAC,yBAA0B,CAAC;IACxGC,QAAQ,EAAER,YAAY,CAACK,0BAA0B,CAACG,QAAQ,EAAE4C,UAAU,CAAC5C,QAAQ,CAAC,0BAA2B,CAAC;IAC5GC,UAAU,EAAET,YAAY,CAACK,0BAA0B,CAACI,UAAU,EAAE2C,UAAU,CAAC3C,UAAU,CAAC,4BAA6B;EACvH,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","HighContrastSelector","getBarLabelStyle","getTooltipStyle","verticalbarchartClassNames","opacityChangeOnHover","tooltip","barLabel","lineBorder","root","xAxis","yAxis","legendContainer","hover","descriptionMessage","axisTitle","chartTitle","shapeStyles","chartWrapper","svgTooltip","chart","axisAnnotation","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","sj55zd","Bkfmm31","Bvjb7m6","ojy3ng","Bpvj6i6","d","p","m","useVerticalBarChartStyles","props","baseStyles"],"sources":["useVerticalBarChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/utilities';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\nexport const verticalbarchartClassNames = {\n    opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',\n    tooltip: 'fui-vbc__tooltip',\n    barLabel: 'fui-vbc__barLabel',\n    lineBorder: 'fui-vbc_lineBorder',\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    tooltip: getTooltipStyle(),\n    barLabel: getBarLabelStyle(),\n    lineBorder: {\n        stroke: tokens.colorNeutralBackground1,\n        [HighContrastSelector]: {\n            stroke: 'Canvas'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useVerticalBarChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        opacityChangeOnHover: mergeClasses(verticalbarchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        tooltip: mergeClasses(verticalbarchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),\n        barLabel: mergeClasses(verticalbarchartClassNames.barLabel, baseStyles.barLabel /*props.styles?.barLabel*/ ),\n        lineBorder: mergeClasses(verticalbarchartClassNames.lineBorder, baseStyles.lineBorder /*props.styles?.lineBorder*/ )\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,oBAAoB,QAAQ,2BAA2B;AAChE,SAASC,gBAAgB,EAAEC,eAAe,QAAQ,uBAAuB;AACzE,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,oBAAoB,EAAE,+BAA+B;EACrDC,OAAO,EAAE,kBAAkB;EAC3BC,QAAQ,EAAE,mBAAmB;EAC7BC,UAAU,EAAE,oBAAoB;EAChCC,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,gBAAGxB,QAAA;EAAAO,oBAAA;EAAAC,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;EAAArC,UAAA;IAAAsC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;AAAA,CAUjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,UAAU,GAAG/B,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHjB,oBAAoB,EAAEN,YAAY,CAACK,0BAA0B,CAACC,oBAAoB,EAAEgD,UAAU,CAAChD,oBAAoB,CAAC,sCAAuC,CAAC;IAC5JC,OAAO,EAAEP,YAAY,CAACK,0BAA0B,CAACE,OAAO,EAAE+C,UAAU,CAAC/C,OAAO,CAAC,yBAA0B,CAAC;IACxGC,QAAQ,EAAER,YAAY,CAACK,0BAA0B,CAACG,QAAQ,EAAE8C,UAAU,CAAC9C,QAAQ,CAAC,0BAA2B,CAAC;IAC5GC,UAAU,EAAET,YAAY,CAACK,0BAA0B,CAACI,UAAU,EAAE6C,UAAU,CAAC7C,UAAU,CAAC,4BAA6B;EACvH,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/VerticalBarChart/useVerticalBarChartStyles.styles.raw.js

@@ -1,6 +1,7 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 import { HighContrastSelector } from '../../utilities/utilities';
+import { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';
 export const verticalbarchartClassNames = {
     opacityChangeOnHover: 'fui-vbc__opacityChangeOnHover',
     tooltip: 'fui-vbc__tooltip',
@@ -22,23 +23,8 @@ export const verticalbarchartClassNames = {
 };
 const useStyles = makeStyles({
     opacityChangeOnHover: {},
-    tooltip: {
-        ...typographyStyles.body1,
-        display: 'flex',
-        flexDirection: 'column',
-        ...shorthands.padding(tokens.spacingHorizontalS),
-        position: 'absolute',
-        textAlign: 'center',
-        top: tokens.spacingVerticalNone,
-        fill: tokens.colorNeutralBackground1,
-        borderRadius: tokens.borderRadiusSmall,
-        pointerEvents: 'none'
-    },
-    barLabel: {
-        ...typographyStyles.caption1Strong,
-        fill: tokens.colorNeutralForeground1,
-        forcedColorAdjust: 'auto'
-    },
+    tooltip: getTooltipStyle(),
+    barLabel: getBarLabelStyle(),
     lineBorder: {
         stroke: tokens.colorNeutralBackground1,
         [HighContrastSelector]: {