@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/charts/xy-chart/XYChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/xy-chart/XYChartRoot.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartLegend } from './components/legend/XYChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { XYChartAxesConfigContext } from './context/axes/XYChartAxesConfig.context.js';\nimport { XYChartAnnotationsConfig } from './context/XYChartAnnotationsConfig.context.js';\nimport { XYChartColorPaletteContext } from './context/XYChartColorPalette.context.js';\nimport { XYChartLegendHiddenContext } from './context/XYChartLegendHidden.context.js';\nimport { XYChartThresholdsContext } from './context/XYChartThresholds.context.js';\nimport { XYChartToolbarContext } from './context/XYChartToolbar.context.js';\nimport { XYChartTruncationModeContext } from './context/XYChartTruncationMode.context.js';\nimport { useXYChartConfig } from './hooks/useXYChartConfig.js';\nimport { XYChartAnnotationsDataProvider } from './providers/XYChartAnnotationsDataProvider.js';\nimport { XYChartAnnotationsShownIndicatorsProvider } from './providers/XYChartAnnotationsShownIndicatorsProvider.js';\nimport { XYChartColorScalesProvider } from './providers/XYChartColorScalesProvider.js';\nimport { XYChartChartDataProvider } from './providers/XYChartDataProvider.js';\nimport { XYChartDownloadProvider } from './providers/XYChartDownloadProvider.js';\nimport { XYChartIdProvider } from './providers/XYChartIdProvider.js';\nimport { XYChartStoreDomainSync } from './providers/XYChartStoreDomainSync.js';\nimport { XYChartStoreProvider } from './providers/XYChartStoreProvider.js';\nimport { XYChartVisibleAxesProvider } from './providers/XYChartVisibleAxesProvider.js';\nimport { Annotations } from './slots/Annotations/Annotations.js';\nimport { Marker } from './slots/Annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/Annotations/Tooltip.js';\nimport { Track } from './slots/Annotations/Track.js';\nimport { AreaSeries } from './slots/AreaSeries.js';\nimport { BarSeries } from './slots/BarSeries.js';\n// DEPRECATION: [APPDEV-17650] BREAKING-CHANGE: Remove CustomTooltip slot.\nimport { CustomTooltip } from './slots/CustomTooltip.js';\nimport { DotSeries } from './slots/DotSeries.js';\nimport { Legend } from './slots/Legend.js';\nimport { LineSeries } from './slots/LineSeries.js';\nimport { RectSeries } from './slots/RectSeries.js';\nimport { Select } from './slots/Select.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { XYChartTooltipSlot as Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport type { XYChartProps } from './types/xy-chart-props.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { isEmptyData } from './utils/is-empty-data.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildInternalConfig } from './utils/xy-chart-configuration.js';\nimport { XYChart as XYChartInternal } from './XYChart.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'XYChart';\n\n/**\n * @internal\n */\nexport const XYChartRoot = /* @__PURE__ */ forwardRef<\n  XYChartRef,\n  PropsWithChildren<XYChartProps>\n>((props, ref) => {\n  const {\n    data,\n    children,\n    height,\n    width,\n    loading = DEFAULT_LOADING_STATE,\n    style,\n    className,\n    __downloadDataCallback: downloadDataCallback,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const slots = iterateSlots(props.children);\n  const config = useXYChartConfig(props, slots);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n    ref,\n    containerRef,\n  ]);\n\n  const {\n    hidden: legendHidden,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n    position: legendPosition,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n\n  const internalConfig = buildInternalConfig(config, slots);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <XYChartIdProvider>\n      <XYChartThresholdsContext.Provider value={internalConfig.thresholds}>\n        <XYChartAxesConfigContext.Provider value={internalConfig.axes}>\n          <XYChartColorPaletteContext.Provider value={config.colorPalette}>\n            <XYChartDownloadProvider\n              downloadDataCallback={downloadDataCallback}\n            >\n              <XYChartToolbarContext.Provider value={config.toolbar}>\n                <XYChartTruncationModeContext.Provider\n                  value={{ truncationMode: config.truncationMode }}\n                >\n                  <XYChartLegendHiddenContext.Provider\n                    value={Boolean(legendHidden)}\n                  >\n                    <XYChartAnnotationsConfig.Provider\n                      value={config.annotations}\n                    >\n                      <ColorRuleContext.Provider value={config.colorRules}>\n                        <XYChartStoreProvider>\n                          <XYChartChartDataProvider\n                            data={data}\n                            seriesVariantsProps={internalConfig.series}\n                          >\n                            <XYChartStoreDomainSync>\n                              <XYChartAnnotationsDataProvider>\n                                <XYChartVisibleAxesProvider>\n                                  <XYChartColorScalesProvider>\n                                    <XYChartAnnotationsShownIndicatorsProvider>\n                                      <OverlayProvider>\n                                        <TooltipProvider>\n                                          <ChartLayout\n                                            ref={chartLayoutRef}\n                                            chartHeight={chartHeight}\n                                            chartWidth={width}\n                                            className={className}\n                                            emptyState={emptyState}\n                                            errorState={errorState}\n                                            isEmpty={isEmptyData(\n                                              children,\n                                              data,\n                                            )}\n                                            showLoader={loading}\n                                            style={style}\n                                            data-dtrum-mask={dataDtrumMask}\n                                            data-dtrum-allow={dataDtrumAllow}\n                                            {...behaviorTrackingProps}\n                                            data-dt-component={\n                                              COMPONENT_NAME_BEHAVIOURAL_TRACKING\n                                            }\n                                          >\n                                            <ChartLayout.Graph>\n                                              <XYChartInternal\n                                                config={config}\n                                                ref={rootRef}\n                                              />\n                                            </ChartLayout.Graph>\n                                            {!legendHidden && (\n                                              <ChartLayout.Legend\n                                                position={legendPosition}\n                                                initialRatio={legendRatio}\n                                                onResize={onRatioChange}\n                                              >\n                                                <XYChartLegend />\n                                              </ChartLayout.Legend>\n                                            )}\n                                          </ChartLayout>\n                                        </TooltipProvider>\n                                      </OverlayProvider>\n                                    </XYChartAnnotationsShownIndicatorsProvider>\n                                  </XYChartColorScalesProvider>\n                                </XYChartVisibleAxesProvider>\n                              </XYChartAnnotationsDataProvider>\n                            </XYChartStoreDomainSync>\n                          </XYChartChartDataProvider>\n                        </XYChartStoreProvider>\n                      </ColorRuleContext.Provider>\n                    </XYChartAnnotationsConfig.Provider>\n                  </XYChartLegendHiddenContext.Provider>\n                </XYChartTruncationModeContext.Provider>\n              </XYChartToolbarContext.Provider>\n            </XYChartDownloadProvider>\n          </XYChartColorPaletteContext.Provider>\n        </XYChartAxesConfigContext.Provider>\n      </XYChartThresholdsContext.Provider>\n    </XYChartIdProvider>\n  );\n});\n\n/**\n * The `XYChart` encompasses various types of charts that utilize both x-axis and\n * y-axis for data representation, designed to visually display and analyze data\n * that involve two numerical variables.\n * @public\n */\nexport const XYChart = Object.assign(XYChartRoot, {\n  Annotations,\n  RectSeries,\n  DotSeries,\n  LineSeries,\n  BarSeries,\n  AreaSeries,\n  XAxis,\n  YAxis,\n  Legend,\n  Toolbar,\n  /** @deprecated Use `XYChart.Tooltip` instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  CustomTooltip,\n  Tooltip,\n  Intent,\n  Select,\n  ThresholdIndicator,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n\n/**\n * XYAnnotations Slots\n * @public\n */\nexport const XYChartAnnotations = {\n  Marker,\n  Track,\n  Tooltip: AnnotationsTooltip,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartLegend } from './components/legend/XYChartLegend.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_LOADING_STATE,\n} from './constants/defaults.js';\nimport { XYChartAxesConfigContext } from './context/axes/XYChartAxesConfig.context.js';\nimport { XYChartAnnotationsConfig } from './context/XYChartAnnotationsConfig.context.js';\nimport { XYChartColorPaletteContext } from './context/XYChartColorPalette.context.js';\nimport { XYChartLegendHiddenContext } from './context/XYChartLegendHidden.context.js';\nimport { XYChartThresholdsContext } from './context/XYChartThresholds.context.js';\nimport { XYChartToolbarContext } from './context/XYChartToolbar.context.js';\nimport { XYChartTruncationModeContext } from './context/XYChartTruncationMode.context.js';\nimport { useXYChartConfig } from './hooks/useXYChartConfig.js';\nimport { XYChartAnnotationsDataProvider } from './providers/XYChartAnnotationsDataProvider.js';\nimport { XYChartAnnotationsShownIndicatorsProvider } from './providers/XYChartAnnotationsShownIndicatorsProvider.js';\nimport { XYChartColorScalesProvider } from './providers/XYChartColorScalesProvider.js';\nimport { XYChartChartDataProvider } from './providers/XYChartDataProvider.js';\nimport { XYChartDownloadProvider } from './providers/XYChartDownloadProvider.js';\nimport { XYChartIdProvider } from './providers/XYChartIdProvider.js';\nimport { XYChartStoreDomainSync } from './providers/XYChartStoreDomainSync.js';\nimport { XYChartStoreProvider } from './providers/XYChartStoreProvider.js';\nimport { XYChartVisibleAxesProvider } from './providers/XYChartVisibleAxesProvider.js';\nimport { Annotations } from './slots/Annotations/Annotations.js';\nimport { Marker } from './slots/Annotations/Marker.js';\nimport { AnnotationsTooltip } from './slots/Annotations/Tooltip.js';\nimport { Track } from './slots/Annotations/Track.js';\nimport { AreaSeries } from './slots/AreaSeries.js';\nimport { BarSeries } from './slots/BarSeries.js';\n// DEPRECATION: [APPDEV-17650] BREAKING-CHANGE: Remove CustomTooltip slot.\nimport { CustomTooltip } from './slots/CustomTooltip.js';\nimport { DotSeries } from './slots/DotSeries.js';\nimport { Legend } from './slots/Legend.js';\nimport { LineSeries } from './slots/LineSeries.js';\nimport { RectSeries } from './slots/RectSeries.js';\nimport { Select } from './slots/Select.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { XYChartTooltipSlot as Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport type { XYChartProps } from './types/xy-chart-props.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { isEmptyData } from './utils/is-empty-data.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildInternalConfig } from './utils/xy-chart-configuration.js';\nimport { XYChart as XYChartInternal } from './XYChart.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { OverlayProvider } from '../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'XYChart';\n\n/**\n * @internal\n */\nexport const XYChartRoot = /* @__PURE__ */ forwardRef<\n  XYChartRef,\n  PropsWithChildren<XYChartProps>\n>((props, ref) => {\n  const {\n    data,\n    children,\n    height,\n    width,\n    loading = DEFAULT_LOADING_STATE,\n    style,\n    className,\n    __downloadDataCallback: downloadDataCallback,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const slots = iterateSlots(props.children);\n  const config = useXYChartConfig(props, slots);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n    ref,\n    containerRef,\n  ]);\n\n  const {\n    hidden: legendHidden,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n    position: legendPosition,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartHeight = coerceSizeValue(height ?? DEFAULT_CHART_HEIGHT);\n\n  const internalConfig = buildInternalConfig(config, slots);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <XYChartIdProvider>\n      <XYChartThresholdsContext.Provider value={internalConfig.thresholds}>\n        <XYChartAxesConfigContext.Provider value={internalConfig.axes}>\n          <XYChartColorPaletteContext.Provider value={config.colorPalette}>\n            <XYChartDownloadProvider\n              downloadDataCallback={downloadDataCallback}\n            >\n              <XYChartToolbarContext.Provider value={config.toolbar}>\n                <XYChartTruncationModeContext.Provider\n                  value={{ truncationMode: config.truncationMode }}\n                >\n                  <XYChartLegendHiddenContext.Provider\n                    value={Boolean(legendHidden)}\n                  >\n                    <XYChartAnnotationsConfig.Provider\n                      value={config.annotations}\n                    >\n                      <ColorRuleContext.Provider value={config.colorRules}>\n                        <XYChartStoreProvider>\n                          <XYChartChartDataProvider\n                            data={data}\n                            seriesVariantsProps={internalConfig.series}\n                          >\n                            <XYChartStoreDomainSync>\n                              <XYChartAnnotationsDataProvider>\n                                <XYChartVisibleAxesProvider>\n                                  <XYChartColorScalesProvider>\n                                    <XYChartAnnotationsShownIndicatorsProvider>\n                                      <OverlayProvider>\n                                        <TooltipProvider>\n                                          <ChartLayout\n                                            ref={chartLayoutRef}\n                                            chartHeight={chartHeight}\n                                            chartWidth={width}\n                                            className={className}\n                                            emptyState={emptyState}\n                                            errorState={errorState}\n                                            isEmpty={isEmptyData(\n                                              children,\n                                              data,\n                                            )}\n                                            showLoader={loading}\n                                            style={style}\n                                            data-dtrum-mask={dataDtrumMask}\n                                            data-dtrum-allow={dataDtrumAllow}\n                                            {...behaviorTrackingProps}\n                                            data-dt-component={componentName}\n                                          >\n                                            <ChartLayout.Graph>\n                                              <XYChartInternal\n                                                config={config}\n                                                ref={rootRef}\n                                              />\n                                            </ChartLayout.Graph>\n                                            {!legendHidden && (\n                                              <ChartLayout.Legend\n                                                position={legendPosition}\n                                                initialRatio={legendRatio}\n                                                onResize={onRatioChange}\n                                              >\n                                                <XYChartLegend />\n                                              </ChartLayout.Legend>\n                                            )}\n                                          </ChartLayout>\n                                        </TooltipProvider>\n                                      </OverlayProvider>\n                                    </XYChartAnnotationsShownIndicatorsProvider>\n                                  </XYChartColorScalesProvider>\n                                </XYChartVisibleAxesProvider>\n                              </XYChartAnnotationsDataProvider>\n                            </XYChartStoreDomainSync>\n                          </XYChartChartDataProvider>\n                        </XYChartStoreProvider>\n                      </ColorRuleContext.Provider>\n                    </XYChartAnnotationsConfig.Provider>\n                  </XYChartLegendHiddenContext.Provider>\n                </XYChartTruncationModeContext.Provider>\n              </XYChartToolbarContext.Provider>\n            </XYChartDownloadProvider>\n          </XYChartColorPaletteContext.Provider>\n        </XYChartAxesConfigContext.Provider>\n      </XYChartThresholdsContext.Provider>\n    </XYChartIdProvider>\n  );\n});\n\n/**\n * The `XYChart` encompasses various types of charts that utilize both x-axis and\n * y-axis for data representation, designed to visually display and analyze data\n * that involve two numerical variables.\n * @public\n */\nexport const XYChart = Object.assign(XYChartRoot, {\n  Annotations,\n  RectSeries,\n  DotSeries,\n  LineSeries,\n  BarSeries,\n  AreaSeries,\n  XAxis,\n  YAxis,\n  Legend,\n  Toolbar,\n  /** @deprecated Use `XYChart.Tooltip` instead. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  CustomTooltip,\n  Tooltip,\n  Intent,\n  Select,\n  ThresholdIndicator,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n});\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n\n/**\n * XYAnnotations Slots\n * @public\n */\nexport const XYChartAnnotations = {\n  Marker,\n  Track,\n  Tooltip: AnnotationsTooltip,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-7-0 {
+._bidc430-3-8-0 {
   position: relative;
 }

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-7-0";
+var axisContainerStyle = "_bidc430-3-8-0";
 export {
   axisContainerStyle
 };

package/esm/charts/xy-chart/components/axes/AxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-7-0';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-7-0 {
-  direction: var(--_z2zz8y0-3-7-0);
+._z2zz8y2-3-8-0 {
+  direction: var(--_z2zz8y0-3-8-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-7-0);
+  width: var(--_z2zz8y1-3-8-0);
 }

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-7-0)";
-var tickStyle = "_z2zz8y2-3-7-0";
-var widthContainer = "var(--_z2zz8y1-3-7-0)";
+var directionValue = "var(--_z2zz8y0-3-8-0)";
+var tickStyle = "_z2zz8y2-3-8-0";
+var widthContainer = "var(--_z2zz8y1-3-8-0)";
 export {
   directionValue,
   tickStyle,

package/esm/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-7-0)';\nexport var tickStyle = '_z2zz8y2-3-7-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-7-0)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-8-0)';\nexport var tickStyle = '_z2zz8y2-3-8-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-8-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/XTickWithTruncation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/XTickWithTruncation.tsx"],
-  "sourcesContent": ["import type { TickRendererProps } from '@visx/axis';\n\nimport { useTickTruncation } from './hooks/useTickTruncation.js';\nimport { useXTickOffset } from './hooks/useXTickOffset.js';\nimport { TickWithTruncationForeignObject } from './TickWithTruncationForeignObject.js';\nimport { X_AXES_TICK_LINE_OFFSET } from '../../../core/components/axes/constants.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\n\ninterface YTickWithTruncationProps {\n  position: 'top' | 'bottom';\n  renderProps: TickRendererProps;\n  maxSpaceForTruncation: number;\n  centerTick: boolean;\n  isTickRotated: boolean;\n  tickNameHasEmoji: boolean;\n}\n\nexport function XTickWithTruncation({\n  position,\n  renderProps,\n  maxSpaceForTruncation,\n  centerTick,\n  isTickRotated,\n  tickNameHasEmoji,\n}: Readonly<YTickWithTruncationProps>) {\n  const { formattedValue, x: xFromProps, y: yFromProps } = renderProps;\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const {\n    displayValue,\n    tickClassName,\n    tickInlineStyle,\n    truncatedHeight,\n    truncatedWidth,\n    truncatedValue,\n  } = useTickTruncation(formattedValue, maxSpaceForTruncation, truncationMode);\n\n  const { xOffset, yOffset, style } = useXTickOffset(\n    truncatedWidth,\n    truncatedHeight,\n    renderProps,\n    centerTick,\n    isTickRotated,\n    position,\n    tickNameHasEmoji,\n  );\n\n  const showTooltip = truncatedValue === formattedValue;\n\n  const x = isTickRotated\n    ? position === 'top'\n      ? X_AXES_TICK_LINE_OFFSET\n      : -(truncatedWidth + X_AXES_TICK_LINE_OFFSET)\n    : xFromProps - xOffset;\n\n  const y = isTickRotated\n    ? xFromProps - (centerTick ? yOffset : xOffset)\n    : yFromProps - yOffset;\n\n  return (\n    <TickWithTruncationForeignObject\n      x={x}\n      y={y}\n      style={style}\n      height={style.height as number}\n      width={style.width as number}\n      tickClassName={tickClassName}\n      tickInlineStyle={tickInlineStyle}\n      formattedValue={formattedValue as string}\n      displayValue={displayValue}\n      showTooltip={showTooltip}\n    />\n  );\n}\n"],
-  "mappings": "AA6DI;AA3DJ,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,gCAAgC;AAWlC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,EAAE,gBAAgB,GAAG,YAAY,GAAG,WAAW,IAAI;AAEzD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,gBAAgB,uBAAuB,cAAc;AAE3E,QAAM,EAAE,SAAS,SAAS,MAAM,IAAI;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB;AAEvC,QAAM,IAAI,gBACN,aAAa,QACX,0BACA,EAAE,iBAAiB,2BACrB,aAAa;AAEjB,QAAM,IAAI,gBACN,cAAc,aAAa,UAAU,WACrC,aAAa;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useTickTruncation } from './hooks/useTickTruncation.js';\nimport { useXTickOffset } from './hooks/useXTickOffset.js';\nimport { TickWithTruncationForeignObject } from './TickWithTruncationForeignObject.js';\nimport { X_AXES_TICK_LINE_OFFSET } from '../../../core/components/axes/constants.js';\nimport type { TickRendererProps } from '../../../core/components/axes/types.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\n\ninterface YTickWithTruncationProps {\n  position: 'top' | 'bottom';\n  renderProps: TickRendererProps;\n  maxSpaceForTruncation: number;\n  centerTick: boolean;\n  isTickRotated: boolean;\n  tickNameHasEmoji: boolean;\n}\n\nexport function XTickWithTruncation({\n  position,\n  renderProps,\n  maxSpaceForTruncation,\n  centerTick,\n  isTickRotated,\n  tickNameHasEmoji,\n}: Readonly<YTickWithTruncationProps>) {\n  const { formattedValue, x: xFromProps, y: yFromProps } = renderProps;\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const {\n    displayValue,\n    tickClassName,\n    tickInlineStyle,\n    truncatedHeight,\n    truncatedWidth,\n    truncatedValue,\n  } = useTickTruncation(formattedValue, maxSpaceForTruncation, truncationMode);\n\n  const { xOffset, yOffset, style } = useXTickOffset(\n    truncatedWidth,\n    truncatedHeight,\n    renderProps,\n    centerTick,\n    isTickRotated,\n    position,\n    tickNameHasEmoji,\n  );\n\n  const showTooltip = truncatedValue === formattedValue;\n\n  const x = isTickRotated\n    ? position === 'top'\n      ? X_AXES_TICK_LINE_OFFSET\n      : -(truncatedWidth + X_AXES_TICK_LINE_OFFSET)\n    : xFromProps - xOffset;\n\n  const y = isTickRotated\n    ? xFromProps - (centerTick ? yOffset : xOffset)\n    : yFromProps - yOffset;\n\n  return (\n    <TickWithTruncationForeignObject\n      x={x}\n      y={y}\n      style={style}\n      height={style.height as number}\n      width={style.width as number}\n      tickClassName={tickClassName}\n      tickInlineStyle={tickInlineStyle}\n      formattedValue={formattedValue as string}\n      displayValue={displayValue}\n      showTooltip={showTooltip}\n    />\n  );\n}\n"],
+  "mappings": "AA4DI;AA5DJ,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AAExC,SAAS,gCAAgC;AAWlC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,EAAE,gBAAgB,GAAG,YAAY,GAAG,WAAW,IAAI;AAEzD,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,gBAAgB,uBAAuB,cAAc;AAE3E,QAAM,EAAE,SAAS,SAAS,MAAM,IAAI;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB;AAEvC,QAAM,IAAI,gBACN,aAAa,QACX,0BACA,EAAE,iBAAiB,2BACrB,aAAa;AAEjB,QAAM,IAAI,gBACN,cAAc,aAAa,UAAU,WACrC,aAAa;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/XYChartLeftAxisArea.js

@@ -7,7 +7,7 @@ import {
   EMOJI_REGEX
 } from "../../../core/components/axes/constants.js";
 import { getYTickMaxSize } from "../../../core/components/axes/utils/calculate-axis-size.js";
-import { getTickLabelPropsForValueAxis } from "../../../core/components/axes/utils/get-tick-label-props.js";
+import { getYAxisTickLabelProps } from "../../../core/components/axes/utils/get-tick-label-props.js";
 import { isTickLabelSpaceAvailable } from "../../../core/components/axes/utils/is-tick-label-visible.js";
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { useAxesTicks } from "../../hooks/useAxesTicks.js";
@@ -15,13 +15,17 @@ import { useVisibleAxesConfig } from "../../hooks/useVisibleAxesConfig.js";
 import { useVisibleAxesScales } from "../../hooks/useVisibleAxesScales.js";
 import { isCategorical } from "../../types/guards.js";
 import { AREAS } from "../../utils/grid-templates.js";
-const tickLabelProps = getTickLabelPropsForValueAxis("left");
 function XYChartLeftAxisArea() {
   const { leftTicks } = useAxesTicks();
   const { left: leftConfig } = useVisibleAxesConfig();
   const { left: leftScale } = useVisibleAxesScales();
   const tickFormat = (_, index) => leftTicks.formattedTicks[index];
   const isCategoricalAxis = leftConfig?.type ? isCategorical(leftConfig.type) : false;
+  const tickLabelProps = getYAxisTickLabelProps(
+    "left",
+    isCategoricalAxis,
+    leftScale
+  );
   const areCategoricalTicksNotFittable = leftScale && isCategoricalAxis && !isTickLabelSpaceAvailable(leftScale.step());
   const hideAxis = leftConfig === void 0 || areCategoricalTicksNotFittable || leftScale === void 0;
   const tickNameHasEmoji = leftTicks.ticks.some(

package/esm/charts/xy-chart/components/axes/XYChartLeftAxisArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/XYChartLeftAxisArea.tsx"],
-  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { YTickWithTruncation } from './YTickWithTruncation.js';\nimport { AxisLeft } from '../../../core/components/axes/AxisLeft.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getYTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getTickLabelPropsForValueAxis } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nconst tickLabelProps = getTickLabelPropsForValueAxis('left');\n\nexport function XYChartLeftAxisArea() {\n  const { leftTicks } = useAxesTicks();\n  const { left: leftConfig } = useVisibleAxesConfig();\n  const { left: leftScale } = useVisibleAxesScales();\n\n  const tickFormat = (_: unknown, index: number) =>\n    leftTicks.formattedTicks[index];\n\n  const isCategoricalAxis = leftConfig?.type\n    ? isCategorical(leftConfig.type)\n    : false;\n\n  const areCategoricalTicksNotFittable =\n    leftScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((leftScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    leftConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    leftScale === undefined;\n\n  const tickNameHasEmoji = leftTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.leftAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <DivAxisWrapper\n          divAxisStyle={axisFontProps}\n          ticks={leftTicks.formattedTicks}\n          label={leftConfig.label}\n        >\n          <AxisLeft\n            scale={leftScale}\n            containerSize={availableHeight}\n            width={availableWidth}\n            tickValues={leftTicks.ticks}\n            tickLabelProps={tickLabelProps}\n            tickFormat={tickFormat}\n            label={leftConfig.label}\n            tickComponent={(renderProps) => (\n              <YTickWithTruncation\n                position=\"left\"\n                renderProps={renderProps}\n                maxSpaceForTruncation={getYTickMaxSize(\n                  availableWidth,\n                  leftConfig.label,\n                )}\n                centerTick={isCategoricalAxis}\n                tickNameHasEmoji={tickNameHasEmoji}\n              />\n            )}\n          />\n        </DivAxisWrapper>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartLeftAxisArea['displayName'] = 'XYChartLeftAxisArea';\n"],
-  "mappings": "AAgEc;AA9Dd,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEtB,MAAM,iBAAiB,8BAA8B,MAAM;AAEpD,SAAS,sBAAsB;AACpC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,EAAE,MAAM,WAAW,IAAI,qBAAqB;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI,qBAAqB;AAEjD,QAAM,aAAa,CAAC,GAAY,UAC9B,UAAU,eAAe,KAAK;AAEhC,QAAM,oBAAoB,YAAY,OAClC,cAAc,WAAW,IAAI,IAC7B;AAEJ,QAAM,iCACJ,aACA,qBACA,CAAC,0BAA2B,UAAgC,KAAK,CAAC;AAEpE,QAAM,WACJ,eAAe,UACf,kCACA,cAAc;AAEhB,QAAM,mBAAmB,UAAU,MAAM;AAAA,IAAK,CAAC,SAC7C,YAAY,KAAK,IAAI;AAAA,EACvB;AAEA,SAAO,WAAW,OAChB,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,UACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO,UAAU;AAAA,MACjB,OAAO,WAAW;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,UACP,YAAY,UAAU;AAAA,UACtB;AAAA,UACA;AAAA,UACA,OAAO,WAAW;AAAA,UAClB,eAAe,CAAC,gBACd;AAAA,YAAC;AAAA;AAAA,cACC,UAAS;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB;AAAA,gBACA,WAAW;AAAA,cACb;AAAA,cACA,YAAY;AAAA,cACZ;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { YTickWithTruncation } from './YTickWithTruncation.js';\nimport { AxisLeft } from '../../../core/components/axes/AxisLeft.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getYTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getYAxisTickLabelProps } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport function XYChartLeftAxisArea() {\n  const { leftTicks } = useAxesTicks();\n  const { left: leftConfig } = useVisibleAxesConfig();\n  const { left: leftScale } = useVisibleAxesScales();\n\n  const tickFormat = (_: unknown, index: number) =>\n    leftTicks.formattedTicks[index];\n\n  const isCategoricalAxis = leftConfig?.type\n    ? isCategorical(leftConfig.type)\n    : false;\n\n  const tickLabelProps = getYAxisTickLabelProps(\n    'left',\n    isCategoricalAxis,\n    leftScale,\n  );\n\n  const areCategoricalTicksNotFittable =\n    leftScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((leftScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    leftConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    leftScale === undefined;\n\n  const tickNameHasEmoji = leftTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.leftAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <DivAxisWrapper\n          divAxisStyle={axisFontProps}\n          ticks={leftTicks.formattedTicks}\n          label={leftConfig.label}\n        >\n          <AxisLeft\n            scale={leftScale}\n            containerSize={availableHeight}\n            width={availableWidth}\n            tickValues={leftTicks.ticks}\n            tickLabelProps={tickLabelProps}\n            tickFormat={tickFormat}\n            label={leftConfig.label}\n            tickComponent={(renderProps) => (\n              <YTickWithTruncation\n                position=\"left\"\n                renderProps={renderProps}\n                maxSpaceForTruncation={getYTickMaxSize(\n                  availableWidth,\n                  leftConfig.label,\n                )}\n                centerTick={isCategoricalAxis}\n                tickNameHasEmoji={tickNameHasEmoji}\n              />\n            )}\n          />\n        </DivAxisWrapper>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartLeftAxisArea['displayName'] = 'XYChartLeftAxisArea';\n"],
+  "mappings": "AAoEc;AAlEd,SAAS,2BAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEf,SAAS,sBAAsB;AACpC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,EAAE,MAAM,WAAW,IAAI,qBAAqB;AAClD,QAAM,EAAE,MAAM,UAAU,IAAI,qBAAqB;AAEjD,QAAM,aAAa,CAAC,GAAY,UAC9B,UAAU,eAAe,KAAK;AAEhC,QAAM,oBAAoB,YAAY,OAClC,cAAc,WAAW,IAAI,IAC7B;AAEJ,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iCACJ,aACA,qBACA,CAAC,0BAA2B,UAAgC,KAAK,CAAC;AAEpE,QAAM,WACJ,eAAe,UACf,kCACA,cAAc;AAEhB,QAAM,mBAAmB,UAAU,MAAM;AAAA,IAAK,CAAC,SAC7C,YAAY,KAAK,IAAI;AAAA,EACvB;AAEA,SAAO,WAAW,OAChB,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,UACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO,UAAU;AAAA,MACjB,OAAO,WAAW;AAAA,MAElB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,UACP,YAAY,UAAU;AAAA,UACtB;AAAA,UACA;AAAA,UACA,OAAO,WAAW;AAAA,UAClB,eAAe,CAAC,gBACd;AAAA,YAAC;AAAA;AAAA,cACC,UAAS;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB;AAAA,gBACA,WAAW;AAAA,cACb;AAAA,cACA,YAAY;AAAA,cACZ;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/XYChartRightAxisArea.js

@@ -7,7 +7,7 @@ import {
   EMOJI_REGEX
 } from "../../../core/components/axes/constants.js";
 import { getYTickMaxSize } from "../../../core/components/axes/utils/calculate-axis-size.js";
-import { getTickLabelPropsForValueAxis } from "../../../core/components/axes/utils/get-tick-label-props.js";
+import { getYAxisTickLabelProps } from "../../../core/components/axes/utils/get-tick-label-props.js";
 import { isTickLabelSpaceAvailable } from "../../../core/components/axes/utils/is-tick-label-visible.js";
 import { ChartGrid } from "../../../core/components/chart-grid/ChartGridRoot.js";
 import { useAxesTicks } from "../../hooks/useAxesTicks.js";
@@ -15,13 +15,17 @@ import { useVisibleAxesConfig } from "../../hooks/useVisibleAxesConfig.js";
 import { useVisibleAxesScales } from "../../hooks/useVisibleAxesScales.js";
 import { isCategorical } from "../../types/guards.js";
 import { AREAS } from "../../utils/grid-templates.js";
-const tickLabelProps = getTickLabelPropsForValueAxis("right");
 function XYChartRightAxisArea() {
   const { rightTicks } = useAxesTicks();
   const { right: rightConfig } = useVisibleAxesConfig();
   const { right: rightScale } = useVisibleAxesScales();
   const tickFormat = (_, index) => rightTicks.formattedTicks[index];
   const isCategoricalAxis = isCategorical(rightConfig?.type || "");
+  const tickLabelProps = getYAxisTickLabelProps(
+    "right",
+    isCategoricalAxis,
+    rightScale
+  );
   const areCategoricalTicksNotFittable = rightScale && isCategoricalAxis && !isTickLabelSpaceAvailable(rightScale.step());
   const hideAxis = rightConfig === void 0 || areCategoricalTicksNotFittable || rightScale === void 0;
   const tickNameHasEmoji = rightTicks.ticks.some(

package/esm/charts/xy-chart/components/axes/XYChartRightAxisArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/XYChartRightAxisArea.tsx"],
-  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { YTickWithTruncation } from './YTickWithTruncation.js';\nimport { AxisRight } from '../../../core/components/axes/AxisRight.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getYTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getTickLabelPropsForValueAxis } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nconst tickLabelProps = getTickLabelPropsForValueAxis('right');\n\nexport function XYChartRightAxisArea() {\n  const { rightTicks } = useAxesTicks();\n  const { right: rightConfig } = useVisibleAxesConfig();\n  const { right: rightScale } = useVisibleAxesScales();\n\n  const tickFormat = (_: unknown, index: number) =>\n    rightTicks.formattedTicks[index];\n\n  const isCategoricalAxis = isCategorical(rightConfig?.type || '');\n\n  const areCategoricalTicksNotFittable =\n    rightScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((rightScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    rightConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    rightScale === undefined;\n\n  const tickNameHasEmoji = rightTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.rightAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <DivAxisWrapper\n          divAxisStyle={axisFontProps}\n          ticks={rightTicks.formattedTicks}\n          label={rightConfig.label}\n        >\n          <AxisRight\n            scale={rightScale}\n            containerSize={availableHeight}\n            width={availableWidth}\n            tickValues={rightTicks.ticks}\n            tickLabelProps={tickLabelProps}\n            tickFormat={tickFormat}\n            label={rightConfig.label}\n            tickComponent={(renderProps) => (\n              <YTickWithTruncation\n                position=\"right\"\n                renderProps={renderProps}\n                maxSpaceForTruncation={getYTickMaxSize(\n                  availableWidth,\n                  rightConfig.label,\n                )}\n                centerTick={isCategoricalAxis}\n                tickNameHasEmoji={tickNameHasEmoji}\n              />\n            )}\n          />\n        </DivAxisWrapper>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartRightAxisArea['displayName'] = 'XYChartRightAxisArea';\n"],
-  "mappings": "AA8Dc;AA5Dd,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEtB,MAAM,iBAAiB,8BAA8B,OAAO;AAErD,SAAS,uBAAuB;AACrC,QAAM,EAAE,WAAW,IAAI,aAAa;AACpC,QAAM,EAAE,OAAO,YAAY,IAAI,qBAAqB;AACpD,QAAM,EAAE,OAAO,WAAW,IAAI,qBAAqB;AAEnD,QAAM,aAAa,CAAC,GAAY,UAC9B,WAAW,eAAe,KAAK;AAEjC,QAAM,oBAAoB,cAAc,aAAa,QAAQ,EAAE;AAE/D,QAAM,iCACJ,cACA,qBACA,CAAC,0BAA2B,WAAiC,KAAK,CAAC;AAErE,QAAM,WACJ,gBAAgB,UAChB,kCACA,eAAe;AAEjB,QAAM,mBAAmB,WAAW,MAAM;AAAA,IAAK,CAAC,SAC9C,YAAY,KAAK,IAAI;AAAA,EACvB;AAEA,SAAO,WAAW,OAChB,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,WACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,OAAO,YAAY;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,UACP,YAAY,WAAW;AAAA,UACvB;AAAA,UACA;AAAA,UACA,OAAO,YAAY;AAAA,UACnB,eAAe,CAAC,gBACd;AAAA,YAAC;AAAA;AAAA,cACC,UAAS;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB;AAAA,gBACA,YAAY;AAAA,cACd;AAAA,cACA,YAAY;AAAA,cACZ;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import type { ScaleBand } from 'd3-scale';\n\nimport { YTickWithTruncation } from './YTickWithTruncation.js';\nimport { AxisRight } from '../../../core/components/axes/AxisRight.js';\nimport { DivAxisWrapper } from '../../../core/components/axes/components/DivAxisWrapper.js';\nimport {\n  axisFontProps,\n  EMOJI_REGEX,\n} from '../../../core/components/axes/constants.js';\nimport { getYTickMaxSize } from '../../../core/components/axes/utils/calculate-axis-size.js';\nimport { getYAxisTickLabelProps } from '../../../core/components/axes/utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../../../core/components/axes/utils/is-tick-label-visible.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useAxesTicks } from '../../hooks/useAxesTicks.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { isCategorical } from '../../types/guards.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport function XYChartRightAxisArea() {\n  const { rightTicks } = useAxesTicks();\n  const { right: rightConfig } = useVisibleAxesConfig();\n  const { right: rightScale } = useVisibleAxesScales();\n\n  const tickFormat = (_: unknown, index: number) =>\n    rightTicks.formattedTicks[index];\n\n  const isCategoricalAxis = isCategorical(rightConfig?.type || '');\n  const tickLabelProps = getYAxisTickLabelProps(\n    'right',\n    isCategoricalAxis,\n    rightScale,\n  );\n\n  const areCategoricalTicksNotFittable =\n    rightScale &&\n    isCategoricalAxis &&\n    !isTickLabelSpaceAvailable((rightScale as ScaleBand<string>).step());\n\n  const hideAxis =\n    rightConfig === undefined ||\n    areCategoricalTicksNotFittable ||\n    rightScale === undefined;\n\n  const tickNameHasEmoji = rightTicks.ticks.some((name) =>\n    EMOJI_REGEX.test(name),\n  );\n\n  return hideAxis ? null : (\n    <ChartGrid.GridArea gridArea={AREAS.rightAxis}>\n      {({ availableWidth, availableHeight }) => (\n        <DivAxisWrapper\n          divAxisStyle={axisFontProps}\n          ticks={rightTicks.formattedTicks}\n          label={rightConfig.label}\n        >\n          <AxisRight\n            scale={rightScale}\n            containerSize={availableHeight}\n            width={availableWidth}\n            tickValues={rightTicks.ticks}\n            tickLabelProps={tickLabelProps}\n            tickFormat={tickFormat}\n            label={rightConfig.label}\n            tickComponent={(renderProps) => (\n              <YTickWithTruncation\n                position=\"right\"\n                renderProps={renderProps}\n                maxSpaceForTruncation={getYTickMaxSize(\n                  availableWidth,\n                  rightConfig.label,\n                )}\n                centerTick={isCategoricalAxis}\n                tickNameHasEmoji={tickNameHasEmoji}\n              />\n            )}\n          />\n        </DivAxisWrapper>\n      )}\n    </ChartGrid.GridArea>\n  );\n}\n\nXYChartRightAxisArea['displayName'] = 'XYChartRightAxisArea';\n"],
+  "mappings": "AAiEc;AA/Dd,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,iCAAiC;AAC1C,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,aAAa;AAEf,SAAS,uBAAuB;AACrC,QAAM,EAAE,WAAW,IAAI,aAAa;AACpC,QAAM,EAAE,OAAO,YAAY,IAAI,qBAAqB;AACpD,QAAM,EAAE,OAAO,WAAW,IAAI,qBAAqB;AAEnD,QAAM,aAAa,CAAC,GAAY,UAC9B,WAAW,eAAe,KAAK;AAEjC,QAAM,oBAAoB,cAAc,aAAa,QAAQ,EAAE;AAC/D,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iCACJ,cACA,qBACA,CAAC,0BAA2B,WAAiC,KAAK,CAAC;AAErE,QAAM,WACJ,gBAAgB,UAChB,kCACA,eAAe;AAEjB,QAAM,mBAAmB,WAAW,MAAM;AAAA,IAAK,CAAC,SAC9C,YAAY,KAAK,IAAI;AAAA,EACvB;AAEA,SAAO,WAAW,OAChB,oBAAC,UAAU,UAAV,EAAmB,UAAU,MAAM,WACjC,WAAC,EAAE,gBAAgB,gBAAgB,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,OAAO,YAAY;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,UACP,YAAY,WAAW;AAAA,UACvB;AAAA,UACA;AAAA,UACA,OAAO,YAAY;AAAA,UACnB,eAAe,CAAC,gBACd;AAAA,YAAC;AAAA;AAAA,cACC,UAAS;AAAA,cACT;AAAA,cACA,uBAAuB;AAAA,gBACrB;AAAA,gBACA,YAAY;AAAA,cACd;AAAA,cACA,YAAY;AAAA,cACZ;AAAA;AAAA,UACF;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF,GAEJ;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/YTickWithTruncation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/YTickWithTruncation.tsx"],
-  "sourcesContent": ["import type { TickRendererProps } from '@visx/axis';\n\nimport { useTickTruncation } from './hooks/useTickTruncation.js';\nimport { useYTickOffset } from './hooks/useYTickOffset.js';\nimport { TickWithTruncationForeignObject } from './TickWithTruncationForeignObject.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\n\ninterface YTickWithTruncationProps {\n  position: 'left' | 'right';\n  renderProps: TickRendererProps;\n  maxSpaceForTruncation: number;\n  centerTick: boolean;\n  tickNameHasEmoji: boolean;\n}\n\nexport function YTickWithTruncation({\n  position,\n  renderProps,\n  maxSpaceForTruncation,\n  centerTick,\n  tickNameHasEmoji,\n}: Readonly<YTickWithTruncationProps>) {\n  const { formattedValue, x, y } = renderProps;\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const {\n    displayValue,\n    tickClassName,\n    tickInlineStyle,\n    truncatedWidth,\n    truncatedValue,\n  } = useTickTruncation(formattedValue, maxSpaceForTruncation, truncationMode);\n\n  const { xOffset, yOffset, style } = useYTickOffset(\n    position,\n    truncatedWidth,\n    renderProps,\n    centerTick,\n    tickNameHasEmoji,\n  );\n\n  const showTooltip = truncatedValue === formattedValue;\n\n  return (\n    <TickWithTruncationForeignObject\n      x={x - xOffset}\n      y={y - yOffset}\n      style={style}\n      height={style.height as number}\n      width={style.width as number}\n      tickClassName={tickClassName}\n      tickInlineStyle={tickInlineStyle}\n      formattedValue={formattedValue as string}\n      displayValue={displayValue}\n      showTooltip={showTooltip}\n    />\n  );\n}\n"],
-  "mappings": "AA6CI;AA3CJ,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,uCAAuC;AAChD,SAAS,gCAAgC;AAUlC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,EAAE,gBAAgB,GAAG,EAAE,IAAI;AAEjC,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,gBAAgB,uBAAuB,cAAc;AAE3E,QAAM,EAAE,SAAS,SAAS,MAAM,IAAI;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAG,IAAI;AAAA,MACP,GAAG,IAAI;AAAA,MACP;AAAA,MACA,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useTickTruncation } from './hooks/useTickTruncation.js';\nimport { useYTickOffset } from './hooks/useYTickOffset.js';\nimport { TickWithTruncationForeignObject } from './TickWithTruncationForeignObject.js';\nimport type { TickRendererProps } from '../../../core/components/axes/types.js';\nimport { useXYChartTruncationMode } from '../../hooks/useXYChartTruncationMode.js';\n\ninterface YTickWithTruncationProps {\n  position: 'left' | 'right';\n  renderProps: TickRendererProps;\n  maxSpaceForTruncation: number;\n  centerTick: boolean;\n  tickNameHasEmoji: boolean;\n}\n\nexport function YTickWithTruncation({\n  position,\n  renderProps,\n  maxSpaceForTruncation,\n  centerTick,\n  tickNameHasEmoji,\n}: Readonly<YTickWithTruncationProps>) {\n  const { formattedValue, x, y } = renderProps;\n\n  const { truncationMode } = useXYChartTruncationMode();\n\n  const {\n    displayValue,\n    tickClassName,\n    tickInlineStyle,\n    truncatedWidth,\n    truncatedValue,\n  } = useTickTruncation(formattedValue, maxSpaceForTruncation, truncationMode);\n\n  const { xOffset, yOffset, style } = useYTickOffset(\n    position,\n    truncatedWidth,\n    renderProps,\n    centerTick,\n    tickNameHasEmoji,\n  );\n\n  const showTooltip = truncatedValue === formattedValue;\n\n  return (\n    <TickWithTruncationForeignObject\n      x={x - xOffset}\n      y={y - yOffset}\n      style={style}\n      height={style.height as number}\n      width={style.width as number}\n      tickClassName={tickClassName}\n      tickInlineStyle={tickInlineStyle}\n      formattedValue={formattedValue as string}\n      displayValue={displayValue}\n      showTooltip={showTooltip}\n    />\n  );\n}\n"],
+  "mappings": "AA4CI;AA5CJ,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,uCAAuC;AAEhD,SAAS,gCAAgC;AAUlC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuC;AACrC,QAAM,EAAE,gBAAgB,GAAG,EAAE,IAAI;AAEjC,QAAM,EAAE,eAAe,IAAI,yBAAyB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB,gBAAgB,uBAAuB,cAAc;AAE3E,QAAM,EAAE,SAAS,SAAS,MAAM,IAAI;AAAA,IAClC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,cAAc,mBAAmB;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,GAAG,IAAI;AAAA,MACP,GAAG,IAAI;AAAA,MACP;AAAA,MACA,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/hooks/useXTickOffset.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/axes/hooks/useXTickOffset.ts"],
-  "sourcesContent": ["import type { TickRendererProps } from '@visx/axis';\nimport type { CSSProperties } from 'react';\n\nimport {\n  BOTTOM_AXIS_LINE_OFFSET,\n  TOP_AXIS_LINE_OFFSET,\n  TICK_LINE_HEIGHT,\n  TICK_LINE_ICON_OFFSET,\n} from '../../../../core/components/axes/constants.js';\n\nexport function useXTickOffset(\n  textWidth: number,\n  textHeight: number,\n  renderProps: TickRendererProps,\n  centerTick: boolean,\n  isTickRotated: boolean,\n  position: 'top' | 'bottom',\n  tickNameHasEmoji: boolean,\n) {\n  const yOffset =\n    position === 'top' && !isTickRotated\n      ? TOP_AXIS_LINE_OFFSET\n      : BOTTOM_AXIS_LINE_OFFSET;\n\n  const size = isTickRotated ? textHeight + 2 : textWidth;\n\n  const xOffset = centerTick\n    ? size / 2\n    : renderProps.textAnchor === 'start'\n    ? 0\n    : renderProps.textAnchor === 'end'\n    ? size\n    : size / 2;\n\n  const { x, y, ...restProps } = renderProps;\n\n  const TICK_LINE_HEIGHT_VALIDATED = tickNameHasEmoji\n    ? TICK_LINE_HEIGHT + TICK_LINE_ICON_OFFSET\n    : TICK_LINE_HEIGHT;\n\n  const style: CSSProperties = {\n    ...(restProps as CSSProperties),\n    width: textWidth,\n    height: TICK_LINE_HEIGHT_VALIDATED,\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    display: 'inline-block',\n  };\n\n  if (isTickRotated) {\n    style.transform = 'rotate(-90deg)';\n  }\n\n  return { xOffset, yOffset, style };\n}\n"],
-  "mappings": "AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,eACd,WACA,YACA,aACA,YACA,eACA,UACA,kBACA;AACA,QAAM,UACJ,aAAa,SAAS,CAAC,gBACnB,uBACA;AAEN,QAAM,OAAO,gBAAgB,aAAa,IAAI;AAE9C,QAAM,UAAU,aACZ,OAAO,IACP,YAAY,eAAe,UAC3B,IACA,YAAY,eAAe,QAC3B,OACA,OAAO;AAEX,QAAM,EAAE,GAAG,GAAG,GAAG,UAAU,IAAI;AAE/B,QAAM,6BAA6B,mBAC/B,mBAAmB,wBACnB;AAEJ,QAAM,QAAuB;AAAA,IAC3B,GAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,SAAS;AAAA,EACX;AAEA,MAAI,eAAe;AACjB,UAAM,YAAY;AAAA,EACpB;AAEA,SAAO,EAAE,SAAS,SAAS,MAAM;AACnC;",
+  "sourcesContent": ["import type { CSSProperties } from 'react';\n\nimport {\n  BOTTOM_AXIS_LINE_OFFSET,\n  TOP_AXIS_LINE_OFFSET,\n  TICK_LINE_HEIGHT,\n  TICK_LINE_ICON_OFFSET,\n} from '../../../../core/components/axes/constants.js';\nimport type { TickRendererProps } from '../../../../core/components/axes/types.js';\n\nexport function useXTickOffset(\n  textWidth: number,\n  textHeight: number,\n  renderProps: TickRendererProps,\n  centerTick: boolean,\n  isTickRotated: boolean,\n  position: 'top' | 'bottom',\n  tickNameHasEmoji: boolean,\n) {\n  const yOffset =\n    position === 'top' && !isTickRotated\n      ? TOP_AXIS_LINE_OFFSET\n      : BOTTOM_AXIS_LINE_OFFSET;\n\n  const size = isTickRotated ? textHeight + 2 : textWidth;\n\n  const xOffset = centerTick\n    ? size / 2\n    : renderProps.textAnchor === 'start'\n    ? 0\n    : renderProps.textAnchor === 'end'\n    ? size\n    : size / 2;\n\n  const { x, y, ...restProps } = renderProps;\n\n  const TICK_LINE_HEIGHT_VALIDATED = tickNameHasEmoji\n    ? TICK_LINE_HEIGHT + TICK_LINE_ICON_OFFSET\n    : TICK_LINE_HEIGHT;\n\n  const style: CSSProperties = {\n    ...(restProps as CSSProperties),\n    width: textWidth,\n    height: TICK_LINE_HEIGHT_VALIDATED,\n    whiteSpace: 'nowrap',\n    textOverflow: 'ellipsis',\n    display: 'inline-block',\n  };\n\n  if (isTickRotated) {\n    style.transform = 'rotate(-90deg)';\n  }\n\n  return { xOffset, yOffset, style };\n}\n"],
+  "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,eACd,WACA,YACA,aACA,YACA,eACA,UACA,kBACA;AACA,QAAM,UACJ,aAAa,SAAS,CAAC,gBACnB,uBACA;AAEN,QAAM,OAAO,gBAAgB,aAAa,IAAI;AAE9C,QAAM,UAAU,aACZ,OAAO,IACP,YAAY,eAAe,UAC3B,IACA,YAAY,eAAe,QAC3B,OACA,OAAO;AAEX,QAAM,EAAE,GAAG,GAAG,GAAG,UAAU,IAAI;AAE/B,QAAM,6BAA6B,mBAC/B,mBAAmB,wBACnB;AAEJ,QAAM,QAAuB;AAAA,IAC3B,GAAI;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,SAAS;AAAA,EACX;AAEA,MAAI,eAAe;AACjB,UAAM,YAAY;AAAA,EACpB;AAEA,SAAO,EAAE,SAAS,SAAS,MAAM;AACnC;",
   "names": []
 }

package/esm/charts/xy-chart/components/axes/hooks/useYTickOffset.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/axes/hooks/useYTickOffset.ts"],
-  "sourcesContent": ["import type { TickRendererProps } from '@visx/axis';\nimport type { CSSProperties } from 'react';\n\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport {\n  TICK_LINE_HEIGHT,\n  TICK_LINE_ICON_OFFSET,\n  Y_AXES_TICK_LINE_OFFSET,\n} from '../../../../core/components/axes/constants.js';\n\nconst SMALL_GAP_OFFSET = 1;\nconst START_ANCHOR_OFFSET = 3;\nfunction getYTickOffset(\n  centerTick: boolean,\n  renderProps: TickRendererProps,\n  tickNameHasEmoji: boolean,\n) {\n  const TICK_LINE_HEIGHT_VALIDATED = tickNameHasEmoji\n    ? TICK_LINE_HEIGHT + TICK_LINE_ICON_OFFSET\n    : TICK_LINE_HEIGHT;\n\n  if (centerTick) {\n    return TICK_LINE_HEIGHT_VALIDATED / 2 + SMALL_GAP_OFFSET;\n  }\n  if (renderProps.verticalAnchor === 'start') {\n    return START_ANCHOR_OFFSET;\n  }\n  if (renderProps.verticalAnchor === 'end') {\n    return TICK_LINE_HEIGHT_VALIDATED - SMALL_GAP_OFFSET;\n  }\n\n  return TICK_LINE_HEIGHT_VALIDATED / 2 + SMALL_GAP_OFFSET;\n}\n\nexport function useYTickOffset(\n  position: string,\n  textWidth: number,\n  renderProps: TickRendererProps,\n  centerTick: boolean,\n  tickNameHasEmoji: boolean,\n) {\n  /**\n   * The width to be used by containers in order to make the truncation works.\n   * The value should be rounded to avoid a premature truncation in Safari that\n   * consider a fractional pixel to truncate.\n   **/\n  const WIDTH = Math.ceil(textWidth);\n\n  const yOffset = getYTickOffset(centerTick, renderProps, tickNameHasEmoji);\n\n  const xOffset =\n    position === 'left'\n      ? textWidth + Y_AXES_TICK_LINE_OFFSET - SMALL_GAP_OFFSET\n      : -Y_AXES_TICK_LINE_OFFSET + SMALL_GAP_OFFSET;\n\n  const { x, y, ...restProps } = renderProps;\n\n  const style: CSSProperties = {\n    ...(restProps as CSSProperties),\n    textAlign: position === 'left' ? 'end' : 'start',\n    lineHeight: Typography.Text.Base.Default.LineHeight,\n    width: WIDTH,\n    height: TICK_LINE_HEIGHT,\n    overflow: 'visible',\n  };\n  return { xOffset, yOffset, style };\n}\n"],
-  "mappings": "AAGA,OAAO,gBAAgB;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,mBAAmB;AACzB,MAAM,sBAAsB;AAC5B,SAAS,eACP,YACA,aACA,kBACA;AACA,QAAM,6BAA6B,mBAC/B,mBAAmB,wBACnB;AAEJ,MAAI,YAAY;AACd,WAAO,6BAA6B,IAAI;AAAA,EAC1C;AACA,MAAI,YAAY,mBAAmB,SAAS;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,YAAY,mBAAmB,OAAO;AACxC,WAAO,6BAA6B;AAAA,EACtC;AAEA,SAAO,6BAA6B,IAAI;AAC1C;AAEO,SAAS,eACd,UACA,WACA,aACA,YACA,kBACA;AAMA,QAAM,QAAQ,KAAK,KAAK,SAAS;AAEjC,QAAM,UAAU,eAAe,YAAY,aAAa,gBAAgB;AAExE,QAAM,UACJ,aAAa,SACT,YAAY,0BAA0B,mBACtC,CAAC,0BAA0B;AAEjC,QAAM,EAAE,GAAG,GAAG,GAAG,UAAU,IAAI;AAE/B,QAAM,QAAuB;AAAA,IAC3B,GAAI;AAAA,IACJ,WAAW,aAAa,SAAS,QAAQ;AAAA,IACzC,YAAY,WAAW,KAAK,KAAK,QAAQ;AAAA,IACzC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACA,SAAO,EAAE,SAAS,SAAS,MAAM;AACnC;",
+  "sourcesContent": ["import type { CSSProperties } from 'react';\n\nimport Typography from '@dynatrace/strato-design-tokens/typography';\n\nimport {\n  TICK_LINE_HEIGHT,\n  TICK_LINE_ICON_OFFSET,\n  Y_AXES_TICK_LINE_OFFSET,\n} from '../../../../core/components/axes/constants.js';\nimport type { TickRendererProps } from '../../../../core/components/axes/types.js';\n\nconst SMALL_GAP_OFFSET = 1;\nconst START_ANCHOR_OFFSET = 3;\nfunction getYTickOffset(\n  centerTick: boolean,\n  renderProps: TickRendererProps,\n  tickNameHasEmoji: boolean,\n) {\n  const TICK_LINE_HEIGHT_VALIDATED = tickNameHasEmoji\n    ? TICK_LINE_HEIGHT + TICK_LINE_ICON_OFFSET\n    : TICK_LINE_HEIGHT;\n\n  if (centerTick) {\n    return TICK_LINE_HEIGHT_VALIDATED / 2 + SMALL_GAP_OFFSET;\n  }\n  if (renderProps.verticalAnchor === 'start') {\n    return START_ANCHOR_OFFSET;\n  }\n  if (renderProps.verticalAnchor === 'end') {\n    return TICK_LINE_HEIGHT_VALIDATED - SMALL_GAP_OFFSET;\n  }\n\n  return TICK_LINE_HEIGHT_VALIDATED / 2 + SMALL_GAP_OFFSET;\n}\n\nexport function useYTickOffset(\n  position: string,\n  textWidth: number,\n  renderProps: TickRendererProps,\n  centerTick: boolean,\n  tickNameHasEmoji: boolean,\n) {\n  /**\n   * The width to be used by containers in order to make the truncation works.\n   * The value should be rounded to avoid a premature truncation in Safari that\n   * consider a fractional pixel to truncate.\n   **/\n  const WIDTH = Math.ceil(textWidth);\n\n  const yOffset = getYTickOffset(centerTick, renderProps, tickNameHasEmoji);\n\n  const xOffset =\n    position === 'left'\n      ? textWidth + Y_AXES_TICK_LINE_OFFSET - SMALL_GAP_OFFSET\n      : -Y_AXES_TICK_LINE_OFFSET + SMALL_GAP_OFFSET;\n\n  const { x, y, ...restProps } = renderProps;\n\n  const style: CSSProperties = {\n    ...(restProps as CSSProperties),\n    textAlign: position === 'left' ? 'end' : 'start',\n    lineHeight: Typography.Text.Base.Default.LineHeight,\n    width: WIDTH,\n    height: TICK_LINE_HEIGHT,\n    overflow: 'visible',\n  };\n  return { xOffset, yOffset, style };\n}\n"],
+  "mappings": "AAEA,OAAO,gBAAgB;AAEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,MAAM,mBAAmB;AACzB,MAAM,sBAAsB;AAC5B,SAAS,eACP,YACA,aACA,kBACA;AACA,QAAM,6BAA6B,mBAC/B,mBAAmB,wBACnB;AAEJ,MAAI,YAAY;AACd,WAAO,6BAA6B,IAAI;AAAA,EAC1C;AACA,MAAI,YAAY,mBAAmB,SAAS;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,YAAY,mBAAmB,OAAO;AACxC,WAAO,6BAA6B;AAAA,EACtC;AAEA,SAAO,6BAA6B,IAAI;AAC1C;AAEO,SAAS,eACd,UACA,WACA,aACA,YACA,kBACA;AAMA,QAAM,QAAQ,KAAK,KAAK,SAAS;AAEjC,QAAM,UAAU,eAAe,YAAY,aAAa,gBAAgB;AAExE,QAAM,UACJ,aAAa,SACT,YAAY,0BAA0B,mBACtC,CAAC,0BAA0B;AAEjC,QAAM,EAAE,GAAG,GAAG,GAAG,UAAU,IAAI;AAE/B,QAAM,QAAuB;AAAA,IAC3B,GAAI;AAAA,IACJ,WAAW,aAAa,SAAS,QAAQ;AAAA,IACzC,YAAY,WAAW,KAAK,KAAK,QAAQ;AAAA,IACzC,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACA,SAAO,EAAE,SAAS,SAAS,MAAM;AACnC;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-7-0 {
+._b76tm80-3-8-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-7-0 {
+._b76tm81-3-8-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._b76tm82-3-7-0 {
+._b76tm82-3-8-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./BarLabelOverlay.css";
-var labelClipWrapper = "_b76tm82-3-7-0";
-var labelSpan = "_b76tm81-3-7-0";
-var overlayContainer = "_b76tm80-3-7-0";
+var labelClipWrapper = "_b76tm82-3-8-0";
+var labelSpan = "_b76tm81-3-8-0";
+var overlayContainer = "_b76tm80-3-8-0";
 export {
   labelClipWrapper,
   labelSpan,

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css.ts"],
-  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-7-0';\nexport var labelSpan = '_b76tm81-3-7-0';\nexport var overlayContainer = '_b76tm80-3-7-0';"],
+  "sourcesContent": ["import './BarLabelOverlay.css';\nexport var labelClipWrapper = '_b76tm82-3-8-0';\nexport var labelSpan = '_b76tm81-3-8-0';\nexport var overlayContainer = '_b76tm80-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,YAAY;AAChB,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-7-0 {
+._1lwufqz0-3-8-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-7-0";
+var shapeIconWrapper = "_1lwufqz0-3-8-0";
 export {
   shapeIconWrapper
 };

package/esm/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-7-0';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/HighlightedPointCanvas.js

@@ -3,20 +3,46 @@ import { useCanvas } from "../../../../core/components/canvas/hooks/useCanvas.js
 import { DATA_POINT_OUTER_RADIUS } from "../../../../core/components/data-point/constants.js";
 import { getStrokeColor } from "../../../../core/components/data-point/utils/data-point.js";
 import { DEFAULT_DATA_POINT_RADIUS } from "../../../../core/constants.js";
-import { drawShapeFill, drawShapeStroke } from "../utils/draw-shape.js";
+import {
+  drawPill,
+  drawShapeFill,
+  drawShapeStroke
+} from "../utils/draw-shape.js";
 const HighlightedPointCanvas = ({
-  points
+  selectionPoints,
+  hoverGroups
 }) => {
   const draw = useCallback(
     (ctx) => {
-      const strokeColor = getStrokeColor(points);
-      for (const point of points) {
-        drawShapeStroke(ctx, point, DATA_POINT_OUTER_RADIUS, strokeColor);
+      for (const group of hoverGroups) {
+        if (group.length >= 2) {
+          drawPill(ctx, group, getStrokeColor(group));
+          for (const point of group) {
+            drawShapeFill(ctx, point, DEFAULT_DATA_POINT_RADIUS);
+          }
+        } else {
+          drawShapeStroke(
+            ctx,
+            group[0],
+            DATA_POINT_OUTER_RADIUS,
+            getStrokeColor(group)
+          );
+          drawShapeFill(ctx, group[0], DEFAULT_DATA_POINT_RADIUS);
+        }
+      }
+      const selectionStrokeColor = getStrokeColor(selectionPoints);
+      for (const point of selectionPoints) {
+        drawShapeStroke(
+          ctx,
+          point,
+          DATA_POINT_OUTER_RADIUS,
+          selectionStrokeColor
+        );
         drawShapeFill(ctx, point, DEFAULT_DATA_POINT_RADIUS);
       }
       return false;
     },
-    [points]
+    [selectionPoints, hoverGroups]
   );
   useCanvas("Highlighted-DataPoints", draw);
   return null;

package/esm/charts/xy-chart/components/overlay/explore/HighlightedPointCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/HighlightedPointCanvas.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { DATA_POINT_OUTER_RADIUS } from '../../../../core/components/data-point/constants.js';\nimport { getStrokeColor } from '../../../../core/components/data-point/utils/data-point.js';\nimport { DEFAULT_DATA_POINT_RADIUS } from '../../../../core/constants.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\nimport { drawShapeFill, drawShapeStroke } from '../utils/draw-shape.js';\n\ninterface HighlightedDatapointCanvasProps {\n  points: DataPoint[];\n}\n\nexport const HighlightedPointCanvas = ({\n  points,\n}: HighlightedDatapointCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      const strokeColor = getStrokeColor(points);\n      for (const point of points) {\n        drawShapeStroke(ctx, point, DATA_POINT_OUTER_RADIUS, strokeColor);\n        drawShapeFill(ctx, point, DEFAULT_DATA_POINT_RADIUS);\n      }\n\n      return false;\n    },\n    [points],\n  );\n\n  useCanvas('Highlighted-DataPoints', draw);\n\n  return null;\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAE1C,SAAS,eAAe,uBAAuB;AAMxC,MAAM,yBAAyB,CAAC;AAAA,EACrC;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,YAAM,cAAc,eAAe,MAAM;AACzC,iBAAW,SAAS,QAAQ;AAC1B,wBAAgB,KAAK,OAAO,yBAAyB,WAAW;AAChE,sBAAc,KAAK,OAAO,yBAAyB;AAAA,MACrD;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,0BAA0B,IAAI;AAExC,SAAO;AACT;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../../../core/components/canvas/hooks/useCanvas.js';\nimport { DATA_POINT_OUTER_RADIUS } from '../../../../core/components/data-point/constants.js';\nimport { getStrokeColor } from '../../../../core/components/data-point/utils/data-point.js';\nimport { DEFAULT_DATA_POINT_RADIUS } from '../../../../core/constants.js';\nimport { DataPoint } from '../../../../core/types/data-point.js';\nimport {\n  drawPill,\n  drawShapeFill,\n  drawShapeStroke,\n} from '../utils/draw-shape.js';\n\ninterface HighlightedDatapointCanvasProps {\n  selectionPoints: DataPoint[];\n  hoverGroups: DataPoint[][];\n}\n\nexport const HighlightedPointCanvas = ({\n  selectionPoints,\n  hoverGroups,\n}: HighlightedDatapointCanvasProps) => {\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      for (const group of hoverGroups) {\n        if (group.length >= 2) {\n          drawPill(ctx, group, getStrokeColor(group));\n          for (const point of group) {\n            drawShapeFill(ctx, point, DEFAULT_DATA_POINT_RADIUS);\n          }\n        } else {\n          drawShapeStroke(\n            ctx,\n            group[0],\n            DATA_POINT_OUTER_RADIUS,\n            getStrokeColor(group),\n          );\n          drawShapeFill(ctx, group[0], DEFAULT_DATA_POINT_RADIUS);\n        }\n      }\n\n      const selectionStrokeColor = getStrokeColor(selectionPoints);\n      for (const point of selectionPoints) {\n        drawShapeStroke(\n          ctx,\n          point,\n          DATA_POINT_OUTER_RADIUS,\n          selectionStrokeColor,\n        );\n        drawShapeFill(ctx, point, DEFAULT_DATA_POINT_RADIUS);\n      }\n\n      return false;\n    },\n    [selectionPoints, hoverGroups],\n  );\n\n  useCanvas('Highlighted-DataPoints', draw);\n\n  return null;\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAE1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,iBAAW,SAAS,aAAa;AAC/B,YAAI,MAAM,UAAU,GAAG;AACrB,mBAAS,KAAK,OAAO,eAAe,KAAK,CAAC;AAC1C,qBAAW,SAAS,OAAO;AACzB,0BAAc,KAAK,OAAO,yBAAyB;AAAA,UACrD;AAAA,QACF,OAAO;AACL;AAAA,YACE;AAAA,YACA,MAAM,CAAC;AAAA,YACP;AAAA,YACA,eAAe,KAAK;AAAA,UACtB;AACA,wBAAc,KAAK,MAAM,CAAC,GAAG,yBAAyB;AAAA,QACxD;AAAA,MACF;AAEA,YAAM,uBAAuB,eAAe,eAAe;AAC3D,iBAAW,SAAS,iBAAiB;AACnC;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AACA,sBAAc,KAAK,OAAO,yBAAyB;AAAA,MACrD;AAEA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,EAC/B;AAEA,YAAU,0BAA0B,IAAI;AAExC,SAAO;AACT;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-7-0 {
+._1bbe5uo0-3-8-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-7-0";
+var crosshair = "_1bbe5uo0-3-8-0";
 export {
   crosshair
 };

package/esm/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-7-0';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-7-0 {
+._cd1yys0-3-8-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-7-0 {
+._cd1yys1-3-8-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-7-0 _13lzg4k0-3-7-0";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-7-0 _13lzg4k0-3-7-0";
+var datapointIndicatorLayout = "_cd1yys1-3-8-0 _13lzg4k0-3-8-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-8-0 _13lzg4k0-3-8-0";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

package/esm/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-7-0 _13lzg4k0-3-7-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-7-0 _13lzg4k0-3-7-0';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-8-0 _13lzg4k0-3-8-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-8-0 _13lzg4k0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }