@dynatrace/strato-components 3.7.1 → 3.8.0

package/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-7-1 {
+._10kgnsa0-3-8-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-7-1);
-  box-shadow: var(--_bx32h4-3-7-1);
-  color: var(--_bx32h0-3-7-1);
+  background: var(--_bx32h3-3-8-0);
+  box-shadow: var(--_bx32h4-3-8-0);
+  color: var(--_bx32h0-3-8-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-7-1 {
+._10kgnsa1-3-8-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-7-1 {
+._10kgnsa2-3-8-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-7-1 {
+._10kgnsa3-3-8-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-7-1 {
+._10kgnsa4-3-8-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-7-1 {
+._10kgnsa5-3-8-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-7-1 {
+._10kgnsa6-3-8-0 {
   width: 100%;
 }
-._10kgnsa7-3-7-1 {
+._10kgnsa7-3-8-0 {
   width: fit-content;
 }
-._10kgnsa8-3-7-1 {
+._10kgnsa8-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-7-1 ._10kgnsa9-3-7-1:not(:has(svg:only-child)) {
+._10kgnsa3-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-7-1 ._10kgnsa9-3-7-1:not(:has(svg:only-child)) {
+._10kgnsa4-3-8-0 ._10kgnsa9-3-8-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-7-1 {
+._10kgnsab-3-8-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.d.ts

@@ -53,7 +53,8 @@ export interface ButtonOwnProps extends AriaLabelingProps, AriaDisabledProps, Wi
      */
     size?: 'default' | 'condensed';
     /**
-     * The current loading state of the button. If true, a loading icon is shown and the button is disabled.
+     * The current loading state of the button. If true, a loading icon is shown, the button stays in the tab order with aria-disabled=true,
+     * and its busy state is signalled via aria-busy=true.
      * @defaultValue false
      */
     loading?: boolean;

package/buttons/button/Button.js

@@ -129,11 +129,12 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       required,
-      disabled: nativeDisabledOrLoading && !ariaDisabled,
+      disabled: disabled && !ariaDisabled,
       id: propId,
       type,
       ...ariaLabelingProps,
-      "aria-disabled": ariaDisabledProp,
+      "aria-disabled": loading ? true : ariaDisabledProp,
+      "aria-busy": loading,
       onClick: handleButtonClick
     };
     const disabledPropagationProps = {
@@ -182,7 +183,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
             (0, import_focusRingStatic_css.focusRingStatic)({
               when: "focus-visible",
               color,
-              disabled: nativeDisabledOrLoading
+              disabled
             }),
             {
               [`${styles.widths.content}`]: width === "content",
@@ -219,7 +220,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
           (0, import_focusRingStatic_css.focusRingStatic)({
             when: "focus-visible",
             color,
-            disabled: nativeDisabledOrLoading
+            disabled
           })
         ),
         style: {

package/buttons/button/Button.sty.js

@@ -28,7 +28,7 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-7-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-7-1", center: "_10kgnsa2-3-7-1" }, size: { condensed: "_10kgnsa3-3-7-1", "default": "_10kgnsa4-3-7-1" }, disabled: { true: "_10kgnsa5-3-7-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-7-1", variantClassNames: { textual: { true: "_oqqp1n0-3-7-1", false: "_10kgnsab-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-7-1";
-var widths = { full: "_10kgnsa6-3-7-1", content: "_10kgnsa7-3-7-1" };
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-8-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-8-0", center: "_10kgnsa2-3-8-0" }, size: { condensed: "_10kgnsa3-3-8-0", "default": "_10kgnsa4-3-8-0" }, disabled: { true: "_10kgnsa5-3-8-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-8-0", variantClassNames: { textual: { true: "_oqqp1n0-3-8-0", false: "_10kgnsab-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-8-0";
+var widths = { full: "_10kgnsa6-3-8-0", content: "_10kgnsa7-3-8-0" };

package/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-7-1 {
+._1xe9ern0-3-8-0 {
   opacity: 0.5;
 }

package/buttons/intent-button/IntentButton.sty.js

@@ -21,4 +21,4 @@ __export(IntentButton_css_exports, {
 });
 module.exports = __toCommonJS(IntentButton_css_exports);
 var import_IntentButton_css_ts_vanilla = require("./IntentButton.css");
-var disabledAppIconOpacity = "_1xe9ern0-3-7-1";
+var disabledAppIconOpacity = "_1xe9ern0-3-8-0";

package/buttons/intent-button/IntentButtonWithResponse.js

@@ -75,10 +75,10 @@ const IntentButtonWithResponse = /* @__PURE__ */ (0, import_react.forwardRef)((p
     import_Button.Button,
     {
       ref,
-      onClick: handleClick,
+      onClick: (event) => void handleClick(event),
       onMouseDown: (event) => {
         if (event.nativeEvent.button === 1) {
-          handleClick(event).catch(() => void 0);
+          void handleClick(event);
         }
       },
       disabled,

package/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-7-1 {
+._1j9pkom0-3-8-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-7-1 {
+._1j9pkom1-3-8-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/buttons/notify-button/NotifyButton.sty.js

@@ -22,5 +22,5 @@ __export(NotifyButton_css_exports, {
 });
 module.exports = __toCommonJS(NotifyButton_css_exports);
 var import_NotifyButton_css_ts_vanilla = require("./NotifyButton.css");
-var overlay = "_1j9pkom0-3-7-1";
-var toast = "_1j9pkom1-3-7-1";
+var overlay = "_1j9pkom0-3-8-0";
+var toast = "_1j9pkom1-3-8-0";

package/buttons/run-query-button/RunQueryButton.js

@@ -58,15 +58,14 @@ function getColor(queryState) {
   }
 }
 function PrefixIcon({
-  type,
-  ariaLabel
+  type
 }) {
   switch (type) {
     case "idle":
     case "success":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PlayIcon, {});
     case "loading":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCircle.ProgressCircle, { size: "small", "aria-label": ariaLabel });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ProgressCircle.ProgressCircle, { size: "small", "aria-hidden": true });
     case "error":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CriticalIcon, {});
   }
@@ -134,12 +133,6 @@ const RunQueryButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref)
   } = props;
   const [behavioralTrackingProps, restProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
   const allowsClickHandler = queryState !== "loading" || queryState === "loading" && cancelable;
-  const intl = (0, import_react_intl.useIntl)();
-  const ariaLabel = intl.formatMessage({
-    description: "Label for button indicating that a query is loading",
-    defaultMessage: "Running",
-    id: "hi3IodOo0ygpihhY"
-  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Button.Button,
     {
@@ -151,15 +144,15 @@ const RunQueryButton = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref)
       variant: getVariant(queryState),
       ref,
       disabled,
-      "aria-live": "polite",
-      "aria-atomic": "true",
+      "aria-busy": queryState === "loading",
+      "aria-disabled": queryState === "loading" && !cancelable,
       className: consumerClassName,
       style: consumerStyle,
       ...(0, import_merge_props.mergeProps)(restProps, behavioralTrackingProps),
       "data-dt-component": COMPONENT_NAME,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrefixIcon, { type: queryState, ariaLabel }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonMessage, { type: queryState, cancelable })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrefixIcon, { type: queryState }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ButtonMessage, { type: queryState, cancelable }) })
       ]
     }
   );

package/charts/categorical-bar/components/interactions/hooks/useSeriesActionClickHandler.js

@@ -33,7 +33,13 @@ const useSeriesActionClickHandler = (hasMultipleItems) => {
   const singleItemActionClickHandler = (e) => {
     setState((prev) => ({
       ...prev,
-      overlays: { ...prev.overlays, visibleTooltip: false }
+      overlays: {
+        ...prev.overlays,
+        visibleTooltip: false,
+        pinnedTooltip: false,
+        mouseInBounds: false,
+        mousePosition: void 0
+      }
     }));
   };
   return hasMultipleItems ? multiItemsActionClickHandler : singleItemActionClickHandler;

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-7-1 {
+._1wi8enr0-3-8-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-7-1 {
+._1wi8enr1-3-8-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -23,5 +23,5 @@ __export(CategoricalBarChartInspectOverlay_css_exports, {
 module.exports = __toCommonJS(CategoricalBarChartInspectOverlay_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_CategoricalBarChartInspectOverlay_css_ts_vanilla = require("./CategoricalBarChartInspectOverlay.css");
-var crosshairLayout = "_1wi8enr0-3-7-1 _13lzg4k0-3-7-1";
-var dataPointLayout = "_1wi8enr1-3-7-1 _13lzg4k0-3-7-1";
+var crosshairLayout = "_1wi8enr0-3-8-0 _13lzg4k0-3-8-0";
+var dataPointLayout = "_1wi8enr1-3-8-0 _13lzg4k0-3-8-0";

package/charts/categorical-bar/hooks/store/state-setters.d.ts

@@ -2,9 +2,9 @@ import type { CategoricalBarChartState } from '../../types/state.js';
 export declare const setMouseOutBounds: (prev: CategoricalBarChartState) => {
     overlays: {
         mouseInBounds: boolean;
-        pinnedTooltip: boolean;
+        mousePosition: undefined;
         visibleTooltip: boolean;
-        mousePosition?: import("../../types/state.js").CategoricalBarChartMousePositionState;
+        pinnedTooltip: boolean;
     };
     filteredDimensions: Set<string>;
     highlightedDimension: import("../../types/categorical-bar-chart-data.js").ColoredChartDimension | undefined;

package/charts/categorical-bar/hooks/store/state-setters.js

@@ -24,6 +24,8 @@ const setMouseOutBounds = (prev) => ({
   ...prev,
   overlays: {
     ...prev.overlays,
-    mouseInBounds: false
+    mouseInBounds: false,
+    mousePosition: void 0,
+    visibleTooltip: prev.overlays.pinnedTooltip
   }
 });

package/charts/categorical-bar/layout/CategoricalGridLayout.js

@@ -21,7 +21,6 @@ __export(CategoricalGridLayout_exports, {
 });
 module.exports = __toCommonJS(CategoricalGridLayout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_group = require("@visx/group");
 var import_ChartGrid_css = require("../../core/components/chart-grid/ChartGrid.sty.js");
 var import_useGridPlotSize = require("../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_GridLayout = require("../components/grid/GridLayout.js");
@@ -31,7 +30,7 @@ const CategoricalGridLayout = () => {
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const { layout } = (0, import_useCategoricalBarChartBaseConfig.useCategoricalBarChartBaseConfig)();
   const { valueScale } = (0, import_useCategoricalBarChartScales.useCategoricalBarChartScales)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: import_ChartGrid_css.plotLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_group.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: import_ChartGrid_css.plotLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_GridLayout.GridLayout,
     {
       layout,

package/charts/core/components/annotations/AnnotationsAtom.css

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

package/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsAtom_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsAtom_css_exports);
 var import_AnnotationsAtom_css_ts_vanilla = require("./AnnotationsAtom.css");
-var wrapper = "_145zb630-3-7-1";
+var wrapper = "_145zb630-3-8-0";

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-7-1 {
+._1yc349j0-3-8-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsCanvasLayout_css_exports);
 var import_AnnotationsCanvasLayout_css_ts_vanilla = require("./AnnotationsCanvasLayout.css");
-var canvasContainer = "_1yc349j0-3-7-1";
+var canvasContainer = "_1yc349j0-3-8-0";

package/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js

@@ -97,12 +97,11 @@ function resolveExpandedStringLayout(content, width, isRange, textOverflow, boun
     };
   }
   if (xPosition - markerWidth >= trackLeftBoundary) {
-    const adjustedX = !isRange && textOverflow === "expand" ? xPosition - markerWidth : xPosition;
     return {
       sanitizedContent: content,
       calculatedMarkerWidth: markerWidth,
       valueMarkerOrientation: "right",
-      calculatedX: adjustedX
+      calculatedX: xPosition
     };
   }
   if (xPosition + markerWidth <= trackRightBoundary) {

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-7-1 {
+._107efci0-3-8-0 {
   position: absolute;
   top: 0;
 }

package/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsOverlays_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsOverlays_css_exports);
 var import_AnnotationsOverlays_css_ts_vanilla = require("./AnnotationsOverlays.css");
-var annotationsOverlay = "_107efci0-3-7-1";
+var annotationsOverlay = "_107efci0-3-8-0";

package/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-7-1 {
+._uzgvu30-3-8-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -21,4 +21,4 @@ __export(AnnotationsScrollWrapper_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsScrollWrapper_css_exports);
 var import_AnnotationsScrollWrapper_css_ts_vanilla = require("./AnnotationsScrollWrapper.css");
-var scrollWrapper = "_uzgvu30-3-7-1";
+var scrollWrapper = "_uzgvu30-3-8-0";

package/charts/core/components/annotations/utils/aggregate-markers-coords.js

@@ -34,9 +34,12 @@ var import_react = require("react");
 var import_react_is = require("react-is");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_calculate_expand_marker_coordinates = require("./calculate-expand-marker-coordinates.js");
+var import_resolve_value_marker_hit_area = require("./resolve-value-marker-hit-area.js");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
 var import_color_contrast = require("../../../utils/color-contrast.js");
 var import_getTokenComputedStyle = require("../../../utils/getTokenComputedStyle.js");
+var import_constants = require("../components/canvas/renderers/value-marker-renderer/constants.js");
+var import_calculate_marker_width_and_content = require("../components/canvas/utils/calculate-marker-width-and-content.js");
 var import_MarkerAtom = require("../slots/MarkerAtom.js");
 var import_TrackAtom = require("../slots/TrackAtom.js");
 function aggregateMarkersCoords(children, trackWidth) {
@@ -58,10 +61,24 @@ function aggregateMarkersCoords(children, trackWidth) {
           markersByTrackConfig.push(marker.props);
           const { textOverflow, content, x, width } = marker.props;
           if (marker.props.width === 0) {
-            markerAtomCoords = (0, import_calculate_expand_marker_coordinates.calculateValueMarkerCoordinates)(
+            const {
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
+            } = (0, import_calculate_marker_width_and_content.calculateMarkerWidthAndContent)({
+              trackWidth,
+              trackLeftBoundary: 0,
               content,
+              width: import_constants.VALUE_MARKER_WIDTH,
               x,
-              trackWidth
+              isRange: false,
+              textOverflow,
+              truncateMode: marker.props.truncateMode
+            });
+            markerAtomCoords = (0, import_resolve_value_marker_hit_area.resolveValueMarkerHitArea)(
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
             );
           } else {
             markerAtomCoords = (0, import_calculate_expand_marker_coordinates.calculateRangeMarkerCoordinates)(

package/charts/core/components/annotations/utils/resolve-value-marker-hit-area.d.ts

@@ -0,0 +1,3 @@
+import type { ValueMarkerPointerPosition } from '../components/canvas/renderers/value-marker-renderer/types.js';
+import type { MarkerCoords } from '../types/marker-coords.js';
+export declare function resolveValueMarkerHitArea(calculatedX: number, calculatedMarkerWidth: number, orientation: ValueMarkerPointerPosition): MarkerCoords;

package/charts/core/components/annotations/utils/resolve-value-marker-hit-area.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var resolve_value_marker_hit_area_exports = {};
+__export(resolve_value_marker_hit_area_exports, {
+  resolveValueMarkerHitArea: () => resolveValueMarkerHitArea
+});
+module.exports = __toCommonJS(resolve_value_marker_hit_area_exports);
+function resolveValueMarkerHitArea(calculatedX, calculatedMarkerWidth, orientation) {
+  if (orientation === "right") {
+    return [calculatedX - calculatedMarkerWidth, calculatedX];
+  }
+  if (orientation === "left") {
+    return [calculatedX, calculatedX + calculatedMarkerWidth];
+  }
+  const half = calculatedMarkerWidth / 2;
+  return [calculatedX - half, calculatedX + half];
+}

package/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-7-1 {
+._90oaxp0-3-8-0 {
   display: block;
   overflow: visible;
 }

package/charts/core/components/axes/Axis.js

@@ -21,8 +21,8 @@ __export(Axis_exports, {
 });
 module.exports = __toCommonJS(Axis_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_axis = require("@visx/axis");
 var import_Axis_css = require("./Axis.sty.js");
+var import_AxisPrimitive = require("./AxisPrimitive.js");
 var import_constants = require("./constants.js");
 var import_chars_font_width_map = require("../text-ellipsis/chars-font-width-map.js");
 var import_truncate_string = require("../text-ellipsis/truncate-string.js");
@@ -64,14 +64,11 @@ const Axis = ({
       role: restProps.role,
       "aria-label": restProps["aria-label"] ?? void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_axis.Axis,
+        import_AxisPrimitive.AxisPrimitive,
         {
           label: truncatedLabel,
           labelProps: size === "small" ? labelProps : labelBaseProps,
           tickLabelProps: defaultTickLabelProps,
-          tickLength: import_constants.AXIS_TICK_LENGTH,
-          hideTicks: true,
-          hideAxisLine: true,
           ...restProps
         }
       )

package/charts/core/components/axes/Axis.sty.js

@@ -21,4 +21,4 @@ __export(Axis_css_exports, {
 });
 module.exports = __toCommonJS(Axis_css_exports);
 var import_Axis_css_ts_vanilla = require("./Axis.css");
-var axis = "_90oaxp0-3-7-1";
+var axis = "_90oaxp0-3-8-0";

package/charts/core/components/axes/AxisPrimitive.d.ts

@@ -0,0 +1,31 @@
+import type { AxisScale, SharedAxisProps } from './types.js';
+/**
+ * AxisPrimitive accepts SharedAxisProps for backward compatibility, plus extra
+ * props that Axis.tsx passes through from AxisProps (role, aria-label).
+ * Dead-code props (tickLength, hideTicks, hideAxisLine, etc.) are accepted
+ * but ignored. This allows Axis.tsx to spread restProps without filtering.
+ * The dead props will be cleaned up in APPDEV-17081.
+ */
+type AxisPrimitiveProps = SharedAxisProps<AxisScale> & {
+    /** Passed through from Axis.tsx; applied to outer <svg>, not consumed here. */
+    role?: string;
+    /** Passed through from Axis.tsx; applied to outer <svg>, not consumed here. */
+    'aria-label'?: string;
+};
+/**
+ * Local replacement for `@visx/axis` Axis rendering component.
+ *
+ * Flattens visx's 3-layer architecture (Axis.js -> AxisRenderer.js -> Ticks.js)
+ * into a single component. This simplification is possible because Strato always
+ * hardcodes tickLength=0, hideTicks=true, hideAxisLine=true -- meaning tick lines,
+ * axis lines, and related props are dead code.
+ *
+ * The component:
+ * 1. Computes tick positions (using getTicks + getTickPosition + coerceNumber + createHorizontalPoint/createVerticalPoint)
+ * 2. Calls tickComponent for each tick with the same contract as visx
+ * 3. Renders the axis label using getLabelTransform math + plain SVG text element
+ *
+ * @internal
+ */
+export declare function AxisPrimitive({ scale, orientation, tickComponent, tickLabelProps, tickFormat, numTicks, tickValues, hideZero, label, labelClassName, labelOffset, labelProps, left, top: topOffset, axisClassName, innerRef, }: AxisPrimitiveProps): import("react/jsx-runtime").JSX.Element;
+export {};