@dynatrace/strato-components 3.10.4 → 3.11.1

package/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-10-4 {
+._l1klj80-3-11-1 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-10-4 {
+._l1klj81-3-11-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-10-4 {
+._l1klj83-3-11-1 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-10-4 {
+._l1klj84-3-11-1 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-10-4 {
+._l1klj85-3-11-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-10-4 {
+._l1klj86-3-11-1 {
   height: 100%;
 }
-._l1klj87-3-10-4 {
+._l1klj87-3-11-1 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-10-4 {
+._l1klj88-3-11-1 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-10-4 {
+._l1klj89-3-11-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-10-4 {
+._l1klj8a-3-11-1 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-10-4:hover {
+._l1klj8a-3-11-1:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-10-4 {
+._l1klj8b-3-11-1 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-10-4:hover {
+._l1klj8b-3-11-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-10-4 {
+._l1klj8c-3-11-1 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-10-4:hover {
+._l1klj8c-3-11-1:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/charts/core/components/chart-layout/components/styles.sty.js

@@ -25,7 +25,7 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-10-4", variantClassNames: { loading: { true: "_l1klj81-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj87-3-10-4", vertical: "_l1klj88-3-10-4" }, loading: { true: "_l1klj89-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-10-4", vertical: "_l1klj8c-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj83-3-10-4", vertical: "_l1klj84-3-10-4" }, loading: { true: "_l1klj85-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-11-1", variantClassNames: { loading: { true: "_l1klj81-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-1", vertical: "_l1klj88-3-11-1" }, loading: { true: "_l1klj89-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-1", vertical: "_l1klj8c-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-11-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-1", vertical: "_l1klj84-3-11-1" }, loading: { true: "_l1klj85-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/chart-layout/hooks/useAutomaticRatio.js

@@ -30,13 +30,18 @@ const useAutomaticRatio = (orientation, ratio, containerAvailableArea) => {
   const [idealLegendSize, setIdealLegendSize] = (0, import_react.useState)(
     void 0
   );
-  const resetAutoRatio = () => {
+  const readyForAutoRatioRef = (0, import_react.useRef)(readyForAutoRatio);
+  readyForAutoRatioRef.current = readyForAutoRatio;
+  const resetAutoRatio = (0, import_react.useCallback)(() => {
+    if (!readyForAutoRatioRef.current) {
+      return;
+    }
     setReadyForAutoRatio(false);
     setIdealLegendSize(void 0);
-  };
+  }, []);
   (0, import_react.useEffect)(() => {
     resetAutoRatio();
-  }, [orientation]);
+  }, [orientation, resetAutoRatio]);
   const legendNodeRef = (0, import_react.useRef)(null);
   const legendRef = (0, import_react.useCallback)((node) => {
     legendNodeRef.current = node;

package/charts/core/components/chart-layout/types/chart-layout.d.ts

@@ -1,16 +1,16 @@
 import { type AriaRole, type JSX, type ReactNode, type PropsWithChildren, ExoticComponent } from 'react';
+import type { AriaLabelingProps } from '../../../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../../../core/types/masking-props.js';
 import type { Orientation } from '../../../../../core/types/orientation.js';
 import type { StylingProps } from '../../../../../core/types/styling-props.js';
-import type { AriaLabel } from '../../../types/aria-label.js';
 import type { Dimensions } from '../../../types/dimensions.js';
 import type { ChartLegendOrientation, LegendPosition, LegendRatio } from '../../../types/legend.js';
 /**
  * @internal
  */
-export interface ChartLayoutProps extends StylingProps, MaskingProps, DataTestId, AriaLabel, BehaviorTrackingProps {
+export interface ChartLayoutProps extends StylingProps, MaskingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Role of the chart container element.
      */

package/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-10-4 {
+._4pqs4v0-3-11-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-10-4 {
+._4pqs4v1-3-11-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-10-4 {
+._4pqs4v2-3-11-1 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-10-4 {
+._4pqs4v3-3-11-1 {
   position: relative;
   width: 100%;
 }

package/charts/core/components/chart-states/ChartState.sty.js

@@ -24,7 +24,7 @@ __export(ChartState_css_exports, {
 });
 module.exports = __toCommonJS(ChartState_css_exports);
 var import_ChartState_css_ts_vanilla = require("./ChartState.css");
-var container = "_4pqs4v3-3-10-4";
-var emptyText = "_4pqs4v1-3-10-4";
-var errorText = "_4pqs4v0-3-10-4";
-var wrapper = "_4pqs4v2-3-10-4";
+var container = "_4pqs4v3-3-11-1";
+var emptyText = "_4pqs4v1-3-11-1";
+var errorText = "_4pqs4v0-3-11-1";
+var wrapper = "_4pqs4v2-3-11-1";

package/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-10-4 {
+._nm3s3e0-3-11-1 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-10-4 {
+._nm3s3e1-3-11-1 {
   margin-left: -2px;
 }
-._nm3s3e2-3-10-4 {
+._nm3s3e2-3-11-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-10-4 {
+._nm3s3e3-3-11-1 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-10-4 {
+._nm3s3e4-3-11-1 {
   margin-top: -2px;
 }
-._nm3s3e5-3-10-4 {
+._nm3s3e5-3-11-1 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-10-4 {
+._nm3s3e6-3-11-1 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -28,11 +28,11 @@ __export(Magnifier_css_exports, {
 });
 module.exports = __toCommonJS(Magnifier_css_exports);
 var import_Magnifier_css_ts_vanilla = require("./Magnifier.css");
-var bottom = "_nm3s3e3-3-10-4";
-var left = "_nm3s3e1-3-10-4";
-var magnifier = "_nm3s3e0-3-10-4";
+var bottom = "_nm3s3e3-3-11-1";
+var left = "_nm3s3e1-3-11-1";
+var magnifier = "_nm3s3e0-3-11-1";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-10-4";
-var rotatedBottomStyle = "_nm3s3e6-3-10-4";
-var rotatedTopStyle = "_nm3s3e5-3-10-4";
-var top = "_nm3s3e4-3-10-4";
+var right = "_nm3s3e2-3-11-1";
+var rotatedBottomStyle = "_nm3s3e6-3-11-1";
+var rotatedTopStyle = "_nm3s3e5-3-11-1";
+var top = "_nm3s3e4-3-11-1";

package/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-10-4 {
+._nfahiq0-3-11-1 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-10-4 {
+._nfahiq1-3-11-1 {
   cursor: crosshair;
 }
-._nfahiq2-3-10-4 {
+._nfahiq2-3-11-1 {
   cursor: ew-resize;
 }
-._nfahiq3-3-10-4 {
+._nfahiq3-3-11-1 {
   cursor: zoom-in;
 }
-._nfahiq4-3-10-4 {
+._nfahiq4-3-11-1 {
   cursor: zoom-out;
 }

package/charts/core/components/interactions-overlay/InteractionsOverlay.js

@@ -43,6 +43,7 @@ var import_get_zoom_interactions = require("./utils/get-zoom-interactions.js");
 var import_handle_keydown = require("./utils/handle-keydown.js");
 var import_is_own_event = require("./utils/is-own-event.js");
 var import_useMergeRefs = require("../../../../core/hooks/useMergeRefs.js");
+var import_ChartVariantContext = require("../../context/ChartVariantContext.js");
 var import_usePointerEvents = require("../../hooks/usePointerEvents.js");
 var import_usePreventScrollOnWheel = require("../../hooks/usePreventScrollOnWheel.js");
 const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -85,6 +86,7 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
   const [cursorMode, setCursorMode] = (0, import_react.useState)(
     mode
   );
+  const { crosshair: crosshairConfig } = (0, import_react.useContext)(import_ChartVariantContext.ChartVariantContext);
   const htmlRef = (0, import_react.useRef)(null);
   (0, import_usePreventScrollOnWheel.usePreventScrollOnWheel)(htmlRef);
   const rootRef = (0, import_useMergeRefs.useMergeRefs)([htmlRef, forwardedRef]);
@@ -222,13 +224,15 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
     "div",
     {
       ref: rootRef,
-      role: "presentation",
       tabIndex: 0,
       className: (0, import_clsx.default)(
         (0, import_InteractionsOverlay_css.chartEventsWrapper)({ mode: cursorMode }),
         className
       ),
-      style,
+      style: {
+        ...style,
+        cursor: cursorMode === "explore" ? crosshairConfig?.cursor : void 0
+      },
       onMouseDown: (event) => {
         if ((0, import_is_own_event.isOwnEvent)(event)) {
           isPointerDownRef.current = true;

package/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -23,5 +23,5 @@ __export(InteractionsOverlay_css_exports, {
 module.exports = __toCommonJS(InteractionsOverlay_css_exports);
 var import_InteractionsOverlay_css_ts_vanilla = require("./InteractionsOverlay.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-10-4", variantClassNames: { mode: { explore: "_nfahiq1-3-10-4", pan: "_nfahiq2-3-10-4", zoom: "_nfahiq3-3-10-4", zoomOut: "_nfahiq4-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-10-4";
+var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-11-1", variantClassNames: { mode: { explore: "_nfahiq1-3-11-1", pan: "_nfahiq2-3-11-1", zoom: "_nfahiq3-3-11-1", zoomOut: "_nfahiq4-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-11-1";

package/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-10-4 {
+._9x5f9b0-3-11-1 {
   display: flex;
   align-items: center;
   width: 100%;

package/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -21,4 +21,4 @@ __export(ChartLegend_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegend_css_exports);
 var import_ChartLegend_css_ts_vanilla = require("./ChartLegend.css");
-var legendContainer = "_9x5f9b0-3-10-4";
+var legendContainer = "_9x5f9b0-3-11-1";

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,12 +1,12 @@
-._1wmibjy0-3-10-4 {
+._1wmibjy0-3-11-1 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-10-4 {
+._1wmibjy1-3-11-1 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-10-4 {
+._1wmibjy2-3-11-1 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js

@@ -23,6 +23,6 @@ __export(ChartLegendIcon_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegendIcon_css_exports);
 var import_ChartLegendIcon_css_ts_vanilla = require("./ChartLegendIcon.css");
-var coloredEyeOffIcon = "_1wmibjy1-3-10-4";
-var eyeIcon = "_1wmibjy0-3-10-4";
-var singleDimensionIcon = "_1wmibjy2-3-10-4";
+var coloredEyeOffIcon = "_1wmibjy1-3-11-1";
+var eyeIcon = "_1wmibjy0-3-11-1";
+var singleDimensionIcon = "_1wmibjy2-3-11-1";

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.css

@@ -1,4 +1,4 @@
-._mt8v6g0-3-10-4 {
+._mt8v6g0-3-11-1 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -19,23 +19,23 @@
   padding: var(--dt-spacings-size-2, 2px);
   width: fit-content;
 }
-._mt8v6g1-3-10-4 {
+._mt8v6g1-3-11-1 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6g1-3-10-4:disabled {
+._mt8v6g1-3-11-1:disabled {
   cursor: auto;
 }
-._mt8v6g2-3-10-4 {
+._mt8v6g2-3-11-1 {
   cursor: pointer;
 }
-._mt8v6g2-3-10-4:hover {
+._mt8v6g2-3-11-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._mt8v6g3-3-10-4 {
+._mt8v6g3-3-11-1 {
   cursor: auto;
 }
-._mt8v6g4-3-10-4 {
+._mt8v6g4-3-11-1 {
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-0, 0);
   min-width: var(--dt-spacings-size-20, 20px);
@@ -45,27 +45,27 @@
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   line-height: var(--dt-typography-text-small-emphasized-line-height, 1.333333333);
 }
-._mt8v6g4-3-10-4:hover {
+._mt8v6g4-3-11-1:hover {
   cursor: auto;
 }
-._mt8v6g5-3-10-4:hover {
+._mt8v6g5-3-11-1:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   cursor: pointer;
 }
-._mt8v6g6-3-10-4:hover {
+._mt8v6g6-3-11-1:hover {
   background-color: unset;
   cursor: auto;
 }
-._mt8v6g7-3-10-4 {
+._mt8v6g7-3-11-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._mt8v6g8-3-10-4 {
+._mt8v6g8-3-11-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._mt8v6g4-3-10-4 > .button-children {
+._mt8v6g4-3-11-1 > .button-children {
   flex-grow: 1;
 }
-._mt8v6g9-3-10-4 {
+._mt8v6g9-3-11-1 {
   line-height: 2;
   white-space: nowrap;
   display: flex;
@@ -74,10 +74,10 @@
   flex-shrink: 1;
   height: var(--dt-spacings-size-20, 20px);
 }
-._mt8v6g9-3-10-4 > ._mt8v6g1-3-10-4 {
+._mt8v6g9-3-11-1 > ._mt8v6g1-3-11-1 {
   flex: 0 0 auto;
 }
-._mt8v6ga-3-10-4 {
+._mt8v6ga-3-11-1 {
   flex: 1 1 auto;
   white-space: nowrap;
   display: flex;
@@ -85,7 +85,7 @@
   overflow: hidden;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._mt8v6gb-3-10-4 {
+._mt8v6gb-3-11-1 {
   flex-shrink: 1;
   text-align: left;
   overflow: hidden;

package/charts/core/components/legend/categorical/components/ChartLegendItem/ChartLegendItem.sty.js

@@ -30,9 +30,9 @@ var import_focusRingStatic_css_ts_vanilla = require("../../../../../../../core/s
 var import_ChartLegendItem_css_ts_vanilla = require("./ChartLegendItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var ItemFontStyles = { fontWeight: "var(--dt-typography-text-small-emphasized-weight, 500)", fontSize: "var(--dt-typography-text-small-emphasized-size, 12px)", fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", lineHeight: "var(--dt-typography-text-small-emphasized-line-height, 1.333333333)" };
-var baseLegendButton = "_mt8v6g0-3-10-4 _z0fq9b4-3-10-4 _z0fq9bd-3-10-4 _z0fq9b6-3-10-4 _z0fq9b9-3-10-4";
-var legendItem = "_mt8v6g9-3-10-4";
-var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-10-4", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-10-4", false: "_mt8v6g3-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-10-4", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-10-4", false: "_mt8v6g6-3-10-4" }, isSubdued: { true: "_mt8v6g7-3-10-4", false: "_mt8v6g8-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendNameButtonOverride = "_mt8v6gb-3-10-4";
-var legendNameWrapper = "_mt8v6ga-3-10-4";
+var baseLegendButton = "_mt8v6g0-3-11-1 _z0fq9b4-3-11-1 _z0fq9bd-3-11-1 _z0fq9b6-3-11-1 _z0fq9b9-3-11-1";
+var legendItem = "_mt8v6g9-3-11-1";
+var legendItemButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g1-3-11-1", variantClassNames: { isInteractive: { true: "_mt8v6g2-3-11-1", false: "_mt8v6g3-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_mt8v6g4-3-11-1", variantClassNames: { isInteractive: { true: "_mt8v6g5-3-11-1", false: "_mt8v6g6-3-11-1" }, isSubdued: { true: "_mt8v6g7-3-11-1", false: "_mt8v6g8-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendNameButtonOverride = "_mt8v6gb-3-11-1";
+var legendNameWrapper = "_mt8v6ga-3-11-1";

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.css

@@ -1,10 +1,10 @@
-._yo3l7h0-3-10-4 {
+._yo3l7h0-3-11-1 {
   padding: var(--dt-spacings-size-2, 2px);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._yo3l7h1-3-10-4 {
+._yo3l7h1-3-11-1 {
   visibility: visible;
 }
-._yo3l7h2-3-10-4 {
+._yo3l7h2-3-11-1 {
   visibility: hidden;
 }

package/charts/core/components/legend/categorical/components/ChartLegendSeriesActions/ChartLegendSeriesActions.sty.js

@@ -22,4 +22,4 @@ __export(ChartLegendSeriesActions_css_exports, {
 module.exports = __toCommonJS(ChartLegendSeriesActions_css_exports);
 var import_ChartLegendSeriesActions_css_ts_vanilla = require("./ChartLegendSeriesActions.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-10-4", variantClassNames: { visible: { true: "_yo3l7h1-3-10-4", false: "_yo3l7h2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var seriesButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_yo3l7h0-3-11-1", variantClassNames: { visible: { true: "_yo3l7h1-3-11-1", false: "_yo3l7h2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.css

@@ -1,30 +1,30 @@
-._igjrsj0-3-10-4 {
+._igjrsj0-3-11-1 {
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
-._igjrsj1-3-10-4 {
+._igjrsj1-3-11-1 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._igjrsj2-3-10-4 {
+._igjrsj2-3-11-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._igjrsj3-3-10-4 {
+._igjrsj3-3-11-1 {
   position: relative;
 }
-._igjrsj4-3-10-4 {
+._igjrsj4-3-11-1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
 }
-._igjrsj5-3-10-4 {
+._igjrsj5-3-11-1 {
   display: grid;
 }
-._igjrsj6-3-10-4 {
+._igjrsj6-3-11-1 {
   margin-top: var(--dt-spacings-size-8, 8px);
 }
-._igjrsj7-3-10-4 {
+._igjrsj7-3-11-1 {
   margin-top: var(--dt-spacings-size-0, 0);
 }

package/charts/core/components/legend/categorical/components/ChartVirtualizedLegendGrid.sty.js

@@ -25,7 +25,7 @@ __export(ChartVirtualizedLegendGrid_css_exports, {
 module.exports = __toCommonJS(ChartVirtualizedLegendGrid_css_exports);
 var import_ChartVirtualizedLegendGrid_css_ts_vanilla = require("./ChartVirtualizedLegendGrid.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-10-4", variantClassNames: { layout: { horizontal: "_igjrsj1-3-10-4", vertical: "_igjrsj2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-10-4", variantClassNames: { layout: { horizontal: "_igjrsj6-3-10-4", vertical: "_igjrsj7-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var virtualizedGrid = "_igjrsj3-3-10-4";
-var virtualizedRow = "_igjrsj4-3-10-4";
+var legendContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj0-3-11-1", variantClassNames: { layout: { horizontal: "_igjrsj1-3-11-1", vertical: "_igjrsj2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendGrid = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_igjrsj5-3-11-1", variantClassNames: { layout: { horizontal: "_igjrsj6-3-11-1", vertical: "_igjrsj7-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var virtualizedGrid = "_igjrsj3-3-11-1";
+var virtualizedRow = "_igjrsj4-3-11-1";

package/charts/core/components/legend/range/RangeLegend.css

@@ -1,13 +1,13 @@
-._lvrd9i0-3-10-4 {
+._lvrd9i0-3-11-1 {
   display: flex;
   align-items: center;
   padding: var(--dt-spacings-size-8, 8px);
   box-sizing: border-box;
   margin: 0 auto;
 }
-._lvrd9i1-3-10-4 {
+._lvrd9i1-3-11-1 {
   flex-direction: row;
 }
-._lvrd9i2-3-10-4 {
+._lvrd9i2-3-11-1 {
   flex-direction: column;
 }

package/charts/core/components/legend/range/RangeLegend.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegend_css_exports, {
 module.exports = __toCommonJS(RangeLegend_css_exports);
 var import_RangeLegend_css_ts_vanilla = require("./RangeLegend.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-10-4", variantClassNames: { isVertical: { true: "_lvrd9i1-3-10-4", false: "_lvrd9i2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_lvrd9i0-3-11-1", variantClassNames: { isVertical: { true: "_lvrd9i1-3-11-1", false: "_lvrd9i2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.css

@@ -1,6 +1,6 @@
-._klb1cs1-3-10-4 {
+._klb1cs1-3-11-1 {
   visibility: hidden;
 }
-._klb1cs2-3-10-4 {
+._klb1cs2-3-11-1 {
   visibility: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendBoundaryLabel/RangeLegendBoundaryLabel.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendBoundaryLabel_css_exports, {
 module.exports = __toCommonJS(RangeLegendBoundaryLabel_css_exports);
 var import_RangeLegendBoundaryLabel_css_ts_vanilla = require("./RangeLegendBoundaryLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-10-4", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-10-4", false: "_klb1cs2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var boundaryLabel = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_klb1cs0-3-11-1", variantClassNames: { isMarkerShown: { true: "_klb1cs1-3-11-1", false: "_klb1cs2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.css

@@ -1,3 +1,3 @@
-._1itb2bi0-3-10-4 {
+._1itb2bi0-3-11-1 {
   overflow: visible;
 }

package/charts/core/components/legend/range/components/RangeLegendItemLabel/RangeLegendItemLabel.sty.js

@@ -21,4 +21,4 @@ __export(RangeLegendItemLabel_css_exports, {
 });
 module.exports = __toCommonJS(RangeLegendItemLabel_css_exports);
 var import_RangeLegendItemLabel_css_ts_vanilla = require("./RangeLegendItemLabel.css");
-var legendLabel = "_1itb2bi0-3-10-4";
+var legendLabel = "_1itb2bi0-3-11-1";

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.css

@@ -1,9 +1,9 @@
-._1kzx6wv0-3-10-4 {
+._1kzx6wv0-3-11-1 {
   overflow: visible;
 }
-._1kzx6wv1-3-10-4 {
+._1kzx6wv1-3-11-1 {
   visibility: visible;
 }
-._1kzx6wv2-3-10-4 {
+._1kzx6wv2-3-11-1 {
   visibility: hidden;
 }

package/charts/core/components/legend/range/components/RangeLegendItemMarker/RangeLegendItemMarker.sty.js

@@ -22,4 +22,4 @@ __export(RangeLegendItemMarker_css_exports, {
 module.exports = __toCommonJS(RangeLegendItemMarker_css_exports);
 var import_RangeLegendItemMarker_css_ts_vanilla = require("./RangeLegendItemMarker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-10-4", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-10-4", false: "_1kzx6wv2-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var legendMarker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1kzx6wv0-3-11-1", variantClassNames: { isMarkerShown: { true: "_1kzx6wv1-3-11-1", false: "_1kzx6wv2-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css

@@ -1,12 +1,12 @@
-._u32l830-3-10-4 {
+._u32l830-3-11-1 {
   overflow: visible;
   position: absolute;
 }
-._u32l831-3-10-4 {
+._u32l831-3-11-1 {
   width: 100%;
   height: 10px;
 }
-._u32l832-3-10-4 {
+._u32l832-3-11-1 {
   height: 100%;
   width: 10px;
 }