@fluentui/react-charts 9.2.3 → 9.3.0

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

@@ -1,6 +1,7 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */
@@ -27,6 +28,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 +41,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 +60,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":["'use client';\nimport { 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,YAAY;;AACZ,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,6 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { HighContrastSelector } from '../../utilities/index';
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';
 /**
  * @internal
  */ export const scatterChartClassNames = {
@@ -24,25 +24,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":["'use client';\n\nimport { 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;AAEA,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/Sparkline/Sparkline.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSparklineStyles } from './useSparklineStyles.styles';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';

package/lib/components/Sparkline/Sparkline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Sparkline/Sparkline.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points as LineChartDataPoint[]);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"mappings":"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"}

package/lib/components/Sparkline/useSparklineStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**

package/lib/components/Sparkline/useSparklineStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","sparklineClassNames","inlineBlock","valueText","useStyles","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkfmm31","Bvjb7m6","d","useSparklineStyles","props","_props_styles","_props_styles1","baseStyles","styles"],"sources":["useSparklineStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const sparklineClassNames = {\n    inlineBlock: 'fui-sprk__inlineBlock',\n    valueText: 'fui-sprk__valueText'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    inlineBlock: {\n        display: 'inline'\n    },\n    valueText: {\n        ...typographyStyles.caption1,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useSparklineStyles = (props)=>{\n    var _props_styles, _props_styles1;\n    const baseStyles = useStyles();\n    return {\n        inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.inlineBlock),\n        valueText: mergeClasses(sparklineClassNames.valueText, baseStyles.valueText, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.valueText)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,WAAW,EAAE,uBAAuB;EACpCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,WAAA;IAAAG,MAAA;EAAA;EAAAF,SAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,IAAIC,aAAa,EAAEC,cAAc;EACjC,MAAMC,UAAU,GAAGb,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHF,WAAW,EAAEJ,YAAY,CAACG,mBAAmB,CAACC,WAAW,EAAEe,UAAU,CAACf,WAAW,EAAE,CAACa,aAAa,GAAGD,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIH,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACb,WAAW,CAAC;IAC5LC,SAAS,EAAEL,YAAY,CAACG,mBAAmB,CAACE,SAAS,EAAEc,UAAU,CAACd,SAAS,EAAE,CAACa,cAAc,GAAGF,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIF,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACb,SAAS;EAC1L,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","sparklineClassNames","inlineBlock","valueText","useStyles","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkfmm31","Bvjb7m6","d","useSparklineStyles","props","_props_styles","_props_styles1","baseStyles","styles"],"sources":["useSparklineStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const sparklineClassNames = {\n    inlineBlock: 'fui-sprk__inlineBlock',\n    valueText: 'fui-sprk__valueText'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    inlineBlock: {\n        display: 'inline'\n    },\n    valueText: {\n        ...typographyStyles.caption1,\n        fill: tokens.colorNeutralForeground1,\n        forcedColorAdjust: 'auto'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useSparklineStyles = (props)=>{\n    var _props_styles, _props_styles1;\n    const baseStyles = useStyles();\n    return {\n        inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.inlineBlock),\n        valueText: mergeClasses(sparklineClassNames.valueText, baseStyles.valueText, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.valueText)\n    };\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,WAAW,EAAE,uBAAuB;EACpCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAK,WAAA;IAAAG,MAAA;EAAA;EAAAF,SAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,IAAIC,aAAa,EAAEC,cAAc;EACjC,MAAMC,UAAU,GAAGb,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHF,WAAW,EAAEJ,YAAY,CAACG,mBAAmB,CAACC,WAAW,EAAEe,UAAU,CAACf,WAAW,EAAE,CAACa,aAAa,GAAGD,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIH,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACb,WAAW,CAAC;IAC5LC,SAAS,EAAEL,YAAY,CAACG,mBAAmB,CAACE,SAAS,EAAEc,UAAU,CAACd,SAAS,EAAE,CAACa,cAAc,GAAGF,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIF,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACb,SAAS;EAC1L,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/Sparkline/useSparklineStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 /**

package/lib/components/Sparkline/useSparklineStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Sparkline/useSparklineStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { SparklineProps, SparklineStyles } from './Sparkline.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const sparklineClassNames: SlotClassNames<SparklineStyles> = {\n  inlineBlock: 'fui-sprk__inlineBlock',\n  valueText: 'fui-sprk__valueText',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  inlineBlock: {\n    display: 'inline',\n  },\n  valueText: {\n    ...typographyStyles.caption1,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useSparklineStyles = (props: SparklineProps): SparklineStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, props.styles?.inlineBlock),\n    valueText: mergeClasses(sparklineClassNames.valueText, baseStyles.valueText, props.styles?.valueText),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","sparklineClassNames","inlineBlock","valueText","useStyles","display","caption1","fill","colorNeutralForeground1","forcedColorAdjust","useSparklineStyles","props","baseStyles","styles"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,aAAa;IACbC,WAAW;AACb,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,aAAa;QACXG,SAAS;IACX;IACAF,WAAW;QACT,GAAGH,iBAAiBM,QAAQ;QAC5BC,MAAMR,OAAOS,uBAAuB;QACpCC,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;QAIoDA,eACNA;IAJ/E,MAAMC,aAAaR;IAEnB,OAAO;QACLF,aAAaJ,aAAaG,oBAAoBC,WAAW,EAAEU,WAAWV,WAAW,GAAES,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAcT,WAAW;QAC5GC,WAAWL,aAAaG,oBAAoBE,SAAS,EAAES,WAAWT,SAAS,GAAEQ,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcR,SAAS;IACtG;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Sparkline/useSparklineStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { SparklineProps, SparklineStyles } from './Sparkline.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\n/**\n * @internal\n */\nexport const sparklineClassNames: SlotClassNames<SparklineStyles> = {\n  inlineBlock: 'fui-sprk__inlineBlock',\n  valueText: 'fui-sprk__valueText',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  inlineBlock: {\n    display: 'inline',\n  },\n  valueText: {\n    ...typographyStyles.caption1,\n    fill: tokens.colorNeutralForeground1,\n    forcedColorAdjust: 'auto',\n  },\n});\n\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useSparklineStyles = (props: SparklineProps): SparklineStyles => {\n  const baseStyles = useStyles();\n\n  return {\n    inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, props.styles?.inlineBlock),\n    valueText: mergeClasses(sparklineClassNames.valueText, baseStyles.valueText, props.styles?.valueText),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","sparklineClassNames","inlineBlock","valueText","useStyles","display","caption1","fill","colorNeutralForeground1","forcedColorAdjust","useSparklineStyles","props","baseStyles","styles"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE;;CAEC,GACD,OAAO,MAAMC,sBAAuD;IAClEC,aAAa;IACbC,WAAW;AACb,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BK,aAAa;QACXG,SAAS;IACX;IACAF,WAAW;QACT,GAAGH,iBAAiBM,QAAQ;QAC5BC,MAAMR,OAAOS,uBAAuB;QACpCC,mBAAmB;IACrB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAACC;QAIoDA,eACNA;IAJ/E,MAAMC,aAAaR;IAEnB,OAAO;QACLF,aAAaJ,aAAaG,oBAAoBC,WAAW,EAAEU,WAAWV,WAAW,GAAES,gBAAAA,MAAME,MAAM,cAAZF,oCAAAA,cAAcT,WAAW;QAC5GC,WAAWL,aAAaG,oBAAoBE,SAAS,EAAES,WAAWT,SAAS,GAAEQ,iBAAAA,MAAME,MAAM,cAAZF,qCAAAA,eAAcR,SAAS;IACtG;AACF,EAAE"}

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useVerticalBarChartStyles } from './useVerticalBarChartStyles.styles';
 import { max as d3Max, min as d3Min } from 'd3-array';
@@ -7,7 +8,7 @@ import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3S
 import { useId } from '@fluentui/react-utilities';
 import { tokens } from '@fluentui/react-theme';
 import { CartesianChart, Legends, ChartPopover } from '../../index';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRangeOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, formatScientificLimitWidth, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, useRtl, areArraysEqual, calculateLongestLabelWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRangeOfVerticalNumeric, domainRangeOfDateForAreaLineScatterVerticalBarCharts, domainRangeOfXStringAxis, createStringYAxis, calcTotalWidth, calcBandwidth, calcRequiredWidth, sortAxisCategories } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
 var CircleVisbility = /*#__PURE__*/ function(CircleVisbility) {
     CircleVisbility["show"] = "visibility";
@@ -19,10 +20,13 @@ const MIN_DOMAIN_MARGIN = 8;
 /**
  * VerticalBarchart component
  * {@docCategory VerticalBarChart}
- */ export const VerticalBarChart = /*#__PURE__*/ React.forwardRef((props = {
-    xAxisCategoryOrder: 'default'
-}, forwardedRef)=>{
+ */ export const VerticalBarChart = /*#__PURE__*/ React.forwardRef((_props, forwardedRef)=>{
     var _props_legendProps;
+    const props = {
+        xAxisCategoryOrder: 'default',
+        maxBarWidth: 24,
+        ..._props
+    };
     let _points = [];
     let _barWidth = 0;
     let _colors;
@@ -98,7 +102,7 @@ const MIN_DOMAIN_MARGIN = 8;
         if (xAxisType === XAxisTypes.NumericAxis) {
             domainNRangeValue = domainRangeOfVerticalNumeric(points, margins, width, isRTL, barWidth);
         } else if (xAxisType === XAxisTypes.DateAxis) {
-            domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            domainNRangeValue = domainRangeOfDateForAreaLineScatterVerticalBarCharts(points, margins, width, isRTL, tickValues, chartType, barWidth);
         } else {
             domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
         }
@@ -242,9 +246,8 @@ const MIN_DOMAIN_MARGIN = 8;
         // eslint-disable-next-line @typescript-eslint/no-shadow
         const { YValueHover, hoverXValue } = _getCalloutContentForLineAndBar(point);
         const content = YValueHover.map((item, index)=>{
-            var _props_culture;
             return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ChartPopover, {
-                culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+                culture: props.culture,
                 clickPosition: clickPosition,
                 isPopoverOpen: isPopoverOpen,
                 legend: item.legend,
@@ -259,12 +262,11 @@ const MIN_DOMAIN_MARGIN = 8;
         return /*#__PURE__*/ React.createElement(React.Fragment, null, content);
     }
     function _renderContentForOnlyBars(_props) {
-        var _props_culture;
         return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ChartPopover, {
             XValue: _props.xAxisCalloutData || _props.x,
             xCalloutValue: xCalloutValue,
             yCalloutValue: yCalloutValue,
-            culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+            culture: props.culture,
             clickPosition: clickPosition,
             isPopoverOpen: isPopoverOpen,
             legend: _props.legend,
@@ -814,7 +816,11 @@ const MIN_DOMAIN_MARGIN = 8;
             y: isNegativeBar ? yPoint + 12 : yPoint - 6,
             textAnchor: "middle",
             className: classes.barLabel,
-            "aria-hidden": true
+            "aria-hidden": true,
+            style: {
+                direction: 'ltr',
+                unicodeBidi: 'isolate'
+            }
         }, typeof props.yAxisTickFormat === 'function' ? props.yAxisTickFormat(barValue) : formatScientificLimitWidth(barValue));
     }
     function _getDomainMargins(containerWidth) {
@@ -933,7 +939,6 @@ const MIN_DOMAIN_MARGIN = 8;
     _yMax = Math.max(d3Max(_points, (point)=>point.y), props.yMaxValue || 0);
     _yMin = Math.min(d3Min(_points, (point)=>point.y), props.yMinValue || 0);
     const legendBars = _getLegendData(_points);
-    var _props_culture;
     const calloutProps = {
         ..._isHavingLine && {
             YValueHover: hoveredYValues,
@@ -948,7 +953,7 @@ const MIN_DOMAIN_MARGIN = 8;
         clickPosition: clickPosition,
         isPopoverOpen: isPopoverOpen,
         isCalloutForStack: _isHavingLine && (_noLegendHighlighted() || _getHighlightedLegend().length > 1),
-        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        culture: props.culture,
         isCartesian: true,
         customCallout: {
             customizedCallout: _getCustomizedCallout() != null ? _getCustomizedCallout() : undefined,