@coinbase/cds-mobile 9.12.3 → 9.14.0

package/esm/visualizations/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useCallback, useEffect, useId, useMemo } from 'react';
 import { Group, vec } from '@shopify/react-native-skia';
@@ -12,6 +12,7 @@ import { getAxisTicksData, toPointAnchor } from '../utils/axis';
 import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -38,7 +39,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       labelGap = 4,
       width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -53,6 +55,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -182,11 +185,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         chartTextProps: {
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          horizontalAlignment: position === 'left' ? 'right' : 'left'
+          horizontalAlignment: position === 'left' ? 'right' : 'left',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'x' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted, fadeTickLabels, tickLabelOverflow]);
   if (!yScale || !axisBounds) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
@@ -214,11 +218,6 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           stroke: theme.color.bgLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -241,13 +240,27 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       stroke: theme.color.fg,
       strokeCap: "square",
       strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(Group, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "y",
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    })), label && /*#__PURE__*/_jsx(Group, {
       origin: vec(labelX, labelY),
       transform: [{
         rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
       }],
       children: /*#__PURE__*/_jsx(ChartText, {
         horizontalAlignment: "center",
+        repositionAxes: "none",
         verticalAlignment: "middle",
         x: labelX,
         y: labelY,

package/esm/visualizations/chart/axis/__stories__/Axis.stories.js

@@ -1,55 +1,58 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { IconButton } from '../../../../buttons';
 import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
 import { useTheme } from '../../../../hooks/useTheme';
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine } from '../../line';
 import { Line } from '../../line/Line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { XAxis, YAxis } from '..';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const defaultChartHeight = 250;
 const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
   strokeWidth: 1
 })));
+const data = [{
+  name: 'Page A',
+  uv: 4000,
+  pv: 2400,
+  amt: 2400
+}, {
+  name: 'Page B',
+  uv: 3000,
+  pv: 1398,
+  amt: 2210
+}, {
+  name: 'Page C',
+  uv: 2000,
+  pv: 9800,
+  amt: 2290
+}, {
+  name: 'Page D',
+  uv: 2780,
+  pv: 3908,
+  amt: 2000
+}, {
+  name: 'Page E',
+  uv: 1890,
+  pv: 4800,
+  amt: 2181
+}, {
+  name: 'Page F',
+  uv: 2390,
+  pv: 3800,
+  amt: 2500
+}, {
+  name: 'Page G',
+  uv: 3490,
+  pv: 4300,
+  amt: 2100
+}];
 const Simple = () => {
-  const data = [{
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100
-  }];
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
@@ -457,80 +460,180 @@ const LineChartOnBandScale = _ref2 => {
     })]
   });
 };
-const AxisStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
-      children: /*#__PURE__*/_jsx(Simple, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Time of Day",
-      children: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Multiple Axes on Same Side",
-      children: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Strict Domain Limit",
-      children: /*#__PURE__*/_jsx(DomainLimitType, {
-        limit: "strict"
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Nice Domain Limit",
-      children: /*#__PURE__*/_jsx(DomainLimitType, {
-        limit: "nice"
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Axis Grid Alignment",
-      children: /*#__PURE__*/_jsxs(CartesianChart, {
-        height: 350,
-        inset: 8,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22]
-        }],
-        xAxis: {
-          scaleType: 'band',
-          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-        },
-        yAxis: {
-          domain: {
-            min: 0
-          }
-        },
-        children: [/*#__PURE__*/_jsx(XAxis, {
-          showGrid: true,
-          showLine: true,
-          showTickMarks: true,
-          label: "Default"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "start",
-          label: "Start"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "end",
-          label: "End"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "middle",
-          label: "Middle"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "edges",
-          label: "Edges"
-        }), /*#__PURE__*/_jsx(BarPlot, {})]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Scale - Tick Filtering",
-      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Scale - Explicit Ticks",
-      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
-    }), /*#__PURE__*/_jsxs(Example, {
-      title: "Line Chart on Band Scale - Grid Positions",
+const tickLabelOverflowModes = ['reposition', 'fade', 'visible'];
+const ordinalLabels = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'];
+const overflowSeriesData = [10, 22, 29, 45, 98, 45, 22];
+const TickLabelOverflowYAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 320,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "left",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "left-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "right",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "right-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowXAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 420,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "bottom",
+      tickLabelOverflow: tickLabelOverflow
+    }, "bottom-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "top",
+      tickLabelOverflow: tickLabelOverflow
+    }, "top-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowAllSides = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 250,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    inset: 0,
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Fade",
+      position: "bottom",
+      tickLabelOverflow: "fade"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Visible",
+      position: "left",
+      tickLabelOverflow: "visible"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "line1"
+    })]
+  });
+};
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(Simple, {})
+  }, {
+    title: 'Time of Day',
+    component: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
+  }, {
+    title: 'Multiple Axes on Same Side',
+    component: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
+  }, {
+    title: 'Strict Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "strict"
+    })
+  }, {
+    title: 'Nice Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "nice"
+    })
+  }, {
+    title: 'Band Axis Grid Alignment',
+    component: /*#__PURE__*/_jsxs(CartesianChart, {
+      height: 350,
+      inset: 8,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22]
+      }],
+      xAxis: {
+        scaleType: 'band',
+        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+      },
+      yAxis: {
+        domain: {
+          min: 0
+        }
+      },
+      children: [/*#__PURE__*/_jsx(XAxis, {
+        showGrid: true,
+        showLine: true,
+        showTickMarks: true,
+        label: "Default"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "start",
+        label: "Start"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "end",
+        label: "End"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "middle",
+        label: "Middle"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "edges",
+        label: "Edges"
+      }), /*#__PURE__*/_jsx(BarPlot, {})]
+    })
+  }, {
+    title: 'Band Scale - Tick Filtering',
+    component: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+  }, {
+    title: 'Band Scale - Explicit Ticks',
+    component: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+  }, {
+    title: 'Line Chart on Band Scale - Grid Positions',
+    component: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
         bandGridLinePlacement: "edges"
       }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
@@ -540,13 +643,65 @@ const AxisStories = () => {
       }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
         bandGridLinePlacement: "end"
       })]
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Axes on All Sides",
-      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom Tick Mark Sizes",
-      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
-    })]
+    })
+  }, {
+    title: 'Axes on All Sides',
+    component: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+  }, {
+    title: 'Custom Tick Mark Sizes',
+    component: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
+  }, {
+    title: 'Y Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowYAxes, {})
+  }, {
+    title: 'X Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowXAxes, {})
+  }, {
+    title: 'Ineffective Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowAllSides, {})
+  }], []);
+  const currentExample = examples[currentIndex];
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => (prev + 1) % examples.length);
+  }, [examples.length]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 4,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to previous example",
+          accessibilityLabel: "Previous",
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: currentExample.title
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: [currentIndex + 1, " / ", examples.length]
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to next example",
+          accessibilityLabel: "Next",
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsx(Example, {
+        children: currentExample.component
+      })]
+    })
   });
-};
-export default AxisStories;
+}
+export default ExampleNavigator;

package/esm/visualizations/chart/axis/index.js

@@ -1,5 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './Axis';
+export * from './AxisTickLabelOverflowMask';
 export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';

package/esm/visualizations/chart/line/LineChart.js

@@ -17,6 +17,10 @@ const getDefaultScrubberAccessibilityStep = function (dataLength, sampleCount) {
   if (dataLength <= 0) return 1;
   return Math.max(1, Math.ceil(dataLength / sampleCount));
 };
+/**
+ * A line chart built on `CartesianChart`. For non-interactive usage (e.g. row sparklines), pass
+ * `animate={false}` for a lightweight static render (cheap rectangular clip, no entrance animation).
+ */
 export const LineChart = /*#__PURE__*/memo(_ref => {
   let {
       ref,

package/esm/visualizations/chart/line/ReferenceLine.js

@@ -24,6 +24,7 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     labelVerticalAlignment,
     labelBoundsInset,
     stroke,
+    strokeWidth,
     opacity = 1
   } = _ref;
   const theme = useTheme();
@@ -81,7 +82,8 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
         animate: false,
         d: horizontalLine,
         stroke: effectiveLineStroke,
-        strokeOpacity: opacity
+        strokeOpacity: opacity,
+        strokeWidth: strokeWidth
       }), label && /*#__PURE__*/_jsx(LabelComponent, {
         boundsInset: labelBoundsInset,
         dx: labelDx,
@@ -113,7 +115,8 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
         animate: false,
         d: verticalLine,
         stroke: effectiveLineStroke,
-        strokeOpacity: opacity
+        strokeOpacity: opacity,
+        strokeWidth: strokeWidth
       }), label && /*#__PURE__*/_jsx(LabelComponent, {
         boundsInset: labelBoundsInset,
         dx: labelDx,

package/esm/visualizations/chart/line/__stories__/LineChart.stories.js

@@ -1794,6 +1794,27 @@ function ExampleNavigator() {
         data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58]
       }]
     })
+  }, {
+    title: 'Lightweight (Static)',
+    component: /*#__PURE__*/_jsx(LineChart, {
+      animate: false,
+      height: 200,
+      series: [{
+        id: 'prices',
+        data: [-20, 12, -8, 34, -15, 28, -4, 40, -25, 18, -10, 30, -18, 22]
+      }],
+      yAxis: {
+        domain: {
+          min: -40,
+          max: 45
+        }
+      },
+      children: /*#__PURE__*/_jsx(ReferenceLine, {
+        LineComponent: DottedLine,
+        dataY: 0,
+        strokeWidth: 2
+      })
+    })
   }, {
     title: 'Horizontal Layout',
     component: /*#__PURE__*/_jsx(HorizontalLayoutLineChart, {})

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -29,13 +29,13 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
     chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(ChartText, _extends({
-    disableRepositioning: true,
     background: background != null ? background : theme.color.bg,
     borderRadius: borderRadius,
     color: color != null ? color : theme.color.fgPrimary,
     elevated: elevated,
     font: font,
     inset: inset,
+    repositionAxes: "none",
     verticalAlignment: verticalAlignment
   }, chartTextProps, {
     children: label